From 35f0dcca6496743161f2dd22f2205536f4bd609d Mon Sep 17 00:00:00 2001 From: Andrei Date: Sun, 26 Jan 2025 21:21:24 -0600 Subject: [PATCH] Hierarchical pointer handling logic --- src/components/gameMaster/mapEditor/Map.vue | 27 ++++++++++++++----- .../mapEditor/mapPartials/MapEventTiles.vue | 19 +++---------- .../mapEditor/mapPartials/MapTiles.vue | 8 ------ .../mapPartials/PlacedMapObjects.vue | 24 ++++++++++------- 4 files changed, 37 insertions(+), 41 deletions(-) diff --git a/src/components/gameMaster/mapEditor/Map.vue b/src/components/gameMaster/mapEditor/Map.vue index 3485224..bc18ba1 100644 --- a/src/components/gameMaster/mapEditor/Map.vue +++ b/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() 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) - // case 'map_object': - // mapObjects.value.handlePointer(pointer) - case 'event tile': - eventTiles.value?.handlePointer(pointer) + mapTiles.value.handlePointer(pointer) + case 'object': + mapObjects.value.handlePointer(pointer) + case 'teleport': + 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() }) + diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue index d63d711..e45ac87 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue +++ b/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 'eraser': erase(pointer, map) + case 'pencil': pencil(pointer, map) ; break + 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) -}) - - diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue index 347222a..72b6214 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue +++ b/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() diff --git a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue index 871d85b..4249071 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue +++ b/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(null) const movingPlacedMapObject = ref(null) +const tileLayer = ref() + 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 } }