refactoring pointer events and input handling improvements

This commit is contained in:
2025-01-26 19:07:27 -06:00
parent 791830fd6f
commit 9618e07bc6
11 changed files with 123 additions and 158 deletions

View File

@ -40,12 +40,11 @@ import Modal from '@/components/utilities/Modal.vue'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { ref } from 'vue'
import { ref, useTemplateRef } from 'vue'
const emit = defineEmits(['create'])
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const modalRef = useTemplateRef('modalRef')

View File

@ -51,7 +51,7 @@ import type { UUID } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { ref, watch } from 'vue'
import { ref, useTemplateRef, watch } from 'vue'
const mapEditor = useMapEditorComposable()
const screen = ref('settings')

View File

@ -39,7 +39,7 @@
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'eraser' }">(E)</span>
<div class="select" v-if="mapEditor.tool.value === 'eraser'">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
{{ mapEditor.eraserMode.value.replace('_', ' ') }}
{{ mapEditor.drawMode.value.replace('_', ' ') }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
</div>
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
@ -113,7 +113,7 @@ function setDrawMode(value: string) {
// drawMode
function setEraserMode(value: string) {
mapEditorStore.setTool('eraser')
mapEditor.setTool('eraser')
selectEraserOpen.value = false
}
@ -130,7 +130,7 @@ function handleClick(tool: string) {
function cycleToolMode(tool: 'pencil' | 'eraser') {
const modes = ['tile', 'object', 'teleport', 'blocking tile']
const currentIndex = modes.indexOf(mapEditorStore.drawMode)
const currentIndex = modes.indexOf(mapEditor.drawMode.value)
const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]