Update origin X and Y values in real-time

src/components/game/map/partials/PlacedMapObject.vue

@@ -10,7 +10,7 @@ import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -69,6 +69,13 @@ const imageProps = computed(() => ({
   originY: mapObject.value!.originY
 }))
 
+watch(
+  () => mapEditor.refreshMapObject.value,
+  async () => {
+    await initialize()
+  }
+)
+
 onMounted(async () => {
   await initialize()
 })

src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue

@@ -4,7 +4,7 @@
       <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>
-      <button @mousedown.stop @click="showMapObjectSettings = true" class="btn-indigo py-1.5 px-4">
+      <button @mousedown.stop @click="showMapObjectSettings = !showMapObjectSettings" class="btn-indigo py-1.5 px-4">
         <img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" alt="Delete" />
       </button>
       <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
@@ -12,7 +12,7 @@
     </div>
   </div>
 
-  <Modal :is-modal-open="showMapObjectSettings" :modal-height="320" bg-style="none">
+  <Modal :is-modal-open="showMapObjectSettings" @modal:close="showMapObjectSettings = false" :modal-height="320" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
     </template>
@@ -90,12 +90,12 @@ async function handleUpdate() {
     },
     async (response: boolean) => {
       if (!response) return
-      // Update mapObject in storage
       await mapObjectStorage.update(mapObject.value!.id, {
         name: mapObjectName.value,
         originX: mapObjectOriginX.value,
         originY: mapObjectOriginY.value
       })
+      mapEditor.triggerMapObjectRefresh() // Add this line
     }
   )
 }

src/composables/useMapEditorComposable.ts

@@ -25,6 +25,12 @@ const teleportSettings = ref<TeleportSettings>({
   toRotation: 0
 })
 
+/**
+ * We can update origin X and Y in src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+ * and this will trigger a refresh for spawned mao objects
+ */
+const refreshMapObject = ref(0)
+
 export function useMapEditorComposable() {
   const loadMap = (map: Map) => {
     currentMap.value = map
@@ -79,6 +85,10 @@ export function useMapEditorComposable() {
     shouldClearTiles.value = false
   }
 
+  function triggerMapObjectRefresh() {
+    refreshMapObject.value++ // Increment to trigger watchers
+  }
+
   const reset = () => {
     tool.value = 'move'
     drawMode.value = 'tile'
@@ -86,6 +96,7 @@ export function useMapEditorComposable() {
     selectedTile.value = ''
     selectedMapObject.value = null
     shouldClearTiles.value = false
+    refreshMapObject.value = 0
   }
 
   return {
@@ -101,6 +112,7 @@ export function useMapEditorComposable() {
     selectedPlacedObject,
     shouldClearTiles,
     teleportSettings,
+    refreshMapObject,
 
     // Methods
     loadMap,
@@ -115,6 +127,7 @@ export function useMapEditorComposable() {
     setTeleportSettings,
     triggerClearTiles,
     resetClearTilesFlag,
+    triggerMapObjectRefresh,
     reset
   }
 }