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

base group

Browse Source
This commit is contained in:
hamid zarghami
2026-01-05 12:27:58 +03:30
parent e683b30fa1
commit 61d8e5a814
17 changed files with 607 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorCanvas.tsx
+344 -85
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { useEffect, useRef, useState } from "react";
import { Stage, Layer, Transformer, Rect, Group, Text } from "react-konva";
import Konva from "konva";
import { useEditorStore, type EditorObject } from "../store/editorStore";
@@ -18,7 +18,11 @@ const EditorCanvas = () => {
objects,
updateObject,
selectedObjectId,
selectedObjectIds,
setSelectedObjectId,
setSelectedObjectIds,
addToSelection,
removeFromSelection,
setSelectedTableId,
selectedCellId,
setSelectedCellId,
@@ -46,37 +50,68 @@ const EditorCanvas = () => {
}
}, [setStageRef, setLayerRef]);
const handleSelect = (id: string, node: Konva.Node) => {
const handleSelect = (id: string, node: Konva.Node, e?: Konva.KonvaEventObject<MouseEvent>) => {
const obj = objects.find((o) => o.id === id);
const isMultiSelect = e?.evt?.metaKey || e?.evt?.ctrlKey || e?.evt?.shiftKey;
// اگر object در یک group است، group را انتخاب کن نه object
if (obj?.groupId && obj.type !== "group") {
const groupObject = objects.find((o) => o.id === obj.groupId);
if (groupObject) {
if (isMultiSelect) {
if (selectedObjectIds.includes(groupObject.id)) {
removeFromSelection(groupObject.id);
} else {
addToSelection(groupObject.id);
}
} else {
setSelectedObjectId(groupObject.id);
}
return;
}
}
if (isMultiSelect) {
// انتخاب چندتایی
if (selectedObjectIds.includes(id)) {
// اگر قبلاً انتخاب شده بود، از انتخاب خارج کن
removeFromSelection(id);
} else {
// اگر انتخاب نشده بود، به انتخاب اضافه کن
addToSelection(id);
}
} else {
// انتخاب تک‌تایی
setSelectedObjectId(id);
}
setSelectedObjectId(id);
if (obj?.type === "grid") {
setSelectedTableId(id);
} else {
} else if (!isMultiSelect) {
setSelectedTableId(null);
}
setSelectedCellId(null);
if (transformerRef.current && layerRef.current) {
// اگر object با mask گروه شده، transformer را به Group متصل کن
const maskedGroup = layerRef.current.findOne(`#masked-${id}`);
const targetNode = maskedGroup || node;
transformerRef.current.nodes([targetNode]);
transformerRef.current.getLayer()?.batchDraw();
if (!isMultiSelect) {
setSelectedCellId(null);
}
};
const handleCellClick = (tableId: string, cellId: string) => {
setSelectedTableId(tableId);
setSelectedObjectId(tableId);
setSelectedCellId(cellId);
const obj = objects.find((o) => o.id === tableId);
if (obj && transformerRef.current && layerRef.current) {
const tableNode = layerRef.current.findOne(`#${tableId}`);
if (tableNode) {
transformerRef.current.nodes([tableNode]);
transformerRef.current.getLayer()?.batchDraw();
const handleCellClick = (tableId: string, cellId: string, node?: Konva.Node, e?: Konva.KonvaEventObject<MouseEvent>) => {
const isMultiSelect = e?.evt?.metaKey || e?.evt?.ctrlKey || e?.evt?.shiftKey;
if (isMultiSelect) {
// انتخاب چندتایی
if (selectedObjectIds.includes(tableId)) {
removeFromSelection(tableId);
} else {
addToSelection(tableId);
}
} else {
setSelectedTableId(tableId);
setSelectedObjectId(tableId);
}
setSelectedCellId(cellId);
};
const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => {
@@ -98,13 +133,13 @@ const EditorCanvas = () => {
const obj = objects.find((o) => o.id === id);
if (!obj) return;
// اگر object در یک گروه است و position تغییر کرد، همه اعضای گروه را جابجا کن
if (obj.groupId && (updates.x !== undefined || updates.y !== undefined)) {
const groupMembers = objects.filter((o) => o.groupId === obj.groupId && o.id !== id);
// اگر group object است و position تغییر کرد، همه objectهای داخل group را جابجا کن
if (obj.type === "group" && (updates.x !== undefined || updates.y !== undefined)) {
const groupMembers = objects.filter((o) => o.groupId === id);
const deltaX = updates.x !== undefined ? updates.x - (obj.x || 0) : 0;
const deltaY = updates.y !== undefined ? updates.y - (obj.y || 0) : 0;
// به‌روزرسانی object اصلی
// به‌روزرسانی group object
updateObject(id, updates);
// به‌روزرسانی همه اعضای گروه
@@ -114,6 +149,10 @@ const EditorCanvas = () => {
y: (member.y || 0) + deltaY,
});
});
} else if (obj.groupId && (updates.x !== undefined || updates.y !== undefined)) {
// اگر object در یک گروه است و position تغییر کرد، فقط object را به‌روزرسانی کن
// bounds group فقط موقع transform به‌روزرسانی می‌شود
updateObject(id, updates);
} else {
updateObject(id, updates);
}
@@ -127,78 +166,248 @@ const EditorCanvas = () => {
ungroupObjects(groupId);
};
// Attach transformer to selected object when it changes
// Attach transformer to selected objects when they change
useEffect(() => {
if (!transformerRef.current || !selectedObjectId || !layerRef.current) return;
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
if (!selectedObject) return;
// For grid objects, handle separately
if (selectedObject.type === "grid") {
const tableNode = layerRef.current.findOne(`#${selectedObjectId}`);
if (tableNode && transformerRef.current) {
transformerRef.current.nodes([tableNode]);
if (!transformerRef.current || selectedObjectIds.length === 0 || !layerRef.current) {
if (transformerRef.current) {
transformerRef.current.nodes([]);
transformerRef.current.getLayer()?.batchDraw();
}
return;
}
// For other objects, find the node by id and attach transformer
// Use a small delay to ensure the node is mounted (especially for images that need to load)
// Use a small delay to ensure the nodes are mounted (especially for images that need to load)
const timeoutId = setTimeout(() => {
if (!layerRef.current || !transformerRef.current) return;
// اگر object با mask گروه شده، transformer را به Group متصل کن
const maskedGroup = layerRef.current.findOne(`#masked-${selectedObjectId}`);
const node = maskedGroup || layerRef.current.findOne(`#${selectedObjectId}`);
const nodesToTransform: Konva.Node[] = [];
selectedObjectIds.forEach((objId) => {
const selectedObject = objects.find((obj) => obj.id === objId);
if (!selectedObject) return;
if (node && transformerRef.current) {
transformerRef.current.nodes([node]);
// For all objects, find by id (group, grid, or regular)
if (selectedObject.type === "group" || selectedObject.type === "grid") {
const node = layerRef.current?.findOne(`#${objId}`);
if (node) {
nodesToTransform.push(node);
}
} else {
// اگر object با mask گروه شده، transformer را به Group متصل کن
const maskedGroup = layerRef.current?.findOne(`#masked-${objId}`);
const regularNode = layerRef.current?.findOne(`#${objId}`);
const targetNode = maskedGroup || regularNode;
if (targetNode) {
nodesToTransform.push(targetNode);
}
}
});
if (nodesToTransform.length > 0) {
transformerRef.current.nodes(nodesToTransform);
transformerRef.current.getLayer()?.batchDraw();
}
}, 100);
return () => clearTimeout(timeoutId);
}, [selectedObjectId, objects, transformerRef, layerRef]);
}, [selectedObjectIds, objects, transformerRef, layerRef]);
useEffect(() => {
if (!transformerRef.current || !selectedObjectId) return;
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
if (!selectedObject) return;
if (!transformerRef.current || selectedObjectIds.length === 0) return;
const transformer = transformerRef.current;
// Handle grid objects separately
if (selectedObject.type === "grid") {
const handleTransformEnd = () => {
const node = transformer.nodes()[0];
if (!node || !selectedObject) return;
const handleTransform = () => {
const nodes = transformer.nodes();
if (nodes.length === 0 || !layerRef.current) return;
nodes.forEach((node) => {
const nodeId = node.id();
const selectedObject = objects.find((obj) => obj.id === nodeId);
if (!selectedObject || selectedObject.type !== "group") return;
const scaleX = node.scaleX();
const scaleY = node.scaleY();
const newX = node.x();
const newY = node.y();
node.scaleX(1);
node.scaleY(1);
const groupMembers = objects.filter((o) => o.groupId === selectedObject.id);
const oldGroupX = selectedObject.x || 0;
const oldGroupY = selectedObject.y || 0;
const newWidth = (selectedObject.width || 300) * scaleX;
const newHeight = (selectedObject.height || 200) * scaleY;
// Update Konva nodes directly for live preview
groupMembers.forEach((member) => {
const relativeX = (member.x || 0) - oldGroupX;
const relativeY = (member.y || 0) - oldGroupY;
const scaledX = relativeX * scaleX;
const scaledY = relativeY * scaleY;
applyTableResize(selectedObject.id, newWidth, newHeight);
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
// Find the Konva node for this member
const memberNode = layerRef.current?.findOne(`#${member.id}`) ||
layerRef.current?.findOne(`#masked-${member.id}`);
if (memberNode) {
memberNode.x(newX + scaledX);
memberNode.y(newY + scaledY);
memberNode.width((member.width || 100) * scaleX);
memberNode.height((member.height || 100) * scaleY);
memberNode.scaleX(1);
memberNode.scaleY(1);
}
});
};
transformer.on("transformend", handleTransformEnd);
layerRef.current?.batchDraw();
});
};
return () => {
transformer.off("transformend", handleTransformEnd);
};
}
}, [selectedObjectId, objects, transformerRef, applyTableResize, updateObject]);
const handleTransformEnd = () => {
const nodes = transformer.nodes();
if (nodes.length === 0) return;
nodes.forEach((node) => {
const nodeId = node.id();
const selectedObject = objects.find((obj) => obj.id === nodeId);
if (!selectedObject) return;
// Handle group objects
if (selectedObject.type === "group") {
const scaleX = node.scaleX();
const scaleY = node.scaleY();
const rotation = node.rotation();
const newX = node.x();
const newY = node.y();
node.scaleX(1);
node.scaleY(1);
node.rotation(0);
const groupMembers = objects.filter((o) => o.groupId === selectedObject.id);
const oldGroupX = selectedObject.x || 0;
const oldGroupY = selectedObject.y || 0;
const oldGroupWidth = selectedObject.width || 100;
const oldGroupHeight = selectedObject.height || 100;
// محاسبه bounds جدید بر اساا member های update شده
const updatedMembers = groupMembers.map((member) => {
const relativeX = (member.x || 0) - oldGroupX;
const relativeY = (member.y || 0) - oldGroupY;
// Apply rotation
const angle = (rotation * Math.PI) / 180;
const rotatedX = relativeX * Math.cos(angle) - relativeY * Math.sin(angle);
const rotatedY = relativeX * Math.sin(angle) + relativeY * Math.cos(angle);
// Apply scale
const scaledX = rotatedX * scaleX;
const scaledY = rotatedY * scaleY;
return {
id: member.id,
x: newX + scaledX,
y: newY + scaledY,
rotation: (member.rotation || 0) + rotation,
width: (member.width || 100) * scaleX,
height: (member.height || 100) * scaleY,
};
});
// Update all members
updatedMembers.forEach((member) => {
updateObject(member.id, {
x: member.x,
y: member.y,
rotation: member.rotation,
width: member.width,
height: member.height,
});
});
// محاسبه bounds گروه بر اساس member های update شده با در نظر گرفتن rotation
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
updatedMembers.forEach((m) => {
const cx = (m.x || 0) + (m.width || 0) / 2;
const cy = (m.y || 0) + (m.height || 0) / 2;
const w = m.width || 0;
const h = m.height || 0;
const rot = ((m.rotation || 0) * Math.PI) / 180;
// محاسبه چهار گوشه rectangle با rotation
const corners = [
{ x: -w / 2, y: -h / 2 },
{ x: w / 2, y: -h / 2 },
{ x: w / 2, y: h / 2 },
{ x: -w / 2, y: h / 2 },
];
corners.forEach((corner) => {
const rotatedX = corner.x * Math.cos(rot) - corner.y * Math.sin(rot);
const rotatedY = corner.x * Math.sin(rot) + corner.y * Math.cos(rot);
const finalX = cx + rotatedX;
const finalY = cy + rotatedY;
minX = Math.min(minX, finalX);
minY = Math.min(minY, finalY);
maxX = Math.max(maxX, finalX);
maxY = Math.max(maxY, finalY);
});
});
const groupWidth = maxX - minX;
const groupHeight = maxY - minY;
// Update group object with new bounds (rotation should remain 0)
updateObject(selectedObject.id, {
x: minX,
y: minY,
width: groupWidth,
height: groupHeight,
rotation: 0,
});
} else if (selectedObject.type === "grid") {
// Handle grid objects separately
const scaleX = node.scaleX();
const scaleY = node.scaleY();
node.scaleX(1);
node.scaleY(1);
const newWidth = (selectedObject.width || 300) * scaleX;
const newHeight = (selectedObject.height || 200) * scaleY;
applyTableResize(selectedObject.id, newWidth, newHeight);
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
});
} else {
// Handle other objects
const scaleX = node.scaleX();
const scaleY = node.scaleY();
node.scaleX(1);
node.scaleY(1);
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
width: Math.max(5, (selectedObject.width || 100) * scaleX),
height: Math.max(5, (selectedObject.height || 100) * scaleY),
});
}
});
};
transformer.on("transform", handleTransform);
transformer.on("transformend", handleTransformEnd);
return () => {
transformer.off("transform", handleTransform);
transformer.off("transformend", handleTransformEnd);
};
}, [selectedObjectIds, objects, transformerRef, applyTableResize, updateObject]);
const finalScale = stageSize.scale * zoom;
@@ -227,26 +436,76 @@ const EditorCanvas = () => {
</Layer>
<Layer ref={layerRef}>
{objects.map((obj) => (
<ObjectRenderer
key={obj.id}
obj={obj}
isSelected={selectedObjectId === obj.id}
transformerRef={transformerRef}
layerRef={layerRef}
onSelect={handleSelect}
onUpdate={handleObjectUpdate}
draggable={tool === "select"}
onCellClick={handleCellClick}
onCellDblClick={handleCellDblClick}
selectedCellId={selectedCellId}
allObjects={objects}
/>
))}
{/* Render group objects first */}
{objects
.filter((obj) => obj.type === "group")
.map((obj) => (
<ObjectRenderer
key={obj.id}
obj={obj}
isSelected={selectedObjectIds.includes(obj.id)}
transformerRef={transformerRef}
layerRef={layerRef}
onSelect={handleSelect}
onUpdate={handleObjectUpdate}
draggable={tool === "select"}
onCellClick={handleCellClick}
onCellDblClick={handleCellDblClick}
selectedCellId={selectedCellId}
allObjects={objects}
/>
))}
{/* Render non-grouped objects */}
{objects
.filter((obj) => !obj.groupId && obj.type !== "group")
.map((obj) => (
<ObjectRenderer
key={obj.id}
obj={obj}
isSelected={selectedObjectIds.includes(obj.id)}
transformerRef={transformerRef}
layerRef={layerRef}
onSelect={handleSelect}
onUpdate={handleObjectUpdate}
draggable={tool === "select"}
onCellClick={handleCellClick}
onCellDblClick={handleCellDblClick}
selectedCellId={selectedCellId}
allObjects={objects}
/>
))}
{/* Render objects inside groups - they should not be interactive */}
{objects
.filter((obj) => obj.groupId && obj.type !== "group")
.map((obj) => {
const groupObject = objects.find((o) => o.id === obj.groupId);
if (!groupObject) return null;
// Render with absolute position but wrapped in non-listening group
return (
<Group key={`group-member-${obj.id}`} listening={false}>
<ObjectRenderer
key={obj.id}
obj={obj}
isSelected={false}
transformerRef={transformerRef}
layerRef={layerRef}
onSelect={handleSelect}
onUpdate={handleObjectUpdate}
draggable={false}
onCellClick={handleCellClick}
onCellDblClick={handleCellDblClick}
selectedCellId={selectedCellId}
allObjects={objects}
/>
</Group>
);
})}
{selectedObjectId && (() => {
const selectedObject = objects.find(obj => obj.id === selectedObjectId);
const isText = selectedObject?.type === "text";
const isGroup = selectedObject?.type === "group";
// بررسی امکان group/ungroup با mask
const hasMask = selectedObject?.maskId;
@@ -272,7 +531,7 @@ const EditorCanvas = () => {
borderStroke="#3b82f6"
borderStrokeWidth={2}
anchorSize={8}
rotateEnabled={true}
rotateEnabled={!isGroup}
enabledAnchors={[
"top-left",
"top-right",