@mk-drag-and-drop/dom 0.1.0

package/dist/runtime/lifecycle.d.ts

@@ -0,0 +1,44 @@
+import type { DragPoint, DragRect } from "../geometry/rects.js";
+import type { SortableDropPlacement } from "./drop-target-registry.js";
+export type DragSource = "pointer" | "keyboard";
+export type DragEndResult = "dropped" | "no-target" | "invalid-target" | "canceled";
+export type DragStartEvent = {
+    draggableId: string;
+    source: DragSource;
+    pointerPosition: DragPoint;
+    sourceRect: DragRect;
+};
+export type DragUpdateEvent = {
+    draggableId: string;
+    source: DragSource;
+    pointerPosition: DragPoint;
+    activeDropTargetId: string | null;
+    previousDropTargetId: string | null;
+};
+export type DragEndEvent = {
+    draggableId: string;
+    source: DragSource;
+    result: DragEndResult;
+    dropTargetId: string | null;
+};
+export type DropEvent = {
+    draggableId: string;
+    source: DragSource;
+    dropTargetId: string;
+    sortablePlacement?: SortableDropPlacement;
+};
+export type DragLifecycleHelpers = {
+    getDropTargetRect: (dropTargetId: string) => DragRect | null;
+};
+export type DragLifecycleCallbacks = {
+    onDragStart?: (event: DragStartEvent, helpers: DragLifecycleHelpers) => void;
+    onDragUpdate?: (event: DragUpdateEvent, helpers: DragLifecycleHelpers) => void;
+    onDragEnd?: (event: DragEndEvent, helpers: DragLifecycleHelpers) => void;
+    onDrop?: (event: DropEvent, helpers: DragLifecycleHelpers) => void;
+};
+export type DragRuntimeSubscription = {
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragUpdate?: (event: DragUpdateEvent) => void;
+    onDragEnd?: (event: DragEndEvent) => void;
+    onDrop?: (event: DropEvent) => void;
+};

package/dist/runtime/lifecycle.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/types.d.ts

@@ -0,0 +1,65 @@
+import type { DragPoint, DragRect } from "../geometry/rects.js";
+import type { KeyboardConfiguration, PointerConfiguration } from "../input/config.js";
+import type { DragModifierInput } from "../modifiers/types.js";
+import type { TargetingAlgorithm, TargetingConstraint } from "../targeting/types.js";
+import type { DragLifecycleCallbacks } from "./lifecycle.js";
+import type { KeyboardDragStartInput } from "../input/keyboard-drag.js";
+import type { PointerDragActivationRequest } from "../input/pointer-activation.js";
+import type { DragGroup } from "./drop-target-registry.js";
+export type Point = DragPoint;
+export type DragState = {
+    draggableId: string;
+    group: DragGroup;
+    sourceRect: DragRect;
+    startPointerPosition: Point;
+    pointerPosition: Point;
+};
+export type DragOverlayPhase = "dragging" | "released";
+export type DragOverlayRenderState = {
+    dragState: DragState;
+    phase: DragOverlayPhase;
+};
+export type DragOverlayHostUpdate = {
+    type: "mount";
+    state: DragOverlayRenderState;
+} | {
+    type: "move";
+    dragState: DragState;
+} | {
+    type: "release";
+    state: DragOverlayRenderState;
+} | {
+    type: "unmount";
+};
+export type RequestDragStartInput = PointerDragActivationRequest;
+type BaseStartDragInput = {
+    draggableId: string;
+    group: DragGroup;
+    pointerPosition: Point;
+    sourceRect: DragRect;
+};
+export type StartDragInput = (BaseStartDragInput & {
+    inputType: "pointer";
+    pointerId: number;
+}) | (BaseStartDragInput & {
+    inputType: "keyboard";
+});
+export type RequestKeyboardDragStartInput = KeyboardDragStartInput;
+export type DragRuntimeOptions = {
+    updateOverlayHost?: (update: DragOverlayHostUpdate) => void;
+    targetingAlgorithm?: TargetingAlgorithm;
+    targetingConstraint?: TargetingConstraint;
+    hasDragOverlay?: boolean;
+    keepOverlayOnDrop?: boolean;
+};
+export type DragRuntimeConfigureInput = {
+    targetingAlgorithm: TargetingAlgorithm;
+    targetingConstraint: TargetingConstraint | undefined;
+    hasDragOverlay: boolean;
+    keepOverlayOnDrop: boolean;
+    lifecycleCallbacks: DragLifecycleCallbacks;
+    keyboardConfiguration?: KeyboardConfiguration;
+    modifiers?: readonly DragModifierInput[];
+    pointerConfiguration?: PointerConfiguration;
+};
+export {};

package/dist/runtime/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { DragController } from "../controller/create-drag-controller.js";
+import type { SortableOptions } from "./sortable-options.js";
+export type CreateSortableInput = SortableOptions & {
+    controller: DragController;
+    element: HTMLElement;
+    draggableId: string;
+    group?: string;
+    containerId?: string | null;
+};
+export declare function createSortable(input: CreateSortableInput): void;

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

@@ -0,0 +1,58 @@
+import { getControllerRuntime } from "../controller/controller-internals.js";
+import { createDomSortable } from "./create-sortable.js";
+const defaultSortableGroup = "default";
+export function createSortable(input) {
+    const elementRef = new WeakRef(input.element);
+    const runtime = getControllerRuntime(input.controller);
+    const behavior = createDomSortable({
+        runtime,
+        draggableId: input.draggableId,
+        group: input.group ?? defaultSortableGroup,
+        containerId: input.containerId ?? null,
+        axis: input.axis,
+        placementBoundary: input.placementBoundary,
+        getElement: () => elementRef.deref() ?? null,
+    });
+    const hadPreviousTabIndex = input.element.hasAttribute("tabindex");
+    const previousTabIndex = input.element.getAttribute("tabindex");
+    let keyDownAttached = false;
+    let cleanedUp = false;
+    const onPointerDown = (event) => {
+        behavior.onPointerDown(event);
+    };
+    const onKeyDown = (event) => {
+        behavior.onKeyDown(event);
+    };
+    behavior.setElement(input.element);
+    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 (hadPreviousTabIndex) {
+                element.setAttribute("tabindex", previousTabIndex ?? "");
+            }
+            else {
+                element.removeAttribute("tabindex");
+            }
+        }
+        behavior.cleanup();
+    };
+    runtime.registerBindingCleanup({
+        cleanup,
+        isConnected: () => elementRef.deref()?.isConnected === true,
+    });
+}

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

@@ -0,0 +1,19 @@
+import { type DomDraggableKeyDownEvent, type DomDraggablePointerDownEvent } from "../draggable/create-draggable.js";
+import { type DomSortableRuntime } from "./sortable-registry.js";
+import type { SortableOptions } from "./sortable-options.js";
+export type CreateDomSortableInput = SortableOptions & {
+    runtime: DomSortableRuntime;
+    draggableId: string;
+    group?: string;
+    containerId?: string | null;
+    getElement: () => HTMLElement | null;
+    keyboardDragEnabled?: boolean;
+};
+export type DomSortableBehavior = {
+    setElement: (element: HTMLElement | null) => void;
+    cleanup: () => void;
+    onPointerDown: (event: DomDraggablePointerDownEvent) => void;
+    onKeyDown: (event: DomDraggableKeyDownEvent) => void;
+    tabIndex: 0 | undefined;
+};
+export declare function createDomSortable(input: CreateDomSortableInput): DomSortableBehavior;

package/dist/sortable/create-sortable.js

@@ -0,0 +1,55 @@
+import { createDomDraggable, } from "../draggable/create-draggable.js";
+import { getSortableRegistry, registerSortableElement, unregisterSortableElement, } from "./sortable-registry.js";
+const defaultSortableGroup = "default";
+export function createDomSortable(input) {
+    const group = input.group ?? defaultSortableGroup;
+    const registry = getSortableRegistry(input.runtime);
+    const draggable = createDomDraggable({
+        runtime: input.runtime,
+        draggableId: input.draggableId,
+        group,
+        getElement: input.getElement,
+        keyboardDragEnabled: input.keyboardDragEnabled,
+    });
+    let registeredElementRef = null;
+    let registeredDraggableId = null;
+    const cleanup = () => {
+        const registeredElement = registeredElementRef?.deref() ?? null;
+        unregisterSortableElement({
+            registry,
+            runtime: input.runtime,
+            draggableId: registeredDraggableId,
+            element: registeredElement,
+        });
+        registeredElementRef = null;
+        registeredDraggableId = null;
+    };
+    return {
+        setElement: (element) => {
+            const registeredElement = registeredElementRef?.deref() ?? null;
+            if (element === registeredElement &&
+                registeredDraggableId === input.draggableId) {
+                return;
+            }
+            cleanup();
+            if (!element) {
+                return;
+            }
+            registerSortableElement({
+                registry,
+                runtime: input.runtime,
+                draggableId: input.draggableId,
+                group,
+                containerId: input.containerId ?? null,
+                element,
+                options: input,
+            });
+            registeredElementRef = new WeakRef(element);
+            registeredDraggableId = input.draggableId;
+        },
+        cleanup,
+        onPointerDown: draggable.onPointerDown,
+        onKeyDown: draggable.onKeyDown,
+        tabIndex: draggable.tabIndex,
+    };
+}

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

@@ -0,0 +1,17 @@
+export type SortableAxis = "vertical" | "horizontal";
+export type SortablePlacementBoundary = {
+    start?: number;
+    end?: number;
+};
+export type SortableOptions = {
+    axis?: SortableAxis;
+    placementBoundary?: SortablePlacementBoundary;
+};
+export type NormalizedSortableOptions = {
+    axis: SortableAxis;
+    placementBoundary: {
+        start: number;
+        end: number;
+    };
+};
+export declare function normalizeSortableOptions(options: SortableOptions | undefined): NormalizedSortableOptions;

package/dist/sortable/sortable-options.js

@@ -0,0 +1,20 @@
+const defaultSortableAxis = "vertical";
+const defaultPlacementBoundary = {
+    start: 0.25,
+    end: 0.75,
+};
+export function normalizeSortableOptions(options) {
+    return {
+        axis: options?.axis === "horizontal" ? "horizontal" : defaultSortableAxis,
+        placementBoundary: {
+            start: normalizeBoundaryRatio(options?.placementBoundary?.start, defaultPlacementBoundary.start),
+            end: normalizeBoundaryRatio(options?.placementBoundary?.end, defaultPlacementBoundary.end),
+        },
+    };
+}
+function normalizeBoundaryRatio(value, defaultValue) {
+    if (value === undefined || !Number.isFinite(value)) {
+        return defaultValue;
+    }
+    return Math.min(1, Math.max(0, value));
+}

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

@@ -0,0 +1,79 @@
+import type { DomSortableRuntime, SortableRegistry } from "./sortable-registry.js";
+import type { NormalizedSortableOptions, SortableAxis } from "./sortable-options.js";
+export type SortablePlacementSide = "before" | "after";
+export type SortableAxisMovementDirection = "forward" | "backward" | "none";
+export type SortablePointerMovementState = {
+    previousPointerPosition: {
+        x: number;
+        y: number;
+    };
+};
+export type SortablePreviewPlacementState = {
+    activeDropTargetId: string | null;
+    placement: SortablePlacementSide | null;
+    movementDirection: SortableAxisMovementDirection;
+};
+export type SortablePreviewPlacementDecision = {
+    placement: SortablePlacementSide;
+    movementDirection: SortableAxisMovementDirection;
+};
+export declare function snapshotSortableElement(registry: SortableRegistry, draggableId: string): void;
+export declare function isSortablePreviewTarget(input: {
+    activeDropTargetId: string | null;
+}): boolean;
+export declare function initializeSortablePointerMovement(registry: SortableRegistry, pointerPosition: {
+    x: number;
+    y: number;
+}): void;
+export declare function updateSortablePointerMovement(registry: SortableRegistry, pointerPosition: {
+    x: number;
+    y: number;
+}): void;
+export declare function clearSortablePointerMovement(registry: SortableRegistry): void;
+export declare function clearSortablePreviewPlacement(registry: SortableRegistry): void;
+export declare function moveSortablePreview(input: {
+    registry: SortableRegistry;
+    runtime: DomSortableRuntime;
+    draggedDraggableId: string;
+    activeDropTargetId: string | null;
+    pointerPosition: {
+        x: number;
+        y: number;
+    };
+    placementPosition: {
+        x: number;
+        y: number;
+    };
+    options: NormalizedSortableOptions;
+}): void;
+export declare function getSortablePreviewPlacement(input: {
+    activeDropTargetId: string;
+    targetElement: HTMLElement;
+    placementPosition: {
+        x: number;
+        y: number;
+    };
+    movement: SortablePointerMovementState | null;
+    previewPlacement: SortablePreviewPlacementState | null;
+    options: NormalizedSortableOptions;
+}): SortablePreviewPlacementDecision;
+export declare function isSortablePreviewAlreadyPlaced(input: {
+    draggedElement: HTMLElement;
+    targetElement: HTMLElement;
+    placement: SortablePlacementSide;
+}): boolean;
+export declare function restoreSortableSnapshot(registry: SortableRegistry, draggableId: string): boolean;
+export declare function clearSortableDraggedState(registry: SortableRegistry, draggableId: string): void;
+export declare function getAxisPosition(pointerPosition: {
+    x: number;
+    y: number;
+}, axis: SortableAxis): number;
+export declare function getAxisMovementDirection(previousAxisPosition: number, currentAxisPosition: number): SortableAxisMovementDirection;
+export declare function getPlacementBoundary(input: {
+    targetRect: DOMRect;
+    axis: SortableAxis;
+    direction: SortableAxisMovementDirection;
+    startRatio: number;
+    endRatio: number;
+}): number;
+export declare function getPlacementSideFromBoundary(axisPosition: number, boundary: number): SortablePlacementSide;