refactoring pointer events and input handling improvements

2025-01-26 19:07:27 -06:00 · 2025-01-26 19:07:27 -06:00 · 9618e07bc6
commit 9618e07bc6
parent 791830fd6f
11 changed files with 123 additions and 158 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -2,7 +2,7 @@
  <Debug />
  <Notifications />
  <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="isEditorShown = true"/>
+  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.active.value = true"/>
  <component :is="currentScreen" />
 </template>

@ -22,21 +22,20 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'

 const gameStore = useGameStore()
-
-const isEditorShown = ref(false)
+const mapEditor = useMapEditorComposable()

 const currentScreen = computed(() => {
  if (!gameStore.game.isLoaded) return Loading
  if (!gameStore.connection) return Login
  if (!gameStore.token) return Login
  if (!gameStore.character) return Characters
-  if (isEditorShown.value) return MapEditor
+  if (mapEditor.active.value) return MapEditor
  return Game
 })

 // Watch mapEditor.active and empty gameStore.game.loadedAssets
 watch(
-  () => isEditorShown.value,
+  () => mapEditor.active.value,
  () => {
    gameStore.game.loadedTextures = []
  }
--- a/src/components/gameMaster/mapEditor/Map.vue
+++ b/src/components/gameMaster/mapEditor/Map.vue
@ -1,5 +1,5 @@
 <template>
-  <MapTiles ref="mapTiles" :tileMap="tileMap" @tileMap:create="tileMap = $event" />
+  <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
@ -11,25 +11,16 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { onMounted, onUnmounted, shallowRef } from 'vue'
+import { onUnmounted, shallowRef, useTemplateRef} from 'vue'

-const mapEditor = useMapEditorComposable()
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-
-const selectedMap = ref<MapT>()
-const mapEditorStore = useMapEditorStore()
 const mapEditor = useMapEditorComposable()

 const mapTiles = useTemplateRef('mapTiles')
 const mapObjects = useTemplateRef('mapObjects')
 const eventTiles = useTemplateRef('eventTiles')

-const scene = useScene()
-
-
-
 function handlePointer(pointer: Phaser.Input.Pointer) {
-  if (!mapTiles.value || !mapObjects.value || !eventTiles.value) return
  // Check if left mouse button is pressed
  if (!pointer.isDown) return

@ -40,26 +31,16 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
  if (!pointer.event.altKey) return

  // Check if draw mode is tile
-  switch (mapEditorStore.drawMode) {
+  switch (mapEditor.drawMode.value) {
    case 'tile':
-      mapTiles.value.handlePointer(pointer)
+      mapTiles.value?.handlePointer(pointer)
    // case 'map_object':
    //   mapObjects.value.handlePointer(pointer)
    case 'event tile':
-      eventTiles.value.handlePointer(pointer)
+      eventTiles.value?.handlePointer(pointer)
  }
 }

-watch(() => mapEditor.currentMap, async (map) => {
-  if (!map.value) return
-  selectedMap.value = map.value
-})
-
-onMounted(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
-})
-
 onUnmounted(() => {
  mapEditor.reset()
 })
--- a/src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
@ -6,13 +6,12 @@
 import { MapEventTileType, type MapEventTile } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Image, useScene } from 'phavuer'
 import { type Map as MapT } from "@/application/types"
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { shallowRef, watch } from 'vue'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'

-const mapEditorStore = useMapEditorStore()
+const scene = useScene()
 const mapEditor = useMapEditorComposable()

 defineExpose({handlePointer})
@ -44,22 +43,22 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
  if (existingEventTile) return

  // If teleport, check if there is a selected map
-  if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
+  if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMapId) return

  const newEventTile = {
    id: uuidv4(),
    mapId: map?.id,
    map: map?.id,
-    type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
+    type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
    positionX: tile.x,
    positionY: tile.y,
    teleport:
-      mapEditorStore.drawMode === 'teleport'
+      mapEditor.drawMode.value === 'teleport'
        ? {
-            toMap: mapEditorStore.teleportSettings.toMapId,
-            toPositionX: mapEditorStore.teleportSettings.toPositionX,
-            toPositionY: mapEditorStore.teleportSettings.toPositionY,
-            toRotation: mapEditorStore.teleportSettings.toRotation
+            toMap: mapEditor.teleportSettings.value.toMapId,
+            toPositionX: mapEditor.teleportSettings.value.toPositionX,
+            toPositionY: mapEditor.teleportSettings.value.toPositionY,
+            toRotation: mapEditor.teleportSettings.value.toRotation
          }
        : undefined
  }
@ -91,12 +90,23 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
  // Check if shift is not pressed, this means we are moving the camera
  if (pointer.event.shiftKey) return

-  if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
+  if (mapEditor.drawMode.value !== 'blocking tile' && mapEditor.drawMode.value !== 'teleport') return

-  switch (mapEditorStore.tool) {
+  switch (mapEditor.tool.value) {
    case 'pencil': pencil(pointer, map)
    case 'eraser': erase(pointer, map)
  }
 }

+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointer)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
+})
+
+
 </script>
--- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
@ -34,7 +34,9 @@ function createTileMap() {
    format: Phaser.Tilemaps.Formats.ARRAY_2D
  })

-  return new Phaser.Tilemaps.Tilemap(scene, mapData)
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  emit('tileMap:create', newTileMap)
+  return newTileMap
 }

 async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
@ -55,81 +57,88 @@ async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
  return layer
 }

-function pencil(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
-  var map = mapEditor.currentMap.value
-  if (!map) return
-
-  // Check if there is a tile
-  const tile = tileLayer.getTileAtWorldXY(pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
-
-  // Adjust mapEditorStore.map.tiles
-  tileMap.tiles[tile.y][tile.x] = map.tiles[tile.y][tile.x]
-}
-
-function eraser(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
+function pencil(pointer: Phaser.Input.Pointer) {
  let map = mapEditor.currentMap.value
  if (!map) return

+  // Check if there is a selected tile
+  if (!mapEditor.selectedTile.value) return
+
+  console.log(tileMap.value, tileLayer.value)
+
+  if (!tileMap.value || !tileLayer.value) return
+
  // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
+
+  // Adjust mapEditorStore.map.tiles
+  map.tiles[tile.y][tile.x] = map.tiles[tile.y][tile.x]
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  let map = mapEditor.currentMap.value
+  if (!map) return
+
+  if (!tileMap.value || !tileLayer.value) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')

  // Adjust mapEditorStore.map.tiles
  map.tiles[tile.y][tile.x] = 'blank_tile'
 }

-function paint(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
+function paint(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
  // Set new tileArray with selected tile
-  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
+  const tileArray = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value)
+  setLayerTiles(tileMap.value, tileLayer.value, tileArray)

  // Adjust mapEditorStore.map.tiles
  if (mapEditor.currentMap.value) {
-    mapEditor.currentMap.value.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
+    mapEditor.currentMap.value.tiles = tileArray
  }
 }

 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
-function tilePicker(pointer: Phaser.Input.Pointer, tileLayer: Phaser.Tilemaps.TilemapLayer) {
+function tilePicker(pointer: Phaser.Input.Pointer) {
  let map = mapEditor.currentMap.value
  if (!map) return

  // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value!, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Select the tile
-  mapEditorStore.setSelectedTile(map.tiles[tile.y][tile.x])
+  mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
 }

 watch(
-  () => mapEditorStore.shouldClearTiles,
+  () => mapEditor.shouldClearTiles,
  (shouldClear) => {
    if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
      const blankTiles = createTileArray(tileLayer.value.width, tileLayer.value.height, 'blank_tile')
      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
      mapEditor.currentMap.value.tiles = blankTiles
-      mapEditorStore.resetClearTilesFlag()
+      mapEditor.resetClearTilesFlag()
    }
  }
 )

 function handlePointer(pointer: Phaser.Input.Pointer) {
-  if (!mapEditor.currentMap.value) return

  if (!tileMap.value || !tileLayer.value) return

  // Check if tool is pencil
-  if (mapEditorStore.drawMode !== 'tile') return
-
-  // Check if there is a selected tile
-  if (!mapEditorStore.selectedTile) return
+  if (mapEditor.drawMode.value !== 'tile') return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return
@ -138,24 +147,26 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
  if (pointer.event.shiftKey) return

  // Check if alt is pressed
-  if (!pointer.event.altKey) return
-
+  if (pointer.event.altKey) return
  // Check if draw mode is tile
-  switch (mapEditorStore.tool) {
+  switch (mapEditor.tool.value) {
    case 'pencil':
-      pencil(pointer, tileMap.value, tileLayer.value)
+      pencil(pointer)
+      break
    case 'eraser':
-      eraser(pointer, tileMap.value, tileLayer.value)
+      eraser(pointer)
+      break
    case 'paint':
-      paint(pointer, tileMap.value, tileLayer.value)
+      paint(pointer)
+      break
    case 'tile picker':
-      tilePicker(pointer, tileLayer.value)
+      tilePicker(pointer)
+      break
  }
 }

 onMounted(async () => {
-  if (!mapEditor.currentMap.value?.tiles) return
-  console.log(mapEditor.currentMap.value)
+  if (!mapEditor.currentMap.value) return

  tileMap.value = createTileMap()
  tileLayer.value = await createTileLayer(tileMap.value)
@ -174,9 +185,15 @@ onMounted(async () => {
  }

  setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
 })

 onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointer)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
+
  if (tileMap.value) {
    tileMap.value.destroyLayer('tiles')
    tileMap.value.removeAllLayers()
--- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
@ -1,6 +1,6 @@
 <template>
  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tilemap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
 </template>

 <script setup lang="ts">
@ -15,7 +15,6 @@ import { ref, watch } from 'vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'

 const scene = useScene()
-const mapEditorStore = useMapEditorStore()
 const mapEditor = useMapEditorComposable()
 const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
@ -39,7 +38,7 @@ function pencil(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.Til
    id: uuidv4(),
    depth: 0,
    map: map,
-    mapObject: mapEditorStore.selectedMapObject!,
+    mapObject: mapEditor.selectedMapObject.value!,
    isRotated: false,
    positionX: tile.x,
    positionY: tile.y
@ -72,7 +71,7 @@ function objectPicker(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilema
  if (!existingPlacedMapObject) return

  // Select the object
-  mapEditorStore.setSelectedMapObject(existingPlacedMapObject.mapObject)
+  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
 }

 function moveMapObject(id: string, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
@ -120,7 +119,7 @@ function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {

  // If alt is pressed, select the object
  if (scene.input.activePointer.event.altKey) {
-    mapEditorStore.setSelectedMapObject(placedMapObject.mapObject)
+    mapEditor.setSelectedMapObject(placedMapObject.mapObject)
  }
 }

@ -128,7 +127,7 @@ function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilem
  const map = mapEditor.currentMap.value
  if (!map) return

-  if (mapEditorStore.drawMode !== 'map_object') return
+  if (mapEditor.drawMode.value !== 'map_object') return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return
@ -140,9 +139,9 @@ function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilem
  if (pointer.event.altKey) return

  // Check if tool is pencil
-  switch (mapEditorStore.tool) {
+  switch (mapEditor.tool.value) {
    case 'pencil':
-      if (mapEditorStore.selectedMapObject) pencil(pointer, tileMapLayer, map)
+      if (mapEditor.selectedMapObject.value) pencil(pointer, tileMapLayer, map)
    case 'eraser':
      eraser(pointer, tileMapLayer, map)
    case 'object picker':
@ -176,11 +175,11 @@ watch(
    map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]

    // Update mapObject if it's set
-    if (mapEditorStore.selectedMapObject) {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
+    if (mapEditor.selectedMapObject.value) {
+      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id)
      if (updatedMapObject) {
-        mapEditorStore.setSelectedMapObject({
-          ...mapEditorStore.selectedMapObject,
+        mapEditor.setSelectedMapObject({
+          ...mapEditor.selectedMapObject.value,
          originX: updatedMapObject.positionX,
          originY: updatedMapObject.positionY
        })
--- a/src/components/gameMaster/mapEditor/partials/CreateMap.vue
+++ b/src/components/gameMaster/mapEditor/partials/CreateMap.vue
@ -40,12 +40,11 @@ import Modal from '@/components/utilities/Modal.vue'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'

 const emit = defineEmits(['create'])

 const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
 const mapStorage = new MapStorage()
 const modalRef = useTemplateRef('modalRef')

--- a/src/components/gameMaster/mapEditor/partials/MapSettings.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
@ -51,7 +51,7 @@ import type { UUID } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { ref, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'

 const mapEditor = useMapEditorComposable()
 const screen = ref('settings')
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@ -39,7 +39,7 @@
          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'eraser' }">(E)</span>
          <div class="select" v-if="mapEditor.tool.value === 'eraser'">
            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
-              {{ mapEditor.eraserMode.value.replace('_', ' ') }}
+              {{ mapEditor.drawMode.value.replace('_', ' ') }}
              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
            </div>
            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
@ -113,7 +113,7 @@ function setDrawMode(value: string) {

 // drawMode
 function setEraserMode(value: string) {
-  mapEditorStore.setTool('eraser')
+  mapEditor.setTool('eraser')
  selectEraserOpen.value = false
 }

@ -130,7 +130,7 @@ function handleClick(tool: string) {

 function cycleToolMode(tool: 'pencil' | 'eraser') {
  const modes = ['tile', 'object', 'teleport', 'blocking tile']
-  const currentIndex = modes.indexOf(mapEditorStore.drawMode)
+  const currentIndex = modes.indexOf(mapEditor.drawMode.value)
  const nextIndex = (currentIndex + 1) % modes.length
  const nextMode = modes[nextIndex]

--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@ -4,7 +4,7 @@
      <Scene name="main" @preload="preloadScene">
        <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
        <div v-else>
-          <Map :key="currentMap?.id" />
+          <Map :key="mapEditor.currentMap.value?.id" />
          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open()" @open-settings="mapSettingsModal?.open()"
                   @close-editor="$emit('close-editor')"
                   @open-tile-list="tileModal?.open()"
@ -36,13 +36,11 @@ import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { provide, ref, useTemplateRef, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'

 const mapStorage = new MapStorage()
 const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
-const mapEditorStore = useMapEditorStore()
-const currentMap = ref<MapT | null>(null)

 const toolbar = useTemplateRef("toolbar")
 const mapModal = useTemplateRef("mapModal")
@ -88,18 +86,19 @@ const preloadScene = async (scene: Phaser.Scene) => {
 }

 function save() {
-  if (!currentMap.value) return
+  const currentMap = mapEditor.currentMap.value
+  if (!currentMap) return

  const data = {
-    mapId: currentMap.value.id,
-    name: currentMap.value.name,
-    width: currentMap.value.width,
-    height: currentMap.value.height,
-    tiles: currentMap.value.tiles,
-    pvp: currentMap.value.pvp,
-    mapEffects: currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
-    mapEventTiles: currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
-    placedMapObjects: currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+    mapId: currentMap.id,
+    name: currentMap.name,
+    width: currentMap.width,
+    height: currentMap.height,
+    tiles: currentMap.tiles,
+    pvp: currentMap.pvp,
+    mapEffects: currentMap.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
  }

  gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
@ -107,13 +106,10 @@ function save() {
  })
 }

-watch(() => mapEditor.currentMap, (value) => { currentMap.value = value.value })
-
 function clear() {
-  if (!currentMap.value) return
+  if (!mapEditor.currentMap.value) return

  // Clear placed objects, event tiles and tiles
  mapEditor.clearMap()
-  mapEditor.triggerClearTiles()
 }
 </script>
--- a/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts
+++ b/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts
@ -28,7 +28,7 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
  }

  function handlePointerDown(pointer: Phaser.Input.Pointer) {
-    pointerStartPosition.value = pointer.position
+    pointerStartPosition.value = { x: pointer.x, y: pointer.y }
    if (isMoveTool.value || pointer.event.shiftKey) {
      gameStore.setPlayerDraggingCamera(true)
    }
@ -37,9 +37,11 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
  function dragMap(pointer: Phaser.Input.Pointer) {
    if (!gameStore.game.isPlayerDraggingCamera) return

+    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
+
    // If the distance is less than the drag threshold, return
    // We do this to prevent the camera from scrolling too quickly
-    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
+
    if (distance <= dragThreshold) return

    camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
--- a/src/composables/useMapEditorComposable.ts
+++ b/src/composables/useMapEditorComposable.ts
@ -12,14 +12,8 @@ const currentMap = ref<Map | null>(null)
 const active = ref(false)
 const tool = ref('move')
 const drawMode = ref('tile')
-const eraserMode = ref('tile')
 const selectedTile = ref('')
 const selectedMapObject = ref<MapObject | null>(null)
-const isTileListModalShown = ref(false)
-const isMapObjectListModalShown = ref(false)
-const isMapListModalShown = ref(false)
-const isCreateMapModalShown = ref(false)
-const isSettingsModalShown = ref(false)
 const shouldClearTiles = ref(false)
 const teleportSettings = ref<TeleportSettings>({
  toMapId: '',
@ -59,10 +53,6 @@ export function useMapEditorComposable() {
    drawMode.value = mode
  }

-  const setEraserMode = (mode: string) => {
-    eraserMode.value = mode
-  }
-
  const setSelectedTile = (tile: string) => {
    selectedTile.value = tile
  }
@ -71,19 +61,6 @@ export function useMapEditorComposable() {
    selectedMapObject.value = object
  }

-  const toggleSettingsModal = () => {
-    isSettingsModalShown.value = !isSettingsModalShown.value
-  }
-
-  const toggleMapListModal = () => {
-    isMapListModalShown.value = !isMapListModalShown.value
-    isCreateMapModalShown.value = false
-  }
-
-  const toggleCreateMapModal = () => {
-    isCreateMapModalShown.value = !isCreateMapModalShown.value
-  }
-
  const setTeleportSettings = (settings: TeleportSettings) => {
    teleportSettings.value = settings
  }
@ -101,11 +78,6 @@ export function useMapEditorComposable() {
    drawMode.value = 'tile'
    selectedTile.value = ''
    selectedMapObject.value = null
-    isTileListModalShown.value = false
-    isMapObjectListModalShown.value = false
-    isSettingsModalShown.value = false
-    isMapListModalShown.value = false
-    isCreateMapModalShown.value = false
    shouldClearTiles.value = false
  }

@ -115,14 +87,8 @@ export function useMapEditorComposable() {
    active,
    tool,
    drawMode,
-    eraserMode,
    selectedTile,
    selectedMapObject,
-    isTileListModalShown,
-    isMapObjectListModalShown,
-    isMapListModalShown,
-    isCreateMapModalShown,
-    isSettingsModalShown,
    shouldClearTiles,
    teleportSettings,

@ -133,12 +99,8 @@ export function useMapEditorComposable() {
    toggleActive,
    setTool,
    setDrawMode,
-    setEraserMode,
    setSelectedTile,
    setSelectedMapObject,
-    toggleSettingsModal,
-    toggleMapListModal,
-    toggleCreateMapModal,
    setTeleportSettings,
    triggerClearTiles,
    resetClearTilesFlag,