@excalidraw/element 0.18.0-c141960 → 0.18.0-c158187

package/dist/dev/index.js

@@ -2447,21 +2447,6 @@ var getClosedCurveShape = (element, roughShape, startingPoint = pointFrom(0, 0),
 
 // src/shape.ts
 init_define_import_meta_env();
-import {
-  pointFrom as pointFrom13,
-  pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads12
-} from "@excalidraw/math";
-import {
-  ROUGHNESS,
-  isTransparent as isTransparent3,
-  assertNever as assertNever2,
-  COLOR_PALETTE,
-  LINE_POLYGON_POINT_MERGE_DISTANCE
-} from "@excalidraw/common";
-
-// src/renderElement.ts
-init_define_import_meta_env();
 
 // ../../node_modules/perfect-freehand/dist/esm/index.js
 init_define_import_meta_env();
@@ -2626,7 +2611,24 @@ function ae(e, t = {}) {
   return ce(me(e, t), t);
 }
 
+// src/shape.ts
+import {
+  pointFrom as pointFrom13,
+  pointDistance as pointDistance6,
+  pointRotateRads as pointRotateRads12
+} from "@excalidraw/math";
+import {
+  ROUGHNESS,
+  THEME as THEME2,
+  isTransparent as isTransparent3,
+  assertNever as assertNever2,
+  COLOR_PALETTE,
+  LINE_POLYGON_POINT_MERGE_DISTANCE,
+  applyDarkModeFilter as applyDarkModeFilter2
+} from "@excalidraw/common";
+
 // src/renderElement.ts
+init_define_import_meta_env();
 import {
   isRightAngleRads,
   lineSegment as lineSegment6,
@@ -2644,7 +2646,8 @@ import {
   getFontString as getFontString3,
   isRTL,
   getVerticalOffset,
-  invariant as invariant9
+  invariant as invariant9,
+  applyDarkModeFilter
 } from "@excalidraw/common";
 
 // src/cropElement.ts
@@ -3129,7 +3132,6 @@ import {
 } from "@excalidraw/common";
 import {
   deconstructLinearOrFreeDrawElement as deconstructLinearOrFreeDrawElement2,
-  getHoveredElementForBinding as getHoveredElementForBinding2,
   isPathALoop as isPathALoop2,
   moveArrowAboveBindable,
   projectFixedPointOntoDiagonal as projectFixedPointOntoDiagonal2
@@ -3350,7 +3352,6 @@ var getDefaultRoundnessTypeForElement = (element) => {
   }
   return null;
 };
-var isBounds = (box) => Array.isArray(box) && box.length === 4 && typeof box[0] === "number" && typeof box[1] === "number" && typeof box[2] === "number" && typeof box[3] === "number";
 var getLinearElementSubType = (element) => {
   if (isSharpArrow(element)) {
     return "sharpArrow";
@@ -5177,7 +5178,11 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
 
 // src/heading.ts
 init_define_import_meta_env();
-import { invariant as invariant5, isDevEnv as isDevEnv2, isTestEnv as isTestEnv3 } from "@excalidraw/common";
+import {
+  invariant as invariant5,
+  isDevEnv as isDevEnv2,
+  isTestEnv as isTestEnv3
+} from "@excalidraw/common";
 import {
   pointFrom as pointFrom6,
   pointFromVector as pointFromVector5,
@@ -6955,10 +6960,12 @@ var shouldEnableBindingForPointerEvent = (event) => {
 var isBindingEnabled = (appState) => {
   return appState.isBindingEnabled;
 };
-var bindOrUnbindBindingElement = (arrow, draggingPoints, scene, appState, opts) => {
+var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePointerY, scene, appState, opts) => {
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
     arrow,
     draggingPoints,
+    scenePointerX,
+    scenePointerY,
     scene.getNonDeletedElementsMap(),
     scene.getNonDeletedElements(),
     appState,
@@ -7205,7 +7212,7 @@ var bindingStrategyForSimpleArrowEndpointDragging_complex = (point, currentBindi
   }
   return { current, other: isMultiPoint ? { mode: void 0 } : other };
 };
-var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoints, elementsMap, elements, appState, opts) => {
+var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoints, screenPointerX, screenPointerY, elementsMap, elements, appState, opts) => {
   if (getFeatureFlag("COMPLEX_BINDINGS")) {
     return getBindingStrategyForDraggingBindingElementEndpoints_complex(
       arrow,
@@ -7219,13 +7226,15 @@ var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoint
   return getBindingStrategyForDraggingBindingElementEndpoints_simple(
     arrow,
     draggingPoints,
+    screenPointerX,
+    screenPointerY,
     elementsMap,
     elements,
     appState,
     opts
   );
 };
-var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggingPoints, elementsMap, elements, appState, opts) => {
+var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggingPoints, scenePointerX, scenePointerY, elementsMap, elements, appState, opts) => {
   const startIdx = 0;
   const endIdx = arrow.points.length - 1;
   const startDragged = draggingPoints.has(startIdx);
@@ -7275,7 +7284,11 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     elementsMap,
     (e) => maxBindingDistance_simple(appState.zoom)
   );
-  const pointInElement = hit && isPointInElement(globalPoint, hit, elementsMap);
+  const pointInElement = hit && (opts?.angleLocked ? isPointInElement(
+    pointFrom8(scenePointerX, scenePointerY),
+    hit,
+    elementsMap
+  ) : isPointInElement(globalPoint, hit, elementsMap));
   const otherBindableElement = otherBinding ? elementsMap.get(
     otherBinding.elementId
   ) : void 0;
@@ -7345,10 +7358,25 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       elementsMap
     ) || globalPoint
   } : { mode: null };
+  const otherEndpoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startDragged ? -1 : 0,
+    elementsMap
+  );
   const other = otherBindableElement && !otherFocusPointIsInElement && appState.selectedLinearElement?.initialState.altFocusPoint ? {
     mode: "orbit",
     element: otherBindableElement,
     focusPoint: appState.selectedLinearElement.initialState.altFocusPoint
+  } : opts?.angleLocked && otherBindableElement ? {
+    mode: "orbit",
+    element: otherBindableElement,
+    focusPoint: projectFixedPointOntoDiagonal(
+      arrow,
+      otherEndpoint,
+      otherBindableElement,
+      startDragged ? "end" : "start",
+      elementsMap
+    ) || otherEndpoint
   } : { mode: void 0 };
   return {
     start: startDragged ? current : other,
@@ -7450,6 +7478,8 @@ var bindOrUnbindBindingElements = (selectedArrows, scene, appState) => {
       arrow,
       /* @__PURE__ */ new Map(),
       // No dragging points in this case
+      Infinity,
+      Infinity,
       scene,
       appState
     );
@@ -7578,7 +7608,14 @@ var updateBoundElements = (changedElement, scene, options) => {
 };
 var updateBindings = (latestElement, scene, appState, options) => {
   if (isArrowElement(latestElement)) {
-    bindOrUnbindBindingElement(latestElement, /* @__PURE__ */ new Map(), scene, appState);
+    bindOrUnbindBindingElement(
+      latestElement,
+      /* @__PURE__ */ new Map(),
+      Infinity,
+      Infinity,
+      scene,
+      appState
+    );
   } else {
     updateBoundElements(latestElement, scene, {
       ...options,
@@ -7617,7 +7654,7 @@ var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
 };
 var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector) => {
   const elbowed = isElbowArrow(arrowElement);
-  const point = customIntersector && !elbowed ? customIntersector[0] : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+  const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
     startOrEnd === "start" ? 0 : -1,
     elementsMap
@@ -7625,7 +7662,12 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
   if (arrowElement.points.length < 2) {
     return point;
   }
-  const edgePoint = isRectanguloidElement(bindableElement) ? avoidRectangularCorner(arrowElement, bindableElement, elementsMap, point) : point;
+  const edgePoint = isRectanguloidElement(bindableElement) && elbowed ? avoidRectangularCorner(
+    arrowElement,
+    bindableElement,
+    elementsMap,
+    point
+  ) : point;
   const adjacentPoint = customIntersector && !elbowed ? customIntersector[1] : LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
     startOrEnd === "start" ? 1 : -2,
@@ -8334,6 +8376,356 @@ var normalizeFixedPoint = (fixedPoint) => {
   }
   return fixedPoint;
 };
+var getShapeType = (element) => {
+  if (element.type === "ellipse" || element.type === "diamond") {
+    return element.type;
+  }
+  return "rectangle";
+};
+var SHAPE_CONFIGS = {
+  // rectangle: 15° corners, 75° edges
+  rectangle: [
+    { centerAngle: 0, sectorWidth: 75, side: "right" },
+    { centerAngle: 45, sectorWidth: 15, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 75, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 15, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 75, side: "left" },
+    { centerAngle: 225, sectorWidth: 15, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 75, side: "top" },
+    { centerAngle: 315, sectorWidth: 15, side: "top-right" }
+  ],
+  // diamond: 15° vertices, 75° edges
+  diamond: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" }
+  ],
+  // ellipse: 15° cardinal points, 75° diagonals
+  ellipse: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" }
+  ]
+};
+var getSectorBoundaries = (config) => {
+  return config.map((sector, index) => {
+    const halfWidth = sector.sectorWidth / 2;
+    let start = sector.centerAngle - halfWidth;
+    let end = sector.centerAngle + halfWidth;
+    start = (start % 360 + 360) % 360;
+    end = (end % 360 + 360) % 360;
+    return { start, end, side: sector.side };
+  });
+};
+var getShapeSideAdaptive = (fixedPoint, shapeType) => {
+  const [x, y] = fixedPoint;
+  const centerX = x - 0.5;
+  const centerY = y - 0.5;
+  let angle = Math.atan2(centerY, centerX);
+  if (angle < 0) {
+    angle += 2 * Math.PI;
+  }
+  const degrees = angle * 180 / Math.PI;
+  const config = SHAPE_CONFIGS[shapeType];
+  const boundaries = getSectorBoundaries(config);
+  for (const boundary of boundaries) {
+    if (boundary.start <= boundary.end) {
+      if (degrees >= boundary.start && degrees <= boundary.end) {
+        return boundary.side;
+      }
+    } else if (degrees >= boundary.start || degrees <= boundary.end) {
+      return boundary.side;
+    }
+  }
+  let minDiff = Infinity;
+  let nearestSide = config[0].side;
+  for (const sector of config) {
+    let diff = Math.abs(degrees - sector.centerAngle);
+    if (diff > 180) {
+      diff = 360 - diff;
+    }
+    if (diff < minDiff) {
+      minDiff = diff;
+      nearestSide = sector.side;
+    }
+  }
+  return nearestSide;
+};
+var getBindingSideMidPoint = (binding, elementsMap) => {
+  const bindableElement = elementsMap.get(binding.elementId);
+  if (!bindableElement || bindableElement.isDeleted || !isBindableElement(bindableElement)) {
+    return null;
+  }
+  const center = elementCenterPoint(bindableElement, elementsMap);
+  const shapeType = getShapeType(bindableElement);
+  const side = getShapeSideAdaptive(
+    normalizeFixedPoint(binding.fixedPoint),
+    shapeType
+  );
+  const OFFSET = 0.01;
+  if (bindableElement.type === "diamond") {
+    const [sides, corners] = deconstructDiamondElement(bindableElement);
+    const [bottomRight, bottomLeft, topLeft, topRight] = sides;
+    let x;
+    let y;
+    switch (side) {
+      case "left": {
+        if (corners.length >= 3) {
+          const leftCorner = corners[2];
+          const midPoint = leftCorner[1];
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        } else {
+          const midPoint = getMidPoint(bottomLeft[1], topLeft[0]);
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "right": {
+        if (corners.length >= 1) {
+          const rightCorner = corners[0];
+          const midPoint = rightCorner[1];
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        } else {
+          const midPoint = getMidPoint(topRight[1], bottomRight[0]);
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "top": {
+        if (corners.length >= 4) {
+          const topCorner = corners[3];
+          const midPoint = topCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        } else {
+          const midPoint = getMidPoint(topLeft[1], topRight[0]);
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        }
+        break;
+      }
+      case "bottom": {
+        if (corners.length >= 2) {
+          const bottomCorner = corners[1];
+          const midPoint = bottomCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        } else {
+          const midPoint = getMidPoint(bottomRight[1], bottomLeft[0]);
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        const midPoint = getMidPoint(topRight[0], topRight[1]);
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const midPoint = getMidPoint(bottomRight[0], bottomRight[1]);
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const midPoint = getMidPoint(bottomLeft[0], bottomLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const midPoint = getMidPoint(topLeft[0], topLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  if (bindableElement.type === "ellipse") {
+    const ellipseCenterX = bindableElement.x + bindableElement.width / 2;
+    const ellipseCenterY = bindableElement.y + bindableElement.height / 2;
+    const radiusX = bindableElement.width / 2;
+    const radiusY = bindableElement.height / 2;
+    let x;
+    let y;
+    switch (side) {
+      case "top": {
+        x = ellipseCenterX;
+        y = ellipseCenterY - radiusY - OFFSET;
+        break;
+      }
+      case "right": {
+        x = ellipseCenterX + radiusX + OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "bottom": {
+        x = ellipseCenterX;
+        y = ellipseCenterY + radiusY + OFFSET;
+        break;
+      }
+      case "left": {
+        x = ellipseCenterX - radiusX - OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "top-right": {
+        const angle = -Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const angle = Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const angle = 3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const angle = -3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  if (isRectangularElement(bindableElement)) {
+    const [sides, corners] = deconstructRectanguloidElement(
+      bindableElement
+    );
+    const [top, right, bottom, left] = sides;
+    let x;
+    let y;
+    switch (side) {
+      case "top": {
+        const midPoint = getMidPoint(top[0], top[1]);
+        x = midPoint[0];
+        y = midPoint[1] - OFFSET;
+        break;
+      }
+      case "right": {
+        const midPoint = getMidPoint(right[0], right[1]);
+        x = midPoint[0] + OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "bottom": {
+        const midPoint = getMidPoint(bottom[0], bottom[1]);
+        x = midPoint[0];
+        y = midPoint[1] + OFFSET;
+        break;
+      }
+      case "left": {
+        const midPoint = getMidPoint(left[0], left[1]);
+        x = midPoint[0] - OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "top-left": {
+        if (corners.length >= 1) {
+          const corner = corners[0];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        if (corners.length >= 2) {
+          const corner = corners[1];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "bottom-right": {
+        if (corners.length >= 3) {
+          const corner = corners[2];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      case "bottom-left": {
+        if (corners.length >= 4) {
+          const corner = corners[3];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  return null;
+};
+var getMidPoint = (p1, p2) => {
+  return pointFrom8((p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2);
+};
 
 // src/linearElementEditor.ts
 var getNormalizedPoints = ({
@@ -8460,14 +8852,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const point = element.points[idx];
     const pivotPoint = element.points[idx - 1];
     const customLineAngle = linearElementEditor.customLineAngle ?? determineCustomLinearAngle(pivotPoint, element.points[idx]);
-    const hoveredElement = getHoveredElementForBinding2(
-      pointFrom9(scenePointerX, scenePointerY),
-      elements,
-      elementsMap
-    );
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event) && !hoveredElement && !element.startBinding && !element.endBinding) {
+    if (shouldRotateWithDiscreteAngle(event)) {
       const [width, height] = _LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -8498,11 +8885,13 @@ var LinearElementEditor = class _LinearElementEditor {
       [idx],
       deltaX,
       deltaY,
+      scenePointerX,
+      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      event.shiftKey,
+      shouldRotateWithDiscreteAngle(event),
       event.altKey
     );
     _LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -8592,14 +8981,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const endIsSelected = selectedPointsIndices.includes(
       element.points.length - 1
     );
-    const hoveredElement = getHoveredElementForBinding2(
-      pointFrom9(scenePointerX, scenePointerY),
-      elements,
-      elementsMap
-    );
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged && !hoveredElement && !element.startBinding && !element.endBinding) {
+    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
       const [width, height] = _LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -8630,11 +9014,13 @@ var LinearElementEditor = class _LinearElementEditor {
       selectedPointsIndices,
       deltaX,
       deltaY,
+      scenePointerX,
+      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      event.shiftKey,
+      shouldRotateWithDiscreteAngle(event) && singlePointDragged,
       event.altKey
     );
     _LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -9708,7 +10094,7 @@ var normalizeSelectedPoints = (points) => {
   nextPoints = nextPoints.sort((a2, b2) => a2 - b2);
   return nextPoints.length ? nextPoints : null;
 };
-var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap, element, elements, app, shiftKey, altKey) => {
+var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX, scenePointerY, elementsMap, element, elements, app, angleLocked, altKey) => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
       return [
@@ -9735,12 +10121,14 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
     element,
     naiveDraggingPoints,
+    scenePointerX,
+    scenePointerY,
     elementsMap,
     elements,
     app.state,
     {
       newArrow: !!app.state.newElement,
-      shiftKey,
+      angleLocked,
       altKey
     }
   );
@@ -9818,7 +10206,8 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
     startBinding: updates.startBinding === void 0 ? element.startBinding : updates.startBinding === null ? null : updates.startBinding,
     endBinding: updates.endBinding === void 0 ? element.endBinding : updates.endBinding === null ? null : updates.endBinding
   };
-  const customIntersector = start.focusPoint && end.focusPoint ? lineSegment5(start.focusPoint, end.focusPoint) : void 0;
+  const startCustomIntersector = start.focusPoint && end.focusPoint ? lineSegment5(start.focusPoint, end.focusPoint) : void 0;
+  const endCustomIntersector = start.focusPoint && end.focusPoint ? lineSegment5(end.focusPoint, start.focusPoint) : void 0;
   const startIsDraggingOverEndElement = element.endBinding && nextArrow.startBinding && startIsDragged && nextArrow.startBinding.elementId === element.endBinding.elementId;
   const endIsDraggingOverStartElement = element.startBinding && nextArrow.endBinding && endIsDragged && element.startBinding.elementId === nextArrow.endBinding.elementId;
   const endBindable = nextArrow.endBinding ? end.element ?? elementsMap.get(
@@ -9830,7 +10219,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
     nextArrow.endBinding,
     endBindable,
     elementsMap,
-    customIntersector
+    endCustomIntersector
   ) || nextArrow.points[nextArrow.points.length - 1] : nextArrow.points[nextArrow.points.length - 1];
   nextArrow.points[nextArrow.points.length - 1] = endLocalPoint;
   const startBindable = nextArrow.startBinding ? start.element ?? elementsMap.get(
@@ -9842,7 +10231,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
     nextArrow.startBinding,
     startBindable,
     elementsMap,
-    customIntersector
+    startCustomIntersector
   ) || nextArrow.points[0] : nextArrow.points[0];
   const endChanged = pointDistance5(
     endLocalPoint,
@@ -11014,11 +11403,7 @@ var frameAndChildrenSelectedTogether = (selectedElements) => {
 };
 
 // src/renderElement.ts
-var IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
-var shouldResetImageFilter = (element, renderConfig, appState) => {
-  return appState.theme === THEME.DARK && isInitializedImageElement(element) && !isPendingImageElement(element, renderConfig) && renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg;
-};
 var getCanvasPadding = (element) => {
   switch (element.type) {
     case "freedraw":
@@ -11090,9 +11475,6 @@ var generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState)
     window.devicePixelRatio * scale
   );
   const rc = rough_default.canvas(canvas);
-  if (shouldResetImageFilter(element, renderConfig, appState)) {
-    context.filter = IMAGE_INVERT_FILTER;
-  }
   drawElementOnCanvas(element, rc, context, renderConfig);
   context.restore();
   const boundTextElement = getBoundTextElement(element, elementsMap);
@@ -11181,28 +11563,31 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
     case "ellipse": {
       context.lineJoin = "round";
       context.lineCap = "round";
-      rc.draw(ShapeCache.get(element));
+      rc.draw(ShapeCache.generateElementShape(element, renderConfig));
       break;
     }
     case "arrow":
     case "line": {
       context.lineJoin = "round";
       context.lineCap = "round";
-      ShapeCache.get(element).forEach((shape) => {
-        rc.draw(shape);
-      });
+      ShapeCache.generateElementShape(element, renderConfig).forEach(
+        (shape) => {
+          rc.draw(shape);
+        }
+      );
       break;
     }
     case "freedraw": {
       context.save();
-      context.fillStyle = element.strokeColor;
-      const path = getFreeDrawPath2D(element);
-      const fillShape = ShapeCache.get(element);
-      if (fillShape) {
-        rc.draw(fillShape);
-      }
-      context.fillStyle = element.strokeColor;
-      context.fill(path);
+      const shapes = ShapeCache.generateElementShape(element, renderConfig);
+      for (const shape of shapes) {
+        if (typeof shape === "string") {
+          context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+          context.fill(new Path2D(shape));
+        } else {
+          rc.draw(shape);
+        }
+      }
       context.restore();
       break;
     }
@@ -11252,7 +11637,7 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString3(element);
-        context.fillStyle = element.strokeColor;
+        context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
         context.textAlign = element.textAlign;
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const horizontalOffset = element.textAlign === "center" ? element.width / 2 : element.textAlign === "right" ? element.width : 0;
@@ -11400,9 +11785,9 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         );
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = FRAME_STYLE.strokeColor;
+        context.strokeStyle = appState.theme === THEME.DARK ? applyDarkModeFilter(FRAME_STYLE.strokeColor) : FRAME_STYLE.strokeColor;
         if (isMagicFrameElement(element)) {
-          context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
+          context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : applyDarkModeFilter("#1d8264");
         }
         if (FRAME_STYLE.radius && context.roundRect) {
           context.beginPath();
@@ -11423,7 +11808,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
       break;
     }
     case "freedraw": {
-      ShapeCache.generateElementShape(element, null);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -11465,7 +11849,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
     case "text":
     case "iframe":
     case "embeddable": {
-      ShapeCache.generateElementShape(element, renderConfig);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -11486,9 +11869,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         }
         context.save();
         context.translate(cx, cy);
-        if (shouldResetImageFilter(element, renderConfig, appState)) {
-          context.filter = "none";
-        }
         const boundTextElement = getBoundTextElement(element, elementsMap);
         if (isArrowElement(element) && boundTextElement) {
           const tempCanvas = document.createElement("canvas");
@@ -11600,19 +11980,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
   }
   context.globalAlpha = 1;
 };
-var pathsCache = /* @__PURE__ */ new WeakMap([]);
-function generateFreeDrawShape(element) {
-  const svgPathData = getFreeDrawSvgPath(element);
-  const path = new Path2D(svgPathData);
-  pathsCache.set(element, path);
-  return path;
-}
-function getFreeDrawPath2D(element) {
-  return pathsCache.get(element);
-}
-function getFreeDrawSvgPath(element) {
-  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
-}
 function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   const bounds = getElementBounds(
     {
@@ -11662,46 +12029,11 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
     ]
   );
 }
-function getFreedrawOutlinePoints(element) {
-  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
-  const options = {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t) => Math.sin(t * Math.PI / 2),
-    // https://easings.net/#easeOutSine
-    last: true
-  };
-  return ae(inputPoints, options);
-}
-function med(A2, B2) {
-  return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
-}
-var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
-function getSvgPathFromStroke(points) {
-  if (!points.length) {
-    return "";
-  }
-  const max = points.length - 1;
-  return points.reduce(
-    (acc, point, i, arr) => {
-      if (i === max) {
-        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-      } else {
-        acc.push(point, med(point, arr[i + 1]));
-      }
-      return acc;
-    },
-    ["M", points[0], "Q"]
-  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
-}
 
 // src/comparisons.ts
 init_define_import_meta_env();
 var hasBackground = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "line" || type === "freedraw";
-var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text";
+var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text" || type === "embeddable";
 var hasStrokeWidth = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line";
 var hasStrokeStyle = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "arrow" || type === "line";
 var canChangeRoundness = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
@@ -11716,13 +12048,17 @@ var ShapeCache = class _ShapeCache {
    * Retrieves shape from cache if available. Use this only if shape
    * is optional and you have a fallback in case it's not cached.
    */
-  static get = (element) => {
-    return _ShapeCache.cache.get(
-      element
-    );
+  static get = (element, theme) => {
+    const cached = _ShapeCache.cache.get(element);
+    if (cached && (theme === null || cached.theme === theme)) {
+      return cached.shape;
+    }
+    return void 0;
+  };
+  static delete = (element) => {
+    _ShapeCache.cache.delete(element);
+    elementWithCanvasCache.delete(element);
   };
-  static set = (element, shape) => _ShapeCache.cache.set(element, shape);
-  static delete = (element) => _ShapeCache.cache.delete(element);
   static destroy = () => {
     _ShapeCache.cache = /* @__PURE__ */ new WeakMap();
   };
@@ -11731,21 +12067,27 @@ var ShapeCache = class _ShapeCache {
    * returns cached shape.
    */
   static generateElementShape = (element, renderConfig) => {
-    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element);
+    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element, renderConfig ? renderConfig.theme : null);
     if (cachedShape !== void 0) {
       return cachedShape;
     }
     elementWithCanvasCache.delete(element);
-    const shape = generateElementShape(
+    const shape = _generateElementShape(
       element,
       _ShapeCache.rg,
       renderConfig || {
         isExporting: false,
         canvasBackgroundColor: COLOR_PALETTE.white,
-        embedsValidationStatus: null
+        embedsValidationStatus: null,
+        theme: THEME2.LIGHT
       }
     );
-    _ShapeCache.cache.set(element, shape);
+    if (!renderConfig?.isExporting) {
+      _ShapeCache.cache.set(element, {
+        shape,
+        theme: renderConfig?.theme || THEME2.LIGHT
+      });
+    }
     return shape;
   };
 };
@@ -11765,7 +12107,7 @@ function adjustRoughness(element) {
   }
   return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
 }
-var generateRoughOptions = (element, continuousPath = false) => {
+var generateRoughOptions = (element, continuousPath = false, isDarkMode = false) => {
   const options = {
     seed: element.seed,
     strokeLineDash: element.strokeStyle === "dashed" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === "dotted" ? getDashArrayDotted(element.strokeWidth) : void 0,
@@ -11781,7 +12123,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: element.strokeColor,
+    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -11791,7 +12133,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent3(element.backgroundColor) ? void 0 : element.backgroundColor;
+      options.fill = isTransparent3(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -11801,7 +12143,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "freedraw": {
       if (isPathALoop(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       }
       return options;
     }
@@ -11829,7 +12171,7 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -11846,6 +12188,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     const [, , x3, y3, x4, y4] = arrowheadPoints2;
     return [generator.line(x3, y3, x4, y4, options2)];
   };
+  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
   switch (arrowhead) {
     case "dot":
     case "circle":
@@ -11855,9 +12198,9 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         generator.circle(x, y, diameter, {
           ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : element.strokeColor,
+          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
           fillStyle: "solid",
-          stroke: element.strokeColor,
+          stroke: strokeColor,
           roughness: Math.min(0.5, options.roughness || 0)
         })
       ];
@@ -11876,7 +12219,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -11898,7 +12241,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -12079,11 +12422,13 @@ var generateLinearCollisionShape = (element) => {
     }
   }
 };
-var generateElementShape = (element, generator, {
+var _generateElementShape = (element, generator, {
   isExporting,
   canvasBackgroundColor,
-  embedsValidationStatus
+  embedsValidationStatus,
+  theme
 }) => {
+  const isDarkMode = theme === THEME2.DARK;
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -12101,7 +12446,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            true
+            true,
+            isDarkMode
           )
         );
       } else {
@@ -12116,7 +12462,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            false
+            false,
+            isDarkMode
           )
         );
       }
@@ -12140,7 +12487,7 @@ var generateElementShape = (element, generator, {
             C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}
             L ${topX - verticalRadius} ${topY + horizontalRadius}
             C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`,
-          generateRoughOptions(element, true)
+          generateRoughOptions(element, true, isDarkMode)
         );
       } else {
         shape = generator.polygon(
@@ -12150,7 +12497,7 @@ var generateElementShape = (element, generator, {
             [bottomX, bottomY],
             [leftX, leftY]
           ],
-          generateRoughOptions(element)
+          generateRoughOptions(element, false, isDarkMode)
         );
       }
       return shape;
@@ -12161,14 +12508,14 @@ var generateElementShape = (element, generator, {
         element.height / 2,
         element.width,
         element.height,
-        generateRoughOptions(element)
+        generateRoughOptions(element, false, isDarkMode)
       );
       return shape;
     }
     case "line":
     case "arrow": {
       let shape;
-      const options = generateRoughOptions(element);
+      const options = generateRoughOptions(element, false, isDarkMode);
       const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
@@ -12184,7 +12531,7 @@ var generateElementShape = (element, generator, {
           shape = [
             generator.path(
               generateElbowArrowShape(points, 16),
-              generateRoughOptions(element, true)
+              generateRoughOptions(element, true, isDarkMode)
             )
           ];
         }
@@ -12211,7 +12558,8 @@ var generateElementShape = (element, generator, {
             startArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -12225,7 +12573,8 @@ var generateElementShape = (element, generator, {
             endArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -12233,21 +12582,21 @@ var generateElementShape = (element, generator, {
       return shape;
     }
     case "freedraw": {
-      let shape;
-      generateFreeDrawShape(element);
+      const shapes = [];
       if (isPathALoop(element.points)) {
         const simplifiedPoints = simplify(
           element.points,
           0.75
         );
-        shape = generator.curve(simplifiedPoints, {
-          ...generateRoughOptions(element),
-          stroke: "none"
-        });
-      } else {
-        shape = null;
+        shapes.push(
+          generator.curve(simplifiedPoints, {
+            ...generateRoughOptions(element, false, isDarkMode),
+            stroke: "none"
+          })
+        );
       }
-      return shape;
+      shapes.push(getFreeDrawSvgPath(element));
+      return shapes;
     }
     case "frame":
     case "magicframe":
@@ -12326,7 +12675,7 @@ var getElementShape = (element, elementsMap) => {
       return getPolygonShape(element);
     case "arrow":
     case "line": {
-      const roughShape = ShapeCache.get(element)?.[0] ?? ShapeCache.generateElementShape(element, null)[0];
+      const roughShape = ShapeCache.generateElementShape(element, null)[0];
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
@@ -12380,6 +12729,45 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
   };
   return ret;
 };
+var getFreeDrawSvgPath = (element) => {
+  return getSvgPathFromStroke(
+    getFreedrawOutlinePoints(element)
+  );
+};
+var getFreedrawOutlinePoints = (element) => {
+  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
+  return ae(inputPoints, {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t) => Math.sin(t * Math.PI / 2),
+    // https://easings.net/#easeOutSine
+    last: true
+  });
+};
+var med = (A2, B2) => {
+  return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
+};
+var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
+var getSvgPathFromStroke = (points) => {
+  if (!points.length) {
+    return "";
+  }
+  const max = points.length - 1;
+  return points.reduce(
+    (acc, point, i, arr) => {
+      if (i === max) {
+        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+      } else {
+        acc.push(point, med(point, arr[i + 1]));
+      }
+      return acc;
+    },
+    ["M", points[0], "Q"]
+  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
+};
 
 // src/bounds.ts
 var ElementBounds = class _ElementBounds {
@@ -12978,7 +13366,7 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
     }
     return coords2;
   }
-  const cachedShape = ShapeCache.get(element)?.[0];
+  const cachedShape = ShapeCache.get(element, null)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
   const transformXY = ([x, y]) => pointRotateRads13(
@@ -19494,9 +19882,515 @@ var showSelectedShapeActions = (appState, elements) => Boolean(
   !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && (appState.activeTool.type !== "custom" && (appState.editingTextElement || appState.activeTool.type !== "selection" && appState.activeTool.type !== "lasso" && appState.activeTool.type !== "eraser" && appState.activeTool.type !== "hand" && appState.activeTool.type !== "laser") || getSelectedElements(elements, appState).length)
 );
 
+// src/transform.ts
+init_define_import_meta_env();
+import { pointFrom as pointFrom19 } from "@excalidraw/math";
+import {
+  DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
+  TEXT_ALIGN as TEXT_ALIGN2,
+  VERTICAL_ALIGN as VERTICAL_ALIGN4,
+  getSizeFromPoints as getSizeFromPoints3,
+  randomId as randomId4,
+  arrayToMap as arrayToMap11,
+  assertNever as assertNever5,
+  cloneJSON,
+  getFontString as getFontString8,
+  isDevEnv as isDevEnv7,
+  toBrandedType as toBrandedType3,
+  getLineHeight as getLineHeight2
+} from "@excalidraw/common";
+var DEFAULT_LINEAR_ELEMENT_PROPS = {
+  width: 100,
+  height: 0
+};
+var DEFAULT_DIMENSION = 100;
+var bindTextToContainer = (container, textProps, scene) => {
+  const textElement = newTextElement({
+    x: 0,
+    y: 0,
+    textAlign: TEXT_ALIGN2.CENTER,
+    verticalAlign: VERTICAL_ALIGN4.MIDDLE,
+    ...textProps,
+    containerId: container.id,
+    strokeColor: textProps.strokeColor || container.strokeColor
+  });
+  Object.assign(container, {
+    boundElements: (container.boundElements || []).concat({
+      type: "text",
+      id: textElement.id
+    })
+  });
+  redrawTextBoundingBox(textElement, container, scene);
+  return [container, textElement];
+};
+var bindLinearElementToElement = (linearElement, start, end, elementStore, scene) => {
+  let startBoundElement;
+  let endBoundElement;
+  Object.assign(linearElement, {
+    startBinding: linearElement?.startBinding || null,
+    endBinding: linearElement.endBinding || null
+  });
+  if (start) {
+    const width = start?.width ?? DEFAULT_DIMENSION;
+    const height = start?.height ?? DEFAULT_DIMENSION;
+    let existingElement;
+    if (start.id) {
+      existingElement = elementStore.getElement(start.id);
+      if (!existingElement) {
+        console.error(`No element for start binding with id ${start.id} found`);
+      }
+    }
+    const startX = start.x || linearElement.x - width;
+    const startY = start.y || linearElement.y - height / 2;
+    const startType = existingElement ? existingElement.type : start.type;
+    if (startType) {
+      if (startType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (start.type === "text") {
+          text = start.text;
+        }
+        if (!text) {
+          console.error(
+            `No text found for start binding text element for ${linearElement.id}`
+          );
+        }
+        startBoundElement = newTextElement({
+          x: startX,
+          y: startY,
+          type: "text",
+          ...existingElement,
+          ...start,
+          text
+        });
+        Object.assign(startBoundElement, {
+          x: start.x || linearElement.x - startBoundElement.width,
+          y: start.y || linearElement.y - startBoundElement.height / 2
+        });
+      } else {
+        switch (startType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            startBoundElement = newElement({
+              x: startX,
+              y: startY,
+              width,
+              height,
+              ...existingElement,
+              ...start,
+              type: startType
+            });
+            break;
+          }
+          default: {
+            assertNever5(
+              linearElement,
+              `Unhandled element start type "${start.type}"`,
+              true
+            );
+          }
+        }
+      }
+      bindBindingElement(
+        linearElement,
+        startBoundElement,
+        "orbit",
+        "start",
+        scene
+      );
+    }
+  }
+  if (end) {
+    const height = end?.height ?? DEFAULT_DIMENSION;
+    const width = end?.width ?? DEFAULT_DIMENSION;
+    let existingElement;
+    if (end.id) {
+      existingElement = elementStore.getElement(end.id);
+      if (!existingElement) {
+        console.error(`No element for end binding with id ${end.id} found`);
+      }
+    }
+    const endX = end.x || linearElement.x + linearElement.width;
+    const endY = end.y || linearElement.y - height / 2;
+    const endType = existingElement ? existingElement.type : end.type;
+    if (endType) {
+      if (endType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (end.type === "text") {
+          text = end.text;
+        }
+        if (!text) {
+          console.error(
+            `No text found for end binding text element for ${linearElement.id}`
+          );
+        }
+        endBoundElement = newTextElement({
+          x: endX,
+          y: endY,
+          type: "text",
+          ...existingElement,
+          ...end,
+          text
+        });
+        Object.assign(endBoundElement, {
+          y: end.y || linearElement.y - endBoundElement.height / 2
+        });
+      } else {
+        switch (endType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            endBoundElement = newElement({
+              x: endX,
+              y: endY,
+              width,
+              height,
+              ...existingElement,
+              ...end,
+              type: endType
+            });
+            break;
+          }
+          default: {
+            assertNever5(
+              linearElement,
+              `Unhandled element end type "${endType}"`,
+              true
+            );
+          }
+        }
+      }
+      bindBindingElement(
+        linearElement,
+        endBoundElement,
+        "orbit",
+        "end",
+        scene
+      );
+    }
+  }
+  if (linearElement.points.length < 2) {
+    return {
+      linearElement,
+      startBoundElement,
+      endBoundElement
+    };
+  }
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = cloneJSON(linearElement.points);
+  if (linearElement.points[endPointIndex][0] > linearElement.points[endPointIndex - 1][0]) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
+  }
+  if (linearElement.points[endPointIndex][0] < linearElement.points[endPointIndex - 1][0]) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  if (linearElement.points[endPointIndex][1] > linearElement.points[endPointIndex - 1][1]) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+  if (linearElement.points[endPointIndex][1] < linearElement.points[endPointIndex - 1][1]) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+  Object.assign(
+    linearElement,
+    LinearElementEditor.getNormalizeElementPointsAndCoords({
+      ...linearElement,
+      points: newPoints
+    })
+  );
+  return {
+    linearElement,
+    startBoundElement,
+    endBoundElement
+  };
+};
+var ElementStore = class {
+  excalidrawElements = /* @__PURE__ */ new Map();
+  add = (ele) => {
+    if (!ele) {
+      return;
+    }
+    this.excalidrawElements.set(ele.id, ele);
+  };
+  getElements = () => {
+    return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
+  };
+  getElementsMap = () => {
+    return toBrandedType3(
+      arrayToMap11(this.getElements())
+    );
+  };
+  getElement = (id) => {
+    return this.excalidrawElements.get(id);
+  };
+};
+var convertToExcalidrawElements = (elementsSkeleton, opts) => {
+  if (!elementsSkeleton) {
+    return [];
+  }
+  const elements = cloneJSON(elementsSkeleton);
+  const elementStore = new ElementStore();
+  const elementsWithIds = /* @__PURE__ */ new Map();
+  const oldToNewElementIdMap = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    let excalidrawElement;
+    const originalId = element.id;
+    if (opts?.regenerateIds !== false) {
+      Object.assign(element, { id: randomId4() });
+    }
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond": {
+        const width = element?.label?.text && element.width === void 0 ? 0 : element?.width || DEFAULT_DIMENSION;
+        const height = element?.label?.text && element.height === void 0 ? 0 : element?.height || DEFAULT_DIMENSION;
+        excalidrawElement = newElement({
+          ...element,
+          width,
+          height
+        });
+        break;
+      }
+      case "line": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newLinearElement({
+          width,
+          height,
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
+          ...element
+        });
+        break;
+      }
+      case "arrow": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newArrowElement({
+          width,
+          height,
+          endArrowhead: "arrow",
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
+          ...element,
+          type: "arrow"
+        });
+        Object.assign(
+          excalidrawElement,
+          getSizeFromPoints3(excalidrawElement.points)
+        );
+        break;
+      }
+      case "text": {
+        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY3;
+        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE4;
+        const lineHeight = element?.lineHeight || getLineHeight2(fontFamily);
+        const text = element.text ?? "";
+        const normalizedText = normalizeText(text);
+        const metrics = measureText(
+          normalizedText,
+          getFontString8({ fontFamily, fontSize }),
+          lineHeight
+        );
+        excalidrawElement = newTextElement({
+          width: metrics.width,
+          height: metrics.height,
+          fontFamily,
+          fontSize,
+          ...element
+        });
+        break;
+      }
+      case "image": {
+        excalidrawElement = newImageElement({
+          width: element?.width || DEFAULT_DIMENSION,
+          height: element?.height || DEFAULT_DIMENSION,
+          ...element
+        });
+        break;
+      }
+      case "frame": {
+        excalidrawElement = newFrameElement({
+          x: 0,
+          y: 0,
+          ...element
+        });
+        break;
+      }
+      case "magicframe": {
+        excalidrawElement = newMagicFrameElement({
+          x: 0,
+          y: 0,
+          ...element
+        });
+        break;
+      }
+      case "freedraw":
+      case "iframe":
+      case "embeddable": {
+        excalidrawElement = element;
+        break;
+      }
+      default: {
+        excalidrawElement = element;
+        assertNever5(
+          element,
+          `Unhandled element type "${element.type}"`,
+          true
+        );
+      }
+    }
+    const existingElement = elementStore.getElement(excalidrawElement.id);
+    if (existingElement) {
+      console.error(`Duplicate id found for ${excalidrawElement.id}`);
+    } else {
+      elementStore.add(excalidrawElement);
+      elementsWithIds.set(excalidrawElement.id, element);
+      if (originalId) {
+        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
+      }
+    }
+  }
+  const elementsMap = elementStore.getElementsMap();
+  const scene = new Scene(elementsMap);
+  for (const [id, element] of elementsWithIds) {
+    const excalidrawElement = elementStore.getElement(id);
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond":
+      case "arrow": {
+        if (element.label?.text) {
+          let [container, text] = bindTextToContainer(
+            excalidrawElement,
+            element?.label,
+            scene
+          );
+          elementStore.add(container);
+          elementStore.add(text);
+          if (isArrowElement(container)) {
+            const originalStart = element.type === "arrow" ? element?.start : void 0;
+            const originalEnd = element.type === "arrow" ? element?.end : void 0;
+            if (originalStart && originalStart.id) {
+              const newStartId = oldToNewElementIdMap.get(originalStart.id);
+              if (newStartId) {
+                Object.assign(originalStart, { id: newStartId });
+              }
+            }
+            if (originalEnd && originalEnd.id) {
+              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
+              if (newEndId) {
+                Object.assign(originalEnd, { id: newEndId });
+              }
+            }
+            const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
+              container,
+              originalStart,
+              originalEnd,
+              elementStore,
+              scene
+            );
+            container = linearElement;
+            elementStore.add(linearElement);
+            elementStore.add(startBoundElement);
+            elementStore.add(endBoundElement);
+          }
+        } else {
+          switch (element.type) {
+            case "arrow": {
+              const { start, end } = element;
+              if (start && start.id) {
+                const newStartId = oldToNewElementIdMap.get(start.id);
+                Object.assign(start, { id: newStartId });
+              }
+              if (end && end.id) {
+                const newEndId = oldToNewElementIdMap.get(end.id);
+                Object.assign(end, { id: newEndId });
+              }
+              const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
+                excalidrawElement,
+                start,
+                end,
+                elementStore,
+                scene
+              );
+              elementStore.add(linearElement);
+              elementStore.add(startBoundElement);
+              elementStore.add(endBoundElement);
+              break;
+            }
+          }
+        }
+        break;
+      }
+    }
+  }
+  for (const [id, element] of elementsWithIds) {
+    if (element.type !== "frame" && element.type !== "magicframe") {
+      continue;
+    }
+    const frame = elementStore.getElement(id);
+    if (!frame) {
+      throw new Error(`Excalidraw element with id ${id} doesn't exist`);
+    }
+    const childrenElements = [];
+    element.children.forEach((id2) => {
+      const newElementId = oldToNewElementIdMap.get(id2);
+      if (!newElementId) {
+        throw new Error(`Element with ${id2} wasn't mapped correctly`);
+      }
+      const elementInFrame = elementStore.getElement(newElementId);
+      if (!elementInFrame) {
+        throw new Error(`Frame element with id ${newElementId} doesn't exist`);
+      }
+      Object.assign(elementInFrame, { frameId: frame.id });
+      elementInFrame?.boundElements?.forEach((boundElement) => {
+        const ele = elementStore.getElement(boundElement.id);
+        if (!ele) {
+          throw new Error(
+            `Bound element with id ${boundElement.id} doesn't exist`
+          );
+        }
+        Object.assign(ele, { frameId: frame.id });
+        childrenElements.push(ele);
+      });
+      childrenElements.push(elementInFrame);
+    });
+    let [minX, minY, maxX, maxY] = getCommonBounds(childrenElements);
+    const PADDING = 10;
+    minX = minX - PADDING;
+    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;
+    Object.assign(frame, {
+      x: frameX,
+      y: frameY,
+      width: frameWidth,
+      height: frameHeight
+    });
+    if (isDevEnv7() && 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"
+      );
+    }
+  }
+  return elementStore.getElements();
+};
+
 // src/zindex.ts
 init_define_import_meta_env();
-import { arrayToMap as arrayToMap11, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap12, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
 var isOfTargetFrame = (element, frameId) => {
   return element.frameId === frameId || element.id === frameId;
 };
@@ -19505,7 +20399,7 @@ var getIndicesToMove = (elements, appState, elementsToBeMoved) => {
   let deletedIndices = [];
   let includeDeletedIndex = null;
   let index = -1;
-  const selectedElementIds = arrayToMap11(
+  const selectedElementIds = arrayToMap12(
     elementsToBeMoved ? elementsToBeMoved : getSelectedElements(elements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -19799,7 +20693,7 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
   return nextElements;
 };
 function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
-  const elementsToMove = arrayToMap11(
+  const elementsToMove = arrayToMap12(
     getSelectedElements(allElements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -19917,7 +20811,6 @@ export {
   HEADING_LEFT,
   HEADING_RIGHT,
   HEADING_UP,
-  IMAGE_INVERT_FILTER,
   INVISIBLY_SMALL_ELEMENT_SIZE,
   InvalidFractionalIndexError,
   LinearElementEditor,
@@ -19957,6 +20850,7 @@ export {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   containsCJK,
+  convertToExcalidrawElements,
   createPlaceholderEmbeddableLabel,
   createSrcDoc,
   cropElement,
@@ -19986,7 +20880,6 @@ export {
   fixDuplicatedBindingsAfterDuplication,
   flipHeading,
   frameAndChildrenSelectedTogether,
-  generateFreeDrawShape,
   generateLinearCollisionShape,
   generateRoughOptions,
   getAllHoveredElementAtPoint,
@@ -19997,6 +20890,7 @@ export {
   getArrowheadPoints,
   getArrowheadSize,
   getBindingGap,
+  getBindingSideMidPoint,
   getBindingStrategyForDraggingBindingElementEndpoints,
   getBoundTextElement,
   getBoundTextElementId,
@@ -20038,8 +20932,6 @@ export {
   getFrameChildren,
   getFrameLikeElements,
   getFrameLikeTitle,
-  getFreeDrawPath2D,
-  getFreeDrawSvgPath,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints,
   getGlobalFixedPointForBindableElement,
@@ -20124,7 +21016,6 @@ export {
   isBindingElementType,
   isBindingEnabled,
   isBoundToContainer,
-  isBounds,
   isCursorInFrame,
   isCurvedArrow,
   isElbowArrow,
@@ -20203,7 +21094,6 @@ export {
   originalContainerCache,
   parseElementLinkFromURL,
   parseTokens,
-  pathsCache,
   pointInsideBounds,
   positionElementsOnGrid,
   projectFixedPointOntoDiagonal,