@dwelle/excalidraw 0.5.0-e05a141 → 0.5.0-e2a82c4d8

package/dist/dev/{chunk-P7XQCHXR.js → chunk-HJWER26G.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-B7UQ5W6R.js";
+} from "./chunk-Q5BO7QEK.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -212,7 +212,12 @@ function pointsEqual(a, b, tolerance = PRECISION) {
   const abs = Math.abs;
   return abs(a[0] - b[0]) < tolerance && abs(a[1] - b[1]) < tolerance;
 }
-function pointRotateRads([x, y], [cx, cy], angle) {
+function pointRotateRads(point, center, angle) {
+  if (!angle) {
+    return point;
+  }
+  const [x, y] = point;
+  const [cx, cy] = center;
   return pointFrom(
     (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
     (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
@@ -343,8 +348,15 @@ var initial_guesses = [
   [0.2, 0],
   [0.8, 0]
 ];
-var calculate = ([t0, s0], l, c) => {
-  const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 0.01, 4);
+var calculate = ([t0, s0], l, c, tolerance = 0.01, iterLimit = 4) => {
+  const solution = solveWithAnalyticalJacobian(
+    c,
+    l,
+    t0,
+    s0,
+    tolerance,
+    iterLimit
+  );
   if (!solution) {
     return null;
   }
@@ -354,16 +366,34 @@ var calculate = ([t0, s0], l, c) => {
   }
   return bezierEquation(c, t);
 };
-function curveIntersectLineSegment(c, l) {
-  let solution = calculate(initial_guesses[0], l, c);
+function curveIntersectLineSegment(c, l, opts) {
+  let solution = calculate(
+    initial_guesses[0],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
-  solution = calculate(initial_guesses[1], l, c);
+  solution = calculate(
+    initial_guesses[1],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
-  solution = calculate(initial_guesses[2], l, c);
+  solution = calculate(
+    initial_guesses[2],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
@@ -1789,6 +1819,17 @@ var getDateTime = () => {
   return `${year}-${month}-${day}-${hr}${min}`;
 };
 var capitalizeString = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+var formatTimeToHourMinute = (value, opts) => {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return date.toLocaleTimeString(opts?.locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    ...opts?.hour12 === void 0 ? {} : { hour12: opts.hour12 }
+  });
+};
 var isToolIcon = (target) => target instanceof HTMLElement && target.className.includes("ToolIcon");
 var isInputLike = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
 target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
@@ -1796,7 +1837,7 @@ var isInteractive = (target) => {
   return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
 };
 var isWritableElement = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search");
+target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search") || target instanceof HTMLElement && target.closest(".cm-editor") !== null;
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -1841,32 +1882,23 @@ var debounce = (fn, timeout) => {
   };
   return ret;
 };
-var throttleRAF = (fn, opts) => {
+var throttleRAF = (fn) => {
   let timerId = null;
   let lastArgs = null;
-  let lastArgsTrailing = null;
-  const scheduleFunc = (args) => {
+  const scheduleFunc = () => {
     timerId = window.requestAnimationFrame(() => {
       timerId = null;
-      fn(...args);
+      const args = lastArgs;
       lastArgs = null;
-      if (lastArgsTrailing) {
-        lastArgs = lastArgsTrailing;
-        lastArgsTrailing = null;
-        scheduleFunc(lastArgs);
+      if (args) {
+        fn(...args);
       }
     });
   };
   const ret = (...args) => {
-    if (isTestEnv()) {
-      fn(...args);
-      return;
-    }
     lastArgs = args;
     if (timerId === null) {
-      scheduleFunc(lastArgs);
-    } else if (opts?.trailing) {
-      lastArgsTrailing = args;
+      scheduleFunc();
     }
   };
   ret.flush = () => {
@@ -1875,12 +1907,12 @@ var throttleRAF = (fn, opts) => {
       timerId = null;
     }
     if (lastArgs) {
-      fn(...lastArgsTrailing || lastArgs);
-      lastArgs = lastArgsTrailing = null;
+      fn(...lastArgs);
+      lastArgs = null;
     }
   };
   ret.cancel = () => {
-    lastArgs = lastArgsTrailing = null;
+    lastArgs = null;
     if (timerId !== null) {
       cancelAnimationFrame(timerId);
       timerId = null;
@@ -2688,6 +2720,8 @@ var getDefaultAppState = () => {
     gridStep: DEFAULT_GRID_STEP,
     gridModeEnabled: false,
     isBindingEnabled: true,
+    bindingPreference: "enabled",
+    isMidpointSnappingEnabled: true,
     defaultSidebarDockedPreference: false,
     isLoading: false,
     isResizing: false,
@@ -2743,7 +2777,8 @@ var getDefaultAppState = () => {
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
-    bindMode: "orbit"
+    bindMode: "orbit",
+    boxSelectionMode: "contain"
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -2792,7 +2827,10 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   gridStep: { browser: true, export: true, server: true },
   gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
-  isBindingEnabled: { browser: false, export: false, server: false },
+  isBindingEnabled: { browser: true, export: false, server: false },
+  boxSelectionMode: { browser: true, export: false, server: false },
+  bindingPreference: { browser: true, export: false, server: false },
+  isMidpointSnappingEnabled: { browser: true, export: false, server: false },
   defaultSidebarDockedPreference: {
     browser: true,
     export: false,
@@ -3749,12 +3787,12 @@ var setElementShapesCacheEntry = (element, shape, offset) => {
   }
   shapes.set(offset, shape);
 };
-function deconstructLinearOrFreeDrawElement(element) {
+function deconstructLinearOrFreeDrawElement(element, elementsMap) {
   const cachedShape = getElementShapesCacheEntry(element, 0);
   if (cachedShape) {
     return cachedShape;
   }
-  const ops = generateLinearCollisionShape(element);
+  const ops = generateLinearCollisionShape(element, elementsMap);
   const lines = [];
   const curves = [];
   for (let idx = 0; idx < ops.length; idx += 1) {
@@ -4171,19 +4209,21 @@ var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
   );
   return candidate;
 };
-var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom) => {
+var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom, isMidpointSnappingEnabled = true) => {
   invariant(arrow.points.length >= 2, "Arrow must have at least two points");
   if (arrow.width < 3 && arrow.height < 3) {
     return null;
   }
-  const sideMidPoint = getSnapOutlineMidPoint(
-    point,
-    element,
-    elementsMap,
-    zoom
-  );
-  if (sideMidPoint) {
-    return sideMidPoint;
+  if (isMidpointSnappingEnabled) {
+    const sideMidPoint = getSnapOutlineMidPoint(
+      point,
+      element,
+      elementsMap,
+      zoom
+    );
+    if (sideMidPoint) {
+      return sideMidPoint;
+    }
   }
   const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
     element,
@@ -4294,9 +4334,9 @@ var getLineHeightInPx = (fontSize, lineHeight) => {
 var getApproxMinLineHeight = (fontSize, lineHeight) => {
   return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
 };
-var textMetricsProvider;
+var PROVIDER_KEY = Symbol.for("excalidraw.textMetricsProvider");
 var setCustomTextMetricsProvider = (provider) => {
-  textMetricsProvider = provider;
+  globalThis[PROVIDER_KEY] = provider;
 };
 var CanvasTextMetricsProvider = class {
   constructor() {
@@ -4322,10 +4362,11 @@ var CanvasTextMetricsProvider = class {
   }
 };
 var getLineWidth = (text, font) => {
-  if (!textMetricsProvider) {
-    textMetricsProvider = new CanvasTextMetricsProvider();
+  let provider = globalThis[PROVIDER_KEY];
+  if (!provider) {
+    provider = new CanvasTextMetricsProvider();
   }
-  return textMetricsProvider.getLineWidth(text, font);
+  return provider.getLineWidth(text, font);
 };
 var getTextWidth = (text, font) => {
   const lines = splitIntoLines(text);
@@ -4620,91 +4661,168 @@ var parseTokens = (line2) => {
   return line2.normalize("NFC").split(breakLineRegex).filter(Boolean);
 };
 var wrapText = (text, font, maxWidth) => {
+  return getWrappedTextLines(text, font, maxWidth).map((line2) => line2.text).join("\n");
+};
+var getHardLineBreaks = (text) => {
+  let offset = 0;
+  return text.split("\n").map((line2) => {
+    const start = offset;
+    const end = start + line2.length;
+    offset = end + 1;
+    return {
+      text: line2,
+      start,
+      end
+    };
+  });
+};
+var getWrappedTextLines = (text, font, maxWidth) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
+    return getHardLineBreaks(text);
   }
   const lines = [];
-  const originalLines = text.split("\n");
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font);
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
+  let offset = 0;
+  for (const originalLine of text.split("\n")) {
+    const originalLineWidth = getLineWidth(originalLine, font);
+    if (originalLineWidth <= maxWidth) {
+      lines.push({
+        text: originalLine,
+        start: offset,
+        end: offset + originalLine.length
+      });
+    } else {
+      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
     }
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
+    offset += originalLine.length + 1;
   }
-  return lines.join("\n");
+  return lines;
 };
-var wrapLine = (line2, font, maxWidth) => {
+var wrapLine = (line2, font, maxWidth, lineStart) => {
   const lines = [];
   const tokens = parseTokens(line2);
-  const tokenIterator = tokens[Symbol.iterator]();
   let currentLine = "";
+  let currentLineStart = lineStart;
+  let currentLineEnd = lineStart;
   let currentLineWidth = 0;
-  let iterator = tokenIterator.next();
-  while (!iterator.done) {
-    const token = iterator.value;
+  let tokenOffset = lineStart;
+  let tokenIndex = 0;
+  while (tokenIndex < tokens.length) {
+    const token = tokens[tokenIndex];
+    const tokenStart = tokenOffset;
+    const tokenEnd = tokenStart + token.length;
     const testLine = currentLine + token;
     const testLineWidth = isSingleCharacter(token) ? currentLineWidth + charWidth.calculate(token, font) : getLineWidth(testLine, font);
     if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = tokenStart;
+      }
       currentLine = testLine;
+      currentLineEnd = tokenEnd;
       currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
+      tokenOffset = tokenEnd;
+      tokenIndex++;
       continue;
     }
     if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
+        text: "",
+        start: tokenStart,
+        end: tokenStart
+      };
       const precedingLines = wrappedWord.slice(0, -1);
       lines.push(...precedingLines);
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font);
-      iterator = tokenIterator.next();
+      currentLine = trailingLine.text;
+      currentLineStart = trailingLine.start;
+      currentLineEnd = trailingLine.end;
+      currentLineWidth = getLineWidth(trailingLine.text, font);
+      tokenOffset = tokenEnd;
+      tokenIndex++;
     } else {
-      lines.push(currentLine.trimEnd());
+      lines.push(
+        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd)
+      );
       currentLine = "";
+      currentLineStart = tokenStart;
+      currentLineEnd = tokenStart;
       currentLineWidth = 0;
     }
   }
   if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
+    const trailingLine = trimLine(
+      currentLine,
+      currentLineStart,
+      currentLineEnd,
+      font,
+      maxWidth
+    );
     lines.push(trailingLine);
   }
   return lines;
 };
-var wrapWord = (word, font, maxWidth) => {
+var wrapWord = (word, font, maxWidth, wordStart) => {
   if (getEmojiRegex().test(word)) {
-    return [word];
+    return [
+      {
+        text: word,
+        start: wordStart,
+        end: wordStart + word.length
+      }
+    ];
   }
   satisfiesWordInvariant(word);
   const lines = [];
   const chars = Array.from(word);
   let currentLine = "";
+  let currentLineStart = wordStart;
+  let currentLineEnd = wordStart;
   let currentLineWidth = 0;
+  let offset = wordStart;
   for (const char of chars) {
+    const charStart = offset;
+    const charEnd = charStart + char.length;
     const _charWidth = charWidth.calculate(char, font);
     const testLineWidth = currentLineWidth + _charWidth;
     if (testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = charStart;
+      }
       currentLine = currentLine + char;
+      currentLineEnd = charEnd;
       currentLineWidth = testLineWidth;
+      offset = charEnd;
       continue;
     }
     if (currentLine) {
-      lines.push(currentLine);
+      lines.push({
+        text: currentLine,
+        start: currentLineStart,
+        end: currentLineEnd
+      });
     }
     currentLine = char;
+    currentLineStart = charStart;
+    currentLineEnd = charEnd;
     currentLineWidth = _charWidth;
+    offset = charEnd;
   }
   if (currentLine) {
-    lines.push(currentLine);
+    lines.push({
+      text: currentLine,
+      start: currentLineStart,
+      end: currentLineEnd
+    });
   }
   return lines;
 };
-var trimLine = (line2, font, maxWidth) => {
+var trimLine = (line2, start, end, font, maxWidth) => {
   const shouldTrimWhitespaces = getLineWidth(line2, font) > maxWidth;
   if (!shouldTrimWhitespaces) {
-    return line2;
+    return {
+      text: line2,
+      start,
+      end
+    };
   }
   let [, trimmedLine, whitespaces] = line2.match(/^(.+?)(\s+)$/) ?? [
     line2,
@@ -4721,7 +4839,19 @@ var trimLine = (line2, font, maxWidth) => {
     trimmedLine = trimmedLine + whitespace;
     trimmedLineWidth = testLineWidth;
   }
-  return trimmedLine;
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
+};
+var trimLineEndAtSoftBreak = (line2, start, end) => {
+  const trimmedLine = line2.trimEnd();
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
 };
 var isSingleCharacter = (maybeSingleCharacter) => {
   return maybeSingleCharacter.codePointAt(0) !== void 0 && maybeSingleCharacter.codePointAt(1) === void 0;
@@ -4960,7 +5090,8 @@ var getContainerCenter = (container, appState, elementsMap) => {
   if (!midSegmentMidpoint) {
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
-      index + 1
+      index + 1,
+      elementsMap
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -5095,7 +5226,7 @@ var distanceToElement = (element, elementsMap, p) => {
     case "line":
     case "arrow":
     case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
   }
 };
 var distanceToRectanguloidElement = (element, elementsMap, p) => {
@@ -5124,8 +5255,11 @@ var distanceToEllipseElement = (element, elementsMap, p) => {
     ellipse(center, element.width / 2, element.height / 2)
   );
 };
-var distanceToLinearOrFreeDraElement = (element, p) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var distanceToLinearOrFreeDraElement = (element, elementsMap, p) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   return Math.min(
     ...lines.map((s) => distanceToLineSegment(p, s)),
     ...curves.map((a) => curvePointDistance(a, p))
@@ -5174,14 +5308,11 @@ var hitElementItself = ({
     )
   ) : false;
   const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointWithinBounds(
-    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
-    pointRotateRads(
-      point,
-      getCenterForBounds(bounds),
-      -element.angle
-    ),
-    pointFrom(bounds[2] + threshold, bounds[3] + threshold)
+  const hitBounds = isPointInRotatedBounds(
+    point,
+    bounds,
+    element.angle,
+    threshold
   );
   if (!hitBounds && !hitFrameName) {
     return false;
@@ -5199,13 +5330,17 @@ var hitElementItself = ({
   cachedHit = result;
   return result;
 };
+var isPointInRotatedBounds = (point, bounds, angle, tolerance = 0) => {
+  const adjustedPoint = angle === 0 ? point : pointRotateRads(point, getCenterForBounds(bounds), -angle);
+  return isPointWithinBounds(
+    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
+    adjustedPoint,
+    pointFrom(bounds[2] + tolerance, bounds[3] + tolerance)
+  );
+};
 var hitElementBoundingBox = (point, element, elementsMap, tolerance = 0) => {
-  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-  x1 -= tolerance;
-  y1 -= tolerance;
-  x2 += tolerance;
-  y2 += tolerance;
-  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
+  const bounds = getElementBounds(element, elementsMap, true);
+  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
 };
 var hitElementBoundingBoxOnly = (hitArgs, elementsMap) => !hitElementItself(hitArgs) && // bound text is considered part of the element (even if it's outside the bounding box)
 !hitElementBoundText(hitArgs.point, hitArgs.element, elementsMap) && hitElementBoundingBox(hitArgs.point, hitArgs.element, elementsMap);
@@ -5364,7 +5499,12 @@ var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0,
     case "line":
     case "freedraw":
     case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line2, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line2,
+        elementsMap,
+        onlyFirst
+      );
   }
 };
 var curveIntersections = (curves, segment, intersections, center, angle, onlyFirst = false) => {
@@ -5403,8 +5543,11 @@ var lineIntersections = (lines, segment, intersections, center, angle, onlyFirst
   }
   return intersections;
 };
-var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = false) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var intersectLinearOrFreeDrawWithLineSegment = (element, segment, elementsMap, onlyFirst = false) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   const intersections = [];
   for (const l of lines) {
     const intersection = lineSegmentIntersectionPoints(l, segment);
@@ -5426,7 +5569,9 @@ var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = fa
     if (!doBoundsIntersect(b1, b2)) {
       continue;
     }
-    const hits = curveIntersectLineSegment(c, segment);
+    const hits = curveIntersectLineSegment(c, segment, {
+      iterLimit: 10
+    });
     if (hits.length > 0) {
       intersections.push(...hits);
       if (onlyFirst) {
@@ -6484,7 +6629,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
   const origEndGlobalPoint = pointTranslate(nextPoints[nextPoints.length - 1], vector(arrow.x, arrow.y));
   let hoveredStartElement = null;
   let hoveredEndElement = null;
-  if (options?.isDragging) {
+  if (options?.isDragging && options?.isBindingEnabled !== false) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement = getHoveredElement(
       origStartGlobalPoint,
@@ -6515,7 +6660,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origStartGlobalPoint,
     hoveredStartElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const endGlobalPoint = getGlobalPoint(
     {
@@ -6530,7 +6677,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origEndGlobalPoint,
     hoveredEndElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const startHeading = getBindPointHeading(
     startGlobalPoint,
@@ -7153,14 +7302,16 @@ var neighborIndexToHeading = (idx) => {
   }
   return HEADING_LEFT;
 };
-var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging) => {
+var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging, isBindingEnabled2 = true, isMidpointSnappingEnabled = true) => {
   if (isDragging) {
-    if (element && elementsMap) {
+    if (isBindingEnabled2 && element && elementsMap) {
       return bindPointToSnapToElementOutline(
         arrow,
         element,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        void 0,
+        isMidpointSnappingEnabled
       );
     }
     return initialPoint;
@@ -7321,9 +7472,6 @@ var maxBindingDistance_simple = (zoom) => {
     BASE_BINDING_DISTANCE * 2
   );
 };
-var shouldEnableBindingForPointerEvent = (event) => {
-  return !event[KEYS.CTRL_OR_CMD];
-};
 var isBindingEnabled = (appState) => {
   return appState.isBindingEnabled;
 };
@@ -7341,8 +7489,20 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
       finalize: true
     }
   );
-  bindOrUnbindBindingElementEdge(arrow, start, "start", scene);
-  bindOrUnbindBindingElementEdge(arrow, end, "end", scene);
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    start,
+    "start",
+    scene,
+    appState.isBindingEnabled
+  );
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    end,
+    "end",
+    scene,
+    appState.isBindingEnabled
+  );
   if (start.focusPoint || end.focusPoint) {
     const updates = /* @__PURE__ */ new Map();
     if (start.focusPoint) {
@@ -7371,11 +7531,19 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
   }
   return { start, end };
 };
-var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene) => {
+var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene, shouldSnapToOutline = true) => {
   if (mode === null) {
     unbindBindingElement(arrow, startOrEnd, scene);
   } else if (mode !== void 0) {
-    bindBindingElement(arrow, element, mode, startOrEnd, scene, focusPoint);
+    bindBindingElement(
+      arrow,
+      element,
+      mode,
+      startOrEnd,
+      scene,
+      focusPoint,
+      shouldSnapToOutline
+    );
   }
 };
 var bindingStrategyForElbowArrowEndpointDragging = (arrow, draggingPoints, elementsMap, elements, zoom) => {
@@ -7729,7 +7897,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       hit,
       startDragged ? "start" : "end",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || globalPoint
   } : { mode: null };
   const otherEndpoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
@@ -7758,7 +7927,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       otherBindableElement,
       startDragged ? "end" : "start",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || otherEndpoint
   } : { mode: void 0 } : { mode: void 0 };
   return {
@@ -7868,7 +8038,7 @@ var bindOrUnbindBindingElements = (selectedArrows, scene, appState) => {
     );
   });
 };
-var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint) => {
+var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint, shouldSnapToOutline = true) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   let binding;
   if (isElbowArrow(arrow)) {
@@ -7879,7 +8049,8 @@ var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusP
         arrow,
         hoveredElement,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        shouldSnapToOutline
       )
     };
   } else {
@@ -8091,7 +8262,7 @@ var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
   const bindDistance = maxBindingDistance_simple(zoom);
   return distance2 > bindDistance ? null : distance2;
 };
-var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector) => {
+var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector, isMidpointSnappingEnabled = true) => {
   const elbowed = isElbowArrow(arrowElement);
   const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
@@ -8120,13 +8291,7 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
     const isHorizontal = headingIsHorizontal(
       headingForPointFromElement(bindableElement, aabb, point)
     );
-    const snapPoint = snapToMid(
-      bindableElement,
-      elementsMap,
-      edgePoint,
-      0.05,
-      arrowElement
-    );
+    const snapPoint = isMidpointSnappingEnabled ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement) : void 0;
     const resolved = snapPoint || point;
     const otherPoint = pointFrom(
       isHorizontal ? bindableCenter[0] : resolved[0],
@@ -8458,17 +8623,23 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     null
   );
 };
-var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   const bounds = [
     hoveredElement.x,
     hoveredElement.y,
     hoveredElement.x + hoveredElement.width,
     hoveredElement.y + hoveredElement.height
   ];
-  const snappedPoint = bindPointToSnapToElementOutline(
+  const snappedPoint = shouldSnapToOutline ? bindPointToSnapToElementOutline(
     linearElement,
     hoveredElement,
     startOrEnd,
+    elementsMap,
+    void 0,
+    isMidpointSnappingEnabled
+  ) : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    startOrEnd === "start" ? 0 : -1,
     elementsMap
   );
   const globalMidPoint = pointFrom(
@@ -8551,16 +8722,20 @@ var fixDuplicatedBindingsAfterDuplication = (duplicatedElements, origIdToDuplica
     if (isElbowArrow(duplicateElement2)) {
       Object.assign(
         duplicateElement2,
-        updateElbowArrowPoints(duplicateElement2, duplicateElementsMap, {
-          points: [
-            duplicateElement2.points[0],
-            duplicateElement2.points[duplicateElement2.points.length - 1]
-          ]
-        })
+        normalizeElbowArrow(duplicateElement2, duplicateElementsMap)
       );
     }
   }
 };
+var normalizeElbowArrow = (arrow, elementsMap) => updateElbowArrowPoints(arrow, elementsMap, {
+  points: [arrow.points[0], arrow.points[arrow.points.length - 1]]
+});
+var normalizeElbowArrows = (elements, elementsMap) => {
+  const map = elementsMap ?? arrayToMap(elements);
+  return elements.map(
+    (element) => isElbowArrow(element) ? { ...element, ...normalizeElbowArrow(element, map) } : element
+  );
+};
 var fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
   const elements = arrayToMap(sceneElements);
   for (const element of deletedElements) {
@@ -9006,11 +9181,20 @@ var _LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9046,7 +9230,8 @@ var _LinearElementEditor = class _LinearElementEditor {
           startBindingElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       }
     };
@@ -9137,11 +9322,20 @@ var _LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state) && (startIsSelected || endIsSelected)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9194,7 +9388,8 @@ var _LinearElementEditor = class _LinearElementEditor {
           altFocusPointBindableElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       },
       segmentMidPointHoveredCoords: newSelectedMidPointHoveredCoords,
@@ -9272,7 +9467,7 @@ var _LinearElementEditor = class _LinearElementEditor {
       }
     };
   }
-  static isSegmentTooShort(element, startPoint, endPoint, index, zoom) {
+  static isSegmentTooShort(element, startPoint, endPoint, index, zoom, elementsMap) {
     if (isElbowArrow(element)) {
       if (index >= 0 && index < element.points.length) {
         return pointDistance(startPoint, endPoint) * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE / 2;
@@ -9281,7 +9476,10 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     let distance2 = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap
+      );
       invariant(
         lines.length === 0 && curves.length > 0,
         "Only linears built out of curves are supported"
@@ -9294,7 +9492,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     return distance2 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
-  static getSegmentMidPoint(element, index) {
+  static getSegmentMidPoint(element, index, elementsMap) {
     if (isElbowArrow(element)) {
       invariant(
         element.points.length >= index,
@@ -9303,7 +9501,10 @@ var _LinearElementEditor = class _LinearElementEditor {
       const p = pointCenter(element.points[index - 1], element.points[index]);
       return pointFrom(element.x + p[0], element.y + p[1]);
     }
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap
+    );
     invariant(
       lines.length === 0 && curves.length > 0 || lines.length > 0 && curves.length === 0,
       "Only linears built out of either segments or curves are supported"
@@ -9735,7 +9936,7 @@ var _LinearElementEditor = class _LinearElementEditor {
       offsetY
     );
   }
-  static movePoints(element, scene, pointUpdates, otherUpdates) {
+  static movePoints(element, scene, pointUpdates, otherUpdates, options) {
     const { points } = element;
     if (isLineElement(element) && element.polygon) {
       const firstPointUpdate = pointUpdates.get(0);
@@ -9778,7 +9979,9 @@ var _LinearElementEditor = class _LinearElementEditor {
       offsetY,
       otherUpdates,
       {
-        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging)
+        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging),
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       }
     );
   }
@@ -9857,7 +10060,9 @@ var _LinearElementEditor = class _LinearElementEditor {
       updates.points = Array.from(nextPoints);
       scene.mutateElement(element, updates, {
         informMutation: true,
-        isDragging: options?.isDragging ?? false
+        isDragging: options?.isDragging ?? false,
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       });
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
@@ -9999,7 +10204,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
       element.points[index],
       element.points[index + 1],
       index,
-      appState.zoom
+      appState.zoom,
+      elementsMap
     )) {
       midpoints.push(null);
       index++;
@@ -10007,7 +10213,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
     }
     const segmentMidPoint = _LinearElementEditor.getSegmentMidPoint(
       element,
-      index + 1
+      index + 1,
+      elementsMap
     );
     midpoints.push(segmentMidPoint);
     index++;
@@ -10094,7 +10301,8 @@ __publicField(_LinearElementEditor, "getBoundTextElementPosition", (element, bou
     const index = element.points.length / 2 - 1;
     const midSegmentMidpoint = _LinearElementEditor.getSegmentMidPoint(
       element,
-      index + 1
+      index + 1,
+      elementsMap
     );
     x = midSegmentMidpoint[0] - boundTextElement.width / 2;
     y = midSegmentMidpoint[1] - boundTextElement.height / 2;
@@ -10258,14 +10466,14 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates: {
         suggestedBinding: suggestedBindingElement ? {
           element: suggestedBindingElement,
-          midPoint: snapToMid(
+          midPoint: app.state.isMidpointSnappingEnabled ? snapToMid(
             suggestedBindingElement,
             elementsMap,
             pointFrom(
               scenePointerX - linearElementEditor.pointerOffset.x,
               scenePointerY - linearElementEditor.pointerOffset.y
             )
-          )
+          ) : void 0
         } : null
       }
     };
@@ -10409,7 +10617,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.endBinding.elementId
   ) : null;
   const endLocalPoint = startIsDraggingOverEndElement ? nextArrow.points[nextArrow.points.length - 1] : endIsDraggingOverStartElement && app.state.bindMode !== "inside" && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : endBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "endBinding",
     nextArrow.endBinding,
     endBindable,
@@ -10421,7 +10629,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.startBinding.elementId
   ) : null;
   const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag("COMPLEX_BINDINGS") ? endLocalPoint : startBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "startBinding",
     nextArrow.startBinding,
     startBindable,
@@ -10489,131 +10697,6 @@ function doLineSegmentsIntersect(a, b) {
   return doBBoxesIntersect(getBBox(a), getBBox(b)) && isLineSegmentTouchingOrCrossingLine(a, b) && isLineSegmentTouchingOrCrossingLine(b, a);
 }
 
-// ../utils/src/withinBounds.ts
-var getNonLinearElementRelativePoints = (element) => {
-  if (element.type === "diamond") {
-    return [
-      pointFrom(element.width / 2, 0),
-      pointFrom(element.width, element.height / 2),
-      pointFrom(element.width / 2, element.height),
-      pointFrom(0, element.height / 2)
-    ];
-  }
-  return [
-    pointFrom(0, 0),
-    pointFrom(0 + element.width, 0),
-    pointFrom(0 + element.width, element.height),
-    pointFrom(0, element.height)
-  ];
-};
-var getElementRelativePoints = (element) => {
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    return element.points;
-  }
-  return getNonLinearElementRelativePoints(element);
-};
-var getMinMaxPoints = (points) => {
-  const ret = points.reduce(
-    (limits, [x, y]) => {
-      limits.minY = Math.min(limits.minY, y);
-      limits.minX = Math.min(limits.minX, x);
-      limits.maxX = Math.max(limits.maxX, x);
-      limits.maxY = Math.max(limits.maxY, y);
-      return limits;
-    },
-    {
-      minX: Infinity,
-      minY: Infinity,
-      maxX: -Infinity,
-      maxY: -Infinity,
-      cx: 0,
-      cy: 0
-    }
-  );
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-  return ret;
-};
-var getRotatedBBox = (element) => {
-  const points = getElementRelativePoints(element);
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom(cx, cy);
-  const rotatedPoints = points.map(
-    (p) => pointRotateRads(p, centerPoint, element.angle)
-  );
-  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y
-  ];
-};
-var isElementInsideBBox = (element, bbox, eitherDirection = false) => {
-  const elementBBox = getRotatedBBox(element);
-  const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
-  if (!eitherDirection) {
-    return elementInsideBbox;
-  }
-  if (elementInsideBbox) {
-    return true;
-  }
-  return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
-};
-var elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
-  const elementBBox = getRotatedBBox(element);
-  return (rangeIncludesValue(elementBBox[0], rangeInclusive(bbox[0], bbox[2])) || rangeIncludesValue(
-    bbox[0],
-    rangeInclusive(elementBBox[0], elementBBox[2])
-  )) && (rangeIncludesValue(elementBBox[1], rangeInclusive(bbox[1], bbox[3])) || rangeIncludesValue(
-    bbox[1],
-    rangeInclusive(elementBBox[1], elementBBox[3])
-  ));
-};
-var elementsOverlappingBBox = ({
-  elements,
-  bounds,
-  type,
-  errorMargin = 0
-}) => {
-  if (isExcalidrawElement(bounds)) {
-    bounds = getElementBounds(bounds, arrayToMap(elements));
-  }
-  const adjustedBBox = [
-    bounds[0] - errorMargin,
-    bounds[1] - errorMargin,
-    bounds[2] + errorMargin,
-    bounds[3] + errorMargin
-  ];
-  const includedElementSet = /* @__PURE__ */ new Set();
-  for (const element of elements) {
-    if (includedElementSet.has(element.id)) {
-      continue;
-    }
-    const isOverlaping = type === "overlap" ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox) : type === "inside" ? isElementInsideBBox(element, adjustedBBox) : isElementInsideBBox(element, adjustedBBox, true);
-    if (isOverlaping) {
-      includedElementSet.add(element.id);
-      if (element.boundElements) {
-        for (const boundElement of element.boundElements) {
-          includedElementSet.add(boundElement.id);
-        }
-      }
-      if (isTextElement(element) && element.containerId) {
-        includedElementSet.add(element.containerId);
-      }
-      if (isArrowElement(element)) {
-        if (element.startBinding) {
-          includedElementSet.add(element.startBinding.elementId);
-        }
-        if (element.endBinding) {
-          includedElementSet.add(element.endBinding?.elementId);
-        }
-      }
-    }
-  }
-  return elements.filter((element) => includedElementSet.has(element.id));
-};
-
 // ../element/src/groups.ts
 var selectGroup = (groupId, appState, elements) => {
   const elementsInGroup = elements.reduce(
@@ -10887,6 +10970,15 @@ var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
 };
 
 // ../element/src/selection.ts
+var shouldIgnoreElementFromSelection = (element) => element.locked || isBoundToContainer(element);
+var excludeElementsFromFrames = (selectedElements, framesInSelection) => {
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
 var excludeElementsInFramesFromSelection = (selectedElements) => {
   const framesInSelection = /* @__PURE__ */ new Set();
   selectedElements.forEach((element) => {
@@ -10894,34 +10986,182 @@ var excludeElementsInFramesFromSelection = (selectedElements) => {
       framesInSelection.add(element.id);
     }
   });
-  return selectedElements.filter((element) => {
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
+  return excludeElementsFromFrames(selectedElements, framesInSelection);
+};
+var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true, boxSelectionMode = "contain") => {
+  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] = getElementAbsoluteCoords(selection, elementsMap);
+  const selectionX1 = Math.min(selectionStartX, selectionEndX);
+  const selectionY1 = Math.min(selectionStartY, selectionEndY);
+  const selectionX2 = Math.max(selectionStartX, selectionEndX);
+  const selectionY2 = Math.max(selectionStartY, selectionEndY);
+  const selectionBounds = [
+    selectionX1,
+    selectionY1,
+    selectionX2,
+    selectionY2
+  ];
+  const selectionEdges = [
+    lineSegment(
+      pointFrom(selectionX1, selectionY1),
+      pointFrom(selectionX2, selectionY1)
+    ),
+    lineSegment(
+      pointFrom(selectionX2, selectionY1),
+      pointFrom(selectionX2, selectionY2)
+    ),
+    lineSegment(
+      pointFrom(selectionX2, selectionY2),
+      pointFrom(selectionX1, selectionY2)
+    ),
+    lineSegment(
+      pointFrom(selectionX1, selectionY2),
+      pointFrom(selectionX1, selectionY1)
+    )
+  ];
+  const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
+  let elementsInSelection = [];
+  for (const element of elements) {
+    if (shouldIgnoreElementFromSelection(element)) {
+      continue;
     }
-    return true;
-  });
-};
-var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true) => {
-  const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(selection, elementsMap);
-  let elementsInSelection = elements.filter((element) => {
-    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
-      element,
-      elementsMap
-    );
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      const [fx1, fy1, fx2, fy2] = getElementBounds(
-        containingFrame,
+    const strokeWidth = element.strokeWidth;
+    let labelAABB = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2
+    ];
+    const boundTextElement = isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
         elementsMap
       );
-      elementX1 = Math.max(fx1, elementX1);
-      elementY1 = Math.max(fy1, elementY1);
-      elementX2 = Math.min(fx2, elementX2);
-      elementY2 = Math.min(fy2, elementY2);
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height
+      ];
     }
-    return element.locked === false && element.type !== "selection" && !isBoundToContainer(element) && selectionX1 <= elementX1 && selectionY1 <= elementY1 && selectionX2 >= elementX2 && selectionY2 >= elementY2;
-  });
-  elementsInSelection = excludeElementsInFrames ? excludeElementsInFramesFromSelection(elementsInSelection) : elementsInSelection;
+    const associatedFrame = getContainingFrame(element, elementsMap);
+    if (associatedFrame && isElementIntersectingFrame(element, associatedFrame, elementsMap)) {
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
+      elementAABB = [
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3])
+      ];
+      labelAABB = labelAABB ? [
+        Math.max(labelAABB[0], frameAABB[0]),
+        Math.max(labelAABB[1], frameAABB[1]),
+        Math.min(labelAABB[2], frameAABB[2]),
+        Math.min(labelAABB[3], frameAABB[3])
+      ] : null;
+    }
+    const commonAABB2 = labelAABB ? [
+      Math.min(labelAABB[0], elementAABB[0]),
+      Math.min(labelAABB[1], elementAABB[1]),
+      Math.max(labelAABB[2], elementAABB[2]),
+      Math.max(labelAABB[3], elementAABB[3])
+    ] : elementAABB;
+    if (boundsContainBounds(selectionBounds, commonAABB2)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      } else {
+        elementsInSelection.push(element);
+        continue;
+      }
+    }
+    if (boxSelectionMode === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
+      elementsInSelection.push(element);
+      continue;
+    }
+    if (boxSelectionMode === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
+      let hasIntersection = false;
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads(
+            pointFrom(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle
+          );
+          return pointInsideBounds(rotatedPoint, selectionBounds);
+        });
+      } else {
+        const nonRotatedElementBounds = getElementBounds(
+          element,
+          elementsMap,
+          true
+        );
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = [
+          pointRotateRads(
+            pointFrom(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          )
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads(point, center, element.angle),
+            selectionBounds
+          );
+        });
+      }
+      if (!hasIntersection) {
+        hasIntersection = selectionEdges.some(
+          (selectionEdge) => intersectElementWithLineSegment(
+            element,
+            elementsMap,
+            selectionEdge,
+            strokeWidth / 2,
+            true
+            // Stop at first hit for better performance
+          ).length > 0
+        );
+      }
+      if (hasIntersection) {
+        if (framesInSelection && isFrameLikeElement(element)) {
+          framesInSelection.add(element.id);
+        }
+        elementsInSelection.push(element);
+        continue;
+      }
+    }
+  }
+  elementsInSelection = framesInSelection ? excludeElementsFromFrames(elementsInSelection, framesInSelection) : elementsInSelection;
   elementsInSelection = elementsInSelection.filter((element) => {
     const containingFrame = getContainingFrame(element, elementsMap);
     if (containingFrame) {
@@ -11041,6 +11281,10 @@ var getSelectionStateForElements = (targetElements, allElements, appState) => {
     )
   };
 };
+var getActiveTextElement = (selectedElements, appState) => {
+  const activeTextElement = appState.editingTextElement || selectedElements.length === 1 && isTextElement(selectedElements[0]) && selectedElements[0];
+  return activeTextElement || null;
+};
 
 // ../element/src/frame.ts
 var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
@@ -11516,12 +11760,17 @@ var getDefaultFrameName = (element) => {
 var getFrameLikeTitle = (element) => {
   return element.name === null ? getDefaultFrameName(element) : element.name;
 };
-var getElementsOverlappingFrame = (elements, frame) => {
-  return elementsOverlappingBBox({
-    elements,
-    bounds: frame,
-    type: "overlap"
-  }).filter((el) => !el.frameId || el.frameId === frame.id);
+var getElementsOverlappingFrame = (elements, frame, elementsMap) => {
+  return elements.filter(
+    (el) => (
+      // exclude elements which are overlapping, but are in a different frame,
+      // and thus invisible in target frame
+      (!el.frameId || el.frameId === frame.id) && doBoundsIntersect(
+        getElementBounds(el, elementsMap),
+        getElementBounds(frame, elementsMap)
+      )
+    )
+  );
 };
 var frameAndChildrenSelectedTogether = (selectedElements) => {
   const selectedElementsMap = arrayToMap(selectedElements);
@@ -12354,45 +12603,88 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
-  const arrowheadPoints = getArrowheadPoints(
-    element,
-    shape,
-    position,
-    arrowhead
-  );
+var generateArrowheadCardinalityOne = (generator, arrowheadPoints, lineOptions) => {
   if (arrowheadPoints === null) {
     return [];
   }
-  const generateCrowfootOne = (arrowheadPoints2, options2) => {
-    if (arrowheadPoints2 === null) {
-      return [];
-    }
-    const [, , x3, y3, x4, y4] = arrowheadPoints2;
-    return [generator.line(x3, y3, x4, y4, options2)];
+  const [, , x3, y3, x4, y4] = arrowheadPoints;
+  return [generator.line(x3, y3, x4, y4, lineOptions)];
+};
+var generateArrowheadLinesToTip = (generator, arrowheadPoints, lineOptions) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+  return [
+    generator.line(x3, y3, x2, y2, lineOptions),
+    generator.line(x4, y4, x2, y2, lineOptions)
+  ];
+};
+var getArrowheadLineOptions = (element, options) => {
+  const lineOptions = { ...options };
+  if (element.strokeStyle === "dotted") {
+    const dash = getDashArrayDotted(element.strokeWidth - 1);
+    lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
+  } else {
+    delete lineOptions.strokeLineDash;
+  }
+  lineOptions.roughness = Math.min(1, lineOptions.roughness || 0);
+  return lineOptions;
+};
+var generateArrowheadOutlineCircle = (generator, options, strokeColor, arrowheadPoints, fill, diameterScale = 1) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x, y, diameter] = arrowheadPoints;
+  const circleOptions = {
+    ...options,
+    fill,
+    fillStyle: "solid",
+    stroke: strokeColor,
+    roughness: Math.min(0.5, options.roughness || 0)
   };
+  delete circleOptions.strokeLineDash;
+  return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
+};
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
+  canvasBackgroundColor = canvasBackgroundColor || "transparent";
+  if (arrowhead === null) {
+    return [];
+  }
   const strokeColor = isDarkMode ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+  const backgroundFillColor = isDarkMode ? applyDarkModeFilter(canvasBackgroundColor) : canvasBackgroundColor;
+  const cardinalityOneOrManyOffset = -0.25;
+  const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
-    case "dot":
     case "circle":
     case "circle_outline": {
-      const [x, y, diameter] = arrowheadPoints;
-      delete options.strokeLineDash;
-      return [
-        generator.circle(x, y, diameter, {
-          ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
-          fillStyle: "solid",
-          stroke: strokeColor,
-          roughness: Math.min(0.5, options.roughness || 0)
-        })
-      ];
+      return generateArrowheadOutlineCircle(
+        generator,
+        options,
+        strokeColor,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        arrowhead === "circle_outline" ? backgroundFillColor : strokeColor
+      );
     }
     case "triangle":
     case "triangle_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const triangleOptions = {
+        ...options,
+        fill: arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete triangleOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12401,19 +12693,29 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x3, y3],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          triangleOptions
         )
       ];
     }
     case "diamond":
     case "diamond_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const diamondOptions = {
+        ...options,
+        fill: arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete diamondOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12423,42 +12725,106 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x4, y4],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          diamondOptions
+        )
+      ];
+    }
+    case "cardinality_one":
+      return generateArrowheadCardinalityOne(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_many":
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_one_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(
+            element,
+            shape,
+            position,
+            "cardinality_one",
+            cardinalityOneOrManyOffset
+          ),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_exactly_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one"),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
         )
       ];
     }
-    case "crowfoot_one":
-      return generateCrowfootOne(arrowheadPoints, options);
     case "bar":
     case "arrow":
-    case "crowfoot_many":
-    case "crowfoot_one_or_many":
     default: {
-      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      if (element.strokeStyle === "dotted") {
-        const dash = getDashArrayDotted(element.strokeWidth - 1);
-        options.strokeLineDash = [dash[0], dash[1] - 1];
-      } else {
-        delete options.strokeLineDash;
-      }
-      options.roughness = Math.min(1, options.roughness || 0);
-      return [
-        generator.line(x3, y3, x2, y2, options),
-        generator.line(x4, y4, x2, y2, options),
-        ...arrowhead === "crowfoot_one_or_many" ? generateCrowfootOne(
-          getArrowheadPoints(element, shape, position, "crowfoot_one"),
-          options
-        ) : []
-      ];
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
     }
   }
 };
-var generateLinearCollisionShape = (element) => {
+var generateLinearCollisionShape = (element, elementsMap) => {
   const generator = new RoughGenerator();
   const options = {
     seed: element.seed,
@@ -12467,20 +12833,7 @@ var generateLinearCollisionShape = (element) => {
     roughness: 0,
     preserveVertices: true
   };
-  const center = getCenterForBounds(
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3])
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity]
-    )
-  );
+  const center = elementCenterPoint(element, elementsMap);
   switch (element.type) {
     case "line":
     case "arrow": {
@@ -13362,7 +13715,7 @@ var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
   );
   return [minX, minY, maxX, maxY];
 };
-var getBoundsFromPoints = (points) => {
+var getBoundsFromPoints = (points, padding = 0) => {
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
@@ -13373,7 +13726,7 @@ var getBoundsFromPoints = (points) => {
     maxX = Math.max(maxX, x);
     maxY = Math.max(maxY, y);
   }
-  return [minX, minY, maxX, maxY];
+  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
 };
 var getFreeDrawElementAbsoluteCoords = (element) => {
   const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
@@ -13383,6 +13736,8 @@ var getFreeDrawElementAbsoluteCoords = (element) => {
   const y2 = maxY + element.y;
   return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
+var CARDINALITY_MARKER_SIZE = 20;
+var CROWFOOT_ARROWHEAD_SIZE = 15;
 var getArrowheadSize = (arrowhead) => {
   switch (arrowhead) {
     case "arrow":
@@ -13390,10 +13745,14 @@ var getArrowheadSize = (arrowhead) => {
     case "diamond":
     case "diamond_outline":
       return 12;
-    case "crowfoot_many":
-    case "crowfoot_one":
-    case "crowfoot_one_or_many":
-      return 20;
+    case "cardinality_many":
+    case "cardinality_one_or_many":
+    case "cardinality_zero_or_many":
+      return CROWFOOT_ARROWHEAD_SIZE;
+    case "cardinality_one":
+    case "cardinality_exactly_one":
+    case "cardinality_zero_or_one":
+      return CARDINALITY_MARKER_SIZE;
     default:
       return 15;
   }
@@ -13408,7 +13767,10 @@ var getArrowheadAngle = (arrowhead) => {
       return 25;
   }
 };
-var getArrowheadPoints = (element, shape, position, arrowhead) => {
+var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier = 0) => {
+  if (arrowhead === null) {
+    return null;
+  }
   if (shape.length < 1) {
     return null;
   }
@@ -13446,21 +13808,23 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
   const minSize = Math.min(size, length * lengthMultiplier);
-  const xs = x2 - nx * minSize;
-  const ys = y2 - ny * minSize;
-  if (arrowhead === "dot" || arrowhead === "circle" || arrowhead === "circle_outline") {
-    const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2;
-    return [x2, y2, diameter];
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - ny * minSize;
+  if (arrowhead === "circle" || arrowhead === "circle_outline") {
+    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
+    return [tx, ty, diameter];
   }
   const angle = getArrowheadAngle(arrowhead);
-  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
+  if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
     const [x32, y32] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(-angle)
     );
     const [x42, y42] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(angle)
     );
@@ -13468,12 +13832,12 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const [x3, y3] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     -angle * Math.PI / 180
   );
   const [x4, y4] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -13482,21 +13846,21 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(py - y2, px - x2)
+        pointFrom(tx + minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(py - ty, px - tx)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(y2 - py, x2 - px)
+        pointFrom(tx - minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(ty - py, tx - px)
       );
     }
-    return [x2, y2, x3, y3, ox, oy, x4, y4];
+    return [tx, ty, x3, y3, ox, oy, x4, y4];
   }
-  return [x2, y2, x3, y3, x4, y4];
+  return [tx, ty, x3, y3, x4, y4];
 };
 var generateLinearElementShape = (element) => {
   const generator = rough2.generator();
@@ -13746,6 +14110,7 @@ var aabbForElement = (element, elementsMap, offset) => {
   return bounds;
 };
 var pointInsideBounds = (p, bounds) => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
+var pointInsideBoundsInclusive = (p, bounds) => p[0] >= bounds[0] && p[0] <= bounds[2] && p[1] >= bounds[1] && p[1] <= bounds[3];
 var doBoundsIntersect = (bounds1, bounds2) => {
   if (bounds1 == null || bounds2 == null) {
     return false;
@@ -13754,8 +14119,14 @@ var doBoundsIntersect = (bounds1, bounds2) => {
   const [minX2, minY2, maxX2, maxY2] = bounds2;
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
+var boundsContainBounds = (outerBounds, innerBounds) => [
+  pointFrom(innerBounds[0], innerBounds[1]),
+  pointFrom(innerBounds[0], innerBounds[3]),
+  pointFrom(innerBounds[2], innerBounds[1]),
+  pointFrom(innerBounds[2], innerBounds[3])
+].every((point) => pointInsideBoundsInclusive(point, outerBounds));
 var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x3, y3] = pointFrom((x1 + x2) / 2, (y1 + y2) / 2);
     return pointFrom(x3 + xOffset, y3 + yOffset);
@@ -20578,6 +20949,12 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
             });
             break;
           }
+          case "frame": {
+            if (existingElement && isBindableElement(existingElement)) {
+              startBoundElement = existingElement;
+            }
+            break;
+          }
           default: {
             assertNever(
               linearElement,
@@ -20587,6 +20964,8 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
           }
         }
       }
+    }
+    if (startBoundElement && isBindableElement(startBoundElement)) {
       bindBindingElement(
         linearElement,
         startBoundElement,
@@ -20649,6 +21028,12 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
             });
             break;
           }
+          case "frame": {
+            if (existingElement && isBindableElement(existingElement)) {
+              endBoundElement = existingElement;
+            }
+            break;
+          }
           default: {
             assertNever(
               linearElement,
@@ -20658,13 +21043,9 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
           }
         }
       }
-      bindBindingElement(
-        linearElement,
-        endBoundElement,
-        "orbit",
-        "end",
-        scene
-      );
+    }
+    if (endBoundElement && isBindableElement(endBoundElement)) {
+      bindBindingElement(linearElement, endBoundElement, "orbit", "end", scene);
     }
   }
   if (linearElement.points.length < 2) {
@@ -20947,7 +21328,8 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
       }
       Object.assign(elementInFrame, { frameId: frame.id });
       elementInFrame?.boundElements?.forEach((boundElement) => {
-        const ele = elementStore.getElement(boundElement.id);
+        const boundElementId = oldToNewElementIdMap.get(boundElement.id) ?? boundElement.id;
+        const ele = elementStore.getElement(boundElementId);
         if (!ele) {
           throw new Error(
             `Bound element with id ${boundElement.id} doesn't exist`
@@ -20964,20 +21346,61 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
     minY = minY - PADDING;
     maxX = maxX + PADDING;
     maxY = maxY + PADDING;
-    const frameX = frame?.x || minX;
-    const frameY = frame?.y || minY;
-    const frameWidth = frame?.width || maxX - minX;
-    const frameHeight = frame?.height || maxY - minY;
+    const frameX = frame?.x ?? minX;
+    const frameY = frame?.y ?? minY;
+    const frameWidth = frame?.width ?? maxX - minX;
+    const frameHeight = frame?.height ?? maxY - minY;
     Object.assign(frame, {
       x: frameX,
       y: frameY,
       width: frameWidth,
       height: frameHeight
     });
-    if (isDevEnv() && element.children.length && (frame?.x || frame?.y || frame?.width || frame?.height)) {
-      console.info(
-        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically"
-      );
+  }
+  if (opts?.regenerateIds && oldToNewElementIdMap.size) {
+    const remapId = (id) => id ? oldToNewElementIdMap.get(id) ?? id : id;
+    const remapBoundElements = (boundElements) => {
+      if (!boundElements?.length) {
+        return boundElements;
+      }
+      let didChange = false;
+      const nextBoundElements = boundElements.map((boundElement) => {
+        const nextId = remapId(boundElement.id);
+        if (nextId !== boundElement.id) {
+          didChange = true;
+          return { ...boundElement, id: nextId };
+        }
+        return boundElement;
+      });
+      return didChange ? nextBoundElements : boundElements;
+    };
+    for (const element of elementStore.excalidrawElements.values()) {
+      const mutableElement = element;
+      if ("containerId" in mutableElement && mutableElement.containerId) {
+        mutableElement.containerId = remapId(mutableElement.containerId) ?? null;
+      }
+      if (mutableElement.boundElements?.length) {
+        mutableElement.boundElements = remapBoundElements(
+          mutableElement.boundElements
+        );
+      }
+      if ("startBinding" in mutableElement && mutableElement.startBinding?.elementId) {
+        const nextId = remapId(mutableElement.startBinding.elementId) ?? mutableElement.startBinding.elementId;
+        mutableElement.startBinding = {
+          ...mutableElement.startBinding,
+          elementId: nextId
+        };
+      }
+      if ("endBinding" in mutableElement && mutableElement.endBinding?.elementId) {
+        const nextId = remapId(mutableElement.endBinding.elementId) ?? mutableElement.endBinding.elementId;
+        mutableElement.endBinding = {
+          ...mutableElement.endBinding,
+          elementId: nextId
+        };
+      }
+      if ("frameId" in mutableElement && mutableElement.frameId) {
+        mutableElement.frameId = remapId(mutableElement.frameId) ?? null;
+      }
     }
   }
   return elementStore.getElements();
@@ -21015,6 +21438,32 @@ var maybeHandleArrowPointlikeDrag = ({
   return false;
 };
 
+// ../element/src/arrowheads.ts
+var normalizeArrowhead = (arrowhead) => {
+  switch (arrowhead) {
+    case void 0:
+    case null:
+      return null;
+    case "dot":
+      return "circle";
+    case "crowfoot_one":
+      return "cardinality_one";
+    case "crowfoot_many":
+      return "cardinality_many";
+    case "crowfoot_one_or_many":
+      return "cardinality_one_or_many";
+    default:
+      return arrowhead;
+  }
+};
+var getArrowheadForPicker = (arrowhead) => {
+  const normalizedArrowhead = normalizeArrowhead(arrowhead);
+  if (normalizedArrowhead === null) {
+    return null;
+  }
+  return normalizedArrowhead;
+};
+
 // ../element/src/index.ts
 var getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
 var hashElementsVersion = (elements) => {
@@ -24114,8 +24563,7 @@ var _renderStaticScene = ({
 var renderStaticSceneThrottled = throttleRAF(
   (config) => {
     _renderStaticScene(config);
-  },
-  { trailing: true }
+  }
 );
 var renderStaticScene = (renderConfig, throttle2) => {
   if (throttle2) {
@@ -24886,7 +25334,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
       });
     case "line":
     case "draw":
-      const { startArrowhead = null, endArrowhead = null } = element;
+      const startArrowhead = normalizeArrowhead(element.startArrowhead);
+      const endArrowhead = normalizeArrowhead(element.endArrowhead);
       let x = element.x;
       let y = element.y;
       let points = (
@@ -24911,7 +25360,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         ...getSizeFromPoints(points)
       });
     case "arrow": {
-      const { startArrowhead: startArrowhead2 = null, endArrowhead: endArrowhead2 = "arrow" } = element;
+      const startArrowhead2 = normalizeArrowhead(element.startArrowhead);
+      const endArrowhead2 = element.endArrowhead === void 0 ? "arrow" : normalizeArrowhead(element.endArrowhead);
       const x2 = element.x;
       const y2 = element.y;
       const points2 = (
@@ -25179,6 +25629,10 @@ var restoreAppState = (appState, localAppState) => {
     const localValue = localAppState ? localAppState[key] : void 0;
     nextAppState[key] = suppliedValue !== void 0 ? suppliedValue : localValue !== void 0 ? localValue : defaultValue;
   }
+  const boxSelectionMode = appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
+  if (boxSelectionMode !== void 0) {
+    nextAppState.boxSelectionMode = boxSelectionMode;
+  }
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",
@@ -25309,7 +25763,11 @@ var prepareElementsForRender = ({
 }) => {
   let nextElements;
   if (exportingFrame) {
-    nextElements = getElementsOverlappingFrame(elements, exportingFrame);
+    nextElements = getElementsOverlappingFrame(
+      elements,
+      exportingFrame,
+      arrayToMap(elements)
+    );
   } else if (frameRendering.enabled && frameRendering.name) {
     nextElements = addFrameLabelsAsTextElements(elements, {
       exportWithDarkMode
@@ -25708,7 +26166,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./data/image-BUI6GQJR.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-UQK7BQY4.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -26097,6 +26555,7 @@ export {
   rangeInclusive,
   rangesOverlap,
   rangeIntersection,
+  rangeIncludesValue,
   supportsResizeObserver,
   APP_NAME,
   DRAGGING_THRESHOLD,
@@ -26213,6 +26672,7 @@ export {
   getGridPoint,
   getDateTime,
   capitalizeString,
+  formatTimeToHourMinute,
   isToolIcon,
   isInputLike,
   isInteractive,
@@ -26231,6 +26691,7 @@ export {
   viewportCoordsToSceneCoords,
   sceneCoordsToViewportCoords,
   getGlobalCSSVariable,
+  isRTL,
   tupleToCoors,
   muteFSAbortError,
   findLastIndex,
@@ -26323,8 +26784,10 @@ export {
   getLineHeightInPx,
   getApproxMinLineHeight,
   setCustomTextMetricsProvider,
+  getLineWidth,
   getTextWidth,
   wrapText,
+  getWrappedTextLines,
   redrawTextBoundingBox,
   handleBindTextResize,
   computeBoundTextPosition,
@@ -26354,7 +26817,6 @@ export {
   bumpVersion,
   FOCUS_POINT_SIZE,
   maxBindingDistance_simple,
-  shouldEnableBindingForPointerEvent,
   isBindingEnabled,
   bindOrUnbindBindingElement,
   bindOrUnbindBindingElements,
@@ -26364,12 +26826,10 @@ export {
   updateBindings,
   calculateFixedPointForElbowArrowBinding,
   calculateFixedPointForNonElbowArrowBinding,
+  normalizeElbowArrows,
   fixBindingsAfterDeletion,
   getGlobalFixedPointForBindableElement,
   LinearElementEditor,
-  isElementInsideBBox,
-  elementPartiallyOverlapsWithOrContainsBBox,
-  elementsOverlappingBBox,
   selectGroup,
   selectGroupsForSelectedElements,
   isSelectedViaGroup,
@@ -26393,6 +26853,7 @@ export {
   getTargetElements,
   makeNextSelectedElementIds,
   getSelectionStateForElements,
+  getActiveTextElement,
   elementOverlapsWithFrame,
   isCursorInFrame,
   groupByFrameLikes,
@@ -26514,6 +26975,7 @@ export {
   showSelectedShapeActions,
   convertToExcalidrawElements,
   maybeHandleArrowPointlikeDrag,
+  getArrowheadForPicker,
   getSceneVersion,
   hashElementsVersion,
   hashString,
@@ -26582,4 +27044,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-P7XQCHXR.js.map
+//# sourceMappingURL=chunk-HJWER26G.js.map