npm update, moved component and updated it to composition API

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

@@ -0,0 +1,74 @@
+<template>
+  <Zone
+      :originX="mapObj?.originX"
+      :originY="mapObj?.originY"
+      :width="mapObj?.frameWidth"
+      :height="mapObj?.frameHeight"
+      :x="x"
+      :y="y"
+  />
+</template>
+
+<script setup lang="ts">
+import { onPreUpdate, useScene } from 'phavuer'
+import { calculateIsometricDepth } from '@/services/mapService'
+import { onUnmounted, defineProps } from 'vue'
+import type { MapObject, PlacedMapObject } from '@/application/types'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import {Zone} from "phavuer";
+
+const mapEditor = useMapEditorComposable()
+
+const props = defineProps<{
+  obj?: PlacedMapObject
+  mapObj?: MapObject
+  x?: number
+  y?: number
+}>()
+
+const scene = useScene()
+const group = scene.add.group()
+
+const createImagePartition = (startX: number, endX: number, depthOffset: number) => {
+  if (!props.mapObj?.id) return
+
+  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)
+
+  group.add(img)
+}
+
+onPreUpdate(() => {
+  if (!props.obj || !props.x || !props.y) return
+
+  group.setXY(props.x, props.y)
+
+  const isMoving = mapEditor.movingPlacedObject.value?.id === props.obj.id
+  const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
+  const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id
+
+  group.setAlpha(isMoving || isSelected ? 0.5 : 1)
+  group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
+
+  group.getChildren().forEach((child) => {
+    const image = child as Phaser.GameObjects.Image
+    if (image && props.obj) {
+      image.flipX = props.obj.isRotated
+    }
+  })
+})
+
+// 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)
+}
+
+onUnmounted(() => {
+  group.destroy(true, true)
+})
+</script>

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

@@ -1,12 +1,11 @@
 <template>
-  <ImageGroup v-bind="groupProps" v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)">
-  </ImageGroup>
+  <ImageGroup v-bind="groupProps" v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" />
 </template>
 
 <script setup lang="ts">
 import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
+import { loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useScene } from 'phavuer'
@@ -15,7 +14,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
-import ImageGroup from '@/components/gameMaster/mapEditor/mapPartials/ImageGroup.vue'
+import ImageGroup from '@/components/game/map/partials/ImageGroup.vue'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject

src/components/gameMaster/mapEditor/mapPartials/ImageGroup.vue

@@ -1,59 +0,0 @@
-<template>
-  <Zone :originX="mapObj!.originX" :originY="mapObj!.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x :y>
-  </Zone>
-</template>
-
-<script lang="ts">
-import { onPreUpdate, refObj, useScene, Zone } from 'phavuer'
-import { calculateIsometricDepth } from '@/services/mapService'
-import { defineComponent, onMounted, onUnmounted, type PropType } from 'vue'
-import type { MapObject, PlacedMapObject } from '@/application/types'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import Image = Phaser.GameObjects.Image
-const mapEditor = useMapEditorComposable()
-
-export default defineComponent({
-  components: { Zone },
-  props: {
-    obj: Object as PropType<PlacedMapObject>,
-    mapObj: Object as PropType<MapObject>,
-    x: Number,
-    y: Number
-  },
-
-  setup(props) {
-    const scene = useScene()
-    const group = scene.add.group()
-
-    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)
-
-      group.add(img)
-    }
-
-    onPreUpdate(() => {
-      group.setXY(props.x!, props.y!)
-      group.setAlpha(mapEditor.movingPlacedObject.value?.id == props.obj!.id || mapEditor.selectedMapObject.value?.id == props.obj!.id ? 0.5 : 1)
-      group.setTint(mapEditor.selectedPlacedObject.value?.id == props.obj!.id ? 0x00ff00 : 0xffffff)
-      group.getChildren().forEach((child) => {
-        if (child as Image) {
-          (child as Image).flipX = props.obj!.isRotated
-        }
-      })
-    })
-
-    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)
-
-    onUnmounted(() => {
-      group.destroy(true,true)
-    })
-  }
-})
-
-</script>