@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/data/library.js

@@ -1,7 +1,6 @@
 import { loadLibraryFromBlob } from "./blob";
 import { restoreLibraryItems } from "./restore";
-import { atom } from "jotai";
-import { jotaiStore } from "../jotai";
+import { atom, editorJotaiStore } from "../editor-jotai";
 import { getCommonBoundingBox } from "../element/bounds";
 import { AbortError } from "../errors";
 import { t } from "../i18n";
@@ -12,6 +11,19 @@ import { arrayToMap, cloneJSON, preventUnload, promiseTry, resolvablePromise, }
 import { Emitter } from "../emitter";
 import { Queue } from "../queue";
 import { hashElementsVersion, hashString } from "../element";
+import { toValidURL } from "./url";
+/**
+ * format: hostname or hostname/pathname
+ *
+ * Both hostname and pathname are matched partially,
+ * hostname from the end, pathname from the start, with subdomain/path
+ * boundaries
+ **/
+const ALLOWED_LIBRARY_URLS = [
+    "excalidraw.com",
+    // when installing from github PRs
+    "raw.githubusercontent.com/excalidraw/excalidraw-libraries",
+];
 const onLibraryUpdateEmitter = new Emitter();
 export const libraryItemsAtom = atom({ status: "loaded", isInitialized: false, libraryItems: [] });
 const cloneLibraryItems = (libraryItems) => cloneJSON(libraryItems);
@@ -83,14 +95,14 @@ class Library {
     };
     notifyListeners = () => {
         if (this.updateQueue.length > 0) {
-            jotaiStore.set(libraryItemsAtom, (s) => ({
+            editorJotaiStore.set(libraryItemsAtom, (s) => ({
                 status: "loading",
                 libraryItems: this.currLibraryItems,
                 isInitialized: s.isInitialized,
             }));
         }
         else {
-            jotaiStore.set(libraryItemsAtom, {
+            editorJotaiStore.set(libraryItemsAtom, {
                 status: "loaded",
                 libraryItems: this.currLibraryItems,
                 isInitialized: true,
@@ -112,7 +124,7 @@ class Library {
     destroy = () => {
         this.updateQueue = [];
         this.currLibraryItems = [];
-        jotaiStore.set(libraryItemSvgsCache, new Map());
+        editorJotaiStore.set(libraryItemSvgsCache, new Map());
         // TODO uncomment after/if we make jotai store scoped to each excal instance
         // jotaiStore.set(libraryItemsAtom, {
         //   status: "loading",
@@ -311,6 +323,23 @@ export const distributeLibraryItemsOnSquareGrid = (libraryItems) => {
     }
     return resElements;
 };
+export const validateLibraryUrl = (libraryUrl, 
+/**
+ * @returns `true` if the URL is valid, throws otherwise.
+ */
+validator = ALLOWED_LIBRARY_URLS) => {
+    if (typeof validator === "function"
+        ? validator(libraryUrl)
+        : validator.some((allowedUrlDef) => {
+            const allowedUrl = new URL(`https://${allowedUrlDef.replace(/^https?:\/\//, "")}`);
+            const { hostname, pathname } = new URL(libraryUrl);
+            return (new RegExp(`(^|\\.)${allowedUrl.hostname}$`).test(hostname) &&
+                new RegExp(`^${allowedUrl.pathname.replace(/\/+$/, "")}(/+|$)`).test(pathname));
+        })) {
+        return true;
+    }
+    throw new Error(`Invalid or disallowed library URL: "${libraryUrl}"`);
+};
 export const parseLibraryTokensFromUrl = () => {
     const libraryUrl = 
     // current
@@ -424,7 +453,10 @@ export const useHandleLibrary = (opts) => {
         const importLibraryFromURL = async ({ libraryUrl, idToken, }) => {
             const libraryPromise = new Promise(async (resolve, reject) => {
                 try {
-                    const request = await fetch(decodeURIComponent(libraryUrl));
+                    libraryUrl = decodeURIComponent(libraryUrl);
+                    libraryUrl = toValidURL(libraryUrl);
+                    validateLibraryUrl(libraryUrl, optsRef.current.validateLibraryUrl);
+                    const request = await fetch(libraryUrl);
                     const blob = await request.blob();
                     resolve(blob);
                 }
@@ -452,6 +484,11 @@ export const useHandleLibrary = (opts) => {
                 });
             }
             catch (error) {
+                excalidrawAPI.updateScene({
+                    appState: {
+                        errorMessage: error.message,
+                    },
+                });
                 throw error;
             }
             finally {

package/dist/excalidraw/data/restore.js

@@ -43,14 +43,20 @@ const repairBinding = (element, binding) => {
     if (!binding) {
         return null;
     }
-    return {
-        ...binding,
-        focus: binding.focus || 0,
-        ...(isElbowArrow(element) && isFixedPointBinding(binding)
+    const focus = binding.focus || 0;
+    if (isElbowArrow(element)) {
+        const fixedPointBinding = isFixedPointBinding(binding)
             ? {
+                ...binding,
+                focus,
                 fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
             }
-            : {}),
+            : null;
+        return fixedPointBinding;
+    }
+    return {
+        ...binding,
+        focus,
     };
 };
 const restoreElementWithProperties = (element, extra) => {
@@ -205,8 +211,7 @@ const restoreElement = (element) => {
             if (points[0][0] !== 0 || points[0][1] !== 0) {
                 ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
             }
-            // TODO: Separate arrow from linear element
-            return restoreElementWithProperties(element, {
+            const base = {
                 type: element.type,
                 startBinding: repairBinding(element, element.startBinding),
                 endBinding: repairBinding(element, element.endBinding),
@@ -218,7 +223,19 @@ const restoreElement = (element) => {
                 y,
                 elbowed: element.elbowed,
                 ...getSizeFromPoints(points),
-            });
+            };
+            // TODO: Separate arrow from linear element
+            return isElbowArrow(element)
+                ? restoreElementWithProperties(element, {
+                    ...base,
+                    elbowed: true,
+                    startBinding: repairBinding(element, element.startBinding),
+                    endBinding: repairBinding(element, element.endBinding),
+                    fixedSegments: element.fixedSegments,
+                    startIsSpecial: element.startIsSpecial,
+                    endIsSpecial: element.endIsSpecial,
+                })
+                : restoreElementWithProperties(element, base);
         }
         // generic elements
         case "ellipse":
@@ -433,6 +450,7 @@ export const restoreAppState = (appState, localAppState) => {
             : nextAppState.openSidebar,
         gridSize: getNormalizedGridSize(isFiniteNumber(appState.gridSize) ? appState.gridSize : DEFAULT_GRID_SIZE),
         gridStep: getNormalizedGridStep(isFiniteNumber(appState.gridStep) ? appState.gridStep : DEFAULT_GRID_STEP),
+        editingFrame: null,
     };
 };
 export const restore = (data, 

package/dist/excalidraw/data/url.d.ts

@@ -1,4 +1,3 @@
-export declare const sanitizeHTMLAttribute: (html: string) => string;
 export declare const normalizeLink: (link: string) => string;
 export declare const isLocalLink: (link: string | null) => boolean;
 /**

package/dist/excalidraw/data/url.js

@@ -1,13 +1,11 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
-export const sanitizeHTMLAttribute = (html) => {
-    return html.replace(/"/g, """);
-};
+import { escapeDoubleQuotes } from "../utils";
 export const normalizeLink = (link) => {
     link = link.trim();
     if (!link) {
         return link;
     }
-    return sanitizeUrl(sanitizeHTMLAttribute(link));
+    return sanitizeUrl(escapeDoubleQuotes(link));
 };
 export const isLocalLink = (link) => {
     return !!(link?.includes(location.origin) || link?.startsWith("/"));

package/dist/excalidraw/editor-jotai.d.ts

@@ -0,0 +1,56 @@
+import { atom, createStore, type PrimitiveAtom } from "jotai";
+import { createIsolation } from "jotai-scope";
+export { atom, PrimitiveAtom };
+export declare const useAtom: typeof import("jotai").useAtom, useSetAtom: typeof import("jotai").useSetAtom, useAtomValue: typeof import("jotai").useAtomValue, useStore: (options?: {
+    store?: {
+        get: <Value>(atom: import("jotai").Atom<Value>) => Value;
+        set: <Value_1, Args extends unknown[], Result>(atom: import("jotai").WritableAtom<Value_1, Args, Result>, ...args: Args) => Result;
+        sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+    } | ({
+        get: <Value_2>(atom: import("jotai").Atom<Value_2>) => Value_2;
+        set: <Value_1_1, Args_1 extends unknown[], Result_1>(atom: import("jotai").WritableAtom<Value_1_1, Args_1, Result_1>, ...args: Args_1) => Result_1;
+        sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+    } & {
+        dev4_get_internal_weak_map: () => WeakMap<import("jotai").Atom<unknown>, {
+            readonly d: Map<import("jotai").Atom<unknown>, number>;
+            readonly p: Set<import("jotai").Atom<unknown>>;
+            n: number;
+            m?: {
+                readonly l: Set<() => void>;
+                readonly d: Set<import("jotai").Atom<unknown>>;
+                readonly t: Set<import("jotai").Atom<unknown>>;
+                u?: (() => void) | undefined;
+            } | undefined;
+            v?: unknown;
+            e?: unknown;
+        }>;
+        dev4_get_mounted_atoms: () => Set<import("jotai").Atom<unknown>>;
+        dev4_restore_atoms: (values: Iterable<readonly [import("jotai").Atom<unknown>, unknown]>) => void;
+    }) | undefined;
+} | undefined) => {
+    get: <Value_3>(atom: import("jotai").Atom<Value_3>) => Value_3;
+    set: <Value_1_2, Args_2 extends unknown[], Result_2>(atom: import("jotai").WritableAtom<Value_1_2, Args_2, Result_2>, ...args: Args_2) => Result_2;
+    sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+} | ({
+    get: <Value_4>(atom: import("jotai").Atom<Value_4>) => Value_4;
+    set: <Value_1_3, Args_3 extends unknown[], Result_3>(atom: import("jotai").WritableAtom<Value_1_3, Args_3, Result_3>, ...args: Args_3) => Result_3;
+    sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+} & {
+    dev4_get_internal_weak_map: () => WeakMap<import("jotai").Atom<unknown>, {
+        readonly d: Map<import("jotai").Atom<unknown>, number>;
+        readonly p: Set<import("jotai").Atom<unknown>>;
+        n: number;
+        m?: {
+            readonly l: Set<() => void>;
+            readonly d: Set<import("jotai").Atom<unknown>>;
+            readonly t: Set<import("jotai").Atom<unknown>>;
+            u?: (() => void) | undefined;
+        } | undefined;
+        v?: unknown;
+        e?: unknown;
+    }>;
+    dev4_get_mounted_atoms: () => Set<import("jotai").Atom<unknown>>;
+    dev4_restore_atoms: (values: Iterable<readonly [import("jotai").Atom<unknown>, unknown]>) => void;
+});
+export declare const EditorJotaiProvider: ReturnType<typeof createIsolation>["Provider"];
+export declare const editorJotaiStore: ReturnType<typeof createStore>;

package/dist/excalidraw/editor-jotai.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import { atom, createStore } from "jotai";
+import { createIsolation } from "jotai-scope";
+const jotai = createIsolation();
+export { atom };
+export const { useAtom, useSetAtom, useAtomValue, useStore } = jotai;
+export const EditorJotaiProvider = jotai.Provider;
+export const editorJotaiStore = createStore();

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

@@ -15,9 +15,11 @@ export type SuggestedPointBinding = [
 export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
 export declare const FIXED_BINDING_DISTANCE = 5;
+export declare const BINDING_HIGHLIGHT_THICKNESS = 10;
+export declare const BINDING_HIGHLIGHT_OFFSET = 4;
 export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap, scene: Scene) => void;
-export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, isBindingEnabled: boolean, draggingPoints: readonly number[] | null) => void;
-export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => SuggestedBinding[];
+export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, isBindingEnabled: boolean, draggingPoints: readonly number[] | null, zoom?: AppState["zoom"]) => void;
+export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap, zoom: AppState["zoom"]) => SuggestedBinding[];
 export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
@@ -27,7 +29,7 @@ export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDe
 export declare const getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
-}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => NonDeleted<ExcalidrawBindableElement> | null;
+}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap, zoom?: AppState["zoom"], fullShape?: boolean, considerAllElements?: boolean) => NonDeleted<ExcalidrawBindableElement> | null;
 export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: {
@@ -36,7 +38,7 @@ export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawE
     };
     changedElements?: Map<string, OrderedExcalidrawElement>;
 }) => void;
-export declare const getHeadingForElbowArrowSnap: (p: Readonly<GlobalPoint>, otherPoint: Readonly<GlobalPoint>, bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, elementsMap: ElementsMap, origPoint: GlobalPoint) => Heading;
+export declare const getHeadingForElbowArrowSnap: (p: Readonly<GlobalPoint>, otherPoint: Readonly<GlobalPoint>, bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, elementsMap: ElementsMap, origPoint: GlobalPoint, zoom?: AppState["zoom"]) => Heading;
 export declare const bindPointToSnapToElementOutline: (p: Readonly<GlobalPoint>, otherPoint: Readonly<GlobalPoint>, bindableElement: ExcalidrawBindableElement | undefined, elementsMap: ElementsMap) => GlobalPoint;
 export declare const avoidRectangularCorner: (element: ExcalidrawBindableElement, p: GlobalPoint) => GlobalPoint;
 export declare const snapToMid: (element: ExcalidrawBindableElement, p: GlobalPoint, tolerance?: number) => GlobalPoint;
@@ -48,8 +50,8 @@ export declare const fixBindingsAfterDeletion: (sceneElements: readonly Excalidr
 export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
     x: number;
     y: number;
-}, elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => boolean;
-export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
+}, elementsMap: NonDeletedSceneElementsMap, zoom?: AppState["zoom"], fullShape?: boolean) => boolean;
+export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number, zoom?: AppState["zoom"]) => number;
 export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: GlobalPoint, elementsMap: ElementsMap) => number;
 export declare const bindingProperties: Set<BindableProp | BindingProp>;
 export type BindableProp = "boundElements";
@@ -93,5 +95,6 @@ export declare class BindableElement {
     static rebindAffected: (elements: ElementsMap, bindableElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void) => void;
 }
 export declare const getGlobalFixedPointForBindableElement: (fixedPointRatio: [number, number], element: ExcalidrawBindableElement) => GlobalPoint;
+export declare const getGlobalFixedPoints: (arrow: ExcalidrawElbowArrowElement, elementsMap: ElementsMap) => [GlobalPoint, GlobalPoint];
 export declare const getArrowLocalFixedPoints: (arrow: ExcalidrawElbowArrowElement, elementsMap: ElementsMap) => LocalPoint[];
 export declare const normalizeFixedPoint: <T extends FixedPoint | null>(fixedPoint: T) => T extends null ? null : FixedPoint;

package/dist/excalidraw/element/binding.js

@@ -5,11 +5,10 @@ import * as GALine from "../../math/ga/galines";
 import * as GATransform from "../../math/ga/gatransforms";
 import { getCenterForBounds, getElementAbsoluteCoords } from "./bounds";
 import { isPointOnShape } from "../../utils/collision";
-import { getElementAtPosition } from "../scene";
 import { isArrowElement, isBindableElement, isBindingElement, isBoundToContainer, isElbowArrow, isFixedPointBinding, isFrameLikeElement, isLinearElement, isRectangularElement, isTextElement, } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { LinearElementEditor } from "./linearElementEditor";
-import { arrayToMap, tupleToCoors } from "../utils";
+import { arrayToMap, isBindingFallthroughEnabled, tupleToCoors, } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { aabbForElement, getElementShape, pointInsideBounds } from "../shapes";
@@ -23,6 +22,8 @@ export const isBindingEnabled = (appState) => {
     return appState.isBindingEnabled;
 };
 export const FIXED_BINDING_DISTANCE = 5;
+export const BINDING_HIGHLIGHT_THICKNESS = 10;
+export const BINDING_HIGHLIGHT_OFFSET = 4;
 const getNonDeletedElements = (scene, ids) => {
     const result = [];
     ids.forEach((id) => {
@@ -81,7 +82,7 @@ unboundFromElementIds, elementsMap) => {
         boundToElementIds.add(bindableElement.id);
     }
 };
-const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, elementsMap) => {
+const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, elementsMap, zoom) => {
     const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
     const elementId = edge === "start"
         ? linearElement.startBinding?.elementId
@@ -89,64 +90,64 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge,
     if (elementId) {
         const element = elementsMap.get(elementId);
         if (isBindableElement(element) &&
-            bindingBorderTest(element, coors, elementsMap)) {
+            bindingBorderTest(element, coors, elementsMap, zoom)) {
             return element;
         }
     }
     return null;
 };
-const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap));
-const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap, elements) => {
+const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap, zoom) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap, zoom));
+const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap, elements, zoom) => {
     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, elements)
+            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements, zoom)
             : 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, elements);
+            getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements, zoom);
     const end = endDragged
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements)
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements, zoom)
             : 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, elements);
+            getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements, zoom);
     return [start, end];
 };
-const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, elements, isBindingEnabled) => {
-    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap);
+const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, elements, isBindingEnabled, zoom) => {
+    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap, zoom);
     const start = startIsClose
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements)
+            ? getElligibleElementForBindingElement(selectedElement, "start", elementsMap, elements, zoom)
             : null
         : null;
     const end = endIsClose
         ? isBindingEnabled
-            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements)
+            ? getElligibleElementForBindingElement(selectedElement, "end", elementsMap, elements, zoom)
             : null
         : null;
     return [start, end];
 };
-export const bindOrUnbindLinearElements = (selectedElements, elementsMap, elements, scene, isBindingEnabled, draggingPoints) => {
+export const bindOrUnbindLinearElements = (selectedElements, elementsMap, elements, scene, isBindingEnabled, draggingPoints, zoom) => {
     selectedElements.forEach((selectedElement) => {
         const [start, end] = draggingPoints?.length
             ? // The arrow edge points are dragged (i.e. start, end)
-                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], elementsMap, elements)
+                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], elementsMap, elements, zoom)
             : // The arrow itself (the shaft) or the inner joins are dragged
-                getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, elements, isBindingEnabled);
+                getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, elements, isBindingEnabled, zoom);
         bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene);
     });
 };
-export const getSuggestedBindingsForArrows = (selectedElements, elementsMap) => {
+export const getSuggestedBindingsForArrows = (selectedElements, elementsMap, zoom) => {
     // 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))
+        .flatMap((element) => getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap, zoom))
         .filter((element) => element !== null)
         // Filter out bind candidates which are in the
         // same selection / group with the arrow
@@ -159,20 +160,31 @@ export const maybeBindLinearElement = (linearElement, appState, pointerCoords, e
     if (appState.startBoundElement != null) {
         bindLinearElement(linearElement, appState.startBoundElement, "start", elementsMap);
     }
-    const hoveredElement = getHoveredElementForBinding(pointerCoords, elements, elementsMap, isElbowArrow(linearElement) && isElbowArrow(linearElement));
+    const hoveredElement = getHoveredElementForBinding(pointerCoords, elements, elementsMap, appState.zoom, isElbowArrow(linearElement), isElbowArrow(linearElement));
     if (hoveredElement !== null) {
         if (!isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, "end")) {
             bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
         }
     }
 };
+const normalizePointBinding = (binding, hoveredElement) => {
+    let gap = binding.gap;
+    const maxGap = maxBindingGap(hoveredElement, hoveredElement.width, hoveredElement.height);
+    if (gap > maxGap) {
+        gap = BINDING_HIGHLIGHT_THICKNESS + BINDING_HIGHLIGHT_OFFSET;
+    }
+    return {
+        ...binding,
+        gap,
+    };
+};
 export const bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
     if (!isArrowElement(linearElement)) {
         return;
     }
     const binding = {
         elementId: hoveredElement.id,
-        ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap),
+        ...normalizePointBinding(calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap), hoveredElement),
         ...(isElbowArrow(linearElement)
             ? calculateFixedPointForElbowArrowBinding(linearElement, hoveredElement, startOrEnd, elementsMap)
             : { fixedPoint: null }),
@@ -209,14 +221,81 @@ const unbindLinearElement = (linearElement, startOrEnd) => {
     mutateElement(linearElement, { [field]: null });
     return binding.elementId;
 };
-export const getHoveredElementForBinding = (pointerCoords, elements, elementsMap, fullShape) => {
-    const hoveredElement = getElementAtPosition(elements, (element) => isBindableElement(element, false) &&
-        bindingBorderTest(element, pointerCoords, elementsMap, 
+export const getHoveredElementForBinding = (pointerCoords, elements, elementsMap, zoom, fullShape, considerAllElements) => {
+    if (considerAllElements) {
+        let cullRest = false;
+        const candidateElements = getAllElementsAtPositionForBinding(elements, (element) => isBindableElement(element, false) &&
+            bindingBorderTest(element, pointerCoords, elementsMap, zoom, (fullShape ||
+                !isBindingFallthroughEnabled(element)) &&
+                // disable fullshape snapping for frame elements so we
+                // can bind to frame children
+                !isFrameLikeElement(element))).filter((element) => {
+            if (cullRest) {
+                return false;
+            }
+            if (!isBindingFallthroughEnabled(element)) {
+                cullRest = true;
+            }
+            return true;
+        });
+        // Return early if there are no candidates or just one candidate
+        if (!candidateElements || candidateElements.length === 0) {
+            return null;
+        }
+        if (candidateElements.length === 1) {
+            return candidateElements[0];
+        }
+        // Prefer the shape with the border being tested (if any)
+        const borderTestElements = candidateElements.filter((element) => bindingBorderTest(element, pointerCoords, elementsMap, zoom, false));
+        if (borderTestElements.length === 1) {
+            return borderTestElements[0];
+        }
+        // Prefer smaller shapes
+        return candidateElements
+            .sort((a, b) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2))
+            .pop();
+    }
+    const hoveredElement = getElementAtPositionForBinding(elements, (element) => isBindableElement(element, false) &&
+        bindingBorderTest(element, pointerCoords, elementsMap, zoom, 
         // disable fullshape snapping for frame elements so we
         // can bind to frame children
-        fullShape && !isFrameLikeElement(element)));
+        (fullShape || !isBindingFallthroughEnabled(element)) &&
+            !isFrameLikeElement(element)));
     return hoveredElement;
 };
+const getElementAtPositionForBinding = (elements, isAtPositionFn) => {
+    let hitElement = null;
+    // We need to to hit testing from front (end of the array) to back (beginning of the array)
+    // because array is ordered from lower z-index to highest and we want element z-index
+    // with higher z-index
+    for (let index = elements.length - 1; index >= 0; --index) {
+        const element = elements[index];
+        if (element.isDeleted) {
+            continue;
+        }
+        if (isAtPositionFn(element)) {
+            hitElement = element;
+            break;
+        }
+    }
+    return hitElement;
+};
+const getAllElementsAtPositionForBinding = (elements, isAtPositionFn) => {
+    const elementsAtPosition = [];
+    // We need to to hit testing from front (end of the array) to back (beginning of the array)
+    // because array is ordered from lower z-index to highest and we want element z-index
+    // with higher z-index
+    for (let index = elements.length - 1; index >= 0; --index) {
+        const element = elements[index];
+        if (element.isDeleted) {
+            continue;
+        }
+        if (isAtPositionFn(element)) {
+            elementsAtPosition.push(element);
+        }
+    }
+    return elementsAtPosition;
+};
 const calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
     const direction = startOrEnd === "start" ? -1 : 1;
     const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
@@ -234,7 +313,7 @@ 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 { newSize, simultaneouslyUpdated, changedElements } = options ?? {};
+    const { newSize, simultaneouslyUpdated } = options ?? {};
     const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(simultaneouslyUpdated);
     if (!isBindableElement(changedElement)) {
         return;
@@ -253,7 +332,7 @@ export const updateBoundElements = (changedElement, elementsMap, options) => {
         };
         // `linearElement` is being moved/scaled already, just update the binding
         if (simultaneouslyUpdatedElementIds.has(element.id)) {
-            mutateElement(element, bindings);
+            mutateElement(element, bindings, true);
             return;
         }
         const updates = bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {
@@ -271,15 +350,13 @@ export const updateBoundElements = (changedElement, elementsMap, options) => {
             }
             return null;
         }).filter((update) => update !== null);
-        LinearElementEditor.movePoints(element, updates, elementsMap, {
+        LinearElementEditor.movePoints(element, updates, {
             ...(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) {
@@ -294,21 +371,20 @@ const doesNeedUpdate = (boundElement, changedElement) => {
 const getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
     return new Set((simultaneouslyUpdated || []).map((element) => element.id));
 };
-export const getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, elementsMap, origPoint) => {
+export const getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, elementsMap, origPoint, zoom) => {
     const otherPointHeading = vectorToHeading(vectorFromPoint(otherPoint, p));
     if (!bindableElement || !aabb) {
         return otherPointHeading;
     }
-    const distance = getDistanceForBinding(origPoint, bindableElement, elementsMap);
+    const distance = getDistanceForBinding(origPoint, bindableElement, elementsMap, zoom);
     if (!distance) {
         return vectorToHeading(vectorFromPoint(p, pointFrom(bindableElement.x + bindableElement.width / 2, bindableElement.y + bindableElement.height / 2)));
     }
-    const pointHeading = headingForPointFromElement(bindableElement, aabb, p);
-    return pointHeading;
+    return headingForPointFromElement(bindableElement, aabb, p);
 };
-const getDistanceForBinding = (point, bindableElement, elementsMap) => {
+const getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
     const distance = distanceToBindableElement(bindableElement, point, elementsMap);
-    const bindDistance = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);
+    const bindDistance = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height, zoom);
     return distance > bindDistance ? null : distance;
 };
 export const bindPointToSnapToElementOutline = (p, otherPoint, bindableElement, elementsMap) => {
@@ -493,8 +569,8 @@ const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize
         (newWidth < newHeight ? newWidth / width : newHeight / height)));
     return { ...currentBinding, gap: newGap };
 };
-const getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap, elements) => {
-    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap);
+const getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap, elements, zoom) => {
+    return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap, zoom, isElbowArrow(linearElement), isElbowArrow(linearElement));
 };
 const getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     const index = startOrEnd === "start" ? 0 : -1;
@@ -593,19 +669,23 @@ const newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {
     nextBoundElements.push(...elementsToAdd.map((x) => ({ id: x.id, type: x.type })));
     return nextBoundElements;
 };
-export const bindingBorderTest = (element, { x, y }, elementsMap, fullShape) => {
-    const threshold = maxBindingGap(element, element.width, element.height);
+export const bindingBorderTest = (element, { x, y }, elementsMap, zoom, fullShape) => {
+    const threshold = maxBindingGap(element, element.width, element.height, zoom);
     const shape = getElementShape(element, elementsMap);
     return (isPointOnShape(pointFrom(x, y), shape, threshold) ||
         (fullShape === true &&
             pointInsideBounds(pointFrom(x, y), aabbForElement(element))));
 };
-export const maxBindingGap = (element, elementWidth, elementHeight) => {
+export const maxBindingGap = (element, elementWidth, elementHeight, zoom) => {
+    const zoomValue = zoom?.value && zoom.value < 1 ? zoom.value : 1;
     // Aligns diamonds with rectangles
     const shapeRatio = element.type === "diamond" ? 1 / Math.sqrt(2) : 1;
     const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight);
-    // We make the bindable boundary bigger for bigger elements
-    return Math.max(16, Math.min(0.25 * smallerDimension, 32));
+    return Math.max(16, 
+    // bigger bindable boundary for bigger elements
+    Math.min(0.25 * smallerDimension, 32), 
+    // keep in sync with the zoomed highlight
+    BINDING_HIGHLIGHT_THICKNESS / zoomValue + BINDING_HIGHLIGHT_OFFSET);
 };
 export const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
@@ -1165,7 +1245,7 @@ export const getGlobalFixedPointForBindableElement = (fixedPointRatio, element)
     const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
     return pointRotateRads(pointFrom(element.x + element.width * fixedX, element.y + element.height * fixedY), pointFrom(element.x + element.width / 2, element.y + element.height / 2), element.angle);
 };
-const getGlobalFixedPoints = (arrow, elementsMap) => {
+export const getGlobalFixedPoints = (arrow, elementsMap) => {
     const startElement = arrow.startBinding &&
         elementsMap.get(arrow.startBinding.elementId);
     const endElement = arrow.endBinding &&