From 2d6219f3994c5fda141170d3363f7cac1b2ef795 Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Fri, 2 May 2025 18:19:10 +0200 Subject: [PATCH] Make ellipses binding highlights precise as well --- .../excalidraw/renderer/interactiveScene.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 36e93fd4c0..8c5f58ea17 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -231,6 +231,9 @@ const drawHighlightForRectWithRotation = ( drawCatmullRomQuadraticApprox(context, topLeftApprox); } + // Counter-clockwise for the cutout in the middle. We need to have an "inverse + // mask" on a filled shape for the diamond highlight, because stroking creates + // sharp inset edges on line joins < 90 degrees. { const topLeftApprox = offsetQuadraticBezier( pointFrom(0 + radius, 0), @@ -485,13 +488,7 @@ const renderBindingHighlightForBindableElement = ( context.strokeStyle = "rgba(0,0,0,.05)"; context.fillStyle = "rgba(0,0,0,.05)"; - // When zooming out, make line width greater for visibility - context.lineWidth = maxBindingGap( - element, - element.width, - element.height, - zoom, - ); + // To ensure the binding highlight doesn't overlap the element itself const padding = maxBindingGap(element, element.width, element.height, zoom); @@ -509,10 +506,14 @@ const renderBindingHighlightForBindableElement = ( drawHighlightForDiamondWithRotation(context, padding, element); break; case "ellipse": + context.lineWidth = + maxBindingGap(element, element.width, element.height, zoom) - + FIXED_BINDING_DISTANCE; + strokeEllipseWithRotation( context, - width + padding * 2, - height + padding * 2, + width + padding + FIXED_BINDING_DISTANCE, + height + padding + FIXED_BINDING_DISTANCE, x1 + width / 2, y1 + height / 2, element.angle,