react-dnd-html5-backend
Version:
HTML5 backend for React DnD
2 lines (1 loc) • 19.1 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis: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)}}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var i=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),n(this,"entered",[]),n(this,"isNodeInDocument",void 0),this.isNodeInDocument=t}var t,i;return t=e,(i=[{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 i=[];return r.forEach((function(e){return i.push(e)})),i}(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,i),e}(),o=t((function(){return/firefox/i.test(navigator.userAgent)})),a=t((function(){return Boolean(window.safari)}));function s(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)}}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c=function(){function e(t,r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),u(this,"xs",void 0),u(this,"ys",void 0),u(this,"c1s",void 0),u(this,"c2s",void 0),u(this,"c3s",void 0);for(var n=t.length,i=[],o=0;o<n;o++)i.push(o);i.sort((function(e,r){return t[e]<t[r]?-1:1}));for(var a,s,c=[],d=[],l=0;l<n-1;l++)a=t[l+1]-t[l],s=r[l+1]-r[l],c.push(a),d.push(s/a);for(var g=[d[0]],f=0;f<c.length-1;f++){var v=d[f],h=d[f+1];if(v*h<=0)g.push(0);else{a=c[f];var p=c[f+1],m=a+p;g.push(3*m/((m+p)/v+(m+a)/h))}}g.push(d[d.length-1]);for(var D,y=[],T=[],E=0;E<g.length-1;E++){D=d[E];var b=g[E],w=1/c[E],N=b+g[E+1]-D-D;y.push((D-b-N)*w),T.push(N*w*w)}this.xs=t,this.ys=r,this.c1s=g,this.c2s=y,this.c3s=T}var t,r;return t=e,(r=[{key:"interpolate",value:function(e){var t=this.xs,r=this.ys,n=this.c1s,i=this.c2s,o=this.c3s,a=t.length-1;if(e===t[a])return r[a];for(var s,u=0,c=o.length-1;u<=c;){var d=t[s=Math.floor(.5*(u+c))];if(d<e)u=s+1;else{if(!(d>e))return r[s];c=s-1}}var l=e-t[a=Math.max(0,c)],g=l*l;return r[a]+n[a]*l+i[a]*g+o[a]*l*g}}])&&s(t.prototype,r),e}();function d(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 l(e){return{x:e.clientX,y:e.clientY}}function g(e,t,r,n,i){var s,u,l,g="IMG"===(s=t).nodeName&&(o()||!(null!==(u=document.documentElement)&&void 0!==u&&u.contains(s))),f=d(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 i=e?t.width:r,o=e?t.height:n;return a()&&e&&(o/=window.devicePixelRatio,i/=window.devicePixelRatio),{dragPreviewWidth:i,dragPreviewHeight:o}}(g,t,h,p),T=y.dragPreviewWidth,E=y.dragPreviewHeight,b=i.offsetX,w=i.offsetY,N=0===w||w;return{x:0===b||b?b:new c([0,.5,1],[v.x,v.x/h*T,v.x+T-h]).interpolate(m),y:N?w:(l=new c([0,.5,1],[v.y,v.y/p*E,v.y+E-p]).interpolate(D),a()&&g&&(l+=(window.devicePixelRatio-1)*E),l)}}var f,v="__NATIVE_FILE__",h="__NATIVE_URL__",p="__NATIVE_TEXT__",m="__NATIVE_HTML__",D=Object.freeze({__proto__:null,FILE:v,URL:h,TEXT:p,HTML:m});function y(e,t,r){var n=t.reduce((function(t,r){return t||e.getData(r)}),"");return null!=n?n:r}function T(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var E=(T(f={},v,{exposeProperties:{files:function(e){return Array.prototype.slice.call(e.files)},items:function(e){return e.items}},matchesTypes:["Files"]}),T(f,m,{exposeProperties:{html:function(e,t){return y(e,t,"")}},matchesTypes:["Html","text/html"]}),T(f,h,{exposeProperties:{urls:function(e,t){return y(e,t,"").split("\n")}},matchesTypes:["Url","text/uri-list"]}),T(f,p,{exposeProperties:{text:function(e,t){return y(e,t,"")}},matchesTypes:["Text","text/plain"]}),f);function b(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)}}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}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),w(this,"item",void 0),w(this,"config",void 0),this.config=t,this.item={},this.initializeExposedProperties()}var t,r;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(){}}])&&b(t.prototype,r),e}();function O(e){if(!e)return null;var t=Array.prototype.slice.call(e.types||[]);return Object.keys(E).filter((function(e){return E[e].matchesTypes.some((function(e){return t.indexOf(e)>-1}))}))[0]||null}function S(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)}}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var C=function(){function e(t,r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),I(this,"ownerDocument",null),I(this,"globalContext",void 0),I(this,"optionsArgs",void 0),this.globalContext=t,this.optionsArgs=r}var t,r;return t=e,(r=[{key:"window",get:function(){return this.globalContext?this.globalContext:"undefined"!=typeof window?window:void 0}},{key:"document",get:function(){var e;return null!==(e=this.globalContext)&&void 0!==e&&e.document?this.globalContext.document:this.window?this.window.document:void 0}},{key:"rootElement",get:function(){var e;return(null===(e=this.optionsArgs)||void 0===e?void 0:e.rootElement)||this.window}}])&&S(t.prototype,r),e}();function P(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 L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?P(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):P(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function k(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)}}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var A,j=function(){function e(t,r,n){var o=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),x(this,"options",void 0),x(this,"actions",void 0),x(this,"monitor",void 0),x(this,"registry",void 0),x(this,"enterLeaveCounter",void 0),x(this,"sourcePreviewNodes",new Map),x(this,"sourcePreviewNodeOptions",new Map),x(this,"sourceNodes",new Map),x(this,"sourceNodeOptions",new Map),x(this,"dragStartSourceIds",null),x(this,"dropTargetIds",[]),x(this,"dragEnterTargetIds",[]),x(this,"currentNativeSource",null),x(this,"currentNativeHandle",null),x(this,"currentDragSourceNode",null),x(this,"altKeyPressed",!1),x(this,"mouseMoveTimeoutTimer",null),x(this,"asyncEndDragFrameId",null),x(this,"dragOverTargetIds",null),x(this,"getSourceClientOffset",(function(e){var t=o.sourceNodes.get(e);return t&&d(t)||null})),x(this,"endDragNativeItem",(function(){o.isDraggingNativeItem()&&(o.actions.endDrag(),o.currentNativeHandle&&o.registry.removeSource(o.currentNativeHandle),o.currentNativeHandle=null,o.currentNativeSource=null)})),x(this,"isNodeInDocument",(function(e){return Boolean(e&&o.document&&o.document.body&&o.document.body.contains(e))})),x(this,"endDragIfSourceWasRemovedFromDOM",(function(){var e=o.currentDragSourceNode;null==e||o.isNodeInDocument(e)||o.clearCurrentDragSourceNode()&&o.monitor.isDragging()&&o.actions.endDrag()})),x(this,"handleTopDragStartCapture",(function(){o.clearCurrentDragSourceNode(),o.dragStartSourceIds=[]})),x(this,"handleTopDragStart",(function(e){if(!e.defaultPrevented){var t=o.dragStartSourceIds;o.dragStartSourceIds=null;var r=l(e);o.monitor.isDragging()&&o.actions.endDrag(),o.actions.beginDrag(t||[],{publishSource:!1,getSourceClientOffset:o.getSourceClientOffset,clientOffset:r});var n=e.dataTransfer,i=O(n);if(o.monitor.isDragging()){if(n&&"function"==typeof n.setDragImage){var a=o.monitor.getSourceId(),s=o.sourceNodes.get(a),u=o.sourcePreviewNodes.get(a)||s;if(u){var c=o.getCurrentSourcePreviewNodeOptions(),d=g(s,u,r,{anchorX:c.anchorX,anchorY:c.anchorY},{offsetX:c.offsetX,offsetY:c.offsetY});n.setDragImage(u,d.x,d.y)}}try{null==n||n.setData("application/json",{})}catch(e){}o.setCurrentDragSourceNode(e.target),o.getCurrentSourcePreviewNodeOptions().captureDraggingState?o.actions.publishDragSource():setTimeout((function(){return o.actions.publishDragSource()}),0)}else if(i)o.beginDragNativeItem(i);else{if(n&&!n.types&&(e.target&&!e.target.hasAttribute||!e.target.hasAttribute("draggable")))return;e.preventDefault()}}})),x(this,"handleTopDragEndCapture",(function(){o.clearCurrentDragSourceNode()&&o.monitor.isDragging()&&o.actions.endDrag()})),x(this,"handleTopDragEnterCapture",(function(e){if(o.dragEnterTargetIds=[],o.enterLeaveCounter.enter(e.target)&&!o.monitor.isDragging()){var t=e.dataTransfer,r=O(t);r&&o.beginDragNativeItem(r,t)}})),x(this,"handleTopDragEnter",(function(e){var t=o.dragEnterTargetIds;o.dragEnterTargetIds=[],o.monitor.isDragging()&&(o.altKeyPressed=e.altKey,t.length>0&&o.actions.hover(t,{clientOffset:l(e)}),t.some((function(e){return o.monitor.canDropOnTarget(e)}))&&(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=o.getCurrentDropEffect())))})),x(this,"handleTopDragOverCapture",(function(){o.dragOverTargetIds=[]})),x(this,"handleTopDragOver",(function(e){var t=o.dragOverTargetIds;if(o.dragOverTargetIds=[],!o.monitor.isDragging())return e.preventDefault(),void(e.dataTransfer&&(e.dataTransfer.dropEffect="none"));o.altKeyPressed=e.altKey,o.actions.hover(t||[],{clientOffset:l(e)}),(t||[]).some((function(e){return o.monitor.canDropOnTarget(e)}))?(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=o.getCurrentDropEffect())):o.isDraggingNativeItem()?e.preventDefault():(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="none"))})),x(this,"handleTopDragLeaveCapture",(function(e){o.isDraggingNativeItem()&&e.preventDefault(),o.enterLeaveCounter.leave(e.target)&&o.isDraggingNativeItem()&&setTimeout((function(){return o.endDragNativeItem()}),0)})),x(this,"handleTopDropCapture",(function(e){var t;o.dropTargetIds=[],o.isDraggingNativeItem()?(e.preventDefault(),null===(t=o.currentNativeSource)||void 0===t||t.loadDataTransfer(e.dataTransfer)):O(e.dataTransfer)&&e.preventDefault(),o.enterLeaveCounter.reset()})),x(this,"handleTopDrop",(function(e){var t=o.dropTargetIds;o.dropTargetIds=[],o.actions.hover(t,{clientOffset:l(e)}),o.actions.drop({dropEffect:o.getCurrentDropEffect()}),o.isDraggingNativeItem()?o.endDragNativeItem():o.monitor.isDragging()&&o.actions.endDrag()})),x(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 C(r,n),this.actions=t.getActions(),this.monitor=t.getMonitor(),this.registry=t.getRegistry(),this.enterLeaveCounter=new i(this.isNodeInDocument)}var t,r;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:"window",get:function(){return this.options.window}},{key:"document",get:function(){return this.options.document}},{key:"rootElement",get:function(){return this.options.rootElement}},{key:"setup",value:function(){var e=this.rootElement;if(void 0!==e){if(e.__isReactDndBackendSetUp)throw new Error("Cannot have two HTML5 backends at the same time.");e.__isReactDndBackendSetUp=!0,this.addEventListeners(e)}}},{key:"teardown",value:function(){var e,t=this.rootElement;void 0!==t&&(t.__isReactDndBackendSetUp=!1,this.removeEventListeners(this.rootElement),this.clearCurrentDragSourceNode(),this.asyncEndDragFrameId&&(null===(e=this.window)||void 0===e||e.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 i=function(t){return n.handleDragStart(t,e)},o=function(e){return n.handleSelectStart(e)};return t.setAttribute("draggable","true"),t.addEventListener("dragstart",i),t.addEventListener("selectstart",o),function(){n.sourceNodes.delete(e),n.sourceNodeOptions.delete(e),t.removeEventListener("dragstart",i),t.removeEventListener("selectstart",o),t.setAttribute("draggable","false")}}},{key:"connectDropTarget",value:function(e,t){var r=this,n=function(t){return r.handleDragEnter(t,e)},i=function(t){return r.handleDragOver(t,e)},o=function(t){return r.handleDrop(t,e)};return t.addEventListener("dragenter",n),t.addEventListener("dragover",i),t.addEventListener("drop",o),function(){t.removeEventListener("dragenter",n),t.removeEventListener("dragover",i),t.removeEventListener("drop",o)}}},{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 L({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 L({anchorX:.5,anchorY:.5,captureDraggingState:!1},this.sourcePreviewNodeOptions.get(e)||{})}},{key:"isDraggingNativeItem",value:function(){var e=this.monitor.getItemType();return Object.keys(D).some((function(t){return D[t]===e}))}},{key:"beginDragNativeItem",value:function(e,t){this.clearCurrentDragSourceNode(),this.currentNativeSource=function(e,t){var r=new N(E[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(){var e;return null===(e=t.rootElement)||void 0===e?void 0:e.addEventListener("mousemove",t.endDragIfSourceWasRemovedFromDOM,!0)}),1e3)}},{key:"clearCurrentDragSourceNode",value:function(){var e;return!!this.currentDragSourceNode&&(this.currentDragSourceNode=null,this.rootElement&&(null===(e=this.window)||void 0===e||e.clearTimeout(this.mouseMoveTimeoutTimer||void 0),this.rootElement.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)}}])&&k(t.prototype,r),e}();e.HTML5Backend=function(e,t,r){return new j(e,t,r)},e.NativeTypes=D,e.getEmptyImage=function(){return A||((A=new Image).src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),A},Object.defineProperty(e,"__esModule",{value:!0})}));