react-dnd-html5-backend
Advanced tools
Comparing version 14.1.0 to 15.0.0
import { memoize } from './utils/js_utils'; | ||
export const isFirefox = memoize(() => /firefox/i.test(navigator.userAgent)); | ||
export const isSafari = memoize(() => Boolean(window.safari)); | ||
export const isFirefox = memoize(()=>/firefox/i.test(navigator.userAgent) | ||
); | ||
export const isSafari = memoize(()=>Boolean(window.safari) | ||
); | ||
//# sourceMappingURL=BrowserDetector.js.map |
import { union, without } from './utils/js_utils'; | ||
export class EnterLeaveCounter { | ||
entered = []; | ||
isNodeInDocument; | ||
constructor(isNodeInDocument) { | ||
this.isNodeInDocument = isNodeInDocument; | ||
} | ||
enter(enteringNode) { | ||
const previousLength = this.entered.length; | ||
const isNodeEntered = (node) => this.isNodeInDocument(node) && | ||
(!node.contains || node.contains(enteringNode)); | ||
this.entered = union(this.entered.filter(isNodeEntered), [enteringNode]); | ||
const isNodeEntered = (node)=>this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode)) | ||
; | ||
this.entered = union(this.entered.filter(isNodeEntered), [ | ||
enteringNode | ||
]); | ||
return previousLength === 0 && this.entered.length > 0; | ||
@@ -23,2 +20,8 @@ } | ||
} | ||
constructor(isNodeInDocument){ | ||
this.entered = []; | ||
this.isNodeInDocument = isNodeInDocument; | ||
} | ||
} | ||
//# sourceMappingURL=EnterLeaveCounter.js.map |
@@ -5,6 +5,7 @@ let emptyImage; | ||
emptyImage = new Image(); | ||
emptyImage.src = | ||
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; | ||
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; | ||
} | ||
return emptyImage; | ||
} | ||
//# sourceMappingURL=getEmptyImage.js.map |
@@ -61,3 +61,3 @@ import { Backend, DragDropManager, Unsubscribe } from 'dnd-core'; | ||
handleTopDragEnter: (e: DragEvent) => void; | ||
handleTopDragOverCapture: () => void; | ||
handleTopDragOverCapture: (e: DragEvent) => void; | ||
handleDragOver(e: DragEvent, targetId: string): void; | ||
@@ -64,0 +64,0 @@ handleTopDragOver: (e: DragEvent) => void; |
import { EnterLeaveCounter } from './EnterLeaveCounter'; | ||
import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset, } from './OffsetUtils'; | ||
import { createNativeDragSource, matchNativeItemType, } from './NativeDragSources'; | ||
import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset } from './OffsetUtils'; | ||
import { createNativeDragSource, matchNativeItemType } from './NativeDragSources'; | ||
import * as NativeTypes from './NativeTypes'; | ||
import { OptionsReader } from './OptionsReader'; | ||
function _defineProperty(obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
return obj; | ||
} | ||
function _objectSpread(target) { | ||
for(var i = 1; i < arguments.length; i++){ | ||
var source = arguments[i] != null ? arguments[i] : {}; | ||
var ownKeys = Object.keys(source); | ||
if (typeof Object.getOwnPropertySymbols === "function") { | ||
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { | ||
return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
})); | ||
} | ||
ownKeys.forEach(function(key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} | ||
return target; | ||
} | ||
export class HTML5BackendImpl { | ||
options; | ||
// React-Dnd Components | ||
actions; | ||
monitor; | ||
registry; | ||
// Internal State | ||
enterLeaveCounter; | ||
sourcePreviewNodes = new Map(); | ||
sourcePreviewNodeOptions = new Map(); | ||
sourceNodes = new Map(); | ||
sourceNodeOptions = new Map(); | ||
dragStartSourceIds = null; | ||
dropTargetIds = []; | ||
dragEnterTargetIds = []; | ||
currentNativeSource = null; | ||
currentNativeHandle = null; | ||
currentDragSourceNode = null; | ||
altKeyPressed = false; | ||
mouseMoveTimeoutTimer = null; | ||
asyncEndDragFrameId = null; | ||
dragOverTargetIds = null; | ||
lastClientOffset = null; | ||
hoverRafId = null; | ||
constructor(manager, globalContext, options) { | ||
this.options = new OptionsReader(globalContext, options); | ||
this.actions = manager.getActions(); | ||
this.monitor = manager.getMonitor(); | ||
this.registry = manager.getRegistry(); | ||
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument); | ||
} | ||
/** | ||
* Generate profiling statistics for the HTML5Backend. | ||
*/ | ||
profile() { | ||
* Generate profiling statistics for the HTML5Backend. | ||
*/ profile() { | ||
var ref, ref1; | ||
return { | ||
@@ -46,6 +44,6 @@ sourcePreviewNodes: this.sourcePreviewNodes.size, | ||
sourceNodes: this.sourceNodes.size, | ||
dragStartSourceIds: this.dragStartSourceIds?.length || 0, | ||
dragStartSourceIds: ((ref = this.dragStartSourceIds) === null || ref === void 0 ? void 0 : ref.length) || 0, | ||
dropTargetIds: this.dropTargetIds.length, | ||
dragEnterTargetIds: this.dragEnterTargetIds.length, | ||
dragOverTargetIds: this.dragOverTargetIds?.length || 0, | ||
dragOverTargetIds: ((ref1 = this.dragOverTargetIds) === null || ref1 === void 0 ? void 0 : ref1.length) || 0 | ||
}; | ||
@@ -61,5 +59,4 @@ } | ||
/** | ||
* Get the root element to use for event subscriptions | ||
*/ | ||
get rootElement() { | ||
* Get the root element to use for event subscriptions | ||
*/ get rootElement() { | ||
return this.options.rootElement; | ||
@@ -87,3 +84,4 @@ } | ||
if (this.asyncEndDragFrameId) { | ||
this.window?.cancelAnimationFrame(this.asyncEndDragFrameId); | ||
var ref; | ||
(ref = this.window) === null || ref === void 0 ? void 0 : ref.cancelAnimationFrame(this.asyncEndDragFrameId); | ||
} | ||
@@ -94,3 +92,3 @@ } | ||
this.sourcePreviewNodes.set(sourceId, node); | ||
return () => { | ||
return ()=>{ | ||
this.sourcePreviewNodes.delete(sourceId); | ||
@@ -103,8 +101,10 @@ this.sourcePreviewNodeOptions.delete(sourceId); | ||
this.sourceNodeOptions.set(sourceId, options); | ||
const handleDragStart = (e) => this.handleDragStart(e, sourceId); | ||
const handleSelectStart = (e) => this.handleSelectStart(e); | ||
node.setAttribute('draggable', 'true'); | ||
const handleDragStart = (e)=>this.handleDragStart(e, sourceId) | ||
; | ||
const handleSelectStart = (e)=>this.handleSelectStart(e) | ||
; | ||
node.setAttribute('draggable', '' + this.monitor.canDragSource(sourceId)); | ||
node.addEventListener('dragstart', handleDragStart); | ||
node.addEventListener('selectstart', handleSelectStart); | ||
return () => { | ||
return ()=>{ | ||
this.sourceNodes.delete(sourceId); | ||
@@ -118,9 +118,12 @@ this.sourceNodeOptions.delete(sourceId); | ||
connectDropTarget(targetId, node) { | ||
const handleDragEnter = (e) => this.handleDragEnter(e, targetId); | ||
const handleDragOver = (e) => this.handleDragOver(e, targetId); | ||
const handleDrop = (e) => this.handleDrop(e, targetId); | ||
const handleDragEnter = (e)=>this.handleDragEnter(e, targetId) | ||
; | ||
const handleDragOver = (e)=>this.handleDragOver(e, targetId) | ||
; | ||
const handleDrop = (e)=>this.handleDrop(e, targetId) | ||
; | ||
node.addEventListener('dragenter', handleDragEnter); | ||
node.addEventListener('dragover', handleDragOver); | ||
node.addEventListener('drop', handleDrop); | ||
return () => { | ||
return ()=>{ | ||
node.removeEventListener('dragenter', handleDragEnter); | ||
@@ -166,6 +169,5 @@ node.removeEventListener('dragover', handleDragOver); | ||
const sourceNodeOptions = this.sourceNodeOptions.get(sourceId); | ||
return { | ||
dropEffect: this.altKeyPressed ? 'copy' : 'move', | ||
...(sourceNodeOptions || {}), | ||
}; | ||
return _objectSpread({ | ||
dropEffect: this.altKeyPressed ? 'copy' : 'move' | ||
}, sourceNodeOptions || {}); | ||
} | ||
@@ -182,16 +184,12 @@ getCurrentDropEffect() { | ||
const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId); | ||
return { | ||
return _objectSpread({ | ||
anchorX: 0.5, | ||
anchorY: 0.5, | ||
captureDraggingState: false, | ||
...(sourcePreviewNodeOptions || {}), | ||
}; | ||
captureDraggingState: false | ||
}, sourcePreviewNodeOptions || {}); | ||
} | ||
getSourceClientOffset = (sourceId) => { | ||
const source = this.sourceNodes.get(sourceId); | ||
return (source && getNodeClientOffset(source)) || null; | ||
}; | ||
isDraggingNativeItem() { | ||
const itemType = this.monitor.getItemType(); | ||
return Object.keys(NativeTypes).some((key) => NativeTypes[key] === itemType); | ||
return Object.keys(NativeTypes).some((key)=>NativeTypes[key] === itemType | ||
); | ||
} | ||
@@ -202,31 +200,6 @@ beginDragNativeItem(type, dataTransfer) { | ||
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource); | ||
this.actions.beginDrag([this.currentNativeHandle]); | ||
this.actions.beginDrag([ | ||
this.currentNativeHandle | ||
]); | ||
} | ||
endDragNativeItem = () => { | ||
if (!this.isDraggingNativeItem()) { | ||
return; | ||
} | ||
this.actions.endDrag(); | ||
if (this.currentNativeHandle) { | ||
this.registry.removeSource(this.currentNativeHandle); | ||
} | ||
this.currentNativeHandle = null; | ||
this.currentNativeSource = null; | ||
}; | ||
isNodeInDocument = (node) => { | ||
// Check the node either in the main document or in the current context | ||
return Boolean(node && | ||
this.document && | ||
this.document.body && | ||
this.document.body.contains(node)); | ||
}; | ||
endDragIfSourceWasRemovedFromDOM = () => { | ||
const node = this.currentDragSourceNode; | ||
if (node == null || this.isNodeInDocument(node)) { | ||
return; | ||
} | ||
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) { | ||
this.actions.endDrag(); | ||
} | ||
}; | ||
setCurrentDragSourceNode(node) { | ||
@@ -252,4 +225,5 @@ this.clearCurrentDragSourceNode(); | ||
// | ||
this.mouseMoveTimeoutTimer = setTimeout(() => { | ||
return this.rootElement?.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true); | ||
this.mouseMoveTimeoutTimer = setTimeout(()=>{ | ||
var ref; | ||
return (ref = this.rootElement) === null || ref === void 0 ? void 0 : ref.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true); | ||
}, MOUSE_MOVE_TIMEOUT); | ||
@@ -261,3 +235,4 @@ } | ||
if (this.rootElement) { | ||
this.window?.clearTimeout(this.mouseMoveTimeoutTimer || undefined); | ||
var ref; | ||
(ref = this.window) === null || ref === void 0 ? void 0 : ref.clearTimeout(this.mouseMoveTimeoutTimer || undefined); | ||
this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true); | ||
@@ -270,6 +245,2 @@ } | ||
} | ||
handleTopDragStartCapture = () => { | ||
this.clearCurrentDragSourceNode(); | ||
this.dragStartSourceIds = []; | ||
}; | ||
handleDragStart(e, sourceId) { | ||
@@ -284,254 +255,316 @@ if (e.defaultPrevented) { | ||
} | ||
handleTopDragStart = (e) => { | ||
if (e.defaultPrevented) { | ||
return; | ||
handleDragEnter(e, targetId) { | ||
this.dragEnterTargetIds.unshift(targetId); | ||
} | ||
handleDragOver(e, targetId) { | ||
if (this.dragOverTargetIds === null) { | ||
this.dragOverTargetIds = []; | ||
} | ||
const { dragStartSourceIds } = this; | ||
this.dragOverTargetIds.unshift(targetId); | ||
} | ||
handleDrop(e, targetId) { | ||
this.dropTargetIds.unshift(targetId); | ||
} | ||
constructor(manager, globalContext, options){ | ||
this.sourcePreviewNodes = new Map(); | ||
this.sourcePreviewNodeOptions = new Map(); | ||
this.sourceNodes = new Map(); | ||
this.sourceNodeOptions = new Map(); | ||
this.dragStartSourceIds = null; | ||
const clientOffset = getEventClientOffset(e); | ||
// Avoid crashing if we missed a drop event or our previous drag died | ||
if (this.monitor.isDragging()) { | ||
this.dropTargetIds = []; | ||
this.dragEnterTargetIds = []; | ||
this.currentNativeSource = null; | ||
this.currentNativeHandle = null; | ||
this.currentDragSourceNode = null; | ||
this.altKeyPressed = false; | ||
this.mouseMoveTimeoutTimer = null; | ||
this.asyncEndDragFrameId = null; | ||
this.dragOverTargetIds = null; | ||
this.lastClientOffset = null; | ||
this.hoverRafId = null; | ||
this.getSourceClientOffset = (sourceId)=>{ | ||
const source = this.sourceNodes.get(sourceId); | ||
return source && getNodeClientOffset(source) || null; | ||
}; | ||
this.endDragNativeItem = ()=>{ | ||
if (!this.isDraggingNativeItem()) { | ||
return; | ||
} | ||
this.actions.endDrag(); | ||
} | ||
// Don't publish the source just yet (see why below) | ||
this.actions.beginDrag(dragStartSourceIds || [], { | ||
publishSource: false, | ||
getSourceClientOffset: this.getSourceClientOffset, | ||
clientOffset, | ||
}); | ||
const { dataTransfer } = e; | ||
const nativeType = matchNativeItemType(dataTransfer); | ||
if (this.monitor.isDragging()) { | ||
if (dataTransfer && typeof dataTransfer.setDragImage === 'function') { | ||
// Use custom drag image if user specifies it. | ||
// If child drag source refuses drag but parent agrees, | ||
// use parent's node as drag image. Neither works in IE though. | ||
const sourceId = this.monitor.getSourceId(); | ||
const sourceNode = this.sourceNodes.get(sourceId); | ||
const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode; | ||
if (dragPreview) { | ||
const { anchorX, anchorY, offsetX, offsetY } = this.getCurrentSourcePreviewNodeOptions(); | ||
const anchorPoint = { anchorX, anchorY }; | ||
const offsetPoint = { offsetX, offsetY }; | ||
const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint); | ||
dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y); | ||
} | ||
if (this.currentNativeHandle) { | ||
this.registry.removeSource(this.currentNativeHandle); | ||
} | ||
try { | ||
// Firefox won't drag without setting data | ||
dataTransfer?.setData('application/json', {}); | ||
this.currentNativeHandle = null; | ||
this.currentNativeSource = null; | ||
}; | ||
this.isNodeInDocument = (node)=>{ | ||
// Check the node either in the main document or in the current context | ||
return Boolean(node && this.document && this.document.body && this.document.body.contains(node)); | ||
}; | ||
this.endDragIfSourceWasRemovedFromDOM = ()=>{ | ||
const node = this.currentDragSourceNode; | ||
if (node == null || this.isNodeInDocument(node)) { | ||
return; | ||
} | ||
catch (err) { | ||
// IE doesn't support MIME types in setData | ||
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) { | ||
this.actions.endDrag(); | ||
} | ||
// Store drag source node so we can check whether | ||
// it is removed from DOM and trigger endDrag manually. | ||
this.setCurrentDragSourceNode(e.target); | ||
// Now we are ready to publish the drag source.. or are we not? | ||
const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions(); | ||
if (!captureDraggingState) { | ||
// Usually we want to publish it in the next tick so that browser | ||
// is able to screenshot the current (not yet dragging) state. | ||
// | ||
// It also neatly avoids a situation where render() returns null | ||
// in the same tick for the source element, and browser freaks out. | ||
setTimeout(() => this.actions.publishDragSource(), 0); | ||
}; | ||
this.handleTopDragStartCapture = ()=>{ | ||
this.clearCurrentDragSourceNode(); | ||
this.dragStartSourceIds = []; | ||
}; | ||
this.handleTopDragStart = (e)=>{ | ||
if (e.defaultPrevented) { | ||
return; | ||
} | ||
else { | ||
// In some cases the user may want to override this behavior, e.g. | ||
// to work around IE not supporting custom drag previews. | ||
// | ||
// When using a custom drag layer, the only way to prevent | ||
// the default drag preview from drawing in IE is to screenshot | ||
// the dragging state in which the node itself has zero opacity | ||
// and height. In this case, though, returning null from render() | ||
// will abruptly end the dragging, which is not obvious. | ||
// | ||
// This is the reason such behavior is strictly opt-in. | ||
this.actions.publishDragSource(); | ||
const { dragStartSourceIds } = this; | ||
this.dragStartSourceIds = null; | ||
const clientOffset = getEventClientOffset(e); | ||
// Avoid crashing if we missed a drop event or our previous drag died | ||
if (this.monitor.isDragging()) { | ||
this.actions.endDrag(); | ||
} | ||
} | ||
else if (nativeType) { | ||
// A native item (such as URL) dragged from inside the document | ||
this.beginDragNativeItem(nativeType); | ||
} | ||
else if (dataTransfer && | ||
!dataTransfer.types && | ||
((e.target && !e.target.hasAttribute) || | ||
!e.target.hasAttribute('draggable'))) { | ||
// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable. | ||
// Just let it drag. It's a native type (URL or text) and will be picked up in | ||
// dragenter handler. | ||
return; | ||
} | ||
else { | ||
// If by this time no drag source reacted, tell browser not to drag. | ||
e.preventDefault(); | ||
} | ||
}; | ||
handleTopDragEndCapture = () => { | ||
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) { | ||
// Firefox can dispatch this event in an infinite loop | ||
// if dragend handler does something like showing an alert. | ||
// Only proceed if we have not handled it already. | ||
this.actions.endDrag(); | ||
} | ||
}; | ||
handleTopDragEnterCapture = (e) => { | ||
this.dragEnterTargetIds = []; | ||
const isFirstEnter = this.enterLeaveCounter.enter(e.target); | ||
if (!isFirstEnter || this.monitor.isDragging()) { | ||
return; | ||
} | ||
const { dataTransfer } = e; | ||
const nativeType = matchNativeItemType(dataTransfer); | ||
if (nativeType) { | ||
// A native item (such as file or URL) dragged from outside the document | ||
this.beginDragNativeItem(nativeType, dataTransfer); | ||
} | ||
}; | ||
handleDragEnter(e, targetId) { | ||
this.dragEnterTargetIds.unshift(targetId); | ||
} | ||
handleTopDragEnter = (e) => { | ||
const { dragEnterTargetIds } = this; | ||
this.dragEnterTargetIds = []; | ||
if (!this.monitor.isDragging()) { | ||
// This is probably a native item type we don't understand. | ||
return; | ||
} | ||
this.altKeyPressed = e.altKey; | ||
// If the target changes position as the result of `dragenter`, `dragover` might still | ||
// get dispatched despite target being no longer there. The easy solution is to check | ||
// whether there actually is a target before firing `hover`. | ||
if (dragEnterTargetIds.length > 0) { | ||
this.actions.hover(dragEnterTargetIds, { | ||
clientOffset: getEventClientOffset(e), | ||
// Don't publish the source just yet (see why below) | ||
this.actions.beginDrag(dragStartSourceIds || [], { | ||
publishSource: false, | ||
getSourceClientOffset: this.getSourceClientOffset, | ||
clientOffset | ||
}); | ||
} | ||
const canDrop = dragEnterTargetIds.some((targetId) => this.monitor.canDropOnTarget(targetId)); | ||
if (canDrop) { | ||
// IE requires this to fire dragover events | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = this.getCurrentDropEffect(); | ||
const { dataTransfer } = e; | ||
const nativeType = matchNativeItemType(dataTransfer); | ||
if (this.monitor.isDragging()) { | ||
if (dataTransfer && typeof dataTransfer.setDragImage === 'function') { | ||
// Use custom drag image if user specifies it. | ||
// If child drag source refuses drag but parent agrees, | ||
// use parent's node as drag image. Neither works in IE though. | ||
const sourceId = this.monitor.getSourceId(); | ||
const sourceNode = this.sourceNodes.get(sourceId); | ||
const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode; | ||
if (dragPreview) { | ||
const { anchorX , anchorY , offsetX , offsetY } = this.getCurrentSourcePreviewNodeOptions(); | ||
const anchorPoint = { | ||
anchorX, | ||
anchorY | ||
}; | ||
const offsetPoint = { | ||
offsetX, | ||
offsetY | ||
}; | ||
const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint); | ||
dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y); | ||
} | ||
} | ||
try { | ||
// Firefox won't drag without setting data | ||
dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.setData('application/json', {}); | ||
} catch (err) { | ||
// IE doesn't support MIME types in setData | ||
} | ||
// Store drag source node so we can check whether | ||
// it is removed from DOM and trigger endDrag manually. | ||
this.setCurrentDragSourceNode(e.target); | ||
// Now we are ready to publish the drag source.. or are we not? | ||
const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions(); | ||
if (!captureDraggingState) { | ||
// Usually we want to publish it in the next tick so that browser | ||
// is able to screenshot the current (not yet dragging) state. | ||
// | ||
// It also neatly avoids a situation where render() returns null | ||
// in the same tick for the source element, and browser freaks out. | ||
setTimeout(()=>this.actions.publishDragSource() | ||
, 0); | ||
} else { | ||
// In some cases the user may want to override this behavior, e.g. | ||
// to work around IE not supporting custom drag previews. | ||
// | ||
// When using a custom drag layer, the only way to prevent | ||
// the default drag preview from drawing in IE is to screenshot | ||
// the dragging state in which the node itself has zero opacity | ||
// and height. In this case, though, returning null from render() | ||
// will abruptly end the dragging, which is not obvious. | ||
// | ||
// This is the reason such behavior is strictly opt-in. | ||
this.actions.publishDragSource(); | ||
} | ||
} else if (nativeType) { | ||
// A native item (such as URL) dragged from inside the document | ||
this.beginDragNativeItem(nativeType); | ||
} else if (dataTransfer && !dataTransfer.types && (e.target && !e.target.hasAttribute || !e.target.hasAttribute('draggable'))) { | ||
// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable. | ||
// Just let it drag. It's a native type (URL or text) and will be picked up in | ||
// dragenter handler. | ||
return; | ||
} else { | ||
// If by this time no drag source reacted, tell browser not to drag. | ||
e.preventDefault(); | ||
} | ||
} | ||
}; | ||
handleTopDragOverCapture = () => { | ||
this.dragOverTargetIds = []; | ||
}; | ||
handleDragOver(e, targetId) { | ||
if (this.dragOverTargetIds === null) { | ||
}; | ||
this.handleTopDragEndCapture = ()=>{ | ||
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) { | ||
// Firefox can dispatch this event in an infinite loop | ||
// if dragend handler does something like showing an alert. | ||
// Only proceed if we have not handled it already. | ||
this.actions.endDrag(); | ||
} | ||
}; | ||
this.handleTopDragEnterCapture = (e)=>{ | ||
this.dragEnterTargetIds = []; | ||
if (this.isDraggingNativeItem()) { | ||
var ref; | ||
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer); | ||
} | ||
const isFirstEnter = this.enterLeaveCounter.enter(e.target); | ||
if (!isFirstEnter || this.monitor.isDragging()) { | ||
return; | ||
} | ||
const { dataTransfer } = e; | ||
const nativeType = matchNativeItemType(dataTransfer); | ||
if (nativeType) { | ||
// A native item (such as file or URL) dragged from outside the document | ||
this.beginDragNativeItem(nativeType, dataTransfer); | ||
} | ||
}; | ||
this.handleTopDragEnter = (e)=>{ | ||
const { dragEnterTargetIds } = this; | ||
this.dragEnterTargetIds = []; | ||
if (!this.monitor.isDragging()) { | ||
// This is probably a native item type we don't understand. | ||
return; | ||
} | ||
this.altKeyPressed = e.altKey; | ||
// If the target changes position as the result of `dragenter`, `dragover` might still | ||
// get dispatched despite target being no longer there. The easy solution is to check | ||
// whether there actually is a target before firing `hover`. | ||
if (dragEnterTargetIds.length > 0) { | ||
this.actions.hover(dragEnterTargetIds, { | ||
clientOffset: getEventClientOffset(e) | ||
}); | ||
} | ||
const canDrop = dragEnterTargetIds.some((targetId)=>this.monitor.canDropOnTarget(targetId) | ||
); | ||
if (canDrop) { | ||
// IE requires this to fire dragover events | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = this.getCurrentDropEffect(); | ||
} | ||
} | ||
}; | ||
this.handleTopDragOverCapture = (e)=>{ | ||
this.dragOverTargetIds = []; | ||
} | ||
this.dragOverTargetIds.unshift(targetId); | ||
} | ||
handleTopDragOver = (e) => { | ||
const { dragOverTargetIds } = this; | ||
this.dragOverTargetIds = []; | ||
if (!this.monitor.isDragging()) { | ||
// This is probably a native item type we don't understand. | ||
// Prevent default "drop and blow away the whole document" action. | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = 'none'; | ||
if (this.isDraggingNativeItem()) { | ||
var ref; | ||
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer); | ||
} | ||
return; | ||
} | ||
this.altKeyPressed = e.altKey; | ||
this.lastClientOffset = getEventClientOffset(e); | ||
if (this.hoverRafId === null && | ||
typeof requestAnimationFrame !== 'undefined') { | ||
this.hoverRafId = requestAnimationFrame(() => { | ||
if (this.monitor.isDragging()) { | ||
this.actions.hover(dragOverTargetIds || [], { | ||
clientOffset: this.lastClientOffset, | ||
}); | ||
}; | ||
this.handleTopDragOver = (e)=>{ | ||
const { dragOverTargetIds } = this; | ||
this.dragOverTargetIds = []; | ||
if (!this.monitor.isDragging()) { | ||
// This is probably a native item type we don't understand. | ||
// Prevent default "drop and blow away the whole document" action. | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = 'none'; | ||
} | ||
this.hoverRafId = null; | ||
return; | ||
} | ||
this.altKeyPressed = e.altKey; | ||
this.lastClientOffset = getEventClientOffset(e); | ||
if (this.hoverRafId === null && typeof requestAnimationFrame !== 'undefined') { | ||
this.hoverRafId = requestAnimationFrame(()=>{ | ||
if (this.monitor.isDragging()) { | ||
this.actions.hover(dragOverTargetIds || [], { | ||
clientOffset: this.lastClientOffset | ||
}); | ||
} | ||
this.hoverRafId = null; | ||
}); | ||
} | ||
const canDrop = (dragOverTargetIds || []).some((targetId)=>this.monitor.canDropOnTarget(targetId) | ||
); | ||
if (canDrop) { | ||
// Show user-specified drop effect. | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = this.getCurrentDropEffect(); | ||
} | ||
} else if (this.isDraggingNativeItem()) { | ||
// Don't show a nice cursor but still prevent default | ||
// "drop and blow away the whole document" action. | ||
e.preventDefault(); | ||
} else { | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = 'none'; | ||
} | ||
} | ||
}; | ||
this.handleTopDragLeaveCapture = (e)=>{ | ||
if (this.isDraggingNativeItem()) { | ||
e.preventDefault(); | ||
} | ||
const isLastLeave = this.enterLeaveCounter.leave(e.target); | ||
if (!isLastLeave) { | ||
return; | ||
} | ||
if (this.isDraggingNativeItem()) { | ||
setTimeout(()=>this.endDragNativeItem() | ||
, 0); | ||
} | ||
}; | ||
this.handleTopDropCapture = (e)=>{ | ||
this.dropTargetIds = []; | ||
if (this.isDraggingNativeItem()) { | ||
var ref; | ||
e.preventDefault(); | ||
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer); | ||
} else if (matchNativeItemType(e.dataTransfer)) { | ||
// Dragging some elements, like <a> and <img> may still behave like a native drag event, | ||
// even if the current drag event matches a user-defined type. | ||
// Stop the default behavior when we're not expecting a native item to be dropped. | ||
e.preventDefault(); | ||
} | ||
this.enterLeaveCounter.reset(); | ||
}; | ||
this.handleTopDrop = (e)=>{ | ||
const { dropTargetIds } = this; | ||
this.dropTargetIds = []; | ||
this.actions.hover(dropTargetIds, { | ||
clientOffset: getEventClientOffset(e) | ||
}); | ||
} | ||
const canDrop = (dragOverTargetIds || []).some((targetId) => this.monitor.canDropOnTarget(targetId)); | ||
if (canDrop) { | ||
// Show user-specified drop effect. | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = this.getCurrentDropEffect(); | ||
this.actions.drop({ | ||
dropEffect: this.getCurrentDropEffect() | ||
}); | ||
if (this.isDraggingNativeItem()) { | ||
this.endDragNativeItem(); | ||
} else if (this.monitor.isDragging()) { | ||
this.actions.endDrag(); | ||
} | ||
} | ||
else if (this.isDraggingNativeItem()) { | ||
// Don't show a nice cursor but still prevent default | ||
// "drop and blow away the whole document" action. | ||
e.preventDefault(); | ||
} | ||
else { | ||
e.preventDefault(); | ||
if (e.dataTransfer) { | ||
e.dataTransfer.dropEffect = 'none'; | ||
}; | ||
this.handleSelectStart = (e)=>{ | ||
const target = e.target; | ||
// Only IE requires us to explicitly say | ||
// we want drag drop operation to start | ||
if (typeof target.dragDrop !== 'function') { | ||
return; | ||
} | ||
} | ||
}; | ||
handleTopDragLeaveCapture = (e) => { | ||
if (this.isDraggingNativeItem()) { | ||
// Inputs and textareas should be selectable | ||
if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.isContentEditable) { | ||
return; | ||
} | ||
// For other targets, ask IE | ||
// to enable drag and drop | ||
e.preventDefault(); | ||
} | ||
const isLastLeave = this.enterLeaveCounter.leave(e.target); | ||
if (!isLastLeave) { | ||
return; | ||
} | ||
if (this.isDraggingNativeItem()) { | ||
setTimeout(() => this.endDragNativeItem(), 0); | ||
} | ||
}; | ||
handleTopDropCapture = (e) => { | ||
this.dropTargetIds = []; | ||
if (this.isDraggingNativeItem()) { | ||
e.preventDefault(); | ||
this.currentNativeSource?.loadDataTransfer(e.dataTransfer); | ||
} | ||
else if (matchNativeItemType(e.dataTransfer)) { | ||
// Dragging some elements, like <a> and <img> may still behave like a native drag event, | ||
// even if the current drag event matches a user-defined type. | ||
// Stop the default behavior when we're not expecting a native item to be dropped. | ||
e.preventDefault(); | ||
} | ||
this.enterLeaveCounter.reset(); | ||
}; | ||
handleDrop(e, targetId) { | ||
this.dropTargetIds.unshift(targetId); | ||
target.dragDrop(); | ||
}; | ||
this.options = new OptionsReader(globalContext, options); | ||
this.actions = manager.getActions(); | ||
this.monitor = manager.getMonitor(); | ||
this.registry = manager.getRegistry(); | ||
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument); | ||
} | ||
handleTopDrop = (e) => { | ||
const { dropTargetIds } = this; | ||
this.dropTargetIds = []; | ||
this.actions.hover(dropTargetIds, { | ||
clientOffset: getEventClientOffset(e), | ||
}); | ||
this.actions.drop({ dropEffect: this.getCurrentDropEffect() }); | ||
if (this.isDraggingNativeItem()) { | ||
this.endDragNativeItem(); | ||
} | ||
else if (this.monitor.isDragging()) { | ||
this.actions.endDrag(); | ||
} | ||
}; | ||
handleSelectStart = (e) => { | ||
const target = e.target; | ||
// Only IE requires us to explicitly say | ||
// we want drag drop operation to start | ||
if (typeof target.dragDrop !== 'function') { | ||
return; | ||
} | ||
// Inputs and textareas should be selectable | ||
if (target.tagName === 'INPUT' || | ||
target.tagName === 'SELECT' || | ||
target.tagName === 'TEXTAREA' || | ||
target.isContentEditable) { | ||
return; | ||
} | ||
// For other targets, ask IE | ||
// to enable drag and drop | ||
e.preventDefault(); | ||
target.dragDrop(); | ||
}; | ||
} | ||
//# sourceMappingURL=HTML5BackendImpl.js.map |
import * as NativeTypes from './NativeTypes'; | ||
import { BackendFactory } from 'dnd-core'; | ||
export { HTML5BackendContext, HTML5BackendOptions } from './types'; | ||
export type { HTML5BackendContext, HTML5BackendOptions } from './types'; | ||
export { getEmptyImage } from './getEmptyImage'; | ||
export { NativeTypes }; | ||
export declare const HTML5Backend: BackendFactory; |
@@ -8,1 +8,3 @@ import { HTML5BackendImpl } from './HTML5BackendImpl'; | ||
}; | ||
//# sourceMappingURL=index.js.map |
@@ -5,5 +5,6 @@ export function matchesType(targetType, draggedItemType) { | ||
} | ||
return Array.isArray(targetType) | ||
? targetType.some((t) => t === draggedItemType) | ||
: targetType === draggedItemType; | ||
return Array.isArray(targetType) ? targetType.some((t)=>t === draggedItemType | ||
) : targetType === draggedItemType; | ||
} | ||
//# sourceMappingURL=matchesType.js.map |
export class MonotonicInterpolant { | ||
xs; | ||
ys; | ||
c1s; | ||
c2s; | ||
c3s; | ||
constructor(xs, ys) { | ||
const { length } = xs; | ||
interpolate(x) { | ||
const { xs , ys , c1s , c2s , c3s } = this; | ||
// The rightmost point in the dataset should give an exact result | ||
let i = xs.length - 1; | ||
if (x === xs[i]) { | ||
return ys[i]; | ||
} | ||
// Search for the interval x is in, returning the corresponding y if x is one of the original xs | ||
let low = 0; | ||
let high = c3s.length - 1; | ||
let mid; | ||
while(low <= high){ | ||
mid = Math.floor(0.5 * (low + high)); | ||
const xHere = xs[mid]; | ||
if (xHere < x) { | ||
low = mid + 1; | ||
} else if (xHere > x) { | ||
high = mid - 1; | ||
} else { | ||
return ys[mid]; | ||
} | ||
} | ||
i = Math.max(0, high); | ||
// Interpolate | ||
const diff = x - xs[i]; | ||
const diffSq = diff * diff; | ||
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq; | ||
} | ||
constructor(xs, ys){ | ||
const { length } = xs; | ||
// Rearrange xs and ys so that xs is sorted | ||
const indexes = []; | ||
for (let i = 0; i < length; i++) { | ||
for(let i = 0; i < length; i++){ | ||
indexes.push(i); | ||
} | ||
indexes.sort((a, b) => (xs[a] < xs[b] ? -1 : 1)); | ||
indexes.sort((a, b)=>xs[a] < xs[b] ? -1 : 1 | ||
); | ||
// Get consecutive differences and slopes | ||
@@ -21,5 +45,5 @@ const dys = []; | ||
let dy; | ||
for (let i = 0; i < length - 1; i++) { | ||
dx = xs[i + 1] - xs[i]; | ||
dy = ys[i + 1] - ys[i]; | ||
for(let i1 = 0; i1 < length - 1; i1++){ | ||
dx = xs[i1 + 1] - xs[i1]; | ||
dy = ys[i1 + 1] - ys[i1]; | ||
dxs.push(dx); | ||
@@ -30,14 +54,15 @@ dys.push(dy); | ||
// Get degree-1 coefficients | ||
const c1s = [ms[0]]; | ||
for (let i = 0; i < dxs.length - 1; i++) { | ||
const m2 = ms[i]; | ||
const mNext = ms[i + 1]; | ||
const c1s = [ | ||
ms[0] | ||
]; | ||
for(let i2 = 0; i2 < dxs.length - 1; i2++){ | ||
const m2 = ms[i2]; | ||
const mNext = ms[i2 + 1]; | ||
if (m2 * mNext <= 0) { | ||
c1s.push(0); | ||
} | ||
else { | ||
dx = dxs[i]; | ||
const dxNext = dxs[i + 1]; | ||
} else { | ||
dx = dxs[i2]; | ||
const dxNext = dxs[i2 + 1]; | ||
const common = dx + dxNext; | ||
c1s.push((3 * common) / ((common + dxNext) / m2 + (common + dx) / mNext)); | ||
c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext)); | ||
} | ||
@@ -50,7 +75,7 @@ } | ||
let m; | ||
for (let i = 0; i < c1s.length - 1; i++) { | ||
m = ms[i]; | ||
const c1 = c1s[i]; | ||
const invDx = 1 / dxs[i]; | ||
const common = c1 + c1s[i + 1] - m - m; | ||
for(let i3 = 0; i3 < c1s.length - 1; i3++){ | ||
m = ms[i3]; | ||
const c1 = c1s[i3]; | ||
const invDx = 1 / dxs[i3]; | ||
const common = c1 + c1s[i3 + 1] - m - m; | ||
c2s.push((m - c1 - common) * invDx); | ||
@@ -65,32 +90,4 @@ c3s.push(common * invDx * invDx); | ||
} | ||
interpolate(x) { | ||
const { xs, ys, c1s, c2s, c3s } = this; | ||
// The rightmost point in the dataset should give an exact result | ||
let i = xs.length - 1; | ||
if (x === xs[i]) { | ||
return ys[i]; | ||
} | ||
// Search for the interval x is in, returning the corresponding y if x is one of the original xs | ||
let low = 0; | ||
let high = c3s.length - 1; | ||
let mid; | ||
while (low <= high) { | ||
mid = Math.floor(0.5 * (low + high)); | ||
const xHere = xs[mid]; | ||
if (xHere < x) { | ||
low = mid + 1; | ||
} | ||
else if (xHere > x) { | ||
high = mid - 1; | ||
} | ||
else { | ||
return ys[mid]; | ||
} | ||
} | ||
i = Math.max(0, high); | ||
// Interpolate | ||
const diff = x - xs[i]; | ||
const diffSq = diff * diff; | ||
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq; | ||
} | ||
} | ||
//# sourceMappingURL=MonotonicInterpolant.js.map |
export function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) { | ||
const result = typesToTry.reduce((resultSoFar, typeToTry) => resultSoFar || dataTransfer.getData(typeToTry), ''); | ||
const result = typesToTry.reduce((resultSoFar, typeToTry)=>resultSoFar || dataTransfer.getData(typeToTry) | ||
, ''); | ||
return result != null ? result : defaultValue; | ||
} | ||
//# sourceMappingURL=getDataFromDataTransfer.js.map |
@@ -13,6 +13,9 @@ import { nativeTypesConfig } from './nativeTypesConfig'; | ||
const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []); | ||
return (Object.keys(nativeTypesConfig).filter((nativeItemType) => { | ||
const { matchesTypes } = nativeTypesConfig[nativeItemType]; | ||
return matchesTypes.some((t) => dataTransferTypes.indexOf(t) > -1); | ||
})[0] || null); | ||
return Object.keys(nativeTypesConfig).filter((nativeItemType)=>{ | ||
const { matchesTypes } = nativeTypesConfig[nativeItemType]; | ||
return matchesTypes.some((t)=>dataTransferTypes.indexOf(t) > -1 | ||
); | ||
})[0] || null; | ||
} | ||
//# sourceMappingURL=index.js.map |
export class NativeDragSource { | ||
item; | ||
config; | ||
constructor(config) { | ||
this.config = config; | ||
this.item = {}; | ||
this.initializeExposedProperties(); | ||
} | ||
initializeExposedProperties() { | ||
Object.keys(this.config.exposeProperties).forEach((property) => { | ||
Object.keys(this.config.exposeProperties).forEach((property)=>{ | ||
Object.defineProperty(this.item, property, { | ||
configurable: true, | ||
enumerable: true, | ||
get() { | ||
get () { | ||
// eslint-disable-next-line no-console | ||
console.warn(`Browser doesn't allow reading "${property}" until the drop event.`); | ||
return null; | ||
}, | ||
} | ||
}); | ||
@@ -25,7 +18,7 @@ }); | ||
const newProperties = {}; | ||
Object.keys(this.config.exposeProperties).forEach((property) => { | ||
Object.keys(this.config.exposeProperties).forEach((property)=>{ | ||
newProperties[property] = { | ||
value: this.config.exposeProperties[property](dataTransfer, this.config.matchesTypes), | ||
configurable: true, | ||
enumerable: true, | ||
enumerable: true | ||
}; | ||
@@ -46,4 +39,11 @@ }); | ||
endDrag() { | ||
// empty | ||
// empty | ||
} | ||
constructor(config){ | ||
this.config = config; | ||
this.item = {}; | ||
this.initializeExposedProperties(); | ||
} | ||
} | ||
//# sourceMappingURL=NativeDragSource.js.map |
@@ -6,29 +6,47 @@ import * as NativeTypes from '../NativeTypes'; | ||
exposeProperties: { | ||
files: (dataTransfer) => Array.prototype.slice.call(dataTransfer.files), | ||
items: (dataTransfer) => dataTransfer.items, | ||
dataTransfer: (dataTransfer) => dataTransfer, | ||
files: (dataTransfer)=>Array.prototype.slice.call(dataTransfer.files) | ||
, | ||
items: (dataTransfer)=>dataTransfer.items | ||
, | ||
dataTransfer: (dataTransfer)=>dataTransfer | ||
}, | ||
matchesTypes: ['Files'], | ||
matchesTypes: [ | ||
'Files' | ||
] | ||
}, | ||
[NativeTypes.HTML]: { | ||
exposeProperties: { | ||
html: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, ''), | ||
dataTransfer: (dataTransfer) => dataTransfer, | ||
html: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '') | ||
, | ||
dataTransfer: (dataTransfer)=>dataTransfer | ||
}, | ||
matchesTypes: ['Html', 'text/html'], | ||
matchesTypes: [ | ||
'Html', | ||
'text/html' | ||
] | ||
}, | ||
[NativeTypes.URL]: { | ||
exposeProperties: { | ||
urls: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'), | ||
dataTransfer: (dataTransfer) => dataTransfer, | ||
urls: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n') | ||
, | ||
dataTransfer: (dataTransfer)=>dataTransfer | ||
}, | ||
matchesTypes: ['Url', 'text/uri-list'], | ||
matchesTypes: [ | ||
'Url', | ||
'text/uri-list' | ||
] | ||
}, | ||
[NativeTypes.TEXT]: { | ||
exposeProperties: { | ||
text: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, ''), | ||
dataTransfer: (dataTransfer) => dataTransfer, | ||
text: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '') | ||
, | ||
dataTransfer: (dataTransfer)=>dataTransfer | ||
}, | ||
matchesTypes: ['Text', 'text/plain'], | ||
}, | ||
matchesTypes: [ | ||
'Text', | ||
'text/plain' | ||
] | ||
} | ||
}; | ||
//# sourceMappingURL=nativeTypesConfig.js.map |
@@ -5,1 +5,3 @@ export const FILE = '__NATIVE_FILE__'; | ||
export const HTML = '__NATIVE_HTML__'; | ||
//# sourceMappingURL=NativeTypes.js.map |
@@ -9,4 +9,7 @@ import { isSafari, isFirefox } from './BrowserDetector'; | ||
} | ||
const { top, left } = el.getBoundingClientRect(); | ||
return { x: left, y: top }; | ||
const { top , left } = el.getBoundingClientRect(); | ||
return { | ||
x: left, | ||
y: top | ||
}; | ||
} | ||
@@ -16,8 +19,8 @@ export function getEventClientOffset(e) { | ||
x: e.clientX, | ||
y: e.clientY, | ||
y: e.clientY | ||
}; | ||
} | ||
function isImageNode(node) { | ||
return (node.nodeName === 'IMG' && | ||
(isFirefox() || !document.documentElement?.contains(node))); | ||
var ref; | ||
return node.nodeName === 'IMG' && (isFirefox() || !((ref = document.documentElement) === null || ref === void 0 ? void 0 : ref.contains(node))); | ||
} | ||
@@ -32,3 +35,6 @@ function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) { | ||
} | ||
return { dragPreviewWidth, dragPreviewHeight }; | ||
return { | ||
dragPreviewWidth, | ||
dragPreviewHeight | ||
}; | ||
} | ||
@@ -43,9 +49,13 @@ export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) { | ||
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x, | ||
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y, | ||
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y | ||
}; | ||
const { offsetWidth: sourceWidth, offsetHeight: sourceHeight } = sourceNode; | ||
const { anchorX, anchorY } = anchorPoint; | ||
const { dragPreviewWidth, dragPreviewHeight } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight); | ||
const calculateYOffset = () => { | ||
const interpolantY = new MonotonicInterpolant([0, 0.5, 1], [ | ||
const { offsetWidth: sourceWidth , offsetHeight: sourceHeight } = sourceNode; | ||
const { anchorX , anchorY } = anchorPoint; | ||
const { dragPreviewWidth , dragPreviewHeight } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight); | ||
const calculateYOffset = ()=>{ | ||
const interpolantY = new MonotonicInterpolant([ | ||
0, | ||
0.5, | ||
1 | ||
], [ | ||
// Dock to the top | ||
@@ -56,3 +66,3 @@ offsetFromDragPreview.y, | ||
// Dock to the bottom | ||
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, | ||
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, | ||
]); | ||
@@ -67,6 +77,10 @@ let y = interpolantY.interpolate(anchorY); | ||
}; | ||
const calculateXOffset = () => { | ||
const calculateXOffset = ()=>{ | ||
// Interpolate coordinates depending on anchor point | ||
// If you know a simpler way to do this, let me know | ||
const interpolantX = new MonotonicInterpolant([0, 0.5, 1], [ | ||
const interpolantX = new MonotonicInterpolant([ | ||
0, | ||
0.5, | ||
1 | ||
], [ | ||
// Dock to the left | ||
@@ -77,3 +91,3 @@ offsetFromDragPreview.x, | ||
// Dock to the right | ||
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth, | ||
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth, | ||
]); | ||
@@ -83,3 +97,3 @@ return interpolantX.interpolate(anchorX); | ||
// Force offsets if specified in the options. | ||
const { offsetX, offsetY } = offsetPoint; | ||
const { offsetX , offsetY } = offsetPoint; | ||
const isManualOffsetX = offsetX === 0 || offsetX; | ||
@@ -89,4 +103,6 @@ const isManualOffsetY = offsetY === 0 || offsetY; | ||
x: isManualOffsetX ? offsetX : calculateXOffset(), | ||
y: isManualOffsetY ? offsetY : calculateYOffset(), | ||
y: isManualOffsetY ? offsetY : calculateYOffset() | ||
}; | ||
} | ||
//# sourceMappingURL=OffsetUtils.js.map |
export class OptionsReader { | ||
ownerDocument = null; | ||
globalContext; | ||
optionsArgs; | ||
constructor(globalContext, options) { | ||
this.globalContext = globalContext; | ||
this.optionsArgs = options; | ||
} | ||
get window() { | ||
if (this.globalContext) { | ||
return this.globalContext; | ||
} | ||
else if (typeof window !== 'undefined') { | ||
} else if (typeof window !== 'undefined') { | ||
return window; | ||
@@ -19,9 +11,8 @@ } | ||
get document() { | ||
if (this.globalContext?.document) { | ||
var ref; | ||
if ((ref = this.globalContext) === null || ref === void 0 ? void 0 : ref.document) { | ||
return this.globalContext.document; | ||
} | ||
else if (this.window) { | ||
} else if (this.window) { | ||
return this.window.document; | ||
} | ||
else { | ||
} else { | ||
return undefined; | ||
@@ -31,4 +22,12 @@ } | ||
get rootElement() { | ||
return this.optionsArgs?.rootElement || this.window; | ||
var ref; | ||
return ((ref = this.optionsArgs) === null || ref === void 0 ? void 0 : ref.rootElement) || this.window; | ||
} | ||
constructor(globalContext, options){ | ||
this.ownerDocument = null; | ||
this.globalContext = globalContext; | ||
this.optionsArgs = options; | ||
} | ||
} | ||
//# sourceMappingURL=OptionsReader.js.map |
@@ -1,1 +0,3 @@ | ||
export {}; | ||
export { }; | ||
//# sourceMappingURL=types.js.map |
// cheap lodash replacements | ||
export function memoize(fn) { | ||
let result = null; | ||
const memoized = () => { | ||
const memoized = ()=>{ | ||
if (result == null) { | ||
@@ -14,14 +14,18 @@ result = fn(); | ||
* drop-in replacement for _.without | ||
*/ | ||
export function without(items, item) { | ||
return items.filter((i) => i !== item); | ||
*/ export function without(items, item) { | ||
return items.filter((i)=>i !== item | ||
); | ||
} | ||
export function union(itemsA, itemsB) { | ||
const set = new Set(); | ||
const insertItem = (item) => set.add(item); | ||
const insertItem = (item)=>set.add(item) | ||
; | ||
itemsA.forEach(insertItem); | ||
itemsB.forEach(insertItem); | ||
const result = []; | ||
set.forEach((key) => result.push(key)); | ||
set.forEach((key)=>result.push(key) | ||
); | ||
return result; | ||
} | ||
//# sourceMappingURL=js_utils.js.map |
{ | ||
"name": "react-dnd-html5-backend", | ||
"version": "14.1.0", | ||
"version": "15.0.0", | ||
"description": "HTML5 backend for React DnD", | ||
"main": "dist/cjs/index.js", | ||
"publishConfig": { | ||
"main": "dist/cjs/index.js", | ||
"module": "dist/esm/index.js", | ||
"types": "dist/types/index.d.ts" | ||
}, | ||
"type": "module", | ||
"exports": "./lib/index.js", | ||
"types": "./lib/index.d.ts", | ||
"sideEffects": false, | ||
@@ -18,34 +15,14 @@ "license": "MIT", | ||
"scripts": { | ||
"clean": "gulp clean", | ||
"build": "gulp build", | ||
"watch": "gulp watch", | ||
"bundle": "gulp bundle" | ||
"clean": "shx rm -rf lib/", | ||
"build": "tsc -b . && swc src -d lib" | ||
}, | ||
"dependencies": { | ||
"dnd-core": "14.0.1" | ||
"dnd-core": "15.0.0" | ||
}, | ||
"devDependencies": { | ||
"@react-dnd/build": "12.0.0", | ||
"gulp": "^4.0.2" | ||
}, | ||
"umd": { | ||
"name": "ReactDnDHTML5Backend", | ||
"input": "./dist/esm/index.js", | ||
"external": [ | ||
"react", | ||
"react-dom", | ||
"react-dnd" | ||
], | ||
"globals": { | ||
"react": "React", | ||
"react-dom": "ReactDOM", | ||
"react-dnd": "ReactDnD" | ||
}, | ||
"alias": { | ||
"dnd-core": "dnd-core/dist/esm/index", | ||
"react-dnd": "react-dnd/dist/esm/index" | ||
} | ||
}, | ||
"module": "dist/esm/index.js", | ||
"types": "dist/types/index.d.ts" | ||
"@swc/cli": "^0.1.55", | ||
"@swc/core": "^1.2.135", | ||
"shx": "^0.3.4", | ||
"typescript": "^4.5.5" | ||
} | ||
} |
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
Yes
165305
4
66
2268
1
1
+ Addeddnd-core@15.0.0(transitive)
- Removeddnd-core@14.0.1(transitive)
Updateddnd-core@15.0.0