Refactoring of modalShown booleans

src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
+    <Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
 </template>
 
 <script setup lang="ts">
@@ -8,62 +8,55 @@ import { uuidv4 } from '@/application/utilities'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Image, useScene } from 'phavuer'
-import { onMounted, onUnmounted } from 'vue'
+import { type Map as MapT } from "@/application/types"
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { shallowRef, watch } from 'vue'
 
-const scene = useScene()
 const mapEditorStore = useMapEditorStore()
+const mapEditor = useMapEditorComposable()
+
+defineExpose({handlePointer})
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
 }>()
 
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+
 function getImageProps(tile: MapEventTile) {
   return {
-    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
-    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
+    x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
+    y: tileToWorldY(props.tileMap, tile.positionX, tile.positionY),
     texture: tile.type,
     depth: 999
   }
 }
 
-function pencil(pointer: Phaser.Input.Pointer) {
-  // Check if map is set
-  if (!mapEditorStore.map) return
-
-  // Check if tool is pencil
-  if (mapEditorStore.tool !== 'pencil') return
-
-  // Check if draw mode is blocking tile or teleport
-  if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
+function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
+  if (!tileLayer.value) return
 
   // Check if there is a tile
-  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Check if event tile already exists on position
-  const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
   if (existingEventTile) return
 
   // If teleport, check if there is a selected map
-  if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMap) return
+  if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
 
   const newEventTile = {
     id: uuidv4(),
-    mapId: mapEditorStore.map.id,
-    map: mapEditorStore.map,
+    mapId: map?.id,
+    map: map?.id,
     type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
     positionX: tile.x,
     positionY: tile.y,
     teleport:
       mapEditorStore.drawMode === 'teleport'
         ? {
-            toMap: mapEditorStore.teleportSettings.toMap,
+            toMap: mapEditorStore.teleportSettings.toMapId,
             toPositionX: mapEditorStore.teleportSettings.toPositionX,
             toPositionY: mapEditorStore.teleportSettings.toPositionY,
             toRotation: mapEditorStore.teleportSettings.toRotation
@@ -71,18 +64,26 @@ function pencil(pointer: Phaser.Input.Pointer) {
         : undefined
   }
 
-  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
+  map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
 }
 
-function eraser(pointer: Phaser.Input.Pointer) {
-  // Check if map is set
-  if (!mapEditorStore.map) return
+function erase(pointer: Phaser.Input.Pointer, map: MapT) {
+  if (!tileLayer.value) return
+  // Check if there is a tile
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  if (!tile) return
 
-  // Check if tool is pencil
-  if (mapEditorStore.tool !== 'eraser') return
+  // Check if event tile already exists on position
+  const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (!existingEventTile) return
 
-  // Check if draw mode is blocking tile or teleport
-  if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') return
+  // Remove existing event tile
+  map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+}
+
+function handlePointer(pointer: Phaser.Input.Pointer) {
+  const map = mapEditor.currentMap.value
+  if (!map) return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
@@ -90,29 +91,12 @@ function eraser(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
-  // Check if there is a tile
-  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
-  if (!tile) return
+  if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
 
-  // Check if event tile already exists on position
-  const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
-  if (!existingEventTile) return
-
-  // Remove existing event tile
-  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+  switch (mapEditorStore.tool) {
+    case 'pencil': pencil(pointer, map)
+    case 'eraser': erase(pointer, map)
+  }
 }
 
-onMounted(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
-})
-
-onUnmounted(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
-})
 </script>