Fix for object depths and proper depths for rotated objects

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

@@ -12,7 +12,7 @@ import { computed, defineProps, onMounted, onUnmounted } from 'vue'
 const mapEditor = useMapEditorComposable()
 const partitionPoints = [0]
 
-const baseDepth = computed(() => calculateIsometricDepth(props.x!, props.y!))
+let baseDepth = 0
 
 const props = defineProps<{
   obj?: PlacedMapObject
@@ -31,7 +31,7 @@ const createImagePartition = (startX: number, endX: number, depthOffset: number)
 
   img.setOrigin(props.mapObj.originX, props.mapObj.originY)
   img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
-  img.setDepth(baseDepth.value + depthOffset)
+  img.setDepth(baseDepth + depthOffset)
 
   group.add(img)
 }
@@ -45,8 +45,11 @@ onPreUpdate(() => {
   const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
   const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id
 
+  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+
   group.setAlpha(isMoving || isSelected ? 0.5 : 1)
   group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
+  group.setDepth(baseDepth)
 
   let orderedImages = group.getChildren()
 
@@ -54,13 +57,25 @@ onPreUpdate(() => {
     const image = child as Phaser.GameObjects.Image
     if (image && props.obj) {
       image.flipX = props.obj.isRotated;
+
       if (props.obj.isRotated) {
-        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets.reverse()[index])
+        var offsetNum = props.mapObj!.depthOffsets.length
+
+        //Could break in case of images with odd partion number
+        //Shifts image over so that it becomes aligned again after flipping
+        if (index < offsetNum/2) {
+          image.x = props.x! - (props.mapObj!.frameWidth/offsetNum)
+        }
+        else {
+          image.x = props.x! + (props.mapObj!.frameWidth/offsetNum)
+        }
+
+        image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
       }
       else {
-        image.setDepth(baseDepth.value + props.mapObj!.depthOffsets[index])
+        image.x = props.x!
+        image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
       }
-      image.setCrop()
     }
   })
 })
@@ -68,6 +83,8 @@ onPreUpdate(() => {
 
 // Initial setup
 if (props.mapObj && props.x && props.y) {
+  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+
   group.setXY(props.x, props.y)
   group.setOrigin(props.mapObj.originX, props.mapObj.originY)