refactoring pointer events and input handling improvements

src/App.vue

@@ -2,7 +2,7 @@
   <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="isEditorShown = true"/>
+  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.active.value = true"/>
   <component :is="currentScreen" />
 </template>
 
@@ -22,21 +22,20 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 const gameStore = useGameStore()
-
-const isEditorShown = ref(false)
+const mapEditor = useMapEditorComposable()
 
 const currentScreen = computed(() => {
   if (!gameStore.game.isLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters
-  if (isEditorShown.value) return MapEditor
+  if (mapEditor.active.value) return MapEditor
   return Game
 })
 
 // Watch mapEditor.active and empty gameStore.game.loadedAssets
 watch(
-  () => isEditorShown.value,
+  () => mapEditor.active.value,
   () => {
     gameStore.game.loadedTextures = []
   }