@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/element/embeddable.js

@@ -1,11 +1,10 @@
 import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
-import { getFontString, updateActiveTool } from "../utils";
+import { escapeDoubleQuotes, getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textWrapping";
 import { isIframeElement } from "./typeChecks";
-import { sanitizeHTMLAttribute } from "../data/url";
 import { StoreAction } from "../store";
 const embeddedLinkCache = new Map();
 const RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
@@ -162,7 +161,7 @@ export const getEmbedLink = (link) => {
         // Note that we don't attempt to parse the username as it can consist of
         // non-latin1 characters, and the username in the url can be set to anything
         // without affecting the embed.
-        const safeURL = sanitizeHTMLAttribute(`https://twitter.com/x/status/${postId}`);
+        const safeURL = escapeDoubleQuotes(`https://twitter.com/x/status/${postId}`);
         const ret = {
             type: "document",
             srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${safeURL}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
@@ -174,7 +173,7 @@ export const getEmbedLink = (link) => {
     }
     if (RE_REDDIT.test(link)) {
         const [, page, postId, title] = link.match(RE_REDDIT);
-        const safeURL = sanitizeHTMLAttribute(`https://reddit.com/r/${page}/comments/${postId}/${title}`);
+        const safeURL = escapeDoubleQuotes(`https://reddit.com/r/${page}/comments/${postId}/${title}`);
         const ret = {
             type: "document",
             srcdoc: (theme) => createSrcDoc(`<blockquote class="reddit-embed-bq" data-embed-theme="${theme}"><a href="${safeURL}"></a><br></blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>`),
@@ -186,7 +185,7 @@ export const getEmbedLink = (link) => {
     }
     if (RE_GH_GIST.test(link)) {
         const [, user, gistId] = link.match(RE_GH_GIST);
-        const safeURL = sanitizeHTMLAttribute(`https://gist.github.com/${user}/${gistId}`);
+        const safeURL = escapeDoubleQuotes(`https://gist.github.com/${user}/${gistId}`);
         const ret = {
             type: "document",
             srcdoc: () => createSrcDoc(`

package/dist/excalidraw/element/flowchart.d.ts

@@ -1,4 +1,4 @@
-import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFlowchartNodeElement } from "./types";
+import { type ElementsMap, type ExcalidrawBindableElement, type ExcalidrawElement, type ExcalidrawFlowchartNodeElement } from "./types";
 import type { AppState, PendingExcalidrawElements } from "../types";
 type LinkDirection = "up" | "right" | "down" | "left";
 export declare const getLinkDirectionFromKey: (key: string) => LinkDirection;

package/dist/excalidraw/element/flowchart.js

@@ -6,9 +6,10 @@ import { KEYS } from "../keys";
 import { mutateElement } from "./mutateElement";
 import { elementOverlapsWithFrame, elementsAreInFrameBounds } from "../frame";
 import { isBindableElement, isElbowArrow, isFrameElement, isFlowchartNodeElement, } from "./typeChecks";
-import { invariant } from "../utils";
+import { invariant, toBrandedType } from "../utils";
 import { pointFrom } from "../../math";
 import { aabbForElement } from "../shapes";
+import { updateElbowArrowPoints } from "./elbowArrow";
 const VERTICAL_OFFSET = 100;
 const HORIZONTAL_OFFSET = 100;
 export const getLinkDirectionFromKey = (key) => {
@@ -158,6 +159,9 @@ const addNewNode = (element, elementsMap, appState, direction) => {
         backgroundColor: element.backgroundColor,
         strokeColor: element.strokeColor,
         strokeWidth: element.strokeWidth,
+        opacity: element.opacity,
+        fillStyle: element.fillStyle,
+        strokeStyle: element.strokeStyle,
     });
     invariant(isFlowchartNodeElement(nextNode), "not an ExcalidrawFlowchartNodeElement");
     const bindingArrow = createBindingArrow(element, nextNode, elementsMap, direction, appState);
@@ -208,6 +212,9 @@ export const addNewNodes = (startNode, elementsMap, appState, direction, numberO
             backgroundColor: startNode.backgroundColor,
             strokeColor: startNode.strokeColor,
             strokeWidth: startNode.strokeWidth,
+            opacity: startNode.opacity,
+            fillStyle: startNode.fillStyle,
+            strokeStyle: startNode.strokeStyle,
         });
         invariant(isFlowchartNodeElement(nextNode), "not an ExcalidrawFlowchartNodeElement");
         const bindingArrow = createBindingArrow(startNode, nextNode, elementsMap, direction, appState);
@@ -270,11 +277,13 @@ const createBindingArrow = (startBindingElement, endBindingElement, elementsMap,
         type: "arrow",
         x: startX,
         y: startY,
-        startArrowhead: appState.currentItemStartArrowhead,
+        startArrowhead: null,
         endArrowhead: appState.currentItemEndArrowhead,
-        strokeColor: appState.currentItemStrokeColor,
-        strokeStyle: appState.currentItemStrokeStyle,
-        strokeWidth: appState.currentItemStrokeWidth,
+        strokeColor: startBindingElement.strokeColor,
+        strokeStyle: startBindingElement.strokeStyle,
+        strokeWidth: startBindingElement.strokeWidth,
+        opacity: startBindingElement.opacity,
+        roughness: startBindingElement.roughness,
         points: [pointFrom(0, 0), pointFrom(endX, endY)],
         elbowed: true,
     });
@@ -289,10 +298,17 @@ const createBindingArrow = (startBindingElement, endBindingElement, elementsMap,
             index: 1,
             point: bindingArrow.points[1],
         },
-    ], elementsMap, undefined, {
-        changedElements,
-    });
-    return bindingArrow;
+    ]);
+    const update = updateElbowArrowPoints(bindingArrow, toBrandedType(new Map([
+        ...elementsMap.entries(),
+        [startBindingElement.id, startBindingElement],
+        [endBindingElement.id, endBindingElement],
+        [bindingArrow.id, bindingArrow],
+    ])), { points: bindingArrow.points });
+    return {
+        ...bindingArrow,
+        ...update,
+    };
 };
 export class FlowChartNavigator {
     isExploring = false;

package/dist/excalidraw/element/heading.d.ts

@@ -7,6 +7,10 @@ export declare const HEADING_UP: Heading;
 export type Heading = [1, 0] | [0, 1] | [-1, 0] | [0, -1];
 export declare const headingForDiamond: <Point extends GlobalPoint | LocalPoint>(a: Point, b: Point) => Heading;
 export declare const vectorToHeading: (vec: Vector) => Heading;
+export declare const headingForPoint: <P extends GlobalPoint | LocalPoint>(p: P, o: P) => Heading;
+export declare const headingForPointIsHorizontal: <P extends GlobalPoint | LocalPoint>(p: P, o: P) => boolean;
 export declare const compareHeading: (a: Heading, b: Heading) => boolean;
-export declare const headingForPointFromElement: <Point extends GlobalPoint | LocalPoint>(element: Readonly<ExcalidrawBindableElement>, aabb: readonly [minX: number, minY: number, maxX: number, maxY: number], p: Readonly<LocalPoint | GlobalPoint>) => Heading;
+export declare const headingIsHorizontal: (a: Heading) => boolean;
+export declare const headingIsVertical: (a: Heading) => boolean;
+export declare const headingForPointFromElement: <Point extends GlobalPoint | LocalPoint>(element: Readonly<ExcalidrawBindableElement>, aabb: readonly [minX: number, minY: number, maxX: number, maxY: number], p: Readonly<Point>) => Heading;
 export declare const flipHeading: (h: Heading) => Heading;

package/dist/excalidraw/element/heading.js

@@ -1,4 +1,4 @@
-import { pointFrom, pointRotateRads, pointScaleFromOrigin, radiansToDegrees, triangleIncludesPoint, } from "../../math";
+import { pointFrom, pointRotateRads, pointScaleFromOrigin, radiansToDegrees, triangleIncludesPoint, vectorFromPoint, } from "../../math";
 import { getCenterForBounds } from "./bounds";
 export const HEADING_RIGHT = [1, 0];
 export const HEADING_DOWN = [0, 1];
@@ -32,7 +32,11 @@ export const vectorToHeading = (vec) => {
     }
     return HEADING_UP;
 };
+export const headingForPoint = (p, o) => vectorToHeading(vectorFromPoint(p, o));
+export const headingForPointIsHorizontal = (p, o) => headingIsHorizontal(headingForPoint(p, o));
 export const compareHeading = (a, b) => a[0] === b[0] && a[1] === b[1];
+export const headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
+export const headingIsVertical = (a) => !headingIsHorizontal(a);
 // Gets the heading for the point by creating a bounding box around the rotated
 // close fitting bounding box, then creating 4 search cones around the center of
 // the external bbox.

package/dist/excalidraw/element/image.js

@@ -72,12 +72,22 @@ export const normalizeSVG = (SVGString) => {
         if (!svg.hasAttribute("xmlns")) {
             svg.setAttribute("xmlns", SVG_NS);
         }
-        if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) {
-            const viewBox = svg.getAttribute("viewBox");
-            let width = svg.getAttribute("width") || "50";
-            let height = svg.getAttribute("height") || "50";
+        let width = svg.getAttribute("width");
+        let height = svg.getAttribute("height");
+        // Do not use % or auto values for width/height
+        // to avoid scaling issues when rendering at different sizes/zoom levels
+        if (width?.includes("%") || width === "auto") {
+            width = null;
+        }
+        if (height?.includes("%") || height === "auto") {
+            height = null;
+        }
+        const viewBox = svg.getAttribute("viewBox");
+        if (!width || !height) {
+            width = width || "50";
+            height = height || "50";
             if (viewBox) {
-                const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
+                const match = viewBox.match(/\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/);
                 if (match) {
                     [, width, height] = match;
                 }
@@ -85,6 +95,10 @@ export const normalizeSVG = (SVGString) => {
             svg.setAttribute("width", width);
             svg.setAttribute("height", height);
         }
+        // Make sure viewBox is set
+        if (!viewBox) {
+            svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+        }
         return svg.outerHTML;
     }
 };

package/dist/excalidraw/element/linearElementEditor.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap, OrderedExcalidrawElement, SceneElementsMap } from "./types";
+import type { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap, SceneElementsMap, ExcalidrawElbowArrowElement } from "./types";
 import type { Bounds } from "./bounds";
-import type { AppState, PointerCoords, InteractiveCanvasAppState, AppClassProperties, NullableGridSize } from "../types";
+import type { AppState, PointerCoords, InteractiveCanvasAppState, AppClassProperties, NullableGridSize, Zoom } from "../types";
 import type { Store } from "../store";
 import type Scene from "../scene/Scene";
 import { type GlobalPoint, type LocalPoint } from "../../math";
@@ -49,7 +49,7 @@ export declare class LinearElementEditor {
      * @param id the `elementId` from the instance of this class (so that we can
      *  statically guarantee this method returns an ExcalidrawLinearElement)
      */
-    static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"], elementsMap: ElementsMap): NonDeleted<ExcalidrawLinearElement> | null;
+    static getElement<T extends ExcalidrawLinearElement>(id: InstanceType<typeof LinearElementEditor>["elementId"], elementsMap: ElementsMap): T | null;
     static handleBoxSelection(event: PointerEvent, appState: AppState, setState: React.Component<any, AppState>["setState"], elementsMap: NonDeletedSceneElementsMap): false | undefined;
     /** @returns whether point was dragged */
     static handlePointDragging(event: PointerEvent, app: AppClassProperties, scenePointerX: number, scenePointerY: number, maybeSuggestBinding: (element: NonDeleted<ExcalidrawLinearElement>, pointSceneCoords: {
@@ -63,7 +63,7 @@ export declare class LinearElementEditor {
         x: number;
         y: number;
     }, appState: AppState, elementsMap: ElementsMap) => GlobalPoint | null;
-    static isSegmentTooShort(element: NonDeleted<ExcalidrawLinearElement>, startPoint: GlobalPoint | LocalPoint, endPoint: GlobalPoint | LocalPoint, zoom: AppState["zoom"]): boolean;
+    static isSegmentTooShort<P extends GlobalPoint | LocalPoint>(element: NonDeleted<ExcalidrawLinearElement>, startPoint: P, endPoint: P, index: number, zoom: Zoom): boolean;
     static getSegmentMidPoint(element: NonDeleted<ExcalidrawLinearElement>, startPoint: GlobalPoint, endPoint: GlobalPoint, endPointIndex: number, elementsMap: ElementsMap): GlobalPoint;
     static getSegmentMidPointIndex(linearElementEditor: LinearElementEditor, appState: AppState, midPoint: GlobalPoint, elementsMap: ElementsMap): number;
     static handlePointerDown(event: React.PointerEvent<HTMLElement>, app: AppClassProperties, store: Store, scenePointer: {
@@ -97,20 +97,17 @@ export declare class LinearElementEditor {
     };
     static normalizePoints(element: NonDeleted<ExcalidrawLinearElement>): void;
     static duplicateSelectedPoints(appState: AppState, elementsMap: NonDeletedSceneElementsMap | SceneElementsMap): AppState;
-    static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[], elementsMap: NonDeletedSceneElementsMap | SceneElementsMap): void;
+    static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[]): void;
     static addPoints(element: NonDeleted<ExcalidrawLinearElement>, targetPoints: {
         point: LocalPoint;
-    }[], elementsMap: NonDeletedSceneElementsMap | SceneElementsMap): void;
+    }[]): void;
     static movePoints(element: NonDeleted<ExcalidrawLinearElement>, targetPoints: {
         index: number;
         point: LocalPoint;
         isDragging?: boolean;
-    }[], elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, otherUpdates?: {
+    }[], otherUpdates?: {
         startBinding?: PointBinding | null;
         endBinding?: PointBinding | null;
-    }, options?: {
-        changedElements?: Map<string, OrderedExcalidrawElement>;
-        isDragging?: boolean;
     }): void;
     static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, elementsMap: ElementsMap): boolean;
     static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, app: AppClassProperties, snapToGrid: boolean, elementsMap: ElementsMap): {
@@ -125,5 +122,7 @@ export declare class LinearElementEditor {
     };
     static getMinMaxXYWithBoundText: (element: ExcalidrawLinearElement, elementsMap: ElementsMap, elementBounds: Bounds, boundTextElement: ExcalidrawTextElementWithContainer) => [number, number, number, number, number, number];
     static getElementAbsoluteCoords: (element: ExcalidrawLinearElement, elementsMap: ElementsMap, includeBoundText?: boolean) => [number, number, number, number, number, number];
+    static moveFixedSegment(linearElement: LinearElementEditor, index: number, x: number, y: number, elementsMap: ElementsMap): LinearElementEditor;
+    static deleteFixedSegment(element: ExcalidrawElbowArrowElement, index: number): void;
 }
 export {};

package/dist/excalidraw/element/linearElementEditor.js

@@ -2,16 +2,16 @@ import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import { getCurvePathOps, getElementPointsCoords, getMinMaxXYFromCurvePathOps, } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { bindOrUnbindLinearElement, getHoveredElementForBinding, isBindingEnabled, } from "./binding";
-import { invariant, toBrandedType, tupleToCoors } from "../utils";
+import { invariant, tupleToCoors } from "../utils";
 import { isBindingElement, isElbowArrow, isFixedPointBinding, } from "./typeChecks";
 import { KEYS, shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { DRAGGING_THRESHOLD } from "../constants";
 import { ShapeCache } from "../scene/ShapeCache";
-import { mutateElbowArrow } from "./routing";
-import { pointCenter, pointFrom, pointRotateRads, pointsEqual, vector, pointDistance, } from "../../math";
+import { pointCenter, pointFrom, pointRotateRads, pointsEqual, vector, pointDistance, pointTranslate, vectorFromPoint, } from "../../math";
 import { getBezierCurveLength, getBezierXY, getControlPointsForBezierCurve, isPathALoop, mapIntervalToBezierT, } from "../shapes";
 import { getGridPoint } from "../snapping";
+import { headingIsHorizontal, vectorToHeading } from "./heading";
 const editorMidPointsCache = { version: null, points: [], zoom: null };
 export class LinearElementEditor {
     elementId;
@@ -151,7 +151,7 @@ export class LinearElementEditor {
                         point: pointFrom(width + referencePoint[0], height + referencePoint[1]),
                         isDragging: selectedIndex === lastClickedPoint,
                     },
-                ], elementsMap);
+                ]);
             }
             else {
                 const newDraggingPointPosition = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());
@@ -166,7 +166,7 @@ export class LinearElementEditor {
                         point: newPointPosition,
                         isDragging: pointIndex === lastClickedPoint,
                     };
-                }), elementsMap);
+                }));
             }
             const boundTextElement = getBoundTextElement(element, elementsMap);
             if (boundTextElement) {
@@ -212,10 +212,10 @@ export class LinearElementEditor {
                                     ? element.points[element.points.length - 1]
                                     : element.points[0],
                             },
-                        ], elementsMap);
+                        ]);
                     }
                     const bindingElement = isBindingEnabled(appState)
-                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap)
+                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap, appState.zoom, isElbowArrow(element), isElbowArrow(element))
                         : null;
                     bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
                 }
@@ -244,7 +244,8 @@ export class LinearElementEditor {
     static getEditorMidPoints = (element, elementsMap, appState) => {
         const boundText = getBoundTextElement(element, elementsMap);
         // Since its not needed outside editor unless 2 pointer lines or bound text
-        if (!appState.editingLinearElement &&
+        if (!isElbowArrow(element) &&
+            !appState.editingLinearElement &&
             element.points.length > 2 &&
             !boundText) {
             return [];
@@ -261,7 +262,7 @@ export class LinearElementEditor {
         let index = 0;
         const midpoints = [];
         while (index < points.length - 1) {
-            if (LinearElementEditor.isSegmentTooShort(element, element.points[index], element.points[index + 1], appState.zoom)) {
+            if (LinearElementEditor.isSegmentTooShort(element, element.points[index], element.points[index + 1], index, appState.zoom)) {
                 midpoints.push(null);
                 index++;
                 continue;
@@ -281,14 +282,16 @@ export class LinearElementEditor {
             return null;
         }
         const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y);
-        if (clickedPointIndex >= 0) {
+        if (!isElbowArrow(element) && clickedPointIndex >= 0) {
             return null;
         }
         const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
-        if (points.length >= 3 && !appState.editingLinearElement) {
+        if (points.length >= 3 &&
+            !appState.editingLinearElement &&
+            !isElbowArrow(element)) {
             return null;
         }
-        const threshold = LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;
+        const threshold = (LinearElementEditor.POINT_HANDLE_SIZE + 1) / appState.zoom.value;
         const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;
         if (existingSegmentMidpointHitCoords) {
             const distance = pointDistance(pointFrom(existingSegmentMidpointHitCoords[0], existingSegmentMidpointHitCoords[1]), pointFrom(scenePointer.x, scenePointer.y));
@@ -300,7 +303,7 @@ export class LinearElementEditor {
         const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
         while (index < midPoints.length) {
             if (midPoints[index] !== null) {
-                const distance = pointDistance(pointFrom(midPoints[index][0], midPoints[index][1]), pointFrom(scenePointer.x, scenePointer.y));
+                const distance = pointDistance(midPoints[index], pointFrom(scenePointer.x, scenePointer.y));
                 if (distance <= threshold) {
                     return midPoints[index];
                 }
@@ -309,8 +312,15 @@ export class LinearElementEditor {
         }
         return null;
     };
-    static isSegmentTooShort(element, startPoint, endPoint, zoom) {
-        let distance = pointDistance(pointFrom(startPoint[0], startPoint[1]), pointFrom(endPoint[0], endPoint[1]));
+    static isSegmentTooShort(element, startPoint, endPoint, index, zoom) {
+        if (isElbowArrow(element)) {
+            if (index >= 0 && index < element.points.length) {
+                return (pointDistance(startPoint, endPoint) * zoom.value <
+                    LinearElementEditor.POINT_HANDLE_SIZE / 2);
+            }
+            return false;
+        }
+        let distance = pointDistance(startPoint, endPoint);
         if (element.points.length > 2 && element.roundness) {
             distance = getBezierCurveLength(element, endPoint);
         }
@@ -364,9 +374,8 @@ export class LinearElementEditor {
         if (segmentMidpoint) {
             segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint, elementsMap);
         }
-        if (event.altKey && appState.editingLinearElement) {
-            if (linearElementEditor.lastUncommittedPoint == null &&
-                !isElbowArrow(element)) {
+        else if (event.altKey && appState.editingLinearElement) {
+            if (linearElementEditor.lastUncommittedPoint == null) {
                 mutateElement(element, {
                     points: [
                         ...element.points,
@@ -391,7 +400,7 @@ export class LinearElementEditor {
                 },
                 selectedPointsIndices: [element.points.length - 1],
                 lastUncommittedPoint: null,
-                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap),
+                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap, app.state.zoom, linearElementEditor.elbowed),
             };
             ret.didAddPoint = true;
             return ret;
@@ -473,7 +482,7 @@ export class LinearElementEditor {
         const lastPoint = points[points.length - 1];
         if (!event.altKey) {
             if (lastPoint === lastUncommittedPoint) {
-                LinearElementEditor.deletePoints(element, [points.length - 1], elementsMap);
+                LinearElementEditor.deletePoints(element, [points.length - 1]);
             }
             return {
                 ...appState.editingLinearElement,
@@ -497,10 +506,10 @@ export class LinearElementEditor {
                     index: element.points.length - 1,
                     point: newPoint,
                 },
-            ], elementsMap);
+            ]);
         }
         else {
-            LinearElementEditor.addPoints(element, [{ point: newPoint }], elementsMap);
+            LinearElementEditor.addPoints(element, [{ point: newPoint }]);
         }
         return {
             ...appState.editingLinearElement,
@@ -633,7 +642,7 @@ export class LinearElementEditor {
                     index: element.points.length - 1,
                     point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
                 },
-            ], elementsMap);
+            ]);
         }
         return {
             ...appState,
@@ -643,7 +652,7 @@ export class LinearElementEditor {
             },
         };
     }
-    static deletePoints(element, pointIndices, elementsMap) {
+    static deletePoints(element, pointIndices) {
         let offsetX = 0;
         let offsetY = 0;
         const isDeletingOriginPoint = pointIndices.includes(0);
@@ -666,15 +675,15 @@ export class LinearElementEditor {
             }
             return acc;
         }, []);
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
     }
-    static addPoints(element, targetPoints, elementsMap) {
+    static addPoints(element, targetPoints) {
         const offsetX = 0;
         const offsetY = 0;
         const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
     }
-    static movePoints(element, targetPoints, elementsMap, otherUpdates, options) {
+    static movePoints(element, targetPoints, otherUpdates) {
         const { points } = element;
         // in case we're moving start point, instead of modifying its position
         // which would break the invariant of it being at [0,0], we move
@@ -702,9 +711,8 @@ export class LinearElementEditor {
             }
             return offsetX || offsetY ? pointFrom(p[0] - offsetX, p[1] - offsetY) : p;
         });
-        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, {
+        LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, otherUpdates, {
             isDragging: targetPoints.reduce((dragging, targetPoint) => dragging || targetPoint.isDragging === true, false),
-            changedElements: options?.changedElements,
         });
     }
     static shouldAddMidpoint(linearElementEditor, pointerCoords, appState, elementsMap) {
@@ -761,27 +769,27 @@ export class LinearElementEditor {
         ret.selectedPointsIndices = [segmentMidpoint.index];
         return ret;
     }
-    static _updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, options) {
+    static _updatePoints(element, nextPoints, offsetX, offsetY, otherUpdates, options) {
         if (isElbowArrow(element)) {
-            const bindings = {};
+            const updates = {};
             if (otherUpdates?.startBinding !== undefined) {
-                bindings.startBinding =
+                updates.startBinding =
                     otherUpdates.startBinding !== null &&
                         isFixedPointBinding(otherUpdates.startBinding)
                         ? otherUpdates.startBinding
                         : null;
             }
             if (otherUpdates?.endBinding !== undefined) {
-                bindings.endBinding =
+                updates.endBinding =
                     otherUpdates.endBinding !== null &&
                         isFixedPointBinding(otherUpdates.endBinding)
                         ? otherUpdates.endBinding
                         : null;
             }
-            const mergedElementsMap = options?.changedElements
-                ? toBrandedType(new Map([...elementsMap, ...options.changedElements]))
-                : elementsMap;
-            mutateElbowArrow(element, mergedElementsMap, nextPoints, vector(offsetX, offsetY), bindings, {
+            updates.points = Array.from(nextPoints);
+            updates.points[0] = pointTranslate(updates.points[0], vector(offsetX, offsetY));
+            updates.points[updates.points.length - 1] = pointTranslate(updates.points[updates.points.length - 1], vector(offsetX, offsetY));
+            mutateElement(element, updates, true, {
                 isDragging: options?.isDragging,
             });
         }
@@ -927,6 +935,57 @@ export class LinearElementEditor {
         }
         return coords;
     };
+    static moveFixedSegment(linearElement, index, x, y, elementsMap) {
+        const element = LinearElementEditor.getElement(linearElement.elementId, elementsMap);
+        if (!element || !isElbowArrow(element)) {
+            return linearElement;
+        }
+        if (index && index > 0 && index < element.points.length) {
+            const isHorizontal = headingIsHorizontal(vectorToHeading(vectorFromPoint(element.points[index], element.points[index - 1])));
+            const fixedSegments = (element.fixedSegments ?? []).reduce((segments, s) => {
+                segments[s.index] = s;
+                return segments;
+            }, {});
+            fixedSegments[index] = {
+                index,
+                start: pointFrom(!isHorizontal ? x - element.x : element.points[index - 1][0], isHorizontal ? y - element.y : element.points[index - 1][1]),
+                end: pointFrom(!isHorizontal ? x - element.x : element.points[index][0], isHorizontal ? y - element.y : element.points[index][1]),
+            };
+            const nextFixedSegments = Object.values(fixedSegments).sort((a, b) => a.index - b.index);
+            const offset = nextFixedSegments
+                .map((segment) => segment.index)
+                .reduce((count, idx) => (idx < index ? count + 1 : count), 0);
+            mutateElement(element, {
+                fixedSegments: nextFixedSegments,
+            });
+            const point = pointFrom(element.x +
+                (element.fixedSegments[offset].start[0] +
+                    element.fixedSegments[offset].end[0]) /
+                    2, element.y +
+                (element.fixedSegments[offset].start[1] +
+                    element.fixedSegments[offset].end[1]) /
+                    2);
+            return {
+                ...linearElement,
+                segmentMidPointHoveredCoords: point,
+                pointerDownState: {
+                    ...linearElement.pointerDownState,
+                    segmentMidpoint: {
+                        added: false,
+                        index: element.fixedSegments[offset].index,
+                        value: point,
+                    },
+                },
+            };
+        }
+        return linearElement;
+    }
+    static deleteFixedSegment(element, index) {
+        mutateElement(element, {
+            fixedSegments: element.fixedSegments?.filter((segment) => segment.index !== index),
+        });
+        mutateElement(element, {}, true);
+    }
 }
 const normalizeSelectedPoints = (points) => {
     let nextPoints = [

package/dist/excalidraw/element/mutateElement.d.ts

@@ -1,7 +1,9 @@
 import type { ExcalidrawElement } from "./types";
 import type { Mutable } from "../utility-types";
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce" | "updated">;
-export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
+export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean, options?: {
+    isDragging?: boolean;
+}) => TElement;
 export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>, force?: boolean) => TElement;
 /**
  * Mutates element, bumping `version`, `versionNonce`, and `updated`.

package/dist/excalidraw/element/mutateElement.js

@@ -1,18 +1,45 @@
 import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
-import { getUpdatedTimestamp } from "../utils";
+import { getUpdatedTimestamp, toBrandedType } from "../utils";
 import { ShapeCache } from "../scene/ShapeCache";
+import { isElbowArrow } from "./typeChecks";
+import { updateElbowArrowPoints } from "./elbowArrow";
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same drawing. Note: this will trigger the component to update. Make sure you
 // are calling it either from a React event handler or within unstable_batchedUpdates().
-export const mutateElement = (element, updates, informMutation = true) => {
+export const mutateElement = (element, updates, informMutation = true, options) => {
     let didChange = false;
     // casting to any because can't use `in` operator
     // (see https://github.com/microsoft/TypeScript/issues/21732)
-    const { points, fileId } = updates;
-    if (typeof points !== "undefined") {
+    const { points, fixedSegments, fileId, startBinding, endBinding } = updates;
+    if (isElbowArrow(element) &&
+        (Object.keys(updates).length === 0 || // normalization case
+            typeof points !== "undefined" || // repositioning
+            typeof fixedSegments !== "undefined" || // segment fixing
+            typeof startBinding !== "undefined" ||
+            typeof endBinding !== "undefined") // manual binding to element
+    ) {
+        const elementsMap = toBrandedType(Scene.getScene(element)?.getNonDeletedElementsMap() ?? new Map());
+        updates = {
+            ...updates,
+            angle: 0,
+            ...updateElbowArrowPoints({
+                ...element,
+                x: updates.x || element.x,
+                y: updates.y || element.y,
+            }, elementsMap, {
+                fixedSegments,
+                points,
+                startBinding,
+                endBinding,
+            }, {
+                isDragging: options?.isDragging,
+            }),
+        };
+    }
+    else if (typeof points !== "undefined") {
         updates = { ...getSizeFromPoints(points), ...updates };
     }
     for (const key in updates) {