Typescript improvements, added move zone object logic.

src/components/gameMaster/zoneEditor/Objects.vue

@@ -1,5 +1,5 @@
 <template>
-  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
   <Image
     v-for="object in zoneEditorStore.zone?.zoneObjects"
     v-bind="getObjectImageProps(object)"
@@ -19,6 +19,7 @@ import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
 const selectedZoneObject = ref<ZoneObject | null>(null)
+const movingZoneObject = ref<ZoneObject | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -26,11 +27,11 @@ const props = defineProps<{
 
 function getObjectImageProps(object: ZoneObject) {
   return {
-    // alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
+    alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
     depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
     tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
-    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
+    x: tileToWorldX(props.tilemap, object.positionX, object.positionY),
+    y: tileToWorldY(props.tilemap, object.positionX, object.positionY),
     flipX: object.isRotated,
     texture: object.object.id,
     originY: Number(object.object.originX),
@@ -76,6 +77,49 @@ function addZoneObject(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
 }
 
+function moveZoneObject(id: string) {
+  if (!zoneEditorStore.zone) return
+  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (!movingZoneObject.value) return
+
+    const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+    if (!tile) return
+
+    movingZoneObject.value.positionX = tile.x
+    movingZoneObject.value.positionY = tile.y
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+
+  function handlePointerUp() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    movingZoneObject.value = null
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+}
+
+function rotateZoneObject(id: string) {
+  if (!zoneEditorStore.zone) return
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
+    if (object.id === id) {
+      return {
+        ...object,
+        isRotated: !object.isRotated
+      }
+    }
+    return object
+  })
+}
+
+function deleteZoneObject(id: string) {
+  if (!zoneEditorStore.zone) return
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
+  selectedZoneObject.value = null
+}
+
 onBeforeMount(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
@@ -88,14 +132,14 @@ onBeforeUnmount(() => {
 
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
 watch(
-  zoneEditorStore.objectList,
+  () => zoneEditorStore.objectList,
   (newObjects) => {
-    // Check if zoneEditorStore.zone is set
     if (!zoneEditorStore.zone) return
 
-    // Update zoneObjects
-    zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
-      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
+    console.log('Updating zone objects')
+
+    const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
       if (updatedObject) {
         return {
           ...zoneObject,
@@ -109,6 +153,12 @@ watch(
       return zoneObject
     })
 
+    // Update the zone with the new zoneObjects
+    zoneEditorStore.setZone({
+      ...zoneEditorStore.zone,
+      zoneObjects: updatedZoneObjects
+    })
+
     // Update selectedObject if it's set
     if (zoneEditorStore.selectedObject) {
       const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)

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

@@ -1,10 +1,6 @@
 <template>
   <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
     <div class="self-end mt-2 flex gap-2">
-      <div>
-        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
-        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
-      </div>
       <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
@@ -15,38 +11,23 @@
 </template>
 
 <script setup lang="ts">
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { ref, computed, watch } from 'vue'
+import type { ZoneObject } from '@/types'
 
-const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
-const zoneEditorStore = useZoneEditorStore()
+const props = defineProps<{
+  zoneObject: ZoneObject
+}>()
 
-const objectDepth = ref(zoneEditorStore.objectDepth)
+const emit = defineEmits(['move', 'rotate', 'delete'])
 
-watch(
-  () => zoneEditorStore.selectedZoneObject,
-  (selectedZoneObject) => {
-    objectDepth.value = selectedZoneObject?.depth ?? 0
-  }
-)
-
-const handleDepthInput = () => {
-  const depth = parseFloat(objectDepth.value.toString())
-  if (!isNaN(depth)) {
-    emit('update_depth', depth)
-  }
+const handleMove = () => {
+  emit('move', props.zoneObject.id)
 }
 
 const handleRotate = () => {
-  emit('rotate', zoneEditorStore.selectedZoneObject?.id)
-}
-
-const handleMove = () => {
-  emit('move', zoneEditorStore.selectedZoneObject?.id)
+  emit('rotate', props.zoneObject.id)
 }
 
 const handleDelete = () => {
-  emit('delete', zoneEditorStore.selectedZoneObject?.id)
-  zoneEditorStore.setSelectedZoneObject(null)
+  emit('delete', props.zoneObject.id)
 }
 </script>

src/composables/zoneComposable.ts

@@ -11,21 +11,27 @@ export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Ti
   return tile
 }
 
-export function tileToWorldXY(layer: TilemapLayer, pos_x: number, pos_y: number) {
+export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) {
   const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return { positionX: 0, positionY: 0 }
+
   const positionX = worldPoint.x + config.tile_size.y
   const positionY = worldPoint.y
 
   return { positionX, positionY }
 }
 
-export function tileToWorldX(layer: TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
   const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return 0
+
   return worldPoint.x + config.tile_size.x / 2
 }
 
-export function tileToWorldY(layer: TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
   const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return 0
+
   return worldPoint.y + config.tile_size.y * 1.5
 }