@lumino/dragdrop
Advanced tools
Comparing version 2.0.0-alpha.6 to 2.0.0-alpha.7
@@ -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 @@ |
@@ -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 @@ |
@@ -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 |
{ | ||
"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", |
118
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(); | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
306201
3433
25