@excalidraw/excalidraw 0.18.0-de715913e → 0.18.0-f29e9df

package/dist/dev/index.js

@@ -189,6 +189,7 @@ import {
   randomInteger as randomInteger4,
   CLASSES as CLASSES7,
   Emitter as Emitter3,
+  isMobile,
   MINIMUM_ARROW_SIZE
 } from "@excalidraw/common";
 import {
@@ -3121,7 +3122,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
@@ -7377,7 +7380,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
     };
@@ -7676,12 +7679,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
       });
@@ -7709,6 +7712,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") {
@@ -7992,13 +7998,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 {
@@ -14918,7 +14924,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",
@@ -14958,7 +14964,7 @@ var LibraryUnit = memo(
             }
           ),
           adder,
-          id && elements && (isHovered || isMobile || selected) && /* @__PURE__ */ jsx63(
+          id && elements && (isHovered || isMobile2 || selected) && /* @__PURE__ */ jsx63(
             CheckboxItem,
             {
               checked: selected,
@@ -15791,8 +15797,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;
@@ -15968,58 +15986,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(
@@ -16075,7 +16095,7 @@ var ShapesSwitcher = ({
                 children: t("toolBar.laser")
               }
             ),
-            /* @__PURE__ */ jsx71(
+            app.defaultSelectionTool !== "lasso" && /* @__PURE__ */ jsx71(
               DropdownMenu_default.Item,
               {
                 onSelect: () => app.setActiveTool({ type: "lasso" }),
@@ -19285,7 +19305,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;
@@ -23568,7 +23589,7 @@ import { isNodeInFlowchart } from "@excalidraw/element";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var getHints = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
@@ -23631,7 +23652,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) {
@@ -23659,13 +23680,13 @@ var getHints = ({
 };
 var HintViewer = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
   const hints = getHints({
     appState,
-    isMobile,
+    isMobile: isMobile2,
     device,
     app
   });
@@ -31283,6 +31304,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();
@@ -31793,6 +31815,7 @@ var App = class _App extends React43.Component {
         repairBindings: true,
         deleteInvisibleElements: true
       });
+      const activeTool = scene.appState.activeTool;
       scene.appState = {
         ...scene.appState,
         theme: this.props.theme || scene.appState.theme,
@@ -31801,7 +31824,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
       };
@@ -31831,6 +31857,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;
     });
@@ -32053,7 +32085,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) {
@@ -32067,7 +32099,7 @@ var App = class _App extends React43.Component {
               this.addElementsFromPasteOrLibrary({
                 elements,
                 files,
-                position: "cursor"
+                position: this.isMobileOrTablet() ? "center" : "cursor"
               });
               return;
             } catch (err) {
@@ -32107,7 +32139,7 @@ var App = class _App extends React43.Component {
           }
           this.addTextFromPaste(data.text, isPlainPaste);
         }
-        this.setActiveTool({ type: "selection" });
+        this.setActiveTool({ type: this.defaultSelectionTool }, true);
         event?.preventDefault();
       }
     ));
@@ -32211,7 +32243,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,
@@ -32242,7 +32274,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
           }
@@ -32478,19 +32510,17 @@ var App = class _App extends React43.Component {
       }
     ));
     __publicField(this, "applyDeltas", (deltas, options) => {
-      if (!deltas.length) {
-        throw new Error("No deltas were passed in!");
-      }
+      const aggregatedDelta = StoreDelta2.squash(...deltas);
+      const nextAppState = { ...this.state };
       const nextElements = new Map(
         this.scene.getElementsMapIncludingDeleted()
       );
-      const nextAppState = { ...this.state };
-      const [head, ...tail] = deltas;
-      const mainDelta = StoreDelta2.load(head);
-      for (const delta of tail) {
-        mainDelta.squash(delta);
-      }
-      return StoreDelta2.applyTo(mainDelta, nextElements, nextAppState, options);
+      return StoreDelta2.applyTo(
+        aggregatedDelta,
+        nextElements,
+        nextAppState,
+        options
+      );
     });
     __publicField(this, "mutateElement", (element, updates, informMutation = true) => {
       return this.scene.mutateElement(element, updates, {
@@ -32859,7 +32889,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(
@@ -32916,7 +32946,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" });
           }
@@ -33291,7 +33321,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);
@@ -33727,7 +33757,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();
@@ -33841,7 +33871,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 });
               }
@@ -34039,11 +34071,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") {
@@ -34270,7 +34367,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);
@@ -34420,6 +34517,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]) {
@@ -34546,7 +34652,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
+          })
         });
       }
     });
@@ -35103,7 +35211,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);
@@ -35140,7 +35250,7 @@ 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 newElementWith11(element, {
                 status: "error"
@@ -35357,7 +35467,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);
@@ -35846,6 +35956,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,
@@ -36366,7 +36477,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,
@@ -37441,7 +37552,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)) {
@@ -37449,7 +37562,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) {
@@ -37534,7 +37649,8 @@ var App = class _App extends React43.Component {
       drag: {
         hasOccurred: false,
         offset: null,
-        origin: { ...origin }
+        origin: { ...origin },
+        blockDragging: false
       },
       eventListeners: {
         onMove: null,
@@ -37800,9 +37916,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(
@@ -37816,6 +37932,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,
@@ -38261,6 +38383,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();
       }
@@ -38475,7 +38598,7 @@ var App = class _App extends React43.Component {
             this.setState((prevState) => ({
               newElement: null,
               activeTool: updateActiveTool7(this.state, {
-                type: "selection"
+                type: this.defaultSelectionTool
               }),
               selectedElementIds: makeNextSelectedElementIds2(
                 {
@@ -38912,7 +39035,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({