@lumino/dragdrop - npm Package Compare versions

Comparing version 2.0.0-alpha.6 to 2.0.0-alpha.7

dist/index.es6.js

@@ -212,4 +212,3 @@ import { DisposableDelegate } from '@lumino/disposable';
         let style = this.dragImage.style;
-        style.top = `${clientY}px`;
-        style.left = `${clientX}px`;
+        style.transform = `translate(${clientX}px, ${clientY}px)`;
     }
@@ -333,3 +332,3 @@ /**
         // Find the current indicated element at the given position.
-        let currElem = this.document.elementFromPoint(event.clientX, event.clientY);
+        let currElem = Private.findElementBehidBackdrop(event, this.document);
         // Update the current element reference.
@@ -372,4 +371,3 @@ this._currentElement = currElem;
         style.position = 'fixed';
-        style.top = `${clientY}px`;
-        style.left = `${clientX}px`;
+        style.transform = `translate(${clientX}px, ${clientY}px)`;
         const body = this.document instanceof Document
@@ -519,20 +517,5 @@ ? this.document.body
     function overrideCursor(cursor, doc = document) {
-        let id = ++overrideCursorID;
-        const body = doc instanceof Document
-            ? doc.body
-            : doc.firstElementChild;
-        body.style.cursor = cursor;
-        body.classList.add('lm-mod-override-cursor');
-        return new DisposableDelegate(() => {
-            if (id === overrideCursorID) {
-                body.style.cursor = '';
-                body.classList.remove('lm-mod-override-cursor');
-            }
-        });
+        return Private.overrideCursor(cursor, doc);
     }
     Drag.overrideCursor = overrideCursor;
-    /**
-     * The internal id for the active cursor override.
-     */
-    let overrideCursorID = 0;
 })(Drag || (Drag = {}));
@@ -558,2 +541,18 @@ /**
     /**
+     * Find the event target using pointer position.
+     */
+    function findElementBehidBackdrop(event, root = document) {
+        // Check if we already cached element for this event.
+        if (lastElementSearch && event == lastElementSearch.event) {
+            return lastElementSearch.element;
+        }
+        Private.cursorBackdrop.style.zIndex = '-1000';
+        const element = root.elementFromPoint(event.clientX, event.clientY);
+        Private.cursorBackdrop.style.zIndex = '';
+        lastElementSearch = { event, element };
+        return element;
+    }
+    Private.findElementBehidBackdrop = findElementBehidBackdrop;
+    let lastElementSearch = null;
+    /**
      * Find the drag scroll target under the mouse, if any.
@@ -566,3 +565,3 @@ */
         // Get the element under the mouse.
-        let element = document.elementFromPoint(x, y);
+        let element = findElementBehidBackdrop(event);
         // Search for a scrollable target based on the mouse position.
@@ -865,2 +864,57 @@ // The null assert in third clause of for-loop is required due to:
     };
+    /**
+     * Implementation of `Drag.overrideCursor`.
+     */
+    function overrideCursor(cursor, doc = document) {
+        let id = ++overrideCursorID;
+        const body = doc instanceof Document
+            ? doc.body
+            : doc.firstElementChild;
+        if (!Private.cursorBackdrop.isConnected) {
+            body.appendChild(Private.cursorBackdrop);
+            document.addEventListener('pointermove', alignBackdrop, {
+                capture: true,
+                passive: true
+            });
+        }
+        Private.cursorBackdrop.style.cursor = cursor;
+        return new DisposableDelegate(() => {
+            if (id === overrideCursorID && Private.cursorBackdrop.isConnected) {
+                document.removeEventListener('pointermove', alignBackdrop, true);
+                body.removeChild(Private.cursorBackdrop);
+            }
+        });
+    }
+    Private.overrideCursor = overrideCursor;
+    /**
+     * Move cursor backdrop to match cursor position.
+     */
+    function alignBackdrop(event) {
+        if (!Private.cursorBackdrop) {
+            return;
+        }
+        Private.cursorBackdrop.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+    }
+    /**
+     * Create cursor backdrop node.
+     */
+    function createCursorBackdrop() {
+        const backdrop = document.createElement('div');
+        backdrop.classList.add('lm-cursor-backdrop');
+        return backdrop;
+    }
+    /**
+     * The internal id for the active cursor override.
+     */
+    let overrideCursorID = 0;
+    /**
+     * A backdrop node overriding pointer cursor.
+     *
+     * #### Notes
+     * We use a backdrop node rather than setting the cursor directly on the body
+     * because setting it on body requires more extensive style recalculation for
+     * reliable application of the cursor, this is the cursor not being overriden
+     * when over child elements with another style like `cursor: other!important`.
+     */
+    Private.cursorBackdrop = createCursorBackdrop();
 })(Private || (Private = {}));
@@ -867,0 +921,0 @@

dist/index.js

@@ -216,4 +216,3 @@ (function (global, factory) {
             let style = this.dragImage.style;
-            style.top = `${clientY}px`;
-            style.left = `${clientX}px`;
+            style.transform = `translate(${clientX}px, ${clientY}px)`;
         }
@@ -337,3 +336,3 @@ /**
             // Find the current indicated element at the given position.
-            let currElem = this.document.elementFromPoint(event.clientX, event.clientY);
+            let currElem = Private.findElementBehidBackdrop(event, this.document);
             // Update the current element reference.
@@ -376,4 +375,3 @@ this._currentElement = currElem;
             style.position = 'fixed';
-            style.top = `${clientY}px`;
-            style.left = `${clientX}px`;
+            style.transform = `translate(${clientX}px, ${clientY}px)`;
             const body = this.document instanceof Document
@@ -523,20 +521,5 @@ ? this.document.body
         function overrideCursor(cursor, doc = document) {
-            let id = ++overrideCursorID;
-            const body = doc instanceof Document
-                ? doc.body
-                : doc.firstElementChild;
-            body.style.cursor = cursor;
-            body.classList.add('lm-mod-override-cursor');
-            return new disposable.DisposableDelegate(() => {
-                if (id === overrideCursorID) {
-                    body.style.cursor = '';
-                    body.classList.remove('lm-mod-override-cursor');
-                }
-            });
+            return Private.overrideCursor(cursor, doc);
         }
         Drag.overrideCursor = overrideCursor;
-        /**
-         * The internal id for the active cursor override.
-         */
-        let overrideCursorID = 0;
     })(Drag || (Drag = {}));
@@ -562,2 +545,18 @@ /**
         /**
+         * Find the event target using pointer position.
+         */
+        function findElementBehidBackdrop(event, root = document) {
+            // Check if we already cached element for this event.
+            if (lastElementSearch && event == lastElementSearch.event) {
+                return lastElementSearch.element;
+            }
+            Private.cursorBackdrop.style.zIndex = '-1000';
+            const element = root.elementFromPoint(event.clientX, event.clientY);
+            Private.cursorBackdrop.style.zIndex = '';
+            lastElementSearch = { event, element };
+            return element;
+        }
+        Private.findElementBehidBackdrop = findElementBehidBackdrop;
+        let lastElementSearch = null;
+        /**
          * Find the drag scroll target under the mouse, if any.
@@ -570,3 +569,3 @@ */
             // Get the element under the mouse.
-            let element = document.elementFromPoint(x, y);
+            let element = findElementBehidBackdrop(event);
             // Search for a scrollable target based on the mouse position.
@@ -869,2 +868,57 @@ // The null assert in third clause of for-loop is required due to:
         };
+        /**
+         * Implementation of `Drag.overrideCursor`.
+         */
+        function overrideCursor(cursor, doc = document) {
+            let id = ++overrideCursorID;
+            const body = doc instanceof Document
+                ? doc.body
+                : doc.firstElementChild;
+            if (!Private.cursorBackdrop.isConnected) {
+                body.appendChild(Private.cursorBackdrop);
+                document.addEventListener('pointermove', alignBackdrop, {
+                    capture: true,
+                    passive: true
+                });
+            }
+            Private.cursorBackdrop.style.cursor = cursor;
+            return new disposable.DisposableDelegate(() => {
+                if (id === overrideCursorID && Private.cursorBackdrop.isConnected) {
+                    document.removeEventListener('pointermove', alignBackdrop, true);
+                    body.removeChild(Private.cursorBackdrop);
+                }
+            });
+        }
+        Private.overrideCursor = overrideCursor;
+        /**
+         * Move cursor backdrop to match cursor position.
+         */
+        function alignBackdrop(event) {
+            if (!Private.cursorBackdrop) {
+                return;
+            }
+            Private.cursorBackdrop.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+        }
+        /**
+         * Create cursor backdrop node.
+         */
+        function createCursorBackdrop() {
+            const backdrop = document.createElement('div');
+            backdrop.classList.add('lm-cursor-backdrop');
+            return backdrop;
+        }
+        /**
+         * The internal id for the active cursor override.
+         */
+        let overrideCursorID = 0;
+        /**
+         * A backdrop node overriding pointer cursor.
+         *
+         * #### Notes
+         * We use a backdrop node rather than setting the cursor directly on the body
+         * because setting it on body requires more extensive style recalculation for
+         * reliable application of the cursor, this is the cursor not being overriden
+         * when over child elements with another style like `cursor: other!important`.
+         */
+        Private.cursorBackdrop = createCursorBackdrop();
     })(Private || (Private = {}));
@@ -871,0 +925,0 @@

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";class n{constructor(e){this._onScrollFrame=()=>{if(!this._scrollTarget)return;let{element:e,edge:t,distance:n}=this._scrollTarget,i=r.SCROLL_EDGE_SIZE-n,o=Math.pow(i/r.SCROLL_EDGE_SIZE,2),s=Math.max(1,Math.round(o*r.SCROLL_EDGE_SIZE));switch(t){case"top":e.scrollTop-=s;break;case"left":e.scrollLeft-=s;break;case"right":e.scrollLeft+=s;break;case"bottom":e.scrollTop+=s}requestAnimationFrame(this._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}dispose(){if(!this._disposed){if(this._disposed=!0,this._currentTarget){let e=new PointerEvent("pointerup",{bubbles:!0,cancelable:!0,clientX:-1,clientY:-1});r.dispatchDragLeave(this,this._currentTarget,null,e)}this._finalize("none")}}get isDisposed(){return this._disposed}start(e,t){if(this._disposed)return Promise.resolve("none");if(this._promise)return this._promise;this._addListeners(),this._attachDragImage(e,t),this._promise=new Promise((e=>{this._resolve=e}));let n=new PointerEvent("pointermove",{bubbles:!0,cancelable:!0,clientX:e,clientY:t});return document.dispatchEvent(n),this._promise}handleEvent(e){switch(e.type){case"pointermove":this._evtPointerMove(e);break;case"pointerup":this._evtPointerUp(e);break;case"keydown":this._evtKeyDown(e);break;default:e.preventDefault(),e.stopPropagation()}}moveDragImage(e,t){if(!this.dragImage)return;let n=this.dragImage.style;n.top=`${t}px`,n.left=`${e}px`}_evtPointerMove(e){e.preventDefault(),e.stopPropagation(),this._updateCurrentTarget(e),this._updateDragScroll(e),this.moveDragImage(e.clientX,e.clientY)}_evtPointerUp(e){if(e.preventDefault(),e.stopPropagation(),0!==e.button)return;if(this._updateCurrentTarget(e),!this._currentTarget)return void this._finalize("none");if("none"===this._dropAction)return r.dispatchDragLeave(this,this._currentTarget,null,e),void this._finalize("none");let t=r.dispatchDrop(this,this._currentTarget,e);this._finalize(t)}_evtKeyDown(e){e.preventDefault(),e.stopPropagation(),27===e.keyCode&&this.dispose()}_addListeners(){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)}_removeListeners(){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)}_updateDragScroll(e){let t=r.findScrollTarget(e);(this._scrollTarget||t)&&(this._scrollTarget||setTimeout(this._onScrollFrame,500),this._scrollTarget=t)}_updateCurrentTarget(e){let t=this._currentTarget,n=this._currentTarget,i=this._currentElement,o=this.document.elementFromPoint(e.clientX,e.clientY);this._currentElement=o,o!==i&&o!==n&&r.dispatchDragExit(this,n,o,e),o!==i&&o!==n&&(n=r.dispatchDragEnter(this,o,n,e)),n!==t&&(this._currentTarget=n,r.dispatchDragLeave(this,t,n,e));let s=r.dispatchDragOver(this,n,e);this._setDropAction(s)}_attachDragImage(e,t){if(!this.dragImage)return;this.dragImage.classList.add("lm-mod-drag-image");let n=this.dragImage.style;n.pointerEvents="none",n.position="fixed",n.top=`${t}px`,n.left=`${e}px`;(this.document instanceof Document?this.document.body:this.document.firstElementChild).appendChild(this.dragImage)}_detachDragImage(){if(!this.dragImage)return;let e=this.dragImage.parentNode;e&&e.removeChild(this.dragImage)}_setDropAction(e){if(e=r.validateAction(e,this.supportedActions),!this._override||this._dropAction!==e)switch(e){case"none":this._dropAction=e,this._override=n.overrideCursor("no-drop",this.document);break;case"copy":this._dropAction=e,this._override=n.overrideCursor("copy",this.document);break;case"link":this._dropAction=e,this._override=n.overrideCursor("alias",this.document);break;case"move":this._dropAction=e,this._override=n.overrideCursor("move",this.document)}}_finalize(e){let 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)}}var r;!function(e){class n extends DragEvent{constructor(e,t){super(t.type,{bubbles:!0,cancelable:!0,altKey:e.altKey,button:e.button,clientX:e.clientX,clientY:e.clientY,ctrlKey:e.ctrlKey,detail:0,metaKey:e.metaKey,relatedTarget:t.related,screenX:e.screenX,screenY:e.screenY,shiftKey:e.shiftKey,view:window});const{drag:n}=t;this.dropAction="none",this.mimeData=n.mimeData,this.proposedAction=n.proposedAction,this.supportedActions=n.supportedActions,this.source=n.source}}e.Event=n,e.overrideCursor=function(e,n=document){let i=++r;const o=n instanceof Document?n.body:n.firstElementChild;return o.style.cursor=e,o.classList.add("lm-mod-override-cursor"),new t.DisposableDelegate((()=>{i===r&&(o.style.cursor="",o.classList.remove("lm-mod-override-cursor"))}))};let r=0}(n||(n={})),function(e){e.SCROLL_EDGE_SIZE=20,e.validateAction=function(e,n){return t[e]&r[n]?e:"none"},e.findScrollTarget=function(t){let n=t.clientX,r=t.clientY,i=document.elementFromPoint(n,r);for(;i;i=i.parentElement){if(!i.hasAttribute("data-lm-dragscroll"))continue;let t=0,o=0;i===document.body&&(t=window.pageXOffset,o=window.pageYOffset);let s=i.getBoundingClientRect(),a=s.top+o,l=s.left+t,d=l+s.width,c=a+s.height;if(n<l||n>=d||r<a||r>=c)continue;let h,u=n-l+1,p=r-a+1,m=d-n,v=c-r,g=Math.min(u,p,m,v);if(g>e.SCROLL_EDGE_SIZE)continue;switch(g){case v:h="bottom";break;case p:h="top";break;case m:h="right";break;case u:h="left";break;default:throw"unreachable"}let _,f=i.scrollWidth-i.clientWidth,E=i.scrollHeight-i.clientHeight;switch(h){case"top":_=E>0&&i.scrollTop>0;break;case"left":_=f>0&&i.scrollLeft>0;break;case"right":_=f>0&&i.scrollLeft<f;break;case"bottom":_=E>0&&i.scrollTop<E;break;default:throw"unreachable"}if(_)return{element:i,edge:h,distance:g}}return null},e.dispatchDragEnter=function(e,t,r,i){if(!t)return null;let o=new n.Event(i,{drag:e,related:r,type:"lm-dragenter"});if(!t.dispatchEvent(o))return t;const s=e.document instanceof Document?e.document.body:e.document.firstElementChild;return t===s?r:(o=new n.Event(i,{drag:e,related:r,type:"lm-dragenter"}),s.dispatchEvent(o),s)},e.dispatchDragExit=function(e,t,r,i){if(!t)return;let o=new n.Event(i,{drag:e,related:r,type:"lm-dragexit"});t.dispatchEvent(o)},e.dispatchDragLeave=function(e,t,r,i){if(!t)return;let o=new n.Event(i,{drag:e,related:r,type:"lm-dragleave"});t.dispatchEvent(o)},e.dispatchDragOver=function(e,t,r){if(!t)return"none";let i=new n.Event(r,{drag:e,related:null,type:"lm-dragover"});return!t.dispatchEvent(i)?i.dropAction:"none"},e.dispatchDrop=function(e,t,r){if(!t)return"none";let i=new n.Event(r,{drag:e,related:null,type:"lm-drop"});return!t.dispatchEvent(i)?i.dropAction:"none"};const t={none:0,copy:1,link:2,move:4},r={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}}(r||(r={})),e.Drag=n,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";class r{constructor(e){this._onScrollFrame=()=>{if(!this._scrollTarget)return;let{element:e,edge:t,distance:r}=this._scrollTarget,i=n.SCROLL_EDGE_SIZE-r,o=Math.pow(i/n.SCROLL_EDGE_SIZE,2),s=Math.max(1,Math.round(o*n.SCROLL_EDGE_SIZE));switch(t){case"top":e.scrollTop-=s;break;case"left":e.scrollLeft-=s;break;case"right":e.scrollLeft+=s;break;case"bottom":e.scrollTop+=s}requestAnimationFrame(this._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}dispose(){if(!this._disposed){if(this._disposed=!0,this._currentTarget){let e=new PointerEvent("pointerup",{bubbles:!0,cancelable:!0,clientX:-1,clientY:-1});n.dispatchDragLeave(this,this._currentTarget,null,e)}this._finalize("none")}}get isDisposed(){return this._disposed}start(e,t){if(this._disposed)return Promise.resolve("none");if(this._promise)return this._promise;this._addListeners(),this._attachDragImage(e,t),this._promise=new Promise((e=>{this._resolve=e}));let r=new PointerEvent("pointermove",{bubbles:!0,cancelable:!0,clientX:e,clientY:t});return document.dispatchEvent(r),this._promise}handleEvent(e){switch(e.type){case"pointermove":this._evtPointerMove(e);break;case"pointerup":this._evtPointerUp(e);break;case"keydown":this._evtKeyDown(e);break;default:e.preventDefault(),e.stopPropagation()}}moveDragImage(e,t){if(!this.dragImage)return;this.dragImage.style.transform=`translate(${e}px, ${t}px)`}_evtPointerMove(e){e.preventDefault(),e.stopPropagation(),this._updateCurrentTarget(e),this._updateDragScroll(e),this.moveDragImage(e.clientX,e.clientY)}_evtPointerUp(e){if(e.preventDefault(),e.stopPropagation(),0!==e.button)return;if(this._updateCurrentTarget(e),!this._currentTarget)return void this._finalize("none");if("none"===this._dropAction)return n.dispatchDragLeave(this,this._currentTarget,null,e),void this._finalize("none");let t=n.dispatchDrop(this,this._currentTarget,e);this._finalize(t)}_evtKeyDown(e){e.preventDefault(),e.stopPropagation(),27===e.keyCode&&this.dispose()}_addListeners(){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)}_removeListeners(){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)}_updateDragScroll(e){let t=n.findScrollTarget(e);(this._scrollTarget||t)&&(this._scrollTarget||setTimeout(this._onScrollFrame,500),this._scrollTarget=t)}_updateCurrentTarget(e){let t=this._currentTarget,r=this._currentTarget,i=this._currentElement,o=n.findElementBehidBackdrop(e,this.document);this._currentElement=o,o!==i&&o!==r&&n.dispatchDragExit(this,r,o,e),o!==i&&o!==r&&(r=n.dispatchDragEnter(this,o,r,e)),r!==t&&(this._currentTarget=r,n.dispatchDragLeave(this,t,r,e));let s=n.dispatchDragOver(this,r,e);this._setDropAction(s)}_attachDragImage(e,t){if(!this.dragImage)return;this.dragImage.classList.add("lm-mod-drag-image");let r=this.dragImage.style;r.pointerEvents="none",r.position="fixed",r.transform=`translate(${e}px, ${t}px)`;(this.document instanceof Document?this.document.body:this.document.firstElementChild).appendChild(this.dragImage)}_detachDragImage(){if(!this.dragImage)return;let e=this.dragImage.parentNode;e&&e.removeChild(this.dragImage)}_setDropAction(e){if(e=n.validateAction(e,this.supportedActions),!this._override||this._dropAction!==e)switch(e){case"none":this._dropAction=e,this._override=r.overrideCursor("no-drop",this.document);break;case"copy":this._dropAction=e,this._override=r.overrideCursor("copy",this.document);break;case"link":this._dropAction=e,this._override=r.overrideCursor("alias",this.document);break;case"move":this._dropAction=e,this._override=r.overrideCursor("move",this.document)}}_finalize(e){let 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)}}var n;!function(e){class t extends DragEvent{constructor(e,t){super(t.type,{bubbles:!0,cancelable:!0,altKey:e.altKey,button:e.button,clientX:e.clientX,clientY:e.clientY,ctrlKey:e.ctrlKey,detail:0,metaKey:e.metaKey,relatedTarget:t.related,screenX:e.screenX,screenY:e.screenY,shiftKey:e.shiftKey,view:window});const{drag:r}=t;this.dropAction="none",this.mimeData=r.mimeData,this.proposedAction=r.proposedAction,this.supportedActions=r.supportedActions,this.source=r.source}}e.Event=t,e.overrideCursor=function(e,t=document){return n.overrideCursor(e,t)}}(r||(r={})),function(e){function n(t,r=document){if(i&&t==i.event)return i.element;e.cursorBackdrop.style.zIndex="-1000";const n=r.elementFromPoint(t.clientX,t.clientY);return e.cursorBackdrop.style.zIndex="",i={event:t,element:n},n}e.SCROLL_EDGE_SIZE=20,e.validateAction=function(e,t){return o[e]&s[t]?e:"none"},e.findElementBehidBackdrop=n;let i=null;e.findScrollTarget=function(t){let r=t.clientX,i=t.clientY,o=n(t);for(;o;o=o.parentElement){if(!o.hasAttribute("data-lm-dragscroll"))continue;let t=0,n=0;o===document.body&&(t=window.pageXOffset,n=window.pageYOffset);let s=o.getBoundingClientRect(),a=s.top+n,c=s.left+t,d=c+s.width,l=a+s.height;if(r<c||r>=d||i<a||i>=l)continue;let u,h=r-c+1,p=i-a+1,m=d-r,v=l-i,g=Math.min(h,p,m,v);if(g>e.SCROLL_EDGE_SIZE)continue;switch(g){case v:u="bottom";break;case p:u="top";break;case m:u="right";break;case h:u="left";break;default:throw"unreachable"}let _,f=o.scrollWidth-o.clientWidth,E=o.scrollHeight-o.clientHeight;switch(u){case"top":_=E>0&&o.scrollTop>0;break;case"left":_=f>0&&o.scrollLeft>0;break;case"right":_=f>0&&o.scrollLeft<f;break;case"bottom":_=E>0&&o.scrollTop<E;break;default:throw"unreachable"}if(_)return{element:o,edge:u,distance:g}}return null},e.dispatchDragEnter=function(e,t,n,i){if(!t)return null;let o=new r.Event(i,{drag:e,related:n,type:"lm-dragenter"});if(!t.dispatchEvent(o))return t;const s=e.document instanceof Document?e.document.body:e.document.firstElementChild;return t===s?n:(o=new r.Event(i,{drag:e,related:n,type:"lm-dragenter"}),s.dispatchEvent(o),s)},e.dispatchDragExit=function(e,t,n,i){if(!t)return;let o=new r.Event(i,{drag:e,related:n,type:"lm-dragexit"});t.dispatchEvent(o)},e.dispatchDragLeave=function(e,t,n,i){if(!t)return;let o=new r.Event(i,{drag:e,related:n,type:"lm-dragleave"});t.dispatchEvent(o)},e.dispatchDragOver=function(e,t,n){if(!t)return"none";let i=new r.Event(n,{drag:e,related:null,type:"lm-dragover"});return!t.dispatchEvent(i)?i.dropAction:"none"},e.dispatchDrop=function(e,t,n){if(!t)return"none";let i=new r.Event(n,{drag:e,related:null,type:"lm-drop"});return!t.dispatchEvent(i)?i.dropAction:"none"};const o={none:0,copy:1,link:2,move:4},s={none:o.none,copy:o.copy,link:o.link,move:o.move,"copy-link":o.copy|o.link,"copy-move":o.copy|o.move,"link-move":o.link|o.move,all:o.copy|o.link|o.move};function a(t){e.cursorBackdrop&&(e.cursorBackdrop.style.transform=`translate(${t.clientX}px, ${t.clientY}px)`)}e.overrideCursor=function(r,n=document){let i=++c;const o=n instanceof Document?n.body:n.firstElementChild;return e.cursorBackdrop.isConnected||(o.appendChild(e.cursorBackdrop),document.addEventListener("pointermove",a,{capture:!0,passive:!0})),e.cursorBackdrop.style.cursor=r,new t.DisposableDelegate((()=>{i===c&&e.cursorBackdrop.isConnected&&(document.removeEventListener("pointermove",a,!0),o.removeChild(e.cursorBackdrop))}))};let c=0;e.cursorBackdrop=function(){const e=document.createElement("div");return e.classList.add("lm-cursor-backdrop"),e}()}(n||(n={})),e.Drag=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.min.js.map

package.json

 {
   "name": "@lumino/dragdrop",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Lumino Drag and Drop",
@@ -41,3 +41,4 @@ "homepage": "https://github.com/jupyterlab/lumino",
     "test:firefox-headless": "cd tests && karma start --browsers=FirefoxHeadless",
-    "test:ie": "cd tests && karma start --browsers=IE",
+    "test:webkit": "cd tests && karma start --browsers=Webkit",
+    "test:webkit-headless": "cd tests && karma start --browsers=WebkitHeadless",
     "watch": "tsc --build --watch"
@@ -50,4 +51,4 @@ },
   "dependencies": {
-    "@lumino/coreutils": "^2.0.0-alpha.6",
-    "@lumino/disposable": "^2.0.0-alpha.6"
+    "@lumino/coreutils": "^2.0.0-alpha.7",
+    "@lumino/disposable": "^2.0.0-alpha.7"
   },
@@ -65,6 +66,7 @@ "devDependencies": {
     "karma-firefox-launcher": "^2.1.1",
-    "karma-ie-launcher": "^1.0.0",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
+    "karma-webkit-launcher": "^1.0.2",
     "mocha": "^9.0.3",
+    "playwright": "^1.26.0",
     "postcss": "^8.4.14",
@@ -71,0 +73,0 @@ "rimraf": "^3.0.2",

src/index.ts

@@ -234,4 +234,3 @@ // Copyright (c) Jupyter Development Team.
     let style = this.dragImage.style;
-    style.top = `${clientY}px`;
-    style.left = `${clientX}px`;
+    style.transform = `translate(${clientX}px, ${clientY}px)`;
   }
@@ -375,3 +374,3 @@
     // Find the current indicated element at the given position.
-    let currElem = this.document.elementFromPoint(event.clientX, event.clientY);
+    let currElem = Private.findElementBehidBackdrop(event, this.document);
 
@@ -420,4 +419,3 @@ // Update the current element reference.
     style.position = 'fixed';
-    style.top = `${clientY}px`;
-    style.left = `${clientX}px`;
+    style.transform = `translate(${clientX}px, ${clientY}px)`;
     const body =
@@ -795,21 +793,4 @@ this.document instanceof Document
   ): IDisposable {
-    let id = ++overrideCursorID;
-    const body =
-      doc instanceof Document
-        ? doc.body
-        : (doc.firstElementChild as HTMLElement);
-    body.style.cursor = cursor;
-    body.classList.add('lm-mod-override-cursor');
-    return new DisposableDelegate(() => {
-      if (id === overrideCursorID) {
-        body.style.cursor = '';
-        body.classList.remove('lm-mod-override-cursor');
-      }
-    });
+    return Private.overrideCursor(cursor, doc);
   }
-
-  /**
-   * The internal id for the active cursor override.
-   */
-  let overrideCursorID = 0;
 }
@@ -859,2 +840,28 @@
   /**
+   * Find the event target using pointer position.
+   */
+  export function findElementBehidBackdrop(
+    event: PointerEvent,
+    root: Document | ShadowRoot = document
+  ) {
+    // Check if we already cached element for this event.
+    if (lastElementSearch && event == lastElementSearch.event) {
+      return lastElementSearch.element;
+    }
+    Private.cursorBackdrop.style.zIndex = '-1000';
+    const element: Element | null = root.elementFromPoint(
+      event.clientX,
+      event.clientY
+    );
+    Private.cursorBackdrop.style.zIndex = '';
+    lastElementSearch = { event, element };
+    return element;
+  }
+
+  let lastElementSearch: {
+    event: PointerEvent;
+    element: Element | null;
+  } | null = null;
+
+  /**
    * Find the drag scroll target under the mouse, if any.
@@ -868,3 +875,3 @@ */
     // Get the element under the mouse.
-    let element: Element | null = document.elementFromPoint(x, y);
+    let element: Element | null = findElementBehidBackdrop(event);
 
@@ -1220,2 +1227,65 @@ // Search for a scrollable target based on the mouse position.
   };
+
+  /**
+   * Implementation of `Drag.overrideCursor`.
+   */
+  export function overrideCursor(
+    cursor: string,
+    doc: Document | ShadowRoot = document
+  ): IDisposable {
+    let id = ++overrideCursorID;
+    const body =
+      doc instanceof Document
+        ? doc.body
+        : (doc.firstElementChild as HTMLElement);
+    if (!cursorBackdrop.isConnected) {
+      body.appendChild(cursorBackdrop);
+      document.addEventListener('pointermove', alignBackdrop, {
+        capture: true,
+        passive: true
+      });
+    }
+    cursorBackdrop.style.cursor = cursor;
+    return new DisposableDelegate(() => {
+      if (id === overrideCursorID && cursorBackdrop.isConnected) {
+        document.removeEventListener('pointermove', alignBackdrop, true);
+        body.removeChild(cursorBackdrop);
+      }
+    });
+  }
+
+  /**
+   * Move cursor backdrop to match cursor position.
+   */
+  function alignBackdrop(event: PointerEvent) {
+    if (!cursorBackdrop) {
+      return;
+    }
+    cursorBackdrop.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+  }
+
+  /**
+   * Create cursor backdrop node.
+   */
+  function createCursorBackdrop(): HTMLElement {
+    const backdrop = document.createElement('div');
+    backdrop.classList.add('lm-cursor-backdrop');
+    return backdrop;
+  }
+
+  /**
+   * The internal id for the active cursor override.
+   */
+  let overrideCursorID = 0;
+
+  /**
+   * A backdrop node overriding pointer cursor.
+   *
+   * #### Notes
+   * We use a backdrop node rather than setting the cursor directly on the body
+   * because setting it on body requires more extensive style recalculation for
+   * reliable application of the cursor, this is the cursor not being overriden
+   * when over child elements with another style like `cursor: other!important`.
+   */
+  export const cursorBackdrop: HTMLElement = createCursorBackdrop();
 }

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

Improved metrics

Total package byte prevSize

306201

increased by6.07%

Lines of code

3433

increased by5.66%

Worsened metrics

Dev dependency count

25

increased by4.17%

Dependency changes

• Updated@lumino/coreutils@^2.0.0-alpha.7

• Updated@lumino/disposable@^2.0.0-alpha.7