zoneEditor reactivity fixes

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -67,8 +67,8 @@ const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eras
 
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
-let zoneObjects = <ZoneObject[]>[]
+const zoneObjects = ref<ZoneObject[]>([])
-let zoneEventTiles = <ZoneEventTile[]>[]
+const zoneEventTiles = ref<ZoneEventTile[]>([])
 let tileArray = createTileArray()
 
 const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
@@ -125,9 +125,9 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
     placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile')
     tileArray[tile.y][tile.x] = 'blank_tile'
   } else if (eraserMode.value === 'object') {
-    zoneObjects = zoneObjects.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
+    zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
   } else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
-    zoneEventTiles = zoneEventTiles.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
+    zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
   }
 }
 
@@ -144,7 +144,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 
 function addZoneObject(tile: Phaser.Tilemaps.Tile) {
   // Check if object already exists on position
-  const existingObject = zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
   if (existingObject) return
 
   const newObject = {
@@ -157,12 +157,13 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
     positionX: tile.x,
     positionY: tile.y
   }
-  zoneObjects = [...new Set([...zoneObjects, newObject])]
+  // Add new object to zoneObjects
+  zoneObjects.value = zoneObjects.value.concat(newObject)
 }
 
 function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
   // Check if event tile already exists on position
-  const existingEventTile = zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
   if (existingEventTile) return
 
   const newEventTile = {
@@ -181,7 +182,7 @@ function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
           }
         : undefined
   }
-  zoneEventTiles = [...new Set([...zoneEventTiles, newEventTile])] as any
+  zoneEventTiles.value = zoneEventTiles.value.concat(newEventTile as any)
 }
 
 function paint() {
@@ -213,8 +214,8 @@ function save() {
     height: zoneEditorStore.zoneSettings.height,
     tiles: tileArray,
     pvp: zone.value.pvp,
-    zoneEventTiles: zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
+    zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
-    zoneObjects: zoneObjects.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
+    zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
   }
 
   if (zoneEditorStore.isSettingsModalShown) {
@@ -237,16 +238,16 @@ function clear() {
     }
   }
 
-  zoneEventTiles = []
+  zoneEventTiles.value = []
-  zoneObjects = []
+  zoneObjects.value = []
 }
 
 function updateZoneObjectDepth(depth: number) {
-  zoneObjects = zoneObjects.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
+  zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
 }
 
 function deleteZoneObject(objectId: string) {
-  zoneObjects = zoneObjects.filter((object) => object.id !== objectId)
+  zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
 }
 
 function handleMove() {
@@ -261,8 +262,8 @@ onBeforeMount(async () => {
     tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
   }
 
-  zoneEventTiles = zone.value?.zoneEventTiles ?? []
+  zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
-  zoneObjects = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
+  zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
 
   // Center camera
   const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
@@ -271,8 +272,8 @@ onBeforeMount(async () => {
 })
 
 onUnmounted(() => {
-  zoneEventTiles = []
+  zoneEventTiles.value = []
-  zoneObjects = []
+  zoneObjects.value = []
   tiles?.destroy()
   zoneTilemap?.removeAllLayers()
   zoneTilemap?.destroy()
@@ -283,7 +284,7 @@ onUnmounted(() => {
 watch(
   objectList,
   (newObjects) => {
-    zoneObjects = zoneObjects.map((zoneObject) => {
+    zoneObjects.value = zoneObjects.value.map((zoneObject) => {
       const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
       if (updatedObject) {
         return {