homemanager/homemanager-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revamp tooling a bit

Browse Source
This commit is contained in:
Evert Prants 2023-01-18 19:00:51 +02:00
parent caa34afd3e
commit 668b2c5001
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
18 changed files with 760 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ColorInput.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<button
class="relative"
@click="inputRef.click()"
:class="[
'flex items-center space-x-1 rounded-full bg-gray-100 py-1 hover:bg-gray-50 focus:ring-2 focus:ring-blue-200',
]"
>
<input
:id="forId"
:value="modelValue"
class="absolute left-0 bottom-0 h-0 w-0 opacity-0"
type="color"
ref="inputRef"
@change="valueChanged(($event.target as HTMLInputElement).value)"
/>
<div
:style="{ backgroundColor: modelValue }"
class="h-6 w-6 rounded-full ring-1 ring-gray-400"
></div>
<span>{{ modelValue }}</span>
</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(
defineProps<{
forId?: string;
modelValue: string;
}>(),
{
modelValue: '#000000',
}
);
const inputRef = ref();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const valueChanged = (value: string) => {
emit('update:modelValue', value);
};
</script>

20
src/components/house-planner/HousePlanner.vue
View File

@ -4,6 +4,7 @@
<PlannerToolbar>
<PlannerTool
v-for="toolItem of toolbar"
:title="toolItem.title"
:icon="toolItem.icon"
:multiple="!!toolItem.children?.length"
:selected="tool === toolItem.tool"
@ -12,6 +13,7 @@
<template v-if="toolItem.children?.length">
<PlannerTool
v-for="subItem of toolItem.children"
:title="subItem.title"
:icon="subItem.icon"
:selected="
tool === subItem.tool &&
@ -53,11 +55,7 @@ import type { Component } from 'vue';
import { onMounted, ref, shallowRef } from 'vue';
import { HousePlanner } from '../../modules/house-planner';
import { Layer, ToolEvent } from '../../modules/house-planner/interfaces';
import {
LayerObjectType,
SubToolType,
ToolType,
} from '../../modules/house-planner/types';
import { LayerObjectType } from '../../modules/house-planner/types';
import deepUnref from '../../utils/deep-unref';
import { ToolbarTool } from './interfaces/toolbar.interfaces';
import PlannerLayerPanel from './PlannerLayerPanel.vue';
@ -69,8 +67,8 @@ import PlannerToolbar from './PlannerToolbar.vue';
const canvas = ref();
const module = shallowRef(new HousePlanner());
const tool = ref<ToolType>('line');
const subTool = ref<SubToolType>('line');
const tool = ref<string | undefined>('move');
const subTool = ref<string | undefined>(undefined);
const serializedLayers = useSessionStorage<Layer[]>(
'roomData',
[
@ -98,7 +96,7 @@ const toolbar: ToolbarTool[] = [
{
title: 'Move',
icon: ArrowsPointingOutIcon,
tool: null,
tool: 'move',
},
{
title: 'Draw',
@ -128,9 +126,9 @@ const toolbar: ToolbarTool[] = [
},
];
const selectTool = (newTool: ToolType, newSubTool?: SubToolType) => {
const selectTool = (newTool?: string, newSubTool?: string) => {
if (newTool === tool.value && !newSubTool) {
newTool = null;
newTool = undefined;
}
module.value.manager?.tools.setTool(newTool, newSubTool);
};
@ -181,7 +179,7 @@ onMounted(() => {
},
'hpc:tool': (e: CustomEvent<ToolEvent>) => {
tool.value = e.detail.primary;
subTool.value = e.detail.secondary;
subTool.value = e.detail.secondary as string;
},
};

2
src/components/house-planner/PlannerLayerPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<PlannerSidebar title="Layers">
<div class="bg-white-50 flex flex-col">
<div class="bg-white-50 flex h-full flex-col overflow-auto">
<template v-for="layer of layers">
<button
@dblclick="editingLayerName = layer.id"

68
src/components/house-planner/PlannerPropertyPanel.vue
View File

@ -1,57 +1,16 @@
<template>
<PlannerSidebar title="Properties">
<div
class="bg-white-50 flex flex-col"
class="bg-white-50 flex h-full flex-col overflow-auto"
v-if="selectedObject && applicableProperties"
>
<div
class="grid grid-cols-2 px-2 py-2"
<PropertyFormItem
v-for="prop of applicableProperties.properties"
>
<label :for="`${prop.key}-${selectedObject.id}`">{{
prop.title
}}</label>
<input
v-if="prop.type === 'string'"
:id="`${prop.key}-${selectedObject.id}`"
type="text"
:value="selectedObject[prop.key as keyof typeof selectedObject]"
@input="updateProp(prop, ($event.target as HTMLInputElement)?.value)"
/>
<input
v-else-if="prop.type === 'color'"
:id="`${prop.key}-${selectedObject.id}`"
type="color"
:value="selectedObject[prop.key as keyof typeof selectedObject]"
@change="updateProp(prop, ($event.target as HTMLInputElement)?.value)"
/>
<input
v-else-if="prop.type === 'number'"
:id="`${prop.key}-${selectedObject.id}`"
type="number"
:value="selectedObject[prop.key as keyof typeof selectedObject]"
@input="updateProp(prop, ($event.target as HTMLInputElement)?.value)"
/>
<input
v-else-if="prop.type === 'boolean'"
:id="`${prop.key}-${selectedObject.id}`"
type="checkbox"
:checked="(selectedObject[prop.key as keyof typeof selectedObject] as boolean)"
@input="
updateProp(prop, ($event.target as HTMLInputElement)?.checked)
"
/>
<select
v-else-if="prop.type === 'select'"
:id="`${prop.key}-${selectedObject.id}`"
:value="selectedObject[prop.key as keyof typeof selectedObject]"
@input="updateProp(prop, ($event.target as HTMLInputElement)?.value)"
>
<option v-for="option of prop.options" :value="option.value">
{{ option.title }}
</option>
</select>
</div>
:id="selectedObject.id"
:prop="prop"
:value="selectedObject[prop.key as keyof typeof selectedObject]"
@update="(newValue) => updateProp(prop, newValue)"
/>
</div>
</PlannerSidebar>
</template>
@ -64,6 +23,7 @@ import {
ObjectProperty,
} from './interfaces/properties.interfaces';
import { computed } from 'vue';
import PropertyFormItem from './PropertyFormItem.vue';
const props = defineProps<{
layers: Layer[];
@ -100,6 +60,18 @@ const lineProps: ObjectProperty[] = [
{ value: 'square', title: 'Square' },
],
},
{
key: 'lineJoin',
title: 'Line Join',
type: 'select',
groupable: true,
options: [
{ value: undefined, title: '' },
{ value: 'miter', title: 'Miter' },
{ value: 'bevel', title: 'Bevel' },
{ value: 'round', title: 'Round' },
],
},
{ key: 'closed', title: 'Closed', type: 'boolean', groupable: true },
];

7
src/components/house-planner/PlannerSidebar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relative flex flex-row overflow-hidden px-2 pb-4 pr-0">
<div class="relative flex flex-row px-2 pb-4 pr-0">
<button
:class="[
open ? 'bg-gray-200' : 'bg-white',
@ -19,10 +19,11 @@
leave-to-class="max-w-0"
>
<div
class="h-screen max-h-96 rounded-bl-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
class="h-full rounded-bl-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
style="height: 40vh"
v-if="open"
>
<div class="w-screen max-w-xs">
<div class="flex h-full w-screen max-w-xs flex-col">
<slot name="header">
<div
class="select-none bg-gray-200 px-2 py-1 font-bold uppercase text-gray-400"

8
src/components/house-planner/PlannerSidebars.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="absolute right-0 top-0 z-10 mt-4 flex flex-col items-end space-y-2"
>
<slot />
<div class="absolute right-0 top-0 bottom-0 z-10 my-4 overflow-hidden">
<div class="flex h-full flex-col items-end space-y-2">
<slot />
</div>
</div>
</template>

3
src/components/house-planner/PlannerTool.vue
View File

@ -10,6 +10,7 @@
]"
>
<button
:title="title"
:class="[
selected && !multiple ? ' bg-purple-400 hover:bg-purple-300' : '',
selected && multiple ? ' bg-purple-500 hover:bg-purple-400' : '',
@ -17,6 +18,7 @@
'flex h-12 w-12 items-center justify-center rounded-full shadow-md ring-1 ring-black ring-opacity-5',
]"
>
<span class="sr-only">{{ title }}</span>
<component :is="icon" class="h-8 w-8" />
</button>
<Transition
@ -41,6 +43,7 @@ import type { Component } from 'vue';
const props = defineProps<{
icon: Component;
title: string;
multiple?: boolean;
selected?: boolean;
}>();

70
src/components/house-planner/PropertyFormItem.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div
class="mx-2 grid grid-cols-2 items-center border-b-2 border-gray-100 py-2 last:border-b-0"
:key="key"
>
<label :for="key">{{ prop.title }}</label>
<input
v-if="prop.type === 'string'"
:class="classes"
:id="key"
type="text"
:value="value"
@input="emit('update', ($event.target as HTMLInputElement)?.value)"
/>
<ColorInput
v-else-if="prop.type === 'color'"
:for-id="key"
:model-value="(value as string)"
@update:model-value="(newValue) => emit('update', newValue)"
/>
<input
v-else-if="prop.type === 'number'"
:class="classes"
:id="key"
type="number"
:value="value"
@input="emit('update', ($event.target as HTMLInputElement)?.value)"
/>
<input
v-else-if="prop.type === 'boolean'"
:class="classes"
:id="key"
type="checkbox"
:checked="(value as boolean)"
@input="emit('update', ($event.target as HTMLInputElement)?.checked)"
/>
<select
v-else-if="prop.type === 'select'"
:class="classes"
:id="key"
:value="value"
@input="emit('update', ($event.target as HTMLInputElement)?.value)"
>
<option v-for="option of prop.options" :value="option.value">
{{ option.title }}
</option>
</select>
</div>
</template>
<script setup lang="ts">
import { computed } from '@vue/reactivity';
import ColorInput from '../ColorInput.vue';
import { ObjectProperty } from './interfaces/properties.interfaces';
const props = defineProps<{
id: number;
prop: ObjectProperty;
value: unknown;
}>();
const emit = defineEmits<{
(e: 'update', value: unknown): void;
}>();
const key = computed(() => `${props.prop.key}-${props.id}`);
const classes = [
'px-1 py-1 focus:ring-2 focus:ring-blue-200 border-gray-300 rounded-sm',
];
</script>

5
src/components/house-planner/interfaces/toolbar.interfaces.ts
View File

@ -1,10 +1,9 @@
import type { Component } from 'vue';
import { SubToolType, ToolType } from '../../../modules/house-planner/types';
export interface ToolbarTool {
title: string;
icon: Component;
tool: ToolType;
subTool?: SubToolType;
tool: string;
subTool?: string;
children?: ToolbarTool[];
}

5
src/modules/house-planner/canvas.ts
View File

@ -118,9 +118,8 @@ export class HousePlannerCanvas {
this.ctx.strokeStyle = overrideColor || line.color || '#000';
this.ctx.lineWidth = line.width + overBounds;
if (line.lineCap) {
this.ctx.lineCap = line.lineCap;
}
this.ctx.lineCap = line.lineCap || 'butt';
this.ctx.lineJoin = line.lineJoin || 'miter';
}
isOnLine(line: Line, x: number, y: number, selectError = 16) {

2
src/modules/house-planner/index.ts
View File

@ -14,6 +14,8 @@ export class HousePlanner {
this.manager.tools.selectLayer(
initialData[initialData.findIndex((layer) => layer.active)]
);
this.manager.tools.setInitialSelection();
this.manager.tools.setTool('move');
this.manager.draw();
return () => this.cleanUp();
}

26
src/modules/house-planner/interfaces.ts
View File

@ -1,4 +1,4 @@
import { LayerObjectType, SubToolType, ToolType } from './types';
import { LayerObjectType } from './types';
export type Vec2 = [number, number];
export interface LineSegment {
@ -25,6 +25,7 @@ export interface Line extends LayerObject {
color: string;
render?: Path2D;
lineCap?: CanvasLineCap;
lineJoin?: CanvasLineJoin;
closed?: boolean;
lineDash?: number[];
}
@ -50,6 +51,25 @@ export interface UpdateEvent {
}
export interface ToolEvent {
primary: ToolType;
secondary: SubToolType;
primary: string;
secondary?: unknown;
}
export interface ICanvasToolBase<U = undefined> {
name: string;
subTool: U | undefined;
drawHighlights(): void;
drawControls(): void;
mouseDown(targetObject?: LayerObject): void;
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2): void;
mouseUp(moved: boolean): void;
enterPress(e: KeyboardEvent): void;
escapePress(e: KeyboardEvent): void;
setSubTool(subTool?: U): void;
activate(): void;
deactivate(): void;
selectionDeleted(): void;
selectionChanged(selection: LayerObject[]): void;
emitEvent(e: CustomEvent): void;
isToolCancelable(): boolean;
}

466
src/modules/house-planner/tools.ts
View File

@ -1,25 +1,17 @@
import type { HousePlannerCanvas } from './canvas';
import { HousePlannerCanvasHistory } from './history';
import {
BezierSegment,
History,
ICanvasToolBase,
Layer,
LayerObject,
Line,
LineSegment,
ToolEvent,
Vec2,
} from './interfaces';
import { ToolType, SubToolType, BezierControl, LineControl } from './types';
import {
vec2Add,
vec2Distance,
vec2Equals,
vec2InCircle,
vec2Inverse,
vec2Snap,
vec2Sub,
} from './utils';
import { LineTool } from './tools/line';
import { MoveTool } from './tools/move';
import { vec2Distance, vec2Snap, vec2Sub } from './utils';
export class HousePlannerCanvasTools {
public selectedLayer?: Layer;
@ -29,24 +21,21 @@ export class HousePlannerCanvasTools {
public mousePositionSnapped: Vec2 = [0, 0];
public gridSnap = true;
public gridSnapScale = 8;
public tool: ToolType = 'line';
public subTool: SubToolType = 'line';
public tool?: ICanvasToolBase<unknown>;
public tools: Record<string, ICanvasToolBase<unknown>> = {
['move']: new MoveTool(this),
['line']: new LineTool(this),
};
public history = new HousePlannerCanvasHistory();
public lastStrokeWidth = 16;
public lastColor = '#000';
public lastColor = '#000000';
public holdShift = false;
public selectError = 16;
private dragging = false;
private pinching = false;
private lastPinchLength = 0;
private moved = false;
private holdShift = false;
private selectError = 16;
private bezierControls: BezierSegment[] = [];
private lineControls: LineSegment[] = [];
private handlingBezier: BezierControl | null = null;
private handlingLine: LineControl | null = null;
private drawingLine: Line | null = null;
private clickedOn: LayerObject | null = null;
private movingObject = false;
constructor(public manager: HousePlannerCanvas) {}
@ -93,6 +82,7 @@ export class HousePlannerCanvasTools {
object.selected = false;
});
this.selectedObjects.length = 0;
this.tool?.selectionChanged(this.selectedObjects);
}
this.manager.draw();
this.selectedEvent();
@ -105,6 +95,7 @@ export class HousePlannerCanvasTools {
const foundAt = this.selectedObjects.indexOf(object);
object.selected = false;
this.selectedObjects.splice(foundAt, 1);
this.tool?.selectionChanged(this.selectedObjects);
this.manager.draw();
this.selectedEvent();
}
@ -115,6 +106,7 @@ export class HousePlannerCanvasTools {
if (add) {
object.selected = true;
this.selectedObjects.push(object);
this.tool?.selectionChanged(this.selectedObjects);
this.manager.draw();
this.selectedEvent();
return;
@ -127,10 +119,18 @@ export class HousePlannerCanvasTools {
object.selected = true;
this.selectedObjects = [object];
this.tool?.selectionChanged(this.selectedObjects);
this.manager.draw();
this.selectedEvent();
}
setInitialSelection() {
if (!this.selectedLayer) return;
this.selectedObjects = this.selectedLayer.contents.filter(
(object) => object.selected
);
}
getMousedObject() {
if (!this.selectedLayer?.visible) return null;
const [x, y] = this.mousePosition;
@ -182,93 +182,55 @@ export class HousePlannerCanvasTools {
}
// TODO: other kinds of objects
}
}
drawBezierControls(bezier: BezierSegment, previousEnd: Vec2) {
this.bezierControls.push(bezier);
const [cp1x, cp1y] = bezier.startControl;
const [cp2x, cp2y] = bezier.endControl;
const [endx, endy] = bezier.end;
const [prevx, prevy] = previousEnd;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.strokeStyle = '#00ddffaa';
this.ctx.lineWidth = 2;
this.ctx.beginPath();
this.ctx.arc(cp1x, cp1y, this.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
this.ctx.beginPath();
this.ctx.arc(cp2x, cp2y, this.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
this.ctx.beginPath();
this.ctx.moveTo(cp1x, cp1y);
this.ctx.lineTo(prevx, prevy);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(cp2x, cp2y);
this.ctx.lineTo(endx, endy);
this.ctx.stroke();
}
drawLineControls(line: LineSegment, previousEnd: Vec2) {
this.lineControls.push(line);
const [endx, endy] = line.end;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.beginPath();
this.ctx.arc(endx, endy, this.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
if (line.start) {
const [startx, starty] = line.start;
this.ctx.beginPath();
this.ctx.arc(startx, starty, this.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
}
this.tool?.drawHighlights();
}
drawControls() {
this.bezierControls.length = 0;
this.lineControls.length = 0;
for (const object of this.selectedObjects) {
const line = object as Line;
if (line.segments && line.render) {
let lastSegment = null;
for (const segment of line.segments) {
const bezier = segment as BezierSegment;
const previousPoint = lastSegment ? lastSegment.end : segment.start!;
if (bezier.startControl && bezier.endControl) {
this.drawBezierControls(bezier, previousPoint);
}
this.drawLineControls(segment, previousPoint);
lastSegment = segment;
}
}
// TODO: other kinds of objects
}
if (this.tool === 'line') {
if (this.selectedObjects.length) return;
const [mx, my] = this.mousePositionSnapped;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.beginPath();
this.ctx.arc(mx, my, this.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
}
this.tool?.drawControls();
}
cleanUp() {}
setTool(tool: typeof this.tool, subTool?: typeof this.subTool) {
this.tool = tool;
if (subTool !== undefined) this.subTool = subTool;
setTool(tool?: string, subTool?: string) {
if (!tool) {
this.tool?.deactivate();
this.setTool('move');
return;
}
if (this.tool?.name === tool) {
if (!subTool) return;
this.tool.setSubTool(subTool);
this.canvas.dispatchEvent(
new CustomEvent<ToolEvent>('hpc:tool', {
detail: { primary: this.tool.name, secondary: this.tool.subTool },
})
);
this.manager.draw();
return;
}
const findTool = this.tools[tool];
if (!findTool) return;
if (this.tool) this.tool.deactivate();
this.tool = findTool;
this.tool.activate();
if (subTool) {
this.tool.setSubTool(subTool);
}
this.canvas.dispatchEvent(
new CustomEvent<ToolEvent>('hpc:tool', {
detail: { primary: this.tool, secondary: this.subTool },
detail: { primary: this.tool.name, secondary: this.tool.subTool },
})
);
this.manager.draw();
}
get activeTool() {
return this.tool?.name;
}
onMouseMove(e: MouseEvent) {
@ -404,64 +366,16 @@ export class HousePlannerCanvasTools {
onKeyUp(e: KeyboardEvent) {
if (e.key === 'Enter') {
if (this.drawingLine && this.selectedLayer) {
if (this.subTool === 'room') {
this.drawingLine.closed = true;
}
this.drawingLine.segments.splice(
this.drawingLine.segments.length - 1,
1
);
this.history.appendToHistory([
{
object: this.selectedLayer,
property: 'contents',
value: [...this.selectedLayer.contents].filter(
(item) => item !== this.drawingLine
),
} as History<typeof this.selectedLayer>,
{
object: this,
property: 'selectedObjects',
value: [],
},
]);
this.canvas.dispatchEvent(
new CustomEvent('hpc:newobject', {
detail: this.drawingLine,
})
);
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: { event: 'newobject', object: this.drawingLine },
})
);
this.drawingLine = null;
this.manager.draw();
}
}
if (e.key === 'Escape') {
if (this.selectedObjects.length === 0 && this.tool && !this.drawingLine) {
this.setTool(null);
this.tool?.escapePress(e);
if (this.selectedObjects.length === 0 && this.tool?.isToolCancelable()) {
this.setTool();
}
this.selectObject(null);
if (this.drawingLine && this.selectedLayer) {
const indexOf = this.selectedLayer.contents.indexOf(this.drawingLine);
if (indexOf > -1) {
this.selectedLayer.contents.splice(indexOf, 1);
}
this.drawingLine = null;
this.manager.draw();
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: { event: 'draw-cancel' },
})
);
}
}
if (e.key === 'Shift') {
@ -492,6 +406,8 @@ export class HousePlannerCanvasTools {
);
this.selectedObjects.length = 0;
this.tool?.selectionDeleted();
this.tool?.selectionChanged([]);
this.manager.draw();
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
@ -500,72 +416,9 @@ export class HousePlannerCanvasTools {
);
}
private grabbedBezierControl() {
let clickedOnControl: BezierControl | null = null;
for (const bezier of this.bezierControls) {
for (const control of ['startControl', 'endControl']) {
const asType = control as 'startControl' | 'endControl';
if (
vec2InCircle(bezier[asType], this.mousePosition, this.selectError / 2)
) {
clickedOnControl = [bezier, asType, bezier[asType]];
}
}
}
return clickedOnControl;
}
private grabbedLineControl() {
let clickedOnControl: LineControl | null = null;
for (const line of this.lineControls) {
for (const control of ['start', 'end']) {
const asType = control as 'start' | 'end';
if (
line[asType] &&
vec2InCircle(
line[asType] as Vec2,
this.mousePosition,
this.selectError / 2
)
) {
clickedOnControl = [line, asType, line[asType] as Vec2];
}
}
}
return clickedOnControl;
}
private translate(offset: Vec2) {
for (const object of this.selectedObjects) {
if ((object as Line).segments) {
for (const segment of (object as Line).segments) {
if ((segment as BezierSegment).startControl) {
const bezier = segment as BezierSegment;
bezier.startControl = vec2Add(bezier.startControl, offset);
bezier.endControl = vec2Add(bezier.endControl, offset);
}
if (segment.start) {
segment.start = vec2Add(segment.start, offset);
}
segment.end = vec2Add(segment.end, offset);
}
}
}
this.manager.draw();
}
private pointerDown() {
if (this.drawingLine) return;
this.clickedOn = this.getMousedObject();
const bezierControl = this.grabbedBezierControl();
const lineControl = this.grabbedLineControl();
if (bezierControl) {
this.handlingBezier = bezierControl;
} else if (lineControl) {
this.handlingLine = lineControl;
}
this.tool?.mouseDown(this.clickedOn || undefined);
}
private pointerUp() {
@ -577,149 +430,9 @@ export class HousePlannerCanvasTools {
this.moved = false;
}
if (!this.moved && !this.handlingBezier && !this.handlingLine) {
if (this.tool === 'line') {
this.startLine();
} else if (!this.drawingLine) {
this.pick();
}
}
this.tool?.mouseUp(this.moved);
if (this.handlingBezier) {
this.history.appendToHistory([
{
object: this.handlingBezier[0],
property: this.handlingBezier[1],
value: this.handlingBezier[2],
},
]);
}
if (this.handlingLine) {
this.history.appendToHistory([
{
object: this.handlingLine[0],
property: this.handlingLine[1],
value: this.handlingLine[2],
},
]);
}
if (this.movingObject || this.handlingLine || this.handlingBezier) {
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: {
event: 'line-move',
object: this.handlingLine || this.handlingBezier || this.clickedOn,
},
})
);
}
this.handlingBezier = null;
this.handlingLine = null;
this.clickedOn = null;
this.movingObject = false;
}
private getSequentialId() {
return (
this.manager.layers.reduce(
(total, current) =>
current.contents.reduce(
(total2, current2) => current2.id + total2,
0
) + total,
0
) + 1
);
}
private startLine() {
if (!this.selectedLayer?.visible) return;
if (this.drawingLine) {
if (
vec2Equals(
this.mousePositionSnapped,
this.drawingLine.segments[0].start as Vec2
) ||
this.drawingLine.type === 'curve'
) {
if (this.drawingLine.type !== 'curve') {
this.drawingLine.segments.splice(
this.drawingLine.segments.length - 1,
1
);
}
this.history.appendToHistory([
{
object: this.selectedLayer,
property: 'contents',
value: [...this.selectedLayer.contents].filter(
(item) => item !== this.drawingLine
),
} as History<typeof this.selectedLayer>,
{
object: this,
property: 'selectedObjects',
value: [],
},
]);
this.drawingLine.closed = true;
this.canvas.dispatchEvent(
new CustomEvent('hpc:newobject', {
detail: this.drawingLine,
})
);
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: { event: 'newobject', object: this.drawingLine },
})
);
this.drawingLine = null;
return;
}
this.drawingLine.segments.push({
end: [...this.mousePositionSnapped],
});
return;
}
const newLineObject: Line = {
id: this.getSequentialId(),
name: 'New Line',
type: this.subTool!,
visible: true,
selected: false,
closed: false,
color: this.lastColor,
width: this.subTool === 'curve' ? 2 : this.lastStrokeWidth,
segments: [
{
start: [...this.mousePositionSnapped],
end: [...this.mousePositionSnapped],
},
],
};
this.drawingLine = newLineObject;
this.selectedLayer.contents.unshift(newLineObject);
this.selectObject(this.drawingLine);
this.canvas.dispatchEvent(
new CustomEvent('hpc:startdrawing', {
detail: newLineObject,
})
);
}
private pick() {
if (this.clickedOn && this.isSelected(this.clickedOn)) {
// Pick line segment
if ((this.clickedOn as Line).segments) {
const segment = this.getMousedLineSegment(this.clickedOn as Line);
}
}
this.selectObject(this.clickedOn, this.holdShift);
}
private dragEvent(x: number, y: number) {
@ -737,44 +450,11 @@ export class HousePlannerCanvasTools {
let offset = vec2Sub(currentPos, this.mousePositionSnapped);
if (!this.selectedLayer) return;
if (this.tool) {
if (this.drawingLine) {
const lastSegment = this.drawingLine.segments.at(-1);
if (lastSegment) {
lastSegment.end = [...this.mousePositionSnapped];
}
}
this.manager.draw();
}
if (this.drawingLine) {
return;
}
if (this.handlingBezier) {
const [segment, property] = this.handlingBezier;
segment[property] = [...this.mousePositionSnapped];
this.manager.draw();
} else if (this.handlingLine) {
const [segment, property] = this.handlingLine;
segment[property] = [...this.mousePositionSnapped];
this.manager.draw();
} else if (this.clickedOn) {
if (!this.movingObject) {
// TODO: optimize history storage
this.history.appendToHistory([
{
object: this.selectedLayer,
property: 'contents',
value: JSON.parse(JSON.stringify(this.selectedLayer['contents'])),
},
]);
this.movingObject = true;
}
this.translate(vec2Inverse(offset));
}
this.tool?.mouseMoved(
this.mousePositionSnapped,
offset,
this.mousePosition
);
}
private selectedEvent() {

192
src/modules/house-planner/tools/line.ts Normal file
View File

@ -0,0 +1,192 @@
import { History, LayerObject, Line, Vec2 } from '../interfaces';
import { LayerObjectType } from '../types';
import { vec2Equals } from '../utils';
import { CanvasToolBase } from './tool-base';
export type LineToolType = 'line' | 'curve' | 'room';
export class LineTool extends CanvasToolBase<LineToolType> {
public name = 'line';
private drawingLine: Line | null = null;
public subTool: LineToolType = 'line';
drawControls(): void {
const [mx, my] = this.mousePosition;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.beginPath();
this.ctx.arc(mx, my, this.manager.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
}
mouseDown(targetObject?: LayerObject | undefined): void {}
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2): void {
super.mouseMoved(mouse, offset, mouseAbsolute);
if (this.drawingLine) {
const lastSegment = this.drawingLine.segments.at(-1);
if (lastSegment) {
lastSegment.end = [...mouse];
}
}
this.renderer.draw();
}
mouseUp(moved?: boolean): void {
if (!moved) this.startLine();
}
enterPress(e: KeyboardEvent): void {
if (this.drawingLine && this.layer) {
if (this.subTool === 'room') {
this.drawingLine.closed = true;
}
this.drawingLine.segments.splice(this.drawingLine.segments.length - 1, 1);
this.history.appendToHistory([
{
object: this.layer,
property: 'contents',
value: [...this.layer.contents].filter(
(item) => item !== this.drawingLine
),
} as History<typeof this.layer>,
{
object: this,
property: 'selectedObjects',
value: [],
},
]);
this.emitEvent(
new CustomEvent('hpc:newobject', {
detail: this.drawingLine,
})
);
this.emitEvent(
new CustomEvent('hpc:update', {
detail: { event: 'newobject', object: this.drawingLine },
})
);
this.drawingLine = null;
this.renderer.draw();
}
}
escapePress(e: KeyboardEvent): void {
this.cancel();
}
selectionDeleted(): void {
this.drawingLine = null;
}
private cancel() {
if (!this.layer || !this.drawingLine) return;
const indexOf = this.layer.contents.indexOf(this.drawingLine);
if (indexOf > -1) {
this.layer.contents.splice(indexOf, 1);
}
this.drawingLine = null;
this.renderer.draw();
this.emitEvent(
new CustomEvent('hpc:update', {
detail: { event: 'draw-cancel' },
})
);
}
private getSequentialId() {
return (
this.renderer.layers.reduce(
(total, current) =>
current.contents.reduce(
(total2, current2) => current2.id + total2,
0
) + total,
0
) + 1
);
}
private startLine() {
if (!this.layer?.visible) return;
if (this.drawingLine) {
if (
vec2Equals(
this.mousePosition,
this.drawingLine.segments[0].start as Vec2
) ||
this.drawingLine.type === 'curve'
) {
if (this.drawingLine.type !== 'curve') {
this.drawingLine.segments.splice(
this.drawingLine.segments.length - 1,
1
);
}
this.history.appendToHistory([
{
object: this.layer,
property: 'contents',
value: [...this.layer.contents].filter(
(item) => item !== this.drawingLine
),
} as History<typeof this.layer>,
{
object: this,
property: 'selectedObjects',
value: [],
},
]);
this.drawingLine.closed = true;
this.canvas.dispatchEvent(
new CustomEvent('hpc:newobject', {
detail: this.drawingLine,
})
);
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: { event: 'newobject', object: this.drawingLine },
})
);
this.drawingLine = null;
return;
}
this.drawingLine.segments.push({
end: [...this.mousePosition],
});
return;
}
const newLineObject: Line = {
id: this.getSequentialId(),
name: this.defaultName,
type: this.subTool! as LayerObjectType,
visible: true,
selected: false,
closed: false,
color: this.manager.lastColor,
width: this.subTool === 'curve' ? 2 : this.manager.lastStrokeWidth,
segments: [
{
start: [...this.mousePosition],
end: [...this.mousePosition],
},
],
};
this.drawingLine = newLineObject;
this.layer.contents.unshift(newLineObject);
this.manager.selectObject(this.drawingLine);
this.canvas.dispatchEvent(
new CustomEvent('hpc:startdrawing', {
detail: newLineObject,
})
);
}
private get defaultName() {
let name = 'New ';
if (this.subTool === 'curve') return name + 'Curve';
if (this.subTool === 'room') return name + 'Room';
return name + 'Line';
}
}

249
src/modules/house-planner/tools/move.ts Normal file
View File

@ -0,0 +1,249 @@
import {
BezierSegment,
LayerObject,
Line,
LineSegment,
Vec2,
} from '../interfaces';
import { BezierControl, LineControl } from '../types';
import { vec2InCircle, vec2Add, vec2Inverse } from '../utils';
import { CanvasToolBase } from './tool-base';
export class MoveTool extends CanvasToolBase<undefined> {
public name = 'move';
private bezierControls: BezierSegment[] = [];
private lineControls: LineSegment[] = [];
private handlingBezier: BezierControl | null = null;
private handlingLine: LineControl | null = null;
private movingObject = false;
private clickedOn?: LayerObject;
drawControls() {
this.bezierControls.length = 0;
this.lineControls.length = 0;
for (const object of this.manager.selectedObjects) {
const line = object as Line;
if (line.segments && line.render) {
let lastSegment = null;
for (const segment of line.segments) {
const bezier = segment as BezierSegment;
const previousPoint = lastSegment ? lastSegment.end : segment.start!;
if (bezier.startControl && bezier.endControl) {
this.drawBezierControls(bezier, previousPoint);
}
this.drawLineControls(segment, previousPoint);
lastSegment = segment;
}
}
// TODO: other kinds of objects
}
}
mouseDown(targetObject?: LayerObject | undefined): void {
this.clickedOn = targetObject;
const bezierControl = this.grabbedBezierControl();
const lineControl = this.grabbedLineControl();
if (bezierControl) {
this.handlingBezier = bezierControl;
} else if (lineControl) {
this.handlingLine = lineControl;
} else if (
targetObject &&
!this.manager.selectedObjects.includes(targetObject)
) {
this.manager.selectObject(targetObject);
}
}
mouseUp(moved?: boolean): void {
if (!this.handlingBezier && !this.handlingLine && !this.movingObject) {
this.pick();
}
if (this.handlingBezier) {
this.history.appendToHistory([
{
object: this.handlingBezier[0],
property: this.handlingBezier[1],
value: this.handlingBezier[2],
},
]);
}
if (this.handlingLine) {
this.history.appendToHistory([
{
object: this.handlingLine[0],
property: this.handlingLine[1],
value: this.handlingLine[2],
},
]);
}
if (this.movingObject || this.handlingLine || this.handlingBezier) {
this.canvas.dispatchEvent(
new CustomEvent('hpc:update', {
detail: {
event: 'line-move',
object: this.handlingLine || this.handlingBezier || this.clickedOn,
},
})
);
}
this.handlingBezier = null;
this.handlingLine = null;
this.movingObject = false;
this.clickedOn = undefined;
}
private pick() {
if (this.clickedOn && this.manager.isSelected(this.clickedOn)) {
// Pick line segment
if ((this.clickedOn as Line).segments) {
const segment = this.manager.getMousedLineSegment(
this.clickedOn as Line
);
}
}
this.manager.selectObject(this.clickedOn, this.manager.holdShift);
}
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2): void {
super.mouseMoved(mouse, offset, mouseAbsolute);
if (!this.layer) return;
if (this.handlingBezier) {
const [segment, property] = this.handlingBezier;
segment[property] = [...mouse];
this.renderer.draw();
} else if (this.handlingLine) {
const [segment, property] = this.handlingLine;
segment[property] = [...mouse];
this.renderer.draw();
} else if (this.clickedOn) {
if (!this.movingObject) {
// TODO: optimize history storage
this.history.appendToHistory([
{
object: this.layer,
property: 'contents',
value: JSON.parse(JSON.stringify(this.layer['contents'])),
},
]);
this.movingObject = true;
}
this.translate(vec2Inverse(offset));
}
}
drawBezierControls(bezier: BezierSegment, previousEnd: Vec2) {
this.bezierControls.push(bezier);
const [cp1x, cp1y] = bezier.startControl;
const [cp2x, cp2y] = bezier.endControl;
const [endx, endy] = bezier.end;
const [prevx, prevy] = previousEnd;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.strokeStyle = '#00ddffaa';
this.ctx.lineWidth = 2;
this.ctx.beginPath();
this.ctx.arc(cp1x, cp1y, this.manager.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
this.ctx.beginPath();
this.ctx.arc(cp2x, cp2y, this.manager.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
this.ctx.beginPath();
this.ctx.moveTo(cp1x, cp1y);
this.ctx.lineTo(prevx, prevy);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(cp2x, cp2y);
this.ctx.lineTo(endx, endy);
this.ctx.stroke();
}
drawLineControls(line: LineSegment, previousEnd: Vec2) {
this.lineControls.push(line);
const [endx, endy] = line.end;
this.ctx.fillStyle = '#00ddffaa';
this.ctx.beginPath();
this.ctx.arc(endx, endy, this.manager.selectError / 2, 0, 2 * Math.PI);
this.ctx.fill();
if (line.start) {
const [startx, starty] = line.start;
this.ctx.beginPath();
this.ctx.arc(
startx,
starty,
this.manager.selectError / 2,
0,
2 * Math.PI
);
this.ctx.fill();
}
}
private grabbedBezierControl() {
let clickedOnControl: BezierControl | null = null;
for (const bezier of this.bezierControls) {
for (const control of ['startControl', 'endControl']) {
const asType = control as 'startControl' | 'endControl';
if (
vec2InCircle(
bezier[asType],
this.mousePosition,
this.manager.selectError / 2
)
) {
clickedOnControl = [bezier, asType, bezier[asType]];
}
}
}
return clickedOnControl;
}
private grabbedLineControl() {
let clickedOnControl: LineControl | null = null;
for (const line of this.lineControls) {
for (const control of ['start', 'end']) {
const asType = control as 'start' | 'end';
if (
line[asType] &&
vec2InCircle(
line[asType] as Vec2,
this.mousePosition,
this.manager.selectError / 2
)
) {
clickedOnControl = [line, asType, line[asType] as Vec2];
}
}
}
return clickedOnControl;
}
private translate(offset: Vec2) {
for (const object of this.manager.selectedObjects) {
if ((object as Line).segments) {
for (const segment of (object as Line).segments) {
if ((segment as BezierSegment).startControl) {
const bezier = segment as BezierSegment;
bezier.startControl = vec2Add(bezier.startControl, offset);
bezier.endControl = vec2Add(bezier.endControl, offset);
}
if (segment.start) {
segment.start = vec2Add(segment.start, offset);
}
segment.end = vec2Add(segment.end, offset);
}
}
}
this.renderer.draw();
}
}

56
src/modules/house-planner/tools/tool-base.ts Normal file
View File

@ -0,0 +1,56 @@
import { ICanvasToolBase, LayerObject, Vec2 } from '../interfaces';
import type { HousePlannerCanvasTools } from '../tools';
export class CanvasToolBase<T> implements ICanvasToolBase<T> {
protected mousePosition: Vec2 = [0, 0];
protected mousePositionAbsolute: Vec2 = [0, 0];
public name = 'tool';
public subTool: T | undefined;
constructor(public manager: HousePlannerCanvasTools) {}
get ctx() {
return this.manager.ctx;
}
get canvas() {
return this.manager.canvas;
}
get history() {
return this.manager.history;
}
get renderer() {
return this.manager.manager;
}
get layer() {
return this.manager.selectedLayer;
}
drawHighlights() {}
drawControls() {}
mouseDown(targetObject?: LayerObject) {}
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2) {
this.mousePosition = mouse;
this.mousePositionAbsolute = mouseAbsolute;
}
mouseUp(moved = false) {}
setSubTool(subTool: T) {
this.subTool = subTool;
}
activate() {}
deactivate() {}
enterPress(e: KeyboardEvent): void {}
escapePress(e: KeyboardEvent): void {}
emitEvent(e: CustomEvent<any>): void {
this.canvas.dispatchEvent(e);
}
isToolCancelable(): boolean {
return true;
}
selectionDeleted(): void {}
selectionChanged(selection: LayerObject[]): void {}
}

3
src/modules/house-planner/types.ts
View File

@ -1,8 +1,5 @@
import { BezierSegment, LineSegment, Vec2 } from './interfaces';
export type ToolType = 'line' | null;
export type SubToolType = 'line' | 'curve' | 'room';
export type BezierControl = [
BezierSegment,
'startControl' | 'endControl',

3
src/style.scss
View File

@ -2,3 +2,6 @@
@tailwind components;
@tailwind utilities;
.min-h-half {
min-height: 50%;
}