Working on zone selecting

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,21 +1,18 @@
 <template>
-  <div v-if="zoneEditorStore.zone">
+  <div v-if="isLoaded">
     <TilemapLayerC :tilemap="zoneTilemap" :tileset="tilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
     <Controls :layer="tiles" />
 
     <Container>
       <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
     </Container>
+  </div>
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
   <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
   <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
-  </div>
-  <div v-else>
-    No zone selected. Please select a zone to edit.
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -33,21 +30,15 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import type { Object, Zone, ZoneObject } from '@/types'
+import type { Zone, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
 
-type ZoneObject = {
-  id: number
-  object: Object
-  position_x: number
-  position_y: number
-}
-
 const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
+const isLoaded = ref(false)
 
 const zoneTilemap = ref<Phaser.Tilemaps.Tilemap | null>(null)
 const tiles = ref<TilemapLayer | null>(null)
@@ -60,7 +51,26 @@ socket.connection.emit('gm:zone_editor:zone:request', {zoneId: 1}, (response: Zo
   zoneEditorStore.setZone(response)
 })
 
+function clearLayer(layer: Phaser.Tilemaps.TilemapLayer) {
+  const width = layer.layer.width;
+  const height = layer.layer.height;
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      layer.removeTileAt(x, y, true, true);
+    }
+  }
+}
+
 function addMapTiles(width: number, height: number) {
+  if (tiles.value) {
+    clearLayer(tiles.value)
+  }
+
+  if (zoneTilemap.value) {
+    zoneTilemap.value?.removeAllLayers()
+  }
+
   let tileCount = 1
   toRaw(assetStore.assets).forEach((asset) => {
     if (asset.group !== 'tiles') return
@@ -75,6 +85,8 @@ function addMapTiles(width: number, height: number) {
 }
 
 function initializeTilemap() {
+  isLoaded.value = false;
+
   if (!zoneEditorStore.zone) {
     resetTilemap()
     return
@@ -117,6 +129,8 @@ function initializeTilemap() {
   const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
   const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
   scene.cameras.main.centerOn(centerX, centerY)
+
+  isLoaded.value = true
 }
 
 function resetTilemap() {
@@ -166,12 +180,12 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 
   if (zoneEditorStore.drawMode === 'object') {
     if (zoneEditorStore.selectedObject === null) return
-    zoneObjects.value.push({
+    // zoneObjects.value.push({
-      id: zoneObjects.value.length + 1,
+    //   id: zoneObjects.value.length + 1,
-      object: zoneEditorStore.selectedObject,
+    //   object: zoneEditorStore.selectedObject,
-      position_x: tileToWorldXY(tiles.value, tile.x, tile.y).position_x,
+    //   position_x: tileToWorldXY(tiles.value, tile.x, tile.y).position_x,
-      position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y
+    //   position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y
-    })
+    // })
   }
 }