diff --git a/src/pages/editor/components/EditorCanvas.tsx b/src/pages/editor/components/EditorCanvas.tsx index 98762aa..22f1786 100644 --- a/src/pages/editor/components/EditorCanvas.tsx +++ b/src/pages/editor/components/EditorCanvas.tsx @@ -325,10 +325,55 @@ const EditorCanvas = () => { 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 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 مرکز است + if (originalMember.type === "rectangle" && (originalMember.shapeType === "triangle" || originalMember.shapeType === "abstract")) { + const cx = m.x || 0; + const cy = m.y || 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); + }); + 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 diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts index 464aea5..d3c2c23 100644 --- a/src/pages/editor/store/editorStore.ts +++ b/src/pages/editor/store/editorStore.ts @@ -757,6 +757,47 @@ export const useEditorStore = create((set, get) => { } } + // برای دایره، x و y مرکز دایره است و bounding box همیشه یک مربع است + if (obj.type === "rectangle" && obj.shapeType === "circle") { + const radius = w / 2; + const cx = obj.x || 0; + const cy = obj.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 مرکز است + if (obj.type === "rectangle" && (obj.shapeType === "triangle" || obj.shapeType === "abstract")) { + const cx = obj.x || 0; + const cy = obj.y || 0; + const rot = ((obj.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); + }); + return; + } + + // برای سایر اشکال، x و y گوشه بالا-چپ است const cx = (obj.x || 0) + w / 2; const cy = (obj.y || 0) + h / 2; const rot = ((obj.rotation || 0) * Math.PI) / 180;