base mask

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;