#236: Fixed clear button in map editor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -38,8 +38,10 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 function clear() {
   if (!zoneEditorStore.zone) return
 
+  // Clear objects, event tiles and tiles
   zoneEditorStore.zone.zoneObjects = []
   zoneEditorStore.zone.zoneEventTiles = []
+  zoneEditorStore.triggerClearTiles()
 }
 
 function save() {

src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue

@@ -6,7 +6,7 @@
 import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/gameStore'
@@ -175,6 +175,18 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
 }
 
+watch(
+  () => zoneEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && zoneEditorStore.zone) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      zoneEditorStore.zone.tiles = blankTiles
+      zoneEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
 onMounted(() => {
   if (!zoneEditorStore.zone?.tiles) {
     return

src/stores/zoneEditorStore.ts

@@ -12,7 +12,7 @@ export type TeleportSettings = {
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => {
     return {
-      active: false,
+      active: true,
       zone: null as Zone | null,
       tool: 'move',
       drawMode: 'tile',
@@ -27,6 +27,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       isZoneListModalShown: false,
       isCreateZoneModalShown: false,
       isSettingsModalShown: false,
+      shouldClearTiles: false,
       zoneSettings: {
         name: '',
         width: 0,
@@ -106,6 +107,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setTeleportSettings(teleportSettings: TeleportSettings) {
       this.teleportSettings = teleportSettings
     },
+    triggerClearTiles() {
+      this.shouldClearTiles = true
+    },
+
+    resetClearTilesFlag() {
+      this.shouldClearTiles = false
+    },
     reset(resetZone = false) {
       if (resetZone) this.zone = null
       this.zoneList = []
@@ -118,6 +126,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false
       this.isCreateZoneModalShown = false
+      this.shouldClearTiles = false
     }
   }
 })