Works partially 💩

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
+  <Toolbar :layer="tiles" @eraser="eraser" @move="move" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
 
   <template v-if="zoneEditorStore.zone">
@@ -29,7 +29,16 @@ import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import {
+  calculateIsometricDepth,
+  getTile,
+  loadAssets,
+  placeTile,
+  setAllTiles,
+  sortByIsometricDepth,
+  tileToWorldX,
+  tileToWorldY
+} from '@/composables/zoneComposable'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
@@ -45,6 +54,8 @@ import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
 import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+import InputManager = Phaser.Input.InputManager
+import MouseManager = Phaser.Input.Mouse.MouseManager
 
 /**
  * @TODO:
@@ -57,12 +68,12 @@ const zoneEditorStore = useZoneEditorStore()
 
 const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
 
+const movingZoneObject = ref<ZoneObject|null>(null);
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 const zoneObjects = ref<ZoneObject[]>([])
 const zoneEventTiles = ref<ZoneEventTile[]>([])
 let tileArray = createTileArray()
-
 const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
 
 function createTilemap() {
@@ -95,6 +106,7 @@ function createTileArray() {
 
 function getObjectImageProps(object: ZoneObject) {
   return {
+    alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
     tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
     x: tileToWorldX(zoneTilemap as any, object.positionX, object.positionY),
     y: tileToWorldY(zoneTilemap as any, object.positionX, object.positionY),
@@ -123,6 +135,10 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
   }
 }
 
+function move(_tile: Phaser.Tilemaps.Tile) {
+  movingZoneObject.value = null;
+}
+
 function pencil(tile: Phaser.Tilemaps.Tile) {
   if (drawMode.value === 'tile' && selectedTile.value) {
     placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, selectedTile.value.id)
@@ -245,8 +261,11 @@ function deleteZoneObject(objectId: string) {
   zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
 }
 
-function handleMove() {
+function handleMove(objectId: string) {
-  console.log('move btn clicked')
+  const object = zoneObjects.value.find((obj) => obj.id === objectId)
+  if (object) {
+    movingZoneObject.value = object;
+  }
 }
 
 function handleRotate(objectId: string) {
@@ -299,12 +318,28 @@ const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
 onBeforeMount(async () => {
   await gameStore.fetchAllZoneAssets()
   await loadAssets(scene)
+  console.log('loaded assets')
 
   tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
 
   if (zone.value?.tiles) {
     setAllTiles(zoneTilemap, tiles, zone.value.tiles)
     tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
+
+    function handlePointerMove(pointer: Phaser.Input.Pointer) {
+      const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
+      const pointerTile = getTile(px, py, zoneTilemap as any)
+      if (pointerTile) {
+        console.log(pointerTile.x, pointerTile.y)
+        if(movingZoneObject.value) {
+          movingZoneObject.value.positionX = pointerTile.x
+          movingZoneObject.value.positionY = pointerTile.y
+        }
+      }
+    }
+    setTimeout(() => {
+      scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    })
   }
 
   zoneEventTiles.value = zone.value?.zoneEventTiles ?? []

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -42,7 +42,7 @@ const handleRotate = () => {
 }
 
 const handleMove = () => {
-  emit('move')
+  emit('move', zoneEditorStore.selectedZoneObject?.id);
 }
 
 const handleDelete = () => {

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -120,7 +120,7 @@ function setEraserMode(value: string) {
 }
 
 function clickTile(pointer: Phaser.Input.Pointer) {
-  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
+  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'move' &&  zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
   if (pointer.event.shiftKey) return
 
   const px = scene.cameras.main.worldView.x + pointer.x
@@ -129,6 +129,10 @@ function clickTile(pointer: Phaser.Input.Pointer) {
   const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
   if (!pointer_tile) return
 
+  if (zoneEditorStore.tool === 'move') {
+    emit('move', pointer_tile)
+  }
+
   if (zoneEditorStore.tool === 'eraser') {
     emit('eraser', pointer_tile)
   }