Implement ArcTool.ts

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 };