shorten focus point diagonal helpers to fix corner binding cases

packages/element/src/utils.ts

@@ -489,8 +489,21 @@ const getDiagonalsForBindableElement = (
   element: ExcalidrawElement,
   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 diagonalOne = isRectangularElement(element)
+  const diagonalOne = shrinkSegment(
+    isRectangularElement(element)
       ? lineSegment<GlobalPoint>(
           pointRotateRads(
             pointFrom<GlobalPoint>(element.x, element.y),
@@ -520,8 +533,10 @@ const getDiagonalsForBindableElement = (
             center,
             element.angle,
           ),
+        ),
   );
-  const diagonalTwo = isRectangularElement(element)
+  const diagonalTwo = shrinkSegment(
+    isRectangularElement(element)
       ? lineSegment<GlobalPoint>(
           pointRotateRads(
             pointFrom<GlobalPoint>(element.x + element.width, element.y),
@@ -548,6 +563,7 @@ const getDiagonalsForBindableElement = (
             center,
             element.angle,
           ),
+        ),
   );
 
   return [diagonalOne, diagonalTwo];