Implement ArcTool.ts
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
import { Tool } from '../Tool';
|
||||
import { YjsDocument } from '../../crdt/YjsDocument';
|
||||
|
||||
class ArcTool extends Tool {
|
||||
private centerPoint: { x: number; y: number } | null = null;
|
||||
private startPoint: { x: number; y: number } | null = null;
|
||||
|
||||
constructor(yjsDoc: YjsDocument) {
|
||||
super(yjsDoc);
|
||||
this.name = 'ArcTool';
|
||||
}
|
||||
|
||||
onMouseDown(event: MouseEvent): void {
|
||||
if (!this.centerPoint) {
|
||||
this.centerPoint = { x: event.clientX, y: event.clientY };
|
||||
} else if (!this.startPoint) {
|
||||
this.startPoint = { x: event.clientX, y: event.clientY };
|
||||
} else {
|
||||
// Calculate start and end angles and create arc element in Yjs document
|
||||
const startAngle = Math.atan2(
|
||||
this.startPoint.y - this.centerPoint.y,
|
||||
this.startPoint.x - this.centerPoint.x
|
||||
);
|
||||
|
||||
const endAngle = Math.atan2(
|
||||
event.clientY - this.centerPoint.y,
|
||||
event.clientX - this.centerPoint.x
|
||||
);
|
||||
|
||||
const radius = Math.sqrt(
|
||||
Math.pow(this.startPoint.x - this.centerPoint.x, 2) +
|
||||
Math.pow(this.startPoint.y - this.centerPoint.y, 2)
|
||||
);
|
||||
|
||||
this.yjsDoc.createArc(
|
||||
this.centerPoint.x,
|
||||
this.centerPoint.y,
|
||||
radius,
|
||||
startAngle,
|
||||
endAngle
|
||||
);
|
||||
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
onMouseMove(event: MouseEvent): void {
|
||||
// Preview arc while drawing
|
||||
}
|
||||
|
||||
onMouseUp(event: MouseEvent): void {
|
||||
// Handle mouse up if needed
|
||||
}
|
||||
|
||||
onKeyUp(event: KeyboardEvent): void {
|
||||
// Handle key up events
|
||||
if (event.key === 'Escape') {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
this.centerPoint = null;
|
||||
this.startPoint = null;
|
||||
}
|
||||
}
|
||||
|
||||
export { ArcTool };
|
||||
Reference in New Issue
Block a user