<template> <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" /> <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" /> </template> <script setup lang="ts"> import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types' import { uuidv4 } from '@/application/utilities' import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue' import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue' import { useMapEditorComposable } from '@/composables/useMapEditorComposable' import { useScene } from 'phavuer' import { ref, watch } from 'vue' const scene = useScene() const mapEditor = useMapEditorComposable() defineExpose({ handlePointer }) function pencil(pointer: Phaser.Input.Pointer, map: MapT) { // Check if object already exists on position const existingPlacedMapObject = findInMap(pointer, map) if (existingPlacedMapObject) return if (!mapEditor.selectedMapObject.value) return const newPlacedMapObject: PlacedMapObjectT = { id: uuidv4(), depth: 0, map: map, mapObject: mapEditor.selectedMapObject.value, isRotated: false, positionX: pointer.worldX, positionY: pointer.worldY } // Add new object to mapObjects map.placedMapObjects.push(newPlacedMapObject) mapEditor.selectedPlacedObject.value = newPlacedMapObject } function eraser(pointer: Phaser.Input.Pointer, map: MapT) { // Check if object already exists on position const existingPlacedMapObject = findInMap(pointer, map) if (!existingPlacedMapObject) return // Remove existing object map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id) } function findInMap(pointer: Phaser.Input.Pointer, map: MapT) { return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY) } function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) { // Check if object already exists on position const existingPlacedMapObject = findInMap(pointer, map) if (!existingPlacedMapObject) return // Select the object mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject) } function moveMapObject(id: string, map: MapT) { mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT function handlePointerMove(pointer: Phaser.Input.Pointer) { if (!mapEditor.movingPlacedObject.value) return mapEditor.movingPlacedObject.value.positionX = pointer.worldX mapEditor.movingPlacedObject.value.positionY = pointer.worldY } scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove) function handlePointerUp() { scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove) mapEditor.movingPlacedObject.value = null } scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp) } function rotatePlacedMapObject(id: string, map: MapT) { map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => { if (placedMapObject.id === id) { return { ...placedMapObject, isRotated: !placedMapObject.isRotated } } return placedMapObject }) } function deletePlacedMapObject(id: string, map: MapT) { let mapE = mapEditor.currentMap.value mapE.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id) mapEditor.selectedPlacedObject.value = null } function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) { mapEditor.selectedPlacedObject.value = placedMapObject // If alt is pressed, select the object if (scene.input.activePointer.event.altKey) { mapEditor.setSelectedMapObject(placedMapObject.mapObject) } } function handlePointer(pointer: Phaser.Input.Pointer) { const map = mapEditor.currentMap.value if (!map) return if (mapEditor.drawMode.value !== 'map_object') return // Check if left mouse button is pressed if (!pointer.isDown) return // Check if shift is not pressed, this means we are moving the camera if (pointer.event.shiftKey) return // Check if alt is pressed, this means we are selecting the object if (pointer.event.altKey) return // Check if tool is pencil switch (mapEditor.tool.value) { case 'pencil': pencil(pointer, map) break case 'eraser': eraser(pointer, map) break case 'object picker': objectPicker(pointer, map) break } } // watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects watch( () => mapEditor.currentMap.value, (map) => { if (!map) return const updatedMapObjects = map.placedMapObjects.map((mapObject) => { const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id) if (updatedMapObject) { return { ...mapObject, mapObject: { ...mapObject.mapObject, originX: updatedMapObject.positionX, originY: updatedMapObject.positionY } } } return mapObject }) // Update the map with the new mapObjects map.placedMapObjects.concat(updatedMapObjects) // Update mapObject if it's set if (mapEditor.selectedMapObject.value) { const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id) if (updatedMapObject) { mapEditor.setSelectedMapObject({ ...mapEditor.selectedMapObject.value, originX: updatedMapObject.positionX, originY: updatedMapObject.positionY }) } } } // { deep: true } ) </script>