@mk-drag-and-drop/dom 0.1.0

package/dist/runtime/drag-runtime.js

@@ -0,0 +1,798 @@
+import { measureDomElement } from "../geometry/measurement.js";
+import { getOverlayMeasurement, getOverlayRect, } from "../geometry/overlay.js";
+import { defaultKeyboardConfiguration, normalizeKeyboardConfiguration, normalizePointerConfiguration, } from "../input/config.js";
+import { KeyboardDragController, } from "../input/keyboard-drag.js";
+import { PointerActivationController } from "../input/pointer-activation.js";
+import { applyDragModifiers, createActiveDragModifiers, } from "../modifiers/pipeline.js";
+import { getBuiltInTargetingAlgorithmKind, pointerToCenter, } from "../targeting/algorithms.js";
+import { DropTargetRegistry, } from "./drop-target-registry.js";
+const noopUpdateOverlayHost = () => { };
+export class DragRuntime {
+    isDragging = false;
+    draggedId = null;
+    draggedGroup = null;
+    pointerPosition = null;
+    activeDropTargetId = null;
+    session = { status: "idle" };
+    modifiers = [];
+    activeDragModifiers = [];
+    cleanupWindowListeners = null;
+    cleanupTextSelectionSuppression = null;
+    queuedPointerPosition = null;
+    pointerFrameId = null;
+    subscriptions = new Set();
+    disposeCallbacks = new Set();
+    bindingCleanupRecords = new Set();
+    lifecycleCallbacks = {};
+    lifecycleHelpers = {
+        getDropTargetRect: (dropTargetId) => this.getLifecycleDropTargetRect(dropTargetId),
+    };
+    lifecycleDropTargetRectSnapshot = null;
+    dropTargetRegistry = new DropTargetRegistry();
+    pointerConfiguration = {
+        activationDelay: null,
+        activationDistance: null,
+    };
+    keyboardConfiguration = defaultKeyboardConfiguration;
+    updateOverlayHost;
+    targetingAlgorithm;
+    hasDragOverlay;
+    keepOverlayOnDrop;
+    targetingConstraint;
+    pointerActivation = new PointerActivationController({
+        getConfiguration: () => this.pointerConfiguration,
+        isDragging: () => this.isDragging,
+        startImmediately: (request) => {
+            if (!request.element.isConnected) {
+                return;
+            }
+            this.startDragNow({
+                draggableId: request.draggableId,
+                group: request.group,
+                inputType: "pointer",
+                pointerId: request.pointerId,
+                pointerPosition: request.pointerPosition,
+                sourceRect: measureDomElement(request.element),
+            });
+        },
+        activate: (activation) => {
+            if (this.isDragging || !activation.element.isConnected) {
+                return;
+            }
+            this.startDragNow({
+                draggableId: activation.draggableId,
+                group: activation.group,
+                inputType: "pointer",
+                pointerId: activation.pointerId,
+                pointerPosition: activation.initialPointerPosition,
+                sourceRect: measureDomElement(activation.element),
+            });
+            if (activation.latestPointerPosition.x !==
+                activation.initialPointerPosition.x ||
+                activation.latestPointerPosition.y !==
+                    activation.initialPointerPosition.y) {
+                this.updatePointer(activation.latestPointerPosition);
+            }
+        },
+    });
+    keyboardDrag = new KeyboardDragController({
+        getConfiguration: () => this.keyboardConfiguration,
+        isDragging: () => this.isDragging,
+        getActiveInput: () => this.getActiveInput(),
+        start: (input) => {
+            this.requestKeyboardDragStart(input);
+        },
+        move: (direction) => {
+            this.moveKeyboardDrag(direction);
+        },
+        drop: () => {
+            this.endDrag();
+        },
+        cancel: () => {
+            this.cancelDrag();
+        },
+    });
+    constructor(options = {}) {
+        this.updateOverlayHost = options.updateOverlayHost ?? noopUpdateOverlayHost;
+        this.targetingAlgorithm = options.targetingAlgorithm ?? pointerToCenter;
+        this.hasDragOverlay = options.hasDragOverlay ?? false;
+        this.keepOverlayOnDrop = options.keepOverlayOnDrop ?? false;
+        this.targetingConstraint = options.targetingConstraint;
+    }
+    configure(input) {
+        this.hasDragOverlay = input.hasDragOverlay;
+        this.keepOverlayOnDrop = input.keepOverlayOnDrop;
+        this.targetingAlgorithm = input.targetingAlgorithm;
+        this.targetingConstraint = input.targetingConstraint;
+        this.lifecycleCallbacks = input.lifecycleCallbacks;
+        this.keyboardConfiguration = normalizeKeyboardConfiguration(input.keyboardConfiguration);
+        this.modifiers = input.modifiers ? Array.from(input.modifiers) : [];
+        this.pointerConfiguration = normalizePointerConfiguration(input.pointerConfiguration);
+    }
+    requestDragStart(input) {
+        this.pruneDisconnectedBindingCleanups();
+        this.pointerActivation.request(input);
+    }
+    isKeyboardDragEnabled() {
+        return this.keyboardDrag.isEnabled();
+    }
+    handleSourceKeyboardKeyDown(input) {
+        return this.keyboardDrag.handleSourceKeyDown(input);
+    }
+    requestKeyboardDragStart(input) {
+        this.pruneDisconnectedBindingCleanups();
+        this.pointerActivation.cancel();
+        if (this.isDragging ||
+            !this.keyboardDrag.isEnabled() ||
+            !input.element.isConnected) {
+            return;
+        }
+        const sourceRect = measureDomElement(input.element);
+        const pointerPosition = {
+            x: sourceRect.left + sourceRect.width / 2,
+            y: sourceRect.top + sourceRect.height / 2,
+        };
+        this.startDragNow({
+            draggableId: input.draggableId,
+            group: input.group,
+            inputType: "keyboard",
+            pointerPosition,
+            sourceRect,
+        });
+    }
+    moveKeyboardDrag(direction) {
+        const session = this.getDraggingSession();
+        if (!session || session.source !== "keyboard") {
+            return;
+        }
+        const distance = this.keyboardConfiguration.moveDistance;
+        const pointerPosition = {
+            x: session.rawPointerPosition.x,
+            y: session.rawPointerPosition.y,
+        };
+        if (direction === "up") {
+            pointerPosition.y -= distance;
+        }
+        else if (direction === "down") {
+            pointerPosition.y += distance;
+        }
+        else if (direction === "left") {
+            pointerPosition.x -= distance;
+        }
+        else {
+            pointerPosition.x += distance;
+        }
+        this.updatePointerNow(pointerPosition);
+    }
+    updatePointer(rawPointerPosition) {
+        if (this.session.status !== "dragging") {
+            return;
+        }
+        this.queuedPointerPosition = rawPointerPosition;
+        if (this.pointerFrameId !== null) {
+            return;
+        }
+        this.pointerFrameId = window.requestAnimationFrame(() => {
+            this.pointerFrameId = null;
+            const nextPointerPosition = this.queuedPointerPosition;
+            this.queuedPointerPosition = null;
+            if (nextPointerPosition) {
+                this.updatePointerNow(nextPointerPosition);
+            }
+        });
+    }
+    updatePointerNow(rawPointerPosition) {
+        const session = this.getDraggingSession();
+        if (!session) {
+            return;
+        }
+        const previousDropTargetId = session.activeDropTargetId;
+        const pointerPosition = applyDragModifiers({
+            activeModifiers: this.activeDragModifiers,
+            draggableId: session.draggableId,
+            group: session.group,
+            sourceRect: session.sourceRect,
+            initialPointerPosition: session.startPointerPosition,
+            rawPointerPosition,
+            overlayMeasurement: session.overlayMeasurement,
+        });
+        const overlayRect = this.hasDragOverlay
+            ? this.getCurrentDragRectAt(pointerPosition)
+            : null;
+        const sortablePlacementPosition = this.getSortablePlacementPosition({
+            pointerPosition,
+            overlayRect,
+        });
+        const activeDropTargetId = this.getActiveDropTargetId({
+            pointerPosition,
+            overlayRect,
+        });
+        const nextSession = {
+            ...session,
+            rawPointerPosition,
+            pointerPosition,
+            activeDropTargetId,
+        };
+        this.setSession(nextSession);
+        this.updateOverlayHost({
+            type: "move",
+            dragState: this.createDragState(nextSession),
+        });
+        const updateEvent = {
+            draggableId: nextSession.draggableId,
+            source: nextSession.source,
+            pointerPosition,
+            activeDropTargetId: nextSession.activeDropTargetId,
+            previousDropTargetId,
+        };
+        this.notifyDragUpdate(updateEvent, {
+            ...updateEvent,
+            placementPosition: sortablePlacementPosition,
+        });
+    }
+    endDrag() {
+        this.flushQueuedPointerUpdate();
+        this.finishDrag({
+            reason: "drop",
+            keepReleasedOverlay: this.keepOverlayOnDrop,
+        });
+    }
+    cancelDrag() {
+        this.flushQueuedPointerUpdate();
+        this.finishDrag({
+            reason: "cancel",
+            keepReleasedOverlay: false,
+        });
+    }
+    registerDropTarget(dropTargetId, element, group, options) {
+        const removedTargets = this.dropTargetRegistry.register(dropTargetId, element, group, options);
+        this.clearActiveDropTargetIdIfRemoved(removedTargets);
+    }
+    unregisterDropTarget(dropTargetId, element) {
+        const removedTargets = this.dropTargetRegistry.unregister(dropTargetId, element);
+        this.clearActiveDropTargetIdIfRemoved(removedTargets);
+    }
+    registerDropContainer(containerId, element, group) {
+        const removedTargets = this.dropTargetRegistry.register(containerId, element, group, {
+            containerId,
+            container: true,
+        });
+        this.clearActiveDropTargetIdIfRemoved(removedTargets);
+    }
+    unregisterDropContainer(containerId, element) {
+        const removedTargets = this.dropTargetRegistry.unregister(containerId, element);
+        this.clearActiveDropTargetIdIfRemoved(removedTargets);
+    }
+    cleanup() {
+        this.pointerActivation.cancel();
+        this.resetActiveDragState();
+        this.cleanupActiveDragResources();
+        this.updateOverlayHost({ type: "unmount" });
+        this.pruneDisconnectedBindingCleanups();
+    }
+    getDropTargetRect(dropTargetId) {
+        return this.dropTargetRegistry.getViewportRect(dropTargetId);
+    }
+    getDropTargetRegistration(dropTargetId, group) {
+        return this.dropTargetRegistry.getDropTargetRegistration(dropTargetId, group);
+    }
+    getCurrentDragRect() {
+        const session = this.getDraggingSession();
+        return session
+            ? this.getCurrentDragRectAt(session.pointerPosition)
+            : null;
+    }
+    setOverlayRect(overlayRect) {
+        const session = this.getDraggingSession();
+        if (!session) {
+            return;
+        }
+        const overlayMeasurement = overlayRect
+            ? getOverlayMeasurement({
+                sourceRect: session.sourceRect,
+                initialPointerPosition: session.startPointerPosition,
+                pointerPosition: session.pointerPosition,
+                overlayRect,
+            })
+            : null;
+        if (areOverlayMeasurementsEqual(session.overlayMeasurement, overlayMeasurement)) {
+            return;
+        }
+        this.setSession({
+            ...session,
+            overlayMeasurement,
+        });
+        this.updatePointerNow(session.rawPointerPosition);
+    }
+    remeasureDropTargets(input) {
+        const pruneGroup = input !== undefined && typeof input !== "string" && !Array.isArray(input)
+            ? input.group
+            : undefined;
+        this.pruneDisconnectedBindingCleanups();
+        this.removeDisconnectedDropTargets(pruneGroup);
+        this.dropTargetRegistry.remeasure(input);
+        this.pruneDisconnectedBindingCleanups();
+    }
+    subscribe(subscription) {
+        this.subscriptions.add(subscription);
+        return () => {
+            this.subscriptions.delete(subscription);
+        };
+    }
+    onDispose(callback) {
+        this.disposeCallbacks.add(callback);
+        return () => {
+            this.disposeCallbacks.delete(callback);
+        };
+    }
+    registerBindingCleanup(record) {
+        const storedRecord = {
+            record,
+            hasBeenConnected: record.isConnected(),
+        };
+        // Keep registration O(1). Full cleanup pruning runs on lifecycle/manual
+        // cleanup paths so bulk renders do not rescan every prior binding.
+        this.bindingCleanupRecords.add(storedRecord);
+        return () => {
+            if (!this.bindingCleanupRecords.delete(storedRecord)) {
+                return;
+            }
+            record.cleanup();
+        };
+    }
+    pruneDisconnectedBindingCleanups() {
+        this.pruneDisconnectedBindingCleanupRecords();
+    }
+    getBindingCleanupRecordCount() {
+        return this.bindingCleanupRecords.size;
+    }
+    dispose() {
+        this.cleanup();
+        this.disposeBindingCleanupRecords();
+        for (const disposeCallback of Array.from(this.disposeCallbacks)) {
+            disposeCallback();
+        }
+        this.disposeCallbacks.clear();
+        this.subscriptions.clear();
+        this.dropTargetRegistry.clear();
+        this.lifecycleCallbacks = {};
+        this.modifiers = [];
+        this.updateOverlayHost = noopUpdateOverlayHost;
+    }
+    startDragNow(input) {
+        if (this.targetingAlgorithm.mode === "rect" && !this.hasDragOverlay) {
+            throw new Error("The selected targeting algorithm requires a drag overlay. Provide dragOverlay or use a pointer-based targeting algorithm.");
+        }
+        this.pruneDisconnectedBindingCleanups();
+        const rawPointerPosition = input.pointerPosition;
+        const activeDragModifiers = createActiveDragModifiers({
+            modifiers: this.modifiers,
+            setupInput: {
+                draggableId: input.draggableId,
+                group: input.group,
+                sourceRect: input.sourceRect,
+                initialPointerPosition: rawPointerPosition,
+            },
+        });
+        this.activeDragModifiers = activeDragModifiers;
+        const effectivePointerPosition = applyDragModifiers({
+            activeModifiers: activeDragModifiers,
+            draggableId: input.draggableId,
+            group: input.group,
+            sourceRect: input.sourceRect,
+            initialPointerPosition: rawPointerPosition,
+            rawPointerPosition,
+        });
+        const sourceContainerId = this.dropTargetRegistry.getDropTargetRegistration(input.draggableId, input.group)?.containerId ?? null;
+        const sourceSortablePlacement = this.dropTargetRegistry.getSortableItemPlacement(input.draggableId, input.group);
+        const nextSession = {
+            status: "dragging",
+            source: input.inputType,
+            draggableId: input.draggableId,
+            group: input.group,
+            sourceRect: input.sourceRect,
+            sourceContainerId,
+            sourceSortablePlacement,
+            overlayMeasurement: null,
+            startPointerPosition: rawPointerPosition,
+            rawPointerPosition,
+            pointerPosition: effectivePointerPosition,
+            activeDropTargetId: null,
+        };
+        this.setSession(nextSession);
+        this.remeasureDropTargets({ group: input.group });
+        this.updateOverlayHost({
+            type: "mount",
+            state: {
+                dragState: this.createDragState(nextSession),
+                phase: "dragging",
+            },
+        });
+        this.suppressTextSelection();
+        if (input.inputType === "pointer") {
+            this.bindPointerWindowListeners(input.pointerId);
+        }
+        else {
+            this.bindKeyboardWindowListeners();
+        }
+        const dragStartEvent = {
+            draggableId: input.draggableId,
+            source: input.inputType,
+            pointerPosition: effectivePointerPosition,
+            sourceRect: input.sourceRect,
+        };
+        const startOverlayRect = this.hasDragOverlay
+            ? this.getCurrentDragRectAt(effectivePointerPosition)
+            : null;
+        this.notifyDragStart(dragStartEvent, {
+            ...dragStartEvent,
+            placementPosition: this.getSortablePlacementPosition({
+                pointerPosition: effectivePointerPosition,
+                overlayRect: startOverlayRect,
+            }),
+        });
+    }
+    finishDrag(input) {
+        this.pointerActivation.cancel();
+        const session = this.getDraggingSession();
+        const releasedDragState = session
+            ? this.createDragState(session)
+            : null;
+        const activeDropTargetId = input.reason === "drop" ? session?.activeDropTargetId ?? null : null;
+        const validDropTarget = session && activeDropTargetId
+            ? this.dropTargetRegistry.getDropTargetRegistration(activeDropTargetId, session.group)
+            : null;
+        const dropTargetId = validDropTarget ? activeDropTargetId : null;
+        const result = session
+            ? input.reason === "cancel"
+                ? "canceled"
+                : activeDropTargetId === null
+                    ? "no-target"
+                    : validDropTarget
+                        ? "dropped"
+                        : "invalid-target"
+            : null;
+        const sortablePlacement = session && dropTargetId
+            ? this.getDropEventSortablePlacement(session, dropTargetId)
+            : undefined;
+        const lifecycleDropTargetRectSnapshot = session
+            ? this.createLifecycleDropTargetRectSnapshot({
+                session,
+                dropTargetId,
+            })
+            : null;
+        this.resetActiveDragState();
+        this.cleanupActiveDragResources();
+        if (session && result) {
+            this.lifecycleDropTargetRectSnapshot = lifecycleDropTargetRectSnapshot;
+            try {
+                this.notifyDragEnd({
+                    draggableId: session.draggableId,
+                    source: session.source,
+                    result,
+                    dropTargetId,
+                });
+                if (result === "dropped" && dropTargetId) {
+                    this.notifyDrop({
+                        draggableId: session.draggableId,
+                        source: session.source,
+                        dropTargetId,
+                        ...(sortablePlacement ? { sortablePlacement } : {}),
+                    });
+                }
+            }
+            finally {
+                this.lifecycleDropTargetRectSnapshot = null;
+            }
+        }
+        if (input.keepReleasedOverlay && releasedDragState && this.hasDragOverlay) {
+            this.updateOverlayHost({
+                type: "release",
+                state: {
+                    dragState: releasedDragState,
+                    phase: "released",
+                },
+            });
+        }
+        else {
+            this.updateOverlayHost({ type: "unmount" });
+        }
+    }
+    bindPointerWindowListeners(pointerId) {
+        this.cleanupWindowListeners?.();
+        const handlePointerMove = (event) => {
+            if (event.pointerId !== pointerId) {
+                return;
+            }
+            this.updatePointer({
+                x: event.clientX,
+                y: event.clientY,
+            });
+        };
+        const handlePointerUp = (event) => {
+            if (event.pointerId !== pointerId) {
+                return;
+            }
+            this.endDrag();
+        };
+        const handlePointerCancel = (event) => {
+            if (event.pointerId !== pointerId) {
+                return;
+            }
+            this.cancelDrag();
+        };
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerCancel);
+        this.cleanupWindowListeners = () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerCancel);
+        };
+    }
+    bindKeyboardWindowListeners() {
+        this.cleanupWindowListeners?.();
+        this.cleanupWindowListeners = this.keyboardDrag.bindWindowListeners();
+    }
+    suppressTextSelection() {
+        this.cleanupTextSelectionSuppression?.();
+        const root = document.documentElement;
+        const body = document.body;
+        const previousRootUserSelect = root.style.userSelect;
+        const previousBodyUserSelect = body.style.userSelect;
+        root.style.userSelect = "none";
+        body.style.userSelect = "none";
+        this.cleanupTextSelectionSuppression = () => {
+            root.style.userSelect = previousRootUserSelect;
+            body.style.userSelect = previousBodyUserSelect;
+        };
+    }
+    resetActiveDragState() {
+        this.cancelQueuedPointerUpdate();
+        this.setSession({ status: "idle" });
+        this.activeDragModifiers = [];
+    }
+    cleanupActiveDragResources() {
+        this.cleanupWindowListeners?.();
+        this.cleanupWindowListeners = null;
+        this.cleanupTextSelectionSuppression?.();
+        this.cleanupTextSelectionSuppression = null;
+    }
+    flushQueuedPointerUpdate() {
+        if (this.pointerFrameId !== null) {
+            window.cancelAnimationFrame(this.pointerFrameId);
+            this.pointerFrameId = null;
+        }
+        const nextPointerPosition = this.queuedPointerPosition;
+        this.queuedPointerPosition = null;
+        if (nextPointerPosition) {
+            this.updatePointerNow(nextPointerPosition);
+        }
+    }
+    cancelQueuedPointerUpdate() {
+        if (this.pointerFrameId !== null) {
+            window.cancelAnimationFrame(this.pointerFrameId);
+            this.pointerFrameId = null;
+        }
+        this.queuedPointerPosition = null;
+    }
+    setSession(session) {
+        this.session = session;
+        this.syncPublicDragFields();
+    }
+    syncPublicDragFields() {
+        if (this.session.status === "idle") {
+            this.isDragging = false;
+            this.draggedId = null;
+            this.draggedGroup = null;
+            this.pointerPosition = null;
+            this.activeDropTargetId = null;
+            return;
+        }
+        this.isDragging = true;
+        this.draggedId = this.session.draggableId;
+        this.draggedGroup = this.session.group;
+        this.pointerPosition = this.session.pointerPosition;
+        this.activeDropTargetId = this.session.activeDropTargetId;
+    }
+    getActiveInput() {
+        return this.session.status === "dragging" ? this.session.source : null;
+    }
+    getDraggingSession() {
+        return this.session.status === "dragging" ? this.session : null;
+    }
+    getDropEventSortablePlacement(session, dropTargetId) {
+        const placement = this.dropTargetRegistry.getSortableDropPlacement({
+            draggableId: session.draggableId,
+            dropTargetId,
+            group: session.group,
+            sourceContainerId: session.sourceContainerId,
+        });
+        if (!placement ||
+            isSameSortablePlacement(placement, session.sourceSortablePlacement)) {
+            return undefined;
+        }
+        return placement;
+    }
+    createDragState(session) {
+        return {
+            draggableId: session.draggableId,
+            group: session.group,
+            sourceRect: session.sourceRect,
+            startPointerPosition: session.startPointerPosition,
+            pointerPosition: session.pointerPosition,
+        };
+    }
+    getLifecycleDropTargetRect(dropTargetId) {
+        if (this.lifecycleDropTargetRectSnapshot?.has(dropTargetId)) {
+            return this.lifecycleDropTargetRectSnapshot.get(dropTargetId) ?? null;
+        }
+        return this.getDropTargetRect(dropTargetId);
+    }
+    createLifecycleDropTargetRectSnapshot(input) {
+        const dropTargetIds = new Set([input.session.draggableId]);
+        if (input.dropTargetId) {
+            dropTargetIds.add(input.dropTargetId);
+        }
+        if (dropTargetIds.size === 0) {
+            return null;
+        }
+        const snapshot = new Map();
+        for (const dropTargetId of dropTargetIds) {
+            const registration = this.dropTargetRegistry.getDropTargetRegistration(dropTargetId, input.session.group);
+            snapshot.set(dropTargetId, registration ? measureDomElement(registration.element) : null);
+        }
+        return snapshot;
+    }
+    getActiveDropTargetId(input) {
+        const session = this.getDraggingSession();
+        if (!session) {
+            return null;
+        }
+        const activeTarget = this.targetingAlgorithm({
+            pointerPosition: input.pointerPosition,
+            overlayRect: input.overlayRect,
+            dropTargets: this.getAvailableDropTargets({
+                group: session.group,
+                draggingDraggableId: session.draggableId,
+                activeDropTargetId: session.activeDropTargetId,
+                sourceContainerId: session.sourceContainerId,
+                pointerPosition: input.pointerPosition,
+                overlayRect: input.overlayRect,
+            }),
+        });
+        return activeTarget?.dropTargetId ?? null;
+    }
+    getSortablePlacementPosition(input) {
+        if (this.targetingAlgorithm.mode === "rect" && input.overlayRect) {
+            return getRectCenter(input.overlayRect);
+        }
+        return input.pointerPosition;
+    }
+    getAvailableDropTargets(input) {
+        return this.dropTargetRegistry.getAvailableDropTargets({
+            group: input.group,
+            draggingDraggableId: input.draggingDraggableId,
+            activeDropTargetId: input.activeDropTargetId,
+            sourceContainerId: input.sourceContainerId,
+            pointerPosition: input.pointerPosition,
+            overlayRect: input.overlayRect,
+            targetingAlgorithmKind: getBuiltInTargetingAlgorithmKind(this.targetingAlgorithm),
+            targetingConstraint: this.targetingConstraint,
+        });
+    }
+    getCurrentDragRectAt(pointerPosition) {
+        const session = this.getDraggingSession();
+        if (!session) {
+            return null;
+        }
+        return getOverlayRect({
+            sourceRect: session.sourceRect,
+            initialPointerPosition: session.startPointerPosition,
+            pointerPosition,
+            overlayMeasurement: session.overlayMeasurement,
+        });
+    }
+    removeDisconnectedDropTargets(group) {
+        const removedTargets = this.dropTargetRegistry.pruneDisconnected(group);
+        this.clearActiveDropTargetIdIfRemoved(removedTargets);
+    }
+    pruneDisconnectedBindingCleanupRecords(skipRecord) {
+        for (const storedRecord of Array.from(this.bindingCleanupRecords)) {
+            if (storedRecord === skipRecord) {
+                continue;
+            }
+            if (storedRecord.record.isConnected()) {
+                storedRecord.hasBeenConnected = true;
+                continue;
+            }
+            if (!storedRecord.hasBeenConnected) {
+                continue;
+            }
+            this.bindingCleanupRecords.delete(storedRecord);
+            storedRecord.record.cleanup();
+        }
+    }
+    disposeBindingCleanupRecords() {
+        for (const storedRecord of Array.from(this.bindingCleanupRecords)) {
+            this.bindingCleanupRecords.delete(storedRecord);
+            storedRecord.record.cleanup();
+        }
+    }
+    clearActiveDropTargetIdIfRemoved(removedTargets) {
+        if (this.session.status !== "dragging") {
+            return;
+        }
+        const session = this.session;
+        const removedActiveTarget = removedTargets.some((removedTarget) => removedTarget.id === session.activeDropTargetId &&
+            removedTarget.group === session.group);
+        if (!removedActiveTarget) {
+            return;
+        }
+        this.setSession({
+            ...session,
+            activeDropTargetId: null,
+        });
+    }
+    notifyDragStart(event, subscriptionEvent) {
+        this.lifecycleCallbacks.onDragStart?.(event, this.lifecycleHelpers);
+        for (const subscription of Array.from(this.subscriptions)) {
+            subscription.onDragStart?.(subscriptionEvent);
+        }
+    }
+    notifyDragUpdate(event, subscriptionEvent) {
+        this.lifecycleCallbacks.onDragUpdate?.(event, this.lifecycleHelpers);
+        for (const subscription of Array.from(this.subscriptions)) {
+            subscription.onDragUpdate?.(subscriptionEvent);
+        }
+    }
+    notifyDragEnd(event) {
+        for (const subscription of Array.from(this.subscriptions)) {
+            subscription.onDragEnd?.(event);
+        }
+        this.lifecycleCallbacks.onDragEnd?.(event, this.lifecycleHelpers);
+    }
+    notifyDrop(event) {
+        for (const subscription of Array.from(this.subscriptions)) {
+            subscription.onDrop?.(event);
+        }
+        this.lifecycleCallbacks.onDrop?.(event, this.lifecycleHelpers);
+    }
+}
+function areOverlayMeasurementsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (!previous || !next) {
+        return false;
+    }
+    return (areNearlyEqual(previous.offsetX, next.offsetX) &&
+        areNearlyEqual(previous.offsetY, next.offsetY) &&
+        areNearlyEqual(previous.width, next.width) &&
+        areNearlyEqual(previous.height, next.height));
+}
+function areNearlyEqual(a, b) {
+    return Math.abs(a - b) < 0.5;
+}
+function getRectCenter(rect) {
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+    };
+}
+export function createDragRuntime(options) {
+    return new DragRuntime(options);
+}
+function isSameSortablePlacement(placement, sourcePlacement) {
+    if (sourcePlacement === null ||
+        placement.containerId !== sourcePlacement.containerId ||
+        placement.previousDraggableId !== sourcePlacement.previousDraggableId ||
+        placement.nextDraggableId !== sourcePlacement.nextDraggableId) {
+        return false;
+    }
+    if (placement.targetDraggableId === null || placement.side === null) {
+        return true;
+    }
+    return sourcePlacement.exactAnchors.some((anchor) => anchor.targetDraggableId === placement.targetDraggableId &&
+        anchor.side === placement.side);
+}