Restored tile editing and proper map clearing behavior

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

@@ -40,12 +40,11 @@ function calculateObjectPlacement(mapObj: PlacedMapObject) : {x: number; y: numb
 
   return {
     x: position.worldPositionX - mapObj.mapObject.frameWidth/2,
-    y: position.worldPositionY - mapObj.mapObject.frameHeight + (config.tile_size.height * 1.5)
+    y: position.worldPositionY - mapObj.mapObject.frameHeight/2 + config.tile_size.height
   }
 }
 
-onMounted(async () => {
-  await loadTexture(scene, {
+loadTexture(scene, {
     key: props.placedMapObject.mapObject.id,
     data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
     group: 'map_objects',
@@ -55,5 +54,4 @@ onMounted(async () => {
   } as TextureData).catch((error) => {
     console.error('Error loading texture:', error)
   })
-})
 </script>

src/components/gameMaster/mapEditor/Map.vue

@@ -1,6 +1,6 @@
 <template>
-  <MapTiles ref="mapTiles" v-if="tileMap && tileMapLayer" :tileMapLayer :tileMap @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap && tileMapLayer" :tileMapLayer :tileMap />
+  <MapTiles ref="mapTiles" v-if="tileMap" :tileMapLayer :tileMap @tileMap:create="tileMap = $event" />
+  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMapLayer :tileMap />
   <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap />
 </template>
 
@@ -75,9 +75,11 @@ function handlePointerUp(pointer: Phaser.Input.Pointer) {
 }
 
 onMounted(() => {
-  tileMap.value = createTileMap(scene, mapEditor.currentMap.value!)
+  let mapValue = mapEditor.currentMap.value
+  if (!mapValue) return
+  tileMap.value = createTileMap(scene, mapValue)
   mapTiles.value?.$emit('tileMap:create', tileMap.value)
-  tileMapLayer.value = createTileLayer(tileMap.value, mapEditor.currentMap.value)
+  tileMapLayer.value = createTileLayer(tileMap.value, mapValue)
 
   addEventListener('keydown', handleKeyDown)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)

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

@@ -78,14 +78,15 @@ function eraser(pointer: Phaser.Input.Pointer) {
 }
 
 function paint(pointer: Phaser.Input.Pointer) {
+  let map = mapEditor.currentMap.value
+  if (!map) return
+
   // Set new tileArray with selected tile
   const tileArray = createTileArray(props.tileMap.width, props.tileMap.height, mapEditor.selectedTile.value)
   setLayerTiles(props.tileMap, props.tileMapLayer, tileArray)
 
   // Adjust mapEditorStore.map.tiles
-  if (mapEditor.currentMap.value) {
-    mapEditor.currentMap.value.tiles = tileArray
-  }
+  map.tiles = tileArray
 }
 
 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
@@ -184,7 +185,6 @@ function updateMapTiles() {
   let indexedCommands = commandStack.slice(0, commandIndex.value)
   let modifiedTiles = applyCommands(originTiles, ...indexedCommands)
 
-  //replaceTiles(mapEditor.currentMap.value.tiles, layer, tileMap.value.width, tileMap.value.height)
   setLayerTiles(props.tileMap, props.tileMapLayer, modifiedTiles)
   mapEditor.currentMap.value.tiles = modifiedTiles
 }
@@ -195,12 +195,12 @@ function cloneArray(arr: any[]) : any[] {
 }
 
 watch(
-  () => mapEditor.shouldClearTiles,
+  () => mapEditor.shouldClearTiles.value,
   (shouldClear) => {
     if (shouldClear && mapEditor.currentMap.value) {
       const blankTiles = createTileArray(props.tileMapLayer.width, props.tileMapLayer.height, 'blank_tile')
       setLayerTiles(props.tileMap, props.tileMapLayer, blankTiles)
-      replaceTiles(mapEditor.currentMap.value.tiles, blankTiles, props.tileMapLayer.width, props.tileMapLayer.height)
+      mapEditor.currentMap.value.tiles = blankTiles
       mapEditor.resetClearTilesFlag()
     }
   }

src/components/screens/MapEditor.vue

@@ -98,16 +98,17 @@ function save() {
   const currentMap = mapEditor.currentMap.value
   if (!currentMap) return
 
+  console.log(currentMap.tiles)
   const data = {
-    mapId: {...currentMap},
+    mapId: currentMap.id,
     name: currentMap.name,
     width: currentMap.width,
     height: currentMap.height,
-    tiles: {...currentMap.tiles},
+    tiles: currentMap.tiles,
     pvp: currentMap.pvp,
-    mapEffects: {...currentMap.mapEffects},
-    mapEventTiles: {...currentMap.mapEventTiles},
-    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject: {...mapObject}, depth, isRotated, positionX, positionY })) ?? []
+    mapEffects: currentMap.mapEffects,
+    mapEventTiles: currentMap.mapEventTiles,
+    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject: {...mapObject}, depth, isRotated, positionX, positionY })) ?? []
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
@@ -127,5 +128,6 @@ function clear() {
 
   // Clear placed objects, event tiles and tiles
   mapEditor.clearMap()
+  mapEditor.triggerClearTiles()
 }
 </script>

src/composables/useMapEditorComposable.ts

@@ -40,7 +40,6 @@ export function useMapEditorComposable() {
     if (!currentMap.value) return
     currentMap.value.placedMapObjects = []
     currentMap.value.mapEventTiles = []
-    currentMap.value.tiles = []
   }
 
   const toggleActive = () => {