@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

package/dist/excalidraw/element/binding.js

@@ -6,13 +6,14 @@ import * as GATransform from "../gatransforms";
 import { getElementAbsoluteCoords } from "./bounds";
 import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
-import { isBindableElement, isBindingElement, isLinearElement, } from "./typeChecks";
+import { isArrowElement, isBindableElement, isBindingElement, isBoundToContainer, 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";
 export const shouldEnableBindingForPointerEvent = (event) => {
     return !event[KEYS.CTRL_OR_CMD];
 };
@@ -46,51 +47,125 @@ const bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdge
 boundToElementIds, 
 // Is mutated
 unboundFromElementIds, elementsMap) => {
-    if (bindableElement !== "keep") {
-        if (bindableElement != null) {
-            // Don't bind if we're trying to bind or are already bound to the same
-            // element on the other edge already ("start" edge takes precedence).
-            if (otherEdgeBindableElement == null ||
-                (otherEdgeBindableElement === "keep"
-                    ? !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd)
-                    : startOrEnd === "start" ||
-                        otherEdgeBindableElement.id !== bindableElement.id)) {
-                bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
-                boundToElementIds.add(bindableElement.id);
-            }
+    // "keep" is for method chaining convenience, a "no-op", so just bail out
+    if (bindableElement === "keep") {
+        return;
+    }
+    // null means break the bind, so nothing to consider here
+    if (bindableElement === null) {
+        const unbound = unbindLinearElement(linearElement, startOrEnd);
+        if (unbound != null) {
+            unboundFromElementIds.add(unbound);
         }
-        else {
-            const unbound = unbindLinearElement(linearElement, startOrEnd);
-            if (unbound != null) {
-                unboundFromElementIds.add(unbound);
-            }
+        return;
+    }
+    // While complext arrows can do anything, simple arrow with both ends trying
+    // to bind to the same bindable should not be allowed, start binding takes
+    // precedence
+    if (isLinearElementSimple(linearElement)) {
+        if (otherEdgeBindableElement == null ||
+            (otherEdgeBindableElement === "keep"
+                ? // TODO: Refactor - Needlessly complex
+                    !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd)
+                : startOrEnd === "start" ||
+                    otherEdgeBindableElement.id !== bindableElement.id)) {
+            bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
+            boundToElementIds.add(bindableElement.id);
         }
     }
+    else {
+        bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
+        boundToElementIds.add(bindableElement.id);
+    }
 };
-export const bindOrUnbindSelectedElements = (selectedElements, app) => {
-    selectedElements.forEach((selectedElement) => {
-        if (isBindingElement(selectedElement)) {
-            bindOrUnbindLinearElement(selectedElement, getElligibleElementForBindingElement(selectedElement, "start", app), getElligibleElementForBindingElement(selectedElement, "end", app), app.scene.getNonDeletedElementsMap());
-        }
-        else if (isBindableElement(selectedElement)) {
-            maybeBindBindableElement(selectedElement, app.scene.getNonDeletedElementsMap(), app);
+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 (isBindableElement(element) &&
+            bindingBorderTest(element, coors, elementsMap)) {
+            return element;
         }
+    }
+    return null;
+};
+const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap));
+const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap) => {
+    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", elementsMap)
+            : 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", elementsMap);
+    const end = endDragged
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap)
+            : 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", elementsMap);
+    return [start, end];
+};
+const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, isBindingEnabled) => {
+    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap);
+    const start = startIsClose
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap)
+            : null
+        : null;
+    const end = endIsClose
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap)
+            : null
+        : null;
+    return [start, end];
+};
+export const bindOrUnbindLinearElements = (selectedElements, elementsMap, isBindingEnabled, draggingPoints) => {
+    selectedElements.forEach((selectedElement) => {
+        const [start, end] = draggingPoints?.length
+            ? // The arrow edge points are dragged (i.e. start, end)
+                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], elementsMap)
+            : // The arrow itself (the shaft) or the inner joins are dragged
+                getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, isBindingEnabled);
+        bindOrUnbindLinearElement(selectedElement, start, end, elementsMap);
     });
 };
-const maybeBindBindableElement = (bindableElement, elementsMap, app) => {
-    getElligibleElementsForBindableElementAndWhere(bindableElement, app).forEach(([linearElement, where]) => bindOrUnbindLinearElement(linearElement, where === "end" ? "keep" : bindableElement, where === "start" ? "keep" : bindableElement, elementsMap));
-};
-export const maybeBindLinearElement = (linearElement, appState, pointerCoords, 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, elementsMap))
+        .filter((element) => element !== null)
+        // Filter out bind candidates which are in the
+        // same selection / group with the arrow
+        //
+        // TODO: Is it worth turning the list into a set to avoid dupes?
+        .filter((element) => selectedElements.filter((selected) => selected.id === element?.id)
+        .length === 0));
+};
+export const maybeBindLinearElement = (linearElement, appState, pointerCoords, elementsMap) => {
     if (appState.startBoundElement != null) {
-        bindLinearElement(linearElement, appState.startBoundElement, "start", app.scene.getNonDeletedElementsMap());
+        bindLinearElement(linearElement, appState.startBoundElement, "start", elementsMap);
     }
-    const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
+    const hoveredElement = getHoveredElementForBinding(pointerCoords, elementsMap);
     if (hoveredElement != null &&
         !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, "end")) {
-        bindLinearElement(linearElement, hoveredElement, "end", app.scene.getNonDeletedElementsMap());
+        bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
     }
 };
 export const bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+    if (!isArrowElement(linearElement)) {
+        return;
+    }
     mutateElement(linearElement, {
         [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
             elementId: hoveredElement.id,
@@ -113,15 +188,10 @@ const isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, binda
     return isLinearElementSimpleAndAlreadyBound(linearElement, otherBinding?.elementId, bindableElement);
 };
 export const isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {
-    return (alreadyBoundToId === bindableElement.id && linearElement.points.length < 3);
-};
-export const unbindLinearElements = (elements, elementsMap) => {
-    elements.forEach((element) => {
-        if (isBindingElement(element)) {
-            bindOrUnbindLinearElement(element, null, null, elementsMap);
-        }
-    });
+    return (alreadyBoundToId === bindableElement.id &&
+        isLinearElementSimple(linearElement));
 };
+const isLinearElementSimple = (linearElement) => linearElement.points.length < 3;
 const unbindLinearElement = (linearElement, startOrEnd) => {
     const field = startOrEnd === "start" ? "startBinding" : "endBinding";
     const binding = linearElement[field];
@@ -131,9 +201,9 @@ 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, elementsMap) => {
+    const hoveredElement = getElementAtPosition([...elementsMap].map(([_, value]) => value), (element) => isBindableElement(element, false) &&
+        bindingBorderTest(element, pointerCoords, elementsMap));
     return hoveredElement;
 };
 const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
@@ -153,34 +223,38 @@ const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, element
 // done before the `changedElement` is updated, and the `newSize` is passed
 // in explicitly.
 export const updateBoundElements = (changedElement, elementsMap, options) => {
-    const boundLinearElements = (changedElement.boundElements ?? []).filter((el) => el.type === "arrow");
-    if (boundLinearElements.length === 0) {
-        return;
-    }
     const { newSize, simultaneouslyUpdated } = options ?? {};
     const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(simultaneouslyUpdated);
-    const scene = Scene.getScene(changedElement);
-    getNonDeletedElements(scene, boundLinearElements.map((el) => el.id)).forEach((element) => {
-        if (!isLinearElement(element)) {
+    if (!isBindableElement(changedElement)) {
+        return;
+    }
+    boundElementsVisitor(elementsMap, changedElement, (element) => {
+        if (!isLinearElement(element) || element.isDeleted) {
             return;
         }
-        const bindableElement = changedElement;
         // In case the boundElements are stale
-        if (!doesNeedUpdate(element, bindableElement)) {
+        if (!doesNeedUpdate(element, changedElement)) {
             return;
         }
-        const startBinding = maybeCalculateNewGapWhenScaling(bindableElement, element.startBinding, newSize);
-        const endBinding = maybeCalculateNewGapWhenScaling(bindableElement, element.endBinding, newSize);
+        const bindings = {
+            startBinding: maybeCalculateNewGapWhenScaling(changedElement, element.startBinding, newSize),
+            endBinding: maybeCalculateNewGapWhenScaling(changedElement, element.endBinding, newSize),
+        };
         // `linearElement` is being moved/scaled already, just update the binding
         if (simultaneouslyUpdatedElementIds.has(element.id)) {
-            mutateElement(element, { startBinding, endBinding });
+            mutateElement(element, bindings);
             return;
         }
-        updateBoundPoint(element, "start", startBinding, changedElement, elementsMap);
-        updateBoundPoint(element, "end", endBinding, changedElement, elementsMap);
-        const boundText = getBoundTextElement(element, scene.getNonDeletedElementsMap());
-        if (boundText) {
-            handleBindTextResize(element, scene.getNonDeletedElementsMap(), false);
+        bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {
+            if (bindableElement &&
+                isBindableElement(bindableElement) &&
+                (bindingProp === "startBinding" || bindingProp === "endBinding")) {
+                updateBoundPoint(element, bindingProp, bindings[bindingProp], bindableElement, elementsMap);
+            }
+        });
+        const boundText = getBoundTextElement(element, elementsMap);
+        if (boundText && !boundText.isDeleted) {
+            handleBindTextResize(element, elementsMap, false);
         }
     });
 };
@@ -191,22 +265,18 @@ const doesNeedUpdate = (boundElement, changedElement) => {
 const getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
     return new Set((simultaneouslyUpdated || []).map((element) => element.id));
 };
-const updateBoundPoint = (linearElement, startOrEnd, binding, changedElement, elementsMap) => {
+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 !== changedElement.id && linearElement.points.length > 2)) {
+        (binding.elementId !== bindableElement.id &&
+            linearElement.points.length > 2)) {
         return;
     }
-    const bindingElement = Scene.getScene(linearElement).getElement(binding.elementId);
-    if (bindingElement == null) {
-        // We're not cleaning up after deleted elements atm., so handle this case
-        return;
-    }
-    const direction = startOrEnd === "start" ? -1 : 1;
+    const direction = startOrEnd === "startBinding" ? -1 : 1;
     const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
     const adjacentPointIndex = edgePointIndex - direction;
     const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);
-    const focusPointAbsolute = determineFocusPoint(bindingElement, binding.focus, adjacentPoint, elementsMap);
+    const focusPointAbsolute = determineFocusPoint(bindableElement, binding.focus, adjacentPoint, elementsMap);
     let newEdgePoint;
     // The linear element was not originally pointing inside the bound shape,
     // we can point directly at the focus point
@@ -214,7 +284,7 @@ const updateBoundPoint = (linearElement, startOrEnd, binding, changedElement, el
         newEdgePoint = focusPointAbsolute;
     }
     else {
-        const intersections = intersectElementWithLine(bindingElement, adjacentPoint, focusPointAbsolute, binding.gap, elementsMap);
+        const intersections = intersectElementWithLine(bindableElement, adjacentPoint, focusPointAbsolute, binding.gap, elementsMap);
         if (intersections.length === 0) {
             // This should never happen, since focusPoint should always be
             // inside the element, but just in case, bail out
@@ -230,7 +300,7 @@ const updateBoundPoint = (linearElement, startOrEnd, binding, changedElement, el
             index: edgePointIndex,
             point: LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint, elementsMap),
         },
-    ], { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding });
+    ], { [startOrEnd]: binding });
 };
 const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {
     if (currentBinding == null || newSize == null) {
@@ -242,55 +312,13 @@ const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize
     const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), gap * (newWidth < newHeight ? newWidth / width : newHeight / height)));
     return { elementId, gap: newGap, focus };
 };
-// TODO: this is a bottleneck, optimise
-export const getEligibleElementsForBinding = (selectedElements, app) => {
-    const includedElementIds = new Set(selectedElements.map(({ id }) => id));
-    return selectedElements.flatMap((selectedElement) => isBindingElement(selectedElement, false)
-        ? getElligibleElementsForBindingElement(selectedElement, app).filter((element) => !includedElementIds.has(element.id))
-        : isBindableElement(selectedElement, false)
-            ? getElligibleElementsForBindableElementAndWhere(selectedElement, app).filter((binding) => !includedElementIds.has(binding[0].id))
-            : []);
-};
-const getElligibleElementsForBindingElement = (linearElement, app) => {
-    return [
-        getElligibleElementForBindingElement(linearElement, "start", app),
-        getElligibleElementForBindingElement(linearElement, "end", app),
-    ].filter((element) => element != null);
-};
-const getElligibleElementForBindingElement = (linearElement, startOrEnd, app) => {
-    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, app.scene.getNonDeletedElementsMap()), app);
+const getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap) => {
+    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elementsMap);
 };
 const getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     const index = startOrEnd === "start" ? 0 : -1;
     return tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index, elementsMap));
 };
-const getElligibleElementsForBindableElementAndWhere = (bindableElement, app) => {
-    const scene = Scene.getScene(bindableElement);
-    return scene
-        .getNonDeletedElements()
-        .map((element) => {
-        if (!isBindingElement(element, false)) {
-            return null;
-        }
-        const canBindStart = isLinearElementEligibleForNewBindingByBindable(element, "start", bindableElement, scene.getNonDeletedElementsMap(), app);
-        const canBindEnd = isLinearElementEligibleForNewBindingByBindable(element, "end", bindableElement, scene.getNonDeletedElementsMap(), app);
-        if (!canBindStart && !canBindEnd) {
-            return null;
-        }
-        return [
-            element,
-            canBindStart && canBindEnd ? "both" : canBindStart ? "start" : "end",
-            bindableElement,
-        ];
-    })
-        .filter((maybeElement) => maybeElement != null);
-};
-const isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap, app) => {
-    const existingBinding = linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
-    return (existingBinding == null &&
-        !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd) &&
-        bindingBorderTest(bindableElement, getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), app));
-};
 // We need to:
 // 1: Update elements not selected to point to duplicated elements
 // 2: Update duplicated elements to point to other duplicated elements
@@ -305,6 +333,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) {
@@ -345,7 +374,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)
@@ -370,57 +400,23 @@ const newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {
     };
 };
 export const fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
-    const deletedElementIds = new Set(deletedElements.map((element) => element.id));
-    // non-deleted which bindings need to be updated
-    const affectedElements = new Set();
-    deletedElements.forEach((deletedElement) => {
-        if (isBindableElement(deletedElement)) {
-            deletedElement.boundElements?.forEach((element) => {
-                if (!deletedElementIds.has(element.id)) {
-                    affectedElements.add(element.id);
-                }
-            });
-        }
-        else if (isBindingElement(deletedElement)) {
-            if (deletedElement.startBinding) {
-                affectedElements.add(deletedElement.startBinding.elementId);
-            }
-            if (deletedElement.endBinding) {
-                affectedElements.add(deletedElement.endBinding.elementId);
-            }
-        }
-    });
-    sceneElements
-        .filter(({ id }) => affectedElements.has(id))
-        .forEach((element) => {
-        if (isBindableElement(element)) {
-            mutateElement(element, {
-                boundElements: newBoundElementsAfterDeletion(element.boundElements, deletedElementIds),
-            });
-        }
-        else if (isBindingElement(element)) {
-            mutateElement(element, {
-                startBinding: newBindingAfterDeletion(element.startBinding, deletedElementIds),
-                endBinding: newBindingAfterDeletion(element.endBinding, deletedElementIds),
-            });
-        }
-    });
-};
-const newBindingAfterDeletion = (binding, deletedElementIds) => {
-    if (binding == null || deletedElementIds.has(binding.elementId)) {
-        return null;
+    const elements = arrayToMap(sceneElements);
+    for (const element of deletedElements) {
+        BoundElement.unbindAffected(elements, element, mutateElement);
+        BindableElement.unbindAffected(elements, element, mutateElement);
     }
-    return binding;
 };
-const newBoundElementsAfterDeletion = (boundElements, deletedElementIds) => {
+const newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {
     if (!boundElements) {
         return null;
     }
-    return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
+    const nextBoundElements = boundElements.filter((boundElement) => !idsToRemove.has(boundElement.id));
+    nextBoundElements.push(...elementsToAdd.map((x) => ({ id: x.id, type: x.type })));
+    return nextBoundElements;
 };
-export const bindingBorderTest = (element, { x, y }, app) => {
+const bindingBorderTest = (element, { x, y }, elementsMap) => {
     const threshold = maxBindingGap(element, element.width, element.height);
-    const shape = app.getElementShape(element);
+    const shape = getElementShape(element, elementsMap);
     return isPointOnShape([x, y], shape, threshold);
 };
 export const maxBindingGap = (element, elementWidth, elementHeight) => {
@@ -430,7 +426,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));
 };
-export const distanceToBindableElement = (element, point, elementsMap) => {
+const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
         case "rectangle":
         case "image":
@@ -455,7 +451,7 @@ const distanceToDiamond = (element, point, elementsMap) => {
     const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
     return GAPoint.distanceToLine(pointRel, side);
 };
-export const distanceToEllipse = (element, point, elementsMap) => {
+const distanceToEllipse = (element, point, elementsMap) => {
     const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
     return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
 };
@@ -533,7 +529,7 @@ const coordsCenter = (x1, y1, x2, y2) => {
 // all focus points lie, so it's a number between -1 and 1.
 // The line going through `a` and `b` is a tangent to the "focus image"
 // of the element.
-export const determineFocusDistance = (element, 
+const determineFocusDistance = (element, 
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates (closer to element)
@@ -570,7 +566,7 @@ b, elementsMap) => {
     }
     return ret || 0;
 };
-export const determineFocusPoint = (element, 
+const determineFocusPoint = (element, 
 // The oriented, relative distance from the center of `element` of the
 // returned focusPoint
 focus, adjecentPoint, elementsMap) => {
@@ -602,7 +598,7 @@ focus, adjecentPoint, elementsMap) => {
 };
 // Returns 2 or 0 intersection points between line going through `a` and `b`
 // and the `element`, in ascending order of distance from `a`.
-export const intersectElementWithLine = (element, 
+const intersectElementWithLine = (element, 
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates
@@ -717,7 +713,7 @@ const getEllipseIntersections = (element, gap, line) => {
         GA.point((xn - a * b * n * discrRoot) / squares, (yn + a * b * m * discrRoot) / squares),
     ];
 };
-export const getCircleIntersections = (center, radius, line) => {
+const getCircleIntersections = (center, radius, line) => {
     if (radius === 0) {
         return GAPoint.distanceToLine(line, center) === 0 ? [center] : [];
     }
@@ -741,7 +737,7 @@ export const getCircleIntersections = (center, radius, line) => {
 };
 // The focus point is the tangent point of the "focus image" of the
 // `element`, where the tangent goes through `point`.
-export const findFocusPointForEllipse = (ellipse, 
+const findFocusPointForEllipse = (ellipse, 
 // Between -1 and 1 (not 0) the relative size of the "focus image" of
 // the element on which the focus point lies
 relativeDistance, 
@@ -768,7 +764,7 @@ point) => {
     const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
     return GA.point(x, (-m * x - 1) / n);
 };
-export const findFocusPointForRectangulars = (element, 
+const findFocusPointForRectangulars = (element, 
 // Between -1 and 1 for how far away should the focus point be relative
 // to the size of the element. Sign determines orientation.
 relativeDistance, 
@@ -789,3 +785,193 @@ point) => {
     });
     return tangentPoint;
 };
+export const bindingProperties = new Set([
+    "boundElements",
+    "frameId",
+    "containerId",
+    "startBinding",
+    "endBinding",
+]);
+/**
+ * Tries to visit each bound element (does not have to be found).
+ */
+const boundElementsVisitor = (elements, element, visit) => {
+    if (isBindableElement(element)) {
+        // create new instance so that possible mutations won't play a role in visiting order
+        const boundElements = element.boundElements?.slice() ?? [];
+        // last added text should be the one we keep (~previous are duplicates)
+        boundElements.forEach(({ id }) => {
+            visit(elements.get(id), "boundElements", id);
+        });
+    }
+};
+/**
+ * Tries to visit each bindable element (does not have to be found).
+ */
+const bindableElementsVisitor = (elements, element, visit) => {
+    if (element.frameId) {
+        const id = element.frameId;
+        visit(elements.get(id), "frameId", id);
+    }
+    if (isBoundToContainer(element)) {
+        const id = element.containerId;
+        visit(elements.get(id), "containerId", id);
+    }
+    if (isArrowElement(element)) {
+        if (element.startBinding) {
+            const id = element.startBinding.elementId;
+            visit(elements.get(id), "startBinding", id);
+        }
+        if (element.endBinding) {
+            const id = element.endBinding.elementId;
+            visit(elements.get(id), "endBinding", id);
+        }
+    }
+};
+/**
+ * Bound element containing bindings to `frameId`, `containerId`, `startBinding` or `endBinding`.
+ */
+export class BoundElement {
+    /**
+     * Unbind the affected non deleted bindable elements (removing element from `boundElements`).
+     * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element
+     * - prepares updates to unbind each bindable element's `boundElements` from the current element
+     */
+    static unbindAffected(elements, boundElement, updateElementWith) {
+        if (!boundElement) {
+            return;
+        }
+        bindableElementsVisitor(elements, boundElement, (bindableElement) => {
+            // bindable element is deleted, this is fine
+            if (!bindableElement || bindableElement.isDeleted) {
+                return;
+            }
+            boundElementsVisitor(elements, bindableElement, (_, __, boundElementId) => {
+                if (boundElementId === boundElement.id) {
+                    updateElementWith(bindableElement, {
+                        boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId])),
+                    });
+                }
+            });
+        });
+    }
+    /**
+     * Rebind the next affected non deleted bindable elements (adding element to `boundElements`).
+     * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element
+     * - prepares updates to rebind each bindable element's `boundElements` to the current element
+     *
+     * NOTE: rebind expects that affected elements were previously unbound with `BoundElement.unbindAffected`
+     */
+    static rebindAffected = (elements, boundElement, updateElementWith) => {
+        // don't try to rebind element that is deleted
+        if (!boundElement || boundElement.isDeleted) {
+            return;
+        }
+        bindableElementsVisitor(elements, boundElement, (bindableElement, bindingProp) => {
+            // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect
+            if (!bindableElement || bindableElement.isDeleted) {
+                updateElementWith(boundElement, { [bindingProp]: null });
+                return;
+            }
+            // frame bindings are unidirectional, there is nothing to rebind
+            if (bindingProp === "frameId") {
+                return;
+            }
+            if (bindableElement.boundElements?.find((x) => x.id === boundElement.id)) {
+                return;
+            }
+            if (isArrowElement(boundElement)) {
+                // rebind if not found!
+                updateElementWith(bindableElement, {
+                    boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement)),
+                });
+            }
+            if (isTextElement(boundElement)) {
+                if (!bindableElement.boundElements?.find((x) => x.type === "text")) {
+                    // rebind only if there is no other text bound already
+                    updateElementWith(bindableElement, {
+                        boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement)),
+                    });
+                }
+                else {
+                    // unbind otherwise
+                    updateElementWith(boundElement, { [bindingProp]: null });
+                }
+            }
+        });
+    };
+}
+/**
+ * Bindable element containing bindings to `boundElements`.
+ */
+export class BindableElement {
+    /**
+     * Unbind the affected non deleted bound elements (resetting `containerId`, `startBinding`, `endBinding` to `null`).
+     * - iterates through non deleted `boundElements` of the current element
+     * - prepares updates to unbind each bound element from the current element
+     */
+    static unbindAffected(elements, bindableElement, updateElementWith) {
+        if (!bindableElement) {
+            return;
+        }
+        boundElementsVisitor(elements, bindableElement, (boundElement) => {
+            // bound element is deleted, this is fine
+            if (!boundElement || boundElement.isDeleted) {
+                return;
+            }
+            bindableElementsVisitor(elements, boundElement, (_, bindingProp, bindableElementId) => {
+                // making sure there is an element to be unbound
+                if (bindableElementId === bindableElement.id) {
+                    updateElementWith(boundElement, { [bindingProp]: null });
+                }
+            });
+        });
+    }
+    /**
+     * Rebind the affected non deleted bound elements (for now setting only `containerId`, as we cannot rebind arrows atm).
+     * - iterates through non deleted `boundElements` of the current element
+     * - prepares updates to rebind each bound element to the current element or unbind it from `boundElements` in case of conflicts
+     *
+     * NOTE: rebind expects that affected elements were previously unbound with `BindaleElement.unbindAffected`
+     */
+    static rebindAffected = (elements, bindableElement, updateElementWith) => {
+        // don't try to rebind element that is deleted (i.e. updated as deleted)
+        if (!bindableElement || bindableElement.isDeleted) {
+            return;
+        }
+        boundElementsVisitor(elements, bindableElement, (boundElement, _, boundElementId) => {
+            // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect
+            if (!boundElement || boundElement.isDeleted) {
+                updateElementWith(bindableElement, {
+                    boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId])),
+                });
+                return;
+            }
+            if (isTextElement(boundElement)) {
+                const boundElements = bindableElement.boundElements?.slice() ?? [];
+                // check if this is the last element in the array, if not, there is an previously bound text which should be unbound
+                if (boundElements.reverse().find((x) => x.type === "text")?.id ===
+                    boundElement.id) {
+                    if (boundElement.containerId !== bindableElement.id) {
+                        // rebind if not bound already!
+                        updateElementWith(boundElement, {
+                            containerId: bindableElement.id,
+                        });
+                    }
+                }
+                else {
+                    if (boundElement.containerId !== null) {
+                        // unbind if not unbound already
+                        updateElementWith(boundElement, {
+                            containerId: null,
+                        });
+                    }
+                    // unbind from boundElements as the element got bound to some other element in the meantime
+                    updateElementWith(bindableElement, {
+                        boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElement.id])),
+                    });
+                }
+            }
+        });
+    };
+}