Implemented tap vs hold drawing setting

src/components/gameMaster/mapEditor/Map.vue

@@ -21,7 +21,7 @@ const mapTiles = useTemplateRef('mapTiles')
 const mapObjects = useTemplateRef('mapObjects')
 const eventTiles = useTemplateRef('eventTiles')
 
-function handlePointer(pointer: Phaser.Input.Pointer) {
+function handlePointerDown(pointer: Phaser.Input.Pointer) {
   if (!mapTiles.value || !mapObjects.value || !eventTiles.value) return
 
   // Check if left mouse button is pressed
@@ -41,14 +41,26 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   }
 }
 
+function handlePointerMove(pointer: Phaser.Input.Pointer) {
+  if (mapEditor.inputMode.value === 'hold') {
+    handlePointerDown(pointer)
+  }
+}
+
+function handlePointerUp(pointer: Phaser.Input.Pointer) {
+
+}
+
 onMounted(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
 })
 
 onUnmounted(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointer)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+  scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
   mapEditor.reset()
 })
 </script>

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

@@ -73,7 +73,7 @@
         <div class="w-px bg-cyan"></div>
 
         <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
-        <input type="checkbox" />
+        <input @change="handleCheck" v-model="checkboxValue" 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">
@@ -105,6 +105,8 @@ let selectEraserOpen = ref(false)
 let tileListShown = ref(false)
 let mapObjectListShown = ref(false)
 
+let checkboxValue = ref(false)
+
 defineExpose({ tileListShown, mapObjectListShown })
 
 // drawMode
@@ -131,6 +133,10 @@ function setEraserMode() {
   selectEraserOpen.value = false
 }
 
+function handleCheck() {
+  mapEditor.setInputMode(checkboxValue.value ? 'hold' : 'tap')
+}
+
 function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
   setDrawMode(mode)
   type === 'pencil' ? setPencilMode() : setEraserMode()

src/components/screens/MapEditor.vue

@@ -12,8 +12,7 @@
             @open-maps="mapModal?.open"
             @open-settings="mapSettingsModal?.open"
             @close-editor="mapEditor.toggleActive"
-            @close-lists="tileModal?.close"
-            @closeLists="objectModal?.close"
+            @close-lists="closeLists"
             @open-tile-list="tileModal?.open"
             @open-map-object-list="objectModal?.open"
           />
@@ -114,6 +113,11 @@ function save() {
   })
 }
 
+function closeLists() {
+  tileModal.value?.close()
+  objectModal.value?.close()
+}
+
 function clear() {
   if (!mapEditor.currentMap.value) return
 

src/composables/useMapEditorComposable.ts

@@ -12,6 +12,7 @@ const currentMap = ref<Map | null>(null)
 const active = ref(false)
 const tool = ref('move')
 const drawMode = ref('tile')
+const inputMode = ref('tap')
 const selectedTile = ref('')
 const selectedMapObject = ref<MapObject | null>(null)
 const shouldClearTiles = ref(false)
@@ -53,6 +54,10 @@ export function useMapEditorComposable() {
     drawMode.value = mode
   }
 
+  const setInputMode = (mode: string) => {
+    inputMode.value = mode
+  }
+
   const setSelectedTile = (tile: string) => {
     selectedTile.value = tile
   }
@@ -76,6 +81,7 @@ export function useMapEditorComposable() {
   const reset = () => {
     tool.value = 'move'
     drawMode.value = 'tile'
+    inputMode.value = 'tap'
     selectedTile.value = ''
     selectedMapObject.value = null
     shouldClearTiles.value = false
@@ -87,6 +93,7 @@ export function useMapEditorComposable() {
     active,
     tool,
     drawMode,
+    inputMode,
     selectedTile,
     selectedMapObject,
     shouldClearTiles,
@@ -99,6 +106,7 @@ export function useMapEditorComposable() {
     toggleActive,
     setTool,
     setDrawMode,
+    setInputMode,
     setSelectedTile,
     setSelectedMapObject,
     setTeleportSettings,