Added pivot point logic

src/application/types.ts

@@ -36,7 +36,8 @@ export type Tile = {
 export type MapObject = {
   id: string
   name: string
-  tags: any | null
+  tags: string[]
+  pivotPoints: { x: number; y: number }[]
   originX: number
   originY: number
   frameRate: number

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

@@ -1,7 +1,20 @@
 <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">
-      <img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
+      <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>
     </div>
     <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
@@ -58,11 +71,15 @@ const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
 
 const mapObjectName = ref('')
 const mapObjectTags = ref<string[]>([])
+const mapObjectPivotPoints = ref<Array<{ x: number; y: 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)
 
 if (!selectedMapObject.value) {
   console.error('No map mapObject selected')
@@ -71,6 +88,7 @@ if (!selectedMapObject.value) {
 if (selectedMapObject.value) {
   mapObjectName.value = selectedMapObject.value.name
   mapObjectTags.value = selectedMapObject.value.tags
+  mapObjectPivotPoints.value = selectedMapObject.value.pivotPoints
   mapObjectOriginX.value = selectedMapObject.value.originX
   mapObjectOriginY.value = selectedMapObject.value.originY
   mapObjectFrameRate.value = selectedMapObject.value.frameRate
@@ -105,11 +123,12 @@ function saveObject() {
   }
 
   gameStore.connection?.emit(
-    'gm:mapObject:update',
+    SocketEvent.GM_MAPOBJECT_UPDATE,
     {
       id: selectedMapObject.value.id,
       name: mapObjectName.value,
       tags: mapObjectTags.value,
+      pivotPoints: mapObjectPivotPoints.value,
       originX: mapObjectOriginX.value,
       originY: mapObjectOriginY.value,
       frameRate: mapObjectFrameRate.value,
@@ -130,6 +149,7 @@ watch(selectedMapObject, (mapObject: MapObject | null) => {
   if (!mapObject) return
   mapObjectName.value = mapObject.name
   mapObjectTags.value = mapObject.tags
+  mapObjectPivotPoints.value = mapObject.pivotPoints
   mapObjectOriginX.value = mapObject.originX
   mapObjectOriginY.value = mapObject.originY
   mapObjectFrameRate.value = mapObject.frameRate
@@ -141,7 +161,49 @@ onMounted(() => {
   if (!selectedMapObject.value) return
 })
 
+function addPivotPoint(event: MouseEvent) {
+  if (!imageRef.value) 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)
+}
+
 onBeforeUnmount(() => {
   assetManagerStore.setSelectedMapObject(null)
 })
 </script>
+
+<style scoped>
+.pointer-events-none {
+  pointer-events: none;
+}
+</style>