@mk-drag-and-drop/dom 0.1.0

package/dist/sortable/sortable-preview.js

@@ -0,0 +1,357 @@
+import { getRegisteredSortableElement, restoreSortableDraggedAttribute, } from "./sortable-registry.js";
+const neutralPlacementBoundaryRatio = 0.5;
+export function snapshotSortableElement(registry, draggableId) {
+    const element = getRegisteredSortableElement(registry, draggableId);
+    if (!element?.parentElement) {
+        return;
+    }
+    element.dataset.dndDragged = "true";
+    registry.snapshots.set(draggableId, {
+        element,
+        parent: element.parentElement,
+        previousSibling: element.previousSibling,
+        nextSibling: element.nextSibling,
+        childIndex: Array.prototype.indexOf.call(element.parentElement.childNodes, element),
+    });
+}
+export function isSortablePreviewTarget(input) {
+    return input.activeDropTargetId !== null;
+}
+export function initializeSortablePointerMovement(registry, pointerPosition) {
+    registry.pointerMovement = {
+        previousPointerPosition: { ...pointerPosition },
+    };
+    registry.previewPlacement = null;
+}
+export function updateSortablePointerMovement(registry, pointerPosition) {
+    const movement = registry.pointerMovement;
+    if (!movement) {
+        initializeSortablePointerMovement(registry, pointerPosition);
+        return;
+    }
+    movement.previousPointerPosition = { ...pointerPosition };
+}
+export function clearSortablePointerMovement(registry) {
+    registry.pointerMovement = null;
+}
+export function clearSortablePreviewPlacement(registry) {
+    registry.previewPlacement = null;
+}
+export function moveSortablePreview(input) {
+    if (input.activeDropTargetId === null) {
+        return;
+    }
+    const draggedElement = getRegisteredSortableElement(input.registry, input.draggedDraggableId);
+    const draggedGroup = input.registry.groups.get(input.draggedDraggableId);
+    if (!draggedElement || !draggedGroup) {
+        return;
+    }
+    const activeDropTargetId = input.activeDropTargetId === input.draggedDraggableId
+        ? input.registry.previewPlacement?.activeDropTargetId
+        : input.activeDropTargetId;
+    if (!activeDropTargetId ||
+        activeDropTargetId === input.draggedDraggableId) {
+        refreshSortableDropTargetMeasurements({
+            registry: input.registry,
+            runtime: input.runtime,
+            group: draggedGroup,
+            dropTargetIds: getSortablePreviewMeasurementIds({
+                registry: input.registry,
+                draggedElement,
+            }),
+        });
+        return;
+    }
+    const target = input.runtime.getDropTargetRegistration(activeDropTargetId, draggedGroup);
+    if (!target) {
+        return;
+    }
+    const measurementIds = getSortablePreviewMeasurementIds({
+        registry: input.registry,
+        draggedElement,
+        targetElement: target.element,
+    });
+    const draggedRegistration = input.runtime.getDropTargetRegistration(input.draggedDraggableId, draggedGroup);
+    addRegistrationContainerId(measurementIds, draggedRegistration);
+    addRegistrationContainerId(measurementIds, target);
+    if (target.capabilities.container) {
+        measurementIds.add(target.id);
+        setSortablePreviewPlacementState({
+            registry: input.registry,
+            activeDropTargetId: target.id,
+            placement: null,
+            movementDirection: getCurrentAxisMovementDirection({
+                placementPosition: input.placementPosition,
+                movement: input.registry.pointerMovement,
+                axis: input.options.axis,
+            }),
+        });
+        if (!moveSortablePreviewIntoContainer({
+            draggedElement,
+            targetElement: target.element,
+        })) {
+            return;
+        }
+        addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
+        refreshSortableDropTargetMeasurements({
+            registry: input.registry,
+            runtime: input.runtime,
+            group: draggedGroup,
+            dropTargetIds: measurementIds,
+        });
+        return;
+    }
+    const targetElement = target.element;
+    const listElement = targetElement.parentElement;
+    if (!listElement) {
+        return;
+    }
+    if (!target.capabilities.sortable) {
+        return;
+    }
+    const targetDraggableId = getSortableDraggableId(input.registry, targetElement);
+    if (targetDraggableId !== activeDropTargetId) {
+        return;
+    }
+    const placementDecision = getSortablePreviewPlacement({
+        activeDropTargetId,
+        targetElement,
+        placementPosition: input.placementPosition,
+        movement: input.registry.pointerMovement,
+        previewPlacement: input.registry.previewPlacement,
+        options: input.options,
+    });
+    const placement = placementDecision.placement;
+    setSortablePreviewPlacementState({
+        registry: input.registry,
+        activeDropTargetId,
+        placement,
+        movementDirection: placementDecision.movementDirection,
+    });
+    if (isSortablePreviewAlreadyPlaced({
+        draggedElement,
+        targetElement,
+        placement,
+    })) {
+        return;
+    }
+    if (placement === "after") {
+        targetElement.after(draggedElement);
+    }
+    else {
+        targetElement.before(draggedElement);
+    }
+    addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
+    addSortableMeasurementIdsAroundElement(measurementIds, input.registry, targetElement);
+    refreshSortableDropTargetMeasurements({
+        registry: input.registry,
+        runtime: input.runtime,
+        group: draggedGroup,
+        dropTargetIds: measurementIds,
+    });
+}
+export function getSortablePreviewPlacement(input) {
+    const axis = input.options.axis;
+    const axisPosition = getAxisPosition(input.placementPosition, axis);
+    const targetRect = input.targetElement.getBoundingClientRect();
+    const currentDirection = getCurrentAxisMovementDirection({
+        placementPosition: input.placementPosition,
+        movement: input.movement,
+        axis,
+    });
+    const previousPlacement = input.previewPlacement;
+    if (!previousPlacement ||
+        previousPlacement.activeDropTargetId !== input.activeDropTargetId ||
+        previousPlacement.placement === null ||
+        previousPlacement.movementDirection === "none") {
+        return {
+            placement: getOptimisticPlacement({
+                axis,
+                axisPosition,
+                currentDirection,
+                targetRect,
+            }),
+            movementDirection: currentDirection,
+        };
+    }
+    if (currentDirection === "none" ||
+        currentDirection === previousPlacement.movementDirection) {
+        return {
+            placement: previousPlacement.placement,
+            movementDirection: previousPlacement.movementDirection,
+        };
+    }
+    const boundary = getPlacementBoundary({
+        targetRect,
+        axis,
+        direction: currentDirection,
+        startRatio: input.options.placementBoundary.start,
+        endRatio: input.options.placementBoundary.end,
+    });
+    const reversalPlacement = getPlacementSideFromBoundary(axisPosition, boundary);
+    if (reversalPlacement === previousPlacement.placement) {
+        return {
+            placement: previousPlacement.placement,
+            movementDirection: previousPlacement.movementDirection,
+        };
+    }
+    return {
+        placement: reversalPlacement,
+        movementDirection: currentDirection,
+    };
+}
+function setSortablePreviewPlacementState(input) {
+    input.registry.previewPlacement = {
+        activeDropTargetId: input.activeDropTargetId,
+        placement: input.placement,
+        movementDirection: input.movementDirection,
+    };
+}
+function getOptimisticPlacement(input) {
+    if (input.currentDirection === "forward") {
+        return "after";
+    }
+    if (input.currentDirection === "backward") {
+        return "before";
+    }
+    return getPlacementSideFromBoundary(input.axisPosition, getPlacementBoundary({
+        targetRect: input.targetRect,
+        axis: input.axis,
+        direction: "none",
+        startRatio: neutralPlacementBoundaryRatio,
+        endRatio: neutralPlacementBoundaryRatio,
+    }));
+}
+function getCurrentAxisMovementDirection(input) {
+    const axisPosition = getAxisPosition(input.placementPosition, input.axis);
+    const previousAxisPosition = input.movement
+        ? getAxisPosition(input.movement.previousPointerPosition, input.axis)
+        : axisPosition;
+    return getAxisMovementDirection(previousAxisPosition, axisPosition);
+}
+export function isSortablePreviewAlreadyPlaced(input) {
+    return input.placement === "before"
+        ? input.draggedElement.nextElementSibling === input.targetElement
+        : input.draggedElement.previousElementSibling === input.targetElement;
+}
+export function restoreSortableSnapshot(registry, draggableId) {
+    const snapshot = registry.snapshots.get(draggableId);
+    if (!snapshot) {
+        return false;
+    }
+    snapshot.parent.insertBefore(snapshot.element, getSnapshotRestoreReferenceNode(snapshot));
+    return true;
+}
+export function clearSortableDraggedState(registry, draggableId) {
+    const element = getRegisteredSortableElement(registry, draggableId) ??
+        registry.snapshots.get(draggableId)?.element;
+    if (element) {
+        restoreSortableDraggedAttribute({
+            registry,
+            draggableId,
+            element,
+        });
+    }
+}
+function getSortableDraggableId(registry, element) {
+    const draggableId = registry.elementIds.get(element);
+    return draggableId && registry.elements.get(draggableId)?.deref() === element
+        ? draggableId
+        : null;
+}
+function getSortablePreviewMeasurementIds(input) {
+    const dropTargetIds = new Set();
+    addSortableMeasurementIdsAroundElement(dropTargetIds, input.registry, input.draggedElement);
+    if (input.targetElement) {
+        addSortableMeasurementIdsAroundElement(dropTargetIds, input.registry, input.targetElement);
+    }
+    return dropTargetIds;
+}
+function addSortableMeasurementIdsAroundElement(dropTargetIds, registry, element) {
+    addSortableMeasurementId(dropTargetIds, registry, element);
+    addSortableMeasurementId(dropTargetIds, registry, element.previousElementSibling);
+    addSortableMeasurementId(dropTargetIds, registry, element.nextElementSibling);
+}
+function addSortableMeasurementId(dropTargetIds, registry, element) {
+    if (!(element instanceof HTMLElement)) {
+        return;
+    }
+    const draggableId = getSortableDraggableId(registry, element);
+    if (draggableId) {
+        dropTargetIds.add(draggableId);
+    }
+}
+function addRegistrationContainerId(dropTargetIds, registration) {
+    if (registration?.containerId) {
+        dropTargetIds.add(registration.containerId);
+    }
+}
+function refreshSortableDropTargetMeasurements(input) {
+    for (const dropTargetId of input.dropTargetIds) {
+        const registration = input.runtime.getDropTargetRegistration(dropTargetId, input.group);
+        if (!registration) {
+            continue;
+        }
+        if (registration.capabilities.container) {
+            input.runtime.registerDropContainer?.(registration.id, registration.element, registration.group);
+            continue;
+        }
+        input.runtime.registerDropTarget(registration.id, registration.element, registration.group, {
+            containerId: registration.containerId,
+            sortable: registration.capabilities.sortable,
+            sortableAxis: input.registry.sortableOptions.get(registration.id)?.axis ?? "vertical",
+        });
+    }
+}
+function moveSortablePreviewIntoContainer(input) {
+    if (input.draggedElement.parentElement === input.targetElement &&
+        input.draggedElement.previousSibling === null) {
+        return false;
+    }
+    input.targetElement.insertBefore(input.draggedElement, input.targetElement.firstChild);
+    return true;
+}
+function getSnapshotRestoreReferenceNode(snapshot) {
+    if (snapshot.nextSibling &&
+        snapshot.nextSibling !== snapshot.element &&
+        snapshot.nextSibling.parentNode === snapshot.parent) {
+        return snapshot.nextSibling;
+    }
+    if (snapshot.previousSibling &&
+        snapshot.previousSibling !== snapshot.element &&
+        snapshot.previousSibling.parentNode === snapshot.parent) {
+        const referenceNode = snapshot.previousSibling.nextSibling;
+        return referenceNode === snapshot.element
+            ? snapshot.element.nextSibling
+            : referenceNode;
+    }
+    const indexedReferenceNode = snapshot.parent.childNodes.item(snapshot.childIndex);
+    return indexedReferenceNode === snapshot.element
+        ? snapshot.element.nextSibling
+        : indexedReferenceNode;
+}
+export function getAxisPosition(pointerPosition, axis) {
+    return axis === "horizontal" ? pointerPosition.x : pointerPosition.y;
+}
+export function getAxisMovementDirection(previousAxisPosition, currentAxisPosition) {
+    if (currentAxisPosition > previousAxisPosition) {
+        return "forward";
+    }
+    if (currentAxisPosition < previousAxisPosition) {
+        return "backward";
+    }
+    return "none";
+}
+export function getPlacementBoundary(input) {
+    const targetStart = input.axis === "horizontal" ? input.targetRect.left : input.targetRect.top;
+    const targetSize = input.axis === "horizontal" ? input.targetRect.width : input.targetRect.height;
+    const boundaryRatio = input.direction === "forward"
+        ? input.startRatio
+        : input.direction === "backward"
+            ? input.endRatio
+            : neutralPlacementBoundaryRatio;
+    return targetStart + targetSize * boundaryRatio;
+}
+export function getPlacementSideFromBoundary(axisPosition, boundary) {
+    return axisPosition < boundary ? "before" : "after";
+}

package/dist/sortable/sortable-registry.d.ts

@@ -0,0 +1,113 @@
+import type { DomDraggableRuntime } from "../draggable/create-draggable.js";
+import type { RemeasureDropTargetsInput } from "../runtime/drop-target-registry.js";
+import { type SortablePreviewPlacementState, type SortablePointerMovementState } from "./sortable-preview.js";
+import { type NormalizedSortableOptions, type SortableOptions } from "./sortable-options.js";
+export type DomSortableRuntime = DomDraggableRuntime & {
+    registerDropTarget: (draggableId: string, element: HTMLElement, group: string, options?: {
+        containerId?: string | null;
+        sortable?: boolean;
+        sortableAxis?: NormalizedSortableOptions["axis"];
+    }) => void;
+    registerDropContainer?: (containerId: string, element: HTMLElement, group: string) => void;
+    unregisterDropTarget: (draggableId: string, element?: HTMLElement) => void;
+    getDropTargetRegistration: (dropTargetId: string, group?: string) => {
+        id: string;
+        element: HTMLElement;
+        group: string;
+        containerId: string | null;
+        capabilities: {
+            container: boolean;
+            sortable: boolean;
+        };
+    } | null;
+    subscribe: (subscription: {
+        onDragStart?: (event: {
+            draggableId: string;
+            source: "pointer" | "keyboard";
+            pointerPosition: {
+                x: number;
+                y: number;
+            };
+            placementPosition?: {
+                x: number;
+                y: number;
+            };
+        }) => void;
+        onDragUpdate?: (event: {
+            draggableId: string;
+            source: "pointer" | "keyboard";
+            pointerPosition: {
+                x: number;
+                y: number;
+            };
+            placementPosition?: {
+                x: number;
+                y: number;
+            };
+            activeDropTargetId: string | null;
+            previousDropTargetId: string | null;
+        }) => void;
+        onDragEnd?: (event: {
+            draggableId: string;
+            source: "pointer" | "keyboard";
+            result: "dropped" | "no-target" | "invalid-target" | "canceled";
+            dropTargetId: string | null;
+        }) => void;
+        onDrop?: (event: {
+            draggableId: string;
+            source: "pointer" | "keyboard";
+            dropTargetId: string;
+        }) => void;
+    }) => () => void;
+    onDispose?: (callback: () => void) => () => void;
+    remeasureDropTargets: (input?: RemeasureDropTargetsInput) => void;
+};
+export type SortableRegistry = {
+    attributeSnapshots: Map<string, SortableAttributeSnapshot>;
+    elementIds: WeakMap<HTMLElement, string>;
+    elements: Map<string, WeakRef<HTMLElement>>;
+    groups: Map<string, string>;
+    previewPlacement: SortablePreviewPlacementState | null;
+    pointerMovement: SortablePointerMovementState | null;
+    snapshots: Map<string, SortableSnapshot>;
+    sortableOptions: Map<string, NormalizedSortableOptions>;
+};
+export type SortableAttributeSnapshot = {
+    elementRef: WeakRef<HTMLElement>;
+    sortableDraggable: string | null;
+    dragged: string | null;
+};
+export type SortableSnapshot = {
+    element: HTMLElement;
+    parent: HTMLElement;
+    previousSibling: ChildNode | null;
+    nextSibling: ChildNode | null;
+    childIndex: number;
+};
+export declare function getSortableRegistry(runtime: DomSortableRuntime): SortableRegistry;
+export declare function registerSortableElement(input: {
+    registry: SortableRegistry;
+    runtime: DomSortableRuntime;
+    draggableId: string;
+    group: string;
+    containerId?: string | null;
+    element: HTMLElement;
+    options?: SortableOptions;
+}): void;
+export declare function unregisterSortableElement(input: {
+    registry: SortableRegistry;
+    runtime: DomSortableRuntime;
+    draggableId: string | null;
+    element: HTMLElement | null;
+}): void;
+export declare function restoreSortableInternalAttributes(input: {
+    registry: SortableRegistry;
+    draggableId: string | null;
+    element: HTMLElement;
+}): void;
+export declare function restoreSortableDraggedAttribute(input: {
+    registry: SortableRegistry;
+    draggableId: string;
+    element: HTMLElement;
+}): void;
+export declare function getRegisteredSortableElement(registry: SortableRegistry, draggableId: string): HTMLElement | null;

package/dist/sortable/sortable-registry.js

@@ -0,0 +1,145 @@
+import { clearSortableDraggedState, clearSortablePointerMovement, initializeSortablePointerMovement, moveSortablePreview, restoreSortableSnapshot, snapshotSortableElement, isSortablePreviewTarget, updateSortablePointerMovement, clearSortablePreviewPlacement, } from "./sortable-preview.js";
+import { normalizeSortableOptions, } from "./sortable-options.js";
+const sortableRegistries = new WeakMap();
+export function getSortableRegistry(runtime) {
+    const existingRegistry = sortableRegistries.get(runtime);
+    if (existingRegistry) {
+        return existingRegistry;
+    }
+    const registry = {
+        attributeSnapshots: new Map(),
+        elementIds: new WeakMap(),
+        elements: new Map(),
+        groups: new Map(),
+        previewPlacement: null,
+        pointerMovement: null,
+        snapshots: new Map(),
+        sortableOptions: new Map(),
+    };
+    const unsubscribe = runtime.subscribe({
+        onDragStart: (event) => {
+            initializeSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
+            snapshotSortableElement(registry, event.draggableId);
+        },
+        onDragUpdate: (event) => {
+            if (isSortablePreviewTarget({
+                activeDropTargetId: event.activeDropTargetId,
+            })) {
+                moveSortablePreview({
+                    registry,
+                    runtime,
+                    draggedDraggableId: event.draggableId,
+                    activeDropTargetId: event.activeDropTargetId,
+                    pointerPosition: event.pointerPosition,
+                    placementPosition: event.placementPosition ?? event.pointerPosition,
+                    options: getSortableOptions(registry, event.draggableId),
+                });
+            }
+            else {
+                clearSortablePreviewPlacement(registry);
+            }
+            updateSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
+        },
+        onDragEnd: (event) => {
+            restoreSortableSnapshot(registry, event.draggableId);
+            clearSortableDraggedState(registry, event.draggableId);
+            clearSortablePointerMovement(registry);
+            clearSortablePreviewPlacement(registry);
+            registry.snapshots.delete(event.draggableId);
+        },
+        onDrop: (event) => {
+            clearSortableDraggedState(registry, event.draggableId);
+            clearSortablePointerMovement(registry);
+            clearSortablePreviewPlacement(registry);
+            registry.snapshots.delete(event.draggableId);
+        },
+    });
+    const cleanupRegistry = () => {
+        unsubscribe();
+        unsubscribeDispose?.();
+        registry.elements.clear();
+        registry.groups.clear();
+        registry.pointerMovement = null;
+        registry.previewPlacement = null;
+        registry.attributeSnapshots.clear();
+        registry.snapshots.clear();
+        registry.sortableOptions.clear();
+        sortableRegistries.delete(runtime);
+    };
+    const unsubscribeDispose = runtime.onDispose?.(cleanupRegistry);
+    sortableRegistries.set(runtime, registry);
+    return registry;
+}
+export function registerSortableElement(input) {
+    const existingSnapshot = input.registry.attributeSnapshots.get(input.draggableId);
+    const existingSnapshotElement = existingSnapshot?.elementRef.deref() ?? null;
+    if (!existingSnapshot || existingSnapshotElement !== input.element) {
+        input.registry.attributeSnapshots.set(input.draggableId, {
+            elementRef: new WeakRef(input.element),
+            sortableDraggable: input.element.getAttribute("data-dnd-sortable-draggable"),
+            dragged: input.element.getAttribute("data-dnd-dragged"),
+        });
+    }
+    input.element.setAttribute("data-dnd-sortable-draggable", "true");
+    const normalizedOptions = normalizeSortableOptions(input.options);
+    input.registry.elementIds.set(input.element, input.draggableId);
+    input.registry.elements.set(input.draggableId, new WeakRef(input.element));
+    input.registry.groups.set(input.draggableId, input.group);
+    input.registry.sortableOptions.set(input.draggableId, normalizedOptions);
+    input.runtime.registerDropTarget(input.draggableId, input.element, input.group, {
+        containerId: input.containerId ?? null,
+        sortable: true,
+        sortableAxis: normalizedOptions.axis,
+    });
+}
+export function unregisterSortableElement(input) {
+    if (input.draggableId !== null) {
+        input.runtime.unregisterDropTarget(input.draggableId, input.element ?? undefined);
+        const registeredElement = input.registry.elements.get(input.draggableId)?.deref() ?? null;
+        if (registeredElement === input.element || input.element === null) {
+            if (registeredElement) {
+                input.registry.elementIds.delete(registeredElement);
+            }
+            input.registry.elements.delete(input.draggableId);
+            input.registry.groups.delete(input.draggableId);
+            input.registry.sortableOptions.delete(input.draggableId);
+        }
+    }
+    if (input.element) {
+        restoreSortableInternalAttributes({
+            registry: input.registry,
+            draggableId: input.draggableId,
+            element: input.element,
+        });
+    }
+}
+export function restoreSortableInternalAttributes(input) {
+    const snapshot = input.draggableId
+        ? input.registry.attributeSnapshots.get(input.draggableId)
+        : null;
+    const snapshotElement = snapshot?.elementRef.deref() ?? null;
+    restoreAttribute(input.element, "data-dnd-sortable-draggable", snapshot && snapshotElement === input.element ? snapshot.sortableDraggable : null);
+    restoreAttribute(input.element, "data-dnd-dragged", snapshot && snapshotElement === input.element ? snapshot.dragged : null);
+    if (input.draggableId) {
+        input.registry.attributeSnapshots.delete(input.draggableId);
+    }
+}
+export function restoreSortableDraggedAttribute(input) {
+    const snapshot = input.registry.attributeSnapshots.get(input.draggableId);
+    const snapshotElement = snapshot?.elementRef.deref() ?? null;
+    restoreAttribute(input.element, "data-dnd-dragged", snapshot && snapshotElement === input.element ? snapshot.dragged : null);
+}
+export function getRegisteredSortableElement(registry, draggableId) {
+    const element = registry.elements.get(draggableId)?.deref() ?? null;
+    return element?.isConnected ? element : null;
+}
+function getSortableOptions(registry, draggableId) {
+    return (registry.sortableOptions.get(draggableId) ?? normalizeSortableOptions(undefined));
+}
+function restoreAttribute(element, attribute, value) {
+    if (value === null) {
+        element.removeAttribute(attribute);
+        return;
+    }
+    element.setAttribute(attribute, value);
+}

package/dist/targeting/algorithms.d.ts

@@ -0,0 +1,6 @@
+import type { TargetingAlgorithm } from "./types.js";
+export type BuiltInTargetingAlgorithmKind = "pointer-to-center" | "center-to-center" | "pointer-to-rect-distance";
+export declare const pointerToCenter: TargetingAlgorithm;
+export declare const centerToCenter: TargetingAlgorithm;
+export declare const pointerToRectDistance: TargetingAlgorithm;
+export declare function getBuiltInTargetingAlgorithmKind(targetingAlgorithm: TargetingAlgorithm): BuiltInTargetingAlgorithmKind | null;

package/dist/targeting/algorithms.js

@@ -0,0 +1,56 @@
+import { getDistanceToRect } from "./constraints.js";
+const builtInTargetingAlgorithmKinds = new WeakMap();
+export const pointerToCenter = registerBuiltInTargetingAlgorithm(Object.assign(({ pointerPosition, dropTargets }) => findClosestTarget(pointerPosition, dropTargets), { mode: "pointer" }), "pointer-to-center");
+export const centerToCenter = registerBuiltInTargetingAlgorithm(Object.assign(({ overlayRect, dropTargets }) => {
+    if (!overlayRect) {
+        return null;
+    }
+    return findClosestTarget(getRectCenter(overlayRect), dropTargets);
+}, { mode: "rect" }), "center-to-center");
+export const pointerToRectDistance = registerBuiltInTargetingAlgorithm(Object.assign(({ pointerPosition, dropTargets }) => findClosestTargetByRectDistance(pointerPosition, dropTargets), { mode: "pointer" }), "pointer-to-rect-distance");
+export function getBuiltInTargetingAlgorithmKind(targetingAlgorithm) {
+    return builtInTargetingAlgorithmKinds.get(targetingAlgorithm) ?? null;
+}
+function registerBuiltInTargetingAlgorithm(targetingAlgorithm, kind) {
+    builtInTargetingAlgorithmKinds.set(targetingAlgorithm, kind);
+    return targetingAlgorithm;
+}
+function findClosestTarget(point, dropTargets) {
+    let closestTarget = null;
+    let closestDistance = Number.POSITIVE_INFINITY;
+    for (const candidateDropTarget of dropTargets) {
+        const distance = getSquaredDistance(point, getRectCenter(candidateDropTarget.dropTargetRect));
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closestTarget = candidateDropTarget;
+        }
+    }
+    return closestTarget;
+}
+function findClosestTargetByRectDistance(point, dropTargets) {
+    let closestTarget = null;
+    let closestDistance = Number.POSITIVE_INFINITY;
+    for (const candidateDropTarget of dropTargets) {
+        const distance = getSquaredRectDistance(point, candidateDropTarget.dropTargetRect);
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closestTarget = candidateDropTarget;
+        }
+    }
+    return closestTarget;
+}
+function getRectCenter(rect) {
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+    };
+}
+function getSquaredDistance(a, b) {
+    const deltaX = a.x - b.x;
+    const deltaY = a.y - b.y;
+    return deltaX * deltaX + deltaY * deltaY;
+}
+function getSquaredRectDistance(point, rect) {
+    const distance = getDistanceToRect(point, rect);
+    return distance.x * distance.x + distance.y * distance.y;
+}

package/dist/targeting/constraints.d.ts

@@ -0,0 +1,15 @@
+import type { DragPoint, DragRect } from "../geometry/rects.js";
+import type { TargetingConstraint } from "./types.js";
+export type RectDistance = {
+    x: number;
+    y: number;
+    distance: number;
+};
+export type MaxDistanceToRectOptions = {
+    maxDistance?: number;
+    maxXDistance?: number;
+    maxYDistance?: number;
+};
+export declare function maxPointerDistanceToRect(options: MaxDistanceToRectOptions): TargetingConstraint;
+export declare function maxOverlayCenterDistanceToRect(options: MaxDistanceToRectOptions): TargetingConstraint;
+export declare function getDistanceToRect(point: DragPoint, rect: DragRect): RectDistance;