npm update, mobile scroll fix, zone editor object refactor work, removed redundant div

src/components/gameMaster/zoneEditor/Objects.vue

@@ -1,6 +1,10 @@
 <template>
   <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
-  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" />
+  <Image
+    v-for="object in zoneEditorStore.zone?.zoneObjects"
+    v-bind="getObjectImageProps(object)"
+    @pointerup="() => selectedZoneObject = object"
+  />
 </template>
 
 <script setup lang="ts">
@@ -10,7 +14,7 @@ import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
@@ -24,9 +28,10 @@ function getObjectImageProps(object: ZoneObject) {
   return {
     // alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
     depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
-    tint: selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff,
+    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),
+    flipX: object.isRotated,
     texture: object.object.id,
     originY: Number(object.object.originX),
     originX: Number(object.object.originY)
@@ -80,4 +85,42 @@ onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
 })
+
+// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
+watch(
+  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)
+      if (updatedObject) {
+        return {
+          ...zoneObject,
+          object: {
+            ...zoneObject.object,
+            originX: updatedObject.originX,
+            originY: updatedObject.originY
+          }
+        }
+      }
+      return zoneObject
+    })
+
+    // Update selectedObject if it's set
+    if (zoneEditorStore.selectedObject) {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
+      if (updatedObject) {
+        zoneEditorStore.setSelectedObject({
+          ...zoneEditorStore.selectedObject,
+          originX: updatedObject.originX,
+          originY: updatedObject.originY
+        })
+      }
+    }
+  },
+  { deep: true }
+)
 </script>