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/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, {