grid editor

2025-11-29 16:11:24 +03:30
parent 2f60ef806e
commit 2c28218488
8 changed files with 720 additions and 28 deletions
@@ -6,6 +6,7 @@ import { clx } from "@/helpers/utils";
 import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import ObjectRenderer from "./canvas/ObjectRenderer";
+import CellEditor from "@/components/CellEditor";

 const EditorCanvas = () => {
  const stageRef = useRef<Konva.Stage>(null);
@@ -17,6 +18,13 @@ const EditorCanvas = () => {
    updateObject,
    selectedObjectId,
    setSelectedObjectId,
+    setSelectedTableId,
+    selectedCellId,
+    setSelectedCellId,
+    editingCell,
+    setEditingCell,
+    updateCellValue,
+    applyTableResize,
    setStageRef,
    setLayerRef,
  } = useEditorStore();
@@ -34,13 +42,83 @@ const EditorCanvas = () => {
  }, [setStageRef, setLayerRef]);

  const handleSelect = (id: string, node: Konva.Node) => {
+    const obj = objects.find((o) => o.id === id);
    setSelectedObjectId(id);
+    if (obj?.type === "grid") {
+      setSelectedTableId(id);
+    } else {
+      setSelectedTableId(null);
+    }
+    setSelectedCellId(null);
    if (transformerRef.current) {
      transformerRef.current.nodes([node]);
      transformerRef.current.getLayer()?.batchDraw();
    }
  };

+  const handleCellClick = (tableId: string, cellId: string) => {
+    setSelectedTableId(tableId);
+    setSelectedObjectId(tableId);
+    setSelectedCellId(cellId);
+    const obj = objects.find((o) => o.id === tableId);
+    if (obj && transformerRef.current && layerRef.current) {
+      const tableNode = layerRef.current.findOne(`#${tableId}`);
+      if (tableNode) {
+        transformerRef.current.nodes([tableNode]);
+        transformerRef.current.getLayer()?.batchDraw();
+      }
+    }
+  };
+
+  const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, text: string) => {
+    setEditingCell({ tableId, cellId, x, y, value: text });
+  };
+
+  const handleCellEditorSave = (text: string) => {
+    if (editingCell) {
+      updateCellValue(editingCell.tableId, editingCell.cellId, text);
+      setEditingCell(null);
+    }
+  };
+
+  const handleCellEditorCancel = () => {
+    setEditingCell(null);
+  };
+
+  useEffect(() => {
+    if (!transformerRef.current || !selectedObjectId) return;
+
+    const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
+    if (selectedObject?.type !== "grid") return;
+
+    const transformer = transformerRef.current;
+    const handleTransformEnd = () => {
+      const node = transformer.nodes()[0];
+      if (!node || !selectedObject) return;
+
+      const scaleX = node.scaleX();
+      const scaleY = node.scaleY();
+
+      node.scaleX(1);
+      node.scaleY(1);
+
+      const newWidth = (selectedObject.width || 300) * scaleX;
+      const newHeight = (selectedObject.height || 200) * scaleY;
+
+      applyTableResize(selectedObject.id, newWidth, newHeight);
+      updateObject(selectedObject.id, {
+        x: node.x(),
+        y: node.y(),
+      });
+    };
+
+    transformer.on("transformend", handleTransformEnd);
+
+    return () => {
+      transformer.off("transformend", handleTransformEnd);
+    };
+  }, [selectedObjectId, objects, transformerRef, applyTableResize, updateObject]);
+
  return (
    <div className="flex-1 flex items-center justify-center bg-gray-100 overflow-hidden">
      <Stage
@@ -63,6 +141,9 @@ const EditorCanvas = () => {
              onSelect={handleSelect}
              onUpdate={updateObject}
              draggable={tool === "select"}
+              onCellClick={handleCellClick}
+              onCellDblClick={handleCellDblClick}
+              selectedCellId={selectedCellId}
            />
          ))}
          {selectedObjectId && (() => {
@@ -101,6 +182,23 @@ const EditorCanvas = () => {
          })()}
        </Layer>
      </Stage>
+      {editingCell && (() => {
+        const obj = objects.find((o) => o.id === editingCell.tableId);
+        if (!obj || !obj.tableData) return null;
+        const cell = obj.tableData.cells[editingCell.cellId];
+        if (!cell) return null;
+        return (
+          <CellEditor
+            x={editingCell.x}
+            y={editingCell.y}
+            width={cell.width}
+            height={cell.height}
+            value={editingCell.value}
+            onSave={handleCellEditorSave}
+            onCancel={handleCellEditorCancel}
+          />
+        );
+      })()}
    </div>
  );
 };
@@ -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;
    }
@@ -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>) => {
@@ -1,6 +1,9 @@
 const GridInstruction = () => (
-    <div className="text-sm text-gray-600">
-        <p>برای افزودن گرید، روی کانوس کلیک کنید</p>
+    <div className="text-sm text-gray-600 space-y-2">
+        <p>برای افزودن جدول، روی کانوس کلیک کنید</p>
+        <p className="text-xs text-gray-500">
+            جدول به صورت پیش‌فرض با 3 ردیف و 3 ستون ایجاد می‌شود
+        </p>
    </div>
 );

@@ -1,35 +1,127 @@
+import { Add, Minus } from "iconsax-react";
 import type { EditorObject } from "../../../store/editorStore";
-import Input from "@/components/Input";
+import { useEditorStore } from "../../../store/editorStore";
+import ColorPicker from "@/components/ColorPicker";

 type GridSettingsProps = {
    selectedObject: EditorObject;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
 };

-const GridSettings = ({ selectedObject, onUpdate }: GridSettingsProps) => {
+const GridSettings = ({ selectedObject }: GridSettingsProps) => {
+    const {
+        addRow,
+        addColumn,
+        removeRow,
+        removeColumn,
+        changeCellBackground,
+        selectedCellId,
+    } = useEditorStore();
+
+    const tableDataObj = selectedObject.tableData;
+
+    const handleAddRow = () => {
+        if (tableDataObj) {
+            addRow(selectedObject.id);
+        }
+    };
+
+    const handleAddColumn = () => {
+        if (tableDataObj) {
+            addColumn(selectedObject.id);
+        }
+    };
+
+    const handleRemoveRow = () => {
+        if (tableDataObj) {
+            removeRow(selectedObject.id);
+        }
+    };
+
+    const handleRemoveColumn = () => {
+        if (tableDataObj) {
+            removeColumn(selectedObject.id);
+        }
+    };
+
+    const handleCellBackgroundChange = (color: string) => {
+        if (selectedCellId && tableDataObj) {
+            changeCellBackground(selectedObject.id, selectedCellId, color);
+        }
+    };
+
+    const selectedCell = selectedCellId && tableDataObj ? tableDataObj.cells[selectedCellId] : null;
+
    return (
-        <>
-            <Input
-                label="عرض"
-                type="number"
-                value={selectedObject.width || 200}
-                onChange={(e) =>
-                    onUpdate(selectedObject.id, {
-                        width: parseInt(e.target.value) || 200,
-                    })
-                }
-            />
-            <Input
-                label="ارتفاع"
-                type="number"
-                value={selectedObject.height || 200}
-                onChange={(e) =>
-                    onUpdate(selectedObject.id, {
-                        height: parseInt(e.target.value) || 200,
-                    })
-                }
-            />
-        </>
+        <div className="space-y-4">
+            <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">ردیف‌ها</span>
+                    <div className="flex gap-2">
+                        <button
+                            onClick={handleAddRow}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="افزودن ردیف"
+                        >
+                            <Add size={20} color="black" />
+                        </button>
+                        <button
+                            onClick={handleRemoveRow}
+                            disabled={!tableDataObj || tableDataObj.rows <= 1}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            title="حذف ردیف"
+                        >
+                            <Minus size={20} color="black" />
+                        </button>
+                    </div>
+                </div>
+                <div className="text-xs text-gray-500">
+                    تعداد ردیف‌ها: {tableDataObj?.rows || 0}
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">ستون‌ها</span>
+                    <div className="flex gap-2">
+                        <button
+                            onClick={handleAddColumn}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="افزودن ستون"
+                        >
+                            <Add size={20} color="black" />
+                        </button>
+                        <button
+                            onClick={handleRemoveColumn}
+                            disabled={!tableDataObj || tableDataObj.cols <= 1}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            title="حذف ستون"
+                        >
+                            <Minus size={20} color="black" />
+                        </button>
+                    </div>
+                </div>
+                <div className="text-xs text-gray-500">
+                    تعداد ستون‌ها: {tableDataObj?.cols || 0}
+                </div>
+            </div>
+
+            {selectedCell && (
+                <div className="space-y-2 pt-4 border-t border-border">
+                    <ColorPicker
+                        label="رنگ پس‌زمینه سلول"
+                        value={selectedCell.background}
+                        onChange={handleCellBackgroundChange}
+                    />
+                </div>
+            )}
+
+            {!selectedCell && (
+                <div className="text-xs text-gray-500 pt-4 border-t border-border">
+                    برای تغییر رنگ سلول، ابتدا روی یک سلول کلیک کنید
+                </div>
+            )}
+        </div>
    );
 };