Depth editing for map objects

src/application/types.ts

@@ -37,7 +37,7 @@ export type MapObject = {
   id: string
   name: string
   tags: string[]
-  pivotPoints: { x: number; y: number }[]
+  depthOffsets: number[]
   originX: number
   originY: number
   frameRate: number

src/components/game/map/partials/ImageGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <Zone :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
+  <Zone :depth="baseDepth" :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
 </template>
 
 <script setup lang="ts">
@@ -7,9 +7,12 @@ import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { calculateIsometricDepth } from '@/services/mapService'
 import { onPreUpdate, useScene, Zone } from 'phavuer'
-import { defineProps, onUnmounted } from 'vue'
+import { computed, defineProps, onMounted, onUnmounted } from 'vue'
 
 const mapEditor = useMapEditorComposable()
+const partitionPoints = [0]
+
+const baseDepth = computed(() => calculateIsometricDepth(props.x!, props.y!))
 
 const props = defineProps<{
   obj?: PlacedMapObject
@@ -26,9 +29,9 @@ const createImagePartition = (startX: number, endX: number, depthOffset: number)
 
   const img = scene.add.image(0, 0, props.mapObj.id)
 
-  img.setDepth(calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY) + depthOffset)
   img.setOrigin(props.mapObj.originX, props.mapObj.originY)
   img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
+  img.setDepth(baseDepth.value + depthOffset)
 
   group.add(img)
 }
@@ -45,19 +48,37 @@ onPreUpdate(() => {
   group.setAlpha(isMoving || isSelected ? 0.5 : 1)
   group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
 
-  group.getChildren().forEach((child) => {
+  let orderedImages = group.getChildren()
+
+  orderedImages.forEach((child, index) => {
     const image = child as Phaser.GameObjects.Image
     if (image && props.obj) {
-      image.flipX = props.obj.isRotated
+      image.flipX = props.obj.isRotated;
+      if (props.obj.isRotated) {
+        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets.reverse()[index])
+      }
+      else {
+        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets[index])
+      }
+      image.setCrop()
     }
   })
 })
 
+
 // Initial setup
 if (props.mapObj && props.x && props.y) {
   group.setXY(props.x, props.y)
-  createImagePartition(0, props.mapObj.frameWidth * props.mapObj.originX, -1)
-  createImagePartition(props.mapObj.frameWidth * props.mapObj.originX, props.mapObj.frameWidth, 1)
+  group.setOrigin(props.mapObj.originX, props.mapObj.originY)
+
+  let sliceCount = props.mapObj.depthOffsets.length;
+  for (let j = 1; j <= sliceCount; j++) {
+    partitionPoints.push(j * (props.mapObj.frameWidth/sliceCount))
+  }
+
+  for (let i = 0; i < partitionPoints.length - 1; i++) {
+    createImagePartition(partitionPoints[i], partitionPoints[i+1], props.mapObj.depthOffsets[i])
+  }
 }
 
 onUnmounted(() => {

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="h-full overflow-auto">
     <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
-      <div class="relative">
-        <img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" @click="addPivotPoint" ref="imageRef" />
-        <svg class="absolute bottom-1 left-0 w-full h-full pointer-events-none">
-          <line v-for="(_, index) in mapObjectPivotPoints.slice(0, -1)" :key="index" :x1="mapObjectPivotPoints[index].x" :y1="mapObjectPivotPoints[index].y" :x2="mapObjectPivotPoints[index + 1].x" :y2="mapObjectPivotPoints[index + 1].y" stroke="white" stroke-width="2" />
-        </svg>
-        <div
-          v-for="(point, index) in mapObjectPivotPoints"
-          :key="index"
-          class="absolute w-2 h-2 bg-white rounded-full cursor-move -translate-x-1.5 -translate-y-1.5 ring-2 ring-black"
-          :style="{ left: point.x + 'px', top: point.y + 'px' }"
-          @mousedown="startDragging(index, $event)"
-          @contextmenu.prevent="removePivotPoint(index)"
-        />
+      <div class="grid grid-cols-[160px_auto_max-content] gap-12">
+        <div>
+          <input type="checkbox" checked v-model="showOrigin"><label>Show Origin</label>
+          <br>
+          <input type="checkbox" checked v-model="showPartitionOverlay"><label>Show Partitions</label>
+        </div>
+        <div class="relative w-fit h-fit">
+          <img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" ref="imageRef" />
+          <svg ref="svg" class="absolute top-0 left-0 w-full h-full inline-block pointer-events-none">
+            <circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX*width" :cy="mapObjectOriginY*height" stroke="white" stroke-width="2" />
+            <rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity:0.5" stroke="red"
+                  :x="index*(width/mapObjectDepthOffsets.length)"
+                  :width="width/mapObjectDepthOffsets.length"
+                  :y="0"
+                  :height="height"/>
+          </svg>
+        </div>
+        <div>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" @click="mapObjectDepthOffsets.push(0)">Add Partition</button>
+          <p>Depth Offset</p>
+          <div class="text-white grid grid-cols-[120px_80px_auto] items-baseline gap-2" v-for="(offset, index) in mapObjectDepthOffsets">
+            <input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)">
+            <button @click="mapObjectDepthOffsets.splice(index, 1)">Remove</button>
+          </div>
+        </div>
       </div>
     </div>
+
     <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
         <div class="form-field-full">
@@ -64,23 +77,27 @@ import ChipsInput from '@/components/forms/ChipsInput.vue'
 import { socketManager } from '@/managers/SocketManager'
 import { MapObjectStorage } from '@/storage/storages'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { Rectangle } from 'phavuer'
+import { useElementSize } from '@vueuse/core'
 
 const assetManagerStore = useAssetManagerStore()
 
 const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
+const svg = useTemplateRef('svg')
+const {width, height} = useElementSize(svg)
 
 const mapObjectName = ref('')
 const mapObjectTags = ref<string[]>([])
-const mapObjectPivotPoints = ref<Array<{ x: number; y: number }>>([])
+const mapObjectDepthOffsets = ref<number[]>([])
 const mapObjectOriginX = ref(0)
 const mapObjectOriginY = ref(0)
 const mapObjectFrameRate = ref(0)
 const mapObjectFrameWidth = ref(0)
 const mapObjectFrameHeight = ref(0)
 const imageRef = ref<HTMLImageElement | null>(null)
-const isDragging = ref(false)
-const draggedPointIndex = ref(-1)
+const showOrigin = ref(true);
+const showPartitionOverlay = ref(true);
 
 if (!selectedMapObject.value) {
   console.error('No map mapObject selected')
@@ -89,7 +106,7 @@ if (!selectedMapObject.value) {
 if (selectedMapObject.value) {
   mapObjectName.value = selectedMapObject.value.name
   mapObjectTags.value = selectedMapObject.value.tags
-  mapObjectPivotPoints.value = selectedMapObject.value.pivotPoints
+  mapObjectDepthOffsets.value = selectedMapObject.value.depthOffsets
   mapObjectOriginX.value = selectedMapObject.value.originX
   mapObjectOriginY.value = selectedMapObject.value.originY
   mapObjectFrameRate.value = selectedMapObject.value.frameRate
@@ -97,6 +114,8 @@ if (selectedMapObject.value) {
   mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
 }
 
+const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = event.target.value
+
 async function removeObject() {
   if (!selectedMapObject.value) return
   socketManager.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObjectId: selectedMapObject.value.id }, async (response: boolean) => {
@@ -125,14 +144,13 @@ async function saveObject() {
     console.error('No mapObject selected')
     return
   }
-
   socketManager.emit(
     SocketEvent.GM_MAPOBJECT_UPDATE,
     {
       id: selectedMapObject.value.id,
       name: mapObjectName.value,
       tags: mapObjectTags.value,
-      pivotPoints: mapObjectPivotPoints.value,
+      depthOffsets: mapObjectDepthOffsets.value,
       originX: mapObjectOriginX.value,
       originY: mapObjectOriginY.value,
       frameRate: mapObjectFrameRate.value,
@@ -155,7 +173,7 @@ watch(selectedMapObject, (mapObject: MapObject | null) => {
   if (!mapObject) return
   mapObjectName.value = mapObject.name
   mapObjectTags.value = mapObject.tags
-  mapObjectPivotPoints.value = mapObject.pivotPoints
+  mapObjectDepthOffsets.value = mapObject.depthOffsets
   mapObjectOriginX.value = mapObject.originX
   mapObjectOriginY.value = mapObject.originY
   mapObjectFrameRate.value = mapObject.frameRate
@@ -167,43 +185,29 @@ onMounted(() => {
   if (!selectedMapObject.value) return
 })
 
-function addPivotPoint(event: MouseEvent) {
-  if (!imageRef.value) return
-  // Max 2
-  if (mapObjectPivotPoints.value.length >= 2) return
-  const rect = imageRef.value.getBoundingClientRect()
-  const x = event.clientX - rect.left
-  const y = event.clientY - rect.top
-  mapObjectPivotPoints.value.push({ x, y })
-}
-
-function startDragging(index: number, event: MouseEvent) {
-  isDragging.value = true
-  draggedPointIndex.value = index
-
-  const moveHandler = (e: MouseEvent) => {
-    if (!isDragging.value || !imageRef.value) return
-    const rect = imageRef.value.getBoundingClientRect()
-    mapObjectPivotPoints.value[draggedPointIndex.value] = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    }
-  }
-
-  const upHandler = () => {
-    isDragging.value = false
-    draggedPointIndex.value = -1
-    window.removeEventListener('mousemove', moveHandler)
-    window.removeEventListener('mouseup', upHandler)
-  }
-
-  window.addEventListener('mousemove', moveHandler)
-  window.addEventListener('mouseup', upHandler)
-}
-
-function removePivotPoint(index: number) {
-  mapObjectPivotPoints.value.splice(index, 1)
-}
+// function startDragging(index: number, event: MouseEvent) {
+//   isDragging.value = true
+//   draggedPointIndex.value = index
+//
+//   const moveHandler = (e: MouseEvent) => {
+//     if (!isDragging.value || !imageRef.value) return
+//     const rect = imageRef.value.getBoundingClientRect()
+//     mapObjectPivotPoints.value[draggedPointIndex.value] = {
+//       x: e.clientX - rect.left,
+//       y: e.clientY - rect.top
+//     }
+//   }
+//
+//   const upHandler = () => {
+//     isDragging.value = false
+//     draggedPointIndex.value = -1
+//     window.removeEventListener('mousemove', moveHandler)
+//     window.removeEventListener('mouseup', upHandler)
+//   }
+//
+//   window.addEventListener('mousemove', moveHandler)
+//   window.addEventListener('mouseup', upHandler)
+// }
 
 onBeforeUnmount(() => {
   assetManagerStore.setSelectedMapObject(null)

src/components/gameMaster/mapEditor/Map.vue

@@ -179,6 +179,7 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) {
   if (mapEditor.inputMode.value === 'hold' && pointer.isDown) {
     handlePointerDown(pointer)
   }
+  scene.children.depthSort()
 }
 
 function handlePointerUp(pointer: Phaser.Input.Pointer) {