Changes to mapeditorcomposable, fix pencil and fill tool for tiles

Locked in, made mapeditor my bi-

src/composables/pointerHandlers/useMapEditorPointerHandlers.ts

@@ -1,13 +1,13 @@
 import config from '@/application/config'
 import { getTile, tileToWorldXY } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { computed, ref, type Ref } from 'vue'
 
 export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const gameStore = useGameStore()
-  const mapEditorStore = useMapEditorStore()
-  const isMoveTool = computed(() => mapEditorStore.tool === 'move')
+  const mapEditor = useMapEditorComposable()
+  const isMoveTool = computed(() => mapEditor.tool.value === 'move')
   const pointerStartPosition = ref({ x: 0, y: 0 })
   const dragThreshold = 5 // pixels
 

src/composables/useMapEditorComposable.ts

@@ -1,7 +1,32 @@
-import type { Map } from '@/application/types'
+import type { Map, MapObject } from '@/application/types'
 import { ref } from 'vue'
 
+export type TeleportSettings = {
+  toMapId: string
+  toPositionX: number
+  toPositionY: number
+  toRotation: number
+}
+
 const currentMap = ref<Map | null>(null)
+const active = ref(false)
+const tool = ref('move')
+const drawMode = ref('tile')
+const eraserMode = ref('tile')
+const selectedTile = ref('')
+const selectedMapObject = ref<MapObject | null>(null)
+const isTileListModalShown = ref(false)
+const isMapObjectListModalShown = ref(false)
+const isMapListModalShown = ref(false)
+const isCreateMapModalShown = ref(false)
+const isSettingsModalShown = ref(false)
+const shouldClearTiles = ref(false)
+const teleportSettings = ref<TeleportSettings>({
+  toMapId: '',
+  toPositionX: 0,
+  toPositionY: 0,
+  toRotation: 0
+})
 
 export function useMapEditorComposable() {
   const loadMap = (map: Map) => {
@@ -16,16 +41,107 @@ export function useMapEditorComposable() {
 
   const clearMap = () => {
     if (!currentMap.value) return
-
     currentMap.value.placedMapObjects = []
     currentMap.value.mapEventTiles = []
     currentMap.value.tiles = []
   }
 
+  const toggleActive = () => {
+    if (active.value) reset()
+    active.value = !active.value
+  }
+
+  const setTool = (newTool: string) => {
+    tool.value = newTool
+  }
+
+  const setDrawMode = (mode: string) => {
+    drawMode.value = mode
+  }
+
+  const setEraserMode = (mode: string) => {
+    eraserMode.value = mode
+  }
+
+  const setSelectedTile = (tile: string) => {
+    selectedTile.value = tile
+  }
+
+  const setSelectedMapObject = (object: MapObject) => {
+    selectedMapObject.value = object
+  }
+
+  const toggleSettingsModal = () => {
+    isSettingsModalShown.value = !isSettingsModalShown.value
+  }
+
+  const toggleMapListModal = () => {
+    isMapListModalShown.value = !isMapListModalShown.value
+    isCreateMapModalShown.value = false
+  }
+
+  const toggleCreateMapModal = () => {
+    isCreateMapModalShown.value = !isCreateMapModalShown.value
+  }
+
+  const setTeleportSettings = (settings: TeleportSettings) => {
+    teleportSettings.value = settings
+  }
+
+  const triggerClearTiles = () => {
+    shouldClearTiles.value = true
+  }
+
+  const resetClearTilesFlag = () => {
+    shouldClearTiles.value = false
+  }
+
+  const reset = () => {
+    tool.value = 'move'
+    drawMode.value = 'tile'
+    selectedTile.value = ''
+    selectedMapObject.value = null
+    isTileListModalShown.value = false
+    isMapObjectListModalShown.value = false
+    isSettingsModalShown.value = false
+    isMapListModalShown.value = false
+    isCreateMapModalShown.value = false
+    shouldClearTiles.value = false
+  }
+
   return {
+    // State
     currentMap,
+    active,
+    tool,
+    drawMode,
+    eraserMode,
+    selectedTile,
+    selectedMapObject,
+    isTileListModalShown,
+    isMapObjectListModalShown,
+    isMapListModalShown,
+    isCreateMapModalShown,
+    isSettingsModalShown,
+    shouldClearTiles,
+    teleportSettings,
+
+    // Methods
     loadMap,
     updateProperty,
-    clearMap
+    clearMap,
+    toggleActive,
+    setTool,
+    setDrawMode,
+    setEraserMode,
+    setSelectedTile,
+    setSelectedMapObject,
+    toggleSettingsModal,
+    toggleMapListModal,
+    toggleCreateMapModal,
+    setTeleportSettings,
+    triggerClearTiles,
+    resetClearTilesFlag,
+    reset
   }
-}
+}

src/composables/usePointerHandlers.ts

@@ -1,20 +1,20 @@
-import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, watch, type Ref } from 'vue'
 import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
 import { useMapEditorPointerHandlers } from './pointerHandlers/useMapEditorPointerHandlers'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
-  const mapEditorStore = useMapEditorStore()
+  const mapEditor = useMapEditorComposable()
   const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
   const mapEditorHandlers = useMapEditorPointerHandlers(scene, layer, waypoint, camera)
 
-  const currentHandlers = computed(() => (mapEditorStore.active ? mapEditorHandlers : gameHandlers))
+  const currentHandlers = computed(() => (mapEditor.active.value ? mapEditorHandlers : gameHandlers))
 
   const setupPointerHandlers = () => currentHandlers.value.setupPointerHandlers()
   const cleanupPointerHandlers = () => currentHandlers.value.cleanupPointerHandlers()
 
   watch(
-    () => mapEditorStore.active,
+    () => mapEditor.active.value,
     () => {
       cleanupPointerHandlers()
       setupPointerHandlers()