diff --git a/frontend/src/tools/drawing/ArcTool.ts b/frontend/src/tools/drawing/ArcTool.ts new file mode 100644 index 0000000..a23b9c3 --- /dev/null +++ b/frontend/src/tools/drawing/ArcTool.ts @@ -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 }; \ No newline at end of file