grid editor

src/pages/editor/components/canvas/ObjectRenderer.tsx

@@ -12,6 +12,7 @@ import {
     LinkShape,
     VideoShape,
 } from "../tools";
+import Table from "@/components/Table";
 
 type ObjectRendererProps = {
     obj: EditorObject;
@@ -21,6 +22,9 @@ type ObjectRendererProps = {
     onSelect: (id: string, node: Konva.Node) => void;
     onUpdate: (id: string, updates: Partial<EditorObject>) => void;
     draggable: boolean;
+    onCellClick?: (tableId: string, cellId: string) => void;
+    onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, text: string) => void;
+    selectedCellId?: string | null;
 };
 
 const ObjectRenderer = ({
@@ -31,6 +35,9 @@ const ObjectRenderer = ({
     onSelect,
     onUpdate,
     draggable,
+    onCellClick,
+    onCellDblClick,
+    selectedCellId,
 }: ObjectRendererProps) => {
     const commonProps = {
         obj,
@@ -67,6 +74,25 @@ const ObjectRenderer = ({
             return <VideoShape key={obj.id} {...commonProps} />;
         case "document":
             return <ImageObject key={obj.id} {...commonProps} />;
+        case "grid":
+            return (
+                <Table
+                    key={obj.id}
+                    obj={obj}
+                    selectedCellId={selectedCellId || null}
+                    onCellClick={(tableId, cellId, node) => {
+                        onSelect(tableId, node);
+                        onCellClick?.(tableId, cellId);
+                    }}
+                    onCellDblClick={(tableId, cellId, x, y, text) => {
+                        onCellDblClick?.(tableId, cellId, x, y, text);
+                    }}
+                    onDragEnd={(tableId, x, y) => {
+                        onUpdate(tableId, { x, y });
+                    }}
+                    draggable={draggable}
+                />
+            );
         default:
             return null;
     }

src/pages/editor/components/canvas/useDrawingHandlers.ts

@@ -10,7 +10,7 @@ export const useDrawingHandlers = () => {
     const [tempObject, setTempObject] = useState<EditorObject | null>(null);
     const transformerRef = useRef<Konva.Transformer>(null);
 
-    const { tool, addObject, updateObject, setSelectedObjectId, selectedObjectId, setTool } = useEditorStore();
+    const { tool, addObject, updateObject, setSelectedObjectId, selectedObjectId, setTool, addTable, setSelectedTableId } = useEditorStore();
     const { defaults } = useTextDefaultsStore();
 
     useEffect(() => {
@@ -73,6 +73,12 @@ export const useDrawingHandlers = () => {
             setSelectedObjectId(newText.id);
             setTool("select");
         }
+
+        if (tool === "grid") {
+            addTable(pointerPos.x, pointerPos.y, 4, 5);
+            setSelectedTableId(null);
+            setTool("select");
+        }
     };
 
     const handleStageMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {