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

clear code + split to multi components

Browse Source
This commit is contained in:
hamid zarghami
2026-01-07 15:59:16 +03:30
parent 7a2bdfba56
commit 1b710555bc
8 changed files with 1076 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/canvas/useTransformHandlers.ts
+512
View File
@@ -0,0 +1,512 @@
import { useEffect, type RefObject } from "react";
import Konva from "konva";
import { useEditorStore } from "../../store/editorStore";
export const useTransformHandlers = (
transformerRef: RefObject<Konva.Transformer | null>,
layerRef: RefObject<Konva.Layer | null>
) => {
const {
objects,
selectedObjectIds,
updateObject,
applyTableResize,
} = useEditorStore();
// Attach transformer to selected objects when they change
useEffect(() => {
if (
!transformerRef.current ||
selectedObjectIds.length === 0 ||
!layerRef.current
) {
if (transformerRef.current) {
transformerRef.current.nodes([]);
transformerRef.current.getLayer()?.batchDraw();
}
return;
}
// 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;
const nodesToTransform: Konva.Node[] = [];
selectedObjectIds.forEach((objId) => {
const selectedObject = objects.find((obj) => obj.id === objId);
if (!selectedObject) return;
// 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);
}, [selectedObjectIds, objects, transformerRef, layerRef]);
useEffect(() => {
if (!transformerRef.current || selectedObjectIds.length === 0) return;
const transformer = transformerRef.current;
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 rotation = node.rotation();
const newX = node.x();
const newY = node.y();
const groupMembers = objects.filter(
(o) => o.groupId === selectedObject.id
);
const oldGroupX = selectedObject.x || 0;
const oldGroupY = selectedObject.y || 0;
// Update Konva nodes directly for live preview
groupMembers.forEach((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;
const finalX = newX + scaledX;
const finalY = newY + scaledY;
// Find the Konva node for this member
const memberNode =
layerRef.current?.findOne(`#${member.id}`) ||
layerRef.current?.findOne(`#masked-${member.id}`);
if (memberNode) {
// برای AbstractShape و TriangleShape که از مرکز استفاده می‌کنند، باید موقعیت را تنظیم کنیم
if (
member.type === "rectangle" &&
(member.shapeType === "triangle" ||
member.shapeType === "abstract")
) {
// موقعیت در store گوشه بالا-چپ است، اما در render از مرکز استفاده می‌شود
const w = (member.width || 100) * scaleX;
const h = (member.height || 100) * scaleY;
memberNode.x(finalX + w / 2);
memberNode.y(finalY + h / 2);
} else {
memberNode.x(finalX);
memberNode.y(finalY);
}
memberNode.width((member.width || 100) * scaleX);
memberNode.height((member.height || 100) * scaleY);
memberNode.rotation((member.rotation || 0) + rotation);
memberNode.scaleX(1);
memberNode.scaleY(1);
}
});
layerRef.current?.batchDraw();
});
};
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;
// محاسبه 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 originalMember = groupMembers.find((gm) => gm.id === m.id);
if (!originalMember) return;
const w = m.width || 0;
const h = m.height || 0;
// برای دایره، x و y مرکز دایره است و bounding box همیشه یک مربع است
if (
originalMember.type === "rectangle" &&
originalMember.shapeType === "circle"
) {
const radius = w / 2;
const cx = m.x || 0;
const cy = m.y || 0;
// برای دایره، bounding box همیشه یک مربع با ضلع برابر با قطر است
minX = Math.min(minX, cx - radius);
minY = Math.min(minY, cy - radius);
maxX = Math.max(maxX, cx + radius);
maxY = Math.max(maxY, cy + radius);
return;
}
// برای مثلث و abstract، x و y در store گوشه بالا-چپ است اما در render مرکز استفاده می‌شود
if (
originalMember.type === "rectangle" &&
(originalMember.shapeType === "triangle" ||
originalMember.shapeType === "abstract")
) {
// محاسبه مرکز از گوشه بالا-چپ
const cx = (m.x || 0) + w / 2;
const cy = (m.y || 0) + h / 2;
const rot = ((m.rotation || 0) * Math.PI) / 180;
// برای abstract، از radius واقعی استفاده کن (0.85 * baseRadius)
// برای triangle، از radius واقعی استفاده کن (min(width, height) / 2)
let actualRadius: number;
if (originalMember.shapeType === "abstract") {
const baseRadius = Math.min(w / 2, h / 2);
actualRadius = baseRadius * 0.85;
} else {
// triangle
actualRadius = Math.min(w / 2, h / 2);
}
// محاسبه چهار گوشه با استفاده از radius واقعی
const corners = [
{ x: -actualRadius, y: -actualRadius },
{ x: actualRadius, y: -actualRadius },
{ x: actualRadius, y: actualRadius },
{ x: -actualRadius, y: actualRadius },
];
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);
});
return;
}
// برای arrow و line، x و y نقطه شروع است و width/height نقطه پایان است
if (
originalMember.type === "arrow" ||
originalMember.type === "line"
) {
const startX = m.x || 0;
const startY = m.y || 0;
const endX = m.width || 0;
const endY = m.height || 0;
// برای arrow و line، bounding box از نقطه شروع تا نقطه پایان است
minX = Math.min(minX, startX, endX);
minY = Math.min(minY, startY, endY);
maxX = Math.max(maxX, startX, endX);
maxY = Math.max(maxY, startY, endY);
return;
}
// برای سایر اشکال، x و y گوشه بالا-چپ است
const cx = (m.x || 0) + w / 2;
const cy = (m.y || 0) + h / 2;
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 node directly in Konva first to prevent transformer flicker
if (layerRef.current) {
const groupNode = layerRef.current.findOne(`#${selectedObject.id}`);
if (groupNode) {
groupNode.x(minX);
groupNode.y(minY);
groupNode.width(groupWidth);
groupNode.height(groupHeight);
groupNode.rotation(0);
}
}
// Update group object with new bounds (rotation should remain 0)
updateObject(selectedObject.id, {
x: minX,
y: minY,
width: groupWidth,
height: groupHeight,
rotation: 0,
});
// Force transformer to update immediately
if (transformerRef.current && layerRef.current) {
const groupNode = layerRef.current.findOne(`#${selectedObject.id}`);
if (groupNode) {
transformerRef.current.nodes([groupNode]);
transformerRef.current.getLayer()?.batchDraw();
}
}
} 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);
// Handle special shapes that use radius (Circle, Triangle, Abstract)
if (selectedObject.type === "rectangle") {
if (selectedObject.shapeType === "circle") {
// Circle: maintain aspect ratio and use average scale
const avgScale = (scaleX + scaleY) / 2;
const newRadius = Math.max(
5,
((selectedObject.width || 50) / 2) * avgScale
);
const newSize = newRadius * 2;
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
width: newSize,
height: newSize,
});
} else if (
selectedObject.shapeType === "triangle" ||
selectedObject.shapeType === "abstract"
) {
// Triangle and Abstract: maintain aspect ratio and use average scale
const avgScale = (scaleX + scaleY) / 2;
const baseRadius = Math.min(
(selectedObject.width || 100) / 2,
(selectedObject.height || 100) / 2
);
const newRadius = Math.max(5, baseRadius * avgScale);
const newSize = newRadius * 2;
updateObject(selectedObject.id, {
x: node.x() - newSize / 2,
y: node.y() - newSize / 2,
rotation: node.rotation(),
width: newSize,
height: newSize,
});
} else {
// Regular rectangle
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),
});
}
} else if (
selectedObject.type === "line" ||
selectedObject.type === "arrow"
) {
// Line and Arrow: scale the end point
const startX = selectedObject.x || 0;
const startY = selectedObject.y || 0;
const endX = selectedObject.width || 0;
const endY = selectedObject.height || 0;
const dx = (endX - startX) * scaleX;
const dy = (endY - startY) * scaleY;
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
width: node.x() + dx,
height: node.y() + dy,
});
} else if (
selectedObject.type === "text" ||
selectedObject.type === "link"
) {
// Text and Link: use stored width/height from store, not getClientRect
// because TextShape auto-calculates dimensions and we need to scale the stored values
const storedWidth = selectedObject.width || 100;
const storedHeight = selectedObject.height || 100;
// Use average scale to maintain aspect ratio for text
const avgScale = (scaleX + scaleY) / 2;
const newWidth = Math.max(5, storedWidth * scaleX);
const newHeight = Math.max(5, storedHeight * scaleY);
if (selectedObject.type === "link") {
// For link, also update fontSize
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
fontSize: selectedObject.fontSize
? Math.max(5, selectedObject.fontSize * scaleX)
: undefined,
});
} else {
// For text, update width, height, and fontSize
updateObject(selectedObject.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
width: newWidth,
height: newHeight,
fontSize: selectedObject.fontSize
? Math.max(5, selectedObject.fontSize * avgScale)
: undefined,
});
}
} else {
// Default for other objects (image, etc.)
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,
layerRef,
]);
};