Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-dnd-html5-backend

Package Overview
Dependencies
Maintainers
5
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dnd-html5-backend - npm Package Compare versions

Comparing version 14.1.0 to 15.0.0

lib/BrowserDetector.js.map

8

lib/BrowserDetector.js
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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc