marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-14 17:54:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

shorten focus point diagonal helpers to fix corner binding cases

Browse Source
This commit is contained in:
dwelle
2025-11-11 23:15:38 +01:00
parent 765b36feef
commit c8b832b0e1
2 changed files with 520 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
packages/element/src/utils.ts
View File

@@ -489,66 +489,82 @@ const getDiagonalsForBindableElement = (
element: ExcalidrawElement, element: ExcalidrawElement,
elementsMap: ElementsMap, elementsMap: ElementsMap,
) => { ) => {
// for rectangles, shrink the diagonals a bit because there's something
// going on with the focus points around the corners. Ask Mark for details.
const OFFSET_PX = element.type === "rectangle" ? 15 : 0;
const shrinkSegment = (seg: LineSegment<GlobalPoint>) => {
const v = vectorNormalize(vectorFromPoint(seg[1], seg[0]));
const offset = vectorScale(v, OFFSET_PX);
return lineSegment<GlobalPoint>(
pointTranslate(seg[0], offset),
pointTranslate(seg[1], vectorScale(offset, -1)),
);
};
const center = elementCenterPoint(element, elementsMap); const center = elementCenterPoint(element, elementsMap);
const diagonalOne = isRectangularElement(element) const diagonalOne = shrinkSegment(
? lineSegment<GlobalPoint>( isRectangularElement(element)
pointRotateRads( ? lineSegment<GlobalPoint>(
pointFrom<GlobalPoint>(element.x, element.y), pointRotateRads(
center, pointFrom<GlobalPoint>(element.x, element.y),
element.angle, center,
), element.angle,
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width,
element.y + element.height,
), ),
center, pointRotateRads(
element.angle, pointFrom<GlobalPoint>(
), element.x + element.width,
) element.y + element.height,
: lineSegment<GlobalPoint>( ),
pointRotateRads( center,
pointFrom<GlobalPoint>(element.x + element.width / 2, element.y), element.angle,
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width / 2,
element.y + element.height,
), ),
center, )
element.angle, : lineSegment<GlobalPoint>(
), pointRotateRads(
); pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
const diagonalTwo = isRectangularElement(element) center,
? lineSegment<GlobalPoint>( element.angle,
pointRotateRads( ),
pointFrom<GlobalPoint>(element.x + element.width, element.y), pointRotateRads(
center, pointFrom<GlobalPoint>(
element.angle, element.x + element.width / 2,
), element.y + element.height,
pointRotateRads( ),
pointFrom<GlobalPoint>(element.x, element.y + element.height), center,
center, element.angle,
element.angle,
),
)
: lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width,
element.y + element.height / 2,
), ),
center,
element.angle,
), ),
); );
const diagonalTwo = shrinkSegment(
isRectangularElement(element)
? lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x + element.width, element.y),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y + element.height),
center,
element.angle,
),
)
: lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width,
element.y + element.height / 2,
),
center,
element.angle,
),
),
);
return [diagonalOne, diagonalTwo]; return [diagonalOne, diagonalTwo];
}; };

868
packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff