grid editor

2025-11-29 16:11:24 +03:30
parent 2f60ef806e
commit 2c28218488
8 changed files with 720 additions and 28 deletions
@@ -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>
    );
 };