@excalidraw/excalidraw 0.17.1-3e334a6 → 0.17.1-4689a6b

package/dist/excalidraw/components/App.js

@@ -15,12 +15,12 @@ import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTI
 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, transformElements, updateTextElement, redrawTextBoundingBox, } from "../element";
+import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, transformElements, updateTextElement, redrawTextBoundingBox, getElementAbsoluteCoords, } 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";
 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";
@@ -28,11 +28,13 @@ 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, 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, } 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, arrayToMap, 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";
@@ -42,8 +44,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";
@@ -82,8 +83,10 @@ import { AnimatedTrail } from "../animated-trail";
 import { LaserTrails } from "../laser-trails";
 import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
+import { hitElementBoundText, hitElementBoundingBox, 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";
 const AppContext = React.createContext(null);
@@ -495,7 +498,7 @@ class App extends React.Component {
                       html, body {
                         width: 100%;
                         height: 100%;
-                        color: ${this.state.theme === "dark" ? "white" : "black"};
+                        color: ${this.state.theme === THEME.DARK ? "white" : "black"};
                       }
                       body {
                         display: flex;
@@ -650,7 +653,7 @@ class App extends React.Component {
                                         ? src.srcdoc(this.state.theme)
                                         : undefined, src: src?.type !== "document" ? src?.link ?? "" : undefined, 
                                     // https://stackoverflow.com/q/18470015
-                                    scrolling: "no", referrerPolicy: "no-referrer-when-downgrade", title: "Excalidraw Embedded Content", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads" })) })] }) }, el.id));
+                                    scrolling: "no", referrerPolicy: "no-referrer-when-downgrade", title: "Excalidraw Embedded Content", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, sandbox: `${src?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads` })) })] }) }, el.id));
             }) }));
     }
     getFrameNameDOMId = (frameElement) => {
@@ -692,7 +695,7 @@ class App extends React.Component {
         if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {
             return null;
         }
-        const isDarkTheme = this.state.theme === "dark";
+        const isDarkTheme = this.state.theme === THEME.DARK;
         let frameIndex = 0;
         let magicFrameIndex = 0;
         return this.scene.getNonDeletedFramesLikes().map((f) => {
@@ -1122,7 +1125,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 });
                 }
@@ -1608,7 +1611,7 @@ class App extends React.Component {
                 gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
             });
         }
-        this.excalidrawContainerRef.current?.classList.toggle("theme--dark", this.state.theme === "dark");
+        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
@@ -1636,7 +1639,7 @@ 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, elementsMap)), this);
         }
         this.history.record(this.state, elements);
         // Do not notify consumers if we're still loading the scene. Among other
@@ -1894,16 +1897,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());
@@ -2071,16 +2073,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),
         });
@@ -2604,7 +2597,7 @@ class App extends React.Component {
             const selectedElements = this.scene.getSelectedElements(this.state);
             const elementsMap = this.scene.getNonDeletedElementsMap();
             isBindingEnabled(this.state)
-                ? bindOrUnbindSelectedElements(selectedElements, this.scene.getNonDeletedElements(), elementsMap)
+                ? bindOrUnbindSelectedElements(selectedElements, this)
                 : unbindLinearElements(selectedElements, elementsMap);
             this.setState({ suggestedBindings: [] });
         }
@@ -2834,6 +2827,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) {
@@ -2847,9 +2891,9 @@ 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 isPointInShape([x, y], this.getElementShape(elementWithHighestZIndex))
+                ? elementWithHighestZIndex
+                : allHitElements[allHitElements.length - 2];
         }
         if (allHitElements.length === 1) {
             return allHitElements[0];
@@ -2857,15 +2901,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 &&
@@ -2873,8 +2919,80 @@ 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;
+    }
+    getHitThreshold() {
+        return 10 / 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)) {
+            return hitElementBoundingBox(x, y, element, this.scene.getNonDeletedElementsMap(), this.getHitThreshold());
+        }
+        // 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.getHitThreshold(),
+            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.getHitThreshold(),
+                })) {
+                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 &&
@@ -2973,7 +3091,7 @@ class App extends React.Component {
                 this.scene.insertElementAtIndex(element, containerIndex + 1);
             }
             else {
-                this.scene.addNewElement(element);
+                this.scene.insertElement(element);
             }
         }
         this.setState({
@@ -3032,11 +3150,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.getHitThreshold(),
+                    })) {
                     const midPoint = getContainerCenter(container, this.state, this.scene.getNonDeletedElementsMap());
                     sceneX = midPoint.x;
                     sceneY = midPoint.y;
@@ -3091,7 +3215,7 @@ class App extends React.Component {
                 }
                 if (!customEvent?.defaultPrevented) {
                     const target = isLocalLink(url) ? "_self" : "_blank";
-                    const newWindow = window.open(undefined, target, "noopener noreferrer");
+                    const newWindow = window.open(undefined, target);
                     // https://mathiasbynens.github.io/rel-noopener/
                     if (newWindow) {
                         newWindow.opener = null;
@@ -3419,7 +3543,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.getHitThreshold();
         const point = { ...pointerDownState.lastCoords };
         let samplingInterval = 0;
         while (samplingInterval <= distance) {
@@ -3465,14 +3589,18 @@ 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());
@@ -3483,12 +3611,7 @@ class App extends React.Component {
                     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) {
@@ -4019,7 +4142,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.history, pointerDownState.origin, linearElementEditor, this);
                     if (ret.hitElement) {
                         pointerDownState.hit.element = ret.hitElement;
                     }
@@ -4180,7 +4303,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.getHitThreshold();
         const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
         return (point.x > x1 - threshold &&
             point.x < x2 + threshold &&
@@ -4200,7 +4323,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;
@@ -4258,8 +4381,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,
@@ -4287,10 +4410,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
@@ -4325,10 +4445,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, }) => {
@@ -4436,8 +4553,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,
@@ -4497,7 +4614,7 @@ class App extends React.Component {
             });
         }
         else {
-            this.scene.addNewElement(element);
+            this.scene.insertElement(element);
             this.setState({
                 multiElement: null,
                 draggingElement: element,
@@ -4519,10 +4636,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,
@@ -4780,6 +4894,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);
@@ -4971,7 +5086,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,
@@ -4990,7 +5105,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)) {
@@ -5082,7 +5197,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) {
@@ -5356,10 +5471,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.getHitThreshold(),
+                        frameNameBound: isFrameLikeElement(hitElement)
+                            ? this.frameNameBoundsCache.get(hitElement)
+                            : null,
+                    }, elementsMap)) ||
                     (!hitElement &&
                         pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements))) {
                 if (this.state.editingLinearElement) {
@@ -5374,6 +5502,8 @@ class App extends React.Component {
                         activeEmbeddable: null,
                     });
                 }
+                // reset cursor
+                setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
                 return;
             }
             if (!activeTool.locked &&
@@ -5396,8 +5526,8 @@ class App extends React.Component {
             }
             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);
+                    ? bindOrUnbindSelectedElements(this.scene.getSelectedElements(this.state), this)
+                    : unbindLinearElements(this.scene.getNonDeletedElements(), elementsMap);
             }
             if (activeTool.type === "laser") {
                 this.laserTrails.endPath();
@@ -5551,7 +5681,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,
@@ -5740,7 +5870,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] : [],
         });
@@ -5755,7 +5885,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);
@@ -5768,7 +5898,7 @@ class App extends React.Component {
         if (selectedElements.length > 50) {
             return;
         }
-        const suggestedBindings = getEligibleElementsForBinding(selectedElements, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+        const suggestedBindings = getEligibleElementsForBinding(selectedElements, this);
         this.setState({ suggestedBindings });
     }
     clearSelection(hitElement) {
@@ -6320,7 +6450,7 @@ export const createTestHook = () => {
                     return this.app?.scene.getElementsIncludingDeleted();
                 },
                 set(elements) {
-                    return this.app?.scene.replaceAllElements(elements);
+                    return this.app?.scene.replaceAllElements(syncInvalidIndices(elements));
                 },
             },
         });