From aa6153d28912d1d2d8c6575ad7600521bd8eb797 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 4 Jan 2026 10:18:49 +0330
Subject: [PATCH] base mask

---
 src/pages/editor/components/EditorCanvas.tsx  | 53 +++++++----
 src/pages/editor/components/LayersList.tsx    | 10 +-
 .../components/canvas/MaskShapeRenderer.tsx   | 76 +++++++++++++++
 .../components/canvas/ObjectRenderer.tsx      | 92 +++++++++++++++----
 .../editor/components/canvas/drawingUtils.ts  |  6 +-
 .../editor/components/canvas/maskUtils.ts     | 58 ++++++++++++
 .../components/sidebar/ObjectSettings.tsx     |  6 +-
 .../instructions/RectangleInstruction.tsx     |  4 +-
 .../sidebar/settings/MaskSettings.tsx         | 77 ++++++++++++++++
 .../components/sidebar/settings/index.ts      |  1 +
 .../editor/components/tools/AbstractShape.tsx | 24 ++++-
 .../editor/components/tools/CircleShape.tsx   | 25 ++++-
 .../components/tools/RectangleShape.tsx       | 25 ++++-
 .../editor/components/tools/TriangleShape.tsx | 24 ++++-
 src/pages/editor/store/editorStore.ts         |  2 +
 src/pages/editor/store/shapeStore.ts          |  4 +
 16 files changed, 435 insertions(+), 52 deletions(-)
 create mode 100644 src/pages/editor/components/canvas/MaskShapeRenderer.tsx
 create mode 100644 src/pages/editor/components/canvas/maskUtils.ts
 create mode 100644 src/pages/editor/components/sidebar/settings/MaskSettings.tsx

diff --git a/src/pages/editor/components/EditorCanvas.tsx b/src/pages/editor/components/EditorCanvas.tsx
index 7bc5464..82cfcbd 100644
--- a/src/pages/editor/components/EditorCanvas.tsx
+++ b/src/pages/editor/components/EditorCanvas.tsx
@@ -6,6 +6,7 @@ import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
 import ObjectRenderer from "./canvas/ObjectRenderer";
+import { getMaskForObject } from "./canvas/maskUtils";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
 
@@ -110,7 +111,16 @@ const EditorCanvas = () => {
     const timeoutId = setTimeout(() => {
       if (!layerRef.current || !transformerRef.current) return;
 
-      const node = layerRef.current.findOne(`#${selectedObjectId}`);
+      // Check if object is masked - if so, find parent Group
+      const maskShape = getMaskForObject(selectedObject, objects);
+      let node: Konva.Node | undefined;
+      
+      if (maskShape) {
+        node = layerRef.current.findOne(`.masked-group-${selectedObjectId}`);
+      } else {
+        node = layerRef.current.findOne(`#${selectedObjectId}`);
+      }
+      
       if (node && transformerRef.current) {
         transformerRef.current.nodes([node]);
         transformerRef.current.getLayer()?.batchDraw();
@@ -169,7 +179,7 @@ const EditorCanvas = () => {
           onMouseMove={handleStageMouseMove}
           onMouseUp={handleStageMouseUp}
         >
-          <Layer ref={layerRef}>
+          <Layer listening={false}>
             <Rect
               x={0}
               y={0}
@@ -178,21 +188,30 @@ const EditorCanvas = () => {
               fill="#ffffff"
               listening={false}
             />
-            {objects.map((obj) => (
-              <ObjectRenderer
-                key={obj.id}
-                obj={obj}
-                isSelected={selectedObjectId === obj.id}
-                transformerRef={transformerRef}
-                layerRef={layerRef}
-                onSelect={handleSelect}
-                onUpdate={updateObject}
-                draggable={tool === "select"}
-                onCellClick={handleCellClick}
-                onCellDblClick={handleCellDblClick}
-                selectedCellId={selectedCellId}
-              />
-            ))}
+          </Layer>
+
+          <Layer ref={layerRef}>
+            {objects.map((obj) => {
+              const maskShape = getMaskForObject(obj, objects);
+              
+              return (
+                <ObjectRenderer
+                  key={obj.id}
+                  obj={obj}
+                  isSelected={selectedObjectId === obj.id}
+                  transformerRef={transformerRef}
+                  layerRef={layerRef}
+                  onSelect={handleSelect}
+                  onUpdate={updateObject}
+                  draggable={tool === "select"}
+                  onCellClick={handleCellClick}
+                  onCellDblClick={handleCellDblClick}
+                  selectedCellId={selectedCellId}
+                  maskShape={maskShape}
+                />
+              );
+            })}
+            
             {selectedObjectId && (() => {
               const selectedObject = objects.find(obj => obj.id === selectedObjectId);
               const isText = selectedObject?.type === "text";
diff --git a/src/pages/editor/components/LayersList.tsx b/src/pages/editor/components/LayersList.tsx
index c7897e8..bbe2746 100644
--- a/src/pages/editor/components/LayersList.tsx
+++ b/src/pages/editor/components/LayersList.tsx
@@ -25,8 +25,12 @@ const LayersList = () => {
     }
   }
 
-  const getLayerLabel = (type: string) => {
-    switch (type) {
+  const getLayerLabel = (obj: typeof objects[0]) => {
+    if (obj.isMask) {
+      return 'ماسک'
+    }
+    
+    switch (obj.type) {
       case 'text':
         return 'متن'
       case 'rectangle':
@@ -60,7 +64,7 @@ const LayersList = () => {
                 )}
               >
                 <div className="shrink-0">{getLayerIcon(obj.type)}</div>
-                <div className="flex-1 text-xs">{getLayerLabel(obj.type)}</div>
+                <div className="flex-1 text-xs">{getLayerLabel(obj)}</div>
                 <div className="flex items-center gap-1.5">
                   <button
                     onClick={(e) => {
diff --git a/src/pages/editor/components/canvas/MaskShapeRenderer.tsx b/src/pages/editor/components/canvas/MaskShapeRenderer.tsx
new file mode 100644
index 0000000..a245753
--- /dev/null
+++ b/src/pages/editor/components/canvas/MaskShapeRenderer.tsx
@@ -0,0 +1,76 @@
+import { Circle, Rect, RegularPolygon, Star } from "react-konva";
+import type { EditorObject } from "../../store/editorStore";
+
+type MaskShapeRendererProps = {
+  obj: EditorObject;
+};
+
+const MaskShapeRenderer = ({ obj }: MaskShapeRendererProps) => {
+  const commonProps = {
+    listening: false,
+    perfectDrawEnabled: false,
+  };
+
+  if (obj.type === "rectangle" && obj.shapeType === "circle") {
+    return (
+      <Circle
+        {...commonProps}
+        x={obj.x}
+        y={obj.y}
+        radius={(obj.width || 50) / 2}
+        fill="black"
+        rotation={obj.rotation || 0}
+      />
+    );
+  }
+
+  if (obj.type === "rectangle" && obj.shapeType === "triangle") {
+    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+    return (
+      <RegularPolygon
+        {...commonProps}
+        x={obj.x + (obj.width || 100) / 2}
+        y={obj.y + (obj.height || 100) / 2}
+        sides={3}
+        radius={radius}
+        fill="black"
+        rotation={obj.rotation || 0}
+      />
+    );
+  }
+
+  if (obj.type === "rectangle" && obj.shapeType === "abstract") {
+    const baseRadius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+    const abstractScale = 0.85;
+    const radius = baseRadius * abstractScale;
+    const innerRadius = radius * 0.5;
+    
+    return (
+      <Star
+        {...commonProps}
+        x={obj.x + (obj.width || 100) / 2}
+        y={obj.y + (obj.height || 100) / 2}
+        numPoints={5}
+        innerRadius={innerRadius}
+        outerRadius={radius}
+        fill="black"
+        rotation={obj.rotation || 0}
+      />
+    );
+  }
+
+  return (
+    <Rect
+      {...commonProps}
+      x={obj.x}
+      y={obj.y}
+      width={obj.width || 100}
+      height={obj.height || 100}
+      fill="black"
+      rotation={obj.rotation || 0}
+    />
+  );
+};
+
+export default MaskShapeRenderer;
+
diff --git a/src/pages/editor/components/canvas/ObjectRenderer.tsx b/src/pages/editor/components/canvas/ObjectRenderer.tsx
index 08c8d84..4a38450 100644
--- a/src/pages/editor/components/canvas/ObjectRenderer.tsx
+++ b/src/pages/editor/components/canvas/ObjectRenderer.tsx
@@ -1,4 +1,6 @@
 import Konva from "konva";
+import { Group } from "react-konva";
+import { useEffect, useRef } from "react";
 import type { EditorObject } from "../../store/editorStore";
 import {
     RectangleShape,
@@ -13,6 +15,7 @@ import {
     VideoShape,
 } from "../tools";
 import Table from "@/components/Table";
+import MaskShapeRenderer from "./MaskShapeRenderer";
 
 type ObjectRendererProps = {
     obj: EditorObject;
@@ -25,6 +28,7 @@ type ObjectRendererProps = {
     onCellClick?: (tableId: string, cellId: string) => void;
     onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => void;
     selectedCellId?: string | null;
+    maskShape?: EditorObject | null;
 };
 
 const ObjectRenderer = ({
@@ -38,7 +42,40 @@ const ObjectRenderer = ({
     onCellClick,
     onCellDblClick,
     selectedCellId,
+    maskShape,
 }: ObjectRendererProps) => {
+    const groupRef = useRef<Konva.Group>(null);
+
+    useEffect(() => {
+        if (!groupRef.current) return;
+
+        const isImage = obj.type === "image" || obj.type === "document";
+        
+        if (maskShape && !isImage) {
+            // فقط برای non-image objects از cache استفاده کن
+            groupRef.current.cache({
+                pixelRatio: 1,
+            });
+        } else {
+            groupRef.current.clearCache();
+        }
+        
+        groupRef.current.getLayer()?.batchDraw();
+    }, [
+        maskShape, 
+        maskShape?.x, 
+        maskShape?.y, 
+        maskShape?.width, 
+        maskShape?.height, 
+        maskShape?.rotation,
+        obj.type,
+        obj.x, 
+        obj.y, 
+        obj.width, 
+        obj.height, 
+        obj.rotation
+    ]);
+
     if (obj.visible === false) {
         return null;
     }
@@ -52,34 +89,43 @@ const ObjectRenderer = ({
         draggable,
     };
 
+    let shapeElement: React.ReactNode = null;
+
     switch (obj.type) {
         case "rectangle":
             if (obj.shapeType === "circle") {
-                return <CircleShape key={obj.id} {...commonProps} />;
+                shapeElement = <CircleShape key={obj.id} {...commonProps} />;
+            } else if (obj.shapeType === "triangle") {
+                shapeElement = <TriangleShape key={obj.id} {...commonProps} />;
+            } else if (obj.shapeType === "abstract") {
+                shapeElement = <AbstractShape key={obj.id} {...commonProps} />;
+            } else {
+                shapeElement = <RectangleShape key={obj.id} {...commonProps} />;
             }
-            if (obj.shapeType === "triangle") {
-                return <TriangleShape key={obj.id} {...commonProps} />;
-            }
-            if (obj.shapeType === "abstract") {
-                return <AbstractShape key={obj.id} {...commonProps} />;
-            }
-            return <RectangleShape key={obj.id} {...commonProps} />;
+            break;
         case "text":
-            return <TextShape key={obj.id} {...commonProps} layerRef={layerRef} />;
+            shapeElement = <TextShape key={obj.id} {...commonProps} layerRef={layerRef} />;
+            break;
         case "line":
-            return <LineShape key={obj.id} {...commonProps} />;
+            shapeElement = <LineShape key={obj.id} {...commonProps} />;
+            break;
         case "arrow":
-            return <ArrowShape key={obj.id} {...commonProps} />;
+            shapeElement = <ArrowShape key={obj.id} {...commonProps} />;
+            break;
         case "image":
-            return <ImageObject key={obj.id} {...commonProps} />;
+            shapeElement = <ImageObject key={obj.id} {...commonProps} />;
+            break;
         case "link":
-            return <LinkShape key={obj.id} {...commonProps} />;
+            shapeElement = <LinkShape key={obj.id} {...commonProps} />;
+            break;
         case "video":
-            return <VideoShape key={obj.id} {...commonProps} />;
+            shapeElement = <VideoShape key={obj.id} {...commonProps} />;
+            break;
         case "document":
-            return <ImageObject key={obj.id} {...commonProps} />;
+            shapeElement = <ImageObject key={obj.id} {...commonProps} />;
+            break;
         case "grid":
-            return (
+            shapeElement = (
                 <Table
                     key={obj.id}
                     obj={obj}
@@ -97,9 +143,23 @@ const ObjectRenderer = ({
                     draggable={draggable}
                 />
             );
+            break;
         default:
             return null;
     }
+
+    if (!maskShape) {
+        return shapeElement;
+    }
+
+    return (
+        <Group ref={groupRef} name={`masked-group-${obj.id}`}>
+            {shapeElement}
+            <Group globalCompositeOperation="destination-out" listening={false}>
+                <MaskShapeRenderer obj={maskShape} />
+            </Group>
+        </Group>
+    );
 };
 
 export default ObjectRenderer;
diff --git a/src/pages/editor/components/canvas/drawingUtils.ts b/src/pages/editor/components/canvas/drawingUtils.ts
index 3aeea36..84f6942 100644
--- a/src/pages/editor/components/canvas/drawingUtils.ts
+++ b/src/pages/editor/components/canvas/drawingUtils.ts
@@ -18,7 +18,7 @@ export const createDrawingObject = ({
   const height = pointerPos.y - startPos.y;
 
   if (tool === "rectangle") {
-    const activeShape = useShapeStore.getState().activeShape;
+    const { activeShape, useAsMask } = useShapeStore.getState();
 
     // برای دایره، مرکز و شعاع را محاسبه می‌کنیم
     if (activeShape === "circle") {
@@ -37,6 +37,7 @@ export const createDrawingObject = ({
         stroke: "#1e40af",
         strokeWidth: 0,
         shapeType: activeShape,
+        isMask: useAsMask,
       };
     }
 
@@ -61,6 +62,7 @@ export const createDrawingObject = ({
         stroke: "#1e40af",
         strokeWidth: 0,
         shapeType: activeShape,
+        isMask: useAsMask,
       };
     }
 
@@ -85,6 +87,7 @@ export const createDrawingObject = ({
         stroke: "#1e40af",
         strokeWidth: 0,
         shapeType: activeShape,
+        isMask: useAsMask,
       };
     }
 
@@ -100,6 +103,7 @@ export const createDrawingObject = ({
       stroke: "#1e40af",
       strokeWidth: 0,
       shapeType: activeShape,
+      isMask: useAsMask,
     };
   }
 
diff --git a/src/pages/editor/components/canvas/maskUtils.ts b/src/pages/editor/components/canvas/maskUtils.ts
new file mode 100644
index 0000000..758c52d
--- /dev/null
+++ b/src/pages/editor/components/canvas/maskUtils.ts
@@ -0,0 +1,58 @@
+import type { EditorObject } from "../../store/editorStore";
+
+export const getBounds = (obj: EditorObject) => {
+  const x = obj.x || 0;
+  const y = obj.y || 0;
+  const width = obj.width || 100;
+  const height = obj.height || 100;
+
+  return { x, y, width, height };
+};
+
+export const isObjectBelowMask = (
+  obj: EditorObject,
+  mask: EditorObject,
+  objects: EditorObject[]
+): boolean => {
+  const objIndex = objects.findIndex((o) => o.id === obj.id);
+  const maskIndex = objects.findIndex((o) => o.id === mask.id);
+
+  // mask باید همه objects رو mask کنه، نه فقط پایین‌تر
+  // فقط خودش mask نشه
+  return objIndex !== maskIndex;
+};
+
+export const overlaps = (obj1: EditorObject, obj2: EditorObject): boolean => {
+  const b1 = getBounds(obj1);
+  const b2 = getBounds(obj2);
+
+  return !(
+    b1.x + b1.width < b2.x ||
+    b2.x + b2.width < b1.x ||
+    b1.y + b1.height < b2.y ||
+    b2.y + b2.height < b1.y
+  );
+};
+
+export const getMaskForObject = (
+  obj: EditorObject,
+  allObjects: EditorObject[]
+): EditorObject | null => {
+  // اگر خود object یک mask است، نباید mask بشه
+  if (obj.isMask) {
+    return null;
+  }
+
+  const maskShapes = allObjects.filter(
+    (o) => o.isMask && o.type === "rectangle" && o.visible !== false && o.id !== obj.id
+  );
+
+  for (const mask of maskShapes) {
+    if (isObjectBelowMask(obj, mask, allObjects) && overlaps(obj, mask)) {
+      return mask;
+    }
+  }
+
+  return null;
+};
+
diff --git a/src/pages/editor/components/sidebar/ObjectSettings.tsx b/src/pages/editor/components/sidebar/ObjectSettings.tsx
index ebb8ea4..4f11f6e 100644
--- a/src/pages/editor/components/sidebar/ObjectSettings.tsx
+++ b/src/pages/editor/components/sidebar/ObjectSettings.tsx
@@ -8,6 +8,7 @@ import {
     VideoSettings,
     TransformSettings,
     GridSettings,
+    MaskSettings,
 } from "./settings";
 import TextInstruction from "./instructions/TextInstruction";
 
@@ -33,7 +34,10 @@ const ObjectSettings = ({ selectedObject, onUpdate, onDelete }: ObjectSettingsPr
             {selectedObject.type === "text" && <TextInstruction />}
 
             {selectedObject.type === "rectangle" && (
-                <ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+                <>
+                    <MaskSettings objectId={selectedObject.id} />
+                    <ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+                </>
             )}
 
             {(selectedObject.type === "line" || selectedObject.type === "arrow") && (
diff --git a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx b/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
index a551a9b..d0a27e4 100644
--- a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
+++ b/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
@@ -15,7 +15,7 @@ const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: str
 ];
 
 const RectangleInstruction: FC = () => {
-    const { activeShape, setActiveShape } = useShapeStore();
+    const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();
 
     return (
         <div>
@@ -44,7 +44,7 @@ const RectangleInstruction: FC = () => {
 
             <div className="mt-9 flex items-center justify-between">
                 <div className="text-[13px]">استفاده برای ماسک</div>
-                <Switch />
+                <Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
             </div>
         </div>
     );
diff --git a/src/pages/editor/components/sidebar/settings/MaskSettings.tsx b/src/pages/editor/components/sidebar/settings/MaskSettings.tsx
new file mode 100644
index 0000000..75077be
--- /dev/null
+++ b/src/pages/editor/components/sidebar/settings/MaskSettings.tsx
@@ -0,0 +1,77 @@
+import { Switch } from "@/components/ui/switch";
+import { useEditorStore } from "@/pages/editor/store/editorStore";
+
+type MaskSettingsProps = {
+  objectId: string;
+};
+
+/**
+ * MaskSettings - تنظیمات mask mode برای shapes
+ * 
+ * این component اجازه می‌ده کاربر یک shape رو به mask تبدیل کنه
+ * فقط برای shapes قابل استفاده است (rectangle, circle, triangle, abstract)
+ */
+const MaskSettings = ({ objectId }: MaskSettingsProps) => {
+  const { objects, updateObject, selectedObjectId, setSelectedObjectId } = useEditorStore();
+  
+  const object = objects.find((obj) => obj.id === objectId);
+  
+  if (!object) return null;
+  
+  const canBeMask = object.type === "rectangle";
+  
+  if (!canBeMask) return null;
+  
+  const isMask = object.isMask || false;
+  const currentShowGuide = object.showMaskGuide !== false;
+
+  const handleToggleMask = (checked: boolean) => {
+    updateObject(objectId, { isMask: checked, showMaskGuide: checked ? true : undefined });
+    
+    if (checked && selectedObjectId === objectId) {
+      setSelectedObjectId(null);
+    }
+  };
+
+  const handleToggleGuide = (checked: boolean) => {
+    updateObject(objectId, { showMaskGuide: checked });
+  };
+
+  return (
+    <div className="p-4 border-b">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-medium">استفاده به عنوان ماسک</span>
+          <span className="text-xs text-gray-500">
+            ناحیه‌ای که با ماسک همپوشانی دارد مخفی می‌شود
+          </span>
+        </div>
+        <Switch
+          checked={isMask}
+          onCheckedChange={handleToggleMask}
+        />
+      </div>
+      
+      {isMask && (
+        <>
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-sm">نمایش راهنمای ماسک</span>
+            <Switch
+              checked={currentShowGuide}
+              onCheckedChange={handleToggleGuide}
+            />
+          </div>
+          
+          <div className="p-2 bg-blue-50 rounded-md">
+            <p className="text-xs text-blue-700">
+              💡 قسمت‌های همپوشانی با این ماسک مخفی می‌شوند.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MaskSettings;
+
diff --git a/src/pages/editor/components/sidebar/settings/index.ts b/src/pages/editor/components/sidebar/settings/index.ts
index f578aab..ed74a5d 100644
--- a/src/pages/editor/components/sidebar/settings/index.ts
+++ b/src/pages/editor/components/sidebar/settings/index.ts
@@ -6,4 +6,5 @@ export { default as LinkSettings } from "./LinkSettings";
 export { default as VideoSettings } from "./VideoSettings";
 export { default as TransformSettings } from "./TransformSettings";
 export { default as GridSettings } from "./GridSettings";
+export { default as MaskSettings } from "./MaskSettings";
 
diff --git a/src/pages/editor/components/tools/AbstractShape.tsx b/src/pages/editor/components/tools/AbstractShape.tsx
index 037d498..cda51a9 100644
--- a/src/pages/editor/components/tools/AbstractShape.tsx
+++ b/src/pages/editor/components/tools/AbstractShape.tsx
@@ -13,6 +13,8 @@ const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
         }
     }, [isSelected, transformerRef]);
 
+    const isMask = obj.isMask || false;
+    const showGuide = obj.showMaskGuide !== false;
     const baseRadius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
     const abstractScale = 0.85;
     const radius = baseRadius * abstractScale;
@@ -26,9 +28,18 @@ const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
             numPoints={5}
             innerRadius={innerRadius}
             outerRadius={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={() => {
@@ -36,6 +47,13 @@ const AbstractShape = ({ 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, {
diff --git a/src/pages/editor/components/tools/CircleShape.tsx b/src/pages/editor/components/tools/CircleShape.tsx
index acc5b3f..d90ce97 100644
--- a/src/pages/editor/components/tools/CircleShape.tsx
+++ b/src/pages/editor/components/tools/CircleShape.tsx
@@ -13,15 +13,27 @@ const CircleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, drag
         }
     }, [isSelected, transformerRef]);
 
+    const isMask = obj.isMask || false;
+    const showGuide = obj.showMaskGuide !== false;
+    
     return (
         <Circle
             ref={shapeRef}
             x={obj.x}
             y={obj.y}
             radius={(obj.width || 50) / 2}
-            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={() => {
@@ -29,6 +41,13 @@ const CircleShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, drag
                     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, {
diff --git a/src/pages/editor/components/tools/RectangleShape.tsx b/src/pages/editor/components/tools/RectangleShape.tsx
index 72d10a3..d53d3a3 100644
--- a/src/pages/editor/components/tools/RectangleShape.tsx
+++ b/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, {
diff --git a/src/pages/editor/components/tools/TriangleShape.tsx b/src/pages/editor/components/tools/TriangleShape.tsx
index 122ffa3..a27e78c 100644
--- a/src/pages/editor/components/tools/TriangleShape.tsx
+++ b/src/pages/editor/components/tools/TriangleShape.tsx
@@ -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, {
diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts
index 83dcc63..11125b1 100644
--- a/src/pages/editor/store/editorStore.ts
+++ b/src/pages/editor/store/editorStore.ts
@@ -60,6 +60,8 @@ export type EditorObject = {
   shapeType?: ShapeType;
   tableData?: TableData;
   visible?: boolean;
+  isMask?: boolean;
+  showMaskGuide?: boolean;
 };
 
 export type Page = {
diff --git a/src/pages/editor/store/shapeStore.ts b/src/pages/editor/store/shapeStore.ts
index 12ce1c2..345841e 100644
--- a/src/pages/editor/store/shapeStore.ts
+++ b/src/pages/editor/store/shapeStore.ts
@@ -5,11 +5,15 @@ export type ShapeType = "square" | "circle" | "triangle" | "abstract";
 type ShapeStore = {
     activeShape: ShapeType;
     setActiveShape: (shape: ShapeType) => void;
+    useAsMask: boolean;
+    setUseAsMask: (value: boolean) => void;
 };
 
 export const useShapeStore = create<ShapeStore>((set) => ({
     activeShape: "square",
     setActiveShape: (shape) => set({ activeShape: shape }),
+    useAsMask: false,
+    setUseAsMask: (value) => set({ useAsMask: value }),
 }));