base mask

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

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;

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

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