@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-a38e82f

package/dist/excalidraw/components/App.js

@@ -11,11 +11,11 @@ import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard, } from "../clipboard";
-import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_READY_TO_ERASE_OPACITY, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, } from "../constants";
+import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, } from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
-import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, hitTest, isHittingElementBoundingBoxWithoutHittingElement, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, textWysiwyg, transformElements, updateTextElement, redrawTextBoundingBox, } from "../element";
+import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, hitTest, isHittingElementBoundingBoxWithoutHittingElement, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, transformElements, updateTextElement, redrawTextBoundingBox, } from "../element";
 import { bindOrUnbindLinearElement, bindOrUnbindSelectedElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getEligibleElementsForBinding, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, unbindLinearElements, updateBoundElements, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
@@ -28,12 +28,12 @@ import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
 import { CODES, shouldResizeFromCenter, shouldMaintainAspectRatio, shouldRotateWithDiscreteAngle, isArrowKey, KEYS, } from "../keys";
 import { isElementInViewport } from "../element/sizeHelpers";
 import { distance2d, getCornerRadius, getGridPoint, isPathALoop, } from "../math";
-import { calculateScrollCenter, getElementsAtPosition, getElementsWithinSelection, getNormalizedZoom, getSelectedElements, hasBackground, isOverScrollBars, isSomeElementSelected, } from "../scene";
+import { calculateScrollCenter, getElementsAtPosition, getElementsWithinSelection, getNormalizedZoom, getSelectedElements, hasBackground, isSomeElementSelected, } from "../scene";
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
 import { findShapeByKey } from "../shapes";
-import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, withBatchedUpdates, wrapEvent, withBatchedUpdatesThrottled, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, } from "../utils";
-import { createSrcDoc, embeddableURLValidator, extractSrc, getEmbedLink, } from "../element/embeddable";
+import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, } from "../utils";
+import { createSrcDoc, embeddableURLValidator, maybeParseEmbedSrc, getEmbedLink, } from "../element/embeddable";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR, } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
@@ -44,12 +44,12 @@ import throttle from "lodash.throttle";
 import { fileOpen } from "../data/filesystem";
 import { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getDefaultLineHeight, getLineHeightInPx, getTextBindableContainerAtPosition, isMeasureTextSupported, isValidTextContainer, } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
-import { showHyperlinkTooltip, hideHyperlinkToolip, Hyperlink, isPointHittingLink, isPointHittingLinkIcon, } from "../element/Hyperlink";
+import { showHyperlinkTooltip, hideHyperlinkToolip, Hyperlink, } from "../components/hyperlink/Hyperlink";
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
 import { Fonts } from "../scene/Fonts";
-import { getFrameChildren, isCursorInFrame, bindElementsToFramesAfterDuplication, addElementsToFrame, replaceAllElementsInFrame, removeElementsFromFrame, getElementsInResizingFrame, getElementsInNewFrame, getContainingFrame, elementOverlapsWithFrame, updateFrameMembershipOfSelectedElements, isElementInFrame, getFrameLikeTitle, } from "../frame";
+import { getFrameChildren, isCursorInFrame, bindElementsToFramesAfterDuplication, addElementsToFrame, replaceAllElementsInFrame, removeElementsFromFrame, getElementsInResizingFrame, getElementsInNewFrame, getContainingFrame, elementOverlapsWithFrame, updateFrameMembershipOfSelectedElements, isElementInFrame, getFrameLikeTitle, getElementsOverlappingFrame, filterElementsEligibleAsFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, makeNextSelectedElementIds, } from "../scene/selection";
 import { actionPaste } from "../actions/actionClipboard";
 import { actionRemoveAllElementsFromFrame, actionSelectAllElementsInFrame, } from "../actions/actionFrame";
@@ -66,18 +66,25 @@ import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
-import { LaserToolOverlay } from "./LaserTool/LaserTool";
-import { LaserPathManager } from "./LaserTool/LaserPathManager";
+import { SVGLayer } from "./SVGLayer";
 import { setEraserCursor, setCursor, resetCursor, setCursorForShape, } from "../cursor";
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
 import { diagramToHTML } from "../data/magic";
-import { elementsOverlappingBBox, exportToBlob } from "../../utils/index";
+import { exportToBlob } from "../../utils/export";
 import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import FollowMode from "./FollowMode/FollowMode";
+import { AnimationFrameHandler } from "../animation-frame-handler";
+import { AnimatedTrail } from "../animated-trail";
+import { LaserTrails } from "../laser-trails";
+import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
+import { getRenderOpacity } from "../renderer/renderElement";
+import { textWysiwyg } from "../element/textWysiwyg";
+import { isOverScrollBars } from "../scene/scrollbars";
+import { isPointHittingLink, isPointHittingLinkIcon, } from "./hyperlink/helpers";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
 const deviceContextInitialValue = {
@@ -163,12 +170,41 @@ class App extends React.Component {
     files = {};
     imageCache = new Map();
     iFrameRefs = new Map();
+    /**
+     * Indicates whether the embeddable's url has been validated for rendering.
+     * If value not set, indicates that the validation is pending.
+     * Initially or on url change the flag is not reset so that we can guarantee
+     * the validation came from a trusted source (the editor).
+     **/
+    embedsValidationStatus = new Map();
+    /** embeds that have been inserted to DOM (as a perf optim, we don't want to
+     * insert to DOM before user initially scrolls to them) */
+    initializedEmbeds = new Set();
+    elementsPendingErasure = new Set();
     hitLinkElement;
     lastPointerDownEvent = null;
     lastPointerUpEvent = null;
     lastPointerMoveEvent = null;
     lastViewportPosition = { x: 0, y: 0 };
-    laserPathManager = new LaserPathManager(this);
+    animationFrameHandler = new AnimationFrameHandler();
+    laserTrails = new LaserTrails(this.animationFrameHandler, this);
+    eraserTrail = new AnimatedTrail(this.animationFrameHandler, this, {
+        streamline: 0.2,
+        size: 5,
+        keepHead: true,
+        sizeMapping: (c) => {
+            const DECAY_TIME = 200;
+            const DECAY_LENGTH = 10;
+            const t = 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(t));
+        },
+        fill: () => this.state.theme === THEME.LIGHT
+            ? "rgba(0, 0, 0, 0.2)"
+            : "rgba(255, 255, 255, 0.2)",
+    });
     onChangeEmitter = new Emitter();
     onPointerDownEmitter = new Emitter();
     onPointerUpEmitter = new Emitter();
@@ -179,7 +215,7 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         const defaultAppState = getDefaultAppState();
-        const { excalidrawAPI, viewModeEnabled = false, zenModeEnabled = false, gridModeEnabled = false, objectsSnapModeEnabled = false, theme = defaultAppState.theme, name = defaultAppState.name, } = props;
+        const { excalidrawAPI, viewModeEnabled = false, zenModeEnabled = false, gridModeEnabled = false, objectsSnapModeEnabled = false, theme = defaultAppState.theme, name = `${t("labels.untitled")}-${getDateTime()}`, } = props;
         this.state = {
             ...defaultAppState,
             theme,
@@ -214,6 +250,7 @@ class App extends React.Component {
                 getSceneElements: this.getSceneElements,
                 getAppState: () => this.state,
                 getFiles: () => this.files,
+                getName: this.getName,
                 registerAction: (action) => {
                     this.actionManager.registerAction(action);
                 },
@@ -378,17 +415,20 @@ class App extends React.Component {
             sceneY >= el.y + el.height / 3 &&
             sceneY <= el.y + (2 * el.height) / 3);
     }
+    updateEmbedValidationStatus = (element, status) => {
+        this.embedsValidationStatus.set(element.id, status);
+        ShapeCache.delete(element);
+    };
     updateEmbeddables = () => {
         const iframeLikes = new Set();
         let updated = false;
         this.scene.getNonDeletedElements().filter((element) => {
             if (isEmbeddableElement(element)) {
                 iframeLikes.add(element.id);
-                if (element.validated == null) {
+                if (!this.embedsValidationStatus.has(element.id)) {
                     updated = true;
                     const validated = embeddableURLValidator(element.link, this.props.validateEmbeddable);
-                    mutateElement(element, { validated }, false);
-                    ShapeCache.delete(element);
+                    this.updateEmbedValidationStatus(element, validated);
                 }
             }
             else if (isIframeElement(element)) {
@@ -412,9 +452,20 @@ class App extends React.Component {
         const normalizedHeight = this.state.height;
         const embeddableElements = this.scene
             .getNonDeletedElements()
-            .filter((el) => (isEmbeddableElement(el) && !!el.validated) || isIframeElement(el));
+            .filter((el) => (isEmbeddableElement(el) &&
+            this.embedsValidationStatus.get(el.id) === true) ||
+            isIframeElement(el));
         return (_jsx(_Fragment, { children: embeddableElements.map((el) => {
                 const { x, y } = sceneCoordsToViewportCoords({ sceneX: el.x, sceneY: el.y }, this.state);
+                const isVisible = isElementInViewport(el, normalizedWidth, normalizedHeight, this.state, this.scene.getNonDeletedElementsMap());
+                const hasBeenInitialized = this.initializedEmbeds.has(el.id);
+                if (isVisible && !hasBeenInitialized) {
+                    this.initializedEmbeds.add(el.id);
+                }
+                const shouldRender = isVisible || hasBeenInitialized;
+                if (!shouldRender) {
+                    return null;
+                }
                 let src;
                 if (isIframeElement(el)) {
                     src = null;
@@ -554,8 +605,6 @@ class App extends React.Component {
                 else {
                     src = getEmbedLink(toValidURL(el.link || ""));
                 }
-                // console.log({ src });
-                const isVisible = isElementInViewport(el, normalizedWidth, normalizedHeight, this.state);
                 const isActive = this.state.activeEmbeddable?.element === el &&
                     this.state.activeEmbeddable?.state === "active";
                 const isHovered = this.state.activeEmbeddable?.element === el &&
@@ -567,7 +616,7 @@ class App extends React.Component {
                             ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) scale(${scale})`
                             : "none",
                         display: isVisible ? "block" : "none",
-                        opacity: el.opacity / 100,
+                        opacity: getRenderOpacity(el, getContainingFrame(el, this.scene.getNonDeletedElementsMap()), this.elementsPendingErasure),
                         ["--embeddable-radius"]: `${getCornerRadius(Math.min(el.width, el.height), el)}px`,
                     }, children: _jsxs("div", { 
                         //this is a hack that addresses isse with embedded excalidraw.com embeddable
@@ -659,16 +708,14 @@ class App extends React.Component {
                 scrollX: this.state.scrollX,
                 scrollY: this.state.scrollY,
                 zoom: this.state.zoom,
-            })) {
+            }, this.scene.getNonDeletedElementsMap())) {
                 // if frame not visible, don't render its name
                 return null;
             }
             const { x: x1, y: y1 } = sceneCoordsToViewportCoords({ sceneX: f.x, sceneY: f.y }, this.state);
             const FRAME_NAME_EDIT_PADDING = 6;
             const reset = () => {
-                if (f.name?.trim() === "") {
-                    mutateElement(f, { name: null });
-                }
+                mutateElement(f, { name: f.name?.trim() || null });
                 this.setState({ editingFrame: null });
             };
             let frameNameJSX;
@@ -679,7 +726,7 @@ class App extends React.Component {
                         mutateElement(f, {
                             name: e.target.value,
                         });
-                    }, onBlur: () => reset(), onKeyDown: (event) => {
+                    }, onFocus: (e) => e.target.select(), onBlur: () => reset(), onKeyDown: (event) => {
                         // for some inexplicable reason, `onBlur` triggered on ESC
                         // does not reset `state.editingFrame` despite being called,
                         // and we need to reset it here as well
@@ -740,11 +787,17 @@ class App extends React.Component {
                 }, children: frameNameJSX }, f.id));
         });
     };
+    toggleOverscrollBehavior(event) {
+        // when pointer inside editor, disable overscroll behavior to prevent
+        // panning to trigger history back/forward on MacOS Chrome
+        document.documentElement.style.overscrollBehaviorX =
+            event.type === "pointerenter" ? "none" : "auto";
+    }
     render() {
         const selectedElements = this.scene.getSelectedElements(this.state);
         const { renderTopRightUI, renderCustomStats } = this.props;
         const versionNonce = this.scene.getVersionNonce();
-        const { canvasElements, visibleElements } = this.renderer.getRenderableElements({
+        const { elementsMap, visibleElements } = this.renderer.getRenderableElements({
             versionNonce,
             zoom: this.state.zoom,
             offsetLeft: this.state.offsetLeft,
@@ -756,6 +809,7 @@ class App extends React.Component {
             editingElement: this.state.editingElement,
             pendingImageElementId: this.state.pendingImageElementId,
         });
+        const allElementsMap = this.scene.getNonDeletedElementsMap();
         const shouldBlockPointerEvents = !(this.state.editingElement && isLinearElement(this.state.editingElement)) &&
             (this.state.selectionElement ||
                 this.state.draggingElement ||
@@ -773,18 +827,18 @@ class App extends React.Component {
                 ["--ui-pointerEvents"]: shouldBlockPointerEvents
                     ? POINTER_EVENTS.disabled
                     : POINTER_EVENTS.enabled,
-            }, ref: this.excalidrawContainerRef, onDrop: this.handleAppOnDrop, tabIndex: 0, onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown, children: _jsx(AppContext.Provider, { value: this, children: _jsx(AppPropsContext.Provider, { value: this.props, children: _jsx(ExcalidrawContainerContext.Provider, { value: this.excalidrawContainerValue, children: _jsx(DeviceContext.Provider, { value: this.device, children: _jsx(ExcalidrawSetAppStateContext.Provider, { value: this.setAppState, children: _jsx(ExcalidrawAppStateContext.Provider, { value: this.state, children: _jsxs(ExcalidrawElementsContext.Provider, { value: this.scene.getNonDeletedElements(), children: [_jsxs(ExcalidrawActionManagerContext.Provider, { value: this.actionManager, children: [_jsx(LayerUI, { canvas: this.canvas, appState: this.state, files: this.files, setAppState: this.setAppState, actionManager: this.actionManager, elements: this.scene.getNonDeletedElements(), onLockToggle: this.toggleLock, onPenModeToggle: this.togglePenMode, onHandToolToggle: this.onHandToolToggle, langCode: getLanguage().code, renderTopRightUI: renderTopRightUI, renderCustomStats: renderCustomStats, showExitZenModeBtn: typeof this.props?.zenModeEnabled === "undefined" &&
+            }, ref: this.excalidrawContainerRef, onDrop: this.handleAppOnDrop, tabIndex: 0, onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown, onPointerEnter: this.toggleOverscrollBehavior, onPointerLeave: this.toggleOverscrollBehavior, children: _jsx(AppContext.Provider, { value: this, children: _jsx(AppPropsContext.Provider, { value: this.props, children: _jsx(ExcalidrawContainerContext.Provider, { value: this.excalidrawContainerValue, children: _jsx(DeviceContext.Provider, { value: this.device, children: _jsx(ExcalidrawSetAppStateContext.Provider, { value: this.setAppState, children: _jsx(ExcalidrawAppStateContext.Provider, { value: this.state, children: _jsxs(ExcalidrawElementsContext.Provider, { value: this.scene.getNonDeletedElements(), children: [_jsxs(ExcalidrawActionManagerContext.Provider, { value: this.actionManager, children: [_jsx(LayerUI, { canvas: this.canvas, appState: this.state, files: this.files, setAppState: this.setAppState, actionManager: this.actionManager, elements: this.scene.getNonDeletedElements(), onLockToggle: this.toggleLock, onPenModeToggle: this.togglePenMode, onHandToolToggle: this.onHandToolToggle, langCode: getLanguage().code, renderTopRightUI: renderTopRightUI, renderCustomStats: renderCustomStats, 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, app: this, isCollaborating: this.props.isCollaborating, openAIKey: this.OPENAI_KEY, isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED, onOpenAIAPIKeyChange: this.onOpenAIKeyChange, onMagicSettingsConfirm: this.onMagicSettingsConfirm, children: this.props.children }), _jsx("div", { className: "excalidraw-textEditorContainer" }), _jsx("div", { className: "excalidraw-contextMenuContainer" }), _jsx("div", { className: "excalidraw-eye-dropper-container" }), _jsx(LaserToolOverlay, { manager: this.laserPathManager }), selectedElements.length === 1 &&
-                                                        this.state.showHyperlinkPopup && (_jsx(Hyperlink, { element: firstSelectedElement, setAppState: this.setAppState, onLinkOpen: this.props.onLinkOpen, setToast: this.setToast }, firstSelectedElement.id)), this.props.aiEnabled !== false &&
+                                                            !this.scene.getElementsIncludingDeleted().length, app: this, isCollaborating: this.props.isCollaborating, openAIKey: this.OPENAI_KEY, isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED, onOpenAIAPIKeyChange: this.onOpenAIKeyChange, onMagicSettingsConfirm: this.onMagicSettingsConfirm, children: this.props.children }), _jsx("div", { className: "excalidraw-textEditorContainer" }), _jsx("div", { className: "excalidraw-contextMenuContainer" }), _jsx("div", { className: "excalidraw-eye-dropper-container" }), _jsx(SVGLayer, { trails: [this.laserTrails, this.eraserTrail] }), selectedElements.length === 1 &&
+                                                        this.state.showHyperlinkPopup && (_jsx(Hyperlink, { element: firstSelectedElement, elementsMap: allElementsMap, setAppState: this.setAppState, onLinkOpen: this.props.onLinkOpen, setToast: this.setToast, updateEmbedValidationStatus: this.updateEmbedValidationStatus }, firstSelectedElement.id)), this.props.aiEnabled !== false &&
                                                         selectedElements.length === 1 &&
-                                                        isMagicFrameElement(firstSelectedElement) && (_jsx(ElementCanvasButtons, { element: firstSelectedElement, children: _jsx(ElementCanvasButton, { title: t("labels.convertToCode"), icon: MagicIcon, checked: false, onChange: () => this.onMagicFrameGenerate(firstSelectedElement, "button") }) })), selectedElements.length === 1 &&
+                                                        isMagicFrameElement(firstSelectedElement) && (_jsx(ElementCanvasButtons, { element: firstSelectedElement, elementsMap: elementsMap, children: _jsx(ElementCanvasButton, { title: t("labels.convertToCode"), icon: MagicIcon, checked: false, onChange: () => this.onMagicFrameGenerate(firstSelectedElement, "button") }) })), selectedElements.length === 1 &&
                                                         isIframeElement(firstSelectedElement) &&
                                                         firstSelectedElement.customData?.generationData
-                                                            ?.status === "done" && (_jsxs(ElementCanvasButtons, { element: firstSelectedElement, children: [_jsx(ElementCanvasButton, { title: t("labels.copySource"), icon: copyIcon, checked: false, onChange: () => this.onIframeSrcCopy(firstSelectedElement) }), _jsx(ElementCanvasButton, { title: "Enter fullscreen", icon: fullscreenIcon, checked: false, onChange: () => {
+                                                            ?.status === "done" && (_jsxs(ElementCanvasButtons, { element: firstSelectedElement, elementsMap: elementsMap, children: [_jsx(ElementCanvasButton, { title: t("labels.copySource"), icon: copyIcon, checked: false, onChange: () => this.onIframeSrcCopy(firstSelectedElement) }), _jsx(ElementCanvasButton, { title: "Enter fullscreen", icon: fullscreenIcon, checked: false, onChange: () => {
                                                                     const iframe = this.getHTMLIFrameElement(firstSelectedElement);
                                                                     if (iframe) {
                                                                         try {
@@ -813,12 +867,14 @@ class App extends React.Component {
                                                                 this.focusContainer();
                                                                 callback?.();
                                                             });
-                                                        } })), _jsx(StaticCanvas, { canvas: this.canvas, rc: this.rc, elements: canvasElements, visibleElements: visibleElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderConfig: {
+                                                        } })), _jsx(StaticCanvas, { canvas: this.canvas, rc: this.rc, elementsMap: elementsMap, allElementsMap: allElementsMap, visibleElements: visibleElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderConfig: {
                                                             imageCache: this.imageCache,
                                                             isExporting: false,
                                                             renderGrid: true,
                                                             canvasBackgroundColor: this.state.viewBackgroundColor,
-                                                        } }), _jsx(InteractiveCanvas, { containerRef: this.excalidrawContainerRef, canvas: this.interactiveCanvas, elements: canvasElements, visibleElements: visibleElements, selectedElements: selectedElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderInteractiveSceneCallback: this.renderInteractiveSceneCallback, handleCanvasRef: this.handleInteractiveCanvasRef, onContextMenu: this.handleCanvasContextMenu, onPointerMove: this.handleCanvasPointerMove, onPointerUp: this.handleCanvasPointerUp, onPointerCancel: this.removePointer, onTouchMove: this.handleTouchMove, onPointerDown: this.handleCanvasPointerDown, onDoubleClick: this.handleCanvasDoubleClick }), this.state.userToFollow && (_jsx(FollowMode, { width: this.state.width, height: this.state.height, userToFollow: this.state.userToFollow, onDisconnect: this.maybeUnfollowRemoteUser })), this.renderFrameNames()] }), this.renderEmbeddables()] }) }) }) }) }) }) }) }));
+                                                            embedsValidationStatus: this.embedsValidationStatus,
+                                                            elementsPendingErasure: this.elementsPendingErasure,
+                                                        } }), _jsx(InteractiveCanvas, { containerRef: this.excalidrawContainerRef, canvas: this.interactiveCanvas, elementsMap: elementsMap, visibleElements: visibleElements, selectedElements: selectedElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderInteractiveSceneCallback: this.renderInteractiveSceneCallback, handleCanvasRef: this.handleInteractiveCanvasRef, onContextMenu: this.handleCanvasContextMenu, onPointerMove: this.handleCanvasPointerMove, onPointerUp: this.handleCanvasPointerUp, onPointerCancel: this.removePointer, onTouchMove: this.handleTouchMove, onPointerDown: this.handleCanvasPointerDown, onDoubleClick: this.handleCanvasDoubleClick }), this.state.userToFollow && (_jsx(FollowMode, { width: this.state.width, height: this.state.height, userToFollow: this.state.userToFollow, onDisconnect: this.maybeUnfollowRemoteUser })), this.renderFrameNames()] }), this.renderEmbeddables()] }) }) }) }) }) }) }) }));
     }
     focusContainer = () => {
         this.excalidrawContainerRef.current?.focus();
@@ -840,7 +896,7 @@ class App extends React.Component {
         trackEvent("export", type, "ui");
         const fileHandle = await exportCanvas(type, elements, this.state, this.files, {
             exportBackground: this.state.exportBackground,
-            name: this.state.name,
+            name: this.getName(),
             viewBackgroundColor: this.state.viewBackgroundColor,
             exportingFrame: opts.exportingFrame,
         })
@@ -893,11 +949,7 @@ class App extends React.Component {
             trackEvent("ai", "generate (missing key)", "d2c");
             return;
         }
-        const magicFrameChildren = elementsOverlappingBBox({
-            elements: this.scene.getNonDeletedElements(),
-            bounds: magicFrame,
-            type: "overlap",
-        }).filter((el) => !isMagicFrameElement(el));
+        const magicFrameChildren = getElementsOverlappingFrame(this.scene.getNonDeletedElements(), magicFrame).filter((el) => !isMagicFrameElement(el));
         if (!magicFrameChildren.length) {
             if (source === "button") {
                 this.setState({ errorMessage: "Cannot generate from an empty frame" });
@@ -1152,7 +1204,7 @@ class App extends React.Component {
             let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
             let gridSize = actionResult?.appState?.gridSize || null;
             const theme = actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
-            let name = actionResult?.appState?.name ?? this.state.name;
+            const name = actionResult?.appState?.name ?? this.state.name;
             const errorMessage = actionResult?.appState?.errorMessage ?? this.state.errorMessage;
             if (typeof this.props.viewModeEnabled !== "undefined") {
                 viewModeEnabled = this.props.viewModeEnabled;
@@ -1163,9 +1215,6 @@ class App extends React.Component {
             if (typeof this.props.gridModeEnabled !== "undefined") {
                 gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
             }
-            if (typeof this.props.name !== "undefined") {
-                name = this.props.name;
-            }
             editingElement =
                 editingElement || actionResult.appState?.editingElement || null;
             if (editingElement?.isDeleted) {
@@ -1342,7 +1391,6 @@ class App extends React.Component {
         return false;
     };
     async componentDidMount() {
-        console.log("HELLO IS");
         this.unmounted = false;
         this.excalidrawContainerValue.container =
             this.excalidrawContainerRef.current;
@@ -1417,7 +1465,8 @@ class App extends React.Component {
         this.removeEventListeners();
         this.scene.destroy();
         this.library.destroy();
-        this.laserPathManager.destroy();
+        this.laserTrails.stop();
+        this.eraserTrail.stop();
         this.onChangeEmitter.clear();
         ShapeCache.destroy();
         SnapCache.destroy();
@@ -1425,6 +1474,7 @@ class App extends React.Component {
         isSomeElementSelected.clearCache();
         selectGroupsForSelectedElements.clearCache();
         touchTimeout = 0;
+        document.documentElement.style.overscrollBehaviorX = "";
     }
     onResize = withBatchedUpdates(() => {
         this.scene
@@ -1484,8 +1534,9 @@ class App extends React.Component {
     }
     componentDidUpdate(prevProps, prevState) {
         this.updateEmbeddables();
-        if (!this.state.showWelcomeScreen &&
-            !this.scene.getElementsIncludingDeleted().length) {
+        const elements = this.scene.getElementsIncludingDeleted();
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        if (!this.state.showWelcomeScreen && !elements.length) {
             this.setState({ showWelcomeScreen: true });
         }
         if (prevProps.UIOptions.dockedSidebarBreakpoint !==
@@ -1536,6 +1587,9 @@ class App extends React.Component {
         if (prevProps.langCode !== this.props.langCode) {
             this.updateLanguage();
         }
+        if (isEraserActive(prevState) && !isEraserActive(this.state)) {
+            this.eraserTrail.endPath();
+        }
         if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
             this.setState({ viewModeEnabled: !!this.props.viewModeEnabled });
         }
@@ -1554,11 +1608,6 @@ class App extends React.Component {
                 gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
             });
         }
-        if (this.props.name && prevProps.name !== this.props.name) {
-            this.setState({
-                name: this.props.name,
-            });
-        }
         this.excalidrawContainerRef.current?.classList.toggle("theme--dark", this.state.theme === "dark");
         if (this.state.editingLinearElement &&
             !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {
@@ -1587,19 +1636,19 @@ class App extends React.Component {
             multiElement != null &&
             isBindingEnabled(this.state) &&
             isBindingElement(multiElement, false)) {
-            maybeBindLinearElement(multiElement, this.state, this.scene, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1)));
+            maybeBindLinearElement(multiElement, this.state, this.scene, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, elementsMap)), elementsMap);
         }
-        this.history.record(this.state, this.scene.getElementsIncludingDeleted());
+        this.history.record(this.state, elements);
         // Do not notify consumers if we're still loading the scene. Among other
         // potential issues, this fixes a case where the tab isn't focused during
         // init, which would trigger onChange with empty elements, which would then
         // override whatever is in localStorage currently.
         if (!this.state.isLoading) {
-            this.props.onChange?.(this.scene.getElementsIncludingDeleted(), this.state, this.files);
-            this.onChangeEmitter.trigger(this.scene.getElementsIncludingDeleted(), this.state, this.files);
+            this.props.onChange?.(elements, this.state, this.files);
+            this.onChangeEmitter.trigger(elements, this.state, this.files);
         }
     }
-    renderInteractiveSceneCallback = ({ atLeastOneVisibleElement, scrollBars, elements, }) => {
+    renderInteractiveSceneCallback = ({ atLeastOneVisibleElement, scrollBars, elementsMap, }) => {
         if (scrollBars) {
             currentScrollBars = scrollBars;
         }
@@ -1607,7 +1656,7 @@ class App extends React.Component {
         // hide when editing text
         isTextElement(this.state.editingElement)
             ? false
-            : !atLeastOneVisibleElement && elements.length > 0;
+            : !atLeastOneVisibleElement && elementsMap.size > 0;
         if (this.state.scrolledOutside !== scrolledOutside) {
             this.setState({ scrolledOutside });
         }
@@ -1776,18 +1825,40 @@ class App extends React.Component {
             });
         }
         else if (data.text) {
-            const maybeUrl = extractSrc(data.text);
-            if (!isPlainPaste &&
-                embeddableURLValidator(maybeUrl, this.props.validateEmbeddable) &&
-                (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(maybeUrl) ||
-                    getEmbedLink(maybeUrl)?.type === "video")) {
-                const embeddable = this.insertEmbeddableElement({
-                    sceneX,
-                    sceneY,
-                    link: normalizeLink(maybeUrl),
-                });
-                if (embeddable) {
-                    this.setState({ selectedElementIds: { [embeddable.id]: true } });
+            const nonEmptyLines = normalizeEOL(data.text)
+                .split(/\n+/)
+                .map((s) => s.trim())
+                .filter(Boolean);
+            const embbeddableUrls = nonEmptyLines
+                .map((str) => maybeParseEmbedSrc(str))
+                .filter((string) => {
+                return (embeddableURLValidator(string, this.props.validateEmbeddable) &&
+                    (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) ||
+                        getEmbedLink(string)?.type === "video"));
+            });
+            if (!IS_PLAIN_PASTE &&
+                embbeddableUrls.length > 0 &&
+                // if there were non-embeddable text (lines) mixed in with embeddable
+                // urls, ignore and paste as text
+                embbeddableUrls.length === nonEmptyLines.length) {
+                const embeddables = [];
+                for (const url of embbeddableUrls) {
+                    const prevEmbeddable = embeddables[embeddables.length - 1];
+                    const embeddable = this.insertEmbeddableElement({
+                        sceneX: prevEmbeddable
+                            ? prevEmbeddable.x + prevEmbeddable.width + 20
+                            : sceneX,
+                        sceneY,
+                        link: normalizeLink(url),
+                    });
+                    if (embeddable) {
+                        embeddables.push(embeddable);
+                    }
+                }
+                if (embeddables.length) {
+                    this.setState({
+                        selectedElementIds: Object.fromEntries(embeddables.map((embeddable) => [embeddable.id, true])),
+                    });
                 }
                 return;
             }
@@ -1823,15 +1894,20 @@ class App extends React.Component {
         }), {
             randomizeSeed: !opts.retainSeed,
         });
-        const nextElements = [
+        const allElements = [
             ...this.scene.getElementsIncludingDeleted(),
             ...newElements,
         ];
-        this.scene.replaceAllElements(nextElements);
+        const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
+        if (topLayerFrame) {
+            const eligibleElements = filterElementsEligibleAsFrameChildren(newElements, topLayerFrame);
+            addElementsToFrame(allElements, eligibleElements, topLayerFrame);
+        }
+        this.scene.replaceAllElements(allElements);
         newElements.forEach((newElement) => {
             if (isTextElement(newElement) && isBoundToContainer(newElement)) {
-                const container = getContainerElement(newElement);
-                redrawTextBoundingBox(newElement, container);
+                const container = getContainerElement(newElement, this.scene.getElementsMapIncludingDeleted());
+                redrawTextBoundingBox(newElement, container, this.scene.getElementsMapIncludingDeleted());
             }
         });
         if (opts.files) {
@@ -1886,7 +1962,14 @@ class App extends React.Component {
                     return { file: await ImageURLToFile(url) };
                 }
                 catch (error) {
-                    return { errorMessage: error.message };
+                    let errorMessage = error.message;
+                    if (error.cause === "FETCH_ERROR") {
+                        errorMessage = t("errors.failedToFetchImage");
+                    }
+                    else if (error.cause === "UNSUPPORTED") {
+                        errorMessage = t("errors.unsupportedFileType");
+                    }
+                    return { errorMessage };
                 }
             }));
             let y = sceneY;
@@ -2354,7 +2437,7 @@ class App extends React.Component {
                     x: element.x + offsetX,
                     y: element.y + offsetY,
                 });
-                updateBoundElements(element, {
+                updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
                     simultaneouslyUpdated: selectedElements,
                 });
             });
@@ -2372,7 +2455,7 @@ class App extends React.Component {
                                 selectedElements[0].id) {
                             this.history.resumeRecording();
                             this.setState({
-                                editingLinearElement: new LinearElementEditor(selectedElement, this.scene),
+                                editingLinearElement: new LinearElementEditor(selectedElement),
                             });
                         }
                     }
@@ -2383,7 +2466,7 @@ class App extends React.Component {
                     if (!isTextElement(selectedElement)) {
                         container = selectedElement;
                     }
-                    const midPoint = getContainerCenter(selectedElement, this.state);
+                    const midPoint = getContainerCenter(selectedElement, this.state, this.scene.getNonDeletedElementsMap());
                     const sceneX = midPoint.x;
                     const sceneY = midPoint.y;
                     this.startTextEditing({
@@ -2497,9 +2580,10 @@ class App extends React.Component {
         }
         if (isArrowKey(event.key)) {
             const selectedElements = this.scene.getSelectedElements(this.state);
+            const elementsMap = this.scene.getNonDeletedElementsMap();
             isBindingEnabled(this.state)
-                ? bindOrUnbindSelectedElements(selectedElements)
-                : unbindLinearElements(selectedElements);
+                ? bindOrUnbindSelectedElements(selectedElements, this.scene.getNonDeletedElements(), elementsMap)
+                : unbindLinearElements(selectedElements, elementsMap);
             this.setState({ suggestedBindings: [] });
         }
     });
@@ -2576,6 +2660,11 @@ class App extends React.Component {
         // touchscreen
         return gesture.pointers.size >= 2;
     };
+    getName = () => {
+        return (this.state.name ||
+            this.props.name ||
+            `${t("labels.untitled")}-${getDateTime()}`);
+    };
     // fires only on Safari
     onGestureStart = withBatchedUpdates((event) => {
         event.preventDefault();
@@ -2628,11 +2717,13 @@ class App extends React.Component {
         gesture.initialScale = null;
     });
     handleTextWysiwyg(element, { isExistingElement = false, }) {
+        const elementsMap = this.scene.getElementsMapIncludingDeleted();
         const updateElement = (text, originalText, isDeleted) => {
             this.scene.replaceAllElements([
+                // Not sure why we include deleted elements as well hence using deleted elements map
                 ...this.scene.getElementsIncludingDeleted().map((_element) => {
                     if (_element.id === element.id && isTextElement(_element)) {
-                        return updateTextElement(_element, {
+                        return updateTextElement(_element, getContainerElement(_element, elementsMap), elementsMap, {
                             text,
                             isDeleted,
                             originalText,
@@ -2658,7 +2749,7 @@ class App extends React.Component {
             onChange: withBatchedUpdates((text) => {
                 updateElement(text, text, false);
                 if (isNonDeletedElement(element)) {
-                    updateBoundElements(element);
+                    updateBoundElements(element, elementsMap);
                 }
             }),
             onSubmit: withBatchedUpdates(({ text, viaKeyboard, originalText }) => {
@@ -2734,7 +2825,7 @@ class App extends React.Component {
             const elementWithHighestZIndex = allHitElements[allHitElements.length - 1];
             // If we're hitting element with highest z-index only on its bounding box
             // while also hitting other element figure, the latter should be considered.
-            return isHittingElementBoundingBoxWithoutHittingElement(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y)
+            return isHittingElementBoundingBoxWithoutHittingElement(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y, this.scene.getNonDeletedElementsMap())
                 ? allHitElements[allHitElements.length - 2]
                 : elementWithHighestZIndex;
         }
@@ -2751,13 +2842,14 @@ class App extends React.Component {
                 .filter((element) => (includeLockedElements || !element.locked) &&
                 (includeBoundTextElement ||
                     !(isTextElement(element) && element.containerId)));
-        return getElementsAtPosition(elements, (element) => hitTest(element, this.state, this.frameNameBoundsCache, x, y)).filter((element) => {
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        return getElementsAtPosition(elements, (element) => hitTest(element, this.state, this.frameNameBoundsCache, x, y, elementsMap)).filter((element) => {
             // hitting a frame's element from outside the frame is not considered a hit
-            const containingFrame = getContainingFrame(element);
+            const containingFrame = getContainingFrame(element, elementsMap);
             return containingFrame &&
                 this.state.frameRendering.enabled &&
                 this.state.frameRendering.clip
-                ? isCursorInFrame({ x, y }, containingFrame)
+                ? isCursorInFrame({ x, y }, containingFrame, elementsMap)
                 : true;
         });
     }
@@ -2766,7 +2858,7 @@ class App extends React.Component {
         let parentCenterPosition = insertAtParentCenter &&
             this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);
         if (container && parentCenterPosition) {
-            const boundTextElementToContainer = getBoundTextElement(container);
+            const boundTextElementToContainer = getBoundTextElement(container, this.scene.getNonDeletedElementsMap());
             if (!boundTextElementToContainer) {
                 shouldBindToContainer = true;
             }
@@ -2778,7 +2870,7 @@ class App extends React.Component {
                 existingTextElement = selectedElements[0];
             }
             else if (container) {
-                existingTextElement = getBoundTextElement(selectedElements[0]);
+                existingTextElement = getBoundTextElement(selectedElements[0], this.scene.getNonDeletedElementsMap());
             }
             else {
                 existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
@@ -2886,7 +2978,7 @@ class App extends React.Component {
                     this.state.editingLinearElement.elementId !== selectedElements[0].id)) {
                 this.history.resumeRecording();
                 this.setState({
-                    editingLinearElement: new LinearElementEditor(selectedElements[0], this.scene),
+                    editingLinearElement: new LinearElementEditor(selectedElements[0]),
                 });
                 return;
             }
@@ -2922,12 +3014,12 @@ class App extends React.Component {
                 });
                 return;
             }
-            const container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);
+            const container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY, this.scene.getNonDeletedElementsMap());
             if (container) {
                 if (hasBoundTextElement(container) ||
                     !isTransparent(container.backgroundColor) ||
-                    isHittingElementNotConsideringBoundingBox(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY])) {
-                    const midPoint = getContainerCenter(container, this.state);
+                    isHittingElementNotConsideringBoundingBox(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY], this.scene.getNonDeletedElementsMap())) {
+                    const midPoint = getContainerCenter(container, this.state, this.scene.getNonDeletedElementsMap());
                     sceneX = midPoint.x;
                     sceneY = midPoint.y;
                 }
@@ -2951,7 +3043,7 @@ class App extends React.Component {
             }
             return (element.link &&
                 index <= hitElementIndex &&
-                isPointHittingLink(element, this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile));
+                isPointHittingLink(element, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile));
         });
     };
     redirectToLink = (event, isTouchScreen) => {
@@ -2963,9 +3055,10 @@ class App extends React.Component {
             return;
         }
         const lastPointerDownCoords = viewportCoordsToSceneCoords(this.lastPointerDownEvent, this.state);
-        const lastPointerDownHittingLinkIcon = isPointHittingLink(this.hitLinkElement, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        const lastPointerDownHittingLinkIcon = isPointHittingLink(this.hitLinkElement, elementsMap, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);
         const lastPointerUpCoords = viewportCoordsToSceneCoords(this.lastPointerUpEvent, this.state);
-        const lastPointerUpHittingLinkIcon = isPointHittingLink(this.hitLinkElement, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);
+        const lastPointerUpHittingLinkIcon = isPointHittingLink(this.hitLinkElement, elementsMap, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);
         if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
             let url = this.hitLinkElement.link;
             if (url) {
@@ -2991,9 +3084,10 @@ class App extends React.Component {
         }
     };
     getTopLayerFrameAtSceneCoords = (sceneCoords) => {
+        const elementsMap = this.scene.getNonDeletedElementsMap();
         const frames = this.scene
             .getNonDeletedFramesLikes()
-            .filter((frame) => isCursorInFrame(sceneCoords, frame));
+            .filter((frame) => isCursorInFrame(sceneCoords, frame, elementsMap));
         return frames.length ? frames[frames.length - 1] : null;
     };
     handleCanvasPointerMove = (event) => {
@@ -3065,7 +3159,7 @@ class App extends React.Component {
             const { originOffset, snapLines } = getSnapLinesAtPointer(this.scene.getNonDeletedElements(), this.state, {
                 x: scenePointerX,
                 y: scenePointerY,
-            }, event);
+            }, event, this.scene.getNonDeletedElementsMap());
             this.setState((prevState) => {
                 const nextSnapLines = updateStable(prevState.snapLines, snapLines);
                 const nextOriginOffset = prevState.originSnapOffset
@@ -3093,7 +3187,7 @@ class App extends React.Component {
         }
         if (this.state.editingLinearElement &&
             !this.state.editingLinearElement.isDragging) {
-            const editingLinearElement = LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state);
+            const editingLinearElement = LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state, this.scene.getNonDeletedElementsMap());
             if (editingLinearElement &&
                 editingLinearElement !== this.state.editingLinearElement) {
                 // Since we are reading from previous state which is not possible with
@@ -3195,7 +3289,7 @@ class App extends React.Component {
         if (selectedElements.length === 1 &&
             !isOverScrollBar &&
             !this.state.editingLinearElement) {
-            const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType);
+            const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap());
             if (elementWithTransformHandleType &&
                 elementWithTransformHandleType.transformHandleType) {
                 setCursor(this.interactiveCanvas, getCursorForResizingElement(elementWithTransformHandleType));
@@ -3219,7 +3313,7 @@ class App extends React.Component {
         if (this.hitLinkElement &&
             !this.state.selectedElementIds[this.hitLinkElement.id]) {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
-            showHyperlinkTooltip(this.hitLinkElement, this.state);
+            showHyperlinkTooltip(this.hitLinkElement, this.state, this.scene.getNonDeletedElementsMap());
         }
         else {
             hideHyperlinkToolip();
@@ -3270,34 +3364,49 @@ class App extends React.Component {
         }
     };
     handleEraser = (event, pointerDownState, scenePointer) => {
-        const updateElementIds = (elements) => {
-            elements.forEach((element) => {
+        this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);
+        let didChange = false;
+        const processedGroups = new Set();
+        const nonDeletedElements = this.scene.getNonDeletedElements();
+        const processElements = (elements) => {
+            for (const element of elements) {
                 if (element.locked) {
                     return;
                 }
-                idsToUpdate.push(element.id);
                 if (event.altKey) {
-                    if (pointerDownState.elementIdsToErase[element.id] &&
-                        pointerDownState.elementIdsToErase[element.id].erase) {
-                        pointerDownState.elementIdsToErase[element.id].erase = false;
+                    if (this.elementsPendingErasure.delete(element.id)) {
+                        didChange = true;
                     }
                 }
-                else if (!pointerDownState.elementIdsToErase[element.id]) {
-                    pointerDownState.elementIdsToErase[element.id] = {
-                        erase: true,
-                        opacity: element.opacity,
-                    };
+                else if (!this.elementsPendingErasure.has(element.id)) {
+                    didChange = true;
+                    this.elementsPendingErasure.add(element.id);
                 }
-            });
+                // (un)erase groups atomically
+                if (didChange && element.groupIds?.length) {
+                    const shallowestGroupId = element.groupIds.at(-1);
+                    if (!processedGroups.has(shallowestGroupId)) {
+                        processedGroups.add(shallowestGroupId);
+                        const elems = getElementsInGroup(nonDeletedElements, shallowestGroupId);
+                        for (const elem of elems) {
+                            if (event.altKey) {
+                                this.elementsPendingErasure.delete(elem.id);
+                            }
+                            else {
+                                this.elementsPendingErasure.add(elem.id);
+                            }
+                        }
+                    }
+                }
+            }
         };
-        const idsToUpdate = [];
         const distance = distance2d(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);
         const threshold = 10 / this.state.zoom.value;
         const point = { ...pointerDownState.lastCoords };
         let samplingInterval = 0;
         while (samplingInterval <= distance) {
             const hitElements = this.getElementsAtPosition(point.x, point.y);
-            updateElementIds(hitElements);
+            processElements(hitElements);
             // Exit since we reached current point
             if (samplingInterval === distance) {
                 break;
@@ -3310,48 +3419,45 @@ class App extends React.Component {
             point.x = nextX;
             point.y = nextY;
         }
-        const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
-            const id = isBoundToContainer(ele) && idsToUpdate.includes(ele.containerId)
-                ? ele.containerId
-                : ele.id;
-            if (idsToUpdate.includes(id)) {
-                if (event.altKey) {
-                    if (pointerDownState.elementIdsToErase[id] &&
-                        pointerDownState.elementIdsToErase[id].erase === false) {
-                        return newElementWith(ele, {
-                            opacity: pointerDownState.elementIdsToErase[id].opacity,
-                        });
+        pointerDownState.lastCoords.x = scenePointer.x;
+        pointerDownState.lastCoords.y = scenePointer.y;
+        if (didChange) {
+            for (const element of this.scene.getNonDeletedElements()) {
+                if (isBoundToContainer(element) &&
+                    (this.elementsPendingErasure.has(element.id) ||
+                        this.elementsPendingErasure.has(element.containerId))) {
+                    if (event.altKey) {
+                        this.elementsPendingErasure.delete(element.id);
+                        this.elementsPendingErasure.delete(element.containerId);
+                    }
+                    else {
+                        this.elementsPendingErasure.add(element.id);
+                        this.elementsPendingErasure.add(element.containerId);
                     }
-                }
-                else {
-                    return newElementWith(ele, {
-                        opacity: ELEMENT_READY_TO_ERASE_OPACITY,
-                    });
                 }
             }
-            return ele;
-        });
-        this.scene.replaceAllElements(elements);
-        pointerDownState.lastCoords.x = scenePointer.x;
-        pointerDownState.lastCoords.y = scenePointer.y;
+            this.elementsPendingErasure = new Set(this.elementsPendingErasure);
+            this.onSceneUpdated();
+        }
     };
     // set touch moving for mobile context menu
     handleTouchMove = (event) => {
         invalidateContextMenu = true;
     };
     handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {
-        const element = LinearElementEditor.getElement(linearElementEditor.elementId);
-        const boundTextElement = getBoundTextElement(element);
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);
+        const boundTextElement = getBoundTextElement(element, elementsMap);
         if (!element) {
             return;
         }
         if (this.state.selectedLinearElement) {
             let hoverPointIndex = -1;
             let segmentMidPointHoveredCoords = null;
-            if (isHittingElementNotConsideringBoundingBox(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY])) {
-                hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, this.state.zoom, scenePointerX, scenePointerY);
+            if (isHittingElementNotConsideringBoundingBox(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY], elementsMap)) {
+                hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);
                 segmentMidPointHoveredCoords =
-                    LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, { x: scenePointerX, y: scenePointerY }, this.state);
+                    LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, { x: scenePointerX, y: scenePointerY }, this.state, this.scene.getNonDeletedElementsMap());
                 if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
                 }
@@ -3360,11 +3466,11 @@ class App extends React.Component {
                 }
             }
             else if (shouldShowBoundingBox([element], this.state) &&
-                isHittingElementBoundingBoxWithoutHittingElement(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {
+                isHittingElementBoundingBoxWithoutHittingElement(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY, elementsMap)) {
                 setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
             }
             else if (boundTextElement &&
-                hitTest(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {
+                hitTest(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY, this.scene.getNonDeletedElementsMap())) {
                 setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
             }
             if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {
@@ -3582,7 +3688,7 @@ class App extends React.Component {
             this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);
         }
         else if (this.state.activeTool.type === "laser") {
-            this.laserPathManager.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);
+            this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);
         }
         else if (this.state.activeTool.type !== "eraser" &&
             this.state.activeTool.type !== "hand") {
@@ -3590,6 +3696,9 @@ class App extends React.Component {
         }
         this.props?.onPointerDown?.(this.state.activeTool, pointerDownState);
         this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);
+        if (this.state.activeTool.type === "eraser") {
+            this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);
+        }
         const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);
         const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);
         const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
@@ -3627,10 +3736,7 @@ class App extends React.Component {
             !this.state.selectedElementIds[this.hitLinkElement.id]) {
             if (clicklength < 300 &&
                 isIframeLikeElement(this.hitLinkElement) &&
-                !isPointHittingLinkIcon(this.hitLinkElement, this.state, [
-                    scenePointer.x,
-                    scenePointer.y,
-                ])) {
+                !isPointHittingLinkIcon(this.hitLinkElement, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y])) {
                 this.handleEmbeddableCenterClick(this.hitLinkElement);
             }
             else {
@@ -3693,7 +3799,9 @@ class App extends React.Component {
         isPanning = true;
         event.preventDefault();
         let nextPastePrevented = false;
-        const isLinux = /Linux/.test(window.navigator.platform);
+        const isLinux = typeof window === undefined
+            ? false
+            : /Linux/.test(window.navigator.platform);
         setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
         let { clientX: lastX, clientY: lastY } = event;
         const onPointerMove = withBatchedUpdatesThrottled((event) => {
@@ -3816,7 +3924,6 @@ class App extends React.Component {
             boxSelection: {
                 hasOccurred: false,
             },
-            elementIdsToErase: {},
         };
     }
     // Returns whether the event is a dragging a scrollbar
@@ -3867,9 +3974,10 @@ class App extends React.Component {
     handleSelectionOnPointerDown = (event, pointerDownState) => {
         if (this.state.activeTool.type === "selection") {
             const elements = this.scene.getNonDeletedElements();
+            const elementsMap = this.scene.getNonDeletedElementsMap();
             const selectedElements = this.scene.getSelectedElements(this.state);
             if (selectedElements.length === 1 && !this.state.editingLinearElement) {
-                const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);
+                const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap());
                 if (elementWithTransformHandleType != null) {
                     this.setState({
                         resizingElement: elementWithTransformHandleType.element,
@@ -3883,7 +3991,7 @@ class App extends React.Component {
             }
             if (pointerDownState.resize.handleType) {
                 pointerDownState.resize.isResizing = true;
-                pointerDownState.resize.offset = tupleToCoors(getResizeOffsetXY(pointerDownState.resize.handleType, selectedElements, pointerDownState.origin.x, pointerDownState.origin.y));
+                pointerDownState.resize.offset = tupleToCoors(getResizeOffsetXY(pointerDownState.resize.handleType, selectedElements, elementsMap, pointerDownState.origin.x, pointerDownState.origin.y));
                 if (selectedElements.length === 1 &&
                     isLinearElement(selectedElements[0]) &&
                     selectedElements[0].points.length === 2) {
@@ -3893,7 +4001,7 @@ class App extends React.Component {
             else {
                 if (this.state.selectedLinearElement) {
                     const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;
-                    const ret = LinearElementEditor.handlePointerDown(event, this.state, this.history, pointerDownState.origin, linearElementEditor);
+                    const ret = LinearElementEditor.handlePointerDown(event, this.state, this.history, pointerDownState.origin, linearElementEditor, this.scene.getNonDeletedElements(), elementsMap);
                     if (ret.hitElement) {
                         pointerDownState.hit.element = ret.hitElement;
                     }
@@ -4074,7 +4182,7 @@ class App extends React.Component {
             includeBoundTextElement: true,
         });
         // FIXME
-        let container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);
+        let container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY, this.scene.getNonDeletedElementsMap());
         if (hasBoundTextElement(element)) {
             container = element;
             sceneX = element.x + element.width / 2;
@@ -4132,7 +4240,7 @@ class App extends React.Component {
             points: [[0, 0]],
             pressures,
         });
-        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene);
+        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
         this.scene.addNewElement(element);
         this.setState({
             draggingElement: element,
@@ -4176,8 +4284,11 @@ class App extends React.Component {
         if (!embedLink) {
             return;
         }
-        if (embedLink.warning) {
-            this.setToast({ message: embedLink.warning, closable: true });
+        if (embedLink.error instanceof URIError) {
+            this.setToast({
+                message: t("toast.unrecognizedLinkFormat"),
+                closable: true,
+            });
         }
         const element = newEmbeddableElement({
             type: "embeddable",
@@ -4195,7 +4306,6 @@ class App extends React.Component {
             width: embedLink.intrinsicSize.w,
             height: embedLink.intrinsicSize.h,
             link,
-            validated: null,
         });
         this.scene.replaceAllElements([
             ...this.scene.getElementsIncludingDeleted(),
@@ -4308,7 +4418,7 @@ class App extends React.Component {
             mutateElement(element, {
                 points: [...element.points, [0, 0]],
             });
-            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene);
+            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
             this.scene.addNewElement(element);
             this.setState({
                 draggingElement: element,
@@ -4353,7 +4463,6 @@ class App extends React.Component {
         if (elementType === "embeddable") {
             element = newEmbeddableElement({
                 type: "embeddable",
-                validated: null,
                 ...baseElementAttributes,
             });
         }
@@ -4409,7 +4518,7 @@ class App extends React.Component {
             selectedElements,
         }) &&
             (recomputeAnyways || !SnapCache.getReferenceSnapPoints())) {
-            SnapCache.setReferenceSnapPoints(getReferenceSnapPoints(this.scene.getNonDeletedElements(), selectedElements, this.state));
+            SnapCache.setReferenceSnapPoints(getReferenceSnapPoints(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));
         }
     }
     maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {
@@ -4419,7 +4528,7 @@ class App extends React.Component {
             selectedElements,
         }) &&
             (recomputeAnyways || !SnapCache.getVisibleGaps())) {
-            SnapCache.setVisibleGaps(getVisibleGaps(this.scene.getNonDeletedElements(), selectedElements, this.state));
+            SnapCache.setVisibleGaps(getVisibleGaps(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));
         }
     }
     onKeyDownFromPointerDownHandler(pointerDownState) {
@@ -4462,7 +4571,7 @@ class App extends React.Component {
                 return;
             }
             if (this.state.activeTool.type === "laser") {
-                this.laserPathManager.addPointToPath(pointerCoords.x, pointerCoords.y);
+                this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);
             }
             const [gridX, gridY] = getGridPoint(pointerCoords.x, pointerCoords.y, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
             // for arrows/lines, don't start dragging until a given threshold
@@ -4483,10 +4592,11 @@ class App extends React.Component {
                     return true;
                 }
             }
+            const elementsMap = this.scene.getNonDeletedElementsMap();
             if (this.state.selectedLinearElement) {
                 const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;
-                if (LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state)) {
-                    const ret = LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[KEYS.CTRL_OR_CMD]);
+                if (LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, elementsMap)) {
+                    const ret = LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[KEYS.CTRL_OR_CMD], elementsMap);
                     if (!ret) {
                         return;
                     }
@@ -4521,7 +4631,7 @@ class App extends React.Component {
                 }
                 const didDrag = LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {
                     this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);
-                }, linearElementEditor);
+                }, linearElementEditor, this.scene.getNonDeletedElementsMap());
                 if (didDrag) {
                     pointerDownState.lastCoords.x = pointerCoords.x;
                     pointerDownState.lastCoords.y = pointerCoords.y;
@@ -4602,7 +4712,7 @@ class App extends React.Component {
                     // it snaps to its position if previously snapped already.
                     this.maybeCacheVisibleGaps(event, selectedElements);
                     this.maybeCacheReferenceSnapPoints(event, selectedElements);
-                    const { snapOffset, snapLines } = snapDraggedElements(getSelectedElements(originalElements, this.state), dragOffset, this.state, event);
+                    const { snapOffset, snapLines } = snapDraggedElements(originalElements, dragOffset, this.state, event, this.scene.getNonDeletedElementsMap());
                     this.setState({ snapLines });
                     // when we're editing the name of a frame, we want the user to be
                     // able to select and interact with the text input
@@ -4720,7 +4830,7 @@ class App extends React.Component {
                 const elements = this.scene.getNonDeletedElements();
                 // box-select line editor points
                 if (this.state.editingLinearElement) {
-                    LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this));
+                    LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap());
                     // regular box-select
                 }
                 else {
@@ -4739,7 +4849,7 @@ class App extends React.Component {
                             shouldReuseSelection = false;
                         }
                     }
-                    const elementsWithinSelection = getElementsWithinSelection(elements, draggingElement);
+                    const elementsWithinSelection = getElementsWithinSelection(elements, draggingElement, this.scene.getNonDeletedElementsMap());
                     this.setState((prevState) => {
                         const nextSelectedElementIds = {
                             ...(shouldReuseSelection && prevState.selectedElementIds),
@@ -4769,7 +4879,7 @@ class App extends React.Component {
                             // select linear element only when we haven't box-selected anything else
                             selectedLinearElement: elementsWithinSelection.length === 1 &&
                                 isLinearElement(elementsWithinSelection[0])
-                                ? new LinearElementEditor(elementsWithinSelection[0], this.scene)
+                                ? new LinearElementEditor(elementsWithinSelection[0])
                                 : null,
                             showHyperlinkPopup: elementsWithinSelection.length === 1 &&
                                 (elementsWithinSelection[0].link ||
@@ -4833,6 +4943,7 @@ class App extends React.Component {
             this.setState({
                 selectedElementsAreBeingDragged: false,
             });
+            const elementsMap = this.scene.getNonDeletedElementsMap();
             // Handle end of dragging a point of a linear element, might close a loop
             // and sets binding element
             if (this.state.editingLinearElement) {
@@ -4842,7 +4953,7 @@ class App extends React.Component {
                     this.actionManager.executeAction(actionFinalize);
                 }
                 else {
-                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state);
+                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this.scene.getNonDeletedElements(), elementsMap);
                     if (editingLinearElement !== this.state.editingLinearElement) {
                         this.setState({
                             editingLinearElement,
@@ -4861,11 +4972,11 @@ class App extends React.Component {
                     }
                 }
                 else {
-                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state);
+                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this.scene.getNonDeletedElements(), elementsMap);
                     const { startBindingElement, endBindingElement } = linearElementEditor;
                     const element = this.scene.getElement(linearElementEditor.elementId);
                     if (isBindingElement(element)) {
-                        bindOrUnbindLinearElement(element, startBindingElement, endBindingElement);
+                        bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap);
                     }
                     if (linearElementEditor !== this.state.selectedLinearElement) {
                         this.setState({
@@ -4886,6 +4997,7 @@ class App extends React.Component {
             if (this.state.pendingImageElementId) {
                 this.setState({ pendingImageElementId: null });
             }
+            this.props?.onPointerUp?.(activeTool, pointerDownState);
             this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);
             if (draggingElement?.type === "freedraw") {
                 const pointerCoords = viewportCoordsToSceneCoords(childEvent, this.state);
@@ -4952,7 +5064,7 @@ class App extends React.Component {
                 else if (pointerDownState.drag.hasOccurred && !multiElement) {
                     if (isBindingEnabled(this.state) &&
                         isBindingElement(draggingElement, false)) {
-                        maybeBindLinearElement(draggingElement, this.state, this.scene, pointerCoords);
+                        maybeBindLinearElement(draggingElement, this.state, this.scene, pointerCoords, elementsMap);
                     }
                     this.setState({ suggestedBindings: [], startBoundElement: null });
                     if (!activeTool.locked) {
@@ -4966,7 +5078,7 @@ class App extends React.Component {
                                 ...prevState.selectedElementIds,
                                 [draggingElement.id]: true,
                             }, prevState),
-                            selectedLinearElement: new LinearElementEditor(draggingElement, this.scene),
+                            selectedLinearElement: new LinearElementEditor(draggingElement),
                         }));
                     }
                     else {
@@ -4999,15 +5111,16 @@ class App extends React.Component {
                         this.state.selectedLinearElement.isDragging) {
                         const linearElement = this.scene.getElement(this.state.selectedLinearElement.elementId);
                         if (linearElement?.frameId) {
-                            const frame = getContainingFrame(linearElement);
+                            const frame = getContainingFrame(linearElement, elementsMap);
                             if (frame && linearElement) {
-                                if (!elementOverlapsWithFrame(linearElement, frame)) {
+                                if (!elementOverlapsWithFrame(linearElement, frame, this.scene.getNonDeletedElementsMap())) {
                                     // remove the linear element from all groups
                                     // before removing it from the frame as well
                                     mutateElement(linearElement, {
                                         groupIds: [],
                                     });
-                                    this.scene.replaceAllElements(removeElementsFromFrame(this.scene.getElementsIncludingDeleted(), [linearElement], this.state));
+                                    removeElementsFromFrame([linearElement], this.scene.getNonDeletedElementsMap());
+                                    this.scene.informMutation();
                                 }
                             }
                         }
@@ -5016,7 +5129,7 @@ class App extends React.Component {
                         // update the relationships between selected elements and frames
                         const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);
                         const selectedElements = this.scene.getSelectedElements(this.state);
-                        let nextElements = this.scene.getElementsIncludingDeleted();
+                        let nextElements = this.scene.getElementsMapIncludingDeleted();
                         const updateGroupIdsAfterEditingGroup = (elements) => {
                             if (elements.length > 0) {
                                 for (const element of elements) {
@@ -5059,8 +5172,8 @@ class App extends React.Component {
                     }
                 }
                 if (isFrameLikeElement(draggingElement)) {
-                    const elementsInsideFrame = getElementsInNewFrame(this.scene.getElementsIncludingDeleted(), draggingElement);
-                    this.scene.replaceAllElements(addElementsToFrame(this.scene.getElementsIncludingDeleted(), elementsInsideFrame, draggingElement));
+                    const elementsInsideFrame = getElementsInNewFrame(this.scene.getElementsIncludingDeleted(), draggingElement, this.scene.getNonDeletedElementsMap());
+                    this.scene.replaceAllElements(addElementsToFrame(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, draggingElement));
                 }
                 mutateElement(draggingElement, getNormalizedDimensions(draggingElement));
             }
@@ -5079,7 +5192,7 @@ class App extends React.Component {
                     .getSelectedElements(this.state)
                     .filter((element) => isFrameLikeElement(element));
                 for (const frame of selectedFrames) {
-                    nextElements = replaceAllElementsInFrame(nextElements, getElementsInResizingFrame(this.scene.getElementsIncludingDeleted(), frame, this.state), frame, this.state);
+                    nextElements = replaceAllElementsInFrame(nextElements, getElementsInResizingFrame(this.scene.getElementsIncludingDeleted(), frame, this.state, elementsMap), frame, this);
                 }
                 this.scene.replaceAllElements(nextElements);
             }
@@ -5093,13 +5206,14 @@ class App extends React.Component {
                 // the one we've hit
                 if (selectedELements.length === 1) {
                     this.setState({
-                        selectedLinearElement: new LinearElementEditor(hitElement, this.scene),
+                        selectedLinearElement: new LinearElementEditor(hitElement),
                     });
                 }
             }
             const pointerStart = this.lastPointerDownEvent;
             const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;
             if (isEraserActive(this.state) && pointerStart && pointerEnd) {
+                this.eraserTrail.endPath();
                 const draggedDistance = distance2d(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);
                 if (draggedDistance === 0) {
                     const scenePointer = viewportCoordsToSceneCoords({
@@ -5107,16 +5221,13 @@ class App extends React.Component {
                         clientY: pointerEnd.clientY,
                     }, this.state);
                     const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);
-                    hitElements.forEach((hitElement) => (pointerDownState.elementIdsToErase[hitElement.id] = {
-                        erase: true,
-                        opacity: hitElement.opacity,
-                    }));
+                    hitElements.forEach((hitElement) => this.elementsPendingErasure.add(hitElement.id));
                 }
-                this.eraseElements(pointerDownState);
+                this.eraseElements();
                 return;
             }
-            else if (Object.keys(pointerDownState.elementIdsToErase).length) {
-                this.restoreReadyToEraseElements(pointerDownState);
+            else if (this.elementsPendingErasure.size) {
+                this.restoreReadyToEraseElements();
             }
             if (hitElement &&
                 !pointerDownState.drag.hasOccurred &&
@@ -5168,7 +5279,7 @@ class App extends React.Component {
                                     // set selectedLinearElement only if thats the only element selected
                                     selectedLinearElement: newSelectedElements.length === 1 &&
                                         isLinearElement(newSelectedElements[0])
-                                        ? new LinearElementEditor(newSelectedElements[0], this.scene)
+                                        ? new LinearElementEditor(newSelectedElements[0])
                                         : prevState.selectedLinearElement,
                                 };
                             });
@@ -5222,7 +5333,7 @@ class App extends React.Component {
                             // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
                             // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
                             prevState.selectedLinearElement?.elementId !== hitElement.id
-                            ? new LinearElementEditor(hitElement, this.scene)
+                            ? new LinearElementEditor(hitElement)
                             : prevState.selectedLinearElement,
                     }));
                 }
@@ -5230,7 +5341,7 @@ class App extends React.Component {
             if (!pointerDownState.drag.hasOccurred &&
                 !this.state.isResizing &&
                 ((hitElement &&
-                    isHittingElementBoundingBoxWithoutHittingElement(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y)) ||
+                    isHittingElementBoundingBoxWithoutHittingElement(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y, this.scene.getNonDeletedElementsMap())) ||
                     (!hitElement &&
                         pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements))) {
                 if (this.state.editingLinearElement) {
@@ -5266,12 +5377,12 @@ class App extends React.Component {
                 this.history.resumeRecording();
             }
             if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
-                (isBindingEnabled(this.state)
-                    ? bindOrUnbindSelectedElements
-                    : unbindLinearElements)(this.scene.getSelectedElements(this.state));
+                isBindingEnabled(this.state)
+                    ? bindOrUnbindSelectedElements(this.scene.getSelectedElements(this.state), this.scene.getNonDeletedElements(), elementsMap)
+                    : unbindLinearElements(this.scene.getSelectedElements(this.state), elementsMap);
             }
             if (activeTool.type === "laser") {
-                this.laserPathManager.endPath();
+                this.laserTrails.endPath();
                 return;
             }
             if (!activeTool.locked && activeTool.type !== "freedraw") {
@@ -5301,52 +5412,27 @@ class App extends React.Component {
             }
         });
     }
-    restoreReadyToEraseElements = (pointerDownState) => {
-        const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
-            if (pointerDownState.elementIdsToErase[ele.id] &&
-                pointerDownState.elementIdsToErase[ele.id].erase) {
-                return newElementWith(ele, {
-                    opacity: pointerDownState.elementIdsToErase[ele.id].opacity,
-                });
-            }
-            else if (isBoundToContainer(ele) &&
-                pointerDownState.elementIdsToErase[ele.containerId] &&
-                pointerDownState.elementIdsToErase[ele.containerId].erase) {
-                return newElementWith(ele, {
-                    opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity,
-                });
-            }
-            else if (ele.frameId &&
-                pointerDownState.elementIdsToErase[ele.frameId] &&
-                pointerDownState.elementIdsToErase[ele.frameId].erase) {
-                return newElementWith(ele, {
-                    opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity,
-                });
-            }
-            return ele;
-        });
-        this.scene.replaceAllElements(elements);
+    restoreReadyToEraseElements = () => {
+        this.elementsPendingErasure = new Set();
+        this.onSceneUpdated();
     };
-    eraseElements = (pointerDownState) => {
+    eraseElements = () => {
+        let didChange = false;
         const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
-            if (pointerDownState.elementIdsToErase[ele.id] &&
-                pointerDownState.elementIdsToErase[ele.id].erase) {
-                return newElementWith(ele, { isDeleted: true });
-            }
-            else if (isBoundToContainer(ele) &&
-                pointerDownState.elementIdsToErase[ele.containerId] &&
-                pointerDownState.elementIdsToErase[ele.containerId].erase) {
-                return newElementWith(ele, { isDeleted: true });
-            }
-            else if (ele.frameId &&
-                pointerDownState.elementIdsToErase[ele.frameId] &&
-                pointerDownState.elementIdsToErase[ele.frameId].erase) {
+            if (this.elementsPendingErasure.has(ele.id) ||
+                (ele.frameId && this.elementsPendingErasure.has(ele.frameId)) ||
+                (isBoundToContainer(ele) &&
+                    this.elementsPendingErasure.has(ele.containerId))) {
+                didChange = true;
                 return newElementWith(ele, { isDeleted: true });
             }
             return ele;
         });
-        this.history.resumeRecording();
-        this.scene.replaceAllElements(elements);
+        this.elementsPendingErasure = new Set();
+        if (didChange) {
+            this.history.resumeRecording();
+            this.scene.replaceAllElements(elements);
+        }
     };
     initializeImage = async ({ imageFile, imageElement: _imageElement, showCursorImagePreview = false, }) => {
         // at this point this should be guaranteed image file, but we do this check
@@ -5470,9 +5556,18 @@ class App extends React.Component {
         // mustn't be larger than 128 px
         // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
         const cursorImageSizePx = 96;
-        const imagePreview = await resizeImageFile(imageFile, {
-            maxWidthOrHeight: cursorImageSizePx,
-        });
+        let imagePreview;
+        try {
+            imagePreview = await resizeImageFile(imageFile, {
+                maxWidthOrHeight: cursorImageSizePx,
+            });
+        }
+        catch (e) {
+            if (e.cause === "UNSUPPORTED") {
+                throw new Error(t("errors.unsupportedFileType"));
+            }
+            throw e;
+        }
         let previewDataURL = await getDataURL(imagePreview);
         // SVG cannot be resized via `resizeImageFile` so we resize by rendering to
         // a small canvas
@@ -5627,7 +5722,7 @@ class App extends React.Component {
         }
     };
     maybeSuggestBindingAtCursor = (pointerCoords) => {
-        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene);
+        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
         this.setState({
             suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : [],
         });
@@ -5642,7 +5737,7 @@ class App extends React.Component {
             return;
         }
         const suggestedBindings = pointerCoords.reduce((acc, coords) => {
-            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene);
+            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
             if (hoveredBindableElement != null &&
                 !isLinearElementSimpleAndAlreadyBound(linearElement, oppositeBindingBoundElement?.id, hoveredBindableElement)) {
                 acc.push(hoveredBindableElement);
@@ -5655,7 +5750,7 @@ class App extends React.Component {
         if (selectedElements.length > 50) {
             return;
         }
-        const suggestedBindings = getEligibleElementsForBinding(selectedElements);
+        const suggestedBindings = getEligibleElementsForBinding(selectedElements, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
         this.setState({ suggestedBindings });
     }
     clearSelection(hitElement) {
@@ -5722,8 +5817,9 @@ class App extends React.Component {
                         return;
                     }
                     catch (error) {
+                        // Don't throw for image scene daa
                         if (error.name !== "EncodingError") {
-                            throw error;
+                            throw new Error(t("alerts.couldNotLoadInvalidFile"));
                         }
                     }
                 }
@@ -5784,7 +5880,32 @@ class App extends React.Component {
     loadFileToCanvas = async (file, fileHandle) => {
         file = await normalizeFile(file);
         try {
-            const ret = await loadSceneOrLibraryFromBlob(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);
+            let ret;
+            try {
+                ret = await loadSceneOrLibraryFromBlob(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);
+            }
+            catch (error) {
+                const imageSceneDataError = error instanceof ImageSceneDataError;
+                if (imageSceneDataError &&
+                    error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" &&
+                    !this.isToolSupported("image")) {
+                    this.setState({
+                        isLoading: false,
+                        errorMessage: t("errors.imageToolNotSupported"),
+                    });
+                    return;
+                }
+                const errorMessage = imageSceneDataError
+                    ? t("alerts.cannotRestoreFromImage")
+                    : t("alerts.couldNotLoadInvalidFile");
+                this.setState({
+                    isLoading: false,
+                    errorMessage,
+                });
+            }
+            if (!ret) {
+                return;
+            }
             if (ret.type === MIME_TYPES.excalidraw) {
                 this.setState({ isLoading: true });
                 this.syncActionResult({
@@ -5811,15 +5932,6 @@ class App extends React.Component {
             }
         }
         catch (error) {
-            if (error instanceof ImageSceneDataError &&
-                error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" &&
-                !this.isToolSupported("image")) {
-                this.setState({
-                    isLoading: false,
-                    errorMessage: t("errors.imageToolNotSupported"),
-                });
-                return;
-            }
             this.setState({ isLoading: false, errorMessage: error.message });
         }
     };
@@ -5856,7 +5968,7 @@ class App extends React.Component {
                         selectedElementIds: { [element.id]: true },
                     }, this.scene.getNonDeletedElements(), this.state, this),
                     selectedLinearElement: isLinearElement(element)
-                        ? new LinearElementEditor(element, this.scene)
+                        ? new LinearElementEditor(element)
                         : null,
                 }
                 : this.state),
@@ -5893,7 +6005,7 @@ class App extends React.Component {
             }, {
                 x: gridX - pointerDownState.originInGrid.x,
                 y: gridY - pointerDownState.originInGrid.y,
-            });
+            }, this.scene.getNonDeletedElementsMap());
             gridX += snapOffset.x;
             gridY += snapOffset.y;
             this.setState({
@@ -5907,7 +6019,7 @@ class App extends React.Component {
             if (this.state.activeTool.type === TOOL_TYPE.frame ||
                 this.state.activeTool.type === TOOL_TYPE.magicframe) {
                 this.setState({
-                    elementsToHighlight: getElementsInResizingFrame(this.scene.getNonDeletedElements(), draggingElement, this.state),
+                    elementsToHighlight: getElementsInResizingFrame(this.scene.getNonDeletedElements(), draggingElement, this.state, this.scene.getNonDeletedElementsMap()),
                 });
             }
         }
@@ -5956,13 +6068,13 @@ class App extends React.Component {
                 snapLines,
             });
         }
-        if (transformElements(pointerDownState, transformHandleType, selectedElements, pointerDownState.resize.arrowDirection, shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.length === 1 && isImageElement(selectedElements[0])
+        if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.length === 1 && isImageElement(selectedElements[0])
             ? !shouldMaintainAspectRatio(event)
-            : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y, this.state)) {
+            : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {
             this.maybeSuggestBindingForAll(selectedElements);
             const elementsToHighlight = new Set();
             selectedFrames.forEach((frame) => {
-                getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state).forEach((element) => elementsToHighlight.add(element));
+                getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach((element) => elementsToHighlight.add(element));
             });
             this.setState({
                 elementsToHighlight: [...elementsToHighlight],
@@ -6095,7 +6207,7 @@ class App extends React.Component {
         if (container) {
             let elementCenterX = container.x + container.width / 2;
             let elementCenterY = container.y + container.height / 2;
-            const elementCenter = getContainerCenter(container, appState);
+            const elementCenter = getContainerCenter(container, appState, this.scene.getNonDeletedElementsMap());
             if (elementCenter) {
                 elementCenterX = elementCenter.x;
                 elementCenterY = elementCenter.y;
@@ -6180,18 +6292,21 @@ class App extends React.Component {
         this.setAppState({});
     }
 }
-if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
-    window.h = window.h || {};
-    Object.defineProperties(window.h, {
-        elements: {
-            configurable: true,
-            get() {
-                return this.app?.scene.getElementsIncludingDeleted();
-            },
-            set(elements) {
-                return this.app?.scene.replaceAllElements(elements);
+export const createTestHook = () => {
+    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+        window.h = window.h || {};
+        Object.defineProperties(window.h, {
+            elements: {
+                configurable: true,
+                get() {
+                    return this.app?.scene.getElementsIncludingDeleted();
+                },
+                set(elements) {
+                    return this.app?.scene.replaceAllElements(elements);
+                },
             },
-        },
-    });
-}
+        });
+    }
+};
+createTestHook();
 export default App;