@acorex/cdk 20.1.7 → 20.1.8

package/drag-drop/index.d.ts

@@ -35,9 +35,12 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     transitionDuration: _angular_core.WritableSignal<number>;
     readonly element: _angular_core.WritableSignal<HTMLElement>;
     private isMoving;
+    private dragStartTime;
     private isDragging;
     private elementOpacity;
     private isDelayStarted;
+    private movedAfterDelay;
+    private activePointerId;
     private prevDropZone;
     private dragStartOffset;
     private clonePointerOffset;
@@ -58,11 +61,11 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private setElementTransition;
     private removeElementTransition;
     private handlePointerDown;
+    private handleDblClick;
+    private handlePointerMove;
     private startDrag;
     private handlePointerUp;
     private preventClicking;
-    private handleDblClick;
-    private handlePointerMove;
     private handleDropListInteractions;
     private canDropInList;
     private dropZoneHoverHandler;

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

@@ -80,7 +80,7 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item that is being dragged.
      */
     prepareSort(dragItem) {
-        if (this.sortingDisabled() || this._activeDragItem())
+        if (this.sortingDisabled() || this._activeDragItem() || dragItem.dragDisabled())
             return;
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
@@ -214,7 +214,11 @@ class AXDropListDirective extends NXComponent {
     _calculatePlaceholderIndex(pointerPosition) {
         const activeItem = this._activeDragItem();
         const listRect = this._listInitialRect();
-        const siblings = this._cachedItems().filter((d) => d.item !== activeItem);
+        if (!activeItem || !listRect)
+            return -1;
+        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'
             ? this.element.getBoundingClientRect().top - listRect.top
             : this.element.getBoundingClientRect().left - listRect.left;
@@ -232,9 +236,28 @@ class AXDropListDirective extends NXComponent {
         if (newIndexInSiblings === -1) {
             newIndexInSiblings = siblings.length;
         }
-        const originalIndex = this._cachedItems().findIndex((d) => d.item === activeItem);
         // Map the index from the 'siblings' array back to the original `_cachedItems` array.
-        return originalIndex > -1 && newIndexInSiblings >= originalIndex ? newIndexInSiblings + 1 : newIndexInSiblings;
+        const potentialPlaceholderIndex = originalIndex > -1 && newIndexInSiblings >= originalIndex ? newIndexInSiblings + 1 : newIndexInSiblings;
+        // A drag starting from outside the list doesn't have an original index.
+        if (originalIndex === -1) {
+            return potentialPlaceholderIndex;
+        }
+        // --- New logic: Prevent crossing disabled items ---
+        const start = Math.min(originalIndex, potentialPlaceholderIndex);
+        const end = Math.max(originalIndex, potentialPlaceholderIndex);
+        for (let i = start; i < end; i++) {
+            const itemData = cachedItems[i];
+            if (itemData.item !== activeItem && itemData.item.dragDisabled()) {
+                // We've hit a disabled "wall". Stop the placeholder at the boundary.
+                if (potentialPlaceholderIndex > originalIndex) {
+                    return i; // Dragging down/right: stop *before* the wall.
+                }
+                else {
+                    return i + 1; // Dragging up/left: stop *after* the wall.
+                }
+            }
+        }
+        return potentialPlaceholderIndex;
     }
     /** Applies `transform` styles to all items to create the visual sorting effect. */
     _applyVisualShifts() {
@@ -249,7 +272,7 @@ class AXDropListDirective extends NXComponent {
         if (isIntraListDrag) {
             draggedItemSize = getItemSpace(this._cachedItems()[originalIndex]);
         }
-        else {
+        else if (activeItem) {
             const rect = activeItem.elementRect();
             if (rect) {
                 const style = window.getComputedStyle(activeItem.element());
@@ -260,6 +283,11 @@ class AXDropListDirective extends NXComponent {
             }
         }
         this._cachedItems().forEach((data, index) => {
+            // --- New logic: Do not transform disabled items ---
+            if (data.item.dragDisabled()) {
+                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)` : '');
         });
@@ -378,9 +406,12 @@ class AXDragDirective {
         this.transitionDuration = linkedSignal(() => this.dragTransitionDuration());
         this.element = signal(this.el.nativeElement);
         this.isMoving = signal(false);
+        this.dragStartTime = signal(0);
         this.isDragging = signal(false);
         this.elementOpacity = signal('1');
         this.isDelayStarted = signal(false);
+        this.movedAfterDelay = signal(false);
+        this.activePointerId = signal(null);
         this.prevDropZone = signal(null);
         this.dragStartOffset = signal({ x: 0, y: 0 });
         this.clonePointerOffset = signal({ x: 0, y: 0 });
@@ -467,9 +498,10 @@ class AXDragDirective {
     handlePointerDown(e) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (this.dragDisabled() || e.button !== 0)
+        if (this.dragDisabled() || e.button !== 0 || this._parentDropList?.sortingDisabled())
             return;
         this.isDragging.set(true);
+        this.movedAfterDelay.set(false);
         if (this.dragCursor() === 'move') {
             this.renderer.setStyle(this.handle(), 'cursor', 'move');
         }
@@ -479,20 +511,50 @@ class AXDragDirective {
         e.stopPropagation();
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
         this.renderer.setStyle(this.handle(), 'userSelect', 'none');
-        this.handle().setPointerCapture(e.pointerId);
+        this.activePointerId.set(e.pointerId);
         this.addDocumentListeners();
-        if (this.dragStartDelay()) {
-            this.isDelayStarted.set(true);
-            setTimeout(() => {
-                if (this.isDragging()) {
-                    this.isDelayStarted.set(false);
-                    this.startDrag(e);
-                }
-            }, this.dragStartDelay());
+        this.dragStartTime.set(Date.now());
+    }
+    handleDblClick() {
+        if (!this.dragResetOnDblClick() || this.dragDisabled())
+            return;
+        this.setPosition(0, 0);
+    }
+    handlePointerMove(e) {
+        if (this.movedAfterDelay() ||
+            !this.isDragging() ||
+            this.isDelayStarted() ||
+            !isPlatformBrowser(this.platformId) ||
+            e.pointerId !== this.activePointerId()) {
+            return;
         }
-        else {
+        e.preventDefault();
+        if (!this.isMoving()) {
+            const delay = this.dragStartDelay() ?? 0;
+            if (Date.now() - this.dragStartTime() < delay) {
+                this.movedAfterDelay.set(true);
+                return;
+            }
+            this.isMoving.set(true);
+            this.handle().setPointerCapture(e.pointerId);
             this.startDrag(e);
         }
+        if (this.createCloneElement()) {
+            const newCloneX = e.clientX - this.clonePointerOffset().x;
+            const newCloneY = e.clientY - this.clonePointerOffset().y;
+            this.setClonePosition(newCloneX, newCloneY);
+        }
+        else {
+            const newX = e.clientX - this.dragStartOffset().x;
+            const newY = e.clientY - this.dragStartOffset().y;
+            this.setPosition(newX, newY);
+        }
+        if (this._parentDropList) {
+            this.handleDropListInteractions(e);
+        }
+        else {
+            this.dropZoneHoverHandler(e);
+        }
     }
     startDrag(e) {
         if (this._parentDropList) {
@@ -512,24 +574,29 @@ class AXDragDirective {
         }
     }
     handlePointerUp(e) {
-        const transform = this.element().style.transform;
-        let x = 0;
-        let y = 0;
-        if (transform) {
-            x = Number(transform.split('translateX(')[1]?.split('px)')[0]);
-            y = Number(transform.split('translateY(')[1]?.split('px)')[0]);
-        }
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        if (!this.isDragging())
+        if (e.pointerId !== this.activePointerId() || !isPlatformBrowser(this.platformId) || !this.isDragging()) {
             return;
+        }
         if (this.dragCursor() === 'grab') {
             this.renderer.setStyle(this.handle(), 'cursor', 'grab');
         }
         const wasMoving = this.isMoving();
+        this.isMoving.set(false);
         this.isDragging.set(false);
-        if (wasMoving) {
-            this.preventClicking();
+        if (!wasMoving) {
+            this.activePointerId.set(null);
+            this.removeDocumentListeners();
+            this._currentDropList.set(null);
+            this.renderer.removeStyle(this.handle(), 'userSelect');
+            return;
+        }
+        this.preventClicking();
+        const transform = this.element().style.transform;
+        let x = 0;
+        let y = 0;
+        if (transform) {
+            x = Number(transform.split('translateX(')[1]?.split('px)')[0]);
+            y = Number(transform.split('translateY(')[1]?.split('px)')[0]);
         }
         const droppedIntoList = this._currentDropList();
         if (droppedIntoList && this._parentDropList) {
@@ -541,13 +608,10 @@ class AXDragDirective {
         else {
             this.dropZoneDropHandler(e);
         }
+        this.activePointerId.set(null);
+        this.removeDocumentListeners();
         this._currentDropList.set(null);
-        this.isMoving.set(false);
         this.renderer.removeStyle(this.handle(), 'userSelect');
-        if (this.handle().hasPointerCapture(e.pointerId)) {
-            this.handle().releasePointerCapture(e.pointerId);
-        }
-        this.removeDocumentListeners();
         if (this.createCloneElement()) {
             const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
             this.removeCloneElementWithAnimation(x || 0, y || 0, listUnderPointer);
@@ -563,35 +627,6 @@ class AXDragDirective {
         };
         this.document.addEventListener('click', blockClick, { capture: true, once: true });
     }
-    handleDblClick() {
-        if (!this.dragResetOnDblClick() || this.dragDisabled())
-            return;
-        this.setPosition(0, 0);
-    }
-    handlePointerMove(e) {
-        if (!isPlatformBrowser(this.platformId) || !this.isDragging() || this.isDelayStarted())
-            return;
-        e.preventDefault();
-        if (!this.isMoving()) {
-            this.isMoving.set(true);
-        }
-        if (this.createCloneElement()) {
-            const newCloneX = e.clientX - this.clonePointerOffset().x;
-            const newCloneY = e.clientY - this.clonePointerOffset().y;
-            this.setClonePosition(newCloneX, newCloneY);
-        }
-        else {
-            const newX = e.clientX - this.dragStartOffset().x;
-            const newY = e.clientY - this.dragStartOffset().y;
-            this.setPosition(newX, newY);
-        }
-        if (this._parentDropList) {
-            this.handleDropListInteractions(e);
-        }
-        else {
-            this.dropZoneHoverHandler(e);
-        }
-    }
     handleDropListInteractions(e) {
         const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
         const previousList = this._currentDropList();