Create shapes square + circle + ....

2025-11-18 15:31:09 +03:30
parent 9b06c7dfc5
commit 3f18ac62fa
9 changed files with 239 additions and 50 deletions
@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react";
+import { Star } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+    const shapeRef = useRef<Konva.Star>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+    const innerRadius = radius * 0.5;
+
+    return (
+        <Star
+            ref={shapeRef}
+            x={obj.x + (obj.width || 100) / 2}
+            y={obj.y + (obj.height || 100) / 2}
+            numPoints={5}
+            innerRadius={innerRadius}
+            outerRadius={radius}
+            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() - (obj.width || 100) / 2,
+                    y: node.y() - (obj.height || 100) / 2,
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+                const scaleY = node.scaleY();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                const newRadius = Math.max(5, radius * Math.min(scaleX, scaleY));
+                const newSize = newRadius * 2;
+                onUpdate(obj.id, {
+                    x: node.x() - newSize / 2,
+                    y: node.y() - newSize / 2,
+                    rotation: node.rotation(),
+                    width: newSize,
+                    height: newSize,
+                });
+            }}
+        />
+    );
+};
+
+export default AbstractShape;
+
@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+import { RegularPolygon } from "react-konva";
+import Konva from "konva";
+import type { ShapeProps } from "./types";
+
+const TriangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
+    const shapeRef = useRef<Konva.RegularPolygon>(null);
+
+    useEffect(() => {
+        if (isSelected && shapeRef.current && transformerRef.current) {
+            transformerRef.current.nodes([shapeRef.current]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    }, [isSelected, transformerRef]);
+
+    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+
+    return (
+        <RegularPolygon
+            ref={shapeRef}
+            x={obj.x + (obj.width || 100) / 2}
+            y={obj.y + (obj.height || 100) / 2}
+            sides={3}
+            radius={radius}
+            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() - (obj.width || 100) / 2,
+                    y: node.y() - (obj.height || 100) / 2,
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+                const scaleY = node.scaleY();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                const newRadius = Math.max(5, radius * Math.min(scaleX, scaleY));
+                const newSize = newRadius * 2;
+                onUpdate(obj.id, {
+                    x: node.x() - newSize / 2,
+                    y: node.y() - newSize / 2,
+                    rotation: node.rotation(),
+                    width: newSize,
+                    height: newSize,
+                });
+            }}
+        />
+    );
+};
+
+export default TriangleShape;
+
@@ -1,5 +1,7 @@
 export { default as RectangleShape } from "./RectangleShape";
 export { default as CircleShape } from "./CircleShape";
+export { default as TriangleShape } from "./TriangleShape";
+export { default as AbstractShape } from "./AbstractShape";
 export { default as TextShape } from "./TextShape";
 export { default as LineShape } from "./LineShape";
 export { default as ArrowShape } from "./ArrowShape";