some cleanup
This commit is contained in:
parent
b82f1b03f2
commit
cef1b80679
GPG Key ID:
1688DA83D222D0B5
@ -59,10 +59,8 @@ import {
|
||||
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 {
|
||||
@ -71,12 +69,10 @@ import {
|
||||
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';
|
||||
@ -149,7 +145,7 @@ const selectTool = (newTool?: string, newSubTool?: string) => {
|
||||
if (newTool === tool.value && !newSubTool) {
|
||||
newTool = undefined;
|
||||
}
|
||||
module.value.manager?.tools.setTool(newTool, newSubTool);
|
||||
module.value.manager?.tools?.setTool(newTool, newSubTool);
|
||||
};
|
||||
|
||||
const commitObjectName = (layerId: number, objectId: number, name: string) => {
|
||||
@ -163,13 +159,13 @@ const commitLayerName = (layerId: number, name: string) => {
|
||||
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);
|
||||
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);
|
||||
module.value.manager?.tools?.selectLayer(layer);
|
||||
};
|
||||
|
||||
const updateObjectProperty = (
|
||||
@ -188,7 +184,7 @@ onMounted(() => {
|
||||
canvas.value,
|
||||
deepUnref(serializedLayers.value),
|
||||
[1920, 1080],
|
||||
canvasPos,
|
||||
canvasPos.value,
|
||||
canvasZoom.value
|
||||
);
|
||||
|
||||
@ -204,7 +200,7 @@ onMounted(() => {
|
||||
subTool.value = e.detail.secondary as string;
|
||||
},
|
||||
'hpc:position': (e: CustomEvent<RepositionEvent>) => {
|
||||
//canvasPos.value = e.detail.position;
|
||||
canvasPos.value = e.detail.position;
|
||||
canvasZoom.value = e.detail.zoom;
|
||||
},
|
||||
};
|
||||
|
||||
@ -3,21 +3,14 @@
|
||||
<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)"
|
||||
@click="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>
|
||||
<span>{{ layer.name }}</span>
|
||||
</button>
|
||||
<div class="flex flex-col bg-gray-50" v-if="layer.active">
|
||||
<div v-for="object of layer.contents">
|
||||
@ -29,7 +22,10 @@
|
||||
emit('selectObject', layer.id, object.id, e.shiftKey)
|
||||
"
|
||||
:class="[
|
||||
object.selected ? 'bg-blue-100' : '',
|
||||
object.selected
|
||||
? 'bg-blue-100 hover:bg-blue-200'
|
||||
: 'hover:bg-gray-100',
|
||||
!object.visible ? 'italic text-gray-500' : '',
|
||||
'flex w-full flex-row items-center justify-start space-x-2 px-2 py-2 pl-6',
|
||||
]"
|
||||
>
|
||||
@ -81,7 +77,6 @@ const emit = defineEmits<{
|
||||
(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) => {
|
||||
@ -89,10 +84,4 @@ const commitObjectName = (layerId: number, name: string) => {
|
||||
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>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { clamp } from '@vueuse/core';
|
||||
import type { Ref } from 'vue';
|
||||
import { HousePlannerCanvasGrid } from './grid';
|
||||
import {
|
||||
@ -19,24 +20,37 @@ import {
|
||||
vec2DivideScalar,
|
||||
vec2MultiplyScalar,
|
||||
vec2PointFromAngle,
|
||||
vec2Snap,
|
||||
vec2Sub,
|
||||
} from './utils';
|
||||
|
||||
export class HousePlannerCanvas {
|
||||
public ctx!: CanvasRenderingContext2D;
|
||||
public layers: Layer[] = [];
|
||||
public tools = new HousePlannerCanvasTools(this);
|
||||
public tools?;
|
||||
public grid = new HousePlannerCanvasGrid(this, 8);
|
||||
public mousePosition: Vec2 = [0, 0];
|
||||
public mouseClickPosition: Vec2 = [0, 0];
|
||||
public mousePositionSnapped: Vec2 = [0, 0];
|
||||
private dragging = false;
|
||||
private pinching = false;
|
||||
private lastPinchLength = 0;
|
||||
private moved = false;
|
||||
private clickedOn: LayerObject | null = null;
|
||||
|
||||
constructor(
|
||||
public canvas: HTMLCanvasElement,
|
||||
public canvasDim: Vec2,
|
||||
public canvasPos: Ref<Vec2>,
|
||||
public canvasZoom = 1
|
||||
public canvasPos: Vec2,
|
||||
public canvasZoom = 1,
|
||||
public editable = true
|
||||
) {
|
||||
this.ctx = this.canvas.getContext('2d')!;
|
||||
this.setupEvents();
|
||||
this.resizeCanvas();
|
||||
if (editable) {
|
||||
this.tools = new HousePlannerCanvasTools(this);
|
||||
}
|
||||
}
|
||||
|
||||
get width() {
|
||||
@ -60,7 +74,7 @@ export class HousePlannerCanvas {
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.tools.cleanUp();
|
||||
this.tools?.cleanUp();
|
||||
window.removeEventListener('keyup', this.boundKeyUpEvent);
|
||||
window.removeEventListener('keydown', this.boundKeyDownEvent);
|
||||
}
|
||||
@ -68,13 +82,13 @@ export class HousePlannerCanvas {
|
||||
draw() {
|
||||
this.ctx.clearRect(0, 0, this.width, this.height);
|
||||
this.grid.draw();
|
||||
this.tools.drawHighlights();
|
||||
for (const layer of this.layers) {
|
||||
this.tools?.drawHighlights();
|
||||
for (const layer of this.layers.slice().reverse()) {
|
||||
if (!layer.visible) continue;
|
||||
if (!layer.contents?.length) continue;
|
||||
this.drawLayer(layer);
|
||||
}
|
||||
this.tools.drawControls();
|
||||
this.tools?.drawControls();
|
||||
}
|
||||
|
||||
makeBezier(segment: BezierSegment, path: Path2D) {
|
||||
@ -184,7 +198,7 @@ export class HousePlannerCanvas {
|
||||
) {
|
||||
const object = this.getLayerObjectById(layerId, objectId);
|
||||
if (!object) return;
|
||||
this.tools.history.appendToHistory(
|
||||
this.tools?.history.appendToHistory(
|
||||
Object.keys(properties).map((key) => ({
|
||||
object,
|
||||
property: key,
|
||||
@ -207,7 +221,7 @@ export class HousePlannerCanvas {
|
||||
) {
|
||||
const layer = this.getLayerById(layerId);
|
||||
if (!layer) return;
|
||||
this.tools.history.appendToHistory(
|
||||
this.tools?.history.appendToHistory(
|
||||
Object.keys(properties).map((key) => ({
|
||||
object: layer,
|
||||
property: key,
|
||||
@ -226,7 +240,7 @@ export class HousePlannerCanvas {
|
||||
|
||||
translateCanvas(offset: Vec2) {
|
||||
const realSize = vec2MultiplyScalar(this.canvasDim, this.canvasZoom);
|
||||
this.canvasPos.value = vec2Sub(this.canvasPos.value, offset);
|
||||
this.canvasPos = vec2Sub(this.canvasPos, offset);
|
||||
this.repositionEvent();
|
||||
}
|
||||
|
||||
@ -235,16 +249,24 @@ export class HousePlannerCanvas {
|
||||
this.repositionEvent();
|
||||
}
|
||||
|
||||
realMousePos(x: number, y: number) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const scaleX = this.canvas.width / rect.width;
|
||||
const scaleY = this.canvas.height / rect.height;
|
||||
this.mousePosition = [(x - rect.left) * scaleX, (y - rect.top) * scaleY];
|
||||
this.mousePositionSnapped = !!this.grid.gridSnap
|
||||
? vec2Snap(this.mousePosition, this.grid.gridSnap)
|
||||
: this.mousePosition;
|
||||
}
|
||||
|
||||
private keyDownEvent(e: KeyboardEvent) {
|
||||
if (e.target !== document.body && e.target != null) return;
|
||||
e.preventDefault();
|
||||
this.tools.onKeyDown(e);
|
||||
this.tools?.onKeyDown(e);
|
||||
}
|
||||
private boundKeyDownEvent = this.keyDownEvent.bind(this);
|
||||
private keyUpEvent(e: KeyboardEvent) {
|
||||
if (e.target !== document.body && e.target != null) return;
|
||||
e.preventDefault();
|
||||
this.tools.onKeyUp(e);
|
||||
this.tools?.onKeyUp(e);
|
||||
}
|
||||
private boundKeyUpEvent = this.keyUpEvent.bind(this);
|
||||
|
||||
@ -252,20 +274,16 @@ export class HousePlannerCanvas {
|
||||
window.addEventListener('keyup', this.boundKeyUpEvent);
|
||||
window.addEventListener('keydown', this.boundKeyDownEvent);
|
||||
|
||||
this.canvas.addEventListener('mousemove', (e) => this.tools.onMouseMove(e));
|
||||
this.canvas.addEventListener('mousedown', (e) => this.tools.onMouseDown(e));
|
||||
this.canvas.addEventListener('mouseup', (e) => this.tools.onMouseUp(e));
|
||||
this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e));
|
||||
this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e));
|
||||
this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e));
|
||||
|
||||
this.canvas.addEventListener('touchmove', (e) => this.tools.onTouchMove(e));
|
||||
this.canvas.addEventListener('touchstart', (e) =>
|
||||
this.tools.onTouchStart(e)
|
||||
);
|
||||
this.canvas.addEventListener('touchend', (e) => this.tools.onTouchEnd(e));
|
||||
this.canvas.addEventListener('wheel', (e) => this.tools.onMouseWheel(e));
|
||||
this.canvas.addEventListener('touchmove', (e) => this.onTouchMove(e));
|
||||
this.canvas.addEventListener('touchstart', (e) => this.onTouchStart(e));
|
||||
this.canvas.addEventListener('touchend', (e) => this.onTouchEnd(e));
|
||||
this.canvas.addEventListener('wheel', (e) => this.onMouseWheel(e));
|
||||
|
||||
this.canvas.addEventListener('pointerleave', () =>
|
||||
this.tools.onPointerLeave()
|
||||
);
|
||||
this.canvas.addEventListener('pointerleave', () => this.onPointerLeave());
|
||||
}
|
||||
|
||||
private drawRoomText(line: Line) {
|
||||
@ -317,11 +335,156 @@ export class HousePlannerCanvas {
|
||||
}
|
||||
}
|
||||
|
||||
onMouseMove(e: MouseEvent) {
|
||||
this.dragEvent(e.clientX, e.clientY);
|
||||
}
|
||||
onMouseDown(e: MouseEvent) {
|
||||
this.mouseClickPosition = [e.clientX, e.clientY];
|
||||
this.moved = false;
|
||||
|
||||
this.pointerDown();
|
||||
}
|
||||
onMouseUp(e: MouseEvent) {
|
||||
this.dragging = false;
|
||||
this.pointerUp();
|
||||
}
|
||||
|
||||
onTouchMove(ev: TouchEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (ev.touches.length === 2 && this.pinching) {
|
||||
const pinchLength = Math.hypot(
|
||||
ev.touches[0].pageX - ev.touches[1].pageX,
|
||||
ev.touches[0].pageY - ev.touches[1].pageY
|
||||
);
|
||||
|
||||
if (this.lastPinchLength) {
|
||||
const delta = pinchLength / this.lastPinchLength;
|
||||
const scaleX =
|
||||
(ev.touches[0].clientX - this.canvasPos[0]) / this.canvasZoom;
|
||||
const scaleY =
|
||||
(ev.touches[0].clientY - this.canvasPos[1]) / this.canvasZoom;
|
||||
|
||||
delta > 0 ? (this.canvasZoom *= delta) : (this.canvasZoom /= delta);
|
||||
this.canvasZoom = clamp(this.canvasZoom, 1, 100);
|
||||
|
||||
this.canvasPos = [
|
||||
ev.touches[0].clientX - scaleX * this.canvasZoom,
|
||||
ev.touches[0].clientY - scaleY * this.canvasZoom,
|
||||
];
|
||||
this.repositionEvent();
|
||||
}
|
||||
this.lastPinchLength = pinchLength;
|
||||
}
|
||||
|
||||
this.dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
|
||||
}
|
||||
|
||||
onTouchStart(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0] || e.changedTouches[0];
|
||||
this.dragging = true;
|
||||
this.moved = false;
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
this.pinching = true;
|
||||
}
|
||||
|
||||
this.pointerDown();
|
||||
}
|
||||
onTouchEnd(e: TouchEvent) {
|
||||
this.pinching = false;
|
||||
this.lastPinchLength = 0;
|
||||
|
||||
if (!e.touches?.length) {
|
||||
this.dragging = false;
|
||||
}
|
||||
|
||||
this.pointerUp();
|
||||
}
|
||||
|
||||
onPointerLeave() {
|
||||
this.dragging = false;
|
||||
}
|
||||
|
||||
private onMouseWheel(e: WheelEvent) {
|
||||
e.preventDefault();
|
||||
this.realMousePos(e.clientX, e.clientY);
|
||||
|
||||
const scaleX = (e.clientX - this.canvasPos[0]) / this.canvasZoom;
|
||||
const scaleY = (e.clientY - this.canvasPos[1]) / this.canvasZoom;
|
||||
e.deltaY < 0 ? (this.canvasZoom *= 1.2) : (this.canvasZoom /= 1.2);
|
||||
this.canvasZoom = clamp(this.canvasZoom, 0.1, 10);
|
||||
this.canvasPos = [
|
||||
e.clientX - scaleX * this.canvasZoom,
|
||||
e.clientY - scaleY * this.canvasZoom,
|
||||
];
|
||||
|
||||
// this.canvasPos = [
|
||||
// clamp(this.canvasPos[0], -window.innerWidth / 2, window.innerWidth / 2),
|
||||
// clamp(this.canvasPos[1], -window.innerHeight / 2, window.innerHeight / 2),
|
||||
// ];
|
||||
this.repositionEvent();
|
||||
}
|
||||
|
||||
private dragEvent(x: number, y: number) {
|
||||
this.moved = true;
|
||||
|
||||
const currentPosAbsolute: Vec2 = [...this.mousePosition];
|
||||
const currentPosSnapped: Vec2 = [
|
||||
...(!!this.grid.gridSnap
|
||||
? this.mousePositionSnapped
|
||||
: this.mousePosition),
|
||||
];
|
||||
|
||||
this.realMousePos(x, y);
|
||||
let offset = vec2Sub(currentPosSnapped, this.mousePositionSnapped);
|
||||
let offsetAbsolute = vec2Sub(currentPosAbsolute, this.mousePosition);
|
||||
|
||||
this.tools?.mouseMoved(
|
||||
this.mousePositionSnapped,
|
||||
offset,
|
||||
this.mousePosition
|
||||
);
|
||||
|
||||
if (this.dragging) {
|
||||
const divided = vec2MultiplyScalar(offsetAbsolute, this.canvasZoom);
|
||||
this.translateCanvas(divided);
|
||||
// Bias the offset
|
||||
const [nx, ny] = vec2Add([x, y], divided);
|
||||
this.realMousePos(nx, ny);
|
||||
}
|
||||
}
|
||||
|
||||
private pointerDown() {
|
||||
if (!this.tools) return;
|
||||
this.clickedOn = this.tools.getMousedObject();
|
||||
this.tools.mouseDown(this.clickedOn || undefined);
|
||||
if (!this.clickedOn) {
|
||||
this.dragging = true;
|
||||
}
|
||||
}
|
||||
|
||||
private pointerUp() {
|
||||
// FIXME: possibly there's a better approach, but right now some clicks do not register
|
||||
if (
|
||||
this.moved &&
|
||||
vec2Distance(this.mouseClickPosition, this.mousePosition) < 0.25
|
||||
) {
|
||||
this.moved = false;
|
||||
}
|
||||
|
||||
this.tools?.mouseUp(this.moved);
|
||||
|
||||
this.dragging = false;
|
||||
this.clickedOn = null;
|
||||
}
|
||||
|
||||
private repositionEvent() {
|
||||
this.canvas.dispatchEvent(
|
||||
new CustomEvent<RepositionEvent>('hpc:position', {
|
||||
detail: {
|
||||
position: this.canvasPos.value,
|
||||
position: this.canvasPos,
|
||||
zoom: this.canvasZoom,
|
||||
},
|
||||
})
|
||||
|
||||
@ -10,7 +10,7 @@ export class HousePlanner {
|
||||
canvas: HTMLCanvasElement,
|
||||
initialData: Layer[],
|
||||
canvasDim: Vec2,
|
||||
canvasPos: Ref<Vec2>,
|
||||
canvasPos: Vec2,
|
||||
canvasZoom = 1,
|
||||
editable = true
|
||||
) {
|
||||
@ -19,14 +19,19 @@ export class HousePlanner {
|
||||
canvas,
|
||||
canvasDim,
|
||||
canvasPos,
|
||||
canvasZoom
|
||||
canvasZoom,
|
||||
editable
|
||||
);
|
||||
this.manager.layers = initialData;
|
||||
|
||||
if (editable && this.manager.tools) {
|
||||
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();
|
||||
}
|
||||
|
||||
@ -60,14 +60,17 @@ export interface RepositionEvent {
|
||||
zoom: number;
|
||||
}
|
||||
|
||||
export interface ICanvasToolBase<U = undefined> {
|
||||
export interface ICanvasToolMouseEvents {
|
||||
mouseDown(targetObject?: LayerObject): void;
|
||||
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2): void;
|
||||
mouseUp(moved: boolean): void;
|
||||
}
|
||||
|
||||
export interface ICanvasToolBase<U = undefined> extends ICanvasToolMouseEvents {
|
||||
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;
|
||||
|
||||
@ -1,33 +1,21 @@
|
||||
import { clamp } from '@vueuse/core';
|
||||
import type { HousePlannerCanvas } from './canvas';
|
||||
import { HousePlannerCanvasHistory } from './history';
|
||||
import {
|
||||
History,
|
||||
ICanvasToolBase,
|
||||
ICanvasToolMouseEvents,
|
||||
Layer,
|
||||
LayerObject,
|
||||
Line,
|
||||
RepositionEvent,
|
||||
ToolEvent,
|
||||
Vec2,
|
||||
} from './interfaces';
|
||||
import { LineTool } from './tools/line';
|
||||
import { MoveTool } from './tools/move';
|
||||
import {
|
||||
vec2Add,
|
||||
vec2Distance,
|
||||
vec2DivideScalar,
|
||||
vec2MultiplyScalar,
|
||||
vec2Snap,
|
||||
vec2Sub,
|
||||
} from './utils';
|
||||
|
||||
export class HousePlannerCanvasTools {
|
||||
export class HousePlannerCanvasTools implements ICanvasToolMouseEvents {
|
||||
public selectedLayer?: Layer;
|
||||
public selectedObjects: LayerObject[] = [];
|
||||
public mousePosition: Vec2 = [0, 0];
|
||||
public mouseClickPosition: Vec2 = [0, 0];
|
||||
public mousePositionSnapped: Vec2 = [0, 0];
|
||||
public gridSnap = true;
|
||||
public gridSnapScale = 8;
|
||||
public tool?: ICanvasToolBase<unknown>;
|
||||
@ -40,11 +28,6 @@ export class HousePlannerCanvasTools {
|
||||
public lastColor = '#000000';
|
||||
public holdShift = false;
|
||||
public selectError = 16;
|
||||
private dragging = false;
|
||||
private pinching = false;
|
||||
private lastPinchLength = 0;
|
||||
private moved = false;
|
||||
private clickedOn: LayerObject | null = null;
|
||||
|
||||
constructor(public manager: HousePlannerCanvas) {}
|
||||
|
||||
@ -82,6 +65,8 @@ export class HousePlannerCanvasTools {
|
||||
},
|
||||
})
|
||||
);
|
||||
this.selectedEvent();
|
||||
this.manager.draw();
|
||||
}
|
||||
|
||||
selectObject(object?: LayerObject | null, add = false) {
|
||||
@ -142,7 +127,7 @@ export class HousePlannerCanvasTools {
|
||||
|
||||
getMousedObject() {
|
||||
if (!this.selectedLayer?.visible) return null;
|
||||
const [x, y] = this.mousePosition;
|
||||
const [x, y] = this.manager.mousePosition;
|
||||
for (const object of this.selectedLayer.contents) {
|
||||
if ((object as Line).segments) {
|
||||
const moused = this.manager.isOnLine(
|
||||
@ -160,7 +145,7 @@ export class HousePlannerCanvasTools {
|
||||
|
||||
getMousedLineSegment(line: Line) {
|
||||
if (!this.selectedLayer?.visible) return null;
|
||||
const [x, y] = this.mousePosition;
|
||||
const [x, y] = this.manager.mousePosition;
|
||||
let lastSegment = null;
|
||||
for (const segment of line.segments) {
|
||||
const lastPoint = lastSegment ? lastSegment.end : (segment.start as Vec2);
|
||||
@ -242,116 +227,21 @@ export class HousePlannerCanvasTools {
|
||||
return this.tool?.name;
|
||||
}
|
||||
|
||||
onMouseMove(e: MouseEvent) {
|
||||
this.dragEvent(e.clientX, e.clientY);
|
||||
}
|
||||
onMouseDown(e: MouseEvent) {
|
||||
this.mouseClickPosition = [e.clientX, e.clientY];
|
||||
this.moved = false;
|
||||
|
||||
this.pointerDown();
|
||||
}
|
||||
onMouseUp(e: MouseEvent) {
|
||||
this.dragging = false;
|
||||
this.pointerUp();
|
||||
mouseDown(targetObject?: LayerObject | undefined): void {
|
||||
this?.tool?.mouseDown(targetObject);
|
||||
}
|
||||
|
||||
onTouchMove(ev: TouchEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (ev.touches.length === 2 && this.pinching) {
|
||||
const pinchLength = Math.hypot(
|
||||
ev.touches[0].pageX - ev.touches[1].pageX,
|
||||
ev.touches[0].pageY - ev.touches[1].pageY
|
||||
);
|
||||
|
||||
// TODO: zoom
|
||||
// if (this.lastPinchLength) {
|
||||
// const delta = pinchLength / this.lastPinchLength;
|
||||
// const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom;
|
||||
// const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom;
|
||||
|
||||
// delta > 0 ? (this._zoom *= delta) : (this._zoom /= delta);
|
||||
// this._zoom = clamp(this._zoom, 1, 100);
|
||||
|
||||
// this._posx = ev.touches[0].clientX - scaleX * this._zoom;
|
||||
// this._posy = ev.touches[0].clientY - scaleY * this._zoom;
|
||||
// }
|
||||
// this.lastPinchLength = pinchLength;
|
||||
mouseMoved(mouse: Vec2, offset: Vec2, mouseAbsolute: Vec2): void {
|
||||
this?.tool?.mouseMoved(mouse, offset, mouseAbsolute);
|
||||
}
|
||||
|
||||
this.dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
|
||||
}
|
||||
|
||||
onTouchStart(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0] || e.changedTouches[0];
|
||||
this.dragging = true;
|
||||
this.moved = false;
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
this.pinching = true;
|
||||
}
|
||||
|
||||
this.pointerDown();
|
||||
}
|
||||
onTouchEnd(e: TouchEvent) {
|
||||
this.pinching = false;
|
||||
this.lastPinchLength = 0;
|
||||
|
||||
if (!e.touches?.length) {
|
||||
this.dragging = false;
|
||||
}
|
||||
|
||||
this.pointerUp();
|
||||
}
|
||||
|
||||
onMouseWheel(e: WheelEvent) {
|
||||
// TODO: zoom
|
||||
e.preventDefault();
|
||||
this.realMousePos(e.clientX, e.clientY);
|
||||
|
||||
const scaleX =
|
||||
(e.clientX - this.manager.canvasPos.value[0]) / this.manager.canvasZoom;
|
||||
const scaleY =
|
||||
(e.clientY - this.manager.canvasPos.value[1]) / this.manager.canvasZoom;
|
||||
e.deltaY < 0
|
||||
? (this.manager.canvasZoom *= 1.2)
|
||||
: (this.manager.canvasZoom /= 1.2);
|
||||
this.manager.canvasZoom = clamp(this.manager.canvasZoom, 0.1, 10);
|
||||
this.manager.canvasPos.value = [
|
||||
e.clientX - scaleX * this.manager.canvasZoom,
|
||||
e.clientY - scaleY * this.manager.canvasZoom,
|
||||
];
|
||||
|
||||
this.manager.canvasPos.value = [
|
||||
clamp(
|
||||
this.manager.canvasPos.value[0],
|
||||
this.mousePosition[0] - this.manager.canvasDim[0],
|
||||
this.mousePosition[0]
|
||||
),
|
||||
clamp(
|
||||
this.manager.canvasPos.value[1],
|
||||
this.mousePosition[1] - this.manager.canvasDim[1],
|
||||
this.mousePosition[1]
|
||||
),
|
||||
];
|
||||
|
||||
this.canvas.dispatchEvent(
|
||||
new CustomEvent<RepositionEvent>('hpc:position', {
|
||||
detail: {
|
||||
position: this.manager.canvasPos.value,
|
||||
zoom: this.manager.canvasZoom,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
onPointerLeave() {
|
||||
this.dragging = false;
|
||||
mouseUp(moved: boolean): void {
|
||||
this?.tool?.mouseUp(moved);
|
||||
}
|
||||
|
||||
onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'z' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.history.undo();
|
||||
this.manager.draw();
|
||||
this.canvas.dispatchEvent(
|
||||
@ -369,6 +259,7 @@ export class HousePlannerCanvasTools {
|
||||
}
|
||||
|
||||
if (e.key === 'y' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.history.redo();
|
||||
this.manager.draw();
|
||||
this.canvas.dispatchEvent(
|
||||
@ -390,9 +281,12 @@ export class HousePlannerCanvasTools {
|
||||
|
||||
onKeyUp(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
this.tool?.enterPress(e);
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
this.tool?.escapePress(e);
|
||||
|
||||
if (this.selectedObjects.length === 0 && this.tool?.isToolCancelable()) {
|
||||
@ -403,14 +297,17 @@ export class HousePlannerCanvasTools {
|
||||
}
|
||||
|
||||
if (e.key === 'Shift') {
|
||||
e.preventDefault();
|
||||
this.holdShift = false;
|
||||
}
|
||||
|
||||
if (e.key === 'l') {
|
||||
e.preventDefault();
|
||||
this.setTool('line');
|
||||
}
|
||||
|
||||
if (e.key === 'Delete' || e.key === 'x') {
|
||||
e.preventDefault();
|
||||
this.deleteSelection();
|
||||
}
|
||||
}
|
||||
@ -440,59 +337,6 @@ export class HousePlannerCanvasTools {
|
||||
);
|
||||
}
|
||||
|
||||
private pointerDown() {
|
||||
this.clickedOn = this.getMousedObject();
|
||||
this.tool?.mouseDown(this.clickedOn || undefined);
|
||||
if (!this.clickedOn) {
|
||||
this.dragging = true;
|
||||
}
|
||||
}
|
||||
|
||||
private pointerUp() {
|
||||
// FIXME: possibly there's a better approach, but right now some clicks do not register
|
||||
if (
|
||||
this.moved &&
|
||||
vec2Distance(this.mouseClickPosition, this.mousePosition) < 0.25
|
||||
) {
|
||||
this.moved = false;
|
||||
}
|
||||
|
||||
this.tool?.mouseUp(this.moved);
|
||||
|
||||
this.dragging = false;
|
||||
this.clickedOn = null;
|
||||
}
|
||||
|
||||
private dragEvent(x: number, y: number) {
|
||||
this.moved = true;
|
||||
|
||||
const currentPosAbsolute: Vec2 = [...this.mousePosition];
|
||||
const currentPosSnapped: Vec2 = [
|
||||
...(this.gridSnap ? this.mousePositionSnapped : this.mousePosition),
|
||||
];
|
||||
|
||||
this.realMousePos(x, y);
|
||||
let offset = vec2Sub(currentPosSnapped, this.mousePositionSnapped);
|
||||
let offsetAbsolute = vec2Sub(currentPosAbsolute, this.mousePosition);
|
||||
|
||||
this.tool?.mouseMoved(
|
||||
this.mousePositionSnapped,
|
||||
offset,
|
||||
this.mousePosition
|
||||
);
|
||||
|
||||
if (this.dragging) {
|
||||
const divided = vec2MultiplyScalar(
|
||||
offsetAbsolute,
|
||||
this.manager.canvasZoom
|
||||
);
|
||||
this.manager.translateCanvas(divided);
|
||||
// Bias the offset
|
||||
const [nx, ny] = vec2Add([x, y], divided);
|
||||
this.realMousePos(nx, ny);
|
||||
}
|
||||
}
|
||||
|
||||
private selectedEvent() {
|
||||
this.canvas.dispatchEvent(
|
||||
new CustomEvent('hpc:selectionchange', {
|
||||
@ -500,14 +344,4 @@ export class HousePlannerCanvasTools {
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private realMousePos(x: number, y: number) {
|
||||
const rect = this.manager.canvas.getBoundingClientRect();
|
||||
const scaleX = this.canvas.width / rect.width;
|
||||
const scaleY = this.canvas.height / rect.height;
|
||||
this.mousePosition = [(x - rect.left) * scaleX, (y - rect.top) * scaleY];
|
||||
this.mousePositionSnapped = this.gridSnap
|
||||
? vec2Snap(this.mousePosition, this.gridSnapScale)
|
||||
: this.mousePosition;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,12 @@ export class MoveTool extends CanvasToolBase<undefined> {
|
||||
}
|
||||
|
||||
mouseUp(moved?: boolean): void {
|
||||
if (!this.handlingBezier && !this.handlingLine && !this.movingObject) {
|
||||
if (
|
||||
!this.handlingBezier &&
|
||||
!this.handlingLine &&
|
||||
!this.movingObject &&
|
||||
!moved
|
||||
) {
|
||||
this.pick();
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user