@mk-drag-and-drop/dom 0.1.0

package/dist/controller/create-drag-controller.js

@@ -0,0 +1,232 @@
+import { rectToDragRect } from "../geometry/rects.js";
+import { createDragRuntimeHandle } from "../runtime/drag-runtime-handle.js";
+import { pointerToCenter } from "../targeting/algorithms.js";
+import { setControllerRuntime } from "./controller-internals.js";
+export function createDragController(options = {}) {
+    let currentOptions = options;
+    let overlayWrapper = null;
+    let overlayElement = null;
+    let overlayResizeObserver = null;
+    let liveRegion = null;
+    let lastAnnouncement = null;
+    let disposed = false;
+    const runtime = createDragRuntimeHandle({
+        updateOverlayHost,
+        targetingAlgorithm: options.targetingAlgorithm ?? pointerToCenter,
+        targetingConstraint: options.targetingConstraint,
+        hasDragOverlay: hasDragOverlay(options),
+        keepOverlayOnDrop: options.keepOverlayOnDrop ?? false,
+    });
+    configureRuntime(options);
+    syncLiveRegion();
+    const controller = {
+        update: (nextOptions) => {
+            if (disposed) {
+                return;
+            }
+            currentOptions = nextOptions;
+            configureRuntime(nextOptions);
+            syncLiveRegion();
+            if (!hasDragOverlay(nextOptions)) {
+                removeOverlay();
+            }
+        },
+        cleanup: () => {
+            if (disposed) {
+                return;
+            }
+            runtime.cleanup();
+            removeOverlay();
+        },
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            runtime.dispose();
+            removeOverlay();
+            removeLiveRegion();
+            disposed = true;
+        },
+        finishOverlay,
+        remeasureDropTargets: (input) => {
+            runtime.remeasureDropTargets(input);
+        },
+    };
+    setControllerRuntime(controller, runtime);
+    return controller;
+    function configureRuntime(nextOptions) {
+        runtime.configure({
+            targetingAlgorithm: nextOptions.targetingAlgorithm ?? pointerToCenter,
+            targetingConstraint: nextOptions.targetingConstraint,
+            hasDragOverlay: hasDragOverlay(nextOptions),
+            keepOverlayOnDrop: nextOptions.keepOverlayOnDrop ?? false,
+            lifecycleCallbacks: createLifecycleCallbacks(nextOptions),
+            keyboardConfiguration: nextOptions.keyboardConfiguration,
+            modifiers: nextOptions.modifiers,
+            pointerConfiguration: nextOptions.pointerConfiguration,
+        });
+    }
+    function createLifecycleCallbacks(nextOptions) {
+        return {
+            onDragStart: (event, helpers) => {
+                nextOptions.onDragStart?.(event, helpers);
+                announce(nextOptions.announcements?.onDragStart?.(event));
+            },
+            onDragUpdate: (event, helpers) => {
+                nextOptions.onDragUpdate?.(event, helpers);
+                if (event.activeDropTargetId !== event.previousDropTargetId) {
+                    announce(nextOptions.announcements?.onDragUpdate?.(event));
+                }
+            },
+            onDragEnd: (event, helpers) => {
+                nextOptions.onDragEnd?.(event, helpers);
+                announce(nextOptions.announcements?.onDragEnd?.(event));
+            },
+            onDrop: (event, helpers) => {
+                nextOptions.onDrop?.(event, helpers);
+                announce(nextOptions.announcements?.onDrop?.(event));
+            },
+        };
+    }
+    function updateOverlayHost(update) {
+        if (disposed) {
+            removeOverlay();
+            return;
+        }
+        if (update.type === "mount" || update.type === "release") {
+            mountOverlay(update.state);
+            return;
+        }
+        if (update.type === "move") {
+            moveOverlay(update.dragState);
+            return;
+        }
+        removeOverlay();
+    }
+    function mountOverlay(overlayState) {
+        if (!currentOptions.dragOverlay) {
+            removeOverlay();
+            return;
+        }
+        const nextOverlayElement = currentOptions.dragOverlay({
+            dragState: overlayState.dragState,
+            phase: overlayState.phase,
+            finish: finishOverlay,
+        });
+        if (!nextOverlayElement) {
+            removeOverlay();
+            return;
+        }
+        const wrapper = getOverlayWrapper(currentOptions.overlayRoot ?? document.body);
+        styleOverlayWrapper(wrapper, overlayState.dragState);
+        wrapper.replaceChildren(nextOverlayElement);
+        setOverlayElement(nextOverlayElement);
+    }
+    function moveOverlay(dragState) {
+        if (!overlayWrapper) {
+            return;
+        }
+        overlayWrapper.style.transform = getOverlayTransform(dragState);
+    }
+    function styleOverlayWrapper(wrapper, dragState) {
+        wrapper.style.position = "fixed";
+        wrapper.style.left = `${dragState.sourceRect.left}px`;
+        wrapper.style.top = `${dragState.sourceRect.top}px`;
+        wrapper.style.width = `${dragState.sourceRect.width}px`;
+        wrapper.style.height = `${dragState.sourceRect.height}px`;
+        wrapper.style.transform = getOverlayTransform(dragState);
+        wrapper.style.pointerEvents = "none";
+        wrapper.style.zIndex = "9999";
+    }
+    function getOverlayTransform(dragState) {
+        const deltaX = dragState.pointerPosition.x - dragState.startPointerPosition.x;
+        const deltaY = dragState.pointerPosition.y - dragState.startPointerPosition.y;
+        return `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+    }
+    function setOverlayElement(nextOverlayElement) {
+        disconnectOverlayResizeObserver();
+        overlayElement = nextOverlayElement;
+        measureOverlayElement();
+        if (typeof ResizeObserver === "undefined") {
+            return;
+        }
+        overlayResizeObserver = new ResizeObserver(() => {
+            measureOverlayElement();
+        });
+        overlayResizeObserver.observe(nextOverlayElement);
+    }
+    function measureOverlayElement() {
+        if (!overlayElement?.isConnected) {
+            return;
+        }
+        runtime.setOverlayRect(rectToDragRect(overlayElement.getBoundingClientRect()));
+    }
+    function disconnectOverlayResizeObserver() {
+        overlayResizeObserver?.disconnect();
+        overlayResizeObserver = null;
+    }
+    function getOverlayWrapper(overlayRoot) {
+        if (!overlayWrapper) {
+            overlayWrapper = document.createElement("div");
+        }
+        if (overlayWrapper.parentElement !== overlayRoot) {
+            overlayRoot.append(overlayWrapper);
+        }
+        return overlayWrapper;
+    }
+    function finishOverlay() {
+        if (disposed) {
+            return;
+        }
+        removeOverlay();
+    }
+    function removeOverlay() {
+        disconnectOverlayResizeObserver();
+        overlayElement = null;
+        runtime.setOverlayRect(null);
+        overlayWrapper?.remove();
+        overlayWrapper = null;
+    }
+    function syncLiveRegion() {
+        if (currentOptions.announcements) {
+            ensureLiveRegion();
+            return;
+        }
+        removeLiveRegion();
+    }
+    function ensureLiveRegion() {
+        if (!liveRegion) {
+            liveRegion = document.createElement("div");
+            liveRegion.setAttribute("aria-live", "polite");
+            liveRegion.setAttribute("aria-atomic", "true");
+            liveRegion.style.position = "absolute";
+            liveRegion.style.width = "1px";
+            liveRegion.style.height = "1px";
+            liveRegion.style.padding = "0";
+            liveRegion.style.margin = "-1px";
+            liveRegion.style.overflow = "hidden";
+            liveRegion.style.clip = "rect(0 0 0 0)";
+            liveRegion.style.whiteSpace = "nowrap";
+            liveRegion.style.border = "0";
+            document.body.append(liveRegion);
+        }
+        return liveRegion;
+    }
+    function announce(message) {
+        if (!message ||
+            message === lastAnnouncement ||
+            !currentOptions.announcements) {
+            return;
+        }
+        lastAnnouncement = message;
+        ensureLiveRegion().textContent = message;
+    }
+    function removeLiveRegion() {
+        lastAnnouncement = null;
+        liveRegion?.remove();
+        liveRegion = null;
+    }
+}
+function hasDragOverlay(options) {
+    return options.dragOverlay !== undefined;
+}

package/dist/draggable/create-draggable-binding.d.ts

@@ -0,0 +1,8 @@
+import type { DragController } from "../controller/create-drag-controller.js";
+export type CreateDraggableInput = {
+    controller: DragController;
+    element: HTMLElement;
+    draggableId: string;
+    group?: string;
+};
+export declare function createDraggable(input: CreateDraggableInput): void;

package/dist/draggable/create-draggable-binding.js

@@ -0,0 +1,52 @@
+import { getControllerRuntime } from "../controller/controller-internals.js";
+import { createDomDraggable } from "./create-draggable.js";
+const defaultDraggableGroup = "default";
+export function createDraggable(input) {
+    const elementRef = new WeakRef(input.element);
+    const runtime = getControllerRuntime(input.controller);
+    const behavior = createDomDraggable({
+        runtime,
+        draggableId: input.draggableId,
+        group: input.group ?? defaultDraggableGroup,
+        getElement: () => elementRef.deref() ?? null,
+    });
+    const previousTabIndex = input.element.getAttribute("tabindex");
+    let keyDownAttached = false;
+    let cleanedUp = false;
+    const onPointerDown = (event) => {
+        behavior.onPointerDown(event);
+    };
+    const onKeyDown = (event) => {
+        behavior.onKeyDown(event);
+    };
+    input.element.addEventListener("pointerdown", onPointerDown);
+    if (behavior.tabIndex !== undefined) {
+        input.element.tabIndex = behavior.tabIndex;
+        input.element.addEventListener("keydown", onKeyDown);
+        keyDownAttached = true;
+    }
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        const element = elementRef.deref();
+        if (!element) {
+            return;
+        }
+        element.removeEventListener("pointerdown", onPointerDown);
+        if (keyDownAttached) {
+            element.removeEventListener("keydown", onKeyDown);
+            if (previousTabIndex === null) {
+                element.removeAttribute("tabindex");
+            }
+            else {
+                element.setAttribute("tabindex", previousTabIndex);
+            }
+        }
+    };
+    runtime.registerBindingCleanup({
+        cleanup,
+        isConnected: () => elementRef.deref()?.isConnected === true,
+    });
+}

package/dist/draggable/create-draggable.d.ts

@@ -0,0 +1,46 @@
+import type { DragPoint } from "../geometry/rects.js";
+export type DomDraggableRuntime = {
+    requestDragStart: (input: {
+        draggableId: string;
+        group: string;
+        element: HTMLElement;
+        pointerId: number;
+        pointerPosition: DragPoint;
+    }) => void;
+    isKeyboardDragEnabled: () => boolean;
+    handleSourceKeyboardKeyDown: (input: {
+        draggableId: string;
+        group: string;
+        element: HTMLElement;
+        key: string;
+    }) => boolean;
+};
+export type CreateDomDraggableInput = {
+    runtime: DomDraggableRuntime;
+    draggableId: string;
+    group: string;
+    getElement: () => HTMLElement | null;
+    keyboardDragEnabled?: boolean;
+};
+export type DomDraggablePointerDownEvent = {
+    target: EventTarget | null;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    pointerId: number;
+    button?: number;
+    isPrimary?: boolean;
+    clientX: number;
+    clientY: number;
+};
+export type DomDraggableKeyDownEvent = {
+    target: EventTarget | null;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    key: string;
+};
+export type DomDraggableBehavior = {
+    onPointerDown: (event: DomDraggablePointerDownEvent) => void;
+    onKeyDown: (event: DomDraggableKeyDownEvent) => void;
+    tabIndex: 0 | undefined;
+};
+export declare function createDomDraggable(input: CreateDomDraggableInput): DomDraggableBehavior;

package/dist/draggable/create-draggable.js

@@ -0,0 +1,57 @@
+import { shouldHandleKeyboardDragFromTarget, shouldStartDragFromTarget, } from "../input/drag-handle.js";
+export function createDomDraggable(input) {
+    return {
+        onPointerDown: (event) => {
+            const element = input.getElement();
+            if (!element) {
+                return;
+            }
+            if (!shouldStartDragFromTarget({
+                draggableElement: element,
+                eventTarget: event.target,
+            })) {
+                return;
+            }
+            if (event.isPrimary === false ||
+                (event.button !== undefined && event.button !== 0)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            input.runtime.requestDragStart({
+                draggableId: input.draggableId,
+                group: input.group,
+                element,
+                pointerId: event.pointerId,
+                pointerPosition: {
+                    x: event.clientX,
+                    y: event.clientY,
+                },
+            });
+        },
+        onKeyDown: (event) => {
+            const element = input.getElement();
+            if (!element ||
+                !shouldHandleKeyboardDragFromTarget({
+                    draggableElement: element,
+                    eventTarget: event.target,
+                })) {
+                return;
+            }
+            const handled = input.runtime.handleSourceKeyboardKeyDown({
+                draggableId: input.draggableId,
+                group: input.group,
+                element,
+                key: event.key,
+            });
+            if (!handled) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        tabIndex: (input.keyboardDragEnabled ?? input.runtime.isKeyboardDragEnabled())
+            ? 0
+            : undefined,
+    };
+}

package/dist/droppable/create-drop-container-binding.d.ts

@@ -0,0 +1,8 @@
+import type { DragController } from "../controller/create-drag-controller.js";
+export type CreateDropContainerInput = {
+    controller: DragController;
+    element: HTMLElement;
+    containerId: string;
+    group?: string;
+};
+export declare function createDropContainer(input: CreateDropContainerInput): void;

package/dist/droppable/create-drop-container-binding.js

@@ -0,0 +1,28 @@
+import { getControllerRuntime } from "../controller/controller-internals.js";
+import { createDomDropContainer } from "./create-drop-container.js";
+const defaultDropContainerGroup = "default";
+export function createDropContainer(input) {
+    const elementRef = new WeakRef(input.element);
+    const runtime = getControllerRuntime(input.controller);
+    const behavior = createDomDropContainer({
+        runtime,
+        containerId: input.containerId,
+        group: input.group ?? defaultDropContainerGroup,
+        getElement: () => elementRef.deref() ?? null,
+    });
+    let cleanedUp = false;
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        if (!elementRef.deref()) {
+            return;
+        }
+        behavior.cleanup();
+    };
+    runtime.registerBindingCleanup({
+        cleanup,
+        isConnected: () => elementRef.deref()?.isConnected === true,
+    });
+}

package/dist/droppable/create-drop-container.d.ts

@@ -0,0 +1,18 @@
+export type DomDropContainerRuntime = {
+    registerDropContainer: (containerId: string, element: HTMLElement, group: string, options?: {
+        containerId?: string | null;
+        container?: boolean;
+    }) => void;
+    unregisterDropContainer: (containerId: string, element?: HTMLElement) => void;
+};
+export type CreateDomDropContainerInput = {
+    runtime: DomDropContainerRuntime;
+    containerId: string;
+    group: string;
+    getElement: () => HTMLElement | null;
+};
+export type DomDropContainerBehavior = {
+    setElement: (element: HTMLElement | null) => void;
+    cleanup: () => void;
+};
+export declare function createDomDropContainer(input: CreateDomDropContainerInput): DomDropContainerBehavior;

package/dist/droppable/create-drop-container.js

@@ -0,0 +1,36 @@
+export function createDomDropContainer(input) {
+    let registeredElementRef = null;
+    let registeredContainerId = null;
+    const cleanup = () => {
+        const registeredElement = registeredElementRef?.deref() ?? null;
+        if (registeredContainerId !== null) {
+            input.runtime.unregisterDropContainer(registeredContainerId, registeredElement ?? undefined);
+        }
+        registeredElementRef = null;
+        registeredContainerId = null;
+    };
+    const registerElement = (element) => {
+        input.runtime.registerDropContainer(input.containerId, element, input.group);
+        registeredElementRef = new WeakRef(element);
+        registeredContainerId = input.containerId;
+    };
+    const initialElement = input.getElement();
+    if (initialElement) {
+        registerElement(initialElement);
+    }
+    return {
+        setElement: (element) => {
+            const registeredElement = registeredElementRef?.deref() ?? null;
+            if (element === registeredElement &&
+                registeredContainerId === input.containerId) {
+                return;
+            }
+            cleanup();
+            if (!element) {
+                return;
+            }
+            registerElement(element);
+        },
+        cleanup,
+    };
+}

package/dist/droppable/create-droppable-binding.d.ts

@@ -0,0 +1,9 @@
+import type { DragController } from "../controller/create-drag-controller.js";
+export type CreateDroppableInput = {
+    controller: DragController;
+    element: HTMLElement;
+    dropTargetId: string;
+    containerId?: string | null;
+    group?: string;
+};
+export declare function createDroppable(input: CreateDroppableInput): void;

package/dist/droppable/create-droppable-binding.js

@@ -0,0 +1,29 @@
+import { getControllerRuntime } from "../controller/controller-internals.js";
+import { createDomDroppable } from "./create-droppable.js";
+const defaultDroppableGroup = "default";
+export function createDroppable(input) {
+    const elementRef = new WeakRef(input.element);
+    const runtime = getControllerRuntime(input.controller);
+    const behavior = createDomDroppable({
+        runtime,
+        dropTargetId: input.dropTargetId,
+        containerId: input.containerId ?? null,
+        group: input.group ?? defaultDroppableGroup,
+    });
+    let cleanedUp = false;
+    behavior.setElement(input.element);
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        if (!elementRef.deref()) {
+            return;
+        }
+        behavior.cleanup();
+    };
+    runtime.registerBindingCleanup({
+        cleanup,
+        isConnected: () => elementRef.deref()?.isConnected === true,
+    });
+}

package/dist/droppable/create-droppable.d.ts

@@ -0,0 +1,17 @@
+export type DomDroppableRuntime = {
+    registerDropTarget: (dropTargetId: string, element: HTMLElement, group: string, options?: {
+        containerId?: string | null;
+    }) => void;
+    unregisterDropTarget: (dropTargetId: string, element?: HTMLElement) => void;
+};
+export type CreateDomDroppableInput = {
+    runtime: DomDroppableRuntime;
+    dropTargetId: string;
+    containerId?: string | null;
+    group: string;
+};
+export type DomDroppableBehavior = {
+    setElement: (element: HTMLElement | null) => void;
+    cleanup: () => void;
+};
+export declare function createDomDroppable(input: CreateDomDroppableInput): DomDroppableBehavior;

package/dist/droppable/create-droppable.js

@@ -0,0 +1,31 @@
+export function createDomDroppable(input) {
+    let registeredElementRef = null;
+    let registeredTargetId = null;
+    const cleanup = () => {
+        const registeredElement = registeredElementRef?.deref() ?? null;
+        if (registeredTargetId !== null) {
+            input.runtime.unregisterDropTarget(registeredTargetId, registeredElement ?? undefined);
+        }
+        registeredElementRef = null;
+        registeredTargetId = null;
+    };
+    return {
+        setElement: (element) => {
+            const registeredElement = registeredElementRef?.deref() ?? null;
+            if (element === registeredElement &&
+                registeredTargetId === input.dropTargetId) {
+                return;
+            }
+            cleanup();
+            if (!element) {
+                return;
+            }
+            input.runtime.registerDropTarget(input.dropTargetId, element, input.group, {
+                containerId: input.containerId ?? null,
+            });
+            registeredElementRef = new WeakRef(element);
+            registeredTargetId = input.dropTargetId;
+        },
+        cleanup,
+    };
+}

package/dist/geometry/measurement.d.ts

@@ -0,0 +1,4 @@
+import type { DragRect } from "./rects.js";
+export declare function measureDomElement(element: HTMLElement): DragRect;
+export declare function measureDocumentRect(element: HTMLElement): DragRect;
+export declare function documentRectToViewportRect(rect: DragRect): DragRect;

package/dist/geometry/measurement.js

@@ -0,0 +1,33 @@
+import { rectToDragRect } from "./rects.js";
+export function measureDomElement(element) {
+    return rectToDragRect(element.getBoundingClientRect());
+}
+export function measureDocumentRect(element) {
+    const viewportRect = element.getBoundingClientRect();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    return {
+        x: viewportRect.x + scrollX,
+        y: viewportRect.y + scrollY,
+        top: viewportRect.top + scrollY,
+        right: viewportRect.right + scrollX,
+        bottom: viewportRect.bottom + scrollY,
+        left: viewportRect.left + scrollX,
+        width: viewportRect.width,
+        height: viewportRect.height,
+    };
+}
+export function documentRectToViewportRect(rect) {
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    return {
+        x: rect.x - scrollX,
+        y: rect.y - scrollY,
+        top: rect.top - scrollY,
+        right: rect.right - scrollX,
+        bottom: rect.bottom - scrollY,
+        left: rect.left - scrollX,
+        width: rect.width,
+        height: rect.height,
+    };
+}

package/dist/geometry/overlay.d.ts

@@ -0,0 +1,19 @@
+import type { DragPoint, DragRect } from "./rects.js";
+export type DragOverlayMeasurement = {
+    offsetX: number;
+    offsetY: number;
+    width: number;
+    height: number;
+};
+export declare function getOverlayRect(input: {
+    sourceRect: DragRect;
+    initialPointerPosition: DragPoint;
+    pointerPosition: DragPoint;
+    overlayMeasurement?: DragOverlayMeasurement | null;
+}): DragRect;
+export declare function getOverlayMeasurement(input: {
+    sourceRect: DragRect;
+    initialPointerPosition: DragPoint;
+    pointerPosition: DragPoint;
+    overlayRect: DragRect;
+}): DragOverlayMeasurement;

package/dist/geometry/overlay.js

@@ -0,0 +1,32 @@
+import { translateRect } from "./rects.js";
+export function getOverlayRect(input) {
+    const deltaX = input.pointerPosition.x - input.initialPointerPosition.x;
+    const deltaY = input.pointerPosition.y - input.initialPointerPosition.y;
+    if (input.overlayMeasurement) {
+        const left = input.sourceRect.left + deltaX + input.overlayMeasurement.offsetX;
+        const top = input.sourceRect.top + deltaY + input.overlayMeasurement.offsetY;
+        return {
+            x: left,
+            y: top,
+            left,
+            top,
+            width: input.overlayMeasurement.width,
+            height: input.overlayMeasurement.height,
+            right: left + input.overlayMeasurement.width,
+            bottom: top + input.overlayMeasurement.height,
+        };
+    }
+    return translateRect(input.sourceRect, deltaX, deltaY);
+}
+export function getOverlayMeasurement(input) {
+    const deltaX = input.pointerPosition.x - input.initialPointerPosition.x;
+    const deltaY = input.pointerPosition.y - input.initialPointerPosition.y;
+    const wrapperLeft = input.sourceRect.left + deltaX;
+    const wrapperTop = input.sourceRect.top + deltaY;
+    return {
+        offsetX: input.overlayRect.left - wrapperLeft,
+        offsetY: input.overlayRect.top - wrapperTop,
+        width: input.overlayRect.width,
+        height: input.overlayRect.height,
+    };
+}