Hierarchical pointer handling logic

src/components/gameMaster/mapEditor/Map.vue

@@ -11,16 +11,21 @@ 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 { onUnmounted, shallowRef, useTemplateRef} from 'vue'
+import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
+import { useScene } from 'phavuer'
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const mapEditor = useMapEditorComposable()
 
+const scene = useScene()
+
 const mapTiles = useTemplateRef('mapTiles')
 const mapObjects = useTemplateRef('mapObjects')
 const eventTiles = useTemplateRef('eventTiles')
 
 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
 
@@ -28,20 +33,28 @@ 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 (mapEditor.drawMode.value) {
     case 'tile':
-      mapTiles.value?.handlePointer(pointer)
+      mapTiles.value.handlePointer(pointer)
-    // case 'map_object':
+    case 'object':
-    //   mapObjects.value.handlePointer(pointer)
+      mapObjects.value.handlePointer(pointer)
-    case 'event tile':
+    case 'teleport':
-      eventTiles.value?.handlePointer(pointer)
+      eventTiles.value.handlePointer(pointer)
   }
 }
 
+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)
   mapEditor.reset()
 })
+
 </script>

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

@@ -9,9 +9,8 @@ import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable
 import { Image, useScene } from 'phavuer'
 import { type Map as MapT } from "@/application/types"
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+import { shallowRef} from 'vue'
 
-const scene = useScene()
 const mapEditor = useMapEditorComposable()
 
 defineExpose({handlePointer})
@@ -93,20 +92,8 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   if (mapEditor.drawMode.value !== 'blocking tile' && mapEditor.drawMode.value !== 'teleport') return
 
   switch (mapEditor.tool.value) {
-    case 'pencil': pencil(pointer, map)
+    case 'pencil': pencil(pointer, map) ; break
-    case 'eraser': erase(pointer, map)
+    case 'eraser': erase(pointer, map) ; break
   }
 }
-
-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>

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

@@ -64,8 +64,6 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // 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
@@ -185,15 +183,9 @@ 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()

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

@@ -9,7 +9,6 @@ import { uuidv4 } from '@/application/utilities'
 import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
 import { getTile } from '@/composables/mapComposable'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
 import { ref, watch } from 'vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
@@ -19,15 +18,17 @@ const mapEditor = useMapEditorComposable()
 const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 
+const tileLayer = ref<Phaser.Tilemaps.TilemapLayer>()
+
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
 }>()
 
 defineExpose({handlePointer})
 
-function pencil(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
+function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if there is a tile
-  const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Check if object already exists on position
@@ -48,7 +49,7 @@ function pencil(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.Til
   map.placedMapObjects.concat(newPlacedMapObject)
 }
 
-function eraser(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
+function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if there is a tile
   const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -61,7 +62,7 @@ function eraser(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.Til
   map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
 }
 
-function objectPicker(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
+function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if there is a tile
   const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -74,7 +75,7 @@ function objectPicker(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilema
   mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
 }
 
-function moveMapObject(id: string, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
+function moveMapObject(id: string, map: MapT) {
   movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
@@ -123,7 +124,7 @@ function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
   }
 }
 
-function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer) {
+function handlePointer(pointer: Phaser.Input.Pointer) {
   const map = mapEditor.currentMap.value
   if (!map) return
 
@@ -141,11 +142,14 @@ function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilem
   // Check if tool is pencil
   switch (mapEditor.tool.value) {
     case 'pencil':
-      if (mapEditor.selectedMapObject.value) pencil(pointer, tileMapLayer, map)
+      if (mapEditor.selectedMapObject.value) pencil(pointer, map)
+      break
     case 'eraser':
-      eraser(pointer, tileMapLayer, map)
+      eraser(pointer, map)
+      break
     case 'object picker':
-      objectPicker(pointer, tileMapLayer, map)
+      objectPicker(pointer, map)
+      break 
   }
 }