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,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;
+