add konva js to project + create some components with ai

src/pages/editor/components/tools/ArrowShape.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import { Arrow } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const ArrowShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+    const shapeRef = useRef<Konva.Arrow>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    return (
+        <Arrow
+            ref={shapeRef}
+            x={obj.x}
+            y={obj.y}
+            points={[0, 0, (obj.width || 0) - obj.x, (obj.height || 0) - obj.y]}
+            stroke={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
+            strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
+            fill={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
+            rotation={obj.rotation || 0}
+            draggable={draggable}
+            onClick={() => {
+                if (shapeRef.current) {
+                    onSelect(obj.id, shapeRef.current);
+                }
+            }}
+            onDragEnd={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                });
+            }}
+        />
+    );
+};
+
+export default ArrowShape;
+

src/pages/editor/components/tools/CircleShape.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from "react";
+import { Circle } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const CircleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+    const shapeRef = useRef<Konva.Circle>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    return (
+        <Circle
+            ref={shapeRef}
+            x={obj.x}
+            y={obj.y}
+            radius={(obj.width || 50) / 2}
+            fill={obj.fill}
+            stroke={isSelected ? "#3b82f6" : obj.stroke}
+            strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
+            rotation={obj.rotation || 0}
+            draggable={draggable}
+            onClick={() => {
+                if (shapeRef.current) {
+                    onSelect(obj.id, shapeRef.current);
+                }
+            }}
+            onDragEnd={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                const newRadius = Math.max(5, ((obj.width || 50) / 2) * scaleX);
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                    rotation: node.rotation(),
+                    width: newRadius * 2,
+                    height: newRadius * 2,
+                });
+            }}
+        />
+    );
+};
+
+export default CircleShape;
+

src/pages/editor/components/tools/ImageObject.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from "react";
+import { Image as KonvaImage } from "react-konva";
+import Konva from "konva";
+import useImage from "use-image";
+import type { ShapeProps } from "./types";
+
+const ImageObject = ({
+    obj,
+    isSelected,
+    transformerRef,
+    onSelect,
+    onUpdate,
+    draggable,
+}: ShapeProps) => {
+    const [image] = useImage(obj.imageUrl || "");
+    const shapeRef = useRef<Konva.Image>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    if (!image) return null;
+
+    return (
+        <KonvaImage
+            ref={shapeRef}
+            x={obj.x}
+            y={obj.y}
+            image={image}
+            width={obj.width || image.width}
+            height={obj.height || image.height}
+            stroke={isSelected ? "#3b82f6" : undefined}
+            strokeWidth={isSelected ? 3 : 0}
+            rotation={obj.rotation || 0}
+            draggable={draggable}
+            onClick={() => {
+                if (shapeRef.current) {
+                    onSelect(obj.id, shapeRef.current);
+                }
+            }}
+            onDragEnd={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+                const scaleY = node.scaleY();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                    rotation: node.rotation(),
+                    width: Math.max(5, (obj.width || image.width) * scaleX),
+                    height: Math.max(5, (obj.height || image.height) * scaleY),
+                });
+            }}
+        />
+    );
+};
+
+export default ImageObject;
+

src/pages/editor/components/tools/LineShape.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from "react";
+import { Line } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const LineShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+    const shapeRef = useRef<Konva.Line>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    return (
+        <Line
+            ref={shapeRef}
+            x={obj.x}
+            y={obj.y}
+            points={[0, 0, (obj.width || 0) - obj.x, (obj.height || 0) - obj.y]}
+            stroke={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
+            strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
+            rotation={obj.rotation || 0}
+            draggable={draggable}
+            onClick={() => {
+                if (shapeRef.current) {
+                    onSelect(obj.id, shapeRef.current);
+                }
+            }}
+            onDragEnd={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                });
+            }}
+        />
+    );
+};
+
+export default LineShape;
+

src/pages/editor/components/tools/LinkShape.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+import { Text } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const LinkShape = ({
+    obj,
+    isSelected,
+    transformerRef,
+    onSelect,
+    onUpdate,
+    draggable,
+}: ShapeProps) => {
+    const shapeRef = useRef<Konva.Text>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    return (
+        <Text
+            ref={shapeRef}
+            x={obj.x}
+            y={obj.y}
+            text={obj.text || obj.linkUrl || ""}
+            fontSize={obj.fontSize || 24}
+            fill={obj.fill || "#0000ff"}
+            fontFamily="irancell"
+            underline={true}
+            rotation={obj.rotation || 0}
+            draggable={draggable}
+            onClick={() => {
+                if (shapeRef.current && obj.linkUrl) {
+                    window.open(obj.linkUrl, "_blank");
+                }
+                if (shapeRef.current) {
+                    onSelect(obj.id, shapeRef.current);
+                }
+            }}
+            onDragEnd={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                onUpdate(obj.id, {
+                    x: node.x(),
+                    y: node.y(),
+                    rotation: node.rotation(),
+                    fontSize: obj.fontSize ? Math.max(5, obj.fontSize * scaleX) : undefined,
+                });
+            }}
+        />
+    );
+};
+
+export default LinkShape;
+

src/pages/editor/components/tools/RectangleShape.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import { Rect } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const RectangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+  const shapeRef = useRef<Konva.Rect>(null);
+
+  useEffect(() => {
+    if (isSelected && shapeRef.current && transformerRef.current) {
+      transformerRef.current.nodes([shapeRef.current]);
+      transformerRef.current.getLayer()?.batchDraw();
+    }
+  }, [isSelected, transformerRef]);
+
+  return (
+    <Rect
+      ref={shapeRef}
+      x={obj.x}
+      y={obj.y}
+      width={obj.width || 100}
+      height={obj.height || 100}
+      fill={obj.fill}
+      stroke={isSelected ? "#3b82f6" : obj.stroke}
+      strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
+      rotation={obj.rotation || 0}
+      draggable={draggable}
+      onClick={() => {
+        if (shapeRef.current) {
+          onSelect(obj.id, shapeRef.current);
+        }
+      }}
+      onDragEnd={(e) => {
+        const node = e.target;
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+        });
+      }}
+      onTransformEnd={() => {
+        const node = shapeRef.current;
+        if (!node) return;
+
+        const scaleX = node.scaleX();
+        const scaleY = node.scaleY();
+
+        node.scaleX(1);
+        node.scaleY(1);
+
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+          rotation: node.rotation(),
+          width: Math.max(5, (obj.width || 100) * scaleX),
+          height: Math.max(5, (obj.height || 100) * scaleY),
+        });
+      }}
+    />
+  );
+};
+
+export default RectangleShape;
+

src/pages/editor/components/tools/TextShape.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef } from "react";
+import { Text } from "react-konva";
+import Konva from "konva";
+import type { TextShapeProps } from "./types";
+
+const TextShape = ({
+  obj,
+  isSelected,
+  transformerRef,
+  onSelect,
+  onUpdate,
+  draggable,
+  layerRef,
+}: TextShapeProps) => {
+  const shapeRef = useRef<Konva.Text>(null);
+
+  useEffect(() => {
+    if (isSelected && shapeRef.current && transformerRef.current) {
+      transformerRef.current.nodes([shapeRef.current]);
+      transformerRef.current.getLayer()?.batchDraw();
+    }
+  }, [isSelected, transformerRef]);
+
+  return (
+    <Text
+      ref={shapeRef}
+      x={obj.x}
+      y={obj.y}
+      text={obj.text || ""}
+      fontSize={obj.fontSize || 24}
+      fill={obj.fill || "#000000"}
+      fontFamily="irancell"
+      width={obj.width}
+      height={obj.height}
+      rotation={obj.rotation || 0}
+      draggable={draggable}
+      onClick={() => {
+        if (shapeRef.current) {
+          onSelect(obj.id, shapeRef.current);
+        }
+      }}
+      onDragEnd={(e) => {
+        const node = e.target;
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+        });
+      }}
+      onTransformEnd={() => {
+        const node = shapeRef.current;
+        if (!node) return;
+
+        const scaleX = node.scaleX();
+        const scaleY = node.scaleY();
+
+        node.scaleX(1);
+        node.scaleY(1);
+
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+          rotation: node.rotation(),
+          width: obj.width ? Math.max(5, obj.width * scaleX) : undefined,
+          height: obj.height ? Math.max(5, obj.height * scaleY) : undefined,
+        });
+      }}
+      onDblClick={(e) => {
+        const textNode = e.target as Konva.Text;
+        const stage = textNode.getStage();
+        if (!stage) return;
+
+        const textPosition = textNode.absolutePosition();
+        const areaPosition = {
+          x: stage.container().offsetLeft + textPosition.x,
+          y: stage.container().offsetTop + textPosition.y,
+        };
+
+        const textarea = document.createElement("textarea");
+        document.body.appendChild(textarea);
+        textarea.value = textNode.text();
+        textarea.style.position = "absolute";
+        textarea.style.top = `${areaPosition.y}px`;
+        textarea.style.left = `${areaPosition.x}px`;
+        textarea.style.width = `${textNode.width()}px`;
+        textarea.style.fontSize = `${textNode.fontSize()}px`;
+        textarea.style.border = "none";
+        textarea.style.padding = "0px";
+        textarea.style.margin = "0px";
+        textarea.style.overflow = "hidden";
+        textarea.style.background = "transparent";
+        textarea.style.outline = "none";
+        textarea.style.resize = "none";
+        textarea.style.fontFamily = "irancell";
+        textarea.style.direction = "rtl";
+        textarea.focus();
+
+        const removeTextarea = () => {
+          document.body.removeChild(textarea);
+          textNode.text(textarea.value);
+          onUpdate(obj.id, { text: textarea.value });
+          layerRef.current?.draw();
+        };
+
+        textarea.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            removeTextarea();
+          }
+          if (e.key === "Escape") {
+            removeTextarea();
+          }
+        });
+
+        textarea.addEventListener("blur", () => {
+          removeTextarea();
+        });
+      }}
+    />
+  );
+};
+
+export default TextShape;
+

src/pages/editor/components/tools/VideoShape.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+import { Rect, Text } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const VideoShape = ({
+    obj,
+    isSelected,
+    transformerRef,
+    onSelect,
+    onUpdate,
+    draggable,
+}: ShapeProps) => {
+    const shapeRef = useRef<Konva.Rect>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    return (
+        <>
+            <Rect
+                ref={shapeRef}
+                x={obj.x}
+                y={obj.y}
+                width={obj.width || 400}
+                height={obj.height || 300}
+                fill="#000000"
+                stroke={isSelected ? "#3b82f6" : "#666666"}
+                strokeWidth={isSelected ? 3 : 2}
+                rotation={obj.rotation || 0}
+                draggable={draggable}
+                onClick={() => {
+                    if (shapeRef.current) {
+                        onSelect(obj.id, shapeRef.current);
+                    }
+                }}
+                onDragEnd={(e) => {
+                    const node = e.target;
+                    onUpdate(obj.id, {
+                        x: node.x(),
+                        y: node.y(),
+                    });
+                }}
+                onTransformEnd={() => {
+                    const node = shapeRef.current;
+                    if (!node) return;
+
+                    const scaleX = node.scaleX();
+                    const scaleY = node.scaleY();
+
+                    node.scaleX(1);
+                    node.scaleY(1);
+
+                    onUpdate(obj.id, {
+                        x: node.x(),
+                        y: node.y(),
+                        rotation: node.rotation(),
+                        width: Math.max(5, (obj.width || 400) * scaleX),
+                        height: Math.max(5, (obj.height || 300) * scaleY),
+                    });
+                }}
+            />
+            {obj.videoUrl && (
+                <Text
+                    x={obj.x + (obj.width || 400) / 2}
+                    y={obj.y + (obj.height || 300) / 2}
+                    text="▶ ویدیو"
+                    fontSize={16}
+                    fill="#ffffff"
+                    fontFamily="irancell"
+                    align="center"
+                    verticalAlign="middle"
+                    offsetX={40}
+                    offsetY={8}
+                />
+            )}
+        </>
+    );
+};
+
+export default VideoShape;
+

src/pages/editor/components/tools/index.ts

@@ -0,0 +1,9 @@
+export { default as RectangleShape } from "./RectangleShape";
+export { default as CircleShape } from "./CircleShape";
+export { default as TextShape } from "./TextShape";
+export { default as LineShape } from "./LineShape";
+export { default as ArrowShape } from "./ArrowShape";
+export { default as ImageObject } from "./ImageObject";
+export { default as LinkShape } from "./LinkShape";
+export { default as VideoShape } from "./VideoShape";
+export type { ShapeProps, TextShapeProps } from "./types";

src/pages/editor/components/tools/types.ts

@@ -0,0 +1,16 @@
+import Konva from "konva";
+import { EditorObject } from "../../store/editorStore";
+
+export type ShapeProps = {
+  obj: EditorObject;
+  isSelected: boolean;
+  transformerRef: React.RefObject<Konva.Transformer | null>;
+  onSelect: (id: string, node: Konva.Node) => void;
+  onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+  draggable: boolean;
+};
+
+export type TextShapeProps = ShapeProps & {
+  layerRef: React.RefObject<Konva.Layer | null>;
+};
+