@excalidraw/excalidraw 0.18.0-b9d27d3 → 0.18.0-c141960

package/dist/dev/{chunk-WWDIUJ2Q.js → chunk-SJTAY27F.js}

@@ -19,7 +19,6 @@ import {
   bytesToHexString,
   isPromiseLike
 } from "@excalidraw/common";
-import { clearElementsForExport as clearElementsForExport2 } from "@excalidraw/element";
 
 // appState.ts
 import {
@@ -70,6 +69,10 @@ var getDefaultAppState = () => {
       fromSelection: false,
       lastActiveTool: null
     },
+    preferredSelectionTool: {
+      type: "selection",
+      initialized: false
+    },
     penMode: false,
     penDetected: false,
     errorMessage: null,
@@ -111,7 +114,7 @@ var getDefaultAppState = () => {
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties
     },
     startBoundElement: null,
-    suggestedBindings: [],
+    suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -137,7 +140,8 @@ var getDefaultAppState = () => {
     croppingElementId: null,
     searchMatches: null,
     lockedMultiSelections: {},
-    activeLockedId: null
+    activeLockedId: null,
+    bindMode: "orbit"
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -174,6 +178,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   editingTextElement: { browser: false, export: false, server: false },
   editingGroupId: { browser: true, export: false, server: false },
   activeTool: { browser: true, export: false, server: false },
+  preferredSelectionTool: { browser: true, export: false, server: false },
   penMode: { browser: true, export: false, server: false },
   penDetected: { browser: true, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
@@ -223,7 +228,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
+  suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
   editingFrame: { browser: false, export: false, server: false },
@@ -245,7 +250,8 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
-  activeLockedId: { browser: false, export: false, server: false }
+  activeLockedId: { browser: false, export: false, server: false },
+  bindMode: { browser: true, export: false, server: false }
 });
 var _clearAppStateForStorage = (appState, exportType) => {
   const stateForExport = {};
@@ -517,10 +523,6 @@ import {
   MIME_TYPES as MIME_TYPES2,
   VERSIONS
 } from "@excalidraw/common";
-import {
-  clearElementsForDatabase,
-  clearElementsForExport
-} from "@excalidraw/element";
 
 // data/filesystem.ts
 import {
@@ -529,8 +531,8 @@ import {
   supported as nativeFileSystemSupported
 } from "browser-fs-access";
 import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common";
-var INPUT_CHANGE_INTERVAL_MS = 500;
-var fileOpen = (opts) => {
+var INPUT_CHANGE_INTERVAL_MS = 5e3;
+var fileOpen = async (opts) => {
   const mimeTypes = opts.extensions?.reduce((mimeTypes2, type) => {
     mimeTypes2.push(MIME_TYPES[type]);
     return mimeTypes2;
@@ -541,7 +543,7 @@ var fileOpen = (opts) => {
     }
     return acc.concat(`.${ext}`);
   }, []);
-  return _fileOpen({
+  const files = await _fileOpen({
     description: opts.description,
     extensions,
     mimeTypes,
@@ -579,6 +581,12 @@ var fileOpen = (opts) => {
       };
     }
   });
+  if (Array.isArray(files)) {
+    return await Promise.all(
+      files.map((file) => normalizeFile(file))
+    );
+  }
+  return await normalizeFile(files);
 };
 var fileSave = (blob, opts) => {
   return _fileSave(
@@ -608,7 +616,7 @@ var serializeAsJSON = (elements, appState, files, type) => {
     type: EXPORT_DATA_TYPES.excalidraw,
     version: VERSIONS.excalidraw,
     source: getExportSource(),
-    elements: type === "local" ? clearElementsForExport(elements) : clearElementsForDatabase(elements),
+    elements,
     appState: type === "local" ? cleanAppStateForExport(appState) : clearAppStateForDatabase(appState),
     files: type === "local" ? filterOutDeletedFiles(elements, files) : (
       // will be stripped from JSON
@@ -637,12 +645,7 @@ var loadFromJSON = async (localAppState, localElements) => {
     // gets resolved. Else, iOS users cannot open `.excalidraw` files.
     // extensions: ["json", "excalidraw", "png", "svg"],
   });
-  return loadFromBlob(
-    await normalizeFile(file),
-    localAppState,
-    localElements,
-    file.handle
-  );
+  return loadFromBlob(file, localAppState, localElements, file.handle);
 };
 var isValidExcalidrawData = (data) => {
   return data?.type === EXPORT_DATA_TYPES.excalidraw && (!data.elements || Array.isArray(data.elements) && (!data.appState || typeof data.appState === "object"));
@@ -3148,18 +3151,6 @@ var isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
 
 // renderer/helpers.ts
 import { THEME as THEME2, THEME_FILTER } from "@excalidraw/common";
-import { FIXED_BINDING_DISTANCE } from "@excalidraw/element";
-import { getDiamondPoints } from "@excalidraw/element";
-import { elementCenterPoint, getCornerRadius } from "@excalidraw/element";
-import {
-  curve,
-  curveCatmullRomCubicApproxPoints,
-  curveCatmullRomQuadraticApproxPoints,
-  curveOffsetPoints,
-  offsetPointsForQuadraticBezier,
-  pointFrom as pointFrom2,
-  pointRotateRads as pointRotateRads2
-} from "@excalidraw/math";
 var fillCircle = (context, cx, cy, radius, stroke, fill = true) => {
   context.beginPath();
   context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -3204,127 +3195,7 @@ var bootstrapCanvas = ({
   }
   return context;
 };
-function drawCatmullRomQuadraticApprox(ctx, points, tension = 0.5) {
-  const pointSets = curveCatmullRomQuadraticApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length - 1; i++) {
-      const [[cpX, cpY], [p2X, p2Y]] = pointSets[i];
-      ctx.quadraticCurveTo(cpX, cpY, p2X, p2Y);
-    }
-  }
-}
-function drawCatmullRomCubicApprox(ctx, points, tension = 0.5) {
-  const pointSets = curveCatmullRomCubicApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length; i++) {
-      const [[cp1x, cp1y], [cp2x, cp2y], [x, y]] = pointSets[i];
-      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-    }
-  }
-}
-var drawHighlightForRectWithRotation = (context, element, elementsMap, padding) => {
-  const [x, y] = pointRotateRads2(
-    pointFrom2(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle
-  );
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-  let radius = getCornerRadius(
-    Math.min(element.width, element.height),
-    element
-  );
-  if (radius === 0) {
-    radius = 0.01;
-  }
-  context.beginPath();
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0, 0 + radius),
-      pointFrom2(0, 0),
-      pointFrom2(0 + radius, 0),
-      padding
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width - radius, 0),
-      pointFrom2(element.width, 0),
-      pointFrom2(element.width, radius),
-      padding
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width, element.height - radius),
-      pointFrom2(element.width, element.height),
-      pointFrom2(element.width - radius, element.height),
-      padding
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(radius, element.height),
-      pointFrom2(0, element.height),
-      pointFrom2(0, element.height - radius),
-      padding
-    );
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1]
-    );
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0 + radius, 0),
-      pointFrom2(0, 0),
-      pointFrom2(0, 0 + radius),
-      -FIXED_BINDING_DISTANCE
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width, radius),
-      pointFrom2(element.width, 0),
-      pointFrom2(element.width - radius, 0),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width - radius, element.height),
-      pointFrom2(element.width, element.height),
-      pointFrom2(element.width, element.height - radius),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0, element.height - radius),
-      pointFrom2(0, element.height),
-      pointFrom2(radius, element.height),
-      -FIXED_BINDING_DISTANCE
-    );
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1]
-    );
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-  context.closePath();
-  context.fill();
-  context.restore();
-};
-var strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {
-  context.beginPath();
-  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
-  context.stroke();
-};
-var strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false, radius = 0) => {
+var strokeRectWithRotation_simple = (context, x, y, width, height, cx, cy, angle, fill = false, radius = 0) => {
   context.save();
   context.translate(cx, cy);
   context.rotate(angle);
@@ -3341,126 +3212,6 @@ var strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill
   }
   context.restore();
 };
-var drawHighlightForDiamondWithRotation = (context, padding, element, elementsMap) => {
-  const [x, y] = pointRotateRads2(
-    pointFrom2(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle
-  );
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-  {
-    context.beginPath();
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
-    const verticalRadius = element.roundness ? getCornerRadius(Math.abs(topX - leftX), element) : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness ? getCornerRadius(Math.abs(rightY - topY), element) : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(topX - verticalRadius, topY + horizontalRadius),
-        pointFrom2(topX, topY),
-        pointFrom2(topX, topY),
-        pointFrom2(topX + verticalRadius, topY + horizontalRadius)
-      ),
-      padding
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(rightX - verticalRadius, rightY - horizontalRadius),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX - verticalRadius, rightY + horizontalRadius)
-      ),
-      padding
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(bottomX + verticalRadius, bottomY - horizontalRadius),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX - verticalRadius, bottomY - horizontalRadius)
-      ),
-      padding
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(leftX + verticalRadius, leftY + horizontalRadius),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX + verticalRadius, leftY - horizontalRadius)
-      ),
-      padding
-    );
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1]
-    );
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-  {
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
-    const verticalRadius = element.roundness ? getCornerRadius(Math.abs(topX - leftX), element) : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness ? getCornerRadius(Math.abs(rightY - topY), element) : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(topX + verticalRadius, topY + horizontalRadius),
-        pointFrom2(topX, topY),
-        pointFrom2(topX, topY),
-        pointFrom2(topX - verticalRadius, topY + horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(rightX - verticalRadius, rightY + horizontalRadius),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX - verticalRadius, rightY - horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(bottomX - verticalRadius, bottomY - horizontalRadius),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX + verticalRadius, bottomY - horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(leftX + verticalRadius, leftY - horizontalRadius),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX + verticalRadius, leftY + horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1]
-    );
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-  context.closePath();
-  context.fill();
-  context.restore();
-};
 
 // renderer/staticScene.ts
 var GridLineColor = {
@@ -3804,7 +3555,7 @@ import {
   isTextElement as isTextElement3
 } from "@excalidraw/element";
 import { getContainingFrame } from "@excalidraw/element";
-import { getCornerRadius as getCornerRadius2, isPathALoop } from "@excalidraw/element";
+import { getCornerRadius, isPathALoop } from "@excalidraw/element";
 import { ShapeCache as ShapeCache2 } from "@excalidraw/element";
 import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "@excalidraw/element";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords3 } from "@excalidraw/element";
@@ -3942,7 +3693,7 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
       while (embeddableNode.firstChild) {
         embeddableNode.removeChild(embeddableNode.firstChild);
       }
-      const radius = getCornerRadius2(
+      const radius = getCornerRadius(
         Math.min(element.width, element.height),
         element
       );
@@ -4185,14 +3936,19 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
             "clipPath"
           );
           clipPath.id = `image-clipPath-${element.id}`;
+          clipPath.setAttribute("clipPathUnits", "userSpaceOnUse");
           const clipRect = svgRoot.ownerDocument.createElementNS(
             SVG_NS,
             "rect"
           );
-          const radius = getCornerRadius2(
+          const radius = getCornerRadius(
             Math.min(element.width, element.height),
             element
           );
+          const clipOffsetX = element.crop ? normalizedCropX : 0;
+          const clipOffsetY = element.crop ? normalizedCropY : 0;
+          clipRect.setAttribute("x", `${clipOffsetX}`);
+          clipRect.setAttribute("y", `${clipOffsetY}`);
           clipRect.setAttribute("width", `${element.width}`);
           clipRect.setAttribute("height", `${element.height}`);
           clipRect.setAttribute("rx", `${radius}`);
@@ -4678,7 +4434,7 @@ var getExportSize = (elements, exportPadding, scale) => {
 };
 
 // data/restore.ts
-import { isFiniteNumber, pointFrom as pointFrom3 } from "@excalidraw/math";
+import { isFiniteNumber, pointFrom as pointFrom2 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
   DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
@@ -4697,7 +4453,13 @@ import {
   normalizeLink as normalizeLink2,
   getLineHeight
 } from "@excalidraw/common";
-import { getNonDeletedElements, isValidPolygon } from "@excalidraw/element";
+import {
+  calculateFixedPointForNonElbowArrowBinding,
+  getNonDeletedElements,
+  isPointInElement,
+  isValidPolygon,
+  projectFixedPointOntoDiagonal
+} from "@excalidraw/element";
 import { normalizeFixedPoint } from "@excalidraw/element";
 import {
   updateElbowArrowPoints,
@@ -4711,7 +4473,6 @@ import {
   isArrowBoundToElement,
   isArrowElement as isArrowElement2,
   isElbowArrow,
-  isFixedPointBinding,
   isLinearElement,
   isLineElement,
   isTextElement as isTextElement4,
@@ -4746,23 +4507,54 @@ var getFontFamilyByName = (fontFamilyName) => {
   }
   return DEFAULT_FONT_FAMILY2;
 };
-var repairBinding = (element, binding) => {
+var repairBinding = (element, binding, elementsMap, startOrEnd) => {
   if (!binding) {
     return null;
   }
-  const focus = binding.focus || 0;
   if (isElbowArrow(element)) {
-    const fixedPointBinding = isFixedPointBinding(binding) ? {
+    const fixedPointBinding = {
       ...binding,
-      focus,
-      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0])
-    } : null;
+      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+      mode: binding.mode || "orbit"
+    };
     return fixedPointBinding;
   }
-  return {
-    ...binding,
-    focus
-  };
+  const boundElement = elementsMap.get(binding.elementId) || void 0;
+  if (boundElement) {
+    if (binding.mode) {
+      return {
+        elementId: binding.elementId,
+        mode: binding.mode || "orbit",
+        fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5])
+      };
+    }
+    const p = LinearElementEditor2.getPointAtIndexGlobalCoordinates(
+      element,
+      startOrEnd === "start" ? 0 : element.points.length - 1,
+      elementsMap
+    );
+    const mode = isPointInElement(p, boundElement, elementsMap) ? "inside" : "orbit";
+    const focusPoint = mode === "inside" ? p : projectFixedPointOntoDiagonal(
+      element,
+      p,
+      boundElement,
+      startOrEnd,
+      elementsMap
+    ) || p;
+    const { fixedPoint } = calculateFixedPointForNonElbowArrowBinding(
+      element,
+      boundElement,
+      startOrEnd,
+      elementsMap,
+      focusPoint
+    );
+    return {
+      mode,
+      elementId: binding.elementId,
+      fixedPoint
+    };
+  }
+  return null;
 };
 var restoreElementWithProperties = (element, extra) => {
   const base = {
@@ -4815,7 +4607,7 @@ var restoreElementWithProperties = (element, extra) => {
   delete ret.boundElementIds;
   return ret;
 };
-var restoreElement = (element, opts) => {
+var restoreElement = (element, elementsMap, opts) => {
   element = { ...element };
   switch (element.type) {
     case "text":
@@ -4855,7 +4647,6 @@ var restoreElement = (element, opts) => {
     case "freedraw": {
       return restoreElementWithProperties(element, {
         points: element.points,
-        lastCommittedPoint: null,
         simulatePressure: element.simulatePressure,
         pressures: element.pressures
       });
@@ -4874,16 +4665,15 @@ var restoreElement = (element, opts) => {
       let y = element.y;
       let points = (
         // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom3(0, 0), pointFrom3(element.width, element.height)] : element.points
+        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom2(0, 0), pointFrom2(element.width, element.height)] : element.points
       );
       if (points[0][0] !== 0 || points[0][1] !== 0) {
         ({ points, x, y } = LinearElementEditor2.getNormalizeElementPointsAndCoords(element));
       }
       return restoreElementWithProperties(element, {
-        type: element.type === "draw" ? "line" : element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
-        lastCommittedPoint: null,
+        type: "line",
+        startBinding: null,
+        endBinding: null,
         startArrowhead,
         endArrowhead,
         points,
@@ -4896,20 +4686,26 @@ var restoreElement = (element, opts) => {
       });
     case "arrow": {
       const { startArrowhead: startArrowhead2 = null, endArrowhead: endArrowhead2 = "arrow" } = element;
-      let x2 = element.x;
-      let y2 = element.y;
-      let points2 = (
+      const x2 = element.x;
+      const y2 = element.y;
+      const points2 = (
         // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom3(0, 0), pointFrom3(element.width, element.height)] : element.points
+        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom2(0, 0), pointFrom2(element.width, element.height)] : element.points
       );
-      if (points2[0][0] !== 0 || points2[0][1] !== 0) {
-        ({ points: points2, x: x2, y: y2 } = LinearElementEditor2.getNormalizeElementPointsAndCoords(element));
-      }
       const base = {
         type: element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
-        lastCommittedPoint: null,
+        startBinding: repairBinding(
+          element,
+          element.startBinding,
+          elementsMap,
+          "start"
+        ),
+        endBinding: repairBinding(
+          element,
+          element.endBinding,
+          elementsMap,
+          "end"
+        ),
         startArrowhead: startArrowhead2,
         endArrowhead: endArrowhead2,
         points: points2,
@@ -4918,15 +4714,19 @@ var restoreElement = (element, opts) => {
         elbowed: element.elbowed,
         ...getSizeFromPoints(points2)
       };
-      return isElbowArrow(element) ? restoreElementWithProperties(element, {
+      const restoredElement = isElbowArrow(element) ? restoreElementWithProperties(element, {
         ...base,
         elbowed: true,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
         fixedSegments: element.fixedSegments?.length && base.points.length >= 4 ? element.fixedSegments : null,
         startIsSpecial: element.startIsSpecial,
         endIsSpecial: element.endIsSpecial
       }) : restoreElementWithProperties(element, base);
+      return {
+        ...restoredElement,
+        ...LinearElementEditor2.getNormalizeElementPointsAndCoords(
+          restoredElement
+        )
+      };
     }
     case "ellipse":
     case "rectangle":
@@ -4991,17 +4791,22 @@ var repairFrameMembership = (element, elementsMap) => {
     }
   }
 };
-var restoreElements = (elements, localElements, opts) => {
+var restoreElements = (targetElements, localElements, opts) => {
   const existingIds = /* @__PURE__ */ new Set();
+  const elementsMap = arrayToMap2(targetElements || []);
   const localElementsMap = localElements ? arrayToMap2(localElements) : null;
   const restoredElements = syncInvalidIndices2(
-    (elements || []).reduce((elements2, element) => {
+    (targetElements || []).reduce((elements, element) => {
       if (element.type === "selection") {
-        return elements2;
+        return elements;
       }
-      let migratedElement = restoreElement(element, {
-        deleteInvisibleElements: opts?.deleteInvisibleElements
-      });
+      let migratedElement = restoreElement(
+        element,
+        elementsMap,
+        {
+          deleteInvisibleElements: opts?.deleteInvisibleElements
+        }
+      );
       if (migratedElement) {
         const localElement = localElementsMap?.get(element.id);
         const shouldMarkAsDeleted = opts?.deleteInvisibleElements && isInvisiblySmallElement(element);
@@ -5015,9 +4820,9 @@ var restoreElements = (elements, localElements, opts) => {
           migratedElement = { ...migratedElement, id: randomId() };
         }
         existingIds.add(migratedElement.id);
-        elements2.push(migratedElement);
+        elements.push(migratedElement);
       }
-      return elements2;
+      return elements;
     }, [])
   );
   if (!opts?.repairBindings) {
@@ -5061,7 +4866,7 @@ var restoreElements = (elements, localElements, opts) => {
           restoredElementsMap,
           {
             points: [
-              pointFrom3(0, 0),
+              pointFrom2(0, 0),
               element.points[element.points.length - 1]
             ]
           }
@@ -5090,10 +4895,10 @@ var restoreElements = (elements, localElements, opts) => {
         width: boundElement.width,
         height: boundElement.height,
         points: [
-          pointFrom3(0, 0),
-          pointFrom3(0, -10),
-          pointFrom3(boundElement.width / 2 + 5, -10),
-          pointFrom3(
+          pointFrom2(0, 0),
+          pointFrom2(0, -10),
+          pointFrom2(boundElement.width / 2 + 5, -10),
+          pointFrom2(
             boundElement.width / 2 + 5,
             boundElement.height / 2 + 5
           )
@@ -5219,7 +5024,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-VTYIFRQE.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-S2GFZH7W.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5303,7 +5108,7 @@ var loadSceneOrLibraryFromBlob = async (blob, localAppState, localElements, file
         type: MIME_TYPES6.excalidraw,
         data: restore(
           {
-            elements: clearElementsForExport2(data.elements || []),
+            elements: data.elements || [],
             appState: {
               theme: localAppState?.theme,
               fileHandle: fileHandle || blob.handle || null,
@@ -5476,61 +5281,52 @@ var getFileHandle = async (event) => {
   }
   return null;
 };
-var getActualMimeTypeFromImage = (buffer) => {
+var getActualMimeTypeFromImage = async (file) => {
   let mimeType = null;
-  const first8Bytes = `${[...new Uint8Array(buffer).slice(0, 8)].join(" ")} `;
-  const headerBytes = {
+  const leadingBytes = [
+    ...new Uint8Array(await blobToArrayBuffer(file.slice(0, 15)))
+  ].join(" ");
+  const bytes = {
     // https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_header
-    png: "137 80 78 71 13 10 26 10 ",
+    png: /^137 80 78 71 13 10 26 10\b/,
     // https://en.wikipedia.org/wiki/JPEG#Syntax_and_structure
     // jpg is a bit wonky. Checking the first three bytes should be enough,
     // but may yield false positives. (https://stackoverflow.com/a/23360709/927631)
-    jpg: "255 216 255 ",
+    jpg: /^255 216 255\b/,
     // https://en.wikipedia.org/wiki/GIF#Example_GIF_file
-    gif: "71 73 70 56 57 97 "
+    gif: /^71 73 70 56 57 97\b/,
+    // 4 bytes for RIFF + 4 bytes for chunk size + WEBP identifier
+    webp: /^82 73 70 70 \d+ \d+ \d+ \d+ 87 69 66 80 86 80 56\b/
   };
-  if (first8Bytes === headerBytes.png) {
-    mimeType = MIME_TYPES6.png;
-  } else if (first8Bytes.startsWith(headerBytes.jpg)) {
-    mimeType = MIME_TYPES6.jpg;
-  } else if (first8Bytes.startsWith(headerBytes.gif)) {
-    mimeType = MIME_TYPES6.gif;
-  }
-  return mimeType;
+  for (const type of Object.keys(bytes)) {
+    if (leadingBytes.match(bytes[type])) {
+      mimeType = MIME_TYPES6[type];
+      break;
+    }
+  }
+  return mimeType || file.type || null;
 };
 var createFile = (blob, mimeType, name) => {
   return new File([blob], name || "", {
     type: mimeType
   });
 };
+var normalizedFileSymbol = Symbol("fileNormalized");
 var normalizeFile = async (file) => {
-  if (!file.type) {
-    if (file?.name?.endsWith(".excalidrawlib")) {
-      file = createFile(
-        await blobToArrayBuffer(file),
-        MIME_TYPES6.excalidrawlib,
-        file.name
-      );
-    } else if (file?.name?.endsWith(".excalidraw")) {
-      file = createFile(
-        await blobToArrayBuffer(file),
-        MIME_TYPES6.excalidraw,
-        file.name
-      );
-    } else {
-      const buffer = await blobToArrayBuffer(file);
-      const mimeType = getActualMimeTypeFromImage(buffer);
-      if (mimeType) {
-        file = createFile(buffer, mimeType, file.name);
-      }
-    }
-  } else if (isSupportedImageFile(file)) {
-    const buffer = await blobToArrayBuffer(file);
-    const mimeType = getActualMimeTypeFromImage(buffer);
+  if (file[normalizedFileSymbol]) {
+    return file;
+  }
+  if (file?.name?.endsWith(".excalidrawlib")) {
+    file = createFile(file, MIME_TYPES6.excalidrawlib, file.name);
+  } else if (file?.name?.endsWith(".excalidraw")) {
+    file = createFile(file, MIME_TYPES6.excalidraw, file.name);
+  } else if (!file.type || file.type?.startsWith("image/")) {
+    const mimeType = await getActualMimeTypeFromImage(file);
     if (mimeType && mimeType !== file.type) {
-      file = createFile(buffer, mimeType, file.name);
+      file = createFile(file, mimeType, file.name);
     }
   }
+  file[normalizedFileSymbol] = true;
   return file;
 };
 var blobToArrayBuffer = (blob) => {
@@ -5630,10 +5426,7 @@ export {
   fillCircle,
   getNormalizedCanvasDimensions,
   bootstrapCanvas,
-  drawHighlightForRectWithRotation,
-  strokeEllipseWithRotation,
-  strokeRectWithRotation,
-  drawHighlightForDiamondWithRotation,
+  strokeRectWithRotation_simple,
   frameClip,
   renderStaticSceneThrottled,
   renderStaticScene,
@@ -5669,4 +5462,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-WWDIUJ2Q.js.map
+//# sourceMappingURL=chunk-SJTAY27F.js.map