Map eidtor work , new walk sound

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

@@ -1,6 +1,13 @@
 <template>
   <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
   <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
+  <PlacedMapObject v-if="
+   mapEditor.tool.value === 'pencil' &&
+   mapEditor.drawMode.value === 'map_object' &&
+   mapEditor.isPlacedMapObjectPreviewEnabled.value &&
+   mapEditor.selectedPlacedObject.value && previewPlacedMapObject" :tileMap :tileMapLayer
+   :key="previewPlacedMapObject?.id"
+   :placedMapObject="previewPlacedMapObject" />
 </template>
 
 <script setup lang="ts">
@@ -11,7 +18,7 @@ import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { getTile } from '@/services/mapService'
 import { useScene } from 'phavuer'
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -27,6 +34,21 @@ const props = defineProps<{
   tileMapLayer: TilemapLayer
 }>()
 
+const previewPosition = ref({ x: 0, y: 0 })
+
+const previewPlacedMapObject = computed(() => ({
+  ...mapEditor.selectedPlacedObject.value!,
+  positionX: previewPosition.value.x,
+  positionY: previewPosition.value.y
+}))
+
+function updatePreviewPosition(pointer: Phaser.Input.Pointer) {
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  previewPosition.value = { x: tile.x, y: tile.y }
+}
+
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -137,4 +159,12 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
       break
   }
 }
+
+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, updatePreviewPosition)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, updatePreviewPosition)
+})
 </script>

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -79,7 +79,7 @@
       <button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
       <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
       <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
-      <button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
+      <button class="btn-cyan px-3.5" @click="() => mapEditor.toggleActive()">Exit</button>
     </div>
   </div>
 
@@ -89,9 +89,13 @@
     </template>
     <template #modalBody>
       <div class="m-4 flex items-center space-x-2">
-        <input id="continuous-drawing" @change="handleCheck" v-model="checkboxValue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+        <input id="continuous-drawing" @change="toggleContinuousDrawing" v-model="isContinuousDrawingEnabled" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
         <label for="continuous-drawing" class="text-sm font-medium text-gray-200 cursor-pointer"> Continuous Drawing </label>
       </div>
+      <div class="m-4 flex items-center space-x-2">
+        <input id="show-placed-map-object-preview" @change="toggleShowPlacedMapObjectPreview" v-model="isShowPlacedMapObjectPreviewEnabled" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+        <label for="show-placed-map-object-preview" class="text-sm font-medium text-gray-200 cursor-pointer"> Show placed map object preview </label>
+      </div>
     </template>
   </Modal>
 </template>
@@ -104,14 +108,15 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 
-const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor'])
+const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings'])
 
 // States
 const toolbar = ref(null)
 const isMapEditorSettingsModalOpen = ref(false)
 const selectPencilOpen = ref(false)
 const selectEraserOpen = ref(false)
-const checkboxValue = ref<Boolean>(false)
+const isContinuousDrawingEnabled = ref<Boolean>(false)
+const isShowPlacedMapObjectPreviewEnabled = ref<Boolean>(false)
 const listOpen = computed(() => mapEditor.tool.value === 'pencil' && (mapEditor.drawMode.value === 'tile' || mapEditor.drawMode.value === 'map_object'))
 
 // drawMode
@@ -132,8 +137,12 @@ function setEraserMode() {
   selectEraserOpen.value = false
 }
 
-function handleCheck() {
+function toggleContinuousDrawing() {
-  mapEditor.setInputMode(checkboxValue.value ? 'hold' : 'tap')
+  mapEditor.setInputMode(isContinuousDrawingEnabled.value ? 'hold' : 'tap')
+}
+
+function toggleShowPlacedMapObjectPreview() {
+
 }
 
 function handleModeClick(mode: string, type: 'pencil' | 'eraser') {

src/components/screens/MapEditor.vue

@@ -5,7 +5,7 @@
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
           <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
-          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" />
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
           <TileList />
           <MapObjectList />

src/composables/useMapEditorComposable.ts

@@ -14,6 +14,7 @@ const tool = ref('move')
 const drawMode = ref('tile')
 const inputMode = ref('tap')
 const selectedTile = ref('')
+const isPlacedMapObjectPreviewEnabled = ref(true)
 const selectedMapObject = ref<MapObject | null>(null)
 const movingPlacedObject = ref<PlacedMapObject | null>(null)
 const selectedPlacedObject = ref<PlacedMapObject | null>(null)
@@ -53,6 +54,10 @@ export function useMapEditorComposable() {
     active.value = !active.value
   }
 
+  const togglePlacedMapObjectPreview = () => {
+    isPlacedMapObjectPreviewEnabled.value = !isPlacedMapObjectPreviewEnabled.value
+  }
+
   const setTool = (newTool: string) => {
     tool.value = newTool
   }
@@ -94,6 +99,7 @@ export function useMapEditorComposable() {
     drawMode.value = 'tile'
     inputMode.value = 'tap'
     selectedTile.value = ''
+    isPlacedMapObjectPreviewEnabled.value = false
     selectedMapObject.value = null
     shouldClearTiles.value = false
     refreshMapObject.value = 0
@@ -107,6 +113,7 @@ export function useMapEditorComposable() {
     drawMode,
     inputMode,
     selectedTile,
+    isPlacedMapObjectPreviewEnabled,
     selectedMapObject,
     movingPlacedObject,
     selectedPlacedObject,
@@ -123,6 +130,7 @@ export function useMapEditorComposable() {
     setDrawMode,
     setInputMode,
     setSelectedTile,
+    togglePlacedMapObjectPreview,
     setSelectedMapObject,
     setTeleportSettings,
     triggerClearTiles,