@lumino/dragdrop - npm Package Compare versions

Comparing version 1.13.1 to 1.14.0

dist/index.es6.js

@@ -88,2 +88,3 @@ import { DisposableDelegate } from '@lumino/disposable';
         this._resolve = null;
+        this.document = options.document || document;
         this.mimeData = options.mimeData;
@@ -348,3 +349,3 @@ this.dragImage = options.dragImage || null;
         // Find the current indicated element at the given position.
-        var currElem = document.elementFromPoint(event.clientX, event.clientY);
+        var currElem = this.document.elementFromPoint(event.clientX, event.clientY);
         // Update the current element reference.
@@ -392,3 +393,6 @@ this._currentElement = currElem;
         style.left = clientX + "px";
-        document.body.appendChild(this.dragImage);
+        var body = this.document instanceof Document
+            ? this.document.body
+            : this.document.firstElementChild;
+        body.appendChild(this.dragImage);
     };
@@ -421,15 +425,15 @@ /**
                 this._dropAction = action;
-                this._override = Drag.overrideCursor('no-drop');
+                this._override = Drag.overrideCursor('no-drop', this.document);
                 break;
             case 'copy':
                 this._dropAction = action;
-                this._override = Drag.overrideCursor('copy');
+                this._override = Drag.overrideCursor('copy', this.document);
                 break;
             case 'link':
                 this._dropAction = action;
-                this._override = Drag.overrideCursor('alias');
+                this._override = Drag.overrideCursor('alias', this.document);
                 break;
             case 'move':
                 this._dropAction = action;
-                this._override = Drag.overrideCursor('move');
+                this._override = Drag.overrideCursor('move', this.document);
                 break;
@@ -500,15 +504,19 @@ }
      */
-    function overrideCursor(cursor) {
+    function overrideCursor(cursor, doc) {
+        if (doc === void 0) { doc = document; }
         var id = ++overrideCursorID;
-        document.body.style.cursor = cursor;
-        document.body.classList.add('lm-mod-override-cursor');
+        var body = doc instanceof Document
+            ? doc.body
+            : doc.firstElementChild;
+        body.style.cursor = cursor;
+        body.classList.add('lm-mod-override-cursor');
         /* <DEPRECATED> */
-        document.body.classList.add('p-mod-override-cursor');
+        body.classList.add('p-mod-override-cursor');
         /* </DEPRECATED> */
         return new DisposableDelegate(function () {
             if (id === overrideCursorID) {
-                document.body.style.cursor = '';
-                document.body.classList.remove('lm-mod-override-cursor');
+                body.style.cursor = '';
+                body.classList.remove('lm-mod-override-cursor');
                 /* <DEPRECATED> */
-                document.body.classList.remove('p-mod-override-cursor');
+                body.classList.remove('p-mod-override-cursor');
                 /* </DEPRECATED> */
@@ -699,3 +707,6 @@ }
         // If the current element is the document body, keep the original target.
-        if (currElem === document.body) {
+        var body = drag.document instanceof Document
+            ? drag.document.body
+            : drag.document.firstElementChild;
+        if (currElem === body) {
             return currTarget;
@@ -705,9 +716,9 @@ }
         dragEvent = createDragEvent('lm-dragenter', drag, event, currTarget);
-        document.body.dispatchEvent(dragEvent);
+        body.dispatchEvent(dragEvent);
         /* <DEPRECATED> */
         dragEvent = createDragEvent('p-dragenter', drag, event, currTarget);
-        document.body.dispatchEvent(dragEvent);
+        body.dispatchEvent(dragEvent);
         /* </DEPRECATED> */
         // Ignore the event cancellation, and use the body as the new target.
-        return document.body;
+        return body;
     }
@@ -714,0 +725,0 @@ Private.dispatchDragEnter = dispatchDragEnter;

dist/index.js

@@ -92,2 +92,3 @@ (function (global, factory) {
             this._resolve = null;
+            this.document = options.document || document;
             this.mimeData = options.mimeData;
@@ -352,3 +353,3 @@ this.dragImage = options.dragImage || null;
             // Find the current indicated element at the given position.
-            var currElem = document.elementFromPoint(event.clientX, event.clientY);
+            var currElem = this.document.elementFromPoint(event.clientX, event.clientY);
             // Update the current element reference.
@@ -396,3 +397,6 @@ this._currentElement = currElem;
             style.left = clientX + "px";
-            document.body.appendChild(this.dragImage);
+            var body = this.document instanceof Document
+                ? this.document.body
+                : this.document.firstElementChild;
+            body.appendChild(this.dragImage);
         };
@@ -425,15 +429,15 @@ /**
                     this._dropAction = action;
-                    this._override = Drag.overrideCursor('no-drop');
+                    this._override = Drag.overrideCursor('no-drop', this.document);
                     break;
                 case 'copy':
                     this._dropAction = action;
-                    this._override = Drag.overrideCursor('copy');
+                    this._override = Drag.overrideCursor('copy', this.document);
                     break;
                 case 'link':
                     this._dropAction = action;
-                    this._override = Drag.overrideCursor('alias');
+                    this._override = Drag.overrideCursor('alias', this.document);
                     break;
                 case 'move':
                     this._dropAction = action;
-                    this._override = Drag.overrideCursor('move');
+                    this._override = Drag.overrideCursor('move', this.document);
                     break;
@@ -504,15 +508,19 @@ }
          */
-        function overrideCursor(cursor) {
+        function overrideCursor(cursor, doc) {
+            if (doc === void 0) { doc = document; }
             var id = ++overrideCursorID;
-            document.body.style.cursor = cursor;
-            document.body.classList.add('lm-mod-override-cursor');
+            var body = doc instanceof Document
+                ? doc.body
+                : doc.firstElementChild;
+            body.style.cursor = cursor;
+            body.classList.add('lm-mod-override-cursor');
             /* <DEPRECATED> */
-            document.body.classList.add('p-mod-override-cursor');
+            body.classList.add('p-mod-override-cursor');
             /* </DEPRECATED> */
             return new disposable.DisposableDelegate(function () {
                 if (id === overrideCursorID) {
-                    document.body.style.cursor = '';
-                    document.body.classList.remove('lm-mod-override-cursor');
+                    body.style.cursor = '';
+                    body.classList.remove('lm-mod-override-cursor');
                     /* <DEPRECATED> */
-                    document.body.classList.remove('p-mod-override-cursor');
+                    body.classList.remove('p-mod-override-cursor');
                     /* </DEPRECATED> */
@@ -703,3 +711,6 @@ }
             // If the current element is the document body, keep the original target.
-            if (currElem === document.body) {
+            var body = drag.document instanceof Document
+                ? drag.document.body
+                : drag.document.firstElementChild;
+            if (currElem === body) {
                 return currTarget;
@@ -709,9 +720,9 @@ }
             dragEvent = createDragEvent('lm-dragenter', drag, event, currTarget);
-            document.body.dispatchEvent(dragEvent);
+            body.dispatchEvent(dragEvent);
             /* <DEPRECATED> */
             dragEvent = createDragEvent('p-dragenter', drag, event, currTarget);
-            document.body.dispatchEvent(dragEvent);
+            body.dispatchEvent(dragEvent);
             /* </DEPRECATED> */
             // Ignore the event cancellation, and use the body as the new target.
-            return document.body;
+            return body;
         }
@@ -718,0 +729,0 @@ Private.dispatchDragEnter = dispatchDragEnter;

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@lumino/disposable")):"function"==typeof define&&define.amd?define(["exports","@lumino/disposable"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).lumino_dragdrop={},e.lumino_disposable)}(this,(function(e,t){"use strict";var o;e.Drag=function(){function e(e){var t=this;this._onScrollFrame=function(){if(t._scrollTarget){var e=t._scrollTarget,r=e.element,n=e.edge,i=e.distance,s=o.SCROLL_EDGE_SIZE-i,a=Math.pow(s/o.SCROLL_EDGE_SIZE,2),d=Math.max(1,Math.round(a*o.SCROLL_EDGE_SIZE));switch(n){case"top":r.scrollTop-=d;break;case"left":r.scrollLeft-=d;break;case"right":r.scrollLeft+=d;break;case"bottom":r.scrollTop+=d}requestAnimationFrame(t._onScrollFrame)}},this._disposed=!1,this._dropAction="none",this._override=null,this._currentTarget=null,this._currentElement=null,this._promise=null,this._scrollTarget=null,this._resolve=null,this.mimeData=e.mimeData,this.dragImage=e.dragImage||null,this.proposedAction=e.proposedAction||"copy",this.supportedActions=e.supportedActions||"all",this.source=e.source||null}return e.prototype.dispose=function(){if(!this._disposed){if(this._disposed=!0,this._currentTarget){var e=o.createMouseEvent("pointerup",-1,-1);o.dispatchDragLeave(this,this._currentTarget,null,e)}this._finalize("none")}},Object.defineProperty(e.prototype,"isDisposed",{get:function(){return this._disposed},enumerable:!0,configurable:!0}),e.prototype.start=function(e,t){var r=this;if(this._disposed)return Promise.resolve("none");if(this._promise)return this._promise;this._addListeners(),this._attachDragImage(e,t),this._promise=new Promise((function(e,t){r._resolve=e}));var n=o.createMouseEvent("pointermove",e,t);return document.dispatchEvent(n),this._promise},e.prototype.handleEvent=function(e){switch(e.type){case"mousemove":this._evtMouseMove(e);break;case"mouseup":this._evtMouseUp(e);break;case"pointermove":this._evtMouseMove(e);break;case"pointerup":this._evtMouseUp(e);break;case"keydown":this._evtKeyDown(e);break;default:e.preventDefault(),e.stopPropagation()}},e.prototype.moveDragImage=function(e,t){if(this.dragImage){var o=this.dragImage.style;o.top=t+"px",o.left=e+"px"}},e.prototype._evtMouseMove=function(e){e.preventDefault(),e.stopPropagation(),this._updateCurrentTarget(e),this._updateDragScroll(e),this.moveDragImage(e.clientX,e.clientY)},e.prototype._evtMouseUp=function(e){if(e.preventDefault(),e.stopPropagation(),0===e.button)if(this._updateCurrentTarget(e),this._currentTarget){if("none"===this._dropAction)return o.dispatchDragLeave(this,this._currentTarget,null,e),void this._finalize("none");var t=o.dispatchDrop(this,this._currentTarget,e);this._finalize(t)}else this._finalize("none")},e.prototype._evtKeyDown=function(e){e.preventDefault(),e.stopPropagation(),27===e.keyCode&&this.dispose()},e.prototype._addListeners=function(){document.addEventListener("mousedown",this,!0),document.addEventListener("mousemove",this,!0),document.addEventListener("mouseup",this,!0),document.addEventListener("mouseenter",this,!0),document.addEventListener("mouseleave",this,!0),document.addEventListener("mouseover",this,!0),document.addEventListener("mouseout",this,!0),document.addEventListener("pointerdown",this,!0),document.addEventListener("pointermove",this,!0),document.addEventListener("pointerup",this,!0),document.addEventListener("pointerenter",this,!0),document.addEventListener("pointerleave",this,!0),document.addEventListener("pointerover",this,!0),document.addEventListener("pointerout",this,!0),document.addEventListener("keydown",this,!0),document.addEventListener("keyup",this,!0),document.addEventListener("keypress",this,!0),document.addEventListener("contextmenu",this,!0)},e.prototype._removeListeners=function(){document.removeEventListener("mousedown",this,!0),document.removeEventListener("mousemove",this,!0),document.removeEventListener("mouseup",this,!0),document.removeEventListener("mouseenter",this,!0),document.removeEventListener("mouseleave",this,!0),document.removeEventListener("mouseover",this,!0),document.removeEventListener("mouseout",this,!0),document.removeEventListener("pointerdown",this,!0),document.removeEventListener("pointermove",this,!0),document.removeEventListener("pointerup",this,!0),document.removeEventListener("pointerenter",this,!0),document.removeEventListener("pointerleave",this,!0),document.removeEventListener("pointerover",this,!0),document.removeEventListener("pointerout",this,!0),document.removeEventListener("keydown",this,!0),document.removeEventListener("keyup",this,!0),document.removeEventListener("keypress",this,!0),document.removeEventListener("contextmenu",this,!0)},e.prototype._updateDragScroll=function(e){var t=o.findScrollTarget(e);(this._scrollTarget||t)&&(this._scrollTarget||setTimeout(this._onScrollFrame,500),this._scrollTarget=t)},e.prototype._updateCurrentTarget=function(e){var t=this._currentTarget,r=this._currentTarget,n=this._currentElement,i=document.elementFromPoint(e.clientX,e.clientY);this._currentElement=i,i!==n&&i!==r&&o.dispatchDragExit(this,r,i,e),i!==n&&i!==r&&(r=o.dispatchDragEnter(this,i,r,e)),r!==t&&(this._currentTarget=r,o.dispatchDragLeave(this,t,r,e));var s=o.dispatchDragOver(this,r,e);this._setDropAction(s)},e.prototype._attachDragImage=function(e,t){if(this.dragImage){this.dragImage.classList.add("lm-mod-drag-image"),this.dragImage.classList.add("p-mod-drag-image");var o=this.dragImage.style;o.pointerEvents="none",o.position="fixed",o.top=t+"px",o.left=e+"px",document.body.appendChild(this.dragImage)}},e.prototype._detachDragImage=function(){if(this.dragImage){var e=this.dragImage.parentNode;e&&e.removeChild(this.dragImage)}},e.prototype._setDropAction=function(t){if(t=o.validateAction(t,this.supportedActions),!this._override||this._dropAction!==t)switch(t){case"none":this._dropAction=t,this._override=e.overrideCursor("no-drop");break;case"copy":this._dropAction=t,this._override=e.overrideCursor("copy");break;case"link":this._dropAction=t,this._override=e.overrideCursor("alias");break;case"move":this._dropAction=t,this._override=e.overrideCursor("move")}},e.prototype._finalize=function(e){var t=this._resolve;this._removeListeners(),this._detachDragImage(),this._override&&(this._override.dispose(),this._override=null),this.mimeData.clear(),this._disposed=!0,this._dropAction="none",this._currentTarget=null,this._currentElement=null,this._scrollTarget=null,this._promise=null,this._resolve=null,t&&t(e)},e}(),function(e){e.overrideCursor=function(e){var r=++o;return document.body.style.cursor=e,document.body.classList.add("lm-mod-override-cursor"),document.body.classList.add("p-mod-override-cursor"),new t.DisposableDelegate((function(){r===o&&(document.body.style.cursor="",document.body.classList.remove("lm-mod-override-cursor"),document.body.classList.remove("p-mod-override-cursor"))}))};var o=0}(e.Drag||(e.Drag={})),function(e){e.SCROLL_EDGE_SIZE=20,e.validateAction=function(e,r){return t[e]&o[r]?e:"none"},e.createMouseEvent=function(e,t,o){var r=document.createEvent("MouseEvent");return r.initMouseEvent(e,!0,!0,window,0,0,0,t,o,!1,!1,!1,!1,0,null),r},e.findScrollTarget=function(t){for(var o=t.clientX,r=t.clientY,n=document.elementFromPoint(o,r);n;n=n.parentElement){var i=n.hasAttribute("data-lm-dragscroll");if(i=i||n.hasAttribute("data-p-dragscroll")){var s=0,a=0;n===document.body&&(s=window.pageXOffset,a=window.pageYOffset);var d=n.getBoundingClientRect(),c=d.top+a,u=d.left+s,p=u+d.width,l=c+d.height;if(!(o<u||o>=p||r<c||r>=l)){var m=o-u+1,h=r-c+1,v=p-o,g=l-r,f=Math.min(m,h,v,g);if(!(f>e.SCROLL_EDGE_SIZE)){var _=void 0;switch(f){case g:_="bottom";break;case h:_="top";break;case v:_="right";break;case m:_="left";break;default:throw"unreachable"}var E=n.scrollWidth-n.clientWidth,y=n.scrollHeight-n.clientHeight,L=void 0;switch(_){case"top":L=y>0&&n.scrollTop>0;break;case"left":L=E>0&&n.scrollLeft>0;break;case"right":L=E>0&&n.scrollLeft<E;break;case"bottom":L=y>0&&n.scrollTop<y;break;default:throw"unreachable"}if(L)return{element:n,edge:_,distance:f}}}}}return null},e.dispatchDragEnter=function(e,t,o,n){if(!t)return null;var i=r("lm-dragenter",e,n,o),s=!t.dispatchEvent(i);return s?t:(i=r("p-dragenter",e,n,o),(s=!t.dispatchEvent(i))?t:t===document.body?o:(i=r("lm-dragenter",e,n,o),document.body.dispatchEvent(i),i=r("p-dragenter",e,n,o),document.body.dispatchEvent(i),document.body))},e.dispatchDragExit=function(e,t,o,n){if(t){var i=r("lm-dragexit",e,n,o);t.dispatchEvent(i),i=r("p-dragexit",e,n,o),t.dispatchEvent(i)}},e.dispatchDragLeave=function(e,t,o,n){if(t){var i=r("lm-dragleave",e,n,o);t.dispatchEvent(i),i=r("p-dragleave",e,n,o),t.dispatchEvent(i)}},e.dispatchDragOver=function(e,t,o){if(!t)return"none";var n=r("lm-dragover",e,o,null),i=!t.dispatchEvent(n);return i?n.dropAction:(n=r("p-dragover",e,o,null),(i=!t.dispatchEvent(n))?n.dropAction:"none")},e.dispatchDrop=function(e,t,o){if(!t)return"none";var n=r("lm-drop",e,o,null),i=!t.dispatchEvent(n);return i?n.dropAction:(n=r("p-drop",e,o,null),(i=!t.dispatchEvent(n))?n.dropAction:"none")};var t={none:0,copy:1,link:2,move:4},o={none:t.none,copy:t.copy,link:t.link,move:t.move,"copy-link":t.copy|t.link,"copy-move":t.copy|t.move,"link-move":t.link|t.move,all:t.copy|t.link|t.move};function r(e,t,o,r){var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,!0,!0,window,0,o.screenX,o.screenY,o.clientX,o.clientY,o.ctrlKey,o.altKey,o.shiftKey,o.metaKey,o.button,r),n.dropAction="none",n.mimeData=t.mimeData,n.proposedAction=t.proposedAction,n.supportedActions=t.supportedActions,n.source=t.source,n}}(o||(o={})),Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@lumino/disposable")):"function"==typeof define&&define.amd?define(["exports","@lumino/disposable"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).lumino_dragdrop={},e.lumino_disposable)}(this,(function(e,t){"use strict";var o;e.Drag=function(){function e(e){var t=this;this._onScrollFrame=function(){if(t._scrollTarget){var e=t._scrollTarget,r=e.element,n=e.edge,i=e.distance,s=o.SCROLL_EDGE_SIZE-i,a=Math.pow(s/o.SCROLL_EDGE_SIZE,2),d=Math.max(1,Math.round(a*o.SCROLL_EDGE_SIZE));switch(n){case"top":r.scrollTop-=d;break;case"left":r.scrollLeft-=d;break;case"right":r.scrollLeft+=d;break;case"bottom":r.scrollTop+=d}requestAnimationFrame(t._onScrollFrame)}},this._disposed=!1,this._dropAction="none",this._override=null,this._currentTarget=null,this._currentElement=null,this._promise=null,this._scrollTarget=null,this._resolve=null,this.document=e.document||document,this.mimeData=e.mimeData,this.dragImage=e.dragImage||null,this.proposedAction=e.proposedAction||"copy",this.supportedActions=e.supportedActions||"all",this.source=e.source||null}return e.prototype.dispose=function(){if(!this._disposed){if(this._disposed=!0,this._currentTarget){var e=o.createMouseEvent("pointerup",-1,-1);o.dispatchDragLeave(this,this._currentTarget,null,e)}this._finalize("none")}},Object.defineProperty(e.prototype,"isDisposed",{get:function(){return this._disposed},enumerable:!0,configurable:!0}),e.prototype.start=function(e,t){var r=this;if(this._disposed)return Promise.resolve("none");if(this._promise)return this._promise;this._addListeners(),this._attachDragImage(e,t),this._promise=new Promise((function(e,t){r._resolve=e}));var n=o.createMouseEvent("pointermove",e,t);return document.dispatchEvent(n),this._promise},e.prototype.handleEvent=function(e){switch(e.type){case"mousemove":this._evtMouseMove(e);break;case"mouseup":this._evtMouseUp(e);break;case"pointermove":this._evtMouseMove(e);break;case"pointerup":this._evtMouseUp(e);break;case"keydown":this._evtKeyDown(e);break;default:e.preventDefault(),e.stopPropagation()}},e.prototype.moveDragImage=function(e,t){if(this.dragImage){var o=this.dragImage.style;o.top=t+"px",o.left=e+"px"}},e.prototype._evtMouseMove=function(e){e.preventDefault(),e.stopPropagation(),this._updateCurrentTarget(e),this._updateDragScroll(e),this.moveDragImage(e.clientX,e.clientY)},e.prototype._evtMouseUp=function(e){if(e.preventDefault(),e.stopPropagation(),0===e.button)if(this._updateCurrentTarget(e),this._currentTarget){if("none"===this._dropAction)return o.dispatchDragLeave(this,this._currentTarget,null,e),void this._finalize("none");var t=o.dispatchDrop(this,this._currentTarget,e);this._finalize(t)}else this._finalize("none")},e.prototype._evtKeyDown=function(e){e.preventDefault(),e.stopPropagation(),27===e.keyCode&&this.dispose()},e.prototype._addListeners=function(){document.addEventListener("mousedown",this,!0),document.addEventListener("mousemove",this,!0),document.addEventListener("mouseup",this,!0),document.addEventListener("mouseenter",this,!0),document.addEventListener("mouseleave",this,!0),document.addEventListener("mouseover",this,!0),document.addEventListener("mouseout",this,!0),document.addEventListener("pointerdown",this,!0),document.addEventListener("pointermove",this,!0),document.addEventListener("pointerup",this,!0),document.addEventListener("pointerenter",this,!0),document.addEventListener("pointerleave",this,!0),document.addEventListener("pointerover",this,!0),document.addEventListener("pointerout",this,!0),document.addEventListener("keydown",this,!0),document.addEventListener("keyup",this,!0),document.addEventListener("keypress",this,!0),document.addEventListener("contextmenu",this,!0)},e.prototype._removeListeners=function(){document.removeEventListener("mousedown",this,!0),document.removeEventListener("mousemove",this,!0),document.removeEventListener("mouseup",this,!0),document.removeEventListener("mouseenter",this,!0),document.removeEventListener("mouseleave",this,!0),document.removeEventListener("mouseover",this,!0),document.removeEventListener("mouseout",this,!0),document.removeEventListener("pointerdown",this,!0),document.removeEventListener("pointermove",this,!0),document.removeEventListener("pointerup",this,!0),document.removeEventListener("pointerenter",this,!0),document.removeEventListener("pointerleave",this,!0),document.removeEventListener("pointerover",this,!0),document.removeEventListener("pointerout",this,!0),document.removeEventListener("keydown",this,!0),document.removeEventListener("keyup",this,!0),document.removeEventListener("keypress",this,!0),document.removeEventListener("contextmenu",this,!0)},e.prototype._updateDragScroll=function(e){var t=o.findScrollTarget(e);(this._scrollTarget||t)&&(this._scrollTarget||setTimeout(this._onScrollFrame,500),this._scrollTarget=t)},e.prototype._updateCurrentTarget=function(e){var t=this._currentTarget,r=this._currentTarget,n=this._currentElement,i=this.document.elementFromPoint(e.clientX,e.clientY);this._currentElement=i,i!==n&&i!==r&&o.dispatchDragExit(this,r,i,e),i!==n&&i!==r&&(r=o.dispatchDragEnter(this,i,r,e)),r!==t&&(this._currentTarget=r,o.dispatchDragLeave(this,t,r,e));var s=o.dispatchDragOver(this,r,e);this._setDropAction(s)},e.prototype._attachDragImage=function(e,t){if(this.dragImage){this.dragImage.classList.add("lm-mod-drag-image"),this.dragImage.classList.add("p-mod-drag-image");var o=this.dragImage.style;o.pointerEvents="none",o.position="fixed",o.top=t+"px",o.left=e+"px",(this.document instanceof Document?this.document.body:this.document.firstElementChild).appendChild(this.dragImage)}},e.prototype._detachDragImage=function(){if(this.dragImage){var e=this.dragImage.parentNode;e&&e.removeChild(this.dragImage)}},e.prototype._setDropAction=function(t){if(t=o.validateAction(t,this.supportedActions),!this._override||this._dropAction!==t)switch(t){case"none":this._dropAction=t,this._override=e.overrideCursor("no-drop",this.document);break;case"copy":this._dropAction=t,this._override=e.overrideCursor("copy",this.document);break;case"link":this._dropAction=t,this._override=e.overrideCursor("alias",this.document);break;case"move":this._dropAction=t,this._override=e.overrideCursor("move",this.document)}},e.prototype._finalize=function(e){var t=this._resolve;this._removeListeners(),this._detachDragImage(),this._override&&(this._override.dispose(),this._override=null),this.mimeData.clear(),this._disposed=!0,this._dropAction="none",this._currentTarget=null,this._currentElement=null,this._scrollTarget=null,this._promise=null,this._resolve=null,t&&t(e)},e}(),function(e){e.overrideCursor=function(e,r){void 0===r&&(r=document);var n=++o,i=r instanceof Document?r.body:r.firstElementChild;return i.style.cursor=e,i.classList.add("lm-mod-override-cursor"),i.classList.add("p-mod-override-cursor"),new t.DisposableDelegate((function(){n===o&&(i.style.cursor="",i.classList.remove("lm-mod-override-cursor"),i.classList.remove("p-mod-override-cursor"))}))};var o=0}(e.Drag||(e.Drag={})),function(e){e.SCROLL_EDGE_SIZE=20,e.validateAction=function(e,r){return t[e]&o[r]?e:"none"},e.createMouseEvent=function(e,t,o){var r=document.createEvent("MouseEvent");return r.initMouseEvent(e,!0,!0,window,0,0,0,t,o,!1,!1,!1,!1,0,null),r},e.findScrollTarget=function(t){for(var o=t.clientX,r=t.clientY,n=document.elementFromPoint(o,r);n;n=n.parentElement){var i=n.hasAttribute("data-lm-dragscroll");if(i=i||n.hasAttribute("data-p-dragscroll")){var s=0,a=0;n===document.body&&(s=window.pageXOffset,a=window.pageYOffset);var d=n.getBoundingClientRect(),c=d.top+a,u=d.left+s,p=u+d.width,l=c+d.height;if(!(o<u||o>=p||r<c||r>=l)){var h=o-u+1,m=r-c+1,v=p-o,g=l-r,f=Math.min(h,m,v,g);if(!(f>e.SCROLL_EDGE_SIZE)){var _=void 0;switch(f){case g:_="bottom";break;case m:_="top";break;case v:_="right";break;case h:_="left";break;default:throw"unreachable"}var E=n.scrollWidth-n.clientWidth,L=n.scrollHeight-n.clientHeight,y=void 0;switch(_){case"top":y=L>0&&n.scrollTop>0;break;case"left":y=E>0&&n.scrollLeft>0;break;case"right":y=E>0&&n.scrollLeft<E;break;case"bottom":y=L>0&&n.scrollTop<L;break;default:throw"unreachable"}if(y)return{element:n,edge:_,distance:f}}}}}return null},e.dispatchDragEnter=function(e,t,o,n){if(!t)return null;var i=r("lm-dragenter",e,n,o),s=!t.dispatchEvent(i);if(s)return t;if(i=r("p-dragenter",e,n,o),s=!t.dispatchEvent(i))return t;var a=e.document instanceof Document?e.document.body:e.document.firstElementChild;return t===a?o:(i=r("lm-dragenter",e,n,o),a.dispatchEvent(i),i=r("p-dragenter",e,n,o),a.dispatchEvent(i),a)},e.dispatchDragExit=function(e,t,o,n){if(t){var i=r("lm-dragexit",e,n,o);t.dispatchEvent(i),i=r("p-dragexit",e,n,o),t.dispatchEvent(i)}},e.dispatchDragLeave=function(e,t,o,n){if(t){var i=r("lm-dragleave",e,n,o);t.dispatchEvent(i),i=r("p-dragleave",e,n,o),t.dispatchEvent(i)}},e.dispatchDragOver=function(e,t,o){if(!t)return"none";var n=r("lm-dragover",e,o,null),i=!t.dispatchEvent(n);return i?n.dropAction:(n=r("p-dragover",e,o,null),(i=!t.dispatchEvent(n))?n.dropAction:"none")},e.dispatchDrop=function(e,t,o){if(!t)return"none";var n=r("lm-drop",e,o,null),i=!t.dispatchEvent(n);return i?n.dropAction:(n=r("p-drop",e,o,null),(i=!t.dispatchEvent(n))?n.dropAction:"none")};var t={none:0,copy:1,link:2,move:4},o={none:t.none,copy:t.copy,link:t.link,move:t.move,"copy-link":t.copy|t.link,"copy-move":t.copy|t.move,"link-move":t.link|t.move,all:t.copy|t.link|t.move};function r(e,t,o,r){var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,!0,!0,window,0,o.screenX,o.screenY,o.clientX,o.clientY,o.ctrlKey,o.altKey,o.shiftKey,o.metaKey,o.button,r),n.dropAction="none",n.mimeData=t.mimeData,n.proposedAction=t.proposedAction,n.supportedActions=t.supportedActions,n.source=t.source,n}}(o||(o={})),Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.min.js.map

package.json

 {
   "name": "@lumino/dragdrop",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "Lumino Drag and Drop",
@@ -52,3 +52,3 @@ "homepage": "https://github.com/jupyterlab/lumino",
   "dependencies": {
-    "@lumino/coreutils": "^1.11.1",
+    "@lumino/coreutils": "^1.12.0",
     "@lumino/disposable": "^1.10.1"
@@ -55,0 +55,0 @@ },

src/index.ts

@@ -135,2 +135,3 @@ // Copyright (c) Jupyter Development Team.
   constructor(options: Drag.IOptions) {
+    this.document = options.document || document;
     this.mimeData = options.mimeData;
@@ -172,2 +173,7 @@ this.dragImage = options.dragImage || null;
   /**
+   * The target document for dragging events.
+   */
+  readonly document: Document | ShadowRoot;
+
+  /**
    * The drag image element for the drag object.
@@ -449,3 +455,3 @@ */
     // Find the current indicated element at the given position.
-    let currElem = document.elementFromPoint(event.clientX, event.clientY);
+    let currElem = this.document.elementFromPoint(event.clientX, event.clientY);
 
@@ -499,3 +505,7 @@ // Update the current element reference.
     style.left = `${clientX}px`;
-    document.body.appendChild(this.dragImage);
+    const body =
+      this.document instanceof Document
+        ? this.document.body
+        : (this.document.firstElementChild as HTMLElement);
+    body.appendChild(this.dragImage);
   }
@@ -530,15 +540,15 @@
         this._dropAction = action;
-        this._override = Drag.overrideCursor('no-drop');
+        this._override = Drag.overrideCursor('no-drop', this.document);
         break;
       case 'copy':
         this._dropAction = action;
-        this._override = Drag.overrideCursor('copy');
+        this._override = Drag.overrideCursor('copy', this.document);
         break;
       case 'link':
         this._dropAction = action;
-        this._override = Drag.overrideCursor('alias');
+        this._override = Drag.overrideCursor('alias', this.document);
         break;
       case 'move':
         this._dropAction = action;
-        this._override = Drag.overrideCursor('move');
+        this._override = Drag.overrideCursor('move', this.document);
         break;
@@ -641,2 +651,7 @@ }
     /**
+     * The root element for dragging DOM artifacts (defaults to document).
+     */
+    document?: Document | ShadowRoot;
+
+    /**
      * The populated mime data for the drag operation.
@@ -728,15 +743,22 @@ */
    */
-  export function overrideCursor(cursor: string): IDisposable {
+  export function overrideCursor(
+    cursor: string,
+    doc: Document | ShadowRoot = document
+  ): IDisposable {
     let id = ++overrideCursorID;
-    document.body.style.cursor = cursor;
-    document.body.classList.add('lm-mod-override-cursor');
+    const body =
+      doc instanceof Document
+        ? doc.body
+        : (doc.firstElementChild as HTMLElement);
+    body.style.cursor = cursor;
+    body.classList.add('lm-mod-override-cursor');
     /* <DEPRECATED> */
-    document.body.classList.add('p-mod-override-cursor');
+    body.classList.add('p-mod-override-cursor');
     /* </DEPRECATED> */
     return new DisposableDelegate(() => {
       if (id === overrideCursorID) {
-        document.body.style.cursor = '';
-        document.body.classList.remove('lm-mod-override-cursor');
+        body.style.cursor = '';
+        body.classList.remove('lm-mod-override-cursor');
         /* <DEPRECATED> */
-        document.body.classList.remove('p-mod-override-cursor');
+        body.classList.remove('p-mod-override-cursor');
         /* </DEPRECATED> */
@@ -995,3 +1017,8 @@ }
     // If the current element is the document body, keep the original target.
-    if (currElem === document.body) {
+    const body =
+      drag.document instanceof Document
+        ? drag.document.body
+        : (drag.document.firstElementChild as HTMLElement);
+
+    if (currElem === body) {
       return currTarget;
@@ -1002,11 +1029,11 @@ }
     dragEvent = createDragEvent('lm-dragenter', drag, event, currTarget);
-    document.body.dispatchEvent(dragEvent);
+    body.dispatchEvent(dragEvent);
 
     /* <DEPRECATED> */
     dragEvent = createDragEvent('p-dragenter', drag, event, currTarget);
-    document.body.dispatchEvent(dragEvent);
+    body.dispatchEvent(dragEvent);
     /* </DEPRECATED> */
 
     // Ignore the event cancellation, and use the body as the new target.
-    return document.body;
+    return body;
   }
@@ -1013,0 +1040,0 @@

types/index.d.ts

@@ -124,2 +124,6 @@ import { MimeData } from '@lumino/coreutils';
     /**
+     * The target document for dragging events.
+     */
+    readonly document: Document | ShadowRoot;
+    /**
      * The drag image element for the drag object.
@@ -253,2 +257,6 @@ */
         /**
+         * The root element for dragging DOM artifacts (defaults to document).
+         */
+        document?: Document | ShadowRoot;
+        /**
          * The populated mime data for the drag operation.
@@ -335,4 +343,4 @@ */
      */
-    function overrideCursor(cursor: string): IDisposable;
+    function overrideCursor(cursor: string, doc?: Document | ShadowRoot): IDisposable;
 }
 //# sourceMappingURL=index.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

313414

increased by1.8%

Lines of code

3376

increased by1.66%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@lumino/coreutils@^1.12.0