imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

#91 : Zone editor: allow objects to be rotated

Browse Source
This commit is contained in:
Dennis Postma
2024-10-01 22:00:08 +02:00
parent 7a50385420
commit f6b6b4b8ea
5 changed files with 93 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
<div class="self-end mt-2 flex gap-2">
<div>
<label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
</div>
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4">
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
</button>
<button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-4" :disabled="!isObjectSelected">S</button>
<button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24" :disabled="!isObjectSelected">Move</button>
<button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
<button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
</div>
</div>
</template>
@ -18,13 +18,11 @@
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { ref, computed, watch } from 'vue'
const emit = defineEmits(['update_depth', 'move', 'delete'])
const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
const zoneEditorStore = useZoneEditorStore()
const objectDepth = ref(zoneEditorStore.objectDepth)
const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
watch(
() => zoneEditorStore.selectedZoneObject,
(selectedZoneObject) => {
@ -39,6 +37,10 @@ const handleDepthInput = () => {
}
}
const handleRotate = () => {
emit('rotate', zoneEditorStore.selectedZoneObject?.id)
}
const handleMove = () => {
emit('move')
}