@acorex/cdk 22.1.6 → 22.1.8

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, DOCUMENT, ViewContainerRef, contentChild, linkedSignal, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, linkedSignal, DOCUMENT, ViewContainerRef, contentChild, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 import { NXComponent } from '@acorex/cdk/common';
@@ -72,8 +72,12 @@ class AXDropListDirective extends NXComponent {
         /** The detected `gap` of the list for the current orientation. */
         this._listGap = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_listGap" }] : /* istanbul ignore next */ []));
-        /** A signal-based alias for the orientation input for internal use. */
-        this._orientation = this.dropListOrientation;
+        /** Internal orientation state; can be overridden programmatically by host components. */
+        this.orientation = linkedSignal(() => this.dropListOrientation(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Internal sorting-disabled state; can be overridden programmatically by host components. */
+        this.isSortingDisabled = linkedSignal(() => this.sortingDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSortingDisabled" }] : /* istanbul ignore next */ []));
         /** DOM placeholder element for inter-list drags */
         this._placeholderElement = null;
     }
@@ -102,7 +106,7 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item that is being dragged.
      */
     prepareSort(dragItem) {
-        if (!this.axDropList() || this.sortingDisabled() || this._activeDragItem() || dragItem.dragDisabled())
+        if (!this.axDropList() || this.isSortingDisabled() || this._activeDragItem() || dragItem.isDragDisabled())
             return;
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
@@ -119,7 +123,7 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item entering this list.
      */
     enter(dragItem) {
-        if (!this.axDropList() || this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
+        if (!this.axDropList() || this.isSortingDisabled() || this.isDragActiveForThisList(dragItem))
             return;
         // Clean up any existing placeholder from previous list
         this._removePlaceholderElement();
@@ -135,10 +139,10 @@ class AXDropListDirective extends NXComponent {
     sort(event, dragItem) {
         if (!this.axDropList() ||
             !this.isDragActiveForThisList(dragItem) ||
-            this.sortingDisabled() ||
+            this.isSortingDisabled() ||
             !this._listInitialRect())
             return;
-        const pointerPosition = this._orientation() === 'vertical' ? event.clientY : event.clientX;
+        const pointerPosition = this.orientation() === 'vertical' ? event.clientY : event.clientX;
         const newPlaceholderIndex = this._calculatePlaceholderIndex(pointerPosition);
         if (this._placeholderIndex() !== newPlaceholderIndex) {
             this._placeholderIndex.set(newPlaceholderIndex);
@@ -152,7 +156,7 @@ class AXDropListDirective extends NXComponent {
      * @param sourceList The list where the drag originated.
      */
     finalizeSort(event, droppedItem, sourceList) {
-        if (!this.axDropList() || !this.isDragActiveForThisList(droppedItem) || this.sortingDisabled()) {
+        if (!this.axDropList() || !this.isDragActiveForThisList(droppedItem) || this.isSortingDisabled()) {
             this.resetSortStateAndStyles(sourceList);
             return;
         }
@@ -198,7 +202,9 @@ class AXDropListDirective extends NXComponent {
     _cacheGeometry() {
         this._listInitialRect.set(this.element.getBoundingClientRect());
         this._detectAndCacheListGap();
-        const items = this._draggableItems().map((itemDraggable) => {
+        const items = [...this._draggableItems()]
+            .sort((a, b) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
+            .map((itemDraggable) => {
             const el = itemDraggable.element();
             const style = window.getComputedStyle(el);
             const rect = el.getBoundingClientRect();
@@ -226,7 +232,7 @@ class AXDropListDirective extends NXComponent {
             const gapParts = gapValue.split(' ');
             const rowGap = parseFloat(gapParts[0]);
             const columnGap = parseFloat(gapParts[1] || gapParts[0]);
-            this._listGap.set(this._orientation() === 'vertical' ? rowGap : columnGap);
+            this._listGap.set(this.orientation() === 'vertical' ? rowGap : columnGap);
         }
         else {
             this._listGap.set(0);
@@ -246,15 +252,15 @@ class AXDropListDirective extends NXComponent {
         const cachedItems = this._cachedItems();
         const originalIndex = cachedItems.findIndex((d) => d.item === activeItem);
         const siblings = cachedItems.filter((d) => d.item !== activeItem);
-        const scrollDelta = this._orientation() === 'vertical'
+        const scrollDelta = this.orientation() === 'vertical'
             ? this.element.getBoundingClientRect().top - listRect.top
             : this.element.getBoundingClientRect().left - listRect.left;
         let newIndexInSiblings = -1;
         for (let i = 0; i < siblings.length; i++) {
             const sibling = siblings[i];
-            const itemMidPoint = (this._orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
+            const itemMidPoint = (this.orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
                 scrollDelta +
-                (this._orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
+                (this.orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
             if (pointerPosition < itemMidPoint) {
                 newIndexInSiblings = i;
                 break;
@@ -274,7 +280,7 @@ class AXDropListDirective extends NXComponent {
         const end = Math.max(originalIndex, potentialPlaceholderIndex);
         for (let i = start; i < end; i++) {
             const itemData = cachedItems[i];
-            if (itemData.item !== activeItem && itemData.item.dragDisabled()) {
+            if (itemData.item !== activeItem && itemData.item.isDragDisabled()) {
                 // We've hit a disabled "wall". Stop the placeholder at the boundary.
                 if (potentialPlaceholderIndex > originalIndex) {
                     return i; // Dragging down/right: stop *before* the wall.
@@ -301,17 +307,17 @@ class AXDropListDirective extends NXComponent {
         else {
             // --- INTRA-LIST DRAG: Use transforms (works well for same-list reordering) ---
             this._removePlaceholderElement();
-            const getItemSpace = (itemData) => this._orientation() === 'vertical'
+            const getItemSpace = (itemData) => this.orientation() === 'vertical'
                 ? itemData.height + itemData.margins.top + itemData.margins.bottom
                 : itemData.width + itemData.margins.left + itemData.margins.right;
             const draggedItemSize = isIntraListDrag ? getItemSpace(this._cachedItems()[originalIndex]) : 0;
             this._cachedItems().forEach((data, index) => {
-                if (data.item.dragDisabled()) {
+                if (data.item.isDragDisabled()) {
                     this._renderer.removeStyle(data.element, 'transform');
                     return;
                 }
                 const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
-                this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
+                this._renderer.setStyle(data.element, 'transform', transform ? `${this.orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
             });
         }
     }
@@ -484,6 +490,18 @@ class AXDragDirective {
         ...(ngDevMode ? [undefined, { debugName: "dragBoundary" }] : /* istanbul ignore next */ []));
         this.dragTransitionDuration = input(150, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragTransitionDuration" }] : /* istanbul ignore next */ []));
+        this.isDragDisabled = linkedSignal(() => this.dragDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDragDisabled" }] : /* istanbul ignore next */ []));
+        this.lockAxis = linkedSignal(() => this.dragLockAxis(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lockAxis" }] : /* istanbul ignore next */ []));
+        this.dragBoundaryOverride = linkedSignal(() => this.dragBoundary(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragBoundaryOverride" }] : /* istanbul ignore next */ []));
+        this.startDelay = linkedSignal(() => this.dragStartDelay() ?? 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startDelay" }] : /* istanbul ignore next */ []));
+        this.dragTouchAction = linkedSignal(() => 'none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragTouchAction" }] : /* istanbul ignore next */ []));
+        this.dragCursorOverride = linkedSignal(() => this.dragCursor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragCursorOverride" }] : /* istanbul ignore next */ []));
         this.dragPositionChanged = output();
         this.isMoving = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMoving" }] : /* istanbul ignore next */ []));
@@ -511,19 +529,25 @@ class AXDragDirective {
         ...(ngDevMode ? [{ debugName: "prevDropZone" }] : /* istanbul ignore next */ []));
         this.dragStartOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragStartOffset" }] : /* istanbul ignore next */ []));
+        this.pointerDownPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerDownPosition" }] : /* istanbul ignore next */ []));
         this.clonePointerOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clonePointerOffset" }] : /* istanbul ignore next */ []));
         this.clonedElementViewRef = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clonedElementViewRef" }] : /* istanbul ignore next */ []));
         this.rafId = null;
         this.pendingPointerEvent = null;
+        this.savedBodyCursor = null;
+        this.holdDelayTimer = null;
+        this.holdDelayReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "holdDelayReady" }] : /* istanbul ignore next */ []));
         this._parentDropList = inject(AXDropListDirective, { optional: true, skipSelf: true, host: false });
         this._currentDropList = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_currentDropList" }] : /* istanbul ignore next */ []));
         this.createCloneElement = computed(() => this.dragElementClone() || !!this._parentDropList, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "createCloneElement" }] : /* istanbul ignore next */ []));
         this.boundaryElement = computed(() => {
-            const boundary = this.dragBoundary();
+            const boundary = this.dragBoundaryOverride();
             if (!boundary) {
                 return null;
             }
@@ -556,12 +580,14 @@ class AXDragDirective {
         this.listenersAttached = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listenersAttached" }] : /* istanbul ignore next */ []));
         this.#dragDisabledEffect = effect(() => {
-            if (this.dragCursor() === 'none') {
+            if (this.dragCursorOverride() === 'none') {
                 return;
             }
-            if (!this.dragDisabled()) {
-                this.renderer.setStyle(this.handle(), 'cursor', this.dragCursor());
-                this.renderer.setStyle(this.handle(), 'touch-action', 'none');
+            if (!this.isDragDisabled()) {
+                if (!this.isMoving() && !this.holdDelayReady()) {
+                    this.renderer.setStyle(this.handle(), 'cursor', this.dragCursorOverride());
+                }
+                this.renderer.setStyle(this.handle(), 'touch-action', this.dragTouchAction());
             }
             else {
                 this.renderer.removeStyle(this.handle(), 'cursor');
@@ -597,7 +623,6 @@ class AXDragDirective {
             if (this._parentDropList) {
                 this.setElementTransition(this.element());
             }
-            this.renderer.setStyle(this.element(), 'z-index', '1');
             this.elementOpacity.set(getComputedStyle(this.element()).opacity);
         }
     }
@@ -615,7 +640,56 @@ class AXDragDirective {
             if (this._parentDropList && this.isDragging()) {
                 this._parentDropList.cancelSort();
             }
+            this.clearActiveDragCursor();
+            this.clearHoldDelayTimer();
+            this.renderer.removeStyle(this.element(), 'z-index');
+        }
+    }
+    resolveDropCursor(canDrop) {
+        if (this.dragCursorOverride() === 'grab') {
+            return canDrop ? 'grabbing' : 'not-allowed';
+        }
+        return canDrop ? 'move' : 'not-allowed';
+    }
+    setActiveDragCursor(cursor) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.savedBodyCursor === null) {
+            this.savedBodyCursor = this.document.body.style.cursor;
+        }
+        this.document.body.style.cursor = cursor;
+    }
+    clearActiveDragCursor() {
+        if (!isPlatformBrowser(this.platformId) || this.savedBodyCursor === null)
+            return;
+        this.document.body.style.cursor = this.savedBodyCursor;
+        this.savedBodyCursor = null;
+    }
+    clearHoldDelayTimer() {
+        if (this.holdDelayTimer !== null) {
+            clearTimeout(this.holdDelayTimer);
+            this.holdDelayTimer = null;
+        }
+        this.holdDelayReady.set(false);
+    }
+    scheduleHoldDelayFeedback() {
+        this.clearHoldDelayTimer();
+        const delay = this.startDelay();
+        if (delay <= 0 || this.dragCursorOverride() !== 'grab') {
+            return;
         }
+        this.holdDelayTimer = setTimeout(() => {
+            this.holdDelayTimer = null;
+            if (!this.isDragging() || this.isMoving() || this.isDragDisabled()) {
+                return;
+            }
+            this.holdDelayReady.set(true);
+            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
+            this.setActiveDragCursor('grabbing');
+        }, delay);
+    }
+    setElementDropCursor(element, cursor) {
+        this.renderer.setStyle(element, 'cursor', cursor);
     }
     setElementTransition(element) {
         this.renderer.setStyle(element, 'transition-property', 'transform, opacity, translate');
@@ -628,24 +702,23 @@ class AXDragDirective {
     handlePointerDown(e) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (!this.axDrag() || this.dragDisabled() || e.button !== 0 || this._parentDropList?.sortingDisabled())
+        if (!this.axDrag() || this.isDragDisabled() || e.button !== 0 || this._parentDropList?.isSortingDisabled())
             return;
         this.isDragging.set(true);
         this.movedAfterDelay.set(false);
-        if (this.dragCursor() === 'move') {
+        if (this.dragCursorOverride() === 'move') {
             this.renderer.setStyle(this.handle(), 'cursor', 'move');
         }
-        else if (this.dragCursor() === 'grab') {
-            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
-        }
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
+        this.pointerDownPosition.set({ x: e.clientX, y: e.clientY });
         this.renderer.setStyle(this.handle(), 'userSelect', 'none');
         this.activePointerId.set(e.pointerId);
         this.addDocumentListeners();
         this.dragStartTime.set(Date.now());
+        this.scheduleHoldDelayFeedback();
     }
     handleDblClick() {
-        if (!this.dragResetOnDblClick() || this.dragDisabled())
+        if (!this.dragResetOnDblClick() || this.isDragDisabled())
             return;
         this.setPosition(0, 0);
     }
@@ -653,17 +726,26 @@ class AXDragDirective {
         if (!this.isDragging() || !isPlatformBrowser(this.platformId) || e.pointerId !== this.activePointerId()) {
             return;
         }
-        e.preventDefault();
         if (!this.isMoving()) {
-            const delay = this.dragStartDelay() ?? 0;
-            // FIX: Delay logic was inverted
-            if (Date.now() - this.dragStartTime() < delay) {
-                return; // Still waiting for delay
+            const delay = this.startDelay();
+            const down = this.pointerDownPosition();
+            const movedX = e.clientX - down.x;
+            const movedY = e.clientY - down.y;
+            const movedDistance = Math.sqrt(movedX * movedX + movedY * movedY);
+            if (delay > 0 && !this.holdDelayReady() && Date.now() - this.dragStartTime() < delay) {
+                if (movedDistance > 8) {
+                    this.abortDragSequence();
+                }
+                return;
             }
+            e.preventDefault();
             this.isMoving.set(true);
             this.handle().setPointerCapture(e.pointerId);
             this.startDrag(e);
         }
+        else {
+            e.preventDefault();
+        }
         // Run position updates outside Angular zone for better performance
         this.zone.runOutsideAngular(() => {
             if (this.createCloneElement()) {
@@ -694,7 +776,24 @@ class AXDragDirective {
             this.dropZoneHoverHandler(e);
         }
     }
+    abortDragSequence() {
+        this.clearHoldDelayTimer();
+        this.isDragging.set(false);
+        this.isMoving.set(false);
+        this.activePointerId.set(null);
+        this.removeDocumentListeners();
+        this.renderer.removeStyle(this.handle(), 'userSelect');
+        if (this.dragCursorOverride() === 'grab') {
+            this.renderer.setStyle(this.handle(), 'cursor', 'grab');
+        }
+        this.clearActiveDragCursor();
+    }
     startDrag(e) {
+        if (this.dragCursorOverride() === 'grab') {
+            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
+            this.setActiveDragCursor('grabbing');
+        }
+        this.renderer.setStyle(this.element(), 'z-index', '1');
         // Add CDK-style classes
         this.renderer.addClass(this.element(), 'ax-dragging');
         this.renderer.addClass(this.element(), 'ax-drag-placeholder');
@@ -722,9 +821,11 @@ class AXDragDirective {
         if (e.pointerId !== this.activePointerId() || !isPlatformBrowser(this.platformId) || !this.isDragging()) {
             return;
         }
-        if (this.dragCursor() === 'grab') {
+        this.clearHoldDelayTimer();
+        if (this.dragCursorOverride() === 'grab') {
             this.renderer.setStyle(this.handle(), 'cursor', 'grab');
         }
+        this.clearActiveDragCursor();
         const wasMoving = this.isMoving();
         this.isMoving.set(false);
         this.isDragging.set(false);
@@ -738,6 +839,7 @@ class AXDragDirective {
             this.renderer.removeStyle(this.handle(), 'userSelect');
             return;
         }
+        this.renderer.removeStyle(this.element(), 'z-index');
         this.preventClicking();
         const transform = this.element().style.transform;
         let x = 0;
@@ -792,12 +894,15 @@ class AXDragDirective {
         // Update cursor based on whether drop is allowed
         if (listUnderPointer) {
             const cloneEl = this.clonedElement();
-            const cursor = canDrop ? 'move' : 'not-allowed';
-            if (cloneEl) {
-                this.renderer.setStyle(cloneEl, 'cursor', cursor);
+            const cursor = this.resolveDropCursor(!!canDrop);
+            if (this.dragCursorOverride() === 'grab') {
+                this.setActiveDragCursor(cursor);
+            }
+            else if (cloneEl) {
+                this.setElementDropCursor(cloneEl, cursor);
             }
             else {
-                this.renderer.setStyle(this.element(), 'cursor', cursor);
+                this.setElementDropCursor(this.element(), cursor);
             }
         }
         if (targetList !== previousList) {
@@ -815,7 +920,7 @@ class AXDragDirective {
         this._currentDropList()?.sort(e, this);
     }
     canDropInList(list) {
-        if (!list || list.sortingDisabled() || !this._parentDropList) {
+        if (!list || list.isSortingDisabled() || !this._parentDropList) {
             return false;
         }
         if (list === this._parentDropList) {
@@ -959,9 +1064,9 @@ class AXDragDirective {
             constrainedX = clamp(x, minX, maxX);
             constrainedY = clamp(y, minY, maxY);
         }
-        if (this.dragLockAxis() === 'x')
+        if (this.lockAxis() === 'x')
             constrainedY = this.currentAxis().y;
-        if (this.dragLockAxis() === 'y')
+        if (this.lockAxis() === 'y')
             constrainedX = this.currentAxis().x;
         // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(this.element(), 'translate', `${constrainedX}px ${constrainedY}px`);
@@ -983,9 +1088,9 @@ class AXDragDirective {
             constrainedX = clamp(x, boundaryRect.left, boundaryRect.right - cloneWidth);
             constrainedY = clamp(y, boundaryRect.top, boundaryRect.bottom - cloneHeight);
         }
-        if (this.dragLockAxis() === 'x')
+        if (this.lockAxis() === 'x')
             constrainedY = this.currentCloneAxis().y;
-        if (this.dragLockAxis() === 'y')
+        if (this.lockAxis() === 'y')
             constrainedX = this.currentCloneAxis().x;
         // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(cloneEl, 'translate', `${constrainedX}px ${constrainedY}px`);