Map editor ui fixes, switching back to game from map editor, draw/tap checkbox, and partial restoration of tile picker function

src/App.vue

@@ -2,7 +2,7 @@
   <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.active.value = true"/>
+  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive"/>
   <component :is="currentScreen" />
 </template>
 

src/components/gameMaster/mapEditor/Map.vue

@@ -30,9 +30,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
-  // Check if alt is pressed
-  if (pointer.event.altKey) return
-
   // Check if draw mode is tile
   switch (mapEditor.drawMode.value) {
     case 'tile':

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

@@ -111,10 +111,15 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   let map = mapEditor.currentMap.value
   if (!map) return
 
+  console.log("herer")
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if there is a tile
-  const tile = getTile(tileLayer.value!, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
+  console.log(tile.index)
+
   // Select the tile
   mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
 }
@@ -145,7 +150,11 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   if (pointer.event.shiftKey) return
 
   // Check if alt is pressed
-  if (pointer.event.altKey) return
+  if (pointer.event.altKey) {
+    tilePicker(pointer);
+    return
+  }
+
   // Check if draw mode is tile
   switch (mapEditor.tool.value) {
     case 'pencil':
@@ -157,9 +166,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
     case 'paint':
       paint(pointer)
       break
-    case 'tile picker':
-      tilePicker(pointer)
-      break
   }
 }
 

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

@@ -58,7 +58,8 @@ const mapObjectList = ref<MapObject[]>([])
 const modalRef = useTemplateRef('modalRef')
 
 defineExpose({
-  open: () => modalRef.value?.open()
+  open: () => modalRef.value?.open(),
+  close: () => modalRef.value?.close()
 })
 
 const uniqueTags = computed(() => {

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

@@ -99,7 +99,8 @@ const tiles = ref<Tile[]>([])
 const modalRef = useTemplateRef('modalRef')
 
 defineExpose({
-  open: () => modalRef.value?.open()
+  open: () => modalRef.value?.open(),
+  close: () => modalRef.value?.close()
 })
 
 const uniqueTags = computed(() => {

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

@@ -47,7 +47,7 @@
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object'); setEraserMode">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setEraserMode">
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
@@ -69,6 +69,11 @@
         <div class="w-px bg-cyan"></div>
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
+
+        <div class="w-px bg-cyan"></div>
+
+        <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
+        <input type="checkbox">
       </div>
 
       <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
@@ -89,7 +94,7 @@ import { useScene } from 'phavuer'
 
 const mapEditor = useMapEditorComposable()
 
-const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list'])
+const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
 
 // track when clicked outside of toolbar items
 const toolbar = ref(null)
@@ -105,8 +110,12 @@ defineExpose({tileListShown, mapObjectListShown})
 
 // drawMode
 function setDrawMode(value: string) {
-  if (value === 'tile') emit('open-tile-list')
+
-  if (value === 'map_object') emit('open-map-object-list')
+  if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil') {
+    emit('close-lists')
+    if (value === 'tile') emit('open-tile-list')
+    if (value === 'map_object') emit('open-map-object-list')
+  }
 
   mapEditor.setDrawMode(value)
   selectPencilOpen.value = false
@@ -136,7 +145,7 @@ function handleClick(tool: string) {
 }
 
 function cycleToolMode(tool: 'pencil' | 'eraser') {
-  const modes = ['tile', 'object', 'teleport', 'blocking tile']
+  const modes = ['tile', 'map_object', 'teleport', 'blocking tile']
   const currentIndex = modes.indexOf(mapEditor.drawMode.value)
   const nextIndex = (currentIndex + 1) % modes.length
   const nextMode = modes[nextIndex]

src/components/screens/MapEditor.vue

@@ -5,11 +5,11 @@
         <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 :key="mapEditor.currentMap.value?.id" />
-          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open()" @open-settings="mapSettingsModal?.open()"
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open"
-                   @close-editor="$emit('close-editor')"
+                   @close-editor="mapEditor.toggleActive" @close-lists="tileModal?.close" @closeLists="objectModal?.close"
-                   @open-tile-list="tileModal?.open()"
+                   @open-tile-list="tileModal?.open"
-                   @open-map-object-list="objectModal?.open()"/>
+                   @open-map-object-list="objectModal?.open"/>
-          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open()"/>
+          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open"/>
           <TileList ref="tileModal"/>
           <ObjectList ref="objectModal"/>
           <MapSettings ref="mapSettingsModal" />