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,69 @@
+import { Trash } from "iconsax-react";
+import type { EditorObject } from "../../store/editorStore";
+import {
+    TextSettings,
+    ShapeSettings,
+    LineSettings,
+    SizeSettings,
+    LinkSettings,
+    VideoSettings,
+    TransformSettings,
+} from "./settings";
+
+type ObjectSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+    onDelete: (id: string) => void;
+};
+
+const ObjectSettings = ({ selectedObject, onUpdate, onDelete }: ObjectSettingsProps) => {
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between pb-4 border-b border-border">
+                <h3 className="text-sm font-medium">تنظیمات شیء</h3>
+                <button
+                    onClick={() => onDelete(selectedObject.id)}
+                    className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500"
+                >
+                    <Trash size={20} />
+                </button>
+            </div>
+
+            {selectedObject.type === "text" && <TextSettings selectedObject={selectedObject} onUpdate={onUpdate} />}
+
+            {(selectedObject.type === "rectangle" || selectedObject.type === "circle") && (
+                <ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
+            {(selectedObject.type === "line" || selectedObject.type === "arrow") && (
+                <LineSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
+            {selectedObject.type === "image" && (
+                <SizeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
+            {selectedObject.type === "link" && (
+                <LinkSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
+            {selectedObject.type === "video" && (
+                <VideoSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
+            {(selectedObject.type === "document" || selectedObject.type === "sticker") && (
+                <SizeSettings
+                    selectedObject={selectedObject}
+                    onUpdate={onUpdate}
+                    defaultWidth={selectedObject.type === "document" ? 200 : 100}
+                    defaultHeight={selectedObject.type === "document" ? 250 : 100}
+                />
+            )}
+
+            <TransformSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+        </div>
+    );
+};
+
+export default ObjectSettings;
+