Refractor and improve controls component

src/components/utilities/Controls.vue

@@ -1,91 +1,100 @@
 <template>
-  <Image :depth="2" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
+  <Image
+    :depth="2"
+    texture="waypoint"
+    :x="waypoint.x"
+    :y="waypoint.y"
+    :visible="waypoint.visible"
+  />
 </template>
 
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
 import config from '@/config'
 import { getTile, tileToWorldXY } from '@/services/zone'
-import { useZoneStore } from '@/stores/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 
-const zoneStore = useZoneStore()
+const props = defineProps<{
-const zoneEditorStore = useZoneEditorStore()
-const scene = useScene()
-const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
-})
+}>()
+
+const scene = useScene()
+const zoneEditorStore = useZoneEditorStore()
+const { tool } = storeToRefs(zoneEditorStore)
+
 const waypoint = ref({
   visible: false,
   x: 0,
   y: 0
 })
 
-function onPointerMove(pointer: Phaser.Input.Pointer) {
+const cam = ref(scene.cameras.main)
-  const px = scene.cameras.main.worldView.x + pointer.x
-  const py = scene.cameras.main.worldView.y + pointer.y
 
-  const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+function updateWaypoint(pointer: Phaser.Input.Pointer) {
-  if (!pointer_tile) {
+  const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
+  const pointerTile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+
+  if (!pointerTile) {
     waypoint.value.visible = false
     return
   }
 
-  waypoint.value.visible = true
+  const worldPoint = tileToWorldXY(props.layer, pointerTile.x, pointerTile.y)
-
+  waypoint.value = {
-  // Convert tile coordinates to world coordinates
+    visible: true,
-  const worldPoint = tileToWorldXY(props.layer, pointer_tile.x, pointer_tile.y)
+    x: worldPoint.position_x,
-  waypoint.value.x = worldPoint.position_x
+    y: worldPoint.position_y + config.tile_size.y + 15
-  waypoint.value.y = worldPoint.position_y + config.tile_size.y + 15
+  }
 }
 
-scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
-
-// Zone camera system
 function dragZone(pointer: Phaser.Input.Pointer) {
   if (!pointer.isDown) return
-  cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom
+  const { x, y, prevPosition } = pointer
-  cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom
+  cam.value.scrollX -= (x - prevPosition.x) / cam.value.zoom
+  cam.value.scrollY -= (y - prevPosition.y) / cam.value.zoom
 }
-let cam = scene.cameras.main
-scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
 
-watch(
+function handleZoom(pointer: Phaser.Input.Pointer, _: any, __: any, deltaY: number) {
-  () => zoneEditorStore.tool,
+  if (pointer.event.altKey) {
-  () => {
+    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
-    // @TODO : change to zone for when loading other maps
+    cam.value = scene.cameras.main
-    if (zoneEditorStore.tool === 'move') {
+  }
+}
+
+function setupEventListeners() {
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+  scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, (pointer: Phaser.Input.Pointer) => {
+    if (pointer.event.altKey || tool.value === 'move') {
+      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+    }
+  })
+
+  scene.input.on(Phaser.Input.Events.POINTER_UP, () => {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+  })
+}
+
+function cleanupEventListeners() {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN)
+  scene.input.off(Phaser.Input.Events.POINTER_UP)
+  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+}
+
+setupEventListeners()
+
+watch(tool, (newTool) => {
+  if (newTool === 'move') {
     scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
   } else {
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
   }
-  },
-  { deep: true }
-)
-
-// if ctrl is pressed and mouse is down , then drag the zone
-scene.input.on(Phaser.Input.Events.POINTER_DOWN, (pointer: Phaser.Input.Pointer) => {
-  if (pointer.event.altKey) {
-    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  } else if (zoneEditorStore.tool !== 'move') {
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  }
 })
 
-/**
+onBeforeUnmount(cleanupEventListeners)
- * Zoom in and out
- */
-scene.input.on(Phaser.Input.Events.POINTER_WHEEL, (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[], deltaX: number, deltaY: number) => {
-  if (pointer.event.altKey) {
-    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
-    cam = scene.cameras.main
-  }
-})
-
-// Unload funcs
-onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-})
 </script>