Your IP : 216.73.216.86
package.json 0000644 00000003574 15167672620 0007057 0 ustar 00 {
"_from": "react-dnd-html5-backend@^11.1.3",
"_id": "react-dnd-html5-backend@11.1.3",
"_inBundle": false,
"_integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==",
"_location": "/react-dnd-html5-backend",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "react-dnd-html5-backend@^11.1.3",
"name": "react-dnd-html5-backend",
"escapedName": "react-dnd-html5-backend",
"rawSpec": "^11.1.3",
"saveSpec": null,
"fetchSpec": "^11.1.3"
},
"_requiredBy": [
"/mui-datatables",
"/react-sortable-tree-patch-react-17"
],
"_resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz",
"_shasum": "2749f04f416ec230ea193f5c1fbea2de7dffb8f7",
"_spec": "react-dnd-html5-backend@^11.1.3",
"_where": "C:\\xampp\\htdocs\\emeraltd\\node_modules\\mui-datatables",
"bugs": {
"url": "https://github.com/react-dnd/react-dnd/issues"
},
"bundleDependencies": false,
"dependencies": {
"dnd-core": "^11.1.3"
},
"deprecated": false,
"description": "HTML5 backend for React DnD",
"devDependencies": {
"@types/react": "^16.9.35",
"react": "^16.12.0",
"react-dnd-test-backend": "^11.1.3",
"react-dom": "^16.12.0"
},
"gitHead": "32f16c09f0e8560c2a439f3a7fc2e0e8aec3b973",
"homepage": "https://github.com/react-dnd/react-dnd#readme",
"license": "MIT",
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"name": "react-dnd-html5-backend",
"repository": {
"type": "git",
"url": "git+https://github.com/react-dnd/react-dnd.git"
},
"scripts": {
"build": "../../../scripts/build_package.sh",
"clean": "../../../scripts/clean_package.sh",
"start": "../../../scripts/watch_package.sh"
},
"sideEffects": false,
"types": "lib/index.d.ts",
"version": "11.1.3"
}
lib/OptionsReader.js 0000644 00000000722 15167672620 0010443 0 ustar 00 export class OptionsReader {
constructor(globalContext) {
this.globalContext = globalContext;
}
get window() {
if (this.globalContext) {
return this.globalContext;
}
else if (typeof window !== 'undefined') {
return window;
}
return undefined;
}
get document() {
if (this.window) {
return this.window.document;
}
return undefined;
}
}
lib/NativeDragSources/getDataFromDataTransfer.js 0000644 00000000375 15167672620 0015755 0 ustar 00 export function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
const result = typesToTry.reduce((resultSoFar, typeToTry) => resultSoFar || dataTransfer.getData(typeToTry), '');
return result != null ? result : defaultValue;
}
lib/NativeDragSources/getDataFromDataTransfer.d.ts 0000644 00000000201 15167672620 0016175 0 ustar 00 export declare function getDataFromDataTransfer(dataTransfer: DataTransfer, typesToTry: string[], defaultValue: string): string;
lib/NativeDragSources/nativeTypesConfig.d.ts 0000644 00000000527 15167672620 0015155 0 ustar 00 export interface NativeItemConfigExposePropreties {
[property: string]: (dataTransfer: DataTransfer, matchesTypes: string[]) => any;
}
export interface NativeItemConfig {
exposeProperties: NativeItemConfigExposePropreties;
matchesTypes: string[];
}
export declare const nativeTypesConfig: {
[key: string]: NativeItemConfig;
};
lib/NativeDragSources/index.js 0000644 00000001331 15167672620 0012361 0 ustar 00 import { nativeTypesConfig } from './nativeTypesConfig';
import { NativeDragSource } from './NativeDragSource';
export function createNativeDragSource(type, dataTransfer) {
const result = new NativeDragSource(nativeTypesConfig[type]);
result.loadDataTransfer(dataTransfer);
return result;
}
export function matchNativeItemType(dataTransfer) {
if (!dataTransfer) {
return null;
}
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);
}
lib/NativeDragSources/NativeDragSource.js 0000644 00000002612 15167672620 0014462 0 ustar 00 export class NativeDragSource {
constructor(config) {
this.config = config;
this.item = {};
this.initializeExposedProperties();
}
initializeExposedProperties() {
Object.keys(this.config.exposeProperties).forEach((property) => {
Object.defineProperty(this.item, property, {
configurable: true,
enumerable: true,
get() {
// eslint-disable-next-line no-console
console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
return null;
},
});
});
}
loadDataTransfer(dataTransfer) {
if (dataTransfer) {
const newProperties = {};
Object.keys(this.config.exposeProperties).forEach((property) => {
newProperties[property] = {
value: this.config.exposeProperties[property](dataTransfer, this.config.matchesTypes),
configurable: true,
enumerable: true,
};
});
Object.defineProperties(this.item, newProperties);
}
}
canDrag() {
return true;
}
beginDrag() {
return this.item;
}
isDragging(monitor, handle) {
return handle === monitor.getSourceId();
}
endDrag() {
// empty
}
}
lib/NativeDragSources/nativeTypesConfig.js 0000644 00000001540 15167672620 0014715 0 ustar 00 import * as NativeTypes from '../NativeTypes';
import { getDataFromDataTransfer } from './getDataFromDataTransfer';
export const nativeTypesConfig = {
[NativeTypes.FILE]: {
exposeProperties: {
files: (dataTransfer) => Array.prototype.slice.call(dataTransfer.files),
items: (dataTransfer) => dataTransfer.items,
},
matchesTypes: ['Files'],
},
[NativeTypes.URL]: {
exposeProperties: {
urls: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'),
},
matchesTypes: ['Url', 'text/uri-list'],
},
[NativeTypes.TEXT]: {
exposeProperties: {
text: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
},
matchesTypes: ['Text', 'text/plain'],
},
};
lib/NativeDragSources/index.d.ts 0000644 00000000403 15167672620 0012614 0 ustar 00 import { NativeDragSource } from './NativeDragSource';
export declare function createNativeDragSource(type: string, dataTransfer?: DataTransfer): NativeDragSource;
export declare function matchNativeItemType(dataTransfer: DataTransfer | null): string | null;
lib/NativeDragSources/NativeDragSource.d.ts 0000644 00000000726 15167672620 0014722 0 ustar 00 import { NativeItemConfig } from './nativeTypesConfig';
import { DragDropMonitor } from 'dnd-core';
export declare class NativeDragSource {
item: any;
private config;
constructor(config: NativeItemConfig);
private initializeExposedProperties;
loadDataTransfer(dataTransfer: DataTransfer | null | undefined): void;
canDrag(): boolean;
beginDrag(): any;
isDragging(monitor: DragDropMonitor, handle: string): boolean;
endDrag(): void;
}
lib/types.js 0000644 00000000000 15167672620 0007016 0 ustar 00 lib/EnterLeaveCounter.js 0000644 00000001522 15167672620 0011256 0 ustar 00 import { union, without } from './utils/js_utils';
export class EnterLeaveCounter {
constructor(isNodeInDocument) {
this.entered = [];
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]);
return previousLength === 0 && this.entered.length > 0;
}
leave(leavingNode) {
const previousLength = this.entered.length;
this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
return previousLength > 0 && this.entered.length === 0;
}
reset() {
this.entered = [];
}
}
lib/MonotonicInterpolant.d.ts 0000644 00000000322 15167672620 0012302 0 ustar 00 export declare class MonotonicInterpolant {
private xs;
private ys;
private c1s;
private c2s;
private c3s;
constructor(xs: number[], ys: number[]);
interpolate(x: number): number;
}
lib/utils/js_utils.d.ts 0000644 00000000376 15167672620 0011122 0 ustar 00 export declare function memoize<T>(fn: () => T): () => T;
/**
* drop-in replacement for _.without
*/
export declare function without<T>(items: T[], item: T): T[];
export declare function union<T extends string | number>(itemsA: T[], itemsB: T[]): T[];
lib/utils/js_utils.js 0000644 00000001160 15167672620 0010656 0 ustar 00 // cheap lodash replacements
export function memoize(fn) {
let result = null;
const memoized = () => {
if (result == null) {
result = fn();
}
return result;
};
return memoized;
}
/**
* drop-in replacement for _.without
*/
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);
itemsA.forEach(insertItem);
itemsB.forEach(insertItem);
const result = [];
set.forEach(key => result.push(key));
return result;
}
lib/HTML5BackendImpl.js 0000644 00000053022 15167672620 0010611 0 ustar 00 import { EnterLeaveCounter } from './EnterLeaveCounter';
import { isFirefox } from './BrowserDetector';
import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset, } from './OffsetUtils';
import { createNativeDragSource, matchNativeItemType, } from './NativeDragSources';
import * as NativeTypes from './NativeTypes';
import { OptionsReader } from './OptionsReader';
export class HTML5BackendImpl {
constructor(manager, globalContext) {
this.sourcePreviewNodes = new Map();
this.sourcePreviewNodeOptions = new Map();
this.sourceNodes = new Map();
this.sourceNodeOptions = new Map();
this.dragStartSourceIds = null;
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.getSourceClientOffset = (sourceId) => {
const source = this.sourceNodes.get(sourceId);
return (source && getNodeClientOffset(source)) || null;
};
this.endDragNativeItem = () => {
if (!this.isDraggingNativeItem()) {
return;
}
this.actions.endDrag();
if (this.currentNativeHandle) {
this.registry.removeSource(this.currentNativeHandle);
}
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 &&
document.body.contains(node));
};
this.endDragIfSourceWasRemovedFromDOM = () => {
const node = this.currentDragSourceNode;
if (this.isNodeInDocument(node)) {
return;
}
if (this.clearCurrentDragSourceNode()) {
this.actions.endDrag();
}
};
this.handleTopDragStartCapture = () => {
this.clearCurrentDragSourceNode();
this.dragStartSourceIds = [];
};
this.handleTopDragStart = (e) => {
if (e.defaultPrevented) {
return;
}
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();
}
// 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);
}
}
try {
// Firefox won't drag without setting data
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();
}
};
this.handleTopDragEndCapture = () => {
if (this.clearCurrentDragSourceNode()) {
// 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 = [];
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 (!isFirefox()) {
// Don't emit hover in `dragenter` on Firefox due to an edge case.
// If the target changes position as the result of `dragenter`, Firefox
// will still happily dispatch `dragover` despite target being no longer
// there. The easy solution is to only fire `hover` in `dragover` on FF.
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 = () => {
this.dragOverTargetIds = [];
};
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';
}
return;
}
this.altKeyPressed = e.altKey;
this.actions.hover(dragOverTargetIds || [], {
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();
}
}
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()) {
this.endDragNativeItem();
}
};
this.handleTopDropCapture = (e) => {
this.dropTargetIds = [];
e.preventDefault();
if (this.isDraggingNativeItem()) {
this.currentNativeSource?.loadDataTransfer(e.dataTransfer);
}
this.enterLeaveCounter.reset();
};
this.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 {
this.endDragIfSourceWasRemovedFromDOM();
}
};
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;
}
// 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();
};
this.options = new OptionsReader(globalContext);
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() {
return {
sourcePreviewNodes: this.sourcePreviewNodes.size,
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
sourceNodeOptions: this.sourceNodeOptions.size,
sourceNodes: this.sourceNodes.size,
dragStartSourceIds: this.dragStartSourceIds?.length || 0,
dropTargetIds: this.dropTargetIds.length,
dragEnterTargetIds: this.dragEnterTargetIds.length,
dragOverTargetIds: this.dragOverTargetIds?.length || 0,
};
}
// public for test
get window() {
return this.options.window;
}
get document() {
return this.options.document;
}
setup() {
if (this.window === undefined) {
return;
}
if (this.window.__isReactDndBackendSetUp) {
throw new Error('Cannot have two HTML5 backends at the same time.');
}
this.window.__isReactDndBackendSetUp = true;
this.addEventListeners(this.window);
}
teardown() {
if (this.window === undefined) {
return;
}
this.window.__isReactDndBackendSetUp = false;
this.removeEventListeners(this.window);
this.clearCurrentDragSourceNode();
if (this.asyncEndDragFrameId) {
this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
}
}
connectDragPreview(sourceId, node, options) {
this.sourcePreviewNodeOptions.set(sourceId, options);
this.sourcePreviewNodes.set(sourceId, node);
return () => {
this.sourcePreviewNodes.delete(sourceId);
this.sourcePreviewNodeOptions.delete(sourceId);
};
}
connectDragSource(sourceId, node, options) {
this.sourceNodes.set(sourceId, node);
this.sourceNodeOptions.set(sourceId, options);
const handleDragStart = (e) => this.handleDragStart(e, sourceId);
const handleSelectStart = (e) => this.handleSelectStart(e);
node.setAttribute('draggable', 'true');
node.addEventListener('dragstart', handleDragStart);
node.addEventListener('selectstart', handleSelectStart);
return () => {
this.sourceNodes.delete(sourceId);
this.sourceNodeOptions.delete(sourceId);
node.removeEventListener('dragstart', handleDragStart);
node.removeEventListener('selectstart', handleSelectStart);
node.setAttribute('draggable', 'false');
};
}
connectDropTarget(targetId, node) {
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 () => {
node.removeEventListener('dragenter', handleDragEnter);
node.removeEventListener('dragover', handleDragOver);
node.removeEventListener('drop', handleDrop);
};
}
addEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.addEventListener) {
return;
}
target.addEventListener('dragstart', this.handleTopDragStart);
target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
target.addEventListener('dragend', this.handleTopDragEndCapture, true);
target.addEventListener('dragenter', this.handleTopDragEnter);
target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.addEventListener('dragover', this.handleTopDragOver);
target.addEventListener('dragover', this.handleTopDragOverCapture, true);
target.addEventListener('drop', this.handleTopDrop);
target.addEventListener('drop', this.handleTopDropCapture, true);
}
removeEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.removeEventListener) {
return;
}
target.removeEventListener('dragstart', this.handleTopDragStart);
target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
target.removeEventListener('dragenter', this.handleTopDragEnter);
target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.removeEventListener('dragover', this.handleTopDragOver);
target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
target.removeEventListener('drop', this.handleTopDrop);
target.removeEventListener('drop', this.handleTopDropCapture, true);
}
getCurrentSourceNodeOptions() {
const sourceId = this.monitor.getSourceId();
const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
return {
dropEffect: this.altKeyPressed ? 'copy' : 'move',
...(sourceNodeOptions || {}),
};
}
getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy';
}
return this.getCurrentSourceNodeOptions().dropEffect;
}
getCurrentSourcePreviewNodeOptions() {
const sourceId = this.monitor.getSourceId();
const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
return {
anchorX: 0.5,
anchorY: 0.5,
captureDraggingState: false,
...(sourcePreviewNodeOptions || {}),
};
}
isDraggingNativeItem() {
const itemType = this.monitor.getItemType();
return Object.keys(NativeTypes).some((key) => NativeTypes[key] === itemType);
}
beginDragNativeItem(type, dataTransfer) {
this.clearCurrentDragSourceNode();
this.currentNativeSource = createNativeDragSource(type, dataTransfer);
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
}
setCurrentDragSourceNode(node) {
this.clearCurrentDragSourceNode();
this.currentDragSourceNode = node;
// A timeout of > 0 is necessary to resolve Firefox issue referenced
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
const MOUSE_MOVE_TIMEOUT = 1000;
// Receiving a mouse event in the middle of a dragging operation
// means it has ended and the drag source node disappeared from DOM,
// so the browser didn't dispatch the dragend event.
//
// We need to wait before we start listening for mousemove events.
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
// immediately in some browsers.
//
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
//
this.mouseMoveTimeoutTimer = setTimeout(() => {
return (this.window &&
this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true));
}, MOUSE_MOVE_TIMEOUT);
}
clearCurrentDragSourceNode() {
if (this.currentDragSourceNode) {
this.currentDragSourceNode = null;
if (this.window) {
this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
}
this.mouseMoveTimeoutTimer = null;
return true;
}
return false;
}
handleDragStart(e, sourceId) {
if (e.defaultPrevented) {
return;
}
if (!this.dragStartSourceIds) {
this.dragStartSourceIds = [];
}
this.dragStartSourceIds.unshift(sourceId);
}
handleDragEnter(e, targetId) {
this.dragEnterTargetIds.unshift(targetId);
}
handleDragOver(e, targetId) {
if (this.dragOverTargetIds === null) {
this.dragOverTargetIds = [];
}
this.dragOverTargetIds.unshift(targetId);
}
handleDrop(e, targetId) {
this.dropTargetIds.unshift(targetId);
}
}
lib/index.js 0000644 00000000453 15167672620 0006775 0 ustar 00 import { HTML5BackendImpl } from './HTML5BackendImpl';
import * as NativeTypes from './NativeTypes';
export { getEmptyImage } from './getEmptyImage';
export { NativeTypes };
export const HTML5Backend = function createBackend(manager, context) {
return new HTML5BackendImpl(manager, context);
};
lib/BrowserDetector.d.ts 0000644 00000000335 15167672620 0011236 0 ustar 00 declare global {
interface Window extends HTMLElement {
safari: any;
}
}
export declare type Predicate = () => boolean;
export declare const isFirefox: Predicate;
export declare const isSafari: Predicate;
lib/OffsetUtils.d.ts 0000644 00000000654 15167672620 0010374 0 ustar 00 import { XYCoord } from 'dnd-core';
export declare function getNodeClientOffset(node: Node): XYCoord | null;
export declare function getEventClientOffset(e: MouseEvent): XYCoord;
export declare function getDragPreviewOffset(sourceNode: HTMLElement, dragPreview: HTMLElement, clientOffset: XYCoord, anchorPoint: {
anchorX: number;
anchorY: number;
}, offsetPoint: {
offsetX: number;
offsetY: number;
}): XYCoord;
lib/getEmptyImage.d.ts 0000644 00000000073 15167672620 0010661 0 ustar 00 export declare function getEmptyImage(): HTMLImageElement;
lib/OffsetUtils.js 0000644 00000007067 15167672620 0010145 0 ustar 00 import { isSafari, isFirefox } from './BrowserDetector';
import { MonotonicInterpolant } from './MonotonicInterpolant';
const ELEMENT_NODE = 1;
export function getNodeClientOffset(node) {
const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
if (!el) {
return null;
}
const { top, left } = el.getBoundingClientRect();
return { x: left, y: top };
}
export function getEventClientOffset(e) {
return {
x: e.clientX,
y: e.clientY,
};
}
function isImageNode(node) {
return (node.nodeName === 'IMG' &&
(isFirefox() || !document.documentElement?.contains(node)));
}
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
// Work around @2x coordinate discrepancies in browsers
if (isSafari() && isImage) {
dragPreviewHeight /= window.devicePixelRatio;
dragPreviewWidth /= window.devicePixelRatio;
}
return { dragPreviewWidth, dragPreviewHeight };
}
export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
const isImage = isImageNode(dragPreview);
const dragPreviewNode = isImage ? sourceNode : dragPreview;
const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
const offsetFromDragPreview = {
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
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], [
// Dock to the top
offsetFromDragPreview.y,
// Align at the center
(offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
// Dock to the bottom
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
]);
let y = interpolantY.interpolate(anchorY);
// Work around Safari 8 positioning bug
if (isSafari() && isImage) {
// We'll have to wait for @3x to see if this is entirely correct
y += (window.devicePixelRatio - 1) * dragPreviewHeight;
}
return y;
};
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], [
// Dock to the left
offsetFromDragPreview.x,
// Align at the center
(offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
// Dock to the right
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
]);
return interpolantX.interpolate(anchorX);
};
// Force offsets if specified in the options.
const { offsetX, offsetY } = offsetPoint;
const isManualOffsetX = offsetX === 0 || offsetX;
const isManualOffsetY = offsetY === 0 || offsetY;
return {
x: isManualOffsetX ? offsetX : calculateXOffset(),
y: isManualOffsetY ? offsetY : calculateYOffset(),
};
}
lib/getEmptyImage.js 0000644 00000000375 15167672620 0010432 0 ustar 00 let emptyImage;
export function getEmptyImage() {
if (!emptyImage) {
emptyImage = new Image();
emptyImage.src =
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
}
return emptyImage;
}
lib/HTML5BackendImpl.d.ts 0000644 00000005070 15167672620 0011045 0 ustar 00 import { Backend, DragDropManager, Unsubscribe } from 'dnd-core';
import { HTML5BackendContext } from './types';
declare global {
interface Window {
__isReactDndBackendSetUp: boolean | undefined;
}
}
export declare class HTML5BackendImpl implements Backend {
private options;
private actions;
private monitor;
private registry;
private enterLeaveCounter;
private sourcePreviewNodes;
private sourcePreviewNodeOptions;
private sourceNodes;
private sourceNodeOptions;
private dragStartSourceIds;
private dropTargetIds;
private dragEnterTargetIds;
private currentNativeSource;
private currentNativeHandle;
private currentDragSourceNode;
private altKeyPressed;
private mouseMoveTimeoutTimer;
private asyncEndDragFrameId;
private dragOverTargetIds;
constructor(manager: DragDropManager, globalContext?: HTML5BackendContext);
/**
* Generate profiling statistics for the HTML5Backend.
*/
profile(): Record<string, number>;
get window(): Window | undefined;
get document(): Document | undefined;
setup(): void;
teardown(): void;
connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
private addEventListeners;
private removeEventListeners;
private getCurrentSourceNodeOptions;
private getCurrentDropEffect;
private getCurrentSourcePreviewNodeOptions;
private getSourceClientOffset;
private isDraggingNativeItem;
private beginDragNativeItem;
private endDragNativeItem;
private isNodeInDocument;
private endDragIfSourceWasRemovedFromDOM;
private setCurrentDragSourceNode;
private clearCurrentDragSourceNode;
handleTopDragStartCapture: () => void;
handleDragStart(e: DragEvent, sourceId: string): void;
handleTopDragStart: (e: DragEvent) => void;
handleTopDragEndCapture: () => void;
handleTopDragEnterCapture: (e: DragEvent) => void;
handleDragEnter(e: DragEvent, targetId: string): void;
handleTopDragEnter: (e: DragEvent) => void;
handleTopDragOverCapture: () => void;
handleDragOver(e: DragEvent, targetId: string): void;
handleTopDragOver: (e: DragEvent) => void;
handleTopDragLeaveCapture: (e: DragEvent) => void;
handleTopDropCapture: (e: DragEvent) => void;
handleDrop(e: DragEvent, targetId: string): void;
handleTopDrop: (e: DragEvent) => void;
handleSelectStart: (e: DragEvent) => void;
}
lib/NativeTypes.js 0000644 00000000163 15167672620 0010137 0 ustar 00 export const FILE = '__NATIVE_FILE__';
export const URL = '__NATIVE_URL__';
export const TEXT = '__NATIVE_TEXT__';
lib/index.d.ts 0000644 00000000325 15167672620 0007227 0 ustar 00 import * as NativeTypes from './NativeTypes';
import { BackendFactory } from 'dnd-core';
export { getEmptyImage } from './getEmptyImage';
export { NativeTypes };
export declare const HTML5Backend: BackendFactory;
lib/EnterLeaveCounter.d.ts 0000644 00000000542 15167672620 0011513 0 ustar 00 declare type NodePredicate = (node: Node | null | undefined) => boolean;
export declare class EnterLeaveCounter {
private entered;
private isNodeInDocument;
constructor(isNodeInDocument: NodePredicate);
enter(enteringNode: EventTarget | null): boolean;
leave(leavingNode: EventTarget | null): boolean;
reset(): void;
}
export {};
lib/types.d.ts 0000644 00000000076 15167672620 0007267 0 ustar 00 export declare type HTML5BackendContext = Window | undefined;
lib/MonotonicInterpolant.js 0000644 00000005253 15167672620 0012056 0 ustar 00 export class MonotonicInterpolant {
constructor(xs, ys) {
const { length } = xs;
// Rearrange xs and ys so that xs is sorted
const indexes = [];
for (let i = 0; i < length; i++) {
indexes.push(i);
}
indexes.sort((a, b) => (xs[a] < xs[b] ? -1 : 1));
// Get consecutive differences and slopes
const dys = [];
const dxs = [];
const ms = [];
let dx;
let dy;
for (let i = 0; i < length - 1; i++) {
dx = xs[i + 1] - xs[i];
dy = ys[i + 1] - ys[i];
dxs.push(dx);
dys.push(dy);
ms.push(dy / dx);
}
// 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];
if (m2 * mNext <= 0) {
c1s.push(0);
}
else {
dx = dxs[i];
const dxNext = dxs[i + 1];
const common = dx + dxNext;
c1s.push((3 * common) / ((common + dxNext) / m2 + (common + dx) / mNext));
}
}
c1s.push(ms[ms.length - 1]);
// Get degree-2 and degree-3 coefficients
const c2s = [];
const c3s = [];
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;
c2s.push((m - c1 - common) * invDx);
c3s.push(common * invDx * invDx);
}
this.xs = xs;
this.ys = ys;
this.c1s = c1s;
this.c2s = c2s;
this.c3s = c3s;
}
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;
}
}
lib/NativeTypes.d.ts 0000644 00000000213 15167672620 0010367 0 ustar 00 export declare const FILE = "__NATIVE_FILE__";
export declare const URL = "__NATIVE_URL__";
export declare const TEXT = "__NATIVE_TEXT__";
lib/OptionsReader.d.ts 0000644 00000000366 15167672620 0010703 0 ustar 00 import { HTML5BackendContext } from './types';
export declare class OptionsReader {
private globalContext;
constructor(globalContext: HTML5BackendContext);
get window(): Window | undefined;
get document(): Document | undefined;
}
lib/BrowserDetector.js 0000644 00000000271 15167672621 0011002 0 ustar 00 import { memoize } from './utils/js_utils';
export const isFirefox = memoize(() => /firefox/i.test(navigator.userAgent));
export const isSafari = memoize(() => Boolean(window.safari));
LICENSE 0000644 00000002067 15167672621 0005573 0 ustar 00 The MIT License (MIT)
Copyright (c) 2015 Dan Abramov
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
dist/umd/ReactDnDHTML5Backend.min.js 0000644 00000041707 15167672621 0013110 0 ustar 00 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ReactDnDHTML5Backend={})}(this,(function(e){"use strict";function t(e){var t=null;return function(){return null==t&&(t=e()),t}}function r(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var n=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.entered=[],this.isNodeInDocument=t}var t,n,a;return t=e,(n=[{key:"enter",value:function(e){var t=this,r=this.entered.length;return this.entered=function(e,t){var r=new Set,n=function(e){return r.add(e)};e.forEach(n),t.forEach(n);var a=[];return r.forEach((function(e){return a.push(e)})),a}(this.entered.filter((function(r){return t.isNodeInDocument(r)&&(!r.contains||r.contains(e))})),[e]),0===r&&this.entered.length>0}},{key:"leave",value:function(e){var t,r,n=this.entered.length;return this.entered=(t=this.entered.filter(this.isNodeInDocument),r=e,t.filter((function(e){return e!==r}))),n>0&&0===this.entered.length}},{key:"reset",value:function(){this.entered=[]}}])&&r(t.prototype,n),a&&r(t,a),e}(),a=t((function(){return/firefox/i.test(navigator.userAgent)})),i=t((function(){return Boolean(window.safari)}));function o(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var s=function(){function e(t,r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);for(var n=t.length,a=[],i=0;i<n;i++)a.push(i);a.sort((function(e,r){return t[e]<t[r]?-1:1}));for(var o,s,u=[],d=[],c=0;c<n-1;c++)o=t[c+1]-t[c],s=r[c+1]-r[c],u.push(o),d.push(s/o);for(var l=[d[0]],g=0;g<u.length-1;g++){var f=d[g],v=d[g+1];if(f*v<=0)l.push(0);else{o=u[g];var h=u[g+1],p=o+h;l.push(3*p/((p+h)/f+(p+o)/v))}}l.push(d[d.length-1]);for(var m,D=[],y=[],w=0;w<l.length-1;w++){m=d[w];var T=l[w],E=1/u[w],b=T+l[w+1]-m-m;D.push((m-T-b)*E),y.push(b*E*E)}this.xs=t,this.ys=r,this.c1s=l,this.c2s=D,this.c3s=y}var t,r,n;return t=e,(r=[{key:"interpolate",value:function(e){var t=this.xs,r=this.ys,n=this.c1s,a=this.c2s,i=this.c3s,o=t.length-1;if(e===t[o])return r[o];for(var s,u=0,d=i.length-1;u<=d;){var c=t[s=Math.floor(.5*(u+d))];if(c<e)u=s+1;else{if(!(c>e))return r[s];d=s-1}}var l=e-t[o=Math.max(0,d)],g=l*l;return r[o]+n[o]*l+a[o]*g+i[o]*l*g}}])&&o(t.prototype,r),n&&o(t,n),e}();function u(e){var t=1===e.nodeType?e:e.parentElement;if(!t)return null;var r=t.getBoundingClientRect(),n=r.top;return{x:r.left,y:n}}function d(e){return{x:e.clientX,y:e.clientY}}function c(e,t,r,n,o){var d,c,l,g="IMG"===(d=t).nodeName&&(a()||!(null===(c=document.documentElement)||void 0===c?void 0:c.contains(d))),f=u(g?e:t),v={x:r.x-f.x,y:r.y-f.y},h=e.offsetWidth,p=e.offsetHeight,m=n.anchorX,D=n.anchorY,y=function(e,t,r,n){var a=e?t.width:r,o=e?t.height:n;return i()&&e&&(o/=window.devicePixelRatio,a/=window.devicePixelRatio),{dragPreviewWidth:a,dragPreviewHeight:o}}(g,t,h,p),w=y.dragPreviewWidth,T=y.dragPreviewHeight,E=o.offsetX,b=o.offsetY,N=0===b||b;return{x:0===E||E?E:new s([0,.5,1],[v.x,v.x/h*w,v.x+w-h]).interpolate(m),y:N?b:(l=new s([0,.5,1],[v.y,v.y/p*T,v.y+T-p]).interpolate(D),i()&&g&&(l+=(window.devicePixelRatio-1)*T),l)}}var l,g="__NATIVE_FILE__",f="__NATIVE_URL__",v="__NATIVE_TEXT__",h=Object.freeze({__proto__:null,FILE:g,URL:f,TEXT:v});function p(e,t,r){var n=t.reduce((function(t,r){return t||e.getData(r)}),"");return null!=n?n:r}function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var D=(m(l={},g,{exposeProperties:{files:function(e){return Array.prototype.slice.call(e.files)},items:function(e){return e.items}},matchesTypes:["Files"]}),m(l,f,{exposeProperties:{urls:function(e,t){return p(e,t,"").split("\n")}},matchesTypes:["Url","text/uri-list"]}),m(l,v,{exposeProperties:{text:function(e,t){return p(e,t,"")}},matchesTypes:["Text","text/plain"]}),l);function y(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var w=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.config=t,this.item={},this.initializeExposedProperties()}var t,r,n;return t=e,(r=[{key:"initializeExposedProperties",value:function(){var e=this;Object.keys(this.config.exposeProperties).forEach((function(t){Object.defineProperty(e.item,t,{configurable:!0,enumerable:!0,get:function(){return console.warn("Browser doesn't allow reading \"".concat(t,'" until the drop event.')),null}})}))}},{key:"loadDataTransfer",value:function(e){var t=this;if(e){var r={};Object.keys(this.config.exposeProperties).forEach((function(n){r[n]={value:t.config.exposeProperties[n](e,t.config.matchesTypes),configurable:!0,enumerable:!0}})),Object.defineProperties(this.item,r)}}},{key:"canDrag",value:function(){return!0}},{key:"beginDrag",value:function(){return this.item}},{key:"isDragging",value:function(e,t){return t===e.getSourceId()}},{key:"endDrag",value:function(){}}])&&y(t.prototype,r),n&&y(t,n),e}();function T(e){if(!e)return null;var t=Array.prototype.slice.call(e.types||[]);return Object.keys(D).filter((function(e){return D[e].matchesTypes.some((function(e){return t.indexOf(e)>-1}))}))[0]||null}function E(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var b=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.globalContext=t}var t,r,n;return t=e,(r=[{key:"window",get:function(){return this.globalContext?this.globalContext:"undefined"!=typeof window?window:void 0}},{key:"document",get:function(){if(this.window)return this.window.document}}])&&E(t.prototype,r),n&&E(t,n),e}();function N(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?N(Object(r),!0).forEach((function(t){S(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function S(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var C,P=function(){function e(t,r){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.sourcePreviewNodes=new Map,this.sourcePreviewNodeOptions=new Map,this.sourceNodes=new Map,this.sourceNodeOptions=new Map,this.dragStartSourceIds=null,this.dropTargetIds=[],this.dragEnterTargetIds=[],this.currentNativeSource=null,this.currentNativeHandle=null,this.currentDragSourceNode=null,this.altKeyPressed=!1,this.mouseMoveTimeoutTimer=null,this.asyncEndDragFrameId=null,this.dragOverTargetIds=null,this.getSourceClientOffset=function(e){var t=i.sourceNodes.get(e);return t&&u(t)||null},this.endDragNativeItem=function(){i.isDraggingNativeItem()&&(i.actions.endDrag(),i.currentNativeHandle&&i.registry.removeSource(i.currentNativeHandle),i.currentNativeHandle=null,i.currentNativeSource=null)},this.isNodeInDocument=function(e){return Boolean(e&&i.document&&i.document.body&&document.body.contains(e))},this.endDragIfSourceWasRemovedFromDOM=function(){var e=i.currentDragSourceNode;i.isNodeInDocument(e)||i.clearCurrentDragSourceNode()&&i.actions.endDrag()},this.handleTopDragStartCapture=function(){i.clearCurrentDragSourceNode(),i.dragStartSourceIds=[]},this.handleTopDragStart=function(e){if(!e.defaultPrevented){var t=i.dragStartSourceIds;i.dragStartSourceIds=null;var r=d(e);i.monitor.isDragging()&&i.actions.endDrag(),i.actions.beginDrag(t||[],{publishSource:!1,getSourceClientOffset:i.getSourceClientOffset,clientOffset:r});var n=e.dataTransfer,a=T(n);if(i.monitor.isDragging()){if(n&&"function"==typeof n.setDragImage){var o=i.monitor.getSourceId(),s=i.sourceNodes.get(o),u=i.sourcePreviewNodes.get(o)||s;if(u){var l=i.getCurrentSourcePreviewNodeOptions(),g=c(s,u,r,{anchorX:l.anchorX,anchorY:l.anchorY},{offsetX:l.offsetX,offsetY:l.offsetY});n.setDragImage(u,g.x,g.y)}}try{null==n||n.setData("application/json",{})}catch(e){}i.setCurrentDragSourceNode(e.target),i.getCurrentSourcePreviewNodeOptions().captureDraggingState?i.actions.publishDragSource():setTimeout((function(){return i.actions.publishDragSource()}),0)}else if(a)i.beginDragNativeItem(a);else{if(n&&!n.types&&(e.target&&!e.target.hasAttribute||!e.target.hasAttribute("draggable")))return;e.preventDefault()}}},this.handleTopDragEndCapture=function(){i.clearCurrentDragSourceNode()&&i.actions.endDrag()},this.handleTopDragEnterCapture=function(e){if(i.dragEnterTargetIds=[],i.enterLeaveCounter.enter(e.target)&&!i.monitor.isDragging()){var t=e.dataTransfer,r=T(t);r&&i.beginDragNativeItem(r,t)}},this.handleTopDragEnter=function(e){var t=i.dragEnterTargetIds;(i.dragEnterTargetIds=[],i.monitor.isDragging())&&(i.altKeyPressed=e.altKey,a()||i.actions.hover(t,{clientOffset:d(e)}),t.some((function(e){return i.monitor.canDropOnTarget(e)}))&&(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=i.getCurrentDropEffect())))},this.handleTopDragOverCapture=function(){i.dragOverTargetIds=[]},this.handleTopDragOver=function(e){var t=i.dragOverTargetIds;if(i.dragOverTargetIds=[],!i.monitor.isDragging())return e.preventDefault(),void(e.dataTransfer&&(e.dataTransfer.dropEffect="none"));i.altKeyPressed=e.altKey,i.actions.hover(t||[],{clientOffset:d(e)}),(t||[]).some((function(e){return i.monitor.canDropOnTarget(e)}))?(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=i.getCurrentDropEffect())):i.isDraggingNativeItem()?e.preventDefault():(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="none"))},this.handleTopDragLeaveCapture=function(e){i.isDraggingNativeItem()&&e.preventDefault(),i.enterLeaveCounter.leave(e.target)&&i.isDraggingNativeItem()&&i.endDragNativeItem()},this.handleTopDropCapture=function(e){var t;(i.dropTargetIds=[],e.preventDefault(),i.isDraggingNativeItem())&&(null===(t=i.currentNativeSource)||void 0===t||t.loadDataTransfer(e.dataTransfer));i.enterLeaveCounter.reset()},this.handleTopDrop=function(e){var t=i.dropTargetIds;i.dropTargetIds=[],i.actions.hover(t,{clientOffset:d(e)}),i.actions.drop({dropEffect:i.getCurrentDropEffect()}),i.isDraggingNativeItem()?i.endDragNativeItem():i.endDragIfSourceWasRemovedFromDOM()},this.handleSelectStart=function(e){var t=e.target;"function"==typeof t.dragDrop&&("INPUT"===t.tagName||"SELECT"===t.tagName||"TEXTAREA"===t.tagName||t.isContentEditable||(e.preventDefault(),t.dragDrop()))},this.options=new b(r),this.actions=t.getActions(),this.monitor=t.getMonitor(),this.registry=t.getRegistry(),this.enterLeaveCounter=new n(this.isNodeInDocument)}var t,r,i;return t=e,(r=[{key:"profile",value:function(){var e,t;return{sourcePreviewNodes:this.sourcePreviewNodes.size,sourcePreviewNodeOptions:this.sourcePreviewNodeOptions.size,sourceNodeOptions:this.sourceNodeOptions.size,sourceNodes:this.sourceNodes.size,dragStartSourceIds:(null===(e=this.dragStartSourceIds)||void 0===e?void 0:e.length)||0,dropTargetIds:this.dropTargetIds.length,dragEnterTargetIds:this.dragEnterTargetIds.length,dragOverTargetIds:(null===(t=this.dragOverTargetIds)||void 0===t?void 0:t.length)||0}}},{key:"setup",value:function(){if(void 0!==this.window){if(this.window.__isReactDndBackendSetUp)throw new Error("Cannot have two HTML5 backends at the same time.");this.window.__isReactDndBackendSetUp=!0,this.addEventListeners(this.window)}}},{key:"teardown",value:function(){void 0!==this.window&&(this.window.__isReactDndBackendSetUp=!1,this.removeEventListeners(this.window),this.clearCurrentDragSourceNode(),this.asyncEndDragFrameId&&this.window.cancelAnimationFrame(this.asyncEndDragFrameId))}},{key:"connectDragPreview",value:function(e,t,r){var n=this;return this.sourcePreviewNodeOptions.set(e,r),this.sourcePreviewNodes.set(e,t),function(){n.sourcePreviewNodes.delete(e),n.sourcePreviewNodeOptions.delete(e)}}},{key:"connectDragSource",value:function(e,t,r){var n=this;this.sourceNodes.set(e,t),this.sourceNodeOptions.set(e,r);var a=function(t){return n.handleDragStart(t,e)},i=function(e){return n.handleSelectStart(e)};return t.setAttribute("draggable","true"),t.addEventListener("dragstart",a),t.addEventListener("selectstart",i),function(){n.sourceNodes.delete(e),n.sourceNodeOptions.delete(e),t.removeEventListener("dragstart",a),t.removeEventListener("selectstart",i),t.setAttribute("draggable","false")}}},{key:"connectDropTarget",value:function(e,t){var r=this,n=function(t){return r.handleDragEnter(t,e)},a=function(t){return r.handleDragOver(t,e)},i=function(t){return r.handleDrop(t,e)};return t.addEventListener("dragenter",n),t.addEventListener("dragover",a),t.addEventListener("drop",i),function(){t.removeEventListener("dragenter",n),t.removeEventListener("dragover",a),t.removeEventListener("drop",i)}}},{key:"addEventListeners",value:function(e){e.addEventListener&&(e.addEventListener("dragstart",this.handleTopDragStart),e.addEventListener("dragstart",this.handleTopDragStartCapture,!0),e.addEventListener("dragend",this.handleTopDragEndCapture,!0),e.addEventListener("dragenter",this.handleTopDragEnter),e.addEventListener("dragenter",this.handleTopDragEnterCapture,!0),e.addEventListener("dragleave",this.handleTopDragLeaveCapture,!0),e.addEventListener("dragover",this.handleTopDragOver),e.addEventListener("dragover",this.handleTopDragOverCapture,!0),e.addEventListener("drop",this.handleTopDrop),e.addEventListener("drop",this.handleTopDropCapture,!0))}},{key:"removeEventListeners",value:function(e){e.removeEventListener&&(e.removeEventListener("dragstart",this.handleTopDragStart),e.removeEventListener("dragstart",this.handleTopDragStartCapture,!0),e.removeEventListener("dragend",this.handleTopDragEndCapture,!0),e.removeEventListener("dragenter",this.handleTopDragEnter),e.removeEventListener("dragenter",this.handleTopDragEnterCapture,!0),e.removeEventListener("dragleave",this.handleTopDragLeaveCapture,!0),e.removeEventListener("dragover",this.handleTopDragOver),e.removeEventListener("dragover",this.handleTopDragOverCapture,!0),e.removeEventListener("drop",this.handleTopDrop),e.removeEventListener("drop",this.handleTopDropCapture,!0))}},{key:"getCurrentSourceNodeOptions",value:function(){var e=this.monitor.getSourceId(),t=this.sourceNodeOptions.get(e);return O({dropEffect:this.altKeyPressed?"copy":"move"},t||{})}},{key:"getCurrentDropEffect",value:function(){return this.isDraggingNativeItem()?"copy":this.getCurrentSourceNodeOptions().dropEffect}},{key:"getCurrentSourcePreviewNodeOptions",value:function(){var e=this.monitor.getSourceId();return O({anchorX:.5,anchorY:.5,captureDraggingState:!1},this.sourcePreviewNodeOptions.get(e)||{})}},{key:"isDraggingNativeItem",value:function(){var e=this.monitor.getItemType();return Object.keys(h).some((function(t){return h[t]===e}))}},{key:"beginDragNativeItem",value:function(e,t){this.clearCurrentDragSourceNode(),this.currentNativeSource=function(e,t){var r=new w(D[e]);return r.loadDataTransfer(t),r}(e,t),this.currentNativeHandle=this.registry.addSource(e,this.currentNativeSource),this.actions.beginDrag([this.currentNativeHandle])}},{key:"setCurrentDragSourceNode",value:function(e){var t=this;this.clearCurrentDragSourceNode(),this.currentDragSourceNode=e,this.mouseMoveTimeoutTimer=setTimeout((function(){return t.window&&t.window.addEventListener("mousemove",t.endDragIfSourceWasRemovedFromDOM,!0)}),1e3)}},{key:"clearCurrentDragSourceNode",value:function(){return!!this.currentDragSourceNode&&(this.currentDragSourceNode=null,this.window&&(this.window.clearTimeout(this.mouseMoveTimeoutTimer||void 0),this.window.removeEventListener("mousemove",this.endDragIfSourceWasRemovedFromDOM,!0)),this.mouseMoveTimeoutTimer=null,!0)}},{key:"handleDragStart",value:function(e,t){e.defaultPrevented||(this.dragStartSourceIds||(this.dragStartSourceIds=[]),this.dragStartSourceIds.unshift(t))}},{key:"handleDragEnter",value:function(e,t){this.dragEnterTargetIds.unshift(t)}},{key:"handleDragOver",value:function(e,t){null===this.dragOverTargetIds&&(this.dragOverTargetIds=[]),this.dragOverTargetIds.unshift(t)}},{key:"handleDrop",value:function(e,t){this.dropTargetIds.unshift(t)}},{key:"window",get:function(){return this.options.window}},{key:"document",get:function(){return this.options.document}}])&&I(t.prototype,r),i&&I(t,i),e}();e.HTML5Backend=function(e,t){return new P(e,t)},e.NativeTypes=h,e.getEmptyImage=function(){return C||((C=new Image).src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),C},Object.defineProperty(e,"__esModule",{value:!0})}));
dist/umd/ReactDnDHTML5Backend.js 0000644 00000122311 15167672621 0012315 0 ustar 00 (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.ReactDnDHTML5Backend = {}));
}(this, (function (exports) { 'use strict';
// cheap lodash replacements
function memoize(fn) {
var result = null;
var memoized = function memoized() {
if (result == null) {
result = fn();
}
return result;
};
return memoized;
}
/**
* drop-in replacement for _.without
*/
function without(items, item) {
return items.filter(function (i) {
return i !== item;
});
}
function union(itemsA, itemsB) {
var set = new Set();
var insertItem = function insertItem(item) {
return set.add(item);
};
itemsA.forEach(insertItem);
itemsB.forEach(insertItem);
var result = [];
set.forEach(function (key) {
return result.push(key);
});
return result;
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var EnterLeaveCounter = /*#__PURE__*/function () {
function EnterLeaveCounter(isNodeInDocument) {
_classCallCheck(this, EnterLeaveCounter);
this.entered = [];
this.isNodeInDocument = isNodeInDocument;
}
_createClass(EnterLeaveCounter, [{
key: "enter",
value: function enter(enteringNode) {
var _this = this;
var previousLength = this.entered.length;
var isNodeEntered = function isNodeEntered(node) {
return _this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode));
};
this.entered = union(this.entered.filter(isNodeEntered), [enteringNode]);
return previousLength === 0 && this.entered.length > 0;
}
}, {
key: "leave",
value: function leave(leavingNode) {
var previousLength = this.entered.length;
this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
return previousLength > 0 && this.entered.length === 0;
}
}, {
key: "reset",
value: function reset() {
this.entered = [];
}
}]);
return EnterLeaveCounter;
}();
var isFirefox = memoize(function () {
return /firefox/i.test(navigator.userAgent);
});
var isSafari = memoize(function () {
return Boolean(window.safari);
});
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
var MonotonicInterpolant = /*#__PURE__*/function () {
function MonotonicInterpolant(xs, ys) {
_classCallCheck$1(this, MonotonicInterpolant);
var length = xs.length; // Rearrange xs and ys so that xs is sorted
var indexes = [];
for (var i = 0; i < length; i++) {
indexes.push(i);
}
indexes.sort(function (a, b) {
return xs[a] < xs[b] ? -1 : 1;
}); // Get consecutive differences and slopes
var dxs = [];
var ms = [];
var dx;
var dy;
for (var _i = 0; _i < length - 1; _i++) {
dx = xs[_i + 1] - xs[_i];
dy = ys[_i + 1] - ys[_i];
dxs.push(dx);
ms.push(dy / dx);
} // Get degree-1 coefficients
var c1s = [ms[0]];
for (var _i2 = 0; _i2 < dxs.length - 1; _i2++) {
var m2 = ms[_i2];
var mNext = ms[_i2 + 1];
if (m2 * mNext <= 0) {
c1s.push(0);
} else {
dx = dxs[_i2];
var dxNext = dxs[_i2 + 1];
var common = dx + dxNext;
c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
}
}
c1s.push(ms[ms.length - 1]); // Get degree-2 and degree-3 coefficients
var c2s = [];
var c3s = [];
var m;
for (var _i3 = 0; _i3 < c1s.length - 1; _i3++) {
m = ms[_i3];
var c1 = c1s[_i3];
var invDx = 1 / dxs[_i3];
var _common = c1 + c1s[_i3 + 1] - m - m;
c2s.push((m - c1 - _common) * invDx);
c3s.push(_common * invDx * invDx);
}
this.xs = xs;
this.ys = ys;
this.c1s = c1s;
this.c2s = c2s;
this.c3s = c3s;
}
_createClass$1(MonotonicInterpolant, [{
key: "interpolate",
value: function interpolate(x) {
var xs = this.xs,
ys = this.ys,
c1s = this.c1s,
c2s = this.c2s,
c3s = this.c3s; // The rightmost point in the dataset should give an exact result
var 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
var low = 0;
var high = c3s.length - 1;
var mid;
while (low <= high) {
mid = Math.floor(0.5 * (low + high));
var 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
var diff = x - xs[i];
var diffSq = diff * diff;
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
}
}]);
return MonotonicInterpolant;
}();
var ELEMENT_NODE = 1;
function getNodeClientOffset(node) {
var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
if (!el) {
return null;
}
var _el$getBoundingClient = el.getBoundingClientRect(),
top = _el$getBoundingClient.top,
left = _el$getBoundingClient.left;
return {
x: left,
y: top
};
}
function getEventClientOffset(e) {
return {
x: e.clientX,
y: e.clientY
};
}
function isImageNode(node) {
var _document$documentEle;
return node.nodeName === 'IMG' && (isFirefox() || !((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.contains(node)));
}
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight; // Work around @2x coordinate discrepancies in browsers
if (isSafari() && isImage) {
dragPreviewHeight /= window.devicePixelRatio;
dragPreviewWidth /= window.devicePixelRatio;
}
return {
dragPreviewWidth: dragPreviewWidth,
dragPreviewHeight: dragPreviewHeight
};
}
function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
var isImage = isImageNode(dragPreview);
var dragPreviewNode = isImage ? sourceNode : dragPreview;
var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
var offsetFromDragPreview = {
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
};
var sourceWidth = sourceNode.offsetWidth,
sourceHeight = sourceNode.offsetHeight;
var anchorX = anchorPoint.anchorX,
anchorY = anchorPoint.anchorY;
var _getDragPreviewSize = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight),
dragPreviewWidth = _getDragPreviewSize.dragPreviewWidth,
dragPreviewHeight = _getDragPreviewSize.dragPreviewHeight;
var calculateYOffset = function calculateYOffset() {
var interpolantY = new MonotonicInterpolant([0, 0.5, 1], [// Dock to the top
offsetFromDragPreview.y, // Align at the center
offsetFromDragPreview.y / sourceHeight * dragPreviewHeight, // Dock to the bottom
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
var y = interpolantY.interpolate(anchorY); // Work around Safari 8 positioning bug
if (isSafari() && isImage) {
// We'll have to wait for @3x to see if this is entirely correct
y += (window.devicePixelRatio - 1) * dragPreviewHeight;
}
return y;
};
var calculateXOffset = function calculateXOffset() {
// Interpolate coordinates depending on anchor point
// If you know a simpler way to do this, let me know
var interpolantX = new MonotonicInterpolant([0, 0.5, 1], [// Dock to the left
offsetFromDragPreview.x, // Align at the center
offsetFromDragPreview.x / sourceWidth * dragPreviewWidth, // Dock to the right
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth]);
return interpolantX.interpolate(anchorX);
}; // Force offsets if specified in the options.
var offsetX = offsetPoint.offsetX,
offsetY = offsetPoint.offsetY;
var isManualOffsetX = offsetX === 0 || offsetX;
var isManualOffsetY = offsetY === 0 || offsetY;
return {
x: isManualOffsetX ? offsetX : calculateXOffset(),
y: isManualOffsetY ? offsetY : calculateYOffset()
};
}
var FILE = '__NATIVE_FILE__';
var URL = '__NATIVE_URL__';
var TEXT = '__NATIVE_TEXT__';
var NativeTypes = /*#__PURE__*/Object.freeze({
__proto__: null,
FILE: FILE,
URL: URL,
TEXT: TEXT
});
function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
return resultSoFar || dataTransfer.getData(typeToTry);
}, '');
return result != null ? result : defaultValue;
}
var _nativeTypesConfig;
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; }
var nativeTypesConfig = (_nativeTypesConfig = {}, _defineProperty(_nativeTypesConfig, FILE, {
exposeProperties: {
files: function files(dataTransfer) {
return Array.prototype.slice.call(dataTransfer.files);
},
items: function items(dataTransfer) {
return dataTransfer.items;
}
},
matchesTypes: ['Files']
}), _defineProperty(_nativeTypesConfig, URL, {
exposeProperties: {
urls: function urls(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
}
},
matchesTypes: ['Url', 'text/uri-list']
}), _defineProperty(_nativeTypesConfig, TEXT, {
exposeProperties: {
text: function text(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '');
}
},
matchesTypes: ['Text', 'text/plain']
}), _nativeTypesConfig);
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
var NativeDragSource = /*#__PURE__*/function () {
function NativeDragSource(config) {
_classCallCheck$2(this, NativeDragSource);
this.config = config;
this.item = {};
this.initializeExposedProperties();
}
_createClass$2(NativeDragSource, [{
key: "initializeExposedProperties",
value: function initializeExposedProperties() {
var _this = this;
Object.keys(this.config.exposeProperties).forEach(function (property) {
Object.defineProperty(_this.item, property, {
configurable: true,
enumerable: true,
get: function get() {
// eslint-disable-next-line no-console
console.warn("Browser doesn't allow reading \"".concat(property, "\" until the drop event."));
return null;
}
});
});
}
}, {
key: "loadDataTransfer",
value: function loadDataTransfer(dataTransfer) {
var _this2 = this;
if (dataTransfer) {
var newProperties = {};
Object.keys(this.config.exposeProperties).forEach(function (property) {
newProperties[property] = {
value: _this2.config.exposeProperties[property](dataTransfer, _this2.config.matchesTypes),
configurable: true,
enumerable: true
};
});
Object.defineProperties(this.item, newProperties);
}
}
}, {
key: "canDrag",
value: function canDrag() {
return true;
}
}, {
key: "beginDrag",
value: function beginDrag() {
return this.item;
}
}, {
key: "isDragging",
value: function isDragging(monitor, handle) {
return handle === monitor.getSourceId();
}
}, {
key: "endDrag",
value: function endDrag() {// empty
}
}]);
return NativeDragSource;
}();
function createNativeDragSource(type, dataTransfer) {
var result = new NativeDragSource(nativeTypesConfig[type]);
result.loadDataTransfer(dataTransfer);
return result;
}
function matchNativeItemType(dataTransfer) {
if (!dataTransfer) {
return null;
}
var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
return Object.keys(nativeTypesConfig).filter(function (nativeItemType) {
var matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;
return matchesTypes.some(function (t) {
return dataTransferTypes.indexOf(t) > -1;
});
})[0] || null;
}
function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties$3(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); if (staticProps) _defineProperties$3(Constructor, staticProps); return Constructor; }
var OptionsReader = /*#__PURE__*/function () {
function OptionsReader(globalContext) {
_classCallCheck$3(this, OptionsReader);
this.globalContext = globalContext;
}
_createClass$3(OptionsReader, [{
key: "window",
get: function get() {
if (this.globalContext) {
return this.globalContext;
} else if (typeof window !== 'undefined') {
return window;
}
return undefined;
}
}, {
key: "document",
get: function get() {
if (this.window) {
return this.window.document;
}
return undefined;
}
}]);
return OptionsReader;
}();
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty$1(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 _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties$4(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass$4(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$4(Constructor.prototype, protoProps); if (staticProps) _defineProperties$4(Constructor, staticProps); return Constructor; }
var HTML5BackendImpl = /*#__PURE__*/function () {
function HTML5BackendImpl(manager, globalContext) {
var _this = this;
_classCallCheck$4(this, HTML5BackendImpl);
this.sourcePreviewNodes = new Map();
this.sourcePreviewNodeOptions = new Map();
this.sourceNodes = new Map();
this.sourceNodeOptions = new Map();
this.dragStartSourceIds = null;
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.getSourceClientOffset = function (sourceId) {
var source = _this.sourceNodes.get(sourceId);
return source && getNodeClientOffset(source) || null;
};
this.endDragNativeItem = function () {
if (!_this.isDraggingNativeItem()) {
return;
}
_this.actions.endDrag();
if (_this.currentNativeHandle) {
_this.registry.removeSource(_this.currentNativeHandle);
}
_this.currentNativeHandle = null;
_this.currentNativeSource = null;
};
this.isNodeInDocument = function (node) {
// Check the node either in the main document or in the current context
return Boolean(node && _this.document && _this.document.body && document.body.contains(node));
};
this.endDragIfSourceWasRemovedFromDOM = function () {
var node = _this.currentDragSourceNode;
if (_this.isNodeInDocument(node)) {
return;
}
if (_this.clearCurrentDragSourceNode()) {
_this.actions.endDrag();
}
};
this.handleTopDragStartCapture = function () {
_this.clearCurrentDragSourceNode();
_this.dragStartSourceIds = [];
};
this.handleTopDragStart = function (e) {
if (e.defaultPrevented) {
return;
}
var dragStartSourceIds = _this.dragStartSourceIds;
_this.dragStartSourceIds = null;
var clientOffset = getEventClientOffset(e); // Avoid crashing if we missed a drop event or our previous drag died
if (_this.monitor.isDragging()) {
_this.actions.endDrag();
} // Don't publish the source just yet (see why below)
_this.actions.beginDrag(dragStartSourceIds || [], {
publishSource: false,
getSourceClientOffset: _this.getSourceClientOffset,
clientOffset: clientOffset
});
var dataTransfer = e.dataTransfer;
var 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.
var sourceId = _this.monitor.getSourceId();
var sourceNode = _this.sourceNodes.get(sourceId);
var dragPreview = _this.sourcePreviewNodes.get(sourceId) || sourceNode;
if (dragPreview) {
var _this$getCurrentSourc = _this.getCurrentSourcePreviewNodeOptions(),
anchorX = _this$getCurrentSourc.anchorX,
anchorY = _this$getCurrentSourc.anchorY,
offsetX = _this$getCurrentSourc.offsetX,
offsetY = _this$getCurrentSourc.offsetY;
var anchorPoint = {
anchorX: anchorX,
anchorY: anchorY
};
var offsetPoint = {
offsetX: offsetX,
offsetY: offsetY
};
var 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?
var _this$getCurrentSourc2 = _this.getCurrentSourcePreviewNodeOptions(),
captureDraggingState = _this$getCurrentSourc2.captureDraggingState;
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(function () {
return _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();
}
};
this.handleTopDragEndCapture = function () {
if (_this.clearCurrentDragSourceNode()) {
// 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 = function (e) {
_this.dragEnterTargetIds = [];
var isFirstEnter = _this.enterLeaveCounter.enter(e.target);
if (!isFirstEnter || _this.monitor.isDragging()) {
return;
}
var dataTransfer = e.dataTransfer;
var nativeType = matchNativeItemType(dataTransfer);
if (nativeType) {
// A native item (such as file or URL) dragged from outside the document
_this.beginDragNativeItem(nativeType, dataTransfer);
}
};
this.handleTopDragEnter = function (e) {
var dragEnterTargetIds = _this.dragEnterTargetIds;
_this.dragEnterTargetIds = [];
if (!_this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return;
}
_this.altKeyPressed = e.altKey;
if (!isFirefox()) {
// Don't emit hover in `dragenter` on Firefox due to an edge case.
// If the target changes position as the result of `dragenter`, Firefox
// will still happily dispatch `dragover` despite target being no longer
// there. The easy solution is to only fire `hover` in `dragover` on FF.
_this.actions.hover(dragEnterTargetIds, {
clientOffset: getEventClientOffset(e)
});
}
var canDrop = dragEnterTargetIds.some(function (targetId) {
return _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 = function () {
_this.dragOverTargetIds = [];
};
this.handleTopDragOver = function (e) {
var dragOverTargetIds = _this.dragOverTargetIds;
_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';
}
return;
}
_this.altKeyPressed = e.altKey;
_this.actions.hover(dragOverTargetIds || [], {
clientOffset: getEventClientOffset(e)
});
var canDrop = (dragOverTargetIds || []).some(function (targetId) {
return _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 = function (e) {
if (_this.isDraggingNativeItem()) {
e.preventDefault();
}
var isLastLeave = _this.enterLeaveCounter.leave(e.target);
if (!isLastLeave) {
return;
}
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
}
};
this.handleTopDropCapture = function (e) {
_this.dropTargetIds = [];
e.preventDefault();
if (_this.isDraggingNativeItem()) {
var _this$currentNativeSo;
(_this$currentNativeSo = _this.currentNativeSource) === null || _this$currentNativeSo === void 0 ? void 0 : _this$currentNativeSo.loadDataTransfer(e.dataTransfer);
}
_this.enterLeaveCounter.reset();
};
this.handleTopDrop = function (e) {
var dropTargetIds = _this.dropTargetIds;
_this.dropTargetIds = [];
_this.actions.hover(dropTargetIds, {
clientOffset: getEventClientOffset(e)
});
_this.actions.drop({
dropEffect: _this.getCurrentDropEffect()
});
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
} else {
_this.endDragIfSourceWasRemovedFromDOM();
}
};
this.handleSelectStart = function (e) {
var 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();
};
this.options = new OptionsReader(globalContext);
this.actions = manager.getActions();
this.monitor = manager.getMonitor();
this.registry = manager.getRegistry();
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
}
/**
* Generate profiling statistics for the HTML5Backend.
*/
_createClass$4(HTML5BackendImpl, [{
key: "profile",
value: function profile() {
var _this$dragStartSource, _this$dragOverTargetI;
return {
sourcePreviewNodes: this.sourcePreviewNodes.size,
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
sourceNodeOptions: this.sourceNodeOptions.size,
sourceNodes: this.sourceNodes.size,
dragStartSourceIds: ((_this$dragStartSource = this.dragStartSourceIds) === null || _this$dragStartSource === void 0 ? void 0 : _this$dragStartSource.length) || 0,
dropTargetIds: this.dropTargetIds.length,
dragEnterTargetIds: this.dragEnterTargetIds.length,
dragOverTargetIds: ((_this$dragOverTargetI = this.dragOverTargetIds) === null || _this$dragOverTargetI === void 0 ? void 0 : _this$dragOverTargetI.length) || 0
};
} // public for test
}, {
key: "setup",
value: function setup() {
if (this.window === undefined) {
return;
}
if (this.window.__isReactDndBackendSetUp) {
throw new Error('Cannot have two HTML5 backends at the same time.');
}
this.window.__isReactDndBackendSetUp = true;
this.addEventListeners(this.window);
}
}, {
key: "teardown",
value: function teardown() {
if (this.window === undefined) {
return;
}
this.window.__isReactDndBackendSetUp = false;
this.removeEventListeners(this.window);
this.clearCurrentDragSourceNode();
if (this.asyncEndDragFrameId) {
this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
}
}
}, {
key: "connectDragPreview",
value: function connectDragPreview(sourceId, node, options) {
var _this2 = this;
this.sourcePreviewNodeOptions.set(sourceId, options);
this.sourcePreviewNodes.set(sourceId, node);
return function () {
_this2.sourcePreviewNodes.delete(sourceId);
_this2.sourcePreviewNodeOptions.delete(sourceId);
};
}
}, {
key: "connectDragSource",
value: function connectDragSource(sourceId, node, options) {
var _this3 = this;
this.sourceNodes.set(sourceId, node);
this.sourceNodeOptions.set(sourceId, options);
var handleDragStart = function handleDragStart(e) {
return _this3.handleDragStart(e, sourceId);
};
var handleSelectStart = function handleSelectStart(e) {
return _this3.handleSelectStart(e);
};
node.setAttribute('draggable', 'true');
node.addEventListener('dragstart', handleDragStart);
node.addEventListener('selectstart', handleSelectStart);
return function () {
_this3.sourceNodes.delete(sourceId);
_this3.sourceNodeOptions.delete(sourceId);
node.removeEventListener('dragstart', handleDragStart);
node.removeEventListener('selectstart', handleSelectStart);
node.setAttribute('draggable', 'false');
};
}
}, {
key: "connectDropTarget",
value: function connectDropTarget(targetId, node) {
var _this4 = this;
var handleDragEnter = function handleDragEnter(e) {
return _this4.handleDragEnter(e, targetId);
};
var handleDragOver = function handleDragOver(e) {
return _this4.handleDragOver(e, targetId);
};
var handleDrop = function handleDrop(e) {
return _this4.handleDrop(e, targetId);
};
node.addEventListener('dragenter', handleDragEnter);
node.addEventListener('dragover', handleDragOver);
node.addEventListener('drop', handleDrop);
return function () {
node.removeEventListener('dragenter', handleDragEnter);
node.removeEventListener('dragover', handleDragOver);
node.removeEventListener('drop', handleDrop);
};
}
}, {
key: "addEventListeners",
value: function addEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.addEventListener) {
return;
}
target.addEventListener('dragstart', this.handleTopDragStart);
target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
target.addEventListener('dragend', this.handleTopDragEndCapture, true);
target.addEventListener('dragenter', this.handleTopDragEnter);
target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.addEventListener('dragover', this.handleTopDragOver);
target.addEventListener('dragover', this.handleTopDragOverCapture, true);
target.addEventListener('drop', this.handleTopDrop);
target.addEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "removeEventListeners",
value: function removeEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.removeEventListener) {
return;
}
target.removeEventListener('dragstart', this.handleTopDragStart);
target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
target.removeEventListener('dragenter', this.handleTopDragEnter);
target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.removeEventListener('dragover', this.handleTopDragOver);
target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
target.removeEventListener('drop', this.handleTopDrop);
target.removeEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "getCurrentSourceNodeOptions",
value: function getCurrentSourceNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
return _objectSpread({
dropEffect: this.altKeyPressed ? 'copy' : 'move'
}, sourceNodeOptions || {});
}
}, {
key: "getCurrentDropEffect",
value: function getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy';
}
return this.getCurrentSourceNodeOptions().dropEffect;
}
}, {
key: "getCurrentSourcePreviewNodeOptions",
value: function getCurrentSourcePreviewNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
return _objectSpread({
anchorX: 0.5,
anchorY: 0.5,
captureDraggingState: false
}, sourcePreviewNodeOptions || {});
}
}, {
key: "isDraggingNativeItem",
value: function isDraggingNativeItem() {
var itemType = this.monitor.getItemType();
return Object.keys(NativeTypes).some(function (key) {
return NativeTypes[key] === itemType;
});
}
}, {
key: "beginDragNativeItem",
value: function beginDragNativeItem(type, dataTransfer) {
this.clearCurrentDragSourceNode();
this.currentNativeSource = createNativeDragSource(type, dataTransfer);
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
}
}, {
key: "setCurrentDragSourceNode",
value: function setCurrentDragSourceNode(node) {
var _this5 = this;
this.clearCurrentDragSourceNode();
this.currentDragSourceNode = node; // A timeout of > 0 is necessary to resolve Firefox issue referenced
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
var MOUSE_MOVE_TIMEOUT = 1000; // Receiving a mouse event in the middle of a dragging operation
// means it has ended and the drag source node disappeared from DOM,
// so the browser didn't dispatch the dragend event.
//
// We need to wait before we start listening for mousemove events.
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
// immediately in some browsers.
//
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
//
this.mouseMoveTimeoutTimer = setTimeout(function () {
return _this5.window && _this5.window.addEventListener('mousemove', _this5.endDragIfSourceWasRemovedFromDOM, true);
}, MOUSE_MOVE_TIMEOUT);
}
}, {
key: "clearCurrentDragSourceNode",
value: function clearCurrentDragSourceNode() {
if (this.currentDragSourceNode) {
this.currentDragSourceNode = null;
if (this.window) {
this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
}
this.mouseMoveTimeoutTimer = null;
return true;
}
return false;
}
}, {
key: "handleDragStart",
value: function handleDragStart(e, sourceId) {
if (e.defaultPrevented) {
return;
}
if (!this.dragStartSourceIds) {
this.dragStartSourceIds = [];
}
this.dragStartSourceIds.unshift(sourceId);
}
}, {
key: "handleDragEnter",
value: function handleDragEnter(e, targetId) {
this.dragEnterTargetIds.unshift(targetId);
}
}, {
key: "handleDragOver",
value: function handleDragOver(e, targetId) {
if (this.dragOverTargetIds === null) {
this.dragOverTargetIds = [];
}
this.dragOverTargetIds.unshift(targetId);
}
}, {
key: "handleDrop",
value: function handleDrop(e, targetId) {
this.dropTargetIds.unshift(targetId);
}
}, {
key: "window",
get: function get() {
return this.options.window;
}
}, {
key: "document",
get: function get() {
return this.options.document;
}
}]);
return HTML5BackendImpl;
}();
var emptyImage;
function getEmptyImage() {
if (!emptyImage) {
emptyImage = new Image();
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
}
return emptyImage;
}
var HTML5Backend = function createBackend(manager, context) {
return new HTML5BackendImpl(manager, context);
};
exports.HTML5Backend = HTML5Backend;
exports.NativeTypes = NativeTypes;
exports.getEmptyImage = getEmptyImage;
Object.defineProperty(exports, '__esModule', { value: true });
})));
dist/cjs/OptionsReader.js 0000644 00000002675 15167672621 0011431 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.OptionsReader = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var OptionsReader = /*#__PURE__*/function () {
function OptionsReader(globalContext) {
_classCallCheck(this, OptionsReader);
this.globalContext = globalContext;
}
_createClass(OptionsReader, [{
key: "window",
get: function get() {
if (this.globalContext) {
return this.globalContext;
} else if (typeof window !== 'undefined') {
return window;
}
return undefined;
}
}, {
key: "document",
get: function get() {
if (this.window) {
return this.window.document;
}
return undefined;
}
}]);
return OptionsReader;
}();
exports.OptionsReader = OptionsReader; dist/cjs/NativeDragSources/getDataFromDataTransfer.js 0000644 00000000623 15167672621 0016726 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getDataFromDataTransfer = getDataFromDataTransfer;
function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
return resultSoFar || dataTransfer.getData(typeToTry);
}, '');
return result != null ? result : defaultValue;
} dist/cjs/NativeDragSources/index.js 0000644 00000001735 15167672621 0013346 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createNativeDragSource = createNativeDragSource;
exports.matchNativeItemType = matchNativeItemType;
var _nativeTypesConfig = require("./nativeTypesConfig");
var _NativeDragSource = require("./NativeDragSource");
function createNativeDragSource(type, dataTransfer) {
var result = new _NativeDragSource.NativeDragSource(_nativeTypesConfig.nativeTypesConfig[type]);
result.loadDataTransfer(dataTransfer);
return result;
}
function matchNativeItemType(dataTransfer) {
if (!dataTransfer) {
return null;
}
var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
return Object.keys(_nativeTypesConfig.nativeTypesConfig).filter(function (nativeItemType) {
var matchesTypes = _nativeTypesConfig.nativeTypesConfig[nativeItemType].matchesTypes;
return matchesTypes.some(function (t) {
return dataTransferTypes.indexOf(t) > -1;
});
})[0] || null;
} dist/cjs/NativeDragSources/NativeDragSource.js 0000644 00000005133 15167672621 0015440 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NativeDragSource = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var NativeDragSource = /*#__PURE__*/function () {
function NativeDragSource(config) {
_classCallCheck(this, NativeDragSource);
this.config = config;
this.item = {};
this.initializeExposedProperties();
}
_createClass(NativeDragSource, [{
key: "initializeExposedProperties",
value: function initializeExposedProperties() {
var _this = this;
Object.keys(this.config.exposeProperties).forEach(function (property) {
Object.defineProperty(_this.item, property, {
configurable: true,
enumerable: true,
get: function get() {
// eslint-disable-next-line no-console
console.warn("Browser doesn't allow reading \"".concat(property, "\" until the drop event."));
return null;
}
});
});
}
}, {
key: "loadDataTransfer",
value: function loadDataTransfer(dataTransfer) {
var _this2 = this;
if (dataTransfer) {
var newProperties = {};
Object.keys(this.config.exposeProperties).forEach(function (property) {
newProperties[property] = {
value: _this2.config.exposeProperties[property](dataTransfer, _this2.config.matchesTypes),
configurable: true,
enumerable: true
};
});
Object.defineProperties(this.item, newProperties);
}
}
}, {
key: "canDrag",
value: function canDrag() {
return true;
}
}, {
key: "beginDrag",
value: function beginDrag() {
return this.item;
}
}, {
key: "isDragging",
value: function isDragging(monitor, handle) {
return handle === monitor.getSourceId();
}
}, {
key: "endDrag",
value: function endDrag() {// empty
}
}]);
return NativeDragSource;
}();
exports.NativeDragSource = NativeDragSource; dist/cjs/NativeDragSources/nativeTypesConfig.js 0000644 00000005427 15167672621 0015702 0 ustar 00 "use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.nativeTypesConfig = void 0;
var NativeTypes = _interopRequireWildcard(require("../NativeTypes"));
var _getDataFromDataTransfer = require("./getDataFromDataTransfer");
var _nativeTypesConfig;
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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; }
var nativeTypesConfig = (_nativeTypesConfig = {}, _defineProperty(_nativeTypesConfig, NativeTypes.FILE, {
exposeProperties: {
files: function files(dataTransfer) {
return Array.prototype.slice.call(dataTransfer.files);
},
items: function items(dataTransfer) {
return dataTransfer.items;
}
},
matchesTypes: ['Files']
}), _defineProperty(_nativeTypesConfig, NativeTypes.URL, {
exposeProperties: {
urls: function urls(dataTransfer, matchesTypes) {
return (0, _getDataFromDataTransfer.getDataFromDataTransfer)(dataTransfer, matchesTypes, '').split('\n');
}
},
matchesTypes: ['Url', 'text/uri-list']
}), _defineProperty(_nativeTypesConfig, NativeTypes.TEXT, {
exposeProperties: {
text: function text(dataTransfer, matchesTypes) {
return (0, _getDataFromDataTransfer.getDataFromDataTransfer)(dataTransfer, matchesTypes, '');
}
},
matchesTypes: ['Text', 'text/plain']
}), _nativeTypesConfig);
exports.nativeTypesConfig = nativeTypesConfig; dist/cjs/types.js 0000644 00000000015 15167672621 0010001 0 ustar 00 "use strict"; dist/cjs/EnterLeaveCounter.js 0000644 00000003756 15167672621 0012246 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EnterLeaveCounter = void 0;
var _js_utils = require("./utils/js_utils");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var EnterLeaveCounter = /*#__PURE__*/function () {
function EnterLeaveCounter(isNodeInDocument) {
_classCallCheck(this, EnterLeaveCounter);
this.entered = [];
this.isNodeInDocument = isNodeInDocument;
}
_createClass(EnterLeaveCounter, [{
key: "enter",
value: function enter(enteringNode) {
var _this = this;
var previousLength = this.entered.length;
var isNodeEntered = function isNodeEntered(node) {
return _this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode));
};
this.entered = (0, _js_utils.union)(this.entered.filter(isNodeEntered), [enteringNode]);
return previousLength === 0 && this.entered.length > 0;
}
}, {
key: "leave",
value: function leave(leavingNode) {
var previousLength = this.entered.length;
this.entered = (0, _js_utils.without)(this.entered.filter(this.isNodeInDocument), leavingNode);
return previousLength > 0 && this.entered.length === 0;
}
}, {
key: "reset",
value: function reset() {
this.entered = [];
}
}]);
return EnterLeaveCounter;
}();
exports.EnterLeaveCounter = EnterLeaveCounter; dist/cjs/utils/js_utils.js 0000644 00000001462 15167672621 0011640 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.memoize = memoize;
exports.without = without;
exports.union = union;
// cheap lodash replacements
function memoize(fn) {
var result = null;
var memoized = function memoized() {
if (result == null) {
result = fn();
}
return result;
};
return memoized;
}
/**
* drop-in replacement for _.without
*/
function without(items, item) {
return items.filter(function (i) {
return i !== item;
});
}
function union(itemsA, itemsB) {
var set = new Set();
var insertItem = function insertItem(item) {
return set.add(item);
};
itemsA.forEach(insertItem);
itemsB.forEach(insertItem);
var result = [];
set.forEach(function (key) {
return result.push(key);
});
return result;
} dist/cjs/HTML5BackendImpl.js 0000644 00000062423 15167672621 0011573 0 ustar 00 "use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HTML5BackendImpl = void 0;
var _EnterLeaveCounter = require("./EnterLeaveCounter");
var _BrowserDetector = require("./BrowserDetector");
var _OffsetUtils = require("./OffsetUtils");
var _NativeDragSources = require("./NativeDragSources");
var NativeTypes = _interopRequireWildcard(require("./NativeTypes"));
var _OptionsReader = require("./OptionsReader");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var HTML5BackendImpl = /*#__PURE__*/function () {
function HTML5BackendImpl(manager, globalContext) {
var _this = this;
_classCallCheck(this, HTML5BackendImpl);
this.sourcePreviewNodes = new Map();
this.sourcePreviewNodeOptions = new Map();
this.sourceNodes = new Map();
this.sourceNodeOptions = new Map();
this.dragStartSourceIds = null;
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.getSourceClientOffset = function (sourceId) {
var source = _this.sourceNodes.get(sourceId);
return source && (0, _OffsetUtils.getNodeClientOffset)(source) || null;
};
this.endDragNativeItem = function () {
if (!_this.isDraggingNativeItem()) {
return;
}
_this.actions.endDrag();
if (_this.currentNativeHandle) {
_this.registry.removeSource(_this.currentNativeHandle);
}
_this.currentNativeHandle = null;
_this.currentNativeSource = null;
};
this.isNodeInDocument = function (node) {
// Check the node either in the main document or in the current context
return Boolean(node && _this.document && _this.document.body && document.body.contains(node));
};
this.endDragIfSourceWasRemovedFromDOM = function () {
var node = _this.currentDragSourceNode;
if (_this.isNodeInDocument(node)) {
return;
}
if (_this.clearCurrentDragSourceNode()) {
_this.actions.endDrag();
}
};
this.handleTopDragStartCapture = function () {
_this.clearCurrentDragSourceNode();
_this.dragStartSourceIds = [];
};
this.handleTopDragStart = function (e) {
if (e.defaultPrevented) {
return;
}
var dragStartSourceIds = _this.dragStartSourceIds;
_this.dragStartSourceIds = null;
var clientOffset = (0, _OffsetUtils.getEventClientOffset)(e); // Avoid crashing if we missed a drop event or our previous drag died
if (_this.monitor.isDragging()) {
_this.actions.endDrag();
} // Don't publish the source just yet (see why below)
_this.actions.beginDrag(dragStartSourceIds || [], {
publishSource: false,
getSourceClientOffset: _this.getSourceClientOffset,
clientOffset: clientOffset
});
var dataTransfer = e.dataTransfer;
var nativeType = (0, _NativeDragSources.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.
var sourceId = _this.monitor.getSourceId();
var sourceNode = _this.sourceNodes.get(sourceId);
var dragPreview = _this.sourcePreviewNodes.get(sourceId) || sourceNode;
if (dragPreview) {
var _this$getCurrentSourc = _this.getCurrentSourcePreviewNodeOptions(),
anchorX = _this$getCurrentSourc.anchorX,
anchorY = _this$getCurrentSourc.anchorY,
offsetX = _this$getCurrentSourc.offsetX,
offsetY = _this$getCurrentSourc.offsetY;
var anchorPoint = {
anchorX: anchorX,
anchorY: anchorY
};
var offsetPoint = {
offsetX: offsetX,
offsetY: offsetY
};
var dragPreviewOffset = (0, _OffsetUtils.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?
var _this$getCurrentSourc2 = _this.getCurrentSourcePreviewNodeOptions(),
captureDraggingState = _this$getCurrentSourc2.captureDraggingState;
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(function () {
return _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();
}
};
this.handleTopDragEndCapture = function () {
if (_this.clearCurrentDragSourceNode()) {
// 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 = function (e) {
_this.dragEnterTargetIds = [];
var isFirstEnter = _this.enterLeaveCounter.enter(e.target);
if (!isFirstEnter || _this.monitor.isDragging()) {
return;
}
var dataTransfer = e.dataTransfer;
var nativeType = (0, _NativeDragSources.matchNativeItemType)(dataTransfer);
if (nativeType) {
// A native item (such as file or URL) dragged from outside the document
_this.beginDragNativeItem(nativeType, dataTransfer);
}
};
this.handleTopDragEnter = function (e) {
var dragEnterTargetIds = _this.dragEnterTargetIds;
_this.dragEnterTargetIds = [];
if (!_this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return;
}
_this.altKeyPressed = e.altKey;
if (!(0, _BrowserDetector.isFirefox)()) {
// Don't emit hover in `dragenter` on Firefox due to an edge case.
// If the target changes position as the result of `dragenter`, Firefox
// will still happily dispatch `dragover` despite target being no longer
// there. The easy solution is to only fire `hover` in `dragover` on FF.
_this.actions.hover(dragEnterTargetIds, {
clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
});
}
var canDrop = dragEnterTargetIds.some(function (targetId) {
return _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 = function () {
_this.dragOverTargetIds = [];
};
this.handleTopDragOver = function (e) {
var dragOverTargetIds = _this.dragOverTargetIds;
_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';
}
return;
}
_this.altKeyPressed = e.altKey;
_this.actions.hover(dragOverTargetIds || [], {
clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
});
var canDrop = (dragOverTargetIds || []).some(function (targetId) {
return _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 = function (e) {
if (_this.isDraggingNativeItem()) {
e.preventDefault();
}
var isLastLeave = _this.enterLeaveCounter.leave(e.target);
if (!isLastLeave) {
return;
}
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
}
};
this.handleTopDropCapture = function (e) {
_this.dropTargetIds = [];
e.preventDefault();
if (_this.isDraggingNativeItem()) {
var _this$currentNativeSo;
(_this$currentNativeSo = _this.currentNativeSource) === null || _this$currentNativeSo === void 0 ? void 0 : _this$currentNativeSo.loadDataTransfer(e.dataTransfer);
}
_this.enterLeaveCounter.reset();
};
this.handleTopDrop = function (e) {
var dropTargetIds = _this.dropTargetIds;
_this.dropTargetIds = [];
_this.actions.hover(dropTargetIds, {
clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
});
_this.actions.drop({
dropEffect: _this.getCurrentDropEffect()
});
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
} else {
_this.endDragIfSourceWasRemovedFromDOM();
}
};
this.handleSelectStart = function (e) {
var 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();
};
this.options = new _OptionsReader.OptionsReader(globalContext);
this.actions = manager.getActions();
this.monitor = manager.getMonitor();
this.registry = manager.getRegistry();
this.enterLeaveCounter = new _EnterLeaveCounter.EnterLeaveCounter(this.isNodeInDocument);
}
/**
* Generate profiling statistics for the HTML5Backend.
*/
_createClass(HTML5BackendImpl, [{
key: "profile",
value: function profile() {
var _this$dragStartSource, _this$dragOverTargetI;
return {
sourcePreviewNodes: this.sourcePreviewNodes.size,
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
sourceNodeOptions: this.sourceNodeOptions.size,
sourceNodes: this.sourceNodes.size,
dragStartSourceIds: ((_this$dragStartSource = this.dragStartSourceIds) === null || _this$dragStartSource === void 0 ? void 0 : _this$dragStartSource.length) || 0,
dropTargetIds: this.dropTargetIds.length,
dragEnterTargetIds: this.dragEnterTargetIds.length,
dragOverTargetIds: ((_this$dragOverTargetI = this.dragOverTargetIds) === null || _this$dragOverTargetI === void 0 ? void 0 : _this$dragOverTargetI.length) || 0
};
} // public for test
}, {
key: "setup",
value: function setup() {
if (this.window === undefined) {
return;
}
if (this.window.__isReactDndBackendSetUp) {
throw new Error('Cannot have two HTML5 backends at the same time.');
}
this.window.__isReactDndBackendSetUp = true;
this.addEventListeners(this.window);
}
}, {
key: "teardown",
value: function teardown() {
if (this.window === undefined) {
return;
}
this.window.__isReactDndBackendSetUp = false;
this.removeEventListeners(this.window);
this.clearCurrentDragSourceNode();
if (this.asyncEndDragFrameId) {
this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
}
}
}, {
key: "connectDragPreview",
value: function connectDragPreview(sourceId, node, options) {
var _this2 = this;
this.sourcePreviewNodeOptions.set(sourceId, options);
this.sourcePreviewNodes.set(sourceId, node);
return function () {
_this2.sourcePreviewNodes.delete(sourceId);
_this2.sourcePreviewNodeOptions.delete(sourceId);
};
}
}, {
key: "connectDragSource",
value: function connectDragSource(sourceId, node, options) {
var _this3 = this;
this.sourceNodes.set(sourceId, node);
this.sourceNodeOptions.set(sourceId, options);
var handleDragStart = function handleDragStart(e) {
return _this3.handleDragStart(e, sourceId);
};
var handleSelectStart = function handleSelectStart(e) {
return _this3.handleSelectStart(e);
};
node.setAttribute('draggable', 'true');
node.addEventListener('dragstart', handleDragStart);
node.addEventListener('selectstart', handleSelectStart);
return function () {
_this3.sourceNodes.delete(sourceId);
_this3.sourceNodeOptions.delete(sourceId);
node.removeEventListener('dragstart', handleDragStart);
node.removeEventListener('selectstart', handleSelectStart);
node.setAttribute('draggable', 'false');
};
}
}, {
key: "connectDropTarget",
value: function connectDropTarget(targetId, node) {
var _this4 = this;
var handleDragEnter = function handleDragEnter(e) {
return _this4.handleDragEnter(e, targetId);
};
var handleDragOver = function handleDragOver(e) {
return _this4.handleDragOver(e, targetId);
};
var handleDrop = function handleDrop(e) {
return _this4.handleDrop(e, targetId);
};
node.addEventListener('dragenter', handleDragEnter);
node.addEventListener('dragover', handleDragOver);
node.addEventListener('drop', handleDrop);
return function () {
node.removeEventListener('dragenter', handleDragEnter);
node.removeEventListener('dragover', handleDragOver);
node.removeEventListener('drop', handleDrop);
};
}
}, {
key: "addEventListeners",
value: function addEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.addEventListener) {
return;
}
target.addEventListener('dragstart', this.handleTopDragStart);
target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
target.addEventListener('dragend', this.handleTopDragEndCapture, true);
target.addEventListener('dragenter', this.handleTopDragEnter);
target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.addEventListener('dragover', this.handleTopDragOver);
target.addEventListener('dragover', this.handleTopDragOverCapture, true);
target.addEventListener('drop', this.handleTopDrop);
target.addEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "removeEventListeners",
value: function removeEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.removeEventListener) {
return;
}
target.removeEventListener('dragstart', this.handleTopDragStart);
target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
target.removeEventListener('dragenter', this.handleTopDragEnter);
target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.removeEventListener('dragover', this.handleTopDragOver);
target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
target.removeEventListener('drop', this.handleTopDrop);
target.removeEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "getCurrentSourceNodeOptions",
value: function getCurrentSourceNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
return _objectSpread({
dropEffect: this.altKeyPressed ? 'copy' : 'move'
}, sourceNodeOptions || {});
}
}, {
key: "getCurrentDropEffect",
value: function getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy';
}
return this.getCurrentSourceNodeOptions().dropEffect;
}
}, {
key: "getCurrentSourcePreviewNodeOptions",
value: function getCurrentSourcePreviewNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
return _objectSpread({
anchorX: 0.5,
anchorY: 0.5,
captureDraggingState: false
}, sourcePreviewNodeOptions || {});
}
}, {
key: "isDraggingNativeItem",
value: function isDraggingNativeItem() {
var itemType = this.monitor.getItemType();
return Object.keys(NativeTypes).some(function (key) {
return NativeTypes[key] === itemType;
});
}
}, {
key: "beginDragNativeItem",
value: function beginDragNativeItem(type, dataTransfer) {
this.clearCurrentDragSourceNode();
this.currentNativeSource = (0, _NativeDragSources.createNativeDragSource)(type, dataTransfer);
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
}
}, {
key: "setCurrentDragSourceNode",
value: function setCurrentDragSourceNode(node) {
var _this5 = this;
this.clearCurrentDragSourceNode();
this.currentDragSourceNode = node; // A timeout of > 0 is necessary to resolve Firefox issue referenced
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
var MOUSE_MOVE_TIMEOUT = 1000; // Receiving a mouse event in the middle of a dragging operation
// means it has ended and the drag source node disappeared from DOM,
// so the browser didn't dispatch the dragend event.
//
// We need to wait before we start listening for mousemove events.
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
// immediately in some browsers.
//
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
//
this.mouseMoveTimeoutTimer = setTimeout(function () {
return _this5.window && _this5.window.addEventListener('mousemove', _this5.endDragIfSourceWasRemovedFromDOM, true);
}, MOUSE_MOVE_TIMEOUT);
}
}, {
key: "clearCurrentDragSourceNode",
value: function clearCurrentDragSourceNode() {
if (this.currentDragSourceNode) {
this.currentDragSourceNode = null;
if (this.window) {
this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
}
this.mouseMoveTimeoutTimer = null;
return true;
}
return false;
}
}, {
key: "handleDragStart",
value: function handleDragStart(e, sourceId) {
if (e.defaultPrevented) {
return;
}
if (!this.dragStartSourceIds) {
this.dragStartSourceIds = [];
}
this.dragStartSourceIds.unshift(sourceId);
}
}, {
key: "handleDragEnter",
value: function handleDragEnter(e, targetId) {
this.dragEnterTargetIds.unshift(targetId);
}
}, {
key: "handleDragOver",
value: function handleDragOver(e, targetId) {
if (this.dragOverTargetIds === null) {
this.dragOverTargetIds = [];
}
this.dragOverTargetIds.unshift(targetId);
}
}, {
key: "handleDrop",
value: function handleDrop(e, targetId) {
this.dropTargetIds.unshift(targetId);
}
}, {
key: "window",
get: function get() {
return this.options.window;
}
}, {
key: "document",
get: function get() {
return this.options.document;
}
}]);
return HTML5BackendImpl;
}();
exports.HTML5BackendImpl = HTML5BackendImpl; dist/cjs/index.js 0000644 00000003715 15167672621 0007756 0 ustar 00 "use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getEmptyImage", {
enumerable: true,
get: function get() {
return _getEmptyImage.getEmptyImage;
}
});
exports.NativeTypes = exports.HTML5Backend = void 0;
var _HTML5BackendImpl = require("./HTML5BackendImpl");
var NativeTypes = _interopRequireWildcard(require("./NativeTypes"));
exports.NativeTypes = NativeTypes;
var _getEmptyImage = require("./getEmptyImage");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var HTML5Backend = function createBackend(manager, context) {
return new _HTML5BackendImpl.HTML5BackendImpl(manager, context);
};
exports.HTML5Backend = HTML5Backend; dist/cjs/OffsetUtils.js 0000644 00000010044 15167672621 0011107 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getNodeClientOffset = getNodeClientOffset;
exports.getEventClientOffset = getEventClientOffset;
exports.getDragPreviewOffset = getDragPreviewOffset;
var _BrowserDetector = require("./BrowserDetector");
var _MonotonicInterpolant = require("./MonotonicInterpolant");
var ELEMENT_NODE = 1;
function getNodeClientOffset(node) {
var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
if (!el) {
return null;
}
var _el$getBoundingClient = el.getBoundingClientRect(),
top = _el$getBoundingClient.top,
left = _el$getBoundingClient.left;
return {
x: left,
y: top
};
}
function getEventClientOffset(e) {
return {
x: e.clientX,
y: e.clientY
};
}
function isImageNode(node) {
var _document$documentEle;
return node.nodeName === 'IMG' && ((0, _BrowserDetector.isFirefox)() || !((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.contains(node)));
}
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight; // Work around @2x coordinate discrepancies in browsers
if ((0, _BrowserDetector.isSafari)() && isImage) {
dragPreviewHeight /= window.devicePixelRatio;
dragPreviewWidth /= window.devicePixelRatio;
}
return {
dragPreviewWidth: dragPreviewWidth,
dragPreviewHeight: dragPreviewHeight
};
}
function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
var isImage = isImageNode(dragPreview);
var dragPreviewNode = isImage ? sourceNode : dragPreview;
var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
var offsetFromDragPreview = {
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
};
var sourceWidth = sourceNode.offsetWidth,
sourceHeight = sourceNode.offsetHeight;
var anchorX = anchorPoint.anchorX,
anchorY = anchorPoint.anchorY;
var _getDragPreviewSize = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight),
dragPreviewWidth = _getDragPreviewSize.dragPreviewWidth,
dragPreviewHeight = _getDragPreviewSize.dragPreviewHeight;
var calculateYOffset = function calculateYOffset() {
var interpolantY = new _MonotonicInterpolant.MonotonicInterpolant([0, 0.5, 1], [// Dock to the top
offsetFromDragPreview.y, // Align at the center
offsetFromDragPreview.y / sourceHeight * dragPreviewHeight, // Dock to the bottom
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
var y = interpolantY.interpolate(anchorY); // Work around Safari 8 positioning bug
if ((0, _BrowserDetector.isSafari)() && isImage) {
// We'll have to wait for @3x to see if this is entirely correct
y += (window.devicePixelRatio - 1) * dragPreviewHeight;
}
return y;
};
var calculateXOffset = function calculateXOffset() {
// Interpolate coordinates depending on anchor point
// If you know a simpler way to do this, let me know
var interpolantX = new _MonotonicInterpolant.MonotonicInterpolant([0, 0.5, 1], [// Dock to the left
offsetFromDragPreview.x, // Align at the center
offsetFromDragPreview.x / sourceWidth * dragPreviewWidth, // Dock to the right
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth]);
return interpolantX.interpolate(anchorX);
}; // Force offsets if specified in the options.
var offsetX = offsetPoint.offsetX,
offsetY = offsetPoint.offsetY;
var isManualOffsetX = offsetX === 0 || offsetX;
var isManualOffsetY = offsetY === 0 || offsetY;
return {
x: isManualOffsetX ? offsetX : calculateXOffset(),
y: isManualOffsetY ? offsetY : calculateYOffset()
};
} dist/cjs/getEmptyImage.js 0000644 00000000524 15167672621 0011403 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getEmptyImage = getEmptyImage;
var emptyImage;
function getEmptyImage() {
if (!emptyImage) {
emptyImage = new Image();
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
}
return emptyImage;
} dist/cjs/NativeTypes.js 0000644 00000000430 15167672621 0011111 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TEXT = exports.URL = exports.FILE = void 0;
var FILE = '__NATIVE_FILE__';
exports.FILE = FILE;
var URL = '__NATIVE_URL__';
exports.URL = URL;
var TEXT = '__NATIVE_TEXT__';
exports.TEXT = TEXT; dist/cjs/MonotonicInterpolant.js 0000644 00000006702 15167672621 0013033 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MonotonicInterpolant = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var MonotonicInterpolant = /*#__PURE__*/function () {
function MonotonicInterpolant(xs, ys) {
_classCallCheck(this, MonotonicInterpolant);
var length = xs.length; // Rearrange xs and ys so that xs is sorted
var indexes = [];
for (var i = 0; i < length; i++) {
indexes.push(i);
}
indexes.sort(function (a, b) {
return xs[a] < xs[b] ? -1 : 1;
}); // Get consecutive differences and slopes
var dys = [];
var dxs = [];
var ms = [];
var dx;
var dy;
for (var _i = 0; _i < length - 1; _i++) {
dx = xs[_i + 1] - xs[_i];
dy = ys[_i + 1] - ys[_i];
dxs.push(dx);
dys.push(dy);
ms.push(dy / dx);
} // Get degree-1 coefficients
var c1s = [ms[0]];
for (var _i2 = 0; _i2 < dxs.length - 1; _i2++) {
var m2 = ms[_i2];
var mNext = ms[_i2 + 1];
if (m2 * mNext <= 0) {
c1s.push(0);
} else {
dx = dxs[_i2];
var dxNext = dxs[_i2 + 1];
var common = dx + dxNext;
c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
}
}
c1s.push(ms[ms.length - 1]); // Get degree-2 and degree-3 coefficients
var c2s = [];
var c3s = [];
var m;
for (var _i3 = 0; _i3 < c1s.length - 1; _i3++) {
m = ms[_i3];
var c1 = c1s[_i3];
var invDx = 1 / dxs[_i3];
var _common = c1 + c1s[_i3 + 1] - m - m;
c2s.push((m - c1 - _common) * invDx);
c3s.push(_common * invDx * invDx);
}
this.xs = xs;
this.ys = ys;
this.c1s = c1s;
this.c2s = c2s;
this.c3s = c3s;
}
_createClass(MonotonicInterpolant, [{
key: "interpolate",
value: function interpolate(x) {
var xs = this.xs,
ys = this.ys,
c1s = this.c1s,
c2s = this.c2s,
c3s = this.c3s; // The rightmost point in the dataset should give an exact result
var 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
var low = 0;
var high = c3s.length - 1;
var mid;
while (low <= high) {
mid = Math.floor(0.5 * (low + high));
var 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
var diff = x - xs[i];
var diffSq = diff * diff;
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
}
}]);
return MonotonicInterpolant;
}();
exports.MonotonicInterpolant = MonotonicInterpolant; dist/cjs/BrowserDetector.js 0000644 00000000652 15167672621 0011761 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isSafari = exports.isFirefox = void 0;
var _js_utils = require("./utils/js_utils");
var isFirefox = (0, _js_utils.memoize)(function () {
return /firefox/i.test(navigator.userAgent);
});
exports.isFirefox = isFirefox;
var isSafari = (0, _js_utils.memoize)(function () {
return Boolean(window.safari);
});
exports.isSafari = isSafari; dist/esm/OptionsReader.js 0000644 00000002453 15167672621 0011430 0 ustar 00 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
export var OptionsReader = /*#__PURE__*/function () {
function OptionsReader(globalContext) {
_classCallCheck(this, OptionsReader);
this.globalContext = globalContext;
}
_createClass(OptionsReader, [{
key: "window",
get: function get() {
if (this.globalContext) {
return this.globalContext;
} else if (typeof window !== 'undefined') {
return window;
}
return undefined;
}
}, {
key: "document",
get: function get() {
if (this.window) {
return this.window.document;
}
return undefined;
}
}]);
return OptionsReader;
}(); dist/esm/NativeDragSources/getDataFromDataTransfer.js 0000644 00000000416 15167672621 0016733 0 ustar 00 export function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
return resultSoFar || dataTransfer.getData(typeToTry);
}, '');
return result != null ? result : defaultValue;
} dist/esm/NativeDragSources/index.js 0000644 00000001340 15167672621 0013343 0 ustar 00 import { nativeTypesConfig } from './nativeTypesConfig';
import { NativeDragSource } from './NativeDragSource';
export function createNativeDragSource(type, dataTransfer) {
var result = new NativeDragSource(nativeTypesConfig[type]);
result.loadDataTransfer(dataTransfer);
return result;
}
export function matchNativeItemType(dataTransfer) {
if (!dataTransfer) {
return null;
}
var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
return Object.keys(nativeTypesConfig).filter(function (nativeItemType) {
var matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;
return matchesTypes.some(function (t) {
return dataTransferTypes.indexOf(t) > -1;
});
})[0] || null;
} dist/esm/NativeDragSources/NativeDragSource.js 0000644 00000004700 15167672621 0015444 0 ustar 00 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
export var NativeDragSource = /*#__PURE__*/function () {
function NativeDragSource(config) {
_classCallCheck(this, NativeDragSource);
this.config = config;
this.item = {};
this.initializeExposedProperties();
}
_createClass(NativeDragSource, [{
key: "initializeExposedProperties",
value: function initializeExposedProperties() {
var _this = this;
Object.keys(this.config.exposeProperties).forEach(function (property) {
Object.defineProperty(_this.item, property, {
configurable: true,
enumerable: true,
get: function get() {
// eslint-disable-next-line no-console
console.warn("Browser doesn't allow reading \"".concat(property, "\" until the drop event."));
return null;
}
});
});
}
}, {
key: "loadDataTransfer",
value: function loadDataTransfer(dataTransfer) {
var _this2 = this;
if (dataTransfer) {
var newProperties = {};
Object.keys(this.config.exposeProperties).forEach(function (property) {
newProperties[property] = {
value: _this2.config.exposeProperties[property](dataTransfer, _this2.config.matchesTypes),
configurable: true,
enumerable: true
};
});
Object.defineProperties(this.item, newProperties);
}
}
}, {
key: "canDrag",
value: function canDrag() {
return true;
}
}, {
key: "beginDrag",
value: function beginDrag() {
return this.item;
}
}, {
key: "isDragging",
value: function isDragging(monitor, handle) {
return handle === monitor.getSourceId();
}
}, {
key: "endDrag",
value: function endDrag() {// empty
}
}]);
return NativeDragSource;
}(); dist/esm/NativeDragSources/nativeTypesConfig.js 0000644 00000002352 15167672621 0015701 0 ustar 00 var _nativeTypesConfig;
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; }
import * as NativeTypes from '../NativeTypes';
import { getDataFromDataTransfer } from './getDataFromDataTransfer';
export var nativeTypesConfig = (_nativeTypesConfig = {}, _defineProperty(_nativeTypesConfig, NativeTypes.FILE, {
exposeProperties: {
files: function files(dataTransfer) {
return Array.prototype.slice.call(dataTransfer.files);
},
items: function items(dataTransfer) {
return dataTransfer.items;
}
},
matchesTypes: ['Files']
}), _defineProperty(_nativeTypesConfig, NativeTypes.URL, {
exposeProperties: {
urls: function urls(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
}
},
matchesTypes: ['Url', 'text/uri-list']
}), _defineProperty(_nativeTypesConfig, NativeTypes.TEXT, {
exposeProperties: {
text: function text(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '');
}
},
matchesTypes: ['Text', 'text/plain']
}), _nativeTypesConfig); dist/esm/types.js 0000644 00000000000 15167672621 0010000 0 ustar 00 dist/esm/EnterLeaveCounter.js 0000644 00000003467 15167672621 0012252 0 ustar 00 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
import { union, without } from './utils/js_utils';
export var EnterLeaveCounter = /*#__PURE__*/function () {
function EnterLeaveCounter(isNodeInDocument) {
_classCallCheck(this, EnterLeaveCounter);
this.entered = [];
this.isNodeInDocument = isNodeInDocument;
}
_createClass(EnterLeaveCounter, [{
key: "enter",
value: function enter(enteringNode) {
var _this = this;
var previousLength = this.entered.length;
var isNodeEntered = function isNodeEntered(node) {
return _this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode));
};
this.entered = union(this.entered.filter(isNodeEntered), [enteringNode]);
return previousLength === 0 && this.entered.length > 0;
}
}, {
key: "leave",
value: function leave(leavingNode) {
var previousLength = this.entered.length;
this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
return previousLength > 0 && this.entered.length === 0;
}
}, {
key: "reset",
value: function reset() {
this.entered = [];
}
}]);
return EnterLeaveCounter;
}(); dist/esm/utils/js_utils.js 0000644 00000001247 15167672621 0011646 0 ustar 00 // cheap lodash replacements
export function memoize(fn) {
var result = null;
var memoized = function memoized() {
if (result == null) {
result = fn();
}
return result;
};
return memoized;
}
/**
* drop-in replacement for _.without
*/
export function without(items, item) {
return items.filter(function (i) {
return i !== item;
});
}
export function union(itemsA, itemsB) {
var set = new Set();
var insertItem = function insertItem(item) {
return set.add(item);
};
itemsA.forEach(insertItem);
itemsB.forEach(insertItem);
var result = [];
set.forEach(function (key) {
return result.push(key);
});
return result;
} dist/esm/HTML5BackendImpl.js 0000644 00000057174 15167672621 0011607 0 ustar 00 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
import { EnterLeaveCounter } from './EnterLeaveCounter';
import { isFirefox } from './BrowserDetector';
import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset } from './OffsetUtils';
import { createNativeDragSource, matchNativeItemType } from './NativeDragSources';
import * as NativeTypes from './NativeTypes';
import { OptionsReader } from './OptionsReader';
export var HTML5BackendImpl = /*#__PURE__*/function () {
function HTML5BackendImpl(manager, globalContext) {
var _this = this;
_classCallCheck(this, HTML5BackendImpl);
this.sourcePreviewNodes = new Map();
this.sourcePreviewNodeOptions = new Map();
this.sourceNodes = new Map();
this.sourceNodeOptions = new Map();
this.dragStartSourceIds = null;
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.getSourceClientOffset = function (sourceId) {
var source = _this.sourceNodes.get(sourceId);
return source && getNodeClientOffset(source) || null;
};
this.endDragNativeItem = function () {
if (!_this.isDraggingNativeItem()) {
return;
}
_this.actions.endDrag();
if (_this.currentNativeHandle) {
_this.registry.removeSource(_this.currentNativeHandle);
}
_this.currentNativeHandle = null;
_this.currentNativeSource = null;
};
this.isNodeInDocument = function (node) {
// Check the node either in the main document or in the current context
return Boolean(node && _this.document && _this.document.body && document.body.contains(node));
};
this.endDragIfSourceWasRemovedFromDOM = function () {
var node = _this.currentDragSourceNode;
if (_this.isNodeInDocument(node)) {
return;
}
if (_this.clearCurrentDragSourceNode()) {
_this.actions.endDrag();
}
};
this.handleTopDragStartCapture = function () {
_this.clearCurrentDragSourceNode();
_this.dragStartSourceIds = [];
};
this.handleTopDragStart = function (e) {
if (e.defaultPrevented) {
return;
}
var dragStartSourceIds = _this.dragStartSourceIds;
_this.dragStartSourceIds = null;
var clientOffset = getEventClientOffset(e); // Avoid crashing if we missed a drop event or our previous drag died
if (_this.monitor.isDragging()) {
_this.actions.endDrag();
} // Don't publish the source just yet (see why below)
_this.actions.beginDrag(dragStartSourceIds || [], {
publishSource: false,
getSourceClientOffset: _this.getSourceClientOffset,
clientOffset: clientOffset
});
var dataTransfer = e.dataTransfer;
var 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.
var sourceId = _this.monitor.getSourceId();
var sourceNode = _this.sourceNodes.get(sourceId);
var dragPreview = _this.sourcePreviewNodes.get(sourceId) || sourceNode;
if (dragPreview) {
var _this$getCurrentSourc = _this.getCurrentSourcePreviewNodeOptions(),
anchorX = _this$getCurrentSourc.anchorX,
anchorY = _this$getCurrentSourc.anchorY,
offsetX = _this$getCurrentSourc.offsetX,
offsetY = _this$getCurrentSourc.offsetY;
var anchorPoint = {
anchorX: anchorX,
anchorY: anchorY
};
var offsetPoint = {
offsetX: offsetX,
offsetY: offsetY
};
var 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?
var _this$getCurrentSourc2 = _this.getCurrentSourcePreviewNodeOptions(),
captureDraggingState = _this$getCurrentSourc2.captureDraggingState;
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(function () {
return _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();
}
};
this.handleTopDragEndCapture = function () {
if (_this.clearCurrentDragSourceNode()) {
// 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 = function (e) {
_this.dragEnterTargetIds = [];
var isFirstEnter = _this.enterLeaveCounter.enter(e.target);
if (!isFirstEnter || _this.monitor.isDragging()) {
return;
}
var dataTransfer = e.dataTransfer;
var nativeType = matchNativeItemType(dataTransfer);
if (nativeType) {
// A native item (such as file or URL) dragged from outside the document
_this.beginDragNativeItem(nativeType, dataTransfer);
}
};
this.handleTopDragEnter = function (e) {
var dragEnterTargetIds = _this.dragEnterTargetIds;
_this.dragEnterTargetIds = [];
if (!_this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return;
}
_this.altKeyPressed = e.altKey;
if (!isFirefox()) {
// Don't emit hover in `dragenter` on Firefox due to an edge case.
// If the target changes position as the result of `dragenter`, Firefox
// will still happily dispatch `dragover` despite target being no longer
// there. The easy solution is to only fire `hover` in `dragover` on FF.
_this.actions.hover(dragEnterTargetIds, {
clientOffset: getEventClientOffset(e)
});
}
var canDrop = dragEnterTargetIds.some(function (targetId) {
return _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 = function () {
_this.dragOverTargetIds = [];
};
this.handleTopDragOver = function (e) {
var dragOverTargetIds = _this.dragOverTargetIds;
_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';
}
return;
}
_this.altKeyPressed = e.altKey;
_this.actions.hover(dragOverTargetIds || [], {
clientOffset: getEventClientOffset(e)
});
var canDrop = (dragOverTargetIds || []).some(function (targetId) {
return _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 = function (e) {
if (_this.isDraggingNativeItem()) {
e.preventDefault();
}
var isLastLeave = _this.enterLeaveCounter.leave(e.target);
if (!isLastLeave) {
return;
}
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
}
};
this.handleTopDropCapture = function (e) {
_this.dropTargetIds = [];
e.preventDefault();
if (_this.isDraggingNativeItem()) {
var _this$currentNativeSo;
(_this$currentNativeSo = _this.currentNativeSource) === null || _this$currentNativeSo === void 0 ? void 0 : _this$currentNativeSo.loadDataTransfer(e.dataTransfer);
}
_this.enterLeaveCounter.reset();
};
this.handleTopDrop = function (e) {
var dropTargetIds = _this.dropTargetIds;
_this.dropTargetIds = [];
_this.actions.hover(dropTargetIds, {
clientOffset: getEventClientOffset(e)
});
_this.actions.drop({
dropEffect: _this.getCurrentDropEffect()
});
if (_this.isDraggingNativeItem()) {
_this.endDragNativeItem();
} else {
_this.endDragIfSourceWasRemovedFromDOM();
}
};
this.handleSelectStart = function (e) {
var 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();
};
this.options = new OptionsReader(globalContext);
this.actions = manager.getActions();
this.monitor = manager.getMonitor();
this.registry = manager.getRegistry();
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
}
/**
* Generate profiling statistics for the HTML5Backend.
*/
_createClass(HTML5BackendImpl, [{
key: "profile",
value: function profile() {
var _this$dragStartSource, _this$dragOverTargetI;
return {
sourcePreviewNodes: this.sourcePreviewNodes.size,
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
sourceNodeOptions: this.sourceNodeOptions.size,
sourceNodes: this.sourceNodes.size,
dragStartSourceIds: ((_this$dragStartSource = this.dragStartSourceIds) === null || _this$dragStartSource === void 0 ? void 0 : _this$dragStartSource.length) || 0,
dropTargetIds: this.dropTargetIds.length,
dragEnterTargetIds: this.dragEnterTargetIds.length,
dragOverTargetIds: ((_this$dragOverTargetI = this.dragOverTargetIds) === null || _this$dragOverTargetI === void 0 ? void 0 : _this$dragOverTargetI.length) || 0
};
} // public for test
}, {
key: "setup",
value: function setup() {
if (this.window === undefined) {
return;
}
if (this.window.__isReactDndBackendSetUp) {
throw new Error('Cannot have two HTML5 backends at the same time.');
}
this.window.__isReactDndBackendSetUp = true;
this.addEventListeners(this.window);
}
}, {
key: "teardown",
value: function teardown() {
if (this.window === undefined) {
return;
}
this.window.__isReactDndBackendSetUp = false;
this.removeEventListeners(this.window);
this.clearCurrentDragSourceNode();
if (this.asyncEndDragFrameId) {
this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
}
}
}, {
key: "connectDragPreview",
value: function connectDragPreview(sourceId, node, options) {
var _this2 = this;
this.sourcePreviewNodeOptions.set(sourceId, options);
this.sourcePreviewNodes.set(sourceId, node);
return function () {
_this2.sourcePreviewNodes.delete(sourceId);
_this2.sourcePreviewNodeOptions.delete(sourceId);
};
}
}, {
key: "connectDragSource",
value: function connectDragSource(sourceId, node, options) {
var _this3 = this;
this.sourceNodes.set(sourceId, node);
this.sourceNodeOptions.set(sourceId, options);
var handleDragStart = function handleDragStart(e) {
return _this3.handleDragStart(e, sourceId);
};
var handleSelectStart = function handleSelectStart(e) {
return _this3.handleSelectStart(e);
};
node.setAttribute('draggable', 'true');
node.addEventListener('dragstart', handleDragStart);
node.addEventListener('selectstart', handleSelectStart);
return function () {
_this3.sourceNodes.delete(sourceId);
_this3.sourceNodeOptions.delete(sourceId);
node.removeEventListener('dragstart', handleDragStart);
node.removeEventListener('selectstart', handleSelectStart);
node.setAttribute('draggable', 'false');
};
}
}, {
key: "connectDropTarget",
value: function connectDropTarget(targetId, node) {
var _this4 = this;
var handleDragEnter = function handleDragEnter(e) {
return _this4.handleDragEnter(e, targetId);
};
var handleDragOver = function handleDragOver(e) {
return _this4.handleDragOver(e, targetId);
};
var handleDrop = function handleDrop(e) {
return _this4.handleDrop(e, targetId);
};
node.addEventListener('dragenter', handleDragEnter);
node.addEventListener('dragover', handleDragOver);
node.addEventListener('drop', handleDrop);
return function () {
node.removeEventListener('dragenter', handleDragEnter);
node.removeEventListener('dragover', handleDragOver);
node.removeEventListener('drop', handleDrop);
};
}
}, {
key: "addEventListeners",
value: function addEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.addEventListener) {
return;
}
target.addEventListener('dragstart', this.handleTopDragStart);
target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
target.addEventListener('dragend', this.handleTopDragEndCapture, true);
target.addEventListener('dragenter', this.handleTopDragEnter);
target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.addEventListener('dragover', this.handleTopDragOver);
target.addEventListener('dragover', this.handleTopDragOverCapture, true);
target.addEventListener('drop', this.handleTopDrop);
target.addEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "removeEventListeners",
value: function removeEventListeners(target) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.removeEventListener) {
return;
}
target.removeEventListener('dragstart', this.handleTopDragStart);
target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
target.removeEventListener('dragenter', this.handleTopDragEnter);
target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
target.removeEventListener('dragover', this.handleTopDragOver);
target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
target.removeEventListener('drop', this.handleTopDrop);
target.removeEventListener('drop', this.handleTopDropCapture, true);
}
}, {
key: "getCurrentSourceNodeOptions",
value: function getCurrentSourceNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
return _objectSpread({
dropEffect: this.altKeyPressed ? 'copy' : 'move'
}, sourceNodeOptions || {});
}
}, {
key: "getCurrentDropEffect",
value: function getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy';
}
return this.getCurrentSourceNodeOptions().dropEffect;
}
}, {
key: "getCurrentSourcePreviewNodeOptions",
value: function getCurrentSourcePreviewNodeOptions() {
var sourceId = this.monitor.getSourceId();
var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
return _objectSpread({
anchorX: 0.5,
anchorY: 0.5,
captureDraggingState: false
}, sourcePreviewNodeOptions || {});
}
}, {
key: "isDraggingNativeItem",
value: function isDraggingNativeItem() {
var itemType = this.monitor.getItemType();
return Object.keys(NativeTypes).some(function (key) {
return NativeTypes[key] === itemType;
});
}
}, {
key: "beginDragNativeItem",
value: function beginDragNativeItem(type, dataTransfer) {
this.clearCurrentDragSourceNode();
this.currentNativeSource = createNativeDragSource(type, dataTransfer);
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
}
}, {
key: "setCurrentDragSourceNode",
value: function setCurrentDragSourceNode(node) {
var _this5 = this;
this.clearCurrentDragSourceNode();
this.currentDragSourceNode = node; // A timeout of > 0 is necessary to resolve Firefox issue referenced
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
var MOUSE_MOVE_TIMEOUT = 1000; // Receiving a mouse event in the middle of a dragging operation
// means it has ended and the drag source node disappeared from DOM,
// so the browser didn't dispatch the dragend event.
//
// We need to wait before we start listening for mousemove events.
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
// immediately in some browsers.
//
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
//
this.mouseMoveTimeoutTimer = setTimeout(function () {
return _this5.window && _this5.window.addEventListener('mousemove', _this5.endDragIfSourceWasRemovedFromDOM, true);
}, MOUSE_MOVE_TIMEOUT);
}
}, {
key: "clearCurrentDragSourceNode",
value: function clearCurrentDragSourceNode() {
if (this.currentDragSourceNode) {
this.currentDragSourceNode = null;
if (this.window) {
this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
}
this.mouseMoveTimeoutTimer = null;
return true;
}
return false;
}
}, {
key: "handleDragStart",
value: function handleDragStart(e, sourceId) {
if (e.defaultPrevented) {
return;
}
if (!this.dragStartSourceIds) {
this.dragStartSourceIds = [];
}
this.dragStartSourceIds.unshift(sourceId);
}
}, {
key: "handleDragEnter",
value: function handleDragEnter(e, targetId) {
this.dragEnterTargetIds.unshift(targetId);
}
}, {
key: "handleDragOver",
value: function handleDragOver(e, targetId) {
if (this.dragOverTargetIds === null) {
this.dragOverTargetIds = [];
}
this.dragOverTargetIds.unshift(targetId);
}
}, {
key: "handleDrop",
value: function handleDrop(e, targetId) {
this.dropTargetIds.unshift(targetId);
}
}, {
key: "window",
get: function get() {
return this.options.window;
}
}, {
key: "document",
get: function get() {
return this.options.document;
}
}]);
return HTML5BackendImpl;
}(); dist/esm/index.js 0000644 00000000446 15167672621 0007761 0 ustar 00 import { HTML5BackendImpl } from './HTML5BackendImpl';
import * as NativeTypes from './NativeTypes';
export { getEmptyImage } from './getEmptyImage';
export { NativeTypes };
export var HTML5Backend = function createBackend(manager, context) {
return new HTML5BackendImpl(manager, context);
}; dist/esm/OffsetUtils.js 0000644 00000007335 15167672621 0011125 0 ustar 00 import { isSafari, isFirefox } from './BrowserDetector';
import { MonotonicInterpolant } from './MonotonicInterpolant';
var ELEMENT_NODE = 1;
export function getNodeClientOffset(node) {
var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
if (!el) {
return null;
}
var _el$getBoundingClient = el.getBoundingClientRect(),
top = _el$getBoundingClient.top,
left = _el$getBoundingClient.left;
return {
x: left,
y: top
};
}
export function getEventClientOffset(e) {
return {
x: e.clientX,
y: e.clientY
};
}
function isImageNode(node) {
var _document$documentEle;
return node.nodeName === 'IMG' && (isFirefox() || !((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.contains(node)));
}
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight; // Work around @2x coordinate discrepancies in browsers
if (isSafari() && isImage) {
dragPreviewHeight /= window.devicePixelRatio;
dragPreviewWidth /= window.devicePixelRatio;
}
return {
dragPreviewWidth: dragPreviewWidth,
dragPreviewHeight: dragPreviewHeight
};
}
export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
var isImage = isImageNode(dragPreview);
var dragPreviewNode = isImage ? sourceNode : dragPreview;
var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
var offsetFromDragPreview = {
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
};
var sourceWidth = sourceNode.offsetWidth,
sourceHeight = sourceNode.offsetHeight;
var anchorX = anchorPoint.anchorX,
anchorY = anchorPoint.anchorY;
var _getDragPreviewSize = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight),
dragPreviewWidth = _getDragPreviewSize.dragPreviewWidth,
dragPreviewHeight = _getDragPreviewSize.dragPreviewHeight;
var calculateYOffset = function calculateYOffset() {
var interpolantY = new MonotonicInterpolant([0, 0.5, 1], [// Dock to the top
offsetFromDragPreview.y, // Align at the center
offsetFromDragPreview.y / sourceHeight * dragPreviewHeight, // Dock to the bottom
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
var y = interpolantY.interpolate(anchorY); // Work around Safari 8 positioning bug
if (isSafari() && isImage) {
// We'll have to wait for @3x to see if this is entirely correct
y += (window.devicePixelRatio - 1) * dragPreviewHeight;
}
return y;
};
var calculateXOffset = function calculateXOffset() {
// Interpolate coordinates depending on anchor point
// If you know a simpler way to do this, let me know
var interpolantX = new MonotonicInterpolant([0, 0.5, 1], [// Dock to the left
offsetFromDragPreview.x, // Align at the center
offsetFromDragPreview.x / sourceWidth * dragPreviewWidth, // Dock to the right
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth]);
return interpolantX.interpolate(anchorX);
}; // Force offsets if specified in the options.
var offsetX = offsetPoint.offsetX,
offsetY = offsetPoint.offsetY;
var isManualOffsetX = offsetX === 0 || offsetX;
var isManualOffsetY = offsetY === 0 || offsetY;
return {
x: isManualOffsetX ? offsetX : calculateXOffset(),
y: isManualOffsetY ? offsetY : calculateYOffset()
};
} dist/esm/getEmptyImage.js 0000644 00000000343 15167672621 0011407 0 ustar 00 var emptyImage;
export function getEmptyImage() {
if (!emptyImage) {
emptyImage = new Image();
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
}
return emptyImage;
} dist/esm/NativeTypes.js 0000644 00000000154 15167672621 0011121 0 ustar 00 export var FILE = '__NATIVE_FILE__';
export var URL = '__NATIVE_URL__';
export var TEXT = '__NATIVE_TEXT__'; dist/esm/MonotonicInterpolant.js 0000644 00000006433 15167672621 0013041 0 ustar 00 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
export var MonotonicInterpolant = /*#__PURE__*/function () {
function MonotonicInterpolant(xs, ys) {
_classCallCheck(this, MonotonicInterpolant);
var length = xs.length; // Rearrange xs and ys so that xs is sorted
var indexes = [];
for (var i = 0; i < length; i++) {
indexes.push(i);
}
indexes.sort(function (a, b) {
return xs[a] < xs[b] ? -1 : 1;
}); // Get consecutive differences and slopes
var dys = [];
var dxs = [];
var ms = [];
var dx;
var dy;
for (var _i = 0; _i < length - 1; _i++) {
dx = xs[_i + 1] - xs[_i];
dy = ys[_i + 1] - ys[_i];
dxs.push(dx);
dys.push(dy);
ms.push(dy / dx);
} // Get degree-1 coefficients
var c1s = [ms[0]];
for (var _i2 = 0; _i2 < dxs.length - 1; _i2++) {
var m2 = ms[_i2];
var mNext = ms[_i2 + 1];
if (m2 * mNext <= 0) {
c1s.push(0);
} else {
dx = dxs[_i2];
var dxNext = dxs[_i2 + 1];
var common = dx + dxNext;
c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
}
}
c1s.push(ms[ms.length - 1]); // Get degree-2 and degree-3 coefficients
var c2s = [];
var c3s = [];
var m;
for (var _i3 = 0; _i3 < c1s.length - 1; _i3++) {
m = ms[_i3];
var c1 = c1s[_i3];
var invDx = 1 / dxs[_i3];
var _common = c1 + c1s[_i3 + 1] - m - m;
c2s.push((m - c1 - _common) * invDx);
c3s.push(_common * invDx * invDx);
}
this.xs = xs;
this.ys = ys;
this.c1s = c1s;
this.c2s = c2s;
this.c3s = c3s;
}
_createClass(MonotonicInterpolant, [{
key: "interpolate",
value: function interpolate(x) {
var xs = this.xs,
ys = this.ys,
c1s = this.c1s,
c2s = this.c2s,
c3s = this.c3s; // The rightmost point in the dataset should give an exact result
var 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
var low = 0;
var high = c3s.length - 1;
var mid;
while (low <= high) {
mid = Math.floor(0.5 * (low + high));
var 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
var diff = x - xs[i];
var diffSq = diff * diff;
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
}
}]);
return MonotonicInterpolant;
}(); dist/esm/BrowserDetector.js 0000644 00000000334 15167672621 0011763 0 ustar 00 import { memoize } from './utils/js_utils';
export var isFirefox = memoize(function () {
return /firefox/i.test(navigator.userAgent);
});
export var isSafari = memoize(function () {
return Boolean(window.safari);
}); README.md 0000644 00000003774 15167672621 0006053 0 ustar 00 [](https://www.npmjs.org/package/react-dnd-html5-backend)
[](https://travis-ci.org/react-dnd/react-dnd-html5-backend)
[](https://david-dm.org/react-dnd/react-dnd-html5-backend)
[](https://david-dm.org/react-dnd/react-dnd-html5-backend?type=dev)
[](https://david-dm.org/react-dnd/react-dnd-html5-backend?type=peer)
# React DnD HTML5 Backend
The officially supported HTML5 backend for [React DnD](http://react-dnd.github.io/react-dnd/).
See [the docs](http://react-dnd.github.io/react-dnd/docs/backends/html5) for usage information.
## Installation
If you use [npm](http://npmjs.com):
```
npm install --save react-dnd-html5-backend
```
The npm package defaults to the CommonJS build.
However it also includes a pre-minified UMD build in the `dist` folder.
The UMD build exports a global `window.ReactDnDHTML5Backend` when imported as a `<script>` tag.
If you’d rather not use npm, you can use [unpkg](http://unpkg.com/) to access the UMD build directly: [ReactDnDHTML5Backend.min.js](https://unpkg.com/react-dnd-html5-backend@latest/dist/ReactDnDHTML5Backend.min.js).
You may point your Bower config to it.
## Browser Support
We strive to support the evergreen browsers, Safari 7+, as well as IE11+. IE10 should also work, but `DragLayer` is fairly useless because IE10 doesn’t support `pointer-events: none`. We don’t officially support IE9 and less.
Unfortunately the browser bugs, inconsistencies, and regressions come up from time to time, so please make sure you test your app on the browsers you’re interested in, and report any bugs to us.
## License
MIT