refactoring pointer events and input handling improvements

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>