Map editor tiles are now fully loaded from cache

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <MapTiles @tileMap:create="tileMap = $event" />
-  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <!--  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
   <MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
   <Toolbar @save="save" @clear="clear" />
@@ -24,12 +24,15 @@ import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.
 import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
 import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
+import { loadAllTilesIntoScene } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onUnmounted, shallowRef } from 'vue'
+import { useScene } from 'phavuer'
+import { onBeforeMount, onUnmounted, shallowRef } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
+const scene = useScene()
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 

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

@@ -1,24 +1,18 @@
 <template>
-  <Controls :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import config from '@/application/config'
 import type { TextureData } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
-import {
-  createTileArray,
-  FlattenMapArray,
-  getTile,
-  loadMapTilesIntoScene,
-  placeTile,
-  setLayerTiles
-} from '@/composables/mapComposable'
+import { createTileArray, FlattenMapArray, getTile, loadAllTilesIntoScene, loadMapTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { TileStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
-import { TileStorage } from '@/storage/storages'
+import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'
+
 import Tileset = Phaser.Tilemaps.Tileset
 
 const emit = defineEmits(['tileMap:create'])
@@ -50,15 +44,11 @@ async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
   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 })
-    )
+    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 })
-  )
+  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
 
@@ -189,7 +179,9 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
 }
 
-watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => {
+watch(
+  () => mapEditorStore.shouldClearTiles,
+  (shouldClear) => {
     if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
       const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
       setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
@@ -202,8 +194,6 @@ watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => {
 onMounted(async () => {
   if (!mapEditorStore.map?.tiles) return
 
-  await loadMapTilesIntoScene(mapEditorStore.map.id, scene)
-
   tileMap.value = createTileMap()
   tileLayer.value = await createTileLayer(tileMap.value)
 
@@ -228,6 +218,10 @@ onMounted(async () => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
 })
 
+onBeforeMount(async () => {
+  await loadAllTilesIntoScene(scene)
+})
+
 onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)

src/components/screens/MapEditor.vue

@@ -12,6 +12,7 @@
 import config from '@/application/config'
 import 'phaser'
 import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
+import { loadAllTilesIntoScene } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Game, Scene } from 'phavuer'