Add element creation helper methods to YjsDocument

frontend/src/crdt/YjsDocument.ts

@@ -103,4 +103,49 @@ export class YjsDocument {
   getElementById(id: string): Element | undefined {
     return this.elements.toArray().find(el => el.id === id);
   }
+
+  // Helper method to create a rectangle element
+  createRectangle(x: number, y: number, width: number, height: number): void {
+    const element: Element = {
+      id: Date.now().toString(),
+      type: 'rect',
+      layerId: 'default',
+      x,
+      y,
+      width,
+      height,
+      properties: {}
+    };
+    this.createElement(element);
+  }
+
+  // Helper method to create a circle element
+  createCircle(x: number, y: number, radius: number): void {
+    const element: Element = {
+      id: Date.now().toString(),
+      type: 'circle',
+      layerId: 'default',
+      x: x - radius,
+      y: y - radius,
+      width: radius * 2,
+      height: radius * 2,
+      properties: { radius }
+    };
+    this.createElement(element);
+  }
+
+  // Helper method to create a line element
+  createLine(x1: number, y1: number, x2: number, y2: number): void {
+    const element: Element = {
+      id: Date.now().toString(),
+      type: 'line',
+      layerId: 'default',
+      x: Math.min(x1, x2),
+      y: Math.min(y1, y2),
+      width: Math.abs(x2 - x1),
+      height: Math.abs(y2 - y1),
+      properties: { x1, y1, x2, y2 }
+    };
+    this.createElement(element);
+  }
 }