@acorex/cdk 21.0.0-next.12 → 21.0.0-next.14

package/drag-drop/index.d.ts

@@ -39,7 +39,6 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private dragStartTime;
     private isDragging;
     private elementOpacity;
-    private isDelayStarted;
     private movedAfterDelay;
     private activePointerId;
     private prevDropZone;
@@ -116,7 +115,7 @@ interface AXDropListDroppedEvent extends NXNativeEvent<AXDropListDirective, Mous
  * This directive automatically detects `gap` from flexbox/grid layouts and handles
  * items with variable sizes and margins.
  */
-declare class AXDropListDirective extends NXComponent implements OnInit, AfterContentInit {
+declare class AXDropListDirective extends NXComponent implements OnInit, AfterContentInit, OnDestroy {
     private readonly _zone;
     private readonly _renderer;
     private readonly _cdr;
@@ -148,8 +147,11 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     private readonly _listGap;
     /** A signal-based alias for the orientation input for internal use. */
     private readonly _orientation;
+    /** DOM placeholder element for inter-list drags */
+    private _placeholderElement;
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /** Checks if the given drag item is the one currently active in this list. */
     isDragActiveForThisList(dragItem: AXDragDirective): boolean;
     /**
@@ -190,8 +192,12 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
      * @returns The calculated placeholder index.
      */
     private _calculatePlaceholderIndex;
-    /** Applies `transform` styles to all items to create the visual sorting effect. */
+    /** Applies visual shifts - uses placeholder for inter-list, transforms for intra-list. */
     private _applyVisualShifts;
+    /** Creates or moves the placeholder element for inter-list drags */
+    private _updatePlaceholderElement;
+    /** Removes the placeholder element if it exists */
+    private _removePlaceholderElement;
     /**
      * Calculates the required transform in pixels for a single item.
      * @param index The index of the item to transform.

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

@@ -65,16 +65,24 @@ class AXDropListDirective extends NXComponent {
         this._listGap = signal(0, ...(ngDevMode ? [{ debugName: "_listGap" }] : []));
         /** A signal-based alias for the orientation input for internal use. */
         this._orientation = this.dropListOrientation;
+        /** DOM placeholder element for inter-list drags */
+        this._placeholderElement = null;
     }
     ngOnInit() {
         if (isPlatformBrowser(this._platformId)) {
             this.element.dataset['axDropList'] = 'true';
             this.element.classList.add('ax-drop-list-sorting-transition');
+            // Store reference to this directive instance on the element for drag directive access
+            this.element['__axContext__'] = this;
         }
     }
     ngAfterContentInit() {
         this._cdr.detectChanges();
     }
+    ngOnDestroy() {
+        // Clean up placeholder element if directive destroyed during drag
+        this._removePlaceholderElement();
+    }
     // --- Public Methods (for internal library use) ---
     /** Checks if the given drag item is the one currently active in this list. */
     isDragActiveForThisList(dragItem) {
@@ -104,6 +112,8 @@ class AXDropListDirective extends NXComponent {
     enter(dragItem) {
         if (!this.axDropList() || this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
             return;
+        // Clean up any existing placeholder from previous list
+        this._removePlaceholderElement();
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
         requestAnimationFrame(() => this._zone.run(() => this._cacheGeometry()));
@@ -267,38 +277,77 @@ class AXDropListDirective extends NXComponent {
         }
         return potentialPlaceholderIndex;
     }
-    /** Applies `transform` styles to all items to create the visual sorting effect. */
+    /** Applies visual shifts - uses placeholder for inter-list, transforms for intra-list. */
     _applyVisualShifts() {
         const activeItem = this._activeDragItem();
         const originalIndex = this._cachedItems().findIndex((d) => d.item === activeItem);
         const isIntraListDrag = originalIndex > -1;
-        // A helper to get the total space an item occupies (size + margins).
-        const getItemSpace = (itemData) => this._orientation() === 'vertical'
-            ? itemData.height + itemData.margins.top + itemData.margins.bottom
-            : itemData.width + itemData.margins.left + itemData.margins.right;
-        let draggedItemSize = 0;
-        if (isIntraListDrag) {
-            draggedItemSize = getItemSpace(this._cachedItems()[originalIndex]);
-        }
-        else if (activeItem) {
-            const rect = activeItem.elementRect();
-            if (rect) {
-                const style = window.getComputedStyle(activeItem.element());
-                draggedItemSize =
-                    this._orientation() === 'vertical'
-                        ? rect.height + parseFloat(style.marginTop) + parseFloat(style.marginBottom)
-                        : rect.width + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-            }
+        const placeholderIndex = this._placeholderIndex();
+        // Check if this is an "onto-node" drop list (no items, just a drop target)
+        const isOntoNodeList = this.element.dataset['dropType'] === 'onto-node';
+        if (!isIntraListDrag && activeItem && !isOntoNodeList && this._cachedItems().length > 0) {
+            // --- INTER-LIST DRAG: Use DOM placeholder for reorder lists with items ---
+            this._updatePlaceholderElement(activeItem, placeholderIndex);
         }
-        this._cachedItems().forEach((data, index) => {
-            // --- New logic: Do not transform disabled items ---
-            if (data.item.dragDisabled()) {
-                this._renderer.removeStyle(data.element, 'transform');
-                return;
+        else {
+            // --- INTRA-LIST DRAG: Use transforms (works well for same-list reordering) ---
+            this._removePlaceholderElement();
+            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()) {
+                    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)` : '');
+            });
+        }
+    }
+    /** Creates or moves the placeholder element for inter-list drags */
+    _updatePlaceholderElement(activeItem, targetIndex) {
+        const rect = activeItem.elementRect();
+        if (!rect)
+            return;
+        // Create placeholder as a clone of the dragged element
+        if (!this._placeholderElement) {
+            // Clone the entire dragged element
+            const sourceElement = activeItem.element();
+            this._placeholderElement = sourceElement.cloneNode(true);
+            // Mark it as a placeholder
+            this._renderer.addClass(this._placeholderElement, 'ax-drop-placeholder');
+            this._renderer.addClass(this._placeholderElement, 'ax-drag-placeholder');
+            // Prevent interaction with cloned content
+            this._renderer.setStyle(this._placeholderElement, 'pointerEvents', 'none');
+            // Add faded styling to indicate it's a placeholder
+            this._renderer.setStyle(this._placeholderElement, 'opacity', '0.4');
+            this._renderer.setStyle(this._placeholderElement, 'transition', 'all 200ms ease');
+        }
+        // Insert/move placeholder at target index
+        const items = this._cachedItems();
+        if (targetIndex >= 0 && targetIndex < items.length) {
+            const targetItem = items[targetIndex];
+            if (targetItem && targetItem.element) {
+                this._renderer.insertBefore(this.element, this._placeholderElement, targetItem.element);
             }
-            const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
-            this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
-        });
+            else {
+                // Fallback: append at end if target item invalid
+                this._renderer.appendChild(this.element, this._placeholderElement);
+            }
+        }
+        else {
+            // Insert at end
+            this._renderer.appendChild(this.element, this._placeholderElement);
+        }
+    }
+    /** Removes the placeholder element if it exists */
+    _removePlaceholderElement() {
+        if (this._placeholderElement) {
+            this._renderer.removeChild(this.element, this._placeholderElement);
+            this._placeholderElement = null;
+        }
     }
     /**
      * Calculates the required transform in pixels for a single item.
@@ -364,6 +413,7 @@ class AXDropListDirective extends NXComponent {
     /** Removes all `transform` styles from the items in this list. */
     _resetAllTransforms() {
         this._cachedItems().forEach((data) => this._renderer.setStyle(data.element, 'transform', ''));
+        this._removePlaceholderElement(); // Clean up inter-list placeholder
     }
     /** Resets the internal state of the directive to its initial values. */
     resetSortState() {
@@ -385,6 +435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }], propDecorators: { axDropList: [{ type: i0.Input, args: [{ isSignal: true, alias: "axDropList", required: false }] }], sortingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDisabled", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], dropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListOrientation", required: false }] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
 
+// Zone detection constants for nested drop lists (tree nodes)
+const ZONE_TOP_THRESHOLD = 0.3; // Top 30% triggers reorder BEFORE
+const ZONE_BOTTOM_THRESHOLD = 0.7; // Bottom 30% triggers reorder AFTER
+// Middle 40% (between thresholds) triggers drop INTO
 class AXDragDirective {
     constructor() {
         this.zone = inject(NgZone);
@@ -418,7 +472,6 @@ class AXDragDirective {
         this.dragStartTime = signal(0, ...(ngDevMode ? [{ debugName: "dragStartTime" }] : []));
         this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
         this.elementOpacity = signal('1', ...(ngDevMode ? [{ debugName: "elementOpacity" }] : []));
-        this.isDelayStarted = signal(false, ...(ngDevMode ? [{ debugName: "isDelayStarted" }] : []));
         this.movedAfterDelay = signal(false, ...(ngDevMode ? [{ debugName: "movedAfterDelay" }] : []));
         this.activePointerId = signal(null, ...(ngDevMode ? [{ debugName: "activePointerId" }] : []));
         this.prevDropZone = signal(null, ...(ngDevMode ? [{ debugName: "prevDropZone" }] : []));
@@ -552,7 +605,6 @@ class AXDragDirective {
     }
     handlePointerMove(e) {
         if (!this.isDragging() ||
-            this.isDelayStarted() ||
             !isPlatformBrowser(this.platformId) ||
             e.pointerId !== this.activePointerId()) {
             return;
@@ -796,10 +848,37 @@ class AXDragDirective {
             .map((el) => el['__axContext__']);
     }
     getDropListFromPoint(x, y) {
-        const dropListElement = this.document
+        const dropListElements = this.document
             .elementsFromPoint(x, y)
-            .find((el) => el instanceof HTMLElement && el.dataset['axDropList'] === 'true');
-        return dropListElement ? dropListElement['__axContext__'] : null;
+            .filter((el) => el instanceof HTMLElement && el.dataset['axDropList'] === 'true');
+        if (dropListElements.length === 0) {
+            return null;
+        }
+        // If only one drop list, use it
+        if (dropListElements.length === 1) {
+            return dropListElements[0]['__axContext__'];
+        }
+        // Multiple drop lists detected (nested scenario like tree2)
+        // Prioritize based on pointer position and drop type
+        const ontoNodeList = dropListElements.find((el) => el.dataset['dropType'] === 'onto-node');
+        const reorderList = dropListElements.find((el) => el.dataset['dropType'] !== 'onto-node');
+        // If no special handling needed, return first
+        if (!ontoNodeList || !reorderList) {
+            return dropListElements[0]['__axContext__'];
+        }
+        // Calculate pointer position relative to the "onto-node" element
+        const ontoNodeRect = ontoNodeList.getBoundingClientRect();
+        const relativeY = y - ontoNodeRect.top;
+        const heightRatio = relativeY / ontoNodeRect.height;
+        // Smart zone detection based on pointer position
+        if (heightRatio < ZONE_TOP_THRESHOLD || heightRatio > ZONE_BOTTOM_THRESHOLD) {
+            // Top or bottom zone: reorder (drop BEFORE/AFTER node)
+            return reorderList['__axContext__'];
+        }
+        else {
+            // Center zone: onto-node (drop INTO node as child)
+            return ontoNodeList['__axContext__'];
+        }
     }
     dropZoneValidation(dropZone) {
         if (!dropZone)
@@ -930,8 +1009,8 @@ class AXDragDirective {
                     try {
                         target.style.setProperty(propName, computedStyles.getPropertyValue(propName), computedStyles.getPropertyPriority(propName));
                     }
-                    catch (e) {
-                        console.log(e);
+                    catch {
+                        // Some CSS properties cannot be set directly, skip silently
                     }
                 }
             }