[skip ci] fix rectanguloid intersection box

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/excalidraw/element/binding.ts

@@ -593,7 +593,7 @@ const calculateFocusAndGap = (
   );
   return {
     focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint),
-    gap: FIXED_BINDING_DISTANCE,
+    gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint)),
   };
 };
 

packages/excalidraw/element/collision.ts

@@ -212,62 +212,88 @@ const intersectRectanguloidWithLine = (
     -element.angle as Radians,
   );
   const roundness = getCornerRadius(
-    Math.min(element.width * offset, element.height * offset),
+    Math.min(element.width, element.height),
     element,
   );
 
-  const sides = [
+  const top = lineSegment<GlobalPoint>(
-    lineSegment<GlobalPoint>(
     pointFrom<GlobalPoint>(r[0][0] + roundness, r[0][1]),
     pointFrom<GlobalPoint>(r[1][0] - roundness, r[0][1]),
-    ), // TOP
+  );
-    lineSegment<GlobalPoint>(
+  const right = lineSegment<GlobalPoint>(
     pointFrom<GlobalPoint>(r[1][0], r[0][1] + roundness),
     pointFrom<GlobalPoint>(r[1][0], r[1][1] - roundness),
-    ), // RIGHT
+  );
-    lineSegment<GlobalPoint>(
+  const bottom = lineSegment<GlobalPoint>(
     pointFrom<GlobalPoint>(r[0][0] + roundness, r[1][1]),
     pointFrom<GlobalPoint>(r[1][0] - roundness, r[1][1]),
-    ), // BOTTOM
+  );
-    lineSegment<GlobalPoint>(
+  const left = lineSegment<GlobalPoint>(
     pointFrom<GlobalPoint>(r[0][0], r[1][1] - roundness),
     pointFrom<GlobalPoint>(r[0][0], r[0][1] + roundness),
-    ), // LEFT
+  );
-  ];
+  const sides = [top, right, bottom, left];
   const corners =
     roundness > 0
       ? [
-          arc<GlobalPoint>(
+          curve(
-            pointFrom(r[0][0] + roundness, r[0][1] + roundness),
+            left[1],
-            roundness,
+            pointFrom(
-            Math.PI as Radians,
+              left[1][0] + (2 / 3) * (r[0][0] - left[1][0]),
-            ((3 / 2) * Math.PI) as Radians,
+              left[1][1] + (2 / 3) * (r[0][1] - left[1][1]),
+            ),
+            pointFrom(
+              top[0][0] + (2 / 3) * (r[0][0] - top[0][0]),
+              top[0][1] + (2 / 3) * (r[0][1] - top[0][1]),
+            ),
+            top[0],
           ), // TOP LEFT
-          arc<GlobalPoint>(
+          curve(
-            pointFrom(r[1][0] - roundness, r[0][1] + roundness),
+            top[1],
-            roundness,
+            pointFrom(
-            ((3 / 2) * Math.PI) as Radians,
+              top[1][0] + (2 / 3) * (r[1][0] - top[1][0]),
-            0 as Radians,
+              top[1][1] + (2 / 3) * (r[0][1] - top[1][1]),
+            ),
+            pointFrom(
+              right[0][0] + (2 / 3) * (r[1][0] - right[0][0]),
+              right[0][1] + (2 / 3) * (r[0][1] - right[0][1]),
+            ),
+            right[0],
           ), // TOP RIGHT
-          arc<GlobalPoint>(
+          curve(
-            pointFrom(r[1][0] - roundness, r[1][1] - roundness),
+            right[1],
-            roundness,
+            pointFrom(
-            0 as Radians,
+              right[1][0] + (2 / 3) * (r[1][0] - right[1][0]),
-            ((1 / 2) * Math.PI) as Radians,
+              right[1][1] + (2 / 3) * (r[1][1] - right[1][1]),
+            ),
+            pointFrom(
+              bottom[1][0] + (2 / 3) * (r[1][0] - bottom[1][0]),
+              bottom[1][1] + (2 / 3) * (r[1][1] - bottom[1][1]),
+            ),
+            bottom[1],
           ), // BOTTOM RIGHT
-          arc<GlobalPoint>(
+          curve(
-            pointFrom(r[0][0] + roundness, r[1][1] - roundness),
+            bottom[0],
-            roundness,
+            pointFrom(
-            ((1 / 2) * Math.PI) as Radians,
+              bottom[0][0] + (2 / 3) * (r[0][0] - bottom[0][0]),
-            Math.PI as Radians, // BOTTOM LEFT
+              bottom[0][1] + (2 / 3) * (r[1][1] - bottom[0][1]),
+            ),
+            pointFrom(
+              left[0][0] + (2 / 3) * (r[0][0] - left[0][0]),
+              left[0][1] + (2 / 3) * (r[1][1] - left[0][1]),
             ),
+            left[0],
+          ), // BOTTOM LEFT
         ]
       : [];
 
-  // debugClear();
+  debugClear();
-  // sides.forEach((s) => debugDrawLine(s, { color: "red", permanent: true }));
+  sides.forEach((s) => debugDrawLine(s, { color: "red", permanent: true }));
-  // corners.forEach((s) => debugDrawArc(s, { color: "green", permanent: true }));
+  corners.forEach((s) =>
-  // debugDrawLine(line(rotatedA, rotatedB), { color: "blue", permanent: true });
+    debugDrawCubicBezier(s, { color: "green", permanent: true }),
+  );
+  debugDrawLine(line(rotatedA, rotatedB), { color: "blue", permanent: true });
+  //debugDrawPoint(bottom[0], { color: "white", permanent: true });
 
   const sideIntersections: GlobalPoint[] = sides
     .map((s) =>
@@ -277,7 +303,7 @@ const intersectRectanguloidWithLine = (
     .map((j) => pointRotateRads<GlobalPoint>(j!, center, element.angle));
 
   const cornerIntersections: GlobalPoint[] = corners
-    .flatMap((t) => arcLineInterceptPoints(t, line(rotatedA, rotatedB)))
+    .flatMap((t) => curveIntersectLine(t, line(rotatedA, rotatedB)))
     .filter((i) => i != null)
     .map((j) => pointRotateRads(j, center, element.angle));