@mk-drag-and-drop/dom 0.3.0 → 0.4.1

package/README.md

@@ -98,6 +98,9 @@ The returned controller has:
   array of target ids, or `{ group }`
 - `remeasureOverlay()`: remeasures the currently mounted drag overlay element;
   it is a safe no-op when no overlay is mounted or no drag is active
+- `recomputeActiveDrag()`: reruns active targeting and drag update from the
+  last pointer position; it is a safe no-op when no drag is active and does not
+  remeasure drop targets
 
 The controller does not expose runtime teardown, disposal, update, or broad
 overlay removal methods. Runtime objects are ordinary JavaScript objects; DOM
@@ -362,6 +365,17 @@ registry may narrow measured candidates to relevant sortable item, neighbor, or
 container entries before the targeting algorithm runs; the algorithm still makes
 the active-target decision from that narrowed measured list.
 
+Same-container sortable preview keeps its movement-responsive first-placement
+behavior: forward movement places after a newly active target, backward movement
+places before, and no sortable-axis movement uses the target midpoint. When a
+sortable item first enters a different DOM container, the initial side is based
+on the target midpoint on the sortable axis: above or left of midpoint places
+before, while below or right of midpoint places after.
+
+`placementBoundary` is used after a preview placement already exists to control
+same-target reversal and hysteresis thresholds. It does not decide the initial
+side for cross-container sortable entry.
+
 ## Modifiers
 
 Modifiers transform pointer movement before drag state updates. Built-ins:
@@ -408,6 +422,36 @@ order, so app-owned layout changes such as expanding tree rows or changing
 grouped sections during a drag should call the public remeasure API when those
 changes need to affect targeting.
 
+## Active Drag Recompute
+
+`controller.recomputeActiveDrag()` reruns the active drag update path from the
+last stored raw pointer position. It reapplies modifiers, derives the overlay
+rect from cached overlay measurement, recomputes the active drop target from
+cached target measurements, updates the overlay host, and sends the normal drag
+update notifications. This is the same update path used by pointer movement.
+Calling it with no active drag is safe and does nothing.
+
+Use it when something external changes what is under the pointer during an
+active drag without producing a new pointer event.
+
+```ts
+controller.recomputeActiveDrag();
+```
+
+Recompute does not remeasure drop targets. If target geometry or registrations
+changed and those changes should affect targeting, remeasure first and then
+recompute.
+
+```ts
+controller.remeasureDropTargets({ group: "items" });
+controller.recomputeActiveDrag();
+```
+
+```ts
+// Example: after external scrolling changes what is under the pointer
+controller.recomputeActiveDrag();
+```
+
 ## Data Ownership
 
 The DOM package never owns application data. Item ids, target ids, group ids,

package/dist/controller/create-drag-controller.d.ts

@@ -35,5 +35,6 @@ export type DragControllerOptions = {
 export type DragController = {
     remeasureDropTargets: (input?: RemeasureDropTargetsInput) => void;
     remeasureOverlay: () => void;
+    recomputeActiveDrag: () => void;
 };
 export declare function createDragController(options?: DragControllerOptions): DragController;

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

@@ -23,6 +23,9 @@ export function createDragController(options = {}) {
             runtime.remeasureDropTargets(input);
         },
         remeasureOverlay,
+        recomputeActiveDrag: () => {
+            runtime.recomputeActiveDrag();
+        },
     };
     setControllerRuntime(controller, runtime);
     return controller;

package/dist/runtime/drag-runtime-scope.d.ts

@@ -11,6 +11,7 @@ export type DragRuntimeScope = DomDraggableRuntime & DomDroppableRuntime & DomDr
     configure: (input: DragRuntimeScopeConfigureInput) => void;
     cancelDrag: () => void;
     releaseActiveDragResources: () => void;
+    recomputeActiveDrag: () => void;
     setOverlayRect: (overlayRect: DragRect | null) => void;
 };
 export type InternalStaleDomBindingRuntime = {

package/dist/runtime/drag-runtime-scope.js

@@ -5,6 +5,7 @@ export function createDragRuntimeScope(options) {
         configure: (input) => runtime.configure(input),
         cancelDrag: () => runtime.cancelDrag(),
         releaseActiveDragResources: () => runtime.releaseActiveDragResources(),
+        recomputeActiveDrag: () => runtime.recomputeActiveDrag(),
         setOverlayRect: (overlayRect) => runtime.setOverlayRect(overlayRect),
         requestDragStart: (input) => runtime.requestDragStart(input),
         isKeyboardDragEnabled: () => runtime.isKeyboardDragEnabled(),

package/dist/runtime/drag-runtime.d.ts

@@ -43,6 +43,7 @@ export declare class DragRuntime {
     requestKeyboardDragStart(input: RequestKeyboardDragStartInput): void;
     moveKeyboardDrag(direction: KeyboardMoveDirection): void;
     updatePointer(rawPointerPosition: Point): void;
+    recomputeActiveDrag(): void;
     private updatePointerNow;
     private updatePointerNowOrRelease;
     private finishDragAfterQueuedPointerUpdate;

package/dist/runtime/drag-runtime.js

@@ -180,6 +180,13 @@ export class DragRuntime {
             }
         });
     }
+    recomputeActiveDrag() {
+        const session = this.getDraggingSession();
+        if (!session) {
+            return;
+        }
+        this.updatePointerNowOrRelease(session.rawPointerPosition);
+    }
     updatePointerNow(rawPointerPosition) {
         const session = this.getDraggingSession();
         if (!session) {

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

@@ -56,6 +56,7 @@ export declare function getSortablePreviewPlacement(input: {
     movement: SortablePointerMovementState | null;
     previewPlacement: SortablePreviewPlacementState | null;
     options: NormalizedSortableOptions;
+    useMidpointInitialPlacement?: boolean;
 }): SortablePreviewPlacementDecision;
 export declare function isSortablePreviewAlreadyPlaced(input: {
     draggedElement: HTMLElement;

package/dist/sortable/sortable-preview.js

@@ -106,6 +106,7 @@ export function moveSortablePreview(input) {
     if (!listElement) {
         return;
     }
+    const useMidpointInitialPlacement = draggedElement.parentElement !== listElement;
     if (!target.capabilities.sortable) {
         return;
     }
@@ -120,6 +121,7 @@ export function moveSortablePreview(input) {
         movement: input.registry.activeDrag.pointerMovement,
         previewPlacement: input.registry.activeDrag.previewPlacement,
         options: input.options,
+        useMidpointInitialPlacement,
     });
     const placement = placementDecision.placement;
     setSortablePreviewPlacementState({
@@ -165,12 +167,18 @@ export function getSortablePreviewPlacement(input) {
         previousPlacement.placement === null ||
         previousPlacement.movementDirection === "none") {
         return {
-            placement: getOptimisticPlacement({
-                axis,
-                axisPosition,
-                currentDirection,
-                targetRect,
-            }),
+            placement: input.useMidpointInitialPlacement
+                ? getPlacementSideFromTargetMidpoint({
+                    axis,
+                    axisPosition,
+                    targetRect,
+                })
+                : getOptimisticPlacement({
+                    axis,
+                    axisPosition,
+                    currentDirection,
+                    targetRect,
+                }),
             movementDirection: currentDirection,
         };
     }
@@ -222,6 +230,12 @@ function getOptimisticPlacement(input) {
         endRatio: neutralPlacementBoundaryRatio,
     }));
 }
+function getPlacementSideFromTargetMidpoint(input) {
+    const targetStart = input.axis === "horizontal" ? input.targetRect.left : input.targetRect.top;
+    const targetSize = input.axis === "horizontal" ? input.targetRect.width : input.targetRect.height;
+    const midpoint = targetStart + targetSize / 2;
+    return input.axisPosition < midpoint ? "before" : "after";
+}
 function getCurrentAxisMovementDirection(input) {
     const axisPosition = getAxisPosition(input.placementPosition, input.axis);
     const previousAxisPosition = input.movement

package/package.json

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