Restored placed map object selection and implemented object snapping to tile coordinates

src/components/game/map/MapTiles.vue

@@ -3,17 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import config from '@/application/config'
-import type { Map as MapT, UUID } from '@/application/types'
-import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
-import { loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
+import { createTileMap, createTileLayer, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
 import { onBeforeUnmount, shallowRef } from 'vue'
-
-import Tileset = Phaser.Tilemaps.Tileset
+import type { UUID } from '@/application/types'
 
 const emit = defineEmits(['tileMap:create'])
 const scene = useScene()
@@ -23,43 +19,12 @@ const mapStorage = new MapStorage()
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-function createTileMap(map: MapT) {
-  const mapConfig = new Phaser.Tilemaps.MapData({
-    width: map.width,
-    height: map.height,
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
-  emit('tileMap:create', newTileMap)
-  return newTileMap
-}
-
-function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
-  const tilesArray = unduplicateArray(mapData?.tiles.flat())
-
-  const tilesetImages = tilesArray.map((tile: string, index: number) => {
-    return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
-  })
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
-}
-
 loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
   .then(() => mapStorage.get(mapStore.mapId))
   .then((mapData) => {
     if (!mapData || !mapData?.tiles) return
-    tileMap.value = createTileMap(mapData)
+    tileMap.value = createTileMap(scene, mapData)
+    emit('tileMap:create', tileMap.value)
     tileLayer.value = createTileLayer(tileMap.value, mapData)
     setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
   })

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

@@ -9,25 +9,46 @@ import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composabl
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed, onMounted } from 'vue'
+import config from '@/application/config'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
   placedMapObject: PlacedMapObject
 }>()
 
 const gameStore = useGameStore()
 const scene = useScene()
+const mapEditor = useMapEditorComposable()
 
 const imageProps = computed(() => ({
+  alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
+  tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
   depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
+  ...calculateObjectPlacement(props.placedMapObject,true),
   flipX: props.placedMapObject.isRotated,
   texture: props.placedMapObject.mapObject.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
-  originX: Number(props.placedMapObject.mapObject.originY)
+  originX: props.placedMapObject.mapObject.originX,
+  originY: props.placedMapObject.mapObject.originY
 }))
 
+function calculateObjectPlacement(mapObj: PlacedMapObject, tileCenterSnap: boolean) : {x: number; y: number} {
+  let position : {x: number; y: number}
+  if (tileCenterSnap) {
+    let halfTileWidth = config.tile_size.width/2
+    position = {
+      x: Math.ceil((mapObj.positionX-config.tile_size.height)/halfTileWidth) * halfTileWidth,
+      y: Math.ceil((mapObj.positionY-config.tile_size.height)/halfTileWidth) * halfTileWidth,
+    }
+  }
+  else {
+    position = { x: mapObj.positionX, y: mapObj.positionY }
+  }
+  return {
+    x: position.x-mapObj.mapObject.frameWidth/2,
+    y: position.y-mapObj.mapObject.frameHeight/2
+  }
+}
+
 onMounted(async () => {
   await loadTexture(scene, {
     key: props.placedMapObject.mapObject.id,
@@ -39,8 +60,5 @@ onMounted(async () => {
   } as TextureData).catch((error) => {
     console.error('Error loading texture:', error)
   })
-
-  if (!props.placedMapObject) return
-  scene.add.sprite(props.placedMapObject.positionX, props.placedMapObject.positionY, imageProps.value.texture);
 })
 </script>

src/components/gameMaster/mapEditor/Map.vue

@@ -1,6 +1,6 @@
 <template>
   <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <PlacedMapObjects ref="mapObjects" v-if="tileMap" />
   <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 

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

@@ -5,16 +5,13 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { createTileMap, createTileLayer, createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { TileStorage } from '@/storage/storages'
 import { useScene } from 'phavuer'
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
-import Tileset = Phaser.Tilemaps.Tileset
-
 const emit = defineEmits(['tileMap:create'])
-
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
 const tileStorage = new TileStorage()
@@ -42,39 +39,6 @@ let currentCommand: EditorCommand | null = null
 let commandIndex = ref(0)
 let originTiles: string[][] = []
 
-function createTileMap() {
-  const mapData = new Phaser.Tilemaps.MapData({
-    width: mapEditor.currentMap.value?.width,
-    height: mapEditor.currentMap.value?.height,
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
-  emit('tileMap:create', newTileMap)
-  return newTileMap
-}
-
-async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
-  const tiles = await tileStorage.getAll()
-  const tilesetImages = []
-
-  for (const tile of tiles) {
-    tilesetImages.push(currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 1, { x: 0, y: -config.tile_size.height }))
-  }
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
-}
-
 function pencil(pointer: Phaser.Input.Pointer) {
   let map = mapEditor.currentMap.value
   if (!map) return
@@ -268,8 +232,9 @@ onMounted(async () => {
   //Clone
   originTiles = cloneArray(mapEditor.currentMap.value.tiles)
 
-  tileMap.value = createTileMap()
-  tileLayer.value = await createTileLayer(tileMap.value)
+  tileMap.value = createTileMap(scene, mapEditor.currentMap.value)
+  emit('tileMap:create', tileMap.value)
+  tileLayer.value = createTileLayer(tileMap.value, mapEditor.currentMap.value)
 
   setLayerTiles(tileMap.value, tileLayer.value, mapState.tiles)
 })

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

@@ -1,25 +1,19 @@
 <template>
-  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" :selectedPlacedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject :tilemap="tileMap" v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+  <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject(mapEditor.selectedMapObject.value!.id, mapEditor.currentMap.value!)" />
+  <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, TextureData } from '@/application/types'
+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'
-import { uuidv4 } from '@/application/utilities'
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
-const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
-const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-}>()
 
 defineExpose({ handlePointer })
 
@@ -42,8 +36,7 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   // Add new object to mapObjects
 
   map.placedMapObjects.push(newPlacedMapObject)
-  selectedPlacedMapObject.value = newPlacedMapObject
-  console.log(map.placedMapObjects)
+  mapEditor.selectedPlacedObject.value = newPlacedMapObject
 }
 
 function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
@@ -69,20 +62,20 @@ function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
 }
 
 function moveMapObject(id: string, map: MapT) {
-  movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
+  mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
-    if (!movingPlacedMapObject.value) return
+    if (!mapEditor.movingPlacedObject.value) return
 
-    movingPlacedMapObject.value.positionX = pointer.worldX
-    movingPlacedMapObject.value.positionY = pointer.worldY
+    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)
-    movingPlacedMapObject.value = null
+    mapEditor.movingPlacedObject.value = null
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
@@ -101,12 +94,12 @@ function rotatePlacedMapObject(id: string, map: MapT) {
 }
 
 function deletePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
-  selectedPlacedMapObject.value = null
+  map.placedMapObjects.filter((object) => object.id !== id)
+  mapEditor.selectedPlacedObject.value = null
 }
 
 function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
-  selectedPlacedMapObject.value = placedMapObject
+  mapEditor.selectedPlacedObject.value = placedMapObject
 
   // If alt is pressed, select the object
   if (scene.input.activePointer.event.altKey) {
@@ -165,7 +158,7 @@ watch(
     })
 
     // Update the map with the new mapObjects
-    map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
+    map.placedMapObjects.concat(updatedMapObjects)
 
     // Update mapObject if it's set
     if (mapEditor.selectedMapObject.value) {

src/components/screens/MapEditor.vue

@@ -40,12 +40,13 @@ import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
 import { loadAllTilesIntoScene } from '@/composables/mapComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
+import { MapObjectStorage, MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
 import { ref, useTemplateRef, watch } from 'vue'
 
 const mapStorage = new MapStorage()
+const mapObjectStorage = new MapObjectStorage()
 const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 

src/composables/mapComposable.ts

@@ -1,7 +1,7 @@
-import config from '@/application/config'
-import type { HttpResponse, TextureData, Tile as TileT, UUID } from '@/application/types'
-import { unduplicateArray } from '@/application/utilities'
-import { loadTexture } from '@/composables/gameComposable'
+import config from '@/application/config';
+import type { Map as MapT, TextureData, Tile as TileT, UUID } from '@/application/types';
+import { unduplicateArray } from '@/application/utilities';
+import { loadTexture } from '@/composables/gameComposable';
 import { MapStorage, TileStorage } from '@/storage/storages'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
@@ -114,3 +114,33 @@ export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
 
   await getTiles(tiles, scene)
 }
+
+export function createTileMap(scene: Phaser.Scene, map: MapT) {
+  const mapConfig = new Phaser.Tilemaps.MapData({
+    width: map.width,
+    height: map.height,
+    tileWidth: config.tile_size.width,
+    tileHeight: config.tile_size.height,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  return new Phaser.Tilemaps.Tilemap(scene, mapConfig)
+}
+
+export function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
+  const tilesArray = unduplicateArray(mapData?.tiles.flat())
+
+  const tilesetImages = tilesArray.map((tile: string, index: number) => {
+    return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
+  })
+
+  // Add blank tile
+  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
+
+  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+  return layer
+}

src/composables/useMapEditorComposable.ts

@@ -1,4 +1,4 @@
-import type { Map, MapObject } from '@/application/types'
+import type { Map, MapObject, PlacedMapObject, UUID } from '@/application/types'
 import { ref } from 'vue'
 
 export type TeleportSettings = {
@@ -15,6 +15,8 @@ const drawMode = ref('tile')
 const inputMode = ref('tap')
 const selectedTile = ref('')
 const selectedMapObject = ref<MapObject | null>(null)
+const movingPlacedObject = ref<PlacedMapObject | null>(null)
+const selectedPlacedObject = ref<PlacedMapObject | null>(null)
 const shouldClearTiles = ref(false)
 const teleportSettings = ref<TeleportSettings>({
   toMapId: '',
@@ -96,6 +98,8 @@ export function useMapEditorComposable() {
     inputMode,
     selectedTile,
     selectedMapObject,
+    movingPlacedObject,
+    selectedPlacedObject,
     shouldClearTiles,
     teleportSettings,