forked from noxious/client
51 lines
1.8 KiB
Vue
51 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
|
|
<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" />
|
|
</div>
|
|
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
|
import { ref, computed, watch } from 'vue'
|
|
|
|
const emit = defineEmits(['update_depth', 'move', 'delete'])
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
|
|
const objectDepth = ref(zoneEditorStore.objectDepth)
|
|
|
|
const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
|
|
|
|
watch(
|
|
() => zoneEditorStore.selectedZoneObject,
|
|
(selectedZoneObject) => {
|
|
objectDepth.value = selectedZoneObject?.depth ?? 0
|
|
}
|
|
)
|
|
|
|
const handleDepthInput = () => {
|
|
const depth = parseFloat(objectDepth.value.toString())
|
|
if (!isNaN(depth)) {
|
|
emit('update_depth', depth)
|
|
}
|
|
}
|
|
|
|
const handleMove = () => {
|
|
emit('move')
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
emit('delete', zoneEditorStore.selectedZoneObject?.id)
|
|
zoneEditorStore.setSelectedZoneObject(null)
|
|
}
|
|
</script>
|