@dwelle/excalidraw 0.5.0-da1c822 → 0.5.0-e8bcd96

package/dist/excalidraw/components/App.js

@@ -10,32 +10,34 @@ import { ActionManager } from "../actions/manager";
 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_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, supportsResizeObserver, } from "../constants";
+import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
+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, supportsResizeObserver, DEFAULT_COLLISION_THRESHOLD, } from "../constants";
 import { exportAsImage, 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, transformElements, updateTextElement, redrawTextBoundingBox, } from "../element";
-import { bindOrUnbindLinearElement, bindOrUnbindSelectedElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getEligibleElementsForBinding, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, unbindLinearElements, updateBoundElements, } from "../element/binding";
+import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, transformElements, refreshTextDimensions, redrawTextBoundingBox, getElementAbsoluteCoords, } from "../element";
+import { bindOrUnbindLinearElement, bindOrUnbindLinearElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, updateBoundElements, getSuggestedBindingsForArrows, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
 import { deepCopyElement, duplicateElements, newFrameElement, newFreeDrawElement, newEmbeddableElement, newMagicFrameElement, newIframeElement, } from "../element/newElement";
-import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isFrameElement, isIframeElement, isIframeLikeElement, isMagicFrameElement, } from "../element/typeChecks";
+import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isFrameElement, isIframeElement, isIframeLikeElement, isMagicFrameElement, isTextBindableContainer, } from "../element/typeChecks";
 import { getCenter, getDistance } from "../gesture";
 import { editGroupForSelectedElement, getElementsInGroup, getSelectedGroupIdForElement, getSelectedGroupIds, isElementInGroup, isSelectedViaGroup, selectGroupsForSelectedElements, } from "../groups";
-import History from "../history";
+import { History } from "../history";
 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 { clearRenderCache } from "../renderer/renderElement";
-import { calculateScrollCenter, getElementsAtPosition, getElementsWithinSelection, getNormalizedZoom, getSelectedElements, hasBackground, isSomeElementSelected, } from "../scene";
+import { calculateScrollCenter, 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, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, } from "../utils";
+import { getClosedCurveShape, getCurveShape, getEllipseShape, getFreedrawShape, getPolygonShape, getSelectionBoxShape, } from "../../utils/geometry/shape";
+import { isPointInShape } from "../../utils/collision";
+import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, isShallowEqual, arrayToMap, } from "../utils";
 import { createSrcDoc, embeddableURLValidator, maybeParseEmbedSrc, getEmbedLink, } from "../element/embeddable";
-import { ContextMenu, CONTEXT_MENU_SEPARATOR, } from "./ContextMenu";
+import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
@@ -43,8 +45,7 @@ import { dataURLToFile, generateIdFromFile, getDataURL, getFileFromEvent, ImageU
 import { getInitializedImageElements, loadHTMLImageElement, normalizeSVG, updateImageCache as _updateImageCache, } from "../element/image";
 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 { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getDefaultLineHeight, getLineHeightInPx, isMeasureTextSupported, isValidTextContainer, } from "../element/textElement";
 import { showHyperlinkTooltip, hideHyperlinkToolip, Hyperlink, } from "../components/hyperlink/Hyperlink";
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
@@ -62,7 +63,7 @@ import { getSnapLinesAtPointer, snapDraggedElements, isActiveToolNonLinearSnappa
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { activeEyeDropperAtom } from "./EyeDropper";
-import { convertToExcalidrawElements, } from "../data/transform";
+import { convertToExcalidrawElements } from "../data/transform";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
@@ -78,15 +79,19 @@ import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import FollowMode from "./FollowMode/FollowMode";
+import { Store, StoreAction } from "../store";
 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 { hitElementBoundText, hitElementBoundingBoxOnly, hitElementItself, shouldTestInside, } from "../element/collision";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
+import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
 import { isPointHittingLink, isPointHittingLinkIcon, } from "./hyperlink/helpers";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
 const deviceContextInitialValue = {
@@ -166,6 +171,7 @@ class App extends React.Component {
     library;
     libraryItemsFromStorage;
     id;
+    store;
     history;
     excalidrawContainerValue;
     files = {};
@@ -237,6 +243,8 @@ class App extends React.Component {
         this.canvas = document.createElement("canvas");
         this.rc = rough.canvas(this.canvas);
         this.renderer = new Renderer(this.scene);
+        this.store = new Store();
+        this.history = new History();
         if (excalidrawAPI) {
             const api = {
                 updateScene: this.updateScene,
@@ -281,14 +289,11 @@ class App extends React.Component {
             container: this.excalidrawContainerRef.current,
             id: this.id,
         };
-        this.fonts = new Fonts({
-            scene: this.scene,
-            onSceneUpdated: this.onSceneUpdated,
-        });
+        this.fonts = new Fonts({ scene: this.scene });
         this.history = new History();
         this.actionManager.registerAll(actions);
-        this.actionManager.registerAction(createUndoAction(this.history));
-        this.actionManager.registerAction(createRedoAction(this.history));
+        this.actionManager.registerAction(createUndoAction(this.history, this.store));
+        this.actionManager.registerAction(createRedoAction(this.history, this.store));
     }
     onWindowMessage(event) {
         if (event.origin !== "https://player.vimeo.com" &&
@@ -439,7 +444,7 @@ class App extends React.Component {
             return false;
         });
         if (updated) {
-            this.scene.informMutation();
+            this.scene.triggerUpdate();
         }
         // GC
         this.iFrameRefs.forEach((ref, id) => {
@@ -798,9 +803,9 @@ class App extends React.Component {
     render() {
         const selectedElements = this.scene.getSelectedElements(this.state);
         const { renderTopRightUI, renderCustomStats } = this.props;
-        const versionNonce = this.scene.getVersionNonce();
+        const sceneNonce = this.scene.getSceneNonce();
         const { elementsMap, visibleElements } = this.renderer.getRenderableElements({
-            versionNonce,
+            sceneNonce,
             zoom: this.state.zoom,
             offsetLeft: this.state.offsetLeft,
             offsetTop: this.state.offsetTop,
@@ -872,14 +877,14 @@ class App extends React.Component {
                                                                 this.focusContainer();
                                                                 callback?.();
                                                             });
-                                                        } })), _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: {
+                                                        } })), _jsx(StaticCanvas, { canvas: this.canvas, rc: this.rc, elementsMap: elementsMap, allElementsMap: allElementsMap, visibleElements: visibleElements, sceneNonce: sceneNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderConfig: {
                                                             imageCache: this.imageCache,
                                                             isExporting: false,
                                                             renderGrid: true,
                                                             canvasBackgroundColor: this.state.viewBackgroundColor,
                                                             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()] }) }) }) }) }) }) }) }));
+                                                        } }), _jsx(InteractiveCanvas, { containerRef: this.excalidrawContainerRef, canvas: this.interactiveCanvas, elementsMap: elementsMap, visibleElements: visibleElements, selectedElements: selectedElements, sceneNonce: sceneNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, device: this.device, 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();
@@ -937,7 +942,7 @@ class App extends React.Component {
             mutateElement(frameElement, { customData: { generationData: data } }, false);
         }
         this.magicGenerations.set(frameElement.id, data);
-        this.onSceneUpdated();
+        this.triggerRender();
     };
     getTextFromElements(elements) {
         const text = elements
@@ -1139,7 +1144,7 @@ class App extends React.Component {
                     opacity: 100,
                     locked: false,
                 });
-                this.scene.addNewElement(frame);
+                this.scene.insertElement(frame);
                 for (const child of selectedElements) {
                     mutateElement(child, { frameId: frame.id });
                 }
@@ -1163,13 +1168,13 @@ class App extends React.Component {
                     if (shouldUpdateStrokeColor) {
                         this.syncActionResult({
                             appState: { ...this.state, currentItemStrokeColor: color },
-                            commitToHistory: true,
+                            storeAction: StoreAction.CAPTURE,
                         });
                     }
                     else {
                         this.syncActionResult({
                             appState: { ...this.state, currentItemBackgroundColor: color },
-                            commitToHistory: true,
+                            storeAction: StoreAction.CAPTURE,
                         });
                     }
                 }
@@ -1183,6 +1188,7 @@ class App extends React.Component {
                             }
                             return el;
                         }),
+                        storeAction: StoreAction.CAPTURE,
                     });
                 }
             },
@@ -1202,10 +1208,13 @@ class App extends React.Component {
                     editingElement = element;
                 }
             });
-            this.scene.replaceAllElements(actionResult.elements);
-            if (actionResult.commitToHistory) {
-                this.history.resumeRecording();
+            if (actionResult.storeAction === StoreAction.UPDATE) {
+                this.store.shouldUpdateSnapshot();
+            }
+            else if (actionResult.storeAction === StoreAction.CAPTURE) {
+                this.store.shouldCaptureIncrement();
             }
+            this.scene.replaceAllElements(actionResult.elements);
         }
         if (actionResult.files) {
             this.files = actionResult.replaceFiles
@@ -1214,8 +1223,11 @@ class App extends React.Component {
             this.addNewImagesToImageCache();
         }
         if (actionResult.appState || editingElement || this.state.contextMenu) {
-            if (actionResult.commitToHistory) {
-                this.history.resumeRecording();
+            if (actionResult.storeAction === StoreAction.UPDATE) {
+                this.store.shouldUpdateSnapshot();
+            }
+            else if (actionResult.storeAction === StoreAction.CAPTURE) {
+                this.store.shouldCaptureIncrement();
             }
             let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
             let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
@@ -1254,10 +1266,6 @@ class App extends React.Component {
                     name,
                     errorMessage,
                 });
-            }, () => {
-                if (actionResult.syncHistory) {
-                    this.history.setCurrentState(this.state, this.scene.getElementsIncludingDeleted());
-                }
             });
         }
     });
@@ -1275,6 +1283,9 @@ class App extends React.Component {
     resetHistory = () => {
         this.history.clear();
     };
+    resetStore = () => {
+        this.store.clear();
+    };
     /**
      * Resets scene & history.
      * ! Do not use to clear scene user action !
@@ -1286,6 +1297,7 @@ class App extends React.Component {
             isLoading: opts?.resetLoadingState ? false : state.isLoading,
             theme: this.state.theme,
         }));
+        this.resetStore();
         this.resetHistory();
     });
     initializeScene = async () => {
@@ -1360,6 +1372,7 @@ class App extends React.Component {
         // text elements on canvas, and rerender them once done. This also
         // seems faster even in browsers that do fire the loadingdone event.
         this.fonts.loadFontsForElements(scene.elements);
+        this.resetStore();
         if (initialData?.scrollX != null) {
             scene.appState.scrollX = initialData.scrollX;
         }
@@ -1369,7 +1382,7 @@ class App extends React.Component {
         this.resetHistory();
         this.syncActionResult({
             ...scene,
-            commitToHistory: true,
+            storeAction: StoreAction.UPDATE,
         });
     };
     isMobileBreakpoint = (width, height) => {
@@ -1440,9 +1453,16 @@ class App extends React.Component {
                     configurable: true,
                     value: this.history,
                 },
+                store: {
+                    configurable: true,
+                    value: this.store,
+                },
             });
         }
-        this.scene.addCallback(this.onSceneUpdated);
+        this.store.onStoreIncrementEmitter.on((increment) => {
+            this.history.record(increment.elementsChange, increment.appStateChange);
+        });
+        this.scene.onUpdate(this.triggerRender);
         this.addEventListeners();
         if (this.props.autoFocus && this.excalidrawContainerRef.current) {
             this.focusContainer();
@@ -1480,6 +1500,7 @@ class App extends React.Component {
     componentWillUnmount() {
         this.renderer.destroy();
         this.scene = new Scene();
+        this.fonts = new Fonts({ scene: this.scene });
         this.renderer = new Renderer(this.scene);
         this.files = {};
         this.imageCache.clear();
@@ -1491,6 +1512,7 @@ class App extends React.Component {
         this.laserTrails.stop();
         this.eraserTrail.stop();
         this.onChangeEmitter.clear();
+        this.store.onStoreIncrementEmitter.clear();
         ShapeCache.destroy();
         SnapCache.destroy();
         clearRenderCache();
@@ -1574,7 +1596,8 @@ class App extends React.Component {
     componentDidUpdate(prevProps, prevState) {
         this.updateEmbeddables();
         const elements = this.scene.getElementsIncludingDeleted();
-        const elementsMap = this.scene.getNonDeletedElementsMap();
+        const elementsMap = this.scene.getElementsMapIncludingDeleted();
+        const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();
         if (!this.state.showWelcomeScreen && !elements.length) {
             this.setState({ showWelcomeScreen: true });
         }
@@ -1660,7 +1683,7 @@ class App extends React.Component {
         this.excalidrawContainerRef.current?.classList.toggle("theme--dark", this.state.theme === THEME.DARK);
         if (this.state.editingLinearElement &&
             !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {
-            // defer so that the commitToHistory flag isn't reset via current update
+            // defer so that the storeAction flag isn't reset via current update
             setTimeout(() => {
                 // execute only if the condition still holds when the deferred callback
                 // executes (it can be scheduled multiple times depending on how
@@ -1685,9 +1708,9 @@ class App extends React.Component {
             multiElement != null &&
             isBindingEnabled(this.state) &&
             isBindingElement(multiElement, false)) {
-            maybeBindLinearElement(multiElement, this.state, this.scene, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, elementsMap)), elementsMap);
+            maybeBindLinearElement(multiElement, this.state, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this);
         }
-        this.history.record(this.state, elements);
+        this.store.commit(elementsMap, this.state);
         // 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
@@ -1952,16 +1975,15 @@ class App extends React.Component {
         }), {
             randomizeSeed: !opts.retainSeed,
         });
-        const allElements = [
-            ...this.scene.getElementsIncludingDeleted(),
-            ...newElements,
-        ];
+        const prevElements = this.scene.getElementsIncludingDeleted();
+        const nextElements = [...prevElements, ...newElements];
+        syncMovedIndices(nextElements, arrayToMap(newElements));
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
         if (topLayerFrame) {
             const eligibleElements = filterElementsEligibleAsFrameChildren(newElements, topLayerFrame);
-            addElementsToFrame(allElements, eligibleElements, topLayerFrame);
+            addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
         }
-        this.scene.replaceAllElements(allElements);
+        this.scene.replaceAllElements(nextElements);
         newElements.forEach((newElement) => {
             if (isTextElement(newElement) && isBoundToContainer(newElement)) {
                 const container = getContainerElement(newElement, this.scene.getElementsMapIncludingDeleted());
@@ -1971,7 +1993,7 @@ class App extends React.Component {
         if (opts.files) {
             this.files = { ...this.files, ...opts.files };
         }
-        this.history.resumeRecording();
+        this.store.shouldCaptureIncrement();
         const nextElementsToSelect = excludeElementsInFramesFromSelection(newElements);
         this.setState({
             ...this.state,
@@ -2129,16 +2151,7 @@ class App extends React.Component {
         if (textElements.length === 0) {
             return;
         }
-        const frameId = textElements[0].frameId;
-        if (frameId) {
-            this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));
-        }
-        else {
-            this.scene.replaceAllElements([
-                ...this.scene.getElementsIncludingDeleted(),
-                ...textElements,
-            ]);
-        }
+        this.scene.insertElements(textElements);
         this.setState({
             selectedElementIds: makeNextSelectedElementIds(Object.fromEntries(textElements.map((el) => [el.id, true])), this.state),
         });
@@ -2154,7 +2167,7 @@ class App extends React.Component {
             });
             PLAIN_PASTE_TOAST_SHOWN = true;
         }
-        this.history.resumeRecording();
+        this.store.shouldCaptureIncrement();
     }
     setAppState = (state, callback) => {
         this.setState(state, callback);
@@ -2336,24 +2349,41 @@ class App extends React.Component {
                 ShapeCache.delete(element);
             }
         });
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
         this.addNewImagesToImageCache();
     });
     updateScene = withBatchedUpdates((sceneData) => {
-        if (sceneData.commitToHistory) {
-            this.history.resumeRecording();
+        const nextElements = syncInvalidIndices(sceneData.elements ?? []);
+        if (sceneData.storeAction && sceneData.storeAction !== StoreAction.NONE) {
+            const prevCommittedAppState = this.store.snapshot.appState;
+            const prevCommittedElements = this.store.snapshot.elements;
+            const nextCommittedAppState = sceneData.appState
+                ? Object.assign({}, prevCommittedAppState, sceneData.appState) // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`
+                : prevCommittedAppState;
+            const nextCommittedElements = sceneData.elements
+                ? this.store.filterUncomittedElements(this.scene.getElementsMapIncludingDeleted(), // Only used to detect uncomitted local elements
+                arrayToMap(nextElements))
+                : prevCommittedElements;
+            // WARN: store action always performs deep clone of changed elements, for ephemeral remote updates (i.e. remote dragging, resizing, drawing) we might consider doing something smarter
+            // do NOT schedule store actions (execute after re-render), as it might cause unexpected concurrency issues if not handled well
+            if (sceneData.storeAction === StoreAction.CAPTURE) {
+                this.store.captureIncrement(nextCommittedElements, nextCommittedAppState);
+            }
+            else if (sceneData.storeAction === StoreAction.UPDATE) {
+                this.store.updateSnapshot(nextCommittedElements, nextCommittedAppState);
+            }
         }
         if (sceneData.appState) {
             this.setState(sceneData.appState);
         }
         if (sceneData.elements) {
-            this.scene.replaceAllElements(sceneData.elements);
+            this.scene.replaceAllElements(nextElements);
         }
         if (sceneData.collaborators) {
             this.setState({ collaborators: sceneData.collaborators });
         }
     });
-    onSceneUpdated = () => {
+    triggerRender = () => {
         this.setState({});
     };
     /**
@@ -2521,7 +2551,9 @@ class App extends React.Component {
                     simultaneouslyUpdated: selectedElements,
                 });
             });
-            this.maybeSuggestBindingForAll(selectedElements);
+            this.setState({
+                suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
+            });
             event.preventDefault();
         }
         else if (event.key === KEYS.ENTER) {
@@ -2533,7 +2565,7 @@ class App extends React.Component {
                         if (!this.state.editingLinearElement ||
                             this.state.editingLinearElement.elementId !==
                                 selectedElements[0].id) {
-                            this.history.resumeRecording();
+                            this.store.shouldCaptureIncrement();
                             this.setState({
                                 editingLinearElement: new LinearElementEditor(selectedElement),
                             });
@@ -2659,11 +2691,7 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: true });
         }
         if (isArrowKey(event.key)) {
-            const selectedElements = this.scene.getSelectedElements(this.state);
-            const elementsMap = this.scene.getNonDeletedElementsMap();
-            isBindingEnabled(this.state)
-                ? bindOrUnbindSelectedElements(selectedElements, this.scene.getNonDeletedElements(), elementsMap)
-                : unbindLinearElements(selectedElements, elementsMap);
+            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             this.setState({ suggestedBindings: [] });
         }
     });
@@ -2695,6 +2723,9 @@ class App extends React.Component {
                 originSnapOffset: null,
                 activeEmbeddable: null,
             };
+            if (nextActiveTool.type === "freedraw") {
+                this.store.shouldCaptureIncrement();
+            }
             let nextState;
             if (nextActiveTool.type !== "selection") {
                 nextState = {
@@ -2811,15 +2842,16 @@ class App extends React.Component {
     });
     handleTextWysiwyg(element, { isExistingElement = false, }) {
         const elementsMap = this.scene.getElementsMapIncludingDeleted();
-        const updateElement = (text, originalText, isDeleted) => {
+        const updateElement = (nextOriginalText, 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, getContainerElement(_element, elementsMap), elementsMap, {
-                            text,
-                            isDeleted,
-                            originalText,
+                        return newElementWith(_element, {
+                            originalText: nextOriginalText,
+                            isDeleted: isDeleted ?? _element.isDeleted,
+                            // returns (wrapped) text and new dimensions
+                            ...refreshTextDimensions(_element, getContainerElement(_element, elementsMap), elementsMap, nextOriginalText),
                         });
                     }
                     return _element;
@@ -2839,15 +2871,15 @@ class App extends React.Component {
                     viewportY - this.state.offsetTop,
                 ];
             },
-            onChange: withBatchedUpdates((text) => {
-                updateElement(text, text, false);
+            onChange: withBatchedUpdates((nextOriginalText) => {
+                updateElement(nextOriginalText, false);
                 if (isNonDeletedElement(element)) {
                     updateBoundElements(element, elementsMap);
                 }
             }),
-            onSubmit: withBatchedUpdates(({ text, viaKeyboard, originalText }) => {
-                const isDeleted = !text.trim();
-                updateElement(text, originalText, isDeleted);
+            onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
+                const isDeleted = !nextOriginalText.trim();
+                updateElement(nextOriginalText, isDeleted);
                 // select the created text element only if submitting via keyboard
                 // (when submitting via click it should act as signal to deselect)
                 if (!isDeleted && viaKeyboard) {
@@ -2867,7 +2899,7 @@ class App extends React.Component {
                     ]);
                 }
                 if (!isDeleted || isExistingElement) {
-                    this.history.resumeRecording();
+                    this.store.shouldCaptureIncrement();
                 }
                 this.setState({
                     draggingElement: null,
@@ -2886,7 +2918,7 @@ class App extends React.Component {
         this.deselectElements();
         // do an initial update to re-initialize element position since we were
         // modifying element's x/y for sake of editor (case: syncing to remote)
-        updateElement(element.text, element.originalText, false);
+        updateElement(element.originalText, false);
     }
     deselectElements() {
         this.setState({
@@ -2905,6 +2937,57 @@ class App extends React.Component {
         }
         return null;
     }
+    /**
+     * get the pure geometric shape of an excalidraw element
+     * which is then used for hit detection
+     */
+    getElementShape(element) {
+        switch (element.type) {
+            case "rectangle":
+            case "diamond":
+            case "frame":
+            case "magicframe":
+            case "embeddable":
+            case "image":
+            case "iframe":
+            case "text":
+            case "selection":
+                return getPolygonShape(element);
+            case "arrow":
+            case "line": {
+                const roughShape = ShapeCache.get(element)?.[0] ??
+                    ShapeCache.generateElementShape(element, null)[0];
+                const [, , , , cx, cy] = getElementAbsoluteCoords(element, this.scene.getNonDeletedElementsMap());
+                return shouldTestInside(element)
+                    ? getClosedCurveShape(element, roughShape, [element.x, element.y], element.angle, [cx, cy])
+                    : getCurveShape(roughShape, [element.x, element.y], element.angle, [
+                        cx,
+                        cy,
+                    ]);
+            }
+            case "ellipse":
+                return getEllipseShape(element);
+            case "freedraw": {
+                const [, , , , cx, cy] = getElementAbsoluteCoords(element, this.scene.getNonDeletedElementsMap());
+                return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
+            }
+        }
+    }
+    getBoundTextShape(element) {
+        const boundTextElement = getBoundTextElement(element, this.scene.getNonDeletedElementsMap());
+        if (boundTextElement) {
+            if (element.type === "arrow") {
+                return this.getElementShape({
+                    ...boundTextElement,
+                    // arrow's bound text accurate position is not stored in the element's property
+                    // but rather calculated and returned from the following static method
+                    ...LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, this.scene.getNonDeletedElementsMap()),
+                });
+            }
+            return this.getElementShape(boundTextElement);
+        }
+        return null;
+    }
     getElementAtPosition(x, y, opts) {
         const allHitElements = this.getElementsAtPosition(x, y, opts?.includeBoundTextElement, opts?.includeLockedElements);
         if (allHitElements.length > 1) {
@@ -2918,9 +3001,20 @@ 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, this.scene.getNonDeletedElementsMap())
-                ? allHitElements[allHitElements.length - 2]
-                : elementWithHighestZIndex;
+            return hitElementItself({
+                x,
+                y,
+                element: elementWithHighestZIndex,
+                shape: this.getElementShape(elementWithHighestZIndex),
+                // when overlapping, we would like to be more precise
+                // this also avoids the need to update past tests
+                threshold: this.getElementHitThreshold() / 2,
+                frameNameBound: isFrameLikeElement(elementWithHighestZIndex)
+                    ? this.frameNameBoundsCache.get(elementWithHighestZIndex)
+                    : null,
+            })
+                ? elementWithHighestZIndex
+                : allHitElements[allHitElements.length - 2];
         }
         if (allHitElements.length === 1) {
             return allHitElements[0];
@@ -2928,15 +3022,17 @@ class App extends React.Component {
         return null;
     }
     getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {
-        const elements = includeBoundTextElement && includeLockedElements
+        const iframeLikes = [];
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        const elements = (includeBoundTextElement && includeLockedElements
             ? this.scene.getNonDeletedElements()
             : this.scene
                 .getNonDeletedElements()
                 .filter((element) => (includeLockedElements || !element.locked) &&
                 (includeBoundTextElement ||
-                    !(isTextElement(element) && element.containerId)));
-        const elementsMap = this.scene.getNonDeletedElementsMap();
-        return getElementsAtPosition(elements, (element) => hitTest(element, this.state, this.frameNameBoundsCache, x, y, elementsMap)).filter((element) => {
+                    !(isTextElement(element) && element.containerId))))
+            .filter((el) => this.hitElement(x, y, el))
+            .filter((element) => {
             // hitting a frame's element from outside the frame is not considered a hit
             const containingFrame = getContainingFrame(element, elementsMap);
             return containingFrame &&
@@ -2944,8 +3040,81 @@ class App extends React.Component {
                 this.state.frameRendering.clip
                 ? isCursorInFrame({ x, y }, containingFrame, elementsMap)
                 : true;
+        })
+            .filter((el) => {
+            // The parameter elements comes ordered from lower z-index to higher.
+            // We want to preserve that order on the returned array.
+            // Exception being embeddables which should be on top of everything else in
+            // terms of hit testing.
+            if (isIframeElement(el)) {
+                iframeLikes.push(el);
+                return false;
+            }
+            return true;
+        })
+            .concat(iframeLikes);
+        return elements;
+    }
+    getElementHitThreshold() {
+        return DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;
+    }
+    hitElement(x, y, element, considerBoundingBox = true) {
+        // if the element is selected, then hit test is done against its bounding box
+        if (considerBoundingBox &&
+            this.state.selectedElementIds[element.id] &&
+            shouldShowBoundingBox([element], this.state)) {
+            const selectionShape = getSelectionBoxShape(element, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold());
+            return isPointInShape([x, y], selectionShape);
+        }
+        // take bound text element into consideration for hit collision as well
+        const hitBoundTextOfElement = hitElementBoundText(x, y, this.getBoundTextShape(element));
+        if (hitBoundTextOfElement) {
+            return true;
+        }
+        return hitElementItself({
+            x,
+            y,
+            element,
+            shape: this.getElementShape(element),
+            threshold: this.getElementHitThreshold(),
+            frameNameBound: isFrameLikeElement(element)
+                ? this.frameNameBoundsCache.get(element)
+                : null,
         });
     }
+    getTextBindableContainerAtPosition(x, y) {
+        const elements = this.scene.getNonDeletedElements();
+        const selectedElements = this.scene.getSelectedElements(this.state);
+        if (selectedElements.length === 1) {
+            return isTextBindableContainer(selectedElements[0], false)
+                ? selectedElements[0]
+                : null;
+        }
+        let hitElement = null;
+        // We need to do hit testing from front (end of the array) to back (beginning of the array)
+        for (let index = elements.length - 1; index >= 0; --index) {
+            if (elements[index].isDeleted) {
+                continue;
+            }
+            const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], this.scene.getNonDeletedElementsMap());
+            if (isArrowElement(elements[index]) &&
+                hitElementItself({
+                    x,
+                    y,
+                    element: elements[index],
+                    shape: this.getElementShape(elements[index]),
+                    threshold: this.getElementHitThreshold(),
+                })) {
+                hitElement = elements[index];
+                break;
+            }
+            else if (x1 < x && x < x2 && y1 < y && y < y2) {
+                hitElement = elements[index];
+                break;
+            }
+        }
+        return isTextBindableContainer(hitElement, false) ? hitElement : null;
+    }
     startTextEditing = ({ sceneX, sceneY, insertAtParentCenter = true, container, }) => {
         let shouldBindToContainer = false;
         let parentCenterPosition = insertAtParentCenter &&
@@ -3044,7 +3213,7 @@ class App extends React.Component {
                 this.scene.insertElementAtIndex(element, containerIndex + 1);
             }
             else {
-                this.scene.addNewElement(element);
+                this.scene.insertElement(element);
             }
         }
         this.setState({
@@ -3069,7 +3238,7 @@ class App extends React.Component {
             if (event[KEYS.CTRL_OR_CMD] &&
                 (!this.state.editingLinearElement ||
                     this.state.editingLinearElement.elementId !== selectedElements[0].id)) {
-                this.history.resumeRecording();
+                this.store.shouldCaptureIncrement();
                 this.setState({
                     editingLinearElement: new LinearElementEditor(selectedElements[0]),
                 });
@@ -3084,6 +3253,7 @@ class App extends React.Component {
             const selectedGroupId = hitElement &&
                 getSelectedGroupIdForElement(hitElement, this.state.selectedGroupIds);
             if (selectedGroupId) {
+                this.store.shouldCaptureIncrement();
                 this.setState((prevState) => ({
                     ...prevState,
                     ...selectGroupsForSelectedElements({
@@ -3103,11 +3273,17 @@ class App extends React.Component {
                 });
                 return;
             }
-            const container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY, this.scene.getNonDeletedElementsMap());
+            const container = this.getTextBindableContainerAtPosition(sceneX, sceneY);
             if (container) {
                 if (hasBoundTextElement(container) ||
                     !isTransparent(container.backgroundColor) ||
-                    isHittingElementNotConsideringBoundingBox(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY], this.scene.getNonDeletedElementsMap())) {
+                    hitElementItself({
+                        x: sceneX,
+                        y: sceneY,
+                        element: container,
+                        shape: this.getElementShape(container),
+                        threshold: this.getElementHitThreshold(),
+                    })) {
                     const midPoint = getContainerCenter(container, this.state, this.scene.getNonDeletedElementsMap());
                     sceneX = midPoint.x;
                     sceneY = midPoint.y;
@@ -3381,15 +3557,23 @@ 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, this.scene.getNonDeletedElementsMap());
-            if (elementWithTransformHandleType &&
-                elementWithTransformHandleType.transformHandleType) {
-                setCursor(this.interactiveCanvas, getCursorForResizingElement(elementWithTransformHandleType));
-                return;
+            // for linear elements, we'd like to prioritize point dragging over edge resizing
+            // therefore, we update and check hovered point index first
+            if (this.state.selectedLinearElement) {
+                this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);
+            }
+            if (!this.state.selectedLinearElement ||
+                this.state.selectedLinearElement.hoverPointIndex === -1) {
+                const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);
+                if (elementWithTransformHandleType &&
+                    elementWithTransformHandleType.transformHandleType) {
+                    setCursor(this.interactiveCanvas, getCursorForResizingElement(elementWithTransformHandleType));
+                    return;
+                }
             }
         }
         else if (selectedElements.length > 1 && !isOverScrollBar) {
-            const transformHandleType = getTransformHandleTypeFromCoords(getCommonBounds(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType);
+            const transformHandleType = getTransformHandleTypeFromCoords(getCommonBounds(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.device);
             if (transformHandleType) {
                 setCursor(this.interactiveCanvas, getCursorForResizingElement({
                     transformHandleType,
@@ -3493,7 +3677,7 @@ class App extends React.Component {
             }
         };
         const distance = distance2d(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);
-        const threshold = 10 / this.state.zoom.value;
+        const threshold = this.getElementHitThreshold();
         const point = { ...pointerDownState.lastCoords };
         let samplingInterval = 0;
         while (samplingInterval <= distance) {
@@ -3529,7 +3713,7 @@ class App extends React.Component {
                 }
             }
             this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-            this.onSceneUpdated();
+            this.triggerRender();
         }
     };
     // set touch moving for mobile context menu
@@ -3539,30 +3723,29 @@ class App extends React.Component {
     handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {
         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], elementsMap)) {
+            if (hitElementItself({
+                x: scenePointerX,
+                y: scenePointerY,
+                element,
+                shape: this.getElementShape(element),
+            })) {
                 hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);
                 segmentMidPointHoveredCoords =
                     LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, { x: scenePointerX, y: scenePointerY }, this.state, this.scene.getNonDeletedElementsMap());
                 if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
                 }
-                else {
+                else if (this.hitElement(scenePointerX, scenePointerY, element)) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
                 }
             }
-            else if (shouldShowBoundingBox([element], this.state) &&
-                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, this.scene.getNonDeletedElementsMap())) {
+            else if (this.hitElement(scenePointerX, scenePointerY, element)) {
                 setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
             }
             if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {
@@ -3629,6 +3812,7 @@ class App extends React.Component {
                         return obj;
                     }, {}), this.state),
                 },
+                storeAction: StoreAction.UPDATE,
             });
             return;
         }
@@ -4071,8 +4255,11 @@ class App extends React.Component {
             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, this.scene.getNonDeletedElementsMap());
+            if (selectedElements.length === 1 &&
+                !this.state.editingLinearElement &&
+                !(this.state.selectedLinearElement &&
+                    this.state.selectedLinearElement.hoverPointIndex !== -1)) {
+                const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);
                 if (elementWithTransformHandleType != null) {
                     this.setState({
                         resizingElement: elementWithTransformHandleType.element,
@@ -4082,7 +4269,7 @@ class App extends React.Component {
                 }
             }
             else if (selectedElements.length > 1) {
-                pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(getCommonBounds(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);
+                pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(getCommonBounds(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.device);
             }
             if (pointerDownState.resize.handleType) {
                 pointerDownState.resize.isResizing = true;
@@ -4096,7 +4283,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, this.scene.getNonDeletedElements(), elementsMap);
+                    const ret = LinearElementEditor.handlePointerDown(event, this.state, this.store, pointerDownState.origin, linearElementEditor, this);
                     if (ret.hitElement) {
                         pointerDownState.hit.element = ret.hitElement;
                     }
@@ -4257,7 +4444,7 @@ class App extends React.Component {
             return false;
         }
         // How many pixels off the shape boundary we still consider a hit
-        const threshold = 10 / this.state.zoom.value;
+        const threshold = this.getElementHitThreshold();
         const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
         return (point.x > x1 - threshold &&
             point.x < x2 + threshold &&
@@ -4277,7 +4464,7 @@ class App extends React.Component {
             includeBoundTextElement: true,
         });
         // FIXME
-        let container = getTextBindableContainerAtPosition(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY, this.scene.getNonDeletedElementsMap());
+        let container = this.getTextBindableContainerAtPosition(sceneX, sceneY);
         if (hasBoundTextElement(element)) {
             container = element;
             sceneX = element.x + element.width / 2;
@@ -4335,8 +4522,8 @@ class App extends React.Component {
             points: [[0, 0]],
             pressures,
         });
-        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
-        this.scene.addNewElement(element);
+        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this);
+        this.scene.insertElement(element);
         this.setState({
             draggingElement: element,
             editingElement: element,
@@ -4364,10 +4551,7 @@ class App extends React.Component {
             width,
             height,
         });
-        this.scene.replaceAllElements([
-            ...this.scene.getElementsIncludingDeleted(),
-            element,
-        ]);
+        this.scene.insertElement(element);
         return element;
     };
     //create rectangle element with youtube top left on nearest grid point width / hight 640/360
@@ -4402,10 +4586,7 @@ class App extends React.Component {
             height: embedLink.intrinsicSize.h,
             link,
         });
-        this.scene.replaceAllElements([
-            ...this.scene.getElementsIncludingDeleted(),
-            element,
-        ]);
+        this.scene.insertElement(element);
         return element;
     };
     createImageElement = ({ sceneX, sceneY, addToFrameUnderCursor = true, }) => {
@@ -4513,8 +4694,8 @@ class App extends React.Component {
             mutateElement(element, {
                 points: [...element.points, [0, 0]],
             });
-            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
-            this.scene.addNewElement(element);
+            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this);
+            this.scene.insertElement(element);
             this.setState({
                 draggingElement: element,
                 editingElement: element,
@@ -4574,7 +4755,7 @@ class App extends React.Component {
             });
         }
         else {
-            this.scene.addNewElement(element);
+            this.scene.insertElement(element);
             this.setState({
                 multiElement: null,
                 draggingElement: element,
@@ -4596,10 +4777,7 @@ class App extends React.Component {
         const frame = type === TOOL_TYPE.magicframe
             ? newMagicFrameElement(constructorOpts)
             : newFrameElement(constructorOpts);
-        this.scene.replaceAllElements([
-            ...this.scene.getElementsIncludingDeleted(),
-            frame,
-        ]);
+        this.scene.insertElement(frame);
         this.setState({
             multiElement: null,
             draggingElement: frame,
@@ -4813,7 +4991,9 @@ class App extends React.Component {
                     // able to select and interact with the text input
                     !this.state.editingFrame &&
                         dragSelectedElements(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
-                    this.maybeSuggestBindingForAll(selectedElements);
+                    this.setState({
+                        suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
+                    });
                     // We duplicate the selected element if alt is pressed on pointer move
                     if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {
                         // Move the currently selected elements to the top of the z index stack, and
@@ -4857,6 +5037,7 @@ class App extends React.Component {
                             }
                         }
                         const nextSceneElements = [...nextElements, ...elementsToAppend];
+                        syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
                         bindTextToShapeAfterDuplication(nextElements, elementsToAppend, oldIdToDuplicatedId);
                         fixBindingsAfterDuplication(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, "duplicatesServeAsOld");
                         bindElementsToFramesAfterDuplication(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);
@@ -5049,7 +5230,7 @@ class App extends React.Component {
                     this.actionManager.executeAction(actionFinalize);
                 }
                 else {
-                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this.scene.getNonDeletedElements(), elementsMap);
+                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this);
                     if (editingLinearElement !== this.state.editingLinearElement) {
                         this.setState({
                             editingLinearElement,
@@ -5068,7 +5249,7 @@ class App extends React.Component {
                     }
                 }
                 else {
-                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this.scene.getNonDeletedElements(), elementsMap);
+                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this);
                     const { startBindingElement, endBindingElement } = linearElementEditor;
                     const element = this.scene.getElement(linearElementEditor.elementId);
                     if (isBindingElement(element)) {
@@ -5137,7 +5318,7 @@ class App extends React.Component {
             }
             if (isLinearElement(draggingElement)) {
                 if (draggingElement.points.length > 1) {
-                    this.history.resumeRecording();
+                    this.store.shouldCaptureIncrement();
                 }
                 const pointerCoords = viewportCoordsToSceneCoords(childEvent, this.state);
                 if (!pointerDownState.drag.hasOccurred &&
@@ -5160,7 +5341,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, elementsMap);
+                        maybeBindLinearElement(draggingElement, this.state, pointerCoords, this);
                     }
                     this.setState({ suggestedBindings: [], startBoundElement: null });
                     if (!activeTool.locked) {
@@ -5189,11 +5370,15 @@ class App extends React.Component {
                 draggingElement &&
                 isInvisiblySmallElement(draggingElement)) {
                 // remove invisible element which was added in onPointerDown
-                this.scene.replaceAllElements(this.scene
-                    .getElementsIncludingDeleted()
-                    .filter((el) => el.id !== draggingElement.id));
-                this.setState({
-                    draggingElement: null,
+                // update the store snapshot, so that invisible elements are not captured by the store
+                this.updateScene({
+                    elements: this.scene
+                        .getElementsIncludingDeleted()
+                        .filter((el) => el.id !== draggingElement.id),
+                    appState: {
+                        draggingElement: null,
+                    },
+                    storeAction: StoreAction.UPDATE,
                 });
                 return;
             }
@@ -5216,7 +5401,7 @@ class App extends React.Component {
                                         groupIds: [],
                                     });
                                     removeElementsFromFrame([linearElement], this.scene.getNonDeletedElementsMap());
-                                    this.scene.informMutation();
+                                    this.scene.triggerUpdate();
                                 }
                             }
                         }
@@ -5274,12 +5459,16 @@ class App extends React.Component {
                 mutateElement(draggingElement, getNormalizedDimensions(draggingElement));
             }
             if (resizingElement) {
-                this.history.resumeRecording();
+                this.store.shouldCaptureIncrement();
             }
             if (resizingElement && isInvisiblySmallElement(resizingElement)) {
-                this.scene.replaceAllElements(this.scene
-                    .getElementsIncludingDeleted()
-                    .filter((el) => el.id !== resizingElement.id));
+                // update the store snapshot, so that invisible elements are not captured by the store
+                this.updateScene({
+                    elements: this.scene
+                        .getElementsIncludingDeleted()
+                        .filter((el) => el.id !== resizingElement.id),
+                    storeAction: StoreAction.UPDATE,
+                });
             }
             // handle frame membership for resizing frames and/or selected elements
             if (pointerDownState.resize.isResizing) {
@@ -5434,10 +5623,23 @@ class App extends React.Component {
                     }));
                 }
             }
-            if (!pointerDownState.drag.hasOccurred &&
+            if (
+            // not dragged
+            !pointerDownState.drag.hasOccurred &&
+                // not resized
                 !this.state.isResizing &&
+                // only hitting the bounding box of the previous hit element
                 ((hitElement &&
-                    isHittingElementBoundingBoxWithoutHittingElement(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y, this.scene.getNonDeletedElementsMap())) ||
+                    hitElementBoundingBoxOnly({
+                        x: pointerDownState.origin.x,
+                        y: pointerDownState.origin.y,
+                        element: hitElement,
+                        shape: this.getElementShape(hitElement),
+                        threshold: this.getElementHitThreshold(),
+                        frameNameBound: isFrameLikeElement(hitElement)
+                            ? this.frameNameBoundsCache.get(hitElement)
+                            : null,
+                    }, elementsMap)) ||
                     (!hitElement &&
                         pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements))) {
                 if (this.state.editingLinearElement) {
@@ -5452,6 +5654,8 @@ class App extends React.Component {
                         activeEmbeddable: null,
                     });
                 }
+                // reset cursor
+                setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
                 return;
             }
             if (!activeTool.locked &&
@@ -5469,13 +5673,17 @@ class App extends React.Component {
                 }));
             }
             if (activeTool.type !== "selection" ||
-                isSomeElementSelected(this.scene.getNonDeletedElements(), this.state)) {
-                this.history.resumeRecording();
+                isSomeElementSelected(this.scene.getNonDeletedElements(), this.state) ||
+                !isShallowEqual(this.state.previousSelectedElementIds, this.state.selectedElementIds)) {
+                this.store.shouldCaptureIncrement();
             }
             if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
-                isBindingEnabled(this.state)
-                    ? bindOrUnbindSelectedElements(this.scene.getSelectedElements(this.state), this.scene.getNonDeletedElements(), elementsMap)
-                    : unbindLinearElements(this.scene.getSelectedElements(this.state), elementsMap);
+                // We only allow binding via linear elements, specifically via dragging
+                // the endpoints ("start" or "end").
+                const linearElements = this.scene
+                    .getSelectedElements(this.state)
+                    .filter(isLinearElement);
+                bindOrUnbindLinearElements(linearElements, this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             }
             if (activeTool.type === "laser") {
                 this.laserTrails.endPath();
@@ -5510,7 +5718,7 @@ class App extends React.Component {
     }
     restoreReadyToEraseElements = () => {
         this.elementsPendingErasure = new Set();
-        this.onSceneUpdated();
+        this.triggerRender();
     };
     eraseElements = () => {
         let didChange = false;
@@ -5526,7 +5734,7 @@ class App extends React.Component {
         });
         this.elementsPendingErasure = new Set();
         if (didChange) {
-            this.history.resumeRecording();
+            this.store.shouldCaptureIncrement();
             this.scene.replaceAllElements(elements);
         }
     };
@@ -5629,7 +5837,7 @@ class App extends React.Component {
             this.setState({ errorMessage: t("errors.imageToolNotSupported") });
             return;
         }
-        this.scene.addNewElement(imageElement);
+        this.scene.insertElement(imageElement);
         try {
             return await this.initializeImage({
                 imageFile,
@@ -5802,7 +6010,7 @@ class App extends React.Component {
         if (uncachedImageElements.length) {
             const { updatedFiles } = await this.updateImageCache(uncachedImageElements, files);
             if (updatedFiles.size) {
-                this.scene.informMutation();
+                this.scene.triggerUpdate();
             }
         }
     };
@@ -5818,7 +6026,7 @@ class App extends React.Component {
         }
     };
     maybeSuggestBindingAtCursor = (pointerCoords) => {
-        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this);
         this.setState({
             suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : [],
         });
@@ -5833,7 +6041,7 @@ class App extends React.Component {
             return;
         }
         const suggestedBindings = pointerCoords.reduce((acc, coords) => {
-            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+            const hoveredBindableElement = getHoveredElementForBinding(coords, this);
             if (hoveredBindableElement != null &&
                 !isLinearElementSimpleAndAlreadyBound(linearElement, oppositeBindingBoundElement?.id, hoveredBindableElement)) {
                 acc.push(hoveredBindableElement);
@@ -5842,13 +6050,6 @@ class App extends React.Component {
         }, []);
         this.setState({ suggestedBindings });
     };
-    maybeSuggestBindingForAll(selectedElements) {
-        if (selectedElements.length > 50) {
-            return;
-        }
-        const suggestedBindings = getEligibleElementsForBinding(selectedElements, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
-        this.setState({ suggestedBindings });
-    }
     clearSelection(hitElement) {
         this.setState((prevState) => ({
             selectedElementIds: makeNextSelectedElementIds({}, prevState),
@@ -5908,7 +6109,7 @@ class App extends React.Component {
                                 isLoading: false,
                             },
                             replaceFiles: true,
-                            commitToHistory: true,
+                            storeAction: StoreAction.CAPTURE,
                         });
                         return;
                     }
@@ -5976,9 +6177,10 @@ class App extends React.Component {
     loadFileToCanvas = async (file, fileHandle) => {
         file = await normalizeFile(file);
         try {
+            const elements = this.scene.getElementsIncludingDeleted();
             let ret;
             try {
-                ret = await loadSceneOrLibraryFromBlob(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);
+                ret = await loadSceneOrLibraryFromBlob(file, this.state, elements, fileHandle);
             }
             catch (error) {
                 const imageSceneDataError = error instanceof ImageSceneDataError;
@@ -6003,6 +6205,10 @@ class App extends React.Component {
                 return;
             }
             if (ret.type === MIME_TYPES.excalidraw) {
+                // restore the fractional indices by mutating elements
+                syncInvalidIndices(elements.concat(ret.data.elements));
+                // update the store snapshot for old elements, otherwise we would end up with duplicated fractional indices on undo
+                this.store.updateSnapshot(arrayToMap(elements), this.state);
                 this.setState({ isLoading: true });
                 this.syncActionResult({
                     ...ret.data,
@@ -6011,7 +6217,7 @@ class App extends React.Component {
                         isLoading: false,
                     },
                     replaceFiles: true,
-                    commitToHistory: true,
+                    storeAction: StoreAction.CAPTURE,
                 });
             }
             else if (ret.type === MIME_TYPES.excalidrawlib) {
@@ -6113,7 +6319,6 @@ class App extends React.Component {
             dragNewElement(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, distance(pointerDownState.originInGrid.x, gridX), distance(pointerDownState.originInGrid.y, gridY), isImageElement(draggingElement)
                 ? !shouldMaintainAspectRatio(event)
                 : shouldMaintainAspectRatio(event), shouldResizeFromCenter(event), aspectRatio, this.state.originSnapOffset);
-            this.maybeSuggestBindingForAll([draggingElement]);
             // highlight elements that are to be added to frames on frames creation
             if (this.state.activeTool.type === TOOL_TYPE.frame ||
                 this.state.activeTool.type === TOOL_TYPE.magicframe) {
@@ -6167,16 +6372,17 @@ class App extends React.Component {
                 snapLines,
             });
         }
-        if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.length === 1 && isImageElement(selectedElements[0])
+        if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.some((element) => isImageElement(element))
             ? !shouldMaintainAspectRatio(event)
             : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {
-            this.maybeSuggestBindingForAll(selectedElements);
+            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this);
             const elementsToHighlight = new Set();
             selectedFrames.forEach((frame) => {
                 getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach((element) => elementsToHighlight.add(element));
             });
             this.setState({
                 elementsToHighlight: [...elementsToHighlight],
+                suggestedBindings,
             });
             return true;
         }
@@ -6221,6 +6427,7 @@ class App extends React.Component {
             return [actionCopy, ...options];
         }
         return [
+            CONTEXT_MENU_SEPARATOR,
             actionCut,
             actionCopy,
             actionPaste,
@@ -6233,6 +6440,7 @@ class App extends React.Component {
             actionPasteStyles,
             CONTEXT_MENU_SEPARATOR,
             actionGroup,
+            actionTextAutoResize,
             actionUnbindText,
             actionBindText,
             actionWrapTextInContainer,
@@ -6401,7 +6609,7 @@ export const createTestHook = () => {
                     return this.app?.scene.getElementsIncludingDeleted();
                 },
                 set(elements) {
-                    return this.app?.scene.replaceAllElements(elements);
+                    return this.app?.scene.replaceAllElements(syncInvalidIndices(elements));
                 },
             },
         });