zoneEditor UX improvements

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -23,8 +23,8 @@
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
   <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('lol')" />
-  <Tiles v-if="(zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
-  <Objects v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'object'" />
+  <Tiles v-if="zoneEditorStore.isTileListModalShown" />
+  <Objects v-if="zoneEditorStore.isObjectListModalShown" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
 </template>
@@ -36,13 +36,13 @@ import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, watch } from 'vue
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
 import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
-import Tiles from '@/components/utilities/zoneEditor/partials/Tiles.vue'
+import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
 import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
 import { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
-import Objects from '@/components/utilities/zoneEditor/partials/Objects.vue'
+import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
 import type { ZoneEventTile, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
+    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isObjectListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="260">
       <template #modalHeader>
         <h3 class="text-lg">Objects</h3>
         <div class="flex">

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="600">
+    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isTileListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="600">
       <template #modalHeader>
         <h3 class="text-lg">Tiles</h3>
         <div class="flex">

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

@@ -104,6 +104,12 @@ let selectEraserOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
+  if (value === 'tile') {
+    zoneEditorStore.isTileListModalShown = true
+  }
+  if (value === 'object') {
+    zoneEditorStore.isObjectListModalShown = true
+  }
   zoneEditorStore.setDrawMode(value)
   selectPencilOpen.value = false
   selectEraserOpen.value = false