99 lines
3.2 KiB
Vue
99 lines
3.2 KiB
Vue
<template>
|
|
<PlannerSidebar title="Layers">
|
|
<div class="bg-white-50 flex h-full flex-col overflow-auto">
|
|
<template v-for="layer of layers">
|
|
<button
|
|
@dblclick="editingLayerName = layer.id"
|
|
@click="!editingLayerName && emit('selectLayer', layer.id)"
|
|
:class="[
|
|
layer.active ? 'bg-blue-50' : '',
|
|
'flex w-full flex-row items-center justify-start space-x-2 px-2 py-2',
|
|
]"
|
|
>
|
|
<Square3Stack3DIcon class="h-4 w-4" />
|
|
<input
|
|
v-model="layer.name"
|
|
v-if="editingLayerName === layer.id"
|
|
@blur="commitLayerName(layer.name)"
|
|
@keypress.enter="commitLayerName(layer.name)"
|
|
/>
|
|
<span v-else>{{ layer.name }}</span>
|
|
</button>
|
|
<div class="flex flex-col bg-gray-50" v-if="layer.active">
|
|
<div v-for="object of layer.contents">
|
|
<button
|
|
@dblclick="editingObjectName = object.id"
|
|
@click="
|
|
(e) =>
|
|
!editingObjectName &&
|
|
emit('selectObject', layer.id, object.id, e.shiftKey)
|
|
"
|
|
:class="[
|
|
object.selected ? 'bg-blue-100' : '',
|
|
'flex w-full flex-row items-center justify-start space-x-2 px-2 py-2 pl-6',
|
|
]"
|
|
>
|
|
<component :is="objectTypeIcons[object.type]" class="h-4 w-4" />
|
|
<input
|
|
v-model="object.name"
|
|
v-if="editingObjectName === object.id"
|
|
@blur="commitObjectName(layer.id, object.name)"
|
|
@keypress.enter="commitObjectName(layer.id, object.name)"
|
|
/>
|
|
<span v-else>{{ object.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</PlannerSidebar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
PencilSquareIcon,
|
|
PencilIcon,
|
|
HomeIcon,
|
|
ArrowDownOnSquareIcon,
|
|
Square3Stack3DIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import type { Component } from 'vue';
|
|
import { ref } from 'vue';
|
|
import PlannerSidebar from './PlannerSidebar.vue';
|
|
import { Layer } from '../../modules/house-planner/interfaces';
|
|
import { LayerObjectType } from '../../modules/house-planner/types';
|
|
|
|
const objectTypeIcons: Record<LayerObjectType, Component> = {
|
|
line: PencilIcon,
|
|
room: HomeIcon,
|
|
curve: ArrowDownOnSquareIcon,
|
|
object: PencilSquareIcon,
|
|
};
|
|
|
|
const props = defineProps<{
|
|
layers: Layer[];
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'layerName', layer: number, name: string): void;
|
|
(e: 'objectName', layer: number, object: number, name: string): void;
|
|
(e: 'selectLayer', layer: number): void;
|
|
(e: 'selectObject', layer: number, object: number, add?: boolean): void;
|
|
}>();
|
|
|
|
const editingLayerName = ref<number | null>(null);
|
|
const editingObjectName = ref<number | null>(null);
|
|
|
|
const commitObjectName = (layerId: number, name: string) => {
|
|
if (editingObjectName.value == null) return;
|
|
emit('objectName', layerId, editingObjectName.value, name);
|
|
editingObjectName.value = null;
|
|
};
|
|
|
|
const commitLayerName = (name: string) => {
|
|
if (editingLayerName.value == null) return;
|
|
emit('layerName', editingLayerName.value, name);
|
|
editingLayerName.value = null;
|
|
};
|
|
</script>
|