@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/components/App.js

@@ -20,7 +20,7 @@ import { bindOrUnbindLinearElement, bindOrUnbindLinearElements, fixBindingsAfter
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
 import { deepCopyElement, duplicateElements, newFrameElement, newFreeDrawElement, newEmbeddableElement, newMagicFrameElement, newIframeElement, newArrowElement, } from "../element/newElement";
-import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isIframeElement, isIframeLikeElement, isMagicFrameElement, isTextBindableContainer, isElbowArrow, isFlowchartNodeElement, } from "../element/typeChecks";
+import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isIframeElement, isIframeLikeElement, isMagicFrameElement, isTextBindableContainer, isElbowArrow, isFlowchartNodeElement, isBindableElement, } from "../element/typeChecks";
 import { getCenter, getDistance } from "../gesture";
 import { editGroupForSelectedElement, getElementsInGroup, getSelectedGroupIdForElement, getSelectedGroupIds, isElementInGroup, isSelectedViaGroup, selectGroupsForSelectedElements, } from "../groups";
 import { History } from "../history";
@@ -33,7 +33,7 @@ import { getStateForZoom } from "../scene/zoom";
 import { findShapeByKey, getBoundTextShape, getCornerRadius, getElementShape, isPathALoop, } from "../shapes";
 import { 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, toBrandedType, } from "../utils";
+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 LayerUI from "./LayerUI";
@@ -52,9 +52,9 @@ import { Fonts, getLineHeight } from "../fonts";
 import { getFrameChildren, isCursorInFrame, bindElementsToFramesAfterDuplication, addElementsToFrame, replaceAllElementsInFrame, removeElementsFromFrame, getElementsInResizingFrame, getElementsInNewFrame, getContainingFrame, elementOverlapsWithFrame, updateFrameMembershipOfSelectedElements, isElementInFrame, getFrameLikeTitle, getElementsOverlappingFrame, filterElementsEligibleAsFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, makeNextSelectedElementIds, } from "../scene/selection";
 import { actionPaste } from "../actions/actionClipboard";
-import { actionRemoveAllElementsFromFrame, actionSelectAllElementsInFrame, } from "../actions/actionFrame";
+import { actionRemoveAllElementsFromFrame, actionSelectAllElementsInFrame, actionWrapSelectionInFrame, } from "../actions/actionFrame";
 import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
-import { jotaiStore } from "../jotai";
+import { editorJotaiStore } from "../editor-jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { ImageSceneDataError } from "../errors";
 import { getSnapLinesAtPointer, snapDraggedElements, isActiveToolNonLinearSnappable, snapNewElement, snapResizingElements, isSnappingEnabled, getVisibleGaps, getReferenceSnapPoints, SnapCache, isGridModeEnabled, getGridPoint, } from "../snapping";
@@ -90,7 +90,6 @@ import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
 import { isMaybeMermaidDefinition } from "../mermaid";
 import NewElementCanvas from "./canvases/NewElementCanvas";
-import { mutateElbowArrow, updateElbowArrow } from "../element/routing";
 import { FlowChartCreator, FlowChartNavigator, getLinkDirectionFromKey, } from "../element/flowchart";
 import { searchItemInFocusAtom } from "./SearchMenu";
 import { clamp, pointFrom, pointDistance, vector, pointRotateRads, vectorScale, vectorFromPoint, vectorSubtract, vectorDot, vectorNormalize, } from "../../math";
@@ -714,8 +713,17 @@ class App extends React.Component {
          */
         _cache: new Map(),
     };
+    resetEditingFrame = (frame) => {
+        if (frame) {
+            mutateElement(frame, { name: frame.name?.trim() || null });
+        }
+        this.setState({ editingFrame: null });
+    };
     renderFrameNames = () => {
         if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {
+            if (this.state.editingFrame) {
+                this.resetEditingFrame(null);
+            }
             return null;
         }
         const isDarkTheme = this.state.theme === THEME.DARK;
@@ -727,15 +735,14 @@ class App extends React.Component {
                 scrollY: this.state.scrollY,
                 zoom: this.state.zoom,
             }, this.scene.getNonDeletedElementsMap())) {
+                if (this.state.editingFrame === f.id) {
+                    this.resetEditingFrame(f);
+                }
                 // if frame not visible, don't render its name
                 return null;
             }
             const { x: x1, y: y1 } = sceneCoordsToViewportCoords({ sceneX: f.x, sceneY: f.y }, this.state);
             const FRAME_NAME_EDIT_PADDING = 6;
-            const reset = () => {
-                mutateElement(f, { name: f.name?.trim() || null });
-                this.setState({ editingFrame: null });
-            };
             let frameNameJSX;
             const frameName = getFrameLikeTitle(f);
             if (f.id === this.state.editingFrame) {
@@ -744,12 +751,12 @@ class App extends React.Component {
                         mutateElement(f, {
                             name: e.target.value,
                         });
-                    }, onFocus: (e) => e.target.select(), onBlur: () => reset(), onKeyDown: (event) => {
+                    }, onFocus: (e) => e.target.select(), onBlur: () => this.resetEditingFrame(f), onKeyDown: (event) => {
                         // for some inexplicable reason, `onBlur` triggered on ESC
                         // does not reset `state.editingFrame` despite being called,
                         // and we need to reset it here as well
                         if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
-                            reset();
+                            this.resetEditingFrame(f);
                         }
                     }, style: {
                         background: this.state.viewBackgroundColor,
@@ -830,13 +837,18 @@ class App extends React.Component {
         });
         this.visibleElements = visibleElements;
         const allElementsMap = this.scene.getNonDeletedElementsMap();
-        const shouldBlockPointerEvents = this.state.selectionElement ||
-            this.state.newElement ||
-            this.state.selectedElementsAreBeingDragged ||
-            this.state.resizingElement ||
-            (this.state.activeTool.type === "laser" &&
-                // technically we can just test on this once we make it more safe
-                this.state.cursorButton === "down");
+        const shouldBlockPointerEvents = 
+        // default back to `--ui-pointerEvents` flow if setPointerCapture
+        // not supported
+        "setPointerCapture" in HTMLElement.prototype
+            ? false
+            : this.state.selectionElement ||
+                this.state.newElement ||
+                this.state.selectedElementsAreBeingDragged ||
+                this.state.resizingElement ||
+                (this.state.activeTool.type === "laser" &&
+                    // technically we can just test on this once we make it more safe
+                    this.state.cursorButton === "down");
         const firstSelectedElement = selectedElements[0];
         return (_jsx("div", { className: clsx("excalidraw excalidraw-container", {
                 "excalidraw--view-mode": this.state.viewModeEnabled ||
@@ -1094,7 +1106,7 @@ class App extends React.Component {
         }
     };
     openEyeDropper = ({ type }) => {
-        jotaiStore.set(activeEyeDropperAtom, {
+        editorJotaiStore.set(activeEyeDropperAtom, {
             swapPreviewOnAlt: true,
             colorPickerType: type === "stroke" ? "elementStroke" : "elementBackground",
             onSelect: (color, event) => {
@@ -1902,30 +1914,7 @@ class App extends React.Component {
         event?.preventDefault();
     });
     addElementsFromPasteOrLibrary = (opts) => {
-        let elements = opts.elements.map((el, _, elements) => {
-            if (isElbowArrow(el)) {
-                const startEndElements = [
-                    el.startBinding &&
-                        elements.find((l) => l.id === el.startBinding?.elementId),
-                    el.endBinding &&
-                        elements.find((l) => l.id === el.endBinding?.elementId),
-                ];
-                const startBinding = startEndElements[0] ? el.startBinding : null;
-                const endBinding = startEndElements[1] ? el.endBinding : null;
-                return {
-                    ...el,
-                    ...updateElbowArrow({
-                        ...el,
-                        startBinding,
-                        endBinding,
-                    }, toBrandedType(new Map(startEndElements
-                        .filter((x) => x != null)
-                        .map((el) => [el.id, el]))), [el.points[0], el.points[el.points.length - 1]]),
-                };
-            }
-            return el;
-        });
-        elements = restoreElements(elements, null, undefined);
+        const elements = restoreElements(opts.elements, null, undefined);
         const [minX, minY, maxX, maxY] = getCommonBounds(elements);
         const elementsCenterX = distance(minX, maxX) / 2;
         const elementsCenterY = distance(minY, maxY) / 2;
@@ -1952,12 +1941,14 @@ class App extends React.Component {
             randomizeSeed: !opts.retainSeed,
         });
         const prevElements = this.scene.getElementsIncludingDeleted();
-        const nextElements = [...prevElements, ...newElements];
+        let nextElements = [...prevElements, ...newElements];
+        const mappedNewSceneElements = this.props.onDuplicate?.(nextElements, prevElements);
+        nextElements = mappedNewSceneElements || nextElements;
         syncMovedIndices(nextElements, arrayToMap(newElements));
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
         if (topLayerFrame) {
             const eligibleElements = filterElementsEligibleAsFrameChildren(newElements, topLayerFrame);
-            addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
+            addElementsToFrame(nextElements, eligibleElements, topLayerFrame, this.state);
         }
         this.scene.replaceAllElements(nextElements);
         newElements.forEach((newElement) => {
@@ -1986,7 +1977,7 @@ class App extends React.Component {
             // from library, not when pasting from clipboard. Alas.
             openSidebar: this.state.openSidebar &&
                 this.device.editor.canFitSidebar &&
-                jotaiStore.get(isSidebarDockedAtom)
+                editorJotaiStore.get(isSidebarDockedAtom)
                 ? this.state.openSidebar
                 : null,
             ...selectGroupsForSelectedElements({
@@ -2399,11 +2390,16 @@ class App extends React.Component {
             addedFiles[fileData.id] = fileData;
             nextFiles[fileData.id] = fileData;
             if (fileData.mimeType === MIME_TYPES.svg) {
-                const restoredDataURL = getDataURL_sync(normalizeSVG(dataURLToString(fileData.dataURL)), MIME_TYPES.svg);
-                if (fileData.dataURL !== restoredDataURL) {
-                    // bump version so persistence layer can update the store
-                    fileData.version = (fileData.version ?? 1) + 1;
-                    fileData.dataURL = restoredDataURL;
+                try {
+                    const restoredDataURL = getDataURL_sync(normalizeSVG(dataURLToString(fileData.dataURL)), MIME_TYPES.svg);
+                    if (fileData.dataURL !== restoredDataURL) {
+                        // bump version so persistence layer can update the store
+                        fileData.version = (fileData.version ?? 1) + 1;
+                        fileData.dataURL = restoredDataURL;
+                    }
+                }
+                catch (error) {
+                    console.error(error);
                 }
             }
         }
@@ -2732,14 +2728,15 @@ class App extends React.Component {
                 mutateElement(element, {
                     x: element.x + offsetX,
                     y: element.y + offsetY,
-                });
+                }, false);
                 updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
                     simultaneouslyUpdated: selectedElements,
                 });
             });
             this.setState({
-                suggestedBindings: getSuggestedBindingsForArrows(selectedElements.filter((element) => element.id !== elbowArrow?.id || step !== 0), this.scene.getNonDeletedElementsMap()),
+                suggestedBindings: getSuggestedBindingsForArrows(selectedElements.filter((element) => element.id !== elbowArrow?.id || step !== 0), this.scene.getNonDeletedElementsMap(), this.state.zoom),
             });
+            this.scene.triggerUpdate();
             event.preventDefault();
         }
         else if (event.key === KEYS.ENTER) {
@@ -2862,7 +2859,7 @@ class App extends React.Component {
         }
         if (event[KEYS.CTRL_OR_CMD] &&
             (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)) {
-            jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+            editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
         }
         // eye dropper
         // -----------------------------------------------------------------------
@@ -2900,7 +2897,7 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: true });
         }
         if (isArrowKey(event.key)) {
-            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
+            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? [], this.state.zoom);
             this.setState({ suggestedBindings: [] });
         }
         if (!event.altKey) {
@@ -2955,7 +2952,10 @@ class App extends React.Component {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
         }
         else if (!isHoldingSpace) {
-            setCursorForShape(this.interactiveCanvas, this.state);
+            setCursorForShape(this.interactiveCanvas, {
+                ...this.state,
+                activeTool: nextActiveTool,
+            });
         }
         if (isToolIcon(document.activeElement)) {
             this.focusContainer();
@@ -3258,7 +3258,11 @@ class App extends React.Component {
             this.state.selectedElementIds[element.id] &&
             shouldShowBoundingBox([element], this.state)) {
             const selectionShape = getSelectionBoxShape(element, this.scene.getNonDeletedElementsMap(), isImageElement(element) ? 0 : this.getElementHitThreshold());
-            return isPointInShape(pointFrom(x, y), selectionShape);
+            // if hitting the bounding box, return early
+            // but if not, we should check for other cases as well (e.g. frame name)
+            if (isPointInShape(pointFrom(x, y), selectionShape)) {
+                return true;
+            }
         }
         // take bound text element into consideration for hit collision as well
         const hitBoundTextOfElement = hitElementBoundText(x, y, getBoundTextShape(element, this.scene.getNonDeletedElementsMap()));
@@ -3447,6 +3451,7 @@ class App extends React.Component {
             return;
         }
         const selectedElements = this.scene.getSelectedElements(this.state);
+        let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(event, this.state);
         if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
             if (event[KEYS.CTRL_OR_CMD] &&
                 (!this.state.editingLinearElement ||
@@ -3459,13 +3464,45 @@ class App extends React.Component {
                 });
                 return;
             }
+            else if (this.state.selectedLinearElement &&
+                isElbowArrow(selectedElements[0])) {
+                const hitCoords = LinearElementEditor.getSegmentMidpointHitCoords(this.state.selectedLinearElement, { x: sceneX, y: sceneY }, this.state, this.scene.getNonDeletedElementsMap());
+                const midPoint = hitCoords
+                    ? LinearElementEditor.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, hitCoords, this.scene.getNonDeletedElementsMap())
+                    : -1;
+                if (midPoint && midPoint > -1) {
+                    this.store.shouldCaptureIncrement();
+                    LinearElementEditor.deleteFixedSegment(selectedElements[0], midPoint);
+                    const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords({
+                        ...this.state.selectedLinearElement,
+                        segmentMidPointHoveredCoords: null,
+                    }, { x: sceneX, y: sceneY }, this.state, this.scene.getNonDeletedElementsMap());
+                    const nextIndex = nextCoords
+                        ? LinearElementEditor.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, nextCoords, this.scene.getNonDeletedElementsMap())
+                        : null;
+                    this.setState({
+                        selectedLinearElement: {
+                            ...this.state.selectedLinearElement,
+                            pointerDownState: {
+                                ...this.state.selectedLinearElement.pointerDownState,
+                                segmentMidpoint: {
+                                    index: nextIndex,
+                                    value: hitCoords,
+                                    added: false,
+                                },
+                            },
+                            segmentMidPointHoveredCoords: nextCoords,
+                        },
+                    });
+                    return;
+                }
+            }
         }
         if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
             this.startImageCropping(selectedElements[0]);
             return;
         }
         resetCursor(this.interactiveCanvas);
-        let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(event, this.state);
         const selectedGroupIds = getSelectedGroupIds(this.state);
         if (selectedGroupIds.length > 0) {
             const hitElement = this.getElementAtPosition(sceneX, sceneY);
@@ -3691,7 +3728,7 @@ class App extends React.Component {
                 });
             }
             if (editingLinearElement?.lastUncommittedPoint != null) {
-                this.maybeSuggestBindingAtCursor(scenePointer);
+                this.maybeSuggestBindingAtCursor(scenePointer, editingLinearElement.elbowed);
             }
             else {
                 // causes stack overflow if not sync
@@ -3708,7 +3745,7 @@ class App extends React.Component {
                 this.maybeSuggestBindingsForLinearElementAtCoords(newElement, [scenePointer], this.state.startBoundElement);
             }
             else {
-                this.maybeSuggestBindingAtCursor(scenePointer);
+                this.maybeSuggestBindingAtCursor(scenePointer, false);
             }
         }
         if (this.state.multiElement) {
@@ -3760,24 +3797,15 @@ class App extends React.Component {
                 if (isPathALoop(points, this.state.zoom.value)) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
                 }
-                if (isElbowArrow(multiElement)) {
-                    mutateElbowArrow(multiElement, this.scene.getNonDeletedElementsMap(), [
+                // update last uncommitted point
+                mutateElement(multiElement, {
+                    points: [
                         ...points.slice(0, -1),
                         pointFrom(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted),
-                    ], undefined, undefined, {
-                        isDragging: true,
-                        informMutation: false,
-                    });
-                }
-                else {
-                    // update last uncommitted point
-                    mutateElement(multiElement, {
-                        points: [
-                            ...points.slice(0, -1),
-                            pointFrom(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted),
-                        ],
-                    }, false);
-                }
+                    ],
+                }, false, {
+                    isDragging: true,
+                });
                 // in this path, we're mutating multiElement to reflect
                 // how it will be after adding pointer position as the next point
                 // trigger update here so that new element canvas renders again to reflect this
@@ -3873,7 +3901,7 @@ class App extends React.Component {
                             activeEmbeddable: { element: hitElement, state: "hover" },
                         });
                     }
-                    else {
+                    else if (!hitElement || !isElbowArrow(hitElement)) {
                         setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
                         if (this.state.activeEmbeddable?.state === "hover") {
                             this.setState({ activeEmbeddable: null });
@@ -4001,7 +4029,11 @@ class App extends React.Component {
                 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) {
+                const isHoveringAPointHandle = isElbowArrow(element)
+                    ? hoverPointIndex === 0 ||
+                        hoverPointIndex === element.points.length - 1
+                    : hoverPointIndex >= 0;
+                if (isHoveringAPointHandle || segmentMidPointHoveredCoords) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
                 }
                 else if (this.hitElement(scenePointerX, scenePointerY, element)) {
@@ -4009,7 +4041,9 @@ class App extends React.Component {
                 }
             }
             else if (this.hitElement(scenePointerX, scenePointerY, element)) {
-                if (!isElbowArrow(element) ||
+                if (
+                // Ebow arrows can only be moved when unconnected
+                !isElbowArrow(element) ||
                     !(element.startBinding || element.endBinding)) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
                 }
@@ -4036,6 +4070,12 @@ class App extends React.Component {
         }
     }
     handleCanvasPointerDown = (event) => {
+        const target = event.target;
+        // capture subsequent pointer events to the canvas
+        // this makes other elements non-interactive until pointer up
+        if (target.setPointerCapture) {
+            target.setPointerCapture(event.pointerId);
+        }
         this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
         this.maybeUnfollowRemoteUser();
         if (this.state.searchMatches) {
@@ -4045,7 +4085,7 @@ class App extends React.Component {
                     focus: false,
                 })),
             }));
-            jotaiStore.set(searchItemInFocusAtom, null);
+            editorJotaiStore.set(searchItemInFocusAtom, null);
         }
         // since contextMenu options are potentially evaluated on each render,
         // and an contextMenu action may depend on selection state, we must
@@ -4541,6 +4581,7 @@ class App extends React.Component {
             const selectedElements = this.scene.getSelectedElements(this.state);
             if (selectedElements.length === 1 &&
                 !this.state.editingLinearElement &&
+                !isElbowArrow(selectedElements[0]) &&
                 !(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);
@@ -4837,7 +4878,7 @@ class App extends React.Component {
                 selectedElementIds: makeNextSelectedElementIds(nextSelectedElementIds, prevState),
             };
         });
-        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), this.state.zoom);
         this.setState({
             newElement: element,
             startBoundElement: boundElement,
@@ -5007,6 +5048,9 @@ class App extends React.Component {
                     locked: false,
                     frameId: topLayerFrame ? topLayerFrame.id : null,
                     elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
+                    fixedSegments: this.state.currentItemArrowType === ARROW_TYPE.elbow
+                        ? []
+                        : null,
                 })
                 : newLinearElement({
                     type: elementType,
@@ -5037,7 +5081,7 @@ class App extends React.Component {
             mutateElement(element, {
                 points: [...element.points, pointFrom(0, 0)],
             });
-            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), isElbowArrow(element));
+            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), this.state.zoom, isElbowArrow(element), isElbowArrow(element));
             this.scene.insertElement(element);
             this.setState({
                 newElement: element,
@@ -5167,6 +5211,35 @@ class App extends React.Component {
                 return;
             }
             const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
+            if (this.state.selectedLinearElement &&
+                this.state.selectedLinearElement.elbowed &&
+                this.state.selectedLinearElement.pointerDownState.segmentMidpoint.index) {
+                const [gridX, gridY] = getGridPoint(pointerCoords.x, pointerCoords.y, event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
+                let index = this.state.selectedLinearElement.pointerDownState.segmentMidpoint
+                    .index;
+                if (index < 0) {
+                    const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords({
+                        ...this.state.selectedLinearElement,
+                        segmentMidPointHoveredCoords: null,
+                    }, { x: gridX, y: gridY }, this.state, this.scene.getNonDeletedElementsMap());
+                    index = nextCoords
+                        ? LinearElementEditor.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, nextCoords, this.scene.getNonDeletedElementsMap())
+                        : -1;
+                }
+                const ret = LinearElementEditor.moveFixedSegment(this.state.selectedLinearElement, index, gridX, gridY, this.scene.getNonDeletedElementsMap());
+                flushSync(() => {
+                    if (this.state.selectedLinearElement) {
+                        this.setState({
+                            selectedLinearElement: {
+                                ...this.state.selectedLinearElement,
+                                segmentMidPointHoveredCoords: ret.segmentMidPointHoveredCoords,
+                                pointerDownState: ret.pointerDownState,
+                            },
+                        });
+                    }
+                });
+                return;
+            }
             const lastPointerCoords = this.lastPointerMoveCoords ?? pointerDownState.origin;
             this.lastPointerMoveCoords = pointerCoords;
             // We need to initialize dragOffsetXY only after we've updated
@@ -5370,13 +5443,12 @@ class App extends React.Component {
                     this.maybeCacheVisibleGaps(event, selectedElements);
                     this.maybeCacheReferenceSnapPoints(event, selectedElements);
                     const { snapOffset, snapLines } = snapDraggedElements(originalElements, dragOffset, this, event, this.scene.getNonDeletedElementsMap());
-                    flushSync(() => {
-                        this.setState({ snapLines });
-                    });
+                    this.setState({ snapLines });
                     // when we're editing the name of a frame, we want the user to be
                     // able to select and interact with the text input
-                    !this.state.editingFrame &&
+                    if (!this.state.editingFrame) {
                         dragSelectedElements(pointerDownState, selectedElements, dragOffset, this.scene, snapOffset, event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
+                    }
                     this.setState({
                         selectedElementsAreBeingDragged: true,
                         // element is being dragged and selectionElement that was created on pointer down
@@ -5386,7 +5458,7 @@ class App extends React.Component {
                     if (selectedElements.length !== 1 ||
                         !isElbowArrow(selectedElements[0])) {
                         this.setState({
-                            suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap()),
+                            suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap(), this.state.zoom),
                         });
                     }
                     // We duplicate the selected element if alt is pressed on pointer move
@@ -5431,7 +5503,12 @@ class App extends React.Component {
                                 nextElements.push(element);
                             }
                         }
-                        const nextSceneElements = [...nextElements, ...elementsToAppend];
+                        let nextSceneElements = [
+                            ...nextElements,
+                            ...elementsToAppend,
+                        ];
+                        const mappedNewSceneElements = this.props.onDuplicate?.(nextSceneElements, elements);
+                        nextSceneElements = mappedNewSceneElements || nextSceneElements;
                         syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
                         bindTextToShapeAfterDuplication(nextElements, elementsToAppend, oldIdToDuplicatedId);
                         fixBindingsAfterDuplication(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, "duplicatesServeAsOld");
@@ -5487,16 +5564,11 @@ class App extends React.Component {
                             points: [...points, pointFrom(dx, dy)],
                         }, false);
                     }
-                    else if (points.length > 1 && isElbowArrow(newElement)) {
-                        mutateElbowArrow(newElement, elementsMap, [...points.slice(0, -1), pointFrom(dx, dy)], vector(0, 0), undefined, {
-                            isDragging: true,
-                            informMutation: false,
-                        });
-                    }
-                    else if (points.length === 2) {
+                    else if (points.length === 2 ||
+                        (points.length > 1 && isElbowArrow(newElement))) {
                         mutateElement(newElement, {
                             points: [...points.slice(0, -1), pointFrom(dx, dy)],
-                        }, false);
+                        }, false, { isDragging: true });
                     }
                     this.setState({
                         newElement,
@@ -5537,7 +5609,7 @@ class App extends React.Component {
                         }
                     }
                     const elementsWithinSelection = this.state.selectionElement
-                        ? getElementsWithinSelection(elements, this.state.selectionElement, this.scene.getNonDeletedElementsMap())
+                        ? getElementsWithinSelection(elements, this.state.selectionElement, this.scene.getNonDeletedElementsMap(), false)
                         : [];
                     this.setState((prevState) => {
                         const nextSelectedElementIds = {
@@ -5630,6 +5702,20 @@ class App extends React.Component {
                 selectedElementsAreBeingDragged: false,
             });
             const elementsMap = this.scene.getNonDeletedElementsMap();
+            if (pointerDownState.drag.hasOccurred &&
+                pointerDownState.hit?.element?.id) {
+                const element = elementsMap.get(pointerDownState.hit.element.id);
+                if (isBindableElement(element)) {
+                    // Renormalize elbow arrows when they are changed via indirect move
+                    element.boundElements
+                        ?.filter((e) => e.type === "arrow")
+                        .map((e) => elementsMap.get(e.id))
+                        .filter((e) => isElbowArrow(e))
+                        .forEach((e) => {
+                        !!e && mutateElement(e, {}, true);
+                    });
+                }
+            }
             // Handle end of dragging a point of a linear element, might close a loop
             // and sets binding element
             if (this.state.editingLinearElement) {
@@ -5649,6 +5735,13 @@ class App extends React.Component {
                 }
             }
             else if (this.state.selectedLinearElement) {
+                // Normalize elbow arrow points, remove close parallel segments
+                if (this.state.selectedLinearElement.elbowed) {
+                    const element = LinearElementEditor.getElement(this.state.selectedLinearElement.elementId, this.scene.getNonDeletedElementsMap());
+                    if (element) {
+                        mutateElement(element, {}, true);
+                    }
+                }
                 if (pointerDownState.hit?.element?.id !==
                     this.state.selectedLinearElement.elementId) {
                     const selectedELements = this.scene.getSelectedElements(this.state);
@@ -5805,7 +5898,7 @@ class App extends React.Component {
             }
             if (isFrameLikeElement(newElement)) {
                 const elementsInsideFrame = getElementsInNewFrame(this.scene.getElementsIncludingDeleted(), newElement, this.scene.getNonDeletedElementsMap());
-                this.scene.replaceAllElements(addElementsToFrame(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, newElement));
+                this.scene.replaceAllElements(addElementsToFrame(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, newElement, this.state));
             }
             if (newElement) {
                 mutateElement(newElement, getNormalizedDimensions(newElement));
@@ -5868,7 +5961,7 @@ class App extends React.Component {
                         if (this.state.editingGroupId) {
                             updateGroupIdsAfterEditingGroup(elementsToAdd);
                         }
-                        nextElements = addElementsToFrame(nextElements, elementsToAdd, topLayerFrame);
+                        nextElements = addElementsToFrame(nextElements, elementsToAdd, topLayerFrame, this.state);
                     }
                     else if (!topLayerFrame) {
                         if (this.state.editingGroupId) {
@@ -5909,10 +6002,10 @@ class App extends React.Component {
             const hitElement = pointerDownState.hit.element;
             if (this.state.selectedLinearElement?.elementId !== hitElement?.id &&
                 isLinearElement(hitElement)) {
-                const selectedELements = this.scene.getSelectedElements(this.state);
+                const selectedElements = this.scene.getSelectedElements(this.state);
                 // set selectedLinearElement when no other element selected except
                 // the one we've hit
-                if (selectedELements.length === 1) {
+                if (selectedElements.length === 1) {
                     this.setState({
                         selectedLinearElement: new LinearElementEditor(hitElement),
                     });
@@ -6059,8 +6152,10 @@ class App extends React.Component {
                 }
             }
             if (
-            // not dragged
-            !pointerDownState.drag.hasOccurred &&
+            // not elbow midpoint dragged
+            !(hitElement && isElbowArrow(hitElement)) &&
+                // not dragged
+                !pointerDownState.drag.hasOccurred &&
                 // not resized
                 !this.state.isResizing &&
                 // only hitting the bounding box of the previous hit element
@@ -6118,7 +6213,7 @@ class App extends React.Component {
                 const linearElements = this.scene
                     .getSelectedElements(this.state)
                     .filter(isLinearElement);
-                bindOrUnbindLinearElements(linearElements, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
+                bindOrUnbindLinearElements(linearElements, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? [], this.state.zoom);
             }
             if (activeTool.type === "laser") {
                 this.laserTrails.endPath();
@@ -6465,8 +6560,8 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: shouldEnableBinding });
         }
     };
-    maybeSuggestBindingAtCursor = (pointerCoords) => {
-        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+    maybeSuggestBindingAtCursor = (pointerCoords, considerAll) => {
+        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), this.state.zoom, false, considerAll);
         this.setState({
             suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : [],
         });
@@ -6481,7 +6576,7 @@ class App extends React.Component {
             return;
         }
         const suggestedBindings = pointerCoords.reduce((acc, coords) => {
-            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), isArrowElement(linearElement) && isElbowArrow(linearElement));
+            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), this.state.zoom, isElbowArrow(linearElement), isElbowArrow(linearElement));
             if (hoveredBindableElement != null &&
                 !isLinearElementSimpleAndAlreadyBound(linearElement, oppositeBindingBoundElement?.id, hoveredBindableElement)) {
                 acc.push(hoveredBindableElement);
@@ -6798,7 +6893,7 @@ class App extends React.Component {
         }
         const transformHandleType = pointerDownState.resize.handleType;
         const pointerCoords = pointerDownState.lastCoords;
-        const [x, y] = getGridPoint(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, this.getEffectiveGridSize());
+        const [x, y] = getGridPoint(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
         const croppingElement = this.scene
             .getNonDeletedElementsMap()
             .get(this.state.croppingElementId);
@@ -6812,7 +6907,14 @@ class App extends React.Component {
                 isImageElement(croppingAtStateStart) &&
                 image &&
                 !(image instanceof Promise)) {
-                mutateElement(croppingElement, cropElement(croppingElement, transformHandleType, image.naturalWidth, image.naturalHeight, x, y, event.shiftKey
+                const [gridX, gridY] = getGridPoint(pointerCoords.x, pointerCoords.y, event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
+                const dragOffset = {
+                    x: gridX - pointerDownState.originInGrid.x,
+                    y: gridY - pointerDownState.originInGrid.y,
+                };
+                this.maybeCacheReferenceSnapPoints(event, [croppingElement]);
+                const { snapOffset, snapLines } = snapResizingElements([croppingElement], [croppingAtStateStart], this, event, dragOffset, transformHandleType);
+                mutateElement(croppingElement, cropElement(croppingElement, transformHandleType, image.naturalWidth, image.naturalHeight, x + snapOffset.x, y + snapOffset.y, event.shiftKey
                     ? croppingAtStateStart.width / croppingAtStateStart.height
                     : undefined));
                 updateBoundElements(croppingElement, this.scene.getNonDeletedElementsMap(), {
@@ -6823,6 +6925,7 @@ class App extends React.Component {
                 });
                 this.setState({
                     isCropping: transformHandleType && transformHandleType !== "rotation",
+                    snapLines,
                 });
             }
             return true;
@@ -6879,10 +6982,10 @@ class App extends React.Component {
                 snapLines,
             });
         }
-        if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.some((element) => isImageElement(element))
+        if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), this.scene, shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.some((element) => isImageElement(element))
             ? !shouldMaintainAspectRatio(event)
             : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {
-            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap());
+            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap(), this.state.zoom);
             const elementsToHighlight = new Set();
             selectedFrames.forEach((frame) => {
                 getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach((element) => elementsToHighlight.add(element));
@@ -6938,8 +7041,10 @@ class App extends React.Component {
             actionCut,
             actionCopy,
             actionPaste,
+            CONTEXT_MENU_SEPARATOR,
             actionSelectAllElementsInFrame,
             actionRemoveAllElementsFromFrame,
+            actionWrapSelectionInFrame,
             CONTEXT_MENU_SEPARATOR,
             actionToggleCropEditor,
             CONTEXT_MENU_SEPARATOR,