@excalidraw/excalidraw 0.18.0-rc.3 → 0.18.0-rc.5

package/dist/dev/{chunk-CI27YPGF.js → chunk-UGZAZPWM.js}

@@ -745,6 +745,9 @@ function vectorMagnitude(v) {
 }
 var vectorNormalize = (v) => {
   const m = vectorMagnitude(v);
+  if (m === 0) {
+    return vector(0, 0);
+  }
   return vector(v[0] / m, v[1] / m);
 };
 
@@ -758,15 +761,15 @@ function pointFromArray(numberArray) {
 function pointFromPair(pair) {
   return pair;
 }
-function pointFromVector(v) {
-  return v;
+function pointFromVector(v, offset = pointFrom(0, 0)) {
+  return pointFrom(offset[0] + v[0], offset[1] + v[1]);
 }
 function isPoint(p) {
   return Array.isArray(p) && p.length === 2 && typeof p[0] === "number" && !isNaN(p[0]) && typeof p[1] === "number" && !isNaN(p[1]);
 }
 function pointsEqual(a, b) {
-  const abs2 = Math.abs;
-  return abs2(a[0] - b[0]) < PRECISION && abs2(a[1] - b[1]) < PRECISION;
+  const abs = Math.abs;
+  return abs(a[0] - b[0]) < PRECISION && abs(a[1] - b[1]) < PRECISION;
 }
 function pointRotateRads([x, y], [cx, cy], angle) {
   return pointFrom(
@@ -793,57 +796,47 @@ var isPointWithinBounds = (p, q, r) => {
   return q[0] <= Math.max(p[0], r[0]) && q[0] >= Math.min(p[0], r[0]) && q[1] <= Math.max(p[1], r[1]) && q[1] >= Math.min(p[1], r[1]);
 };
 
-// ../math/curve.ts
-function curve(a, b, c, d) {
-  return [a, b, c, d];
+// ../math/line.ts
+function line(a, b) {
+  return [a, b];
+}
+function linesIntersectAt(a, b) {
+  const A1 = a[1][1] - a[0][1];
+  const B1 = a[0][0] - a[1][0];
+  const A2 = b[1][1] - b[0][1];
+  const B2 = b[0][0] - b[1][0];
+  const D = A1 * B2 - A2 * B1;
+  if (D !== 0) {
+    const C1 = A1 * a[0][0] + B1 * a[0][1];
+    const C2 = A2 * b[0][0] + B2 * b[0][1];
+    return pointFrom((C1 * B2 - C2 * B1) / D, (A1 * C2 - A2 * C1) / D);
+  }
+  return null;
 }
 
 // ../math/segment.ts
 function lineSegment(a, b) {
   return [a, b];
 }
-var segmentsIntersectAt = (a, b) => {
-  const a0 = vectorFromPoint(a[0]);
-  const a1 = vectorFromPoint(a[1]);
-  const b0 = vectorFromPoint(b[0]);
-  const b1 = vectorFromPoint(b[1]);
-  const r = vectorSubtract(a1, a0);
-  const s = vectorSubtract(b1, b0);
-  const denominator = vectorCross(r, s);
-  if (denominator === 0) {
-    return null;
-  }
-  const i = vectorSubtract(vectorFromPoint(b[0]), vectorFromPoint(a[0]));
-  const u = vectorCross(i, r) / denominator;
-  const t = vectorCross(i, s) / denominator;
-  if (u === 0) {
-    return null;
-  }
-  const p = vectorAdd(a0, vectorScale(r, t));
-  if (t >= 0 && t < 1 && u >= 0 && u < 1) {
-    return pointFromVector(p);
-  }
-  return null;
-};
-var pointOnLineSegment = (point2, line, threshold = PRECISION) => {
-  const distance3 = distanceToLineSegment(point2, line);
-  if (distance3 === 0) {
+var pointOnLineSegment = (point, line2, threshold = PRECISION) => {
+  const distance2 = distanceToLineSegment(point, line2);
+  if (distance2 === 0) {
     return true;
   }
-  return distance3 < threshold;
+  return distance2 < threshold;
 };
-var distanceToLineSegment = (point2, line) => {
-  const [x, y] = point2;
-  const [[x1, y1], [x2, y2]] = line;
+var distanceToLineSegment = (point, line2) => {
+  const [x, y] = point;
+  const [[x1, y1], [x2, y2]] = line2;
   const A = x - x1;
   const B = y - y1;
   const C = x2 - x1;
   const D = y2 - y1;
-  const dot2 = A * C + B * D;
+  const dot = A * C + B * D;
   const len_sq = C * C + D * D;
   let param = -1;
   if (len_sq !== 0) {
-    param = dot2 / len_sq;
+    param = dot / len_sq;
   }
   let xx;
   let yy;
@@ -861,6 +854,179 @@ var distanceToLineSegment = (point2, line) => {
   const dy = y - yy;
   return Math.sqrt(dx * dx + dy * dy);
 };
+function lineSegmentIntersectionPoints(l, s) {
+  const candidate = linesIntersectAt(line(l[0], l[1]), line(s[0], s[1]));
+  if (!candidate || !pointOnLineSegment(candidate, s) || !pointOnLineSegment(candidate, l)) {
+    return null;
+  }
+  return candidate;
+}
+
+// ../math/rectangle.ts
+function rectangle(topLeft, bottomRight) {
+  return [topLeft, bottomRight];
+}
+function rectangleIntersectLineSegment(r, l) {
+  return [
+    lineSegment(r[0], pointFrom(r[1][0], r[0][1])),
+    lineSegment(pointFrom(r[1][0], r[0][1]), r[1]),
+    lineSegment(r[1], pointFrom(r[0][0], r[1][1])),
+    lineSegment(pointFrom(r[0][0], r[1][1]), r[0])
+  ].map((s) => lineSegmentIntersectionPoints(l, s)).filter((i) => !!i);
+}
+
+// ../math/curve.ts
+function curve(a, b, c, d) {
+  return [a, b, c, d];
+}
+function gradient(f, t0, s0, delta = 1e-6) {
+  return [
+    (f(t0 + delta, s0) - f(t0 - delta, s0)) / (2 * delta),
+    (f(t0, s0 + delta) - f(t0, s0 - delta)) / (2 * delta)
+  ];
+}
+function solve(f, t0, s0, tolerance = 1e-3, iterLimit = 10) {
+  let error = Infinity;
+  let iter = 0;
+  while (error >= tolerance) {
+    if (iter >= iterLimit) {
+      return null;
+    }
+    const y0 = f(t0, s0);
+    const jacobian = [
+      gradient((t, s) => f(t, s)[0], t0, s0),
+      gradient((t, s) => f(t, s)[1], t0, s0)
+    ];
+    const b = [[-y0[0]], [-y0[1]]];
+    const det = jacobian[0][0] * jacobian[1][1] - jacobian[0][1] * jacobian[1][0];
+    if (det === 0) {
+      return null;
+    }
+    const iJ = [
+      [jacobian[1][1] / det, -jacobian[0][1] / det],
+      [-jacobian[1][0] / det, jacobian[0][0] / det]
+    ];
+    const h = [
+      [iJ[0][0] * b[0][0] + iJ[0][1] * b[1][0]],
+      [iJ[1][0] * b[0][0] + iJ[1][1] * b[1][0]]
+    ];
+    t0 = t0 + h[0][0];
+    s0 = s0 + h[1][0];
+    const [tErr, sErr] = f(t0, s0);
+    error = Math.max(Math.abs(tErr), Math.abs(sErr));
+    iter += 1;
+  }
+  return [t0, s0];
+}
+var bezierEquation = (c, t) => pointFrom(
+  (1 - t) ** 3 * c[0][0] + 3 * (1 - t) ** 2 * t * c[1][0] + 3 * (1 - t) * t ** 2 * c[2][0] + t ** 3 * c[3][0],
+  (1 - t) ** 3 * c[0][1] + 3 * (1 - t) ** 2 * t * c[1][1] + 3 * (1 - t) * t ** 2 * c[2][1] + t ** 3 * c[3][1]
+);
+function curveIntersectLineSegment(c, l) {
+  const bounds = curveBounds(c);
+  if (rectangleIntersectLineSegment(
+    rectangle(
+      pointFrom(bounds[0], bounds[1]),
+      pointFrom(bounds[2], bounds[3])
+    ),
+    l
+  ).length === 0) {
+    return [];
+  }
+  const line2 = (s) => pointFrom(
+    l[0][0] + s * (l[1][0] - l[0][0]),
+    l[0][1] + s * (l[1][1] - l[0][1])
+  );
+  const initial_guesses = [
+    [0.5, 0],
+    [0.2, 0],
+    [0.8, 0]
+  ];
+  const calculate = ([t0, s0]) => {
+    const solution2 = solve(
+      (t2, s2) => {
+        const bezier_point = bezierEquation(c, t2);
+        const line_point = line2(s2);
+        return [
+          bezier_point[0] - line_point[0],
+          bezier_point[1] - line_point[1]
+        ];
+      },
+      t0,
+      s0
+    );
+    if (!solution2) {
+      return null;
+    }
+    const [t, s] = solution2;
+    if (t < 0 || t > 1 || s < 0 || s > 1) {
+      return null;
+    }
+    return bezierEquation(c, t);
+  };
+  let solution = calculate(initial_guesses[0]);
+  if (solution) {
+    return [solution];
+  }
+  solution = calculate(initial_guesses[1]);
+  if (solution) {
+    return [solution];
+  }
+  solution = calculate(initial_guesses[2]);
+  if (solution) {
+    return [solution];
+  }
+  return [];
+}
+function curveClosestPoint(c, p, tolerance = 1e-3) {
+  const localMinimum = (min, max, f, e = tolerance) => {
+    let m = min;
+    let n = max;
+    let k;
+    while (n - m > e) {
+      k = (n + m) / 2;
+      if (f(k - e) < f(k + e)) {
+        n = k;
+      } else {
+        m = k;
+      }
+    }
+    return k;
+  };
+  const maxSteps = 30;
+  let closestStep = 0;
+  for (let min = Infinity, step = 0; step < maxSteps; step++) {
+    const d = pointDistance(p, bezierEquation(c, step / maxSteps));
+    if (d < min) {
+      min = d;
+      closestStep = step;
+    }
+  }
+  const t0 = Math.max((closestStep - 1) / maxSteps, 0);
+  const t1 = Math.min((closestStep + 1) / maxSteps, 1);
+  const solution = localMinimum(
+    t0,
+    t1,
+    (t) => pointDistance(p, bezierEquation(c, t))
+  );
+  if (!solution) {
+    return null;
+  }
+  return bezierEquation(c, solution);
+}
+function curvePointDistance(c, p) {
+  const closest = curveClosestPoint(c, p);
+  if (!closest) {
+    return 0;
+  }
+  return pointDistance(p, closest);
+}
+function curveBounds(c) {
+  const [P0, P1, P2, P3] = c;
+  const x = [P0[0], P1[0], P2[0], P3[0]];
+  const y = [P0[1], P1[1], P2[1], P3[1]];
+  return [Math.min(...x), Math.min(...y), Math.max(...x), Math.max(...y)];
+}
 
 // ../math/polygon.ts
 function polygon(...points) {
@@ -869,9 +1035,9 @@ function polygon(...points) {
 function polygonFromPoints(points) {
   return polygonClose(points);
 }
-var polygonIncludesPoint = (point2, polygon2) => {
-  const x = point2[0];
-  const y = point2[1];
+var polygonIncludesPoint = (point, polygon2) => {
+  const x = point[0];
+  const y = point[1];
   let inside = false;
   for (let i = 0, j = polygon2.length - 1; i < polygon2.length; j = i++) {
     const xi = polygon2[i][0];
@@ -1051,8 +1217,8 @@ var throttleRAF = (fn, opts) => {
 var easeOut = (k) => {
   return 1 - Math.pow(1 - k, 4);
 };
-var easeOutInterpolate = (from3, to, progress) => {
-  return (to - from3) * easeOut(progress) + from3;
+var easeOutInterpolate = (from, to, progress) => {
+  return (to - from) * easeOut(progress) + from;
 };
 var easeToValuesRAF = ({
   fromValues,
@@ -1592,9 +1758,6 @@ var isBindableElement = (element, includeLocked = true) => {
 var isRectanguloidElement = (element) => {
   return element != null && (element.type === "rectangle" || element.type === "diamond" || element.type === "image" || element.type === "iframe" || element.type === "embeddable" || element.type === "frame" || element.type === "magicframe" || element.type === "text" && !element.containerId);
 };
-var isRectangularElement = (element) => {
-  return element != null && (element.type === "rectangle" || element.type === "image" || element.type === "text" || element.type === "iframe" || element.type === "embeddable" || element.type === "frame" || element.type === "magicframe" || element.type === "freedraw");
-};
 var isTextBindableContainer = (element, includeLocked = true) => {
   return element != null && (!element.locked || includeLocked === true) && (element.type === "rectangle" || element.type === "diamond" || element.type === "ellipse" || isArrowElement(element));
 };
@@ -1745,8 +1908,8 @@ var getLineWidth = (text, font) => {
 var getTextWidth = (text, font) => {
   const lines = splitIntoLines(text);
   let width = 0;
-  lines.forEach((line) => {
-    width = Math.max(width, getLineWidth(line, font));
+  lines.forEach((line2) => {
+    width = Math.max(width, getLineWidth(line2, font));
   });
   return width;
 };
@@ -2030,9 +2193,9 @@ var Break = {
     }
   })
 };
-var parseTokens = (line) => {
+var parseTokens = (line2) => {
   const breakLineRegex = getLineBreakRegex();
-  return line.normalize("NFC").split(breakLineRegex).filter(Boolean);
+  return line2.normalize("NFC").split(breakLineRegex).filter(Boolean);
 };
 var wrapText = (text, font, maxWidth) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
@@ -2051,9 +2214,9 @@ var wrapText = (text, font, maxWidth) => {
   }
   return lines.join("\n");
 };
-var wrapLine = (line, font, maxWidth) => {
+var wrapLine = (line2, font, maxWidth) => {
   const lines = [];
-  const tokens = parseTokens(line);
+  const tokens = parseTokens(line2);
   const tokenIterator = tokens[Symbol.iterator]();
   let currentLine = "";
   let currentLineWidth = 0;
@@ -2116,14 +2279,14 @@ var wrapWord = (word, font, maxWidth) => {
   }
   return lines;
 };
-var trimLine = (line, font, maxWidth) => {
-  const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth;
+var trimLine = (line2, font, maxWidth) => {
+  const shouldTrimWhitespaces = getLineWidth(line2, font) > maxWidth;
   if (!shouldTrimWhitespaces) {
-    return line;
+    return line2;
   }
-  let [, trimmedLine, whitespaces] = line.match(/^(.+?)(\s+)$/) ?? [
-    line,
-    line.trimEnd(),
+  let [, trimmedLine, whitespaces] = line2.match(/^(.+?)(\s+)$/) ?? [
+    line2,
+    line2.trimEnd(),
     ""
   ];
   let trimmedLineWidth = getLineWidth(trimmedLine, font);
@@ -7040,38 +7203,8 @@ var getClosedCurveShape = (element, roughShape, startingPoint = pointFrom(0, 0),
     data: polygonFromPoints(polygonPoints)
   };
 };
-var segmentIntersectRectangleElement = (element, segment, gap = 0) => {
-  const bounds = [
-    element.x - gap,
-    element.y - gap,
-    element.x + element.width + gap,
-    element.y + element.height + gap
-  ];
-  const center = pointFrom(
-    (bounds[0] + bounds[2]) / 2,
-    (bounds[1] + bounds[3]) / 2
-  );
-  return [
-    lineSegment(
-      pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle)
-    ),
-    lineSegment(
-      pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle)
-    ),
-    lineSegment(
-      pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle)
-    ),
-    lineSegment(
-      pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle)
-    )
-  ].map((s) => segmentsIntersectAt(segment, s)).filter((i) => !!i);
-};
-var distanceToEllipse = (p, ellipse) => {
-  const { angle, halfWidth, halfHeight, center } = ellipse;
+var distanceToEllipse = (p, ellipse2) => {
+  const { angle, halfWidth, halfHeight, center } = ellipse2;
   const a = halfWidth;
   const b = halfHeight;
   const translatedPoint = vectorAdd(
@@ -7113,11 +7246,11 @@ var distanceToEllipse = (p, ellipse) => {
     pointFrom(minX, minY)
   );
 };
-var pointOnEllipse = (point2, ellipse, threshold = PRECISION) => {
-  return distanceToEllipse(point2, ellipse) <= threshold;
+var pointOnEllipse = (point, ellipse2, threshold = PRECISION) => {
+  return distanceToEllipse(point, ellipse2) <= threshold;
 };
-var pointInEllipse = (p, ellipse) => {
-  const { center, angle, halfWidth, halfHeight } = ellipse;
+var pointInEllipse = (p, ellipse2) => {
+  const { center, angle, halfWidth, halfHeight } = ellipse2;
   const translatedPoint = vectorAdd(
     vectorFromPoint(p),
     vectorScale(vectorFromPoint(center), -1)
@@ -7131,37 +7264,37 @@ var pointInEllipse = (p, ellipse) => {
 };
 
 // ../utils/collision.ts
-var isPointOnShape = (point2, shape, tolerance = 0) => {
+var isPointOnShape = (point, shape, tolerance = 0) => {
   switch (shape.type) {
     case "polygon":
-      return pointOnPolygon(point2, shape.data, tolerance);
+      return pointOnPolygon(point, shape.data, tolerance);
     case "ellipse":
-      return pointOnEllipse(point2, shape.data, tolerance);
+      return pointOnEllipse(point, shape.data, tolerance);
     case "line":
-      return pointOnLineSegment(point2, shape.data, tolerance);
+      return pointOnLineSegment(point, shape.data, tolerance);
     case "polyline":
-      return pointOnPolyline(point2, shape.data, tolerance);
+      return pointOnPolyline(point, shape.data, tolerance);
     case "curve":
-      return pointOnCurve(point2, shape.data, tolerance);
+      return pointOnCurve(point, shape.data, tolerance);
     case "polycurve":
-      return pointOnPolycurve(point2, shape.data, tolerance);
+      return pointOnPolycurve(point, shape.data, tolerance);
     default:
       throw Error(`shape ${shape} is not implemented`);
   }
 };
-var isPointInShape = (point2, shape) => {
+var isPointInShape = (point, shape) => {
   switch (shape.type) {
     case "polygon":
-      return polygonIncludesPoint(point2, shape.data);
+      return polygonIncludesPoint(point, shape.data);
     case "line":
       return false;
     case "curve":
       return false;
     case "ellipse":
-      return pointInEllipse(point2, shape.data);
+      return pointInEllipse(point, shape.data);
     case "polyline": {
       const polygon2 = polygonFromPoints(shape.data.flat());
-      return polygonIncludesPoint(point2, polygon2);
+      return polygonIncludesPoint(point, polygon2);
     }
     case "polycurve": {
       return false;
@@ -7170,36 +7303,409 @@ var isPointInShape = (point2, shape) => {
       throw Error(`shape ${shape} is not implemented`);
   }
 };
-var pointOnPolycurve = (point2, polycurve, tolerance) => {
-  return polycurve.some((curve2) => pointOnCurve(point2, curve2, tolerance));
+var pointOnPolycurve = (point, polycurve, tolerance) => {
+  return polycurve.some((curve2) => pointOnCurve(point, curve2, tolerance));
 };
 var cubicBezierEquation = (curve2) => {
   const [p0, p1, p2, p3] = curve2;
   return (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
 };
 var polyLineFromCurve = (curve2, segments = 10) => {
-  const equation2 = cubicBezierEquation(curve2);
-  let startingPoint = [equation2(0, 0), equation2(0, 1)];
+  const equation = cubicBezierEquation(curve2);
+  let startingPoint = [equation(0, 0), equation(0, 1)];
   const lineSegments = [];
   let t = 0;
   const increment = 1 / segments;
   for (let i = 0; i < segments; i++) {
     t += increment;
     if (t <= 1) {
-      const nextPoint = pointFrom(equation2(t, 0), equation2(t, 1));
+      const nextPoint = pointFrom(equation(t, 0), equation(t, 1));
       lineSegments.push(lineSegment(startingPoint, nextPoint));
       startingPoint = nextPoint;
     }
   }
   return lineSegments;
 };
-var pointOnCurve = (point2, curve2, threshold) => {
-  return pointOnPolyline(point2, polyLineFromCurve(curve2), threshold);
+var pointOnCurve = (point, curve2, threshold) => {
+  return pointOnPolyline(point, polyLineFromCurve(curve2), threshold);
 };
-var pointOnPolyline = (point2, polyline, threshold = 1e-4) => {
-  return polyline.some((line) => pointOnLineSegment(point2, line, threshold));
+var pointOnPolyline = (point, polyline, threshold = 1e-4) => {
+  return polyline.some((line2) => pointOnLineSegment(point, line2, threshold));
 };
 
+// ../math/ellipse.ts
+function ellipse(center, halfWidth, halfHeight) {
+  return {
+    center,
+    halfWidth,
+    halfHeight
+  };
+}
+var ellipseDistanceFromPoint = (p, ellipse2) => {
+  const { halfWidth, halfHeight, center } = ellipse2;
+  const a = halfWidth;
+  const b = halfHeight;
+  const translatedPoint = vectorAdd(
+    vectorFromPoint(p),
+    vectorScale(vectorFromPoint(center), -1)
+  );
+  const px = Math.abs(translatedPoint[0]);
+  const py = Math.abs(translatedPoint[1]);
+  let tx = 0.707;
+  let ty = 0.707;
+  for (let i = 0; i < 3; i++) {
+    const x = a * tx;
+    const y = b * ty;
+    const ex = (a * a - b * b) * tx ** 3 / a;
+    const ey = (b * b - a * a) * ty ** 3 / b;
+    const rx = x - ex;
+    const ry = y - ey;
+    const qx = px - ex;
+    const qy = py - ey;
+    const r = Math.hypot(ry, rx);
+    const q = Math.hypot(qy, qx);
+    tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a));
+    ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b));
+    const t = Math.hypot(ty, tx);
+    tx /= t;
+    ty /= t;
+  }
+  const [minX, minY] = [
+    a * tx * Math.sign(translatedPoint[0]),
+    b * ty * Math.sign(translatedPoint[1])
+  ];
+  return pointDistance(pointFromVector(translatedPoint), pointFrom(minX, minY));
+};
+function ellipseLineIntersectionPoints({ center, halfWidth, halfHeight }, [g, h]) {
+  const [cx, cy] = center;
+  const x1 = g[0] - cx;
+  const y1 = g[1] - cy;
+  const x2 = h[0] - cx;
+  const y2 = h[1] - cy;
+  const a = Math.pow(x2 - x1, 2) / Math.pow(halfWidth, 2) + Math.pow(y2 - y1, 2) / Math.pow(halfHeight, 2);
+  const b = 2 * (x1 * (x2 - x1) / Math.pow(halfWidth, 2) + y1 * (y2 - y1) / Math.pow(halfHeight, 2));
+  const c = Math.pow(x1, 2) / Math.pow(halfWidth, 2) + Math.pow(y1, 2) / Math.pow(halfHeight, 2) - 1;
+  const t1 = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
+  const t2 = (-b - Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
+  const candidates = [
+    pointFrom(x1 + t1 * (x2 - x1) + cx, y1 + t1 * (y2 - y1) + cy),
+    pointFrom(x1 + t2 * (x2 - x1) + cx, y1 + t2 * (y2 - y1) + cy)
+  ].filter((p) => !isNaN(p[0]) && !isNaN(p[1]));
+  if (candidates.length === 2 && pointsEqual(candidates[0], candidates[1])) {
+    return [candidates[0]];
+  }
+  return candidates;
+}
+
+// element/utils.ts
+function deconstructRectanguloidElement(element, offset = 0) {
+  const roundness = getCornerRadius(
+    Math.min(element.width, element.height),
+    element
+  );
+  if (roundness <= 0) {
+    const r2 = rectangle(
+      pointFrom(element.x - offset, element.y - offset),
+      pointFrom(
+        element.x + element.width + offset,
+        element.y + element.height + offset
+      )
+    );
+    const top2 = lineSegment(
+      pointFrom(r2[0][0] + roundness, r2[0][1]),
+      pointFrom(r2[1][0] - roundness, r2[0][1])
+    );
+    const right2 = lineSegment(
+      pointFrom(r2[1][0], r2[0][1] + roundness),
+      pointFrom(r2[1][0], r2[1][1] - roundness)
+    );
+    const bottom2 = lineSegment(
+      pointFrom(r2[0][0] + roundness, r2[1][1]),
+      pointFrom(r2[1][0] - roundness, r2[1][1])
+    );
+    const left2 = lineSegment(
+      pointFrom(r2[0][0], r2[1][1] - roundness),
+      pointFrom(r2[0][0], r2[0][1] + roundness)
+    );
+    const sides2 = [top2, right2, bottom2, left2];
+    return [sides2, []];
+  }
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const r = rectangle(
+    pointFrom(element.x, element.y),
+    pointFrom(element.x + element.width, element.y + element.height)
+  );
+  const top = lineSegment(
+    pointFrom(r[0][0] + roundness, r[0][1]),
+    pointFrom(r[1][0] - roundness, r[0][1])
+  );
+  const right = lineSegment(
+    pointFrom(r[1][0], r[0][1] + roundness),
+    pointFrom(r[1][0], r[1][1] - roundness)
+  );
+  const bottom = lineSegment(
+    pointFrom(r[0][0] + roundness, r[1][1]),
+    pointFrom(r[1][0] - roundness, r[1][1])
+  );
+  const left = lineSegment(
+    pointFrom(r[0][0], r[1][1] - roundness),
+    pointFrom(r[0][0], r[0][1] + roundness)
+  );
+  const offsets = [
+    vectorScale(
+      vectorNormalize(
+        vectorFromPoint(pointFrom(r[0][0] - offset, r[0][1] - offset), center)
+      ),
+      offset
+    ),
+    // TOP LEFT
+    vectorScale(
+      vectorNormalize(
+        vectorFromPoint(pointFrom(r[1][0] + offset, r[0][1] - offset), center)
+      ),
+      offset
+    ),
+    //TOP RIGHT
+    vectorScale(
+      vectorNormalize(
+        vectorFromPoint(pointFrom(r[1][0] + offset, r[1][1] + offset), center)
+      ),
+      offset
+    ),
+    // BOTTOM RIGHT
+    vectorScale(
+      vectorNormalize(
+        vectorFromPoint(pointFrom(r[0][0] - offset, r[1][1] + offset), center)
+      ),
+      offset
+    )
+    // BOTTOM LEFT
+  ];
+  const corners = [
+    curve(
+      pointFromVector(offsets[0], left[1]),
+      pointFromVector(
+        offsets[0],
+        pointFrom(
+          left[1][0] + 2 / 3 * (r[0][0] - left[1][0]),
+          left[1][1] + 2 / 3 * (r[0][1] - left[1][1])
+        )
+      ),
+      pointFromVector(
+        offsets[0],
+        pointFrom(
+          top[0][0] + 2 / 3 * (r[0][0] - top[0][0]),
+          top[0][1] + 2 / 3 * (r[0][1] - top[0][1])
+        )
+      ),
+      pointFromVector(offsets[0], top[0])
+    ),
+    // TOP LEFT
+    curve(
+      pointFromVector(offsets[1], top[1]),
+      pointFromVector(
+        offsets[1],
+        pointFrom(
+          top[1][0] + 2 / 3 * (r[1][0] - top[1][0]),
+          top[1][1] + 2 / 3 * (r[0][1] - top[1][1])
+        )
+      ),
+      pointFromVector(
+        offsets[1],
+        pointFrom(
+          right[0][0] + 2 / 3 * (r[1][0] - right[0][0]),
+          right[0][1] + 2 / 3 * (r[0][1] - right[0][1])
+        )
+      ),
+      pointFromVector(offsets[1], right[0])
+    ),
+    // TOP RIGHT
+    curve(
+      pointFromVector(offsets[2], right[1]),
+      pointFromVector(
+        offsets[2],
+        pointFrom(
+          right[1][0] + 2 / 3 * (r[1][0] - right[1][0]),
+          right[1][1] + 2 / 3 * (r[1][1] - right[1][1])
+        )
+      ),
+      pointFromVector(
+        offsets[2],
+        pointFrom(
+          bottom[1][0] + 2 / 3 * (r[1][0] - bottom[1][0]),
+          bottom[1][1] + 2 / 3 * (r[1][1] - bottom[1][1])
+        )
+      ),
+      pointFromVector(offsets[2], bottom[1])
+    ),
+    // BOTTOM RIGHT
+    curve(
+      pointFromVector(offsets[3], bottom[0]),
+      pointFromVector(
+        offsets[3],
+        pointFrom(
+          bottom[0][0] + 2 / 3 * (r[0][0] - bottom[0][0]),
+          bottom[0][1] + 2 / 3 * (r[1][1] - bottom[0][1])
+        )
+      ),
+      pointFromVector(
+        offsets[3],
+        pointFrom(
+          left[0][0] + 2 / 3 * (r[0][0] - left[0][0]),
+          left[0][1] + 2 / 3 * (r[1][1] - left[0][1])
+        )
+      ),
+      pointFromVector(offsets[3], left[0])
+    )
+    // BOTTOM LEFT
+  ];
+  const sides = [
+    lineSegment(corners[0][3], corners[1][0]),
+    lineSegment(corners[1][3], corners[2][0]),
+    lineSegment(corners[2][3], corners[3][0]),
+    lineSegment(corners[3][3], corners[0][0])
+  ];
+  return [sides, corners];
+}
+function deconstructDiamondElement(element, offset = 0) {
+  const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
+  const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
+  const horizontalRadius = getCornerRadius(Math.abs(rightY - topY), element);
+  if (element.roundness?.type == null) {
+    const [top2, right2, bottom2, left2] = [
+      pointFrom(element.x + topX, element.y + topY - offset),
+      pointFrom(element.x + rightX + offset, element.y + rightY),
+      pointFrom(element.x + bottomX, element.y + bottomY + offset),
+      pointFrom(element.x + leftX - offset, element.y + leftY)
+    ];
+    const topRight = lineSegment(
+      pointFrom(top2[0] + verticalRadius, top2[1] + horizontalRadius),
+      pointFrom(right2[0] - verticalRadius, right2[1] - horizontalRadius)
+    );
+    const bottomRight = lineSegment(
+      pointFrom(right2[0] - verticalRadius, right2[1] + horizontalRadius),
+      pointFrom(bottom2[0] + verticalRadius, bottom2[1] - horizontalRadius)
+    );
+    const bottomLeft = lineSegment(
+      pointFrom(bottom2[0] - verticalRadius, bottom2[1] - horizontalRadius),
+      pointFrom(left2[0] + verticalRadius, left2[1] + horizontalRadius)
+    );
+    const topLeft = lineSegment(
+      pointFrom(left2[0] + verticalRadius, left2[1] - horizontalRadius),
+      pointFrom(top2[0] - verticalRadius, top2[1] + horizontalRadius)
+    );
+    return [[topRight, bottomRight, bottomLeft, topLeft], []];
+  }
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const [top, right, bottom, left] = [
+    pointFrom(element.x + topX, element.y + topY),
+    pointFrom(element.x + rightX, element.y + rightY),
+    pointFrom(element.x + bottomX, element.y + bottomY),
+    pointFrom(element.x + leftX, element.y + leftY)
+  ];
+  const offsets = [
+    vectorScale(vectorNormalize(vectorFromPoint(right, center)), offset),
+    // RIGHT
+    vectorScale(vectorNormalize(vectorFromPoint(bottom, center)), offset),
+    // BOTTOM
+    vectorScale(vectorNormalize(vectorFromPoint(left, center)), offset),
+    // LEFT
+    vectorScale(vectorNormalize(vectorFromPoint(top, center)), offset)
+    // TOP
+  ];
+  const corners = [
+    curve(
+      pointFromVector(
+        offsets[0],
+        pointFrom(
+          right[0] - verticalRadius,
+          right[1] - horizontalRadius
+        )
+      ),
+      pointFromVector(offsets[0], right),
+      pointFromVector(offsets[0], right),
+      pointFromVector(
+        offsets[0],
+        pointFrom(
+          right[0] - verticalRadius,
+          right[1] + horizontalRadius
+        )
+      )
+    ),
+    // RIGHT
+    curve(
+      pointFromVector(
+        offsets[1],
+        pointFrom(
+          bottom[0] + verticalRadius,
+          bottom[1] - horizontalRadius
+        )
+      ),
+      pointFromVector(offsets[1], bottom),
+      pointFromVector(offsets[1], bottom),
+      pointFromVector(
+        offsets[1],
+        pointFrom(
+          bottom[0] - verticalRadius,
+          bottom[1] - horizontalRadius
+        )
+      )
+    ),
+    // BOTTOM
+    curve(
+      pointFromVector(
+        offsets[2],
+        pointFrom(
+          left[0] + verticalRadius,
+          left[1] + horizontalRadius
+        )
+      ),
+      pointFromVector(offsets[2], left),
+      pointFromVector(offsets[2], left),
+      pointFromVector(
+        offsets[2],
+        pointFrom(
+          left[0] + verticalRadius,
+          left[1] - horizontalRadius
+        )
+      )
+    ),
+    // LEFT
+    curve(
+      pointFromVector(
+        offsets[3],
+        pointFrom(
+          top[0] - verticalRadius,
+          top[1] + horizontalRadius
+        )
+      ),
+      pointFromVector(offsets[3], top),
+      pointFromVector(offsets[3], top),
+      pointFromVector(
+        offsets[3],
+        pointFrom(
+          top[0] + verticalRadius,
+          top[1] + horizontalRadius
+        )
+      )
+    )
+    // TOP
+  ];
+  const sides = [
+    lineSegment(corners[0][3], corners[1][0]),
+    lineSegment(corners[1][3], corners[2][0]),
+    lineSegment(corners[2][3], corners[3][0]),
+    lineSegment(corners[3][3], corners[0][0])
+  ];
+  return [sides, corners];
+}
+
 // element/collision.ts
 var shouldTestInside = (element) => {
   if (element.type === "arrow") {
@@ -7258,6 +7764,93 @@ var hitElementBoundingBoxOnly = (hitArgs, elementsMap) => {
 var hitElementBoundText = (x, y, textShape) => {
   return !!textShape && isPointInShape(pointFrom(x, y), textShape);
 };
+var intersectElementWithLineSegment = (element, line2, offset = 0) => {
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      return intersectRectanguloidWithLineSegment(element, line2, offset);
+    case "diamond":
+      return intersectDiamondWithLineSegment(element, line2, offset);
+    case "ellipse":
+      return intersectEllipseWithLineSegment(element, line2, offset);
+    default:
+      throw new Error(`Unimplemented element type '${element.type}'`);
+  }
+};
+var intersectRectanguloidWithLineSegment = (element, l, offset = 0) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const rotatedA = pointRotateRads(
+    l[0],
+    center,
+    -element.angle
+  );
+  const rotatedB = pointRotateRads(
+    l[1],
+    center,
+    -element.angle
+  );
+  const [sides, corners] = deconstructRectanguloidElement(element, offset);
+  return [
+    // Test intersection against the sides, keep only the valid
+    // intersection points and rotate them back to scene space
+    ...sides.map(
+      (s) => lineSegmentIntersectionPoints(
+        lineSegment(rotatedA, rotatedB),
+        s
+      )
+    ).filter((x) => x != null).map((j) => pointRotateRads(j, center, element.angle)),
+    // Test intersection against the corners which are cubic bezier curves,
+    // keep only the valid intersection points and rotate them back to scene
+    // space
+    ...corners.flatMap(
+      (t) => curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB))
+    ).filter((i) => i != null).map((j) => pointRotateRads(j, center, element.angle))
+  ].filter(
+    (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx
+  );
+};
+var intersectDiamondWithLineSegment = (element, l, offset = 0) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const rotatedA = pointRotateRads(l[0], center, -element.angle);
+  const rotatedB = pointRotateRads(l[1], center, -element.angle);
+  const [sides, curves] = deconstructDiamondElement(element, offset);
+  return [
+    ...sides.map(
+      (s) => lineSegmentIntersectionPoints(
+        lineSegment(rotatedA, rotatedB),
+        s
+      )
+    ).filter((p) => p != null).map((p) => pointRotateRads(p, center, element.angle)),
+    ...curves.flatMap(
+      (p) => curveIntersectLineSegment(p, lineSegment(rotatedA, rotatedB))
+    ).filter((p) => p != null).map((p) => pointRotateRads(p, center, element.angle))
+  ].filter(
+    (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx
+  );
+};
+var intersectEllipseWithLineSegment = (element, l, offset = 0) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const rotatedA = pointRotateRads(l[0], center, -element.angle);
+  const rotatedB = pointRotateRads(l[1], center, -element.angle);
+  return ellipseLineIntersectionPoints(
+    ellipse(center, element.width / 2 + offset, element.height / 2 + offset),
+    line(rotatedA, rotatedB)
+  ).map((p) => pointRotateRads(p, center, element.angle));
+};
 
 // keys.ts
 var CODES = {
@@ -7521,9 +8114,9 @@ var getControlPointsForBezierCurve = (element, endPoint) => {
       const p1 = pointFrom(data[0], data[1]);
       const p2 = pointFrom(data[2], data[3]);
       const p3 = pointFrom(data[4], data[5]);
-      const distance3 = pointDistance(p3, endPoint);
-      if (distance3 < minDistance) {
-        minDistance = distance3;
+      const distance2 = pointDistance(p3, endPoint);
+      if (distance2 < minDistance) {
+        minDistance = distance2;
         controlPoints = [p0, p1, p2, p3];
       }
       currentP = p3;
@@ -7533,9 +8126,9 @@ var getControlPointsForBezierCurve = (element, endPoint) => {
   return controlPoints;
 };
 var getBezierXY = (p0, p1, p2, p3, t) => {
-  const equation2 = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
-  const tx = equation2(t, 0);
-  const ty = equation2(t, 1);
+  const equation = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
+  const tx = equation(t, 0);
+  const ty = equation(t, 1);
   return pointFrom(tx, ty);
 };
 var getPointsInBezierCurve = (element, endPoint) => {
@@ -7568,11 +8161,11 @@ var getBezierCurveArcLengths = (element, endPoint) => {
   arcLengths[0] = 0;
   const points = getPointsInBezierCurve(element, endPoint);
   let index = 0;
-  let distance3 = 0;
+  let distance2 = 0;
   while (index < points.length - 1) {
     const segmentDistance = pointDistance(points[index], points[index + 1]);
-    distance3 += segmentDistance;
-    arcLengths.push(distance3);
+    distance2 += segmentDistance;
+    arcLengths.push(distance2);
     index++;
   }
   return arcLengths;
@@ -7605,7 +8198,7 @@ var mapIntervalToBezierT = (element, endPoint, interval) => {
   }
   return 1 - (index + (targetLength - arcLengths[index]) / (arcLengths[index + 1] - arcLengths[index])) / pointsCount;
 };
-var aabbForElement = (element, offset2) => {
+var aabbForElement = (element, offset) => {
   const bbox = {
     minX: element.x,
     minY: element.y,
@@ -7641,8 +8234,8 @@ var aabbForElement = (element, offset2) => {
     Math.max(topLeftX, topRightX, bottomRightX, bottomLeftX),
     Math.max(topLeftY, topRightY, bottomRightY, bottomLeftY)
   ];
-  if (offset2) {
-    const [topOffset, rightOffset, downOffset, leftOffset] = offset2;
+  if (offset) {
+    const [topOffset, rightOffset, downOffset, leftOffset] = offset;
     return [
       bounds[0] - leftOffset,
       bounds[1] - topOffset,
@@ -7670,8 +8263,8 @@ var getCornerRadius = (x, element) => {
 var isPathALoop = (points, zoomValue = 1) => {
   if (points.length >= 3) {
     const [first, last] = [points[0], points[points.length - 1]];
-    const distance3 = pointDistance(first, last);
-    return distance3 <= LINE_CONFIRM_THRESHOLD / zoomValue;
+    const distance2 = pointDistance(first, last);
+    return distance2 <= LINE_CONFIRM_THRESHOLD / zoomValue;
   }
   return false;
 };
@@ -8474,11 +9067,11 @@ var renderSelectionElement = (element, context, appState, selectionColor) => {
   context.save();
   context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
   context.fillStyle = "rgba(0, 0, 200, 0.04)";
-  const offset2 = 0.5 / appState.zoom.value;
-  context.fillRect(offset2, offset2, element.width, element.height);
+  const offset = 0.5 / appState.zoom.value;
+  context.fillRect(offset, offset, element.width, element.height);
   context.lineWidth = 1 / appState.zoom.value;
   context.strokeStyle = selectionColor;
-  context.strokeRect(offset2, offset2, element.width, element.height);
+  context.strokeRect(offset, offset, element.width, element.height);
   context.restore();
 };
 var renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState) => {
@@ -8742,11 +9335,11 @@ function getSvgPathFromStroke2(points) {
   }
   const max = points.length - 1;
   return points.reduce(
-    (acc, point2, i, arr) => {
+    (acc, point, i, arr) => {
       if (i === max) {
-        acc.push(point2, med(point2, arr[0]), "L", arr[0], "Z");
+        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
       } else {
-        acc.push(point2, med(point2, arr[i + 1]));
+        acc.push(point, med(point, arr[i + 1]));
       }
       return acc;
     },
@@ -9261,33 +9854,33 @@ var generateElbowArrowShape = (points, radius) => {
   for (let i = 1; i < points.length - 1; i += 1) {
     const prev = points[i - 1];
     const next = points[i + 1];
-    const point2 = points[i];
-    const prevIsHorizontal = headingForPointIsHorizontal(point2, prev);
-    const nextIsHorizontal = headingForPointIsHorizontal(next, point2);
+    const point = points[i];
+    const prevIsHorizontal = headingForPointIsHorizontal(point, prev);
+    const nextIsHorizontal = headingForPointIsHorizontal(next, point);
     const corner = Math.min(
       radius,
       pointDistance(points[i], next) / 2,
       pointDistance(points[i], prev) / 2
     );
     if (prevIsHorizontal) {
-      if (prev[0] < point2[0]) {
+      if (prev[0] < point[0]) {
         subpoints.push([points[i][0] - corner, points[i][1]]);
       } else {
         subpoints.push([points[i][0] + corner, points[i][1]]);
       }
-    } else if (prev[1] < point2[1]) {
+    } else if (prev[1] < point[1]) {
       subpoints.push([points[i][0], points[i][1] - corner]);
     } else {
       subpoints.push([points[i][0], points[i][1] + corner]);
     }
     subpoints.push(points[i]);
     if (nextIsHorizontal) {
-      if (next[0] < point2[0]) {
+      if (next[0] < point[0]) {
         subpoints.push([points[i][0] - corner, points[i][1]]);
       } else {
         subpoints.push([points[i][0] + corner, points[i][1]]);
       }
-    } else if (next[1] < point2[1]) {
+    } else if (next[1] < point[1]) {
       subpoints.push([points[i][0], points[i][1] - corner]);
     } else {
       subpoints.push([points[i][0], points[i][1] + corner]);
@@ -9306,23 +9899,23 @@ var generateElbowArrowShape = (points, radius) => {
 
 // points.ts
 var getSizeFromPoints = (points) => {
-  const xs = points.map((point2) => point2[0]);
-  const ys = points.map((point2) => point2[1]);
+  const xs = points.map((point) => point[0]);
+  const ys = points.map((point) => point[1]);
   return {
     width: Math.max(...xs) - Math.min(...xs),
     height: Math.max(...ys) - Math.min(...ys)
   };
 };
 var rescalePoints = (dimension, newSize, points, normalize) => {
-  const coordinates = points.map((point2) => point2[dimension]);
+  const coordinates = points.map((point) => point[dimension]);
   const maxCoordinate = Math.max(...coordinates);
   const minCoordinate = Math.min(...coordinates);
   const size = maxCoordinate - minCoordinate;
   const scale = size === 0 ? 1 : newSize / size;
   let nextMinCoordinate = Infinity;
-  const scaledPoints = points.map((point2) => {
-    const newCoordinate = point2[dimension] * scale;
-    const newPoint = [...point2];
+  const scaledPoints = points.map((point) => {
+    const newCoordinate = point[dimension] * scale;
+    const newPoint = [...point];
     newPoint[dimension] = newCoordinate;
     if (newCoordinate < nextMinCoordinate) {
       nextMinCoordinate = newCoordinate;
@@ -9335,11 +9928,11 @@ var rescalePoints = (dimension, newSize, points, normalize) => {
   if (scaledPoints.length === 2) {
     return scaledPoints;
   }
-  const translation2 = minCoordinate - nextMinCoordinate;
+  const translation = minCoordinate - nextMinCoordinate;
   const nextPoints = scaledPoints.map(
     (scaledPoint) => pointFromPair(
       scaledPoint.map((value, currentDimension) => {
-        return currentDimension === dimension ? value + translation2 : value;
+        return currentDimension === dimension ? value + translation : value;
       })
     )
   );
@@ -9531,7 +10124,7 @@ var getElementLineSegments = (element, elementsMap) => {
     [cx, y2],
     [x1, cy],
     [x2, cy]
-  ].map((point2) => pointRotateRads(point2, center, element.angle));
+  ].map((point) => pointRotateRads(point, center, element.angle));
   if (element.type === "diamond") {
     return [
       lineSegment(n, w),
@@ -9737,12 +10330,12 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   } else if (prevOp.op === "bcurveTo") {
     p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
   }
-  const equation2 = (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
+  const equation = (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
-  const [x1, y1] = [equation2(0.3, 0), equation2(0.3, 1)];
-  const distance3 = Math.hypot(x2 - x1, y2 - y1);
-  const nx = (x2 - x1) / distance3;
-  const ny = (y2 - y1) / distance3;
+  const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)];
+  const distance2 = Math.hypot(x2 - x1, y2 - y1);
+  const nx = (x2 - x1) / distance2;
+  const ny = (y2 - y1) / distance2;
   const size = getArrowheadSize(arrowhead);
   let length = 0;
   {
@@ -9953,7 +10546,7 @@ var getElementPointsCoords = (element, points) => {
     maxY + element.y
   ];
 };
-var getClosestElementBounds = (elements, from3) => {
+var getClosestElementBounds = (elements, from) => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -9962,12 +10555,12 @@ var getClosestElementBounds = (elements, from3) => {
   const elementsMap = arrayToMap(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-    const distance3 = pointDistance(
+    const distance2 = pointDistance(
       pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom(from3.x, from3.y)
+      pointFrom(from.x, from.y)
     );
-    if (distance3 < minDistance) {
-      minDistance = distance3;
+    if (distance2 < minDistance) {
+      minDistance = distance2;
       closestElement = element;
     }
   });
@@ -10005,214 +10598,58 @@ var getCenterForBounds = (bounds) => pointFrom(
   bounds[1] + (bounds[3] - bounds[1]) / 2
 );
 
-// ../math/ga/ga.ts
-var point = (x, y) => [0, 0, 0, 0, y, x, 1, 0];
-var offset = (x, y) => [
-  0,
-  0,
-  0,
-  0,
-  y,
-  x,
-  0,
-  0
-];
-var nvector = (value = 0, index = 0) => {
-  const result = [0, 0, 0, 0, 0, 0, 0, 0];
-  if (index < 0 || index > 7) {
-    throw new Error(`Expected \`index\` between 0 and 7, got \`${index}\``);
-  }
-  if (value !== 0) {
-    result[index] = value;
-  }
-  return result;
-};
-var reverse = (nvector2) => [
-  nvector2[0],
-  nvector2[1],
-  nvector2[2],
-  nvector2[3],
-  -nvector2[4],
-  -nvector2[5],
-  -nvector2[6],
-  -nvector2[7]
-];
-var add = (a, b) => {
-  if (isNumber(b)) {
-    return [a[0] + b, a[1], a[2], a[3], a[4], a[5], a[6], a[7]];
+// element/distance.ts
+var distanceToBindableElement = (element, p) => {
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      return distanceToRectanguloidElement(element, p);
+    case "diamond":
+      return distanceToDiamondElement(element, p);
+    case "ellipse":
+      return distanceToEllipseElement(element, p);
   }
-  return [
-    a[0] + b[0],
-    a[1] + b[1],
-    a[2] + b[2],
-    a[3] + b[3],
-    a[4] + b[4],
-    a[5] + b[5],
-    a[6] + b[6],
-    a[7] + b[7]
-  ];
 };
-var sub = (a, b) => {
-  if (isNumber(b)) {
-    return [a[0] - b, a[1], a[2], a[3], a[4], a[5], a[6], a[7]];
-  }
-  return [
-    a[0] - b[0],
-    a[1] - b[1],
-    a[2] - b[2],
-    a[3] - b[3],
-    a[4] - b[4],
-    a[5] - b[5],
-    a[6] - b[6],
-    a[7] - b[7]
-  ];
+var distanceToRectanguloidElement = (element, p) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const rotatedPoint = pointRotateRads(p, center, -element.angle);
+  const [sides, corners] = deconstructRectanguloidElement(element);
+  return Math.min(
+    ...sides.map((s) => distanceToLineSegment(rotatedPoint, s)),
+    ...corners.map((a) => curvePointDistance(a, rotatedPoint)).filter((d) => d !== null)
+  );
 };
-var mul = (a, b) => {
-  if (isNumber(b)) {
-    return [
-      a[0] * b,
-      a[1] * b,
-      a[2] * b,
-      a[3] * b,
-      a[4] * b,
-      a[5] * b,
-      a[6] * b,
-      a[7] * b
-    ];
-  }
-  return [
-    mulScalar(a, b),
-    b[1] * a[0] + b[0] * a[1] - b[4] * a[2] + b[5] * a[3] + b[2] * a[4] - b[3] * a[5] - b[7] * a[6] - b[6] * a[7],
-    b[2] * a[0] + b[0] * a[2] - b[6] * a[3] + b[3] * a[6],
-    b[3] * a[0] + b[6] * a[2] + b[0] * a[3] - b[2] * a[6],
-    b[4] * a[0] + b[2] * a[1] - b[1] * a[2] + b[7] * a[3] + b[0] * a[4] + b[6] * a[5] - b[5] * a[6] + b[3] * a[7],
-    b[5] * a[0] - b[3] * a[1] + b[7] * a[2] + b[1] * a[3] - b[6] * a[4] + b[0] * a[5] + b[4] * a[6] + b[2] * a[7],
-    b[6] * a[0] + b[3] * a[2] - b[2] * a[3] + b[0] * a[6],
-    b[7] * a[0] + b[6] * a[1] + b[5] * a[2] + b[4] * a[3] + b[3] * a[4] + b[2] * a[5] + b[1] * a[6] + b[0] * a[7]
-  ];
+var distanceToDiamondElement = (element, p) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  const rotatedPoint = pointRotateRads(p, center, -element.angle);
+  const [sides, curves] = deconstructDiamondElement(element);
+  return Math.min(
+    ...sides.map((s) => distanceToLineSegment(rotatedPoint, s)),
+    ...curves.map((a) => curvePointDistance(a, rotatedPoint)).filter((d) => d !== null)
+  );
 };
-var mulScalar = (a, b) => b[0] * a[0] + b[2] * a[2] + b[3] * a[3] - b[6] * a[6];
-var meet = (a, b) => [
-  b[0] * a[0],
-  b[1] * a[0] + b[0] * a[1],
-  b[2] * a[0] + b[0] * a[2],
-  b[3] * a[0] + b[0] * a[3],
-  b[4] * a[0] + b[2] * a[1] - b[1] * a[2] + b[0] * a[4],
-  b[5] * a[0] - b[3] * a[1] + b[1] * a[3] + b[0] * a[5],
-  b[6] * a[0] + b[3] * a[2] - b[2] * a[3] + b[0] * a[6],
-  b[7] * a[0] + b[6] * a[1] + b[5] * a[2] + b[4] * a[3] + b[3] * a[4] + b[2] * a[5] + b[1] * a[6]
-];
-var join = (a, b) => [
-  joinScalar(a, b),
-  a[1] * b[7] + a[4] * b[5] - a[5] * b[4] + a[7] * b[1],
-  a[2] * b[7] - a[4] * b[6] + a[6] * b[4] + a[7] * b[2],
-  a[3] * b[7] + a[5] * b[6] - a[6] * b[5] + a[7] * b[3],
-  a[4] * b[7] + a[7] * b[4],
-  a[5] * b[7] + a[7] * b[5],
-  a[6] * b[7] + a[7] * b[6],
-  a[7] * b[7]
-];
-var joinScalar = (a, b) => a[0] * b[7] + a[1] * b[6] + a[2] * b[5] + a[3] * b[4] + a[4] * b[3] + a[5] * b[2] + a[6] * b[1] + a[7] * b[0];
-var dot = (a, b) => [
-  b[0] * a[0] + b[2] * a[2] + b[3] * a[3] - b[6] * a[6],
-  b[1] * a[0] + b[0] * a[1] - b[4] * a[2] + b[5] * a[3] + b[2] * a[4] - b[3] * a[5] - b[7] * a[6] - b[6] * a[7],
-  b[2] * a[0] + b[0] * a[2] - b[6] * a[3] + b[3] * a[6],
-  b[3] * a[0] + b[6] * a[2] + b[0] * a[3] - b[2] * a[6],
-  b[4] * a[0] + b[7] * a[3] + b[0] * a[4] + b[3] * a[7],
-  b[5] * a[0] + b[7] * a[2] + b[0] * a[5] + b[2] * a[7],
-  b[6] * a[0] + b[0] * a[6],
-  b[7] * a[0] + b[0] * a[7]
-];
-var norm = (a) => Math.sqrt(Math.abs(a[0] * a[0] - a[2] * a[2] - a[3] * a[3] + a[6] * a[6]));
-var inorm = (a) => Math.sqrt(Math.abs(a[7] * a[7] - a[5] * a[5] - a[4] * a[4] + a[1] * a[1]));
-var normalized = (a) => {
-  const n = norm(a);
-  if (n === 0 || n === 1) {
-    return a;
-  }
-  const sign2 = a[6] < 0 ? -1 : 1;
-  return mul(a, sign2 / n);
-};
-var inormalized = (a) => {
-  const n = inorm(a);
-  if (n === 0 || n === 1) {
-    return a;
-  }
-  return mul(a, 1 / n);
-};
-var isNumber = (a) => typeof a === "number";
-var E0 = nvector(1, 1);
-var E1 = nvector(1, 2);
-var E2 = nvector(1, 3);
-var E01 = nvector(1, 4);
-var E20 = nvector(1, 5);
-var E12 = nvector(1, 6);
-var E012 = nvector(1, 7);
-
-// ../math/ga/galines.ts
-var equation = (a, b, c) => normalized([0, c, a, b, 0, 0, 0, 0]);
-var through = (from3, to) => normalized(join(to, from3));
-var orthogonal = (line, point2) => dot(line, point2);
-var orthogonalThrough = (against, intersection) => orthogonal(through(against, intersection), intersection);
-var sign = (line) => Math.sign(line[1]);
-
-// ../math/ga/gapoints.ts
-var from = ([x, y]) => [
-  0,
-  0,
-  0,
-  0,
-  y,
-  x,
-  1,
-  0
-];
-var toTuple = (point2) => [point2[5], point2[4]];
-var abs = (point2) => [
-  0,
-  0,
-  0,
-  0,
-  Math.abs(point2[4]),
-  Math.abs(point2[5]),
-  1,
-  0
-];
-var intersect = (line1, line2) => normalized(meet(line1, line2));
-var distance2 = (point1, point2) => norm(join(point1, point2));
-var distanceToLine = (point2, line) => joinScalar(point2, line);
-
-// ../math/ga/gadirections.ts
-var from2 = (point2) => [
-  0,
-  0,
-  0,
-  0,
-  point2[4],
-  point2[5],
-  0,
-  0
-];
-var fromTo = (from3, to) => inormalized([0, 0, 0, 0, to[4] - from3[4], to[5] - from3[5], 0, 0]);
-
-// ../math/ga/gatransforms.ts
-var rotation = (pivot, angle) => add(mul(pivot, Math.sin(angle / 2)), Math.cos(angle / 2));
-var translation = (direction) => [
-  1,
-  0,
-  0,
-  0,
-  -(0.5 * direction[5]),
-  0.5 * direction[4],
-  0,
-  0
-];
-var translationOrthogonal = (direction, distance3) => {
-  const scale = 0.5 * distance3;
-  return [1, 0, 0, 0, scale * direction[4], scale * direction[5], 0, 0];
+var distanceToEllipseElement = (element, p) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  return ellipseDistanceFromPoint(
+    // Instead of rotating the ellipse, rotate the point to the inverse angle
+    pointRotateRads(p, center, -element.angle),
+    ellipse(center, element.width / 2, element.height / 2)
+  );
 };
-var compose = (motor1, motor2) => mul(motor2, motor1);
-var apply = (motor, nvector2) => normalized(mul(mul(motor, nvector2), reverse(motor)));
 
 // element/binding.ts
 var shouldEnableBindingForPointerEvent = (event) => {
@@ -10464,21 +10901,26 @@ var bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap)
   }
   const binding = {
     elementId: hoveredElement.id,
-    ...normalizePointBinding(
-      calculateFocusAndGap(
+    ...isElbowArrow(linearElement) ? {
+      ...calculateFixedPointForElbowArrowBinding(
         linearElement,
         hoveredElement,
         startOrEnd,
         elementsMap
       ),
-      hoveredElement
-    ),
-    ...isElbowArrow(linearElement) ? calculateFixedPointForElbowArrowBinding(
-      linearElement,
-      hoveredElement,
-      startOrEnd,
-      elementsMap
-    ) : { fixedPoint: null }
+      focus: 0,
+      gap: 0
+    } : {
+      ...normalizePointBinding(
+        calculateFocusAndGap(
+          linearElement,
+          hoveredElement,
+          startOrEnd,
+          elementsMap
+        ),
+        hoveredElement
+      )
+    }
   };
   mutateElement(linearElement, {
     [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding
@@ -10611,16 +11053,8 @@ var calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsM
     elementsMap
   );
   return {
-    focus: determineFocusDistance(
-      hoveredElement,
-      adjacentPoint,
-      edgePoint,
-      elementsMap
-    ),
-    gap: Math.max(
-      1,
-      distanceToBindableElement(hoveredElement, edgePoint, elementsMap)
-    )
+    focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint),
+    gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint))
   };
 };
 var updateBoundElements = (changedElement, elementsMap, options) => {
@@ -10659,17 +11093,17 @@ var updateBoundElements = (changedElement, elementsMap, options) => {
       element,
       (bindableElement, bindingProp) => {
         if (bindableElement && isBindableElement(bindableElement) && (bindingProp === "startBinding" || bindingProp === "endBinding") && changedElement.id === element[bindingProp]?.elementId) {
-          const point2 = updateBoundPoint(
+          const point = updateBoundPoint(
             element,
             bindingProp,
             bindings[bindingProp],
             bindableElement,
             elementsMap
           );
-          if (point2) {
+          if (point) {
             return {
               index: bindingProp === "startBinding" ? 0 : element.points.length - 1,
-              point: point2
+              point
             };
           }
         }
@@ -10699,13 +11133,13 @@ var getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, element
   if (!bindableElement || !aabb) {
     return otherPointHeading;
   }
-  const distance3 = getDistanceForBinding(
+  const distance2 = getDistanceForBinding(
     origPoint,
     bindableElement,
     elementsMap,
     zoom
   );
-  if (!distance3) {
+  if (!distance2) {
     return vectorToHeading(
       vectorFromPoint(
         p,
@@ -10718,49 +11152,57 @@ var getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, element
   }
   return headingForPointFromElement(bindableElement, aabb, p);
 };
-var getDistanceForBinding = (point2, bindableElement, elementsMap, zoom) => {
-  const distance3 = distanceToBindableElement(
-    bindableElement,
-    point2,
-    elementsMap
-  );
+var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
+  const distance2 = distanceToBindableElement(bindableElement, point);
   const bindDistance = maxBindingGap(
     bindableElement,
     bindableElement.width,
     bindableElement.height,
     zoom
   );
-  return distance3 > bindDistance ? null : distance3;
+  return distance2 > bindDistance ? null : distance2;
 };
-var bindPointToSnapToElementOutline = (p, otherPoint, bindableElement, elementsMap) => {
+var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd) => {
   const aabb = bindableElement && aabbForElement(bindableElement);
+  const localP = arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
+  const globalP = pointFrom(
+    arrow.x + localP[0],
+    arrow.y + localP[1]
+  );
+  const p = isRectanguloidElement(bindableElement) ? avoidRectangularCorner(bindableElement, globalP) : globalP;
   if (bindableElement && aabb) {
-    const heading = headingForPointFromElement(bindableElement, aabb, p);
-    const intersections = [
-      ...intersectElementWithLine(
-        bindableElement,
-        pointFrom(p[0], p[1] - 2 * bindableElement.height),
-        pointFrom(p[0], p[1] + 2 * bindableElement.height),
-        FIXED_BINDING_DISTANCE,
-        elementsMap
-      ) ?? [],
-      ...intersectElementWithLine(
-        bindableElement,
-        pointFrom(p[0] - 2 * bindableElement.width, p[1]),
-        pointFrom(p[0] + 2 * bindableElement.width, p[1]),
-        FIXED_BINDING_DISTANCE,
-        elementsMap
-      ) ?? []
-    ];
-    const isVertical = compareHeading(heading, HEADING_LEFT) || compareHeading(heading, HEADING_RIGHT);
-    const dist = Math.abs(
-      distanceToBindableElement(bindableElement, p, elementsMap)
-    );
-    const isInner = isVertical ? dist < bindableElement.width * -0.1 : dist < bindableElement.height * -0.1;
-    intersections.sort((a, b) => pointDistanceSq(a, p) - pointDistanceSq(b, p));
-    return isInner ? headingToMidBindPoint(otherPoint, bindableElement, aabb) : intersections.filter(
-      (i) => isVertical ? Math.abs(p[1] - i[1]) < 0.1 : Math.abs(p[0] - i[0]) < 0.1
-    )[0] ?? p;
+    const center = getCenterForBounds(aabb);
+    const intersection = intersectElementWithLineSegment(
+      bindableElement,
+      lineSegment(
+        center,
+        pointFromVector(
+          vectorScale(
+            vectorNormalize(vectorFromPoint(p, center)),
+            Math.max(bindableElement.width, bindableElement.height)
+          ),
+          center
+        )
+      )
+    )[0];
+    const currentDistance = pointDistance(p, center);
+    const fullDistance = pointDistance(intersection, center);
+    const ratio = currentDistance / fullDistance;
+    switch (true) {
+      case ratio > 0.9:
+        if (currentDistance - fullDistance > FIXED_BINDING_DISTANCE) {
+          return p;
+        }
+        return pointFromVector(
+          vectorScale(
+            vectorNormalize(vectorFromPoint(p, intersection)),
+            ratio > 1 ? FIXED_BINDING_DISTANCE : -FIXED_BINDING_DISTANCE
+          ),
+          intersection
+        );
+      default:
+        return headingToMidBindPoint(p, bindableElement, aabb);
+    }
   }
   return p;
 };
@@ -10945,24 +11387,44 @@ var updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, ele
   const focusPointAbsolute = determineFocusPoint(
     bindableElement,
     binding.focus,
-    adjacentPoint,
-    elementsMap
+    adjacentPoint
   );
   let newEdgePoint;
   if (binding.gap === 0) {
     newEdgePoint = focusPointAbsolute;
   } else {
-    const intersections = intersectElementWithLine(
+    const edgePointAbsolute = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+      linearElement,
+      edgePointIndex,
+      elementsMap
+    );
+    const center = pointFrom(
+      bindableElement.x + bindableElement.width / 2,
+      bindableElement.y + bindableElement.height / 2
+    );
+    const interceptorLength = pointDistance(adjacentPoint, edgePointAbsolute) + pointDistance(adjacentPoint, center) + Math.max(bindableElement.width, bindableElement.height) * 2;
+    const intersections = intersectElementWithLineSegment(
       bindableElement,
-      adjacentPoint,
-      focusPointAbsolute,
-      binding.gap,
-      elementsMap
+      lineSegment(
+        adjacentPoint,
+        pointFromVector(
+          vectorScale(
+            vectorNormalize(vectorFromPoint(focusPointAbsolute, adjacentPoint)),
+            interceptorLength
+          ),
+          adjacentPoint
+        )
+      ),
+      binding.gap
+    ).sort(
+      (g, h) => pointDistanceSq(g, adjacentPoint) - pointDistanceSq(h, adjacentPoint)
     );
-    if (!intersections || intersections.length === 0) {
+    if (intersections.length > 1) {
+      newEdgePoint = intersections[0];
+    } else if (intersections.length === 1) {
       newEdgePoint = focusPointAbsolute;
     } else {
-      newEdgePoint = intersections[0];
+      newEdgePoint = edgePointAbsolute;
     }
   }
   return LinearElementEditor.pointFromAbsoluteCoords(
@@ -10978,22 +11440,10 @@ var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, st
     hoveredElement.x + hoveredElement.width,
     hoveredElement.y + hoveredElement.height
   ];
-  const edgePointIndex = startOrEnd === "start" ? 0 : linearElement.points.length - 1;
-  const globalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    edgePointIndex,
-    elementsMap
-  );
-  const otherGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    edgePointIndex,
-    elementsMap
-  );
   const snappedPoint = bindPointToSnapToElementOutline(
-    globalPoint,
-    otherGlobalPoint,
+    linearElement,
     hoveredElement,
-    elementsMap
+    startOrEnd
   );
   const globalMidPoint = pointFrom(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
@@ -11157,347 +11607,193 @@ var maxBindingGap = (element, elementWidth, elementHeight, zoom) => {
     BINDING_HIGHLIGHT_THICKNESS / zoomValue + BINDING_HIGHLIGHT_OFFSET
   );
 };
-var distanceToBindableElement = (element, point2, elementsMap) => {
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      return distanceToRectangle(element, point2, elementsMap);
-    case "diamond":
-      return distanceToDiamond(element, point2, elementsMap);
-    case "ellipse":
-      return distanceToEllipse2(element, point2, elementsMap);
-  }
-};
-var distanceToRectangle = (element, p, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    p,
-    elementsMap
-  );
-  return Math.max(
-    distanceToLine(pointRel, equation(0, 1, -hheight)),
-    distanceToLine(pointRel, equation(1, 0, -hwidth))
-  );
-};
-var distanceToDiamond = (element, point2, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    point2,
-    elementsMap
-  );
-  const side = equation(hheight, hwidth, -hheight * hwidth);
-  return distanceToLine(pointRel, side);
-};
-var distanceToEllipse2 = (element, point2, elementsMap) => {
-  const [pointRel, tangent] = ellipseParamsForTest(element, point2, elementsMap);
-  return -sign(tangent) * distanceToLine(pointRel, tangent);
-};
-var ellipseParamsForTest = (element, point2, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    point2,
-    elementsMap
-  );
-  const [px, py] = toTuple(pointRel);
-  let tx = 0.707;
-  let ty = 0.707;
-  const a = hwidth;
-  const b = hheight;
-  [0, 1, 2, 3].forEach((_) => {
-    const xx = a * tx;
-    const yy = b * ty;
-    const ex = (a * a - b * b) * tx ** 3 / a;
-    const ey = (b * b - a * a) * ty ** 3 / b;
-    const rx = xx - ex;
-    const ry = yy - ey;
-    const qx = px - ex;
-    const qy = py - ey;
-    const r = Math.hypot(ry, rx);
-    const q = Math.hypot(qy, qx);
-    tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a));
-    ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b));
-    const t = Math.hypot(ty, tx);
-    tx /= t;
-    ty /= t;
-  });
-  const closestPoint = point(a * tx, b * ty);
-  const tangent = orthogonalThrough(pointRel, closestPoint);
-  return [pointRel, tangent];
-};
-var pointRelativeToElement = (element, pointTuple, elementsMap) => {
-  const point2 = from(pointTuple);
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate = rotation(center, element.angle);
-  const pointRotated = apply(rotate, point2);
-  const pointRelToCenter = sub(pointRotated, from2(center));
-  const pointRelToCenterAbs = abs(pointRelToCenter);
-  const elementPos = offset(element.x, element.y);
-  const pointRelToPos = sub(pointRotated, elementPos);
-  const halfWidth = (x2 - x1) / 2;
-  const halfHeight = (y2 - y1) / 2;
-  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
-};
-var relativizationToElementCenter = (element, elementsMap) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate = rotation(center, element.angle);
-  const translate = reverse(
-    translation(from2(center))
-  );
-  return compose(rotate, translate);
-};
-var coordsCenter = (x1, y1, x2, y2) => {
-  return point((x1 + x2) / 2, (y1 + y2) / 2);
-};
-var determineFocusDistance = (element, a, b, elementsMap) => {
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const aRel = apply(relateToCenter, from(a));
-  const bRel = apply(relateToCenter, from(b));
-  const line = through(aRel, bRel);
-  const q = element.height / element.width;
-  const hwidth = element.width / 2;
-  const hheight = element.height / 2;
-  const n = line[2];
-  const m = line[3];
-  const c = line[1];
-  const mabs = Math.abs(m);
-  const nabs = Math.abs(n);
-  let ret;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      ret = c / (hwidth * (nabs + q * mabs));
-      break;
-    case "diamond":
-      ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
-      break;
-    case "ellipse":
-      ret = c / (hwidth * Math.sqrt(n ** 2 + q ** 2 * m ** 2));
-      break;
-  }
-  return ret || 0;
-};
-var determineFocusPoint = (element, focus, adjecentPoint, elementsMap) => {
-  if (focus === 0) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-    const center = coordsCenter(x1, y1, x2, y2);
-    return pointFromPair(toTuple(center));
-  }
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const adjecentPointRel = apply(
-    relateToCenter,
-    from(adjecentPoint)
-  );
-  const reverseRelateToCenter = reverse(relateToCenter);
-  let point2;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "diamond":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      point2 = findFocusPointForRectangulars(element, focus, adjecentPointRel);
-      break;
-    case "ellipse":
-      point2 = findFocusPointForEllipse(element, focus, adjecentPointRel);
-      break;
-  }
-  return pointFromPair(
-    toTuple(apply(reverseRelateToCenter, point2))
+var determineFocusDistance = (element, a, b) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
   );
-};
-var intersectElementWithLine = (element, a, b, gap = 0, elementsMap) => {
-  if (isRectangularElement(element)) {
-    return segmentIntersectRectangleElement(element, lineSegment(a, b), gap);
+  if (pointsEqual(a, b)) {
+    return 0;
   }
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const aRel = apply(relateToCenter, from(a));
-  const bRel = apply(relateToCenter, from(b));
-  const line = through(aRel, bRel);
-  const reverseRelateToCenter = reverse(relateToCenter);
-  const intersections = getSortedElementLineIntersections(
-    element,
-    line,
-    aRel,
-    gap
-  );
-  return intersections.map(
-    (point2) => pointFromPair(
-      toTuple(apply(reverseRelateToCenter, point2))
+  const rotatedA = pointRotateRads(a, center, -element.angle);
+  const rotatedB = pointRotateRads(b, center, -element.angle);
+  const sign = Math.sign(
+    vectorCross(
+      vectorFromPoint(rotatedB, a),
+      vectorFromPoint(rotatedB, center)
+    )
+  ) * -1;
+  const rotatedInterceptor = lineSegment(
+    rotatedB,
+    pointFromVector(
+      vectorScale(
+        vectorNormalize(vectorFromPoint(rotatedB, rotatedA)),
+        Math.max(element.width * 2, element.height * 2)
+      ),
+      rotatedB
     )
-    // pointFromArray(
-    //   ,
-    // ),
-  );
-};
-var getSortedElementLineIntersections = (element, line, nearPoint, gap = 0) => {
-  let intersections;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "diamond":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      const corners = getCorners(element);
-      intersections = corners.flatMap((point2, i) => {
-        const edge = [point2, corners[(i + 1) % 4]];
-        return intersectSegment(line, offsetSegment(edge, gap));
-      }).concat(
-        corners.flatMap((point2) => getCircleIntersections(point2, gap, line))
-      );
-      break;
-    case "ellipse":
-      intersections = getEllipseIntersections(element, gap, line);
-      break;
-  }
-  if (intersections.length < 2) {
-    return [];
-  }
-  const sortedIntersections = intersections.sort(
-    (i1, i2) => distance2(i1, nearPoint) - distance2(i2, nearPoint)
   );
-  return [
-    sortedIntersections[0],
-    sortedIntersections[sortedIntersections.length - 1]
+  const axes = element.type === "diamond" ? [
+    lineSegment(
+      pointFrom(element.x + element.width / 2, element.y),
+      pointFrom(
+        element.x + element.width / 2,
+        element.y + element.height
+      )
+    ),
+    lineSegment(
+      pointFrom(element.x, element.y + element.height / 2),
+      pointFrom(
+        element.x + element.width,
+        element.y + element.height / 2
+      )
+    )
+  ] : [
+    lineSegment(
+      pointFrom(element.x, element.y),
+      pointFrom(
+        element.x + element.width,
+        element.y + element.height
+      )
+    ),
+    lineSegment(
+      pointFrom(element.x + element.width, element.y),
+      pointFrom(element.x, element.y + element.height)
+    )
   ];
-};
-var getCorners = (element, scale = 1) => {
-  const hx = scale * element.width / 2;
-  const hy = scale * element.height / 2;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      return [
-        point(hx, hy),
-        point(hx, -hy),
-        point(-hx, -hy),
-        point(-hx, hy)
-      ];
-    case "diamond":
-      return [
-        point(0, hy),
-        point(hx, 0),
-        point(0, -hy),
-        point(-hx, 0)
-      ];
-  }
-};
-var intersectSegment = (line, segment) => {
-  const [a, b] = segment;
-  const aDist = distanceToLine(a, line);
-  const bDist = distanceToLine(b, line);
-  if (aDist * bDist >= 0) {
-    return [];
-  }
-  return [intersect(line, through(a, b))];
-};
-var offsetSegment = (segment, distance3) => {
-  const [a, b] = segment;
-  const offset2 = translationOrthogonal(
-    fromTo(a, b),
-    distance3
-  );
-  return [apply(offset2, a), apply(offset2, b)];
-};
-var getEllipseIntersections = (element, gap, line) => {
-  const a = element.width / 2 + gap;
-  const b = element.height / 2 + gap;
-  const m = line[2];
-  const n = line[3];
-  const c = line[1];
-  const squares = a * a * m * m + b * b * n * n;
-  const discr = squares - c * c;
-  if (squares === 0 || discr <= 0) {
-    return [];
-  }
-  const discrRoot = Math.sqrt(discr);
-  const xn = -a * a * m * c;
-  const yn = -b * b * n * c;
-  return [
-    point(
-      (xn + a * b * n * discrRoot) / squares,
-      (yn - a * b * m * discrRoot) / squares
+  const interceptees = element.type === "diamond" ? [
+    lineSegment(
+      pointFrom(
+        element.x + element.width / 2,
+        element.y - element.height
+      ),
+      pointFrom(
+        element.x + element.width / 2,
+        element.y + element.height * 2
+      )
+    ),
+    lineSegment(
+      pointFrom(
+        element.x - element.width,
+        element.y + element.height / 2
+      ),
+      pointFrom(
+        element.x + element.width * 2,
+        element.y + element.height / 2
+      )
+    )
+  ] : [
+    lineSegment(
+      pointFrom(
+        element.x - element.width,
+        element.y - element.height
+      ),
+      pointFrom(
+        element.x + element.width * 2,
+        element.y + element.height * 2
+      )
     ),
-    point(
-      (xn - a * b * n * discrRoot) / squares,
-      (yn + a * b * m * discrRoot) / squares
+    lineSegment(
+      pointFrom(
+        element.x + element.width * 2,
+        element.y - element.height
+      ),
+      pointFrom(
+        element.x - element.width,
+        element.y + element.height * 2
+      )
     )
   ];
-};
-var getCircleIntersections = (center, radius, line) => {
-  if (radius === 0) {
-    return distanceToLine(line, center) === 0 ? [center] : [];
-  }
-  const m = line[2];
-  const n = line[3];
-  const c = line[1];
-  const [a, b] = toTuple(center);
-  const r = radius;
-  const squares = m * m + n * n;
-  const discr = r * r * squares - (m * a + n * b + c) ** 2;
-  if (squares === 0 || discr <= 0) {
-    return [];
+  const ordered = [
+    lineSegmentIntersectionPoints(rotatedInterceptor, interceptees[0]),
+    lineSegmentIntersectionPoints(rotatedInterceptor, interceptees[1])
+  ].filter((p) => p !== null).sort((g, h) => pointDistanceSq(g, b) - pointDistanceSq(h, b)).map(
+    (p, idx) => sign * pointDistance(center, p) / (element.type === "diamond" ? pointDistance(axes[idx][0], axes[idx][1]) / 2 : Math.sqrt(element.width ** 2 + element.height ** 2) / 2)
+  ).sort((g, h) => Math.abs(g) - Math.abs(h));
+  const signedDistanceRatio = ordered[0] ?? 0;
+  return signedDistanceRatio;
+};
+var determineFocusPoint = (element, focus, adjacentPoint) => {
+  const center = pointFrom(
+    element.x + element.width / 2,
+    element.y + element.height / 2
+  );
+  if (focus === 0) {
+    return center;
   }
-  const discrRoot = Math.sqrt(discr);
-  const xn = a * n * n - b * m * n - m * c;
-  const yn = b * m * m - a * m * n - n * c;
-  return [
-    point((xn + n * discrRoot) / squares, (yn - m * discrRoot) / squares),
-    point((xn - n * discrRoot) / squares, (yn + m * discrRoot) / squares)
+  const candidates = (element.type === "diamond" ? [
+    pointFrom(element.x, element.y + element.height / 2),
+    pointFrom(element.x + element.width / 2, element.y),
+    pointFrom(
+      element.x + element.width,
+      element.y + element.height / 2
+    ),
+    pointFrom(
+      element.x + element.width / 2,
+      element.y + element.height
+    )
+  ] : [
+    pointFrom(element.x, element.y),
+    pointFrom(element.x + element.width, element.y),
+    pointFrom(
+      element.x + element.width,
+      element.y + element.height
+    ),
+    pointFrom(element.x, element.y + element.height)
+  ]).map(
+    (p) => pointFromVector(
+      vectorScale(vectorFromPoint(p, center), Math.abs(focus)),
+      center
+    )
+  ).map((p) => pointRotateRads(p, center, element.angle));
+  const selected = [
+    vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[0]),
+      vectorFromPoint(candidates[1], candidates[0])
+    ) > 0 && // TOP
+    (focus > 0 ? vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[1]),
+      vectorFromPoint(candidates[2], candidates[1])
+    ) < 0 : vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[3]),
+      vectorFromPoint(candidates[0], candidates[3])
+    ) < 0),
+    vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[1]),
+      vectorFromPoint(candidates[2], candidates[1])
+    ) > 0 && // RIGHT
+    (focus > 0 ? vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[2]),
+      vectorFromPoint(candidates[3], candidates[2])
+    ) < 0 : vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[0]),
+      vectorFromPoint(candidates[1], candidates[0])
+    ) < 0),
+    vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[2]),
+      vectorFromPoint(candidates[3], candidates[2])
+    ) > 0 && // BOTTOM
+    (focus > 0 ? vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[3]),
+      vectorFromPoint(candidates[0], candidates[3])
+    ) < 0 : vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[1]),
+      vectorFromPoint(candidates[2], candidates[1])
+    ) < 0),
+    vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[3]),
+      vectorFromPoint(candidates[0], candidates[3])
+    ) > 0 && // LEFT
+    (focus > 0 ? vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[0]),
+      vectorFromPoint(candidates[1], candidates[0])
+    ) < 0 : vectorCross(
+      vectorFromPoint(adjacentPoint, candidates[2]),
+      vectorFromPoint(candidates[3], candidates[2])
+    ) < 0)
   ];
-};
-var findFocusPointForEllipse = (ellipse, relativeDistance, point2) => {
-  const relativeDistanceAbs = Math.abs(relativeDistance);
-  const a = ellipse.width * relativeDistanceAbs / 2;
-  const b = ellipse.height * relativeDistanceAbs / 2;
-  const orientation = Math.sign(relativeDistance);
-  const [px, pyo] = toTuple(point2);
-  const py = pyo === 0 ? 1e-4 : pyo;
-  const squares = px ** 2 * b ** 2 + py ** 2 * a ** 2;
-  const m = (-px * b ** 2 + orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) / squares;
-  let n = (-m * px - 1) / py;
-  if (n === 0) {
-    n = (Object.is(n, -0) ? -1 : 1) * 0.01;
-  }
-  const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
-  return point(x, (-m * x - 1) / n);
-};
-var findFocusPointForRectangulars = (element, relativeDistance, point2) => {
-  const relativeDistanceAbs = Math.abs(relativeDistance);
-  const orientation = Math.sign(relativeDistance);
-  const corners = getCorners(element, relativeDistanceAbs);
-  let maxDistance = 0;
-  let tangentPoint = null;
-  corners.forEach((corner) => {
-    const distance3 = orientation * through(point2, corner)[1];
-    if (distance3 > maxDistance) {
-      maxDistance = distance3;
-      tangentPoint = corner;
-    }
-  });
-  return tangentPoint;
+  const focusPoint = selected[0] ? focus > 0 ? candidates[1] : candidates[0] : selected[1] ? focus > 0 ? candidates[2] : candidates[1] : selected[2] ? focus > 0 ? candidates[3] : candidates[2] : focus > 0 ? candidates[0] : candidates[3];
+  return focusPoint;
 };
 var bindingProperties = /* @__PURE__ */ new Set([
   "boundElements",
@@ -12530,10 +12826,10 @@ var round2 = (x) => {
 };
 var dedupePoints = (points) => {
   const map = /* @__PURE__ */ new Map();
-  for (const point2 of points) {
-    const key = point2.join(",");
+  for (const point of points) {
+    const key = point.join(",");
     if (!map.has(key)) {
-      map.set(key, point2);
+      map.set(key, point);
     }
   }
   return Array.from(map.values());
@@ -12596,7 +12892,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
 var dedupeGapSnapLines = (gapSnapLines) => {
   const map = /* @__PURE__ */ new Map();
   for (const gapSnapLine of gapSnapLines) {
-    const key = gapSnapLine.points.flat().map((point2) => [round2(point2)]).join(",");
+    const key = gapSnapLine.points.flat().map((point) => [round2(point)]).join(",");
     if (!map.has(key)) {
       map.set(key, gapSnapLine);
     }
@@ -13068,8 +13364,8 @@ var _LinearElementEditor = class _LinearElementEditor {
       element,
       elementsMap
     );
-    const nextSelectedPoints = pointsSceneCoords.reduce((acc, point2, index) => {
-      if (point2[0] >= selectionX1 && point2[0] <= selectionX2 && point2[1] >= selectionY1 && point2[1] <= selectionY2 || event.shiftKey && selectedPointsIndices?.includes(index)) {
+    const nextSelectedPoints = pointsSceneCoords.reduce((acc, point, index) => {
+      if (point[0] >= selectionX1 && point[0] <= selectionX2 && point[1] >= selectionY1 && point[1] <= selectionY2 || event.shiftKey && selectedPointsIndices?.includes(index)) {
         acc.push(index);
       }
       return acc;
@@ -13258,11 +13554,11 @@ var _LinearElementEditor = class _LinearElementEditor {
       }
       return false;
     }
-    let distance3 = pointDistance(startPoint, endPoint);
+    let distance2 = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      distance3 = getBezierCurveLength(element, endPoint);
+      distance2 = getBezierCurveLength(element, endPoint);
     }
-    return distance3 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
+    return distance2 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
   static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex, elementsMap) {
     let segmentMidPoint = pointCenter(startPoint, endPoint);
@@ -13677,7 +13973,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     let offsetY = 0;
     const isDeletingOriginPoint = pointIndices.includes(0);
     if (isDeletingOriginPoint) {
-      const firstNonDeletedPoint = element.points.find((point2, idx) => {
+      const firstNonDeletedPoint = element.points.find((point, idx) => {
         return !pointIndices.includes(idx);
       });
       if (firstNonDeletedPoint) {
@@ -13907,23 +14203,23 @@ var _LinearElementEditor = class _LinearElementEditor {
       const nextFixedSegments = Object.values(fixedSegments).sort(
         (a, b) => a.index - b.index
       );
-      const offset2 = nextFixedSegments.map((segment) => segment.index).reduce((count, idx) => idx < index ? count + 1 : count, 0);
+      const offset = nextFixedSegments.map((segment) => segment.index).reduce((count, idx) => idx < index ? count + 1 : count, 0);
       mutateElement(element, {
         fixedSegments: nextFixedSegments
       });
-      const point2 = pointFrom(
-        element.x + (element.fixedSegments[offset2].start[0] + element.fixedSegments[offset2].end[0]) / 2,
-        element.y + (element.fixedSegments[offset2].start[1] + element.fixedSegments[offset2].end[1]) / 2
+      const point = pointFrom(
+        element.x + (element.fixedSegments[offset].start[0] + element.fixedSegments[offset].end[0]) / 2,
+        element.y + (element.fixedSegments[offset].start[1] + element.fixedSegments[offset].end[1]) / 2
       );
       return {
         ...linearElement,
-        segmentMidPointHoveredCoords: point2,
+        segmentMidPointHoveredCoords: point,
         pointerDownState: {
           ...linearElement.pointerDownState,
           segmentMidpoint: {
             added: false,
-            index: element.fixedSegments[offset2].index,
-            value: point2
+            index: element.fixedSegments[offset].index,
+            value: point
           }
         }
       };
@@ -14017,14 +14313,14 @@ __publicField(_LinearElementEditor, "getSegmentMidpointHitCoords", (linearElemen
   const threshold = (_LinearElementEditor.POINT_HANDLE_SIZE + 1) / appState.zoom.value;
   const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;
   if (existingSegmentMidpointHitCoords) {
-    const distance3 = pointDistance(
+    const distance2 = pointDistance(
       pointFrom(
         existingSegmentMidpointHitCoords[0],
         existingSegmentMidpointHitCoords[1]
       ),
       pointFrom(scenePointer.x, scenePointer.y)
     );
-    if (distance3 <= threshold) {
+    if (distance2 <= threshold) {
       return existingSegmentMidpointHitCoords;
     }
   }
@@ -14032,11 +14328,11 @@ __publicField(_LinearElementEditor, "getSegmentMidpointHitCoords", (linearElemen
   const midPoints = _LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
   while (index < midPoints.length) {
     if (midPoints[index] !== null) {
-      const distance3 = pointDistance(
+      const distance2 = pointDistance(
         midPoints[index],
         pointFrom(scenePointer.x, scenePointer.y)
       );
-      if (distance3 <= threshold) {
+      if (distance2 <= threshold) {
         return midPoints[index];
       }
     }
@@ -14726,6 +15022,16 @@ var _newElementBase = (type, {
   locked = DEFAULT_ELEMENT_PROPS.locked,
   ...rest
 }) => {
+  if (x < -1e6 || x > 1e6 || y < -1e6 || y > 1e6 || width < -1e6 || width > 1e6 || height < -1e6 || height > 1e6) {
+    console.error("New element size or position is too large", {
+      x,
+      y,
+      width,
+      height,
+      // @ts-ignore
+      points: rest.points
+    });
+  }
   const element = {
     id: rest.id || randomId(),
     type,
@@ -15542,23 +15848,23 @@ var Delta = class _Delta {
    *
    * WARN: it's based on shallow compare performed only on the first level and doesn't go deeper than that.
    */
-  static *distinctKeysIterator(join2, object1, object2, skipShallowCompare = false) {
+  static *distinctKeysIterator(join, object1, object2, skipShallowCompare = false) {
     if (object1 === object2) {
       return;
     }
     let keys = [];
-    if (join2 === "left") {
+    if (join === "left") {
       keys = Object.keys(object1);
-    } else if (join2 === "right") {
+    } else if (join === "right") {
       keys = Object.keys(object2);
-    } else if (join2 === "full") {
+    } else if (join === "full") {
       keys = Array.from(
         /* @__PURE__ */ new Set([...Object.keys(object1), ...Object.keys(object2)])
       );
     } else {
       assertNever(
-        join2,
-        `Unknown distinctKeysIterator's join param "${join2}"`,
+        join,
+        `Unknown distinctKeysIterator's join param "${join}"`,
         true
       );
     }
@@ -17009,7 +17315,7 @@ var maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering, eleme
   return null;
 };
 var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {
-  const offset2 = { x: offsetX, y: offsetY };
+  const offset = { x: offsetX, y: offsetY };
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
   let cx = (x2 - x1) / 2 - (element.x - x1);
   let cy = (y2 - y1) / 2 - (element.y - y1);
@@ -17101,8 +17407,8 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
         rsvg,
         root,
         files,
-        label.x + offset2.x - element.x,
-        label.y + offset2.y - element.y,
+        label.x + offset.x - element.x,
+        label.y + offset.y - element.y,
         renderConfig
       );
       const embeddableNode = roughSVGDrawWithPrecision(
@@ -18660,6 +18966,12 @@ var restoreElementWithProperties = (element, extra) => {
   if ("customData" in element || "customData" in extra) {
     base.customData = "customData" in extra ? extra.customData : element.customData;
   }
+  if (element.x < -1e6 || element.x > 1e6 || element.y < -1e6 || element.y > 1e6 || element.width < -1e6 || element.width > 1e6 || element.height < -1e6 || element.height > 1e6) {
+    console.error(
+      "Restore element with properties size or position is too large",
+      { element }
+    );
+  }
   return {
     // spread the original element properties to not lose unknown ones
     // for forward-compatibility
@@ -18671,6 +18983,9 @@ var restoreElementWithProperties = (element, extra) => {
   };
 };
 var restoreElement = (element) => {
+  if (element.x < -1e6 || element.x > 1e6 || element.y < -1e6 || element.y > 1e6 || element.width < -1e6 || element.width > 1e6 || element.height < -1e6 || element.height > 1e6) {
+    console.error("Restore element size or position is too large", { element });
+  }
   switch (element.type) {
     case "text":
       let fontSize = element.fontSize;
@@ -19024,7 +19339,7 @@ var tryParseNumber = (s) => {
   }
   return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
 };
-var isNumericColumn = (lines, columnIndex) => lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
+var isNumericColumn = (lines, columnIndex) => lines.slice(1).every((line2) => tryParseNumber(line2[columnIndex]) !== null);
 var tryParseCells = (cells) => {
   const numCols = cells[0].length;
   if (numCols > 2) {
@@ -19036,7 +19351,7 @@ var tryParseCells = (cells) => {
     }
     const hasHeader2 = tryParseNumber(cells[0][0]) === null;
     const values = (hasHeader2 ? cells.slice(1) : cells).map(
-      (line) => tryParseNumber(line[0])
+      (line2) => tryParseNumber(line2[0])
     );
     if (values.length < 2) {
       return { type: NOT_SPREADSHEET, reason: "Less than two rows" };
@@ -19082,15 +19397,15 @@ var transposeCells = (cells) => {
   return nextCells;
 };
 var tryParseSpreadsheet = (text) => {
-  let lines = text.trim().split("\n").map((line) => line.trim().split("	"));
+  let lines = text.trim().split("\n").map((line2) => line2.trim().split("	"));
   if (lines.length && lines[0].length !== 2) {
-    lines = text.trim().split("\n").map((line) => line.trim().split(","));
+    lines = text.trim().split("\n").map((line2) => line2.trim().split(","));
   }
   if (lines.length === 0) {
     return { type: NOT_SPREADSHEET, reason: "No values" };
   }
   const numColsFirstLine = lines[0].length;
-  const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
+  const isSpreadsheet = lines.every((line2) => line2.length === numColsFirstLine);
   if (!isSpreadsheet) {
     return {
       type: NOT_SPREADSHEET,
@@ -19277,7 +19592,7 @@ var chartTypeLine = (spreadsheet, x, y) => {
   const maxY = Math.max(...points.map((element) => element[1]));
   const minX = Math.min(...points.map((element) => element[0]));
   const minY = Math.min(...points.map((element) => element[1]));
-  const line = newLinearElement({
+  const line2 = newLinearElement({
     backgroundColor,
     groupIds: [groupId],
     ...commonProps,
@@ -19330,7 +19645,7 @@ var chartTypeLine = (spreadsheet, x, y) => {
       backgroundColor,
       define_import_meta_env_default.DEV
     ),
-    line,
+    line2,
     ...lines,
     ...dots
   ];
@@ -19931,12 +20246,12 @@ var elementsOverlappingBBox = ({
 };
 
 // ../utils/bbox.ts
-function getBBox(line) {
+function getBBox(line2) {
   return [
-    Math.min(line[0][0], line[1][0]),
-    Math.min(line[0][1], line[1][1]),
-    Math.max(line[0][0], line[1][0]),
-    Math.max(line[0][1], line[1][1])
+    Math.min(line2[0][0], line2[1][0]),
+    Math.min(line2[0][1], line2[1][1]),
+    Math.max(line2[0][0], line2[1][0]),
+    Math.max(line2[0][1], line2[1][1])
   ];
 }
 function doBBoxesIntersect(a, b) {
@@ -20979,7 +21294,7 @@ var BinaryHeap = class {
 var DEDUP_TRESHOLD = 1;
 var BASE_PADDING = 40;
 var handleSegmentRenormalization = (arrow, elementsMap) => {
-  const nextFixedSegments = arrow.fixedSegments ? structuredClone(arrow.fixedSegments) : null;
+  const nextFixedSegments = arrow.fixedSegments ? arrow.fixedSegments.slice() : null;
   if (nextFixedSegments) {
     const _nextPoints = [];
     arrow.points.map((p) => pointFrom(arrow.x + p[0], arrow.y + p[1])).forEach((p, i, points) => {
@@ -21394,10 +21709,10 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     )
   }));
   const newPoints = [];
-  const offset2 = 2 + (startIsSpecial ? 1 : 0);
+  const offset = 2 + (startIsSpecial ? 1 : 0);
   const endOffset = 2 + (endIsSpecial ? 1 : 0);
-  while (newPoints.length + offset2 < globalUpdatedPoints.length - endOffset) {
-    newPoints.push(globalUpdatedPoints[newPoints.length + offset2]);
+  while (newPoints.length + offset < globalUpdatedPoints.length - endOffset) {
+    newPoints.push(globalUpdatedPoints[newPoints.length + offset]);
   }
   {
     const secondPoint = globalUpdatedPoints[startIsSpecial ? 2 : 1];
@@ -21505,10 +21820,30 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     endIsSpecial
   );
 };
+var MAX_POS = 1e6;
 var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
   if (arrow.points.length < 2) {
     return { points: updates.points ?? arrow.points };
   }
+  if (arrow.x < -MAX_POS || arrow.x > MAX_POS || arrow.y < -MAX_POS || arrow.y > MAX_POS || arrow.x + (updates?.points?.[updates?.points?.length - 1]?.[0] ?? 0) < -MAX_POS || arrow.x + (updates?.points?.[updates?.points?.length - 1]?.[0] ?? 0) > MAX_POS || arrow.y + (updates?.points?.[updates?.points?.length - 1]?.[1] ?? 0) < -MAX_POS || arrow.y + (updates?.points?.[updates?.points?.length - 1]?.[1] ?? 0) > MAX_POS || arrow.x + (arrow?.points?.[arrow?.points?.length - 1]?.[0] ?? 0) < -MAX_POS || arrow.x + (arrow?.points?.[arrow?.points?.length - 1]?.[0] ?? 0) > MAX_POS || arrow.y + (arrow?.points?.[arrow?.points?.length - 1]?.[1] ?? 0) < -MAX_POS || arrow.y + (arrow?.points?.[arrow?.points?.length - 1]?.[1] ?? 0) > MAX_POS) {
+    console.error(
+      "Elbow arrow (or update) is outside reasonable bounds (> 1e6)",
+      {
+        arrow,
+        updates
+      }
+    );
+  }
+  arrow.x = clamp(arrow.x, -MAX_POS, MAX_POS);
+  arrow.y = clamp(arrow.y, -MAX_POS, MAX_POS);
+  if (updates.points) {
+    updates.points = updates.points.map(
+      ([x, y]) => pointFrom(
+        clamp(x, -MAX_POS, MAX_POS),
+        clamp(y, -MAX_POS, MAX_POS)
+      )
+    );
+  }
   if (!define_import_meta_env_default.PROD) {
     invariant(
       !updates.points || updates.points.length >= 2,
@@ -21541,7 +21876,7 @@ var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
   }
   const updatedPoints = updates.points ? updates.points && updates.points.length === 2 ? arrow.points.map(
     (p, idx) => idx === 0 ? updates.points[0] : idx === arrow.points.length - 1 ? updates.points[1] : p
-  ) : structuredClone(updates.points) : structuredClone(arrow.points);
+  ) : updates.points.slice() : arrow.points.slice();
   const {
     startHeading,
     endHeading,
@@ -21630,19 +21965,27 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     options?.zoom
   ) : [startElement, endElement];
   const startGlobalPoint = getGlobalPoint(
+    {
+      ...arrow,
+      elbowed: true,
+      points: nextPoints
+    },
+    "start",
     arrow.startBinding?.fixedPoint,
     origStartGlobalPoint,
-    origEndGlobalPoint,
-    elementsMap,
     startElement,
     hoveredStartElement,
     options?.isDragging
   );
   const endGlobalPoint = getGlobalPoint(
+    {
+      ...arrow,
+      elbowed: true,
+      points: nextPoints
+    },
+    "end",
     arrow.endBinding?.fixedPoint,
     origEndGlobalPoint,
-    origStartGlobalPoint,
-    elementsMap,
     endElement,
     hoveredEndElement,
     options?.isDragging
@@ -22162,11 +22505,11 @@ var gridNodeFromAddr = ([col, row], grid) => {
   }
   return grid.data[row * grid.col + col] ?? null;
 };
-var pointToGridNode = (point2, grid) => {
+var pointToGridNode = (point, grid) => {
   for (let col = 0; col < grid.col; col++) {
     for (let row = 0; row < grid.row; row++) {
       const candidate = gridNodeFromAddr([col, row], grid);
-      if (candidate && point2[0] === candidate.pos[0] && point2[1] === candidate.pos[1]) {
+      if (candidate && point[0] === candidate.pos[0] && point[1] === candidate.pos[1]) {
         return candidate;
       }
     }
@@ -22189,16 +22532,30 @@ var getBindableElementForId = (id, elementsMap) => {
 var normalizeArrowElementUpdate = (global, nextFixedSegments, startIsSpecial, endIsSpecial) => {
   const offsetX = global[0][0];
   const offsetY = global[0][1];
-  const points = global.map(
+  let points = global.map(
     (p) => pointTranslate(
       p,
       vectorScale(vectorFromPoint(global[0]), -1)
     )
   );
+  if (offsetX < -MAX_POS || offsetX > MAX_POS || offsetY < -MAX_POS || offsetY > MAX_POS || offsetX + points[points.length - 1][0] < -MAX_POS || offsetY + points[points.length - 1][0] > MAX_POS || offsetX + points[points.length - 1][1] < -MAX_POS || offsetY + points[points.length - 1][1] > MAX_POS) {
+    console.error(
+      "Elbow arrow normalization is outside reasonable bounds (> 1e6)",
+      {
+        x: offsetX,
+        y: offsetY,
+        points,
+        ...getSizeFromPoints(points)
+      }
+    );
+  }
+  points = points.map(
+    ([x, y]) => pointFrom(clamp(x, -1e6, 1e6), clamp(y, -1e6, 1e6))
+  );
   return {
     points,
-    x: offsetX,
-    y: offsetY,
+    x: clamp(offsetX, -1e6, 1e6),
+    y: clamp(offsetY, -1e6, 1e6),
     fixedSegments: (nextFixedSegments?.length ?? 0) > 0 ? nextFixedSegments : null,
     ...getSizeFromPoints(points),
     startIsSpecial,
@@ -22248,14 +22605,13 @@ var neighborIndexToHeading = (idx) => {
   }
   return HEADING_LEFT;
 };
-var getGlobalPoint = (fixedPointRatio, initialPoint, otherPoint, elementsMap, boundElement, hoveredElement, isDragging) => {
+var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, boundElement, hoveredElement, isDragging) => {
   if (isDragging) {
     if (hoveredElement) {
-      const snapPoint = getSnapPoint(
-        initialPoint,
-        otherPoint,
+      const snapPoint = bindPointToSnapToElementOutline(
+        arrow,
         hoveredElement,
-        elementsMap
+        startOrEnd
       );
       return snapToMid(hoveredElement, snapPoint);
     }
@@ -22267,26 +22623,18 @@ var getGlobalPoint = (fixedPointRatio, initialPoint, otherPoint, elementsMap, bo
       boundElement
     );
     return Math.abs(
-      distanceToBindableElement(boundElement, fixedGlobalPoint, elementsMap) - FIXED_BINDING_DISTANCE
-    ) > 0.01 ? getSnapPoint(initialPoint, otherPoint, boundElement, elementsMap) : fixedGlobalPoint;
+      distanceToBindableElement(boundElement, fixedGlobalPoint) - FIXED_BINDING_DISTANCE
+    ) > 0.01 ? bindPointToSnapToElementOutline(arrow, boundElement, startOrEnd) : fixedGlobalPoint;
   }
   return initialPoint;
 };
-var getSnapPoint = (p, otherPoint, element, elementsMap) => bindPointToSnapToElementOutline(
-  isRectanguloidElement(element) ? avoidRectangularCorner(element, p) : p,
-  otherPoint,
-  element,
-  elementsMap
-);
 var getBindPointHeading = (p, otherPoint, elementsMap, hoveredElement, origPoint) => getHeadingForElbowArrowSnap(
   p,
   otherPoint,
   hoveredElement,
   hoveredElement && aabbForElement(
     hoveredElement,
-    Array(4).fill(
-      distanceToBindableElement(hoveredElement, p, elementsMap)
-    )
+    Array(4).fill(distanceToBindableElement(hoveredElement, p))
   ),
   elementsMap,
   origPoint
@@ -23436,9 +23784,19 @@ var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight,
         y: y - (newHeight - prevHeight) / 2
       };
     case "east-side":
+      if (Math.abs(
+        y + (prevWidth - newWidth) / 2 * Math.sin(angle) + (prevHeight - newHeight) / 2
+      ) > 1e6) {
+        console.error(
+          "getResizedOrigin() new calculation creates extremely large (> 1e6) y value where the old calculation resulted in",
+          {
+            result: y + (newHeight - prevHeight) / 2 + (prevWidth - newWidth) / 2 * Math.sin(angle)
+          }
+        );
+      }
       return {
         x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle) + 1),
-        y: y + (prevWidth - newWidth) / 2 * Math.sin(angle) + (prevHeight - newHeight) / 2
+        y: y + (newHeight - prevHeight) / 2 + (prevWidth - newWidth) / 2 * Math.sin(angle)
       };
     case "west-side":
       return {
@@ -23962,7 +24320,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 };
 
 // element/dragElements.ts
-var dragSelectedElements = (pointerDownState, _selectedElements, offset2, scene, snapOffset, gridSize) => {
+var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene, snapOffset, gridSize) => {
   if (_selectedElements.length === 1 && isElbowArrow(_selectedElements[0]) && (_selectedElements[0].startBinding || _selectedElements[0].endBinding)) {
     return;
   }
@@ -23996,7 +24354,7 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset2, scene,
   );
   const adjustedOffset = calculateOffset(
     commonBounds,
-    offset2,
+    offset,
     snapOffset,
     gridSize
   );
@@ -24179,7 +24537,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./data/image-TC7JM54G.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-NQXTDRIN.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -25253,4 +25611,4 @@ export {
   getNormalizedZoom,
   getNormalizedGridStep
 };
-//# sourceMappingURL=chunk-CI27YPGF.js.map
+//# sourceMappingURL=chunk-UGZAZPWM.js.map