noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close pencil / eraser select when clicked outside of the element

Browse Source
This commit is contained in:
Colin Kallemein 2024-09-21 17:03:29 +02:00
parent d0bf622443
commit ef76ebe508
1 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
View File

@ -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="zoneEditorStore.setTool('move')">
<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">
<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 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="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">
<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 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="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">
<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,14 +62,14 @@
<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="zoneEditorStore.setTool('paint')">
<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">
<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>
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" 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': zoneEditorStore.tool !== 'settings' }">(Z)</span>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleSettingsClick" 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>
@ -88,6 +88,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useScene } from 'phavuer'
import { getTile } from '@/composables/zoneComposable'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { onClickOutside } from '@vueuse/core'
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const zoneEditorStore = useZoneEditorStore()
@ -98,6 +99,8 @@ const props = defineProps({
const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
const clickOutsideElement = ref(null)
// track select state
let selectPencilOpen = ref(false)
let selectEraserOpen = ref(false)
@ -168,14 +171,34 @@ onBeforeUnmount(() => {
removeEventListener('keydown', initKeyShortcuts)
})
function handleMoveClick() {
zoneEditorStore.setTool('move')
selectEraserOpen.value = false
selectPencilOpen.value = false
}
function handlePencilClick() {
zoneEditorStore.setTool('pencil')
selectPencilOpen.value = !selectPencilOpen.value
selectEraserOpen.value = false
}
function handleEraserClick() {
zoneEditorStore.setTool('eraser')
selectEraserOpen.value = !selectEraserOpen.value
selectPencilOpen.value = false
}
function handlePaintClick() {
zoneEditorStore.setTool('paint')
selectEraserOpen.value = false
selectPencilOpen.value = false
}
function handleSettingsClick() {
zoneEditorStore.toggleSettingsModal()
selectEraserOpen.value = false
selectPencilOpen.value = false
}
// Key bindings
@ -186,24 +209,36 @@ function initKeyShortcuts(event: KeyboardEvent) {
if (document.activeElement?.tagName === 'INPUT') return
if (event.key === 'm') {
zoneEditorStore.setTool('move')
handleMoveClick()
}
if (event.key === 'p') {
zoneEditorStore.setTool('pencil')
handlePencilClick()
}
if (event.key === 'e') {
zoneEditorStore.setTool('eraser')
handleEraserClick()
}
if (event.key === 'b') {
zoneEditorStore.setTool('paint')
handlePaintClick()
}
if (event.key === 'z') {
console.log('settings')
zoneEditorStore.toggleSettingsModal()
handleSettingsClick()
}
}
onClickOutside(clickOutsideElement, event => handleClickOutside())
function handleClickOutside() {
if (selectPencilOpen.value) {
selectPencilOpen.value = false
}
if(selectEraserOpen.value) {
selectEraserOpen.value = false
}
}
</script>