Major refractor, cleaning and improvements.

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -3,7 +3,7 @@ import { getTile, tileToWorldXY } from '@/services/zone'
 import { useGameStore } from '@/stores/game'
 import config from '@/config'
 
-export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>) {
+export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
   const gameStore = useGameStore()
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
@@ -18,7 +18,16 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     }
   }
 
+  function dragZone(pointer: Phaser.Input.Pointer) {
+    if (isDragging.value) {
+      const { x, y, prevPosition } = pointer
+      const { scrollX, scrollY, zoom } = camera.value
+      camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
+    }
+  }
+
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    dragZone(pointer)
     updateWaypoint(pointer)
   }
 

src/composables/useCameraControls.ts

@@ -12,7 +12,7 @@ export function useCameraControls(scene: Phaser.Scene): any {
   const MOVE_RESET_DELAY = 100
 
   function onPointerDown(pointer: Phaser.Input.Pointer) {
-    if (pointer.event instanceof MouseEvent || pointer.event.altKey) {
+    if (pointer.event instanceof MouseEvent || pointer.event.shiftKey) {
       pointerDownTimer = setTimeout(() => {
         isDragging.value = true
         gameStore.setMovingCamera(true)

src/composables/usePointerHandlers.ts

@@ -1,30 +1,32 @@
-import { computed, type Ref } from 'vue'
+import { computed, type Ref, watch } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGamePointerHandlers } from '@/composables/pointerHandlers/useGamePointerHandlers'
 import { useZoneEditorPointerHandlers } from '@/composables/pointerHandlers/useZoneEditorPointerHandlers'
+import { useGameStore } from '@/stores/game'
 
 export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
+  const gameStore = useGameStore()
   const zoneEditorStore = useZoneEditorStore()
-  const isZoneEditorActive = computed(() => zoneEditorStore.active)
 
-  const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
+  const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera, isDragging)
   const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
 
+  let currentHandlers = computed(() => zoneEditorStore.active ? zoneEditorHandlers : gameHandlers)
+
   const setupPointerHandlers = () => {
-    if (isZoneEditorActive.value) {
-      zoneEditorHandlers.setupPointerHandlers()
-    } else {
-      gameHandlers.setupPointerHandlers()
-    }
+    currentHandlers.value.setupPointerHandlers()
   }
 
   const cleanupPointerHandlers = () => {
-    if (isZoneEditorActive.value) {
-      zoneEditorHandlers.cleanupPointerHandlers()
-    } else {
-      gameHandlers.cleanupPointerHandlers()
-    }
+    currentHandlers.value.cleanupPointerHandlers()
   }
 
+  watch(() => zoneEditorStore.active, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      cleanupPointerHandlers()
+      setupPointerHandlers()
+    }
+  })
+
   return { setupPointerHandlers, cleanupPointerHandlers }
-}
+}