Add TableTool for creating rectangular and round tables

frontend/src/tools/drawing/TableTool.ts

@@ -0,0 +1,93 @@
+import { Tool } from '../Tool';
+import { YjsDocument } from '../../crdt/YjsDocument';
+
+type TableType = 'rectangular' | 'round';
+
+class TableTool extends Tool {
+  private startPoint: { x: number; y: number } | null = null;
+  private tableType: TableType = 'rectangular';
+  private radius: number = 37.5; // Default radius for round table (75cm diameter)
+  private width: number = 120; // Default width for rectangular table
+  private height: number = 80; // Default height for rectangular table
+
+  constructor(yjsDoc: YjsDocument, tableType: TableType = 'rectangular') {
+    super(yjsDoc);
+    this.name = 'TableTool';
+    this.tableType = tableType;
+  }
+
+  onMouseDown(event: MouseEvent): void {
+    if (!this.startPoint) {
+      this.startPoint = { x: event.clientX, y: event.clientY };
+    } else {
+      // Create table element in Yjs document
+      if (this.tableType === 'round') {
+        // Create round table (circle)
+        const x = this.startPoint.x;
+        const y = this.startPoint.y;
+        this.yjsDoc.createElement({
+          id: Date.now().toString(),
+          type: 'round_table',
+          layerId: 'default',
+          x: x - this.radius,
+          y: y - this.radius,
+          width: this.radius * 2,
+          height: this.radius * 2,
+          properties: {
+            radius: this.radius,
+            centerX: x,
+            centerY: y
+          }
+        });
+      } else {
+        // Create rectangular table (rectangle)
+        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.createElement({
+          id: Date.now().toString(),
+          type: 'rectangular_table',
+          layerId: 'default',
+          x,
+          y,
+          width: width || this.width,
+          height: height || this.height,
+          properties: {}
+        });
+      }
+      this.startPoint = null;
+    }
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    // Preview table while dragging
+  }
+
+  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.startPoint = null;
+  }
+
+  // Set table parameters
+  setRadius(radius: number): void {
+    this.radius = radius;
+  }
+
+  setDimensions(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+  }
+}
+
+export { TableTool };