danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

base mask

Browse Source
This commit is contained in:
hamid zarghami
2026-01-04 10:18:49 +03:30
parent b33b7a953d
commit aa6153d289
16 changed files with 435 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorCanvas.tsx
+36 -17
View File
@@ -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";
src/pages/editor/components/LayersList.tsx
+7 -3
View File
@@ -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) => {
src/pages/editor/components/canvas/MaskShapeRenderer.tsx
+76
View File
@@ -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
+76 -16
View File
@@ -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
+5 -1
View File
@@ -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
+58
View File
@@ -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;
};
src/pages/editor/components/sidebar/ObjectSettings.tsx
+5 -1
View File
@@ -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") && (
src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
+2 -2
View File
@@ -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>
);
src/pages/editor/components/sidebar/settings/MaskSettings.tsx
+77
View File
@@ -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;
src/pages/editor/components/sidebar/settings/index.ts
+1
View File
@@ -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";
src/pages/editor/components/tools/AbstractShape.tsx
+21 -3
View File
@@ -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, {
src/pages/editor/components/tools/CircleShape.tsx
+22 -3
View File
@@ -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, {
src/pages/editor/components/tools/RectangleShape.tsx
+22 -3
View File
@@ -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, {
src/pages/editor/components/tools/TriangleShape.tsx
+21 -3
View File
@@ -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, {
src/pages/editor/store/editorStore.ts
+2
View File
@@ -60,6 +60,8 @@ export type EditorObject = {
shapeType?: ShapeType;
tableData?: TableData;
visible?: boolean;
isMask?: boolean;
showMaskGuide?: boolean;
};
export type Page = {
src/pages/editor/store/shapeStore.ts
+4
View File
@@ -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 }),
}));