refactoring pointer events and input handling improvements
This commit is contained in:
@ -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')
|
||||
|
||||
|
@ -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')
|
||||
|
@ -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]
|
||||
|
||||
|
Reference in New Issue
Block a user