@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/element/binding.js

@@ -6,19 +6,22 @@ import * as GATransform from "../gatransforms";
 import { getElementAbsoluteCoords } from "./bounds";
 import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
-import { isArrowElement, isBindableElement, isBindingElement, isBoundToContainer, isLinearElement, isTextElement, } from "./typeChecks";
+import { isArrowElement, isBindableElement, isBindingElement, isBoundToContainer, isElbowArrow, isFrameLikeElement, isLinearElement, isTextElement, } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
-import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
+import { getElementShape } from "../shapes";
+import { aabbForElement, clamp, distanceSq2d, getCenterForBounds, getCenterForElement, pointInsideBounds, pointToVector, rotatePoint, } from "../math";
+import { compareHeading, HEADING_DOWN, HEADING_LEFT, HEADING_RIGHT, HEADING_UP, headingForPointFromElement, vectorToHeading, } from "./heading";
 export const shouldEnableBindingForPointerEvent = (event) => {
     return !event[KEYS.CTRL_OR_CMD];
 };
 export const isBindingEnabled = (appState) => {
     return appState.isBindingEnabled;
 };
+export const FIXED_BINDING_DISTANCE = 5;
 const getNonDeletedElements = (scene, ids) => {
     const result = [];
     ids.forEach((id) => {
@@ -29,13 +32,13 @@ const getNonDeletedElements = (scene, ids) => {
     });
     return result;
 };
-export const bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap) => {
+export const bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap, scene) => {
     const boundToElementIds = new Set();
     const unboundFromElementIds = new Set();
-    bindOrUnbindLinearElementEdge(linearElement, startBindingElement, endBindingElement, "start", boundToElementIds, unboundFromElementIds, elementsMap);
-    bindOrUnbindLinearElementEdge(linearElement, endBindingElement, startBindingElement, "end", boundToElementIds, unboundFromElementIds, elementsMap);
+    bindOrUnbindLinearElementEdge(linearElement, startBindingElement, endBindingElement, "start", boundToElementIds, unboundFromElementIds, elementsMap, scene);
+    bindOrUnbindLinearElementEdge(linearElement, endBindingElement, startBindingElement, "end", boundToElementIds, unboundFromElementIds, elementsMap, scene);
     const onlyUnbound = Array.from(unboundFromElementIds).filter((id) => !boundToElementIds.has(id));
-    getNonDeletedElements(Scene.getScene(linearElement), onlyUnbound).forEach((element) => {
+    getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
         mutateElement(element, {
             boundElements: element.boundElements?.filter((element) => element.type !== "arrow" || element.id !== linearElement.id),
         });
@@ -45,7 +48,7 @@ const bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdge
 // Is mutated
 boundToElementIds, 
 // Is mutated
-unboundFromElementIds, elementsMap) => {
+unboundFromElementIds, elementsMap, scene) => {
     // "keep" is for method chaining convenience, a "no-op", so just bail out
     if (bindableElement === "keep") {
         return;
@@ -77,72 +80,72 @@ unboundFromElementIds, elementsMap) => {
         boundToElementIds.add(bindableElement.id);
     }
 };
-const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, app) => {
-    const elementsMap = app.scene.getNonDeletedElementsMap();
+const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, elementsMap) => {
     const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
     const elementId = edge === "start"
         ? linearElement.startBinding?.elementId
         : linearElement.endBinding?.elementId;
     if (elementId) {
         const element = elementsMap.get(elementId);
-        if (bindingBorderTest(element, coors, app)) {
+        if (isBindableElement(element) &&
+            bindingBorderTest(element, coors, elementsMap)) {
             return element;
         }
     }
     return null;
 };
-const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, app) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, app));
-const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, app) => {
+const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap));
+const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap, elements) => {
     const startIdx = 0;
     const endIdx = selectedElement.points.length - 1;
     const startDragged = draggingPoints.findIndex((i) => i === startIdx) > -1;
     const endDragged = draggingPoints.findIndex((i) => i === endIdx) > -1;
     const start = startDragged
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "start", app)
+            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements)
             : null // If binding is disabled and start is dragged, break all binds
         : // We have to update the focus and gap of the binding, so let's rebind
-            getElligibleElementForBindingElement(selectedElement, "start", app);
+            getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements);
     const end = endDragged
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "end", app)
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements)
             : null // If binding is disabled and end is dragged, break all binds
         : // We have to update the focus and gap of the binding, so let's rebind
-            getElligibleElementForBindingElement(selectedElement, "end", app);
+            getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements);
     return [start, end];
 };
-const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, app, isBindingEnabled) => {
-    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, app);
+const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, elements, isBindingEnabled) => {
+    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap);
     const start = startIsClose
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "start", app)
+            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements)
             : null
         : null;
     const end = endIsClose
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "end", app)
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements)
             : null
         : null;
     return [start, end];
 };
-export const bindOrUnbindLinearElements = (selectedElements, app, isBindingEnabled, draggingPoints) => {
+export const bindOrUnbindLinearElements = (selectedElements, elementsMap, elements, scene, isBindingEnabled, draggingPoints) => {
     selectedElements.forEach((selectedElement) => {
         const [start, end] = draggingPoints?.length
             ? // The arrow edge points are dragged (i.e. start, end)
-                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], app)
+                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], elementsMap, elements)
             : // The arrow itself (the shaft) or the inner joins are dragged
-                getBindingStrategyForDraggingArrowOrJoints(selectedElement, app, isBindingEnabled);
-        bindOrUnbindLinearElement(selectedElement, start, end, app.scene.getNonDeletedElementsMap());
+                getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, elements, isBindingEnabled);
+        bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene);
     });
 };
-export const getSuggestedBindingsForArrows = (selectedElements, app) => {
+export const getSuggestedBindingsForArrows = (selectedElements, elementsMap) => {
     // HOT PATH: Bail out if selected elements list is too large
     if (selectedElements.length > 50) {
         return [];
     }
     return (selectedElements
         .filter(isLinearElement)
-        .flatMap((element) => getOriginalBindingsIfStillCloseToArrowEnds(element, app))
+        .flatMap((element) => getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap))
         .filter((element) => element !== null)
         // Filter out bind candidates which are in the
         // same selection / group with the arrow
@@ -151,22 +154,30 @@ export const getSuggestedBindingsForArrows = (selectedElements, app) => {
         .filter((element) => selectedElements.filter((selected) => selected.id === element?.id)
         .length === 0));
 };
-export const maybeBindLinearElement = (linearElement, appState, pointerCoords, app) => {
+export const maybeBindLinearElement = (linearElement, appState, pointerCoords, elementsMap, elements) => {
     if (appState.startBoundElement != null) {
-        bindLinearElement(linearElement, appState.startBoundElement, "start", app.scene.getNonDeletedElementsMap());
+        bindLinearElement(linearElement, appState.startBoundElement, "start", elementsMap);
     }
-    const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
-    if (hoveredElement != null &&
-        !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, "end")) {
-        bindLinearElement(linearElement, hoveredElement, "end", app.scene.getNonDeletedElementsMap());
+    const hoveredElement = getHoveredElementForBinding(pointerCoords, elements, elementsMap, isElbowArrow(linearElement) && isElbowArrow(linearElement));
+    if (hoveredElement !== null) {
+        if (!isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, "end")) {
+            bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
+        }
     }
 };
 export const bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+    if (!isArrowElement(linearElement)) {
+        return;
+    }
+    const binding = {
+        elementId: hoveredElement.id,
+        ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap),
+        ...(isElbowArrow(linearElement)
+            ? calculateFixedPointForElbowArrowBinding(linearElement, hoveredElement, startOrEnd, elementsMap)
+            : { fixedPoint: null }),
+    };
     mutateElement(linearElement, {
-        [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
-            elementId: hoveredElement.id,
-            ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap),
-        },
+        [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding,
     });
     const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
     if (!boundElementsMap.has(linearElement.id)) {
@@ -197,9 +208,12 @@ const unbindLinearElement = (linearElement, startOrEnd) => {
     mutateElement(linearElement, { [field]: null });
     return binding.elementId;
 };
-export const getHoveredElementForBinding = (pointerCoords, app) => {
-    const hoveredElement = getElementAtPosition(app.scene.getNonDeletedElements(), (element) => isBindableElement(element, false) &&
-        bindingBorderTest(element, pointerCoords, app));
+export const getHoveredElementForBinding = (pointerCoords, elements, elementsMap, fullShape) => {
+    const hoveredElement = getElementAtPosition(elements, (element) => isBindableElement(element, false) &&
+        bindingBorderTest(element, pointerCoords, elementsMap, 
+        // disable fullshape snapping for frame elements so we
+        // can bind to frame children
+        fullShape && !isFrameLikeElement(element)));
     return hoveredElement;
 };
 const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
@@ -218,8 +232,8 @@ const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, element
 // Because scaling involves moving the focus points as well, it is
 // done before the `changedElement` is updated, and the `newSize` is passed
 // in explicitly.
-export const updateBoundElements = (changedElement, elementsMap, options) => {
-    const { newSize, simultaneouslyUpdated } = options ?? {};
+export const updateBoundElements = (changedElement, elementsMap, scene, options) => {
+    const { oldSize, simultaneouslyUpdated, changedElements } = options ?? {};
     const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(simultaneouslyUpdated);
     if (!isBindableElement(changedElement)) {
         return;
@@ -233,20 +247,38 @@ export const updateBoundElements = (changedElement, elementsMap, options) => {
             return;
         }
         const bindings = {
-            startBinding: maybeCalculateNewGapWhenScaling(changedElement, element.startBinding, newSize),
-            endBinding: maybeCalculateNewGapWhenScaling(changedElement, element.endBinding, newSize),
+            startBinding: maybeCalculateNewGapWhenScaling(changedElement, element.startBinding, oldSize),
+            endBinding: maybeCalculateNewGapWhenScaling(changedElement, element.endBinding, oldSize),
         };
         // `linearElement` is being moved/scaled already, just update the binding
         if (simultaneouslyUpdatedElementIds.has(element.id)) {
             mutateElement(element, bindings);
             return;
         }
-        bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {
+        const updates = bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {
             if (bindableElement &&
                 isBindableElement(bindableElement) &&
-                (bindingProp === "startBinding" || bindingProp === "endBinding")) {
-                updateBoundPoint(element, bindingProp, bindings[bindingProp], bindableElement, elementsMap);
+                (bindingProp === "startBinding" || bindingProp === "endBinding") &&
+                changedElement.id === element[bindingProp]?.elementId) {
+                const point = updateBoundPoint(element, bindingProp, bindings[bindingProp], bindableElement, elementsMap);
+                if (point) {
+                    return {
+                        index: bindingProp === "startBinding" ? 0 : element.points.length - 1,
+                        point,
+                    };
+                }
             }
+            return null;
+        }).filter((update) => update !== null);
+        LinearElementEditor.movePoints(element, updates, scene, {
+            ...(changedElement.id === element.startBinding?.elementId
+                ? { startBinding: bindings.startBinding }
+                : {}),
+            ...(changedElement.id === element.endBinding?.elementId
+                ? { endBinding: bindings.endBinding }
+                : {}),
+        }, {
+            changedElements,
         });
         const boundText = getBoundTextElement(element, elementsMap);
         if (boundText && !boundText.isDeleted) {
@@ -261,15 +293,165 @@ const doesNeedUpdate = (boundElement, changedElement) => {
 const getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
     return new Set((simultaneouslyUpdated || []).map((element) => element.id));
 };
+export const getHeadingForElbowArrowSnap = (point, otherPoint, bindableElement, aabb, elementsMap, origPoint) => {
+    const otherPointHeading = vectorToHeading(pointToVector(otherPoint, point));
+    if (!bindableElement || !aabb) {
+        return otherPointHeading;
+    }
+    const distance = getDistanceForBinding(origPoint, bindableElement, elementsMap);
+    if (!distance) {
+        return vectorToHeading(pointToVector(point, getCenterForElement(bindableElement)));
+    }
+    const pointHeading = headingForPointFromElement(bindableElement, aabb, point);
+    return pointHeading;
+};
+const getDistanceForBinding = (point, bindableElement, elementsMap) => {
+    const distance = distanceToBindableElement(bindableElement, point, elementsMap);
+    const bindDistance = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);
+    return distance > bindDistance ? null : distance;
+};
+export const bindPointToSnapToElementOutline = (point, otherPoint, bindableElement, elementsMap) => {
+    const aabb = bindableElement && aabbForElement(bindableElement);
+    if (bindableElement && aabb) {
+        // TODO: Dirty hack until tangents are properly calculated
+        const intersections = [
+            ...intersectElementWithLine(bindableElement, [point[0], point[1] - 2 * bindableElement.height], [point[0], point[1] + 2 * bindableElement.height], FIXED_BINDING_DISTANCE, elementsMap),
+            ...intersectElementWithLine(bindableElement, [point[0] - 2 * bindableElement.width, point[1]], [point[0] + 2 * bindableElement.width, point[1]], FIXED_BINDING_DISTANCE, elementsMap),
+        ].map((i) => distanceToBindableElement(bindableElement, i, elementsMap) >
+            Math.min(bindableElement.width, bindableElement.height) / 2
+            ? [-1 * i[0], -1 * i[1]]
+            : i);
+        const heading = headingForPointFromElement(bindableElement, aabb, point);
+        const isVertical = compareHeading(heading, HEADING_LEFT) ||
+            compareHeading(heading, HEADING_RIGHT);
+        const dist = distanceToBindableElement(bindableElement, point, elementsMap);
+        const isInner = isVertical
+            ? dist < bindableElement.width * -0.1
+            : dist < bindableElement.height * -0.1;
+        intersections.sort((a, b) => distanceSq2d(a, point) - distanceSq2d(b, point));
+        return isInner
+            ? headingToMidBindPoint(otherPoint, bindableElement, aabb)
+            : intersections.filter((i) => isVertical
+                ? Math.abs(point[1] - i[1]) < 0.1
+                : Math.abs(point[0] - i[0]) < 0.1)[0] ?? point;
+    }
+    return point;
+};
+const headingToMidBindPoint = (point, bindableElement, aabb) => {
+    const center = getCenterForBounds(aabb);
+    const heading = vectorToHeading(pointToVector(point, center));
+    switch (true) {
+        case compareHeading(heading, HEADING_UP):
+            return rotatePoint([(aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]], center, bindableElement.angle);
+        case compareHeading(heading, HEADING_RIGHT):
+            return rotatePoint([aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1], center, bindableElement.angle);
+        case compareHeading(heading, HEADING_DOWN):
+            return rotatePoint([(aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]], center, bindableElement.angle);
+        default:
+            return rotatePoint([aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1], center, bindableElement.angle);
+    }
+};
+export const avoidRectangularCorner = (element, p) => {
+    const center = getCenterForElement(element);
+    const nonRotatedPoint = rotatePoint(p, center, -element.angle);
+    if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
+        // Top left
+        if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
+            return rotatePoint([element.x - FIXED_BINDING_DISTANCE, element.y], center, element.angle);
+        }
+        return rotatePoint([element.x, element.y - FIXED_BINDING_DISTANCE], center, element.angle);
+    }
+    else if (nonRotatedPoint[0] < element.x &&
+        nonRotatedPoint[1] > element.y + element.height) {
+        // Bottom left
+        if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
+            return rotatePoint([element.x, element.y + element.height + FIXED_BINDING_DISTANCE], center, element.angle);
+        }
+        return rotatePoint([element.x - FIXED_BINDING_DISTANCE, element.y + element.height], center, element.angle);
+    }
+    else if (nonRotatedPoint[0] > element.x + element.width &&
+        nonRotatedPoint[1] > element.y + element.height) {
+        // Bottom right
+        if (nonRotatedPoint[0] - element.x <
+            element.width + FIXED_BINDING_DISTANCE) {
+            return rotatePoint([
+                element.x + element.width,
+                element.y + element.height + FIXED_BINDING_DISTANCE,
+            ], center, element.angle);
+        }
+        return rotatePoint([
+            element.x + element.width + FIXED_BINDING_DISTANCE,
+            element.y + element.height,
+        ], center, element.angle);
+    }
+    else if (nonRotatedPoint[0] > element.x + element.width &&
+        nonRotatedPoint[1] < element.y) {
+        // Top right
+        if (nonRotatedPoint[0] - element.x <
+            element.width + FIXED_BINDING_DISTANCE) {
+            return rotatePoint([element.x + element.width, element.y - FIXED_BINDING_DISTANCE], center, element.angle);
+        }
+        return rotatePoint([element.x + element.width + FIXED_BINDING_DISTANCE, element.y], center, element.angle);
+    }
+    return p;
+};
+export const snapToMid = (element, p, tolerance = 0.05) => {
+    const { x, y, width, height, angle } = element;
+    const center = [x + width / 2 - 0.1, y + height / 2 - 0.1];
+    const nonRotated = rotatePoint(p, center, -angle);
+    // snap-to-center point is adaptive to element size, but we don't want to go
+    // above and below certain px distance
+    const verticalThrehsold = clamp(tolerance * height, 5, 80);
+    const horizontalThrehsold = clamp(tolerance * width, 5, 80);
+    if (nonRotated[0] <= x + width / 2 &&
+        nonRotated[1] > center[1] - verticalThrehsold &&
+        nonRotated[1] < center[1] + verticalThrehsold) {
+        // LEFT
+        return rotatePoint([x - FIXED_BINDING_DISTANCE, center[1]], center, angle);
+    }
+    else if (nonRotated[1] <= y + height / 2 &&
+        nonRotated[0] > center[0] - horizontalThrehsold &&
+        nonRotated[0] < center[0] + horizontalThrehsold) {
+        // TOP
+        return rotatePoint([center[0], y - FIXED_BINDING_DISTANCE], center, angle);
+    }
+    else if (nonRotated[0] >= x + width / 2 &&
+        nonRotated[1] > center[1] - verticalThrehsold &&
+        nonRotated[1] < center[1] + verticalThrehsold) {
+        // RIGHT
+        return rotatePoint([x + width + FIXED_BINDING_DISTANCE, center[1]], center, angle);
+    }
+    else if (nonRotated[1] >= y + height / 2 &&
+        nonRotated[0] > center[0] - horizontalThrehsold &&
+        nonRotated[0] < center[0] + horizontalThrehsold) {
+        // DOWN
+        return rotatePoint([center[0], y + height + FIXED_BINDING_DISTANCE], center, angle);
+    }
+    return p;
+};
 const updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, elementsMap) => {
     if (binding == null ||
         // We only need to update the other end if this is a 2 point line element
         (binding.elementId !== bindableElement.id &&
             linearElement.points.length > 2)) {
-        return;
+        return null;
     }
     const direction = startOrEnd === "startBinding" ? -1 : 1;
     const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
+    if (isElbowArrow(linearElement)) {
+        const fixedPoint = binding.fixedPoint ??
+            calculateFixedPointForElbowArrowBinding(linearElement, bindableElement, startOrEnd === "startBinding" ? "start" : "end", elementsMap).fixedPoint;
+        const globalMidPoint = [
+            bindableElement.x + bindableElement.width / 2,
+            bindableElement.y + bindableElement.height / 2,
+        ];
+        const global = [
+            bindableElement.x + fixedPoint[0] * bindableElement.width,
+            bindableElement.y + fixedPoint[1] * bindableElement.height,
+        ];
+        const rotatedGlobal = rotatePoint(global, globalMidPoint, bindableElement.angle);
+        return LinearElementEditor.pointFromAbsoluteCoords(linearElement, rotatedGlobal, elementsMap);
+    }
     const adjacentPointIndex = edgePointIndex - direction;
     const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);
     const focusPointAbsolute = determineFocusPoint(bindableElement, binding.focus, adjacentPoint, elementsMap);
@@ -291,25 +473,45 @@ const updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, e
             newEdgePoint = intersections[0];
         }
     }
-    LinearElementEditor.movePoints(linearElement, [
-        {
-            index: edgePointIndex,
-            point: LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint, elementsMap),
-        },
-    ], { [startOrEnd]: binding });
+    return LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint, elementsMap);
+};
+export const calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+    const bounds = [
+        hoveredElement.x,
+        hoveredElement.y,
+        hoveredElement.x + hoveredElement.width,
+        hoveredElement.y + hoveredElement.height,
+    ];
+    const edgePointIndex = startOrEnd === "start" ? 0 : linearElement.points.length - 1;
+    const globalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);
+    const otherGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);
+    const snappedPoint = bindPointToSnapToElementOutline(globalPoint, otherGlobalPoint, hoveredElement, elementsMap);
+    const globalMidPoint = [
+        bounds[0] + (bounds[2] - bounds[0]) / 2,
+        bounds[1] + (bounds[3] - bounds[1]) / 2,
+    ];
+    const nonRotatedSnappedGlobalPoint = rotatePoint(snappedPoint, globalMidPoint, -hoveredElement.angle);
+    return {
+        fixedPoint: [
+            (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
+                hoveredElement.width,
+            (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
+                hoveredElement.height,
+        ],
+    };
 };
 const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {
     if (currentBinding == null || newSize == null) {
         return currentBinding;
     }
-    const { gap, focus, elementId } = currentBinding;
     const { width: newWidth, height: newHeight } = newSize;
     const { width, height } = changedElement;
-    const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), gap * (newWidth < newHeight ? newWidth / width : newHeight / height)));
-    return { elementId, gap: newGap, focus };
+    const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), currentBinding.gap *
+        (newWidth < newHeight ? newWidth / width : newHeight / height)));
+    return { ...currentBinding, gap: newGap };
 };
-const getElligibleElementForBindingElement = (linearElement, startOrEnd, app) => {
-    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, app.scene.getNonDeletedElementsMap()), app);
+const getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap, elements) => {
+    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap);
 };
 const getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     const index = startOrEnd === "start" ? 0 : -1;
@@ -329,6 +531,7 @@ duplicatesServeAsOld) => {
     const allBoundElementIds = new Set();
     const allBindableElementIds = new Set();
     const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
+    const duplicateIdToOldId = new Map([...oldIdToDuplicatedId].map(([key, value]) => [value, key]));
     oldElements.forEach((oldElement) => {
         const { boundElements } = oldElement;
         if (boundElements != null && boundElements.length > 0) {
@@ -369,7 +572,8 @@ duplicatesServeAsOld) => {
     sceneElements
         .filter(({ id }) => allBindableElementIds.has(id))
         .forEach((bindableElement) => {
-        const { boundElements } = bindableElement;
+        const oldElementId = duplicateIdToOldId.get(bindableElement.id);
+        const { boundElements } = sceneElements.find(({ id }) => id === oldElementId);
         if (boundElements != null && boundElements.length > 0) {
             mutateElement(bindableElement, {
                 boundElements: boundElements.map((boundElement) => oldIdToDuplicatedId.has(boundElement.id)
@@ -386,11 +590,9 @@ const newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {
     if (binding == null) {
         return null;
     }
-    const { elementId, focus, gap } = binding;
     return {
-        focus,
-        gap,
-        elementId: oldIdToDuplicatedId.get(elementId) ?? elementId,
+        ...binding,
+        elementId: oldIdToDuplicatedId.get(binding.elementId) ?? binding.elementId,
     };
 };
 export const fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
@@ -408,10 +610,11 @@ const newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {
     nextBoundElements.push(...elementsToAdd.map((x) => ({ id: x.id, type: x.type })));
     return nextBoundElements;
 };
-const bindingBorderTest = (element, { x, y }, app) => {
+export const bindingBorderTest = (element, { x, y }, elementsMap, fullShape) => {
     const threshold = maxBindingGap(element, element.width, element.height);
-    const shape = app.getElementShape(element);
-    return isPointOnShape([x, y], shape, threshold);
+    const shape = getElementShape(element, elementsMap);
+    return (isPointOnShape([x, y], shape, threshold) ||
+        (fullShape === true && pointInsideBounds([x, y], aabbForElement(element))));
 };
 export const maxBindingGap = (element, elementWidth, elementHeight) => {
     // Aligns diamonds with rectangles
@@ -420,7 +623,7 @@ export const maxBindingGap = (element, elementWidth, elementHeight) => {
     // We make the bindable boundary bigger for bigger elements
     return Math.max(16, Math.min(0.25 * smallerDimension, 32));
 };
-const distanceToBindableElement = (element, point, elementsMap) => {
+export const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
         case "rectangle":
         case "image":
@@ -803,24 +1006,26 @@ const boundElementsVisitor = (elements, element, visit) => {
  * Tries to visit each bindable element (does not have to be found).
  */
 const bindableElementsVisitor = (elements, element, visit) => {
+    const result = [];
     if (element.frameId) {
         const id = element.frameId;
-        visit(elements.get(id), "frameId", id);
+        result.push(visit(elements.get(id), "frameId", id));
     }
     if (isBoundToContainer(element)) {
         const id = element.containerId;
-        visit(elements.get(id), "containerId", id);
+        result.push(visit(elements.get(id), "containerId", id));
     }
     if (isArrowElement(element)) {
         if (element.startBinding) {
             const id = element.startBinding.elementId;
-            visit(elements.get(id), "startBinding", id);
+            result.push(visit(elements.get(id), "startBinding", id));
         }
         if (element.endBinding) {
             const id = element.endBinding.elementId;
-            visit(elements.get(id), "endBinding", id);
+            result.push(visit(elements.get(id), "endBinding", id));
         }
     }
+    return result;
 };
 /**
  * Bound element containing bindings to `frameId`, `containerId`, `startBinding` or `endBinding`.
@@ -969,3 +1174,30 @@ export class BindableElement {
         });
     };
 }
+export const getGlobalFixedPointForBindableElement = (fixedPointRatio, element) => {
+    const [fixedX, fixedY] = fixedPointRatio;
+    return rotatePoint([element.x + element.width * fixedX, element.y + element.height * fixedY], getCenterForElement(element), element.angle);
+};
+const getGlobalFixedPoints = (arrow, elementsMap) => {
+    const startElement = arrow.startBinding &&
+        elementsMap.get(arrow.startBinding.elementId);
+    const endElement = arrow.endBinding &&
+        elementsMap.get(arrow.endBinding.elementId);
+    const startPoint = startElement && arrow.startBinding
+        ? getGlobalFixedPointForBindableElement(arrow.startBinding.fixedPoint, startElement)
+        : [arrow.x + arrow.points[0][0], arrow.y + arrow.points[0][1]];
+    const endPoint = endElement && arrow.endBinding
+        ? getGlobalFixedPointForBindableElement(arrow.endBinding.fixedPoint, endElement)
+        : [
+            arrow.x + arrow.points[arrow.points.length - 1][0],
+            arrow.y + arrow.points[arrow.points.length - 1][1],
+        ];
+    return [startPoint, endPoint];
+};
+export const getArrowLocalFixedPoints = (arrow, elementsMap) => {
+    const [startPoint, endPoint] = getGlobalFixedPoints(arrow, elementsMap);
+    return [
+        LinearElementEditor.pointFromAbsoluteCoords(arrow, startPoint, elementsMap),
+        LinearElementEditor.pointFromAbsoluteCoords(arrow, endPoint, elementsMap),
+    ];
+};

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

@@ -13,4 +13,4 @@ export type HitTestArgs = {
 export declare const hitElementItself: ({ x, y, element, shape, threshold, frameNameBound, }: HitTestArgs) => boolean;
 export declare const hitElementBoundingBox: (x: number, y: number, element: ExcalidrawElement, elementsMap: ElementsMap, tolerance?: number) => boolean;
 export declare const hitElementBoundingBoxOnly: (hitArgs: HitTestArgs, elementsMap: ElementsMap) => boolean;
-export declare const hitElementBoundText: (x: number, y: number, textShape: GeometricShape | null) => boolean | null;
+export declare const hitElementBoundText: (x: number, y: number, textShape: GeometricShape | null) => boolean;

package/dist/excalidraw/element/collision.js

@@ -4,6 +4,7 @@ import { getPolygonShape } from "../../utils/geometry/shape";
 import { isPointInShape, isPointOnShape } from "../../utils/collision";
 import { isTransparent } from "../utils";
 import { hasBoundTextElement, isIframeLikeElement, isImageElement, isTextElement, } from "./typeChecks";
+import { getBoundTextShape } from "../shapes";
 export const shouldTestInside = (element) => {
     if (element.type === "arrow") {
         return false;
@@ -46,8 +47,10 @@ export const hitElementBoundingBox = (x, y, element, elementsMap, tolerance = 0)
 };
 export const hitElementBoundingBoxOnly = (hitArgs, elementsMap) => {
     return (!hitElementItself(hitArgs) &&
+        // bound text is considered part of the element (even if it's outside the bounding box)
+        !hitElementBoundText(hitArgs.x, hitArgs.y, getBoundTextShape(hitArgs.element, elementsMap)) &&
         hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap));
 };
 export const hitElementBoundText = (x, y, textShape) => {
-    return textShape && isPointInShape([x, y], textShape);
+    return !!textShape && isPointInShape([x, y], textShape);
 };

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

@@ -1,10 +1,10 @@
 import type { NonDeletedExcalidrawElement } from "./types";
 import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
 import type Scene from "../scene/Scene";
-export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], offset: {
+export declare const dragSelectedElements: (pointerDownState: PointerDownState, _selectedElements: NonDeletedExcalidrawElement[], offset: {
     x: number;
     y: number;
-}, appState: AppState, scene: Scene, snapOffset: {
+}, scene: Scene, snapOffset: {
     x: number;
     y: number;
 }, gridSize: AppState["gridSize"]) => void;