Added quick editor logics for zoneObjects

src/components/utilities/zoneEditor/SelectedZoneObject.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col items-center p-5 fixed bottom-6 mx-6 right-0">
+    <div class="self-end mt-2 flex gap-2">
+      <div>
+        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
+        <input
+          v-model="objectDepth"
+          @mousedown.stop
+          @input="handleDepthInput"
+          class="input-cyan max-w-[90px] px-2 py-1 border rounded"
+          type="number"
+          name="depth"
+          placeholder="Depth"
+          :disabled="!isObjectSelected"
+        />
+      </div>
+      <button
+        @mousedown.stop
+        @click="handleDelete"
+        class="btn-cyan py-1.5 px-[15px] min-w-[100px]"
+        :disabled="!isObjectSelected"
+      >
+        Delete
+      </button>
+      <button
+        @mousedown.stop
+        @click="handleMove"
+        class="btn-cyan py-1.5 px-[15px] min-w-[100px]"
+        :disabled="!isObjectSelected"
+      >
+        Move
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { ref, computed, watch } from 'vue'
+
+const emit = defineEmits(['update_depth', 'move', 'delete'])
+const zoneEditorStore = useZoneEditorStore()
+
+const objectDepth = ref(zoneEditorStore.objectDepth)
+
+const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
+
+watch(() => zoneEditorStore.selectedZoneObject, (selectedZoneObject) => {
+  objectDepth.value = selectedZoneObject?.depth ?? 0
+})
+
+const handleDepthInput = () => {
+  const depth = parseFloat(objectDepth.value)
+  if (!isNaN(depth)) {
+    emit('update_depth', depth)
+  }
+}
+
+const handleMove = () => {
+  emit('move')
+}
+
+const handleDelete = () => {
+  emit('delete', zoneEditorStore.selectedZoneObject?.id)
+  zoneEditorStore.setSelectedZoneObject(null)
+}
+</script>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -4,6 +4,7 @@
 
   <Container :depth="2">
     <Image
+      :tint="zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff"
       v-for="object in zoneObjects"
       :depth="object.depth"
       :key="object.object.id"
@@ -12,6 +13,7 @@
       :texture="object.object.id"
       :originY="Number(object.object.origin_x)"
       :originX="Number(object.object.origin_y)"
+      @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
     />
   </Container>
 
@@ -20,6 +22,7 @@
   </Container>
 
   <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.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" />
@@ -34,6 +37,7 @@ import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
+import SelectedZoneObject from '@/components/utilities/zoneEditor/SelectedZoneObject.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
@@ -217,6 +221,19 @@ function clear() {
   zoneObjects.value = []
 }
 
+function updateZoneObjectDepth(depth: number) {
+  zoneObjects.value = zoneObjects.value.map((object) => {
+    if (object.id === zoneEditorStore.selectedZoneObject?.id) {
+      return { ...object, depth }
+    }
+    return object
+  })
+}
+
+function deleteZoneObject(objectId: string) {
+  zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
+}
+
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
   zoneTiles = exampleTilesArray

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',

src/stores/zoneEditor.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { Zone, Object, Tile } from '@/types'
+import type { Zone, Object, Tile, ZoneObject } from '@/types'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
@@ -12,6 +12,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     objectList: [] as Object[],
     selectedTile: null as Tile | null,
     selectedObject: null as Object | null,
+    selectedZoneObject: null as ZoneObject | null,
     objectDepth: 0,
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
@@ -60,6 +61,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setSelectedObject(object: any) {
       this.selectedObject = object
     },
+    setSelectedZoneObject(zoneObject: ZoneObject) {
+      this.selectedZoneObject = zoneObject
+    },
     setObjectDepth(depth: number) {
       this.objectDepth = depth
     },
@@ -81,6 +85,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.drawMode = 'tile'
       this.selectedTile = null
       this.selectedObject = null
+      this.selectedZoneObject = null
       this.objectDepth = 0
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false