npm update, modal bug fix, separated logics for easier maintainability, modal fe bugfix

src/components/utilities/Controls.vue

@@ -4,23 +4,17 @@
 
 <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 { onBeforeUnmount, ref } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useGameStore } from '@/stores/game'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
+import { useCameraControls } from '@/composables/useCameraControls'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
 }
 
 const props = defineProps<Props>()
-
 const scene = useScene()
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const { tool } = storeToRefs(zoneEditorStore)
 
 const waypoint = ref({
   visible: false,
@@ -28,132 +22,9 @@ const waypoint = ref({
   y: 0
 })
 
-const cam = ref(scene.cameras.main)
-const isDragging = ref(false)
-let pointerDownTimer: number | null = null
-let pointerUpTimer: number | null = null
+const { camera, isDragging } = useCameraControls(scene)
+const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera, isDragging)
 
-const DRAG_DELAY = 150
-const MOVE_RESET_DELAY = 100
-const CAMERA_SPEED = 4 // Adjust this value to change arrow key movement speed
-
-function updateWaypoint(pointer: Phaser.Input.Pointer) {
-  const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
-  const pointerTile = getTile(px, py, props.layer)
-
-  if (!pointerTile) {
-    waypoint.value.visible = false
-    return
-  }
-
-  const worldPoint = tileToWorldXY(props.layer, pointerTile.x, pointerTile.y)
-  waypoint.value = {
-    visible: true,
-    x: worldPoint.position_x,
-    y: worldPoint.position_y + config.tile_size.y + 15
-  }
-}
-
-function dragZone(pointer: Phaser.Input.Pointer) {
-  if (!isDragging.value) return
-  const { x, y, prevPosition } = pointer
-  cam.value.scrollX -= (x - prevPosition.x) / cam.value.zoom
-  cam.value.scrollY -= (y - prevPosition.y) / cam.value.zoom
-}
-
-function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
-  if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
-    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
-    cam.value = scene.cameras.main
-  }
-}
-
-function onPointerDown(pointer: Phaser.Input.Pointer) {
-  if (pointer.event instanceof MouseEvent && (pointer.event.altKey || tool.value === 'move')) {
-    pointerDownTimer = setTimeout(() => {
-      isDragging.value = true
-      gameStore.setMovingCamera(true)
-      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-    }, DRAG_DELAY)
-  }
-}
-
-function onPointerUp() {
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  isDragging.value = false
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-  }
-
-  pointerUpTimer = setTimeout(() => {
-    gameStore.setMovingCamera(false)
-  }, MOVE_RESET_DELAY)
-}
-
-function handleKeyboardInput() {
-  const cursors = scene.input.keyboard?.createCursorKeys()
-
-  if (!cursors) return
-
-  if (cursors.left.isDown) {
-    cam.value.scrollX -= CAMERA_SPEED
-  }
-  if (cursors.right.isDown) {
-    cam.value.scrollX += CAMERA_SPEED
-  }
-  if (cursors.up.isDown) {
-    cam.value.scrollY -= CAMERA_SPEED
-  }
-  if (cursors.down.isDown) {
-    cam.value.scrollY += CAMERA_SPEED
-  }
-
-  if (cursors.left.isDown || cursors.right.isDown || cursors.up.isDown || cursors.down.isDown) {
-    gameStore.setMovingCamera(true)
-  } else {
-    gameStore.setMovingCamera(false)
-  }
-}
-
-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, onPointerDown)
-  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.events.on(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-}
-
-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, onPointerDown)
-  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-  scene.events.off(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-    pointerUpTimer = null
-  }
-}
-
-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)
-  }
-})
-
-setupEventListeners()
-onBeforeUnmount(cleanupEventListeners)
+setupPointerHandlers()
+onBeforeUnmount(cleanupPointerHandlers)
 </script>