#102 - Various zone editor UX improvements and bug fixes

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -3,7 +3,7 @@
   <Controls :layer="tiles as TilemapLayer" />
 
   <Container :depth="2">
-    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
+    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
   </Container>
 
   <Container :depth="3">
@@ -123,6 +123,10 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 }
 
 function addZoneObject(tile: Phaser.Tilemaps.Tile) {
+  // Check if object already exists on position
+  const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (existingObject) return
+
   const newObject = {
     id: uuidv4(),
     zoneId: zone.value!.id,
@@ -137,6 +141,10 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
 }
 
 function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
   const newEventTile = {
     id: uuidv4(),
     zoneId: zone.value!.id,
@@ -263,4 +271,11 @@ watch(
   },
   { deep: true }
 )
+
+const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
+  if (!zoneObject) return
+  // Check if tool is move or return
+  if (zoneEditorStore.tool !== 'move') return
+  zoneEditorStore.setSelectedZoneObject(zoneObject)
+}
 </script>

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center p-5 fixed bottom-6 mx-6 right-0">
+  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 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>
@@ -33,7 +33,7 @@ watch(
 )
 
 const handleDepthInput = () => {
-  const depth = parseFloat(objectDepth.value)
+  const depth = parseFloat(objectDepth.value.toString())
   if (!isNaN(depth)) {
     emit('update_depth', depth)
   }