base mask

2026-01-04 10:18:49 +03:30
parent b33b7a953d
commit aa6153d289
16 changed files with 435 additions and 52 deletions
@@ -13,6 +13,8 @@ const TriangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
        }
    }, [isSelected, transformerRef]);

+    const isMask = obj.isMask || false;
+    const showGuide = obj.showMaskGuide !== false;
    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);

    return (
@@ -22,9 +24,18 @@ const TriangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
            y={obj.y + (obj.height || 100) / 2}
            sides={3}
            radius={radius}
-            fill={obj.fill}
-            stroke={isSelected ? "#3b82f6" : obj.stroke}
-            strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
+            fill={isMask ? "transparent" : obj.fill}
+            stroke={
+                isSelected 
+                  ? "#3b82f6" 
+                  : (isMask && showGuide) 
+                    ? "#ff6b6b" 
+                    : (isMask && !showGuide)
+                      ? "transparent"
+                      : obj.stroke
+            }
+            strokeWidth={isSelected ? 3 : (isMask && showGuide ? 2 : (obj.strokeWidth ?? 0))}
+            dash={isMask && showGuide ? [10, 5] : undefined}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={() => {
@@ -32,6 +43,13 @@ const TriangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
                    onSelect(obj.id, shapeRef.current);
                }
            }}
+            onDragMove={(e) => {
+                const node = e.target;
+                onUpdate(obj.id, {
+                    x: node.x() - (obj.width || 100) / 2,
+                    y: node.y() - (obj.height || 100) / 2,
+                });
+            }}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {