base mask

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

@@ -13,6 +13,9 @@ const RectangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, d
     }
   }, [isSelected, transformerRef]);
 
+  const isMask = obj.isMask || false;
+  const showGuide = obj.showMaskGuide !== false;
+
   return (
     <Rect
       ref={shapeRef}
@@ -20,9 +23,18 @@ const RectangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, d
       y={obj.y}
       width={obj.width || 100}
       height={obj.height || 100}
-      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={() => {
@@ -30,6 +42,13 @@ const RectangleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, d
           onSelect(obj.id, shapeRef.current);
         }
       }}
+      onDragMove={(e) => {
+        const node = e.target;
+        onUpdate(obj.id, {
+          x: node.x(),
+          y: node.y(),
+        });
+      }}
       onDragEnd={(e) => {
         const node = e.target;
         onUpdate(obj.id, {