More unspaghettification

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

@@ -1,14 +1,14 @@
 <template>
   <div class="flex justify-center p-5">
     <div class="toolbar fixed bottom-0 m-3 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
-      <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
+      <div ref="clickOutsideElement" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
         </button>
 
         <div class="w-px bg-cyan"></div>
 
-        <button ref="clickOutsidePencil" class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
@@ -35,7 +35,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button ref="clickOutsideEraser" class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
@@ -68,7 +68,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleSettingsClick" v-if="zoneEditorStore.zone">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
         </button>
       </div>
@@ -99,8 +99,8 @@ const props = defineProps({
 const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
 
-const clickOutsidePencil = ref(null)
+// track when clicked outside of toolbar items
-const clickOutsideEraser = ref(null)
+const clickOutsideElement = ref(null)
 
 // track select state
 let selectPencilOpen = ref(false)
@@ -108,12 +108,9 @@ let selectEraserOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
-  if (value === 'tile') {
+  zoneEditorStore.isTileListModalShown = value === 'tile'
-    zoneEditorStore.isTileListModalShown = true
+  zoneEditorStore.isObjectListModalShown = value === 'object'
-  }
+
-  if (value === 'object') {
-    zoneEditorStore.isObjectListModalShown = true
-  }
   zoneEditorStore.setDrawMode(value)
   selectPencilOpen.value = false
 }
@@ -125,21 +122,14 @@ function setEraserMode(value: string) {
 }
 
 function clickTile(pointer: Phaser.Input.Pointer) {
-  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
+  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
-    return
+  if (pointer.event.shiftKey) return
-  }
-
-  if (pointer.event.shiftKey) {
-    return
-  }
 
   const px = scene.cameras.main.worldView.x + pointer.x
   const py = scene.cameras.main.worldView.y + pointer.y
 
   const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
-  if (!pointer_tile) {
+  if (!pointer_tile) return
-    return
-  }
 
   if (zoneEditorStore.tool === 'eraser') {
     emit('eraser', pointer_tile)
@@ -173,65 +163,39 @@ onBeforeUnmount(() => {
 })
 
 function handleClick(tool: string) {
-  zoneEditorStore.setTool(tool)
+  if(tool === 'settings') {
-
-  if(tool === 'pencil') {
-    selectPencilOpen.value = !selectPencilOpen.value
-    selectEraserOpen.value = false
-  } else if(tool === 'eraser') {
-    selectEraserOpen.value = !selectEraserOpen.value
-    selectPencilOpen.value = false
-  } else {
-    selectEraserOpen.value = false
-    selectPencilOpen.value = false
-  }
-}
-
-function handleSettingsClick() {
     zoneEditorStore.toggleSettingsModal()
-  selectEraserOpen.value = false
+  } else {
-  selectPencilOpen.value = false
+    zoneEditorStore.setTool(tool)
+  }
+
+  selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
+  selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
 }
 
 // Key bindings
 function initKeyShortcuts(event: KeyboardEvent) {
   if (!zoneEditorStore.zone) return
-
+  // prevent if focused on composables
-  // prevent if focussed on composables
   if (document.activeElement?.tagName === 'INPUT') return
 
-  if (event.key === 'm') {
+  const keyActions: any = {
-    handleClick('move')
+    'm': 'move',
-  }
+    'p': 'pencil',
+    'e': 'eraser',
+    'b': 'paint',
+    'z': 'settings'
+  };
 
-  if (event.key === 'p') {
+  if (keyActions.hasOwnProperty(event.key)) {
-    handleClick('pencil')
+    handleClick(keyActions[event.key]);
-  }
-
-  if (event.key === 'e') {
-    handleClick('eraser')
-  }
-
-  if (event.key === 'b') {
-    handleClick('paint')
-  }
-
-  if (event.key === 'z') {
-    handleSettingsClick()
   }
 }
 
-onClickOutside(clickOutsidePencil, handleClickOutside, {ignore: [clickOutsideEraser]})
+onClickOutside(clickOutsideElement, handleClickOutside)
-onClickOutside(clickOutsideEraser, handleClickOutside, {ignore: [clickOutsidePencil]})
-
 
 function handleClickOutside() {
-  if (selectPencilOpen.value) {
   selectPencilOpen.value = false
-  } 
-  
-  if(selectEraserOpen.value) {
   selectEraserOpen.value = false
-  }
 }
 </script>