@mk-drag-and-drop/dom 0.4.4 → 0.4.5

package/README.md

@@ -374,6 +374,10 @@ sortable axis: above or left of midpoint places before, while below or right of
 midpoint places after. Pointer-based targeting uses the pointer as that position;
 rect-based targeting such as `centerToCenter` uses the overlay center.
 
+A container-only preview keeps that cross-container entry state through active
+recomputes until the first item target in the destination list receives a
+before/after placement.
+
 `placementBoundary` is used after a preview placement already has an established
 movement direction to control same-target reversal and hysteresis thresholds. It
 does not decide the initial side for cross-container sortable entry or delay the
@@ -388,7 +392,10 @@ Modifiers transform pointer movement before drag state updates. Built-ins:
 - `restrictToContainer(resolver)`
 
 `restrictToContainer` receives a resolver function with
-`DragModifierSetupInput` and returns an `HTMLElement | null`.
+`DragModifierSetupInput` and returns an `HTMLElement | null`. The resolver runs
+at drag setup to choose the bounds element; the selected element's rect is
+remeasured during movement so growing or shrinking containers keep constraining
+against current bounds.
 
 Custom modifiers can provide:
 

package/dist/modifiers/built-ins.js

@@ -1,4 +1,5 @@
 import { rectToDragRect } from "../geometry/rects.js";
+const restrictToContainerElements = new WeakMap();
 export function lockToXAxis() {
     return {
         transform: (input) => ({
@@ -19,33 +20,43 @@ export function restrictToContainer(getContainer) {
     return {
         setup: (input) => {
             const container = getContainer(input);
-            return container
-                ? rectToDragRect(container.getBoundingClientRect())
-                : null;
+            if (!container) {
+                return null;
+            }
+            const rect = rectToDragRect(container.getBoundingClientRect());
+            restrictToContainerElements.set(rect, container);
+            return rect;
         },
         transform: (input) => {
             if (input.state === null) {
                 return input.pointerPosition;
             }
+            const containerRect = getRestrictToContainerRect(input.state);
             return {
                 x: clampPointerAxis({
                     pointerPosition: input.pointerPosition.x,
                     overlayStart: input.overlayRect.left,
                     overlayEnd: input.overlayRect.right,
-                    containerStart: input.state.left,
-                    containerEnd: input.state.right,
+                    containerStart: containerRect.left,
+                    containerEnd: containerRect.right,
                 }),
                 y: clampPointerAxis({
                     pointerPosition: input.pointerPosition.y,
                     overlayStart: input.overlayRect.top,
                     overlayEnd: input.overlayRect.bottom,
-                    containerStart: input.state.top,
-                    containerEnd: input.state.bottom,
+                    containerStart: containerRect.top,
+                    containerEnd: containerRect.bottom,
                 }),
             };
         },
     };
 }
+function getRestrictToContainerRect(state) {
+    const container = restrictToContainerElements.get(state);
+    return container
+        ? rectToDragRect(container.getBoundingClientRect())
+        : state;
+}
 function clampPointerAxis(input) {
     const overlaySize = input.overlayEnd - input.overlayStart;
     const containerSize = input.containerEnd - input.containerStart;

package/dist/runtime/drag-runtime.js

@@ -235,6 +235,7 @@ export class DragRuntime {
         this.notifyDragUpdate(updateEvent, {
             ...updateEvent,
             placementPosition: sortablePlacementPosition,
+            movementPosition: rawPointerPosition,
         });
     }
     updatePointerNowOrRelease(rawPointerPosition) {
@@ -465,6 +466,7 @@ export class DragRuntime {
                     pointerPosition: effectivePointerPosition,
                     overlayRect: startOverlayRect,
                 }),
+                movementPosition: rawPointerPosition,
             };
             this.notifyDragStartSubscriptions(dragStartSubscriptionEvent);
             this.updateOverlayHost({

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

@@ -7,6 +7,10 @@ export type SortablePointerMovementState = {
         x: number;
         y: number;
     };
+    previousPlacementPosition?: {
+        x: number;
+        y: number;
+    };
 };
 export type SortablePreviewPlacementState = {
     activeDropTargetId: string | null;
@@ -26,10 +30,16 @@ export declare function isSortablePreviewTarget(input: {
 export declare function initializeSortablePointerMovement(registry: SortableRegistry, pointerPosition: {
     x: number;
     y: number;
+}, placementPosition?: {
+    x: number;
+    y: number;
 }): void;
 export declare function updateSortablePointerMovement(registry: SortableRegistry, pointerPosition: {
     x: number;
     y: number;
+}, placementPosition?: {
+    x: number;
+    y: number;
 }): void;
 export declare function clearSortablePointerMovement(registry: SortableRegistry): void;
 export declare function clearSortablePreviewPlacement(registry: SortableRegistry): void;
@@ -42,6 +52,10 @@ export declare function moveSortablePreview(input: {
         x: number;
         y: number;
     };
+    movementPosition: {
+        x: number;
+        y: number;
+    };
     options: NormalizedSortableOptions;
 }): void;
 export declare function getSortablePreviewPlacement(input: {
@@ -51,6 +65,10 @@ export declare function getSortablePreviewPlacement(input: {
         x: number;
         y: number;
     };
+    movementPosition?: {
+        x: number;
+        y: number;
+    };
     movement: SortablePointerMovementState | null;
     previewPlacement: SortablePreviewPlacementState | null;
     options: NormalizedSortableOptions;

package/dist/sortable/sortable-preview.js

@@ -17,19 +17,21 @@ export function snapshotSortableElement(registry, draggableId) {
 export function isSortablePreviewTarget(input) {
     return input.activeDropTargetId !== null;
 }
-export function initializeSortablePointerMovement(registry, pointerPosition) {
+export function initializeSortablePointerMovement(registry, pointerPosition, placementPosition = pointerPosition) {
     registry.activeDrag.pointerMovement = {
         previousPointerPosition: { ...pointerPosition },
+        previousPlacementPosition: { ...placementPosition },
     };
     registry.activeDrag.previewPlacement = null;
 }
-export function updateSortablePointerMovement(registry, pointerPosition) {
+export function updateSortablePointerMovement(registry, pointerPosition, placementPosition = pointerPosition) {
     const movement = registry.activeDrag.pointerMovement;
     if (!movement) {
-        initializeSortablePointerMovement(registry, pointerPosition);
+        initializeSortablePointerMovement(registry, pointerPosition, placementPosition);
         return;
     }
     movement.previousPointerPosition = { ...pointerPosition };
+    movement.previousPlacementPosition = { ...placementPosition };
 }
 export function clearSortablePointerMovement(registry) {
     registry.activeDrag.pointerMovement = null;
@@ -75,10 +77,17 @@ export function moveSortablePreview(input) {
     addRegistrationContainerId(measurementIds, draggedRegistration);
     addRegistrationContainerId(measurementIds, target);
     if (target.capabilities.container) {
+        const sourceListElement = draggedElement.parentElement;
         measurementIds.add(target.id);
         const previousListElement = input.registry.activeDrag.previewPlacement?.containerElement ?? null;
         const pendingMidpointInitialPlacement = draggedElement.parentElement !== target.element ||
             (previousListElement !== null && previousListElement !== target.element);
+        if (!moveSortablePreviewIntoContainer({
+            draggedElement,
+            targetElement: target.element,
+        })) {
+            return;
+        }
         setSortablePreviewPlacementState({
             registry: input.registry,
             activeDropTargetId: target.id,
@@ -87,17 +96,18 @@ export function moveSortablePreview(input) {
             pendingMidpointInitialPlacement,
             movementDirection: getCurrentAxisMovementDirection({
                 placementPosition: input.placementPosition,
+                movementPosition: input.movementPosition,
                 movement: input.registry.activeDrag.pointerMovement,
                 axis: input.options.axis,
             }),
         });
-        if (!moveSortablePreviewIntoContainer({
-            draggedElement,
-            targetElement: target.element,
-        })) {
-            return;
+        if (sourceListElement && sourceListElement !== target.element) {
+            addSortableMeasurementIdsInContainer(measurementIds, input.registry, sourceListElement);
+            addSortableMeasurementIdsInContainer(measurementIds, input.registry, target.element);
+        }
+        else {
+            addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
         }
-        addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
         refreshSortableDropTargetMeasurements({
             registry: input.registry,
             runtime: input.runtime,
@@ -108,6 +118,7 @@ export function moveSortablePreview(input) {
     }
     const targetElement = target.element;
     const listElement = targetElement.parentElement;
+    const sourceListElement = draggedElement.parentElement;
     if (!listElement) {
         return;
     }
@@ -129,6 +140,7 @@ export function moveSortablePreview(input) {
         activeDropTargetId,
         targetElement,
         placementPosition: input.placementPosition,
+        movementPosition: input.movementPosition,
         movement: input.registry.activeDrag.pointerMovement,
         previewPlacement: input.registry.activeDrag.previewPlacement,
         options: input.options,
@@ -156,8 +168,14 @@ export function moveSortablePreview(input) {
     else {
         targetElement.before(draggedElement);
     }
-    addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
-    addSortableMeasurementIdsAroundElement(measurementIds, input.registry, targetElement);
+    if (sourceListElement && sourceListElement !== listElement) {
+        addSortableMeasurementIdsInContainer(measurementIds, input.registry, sourceListElement);
+        addSortableMeasurementIdsInContainer(measurementIds, input.registry, listElement);
+    }
+    else {
+        addSortableMeasurementIdsAroundElement(measurementIds, input.registry, draggedElement);
+        addSortableMeasurementIdsAroundElement(measurementIds, input.registry, targetElement);
+    }
     refreshSortableDropTargetMeasurements({
         registry: input.registry,
         runtime: input.runtime,
@@ -171,14 +189,14 @@ export function getSortablePreviewPlacement(input) {
     const targetRect = input.targetElement.getBoundingClientRect();
     const currentDirection = getCurrentAxisMovementDirection({
         placementPosition: input.placementPosition,
+        movementPosition: input.movementPosition,
         movement: input.movement,
         axis,
     });
     const previousPlacement = input.previewPlacement;
     if (!previousPlacement ||
         previousPlacement.activeDropTargetId !== input.activeDropTargetId ||
-        previousPlacement.placement === null ||
-        previousPlacement.movementDirection === "none") {
+        previousPlacement.placement === null) {
         if (input.useMidpointInitialPlacement) {
             const placement = getPlacementSideFromTargetMidpoint({
                 axis,
@@ -200,6 +218,32 @@ export function getSortablePreviewPlacement(input) {
             movementDirection: currentDirection,
         };
     }
+    if (previousPlacement.movementDirection === "none") {
+        if (currentDirection === "none") {
+            return {
+                placement: previousPlacement.placement,
+                movementDirection: previousPlacement.movementDirection,
+            };
+        }
+        const boundary = getPlacementBoundary({
+            targetRect,
+            axis,
+            direction: currentDirection,
+            startRatio: input.options.placementBoundary.start,
+            endRatio: input.options.placementBoundary.end,
+        });
+        const reversalPlacement = getPlacementSideFromBoundary(axisPosition, boundary);
+        if (reversalPlacement === previousPlacement.placement) {
+            return {
+                placement: previousPlacement.placement,
+                movementDirection: previousPlacement.movementDirection,
+            };
+        }
+        return {
+            placement: reversalPlacement,
+            movementDirection: currentDirection,
+        };
+    }
     if (currentDirection === "none" ||
         currentDirection === previousPlacement.movementDirection) {
         return {
@@ -257,11 +301,16 @@ function getPlacementSideFromTargetMidpoint(input) {
     return input.axisPosition < midpoint ? "before" : "after";
 }
 function getCurrentAxisMovementDirection(input) {
-    const axisPosition = getAxisPosition(input.placementPosition, input.axis);
-    const previousAxisPosition = input.movement
-        ? getAxisPosition(input.movement.previousPointerPosition, input.axis)
-        : axisPosition;
-    return getAxisMovementDirection(previousAxisPosition, axisPosition);
+    const movementPosition = input.movementPosition ?? input.placementPosition;
+    const previousMovementPosition = input.movement?.previousPointerPosition ?? movementPosition;
+    const inputDirection = getAxisMovementDirection(getAxisPosition(previousMovementPosition, input.axis), getAxisPosition(movementPosition, input.axis));
+    if (inputDirection === "none") {
+        return "none";
+    }
+    const previousPlacementPosition = input.movement?.previousPlacementPosition ??
+        input.movement?.previousPointerPosition ??
+        input.placementPosition;
+    return getAxisMovementDirection(getAxisPosition(previousPlacementPosition, input.axis), getAxisPosition(input.placementPosition, input.axis));
 }
 export function isSortablePreviewAlreadyPlaced(input) {
     return input.placement === "before"
@@ -308,6 +357,11 @@ function addSortableMeasurementIdsAroundElement(dropTargetIds, registry, element
     addSortableMeasurementId(dropTargetIds, registry, element.previousElementSibling);
     addSortableMeasurementId(dropTargetIds, registry, element.nextElementSibling);
 }
+function addSortableMeasurementIdsInContainer(dropTargetIds, registry, containerElement) {
+    for (let index = 0; index < containerElement.children.length; index += 1) {
+        addSortableMeasurementId(dropTargetIds, registry, containerElement.children.item(index));
+    }
+}
 function addSortableMeasurementId(dropTargetIds, registry, element) {
     if (!(element instanceof HTMLElement)) {
         return;

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

@@ -32,6 +32,10 @@ export type DomSortableRuntime = DomDraggableRuntime & {
                 x: number;
                 y: number;
             };
+            movementPosition?: {
+                x: number;
+                y: number;
+            };
         }) => void;
         onDragUpdate?: (event: {
             draggableId: string;
@@ -44,6 +48,10 @@ export type DomSortableRuntime = DomDraggableRuntime & {
                 x: number;
                 y: number;
             };
+            movementPosition?: {
+                x: number;
+                y: number;
+            };
             activeDropTargetId: string | null;
             previousDropTargetId: string | null;
         }) => void;

package/dist/sortable/sortable-registry.js

@@ -22,26 +22,30 @@ export function getSortableRegistry(runtime) {
     };
     runtime.subscribe({
         onDragStart: (event) => {
-            initializeSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
+            const placementPosition = event.placementPosition ?? event.pointerPosition;
+            initializeSortablePointerMovement(registry, event.movementPosition ?? placementPosition, placementPosition);
             snapshotSortableElement(registry, event.draggableId);
         },
         onDragUpdate: (event) => {
             if (isSortablePreviewTarget({
                 activeDropTargetId: event.activeDropTargetId,
             })) {
+                const placementPosition = event.placementPosition ?? event.pointerPosition;
                 moveSortablePreview({
                     registry,
                     runtime,
                     draggedDraggableId: event.draggableId,
                     activeDropTargetId: event.activeDropTargetId,
-                    placementPosition: event.placementPosition ?? event.pointerPosition,
+                    placementPosition,
+                    movementPosition: event.movementPosition ?? placementPosition,
                     options: getSortableOptions(registry, event.draggableId),
                 });
             }
             else {
                 clearSortablePreviewPlacement(registry);
             }
-            updateSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
+            const placementPosition = event.placementPosition ?? event.pointerPosition;
+            updateSortablePointerMovement(registry, event.movementPosition ?? placementPosition, placementPosition);
         },
         onDragEnd: (event) => {
             releaseSortableActiveDragState(registry, event.draggableId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-drag-and-drop/dom",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Headless DOM drag-and-drop primitives for draggable, droppable, sortable, and grouped interactions.",
   "license": "MIT",
   "homepage": "https://mkramer.dev",