@syncfusion/ej2-filemanager 33.2.3 → 33.2.4

package/dist/es6/ej2-filemanager.es2015.js

@@ -5299,9 +5299,11 @@ class LargeIconsView {
                     }
                 }
             }
-            const targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
-            if (targetItem) {
-                this.addFocus(targetItem);
+            if (this.parent.activeModule !== 'navigationpane') {
+                const targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
+                if (targetItem) {
+                    this.addFocus(targetItem);
+                }
             }
         }
     }
@@ -7056,10 +7058,16 @@ class ContextMenu {
             }
             else if (!isNullOrUndefined(closest(target, 'tr.e-row'))) {
                 uid = this.targetElement.getAttribute('data-uid');
-                data = this.parent.detailsviewModule.gridObj.getRowObjectFromUID(uid).data;
-                if (isNullOrUndefined(this.targetElement.getAttribute('aria-selected'))) {
-                    /* istanbul ignore next */
-                    this.parent.detailsviewModule.gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10) - 1]);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const gridObj = this.parent.detailsviewModule && this.parent.detailsviewModule.gridObj;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const rowObj = (!isNullOrUndefined(uid) && !isNullOrUndefined(gridObj)) ? gridObj.getRowObjectFromUID(uid) : null;
+                if (!isNullOrUndefined(rowObj)) {
+                    data = rowObj.data;
+                    if (isNullOrUndefined(this.targetElement.getAttribute('aria-selected'))) {
+                        /* istanbul ignore next */
+                        gridObj.selectRows([parseInt(this.targetElement.getAttribute('aria-rowindex'), 10) - 1]);
+                    }
                 }
                 selected = true;
                 /* istanbul ignore next */
@@ -7255,10 +7263,12 @@ class ContextMenu {
         this.menuType = 'layout';
         this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.layout.map((item) => item.trim()));
         this.contextMenu.dataBind();
-        if (!this.parent.allowMultiSelection || ((this.parent.view === 'LargeIcons' &&
-            (closest(target, '#' + this.parent.element.id + LARGEICON_ID).getElementsByClassName(EMPTY).length !== 0))
-            || (this.parent.view === 'Details' &&
-                (closest(target, '#' + this.parent.element.id + GRID_ID).getElementsByClassName(EMPTY).length !== 0)))) {
+        const largeIconsEle = closest(target, '#' + this.parent.element.id + LARGEICON_ID);
+        const detailsViewEle = closest(target, '#' + this.parent.element.id + GRID_ID);
+        if (!this.parent.allowMultiSelection || ((this.parent.view === 'LargeIcons' && !isNullOrUndefined(largeIconsEle) &&
+            (largeIconsEle.getElementsByClassName(EMPTY).length !== 0))
+            || (this.parent.view === 'Details' && !isNullOrUndefined(detailsViewEle) &&
+                (detailsViewEle.getElementsByClassName(EMPTY).length !== 0)))) {
             this.disabledItems.push('SelectAll');
         }
         else {
@@ -8470,41 +8480,74 @@ let FileManager = FileManager_1 = class FileManager extends Component {
                     return;
                 }
             }
+            const contentElem = this.viewElem.firstChild;
+            const isLargeIcons = this.viewElem.classList.contains('e-large-icons');
+            if (isLargeIcons) {
+                this.dragContainer = (contentElem && contentElem.tagName === 'UL') ? contentElem : this.viewElem;
+            }
+            else {
+                this.dragContainer = this.viewElem.firstChild;
+            }
+            if (!this.dragContainer) {
+                return;
+            }
             event.preventDefault();
-            this.dragX = event.pageX;
-            this.dragY = event.pageY;
+            this.lastDragEvent = event;
+            const ulRect = this.dragContainer.getBoundingClientRect();
+            this.dragX = event.clientX - ulRect.left - this.dragContainer.clientLeft + this.dragContainer.scrollLeft;
+            this.dragY = event.clientY - ulRect.top - this.dragContainer.clientTop + this.dragContainer.scrollTop;
             if (!this.dragSelectElement) {
                 this.dragSelectElement = createElement('div', {
                     id: this.element.id + '_drag',
-                    className: 'e-filemanager e-drag-select',
-                    styles: 'left: ' + this.dragX + 'px;top: ' + this.dragY + 'px;'
+                    className: 'e-filemanager e-drag-select'
+                });
+                setStyleAttribute(this.dragSelectElement, {
+                    position: 'absolute',
+                    left: this.dragX + 'px',
+                    top: this.dragY + 'px',
+                    width: '0px',
+                    height: '0px',
+                    pointerEvents: 'none'
                 });
-                document.body.append(this.dragSelectElement);
+                this.dragContainer.appendChild(this.dragSelectElement);
+                this.dragContainer.style.position = 'relative';
             }
+            EventHandler.add(this.dragContainer, 'scroll', this.onDragScroll, this);
             EventHandler.add(document, 'mouseup', this.onDragStop, this);
-            EventHandler.add(this.viewElem, 'mousemove', this.onDrag, this);
+            EventHandler.add(this.dragContainer, 'mousemove', this.onDrag, this);
             EventHandler.add(this.dragSelectElement, 'mousemove', this.onDrag, this);
         }
     }
     onDrag(event) {
+        this.lastDragEvent = event;
         event.stopPropagation();
-        if (this.dragSelectElement) {
-            const diffX = event.pageX - this.dragX;
-            const diffY = event.pageY - this.dragY;
+        if (this.dragSelectElement && this.dragContainer) {
+            const ulRect = this.dragContainer.getBoundingClientRect();
+            const currentX = event.clientX - ulRect.left - this.dragContainer.clientLeft + this.dragContainer.scrollLeft;
+            const currentY = event.clientY - ulRect.top - this.dragContainer.clientTop + this.dragContainer.scrollTop;
             setStyleAttribute(this.dragSelectElement, {
-                'left': diffX < 0 ? this.dragX + diffX + 'px' : this.dragX + 'px', 'top': diffY < 0 ? this.dragY + diffY + 'px' : this.dragY + 'px',
-                'height': Math.abs(diffY) + 'px', 'width': Math.abs(diffX) + 'px'
+                left: Math.min(this.dragX, currentX) + 'px',
+                top: Math.min(this.dragY, currentY) + 'px',
+                height: Math.abs(currentY - this.dragY) + 'px',
+                width: Math.abs(currentX - this.dragX) + 'px'
             });
             this.selectItems();
         }
-        else {
-            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        else if (this.dragContainer) {
+            EventHandler.remove(this.dragContainer, 'mousemove', this.onDrag);
         }
     }
+    onDragScroll() {
+        if (!this.dragSelectElement || !this.lastDragEvent) {
+            return;
+        }
+        this.onDrag(this.lastDragEvent);
+    }
     onDragStop() {
-        if (this.viewElem) {
-            EventHandler.remove(document, 'mouseup', this.onDragStop);
-            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        EventHandler.remove(document, 'mouseup', this.onDragStop);
+        if (this.dragContainer) {
+            EventHandler.remove(this.dragContainer, 'mousemove', this.onDrag);
+            EventHandler.remove(this.dragContainer, 'scroll', this.onDragScroll);
         }
         if (this.dragSelectElement) {
             EventHandler.remove(this.dragSelectElement, 'mousemove', this.onDrag);
@@ -8515,6 +8558,7 @@ let FileManager = FileManager_1 = class FileManager extends Component {
             detach(this.dragSelectElement);
             this.dragSelectElement = null;
         }
+        this.dragContainer = null;
     }
     selectItems() {
         const dragRect = this.dragSelectElement.getBoundingClientRect();