@mk-drag-and-drop/dom 0.1.0

package/dist/geometry/rects.d.ts

@@ -0,0 +1,17 @@
+export type DragPoint = {
+    x: number;
+    y: number;
+};
+export type DragRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const emptyDragRect: DragRect;
+export declare function rectToDragRect(rect: DOMRectReadOnly): DragRect;
+export declare function translateRect(rect: DragRect, deltaX: number, deltaY: number): DragRect;

package/dist/geometry/rects.js

@@ -0,0 +1,34 @@
+export const emptyDragRect = {
+    x: 0,
+    y: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+};
+export function rectToDragRect(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export function translateRect(rect, deltaX, deltaY) {
+    return {
+        x: rect.x + deltaX,
+        y: rect.y + deltaY,
+        top: rect.top + deltaY,
+        right: rect.right + deltaX,
+        bottom: rect.bottom + deltaY,
+        left: rect.left + deltaX,
+        width: rect.width,
+        height: rect.height,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { createDragController, type DragController, type DragControllerAnnouncements, type DragControllerOptions, type DragControllerOverlayInput, } from "./controller/create-drag-controller.js";
+export { createDraggable, type CreateDraggableInput, } from "./draggable/create-draggable-binding.js";
+export { createDroppable, type CreateDroppableInput, } from "./droppable/create-droppable-binding.js";
+export { createDropContainer, type CreateDropContainerInput, } from "./droppable/create-drop-container-binding.js";
+export { createSortable, type CreateSortableInput, } from "./sortable/create-sortable-binding.js";
+export type { SortableAxis, SortablePlacementBoundary, } from "./sortable/sortable-options.js";
+export { createDragHandle, type CreateDragHandleInput, } from "./input/create-drag-handle.js";
+export type { DragEndResult, DragEndEvent, DragLifecycleCallbacks, DragLifecycleHelpers, DragSource, DragStartEvent, DragUpdateEvent, DropEvent, } from "./runtime/lifecycle.js";
+export type { RemeasureDropTargetsInput, SortableDropPlacement, } from "./runtime/drop-target-registry.js";
+export { centerToCenter, pointerToCenter, pointerToRectDistance, } from "./targeting/algorithms.js";
+export { getDistanceToRect, maxOverlayCenterDistanceToRect, maxPointerDistanceToRect, } from "./targeting/constraints.js";
+export type { DropTarget, TargetingAlgorithm, TargetingAlgorithmInput, TargetingConstraint, TargetingConstraintInput, } from "./targeting/types.js";
+export { lockToXAxis, lockToYAxis, restrictToContainer, type RestrictToContainerResolver, } from "./modifiers/built-ins.js";
+export type { DragModifier, DragModifierInput, DragModifierSetupInput, DragModifierTransformInput, } from "./modifiers/types.js";
+export type { KeyboardCommand, KeyboardConfiguration, PointerConfiguration, } from "./input/config.js";
+export type { DragPoint, DragRect } from "./geometry/rects.js";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { createDragController, } from "./controller/create-drag-controller.js";
+export { createDraggable, } from "./draggable/create-draggable-binding.js";
+export { createDroppable, } from "./droppable/create-droppable-binding.js";
+export { createDropContainer, } from "./droppable/create-drop-container-binding.js";
+export { createSortable, } from "./sortable/create-sortable-binding.js";
+export { createDragHandle, } from "./input/create-drag-handle.js";
+export { centerToCenter, pointerToCenter, pointerToRectDistance, } from "./targeting/algorithms.js";
+export { getDistanceToRect, maxOverlayCenterDistanceToRect, maxPointerDistanceToRect, } from "./targeting/constraints.js";
+export { lockToXAxis, lockToYAxis, restrictToContainer, } from "./modifiers/built-ins.js";

package/dist/input/config.d.ts

@@ -0,0 +1,35 @@
+export type PointerConfiguration = {
+    activationDelay?: number | null;
+    activationDistance?: number | null;
+};
+export type NormalizedPointerConfiguration = {
+    activationDelay: number | null;
+    activationDistance: number | null;
+};
+export type KeyboardCommand = string | readonly string[];
+export type KeyboardConfiguration = {
+    enabled?: boolean;
+    start?: KeyboardCommand;
+    drop?: KeyboardCommand;
+    cancel?: KeyboardCommand;
+    moveUp?: KeyboardCommand;
+    moveDown?: KeyboardCommand;
+    moveLeft?: KeyboardCommand;
+    moveRight?: KeyboardCommand;
+    moveDistance?: number;
+};
+export type NormalizedKeyboardConfiguration = {
+    enabled: boolean;
+    start: readonly string[];
+    drop: readonly string[];
+    cancel: readonly string[];
+    moveUp: readonly string[];
+    moveDown: readonly string[];
+    moveLeft: readonly string[];
+    moveRight: readonly string[];
+    moveDistance: number;
+};
+export declare const defaultKeyboardConfiguration: NormalizedKeyboardConfiguration;
+export declare function normalizePointerConfiguration(pointerConfiguration: PointerConfiguration | undefined): NormalizedPointerConfiguration;
+export declare function normalizeKeyboardConfiguration(keyboardConfiguration: KeyboardConfiguration | undefined): NormalizedKeyboardConfiguration;
+export declare function isKeyboardCommandMatch(key: string, command: readonly string[]): boolean;

package/dist/input/config.js

@@ -0,0 +1,56 @@
+export const defaultKeyboardConfiguration = {
+    enabled: true,
+    start: ["Space", "Enter"],
+    drop: ["Space", "Enter"],
+    cancel: ["Escape"],
+    moveUp: ["ArrowUp"],
+    moveDown: ["ArrowDown"],
+    moveLeft: ["ArrowLeft"],
+    moveRight: ["ArrowRight"],
+    moveDistance: 24,
+};
+export function normalizePointerConfiguration(pointerConfiguration) {
+    return {
+        activationDelay: normalizePointerActivationValue(pointerConfiguration?.activationDelay),
+        activationDistance: normalizePointerActivationValue(pointerConfiguration?.activationDistance),
+    };
+}
+export function normalizeKeyboardConfiguration(keyboardConfiguration) {
+    return {
+        enabled: keyboardConfiguration?.enabled ?? defaultKeyboardConfiguration.enabled,
+        start: normalizeKeyboardCommand(keyboardConfiguration?.start, defaultKeyboardConfiguration.start),
+        drop: normalizeKeyboardCommand(keyboardConfiguration?.drop, defaultKeyboardConfiguration.drop),
+        cancel: normalizeKeyboardCommand(keyboardConfiguration?.cancel, defaultKeyboardConfiguration.cancel),
+        moveUp: normalizeKeyboardCommand(keyboardConfiguration?.moveUp, defaultKeyboardConfiguration.moveUp),
+        moveDown: normalizeKeyboardCommand(keyboardConfiguration?.moveDown, defaultKeyboardConfiguration.moveDown),
+        moveLeft: normalizeKeyboardCommand(keyboardConfiguration?.moveLeft, defaultKeyboardConfiguration.moveLeft),
+        moveRight: normalizeKeyboardCommand(keyboardConfiguration?.moveRight, defaultKeyboardConfiguration.moveRight),
+        moveDistance: normalizeKeyboardMoveDistance(keyboardConfiguration?.moveDistance),
+    };
+}
+export function isKeyboardCommandMatch(key, command) {
+    return command.includes(normalizeKeyboardKey(key));
+}
+function normalizeKeyboardCommand(command, defaultCommand) {
+    const commandKeys = command === undefined
+        ? defaultCommand
+        : typeof command === "string"
+            ? [command]
+            : command;
+    return commandKeys.map(normalizeKeyboardKey);
+}
+function normalizeKeyboardKey(key) {
+    return key === " " ? "Space" : key;
+}
+function normalizeKeyboardMoveDistance(moveDistance) {
+    return typeof moveDistance === "number" &&
+        Number.isFinite(moveDistance) &&
+        moveDistance > 0
+        ? moveDistance
+        : defaultKeyboardConfiguration.moveDistance;
+}
+function normalizePointerActivationValue(value) {
+    return typeof value === "number" && Number.isFinite(value) && value > 0
+        ? value
+        : null;
+}

package/dist/input/create-drag-handle.d.ts

@@ -0,0 +1,4 @@
+export type CreateDragHandleInput = {
+    element: HTMLElement;
+};
+export declare function createDragHandle(input: CreateDragHandleInput): void;

package/dist/input/create-drag-handle.js

@@ -0,0 +1,4 @@
+import { domDragHandleAttribute } from "./drag-handle.js";
+export function createDragHandle(input) {
+    input.element.setAttribute(domDragHandleAttribute, "true");
+}

package/dist/input/drag-handle.d.ts

@@ -0,0 +1,10 @@
+export declare const domDragHandleAttribute = "data-dnd-drag-handle";
+export declare const domDragHandleSelector = "[data-dnd-drag-handle]";
+export declare function shouldStartDragFromTarget(input: {
+    draggableElement: HTMLElement;
+    eventTarget: EventTarget | null;
+}): boolean;
+export declare function shouldHandleKeyboardDragFromTarget(input: {
+    draggableElement: HTMLElement;
+    eventTarget: EventTarget | null;
+}): boolean;

package/dist/input/drag-handle.js

@@ -0,0 +1,74 @@
+export const domDragHandleAttribute = "data-dnd-drag-handle";
+export const domDragHandleSelector = `[${domDragHandleAttribute}]`;
+const interactiveElementSelector = [
+    "a[href]",
+    "button",
+    "input",
+    "option",
+    "select",
+    "textarea",
+    "[role='button']",
+    "[role='link']",
+    "[role='textbox']",
+].join(",");
+export function shouldStartDragFromTarget(input) {
+    const eventTarget = getEventTargetElement(input.eventTarget);
+    if (!eventTarget) {
+        return false;
+    }
+    const hasDragHandle = input.draggableElement.querySelector(domDragHandleSelector) !== null;
+    if (!hasDragHandle) {
+        return !isInteractiveDragTarget({
+            draggableElement: input.draggableElement,
+            eventTarget,
+        });
+    }
+    const closestDragHandle = eventTarget.closest(domDragHandleSelector);
+    return (closestDragHandle !== null &&
+        input.draggableElement.contains(closestDragHandle));
+}
+export function shouldHandleKeyboardDragFromTarget(input) {
+    const eventTarget = getEventTargetElement(input.eventTarget);
+    if (!eventTarget) {
+        return false;
+    }
+    if (isInteractiveDragTarget({
+        draggableElement: input.draggableElement,
+        eventTarget,
+    })) {
+        return false;
+    }
+    if (eventTarget === input.draggableElement) {
+        return true;
+    }
+    const closestDragHandle = eventTarget.closest(domDragHandleSelector);
+    return (closestDragHandle !== null &&
+        input.draggableElement.contains(closestDragHandle));
+}
+function getEventTargetElement(target) {
+    return target instanceof Element ? target : null;
+}
+function isInteractiveDragTarget(input) {
+    return (closestWithin(input.eventTarget, interactiveElementSelector, input.draggableElement) !== null ||
+        getEditableElement(input.eventTarget, input.draggableElement) !== null);
+}
+function closestWithin(element, selector, boundary) {
+    const closestElement = element.closest(selector);
+    return closestElement && boundary.contains(closestElement)
+        ? closestElement
+        : null;
+}
+function getEditableElement(element, boundary) {
+    let currentElement = element;
+    while (currentElement && boundary.contains(currentElement)) {
+        if (currentElement instanceof HTMLElement &&
+            currentElement.isContentEditable) {
+            return currentElement;
+        }
+        if (currentElement === boundary) {
+            return null;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}

package/dist/input/keyboard-drag.d.ts

@@ -0,0 +1,28 @@
+import { type NormalizedKeyboardConfiguration } from "./config.js";
+export type KeyboardMoveDirection = "up" | "down" | "left" | "right";
+export type KeyboardDragActiveInput = "pointer" | "keyboard";
+export type KeyboardDragStartInput = {
+    draggableId: string;
+    group: string;
+    element: HTMLElement;
+};
+export type SourceKeyboardDragKeyDownInput = KeyboardDragStartInput & {
+    key: string;
+};
+export type KeyboardDragControllerOptions = {
+    getConfiguration: () => NormalizedKeyboardConfiguration;
+    isDragging: () => boolean;
+    getActiveInput: () => KeyboardDragActiveInput | null;
+    start: (input: KeyboardDragStartInput) => void;
+    move: (direction: KeyboardMoveDirection) => void;
+    drop: () => void;
+    cancel: () => void;
+};
+export declare class KeyboardDragController {
+    private options;
+    constructor(options: KeyboardDragControllerOptions);
+    isEnabled(): boolean;
+    handleSourceKeyDown(input: SourceKeyboardDragKeyDownInput): boolean;
+    handleActiveKeyDown(key: string): boolean;
+    bindWindowListeners(): () => void;
+}

package/dist/input/keyboard-drag.js

@@ -0,0 +1,77 @@
+import { isKeyboardCommandMatch, } from "./config.js";
+export class KeyboardDragController {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    isEnabled() {
+        return this.options.getConfiguration().enabled;
+    }
+    handleSourceKeyDown(input) {
+        const configuration = this.options.getConfiguration();
+        if (!configuration.enabled) {
+            return false;
+        }
+        if (!this.options.isDragging()) {
+            if (!isKeyboardCommandMatch(input.key, configuration.start)) {
+                return false;
+            }
+            this.options.start({
+                draggableId: input.draggableId,
+                group: input.group,
+                element: input.element,
+            });
+            return true;
+        }
+        if (this.options.getActiveInput() !== "keyboard") {
+            return false;
+        }
+        return this.handleActiveKeyDown(input.key);
+    }
+    handleActiveKeyDown(key) {
+        const configuration = this.options.getConfiguration();
+        if (isKeyboardCommandMatch(key, configuration.moveUp)) {
+            this.options.move("up");
+            return true;
+        }
+        if (isKeyboardCommandMatch(key, configuration.moveDown)) {
+            this.options.move("down");
+            return true;
+        }
+        if (isKeyboardCommandMatch(key, configuration.moveLeft)) {
+            this.options.move("left");
+            return true;
+        }
+        if (isKeyboardCommandMatch(key, configuration.moveRight)) {
+            this.options.move("right");
+            return true;
+        }
+        if (isKeyboardCommandMatch(key, configuration.drop)) {
+            this.options.drop();
+            return true;
+        }
+        if (isKeyboardCommandMatch(key, configuration.cancel)) {
+            this.options.cancel();
+            return true;
+        }
+        return false;
+    }
+    bindWindowListeners() {
+        let isCleanedUp = false;
+        const handleKeyDown = (event) => {
+            if (!this.handleActiveKeyDown(event.key)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            if (isCleanedUp) {
+                return;
+            }
+            isCleanedUp = true;
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }
+}

package/dist/input/pointer-activation.d.ts

@@ -0,0 +1,31 @@
+import type { DragPoint } from "../geometry/rects.js";
+import type { NormalizedPointerConfiguration } from "./config.js";
+export type PointerDragActivationRequest = {
+    draggableId: string;
+    group: string;
+    element: HTMLElement;
+    pointerId: number;
+    pointerPosition: DragPoint;
+};
+export type ActivatedPointerDrag = {
+    draggableId: string;
+    group: string;
+    element: HTMLElement;
+    pointerId: number;
+    initialPointerPosition: DragPoint;
+    latestPointerPosition: DragPoint;
+};
+export type PointerActivationControllerOptions = {
+    getConfiguration: () => NormalizedPointerConfiguration;
+    isDragging: () => boolean;
+    startImmediately: (request: PointerDragActivationRequest) => void;
+    activate: (activation: ActivatedPointerDrag) => void;
+};
+export declare class PointerActivationController {
+    private options;
+    private pendingActivation;
+    constructor(options: PointerActivationControllerOptions);
+    request(request: PointerDragActivationRequest): void;
+    cancel(): void;
+    private activatePending;
+}

package/dist/input/pointer-activation.js

@@ -0,0 +1,97 @@
+export class PointerActivationController {
+    options;
+    pendingActivation = null;
+    constructor(options) {
+        this.options = options;
+    }
+    request(request) {
+        this.cancel();
+        if (this.options.isDragging()) {
+            return;
+        }
+        const { activationDelay, activationDistance } = this.options.getConfiguration();
+        if (activationDelay === null && activationDistance === null) {
+            this.options.startImmediately(request);
+            return;
+        }
+        const initialPointerPosition = {
+            x: request.pointerPosition.x,
+            y: request.pointerPosition.y,
+        };
+        const pendingActivation = {
+            draggableId: request.draggableId,
+            group: request.group,
+            element: request.element,
+            pointerId: request.pointerId,
+            initialPointerPosition,
+            latestPointerPosition: initialPointerPosition,
+            timeoutId: null,
+            cleanupWindowListeners: () => { },
+        };
+        const handlePointerMove = (event) => {
+            if (event.pointerId !== pendingActivation.pointerId) {
+                return;
+            }
+            const pointerPosition = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            pendingActivation.latestPointerPosition = pointerPosition;
+            if (activationDistance === null) {
+                return;
+            }
+            const distanceX = pointerPosition.x - initialPointerPosition.x;
+            const distanceY = pointerPosition.y - initialPointerPosition.y;
+            const distanceSquared = distanceX * distanceX + distanceY * distanceY;
+            const activationDistanceSquared = activationDistance * activationDistance;
+            if (distanceSquared >= activationDistanceSquared) {
+                this.activatePending(pendingActivation);
+            }
+        };
+        const handlePointerEnd = (event) => {
+            if (event.pointerId !== pendingActivation.pointerId) {
+                return;
+            }
+            this.cancel();
+        };
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerEnd);
+        window.addEventListener("pointercancel", handlePointerEnd);
+        pendingActivation.cleanupWindowListeners = () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerEnd);
+            window.removeEventListener("pointercancel", handlePointerEnd);
+        };
+        if (activationDelay !== null) {
+            pendingActivation.timeoutId = window.setTimeout(() => {
+                this.activatePending(pendingActivation);
+            }, activationDelay);
+        }
+        this.pendingActivation = pendingActivation;
+    }
+    cancel() {
+        const pendingActivation = this.pendingActivation;
+        if (!pendingActivation) {
+            return;
+        }
+        if (pendingActivation.timeoutId !== null) {
+            window.clearTimeout(pendingActivation.timeoutId);
+        }
+        pendingActivation.cleanupWindowListeners();
+        this.pendingActivation = null;
+    }
+    activatePending(pendingActivation) {
+        if (this.pendingActivation !== pendingActivation) {
+            return;
+        }
+        this.cancel();
+        this.options.activate({
+            draggableId: pendingActivation.draggableId,
+            group: pendingActivation.group,
+            element: pendingActivation.element,
+            pointerId: pendingActivation.pointerId,
+            initialPointerPosition: pendingActivation.initialPointerPosition,
+            latestPointerPosition: pendingActivation.latestPointerPosition,
+        });
+    }
+}

package/dist/integration/index.d.ts

@@ -0,0 +1,10 @@
+export { createDragRuntimeHandle, type DragRuntimeHandle, type DragRuntimeHandleConfigureInput, type DragRuntimeHandleOptions, } from "../runtime/drag-runtime-handle.js";
+export type { DragOverlayHostUpdate, DragOverlayPhase, DragOverlayRenderState, DragState, } from "../runtime/types.js";
+export type { DragRuntimeSubscription } from "../runtime/lifecycle.js";
+export { createDomDraggable, type CreateDomDraggableInput, type DomDraggableBehavior, type DomDraggableKeyDownEvent, type DomDraggablePointerDownEvent, type DomDraggableRuntime, } from "../draggable/create-draggable.js";
+export { createDomDroppable, type CreateDomDroppableInput, type DomDroppableBehavior, type DomDroppableRuntime, } from "../droppable/create-droppable.js";
+export { createDomDropContainer, type CreateDomDropContainerInput, type DomDropContainerBehavior, type DomDropContainerRuntime, } from "../droppable/create-drop-container.js";
+export { createDomSortable, type CreateDomSortableInput, type DomSortableBehavior, } from "../sortable/create-sortable.js";
+export type { DomSortableRuntime } from "../sortable/sortable-registry.js";
+export type { SortableAxis, SortablePlacementBoundary, } from "../sortable/sortable-options.js";
+export { domDragHandleAttribute } from "../input/drag-handle.js";

package/dist/integration/index.js

@@ -0,0 +1,6 @@
+export { createDragRuntimeHandle, } from "../runtime/drag-runtime-handle.js";
+export { createDomDraggable, } from "../draggable/create-draggable.js";
+export { createDomDroppable, } from "../droppable/create-droppable.js";
+export { createDomDropContainer, } from "../droppable/create-drop-container.js";
+export { createDomSortable, } from "../sortable/create-sortable.js";
+export { domDragHandleAttribute } from "../input/drag-handle.js";

package/dist/modifiers/built-ins.d.ts

@@ -0,0 +1,6 @@
+import type { DragRect } from "../geometry/rects.js";
+import type { DragModifier, DragModifierSetupInput } from "./types.js";
+export type RestrictToContainerResolver = (input: DragModifierSetupInput) => HTMLElement | null;
+export declare function lockToXAxis(): DragModifier;
+export declare function lockToYAxis(): DragModifier;
+export declare function restrictToContainer(getContainer: RestrictToContainerResolver): DragModifier<DragRect | null>;

package/dist/modifiers/built-ins.js

@@ -0,0 +1,62 @@
+import { rectToDragRect } from "../geometry/rects.js";
+export function lockToXAxis() {
+    return {
+        transform: (input) => ({
+            x: input.pointerPosition.x,
+            y: input.initialPointerPosition.y,
+        }),
+    };
+}
+export function lockToYAxis() {
+    return {
+        transform: (input) => ({
+            x: input.initialPointerPosition.x,
+            y: input.pointerPosition.y,
+        }),
+    };
+}
+export function restrictToContainer(getContainer) {
+    return {
+        setup: (input) => {
+            const container = getContainer(input);
+            return container
+                ? rectToDragRect(container.getBoundingClientRect())
+                : null;
+        },
+        transform: (input) => {
+            if (input.state === null) {
+                return input.pointerPosition;
+            }
+            return {
+                x: clampPointerAxis({
+                    pointerPosition: input.pointerPosition.x,
+                    overlayStart: input.overlayRect.left,
+                    overlayEnd: input.overlayRect.right,
+                    containerStart: input.state.left,
+                    containerEnd: input.state.right,
+                }),
+                y: clampPointerAxis({
+                    pointerPosition: input.pointerPosition.y,
+                    overlayStart: input.overlayRect.top,
+                    overlayEnd: input.overlayRect.bottom,
+                    containerStart: input.state.top,
+                    containerEnd: input.state.bottom,
+                }),
+            };
+        },
+    };
+}
+function clampPointerAxis(input) {
+    const overlaySize = input.overlayEnd - input.overlayStart;
+    const containerSize = input.containerEnd - input.containerStart;
+    if (overlaySize > containerSize) {
+        return input.pointerPosition + input.containerStart - input.overlayStart;
+    }
+    if (input.overlayStart < input.containerStart) {
+        return input.pointerPosition + input.containerStart - input.overlayStart;
+    }
+    if (input.overlayEnd > input.containerEnd) {
+        return input.pointerPosition - (input.overlayEnd - input.containerEnd);
+    }
+    return input.pointerPosition;
+}

package/dist/modifiers/pipeline.d.ts

@@ -0,0 +1,18 @@
+import type { DragPoint, DragRect } from "../geometry/rects.js";
+import { type DragOverlayMeasurement } from "../geometry/overlay.js";
+import type { ActiveDragModifier, DragModifier, DragModifierInput, DragModifierSetupInput } from "./types.js";
+export declare function createActiveModifier<State>(modifier: DragModifier<State>, setupInput: DragModifierSetupInput): ActiveDragModifier;
+export declare function createActiveModifier(modifier: DragModifierInput, setupInput: DragModifierSetupInput): ActiveDragModifier;
+export declare function createActiveDragModifiers(input: {
+    modifiers: readonly DragModifierInput[];
+    setupInput: DragModifierSetupInput;
+}): ActiveDragModifier[];
+export declare function applyDragModifiers(input: {
+    activeModifiers: readonly ActiveDragModifier[];
+    draggableId: string;
+    group: string;
+    sourceRect: DragRect;
+    initialPointerPosition: DragPoint;
+    rawPointerPosition: DragPoint;
+    overlayMeasurement?: DragOverlayMeasurement | null;
+}): DragPoint;

package/dist/modifiers/pipeline.js

@@ -0,0 +1,34 @@
+import { getOverlayRect, } from "../geometry/overlay.js";
+export function createActiveModifier(modifier, setupInput) {
+    const state = modifier.setup?.(setupInput);
+    return {
+        transform: (input) => modifier.transform({
+            ...input,
+            state,
+        }),
+    };
+}
+export function createActiveDragModifiers(input) {
+    return input.modifiers.map((modifier) => createActiveModifier(modifier, input.setupInput));
+}
+export function applyDragModifiers(input) {
+    let pointerPosition = input.rawPointerPosition;
+    for (const activeModifier of input.activeModifiers) {
+        const overlayRect = getOverlayRect({
+            sourceRect: input.sourceRect,
+            initialPointerPosition: input.initialPointerPosition,
+            pointerPosition,
+            overlayMeasurement: input.overlayMeasurement,
+        });
+        pointerPosition = activeModifier.transform({
+            draggableId: input.draggableId,
+            group: input.group,
+            sourceRect: input.sourceRect,
+            initialPointerPosition: input.initialPointerPosition,
+            rawPointerPosition: input.rawPointerPosition,
+            pointerPosition,
+            overlayRect,
+        });
+    }
+    return pointerPosition;
+}