@excalidraw/element 0.18.0-414182f → 0.18.0-4e0441e

package/dist/dev/index.js

@@ -2261,17 +2261,17 @@ var rough_default = {
 // src/bounds.ts
 import {
   arrayToMap as arrayToMap6,
-  invariant as invariant7,
+  invariant as invariant8,
   rescalePoints,
   sizeOf
 } from "@excalidraw/common";
 import {
   degreesToRadians,
-  lineSegment as lineSegment5,
+  lineSegment as lineSegment6,
   pointDistance as pointDistance7,
-  pointFrom as pointFrom13,
+  pointFrom as pointFrom14,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads11
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 
 // ../utils/src/shape.ts
@@ -2448,9 +2448,9 @@ var getClosedCurveShape = (element, roughShape, startingPoint = pointFrom(0, 0),
 // src/shape.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom12,
+  pointFrom as pointFrom13,
   pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads10
+  pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -2627,7 +2627,12 @@ function ae(e, t = {}) {
 }
 
 // src/renderElement.ts
-import { isRightAngleRads } from "@excalidraw/math";
+import {
+  isRightAngleRads,
+  lineSegment as lineSegment5,
+  pointFrom as pointFrom12,
+  pointRotateRads as pointRotateRads10
+} from "@excalidraw/math";
 import {
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING3,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
@@ -2638,7 +2643,8 @@ import {
   distance as distance2,
   getFontString as getFontString3,
   isRTL,
-  getVerticalOffset
+  getVerticalOffset,
+  invariant as invariant7
 } from "@excalidraw/common";
 
 // src/cropElement.ts
@@ -7270,6 +7276,28 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
       intersector,
       FIXED_BINDING_DISTANCE
     ).sort(pointDistanceSq)[0];
+    if (!intersection) {
+      const anotherPoint = pointFrom8(
+        !isHorizontal ? center[0] : snapPoint[0],
+        isHorizontal ? center[1] : snapPoint[1]
+      );
+      const anotherIntersector = lineSegment4(
+        anotherPoint,
+        pointFromVector5(
+          vectorScale6(
+            vectorNormalize3(vectorFromPoint6(snapPoint, anotherPoint)),
+            Math.max(bindableElement.width, bindableElement.height) * 2
+          ),
+          anotherPoint
+        )
+      );
+      intersection = intersectElementWithLineSegment(
+        bindableElement,
+        elementsMap,
+        anotherIntersector,
+        FIXED_BINDING_DISTANCE
+      ).sort(pointDistanceSq)[0];
+    }
   } else {
     intersection = intersectElementWithLineSegment(
       bindableElement,
@@ -11191,6 +11219,58 @@ function getFreeDrawPath2D(element) {
   return pathsCache.get(element);
 }
 function getFreeDrawSvgPath(element) {
+  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
+}
+function getFreedrawOutlineAsSegments(element, points, elementsMap) {
+  const bounds = getElementBounds(
+    {
+      ...element,
+      angle: 0
+    },
+    elementsMap
+  );
+  const center = pointFrom12(
+    (bounds[0] + bounds[2]) / 2,
+    (bounds[1] + bounds[3]) / 2
+  );
+  invariant7(points.length >= 2, "Freepath outline must have at least 2 points");
+  return points.slice(2).reduce(
+    (acc, curr) => {
+      acc.push(
+        lineSegment5(
+          acc[acc.length - 1][1],
+          pointRotateRads10(
+            pointFrom12(curr[0] + element.x, curr[1] + element.y),
+            center,
+            element.angle
+          )
+        )
+      );
+      return acc;
+    },
+    [
+      lineSegment5(
+        pointRotateRads10(
+          pointFrom12(
+            points[0][0] + element.x,
+            points[0][1] + element.y
+          ),
+          center,
+          element.angle
+        ),
+        pointRotateRads10(
+          pointFrom12(
+            points[1][0] + element.x,
+            points[1][1] + element.y
+          ),
+          center,
+          element.angle
+        )
+      )
+    ]
+  );
+}
+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,
@@ -11203,7 +11283,7 @@ function getFreeDrawSvgPath(element) {
     last: !!element.lastCommittedPoint
     // LastCommittedPoint is added on pointerup
   };
-  return getSvgPathFromStroke(ae(inputPoints, options));
+  return ae(inputPoints, options);
 }
 function med(A2, B2) {
   return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
@@ -11230,7 +11310,7 @@ function getSvgPathFromStroke(points) {
 // 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 !== "image" && type !== "frame" && type !== "magicframe";
+var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text";
 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";
@@ -11486,26 +11566,26 @@ var generateLinearCollisionShape = (element) => {
   switch (element.type) {
     case "line":
     case "arrow": {
-      const points = element.points.length ? element.points : [pointFrom12(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         return generator.path(generateElbowArrowShape(points, 16), options).sets[0].ops;
       } else if (!element.roundness) {
         return points.map((point, idx) => {
-          const p = pointRotateRads10(
-            pointFrom12(element.x + point[0], element.y + point[1]),
+          const p = pointRotateRads11(
+            pointFrom13(element.x + point[0], element.y + point[1]),
             center,
             element.angle
           );
           return {
             op: idx === 0 ? "move" : "lineTo",
-            data: pointFrom12(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         });
       }
       return generator.curve(points, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads10(
-            pointFrom12(
+          const p = pointRotateRads11(
+            pointFrom13(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -11514,30 +11594,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom12(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -11545,7 +11625,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -11560,8 +11640,8 @@ var generateLinearCollisionShape = (element) => {
       );
       return generator.curve(simplifiedPoints, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads10(
-            pointFrom12(
+          const p = pointRotateRads11(
+            pointFrom13(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -11570,30 +11650,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom12(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads10(
-              pointFrom12(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -11601,7 +11681,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -11698,7 +11778,7 @@ var generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element);
-      const points = element.points.length ? element.points : [pointFrom12(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -11860,14 +11940,14 @@ var getElementShape = (element, elementsMap) => {
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
         roughShape,
-        pointFrom12(element.x, element.y),
+        pointFrom13(element.x, element.y),
         element.angle,
-        pointFrom12(cx, cy)
+        pointFrom13(cx, cy)
       ) : getCurveShape(
         roughShape,
-        pointFrom12(element.x, element.y),
+        pointFrom13(element.x, element.y),
         element.angle,
-        pointFrom12(cx, cy)
+        pointFrom13(cx, cy)
       );
     }
     case "ellipse":
@@ -11876,7 +11956,7 @@ var getElementShape = (element, elementsMap) => {
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return getFreedrawShape(
         element,
-        pointFrom12(cx, cy),
+        pointFrom13(cx, cy),
         shouldTestInside(element)
       );
     }
@@ -11895,9 +11975,9 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
       firstPoint[1] - lastPoint[1]
     );
     if (distance3 > LINE_POLYGON_POINT_MERGE_DISTANCE || updatedPoints.length < 4) {
-      updatedPoints.push(pointFrom12(firstPoint[0], firstPoint[1]));
+      updatedPoints.push(pointFrom13(firstPoint[0], firstPoint[1]));
     } else {
-      updatedPoints[updatedPoints.length - 1] = pointFrom12(
+      updatedPoints[updatedPoints.length - 1] = pointFrom13(
         firstPoint[0],
         firstPoint[1]
       );
@@ -11951,9 +12031,9 @@ var ElementBounds = class _ElementBounds {
     if (isFreeDrawElement(element)) {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(
-          ([x, y]) => pointRotateRads11(
-            pointFrom13(x, y),
-            pointFrom13(cx - element.x, cy - element.y),
+          ([x, y]) => pointRotateRads12(
+            pointFrom14(x, y),
+            pointFrom14(cx - element.x, cy - element.y),
             element.angle
           )
         )
@@ -11967,24 +12047,24 @@ var ElementBounds = class _ElementBounds {
     } else if (isLinearElement(element)) {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
-      const [x11, y11] = pointRotateRads11(
-        pointFrom13(cx, y1),
-        pointFrom13(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom14(cx, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads11(
-        pointFrom13(cx, y2),
-        pointFrom13(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom14(cx, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads11(
-        pointFrom13(x1, cy),
-        pointFrom13(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom14(x1, cy),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads11(
-        pointFrom13(x2, cy),
-        pointFrom13(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom14(x2, cy),
+        pointFrom14(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -12001,24 +12081,24 @@ var ElementBounds = class _ElementBounds {
       const hh = Math.hypot(h * cos, w * sin);
       bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
     } else {
-      const [x11, y11] = pointRotateRads11(
-        pointFrom13(x1, y1),
-        pointFrom13(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom14(x1, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads11(
-        pointFrom13(x1, y2),
-        pointFrom13(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom14(x1, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads11(
-        pointFrom13(x2, y2),
-        pointFrom13(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom14(x2, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads11(
-        pointFrom13(x2, y1),
-        pointFrom13(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom14(x2, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -12072,20 +12152,38 @@ var getElementLineSegments = (element, elementsMap) => {
     element,
     elementsMap
   );
-  const center = pointFrom13(cx, cy);
+  const center = pointFrom14(cx, cy);
   if (shape.type === "polycurve") {
     const curves = shape.data;
-    const points = curves.map((curve4) => pointsOnBezierCurves(curve4, 10)).flat();
-    let i = 0;
+    const pointsOnCurves = curves.map(
+      (curve4) => pointsOnBezierCurves(curve4, 10)
+    );
     const segments = [];
-    while (i < points.length - 1) {
-      segments.push(
-        lineSegment5(
-          pointFrom13(points[i][0], points[i][1]),
-          pointFrom13(points[i + 1][0], points[i + 1][1])
-        )
-      );
-      i++;
+    if (isLineElement(element) && !element.polygon || isArrowElement(element)) {
+      for (const points of pointsOnCurves) {
+        let i = 0;
+        while (i < points.length - 1) {
+          segments.push(
+            lineSegment6(
+              pointFrom14(points[i][0], points[i][1]),
+              pointFrom14(points[i + 1][0], points[i + 1][1])
+            )
+          );
+          i++;
+        }
+      }
+    } else {
+      const points = pointsOnCurves.flat();
+      let i = 0;
+      while (i < points.length - 1) {
+        segments.push(
+          lineSegment6(
+            pointFrom14(points[i][0], points[i][1]),
+            pointFrom14(points[i + 1][0], points[i + 1][1])
+          )
+        );
+        i++;
+      }
     }
     return segments;
   } else if (shape.type === "polyline") {
@@ -12105,10 +12203,10 @@ var getElementLineSegments = (element, elementsMap) => {
       const container = getContainerElement(element, elementsMap);
       if (container && isLinearElement(container)) {
         const segments2 = [
-          lineSegment5(pointFrom13(x1, y1), pointFrom13(x2, y1)),
-          lineSegment5(pointFrom13(x2, y1), pointFrom13(x2, y2)),
-          lineSegment5(pointFrom13(x2, y2), pointFrom13(x1, y2)),
-          lineSegment5(pointFrom13(x1, y2), pointFrom13(x1, y1))
+          lineSegment6(pointFrom14(x1, y1), pointFrom14(x2, y1)),
+          lineSegment6(pointFrom14(x2, y1), pointFrom14(x2, y2)),
+          lineSegment6(pointFrom14(x2, y2), pointFrom14(x1, y2)),
+          lineSegment6(pointFrom14(x1, y2), pointFrom14(x1, y1))
         ];
         return segments2;
       }
@@ -12116,7 +12214,7 @@ var getElementLineSegments = (element, elementsMap) => {
     const points = shape.data;
     const segments = [];
     for (let i = 0; i < points.length - 1; i++) {
-      segments.push(lineSegment5(points[i], points[i + 1]));
+      segments.push(lineSegment6(points[i], points[i + 1]));
     }
     return segments;
   } else if (shape.type === "ellipse") {
@@ -12131,16 +12229,16 @@ var getElementLineSegments = (element, elementsMap) => {
     [cx, y2],
     [x1, cy],
     [x2, cy]
-  ].map((point) => pointRotateRads11(point, center, element.angle));
+  ].map((point) => pointRotateRads12(point, center, element.angle));
   return [
-    lineSegment5(nw, ne),
-    lineSegment5(sw, se2),
-    lineSegment5(nw, sw),
-    lineSegment5(ne, se2),
-    lineSegment5(nw, e),
-    lineSegment5(sw, e),
-    lineSegment5(ne, w),
-    lineSegment5(se2, w)
+    lineSegment6(nw, ne),
+    lineSegment6(sw, se2),
+    lineSegment6(nw, sw),
+    lineSegment6(ne, se2),
+    lineSegment6(nw, e),
+    lineSegment6(sw, e),
+    lineSegment6(ne, w),
+    lineSegment6(se2, w)
   ];
 };
 var _isRectanguloidElement = (element) => {
@@ -12148,9 +12246,9 @@ var _isRectanguloidElement = (element) => {
 };
 var getRotatedSides = (sides, center, angle) => {
   return sides.map((side) => {
-    return lineSegment5(
-      pointRotateRads11(side[0], center, angle),
-      pointRotateRads11(side[1], center, angle)
+    return lineSegment6(
+      pointRotateRads12(side[0], center, angle),
+      pointRotateRads12(side[1], center, angle)
     );
   });
 };
@@ -12160,14 +12258,14 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   const segments = [];
   while (i < points.length - 1) {
     segments.push(
-      lineSegment5(
-        pointRotateRads11(
-          pointFrom13(points[i][0], points[i][1]),
+      lineSegment6(
+        pointRotateRads12(
+          pointFrom14(points[i][0], points[i][1]),
           center,
           angle
         ),
-        pointRotateRads11(
-          pointFrom13(points[i + 1][0], points[i + 1][1]),
+        pointRotateRads12(
+          pointFrom14(points[i + 1][0], points[i + 1][1]),
           center,
           angle
         )
@@ -12178,7 +12276,7 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   return segments;
 };
 var getSegmentsOnEllipse = (ellipse4) => {
-  const center = pointFrom13(
+  const center = pointFrom14(
     ellipse4.x + ellipse4.width / 2,
     ellipse4.y + ellipse4.height / 2
   );
@@ -12192,12 +12290,12 @@ var getSegmentsOnEllipse = (ellipse4) => {
     const t = i * deltaT;
     const x = center[0] + a2 * Math.cos(t);
     const y = center[1] + b2 * Math.sin(t);
-    points.push(pointRotateRads11(pointFrom13(x, y), center, ellipse4.angle));
+    points.push(pointRotateRads12(pointFrom14(x, y), center, ellipse4.angle));
   }
   for (let i = 0; i < points.length - 1; i++) {
-    segments.push(lineSegment5(points[i], points[i + 1]));
+    segments.push(lineSegment6(points[i], points[i + 1]));
   }
-  segments.push(lineSegment5(points[points.length - 1], points[0]));
+  segments.push(lineSegment6(points[points.length - 1], points[0]));
   return segments;
 };
 var getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
@@ -12275,17 +12373,17 @@ var getCubicBezierCurveBound = (p0, p1, p2, p3) => {
   return [minX, minY, maxX, maxY];
 };
 var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
-  let currentP = pointFrom13(0, 0);
+  let currentP = pointFrom14(0, 0);
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
       if (op === "move") {
         const p = pointFromArray3(data);
-        invariant7(p != null, "Op data is not a point");
+        invariant8(p != null, "Op data is not a point");
         currentP = p;
       } else if (op === "bcurveTo") {
-        const _p1 = pointFrom13(data[0], data[1]);
-        const _p2 = pointFrom13(data[2], data[3]);
-        const _p3 = pointFrom13(data[4], data[5]);
+        const _p1 = pointFrom14(data[0], data[1]);
+        const _p2 = pointFrom14(data[2], data[3]);
+        const _p3 = pointFrom14(data[4], data[5]);
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
         const p3 = transformXY ? transformXY(_p3) : _p3;
@@ -12366,18 +12464,18 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
-  invariant7(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom13(data[4], data[5]);
-  const p2 = pointFrom13(data[2], data[3]);
-  const p1 = pointFrom13(data[0], data[1]);
+  invariant8(data.length === 6, "Op data length is not 6");
+  const p3 = pointFrom14(data[4], data[5]);
+  const p2 = pointFrom14(data[2], data[3]);
+  const p1 = pointFrom14(data[0], data[1]);
   const prevOp = ops[index - 1];
-  let p0 = pointFrom13(0, 0);
+  let p0 = pointFrom14(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
-    invariant7(p != null, "Op data is not a point");
+    invariant8(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
@@ -12402,26 +12500,26 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const angle = getArrowheadAngle(arrowhead);
   if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
-    const [x32, y32] = pointRotateRads11(
-      pointFrom13(x2, y2),
-      pointFrom13(xs, ys),
+    const [x32, y32] = pointRotateRads12(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(-angle)
     );
-    const [x42, y42] = pointRotateRads11(
-      pointFrom13(x2, y2),
-      pointFrom13(xs, ys),
+    const [x42, y42] = pointRotateRads12(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(angle)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads11(
-    pointFrom13(xs, ys),
-    pointFrom13(x2, y2),
+  const [x3, y3] = pointRotateRads12(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     -angle * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads11(
-    pointFrom13(xs, ys),
-    pointFrom13(x2, y2),
+  const [x4, y4] = pointRotateRads12(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -12429,16 +12527,16 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     let oy;
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = pointRotateRads11(
-        pointFrom13(x2 + minSize * 2, y2),
-        pointFrom13(x2, y2),
+      [ox, oy] = pointRotateRads12(
+        pointFrom14(x2 + minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(py - y2, px - x2)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads11(
-        pointFrom13(x2 - minSize * 2, y2),
-        pointFrom13(x2, y2),
+      [ox, oy] = pointRotateRads12(
+        pointFrom14(x2 - minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(y2 - py, x2 - px)
       );
     }
@@ -12467,9 +12565,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const boundTextElement = getBoundTextElement(element, elementsMap);
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
-    const [x, y] = pointRotateRads11(
-      pointFrom13(element.x + pointX, element.y + pointY),
-      pointFrom13(cx, cy),
+    const [x, y] = pointRotateRads12(
+      pointFrom14(element.x + pointX, element.y + pointY),
+      pointFrom14(cx, cy),
       element.angle
     );
     let coords2 = [x, y, x, y];
@@ -12492,9 +12590,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const cachedShape = ShapeCache.get(element)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
-  const transformXY = ([x, y]) => pointRotateRads11(
-    pointFrom13(element.x + x, element.y + y),
-    pointFrom13(cx, cy),
+  const transformXY = ([x, y]) => pointRotateRads12(
+    pointFrom14(element.x + x, element.y + y),
+    pointFrom14(cx, cy),
     element.angle
   );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -12605,8 +12703,8 @@ var getClosestElementBounds = (elements, from) => {
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
-      pointFrom13((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom13(from.x, from.y)
+      pointFrom14((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom14(from.x, from.y)
     );
     if (distance3 < minDistance) {
       minDistance = distance3;
@@ -12642,7 +12740,7 @@ var getVisibleSceneBounds = ({
     -scrollY + height / zoom.value
   ];
 };
-var getCenterForBounds = (bounds) => pointFrom13(
+var getCenterForBounds = (bounds) => pointFrom14(
   bounds[0] + (bounds[2] - bounds[0]) / 2,
   bounds[1] + (bounds[3] - bounds[1]) / 2
 );
@@ -12656,23 +12754,23 @@ var aabbForElement = (element, elementsMap, offset) => {
     midY: element.y + element.height / 2
   };
   const center = elementCenterPoint(element, elementsMap);
-  const [topLeftX, topLeftY] = pointRotateRads11(
-    pointFrom13(bbox.minX, bbox.minY),
+  const [topLeftX, topLeftY] = pointRotateRads12(
+    pointFrom14(bbox.minX, bbox.minY),
     center,
     element.angle
   );
-  const [topRightX, topRightY] = pointRotateRads11(
-    pointFrom13(bbox.maxX, bbox.minY),
+  const [topRightX, topRightY] = pointRotateRads12(
+    pointFrom14(bbox.maxX, bbox.minY),
     center,
     element.angle
   );
-  const [bottomRightX, bottomRightY] = pointRotateRads11(
-    pointFrom13(bbox.maxX, bbox.maxY),
+  const [bottomRightX, bottomRightY] = pointRotateRads12(
+    pointFrom14(bbox.maxX, bbox.maxY),
     center,
     element.angle
   );
-  const [bottomLeftX, bottomLeftY] = pointRotateRads11(
-    pointFrom13(bbox.minX, bbox.maxY),
+  const [bottomLeftX, bottomLeftY] = pointRotateRads12(
+    pointFrom14(bbox.minX, bbox.maxY),
     center,
     element.angle
   );
@@ -12704,7 +12802,7 @@ var doBoundsIntersect = (bounds1, bounds2) => {
 };
 var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
   const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
-  return pointFrom13(x + xOffset, y + yOffset);
+  return pointFrom14(x + xOffset, y + yOffset);
 };
 
 // src/sizeHelpers.ts
@@ -16935,8 +17033,8 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 
 // src/flowchart.ts
 init_define_import_meta_env();
-import { KEYS as KEYS3, invariant as invariant8, toBrandedType as toBrandedType2 } from "@excalidraw/common";
-import { pointFrom as pointFrom14 } from "@excalidraw/math";
+import { KEYS as KEYS3, invariant as invariant9, toBrandedType as toBrandedType2 } from "@excalidraw/common";
+import { pointFrom as pointFrom15 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
 var getLinkDirectionFromKey = (key) => {
@@ -16965,7 +17063,7 @@ var getNodeRelatives = (type, node, elementsMap, direction) => {
         if (!relative) {
           return acc;
         }
-        invariant8(
+        invariant9(
           isBindableElement(relative),
           "not an ExcalidrawBindableElement"
         );
@@ -17081,7 +17179,7 @@ var addNewNode = (element, appState, direction, scene) => {
     fillStyle: element.fillStyle,
     strokeStyle: element.strokeStyle
   });
-  invariant8(
+  invariant9(
     isFlowchartNodeElement(nextNode),
     "not an ExcalidrawFlowchartNodeElement"
   );
@@ -17139,7 +17237,7 @@ var addNewNodes = (startNode, appState, direction, scene, numberOfNodes) => {
       fillStyle: startNode.fillStyle,
       strokeStyle: startNode.strokeStyle
     });
-    invariant8(
+    invariant9(
       isFlowchartNodeElement(nextNode),
       "not an ExcalidrawFlowchartNodeElement"
     );
@@ -17216,7 +17314,7 @@ var createBindingArrow = (startBindingElement, endBindingElement, direction, app
     strokeWidth: startBindingElement.strokeWidth,
     opacity: startBindingElement.opacity,
     roughness: startBindingElement.roughness,
-    points: [pointFrom14(0, 0), pointFrom14(endX, endY)],
+    points: [pointFrom15(0, 0), pointFrom15(endX, endY)],
     elbowed: true
   });
   const elementsMap = scene.getNonDeletedElementsMap();
@@ -17365,7 +17463,7 @@ var FlowChartCreator = class {
     }
     if (startNode.frameId) {
       const frame = elementsMap.get(startNode.frameId);
-      invariant8(
+      invariant9(
         frame && isFrameElement(frame),
         "not an ExcalidrawFrameElement"
       );
@@ -17572,8 +17670,8 @@ init_define_import_meta_env();
 import {
   pointCenter as pointCenter3,
   normalizeRadians as normalizeRadians2,
-  pointFrom as pointFrom15,
-  pointRotateRads as pointRotateRads12
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads13
 } from "@excalidraw/math";
 import {
   MIN_FONT_SIZE,
@@ -17747,7 +17845,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
     return;
   }
   if (transformHandleType.includes("n") || transformHandleType.includes("s")) {
-    const previousOrigin = pointFrom15(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -17788,7 +17886,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
       element.lineHeight
     );
     const newHeight = metrics2.height;
-    const previousOrigin = pointFrom15(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -17824,9 +17922,9 @@ var rotateMultipleElements = (originalElements, elements, scene, pointerX, point
       const cx = (x1 + x2) / 2;
       const cy = (y1 + y2) / 2;
       const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
-      const [rotatedCX, rotatedCY] = pointRotateRads12(
-        pointFrom15(cx, cy),
-        pointFrom15(centerX, centerY),
+      const [rotatedCX, rotatedCY] = pointRotateRads13(
+        pointFrom16(cx, cy),
+        pointFrom16(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
       const updates = isElbowArrow(element) ? {
@@ -17863,44 +17961,44 @@ var getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x,
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
-  [x, y] = pointRotateRads12(
-    pointFrom15(x, y),
-    pointFrom15(cx, cy),
+  [x, y] = pointRotateRads13(
+    pointFrom16(x, y),
+    pointFrom16(cx, cy),
     -angle
   );
   switch (transformHandleType) {
     case "n":
-      return pointRotateRads12(
-        pointFrom15(x - (x1 + x2) / 2, y - y1),
-        pointFrom15(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y1),
+        pointFrom16(0, 0),
         angle
       );
     case "s":
-      return pointRotateRads12(
-        pointFrom15(x - (x1 + x2) / 2, y - y2),
-        pointFrom15(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y2),
+        pointFrom16(0, 0),
         angle
       );
     case "w":
-      return pointRotateRads12(
-        pointFrom15(x - x1, y - (y1 + y2) / 2),
-        pointFrom15(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x1, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "e":
-      return pointRotateRads12(
-        pointFrom15(x - x2, y - (y1 + y2) / 2),
-        pointFrom15(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x2, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "nw":
-      return pointRotateRads12(pointFrom15(x - x1, y - y1), pointFrom15(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle);
     case "ne":
-      return pointRotateRads12(pointFrom15(x - x2, y - y1), pointFrom15(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle);
     case "sw":
-      return pointRotateRads12(pointFrom15(x - x1, y - y2), pointFrom15(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle);
     case "se":
-      return pointRotateRads12(pointFrom15(x - x2, y - y2), pointFrom15(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle);
     default:
       return [0, 0];
   }
@@ -18063,10 +18161,10 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     nextHeight,
     true
   );
-  let previousOrigin = pointFrom15(origElement.x, origElement.y);
+  let previousOrigin = pointFrom16(origElement.x, origElement.y);
   if (isLinearElement(origElement)) {
     const [x1, y1] = getElementBounds(origElement, originalElementsMap);
-    previousOrigin = pointFrom15(x1, y1);
+    previousOrigin = pointFrom16(x1, y1);
   }
   const newOrigin = getResizedOrigin(
     previousOrigin,
@@ -18089,7 +18187,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     newOrigin.x += scaledX;
     newOrigin.y += scaledY;
     rescaledPoints.points = rescaledPoints.points.map(
-      (p) => pointFrom15(p[0] - scaledX, p[1] - scaledY)
+      (p) => pointFrom16(p[0] - scaledX, p[1] - scaledY)
     );
   }
   if (nextWidth < 0) {
@@ -18152,11 +18250,11 @@ var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handle
     origElement.height,
     true
   );
-  const startTopLeft = pointFrom15(x1, y1);
-  const startBottomRight = pointFrom15(x2, y2);
+  const startTopLeft = pointFrom16(x1, y1);
+  const startBottomRight = pointFrom16(x2, y2);
   const startCenter = pointCenter3(startTopLeft, startBottomRight);
-  const rotatedPointer = pointRotateRads12(
-    pointFrom15(pointerX, pointerY),
+  const rotatedPointer = pointRotateRads13(
+    pointFrom16(pointerX, pointerY),
     startCenter,
     -origElement.angle
   );
@@ -18514,9 +18612,9 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 // src/resizeTest.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom17,
+  pointFrom as pointFrom18,
   pointOnLineSegment,
-  pointRotateRads as pointRotateRads14
+  pointRotateRads as pointRotateRads15
 } from "@excalidraw/math";
 import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
 
@@ -18525,9 +18623,10 @@ init_define_import_meta_env();
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   isAndroid,
-  isIOS
+  isIOS,
+  isMobileOrTablet
 } from "@excalidraw/common";
-import { pointFrom as pointFrom16, pointRotateRads as pointRotateRads13 } from "@excalidraw/math";
+import { pointFrom as pointFrom17, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
 var transformHandleSizes = {
   mouse: 8,
   pen: 16,
@@ -18568,9 +18667,9 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
   w: true
 };
 var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
-  const [xx, yy] = pointRotateRads13(
-    pointFrom16(x + width / 2, y + height / 2),
-    pointFrom16(cx, cy),
+  const [xx, yy] = pointRotateRads14(
+    pointFrom17(x + width / 2, y + height / 2),
+    pointFrom17(cx, cy),
     angle
   );
   return [xx - width / 2, yy - height / 2, width, height];
@@ -18735,7 +18834,7 @@ var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse", om
     isImageElement(element) ? 0 : void 0
   );
 };
-var shouldShowBoundingBox = (elements, appState) => {
+var hasBoundingBox = (elements, appState) => {
   if (appState.selectedLinearElement?.isEditing) {
     return false;
   }
@@ -18749,7 +18848,7 @@ var shouldShowBoundingBox = (elements, appState) => {
   if (!isLinearElement(element)) {
     return true;
   }
-  return element.points.length > 2;
+  return element.points.length > 2 && !isMobileOrTablet();
 };
 
 // src/resizeTest.ts
@@ -18787,14 +18886,14 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, devic
       const SPACING = isImageElement(element) ? 0 : SIDE_RESIZING_THRESHOLD / zoom.value;
       const ZOOMED_SIDE_RESIZING_THRESHOLD = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom17(x1 - SPACING, y1 - SPACING),
-        pointFrom17(x2 + SPACING, y2 + SPACING),
-        pointFrom17(cx, cy),
+        pointFrom18(x1 - SPACING, y1 - SPACING),
+        pointFrom18(x2 + SPACING, y2 + SPACING),
+        pointFrom18(cx, cy),
         element.angle
       );
       for (const [dir, side] of Object.entries(sides)) {
         if (pointOnLineSegment(
-          pointFrom17(x, y),
+          pointFrom18(x, y),
           side,
           ZOOMED_SIDE_RESIZING_THRESHOLD
         )) {
@@ -18843,14 +18942,14 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
     const cy = (y1 + y2) / 2;
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
     const sides = getSelectionBorders(
-      pointFrom17(x1 - SPACING, y1 - SPACING),
-      pointFrom17(x2 + SPACING, y2 + SPACING),
-      pointFrom17(cx, cy),
+      pointFrom18(x1 - SPACING, y1 - SPACING),
+      pointFrom18(x2 + SPACING, y2 + SPACING),
+      pointFrom18(cx, cy),
       0
     );
     for (const [dir, side] of Object.entries(sides)) {
       if (pointOnLineSegment(
-        pointFrom17(scenePointerX, scenePointerY),
+        pointFrom18(scenePointerX, scenePointerY),
         side,
         SPACING
       )) {
@@ -18907,10 +19006,10 @@ var getCursorForResizingElement = (resizingElement) => {
   return cursor ? `${cursor}-resize` : "";
 };
 var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads14(pointFrom17(x1, y1), center, angle);
-  const topRight = pointRotateRads14(pointFrom17(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads14(pointFrom17(x1, y2), center, angle);
-  const bottomRight = pointRotateRads14(pointFrom17(x2, y2), center, angle);
+  const topLeft = pointRotateRads15(pointFrom18(x1, y1), center, angle);
+  const topRight = pointRotateRads15(pointFrom18(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads15(pointFrom18(x1, y2), center, angle);
+  const bottomRight = pointRotateRads15(pointFrom18(x2, y2), center, angle);
   return {
     n: [topLeft, topRight],
     e: [topRight, bottomRight],
@@ -19451,6 +19550,8 @@ export {
   getFrameLikeTitle,
   getFreeDrawPath2D,
   getFreeDrawSvgPath,
+  getFreedrawOutlineAsSegments,
+  getFreedrawOutlinePoints,
   getGlobalFixedPointForBindableElement,
   getGlobalFixedPoints,
   getHeadingForElbowArrowSnap,
@@ -19510,6 +19611,7 @@ export {
   handleBindTextResize,
   hasBackground,
   hasBoundTextElement,
+  hasBoundingBox,
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,
@@ -19638,7 +19740,6 @@ export {
   shouldAllowVerticalAlign,
   shouldApplyFrameClip,
   shouldEnableBindingForPointerEvent,
-  shouldShowBoundingBox,
   shouldTestInside,
   showSelectedShapeActions,
   snapToMid,