forty-cdk 0.3.0 → 0.4.0

package/fesm2022/forty-cdk-drag-drop.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, Directive, afterNextRender, ElementRef, DOCUMENT, PLATFORM_ID, DestroyRef, Injector, input, booleanAttribute, output, computed, TemplateRef, ViewContainerRef, contentChild, model, effect } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { createDefaults, fencePlaceholderIndex, placeholderInsertion, playFlip, LiveAnnouncer, injectPrefersReducedMotion, injectTextDirection, RovingTabindex, Collection, reconcileRovingActive, registerHandle, createAutoScroller, firstEnabledHost, moveIndex, buildDragSlots, indexOfSlot, PreviewController, resolveDropTarget, stepSlot, createPointerDragSession, createTemplatePreview, resolveListNavigation, clampPreviewPosition } from 'forty-cdk/core';
+import { createDefaults, fencePlaceholderIndex, placeholderInsertion, playFlip, LiveAnnouncer, injectPrefersReducedMotion, injectTextDirection, RovingTabindex, Collection, reconcileRovingActive, registerHandle, createAutoScroller, firstEnabledHost, moveIndex, buildDragSlots, indexOfSlot, PreviewController, resolveDropTarget, stepSlot, createPointerHandleGuard, createPointerDragSession, createTemplatePreview, resolveListNavigation, clampPreviewPosition } from 'forty-cdk/core';
 
 const FOR_DRAG_DROP_CONTEXT = new InjectionToken('FOR_DRAG_DROP_CONTEXT');
 function injectDropListContext(piece) {
@@ -325,6 +325,7 @@ class ForDropList {
     #sorter = null;
     #autoScroller = null;
     #lastPoint = null;
+    #resolveRaf = null;
     /** Insertion index this list is the current drop target at, else `null`. */
     dragOverIndex = this.#dragOver.asReadonly();
     /** `true` while a drag originating from this list is in progress. */
@@ -344,7 +345,13 @@ class ForDropList {
                 maxSpeed: this.#defaults.autoScrollMaxSpeed,
                 onFrame: () => this.#onAutoScrollFrame(),
             });
-            this.#destroyRef.onDestroy(() => this.#autoScroller?.stop());
+            this.#destroyRef.onDestroy(() => {
+                this.#autoScroller?.stop();
+                if (this.#resolveRaf !== null) {
+                    this.#document.defaultView?.cancelAnimationFrame(this.#resolveRaf);
+                    this.#resolveRaf = null;
+                }
+            });
         }
     }
     registerItem(handle) {
@@ -442,13 +449,27 @@ class ForDropList {
             return;
         }
         this.#lastPoint = point;
-        this.#resolveDrop(point, lifted);
         if (this.autoScroll()) {
             this.#autoScroller?.update(point);
         }
         else {
             this.#autoScroller?.stop();
         }
+        if (this.#resolveRaf !== null) {
+            return;
+        }
+        this.#resolveDrop(point, lifted);
+        const win = this.#document.defaultView;
+        if (win) {
+            this.#resolveRaf = win.requestAnimationFrame(() => {
+                this.#resolveRaf = null;
+                const currentLifted = this.#liftedHost();
+                const currentPoint = this.#lastPoint;
+                if (currentLifted !== null && currentPoint !== null) {
+                    this.#resolveDrop(currentPoint, currentLifted);
+                }
+            });
+        }
     }
     #resolveDrop(point, lifted) {
         const connected = this.#effectiveConnected();
@@ -480,6 +501,16 @@ class ForDropList {
             this.#announcer.announce(this.#defaults.announceMove(label, target.index + 1, targetCtx.items().length), 'polite');
         }
     }
+    #flushResolve(lifted) {
+        if (this.#resolveRaf === null) {
+            return;
+        }
+        this.#document.defaultView?.cancelAnimationFrame(this.#resolveRaf);
+        this.#resolveRaf = null;
+        if (this.#lastPoint !== null) {
+            this.#resolveDrop(this.#lastPoint, lifted);
+        }
+    }
     #resolveBoundary() {
         const boundary = this.boundary();
         if (boundary === null) {
@@ -536,6 +567,7 @@ class ForDropList {
         if (liftedHost === null) {
             return;
         }
+        this.#flushResolve(liftedHost);
         const connected = this.#effectiveConnected();
         const items = this.#items.items();
         const slots = buildDragSlots(items.length, connected.map((c) => c.items().length));
@@ -609,6 +641,10 @@ class ForDropList {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#effectiveConnected" }] : /* istanbul ignore next */ []));
     #teardown(connected, keepPreview = false) {
+        if (this.#resolveRaf !== null) {
+            this.#document.defaultView?.cancelAnimationFrame(this.#resolveRaf);
+            this.#resolveRaf = null;
+        }
         this.#autoScroller?.stop();
         this.#lastPoint = null;
         this.#dragOver.set(null);
@@ -708,7 +744,6 @@ class ForDraggable {
     /** `true` while a pointer-drag placeholder template occupies this item's slot (host hidden). */
     placeholderActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderActive" }] : /* istanbul ignore next */ []));
-    #handles = new Set();
     #pointerDragging = false;
     #pointerSession = null;
     /** Data payload handed back in the `dragDrop` event when this item is dropped. */
@@ -726,6 +761,7 @@ class ForDraggable {
     dragEnd = output();
     effectiveDisabled = computed(() => this.dragDisabled() || this.#list.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    #handleGuard = createPointerHandleGuard(this.effectiveDisabled);
     /** `true` when this item is the currently lifted draggable. Reflected as `data-dragging`. */
     lifted = computed(() => this.#list.isLifted(this.#host.nativeElement), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lifted" }] : /* istanbul ignore next */ []));
@@ -746,8 +782,7 @@ class ForDraggable {
         return this.#list.isFirstFocusableItem(this.#host.nativeElement) ? 0 : -1;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
-    touchAction = computed(() => !this.effectiveDisabled() && this.#handles.size === 0 ? 'none' : null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    touchAction = this.#handleGuard.touchAction;
     constructor() {
         const handle = {
             host: this.#host.nativeElement,
@@ -762,7 +797,7 @@ class ForDraggable {
                 armThreshold: POINTER_ARM_THRESHOLD_PX$1,
                 cancelOnEscape: true,
                 capturePointer: true,
-                canStart: (event) => this.#canStartPointer(event),
+                canStart: (event) => this.#handleGuard.canStart(event),
                 onLift: (event) => this.#onPointerLift(event),
                 onMove: (event) => this.#onPointerMove(event),
                 onCommit: () => this.#onPointerCommit(),
@@ -773,23 +808,10 @@ class ForDraggable {
         }
     }
     registerHandle(el) {
-        this.#handles.add(el);
+        this.#handleGuard.register(el);
     }
     unregisterHandle(el) {
-        this.#handles.delete(el);
-    }
-    #canStartPointer(event) {
-        if (this.effectiveDisabled()) {
-            return false;
-        }
-        if (event.pointerType === 'mouse' && event.button !== 0) {
-            return false;
-        }
-        if (this.#handles.size === 0) {
-            return true;
-        }
-        const target = event.target;
-        return target !== null && [...this.#handles].some((h) => h.contains(target));
+        this.#handleGuard.unregister(el);
     }
     #onPointerLift(event) {
         const preview = this.#buildPreview();
@@ -951,12 +973,12 @@ class ForFreeDrag {
     #document = inject(DOCUMENT);
     #destroyRef = inject(DestroyRef);
     #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    #handles = new Set();
     #lift = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#lift" }] : /* istanbul ignore next */ []));
     #pointerSession = null;
     /** When true, the element can't be dragged (it stays focusable; the transform doesn't change). */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    #handleGuard = createPointerHandleGuard(this.disabled);
     /**
      * The element actually moved: an `HTMLElement`, or a selector resolved via `closest()` from the
      * host. `null` (the default) moves the host itself. Mirrors CDK's `cdkDragRootElement` — drag a
@@ -992,8 +1014,7 @@ class ForFreeDrag {
     /** True while a pointer drag is armed. Reflected as `data-dragging`. */
     dragging = computed(() => this.#lift() !== null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    touchAction = computed(() => !this.disabled() && this.#handles.size === 0 ? 'none' : null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    touchAction = this.#handleGuard.touchAction;
     constructor() {
         if (this.#isBrowser) {
             effect(() => {
@@ -1007,7 +1028,7 @@ class ForFreeDrag {
                 armThreshold: POINTER_ARM_THRESHOLD_PX,
                 cancelOnEscape: true,
                 capturePointer: true,
-                canStart: (event) => this.#canStartPointer(event),
+                canStart: (event) => this.#handleGuard.canStart(event),
                 onLift: (event) => this.#onLift(event),
                 onMove: (event) => this.#onMove(event),
                 onCommit: () => this.#onCommit(),
@@ -1017,10 +1038,10 @@ class ForFreeDrag {
         }
     }
     registerHandle(el) {
-        this.#handles.add(el);
+        this.#handleGuard.register(el);
     }
     unregisterHandle(el) {
-        this.#handles.delete(el);
+        this.#handleGuard.unregister(el);
     }
     #resolvedRoot = computed(() => {
         const root = this.rootElement();
@@ -1040,19 +1061,6 @@ class ForFreeDrag {
             ? this.#host.nativeElement.closest(boundary)
             : boundary;
     }
-    #canStartPointer(event) {
-        if (this.disabled()) {
-            return false;
-        }
-        if (event.pointerType === 'mouse' && event.button !== 0) {
-            return false;
-        }
-        if (this.#handles.size === 0) {
-            return true;
-        }
-        const target = event.target;
-        return target !== null && [...this.#handles].some((h) => h.contains(target));
-    }
     #onLift(event) {
         const rect = this.#resolvedRoot().getBoundingClientRect();
         const position = this.position();