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