diff --git a/frontend/src/tools/drawing/CircleTool.ts b/frontend/src/tools/drawing/CircleTool.ts new file mode 100644 index 0000000..e4fcb8f --- /dev/null +++ b/frontend/src/tools/drawing/CircleTool.ts @@ -0,0 +1,43 @@ +import { Tool } from '../Tool'; +import { YjsDocument } from '../../crdt/YjsDocument'; + +class CircleTool extends Tool { + private centerPoint: { x: number; y: number } | null = null; + + constructor(yjsDoc: YjsDocument) { + super(yjsDoc); + this.name = 'CircleTool'; + } + + onMouseDown(event: MouseEvent): void { + if (!this.centerPoint) { + this.centerPoint = { x: event.clientX, y: event.clientY }; + } else { + // Calculate radius and create circle element in Yjs document + const radius = Math.sqrt( + Math.pow(event.clientX - this.centerPoint.x, 2) + + Math.pow(event.clientY - this.centerPoint.y, 2) + ); + this.yjsDoc.createCircle(this.centerPoint.x, this.centerPoint.y, radius); + this.centerPoint = null; + } + } + + onMouseMove(event: MouseEvent): void { + // Preview circle while dragging + } + + onMouseUp(event: MouseEvent): void { + // Handle mouse up if needed + } + + onKeyUp(event: KeyboardEvent): void { + // Handle key up events + } + + reset(): void { + this.centerPoint = null; + } +} + +export { CircleTool }; \ No newline at end of file