From f2f5569c4a131ade6b409d893ba2152433846a6f Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 21 Aug 2024 21:18:31 +0200
Subject: [PATCH] zoneEditor UX improvements

---
 package-lock.json                                    | 12 ++++++------
 src/components/utilities/zoneEditor/ZoneEditor.vue   |  8 ++++----
 .../partials/{Objects.vue => ObjectList.vue}         |  2 +-
 .../zoneEditor/partials/{Tiles.vue => TileList.vue}  |  2 +-
 .../utilities/zoneEditor/partials/Toolbar.vue        |  6 ++++++
 src/composables/usePointerHandlers.ts                |  2 +-
 src/config.ts                                        |  2 +-
 src/stores/zoneEditor.ts                             |  2 ++
 8 files changed, 22 insertions(+), 14 deletions(-)
 rename src/components/utilities/zoneEditor/partials/{Objects.vue => ObjectList.vue} (97%)
 rename src/components/utilities/zoneEditor/partials/{Tiles.vue => TileList.vue} (97%)

diff --git a/package-lock.json b/package-lock.json
index 25be2b8..6035ddf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3385,9 +3385,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.12",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
-      "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
       "dev": true,
       "license": "ISC"
     },
@@ -4310,9 +4310,9 @@
       }
     },
     "node_modules/i18next-http-backend": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.0.tgz",
-      "integrity": "sha512-WX5pXYNrAz2fj8ajsAuCIsogOEvJL+aHw4RTQAD/uqPoLV1FHqa6IsUULTfa3GtREVQbApp0U3woLhz9EuR2pQ==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.1.tgz",
+      "integrity": "sha512-rCilMAnlEQNeKOZY1+x8wLM5IpYOj10guGvEpeC59tNjj6MMreLIjIW8D1RclhD3ifLwn6d/Y9HEM1RUE6DSog==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index d5df297..2b26dbe 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/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'
diff --git a/src/components/utilities/zoneEditor/partials/Objects.vue b/src/components/utilities/zoneEditor/partials/ObjectList.vue
similarity index 97%
rename from src/components/utilities/zoneEditor/partials/Objects.vue
rename to src/components/utilities/zoneEditor/partials/ObjectList.vue
index b8364da..1099c80 100644
--- a/src/components/utilities/zoneEditor/partials/Objects.vue
+++ b/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">
diff --git a/src/components/utilities/zoneEditor/partials/Tiles.vue b/src/components/utilities/zoneEditor/partials/TileList.vue
similarity index 97%
rename from src/components/utilities/zoneEditor/partials/Tiles.vue
rename to src/components/utilities/zoneEditor/partials/TileList.vue
index 392a2ab..df54217 100644
--- a/src/components/utilities/zoneEditor/partials/Tiles.vue
+++ b/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">
diff --git a/src/components/utilities/zoneEditor/partials/Toolbar.vue b/src/components/utilities/zoneEditor/partials/Toolbar.vue
index d307709..e6bb7fa 100644
--- a/src/components/utilities/zoneEditor/partials/Toolbar.vue
+++ b/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
diff --git a/src/composables/usePointerHandlers.ts b/src/composables/usePointerHandlers.ts
index 2bd08a6..a13e5f6 100644
--- a/src/composables/usePointerHandlers.ts
+++ b/src/composables/usePointerHandlers.ts
@@ -1,5 +1,5 @@
 import config from '@/config'
-import { computed, ref, type Ref, watch } from 'vue'
+import { computed, type Ref, watch } from 'vue'
 import { getTile, tileToWorldXY } from '@/services/zone'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
diff --git a/src/config.ts b/src/config.ts
index 4a929c1..763f5d6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',
diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts
index 3adfbf1..d27e493 100644
--- a/src/stores/zoneEditor.ts
+++ b/src/stores/zoneEditor.ts
@@ -15,6 +15,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     selectedObject: null as Object | null,
     selectedZoneObject: null as ZoneObject | null,
     objectDepth: 0,
+    isTileListModalShown: false,
+    isObjectListModalShown: false,
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
     isSettingsModalShown: false