Fix collision check for rectangles and rendering of binding area (#2221)

src/element/collision.ts

@@ -199,11 +199,10 @@ const distanceToRectangle = (
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
-  const nearSide =
-    GAPoint.distanceToLine(pointRel, GALine.vector(hwidth, hheight)) > 0
-      ? GALine.equation(0, 1, -hheight)
-      : GALine.equation(1, 0, -hwidth);
-  return GAPoint.distanceToLine(pointRel, nearSide);
+  return Math.max(
+    GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)),
+    GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)),
+  );
 };
 
 const distanceToDiamond = (

src/renderer/renderScene.ts

@@ -679,7 +679,7 @@ const renderBindingHighlightForBindableElement = (
   const strokeOffset = 4;
   context.strokeStyle = "rgba(0,0,0,.05)";
   context.lineWidth = threshold - strokeOffset;
-  const padding = strokeOffset + threshold / 2;
+  const padding = strokeOffset / 2 + threshold / 2;
 
   switch (element.type) {
     case "rectangle":