add konva js to project + create some components with ai

2025-11-16 16:33:54 +03:30
parent c1c6b0ebf7
commit 1a0c869101
38 changed files with 1855 additions and 42 deletions
@@ -0,0 +1,59 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type ShapeSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="عرض"
+                type="number"
+                value={selectedObject.width || 100}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        width: parseInt(e.target.value) || 100,
+                    })
+                }
+            />
+            <Input
+                label="ارتفاع"
+                type="number"
+                value={selectedObject.height || 100}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        height: parseInt(e.target.value) || 100,
+                    })
+                }
+            />
+            <Input
+                label="رنگ پس‌زمینه"
+                type="color"
+                value={selectedObject.fill || "#3b82f6"}
+                onChange={(e) => onUpdate(selectedObject.id, { fill: e.target.value })}
+            />
+            <Input
+                label="رنگ خط"
+                type="color"
+                value={selectedObject.stroke || "#1e40af"}
+                onChange={(e) => onUpdate(selectedObject.id, { stroke: e.target.value })}
+            />
+            <Input
+                label="ضخامت خط"
+                type="number"
+                value={selectedObject.strokeWidth || 2}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        strokeWidth: parseInt(e.target.value) || 2,
+                    })
+                }
+            />
+        </>
+    );
+};
+
+export default ShapeSettings;
+