Map object isometric placement

src/components/gameMaster/mapEditor/Map.vue

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

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

@@ -11,13 +11,22 @@ import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useScene } from 'phavuer'
 import { ref, watch } from 'vue'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import Tilemap = Phaser.Tilemaps.Tilemap
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
 
 defineExpose({ handlePointer })
 
+const props = defineProps<{
+  tileMap: Tilemap
+}>()
+
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
   // Check if object already exists on position
   const existingPlacedMapObject = findInMap(pointer, map)
   if (existingPlacedMapObject) return
@@ -29,8 +38,8 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
     map: map,
     mapObject: mapEditor.selectedMapObject.value,
     isRotated: false,
-    positionX: pointer.worldX,
-    positionY: pointer.worldY
+    positionX: tileToWorldX(props.tileMap, tile.x, tile.y),
+    positionY: tileToWorldY(props.tileMap, tile.x, tile.y)
   }
 
   // Add new object to mapObjects