@excalidraw/excalidraw 0.18.0-200a6bd94 → 0.18.0-3085f4a

package/dist/dev/index.js

@@ -60,6 +60,7 @@ import {
   resizeImageFile,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   saveAsJSON,
@@ -68,7 +69,7 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-VISTIWDQ.js";
+} from "./chunk-5EDE7GFX.js";
 import {
   define_import_meta_env_default
 } from "./chunk-CP5DND7P.js";
@@ -188,7 +189,9 @@ import {
   randomInteger as randomInteger4,
   CLASSES as CLASSES7,
   Emitter as Emitter3,
-  MINIMUM_ARROW_SIZE
+  isMobile,
+  MINIMUM_ARROW_SIZE,
+  DOUBLE_TAP_POSITION_THRESHOLD
 } from "@excalidraw/common";
 import {
   getObservedAppState,
@@ -203,7 +206,7 @@ import {
   updateBoundElements as updateBoundElements3,
   getSuggestedBindingsForArrows,
   LinearElementEditor as LinearElementEditor12,
-  newElementWith as newElementWith10,
+  newElementWith as newElementWith11,
   newFrameElement as newFrameElement3,
   newFreeDrawElement,
   newEmbeddableElement,
@@ -318,7 +321,8 @@ import {
   CaptureUpdateAction as CaptureUpdateAction37,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement7,
-  isSimpleArrow
+  isSimpleArrow,
+  StoreDelta as StoreDelta2
 } from "@excalidraw/element";
 
 // actions/actionDeleteSelected.tsx
@@ -3119,7 +3123,9 @@ var actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        activeTool: updateActiveTool(appState, { type: "selection" }),
+        activeTool: updateActiveTool(appState, {
+          type: app.defaultSelectionTool
+        }),
         multiElement: null,
         activeEmbeddable: null,
         selectedLinearElement: null
@@ -7375,7 +7381,7 @@ var actionClearCanvas = register({
         gridModeEnabled: appState.gridModeEnabled,
         stats: appState.stats,
         pasteDialog: appState.pasteDialog,
-        activeTool: appState.activeTool.type === "image" ? { ...appState.activeTool, type: "selection" } : appState.activeTool
+        activeTool: appState.activeTool.type === "image" ? { ...appState.activeTool, type: app.defaultSelectionTool } : appState.activeTool
       },
       captureUpdate: CaptureUpdateAction6.IMMEDIATELY
     };
@@ -7674,12 +7680,12 @@ var actionToggleEraserTool = register({
   name: "toggleEraserTool",
   label: "toolBar.eraser",
   trackEvent: { category: "toolbar" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     let activeTool;
     if (isEraserActive(appState)) {
       activeTool = updateActiveTool2(appState, {
         ...appState.activeTool.lastActiveTool || {
-          type: "selection"
+          type: app.defaultSelectionTool
         },
         lastActiveToolBeforeEraser: null
       });
@@ -7707,6 +7713,9 @@ var actionToggleLassoTool = register({
   label: "toolBar.lasso",
   icon: LassoIcon,
   trackEvent: { category: "toolbar" },
+  predicate: (elements, appState, props, app) => {
+    return app.defaultSelectionTool !== "lasso";
+  },
   perform: (elements, appState, _, app) => {
     let activeTool;
     if (appState.activeTool.type !== "lasso") {
@@ -7804,7 +7813,11 @@ import {
   bindOrUnbindLinearElement,
   isBindingEnabled
 } from "@excalidraw/element/binding";
-import { isValidPolygon, LinearElementEditor as LinearElementEditor5 } from "@excalidraw/element";
+import {
+  isValidPolygon,
+  LinearElementEditor as LinearElementEditor5,
+  newElementWith as newElementWith4
+} from "@excalidraw/element";
 import {
   isBindingElement,
   isFreeDrawElement,
@@ -7849,7 +7862,14 @@ var actionFinalize = register({
       if (linearElementEditor !== appState.selectedLinearElement) {
         let newElements2 = elements;
         if (element2 && isInvisiblySmallElement(element2)) {
-          newElements2 = newElements2.filter((el) => el.id !== element2.id);
+          newElements2 = newElements2.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, {
+                isDeleted: true
+              });
+            }
+            return el;
+          });
         }
         return {
           elements: newElements2,
@@ -7882,7 +7902,12 @@ var actionFinalize = register({
           });
         }
         return {
-          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.filter((el) => el.id !== element2.id) : void 0,
+          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, { isDeleted: true });
+            }
+            return el;
+          }) : void 0,
           appState: {
             ...appState,
             cursorButton: "up",
@@ -7924,7 +7949,12 @@ var actionFinalize = register({
         }
       }
       if (element && isInvisiblySmallElement(element)) {
-        newElements = newElements.filter((el) => el.id !== element.id);
+        newElements = newElements.map((el) => {
+          if (el.id === element?.id) {
+            return newElementWith4(el, { isDeleted: true });
+          }
+          return el;
+        });
       }
       if (isLinearElement3(element) || isFreeDrawElement(element)) {
         const isLoop = isPathALoop(element.points, appState.zoom.value);
@@ -7969,13 +7999,13 @@ var actionFinalize = register({
     if (appState.activeTool.type === "eraser") {
       activeTool = updateActiveTool4(appState, {
         ...appState.activeTool.lastActiveTool || {
-          type: "selection"
+          type: app.defaultSelectionTool
         },
         lastActiveToolBeforeEraser: null
       });
     } else {
       activeTool = updateActiveTool4(appState, {
-        type: "selection"
+        type: app.defaultSelectionTool
       });
     }
     return {
@@ -8936,7 +8966,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-XM2PNARE.js").then(
+        (blob2) => import("./data/image-7AP4KED2.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9277,7 +9307,7 @@ import {
   KEYS as KEYS16,
   getLineHeight as getLineHeight2
 } from "@excalidraw/common";
-import { newElementWith as newElementWith4 } from "@excalidraw/element";
+import { newElementWith as newElementWith5 } from "@excalidraw/element";
 import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
@@ -9348,7 +9378,7 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
-          let newElement6 = newElementWith4(element, {
+          let newElement6 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
             strokeColor: elementStylesToCopyFrom?.strokeColor,
@@ -9364,7 +9394,7 @@ var actionPasteStyles = register({
           if (isTextElement3(newElement6)) {
             const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE3;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY3;
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               fontSize,
               fontFamily,
               textAlign: elementStylesToCopyFrom.textAlign || DEFAULT_TEXT_ALIGN,
@@ -9379,13 +9409,13 @@ var actionPasteStyles = register({
             redrawTextBoundingBox2(newElement6, container, app.scene);
           }
           if (newElement6.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead
             });
           }
           if (isFrameLikeElement4(element)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               roundness: null,
               backgroundColor: "transparent"
             });
@@ -9479,7 +9509,7 @@ var actionShortcuts = register({
 
 // actions/actionGroup.tsx
 import { getNonDeletedElements as getNonDeletedElements9 } from "@excalidraw/element";
-import { newElementWith as newElementWith5 } from "@excalidraw/element";
+import { newElementWith as newElementWith6 } from "@excalidraw/element";
 import { isBoundToContainer as isBoundToContainer3 } from "@excalidraw/element";
 import {
   frameAndChildrenSelectedTogether,
@@ -9583,7 +9613,7 @@ var actionGroup = register({
       if (!selectElementIds.get(element.id)) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: addToGroup(
           element.groupIds,
           newGroupId,
@@ -9660,7 +9690,7 @@ var actionUngroup = register({
       if (nextGroupIds.length === element.groupIds.length) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: nextGroupIds
       });
     });
@@ -10459,7 +10489,7 @@ import {
   isBindingEnabled as isBindingEnabled2
 } from "@excalidraw/element";
 import { getCommonBoundingBox } from "@excalidraw/element";
-import { newElementWith as newElementWith6 } from "@excalidraw/element";
+import { newElementWith as newElementWith7 } from "@excalidraw/element";
 import { deepCopyElement as deepCopyElement3 } from "@excalidraw/element";
 import { resizeMultipleElements } from "@excalidraw/element";
 import {
@@ -10545,7 +10575,7 @@ var flipElements = (selectedElements, elementsMap, appState, flipDirection, app)
   )) {
     return selectedElements.map((element) => {
       const _element = element;
-      return newElementWith6(_element, {
+      return newElementWith7(_element, {
         startArrowhead: _element.endArrowhead,
         endArrowhead: _element.startArrowhead
       });
@@ -11616,7 +11646,7 @@ var actionLink = register({
 import { KEYS as KEYS29, arrayToMap as arrayToMap11, randomId as randomId4 } from "@excalidraw/common";
 import {
   elementsAreInSameGroup,
-  newElementWith as newElementWith7,
+  newElementWith as newElementWith8,
   selectGroupsFromGivenElements
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction25 } from "@excalidraw/element";
@@ -11677,7 +11707,7 @@ var actionToggleElementLock = register({
           (groupId) => !appState.lockedMultiSelections[groupId]
         );
       }
-      return newElementWith7(element, {
+      return newElementWith8(element, {
         locked: nextLockState,
         // do not recreate the array unncessarily
         groupIds: nextGroupIds.length !== element.groupIds.length ? nextGroupIds : element.groupIds
@@ -11726,7 +11756,7 @@ var actionUnlockAllElements = register({
         const nextGroupIds = element.groupIds.filter(
           (gid) => !appState.lockedMultiSelections[gid]
         );
-        return newElementWith7(element, {
+        return newElementWith8(element, {
           locked: false,
           groupIds: (
             // do not recreate the array unncessarily
@@ -12842,7 +12872,8 @@ var exportToCanvas2 = ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return exportToCanvas(
@@ -12936,7 +12967,8 @@ var exportToSvg2 = async ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const exportAppState = {
     ...restoredAppState,
@@ -14893,7 +14925,7 @@ var LibraryUnit = memo(
       };
     }, [svg]);
     const [isHovered, setIsHovered] = useState15(false);
-    const isMobile = useDevice().editor.isMobile;
+    const isMobile2 = useDevice().editor.isMobile;
     const adder = isPending && /* @__PURE__ */ jsx63("div", { className: "library-unit__adder", children: PlusIcon });
     return /* @__PURE__ */ jsxs33(
       "div",
@@ -14933,7 +14965,7 @@ var LibraryUnit = memo(
             }
           ),
           adder,
-          id && elements && (isHovered || isMobile || selected) && /* @__PURE__ */ jsx63(
+          id && elements && (isHovered || isMobile2 || selected) && /* @__PURE__ */ jsx63(
             CheckboxItem,
             {
               checked: selected,
@@ -15766,8 +15798,20 @@ var SHAPES = [
     fillable: false
   }
 ];
-var findShapeByKey = (key) => {
-  const shape = SHAPES.find((shape2, index) => {
+var getToolbarTools = (app) => {
+  return app.defaultSelectionTool === "lasso" ? [
+    {
+      value: "lasso",
+      icon: SelectionIcon,
+      key: KEYS33.V,
+      numericKey: KEYS33["1"],
+      fillable: true
+    },
+    ...SHAPES.slice(1)
+  ] : SHAPES;
+};
+var findShapeByKey = (key, app) => {
+  const shape = getToolbarTools(app).find((shape2, index) => {
     return shape2.numericKey != null && key === shape2.numericKey.toString() || shape2.key && (typeof shape2.key === "string" ? shape2.key === key : shape2.key.includes(key));
   });
   return shape?.value || null;
@@ -15943,58 +15987,60 @@ var ShapesSwitcher = ({
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState21(false);
   const frameToolSelected = activeTool.type === "frame";
   const laserToolSelected = activeTool.type === "laser";
-  const lassoToolSelected = activeTool.type === "lasso";
+  const lassoToolSelected = activeTool.type === "lasso" && app.defaultSelectionTool !== "lasso";
   const embeddableToolSelected = activeTool.type === "embeddable";
   const { TTDDialogTriggerTunnel } = useTunnels();
   return /* @__PURE__ */ jsxs39(Fragment11, { children: [
-    SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      if (UIOptions.tools?.[value] === false) {
-        return null;
-      }
-      const label = t(`toolBar.${value}`);
-      const letter = key && capitalizeString(typeof key === "string" ? key : key[0]);
-      const shortcut = letter ? `${letter} ${t("helpDialog.or")} ${numericKey}` : `${numericKey}`;
-      return /* @__PURE__ */ jsx71(
-        ToolButton,
-        {
-          className: clsx31("Shape", { fillable }),
-          type: "radio",
-          icon,
-          checked: activeTool.type === value,
-          name: "editor-current-shape",
-          title: `${capitalizeString(label)} \u2014 ${shortcut}`,
-          keyBindingLabel: numericKey || letter,
-          "aria-label": capitalizeString(label),
-          "aria-keyshortcuts": shortcut,
-          "data-testid": `toolbar-${value}`,
-          onPointerDown: ({ pointerType }) => {
-            if (!appState.penDetected && pointerType === "pen") {
-              app.togglePenMode(true);
-            }
-            if (value === "selection") {
-              if (appState.activeTool.type === "selection") {
-                app.setActiveTool({ type: "lasso" });
+    getToolbarTools(app).map(
+      ({ value, icon, key, numericKey, fillable }, index) => {
+        if (UIOptions.tools?.[value] === false) {
+          return null;
+        }
+        const label = t(`toolBar.${value}`);
+        const letter = key && capitalizeString(typeof key === "string" ? key : key[0]);
+        const shortcut = letter ? `${letter} ${t("helpDialog.or")} ${numericKey}` : `${numericKey}`;
+        return /* @__PURE__ */ jsx71(
+          ToolButton,
+          {
+            className: clsx31("Shape", { fillable }),
+            type: "radio",
+            icon,
+            checked: activeTool.type === value,
+            name: "editor-current-shape",
+            title: `${capitalizeString(label)} \u2014 ${shortcut}`,
+            keyBindingLabel: numericKey || letter,
+            "aria-label": capitalizeString(label),
+            "aria-keyshortcuts": shortcut,
+            "data-testid": `toolbar-${value}`,
+            onPointerDown: ({ pointerType }) => {
+              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) {
+                trackEvent("toolbar", value, "ui");
+              }
+              if (value === "image") {
+                app.setActiveTool({
+                  type: value
+                });
               } else {
-                app.setActiveTool({ type: "selection" });
+                app.setActiveTool({ type: value });
               }
             }
           },
-          onChange: ({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
-            if (value === "image") {
-              app.setActiveTool({
-                type: value
-              });
-            } else {
-              app.setActiveTool({ type: value });
-            }
-          }
-        },
-        value
-      );
-    }),
+          value
+        );
+      }
+    ),
     /* @__PURE__ */ jsx71("div", { className: "App-toolbar__divider" }),
     /* @__PURE__ */ jsxs39(DropdownMenu_default, { open: isExtraToolsMenuOpen, children: [
       /* @__PURE__ */ jsx71(
@@ -16050,7 +16096,7 @@ var ShapesSwitcher = ({
                 children: t("toolBar.laser")
               }
             ),
-            /* @__PURE__ */ jsx71(
+            app.defaultSelectionTool !== "lasso" && /* @__PURE__ */ jsx71(
               DropdownMenu_default.Item,
               {
                 onSelect: () => app.setActiveTool({ type: "lasso" }),
@@ -18225,7 +18271,7 @@ var generateElbowArrowShape = (points, radius) => {
 };
 
 // ../element/src/mutateElement.ts
-var newElementWith8 = (element, updates, force = false) => {
+var newElementWith9 = (element, updates, force = false) => {
   let didChange = false;
   for (const key in updates) {
     const value = updates[key];
@@ -18354,7 +18400,7 @@ var actionTogglePolygon = register({
         if (!targetElementsMap.has(element.id) || !isLineElement4(element)) {
           return element;
         }
-        return newElementWith8(element, {
+        return newElementWith9(element, {
           backgroundColor: nextPolygonState ? element.backgroundColor : "transparent",
           ...toggleLinePolygonState3(element, nextPolygonState)
         });
@@ -18946,7 +18992,7 @@ var createRedoAction = (history) => ({
 
 // actions/actionTextAutoResize.ts
 import { getFontString as getFontString6 } from "@excalidraw/common";
-import { newElementWith as newElementWith9 } from "@excalidraw/element";
+import { newElementWith as newElementWith10 } from "@excalidraw/element";
 import { measureText as measureText4 } from "@excalidraw/element";
 import { isTextElement as isTextElement9 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction34 } from "@excalidraw/element";
@@ -18970,7 +19016,7 @@ var actionTextAutoResize = register({
             getFontString6(element),
             element.lineHeight
           );
-          return newElementWith9(element, {
+          return newElementWith10(element, {
             autoResize: true,
             width: metrics.width,
             height: metrics.height,
@@ -19260,7 +19306,8 @@ var isSnappingEnabled = ({
   selectedElements
 }) => {
   if (event) {
-    return app.state.activeTool.type !== "lasso" && (app.state.objectsSnapModeEnabled && !event[KEYS42.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS42.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS42.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS42.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -23543,7 +23590,7 @@ import { isNodeInFlowchart } from "@excalidraw/element";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var getHints = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
@@ -23606,7 +23653,7 @@ var getHints = ({
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
       return t("hints.disableSnapping");
     }
-    if (!selectedElements.length && !isMobile) {
+    if (!selectedElements.length && !isMobile2) {
       return [t("hints.canvasPanning")];
     }
     if (selectedElements.length === 1) {
@@ -23634,13 +23681,13 @@ var getHints = ({
 };
 var HintViewer = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
   const hints = getHints({
     appState,
-    isMobile,
+    isMobile: isMobile2,
     device,
     app
   });
@@ -31183,6 +31230,7 @@ var useExcalidrawSetAppState = () => useContext3(ExcalidrawSetAppStateContext);
 var useExcalidrawActionManager = () => useContext3(ExcalidrawActionManagerContext);
 var didTapTwice = false;
 var tappedTwiceTimer = 0;
+var firstTapPosition = null;
 var isHoldingSpace = false;
 var isPanning = false;
 var isDraggingScrollBar = false;
@@ -31258,6 +31306,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "onScrollChangeEmitter", new Emitter3());
     __publicField(this, "missingPointerEventCleanupEmitter", new Emitter3());
     __publicField(this, "onRemoveEventListenersEmitter", new Emitter3());
+    __publicField(this, "defaultSelectionTool", "selection");
     __publicField(this, "updateEditorAtom", (atom2, ...args) => {
       const result = editorJotaiStore.set(atom2, ...args);
       this.triggerRender();
@@ -31600,7 +31649,7 @@ var App = class _App extends React43.Component {
             this.updateScene({
               elements: this.scene.getElementsIncludingDeleted().map((el) => {
                 if (this.state.selectedElementIds[el.id]) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     [shouldUpdateStrokeColor ? "strokeColor" : "backgroundColor"]: color
                   });
                 }
@@ -31764,7 +31813,11 @@ var App = class _App extends React43.Component {
           }
         };
       }
-      const scene = restore(initialData, null, null, { repairBindings: true });
+      const scene = restore(initialData, null, null, {
+        repairBindings: true,
+        deleteInvisibleElements: true
+      });
+      const activeTool = scene.appState.activeTool;
       scene.appState = {
         ...scene.appState,
         theme: this.props.theme || scene.appState.theme,
@@ -31773,7 +31826,10 @@ var App = class _App extends React43.Component {
         // update the state outside of initialData (e.g. when loading the app
         // with a library install link, which should auto-open the library)
         openSidebar: scene.appState?.openSidebar || this.state.openSidebar,
-        activeTool: scene.appState.activeTool.type === "image" ? { ...scene.appState.activeTool, type: "selection" } : scene.appState.activeTool,
+        activeTool: activeTool.type === "image" || activeTool.type === "lasso" || activeTool.type === "selection" ? {
+          ...activeTool,
+          type: this.defaultSelectionTool
+        } : scene.appState.activeTool,
         isLoading: false,
         toast: this.state.toast
       };
@@ -31803,6 +31859,12 @@ var App = class _App extends React43.Component {
         this.scrollToContent(window.location.href, { animate: false });
       }
     });
+    __publicField(this, "isMobileOrTablet", () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const hasCoarsePointer = "matchMedia" in window && window?.matchMedia("(pointer: coarse)")?.matches;
+      const isTouchMobile = hasTouch && hasCoarsePointer;
+      return isMobile || isTouchMobile;
+    });
     __publicField(this, "isMobileBreakpoint", (width, height) => {
       return width < MQ_MAX_WIDTH_PORTRAIT || height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE;
     });
@@ -31916,6 +31978,12 @@ var App = class _App extends React43.Component {
       }
       if (!didTapTwice) {
         didTapTwice = true;
+        if (event.touches.length === 1) {
+          firstTapPosition = {
+            x: event.touches[0].clientX,
+            y: event.touches[0].clientY
+          };
+        }
         clearTimeout(tappedTwiceTimer);
         tappedTwiceTimer = window.setTimeout(
           _App.resetTapTwice,
@@ -31923,12 +31991,20 @@ var App = class _App extends React43.Component {
         );
         return;
       }
-      if (didTapTwice && event.touches.length === 1) {
+      if (didTapTwice && event.touches.length === 1 && firstTapPosition) {
         const touch = event.touches[0];
-        this.handleCanvasDoubleClick({
-          clientX: touch.clientX,
-          clientY: touch.clientY
-        });
+        const distance3 = pointDistance8(
+          pointFrom28(touch.clientX, touch.clientY),
+          pointFrom28(firstTapPosition.x, firstTapPosition.y)
+        );
+        if (distance3 <= DOUBLE_TAP_POSITION_THRESHOLD) {
+          this.lassoTrail.endPath();
+          this.deselectElements();
+          this.handleCanvasDoubleClick({
+            clientX: touch.clientX,
+            clientY: touch.clientY
+          });
+        }
         didTapTwice = false;
         clearTimeout(tappedTwiceTimer);
       }
@@ -32025,7 +32101,7 @@ var App = class _App extends React43.Component {
           this.addElementsFromPasteOrLibrary({
             elements,
             files: data.files || null,
-            position: "cursor",
+            position: this.isMobileOrTablet() ? "center" : "cursor",
             retainSeed: isPlainPaste
           });
         } else if (data.text) {
@@ -32039,7 +32115,7 @@ var App = class _App extends React43.Component {
               this.addElementsFromPasteOrLibrary({
                 elements,
                 files,
-                position: "cursor"
+                position: this.isMobileOrTablet() ? "center" : "cursor"
               });
               return;
             } catch (err) {
@@ -32079,12 +32155,14 @@ var App = class _App extends React43.Component {
           }
           this.addTextFromPaste(data.text, isPlainPaste);
         }
-        this.setActiveTool({ type: "selection" });
+        this.setActiveTool({ type: this.defaultSelectionTool }, true);
         event?.preventDefault();
       }
     ));
     __publicField(this, "addElementsFromPasteOrLibrary", (opts) => {
-      const elements = restoreElements(opts.elements, null, void 0);
+      const elements = restoreElements(opts.elements, null, {
+        deleteInvisibleElements: true
+      });
       const [minX, minY, maxX, maxY] = getCommonBounds12(elements);
       const elementsCenterX = distance2(minX, maxX) / 2;
       const elementsCenterY = distance2(minY, maxY) / 2;
@@ -32100,7 +32178,7 @@ var App = class _App extends React43.Component {
       const { duplicatedElements } = duplicateElements3({
         type: "everything",
         elements: elements.map((element) => {
-          return newElementWith10(element, {
+          return newElementWith11(element, {
             x: element.x + gridX - minX,
             y: element.y + gridY - minY
           });
@@ -32181,7 +32259,7 @@ var App = class _App extends React43.Component {
           }
         }
       );
-      this.setActiveTool({ type: "selection" });
+      this.setActiveTool({ type: this.defaultSelectionTool }, true);
       if (opts.fitToContent) {
         this.scrollToContent(duplicatedElements, {
           fitToContent: true,
@@ -32212,7 +32290,7 @@ var App = class _App extends React43.Component {
             ...prevState.activeTool,
             ...updateActiveTool7(
               this.state,
-              prevState.activeTool.locked ? { type: "selection" } : prevState.activeTool
+              prevState.activeTool.locked ? { type: this.defaultSelectionTool } : prevState.activeTool
             ),
             locked: !prevState.activeTool.locked
           }
@@ -32447,6 +32525,19 @@ var App = class _App extends React43.Component {
         }
       }
     ));
+    __publicField(this, "applyDeltas", (deltas, options) => {
+      const aggregatedDelta = StoreDelta2.squash(...deltas);
+      const nextAppState = { ...this.state };
+      const nextElements = new Map(
+        this.scene.getElementsMapIncludingDeleted()
+      );
+      return StoreDelta2.applyTo(
+        aggregatedDelta,
+        nextElements,
+        nextAppState,
+        options
+      );
+    });
     __publicField(this, "mutateElement", (element, updates, informMutation = true) => {
       return this.scene.mutateElement(element, updates, {
         informMutation,
@@ -32814,7 +32905,7 @@ var App = class _App extends React43.Component {
             }
           }
         } else if (!event.ctrlKey && !event.altKey && !event.metaKey && !this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged) {
-          const shape = findShapeByKey(event.key);
+          const shape = findShapeByKey(event.key, this);
           if (shape) {
             if (this.state.activeTool.type !== shape) {
               trackEvent(
@@ -32871,7 +32962,7 @@ var App = class _App extends React43.Component {
         }
         if (event.key === KEYS52.K && !event.altKey && !event[KEYS52.CTRL_OR_CMD]) {
           if (this.state.activeTool.type === "laser") {
-            this.setActiveTool({ type: "selection" });
+            this.setActiveTool({ type: this.defaultSelectionTool });
           } else {
             this.setActiveTool({ type: "laser" });
           }
@@ -33246,7 +33337,7 @@ var App = class _App extends React43.Component {
       if (this.state.multiElement) {
         return;
       }
-      if (this.state.activeTool.type !== "selection") {
+      if (this.state.activeTool.type !== this.defaultSelectionTool) {
         return;
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
@@ -33468,7 +33559,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "getTopLayerFrameAtSceneCoords", (sceneCoords) => {
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const frames = this.scene.getNonDeletedFramesLikes().filter(
-        (frame) => isCursorInFrame(sceneCoords, frame, elementsMap)
+        (frame) => !frame.locked && isCursorInFrame(sceneCoords, frame, elementsMap)
       );
       return frames.length ? frames[frames.length - 1] : null;
     });
@@ -33682,7 +33773,7 @@ var App = class _App extends React43.Component {
         return;
       }
       const hasDeselectedButton = Boolean(event.buttons);
-      if (hasDeselectedButton || this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") {
+      if (hasDeselectedButton || this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") {
         return;
       }
       const elements = this.scene.getNonDeletedElements();
@@ -33796,7 +33887,9 @@ var App = class _App extends React43.Component {
               });
             } else if (!hitElement || // Ebow arrows can only be moved when unconnected
             !isElbowArrow11(hitElement) || !(hitElement.startBinding || hitElement.endBinding)) {
-              setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+              if (this.state.activeTool.type !== "lasso" || selectedElements.length > 0) {
+                setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+              }
               if (this.state.activeEmbeddable?.state === "hover") {
                 this.setState({ activeEmbeddable: null });
               }
@@ -33994,11 +34087,76 @@ var App = class _App extends React43.Component {
         return;
       }
       if (this.state.activeTool.type === "lasso") {
-        this.lassoTrail.startPath(
-          pointerDownState.origin.x,
-          pointerDownState.origin.y,
-          event.shiftKey
-        );
+        const hitSelectedElement = pointerDownState.hit.element && this.isASelectedElement(pointerDownState.hit.element);
+        const isMobileOrTablet = this.isMobileOrTablet();
+        if (!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements && !pointerDownState.resize.handleType && !hitSelectedElement) {
+          this.lassoTrail.startPath(
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            event.shiftKey
+          );
+          pointerDownState.drag.blockDragging = !isMobileOrTablet;
+        }
+        if (isMobileOrTablet && pointerDownState.hit.element && !hitSelectedElement) {
+          this.setState((prevState) => {
+            const nextSelectedElementIds = {
+              ...prevState.selectedElementIds,
+              [pointerDownState.hit.element.id]: true
+            };
+            const previouslySelectedElements = [];
+            Object.keys(prevState.selectedElementIds).forEach((id) => {
+              const element = this.scene.getElement(id);
+              element && previouslySelectedElements.push(element);
+            });
+            const hitElement = pointerDownState.hit.element;
+            if (isFrameLikeElement15(hitElement)) {
+              getFrameChildren6(previouslySelectedElements, hitElement.id).forEach(
+                (element) => {
+                  delete nextSelectedElementIds[element.id];
+                }
+              );
+            } else if (hitElement.frameId) {
+              if (nextSelectedElementIds[hitElement.frameId]) {
+                delete nextSelectedElementIds[hitElement.id];
+              }
+            } else {
+              const groupIds = hitElement.groupIds;
+              const framesInGroups = new Set(
+                groupIds.flatMap(
+                  (gid) => getElementsInGroup9(this.scene.getNonDeletedElements(), gid)
+                ).filter((element) => isFrameLikeElement15(element)).map((frame) => frame.id)
+              );
+              if (framesInGroups.size > 0) {
+                previouslySelectedElements.forEach((element) => {
+                  if (element.frameId && framesInGroups.has(element.frameId)) {
+                    delete nextSelectedElementIds[element.id];
+                    element.groupIds.flatMap(
+                      (gid) => getElementsInGroup9(
+                        this.scene.getNonDeletedElements(),
+                        gid
+                      )
+                    ).forEach((element2) => {
+                      delete nextSelectedElementIds[element2.id];
+                    });
+                  }
+                });
+              }
+            }
+            return {
+              ...selectGroupsForSelectedElements6(
+                {
+                  editingGroupId: prevState.editingGroupId,
+                  selectedElementIds: nextSelectedElementIds
+                },
+                this.scene.getNonDeletedElements(),
+                prevState,
+                this
+              ),
+              showHyperlinkPopup: hitElement.link || isEmbeddableElement4(hitElement) ? "info" : false
+            };
+          });
+          pointerDownState.hit.wasAddedToSelection = true;
+        }
       } else if (this.state.activeTool.type === "text") {
         this.handleTextOnPointerDown(event, pointerDownState);
       } else if (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line") {
@@ -34225,7 +34383,7 @@ var App = class _App extends React43.Component {
      * @returns whether the pointer event has been completely handled
      */
     __publicField(this, "handleSelectionOnPointerDown", (event, pointerDownState) => {
-      if (this.state.activeTool.type === "selection") {
+      if (this.state.activeTool.type === "selection" || this.state.activeTool.type === "lasso") {
         const elements = this.scene.getNonDeletedElements();
         const elementsMap = this.scene.getNonDeletedElementsMap();
         const selectedElements = this.scene.getSelectedElements(this.state);
@@ -34375,6 +34533,15 @@ var App = class _App extends React43.Component {
           } else if (hitElement != null) {
             if (event[KEYS52.CTRL_OR_CMD]) {
               if (event.altKey) {
+                if (this.state.openDialog?.name === "elementLinkSelector") {
+                  this.setOpenDialog(null);
+                }
+                this.lassoTrail.startPath(
+                  pointerDownState.origin.x,
+                  pointerDownState.origin.y,
+                  event.shiftKey
+                );
+                this.setActiveTool({ type: "lasso", fromSelection: true });
                 return false;
               }
               if (!this.state.selectedElementIds[hitElement.id]) {
@@ -34501,7 +34668,9 @@ var App = class _App extends React43.Component {
       resetCursor(this.interactiveCanvas);
       if (!this.state.activeTool.locked) {
         this.setState({
-          activeTool: updateActiveTool7(this.state, { type: "selection" })
+          activeTool: updateActiveTool7(this.state, {
+            type: this.defaultSelectionTool
+          })
         });
       }
     });
@@ -34867,7 +35036,7 @@ var App = class _App extends React43.Component {
       const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
         if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || isBoundToContainer8(ele) && this.elementsPendingErasure.has(ele.containerId)) {
           didChange = true;
-          return newElementWith10(ele, { isDeleted: true });
+          return newElementWith11(ele, { isDeleted: true });
         }
         return ele;
       });
@@ -34976,7 +35145,7 @@ var App = class _App extends React43.Component {
      */
     __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId) => {
       const latestImageElement = this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;
-      return newElementWith10(
+      return newElementWith11(
         latestImageElement,
         {
           fileId
@@ -35058,7 +35227,9 @@ var App = class _App extends React43.Component {
         this.setState(
           {
             newElement: null,
-            activeTool: updateActiveTool7(this.state, { type: "selection" })
+            activeTool: updateActiveTool7(this.state, {
+              type: this.defaultSelectionTool
+            })
           },
           () => {
             this.actionManager.executeAction(actionFinalize);
@@ -35095,9 +35266,9 @@ var App = class _App extends React43.Component {
       if (erroredFiles.size) {
         this.store.scheduleAction(CaptureUpdateAction37.NEVER);
         this.scene.replaceAllElements(
-          elements.map((element) => {
+          this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement3(element) && erroredFiles.has(element.fileId)) {
-              return newElementWith10(element, {
+              return newElementWith11(element, {
                 status: "error"
               });
             }
@@ -35312,7 +35483,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "handleCanvasContextMenu", (event) => {
       event.preventDefault();
       if (("pointerType" in event.nativeEvent && event.nativeEvent.pointerType === "touch" || "pointerType" in event.nativeEvent && event.nativeEvent.pointerType === "pen" && // always allow if user uses a pen secondary button
-      event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== "selection") {
+      event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== this.defaultSelectionTool) {
         return;
       }
       const { x, y } = viewportCoordsToSceneCoords4(event, this.state);
@@ -35801,6 +35972,7 @@ var App = class _App extends React43.Component {
       this.setState({ ...this.getCanvasOffsets() });
     });
     const defaultAppState = getDefaultAppState();
+    this.defaultSelectionTool = this.isMobileOrTablet() ? "lasso" : "selection";
     const {
       excalidrawAPI,
       viewModeEnabled = false,
@@ -35841,6 +36013,7 @@ var App = class _App extends React43.Component {
     if (excalidrawAPI) {
       const api = {
         updateScene: this.updateScene,
+        applyDeltas: this.applyDeltas,
         mutateElement: this.mutateElement,
         updateLibrary: this.library.updateLibrary,
         addFiles: this.addFiles,
@@ -36320,7 +36493,7 @@ var App = class _App extends React43.Component {
                             showExitZenModeBtn: typeof this.props?.zenModeEnabled === "undefined" && this.state.zenModeEnabled,
                             UIOptions: this.props.UIOptions,
                             onExportImage: this.onExportImage,
-                            renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === "selection" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,
+                            renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === this.defaultSelectionTool && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,
                             app: this,
                             isCollaborating: this.props.isCollaborating,
                             generateLinkForSelection: this.props.generateLinkForSelection,
@@ -36962,6 +37135,7 @@ var App = class _App extends React43.Component {
   }
   static resetTapTwice() {
     didTapTwice = false;
+    firstTapPosition = null;
   }
   // TODO rewrite this to paste both text & images at the same time if
   // pasted data contains both
@@ -37134,7 +37308,7 @@ var App = class _App extends React43.Component {
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement19(_element)) {
-            return newElementWith10(_element, {
+            return newElementWith11(_element, {
               originalText: nextOriginalText,
               isDeleted: isDeleted ?? _element.isDeleted,
               // returns (wrapped) text and new dimensions
@@ -37174,13 +37348,7 @@ var App = class _App extends React43.Component {
       }),
       onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
         const isDeleted = !nextOriginalText.trim();
-        if (isDeleted && !isExistingElement) {
-          this.scene.replaceAllElements(
-            this.scene.getElementsIncludingDeleted().filter((x) => x.id !== element.id)
-          );
-        } else {
-          updateElement(nextOriginalText, isDeleted);
-        }
+        updateElement(nextOriginalText, isDeleted);
         if (!isDeleted && viaKeyboard) {
           const elementIdToSelect = element.containerId ? element.containerId : element.id;
           flushSync3(() => {
@@ -37200,7 +37368,9 @@ var App = class _App extends React43.Component {
             element
           ]);
         }
-        this.store.scheduleCapture();
+        if (!isDeleted || isExistingElement) {
+          this.store.scheduleCapture();
+        }
         flushSync3(() => {
           this.setState({
             newElement: null,
@@ -37399,7 +37569,9 @@ var App = class _App extends React43.Component {
             // Ebow arrows can only be moved when unconnected
             !isElbowArrow11(element) || !(element.startBinding || element.endBinding)
           ) {
-            setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+            if (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) {
+              setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+            }
           }
         }
       } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
@@ -37407,7 +37579,9 @@ var App = class _App extends React43.Component {
           // Ebow arrows can only be moved when unconnected
           !isElbowArrow11(element) || !(element.startBinding || element.endBinding)
         ) {
-          setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+          if (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) {
+            setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+          }
         }
       }
       if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {
@@ -37492,7 +37666,8 @@ var App = class _App extends React43.Component {
       drag: {
         hasOccurred: false,
         offset: null,
-        origin: { ...origin }
+        origin: { ...origin },
+        blockDragging: false
       },
       eventListeners: {
         onMove: null,
@@ -37758,9 +37933,9 @@ var App = class _App extends React43.Component {
         (element) => this.isASelectedElement(element)
       );
       const isSelectingPointsInLineEditor = this.state.selectedLinearElement?.isEditing && event.shiftKey && this.state.selectedLinearElement.elementId === pointerDownState.hit.element?.id;
-      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && this.state.activeTool.type !== "lasso") {
+      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && !pointerDownState.drag.blockDragging) {
         const selectedElements = this.scene.getSelectedElements(this.state);
-        if (selectedElements.every((element) => element.locked)) {
+        if (selectedElements.length > 0 && selectedElements.every((element) => element.locked)) {
           return;
         }
         const selectedElementsHasAFrame = selectedElements.find(
@@ -37774,6 +37949,12 @@ var App = class _App extends React43.Component {
           });
         }
         pointerDownState.drag.hasOccurred = true;
+        if (this.state.activeTool.type === "lasso" && this.lassoTrail.hasCurrentTrail && !(this.isMobileOrTablet() && pointerDownState.hit.element) && !this.state.activeTool.fromSelection) {
+          return;
+        }
+        if (this.state.activeTool.type === "lasso" && selectedElements.length > 0 && pointerDownState.drag.hasOccurred && !this.state.activeTool.fromSelection) {
+          this.lassoTrail.endPath();
+        }
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active") {
           const dragOffset = {
             x: pointerCoords.x - pointerDownState.drag.origin.x,
@@ -37950,7 +38131,7 @@ var App = class _App extends React43.Component {
               if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     x: origEl.x,
                     y: origEl.y
                   });
@@ -38219,6 +38400,7 @@ var App = class _App extends React43.Component {
   onPointerUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((childEvent) => {
       this.removePointer(childEvent);
+      pointerDownState.drag.blockDragging = false;
       if (pointerDownState.eventListeners.onMove) {
         pointerDownState.eventListeners.onMove.flush();
       }
@@ -38433,7 +38615,7 @@ var App = class _App extends React43.Component {
             this.setState((prevState) => ({
               newElement: null,
               activeTool: updateActiveTool7(this.state, {
-                type: "selection"
+                type: this.defaultSelectionTool
               }),
               selectedElementIds: makeNextSelectedElementIds2(
                 {
@@ -38870,7 +39052,9 @@ var App = class _App extends React43.Component {
         this.setState({
           newElement: null,
           suggestedBindings: [],
-          activeTool: updateActiveTool7(this.state, { type: "selection" })
+          activeTool: updateActiveTool7(this.state, {
+            type: this.defaultSelectionTool
+          })
         });
       } else {
         this.setState({
@@ -39401,7 +39585,7 @@ import {
 } from "@excalidraw/common";
 import {
   mutateElement as mutateElement2,
-  newElementWith as newElementWith11,
+  newElementWith as newElementWith12,
   bumpVersion
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction38 } from "@excalidraw/element";
@@ -39652,12 +39836,13 @@ export {
   loadSceneOrLibraryFromBlob,
   mergeLibraryItems,
   mutateElement2 as mutateElement,
-  newElementWith11 as newElementWith,
+  newElementWith12 as newElementWith,
   normalizeLink4 as normalizeLink,
   parseLibraryTokensFromUrl,
   reconcileElements,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   sceneCoordsToViewportCoords2 as sceneCoordsToViewportCoords,