@excalidraw/excalidraw 0.18.0-432a46e → 0.18.0-6fc8502

package/dist/dev/index.js

@@ -13,6 +13,7 @@ import {
   CODES,
   COLORS_PER_ROW,
   COLOR_CHARCOAL_BLACK,
+  COLOR_OUTLINE_CONTRAST_THRESHOLD,
   COLOR_PALETTE,
   COLOR_VOICE_CALL,
   COLOR_WHITE,
@@ -169,7 +170,8 @@ import {
   findIndex,
   findLastIndex,
   fixBindingsAfterDeletion,
-  fixBindingsAfterDuplication,
+  fixDuplicatedBindingsAfterDuplication,
+  fixReversedBindings,
   focusNearestParent,
   frameAndChildrenSelectedTogether,
   generateIdFromFile,
@@ -197,6 +199,7 @@ import {
   getDraggedElementsBounds,
   getElementAbsoluteCoords,
   getElementBounds,
+  getElementLineSegments,
   getElementShape,
   getElementsInGroup,
   getElementsInNewFrame,
@@ -340,6 +343,8 @@ import {
   isValidTextContainer,
   isWindows,
   isWritableElement,
+  lineSegment,
+  lineSegmentIntersectionPoints,
   loadFromBlob,
   loadFromJSON,
   loadHTMLImageElement,
@@ -382,6 +387,8 @@ import {
   pointFromPair,
   pointOnLineSegment,
   pointRotateRads,
+  polygonFromPoints,
+  polygonIncludesPointNonZero,
   preventUnload,
   promiseTry,
   queryFocusableElements,
@@ -453,13 +460,13 @@ import {
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./chunk-S7W4OWSF.js";
+} from "./chunk-KYBDXI6F.js";
 import {
   define_import_meta_env_default
-} from "./chunk-ZG3EI5XS.js";
+} from "./chunk-H7XJ5UVD.js";
 import {
   en_default
-} from "./chunk-LMHBUWQS.js";
+} from "./chunk-X3RYHLJU.js";
 import {
   percentages_default
 } from "./chunk-MFAYKRVR.js";
@@ -734,11 +741,18 @@ var duplicateElements = (opts) => {
       copyElements(element)
     );
   }
-  fixBindingsAfterDuplication(
+  fixDuplicatedBindingsAfterDuplication(
     newElements,
     oldIdToDuplicatedId,
     duplicatedElementsMap
   );
+  if (reverseOrder) {
+    fixReversedBindings(
+      _idsOfElementsToDuplicate,
+      elementsWithClones,
+      oldIdToDuplicatedId
+    );
+  }
   bindElementsToFramesAfterDuplication(
     elementsWithClones,
     oldElements,
@@ -2887,7 +2901,7 @@ var globImport_locales_json = __glob({
   "./locales/da-DK.json": () => import("./locales/da-DK-N76F4QAJ.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-DMRXZ2SZ.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-HIKPLEXI.js"),
-  "./locales/en.json": () => import("./locales/en-OZCJJ2HN.js"),
+  "./locales/en.json": () => import("./locales/en-CKWC2GMK.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-AQYVXC32.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-3TOEU5DE.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-527GAKUP.js"),
@@ -4601,6 +4615,23 @@ var SelectionIcon = createIcon(
   ] }),
   { fill: "none", width: 22, height: 22, strokeWidth: 1.25 }
 );
+var LassoIcon = createIcon(
+  /* @__PURE__ */ jsxs(
+    "g",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4.028 13.252c-.657 -.972 -1.028 -2.078 -1.028 -3.252c0 -3.866 4.03 -7 9 -7s9 3.134 9 7s-4.03 7 -9 7c-1.913 0 -3.686 -.464 -5.144 -1.255" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 17c0 1.42 .316 2.805 1 4" })
+      ]
+    }
+  ),
+  { fill: "none", width: 22, height: 22, strokeWidth: 1.25 }
+);
 var RectangleIcon = createIcon(
   /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -4713,7 +4744,7 @@ var TrashIcon = createIcon(
   modifiedTablerIconProps
 );
 var EmbedIcon = createIcon(
-  /* @__PURE__ */ jsxs("g", { strokeWidth: "1.25", children: [
+  /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ jsx("polyline", { points: "12 16 18 10 12 4" }),
     /* @__PURE__ */ jsx("polyline", { points: "8 4 2 10 8 16" })
   ] }),
@@ -7984,27 +8015,38 @@ var getMostUsedCustomColors = (elements, type, palette2) => {
 var activeColorPickerSectionAtom = atom(null);
 var calculateContrast = (r, g, b) => {
   const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
-  return yiq >= 160 ? "black" : "white";
-};
-var getContrastYIQ = (bgHex, isCustomColor2) => {
-  if (isCustomColor2) {
-    const style = new Option().style;
-    style.color = bgHex;
-    if (style.color) {
-      const rgb = style.color.replace(/^(rgb|rgba)\(/, "").replace(/\)$/, "").replace(/\s/g, "").split(",");
+  return yiq;
+};
+var isColorDark = (color, threshold = 160) => {
+  if (!color) {
+    return true;
+  }
+  if (color === "transparent") {
+    return false;
+  }
+  if (!color.startsWith("#")) {
+    const node = document.createElement("div");
+    node.style.color = color;
+    if (node.style.color) {
+      node.style.position = "absolute";
+      node.style.visibility = "hidden";
+      node.style.width = "0";
+      node.style.height = "0";
+      document.body.appendChild(node);
+      const computedColor = getComputedStyle(node).color;
+      document.body.removeChild(node);
+      const rgb = computedColor.replace(/^(rgb|rgba)\(/, "").replace(/\)$/, "").replace(/\s/g, "").split(",");
       const r2 = parseInt(rgb[0]);
       const g2 = parseInt(rgb[1]);
       const b2 = parseInt(rgb[2]);
-      return calculateContrast(r2, g2, b2);
+      return calculateContrast(r2, g2, b2) < threshold;
     }
+    return true;
   }
-  if (bgHex === "transparent") {
-    return "black";
-  }
-  const r = parseInt(bgHex.substring(1, 3), 16);
-  const g = parseInt(bgHex.substring(3, 5), 16);
-  const b = parseInt(bgHex.substring(5, 7), 16);
-  return calculateContrast(r, g, b);
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+  return calculateContrast(r, g, b) < threshold;
 };
 
 // components/ColorPicker/ColorInput.tsx
@@ -8123,7 +8165,6 @@ import { jsxs as jsxs6 } from "react/jsx-runtime";
 var HotkeyLabel = ({
   color,
   keyLabel,
-  isCustomColor: isCustomColor2 = false,
   isShade = false
 }) => {
   return /* @__PURE__ */ jsxs6(
@@ -8131,7 +8172,7 @@ var HotkeyLabel = ({
     {
       className: "color-picker__button__hotkey-label",
       style: {
-        color: getContrastYIQ(color, isCustomColor2)
+        color: isColorDark(color) ? "#fff" : "#000"
       },
       children: [
         isShade && "\u21E7",
@@ -8167,7 +8208,7 @@ var CustomColorList = ({
         tabIndex: -1,
         type: "button",
         className: clsx8(
-          "color-picker__button color-picker__button--large",
+          "color-picker__button color-picker__button--large has-outline",
           {
             active: color === c,
             "is-transparent": c === "transparent" || !c
@@ -8182,7 +8223,7 @@ var CustomColorList = ({
         style: { "--swatch-color": c },
         children: [
           /* @__PURE__ */ jsx14("div", { className: "color-picker__button-outline" }),
-          /* @__PURE__ */ jsx14(HotkeyLabel_default, { color: c, keyLabel: i + 1, isCustomColor: true })
+          /* @__PURE__ */ jsx14(HotkeyLabel_default, { color: c, keyLabel: i + 1 })
         ]
       },
       i
@@ -8229,7 +8270,7 @@ var PickerColorList = ({
         tabIndex: -1,
         type: "button",
         className: clsx9(
-          "color-picker__button color-picker__button--large",
+          "color-picker__button color-picker__button--large has-outline",
           {
             active: colorObj?.colorName === key,
             "is-transparent": color2 === "transparent" || !color2
@@ -8288,7 +8329,7 @@ var ShadeList = ({ hex, onChange, palette: palette2 }) => {
           tabIndex: -1,
           type: "button",
           className: clsx10(
-            "color-picker__button color-picker__button--large",
+            "color-picker__button color-picker__button--large has-outline",
             { active: i === shade }
           ),
           "aria-label": "Shade",
@@ -8683,7 +8724,11 @@ var TopPicks = ({
     {
       className: clsx11("color-picker__button", {
         active: color === activeColor,
-        "is-transparent": color === "transparent" || !color
+        "is-transparent": color === "transparent" || !color,
+        "has-outline": !isColorDark(
+          color,
+          COLOR_OUTLINE_CONTRAST_THRESHOLD
+        )
       }),
       style: { "--swatch-color": color },
       type: "button",
@@ -8810,7 +8855,8 @@ var ColorPickerTrigger = ({
     {
       type: "button",
       className: clsx12("color-picker__button active-color properties-trigger", {
-        "is-transparent": color === "transparent" || !color
+        "is-transparent": color === "transparent" || !color,
+        "has-outline": !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
       }),
       "aria-label": label,
       style: color ? { "--swatch-color": color } : void 0,
@@ -11284,7 +11330,6 @@ import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
-  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return !!app.props.UIOptions.canvasActions.changeViewBackgroundColor && !appState.viewModeEnabled;
@@ -11316,7 +11361,6 @@ var actionChangeViewBackgroundColor = register({
 var actionClearCanvas = register({
   name: "clearCanvas",
   label: "labels.clearCanvas",
-  paletteName: "Clear canvas",
   icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
@@ -11668,10 +11712,39 @@ var actionToggleEraserTool = register({
   },
   keyTest: (event) => event.key === KEYS.E
 });
+var actionToggleLassoTool = register({
+  name: "toggleLassoTool",
+  label: "toolBar.lasso",
+  icon: LassoIcon,
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    let activeTool;
+    if (appState.activeTool.type !== "lasso") {
+      activeTool = updateActiveTool(appState, {
+        type: "lasso",
+        fromSelection: false
+      });
+      setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "selection"
+      });
+    }
+    return {
+      appState: {
+        ...appState,
+        selectedElementIds: {},
+        selectedGroupIds: {},
+        activeEmbeddable: null,
+        activeTool
+      },
+      captureUpdate: CaptureUpdateAction.NEVER
+    };
+  }
+});
 var actionToggleHandTool = register({
   name: "toggleHandTool",
   label: "toolBar.hand",
-  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
   icon: handIcon,
   viewMode: false,
@@ -12729,7 +12802,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-5HAY2PCR.js").then(
+        (blob2) => import("./data/image-NKFINVKH.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13176,7 +13249,7 @@ var actionPasteStyles = register({
 
 // ../element/src/showSelectedShapeActions.ts
 var showSelectedShapeActions = (appState, elements) => Boolean(
-  !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && (appState.activeTool.type !== "custom" && (appState.editingTextElement || appState.activeTool.type !== "selection" && appState.activeTool.type !== "eraser" && appState.activeTool.type !== "hand" && appState.activeTool.type !== "laser") || getSelectedElements(elements, appState).length)
+  !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)
 );
 
 // actions/actionMenu.tsx
@@ -14660,7 +14733,6 @@ var actionToggleZenMode = register({
   name: "zenMode",
   label: "buttons.zenMode",
   icon: coffeeIcon,
-  paletteName: "Toggle zen mode",
   viewMode: true,
   trackEvent: {
     category: "canvas",
@@ -14714,7 +14786,6 @@ var actionToggleStats = register({
   name: "stats",
   label: "stats.fullTitle",
   icon: abacusIcon,
-  paletteName: "Toggle stats",
   viewMode: true,
   trackEvent: { category: "menu" },
   keywords: ["edit", "attributes", "customize"],
@@ -14875,8 +14946,8 @@ var actionWrapTextInContainer = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    const areTextElements = selectedElements.every((el) => isTextElement(el));
-    return selectedElements.length > 0 && areTextElements;
+    const someTextElements = selectedElements.some((el) => isTextElement(el));
+    return selectedElements.length > 0 && someTextElements;
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -15413,7 +15484,6 @@ var actionToggleElementLock = register({
 });
 var actionUnlockAllElements = register({
   name: "unlockAllElements",
-  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
   icon: UnlockedIcon,
@@ -18792,7 +18862,7 @@ var canChangeStrokeColor = (appState, targetElements) => {
       break;
     }
   }
-  return hasStrokeColor(appState.activeTool.type) && appState.activeTool.type !== "image" && commonSelectedType !== "image" && commonSelectedType !== "frame" && commonSelectedType !== "magicframe" || targetElements.some((element) => hasStrokeColor(element.type));
+  return hasStrokeColor(appState.activeTool.type) && commonSelectedType !== "image" && commonSelectedType !== "frame" && commonSelectedType !== "magicframe" || targetElements.some((element) => hasStrokeColor(element.type));
 };
 var canChangeBackgroundColor = (appState, targetElements) => {
   return hasBackground(appState.activeTool.type) || targetElements.some((element) => hasBackground(element.type));
@@ -18905,6 +18975,7 @@ var ShapesSwitcher = ({
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState20(false);
   const frameToolSelected = activeTool.type === "frame";
   const laserToolSelected = activeTool.type === "laser";
+  const lassoToolSelected = activeTool.type === "lasso";
   const embeddableToolSelected = activeTool.type === "embeddable";
   const { TTDDialogTriggerTunnel } = useTunnels();
   return /* @__PURE__ */ jsxs39(Fragment10, { children: [
@@ -18932,6 +19003,13 @@ var ShapesSwitcher = ({
             if (!appState.penDetected && pointerType === "pen") {
               app.togglePenMode(true);
             }
+            if (value === "selection") {
+              if (appState.activeTool.type === "selection") {
+                app.setActiveTool({ type: "lasso" });
+              } else {
+                app.setActiveTool({ type: "selection" });
+              }
+            }
           },
           onChange: ({ pointerType }) => {
             if (appState.activeTool.type !== value) {
@@ -18956,14 +19034,14 @@ var ShapesSwitcher = ({
         DropdownMenu_default.Trigger,
         {
           className: clsx31("App-toolbar__extra-tools-trigger", {
-            "App-toolbar__extra-tools-trigger--selected": frameToolSelected || embeddableToolSelected || // in collab we're already highlighting the laser button
+            "App-toolbar__extra-tools-trigger--selected": frameToolSelected || embeddableToolSelected || lassoToolSelected || // in collab we're already highlighting the laser button
             // outside toolbar, so let's not highlight extra-tools button
             // on top of it
             laserToolSelected && !app.props.isCollaborating
           }),
           onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen),
           title: t("toolBar.extraTools"),
-          children: extraToolsIcon
+          children: frameToolSelected ? frameToolIcon : embeddableToolSelected ? EmbedIcon : laserToolSelected && !app.props.isCollaborating ? laserPointerToolIcon : lassoToolSelected ? LassoIcon : extraToolsIcon
         }
       ),
       /* @__PURE__ */ jsxs39(
@@ -19005,6 +19083,16 @@ var ShapesSwitcher = ({
                 children: t("toolBar.laser")
               }
             ),
+            /* @__PURE__ */ jsx69(
+              DropdownMenu_default.Item,
+              {
+                onSelect: () => app.setActiveTool({ type: "lasso" }),
+                icon: LassoIcon,
+                "data-testid": "toolbar-lasso",
+                selected: lassoToolSelected,
+                children: t("toolBar.lasso")
+              }
+            ),
             /* @__PURE__ */ jsx69("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }),
             app.props.aiEnabled !== false && /* @__PURE__ */ jsx69(TTDDialogTriggerTunnel.Out, {}),
             /* @__PURE__ */ jsx69(
@@ -19315,7 +19403,8 @@ function CommandPaletteInner({
       );
       const toolCommands = [
         actionManager.actions.toggleHandTool,
-        actionManager.actions.setFrameAsActiveTool
+        actionManager.actions.setFrameAsActiveTool,
+        actionManager.actions.toggleLassoTool
       ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.tools));
       const editorCommands = [
         actionManager.actions.undo,
@@ -20436,7 +20525,6 @@ var actionTextAutoResize = register({
 var actionToggleViewMode = register({
   name: "viewMode",
   label: "labels.viewMode",
-  paletteName: "Toggle view mode",
   icon: eyeIcon,
   viewMode: true,
   trackEvent: {
@@ -21812,7 +21900,13 @@ var bindLinearElementToElement = (linearElement, start2, end, elementStore, elem
     newPoints[0][1] = -delta;
     newPoints[endPointIndex][1] += delta;
   }
-  Object.assign(linearElement, { points: newPoints });
+  Object.assign(
+    linearElement,
+    LinearElementEditor.getNormalizedPoints({
+      ...linearElement,
+      points: newPoints
+    })
+  );
   return {
     linearElement,
     startBoundElement,
@@ -23273,8 +23367,19 @@ var AnimatedTrail = class {
     __publicField(this, "pastTrails", []);
     __publicField(this, "container");
     __publicField(this, "trailElement");
+    __publicField(this, "trailAnimation");
     this.animationFrameHandler.register(this, this.onFrame.bind(this));
     this.trailElement = document.createElementNS(SVG_NS, "path");
+    if (this.options.animateTrail) {
+      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
+      this.trailAnimation.setAttribute("attributeName", "stroke-dashoffset");
+      this.trailElement.setAttribute("stroke-dasharray", "7 7");
+      this.trailElement.setAttribute("stroke-dashoffset", "10");
+      this.trailAnimation.setAttribute("from", "0");
+      this.trailAnimation.setAttribute("to", `-14`);
+      this.trailAnimation.setAttribute("dur", "0.3s");
+      this.trailElement.appendChild(this.trailAnimation);
+    }
   }
   get hasCurrentTrail() {
     return !!this.currentTrail;
@@ -23321,8 +23426,21 @@ var AnimatedTrail = class {
       this.update();
     }
   }
+  getCurrentTrail() {
+    return this.currentTrail;
+  }
+  clearTrails() {
+    this.pastTrails = [];
+    this.currentTrail = void 0;
+    this.update();
+  }
   update() {
+    this.pastTrails = [];
     this.start();
+    if (this.trailAnimation) {
+      this.trailAnimation.setAttribute("begin", "indefinite");
+      this.trailAnimation.setAttribute("repeatCount", "indefinite");
+    }
   }
   onFrame() {
     const paths = [];
@@ -23341,19 +23459,31 @@ var AnimatedTrail = class {
     }
     const svgPaths = paths.join(" ").trim();
     this.trailElement.setAttribute("d", svgPaths);
-    this.trailElement.setAttribute(
-      "fill",
-      (this.options.fill ?? (() => "black"))(this)
-    );
+    if (this.trailAnimation) {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this)
+      );
+      this.trailElement.setAttribute(
+        "stroke",
+        (this.options.stroke ?? (() => "black"))(this)
+      );
+    } else {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this)
+      );
+    }
   }
   drawTrail(trail, state) {
-    const stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {
+    const _stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {
       const result = sceneCoordsToViewportCoords(
         { sceneX: x, sceneY: y },
         state
       );
       return [result.x, result.y];
     });
+    const stroke = this.trailAnimation ? _stroke.slice(0, _stroke.length / 2) : _stroke;
     return getSvgPathFromStroke(stroke, true);
   }
 };
@@ -24011,6 +24141,206 @@ var isMaybeMermaidDefinition = (text) => {
   return re.test(text.trim());
 };
 
+// lasso/utils.ts
+import { simplify } from "points-on-curve";
+var getLassoSelectedElementIds = (input) => {
+  const {
+    lassoPath,
+    elements,
+    elementsSegments,
+    intersectedElements,
+    enclosedElements,
+    simplifyDistance
+  } = input;
+  let path = lassoPath;
+  if (simplifyDistance) {
+    path = simplify(lassoPath, simplifyDistance);
+  }
+  enclosedElements.clear();
+  for (const element of elements) {
+    if (!intersectedElements.has(element.id) && !enclosedElements.has(element.id)) {
+      const enclosed = enclosureTest(path, element, elementsSegments);
+      if (enclosed) {
+        enclosedElements.add(element.id);
+      } else {
+        const intersects = intersectionTest(path, element, elementsSegments);
+        if (intersects) {
+          intersectedElements.add(element.id);
+        }
+      }
+    }
+  }
+  const results = [...intersectedElements, ...enclosedElements];
+  return {
+    selectedElementIds: results
+  };
+};
+var enclosureTest = (lassoPath, element, elementsSegments) => {
+  const lassoPolygon = polygonFromPoints(lassoPath);
+  const segments = elementsSegments.get(element.id);
+  if (!segments) {
+    return false;
+  }
+  return segments.some((segment) => {
+    return segment.some(
+      (point) => polygonIncludesPointNonZero(point, lassoPolygon)
+    );
+  });
+};
+var intersectionTest = (lassoPath, element, elementsSegments) => {
+  const elementSegments = elementsSegments.get(element.id);
+  if (!elementSegments) {
+    return false;
+  }
+  const lassoSegments = lassoPath.reduce((acc, point, index) => {
+    if (index === 0) {
+      return acc;
+    }
+    acc.push(lineSegment(lassoPath[index - 1], point));
+    return acc;
+  }, []);
+  return lassoSegments.some(
+    (lassoSegment) => elementSegments.some(
+      (elementSegment) => (
+        // introduce a bit of tolerance to account for roughness and simplification of paths
+        lineSegmentIntersectionPoints(lassoSegment, elementSegment, 1) !== null
+      )
+    )
+  );
+};
+
+// lasso/index.ts
+var LassoTrail = class extends AnimatedTrail {
+  constructor(animationFrameHandler, app) {
+    super(animationFrameHandler, app, {
+      animateTrail: true,
+      streamline: 0.4,
+      sizeMapping: (c) => {
+        const DECAY_TIME = Infinity;
+        const DECAY_LENGTH = 5e3;
+        const t2 = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME
+        );
+        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
+        return Math.min(easeOut(l), easeOut(t2));
+      },
+      fill: () => "rgba(105,101,219,0.05)",
+      stroke: () => "rgba(105,101,219)"
+    });
+    __publicField(this, "intersectedElements", /* @__PURE__ */ new Set());
+    __publicField(this, "enclosedElements", /* @__PURE__ */ new Set());
+    __publicField(this, "elementsSegments", null);
+    __publicField(this, "keepPreviousSelection", false);
+    __publicField(this, "selectElementsFromIds", (ids) => {
+      this.app.setState((prevState) => {
+        const nextSelectedElementIds = ids.reduce((acc, id) => {
+          acc[id] = true;
+          return acc;
+        }, {});
+        if (this.keepPreviousSelection) {
+          for (const id of Object.keys(prevState.selectedElementIds)) {
+            nextSelectedElementIds[id] = true;
+          }
+        }
+        for (const [id] of Object.entries(nextSelectedElementIds)) {
+          const element = this.app.scene.getNonDeletedElement(id);
+          if (element && isTextElement(element)) {
+            const container = getContainerElement(
+              element,
+              this.app.scene.getNonDeletedElementsMap()
+            );
+            if (container) {
+              nextSelectedElementIds[container.id] = true;
+              delete nextSelectedElementIds[element.id];
+            }
+          }
+        }
+        for (const [id] of Object.entries(nextSelectedElementIds)) {
+          const element = this.app.scene.getNonDeletedElement(id);
+          if (element && isFrameLikeElement(element)) {
+            const elementsInFrame = getFrameChildren(
+              this.app.scene.getNonDeletedElementsMap(),
+              element.id
+            );
+            for (const child of elementsInFrame) {
+              delete nextSelectedElementIds[child.id];
+            }
+          }
+        }
+        const nextSelection = selectGroupsForSelectedElements(
+          {
+            editingGroupId: prevState.editingGroupId,
+            selectedElementIds: nextSelectedElementIds
+          },
+          this.app.scene.getNonDeletedElements(),
+          prevState,
+          this.app
+        );
+        const selectedIds = [...Object.keys(nextSelection.selectedElementIds)];
+        const selectedGroupIds = [...Object.keys(nextSelection.selectedGroupIds)];
+        return {
+          selectedElementIds: nextSelection.selectedElementIds,
+          selectedGroupIds: nextSelection.selectedGroupIds,
+          selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor(
+            this.app.scene.getNonDeletedElement(
+              selectedIds[0]
+            )
+          ) : null
+        };
+      });
+    });
+    __publicField(this, "addPointToPath", (x, y, keepPreviousSelection = false) => {
+      super.addPointToPath(x, y);
+      this.keepPreviousSelection = keepPreviousSelection;
+      this.updateSelection();
+    });
+    __publicField(this, "updateSelection", () => {
+      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom(p[0], p[1]));
+      if (!this.elementsSegments) {
+        this.elementsSegments = /* @__PURE__ */ new Map();
+        const visibleElementsMap = arrayToMap(this.app.visibleElements);
+        for (const element of this.app.visibleElements) {
+          const segments = getElementLineSegments(element, visibleElementsMap);
+          this.elementsSegments.set(element.id, segments);
+        }
+      }
+      if (lassoPath) {
+        const { selectedElementIds } = getLassoSelectedElementIds({
+          lassoPath,
+          elements: this.app.visibleElements,
+          elementsSegments: this.elementsSegments,
+          intersectedElements: this.intersectedElements,
+          enclosedElements: this.enclosedElements,
+          simplifyDistance: 5 / this.app.state.zoom.value
+        });
+        this.selectElementsFromIds(selectedElementIds);
+      }
+    });
+  }
+  startPath(x, y, keepPreviousSelection = false) {
+    this.endPath();
+    super.startPath(x, y);
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+    this.keepPreviousSelection = keepPreviousSelection;
+    if (!this.keepPreviousSelection) {
+      this.app.setState({
+        selectedElementIds: {},
+        selectedGroupIds: {},
+        selectedLinearElement: null
+      });
+    }
+  }
+  endPath() {
+    super.endPath();
+    super.clearTrails();
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+    this.elementsSegments = null;
+  }
+};
+
 // components/BraveMeasureTextError.tsx
 import { jsx as jsx77, jsxs as jsxs42 } from "react/jsx-runtime";
 var BraveMeasureTextError = () => {
@@ -24471,13 +24801,13 @@ var getHints = ({
   }
   if (activeTool.type === "selection") {
     if (appState.selectionElement && !selectedElements.length && !appState.editingTextElement && !appState.editingLinearElement) {
-      return t("hints.deepBoxSelect");
+      return [t("hints.deepBoxSelect")];
     }
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
       return t("hints.disableSnapping");
     }
     if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning");
+      return [t("hints.canvasPanning")];
     }
     if (selectedElements.length === 1) {
       if (isLinearElement(selectedElements[0])) {
@@ -29169,7 +29499,15 @@ var StatsInner = memo5(
                     /* @__PURE__ */ jsx131("div", { children: t("stats.height") }),
                     /* @__PURE__ */ jsx131("div", { children: round(unCroppedDimension.height, 2) })
                   ] }),
-                  /* @__PURE__ */ jsx131(StatsRow, { heading: true, "data-testid": "stats-element-type", children: appState.croppingElementId ? t("labels.imageCropping") : t(`element.${singleElement.type}`) }),
+                  /* @__PURE__ */ jsx131(
+                    StatsRow,
+                    {
+                      heading: true,
+                      "data-testid": "stats-element-type",
+                      style: { margin: "0.3125rem 0" },
+                      children: appState.croppingElementId ? t("labels.imageCropping") : t(`element.${singleElement.type}`)
+                    }
+                  ),
                   /* @__PURE__ */ jsx131(StatsRow, { children: /* @__PURE__ */ jsx131(
                     Position_default,
                     {
@@ -31400,32 +31738,35 @@ var StaticCanvas = (props) => {
   });
   return /* @__PURE__ */ jsx144("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
 };
-var getRelevantAppStateProps2 = (appState) => ({
-  zoom: appState.zoom,
-  scrollX: appState.scrollX,
-  scrollY: appState.scrollY,
-  width: appState.width,
-  height: appState.height,
-  viewModeEnabled: appState.viewModeEnabled,
-  openDialog: appState.openDialog,
-  hoveredElementIds: appState.hoveredElementIds,
-  offsetLeft: appState.offsetLeft,
-  offsetTop: appState.offsetTop,
-  theme: appState.theme,
-  pendingImageElementId: appState.pendingImageElementId,
-  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
-  viewBackgroundColor: appState.viewBackgroundColor,
-  exportScale: appState.exportScale,
-  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
-  gridSize: appState.gridSize,
-  gridStep: appState.gridStep,
-  frameRendering: appState.frameRendering,
-  selectedElementIds: appState.selectedElementIds,
-  frameToHighlight: appState.frameToHighlight,
-  editingGroupId: appState.editingGroupId,
-  currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElementId: appState.croppingElementId
-});
+var getRelevantAppStateProps2 = (appState) => {
+  const relevantAppStateProps = {
+    zoom: appState.zoom,
+    scrollX: appState.scrollX,
+    scrollY: appState.scrollY,
+    width: appState.width,
+    height: appState.height,
+    viewModeEnabled: appState.viewModeEnabled,
+    openDialog: appState.openDialog,
+    hoveredElementIds: appState.hoveredElementIds,
+    offsetLeft: appState.offsetLeft,
+    offsetTop: appState.offsetTop,
+    theme: appState.theme,
+    pendingImageElementId: appState.pendingImageElementId,
+    shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    exportScale: appState.exportScale,
+    selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
+    gridSize: appState.gridSize,
+    gridStep: appState.gridStep,
+    frameRendering: appState.frameRendering,
+    selectedElementIds: appState.selectedElementIds,
+    frameToHighlight: appState.frameToHighlight,
+    editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
+    croppingElementId: appState.croppingElementId
+  };
+  return relevantAppStateProps;
+};
 var areEqual4 = (prevProps, nextProps) => {
   if (prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
   // even if sceneNonce didn't change (e.g. we filter elements out based
@@ -31712,6 +32053,7 @@ var App = class _App extends React43.Component {
       },
       fill: () => this.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
     }));
+    __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
     __publicField(this, "onChangeEmitter", new Emitter());
     __publicField(this, "onPointerDownEmitter", new Emitter());
     __publicField(this, "onPointerUpEmitter", new Emitter());
@@ -33337,7 +33679,7 @@ var App = class _App extends React43.Component {
       if (event.key === KEYS.SPACE) {
         if (this.state.viewModeEnabled || this.state.openDialog?.name === "elementLinkSelector") {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
-        } else if (this.state.activeTool.type === "selection") {
+        } else if (this.state.activeTool.type === "selection" || this.state.activeTool.type === "lasso") {
           resetCursor(this.interactiveCanvas);
         } else {
           setCursorForShape(this.interactiveCanvas, this.state);
@@ -33421,7 +33763,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "isToolSupported", (tool) => {
       return this.props.UIOptions.tools?.[tool] !== false;
     });
-    __publicField(this, "setActiveTool", (tool) => {
+    __publicField(this, "setActiveTool", (tool, keepSelection = false) => {
       if (!this.isToolSupported(tool.type)) {
         console.warn(
           `"${tool.type}" tool is disabled via "UIOptions.canvasActions.tools.${tool.type}"`
@@ -33457,7 +33799,19 @@ var App = class _App extends React43.Component {
         if (nextActiveTool.type === "freedraw") {
           this.store.shouldCaptureIncrement();
         }
-        if (nextActiveTool.type !== "selection") {
+        if (nextActiveTool.type === "lasso") {
+          return {
+            ...prevState,
+            activeTool: nextActiveTool,
+            ...keepSelection ? {} : {
+              selectedElementIds: makeNextSelectedElementIds({}, prevState),
+              selectedGroupIds: makeNextSelectedElementIds({}, prevState),
+              editingGroupId: null,
+              multiElement: null
+            },
+            ...commonResets
+          };
+        } else if (nextActiveTool.type !== "selection") {
           return {
             ...prevState,
             activeTool: nextActiveTool,
@@ -34458,11 +34812,17 @@ var App = class _App extends React43.Component {
       if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
         return;
       }
-      const allowOnPointerDown = !this.state.penMode || event.pointerType !== "touch" || this.state.activeTool.type === "selection" || this.state.activeTool.type === "text" || this.state.activeTool.type === "image";
+      const allowOnPointerDown = !this.state.penMode || event.pointerType !== "touch" || this.state.activeTool.type === "selection" || this.state.activeTool.type === "lasso" || this.state.activeTool.type === "text" || this.state.activeTool.type === "image";
       if (!allowOnPointerDown) {
         return;
       }
-      if (this.state.activeTool.type === "text") {
+      if (this.state.activeTool.type === "lasso") {
+        this.lassoTrail.startPath(
+          pointerDownState.origin.x,
+          pointerDownState.origin.y,
+          event.shiftKey
+        );
+      } else if (this.state.activeTool.type === "text") {
         this.handleTextOnPointerDown(event, pointerDownState);
       } else if (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line") {
         this.handleLinearElementOnPointerDown(
@@ -34690,7 +35050,7 @@ var App = class _App extends React43.Component {
       return true;
     });
     __publicField(this, "clearSelectionIfNotUsingSelection", () => {
-      if (this.state.activeTool.type !== "selection") {
+      if (this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso") {
         this.setState({
           selectedElementIds: makeNextSelectedElementIds({}, this.state),
           selectedGroupIds: {},
@@ -35899,7 +36259,7 @@ var App = class _App extends React43.Component {
           width: distance(pointerDownState.origin.x, pointerCoords.x),
           height: distance(pointerDownState.origin.y, pointerCoords.y),
           shouldMaintainAspectRatio: shouldMaintainAspectRatio(event),
-          shouldResizeFromCenter: shouldResizeFromCenter(event),
+          shouldResizeFromCenter: false,
           zoom: this.state.zoom.value,
           informMutation
         });
@@ -36863,7 +37223,11 @@ var App = class _App extends React43.Component {
                         /* @__PURE__ */ jsx147(
                           SVGLayer,
                           {
-                            trails: [this.laserTrails, this.eraserTrail]
+                            trails: [
+                              this.laserTrails,
+                              this.eraserTrail,
+                              this.lassoTrail
+                            ]
                           }
                         ),
                         selectedElements.length === 1 && this.state.openDialog?.name !== "elementLinkSelector" && this.state.showHyperlinkPopup && /* @__PURE__ */ jsx147(
@@ -38296,7 +38660,7 @@ var App = class _App extends React43.Component {
         (element) => this.isASelectedElement(element)
       );
       const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === pointerDownState.hit.element?.id;
-      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {
+      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && this.state.activeTool.type !== "lasso") {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.every((element) => element.locked)) {
           return;
@@ -38445,23 +38809,28 @@ var App = class _App extends React43.Component {
               includeBoundTextElement: true,
               includeElementsInFrames: true
             });
-            if (hitElement && !selectedElements2.find((el) => el.id === hitElement.id)) {
+            if (hitElement && // hit element may not end up being selected
+            // if we're alt-dragging a common bounding box
+            // over the hit element
+            pointerDownState.hit.wasAddedToSelection && !selectedElements2.find((el) => el.id === hitElement.id)) {
               selectedElements2.push(hitElement);
             }
+            const idsOfElementsToDuplicate = new Map(
+              selectedElements2.map((el) => [el.id, el])
+            );
             const { newElements: clonedElements, elementsWithClones } = duplicateElements({
               type: "in-place",
               elements,
               appState: this.state,
               randomizeSeed: true,
-              idsOfElementsToDuplicate: new Map(
-                selectedElements2.map((el) => [el.id, el])
-              ),
+              idsOfElementsToDuplicate,
               overrides: (el) => {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
                   return {
                     x: origEl.x,
-                    y: origEl.y
+                    y: origEl.y,
+                    seed: origEl.seed
                   };
                 }
                 return {};
@@ -38478,7 +38847,14 @@ var App = class _App extends React43.Component {
             const nextSceneElements = syncMovedIndices(
               mappedNewSceneElements || elementsWithClones,
               arrayToMap(clonedElements)
-            );
+            ).map((el) => {
+              if (idsOfElementsToDuplicate.has(el.id)) {
+                return newElementWith(el, {
+                  seed: randomInteger()
+                });
+              }
+              return el;
+            });
             this.scene.replaceAllElements(nextSceneElements);
             this.maybeCacheVisibleGaps(event, selectedElements2, true);
             this.maybeCacheReferenceSnapPoints(event, selectedElements2, true);
@@ -38489,7 +38865,37 @@ var App = class _App extends React43.Component {
       if (this.state.selectionElement) {
         pointerDownState.lastCoords.x = pointerCoords.x;
         pointerDownState.lastCoords.y = pointerCoords.y;
-        this.maybeDragNewGenericElement(pointerDownState, event);
+        if (event.altKey) {
+          this.setActiveTool(
+            { type: "lasso", fromSelection: true },
+            event.shiftKey
+          );
+          this.lassoTrail.startPath(
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            event.shiftKey
+          );
+          this.setAppState({
+            selectionElement: null
+          });
+        } else {
+          this.maybeDragNewGenericElement(pointerDownState, event);
+        }
+      } else if (this.state.activeTool.type === "lasso") {
+        if (!event.altKey && this.state.activeTool.fromSelection) {
+          this.setActiveTool({ type: "selection" });
+          this.createGenericElementOnPointerDown("selection", pointerDownState);
+          pointerDownState.lastCoords.x = pointerCoords.x;
+          pointerDownState.lastCoords.y = pointerCoords.y;
+          this.maybeDragNewGenericElement(pointerDownState, event);
+          this.lassoTrail.endPath();
+        } else {
+          this.lassoTrail.addPointToPath(
+            pointerCoords.x,
+            pointerCoords.y,
+            event.shiftKey
+          );
+        }
       } else {
         const newElement2 = this.state.newElement;
         if (!newElement2) {
@@ -38687,6 +39093,7 @@ var App = class _App extends React43.Component {
         snapLines: updateStable(prevState.snapLines, []),
         originSnapOffset: null
       }));
+      this.lassoTrail.endPath();
       this.lastPointerMoveCoords = null;
       SnapCache.setReferenceSnapPoints(null);
       SnapCache.setVisibleGaps(null);
@@ -39219,7 +39626,8 @@ var App = class _App extends React43.Component {
         }
       }
       if (
-        // not elbow midpoint dragged
+        // do not clear selection if lasso is active
+        this.state.activeTool.type !== "lasso" && // not elbow midpoint dragged
         !(hitElement && isElbowArrow(hitElement)) && // not dragged
         !pointerDownState.drag.hasOccurred && // not resized
         !this.state.isResizing && // only hitting the bounding box of the previous hit element
@@ -39285,7 +39693,8 @@ var App = class _App extends React43.Component {
         this.laserTrails.endPath();
         return;
       }
-      if (!activeTool.locked && activeTool.type !== "freedraw") {
+      if (!activeTool.locked && activeTool.type !== "freedraw" && (activeTool.type !== "lasso" || // if lasso is turned on but from selection => reset to selection
+      activeTool.type === "lasso" && activeTool.fromSelection)) {
         resetCursor(this.interactiveCanvas);
         this.setState({
           newElement: null,