marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-09 00:59:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:Add tolerance to shape nesting detection

Browse Source
This commit is contained in:
Mark Tolmacs
2025-09-13 10:59:36 +02:00
parent 017b36aeae
commit 7ae4d3aab5
1 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/element/src/collision.ts
View File

@@ -665,7 +665,10 @@ export const isBindableElementInsideOtherBindable = (
elementsMap: ElementsMap, elementsMap: ElementsMap,
): boolean => { ): boolean => {
// Get corner points of the inner element based on its type // Get corner points of the inner element based on its type
const getCornerPoints = (element: ExcalidrawElement): GlobalPoint[] => { const getCornerPoints = (
element: ExcalidrawElement,
offset: number,
): GlobalPoint[] => {
const { x, y, width, height, angle } = element; const { x, y, width, height, angle } = element;
const center = elementCenterPoint(element, elementsMap); const center = elementCenterPoint(element, elementsMap);
@@ -674,10 +677,10 @@ export const isBindableElementInsideOtherBindable = (
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element); getDiamondPoints(element);
const corners: GlobalPoint[] = [ const corners: GlobalPoint[] = [
pointFrom(x + topX, y + topY), // top pointFrom(x + topX, y + topY - offset), // top
pointFrom(x + rightX, y + rightY), // right pointFrom(x + rightX + offset, y + rightY), // right
pointFrom(x + bottomX, y + bottomY), // bottom pointFrom(x + bottomX, y + bottomY + offset), // bottom
pointFrom(x + leftX, y + leftY), // left pointFrom(x + leftX - offset, y + leftY), // left
]; ];
return corners.map((corner) => pointRotateRads(corner, center, angle)); return corners.map((corner) => pointRotateRads(corner, center, angle));
} }
@@ -688,24 +691,25 @@ export const isBindableElementInsideOtherBindable = (
const rx = width / 2; const rx = width / 2;
const ry = height / 2; const ry = height / 2;
const corners: GlobalPoint[] = [ const corners: GlobalPoint[] = [
pointFrom(cx, cy - ry), // top pointFrom(cx, cy - ry - offset), // top
pointFrom(cx + rx, cy), // right pointFrom(cx + rx + offset, cy), // right
pointFrom(cx, cy + ry), // bottom pointFrom(cx, cy + ry + offset), // bottom
pointFrom(cx - rx, cy), // left pointFrom(cx - rx - offset, cy), // left
]; ];
return corners.map((corner) => pointRotateRads(corner, center, angle)); return corners.map((corner) => pointRotateRads(corner, center, angle));
} }
// Rectangle and other rectangular shapes (image, text, etc.) // Rectangle and other rectangular shapes (image, text, etc.)
const corners: GlobalPoint[] = [ const corners: GlobalPoint[] = [
pointFrom(x, y), // top-left pointFrom(x - offset, y - offset), // top-left
pointFrom(x + width, y), // top-right pointFrom(x + width + offset, y - offset), // top-right
pointFrom(x + width, y + height), // bottom-right pointFrom(x + width + offset, y + height + offset), // bottom-right
pointFrom(x, y + height), // bottom-left pointFrom(x - offset, y + height + offset), // bottom-left
]; ];
return corners.map((corner) => pointRotateRads(corner, center, angle)); return corners.map((corner) => pointRotateRads(corner, center, angle));
}; };
const innerCorners = getCornerPoints(innerElement); const offset = Math.max(innerElement.width, innerElement.height) / 20; // 5% offset
const innerCorners = getCornerPoints(innerElement, offset);
// Check if all corner points of the inner element are inside the outer element // Check if all corner points of the inner element are inside the outer element
return innerCorners.every((corner) => return innerCorners.every((corner) =>