43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import { Tool } from '../Tool';
|
||
|
|
import { YjsDocument } from '../../crdt/YjsDocument';
|
||
|
|
|
||
|
|
class RectTool extends Tool {
|
||
|
|
private startPoint: { x: number; y: number } | null = null;
|
||
|
|
|
||
|
|
constructor(yjsDoc: YjsDocument) {
|
||
|
|
super(yjsDoc);
|
||
|
|
this.name = 'RectTool';
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseDown(event: MouseEvent): void {
|
||
|
|
if (!this.startPoint) {
|
||
|
|
this.startPoint = { x: event.clientX, y: event.clientY };
|
||
|
|
} else {
|
||
|
|
// Create rectangle element in Yjs document
|
||
|
|
const x = Math.min(this.startPoint.x, event.clientX);
|
||
|
|
const y = Math.min(this.startPoint.y, event.clientY);
|
||
|
|
const width = Math.abs(event.clientX - this.startPoint.x);
|
||
|
|
const height = Math.abs(event.clientY - this.startPoint.y);
|
||
|
|
this.yjsDoc.createRectangle(x, y, width, height);
|
||
|
|
this.startPoint = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseMove(event: MouseEvent): void {
|
||
|
|
// Preview rectangle while dragging
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseUp(event: MouseEvent): void {
|
||
|
|
// Handle mouse up if needed
|
||
|
|
}
|
||
|
|
|
||
|
|
onKeyUp(event: KeyboardEvent): void {
|
||
|
|
// Handle key up events
|
||
|
|
}
|
||
|
|
|
||
|
|
reset(): void {
|
||
|
|
this.startPoint = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { RectTool };
|