Few more UX improvements

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -94,18 +94,18 @@ watch(objectList, (newObjects) => {
 })
 
 function eraser(tile: Phaser.Tilemaps.Tile) {
-  if (zoneEditorStore.drawMode === 'tile') {
+  if (zoneEditorStore.eraserMode === 'tile') {
     placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
     zoneTiles[tile.y][tile.x] = 'blank_tile'
   }
 
-  if (zoneEditorStore.drawMode === 'object') {
+  if (zoneEditorStore.eraserMode === 'object') {
     zoneObjects.value = zoneObjects.value.filter((object) => {
       return object.position_x !== tile.x || object.position_y !== tile.y
     })
   }
 
-  if (zoneEditorStore.drawMode === 'blocking tile') {
+  if (zoneEditorStore.eraserMode === 'blocking tile') {
     zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
       return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
     })

src/components/utilities/zoneEditor/partials/ObjectList.vue

@@ -9,10 +9,10 @@
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
               <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
             </div>
-            <div>
+<!--            <div>-->
-              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>
+<!--              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
-              <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />
+<!--              <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
-            </div>
+<!--            </div>-->
           </div>
         </div>
       </template>
@@ -58,12 +58,12 @@ const gameStore = useGameStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
-const objectDepth = ref(0)
+// const objectDepth = ref(0)
 const selectedTags = ref<string[]>([])
 
-watch(objectDepth, (depth) => {
+// watch(objectDepth, (depth) => {
-  zoneEditorStore.setObjectDepth(depth)
+//   zoneEditorStore.setObjectDepth(depth)
-})
+// })
 
 const uniqueTags = computed(() => {
   const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])

src/components/utilities/zoneEditor/partials/Toolbar.vue

@@ -39,23 +39,23 @@
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
-              {{ zoneEditorStore.drawMode }}
+              {{ zoneEditorStore.eraserMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('tile')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('object')">
                 Object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('teleport')">
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -112,6 +112,11 @@ function setDrawMode(value: string) {
   }
   zoneEditorStore.setDrawMode(value)
   selectPencilOpen.value = false
+}
+
+// drawMode
+function setEraserMode(value: string) {
+  zoneEditorStore.setEraserMode(value)
   selectEraserOpen.value = false
 }
 

src/stores/zoneEditor.ts

@@ -8,6 +8,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     zone: null as Zone | null,
     tool: 'move',
     drawMode: 'tile',
+    eraserMode: 'tile',
     zoneList: [] as Zone[],
     tileList: [] as Tile[],
     objectList: [] as Object[],
@@ -55,6 +56,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setDrawMode(mode: string) {
       this.drawMode = mode
     },
+    setEraserMode(mode: string) {
+      this.eraserMode = mode
+    },
     setZoneList(zones: Zone[]) {
       this.zoneList = zones
     },