@excalidraw/excalidraw 0.18.0-432a46e → 0.18.0-58f7d33

package/dist/dev/{chunk-S7W4OWSF.js → chunk-LEJJ2YZY.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-ZG3EI5XS.js";
+} from "./chunk-KKJLIRJU.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -103,6 +103,7 @@ var BinaryHeap = class {
 
 // ../common/src/colors.ts
 import oc from "open-color";
+var COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
 var pick = (source, keys) => {
   return keys.reduce((acc, key) => {
     if (key in source) {
@@ -263,7 +264,8 @@ var YOUTUBE_STATES = {
 };
 var ENV = {
   TEST: "test",
-  DEVELOPMENT: "development"
+  DEVELOPMENT: "development",
+  PRODUCTION: "production"
 };
 var CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
@@ -410,6 +412,9 @@ var DEFAULT_EXPORT_PADDING = 10;
 var DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 var MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
 var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+`;
 var VERSIONS = {
   excalidraw: 2,
   excalidrawLibrary: 2
@@ -479,6 +484,7 @@ var LIBRARY_DISABLED_TYPES = /* @__PURE__ */ new Set([
 ]);
 var TOOL_TYPE = {
   selection: "selection",
+  lasso: "lasso",
   rectangle: "rectangle",
   diamond: "diamond",
   ellipse: "ellipse",
@@ -935,9 +941,9 @@ var distanceToLineSegment = (point, line2) => {
   const dy = y - yy;
   return Math.sqrt(dx * dx + dy * dy);
 };
-function lineSegmentIntersectionPoints(l, s) {
+function lineSegmentIntersectionPoints(l, s, threshold) {
   const candidate = linesIntersectAt(line(l[0], l[1]), line(s[0], s[1]));
-  if (!candidate || !pointOnLineSegment(candidate, s) || !pointOnLineSegment(candidate, l)) {
+  if (!candidate || !pointOnLineSegment(candidate, s, threshold) || !pointOnLineSegment(candidate, l, threshold)) {
     return null;
   }
   return candidate;
@@ -1131,6 +1137,27 @@ var polygonIncludesPoint = (point, polygon2) => {
   }
   return inside;
 };
+var polygonIncludesPointNonZero = (point, polygon2) => {
+  const [x, y] = point;
+  let windingNumber = 0;
+  for (let i = 0; i < polygon2.length; i++) {
+    const j = (i + 1) % polygon2.length;
+    const [xi, yi] = polygon2[i];
+    const [xj, yj] = polygon2[j];
+    if (yi <= y) {
+      if (yj > y) {
+        if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) > 0) {
+          windingNumber++;
+        }
+      }
+    } else if (yj <= y) {
+      if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) < 0) {
+        windingNumber--;
+      }
+    }
+  }
+  return windingNumber !== 0;
+};
 var pointOnPolygon = (p, poly, threshold = PRECISION) => {
   let on = false;
   for (let i = 0, l = poly.length - 1; i < l; i++) {
@@ -1469,7 +1496,8 @@ var updateActiveTool = (appState, data) => {
     lastActiveTool: data.lastActiveToolBeforeEraser === void 0 ? appState.activeTool.lastActiveTool : data.lastActiveToolBeforeEraser,
     type: data.type,
     customType: null,
-    locked: data.locked ?? appState.activeTool.locked
+    locked: data.locked ?? appState.activeTool.locked,
+    fromSelection: data.fromSelection ?? false
   };
 };
 var getShortcutKey = (shortcut) => {
@@ -1627,6 +1655,7 @@ var arrayToList = (array) => array.reduce((acc, curr, index) => {
 }, []);
 var isTestEnv = () => define_import_meta_env_default.MODE === ENV.TEST;
 var isDevEnv = () => define_import_meta_env_default.MODE === ENV.DEVELOPMENT;
+var isProdEnv = () => define_import_meta_env_default.MODE === ENV.PRODUCTION;
 var isServerEnv = () => typeof process !== "undefined" && true;
 var wrapEvent = (name, nativeEvent) => {
   return new CustomEvent(name, {
@@ -1838,6 +1867,12 @@ var escapeDoubleQuotes = (str) => {
   return str.replace(/"/g, "&quot;");
 };
 var castArray = (value) => Array.isArray(value) ? value : [value];
+var elementCenterPoint = (element, xOffset = 0, yOffset = 0) => {
+  const { x, y, width, height } = element;
+  const centerXPoint = x + width / 2 + xOffset;
+  const centerYPoint = y + height / 2 + yOffset;
+  return pointFrom(centerXPoint, centerYPoint);
+};
 
 // ../common/src/random.ts
 var random = new Random(Date.now());
@@ -2107,6 +2142,9 @@ var pointInEllipse = (p, ellipse2) => {
   return rotatedPointX / halfWidth * (rotatedPointX / halfWidth) + rotatedPointY / halfHeight * (rotatedPointY / halfHeight) <= 1;
 };
 
+// ../element/src/bounds.ts
+import { pointsOnBezierCurves as pointsOnBezierCurves2 } from "points-on-curve";
+
 // ../element/src/ShapeCache.ts
 import { RoughGenerator } from "roughjs/bin/generator";
 
@@ -2407,10 +2445,7 @@ function deconstructRectanguloidElement(element, offset = 0) {
     const sides2 = [top2, right2, bottom2, left2];
     return [sides2, []];
   }
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const r = rectangle(
     pointFrom(element.x, element.y),
     pointFrom(element.x + element.width, element.y + element.height)
@@ -2576,10 +2611,7 @@ function deconstructDiamondElement(element, offset = 0) {
     );
     return [[topRight, bottomRight, bottomLeft, topLeft], []];
   }
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const [top, right, bottom, left] = [
     pointFrom(element.x + topX, element.y + topY),
     pointFrom(element.x + rightX, element.y + rightY),
@@ -2760,10 +2792,7 @@ var intersectElementWithLineSegment = (element, line2, offset = 0) => {
   }
 };
 var intersectRectanguloidWithLineSegment = (element, l, offset = 0) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const rotatedA = pointRotateRads(
     l[0],
     center,
@@ -2793,10 +2822,7 @@ var intersectRectanguloidWithLineSegment = (element, l, offset = 0) => {
   );
 };
 var intersectDiamondWithLineSegment = (element, l, offset = 0) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const rotatedA = pointRotateRads(l[0], center, -element.angle);
   const rotatedB = pointRotateRads(l[1], center, -element.angle);
   const [sides, curves] = deconstructDiamondElement(element, offset);
@@ -2814,10 +2840,7 @@ var intersectDiamondWithLineSegment = (element, l, offset = 0) => {
   );
 };
 var intersectEllipseWithLineSegment = (element, l, offset = 0) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const rotatedA = pointRotateRads(l[0], center, -element.angle);
   const rotatedB = pointRotateRads(l[1], center, -element.angle);
   return ellipseLineIntersectionPoints(
@@ -2863,10 +2886,7 @@ var distanceToBindableElement = (element, p) => {
   }
 };
 var distanceToRectanguloidElement = (element, p) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const rotatedPoint = pointRotateRads(p, center, -element.angle);
   const [sides, corners] = deconstructRectanguloidElement(element);
   return Math.min(
@@ -2875,10 +2895,7 @@ var distanceToRectanguloidElement = (element, p) => {
   );
 };
 var distanceToDiamondElement = (element, p) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const rotatedPoint = pointRotateRads(p, center, -element.angle);
   const [sides, curves] = deconstructDiamondElement(element);
   return Math.min(
@@ -2887,10 +2904,7 @@ var distanceToDiamondElement = (element, p) => {
   );
 };
 var distanceToEllipseElement = (element, p) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   return ellipseDistanceFromPoint(
     // Instead of rotating the ellipse, rotate the point to the inverse angle
     pointRotateRads(p, center, -element.angle),
@@ -2903,19 +2917,6 @@ var HEADING_RIGHT = [1, 0];
 var HEADING_DOWN = [0, 1];
 var HEADING_LEFT = [-1, 0];
 var HEADING_UP = [0, -1];
-var headingForDiamond = (a, b) => {
-  const angle = radiansToDegrees(
-    normalizeRadians(Math.atan2(b[1] - a[1], b[0] - a[0]))
-  );
-  if (angle >= 315 || angle < 45) {
-    return HEADING_UP;
-  } else if (angle >= 45 && angle < 135) {
-    return HEADING_RIGHT;
-  } else if (angle >= 135 && angle < 225) {
-    return HEADING_DOWN;
-  }
-  return HEADING_LEFT;
-};
 var vectorToHeading = (vec) => {
   const [x, y] = vec;
   const absX = Math.abs(x);
@@ -2933,69 +2934,135 @@ var headingForPoint = (p, o) => vectorToHeading(vectorFromPoint(p, o));
 var headingForPointIsHorizontal = (p, o) => headingIsHorizontal(headingForPoint(p, o));
 var compareHeading = (a, b) => a[0] === b[0] && a[1] === b[1];
 var headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
-var headingForPointFromElement = (element, aabb, p) => {
-  const SEARCH_CONE_MULTIPLIER = 2;
+var headingForPointFromDiamondElement = (element, aabb, point) => {
   const midPoint = getCenterForBounds(aabb);
-  if (element.type === "diamond") {
-    if (p[0] < element.x) {
-      return HEADING_LEFT;
-    } else if (p[1] < element.y) {
-      return HEADING_UP;
-    } else if (p[0] > element.x + element.width) {
-      return HEADING_RIGHT;
-    } else if (p[1] > element.y + element.height) {
-      return HEADING_DOWN;
-    }
-    const top = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER
-      ),
-      midPoint,
-      element.angle
+  if (isDevEnv() || isTestEnv()) {
+    invariant(
+      element.width > 0 && element.height > 0,
+      "Diamond element has no width or height"
     );
-    const right = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width, element.y + element.height / 2),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER
-      ),
-      midPoint,
-      element.angle
+    invariant(
+      !pointsEqual(midPoint, point),
+      "The point is too close to the element mid point to determine heading"
     );
-    const bottom = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y + element.height),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER
+  }
+  const SHRINK = 0.95;
+  const top = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom(element.x + element.width / 2, element.y),
+          midPoint,
+          element.angle
+        ),
+        midPoint
       ),
-      midPoint,
-      element.angle
-    );
-    const left = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x, element.y + element.height / 2),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER
+      SHRINK
+    ),
+    midPoint
+  );
+  const right = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom(
+            element.x + element.width,
+            element.y + element.height / 2
+          ),
+          midPoint,
+          element.angle
+        ),
+        midPoint
       ),
-      midPoint,
-      element.angle
-    );
-    if (triangleIncludesPoint([top, right, midPoint], p)) {
-      return headingForDiamond(top, right);
-    } else if (triangleIncludesPoint(
-      [right, bottom, midPoint],
-      p
-    )) {
-      return headingForDiamond(right, bottom);
-    } else if (triangleIncludesPoint(
-      [bottom, left, midPoint],
-      p
-    )) {
-      return headingForDiamond(bottom, left);
-    }
-    return headingForDiamond(left, top);
+      SHRINK
+    ),
+    midPoint
+  );
+  const bottom = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom(
+            element.x + element.width / 2,
+            element.y + element.height
+          ),
+          midPoint,
+          element.angle
+        ),
+        midPoint
+      ),
+      SHRINK
+    ),
+    midPoint
+  );
+  const left = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom(element.x, element.y + element.height / 2),
+          midPoint,
+          element.angle
+        ),
+        midPoint
+      ),
+      SHRINK
+    ),
+    midPoint
+  );
+  if (vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, right)) <= 0 && vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, left)) > 0) {
+    return headingForPoint(top, midPoint);
+  } else if (vectorCross(
+    vectorFromPoint(point, right),
+    vectorFromPoint(right, bottom)
+  ) <= 0 && vectorCross(vectorFromPoint(point, right), vectorFromPoint(right, top)) > 0) {
+    return headingForPoint(right, midPoint);
+  } else if (vectorCross(
+    vectorFromPoint(point, bottom),
+    vectorFromPoint(bottom, left)
+  ) <= 0 && vectorCross(
+    vectorFromPoint(point, bottom),
+    vectorFromPoint(bottom, right)
+  ) > 0) {
+    return headingForPoint(bottom, midPoint);
+  } else if (vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, top)) <= 0 && vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, bottom)) > 0) {
+    return headingForPoint(left, midPoint);
+  }
+  if (vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(top, midPoint)
+  ) <= 0 && vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(right, midPoint)
+  ) > 0) {
+    const p2 = element.width > element.height ? top : right;
+    return headingForPoint(p2, midPoint);
+  } else if (vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(right, midPoint)
+  ) <= 0 && vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(bottom, midPoint)
+  ) > 0) {
+    const p2 = element.width > element.height ? bottom : right;
+    return headingForPoint(p2, midPoint);
+  } else if (vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(bottom, midPoint)
+  ) <= 0 && vectorCross(
+    vectorFromPoint(point, midPoint),
+    vectorFromPoint(left, midPoint)
+  ) > 0) {
+    const p2 = element.width > element.height ? bottom : left;
+    return headingForPoint(p2, midPoint);
+  }
+  const p = element.width > element.height ? top : left;
+  return headingForPoint(p, midPoint);
+};
+var headingForPointFromElement = (element, aabb, p) => {
+  const SEARCH_CONE_MULTIPLIER = 2;
+  const midPoint = getCenterForBounds(aabb);
+  if (element.type === "diamond") {
+    return headingForPointFromDiamondElement(element, aabb, p);
   }
   const topLeft = pointScaleFromOrigin(
     pointFrom(aabb[0], aabb[1]),
@@ -3539,13 +3606,7 @@ var getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, element
   );
   if (!distance2) {
     return vectorToHeading(
-      vectorFromPoint(
-        p,
-        pointFrom(
-          bindableElement.x + bindableElement.width / 2,
-          bindableElement.y + bindableElement.height / 2
-        )
-      )
+      vectorFromPoint(p, elementCenterPoint(bindableElement))
     );
   }
   return headingForPointFromElement(bindableElement, aabb, p);
@@ -3639,10 +3700,7 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd) => {
   return edgePoint;
 };
 var avoidRectangularCorner = (element, p) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   const nonRotatedPoint = pointRotateRads(p, center, -element.angle);
   if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
     if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
@@ -3713,10 +3771,7 @@ var avoidRectangularCorner = (element, p) => {
 };
 var snapToMid = (element, p, tolerance = 0.05) => {
   const { x, y, width, height, angle } = element;
-  const center = pointFrom(
-    x + width / 2 - 0.1,
-    y + height / 2 - 0.1
-  );
+  const center = elementCenterPoint(element, -0.1, -0.1);
   const nonRotated = pointRotateRads(p, center, -angle);
   const verticalThrehsold = clamp(tolerance * height, 5, 80);
   const horizontalThrehsold = clamp(tolerance * width, 5, 80);
@@ -3761,10 +3816,7 @@ var updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, ele
       startOrEnd === "startBinding" ? "start" : "end",
       elementsMap
     ).fixedPoint;
-    const globalMidPoint = pointFrom(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2
-    );
+    const globalMidPoint = elementCenterPoint(bindableElement);
     const global = pointFrom(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
       bindableElement.y + fixedPoint[1] * bindableElement.height
@@ -3800,10 +3852,7 @@ var updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, ele
       edgePointIndex,
       elementsMap
     );
-    const center = pointFrom(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2
-    );
+    const center = elementCenterPoint(bindableElement);
     const interceptorLength = pointDistance(adjacentPoint, edgePointAbsolute) + pointDistance(adjacentPoint, center) + Math.max(bindableElement.width, bindableElement.height) * 2;
     const intersections = [
       ...intersectElementWithLineSegment(
@@ -3910,7 +3959,7 @@ var getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     )
   );
 };
-var fixBindingsAfterDuplication = (newElements, oldIdToDuplicatedId, duplicatedElementsMap) => {
+var fixDuplicatedBindingsAfterDuplication = (newElements, oldIdToDuplicatedId, duplicatedElementsMap) => {
   for (const element of newElements) {
     if ("boundElements" in element && element.boundElements) {
       Object.assign(element, {
@@ -3966,6 +4015,151 @@ var fixBindingsAfterDuplication = (newElements, oldIdToDuplicatedId, duplicatedE
     }
   }
 };
+var fixReversedBindingsForBindables = (original, duplicate, originalElements, elementsWithClones, oldIdToDuplicatedId) => {
+  original.boundElements?.forEach((binding, idx) => {
+    if (binding.type !== "arrow") {
+      return;
+    }
+    const oldArrow = elementsWithClones.find((el) => el.id === binding.id);
+    if (!isBindingElement(oldArrow)) {
+      return;
+    }
+    if (originalElements.has(binding.id)) {
+      const newArrowId = oldIdToDuplicatedId.get(binding.id) ?? binding.id;
+      const newArrow = elementsWithClones.find(
+        (el) => el.id === newArrowId
+      );
+      mutateElement(newArrow, {
+        startBinding: oldArrow.startBinding?.elementId === binding.id ? {
+          ...oldArrow.startBinding,
+          elementId: duplicate.id
+        } : newArrow.startBinding,
+        endBinding: oldArrow.endBinding?.elementId === binding.id ? {
+          ...oldArrow.endBinding,
+          elementId: duplicate.id
+        } : newArrow.endBinding
+      });
+      mutateElement(duplicate, {
+        boundElements: [
+          ...(duplicate.boundElements ?? []).filter(
+            (el) => el.id !== binding.id && el.id !== newArrowId
+          ),
+          {
+            type: "arrow",
+            id: newArrowId
+          }
+        ]
+      });
+    } else {
+      mutateElement(oldArrow, {
+        startBinding: oldArrow.startBinding?.elementId === original.id ? {
+          ...oldArrow.startBinding,
+          elementId: duplicate.id
+        } : oldArrow.startBinding,
+        endBinding: oldArrow.endBinding?.elementId === original.id ? {
+          ...oldArrow.endBinding,
+          elementId: duplicate.id
+        } : oldArrow.endBinding
+      });
+      mutateElement(duplicate, {
+        boundElements: [
+          ...duplicate.boundElements ?? [],
+          {
+            type: "arrow",
+            id: oldArrow.id
+          }
+        ]
+      });
+      mutateElement(original, {
+        boundElements: original.boundElements?.filter((_, i) => i !== idx) ?? null
+      });
+    }
+  });
+};
+var fixReversedBindingsForArrows = (original, duplicate, originalElements, bindingProp, oldIdToDuplicatedId, elementsWithClones) => {
+  const oldBindableId = original[bindingProp]?.elementId;
+  if (oldBindableId) {
+    if (originalElements.has(oldBindableId)) {
+      const newBindableId = oldIdToDuplicatedId.get(oldBindableId) ?? oldBindableId;
+      const newBindable = elementsWithClones.find(
+        (el) => el.id === newBindableId
+      );
+      mutateElement(duplicate, {
+        [bindingProp]: {
+          ...original[bindingProp],
+          elementId: newBindableId
+        }
+      });
+      mutateElement(newBindable, {
+        boundElements: [
+          ...(newBindable.boundElements ?? []).filter(
+            (el) => el.id !== original.id && el.id !== duplicate.id
+          ),
+          {
+            id: duplicate.id,
+            type: "arrow"
+          }
+        ]
+      });
+    } else {
+      const originalBindable = elementsWithClones.find(
+        (el) => el.id === oldBindableId
+      );
+      if (originalBindable) {
+        mutateElement(duplicate, {
+          [bindingProp]: original[bindingProp]
+        });
+        mutateElement(original, {
+          [bindingProp]: null
+        });
+        mutateElement(originalBindable, {
+          boundElements: [
+            ...originalBindable.boundElements?.filter(
+              (el) => el.id !== original.id
+            ) ?? [],
+            {
+              id: duplicate.id,
+              type: "arrow"
+            }
+          ]
+        });
+      }
+    }
+  }
+};
+var fixReversedBindings = (originalElements, elementsWithClones, oldIdToDuplicatedId) => {
+  for (const original of originalElements.values()) {
+    const duplicate = elementsWithClones.find(
+      (el) => el.id === oldIdToDuplicatedId.get(original.id)
+    );
+    if (isBindableElement(original) && isBindableElement(duplicate)) {
+      fixReversedBindingsForBindables(
+        original,
+        duplicate,
+        originalElements,
+        elementsWithClones,
+        oldIdToDuplicatedId
+      );
+    } else if (isArrowElement(original) && isArrowElement(duplicate)) {
+      fixReversedBindingsForArrows(
+        original,
+        duplicate,
+        originalElements,
+        "startBinding",
+        oldIdToDuplicatedId,
+        elementsWithClones
+      );
+      fixReversedBindingsForArrows(
+        original,
+        duplicate,
+        originalElements,
+        "endBinding",
+        oldIdToDuplicatedId,
+        elementsWithClones
+      );
+    }
+  }
+};
 var fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
   const elements = arrayToMap(sceneElements);
   for (const element of deletedElements) {
@@ -4005,10 +4199,7 @@ var maxBindingGap = (element, elementWidth, elementHeight, zoom) => {
   );
 };
 var determineFocusDistance = (element, a, b) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   if (pointsEqual(a, b)) {
     return 0;
   }
@@ -4111,10 +4302,7 @@ var determineFocusDistance = (element, a, b) => {
   return signedDistanceRatio;
 };
 var determineFocusPoint = (element, focus, adjacentPoint) => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2
-  );
+  const center = elementCenterPoint(element);
   if (focus === 0) {
     return center;
   }
@@ -4392,10 +4580,7 @@ var getGlobalFixedPointForBindableElement = (fixedPointRatio, element) => {
       element.x + element.width * fixedX,
       element.y + element.height * fixedY
     ),
-    pointFrom(
-      element.x + element.width / 2,
-      element.y + element.height / 2
-    ),
+    elementCenterPoint(element),
     element.angle
   );
 };
@@ -6443,13 +6628,19 @@ var satisfiesWordInvariant = (word) => {
 // ../element/src/textElement.ts
 var redrawTextBoundingBox = (textElement, container, elementsMap, informMutation = true) => {
   let maxWidth = void 0;
+  if (!isProdEnv()) {
+    invariant(
+      !container || !isArrowElement(container) || textElement.angle === 0,
+      "text element angle must be 0 if bound to arrow container"
+    );
+  }
   const boundTextUpdates = {
     x: textElement.x,
     y: textElement.y,
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
-    angle: container?.angle ?? textElement.angle
+    angle: container ? isArrowElement(container) ? 0 : container.angle : textElement.angle
   };
   boundTextUpdates.text = textElement.text;
   if (container || !textElement.autoResize) {
@@ -6667,7 +6858,10 @@ var getContainerCoords = (container) => {
   };
 };
 var getTextElementAngle = (textElement, container) => {
-  if (!container || isArrowElement(container)) {
+  if (isArrowElement(container)) {
+    return 0;
+  }
+  if (!container) {
     return textElement.angle;
   }
   return container.angle;
@@ -8308,6 +8502,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     this.elementId = element.id;
     if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
+      _LinearElementEditor.normalizePoints(element);
     }
     this.selectedPointsIndices = null;
     this.lastUncommittedPoint = null;
@@ -9706,7 +9901,7 @@ var aabbForElement = (element, offset) => {
     midX: element.x + element.width / 2,
     midY: element.y + element.height / 2
   };
-  const center = pointFrom(bbox.midX, bbox.midY);
+  const center = elementCenterPoint(element);
   const [topLeftX, topLeftY] = pointRotateRads(
     pointFrom(bbox.minX, bbox.minY),
     center,
@@ -9791,7 +9986,7 @@ var cropElement = (element, transformHandle, naturalWidth, naturalHeight, pointe
   const croppedTop = (element.crop?.y ?? 0) / naturalHeightToUncropped;
   const rotatedPointer = pointRotateRads(
     pointFrom(pointerX, pointerY),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    elementCenterPoint(element),
     -element.angle
   );
   pointerX = rotatedPointer[0];
@@ -11463,40 +11658,62 @@ var getElementAbsoluteCoords = (element, elementsMap, includeBoundText = false)
   ];
 };
 var getElementLineSegments = (element, elementsMap) => {
+  const shape = getElementShape(element, elementsMap);
   const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
     element,
     elementsMap
   );
   const center = pointFrom(cx, cy);
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const segments = [];
+  if (shape.type === "polycurve") {
+    const curves = shape.data;
+    const points = curves.map((curve2) => pointsOnBezierCurves2(curve2, 10)).flat();
     let i = 0;
-    while (i < element.points.length - 1) {
+    const segments = [];
+    while (i < points.length - 1) {
       segments.push(
         lineSegment(
-          pointRotateRads(
-            pointFrom(
-              element.points[i][0] + element.x,
-              element.points[i][1] + element.y
-            ),
-            center,
-            element.angle
-          ),
-          pointRotateRads(
-            pointFrom(
-              element.points[i + 1][0] + element.x,
-              element.points[i + 1][1] + element.y
-            ),
-            center,
-            element.angle
-          )
+          pointFrom(points[i][0], points[i][1]),
+          pointFrom(points[i + 1][0], points[i + 1][1])
         )
       );
       i++;
     }
     return segments;
+  } else if (shape.type === "polyline") {
+    return shape.data;
+  } else if (_isRectanguloidElement(element)) {
+    const [sides, corners] = deconstructRectanguloidElement(element);
+    const cornerSegments = corners.map((corner) => getSegmentsOnCurve(corner, center, element.angle)).flat();
+    const rotatedSides = getRotatedSides(sides, center, element.angle);
+    return [...rotatedSides, ...cornerSegments];
+  } else if (element.type === "diamond") {
+    const [sides, corners] = deconstructDiamondElement(element);
+    const cornerSegments = corners.map((corner) => getSegmentsOnCurve(corner, center, element.angle)).flat();
+    const rotatedSides = getRotatedSides(sides, center, element.angle);
+    return [...rotatedSides, ...cornerSegments];
+  } else if (shape.type === "polygon") {
+    if (isTextElement(element)) {
+      const container = getContainerElement(element, elementsMap);
+      if (container && isLinearElement(container)) {
+        const segments2 = [
+          lineSegment(pointFrom(x1, y1), pointFrom(x2, y1)),
+          lineSegment(pointFrom(x2, y1), pointFrom(x2, y2)),
+          lineSegment(pointFrom(x2, y2), pointFrom(x1, y2)),
+          lineSegment(pointFrom(x1, y2), pointFrom(x1, y1))
+        ];
+        return segments2;
+      }
+    }
+    const points = shape.data;
+    const segments = [];
+    for (let i = 0; i < points.length - 1; i++) {
+      segments.push(lineSegment(points[i], points[i + 1]));
+    }
+    return segments;
+  } else if (shape.type === "ellipse") {
+    return getSegmentsOnEllipse(element);
   }
-  const [nw, ne, sw, se, n, s, w, e] = [
+  const [nw, ne, sw, se, , , w, e] = [
     [x1, y1],
     [x2, y1],
     [x1, y2],
@@ -11506,26 +11723,6 @@ var getElementLineSegments = (element, elementsMap) => {
     [x1, cy],
     [x2, cy]
   ].map((point) => pointRotateRads(point, center, element.angle));
-  if (element.type === "diamond") {
-    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e)
-    ];
-  }
-  if (element.type === "ellipse") {
-    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e)
-    ];
-  }
   return [
     lineSegment(nw, ne),
     lineSegment(sw, se),
@@ -11537,6 +11734,63 @@ var getElementLineSegments = (element, elementsMap) => {
     lineSegment(se, w)
   ];
 };
+var _isRectanguloidElement = (element) => {
+  return element != null && (element.type === "rectangle" || element.type === "image" || element.type === "iframe" || element.type === "embeddable" || element.type === "frame" || element.type === "magicframe" || element.type === "text" && !element.containerId);
+};
+var getRotatedSides = (sides, center, angle) => {
+  return sides.map((side) => {
+    return lineSegment(
+      pointRotateRads(side[0], center, angle),
+      pointRotateRads(side[1], center, angle)
+    );
+  });
+};
+var getSegmentsOnCurve = (curve2, center, angle) => {
+  const points = pointsOnBezierCurves2(curve2, 10);
+  let i = 0;
+  const segments = [];
+  while (i < points.length - 1) {
+    segments.push(
+      lineSegment(
+        pointRotateRads(
+          pointFrom(points[i][0], points[i][1]),
+          center,
+          angle
+        ),
+        pointRotateRads(
+          pointFrom(points[i + 1][0], points[i + 1][1]),
+          center,
+          angle
+        )
+      )
+    );
+    i++;
+  }
+  return segments;
+};
+var getSegmentsOnEllipse = (ellipse2) => {
+  const center = pointFrom(
+    ellipse2.x + ellipse2.width / 2,
+    ellipse2.y + ellipse2.height / 2
+  );
+  const a = ellipse2.width / 2;
+  const b = ellipse2.height / 2;
+  const segments = [];
+  const points = [];
+  const n = 90;
+  const deltaT = Math.PI * 2 / n;
+  for (let i = 0; i < n; i++) {
+    const t = i * deltaT;
+    const x = center[0] + a * Math.cos(t);
+    const y = center[1] + b * Math.sin(t);
+    points.push(pointRotateRads(pointFrom(x, y), center, ellipse2.angle));
+  }
+  for (let i = 0; i < points.length - 1; i++) {
+    segments.push(lineSegment(points[i], points[i + 1]));
+  }
+  segments.push(lineSegment(points[points.length - 1], points[0]));
+  return segments;
+};
 var getDiamondPoints = (element) => {
   const topX = Math.floor(element.width / 2) + 1;
   const topY = 0;
@@ -12145,6 +12399,7 @@ var getDefaultAppState = () => {
       type: "selection",
       customType: null,
       locked: DEFAULT_ELEMENT_PROPS.locked,
+      fromSelection: false,
       lastActiveTool: null
     },
     penMode: false,
@@ -17109,6 +17364,7 @@ var getExportSize = (elements, exportPadding, scale) => {
 // data/restore.ts
 var AllowedExcalidrawActiveTools = {
   selection: true,
+  lasso: true,
   text: true,
   rectangle: true,
   diamond: true,
@@ -17187,7 +17443,7 @@ var restoreElementWithProperties = (element, extra) => {
   if ("customData" in element || "customData" in extra) {
     base.customData = "customData" in extra ? extra.customData : element.customData;
   }
-  return {
+  const ret = {
     // spread the original element properties to not lose unknown ones
     // for forward-compatibility
     ...element,
@@ -17196,6 +17452,9 @@ var restoreElementWithProperties = (element, extra) => {
     ...getNormalizedDimensions(base),
     ...extra
   };
+  delete ret.strokeSharpness;
+  delete ret.boundElementIds;
+  return ret;
 };
 var restoreElement = (element) => {
   element = { ...element };
@@ -17348,6 +17607,7 @@ var repairContainerElement = (container, elementsMap) => {
 };
 var repairBoundElement = (boundElement, elementsMap) => {
   const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;
+  boundElement.angle = isArrowElement(container) ? 0 : container?.angle ?? 0;
   if (!container) {
     boundElement.containerId = null;
     return;
@@ -17593,7 +17853,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./data/image-5HAY2PCR.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-U2IPNUKJ.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -17982,6 +18242,7 @@ var decodePngMetadata = async (blob) => {
 };
 
 export {
+  COLOR_OUTLINE_CONTRAST_THRESHOLD,
   MAX_CUSTOM_COLORS_USED_IN_CANVAS,
   COLORS_PER_ROW,
   DEFAULT_CHART_COLOR_INDEX,
@@ -18059,6 +18320,7 @@ export {
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   MAX_ALLOWED_FILE_BYTES,
   SVG_NS,
+  SVG_DOCUMENT_PREAMBLE,
   VERSIONS,
   BOUND_TEXT_PADDING,
   VERTICAL_ALIGN,
@@ -18105,7 +18367,11 @@ export {
   pointRotateRads,
   pointCenter,
   pointDistance,
+  lineSegment,
   pointOnLineSegment,
+  lineSegmentIntersectionPoints,
+  polygonFromPoints,
+  polygonIncludesPointNonZero,
   rangeInclusive,
   rangesOverlap,
   rangeIntersection,
@@ -18196,6 +18462,7 @@ export {
   isUsingAdaptiveRadius,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
+  shouldTestInside,
   hitElementItself,
   hitElementBoundingBox,
   hitElementBoundingBoxOnly,
@@ -18249,7 +18516,8 @@ export {
   updateBoundElements,
   bindPointToSnapToElementOutline,
   calculateFixedPointForElbowArrowBinding,
-  fixBindingsAfterDuplication,
+  fixDuplicatedBindingsAfterDuplication,
+  fixReversedBindings,
   fixBindingsAfterDeletion,
   maxBindingGap,
   bindingProperties,
@@ -18348,6 +18616,7 @@ export {
   getFreeDrawSvgPath,
   ShapeCache,
   getElementAbsoluteCoords,
+  getElementLineSegments,
   getElementBounds,
   getCommonBounds,
   getDraggedElementsBounds,
@@ -18439,4 +18708,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-S7W4OWSF.js.map
+//# sourceMappingURL=chunk-LEJJ2YZY.js.map