diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index 812b6cb310..c018424bd8 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -951,7 +951,6 @@ export const bindPointToSnapToElementOutline = ( otherPoint, ), ), - 0.1, )[0]; } else { intersection = intersectElementWithLineSegment( @@ -1116,6 +1115,17 @@ export const avoidRectangularCorner = ( ); } + // Break up explicit border bindings to have better elbow arrow routing + if (p[0] === element.x) { + return pointFrom(p[0] - FIXED_BINDING_DISTANCE, p[1]); + } else if (p[0] === element.x + element.width) { + return pointFrom(p[0] + FIXED_BINDING_DISTANCE, p[1]); + } else if (p[1] === element.y) { + return pointFrom(p[0], p[1] - FIXED_BINDING_DISTANCE); + } else if (p[1] === element.y + element.height) { + return pointFrom(p[0], p[1] + FIXED_BINDING_DISTANCE); + } + return p; }; diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts index aabcadd1dc..54b6966205 100644 --- a/packages/element/src/elbowArrow.ts +++ b/packages/element/src/elbowArrow.ts @@ -391,6 +391,10 @@ const handleSegmentRelease = ( null, ); + if (!restoredPoints) { + return {}; + } + const nextPoints: GlobalPoint[] = []; // First part of the arrow are the old points @@ -2181,16 +2185,11 @@ const normalizeArrowElementUpdate = ( nextFixedSegments: readonly FixedSegment[] | null, startIsSpecial?: ExcalidrawElbowArrowElement["startIsSpecial"], endIsSpecial?: ExcalidrawElbowArrowElement["startIsSpecial"], -): { - points: LocalPoint[]; - x: number; - y: number; - width: number; - height: number; - fixedSegments: readonly FixedSegment[] | null; - startIsSpecial?: ExcalidrawElbowArrowElement["startIsSpecial"]; - endIsSpecial?: ExcalidrawElbowArrowElement["startIsSpecial"]; -} => { +): ElementUpdate => { + if (global.length === 0) { + return {}; + } + const offsetX = global[0][0]; const offsetY = global[0][1]; let points = global.map((p) => diff --git a/packages/element/tests/elbowArrow.test.tsx b/packages/element/tests/elbowArrow.test.tsx index 334c6c3d29..e7e38d7e6b 100644 --- a/packages/element/tests/elbowArrow.test.tsx +++ b/packages/element/tests/elbowArrow.test.tsx @@ -78,9 +78,9 @@ describe("elbow arrow segment move", () => { expect(arrow.points).toCloselyEqualPoints([ [0, 0], - [109.92, 0], - [109.92, 200], - [189.85, 200], + [110, 0], + [110, 200], + [190, 200], ]); mouse.reset(); @@ -89,9 +89,9 @@ describe("elbow arrow segment move", () => { expect(arrow.points).toCloselyEqualPoints([ [0, 0], - [109.92, 0], - [109.92, 200], - [189.85, 200], + [110, 0], + [110, 200], + [190, 200], ]); }); @@ -201,9 +201,9 @@ describe("elbow arrow routing", () => { expect(arrow.points).toCloselyEqualPoints([ [0, 0], - [44.9292, 0], - [44.9292, 200], - [89.8585, 200], + [45, 0], + [45, 200], + [90, 200], ]); }); }); @@ -255,9 +255,9 @@ describe("elbow arrow ui", () => { expect(arrow.elbowed).toBe(true); expect(arrow.points).toCloselyEqualPoints([ [0, 0], - [44.92, 0], - [44.92, 200], - [89.85, 200], + [45, 0], + [45, 200], + [90, 200], ]); }); @@ -297,9 +297,9 @@ describe("elbow arrow ui", () => { expect(arrow.points).toCloselyEqualPoints([ [0, 0], - [34.7084, 0], - [34.7084, 164.6246], - [104.333, 164.6246], + [34.7791, 0], + [34.7791, 164.67], + [102.931, 164.67], ]); }); @@ -353,9 +353,9 @@ describe("elbow arrow ui", () => { expect(duplicatedArrow.elbowed).toBe(true); expect(duplicatedArrow.points).toCloselyEqualPoints([ [0, 0], - [44.92, 0], - [44.92, 200], - [89.85, 200], + [45, 0], + [45, 200], + [90, 200], ]); expect(arrow.startBinding).not.toBe(null); expect(arrow.endBinding).not.toBe(null); @@ -408,8 +408,8 @@ describe("elbow arrow ui", () => { expect(duplicatedArrow.points).toCloselyEqualPoints([ [0, 0], [0, 100], - [89.85, 100], - [89.85, 200], + [90, 100], + [90, 200], ]); }); });