Unspaghettify code (WIP)

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

@@ -2,13 +2,13 @@
   <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">
-        <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="handleMoveClick">
+        <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="clickOutsideElement" 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="handlePencilClick">
+        <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')">
           <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="clickOutsideElement" 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="handleEraserClick">
+        <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')">
           <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 }">
@@ -62,7 +62,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <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 === 'paint' }" @click="handlePaintClick">
+        <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 === 'paint' }" @click="handleClick('paint')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
         </button>
 
@@ -99,7 +99,8 @@ const props = defineProps({
 const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
 
-const clickOutsideElement = ref(null)
+const clickOutsidePencil = ref(null)
+const clickOutsideEraser = ref(null)
 
 // track select state
 let selectPencilOpen = ref(false)
@@ -171,29 +172,20 @@ onBeforeUnmount(() => {
   removeEventListener('keydown', initKeyShortcuts)
 })
 
-function handleMoveClick() {
+function handleClick(tool: string) {
-  zoneEditorStore.setTool('move')
+  zoneEditorStore.setTool(tool)
-  selectEraserOpen.value = false
-  selectPencilOpen.value = false
-}
 
-function handlePencilClick() {
+  if(tool === 'pencil') {
-  zoneEditorStore.setTool('pencil')
     selectPencilOpen.value = !selectPencilOpen.value
     selectEraserOpen.value = false
-}
+  } else if(tool === 'eraser') {
-
-function handleEraserClick() {
-  zoneEditorStore.setTool('eraser')
     selectEraserOpen.value = !selectEraserOpen.value
     selectPencilOpen.value = false
-}
+  } else {
-
-function handlePaintClick() {
-  zoneEditorStore.setTool('paint')
     selectEraserOpen.value = false
     selectPencilOpen.value = false
   }
+}
 
 function handleSettingsClick() {
   zoneEditorStore.toggleSettingsModal()
@@ -209,19 +201,19 @@ function initKeyShortcuts(event: KeyboardEvent) {
   if (document.activeElement?.tagName === 'INPUT') return
 
   if (event.key === 'm') {
-    handleMoveClick()
+    handleClick('move')
   }
 
   if (event.key === 'p') {
-    handlePencilClick()
+    handleClick('pencil')
   }
 
   if (event.key === 'e') {
-    handleEraserClick()
+    handleClick('eraser')
   }
 
   if (event.key === 'b') {
-    handlePaintClick()
+    handleClick('paint')
   }
 
   if (event.key === 'z') {
@@ -229,7 +221,8 @@ function initKeyShortcuts(event: KeyboardEvent) {
   }
 }
 
-onClickOutside(clickOutsideElement, event => handleClickOutside())
+onClickOutside(clickOutsidePencil, handleClickOutside, {ignore: [clickOutsideEraser]})
+onClickOutside(clickOutsideEraser, handleClickOutside, {ignore: [clickOutsidePencil]})
 
 
 function handleClickOutside() {