224 lines
5.9 KiB
Vue
224 lines
5.9 KiB
Vue
<template>
|
|
<div class="relative h-full w-full bg-white">
|
|
<div class="relative h-full w-full overflow-hidden bg-gray-100">
|
|
<canvas
|
|
ref="canvas"
|
|
class="border-none bg-white"
|
|
:style="{
|
|
width: `${canvasDim[0] * canvasZoom}px`,
|
|
height: `${canvasDim[1] * canvasZoom}px`,
|
|
transformOrigin: 'top left',
|
|
transform: `translate(${canvasPos[0]}px, ${canvasPos[1]}px)`,
|
|
}"
|
|
/>
|
|
</div>
|
|
<PlannerToolbar>
|
|
<PlannerTool
|
|
v-for="toolItem of toolbar"
|
|
:title="toolItem.title"
|
|
:icon="toolItem.icon"
|
|
:multiple="!!toolItem.children?.length"
|
|
:selected="tool === toolItem.tool"
|
|
@click="selectTool(toolItem.tool, toolItem.subTool)"
|
|
>
|
|
<template v-if="toolItem.children?.length">
|
|
<PlannerTool
|
|
v-for="subItem of toolItem.children"
|
|
:title="subItem.title"
|
|
:icon="subItem.icon"
|
|
:selected="
|
|
tool === subItem.tool &&
|
|
(!subItem.subTool || subItem.subTool === subTool)
|
|
"
|
|
@click.stop="selectTool(subItem.tool, subItem.subTool)"
|
|
/>
|
|
</template>
|
|
</PlannerTool>
|
|
</PlannerToolbar>
|
|
|
|
<PlannerSidebars>
|
|
<PlannerLayerPanel
|
|
:layers="serializedLayers"
|
|
@layer-name="commitLayerName"
|
|
@object-name="commitObjectName"
|
|
@select-object="clickedOnObject"
|
|
@select-layer="clickedOnLayer"
|
|
/>
|
|
<PlannerPropertyPanel
|
|
:layers="serializedLayers"
|
|
@update="updateObjectProperty"
|
|
/>
|
|
</PlannerSidebars>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
PencilSquareIcon,
|
|
PencilIcon,
|
|
HomeIcon,
|
|
ArrowsPointingOutIcon,
|
|
ArrowDownOnSquareIcon,
|
|
Square3Stack3DIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import { useSessionStorage } from '@vueuse/core';
|
|
import type { Component } from 'vue';
|
|
import { onMounted, ref, shallowRef } from 'vue';
|
|
import { HousePlanner } from '../../modules/house-planner';
|
|
import {
|
|
Layer,
|
|
RepositionEvent,
|
|
ToolEvent,
|
|
Vec2,
|
|
} from '../../modules/house-planner/interfaces';
|
|
import { LayerObjectType } from '../../modules/house-planner/types';
|
|
import deepUnref from '../../utils/deep-unref';
|
|
import { ToolbarTool } from './interfaces/toolbar.interfaces';
|
|
import PlannerLayerPanel from './PlannerLayerPanel.vue';
|
|
import PlannerPropertyPanel from './PlannerPropertyPanel.vue';
|
|
import PlannerSidebar from './PlannerSidebar.vue';
|
|
import PlannerSidebars from './PlannerSidebars.vue';
|
|
import PlannerTool from './PlannerTool.vue';
|
|
import PlannerToolbar from './PlannerToolbar.vue';
|
|
|
|
const canvas = ref();
|
|
const module = shallowRef(new HousePlanner());
|
|
const tool = ref<string | undefined>('move');
|
|
const subTool = ref<string | undefined>(undefined);
|
|
const canvasDim = ref<Vec2>([1920, 1080]);
|
|
const canvasPos = ref<Vec2>([0, 0]);
|
|
const canvasZoom = ref<number>(1);
|
|
const serializedLayers = useSessionStorage<Layer[]>(
|
|
'roomData',
|
|
[
|
|
{
|
|
id: 1,
|
|
name: 'Rooms',
|
|
color: '#00ddff',
|
|
contents: [],
|
|
visible: true,
|
|
active: false,
|
|
},
|
|
{
|
|
id: 0,
|
|
name: 'Base',
|
|
color: '#00ddff',
|
|
contents: [],
|
|
visible: true,
|
|
active: true,
|
|
},
|
|
],
|
|
{ writeDefaults: false }
|
|
);
|
|
|
|
const toolbar: ToolbarTool[] = [
|
|
{
|
|
title: 'Move',
|
|
icon: ArrowsPointingOutIcon,
|
|
tool: 'move',
|
|
},
|
|
{
|
|
title: 'Draw',
|
|
icon: PencilSquareIcon,
|
|
tool: 'line',
|
|
subTool: 'line',
|
|
children: [
|
|
{
|
|
title: 'Outlines',
|
|
icon: PencilIcon,
|
|
tool: 'line',
|
|
subTool: 'line',
|
|
},
|
|
{
|
|
title: 'Rooms',
|
|
icon: HomeIcon,
|
|
tool: 'line',
|
|
subTool: 'room',
|
|
},
|
|
{
|
|
title: 'Curves',
|
|
icon: ArrowDownOnSquareIcon,
|
|
tool: 'line',
|
|
subTool: 'curve',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const selectTool = (newTool?: string, newSubTool?: string) => {
|
|
if (newTool === tool.value && !newSubTool) {
|
|
newTool = undefined;
|
|
}
|
|
module.value.manager?.tools.setTool(newTool, newSubTool);
|
|
};
|
|
|
|
const commitObjectName = (layerId: number, objectId: number, name: string) => {
|
|
module.value.manager?.updateObjectProperties(layerId, objectId, { name });
|
|
};
|
|
|
|
const commitLayerName = (layerId: number, name: string) => {
|
|
module.value.manager?.updateLayerProperties(layerId, { name });
|
|
};
|
|
|
|
const clickedOnObject = (layerId: number, objectId: number, add?: boolean) => {
|
|
const object = module.value.manager?.getLayerObjectById(layerId, objectId);
|
|
if (!object) return;
|
|
module.value.manager?.tools.selectObject(object, add);
|
|
};
|
|
|
|
const clickedOnLayer = (layerId: number) => {
|
|
const layer = module.value.manager?.getLayerById(layerId);
|
|
if (!layer) return;
|
|
module.value.manager?.tools.selectLayer(layer);
|
|
};
|
|
|
|
const updateObjectProperty = (
|
|
layerId: number,
|
|
objectId: number,
|
|
key: string,
|
|
value: unknown
|
|
) => {
|
|
module.value.manager?.updateObjectProperties(layerId, objectId, {
|
|
[key]: value,
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
const cleanUp = module.value.initialize(
|
|
canvas.value,
|
|
deepUnref(serializedLayers.value),
|
|
[1920, 1080],
|
|
canvasPos,
|
|
canvasZoom.value
|
|
);
|
|
|
|
const events: Record<string, (e: CustomEvent) => void> = {
|
|
'hpc:update': (e: CustomEvent) => {
|
|
serializedLayers.value = deepUnref(module.value.manager!.layers);
|
|
},
|
|
'hpc:selectionchange': (e: CustomEvent) => {
|
|
serializedLayers.value = deepUnref(module.value.manager!.layers);
|
|
},
|
|
'hpc:tool': (e: CustomEvent<ToolEvent>) => {
|
|
tool.value = e.detail.primary;
|
|
subTool.value = e.detail.secondary as string;
|
|
},
|
|
'hpc:position': (e: CustomEvent<RepositionEvent>) => {
|
|
//canvasPos.value = e.detail.position;
|
|
canvasZoom.value = e.detail.zoom;
|
|
},
|
|
};
|
|
|
|
Object.keys(events).forEach((event) =>
|
|
canvas.value.addEventListener(event, events[event])
|
|
);
|
|
|
|
return () => {
|
|
Object.keys(events).forEach((event) =>
|
|
canvas.value.removeEventListener(event, events[event])
|
|
);
|
|
cleanUp();
|
|
};
|
|
});
|
|
</script>
|