clear code + split to multi components
This commit is contained in:
hamid zarghami
@@ -1,11 +1,15 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Stage, Layer, Transformer, Rect, Group, Text } from "react-konva";
|
||||
import { Stage, Layer, Rect } from "react-konva";
|
||||
import Konva from "konva";
|
||||
import { useEditorStore, type EditorObject } from "../store/editorStore";
|
||||
import { useEditorStore } from "../store/editorStore";
|
||||
import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
|
||||
import { useStageSize } from "./canvas/useStageSize";
|
||||
import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
|
||||
import ObjectRenderer from "./canvas/ObjectRenderer";
|
||||
import { useSelectionHandlers } from "./canvas/useSelectionHandlers";
|
||||
import { useTransformHandlers } from "./canvas/useTransformHandlers";
|
||||
import { useObjectHandlers } from "./canvas/useObjectHandlers";
|
||||
import { useMaskGroupState } from "./canvas/useMaskGroupState";
|
||||
import ObjectsLayer from "./canvas/ObjectsLayer";
|
||||
import CellEditor from "@/components/CellEditor";
|
||||
import ZoomControls from "./ZoomControls";
|
||||
|
||||
@@ -16,30 +20,27 @@ const EditorCanvas = () => {
|
||||
const {
|
||||
tool,
|
||||
objects,
|
||||
updateObject,
|
||||
selectedObjectId,
|
||||
selectedObjectIds,
|
||||
setSelectedObjectId,
|
||||
addToSelection,
|
||||
removeFromSelection,
|
||||
setSelectedTableId,
|
||||
selectedCellId,
|
||||
setSelectedCellId,
|
||||
editingCell,
|
||||
setEditingCell,
|
||||
updateCellValue,
|
||||
applyTableResize,
|
||||
setStageRef,
|
||||
setLayerRef,
|
||||
zoom,
|
||||
groupObjects,
|
||||
ungroupObjects,
|
||||
} = useEditorStore();
|
||||
|
||||
const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
|
||||
const stageSize = useStageSize();
|
||||
useKeyboardMovement();
|
||||
|
||||
const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
|
||||
const { handleObjectUpdate, handleGroupWithMask, handleUngroupFromMask, handleCellEditorSave, handleCellEditorCancel } =
|
||||
useObjectHandlers();
|
||||
|
||||
const { isGroupedWithMask, maskObject, canGroup, canUngroup, selectedObject } = useMaskGroupState(selectedObjectId);
|
||||
|
||||
useTransformHandlers(transformerRef, layerRef);
|
||||
|
||||
useEffect(() => {
|
||||
if (stageRef.current) {
|
||||
setStageRef(stageRef);
|
||||
@@ -49,561 +50,6 @@ const EditorCanvas = () => {
|
||||
}
|
||||
}, [setStageRef, setLayerRef]);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (obj?.type === "grid") {
|
||||
setSelectedTableId(id);
|
||||
} else if (!isMultiSelect) {
|
||||
setSelectedTableId(null);
|
||||
}
|
||||
|
||||
if (!isMultiSelect) {
|
||||
setSelectedCellId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCellClick = (tableId: string, cellId: string, 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) => {
|
||||
setEditingCell({ tableId, cellId, x, y, width, height, value: text });
|
||||
};
|
||||
|
||||
const handleCellEditorSave = (text: string) => {
|
||||
if (editingCell) {
|
||||
updateCellValue(editingCell.tableId, editingCell.cellId, text);
|
||||
setEditingCell(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCellEditorCancel = () => {
|
||||
setEditingCell(null);
|
||||
};
|
||||
|
||||
const handleObjectUpdate = (id: string, updates: Partial<EditorObject>) => {
|
||||
const obj = objects.find((o) => o.id === id);
|
||||
if (!obj) return;
|
||||
|
||||
// اگر 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;
|
||||
|
||||
// بهروزرسانی group object
|
||||
updateObject(id, updates);
|
||||
|
||||
// بهروزرسانی همه اعضای گروه
|
||||
groupMembers.forEach((member) => {
|
||||
updateObject(member.id, {
|
||||
x: (member.x || 0) + deltaX,
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGroupWithMask = (objectId: string, maskId: string) => {
|
||||
groupObjects([objectId, maskId]);
|
||||
};
|
||||
|
||||
const handleUngroupFromMask = (groupId: string) => {
|
||||
ungroupObjects(groupId);
|
||||
};
|
||||
|
||||
// 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]);
|
||||
|
||||
const finalScale = stageSize.scale * zoom;
|
||||
|
||||
@@ -631,211 +77,25 @@ const EditorCanvas = () => {
|
||||
/>
|
||||
</Layer>
|
||||
|
||||
<Layer ref={layerRef}>
|
||||
{/* 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}
|
||||
<ObjectsLayer
|
||||
layerRef={layerRef}
|
||||
objects={objects}
|
||||
selectedObjectIds={selectedObjectIds}
|
||||
selectedCellId={selectedCellId}
|
||||
tool={tool}
|
||||
transformerRef={transformerRef}
|
||||
selectedObject={selectedObject}
|
||||
isGroupedWithMask={isGroupedWithMask}
|
||||
maskObject={maskObject}
|
||||
canGroup={canGroup}
|
||||
canUngroup={canUngroup}
|
||||
onSelect={handleSelect}
|
||||
onUpdate={handleObjectUpdate}
|
||||
draggable={tool === "select"}
|
||||
onCellClick={handleCellClick}
|
||||
onCellDblClick={handleCellDblClick}
|
||||
selectedCellId={selectedCellId}
|
||||
allObjects={objects}
|
||||
onGroup={handleGroupWithMask}
|
||||
onUngroup={handleUngroupFromMask}
|
||||
/>
|
||||
))}
|
||||
{/* 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
|
||||
let isGroupedWithMask = false;
|
||||
let hasMask = false;
|
||||
let maskObject = null;
|
||||
|
||||
if (isGroup) {
|
||||
// اگر این یک group است، بررسی کن که آیا از یک object با mask تشکیل شده
|
||||
const groupMembers = objects.filter(o => o.groupId === selectedObject.id);
|
||||
const objectWithMask = groupMembers.find(m => m.maskId);
|
||||
if (objectWithMask) {
|
||||
maskObject = groupMembers.find(m => m.id === objectWithMask.maskId);
|
||||
isGroupedWithMask = !!maskObject;
|
||||
}
|
||||
} else {
|
||||
// اگر یک object معمولی است
|
||||
hasMask = !!selectedObject?.maskId;
|
||||
maskObject = hasMask ? objects.find(m => m.id === selectedObject?.maskId) : null;
|
||||
isGroupedWithMask = !!(selectedObject?.groupId && maskObject?.groupId === selectedObject?.groupId);
|
||||
}
|
||||
|
||||
const canGroup = hasMask && !isGroupedWithMask && maskObject && !selectedObject?.isMask;
|
||||
const canUngroup = isGroupedWithMask && isGroup;
|
||||
|
||||
// اگر با mask گروه شده، امکان ریسایز نباشد
|
||||
const enabledAnchors = isGroupedWithMask ? [] : [
|
||||
"top-left",
|
||||
"top-right",
|
||||
"bottom-left",
|
||||
"bottom-right",
|
||||
"top-center",
|
||||
"bottom-center",
|
||||
"middle-left",
|
||||
"middle-right",
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transformer
|
||||
ref={transformerRef}
|
||||
boundBoxFunc={(oldBox, newBox) => {
|
||||
if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
|
||||
return oldBox;
|
||||
}
|
||||
// اگر با mask گروه شده، هیچ تغییر سایزی مجاز نیست
|
||||
if (isGroupedWithMask) {
|
||||
return oldBox;
|
||||
}
|
||||
return newBox;
|
||||
}}
|
||||
ignoreStroke={isText}
|
||||
perfectDrawEnabled={false}
|
||||
anchorFill="#3b82f6"
|
||||
anchorStroke="#ffffff"
|
||||
borderStroke="#3b82f6"
|
||||
borderStrokeWidth={2}
|
||||
anchorSize={8}
|
||||
rotateEnabled={!isGroup && !isGroupedWithMask}
|
||||
enabledAnchors={enabledAnchors}
|
||||
/>
|
||||
|
||||
{/* دکمه گروهبندی */}
|
||||
{canGroup && selectedObject && maskObject && (
|
||||
<Group>
|
||||
<Rect
|
||||
x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
|
||||
y={(selectedObject.y || 0) - 40}
|
||||
width={100}
|
||||
height={32}
|
||||
fill="#3b82f6"
|
||||
cornerRadius={8}
|
||||
shadowColor="black"
|
||||
shadowBlur={10}
|
||||
shadowOpacity={0.2}
|
||||
onClick={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
|
||||
onTap={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
<Text
|
||||
x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
|
||||
y={(selectedObject.y || 0) - 40}
|
||||
width={100}
|
||||
height={32}
|
||||
text="گروهبندی با ماسک"
|
||||
fontSize={13}
|
||||
fontFamily="irancell"
|
||||
fill="white"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
onClick={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
|
||||
onTap={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{/* دکمه لغو گروهبندی */}
|
||||
{canUngroup && selectedObject && (
|
||||
<Group>
|
||||
<Rect
|
||||
x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
|
||||
y={(selectedObject.y || 0) - 40}
|
||||
width={100}
|
||||
height={32}
|
||||
fill="#ef4444"
|
||||
cornerRadius={8}
|
||||
shadowColor="black"
|
||||
shadowBlur={10}
|
||||
shadowOpacity={0.2}
|
||||
onClick={() => handleUngroupFromMask(selectedObject.id)}
|
||||
onTap={() => handleUngroupFromMask(selectedObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
<Text
|
||||
x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
|
||||
y={(selectedObject.y || 0) - 40}
|
||||
width={100}
|
||||
height={32}
|
||||
text="لغو گروهبندی"
|
||||
fontSize={13}
|
||||
fontFamily="irancell"
|
||||
fill="white"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
onClick={() => handleUngroupFromMask(selectedObject.id)}
|
||||
onTap={() => handleUngroupFromMask(selectedObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</Layer>
|
||||
</Stage>
|
||||
</div>
|
||||
{editingCell && (
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Group, Rect, Text } from "react-konva";
|
||||
import type { EditorObject } from "../../store/editorStore";
|
||||
|
||||
interface GroupMaskButtonsProps {
|
||||
selectedObject: EditorObject;
|
||||
maskObject: EditorObject | null;
|
||||
canGroup: boolean;
|
||||
canUngroup: boolean;
|
||||
onGroup: (objectId: string, maskId: string) => void;
|
||||
onUngroup: (groupId: string) => void;
|
||||
}
|
||||
|
||||
const GroupMaskButtons = ({
|
||||
selectedObject,
|
||||
maskObject,
|
||||
canGroup,
|
||||
canUngroup,
|
||||
onGroup,
|
||||
onUngroup,
|
||||
}: GroupMaskButtonsProps) => {
|
||||
if (!canGroup && !canUngroup) return null;
|
||||
|
||||
const buttonX = (selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50;
|
||||
const buttonY = (selectedObject.y || 0) - 40;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* دکمه گروهبندی */}
|
||||
{canGroup && maskObject && (
|
||||
<Group>
|
||||
<Rect
|
||||
x={buttonX}
|
||||
y={buttonY}
|
||||
width={100}
|
||||
height={32}
|
||||
fill="#3b82f6"
|
||||
cornerRadius={8}
|
||||
shadowColor="black"
|
||||
shadowBlur={10}
|
||||
shadowOpacity={0.2}
|
||||
onClick={() => onGroup(selectedObject.id, maskObject.id)}
|
||||
onTap={() => onGroup(selectedObject.id, maskObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
<Text
|
||||
x={buttonX}
|
||||
y={buttonY}
|
||||
width={100}
|
||||
height={32}
|
||||
text="گروهبندی با ماسک"
|
||||
fontSize={13}
|
||||
fontFamily="irancell"
|
||||
fill="white"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
onClick={() => onGroup(selectedObject.id, maskObject.id)}
|
||||
onTap={() => onGroup(selectedObject.id, maskObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{/* دکمه لغو گروهبندی */}
|
||||
{canUngroup && (
|
||||
<Group>
|
||||
<Rect
|
||||
x={buttonX}
|
||||
y={buttonY}
|
||||
width={100}
|
||||
height={32}
|
||||
fill="#ef4444"
|
||||
cornerRadius={8}
|
||||
shadowColor="black"
|
||||
shadowBlur={10}
|
||||
shadowOpacity={0.2}
|
||||
onClick={() => onUngroup(selectedObject.id)}
|
||||
onTap={() => onUngroup(selectedObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
<Text
|
||||
x={buttonX}
|
||||
y={buttonY}
|
||||
width={100}
|
||||
height={32}
|
||||
text="لغو گروهبندی"
|
||||
fontSize={13}
|
||||
fontFamily="irancell"
|
||||
fill="white"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
onClick={() => onUngroup(selectedObject.id)}
|
||||
onTap={() => onUngroup(selectedObject.id)}
|
||||
listening={true}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupMaskButtons;
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
import { Layer, Group } from "react-konva";
|
||||
import Konva from "konva";
|
||||
import ObjectRenderer from "./ObjectRenderer";
|
||||
import TransformerControls from "./TransformerControls";
|
||||
import GroupMaskButtons from "./GroupMaskButtons";
|
||||
import type { EditorObject } from "../../store/editorStore";
|
||||
|
||||
interface ObjectsLayerProps {
|
||||
layerRef: React.RefObject<Konva.Layer | null>;
|
||||
objects: EditorObject[];
|
||||
selectedObjectIds: string[];
|
||||
selectedCellId: string | null;
|
||||
tool: string;
|
||||
transformerRef: React.RefObject<Konva.Transformer | null>;
|
||||
selectedObject: EditorObject | null;
|
||||
isGroupedWithMask: boolean;
|
||||
maskObject: EditorObject | null;
|
||||
canGroup: boolean;
|
||||
canUngroup: boolean;
|
||||
onSelect: (id: string, node: Konva.Node, e?: Konva.KonvaEventObject<MouseEvent>) => void;
|
||||
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
|
||||
onCellClick: (tableId: string, cellId: string, e?: Konva.KonvaEventObject<MouseEvent>) => void;
|
||||
onCellDblClick: (
|
||||
tableId: string,
|
||||
cellId: string,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
text: string
|
||||
) => void;
|
||||
onGroup: (objectId: string, maskId: string) => void;
|
||||
onUngroup: (groupId: string) => void;
|
||||
}
|
||||
|
||||
const ObjectsLayer = ({
|
||||
layerRef,
|
||||
objects,
|
||||
selectedObjectIds,
|
||||
selectedCellId,
|
||||
tool,
|
||||
transformerRef,
|
||||
selectedObject,
|
||||
isGroupedWithMask,
|
||||
maskObject,
|
||||
canGroup,
|
||||
canUngroup,
|
||||
onSelect,
|
||||
onUpdate,
|
||||
onCellClick,
|
||||
onCellDblClick,
|
||||
onGroup,
|
||||
onUngroup,
|
||||
}: ObjectsLayerProps) => {
|
||||
return (
|
||||
<Layer ref={layerRef}>
|
||||
{/* 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={onSelect}
|
||||
onUpdate={onUpdate}
|
||||
draggable={tool === "select"}
|
||||
onCellClick={onCellClick}
|
||||
onCellDblClick={onCellDblClick}
|
||||
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={onSelect}
|
||||
onUpdate={onUpdate}
|
||||
draggable={tool === "select"}
|
||||
onCellClick={onCellClick}
|
||||
onCellDblClick={onCellDblClick}
|
||||
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={onSelect}
|
||||
onUpdate={onUpdate}
|
||||
draggable={false}
|
||||
onCellClick={onCellClick}
|
||||
onCellDblClick={onCellDblClick}
|
||||
selectedCellId={selectedCellId}
|
||||
allObjects={objects}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Transformer and Group/Mask buttons must be inside the same Layer */}
|
||||
{selectedObject && (
|
||||
<>
|
||||
<TransformerControls
|
||||
transformerRef={transformerRef}
|
||||
selectedObject={selectedObject}
|
||||
isGroupedWithMask={isGroupedWithMask}
|
||||
/>
|
||||
<GroupMaskButtons
|
||||
selectedObject={selectedObject}
|
||||
maskObject={maskObject}
|
||||
canGroup={canGroup}
|
||||
canUngroup={canUngroup}
|
||||
onGroup={onGroup}
|
||||
onUngroup={onUngroup}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Layer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ObjectsLayer;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Transformer } from "react-konva";
|
||||
import Konva from "konva";
|
||||
import type { EditorObject } from "../../store/editorStore";
|
||||
|
||||
interface TransformerControlsProps {
|
||||
transformerRef: React.RefObject<Konva.Transformer | null>;
|
||||
selectedObject: EditorObject | null;
|
||||
isGroupedWithMask: boolean;
|
||||
}
|
||||
|
||||
const TransformerControls = ({ transformerRef, selectedObject, isGroupedWithMask }: TransformerControlsProps) => {
|
||||
if (!selectedObject) return null;
|
||||
|
||||
const isText = selectedObject.type === "text";
|
||||
const isGroup = selectedObject.type === "group";
|
||||
|
||||
// اگر با mask گروه شده، امکان ریسایز نباشد
|
||||
const enabledAnchors = isGroupedWithMask
|
||||
? []
|
||||
: [
|
||||
"top-left",
|
||||
"top-right",
|
||||
"bottom-left",
|
||||
"bottom-right",
|
||||
"top-center",
|
||||
"bottom-center",
|
||||
"middle-left",
|
||||
"middle-right",
|
||||
];
|
||||
|
||||
return (
|
||||
<Transformer
|
||||
ref={transformerRef}
|
||||
boundBoxFunc={(oldBox, newBox) => {
|
||||
if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
|
||||
return oldBox;
|
||||
}
|
||||
// اگر با mask گروه شده، هیچ تغییر سایزی مجاز نیست
|
||||
if (isGroupedWithMask) {
|
||||
return oldBox;
|
||||
}
|
||||
return newBox;
|
||||
}}
|
||||
ignoreStroke={isText}
|
||||
perfectDrawEnabled={false}
|
||||
anchorFill="#3b82f6"
|
||||
anchorStroke="#ffffff"
|
||||
borderStroke="#3b82f6"
|
||||
borderStrokeWidth={2}
|
||||
anchorSize={8}
|
||||
rotateEnabled={!isGroup && !isGroupedWithMask}
|
||||
enabledAnchors={enabledAnchors}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransformerControls;
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useEditorStore, type EditorObject } from "../../store/editorStore";
|
||||
|
||||
export const useMaskGroupState = (selectedObjectId: string | null) => {
|
||||
const { objects } = useEditorStore();
|
||||
|
||||
if (!selectedObjectId) {
|
||||
return {
|
||||
isGroupedWithMask: false,
|
||||
hasMask: false,
|
||||
maskObject: null,
|
||||
canGroup: false,
|
||||
canUngroup: false,
|
||||
selectedObject: null,
|
||||
};
|
||||
}
|
||||
|
||||
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
|
||||
if (!selectedObject) {
|
||||
return {
|
||||
isGroupedWithMask: false,
|
||||
hasMask: false,
|
||||
maskObject: null,
|
||||
canGroup: false,
|
||||
canUngroup: false,
|
||||
selectedObject: null,
|
||||
};
|
||||
}
|
||||
|
||||
const isGroup = selectedObject.type === "group";
|
||||
|
||||
// بررسی امکان group/ungroup با mask
|
||||
let isGroupedWithMask = false;
|
||||
let hasMask = false;
|
||||
let maskObject: EditorObject | null = null;
|
||||
|
||||
if (isGroup) {
|
||||
// اگر این یک group است، بررسی کن که آیا از یک object با mask تشکیل شده
|
||||
const groupMembers = objects.filter((o) => o.groupId === selectedObject.id);
|
||||
const objectWithMask = groupMembers.find((m) => m.maskId);
|
||||
if (objectWithMask) {
|
||||
maskObject = groupMembers.find((m) => m.id === objectWithMask.maskId) || null;
|
||||
isGroupedWithMask = !!maskObject;
|
||||
}
|
||||
} else {
|
||||
// اگر یک object معمولی است
|
||||
hasMask = !!selectedObject.maskId;
|
||||
maskObject = hasMask ? objects.find((m) => m.id === selectedObject.maskId) || null : null;
|
||||
isGroupedWithMask = !!(selectedObject.groupId && maskObject?.groupId === selectedObject.groupId);
|
||||
}
|
||||
|
||||
const canGroup = !!(hasMask && !isGroupedWithMask && maskObject && !selectedObject.isMask);
|
||||
const canUngroup = Boolean(isGroupedWithMask && isGroup);
|
||||
|
||||
return {
|
||||
isGroupedWithMask,
|
||||
hasMask,
|
||||
maskObject,
|
||||
canGroup,
|
||||
canUngroup,
|
||||
selectedObject,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useEditorStore, type EditorObject } from "../../store/editorStore";
|
||||
|
||||
export const useObjectHandlers = () => {
|
||||
const { objects, updateObject, groupObjects, ungroupObjects, updateCellValue, setEditingCell, editingCell } =
|
||||
useEditorStore();
|
||||
|
||||
const handleObjectUpdate = (id: string, updates: Partial<EditorObject>) => {
|
||||
const obj = objects.find((o) => o.id === id);
|
||||
if (!obj) return;
|
||||
|
||||
// اگر 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;
|
||||
|
||||
// بهروزرسانی group object
|
||||
updateObject(id, updates);
|
||||
|
||||
// بهروزرسانی همه اعضای گروه
|
||||
groupMembers.forEach((member) => {
|
||||
updateObject(member.id, {
|
||||
x: (member.x || 0) + deltaX,
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGroupWithMask = (objectId: string, maskId: string) => {
|
||||
groupObjects([objectId, maskId]);
|
||||
};
|
||||
|
||||
const handleUngroupFromMask = (groupId: string) => {
|
||||
ungroupObjects(groupId);
|
||||
};
|
||||
|
||||
const handleCellEditorSave = (text: string) => {
|
||||
if (editingCell) {
|
||||
updateCellValue(editingCell.tableId, editingCell.cellId, text);
|
||||
setEditingCell(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCellEditorCancel = () => {
|
||||
setEditingCell(null);
|
||||
};
|
||||
|
||||
return {
|
||||
handleObjectUpdate,
|
||||
handleGroupWithMask,
|
||||
handleUngroupFromMask,
|
||||
handleCellEditorSave,
|
||||
handleCellEditorCancel,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import Konva from "konva";
|
||||
import { useEditorStore } from "../../store/editorStore";
|
||||
|
||||
export const useSelectionHandlers = () => {
|
||||
const {
|
||||
objects,
|
||||
selectedObjectIds,
|
||||
setSelectedObjectId,
|
||||
addToSelection,
|
||||
removeFromSelection,
|
||||
setSelectedTableId,
|
||||
setSelectedCellId,
|
||||
} = useEditorStore();
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (obj?.type === "grid") {
|
||||
setSelectedTableId(id);
|
||||
} else if (!isMultiSelect) {
|
||||
setSelectedTableId(null);
|
||||
}
|
||||
|
||||
if (!isMultiSelect) {
|
||||
setSelectedCellId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCellClick = (tableId: string, cellId: string, 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
|
||||
) => {
|
||||
const { setEditingCell } = useEditorStore.getState();
|
||||
setEditingCell({ tableId, cellId, x, y, width, height, value: text });
|
||||
};
|
||||
|
||||
return {
|
||||
handleSelect,
|
||||
handleCellClick,
|
||||
handleCellDblClick,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
};
|
||||
Reference in New Issue
Block a user