fix: Avoid adjusting a line connection when it's not on the outline

- Vertices are now able to connect to shapes from anywhere

src/composables/lineSnapping.spec.ts

@@ -14,6 +14,7 @@ import { newShapeComposite } from "./shapeComposite";
 import { TextShape } from "../shapes/text";
 import { TwoSidedArrowShape } from "../shapes/twoSidedArrow";
 import { newShapeSnapping } from "./shapeSnapping";
+import { RoundedRectangleShape } from "../shapes/polygons/roundedRectangle";
 
 describe("newLineSnapping", () => {
   describe("testConnection", () => {
@@ -819,13 +820,13 @@ describe("patchLinesConnectedToShapeOutline", () => {
     });
   });
 
-  test("should reconnect lines to the outline of the shape: rectangle -> star", () => {
+  test("should reconnect lines to the outline of the shape: rectangle -> two_sided_arrow", () => {
     const arrow = createShape<TwoSidedArrowShape>(getCommonStruct, "two_sided_arrow", {
       id: "a",
       width: 100,
       height: 50,
     });
-    const shapeComposite = newShapeComposite({ shapes: [line, arrow], getStruct: getCommonStruct });
+    const shapeComposite = newShapeComposite({ shapes: [line, shapeA], getStruct: getCommonStruct });
     const res = patchLinesConnectedToShapeOutline(shapeComposite, arrow);
     expect(res).toEqual({
       line: {
@@ -875,6 +876,30 @@ describe("patchLinesConnectedToShapeOutline", () => {
     expect(res).toEqual({});
   });
 
+  test("should ignore connections that are not on the outline", () => {
+    const shapeB = createShape<RoundedRectangleShape>(getCommonStruct, "rounded_rectangle", {
+      id: "b",
+      p: { x: 0, y: 0 },
+      width: 100,
+      height: 100,
+      rx: 10,
+      ry: 10,
+    });
+    const lineB = createShape<LineShape>(getCommonStruct, "line", {
+      id: "line_b",
+      p: { x: -50, y: -50 },
+      q: { x: 0, y: 0 },
+      qConnection: { id: shapeB.id, rate: { x: 0, y: 0 } },
+    });
+    const shapeComposite = newShapeComposite({ shapes: [lineB, shapeB], getStruct: getCommonStruct });
+    const res = patchLinesConnectedToShapeOutline(shapeComposite, {
+      ...shapeB,
+      rx: 20,
+      ry: 20,
+    } as RoundedRectangleShape);
+    expect(res).toEqual({});
+  });
+
   test("should ignore connections unrelated to the shape", () => {
     const shapeComposite = newShapeComposite({ shapes: [line, shapeA], getStruct: getCommonStruct });
     const res = patchLinesConnectedToShapeOutline(shapeComposite, { ...shapeA, id: "b" });

src/composables/lineSnapping.ts

@@ -21,6 +21,7 @@ import {
   extendSegment,
   getClosestPointTo,
   getD2,
+  getLocationFromRateOnRectPath,
   isRectOverlappedH,
   isRectOverlappedV,
   isSameValue,
@@ -553,10 +554,8 @@ function patchLineConnectedToShapeOutline(
 ): Partial<LineShape> {
   const pConnection = line.pConnection;
   const qConnection = line.qConnection;
-  const shouldCheckP =
-    pConnection && pConnection.id === shape.id && !isConnectedToCenter(pConnection) && !pConnection.optimized;
-  const shouldCheckQ =
-    qConnection && qConnection.id === shape.id && !isConnectedToCenter(qConnection) && !qConnection.optimized;
+  const shouldCheckP = shouldReconnectToOutline(shapeComposite, shape.id, pConnection);
+  const shouldCheckQ = shouldReconnectToOutline(shapeComposite, shape.id, qConnection);
   if (!shouldCheckP && !shouldCheckQ) return {};
 
   const points = getLinePath(line);
@@ -586,6 +585,24 @@ function patchLineConnectedToShapeOutline(
   return ret;
 }
 
+function shouldReconnectToOutline(
+  shapeComposite: ShapeComposite,
+  shapeId: string,
+  connection?: ConnectionPoint,
+): connection is ConnectionPoint {
+  if (connection?.id !== shapeId) return false;
+  if (isConnectedToCenter(connection) || connection.optimized) return false;
+
+  // Check if the connection point is on the outline.
+  const shape = shapeComposite.shapeMap[shapeId];
+  const rectPath = shapeComposite.getLocalRectPolygon(shape);
+  const p = getLocationFromRateOnRectPath(rectPath, shape.rotation, connection.rate);
+  // Set the threshold a bit loose.
+  // Whether the connection should be reconnected or not isn't always obvious either way.
+  const closestOutline = getClosestOutline(shapeComposite.getShapeStruct, shape, p, 0.01);
+  return !!closestOutline;
+}
+
 /**
  * Returns the closest intersection on the segment.
  * - Picks the closest one to the original point when there're multiple candidates.