react-draggable - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

bower.json

 {
   "name": "react-draggable",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "homepage": "https://github.com/mzabriskie/react-draggable",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

 # Changelog
 
+### 3.3.0 (Apr 18, 2019)
+
+- Addition of `positionOffset` prop, which can be Numbers (px) or string percentages (like `"10%"`). See the README for more.
+
 ### 3.2.1 (Mar 1, 2019)
@@ -4,0 +8,0 @@

dist/react-draggable.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react-dom"),require("react")):"function"==typeof define&&define.amd?define(["react-dom","react"],e):t.ReactDraggable=e(t.ReactDOM,t.React)}(this,function(t,e){"use strict";function n(t,e){return t(e={exports:{}},e.exports),e.exports}function r(t){return function(){return t}}t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t};var a=o;var i=function(t,e,n,r,o,a,i,s){if(!t){var u;if(void 0===e)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,a,i,s],c=0;(u=new Error(e.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},s=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}})()&&Object.assign;var c="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",p=n(function(t){t.exports=function(){function t(t,e,n,r,o,a){a!==c&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=a,n.PropTypes=n,n}()}),f=n(function(t){!function(){var e={}.hasOwnProperty;function n(){for(var t=[],r=0;r<arguments.length;r++){var o=arguments[r];if(o){var a=typeof o;if("string"===a||"number"===a)t.push(o);else if(Array.isArray(o))t.push(n.apply(null,o));else if("object"===a)for(var i in o)e.call(o,i)&&o[i]&&t.push(i)}}return t.join(" ")}t.exports?t.exports=n:window.classNames=n}()});function d(t,e){for(var n=0,r=t.length;n<r;n++)if(e.apply(e,[t[n],n,t]))return t[n]}function g(t){return"function"==typeof t||"[object Function]"===Object.prototype.toString.call(t)}function h(t){return"number"==typeof t&&!isNaN(t)}function m(t){return parseInt(t,10)}function y(t,e,n){if(t[e])return new Error("Invalid prop "+e+" passed to "+n+" - do not set this, set it on the child.")}var b=["Moz","Webkit","O","ms"];function v(t,e){return e?""+e+function(t){for(var e="",n=!0,r=0;r<t.length;r++)n?(e+=t[r].toUpperCase(),n=!1):"-"===t[r]?n=!0:e+=t[r];return e}(t):t}var w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"transform";if("undefined"==typeof window||void 0===window.document)return"";var e=window.document.documentElement.style;if(t in e)return"";for(var n=0;n<b.length;n++)if(v(t,b[n])in e)return b[n];return""}(),S=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},D=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),x=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},O=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},T=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},E=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},N=function(){return function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var n=[],r=!0,o=!1,a=void 0;try{for(var i,s=t[Symbol.iterator]();!(r=(i=s.next()).done)&&(n.push(i.value),!e||n.length!==e);r=!0);}catch(t){o=!0,a=t}finally{try{!r&&s.return&&s.return()}finally{if(o)throw a}}return n}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),k="";function M(t,e){return k||(k=d(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(e){return g(t[e])})),!!g(t[k])&&t[k](e)}function P(t,e,n){var r=t;do{if(M(r,e))return!0;if(r===n)return!1;r=r.parentNode}while(r);return!1}function C(t,e,n){t&&(t.attachEvent?t.attachEvent("on"+e,n):t.addEventListener?t.addEventListener(e,n,!0):t["on"+e]=n)}function j(t,e,n){t&&(t.detachEvent?t.detachEvent("on"+e,n):t.removeEventListener?t.removeEventListener(e,n,!0):t["on"+e]=null)}function R(t){if(t){var e,n,r=t.getElementById("react-draggable-style-el");r||((r=t.createElement("style")).type="text/css",r.id="react-draggable-style-el",r.innerHTML=".react-draggable-transparent-selection *::-moz-selection {background: transparent;}\n",r.innerHTML+=".react-draggable-transparent-selection *::selection {background: transparent;}\n",t.getElementsByTagName("head")[0].appendChild(r)),t.body&&(e=t.body,n="react-draggable-transparent-selection",e.classList?e.classList.add(n):e.className.match(new RegExp("(?:^|\\s)"+n+"(?!\\S)"))||(e.className+=" "+n))}}function X(t){try{t&&t.body&&(e=t.body,n="react-draggable-transparent-selection",e.classList?e.classList.remove(n):e.className=e.className.replace(new RegExp("(?:^|\\s)"+n+"(?!\\S)","g"),"")),t.selection?t.selection.empty():window.getSelection().removeAllRanges()}catch(t){}var e,n}function Y(t,e,n){if(!t.props.bounds)return[e,n];var r=t.props.bounds;r="string"==typeof r?r:function(t){return{left:t.left,top:t.top,right:t.right,bottom:t.bottom}}(r);var o=U(t);if("string"==typeof r){var a=o.ownerDocument,i=a.defaultView,s=void 0;if(!((s="parent"===r?o.parentNode:a.querySelector(r))instanceof i.HTMLElement))throw new Error('Bounds selector "'+r+'" could not find an element.');var u=i.getComputedStyle(o),l=i.getComputedStyle(s);r={left:-o.offsetLeft+m(l.paddingLeft)+m(u.marginLeft),top:-o.offsetTop+m(l.paddingTop)+m(u.marginTop),right:function(t){var e=t.clientWidth,n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=m(n.paddingLeft),e-=m(n.paddingRight)}(s)-function(t){var e=t.clientWidth,n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=m(n.borderLeftWidth),e+=m(n.borderRightWidth)}(o)-o.offsetLeft+m(l.paddingRight)-m(u.marginRight),bottom:function(t){var e=t.clientHeight,n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=m(n.paddingTop),e-=m(n.paddingBottom)}(s)-function(t){var e=t.clientHeight,n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=m(n.borderTopWidth),e+=m(n.borderBottomWidth)}(o)-o.offsetTop+m(l.paddingBottom)-m(u.marginBottom)}}return h(r.right)&&(e=Math.min(e,r.right)),h(r.bottom)&&(n=Math.min(n,r.bottom)),h(r.left)&&(e=Math.max(e,r.left)),h(r.top)&&(n=Math.max(n,r.top)),[e,n]}function _(t,e,n){var r="number"==typeof e?function(t,e){return t.targetTouches&&d(t.targetTouches,function(t){return e===t.identifier})||t.changedTouches&&d(t.changedTouches,function(t){return e===t.identifier})}(t,e):null;if("number"==typeof e&&!r)return null;var o=U(n);return function(t,e){var n=e===e.ownerDocument.body?{left:0,top:0}:e.getBoundingClientRect();return{x:t.clientX+e.scrollLeft-n.left,y:t.clientY+e.scrollTop-n.top}}(r||t,n.props.offsetParent||o.offsetParent||o.ownerDocument.body)}function L(t,e,n){var r=t.state,o=!h(r.lastX),a=U(t);return o?{node:a,deltaX:0,deltaY:0,lastX:e,lastY:n,x:e,y:n}:{node:a,deltaX:e-r.lastX,deltaY:n-r.lastY,lastX:r.lastX,lastY:r.lastY,x:e,y:n}}function A(t,e){var n=t.props.scale;return{node:e.node,x:t.state.x+e.deltaX/n,y:t.state.y+e.deltaY/n,deltaX:e.deltaX/n,deltaY:e.deltaY/n,lastX:t.state.x,lastY:t.state.y}}function U(e){var n=t.findDOMNode(e);if(!n)throw new Error("<DraggableCore>: Unmounted during event!");return n}var I={touch:{start:"touchstart",move:"touchmove",stop:"touchend"},mouse:{start:"mousedown",move:"mousemove",stop:"mouseup"}},V=I.mouse,W=function(n){function r(){var e,n,o;S(this,r);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return n=o=E(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(i))),o.state={dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:null},o.handleDragStart=function(e){if(o.props.onMouseDown(e),!o.props.allowAnyClick&&"number"==typeof e.button&&0!==e.button)return!1;var n=t.findDOMNode(o);if(!n||!n.ownerDocument||!n.ownerDocument.body)throw new Error("<DraggableCore> not mounted on DragStart!");var r=n.ownerDocument;if(!(o.props.disabled||!(e.target instanceof r.defaultView.Node)||o.props.handle&&!P(e.target,o.props.handle,n)||o.props.cancel&&P(e.target,o.props.cancel,n))){var a=function(t){return t.targetTouches&&t.targetTouches[0]?t.targetTouches[0].identifier:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0].identifier:void 0}(e);o.setState({touchIdentifier:a});var i=_(e,a,o);if(null!=i){var s=i.x,u=i.y,l=L(o,s,u);o.props.onStart,!1!==o.props.onStart(e,l)&&(o.props.enableUserSelectHack&&R(r),o.setState({dragging:!0,lastX:s,lastY:u}),C(r,V.move,o.handleDrag),C(r,V.stop,o.handleDragStop))}}},o.handleDrag=function(t){"touchmove"===t.type&&t.preventDefault();var e=_(t,o.state.touchIdentifier,o);if(null!=e){var n,r,a,i=e.x,s=e.y;if(Array.isArray(o.props.grid)){var u=i-o.state.lastX,l=s-o.state.lastY,c=(n=o.props.grid,r=u,a=l,[Math.round(r/n[0])*n[0],Math.round(a/n[1])*n[1]]),p=N(c,2);if(u=p[0],l=p[1],!u&&!l)return;i=o.state.lastX+u,s=o.state.lastY+l}var f=L(o,i,s);if(!1!==o.props.onDrag(t,f))o.setState({lastX:i,lastY:s});else try{o.handleDragStop(new MouseEvent("mouseup"))}catch(t){var d=document.createEvent("MouseEvents");d.initMouseEvent("mouseup",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),o.handleDragStop(d)}}},o.handleDragStop=function(e){if(o.state.dragging){var n=_(e,o.state.touchIdentifier,o);if(null!=n){var r=n.x,a=n.y,i=L(o,r,a),s=t.findDOMNode(o);s&&o.props.enableUserSelectHack&&X(s.ownerDocument),o.setState({dragging:!1,lastX:NaN,lastY:NaN}),o.props.onStop(e,i),s&&(j(s.ownerDocument,V.move,o.handleDrag),j(s.ownerDocument,V.stop,o.handleDragStop))}}},o.onMouseDown=function(t){return V=I.mouse,o.handleDragStart(t)},o.onMouseUp=function(t){return V=I.mouse,o.handleDragStop(t)},o.onTouchStart=function(t){return V=I.touch,o.handleDragStart(t)},o.onTouchEnd=function(t){return V=I.touch,o.handleDragStop(t)},E(o,n)}return T(r,n),D(r,[{key:"componentWillUnmount",value:function(){var e=t.findDOMNode(this);if(e){var n=e.ownerDocument;j(n,I.mouse.move,this.handleDrag),j(n,I.touch.move,this.handleDrag),j(n,I.mouse.stop,this.handleDragStop),j(n,I.touch.stop,this.handleDragStop),this.props.enableUserSelectHack&&X(n)}}},{key:"render",value:function(){return e.cloneElement(e.Children.only(this.props.children),{style:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return O({touchAction:"none"},t)}(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.onMouseUp,onTouchEnd:this.onTouchEnd})}}]),r}(e.Component);W.displayName="DraggableCore",W.propTypes={allowAnyClick:p.bool,disabled:p.bool,enableUserSelectHack:p.bool,offsetParent:function(t,e){if(t[e]&&1!==t[e].nodeType)throw new Error("Draggable's offsetParent must be a DOM Node.")},grid:p.arrayOf(p.number),scale:p.number,handle:p.string,cancel:p.string,onStart:p.func,onDrag:p.func,onStop:p.func,onMouseDown:p.func,className:y,style:y,transform:y},W.defaultProps={allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,offsetParent:null,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}};var B=function(n){function r(t){S(this,r);var e=E(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,t));return e.onDragStart=function(t,n){if(!1===e.props.onStart(t,A(e,n)))return!1;e.setState({dragging:!0,dragged:!0})},e.onDrag=function(t,n){if(!e.state.dragging)return!1;var r=A(e,n),o={x:r.x,y:r.y};if(e.props.bounds){var a=o.x,i=o.y;o.x+=e.state.slackX,o.y+=e.state.slackY;var s=Y(e,o.x,o.y),u=N(s,2),l=u[0],c=u[1];o.x=l,o.y=c,o.slackX=e.state.slackX+(a-o.x),o.slackY=e.state.slackY+(i-o.y),r.x=o.x,r.y=o.y,r.deltaX=o.x-e.state.x,r.deltaY=o.y-e.state.y}if(!1===e.props.onDrag(t,r))return!1;e.setState(o)},e.onDragStop=function(t,n){if(!e.state.dragging)return!1;if(!1===e.props.onStop(t,A(e,n)))return!1;var r={dragging:!1,slackX:0,slackY:0};if(Boolean(e.props.position)){var o=e.props.position,a=o.x,i=o.y;r.x=a,r.y=i}e.setState(r)},e.state={dragging:!1,dragged:!1,x:t.position?t.position.x:t.defaultPosition.x,y:t.position?t.position.y:t.defaultPosition.y,slackX:0,slackY:0,isElementSVG:!1},e}return T(r,n),D(r,[{key:"componentWillMount",value:function(){!this.props.position||this.props.onDrag||this.props.onStop||console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.")}},{key:"componentDidMount",value:function(){void 0!==window.SVGElement&&t.findDOMNode(this)instanceof window.SVGElement&&this.setState({isElementSVG:!0})}},{key:"componentWillReceiveProps",value:function(t){!t.position||this.props.position&&t.position.x===this.props.position.x&&t.position.y===this.props.position.y||this.setState({x:t.position.x,y:t.position.y})}},{key:"componentWillUnmount",value:function(){this.setState({dragging:!1})}},{key:"render",value:function(){var t,n,r,o,a,i={},s=null,u=!Boolean(this.props.position)||this.state.dragging,l=this.props.position||this.props.defaultPosition,c={x:function(t){return"both"===t.props.axis||"x"===t.props.axis}(this)&&u?this.state.x:l.x,y:function(t){return"both"===t.props.axis||"y"===t.props.axis}(this)&&u?this.state.y:l.y};this.state.isElementSVG?s="translate("+(a=c).x+","+a.y+")":(r=(n=c).x,o=n.y,i=x({},v("transform",w),"translate("+r+"px,"+o+"px)"));var p=this.props,d=p.defaultClassName,g=p.defaultClassNameDragging,h=p.defaultClassNameDragged,m=e.Children.only(this.props.children),y=f(m.props.className||"",d,(x(t={},g,this.state.dragging),x(t,h,this.state.dragged),t));return e.createElement(W,O({},this.props,{onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop}),e.cloneElement(m,{className:y,style:O({},m.props.style,i),transform:s}))}}]),r}(e.Component);return B.displayName="Draggable",B.propTypes=O({},W.propTypes,{axis:p.oneOf(["both","x","y","none"]),bounds:p.oneOfType([p.shape({left:p.number,right:p.number,top:p.number,bottom:p.number}),p.string,p.oneOf([!1])]),defaultClassName:p.string,defaultClassNameDragging:p.string,defaultClassNameDragged:p.string,defaultPosition:p.shape({x:p.number,y:p.number}),position:p.shape({x:p.number,y:p.number}),className:y,style:y,transform:y}),B.defaultProps=O({},W.defaultProps,{axis:"both",bounds:!1,defaultClassName:"react-draggable",defaultClassNameDragging:"react-draggable-dragging",defaultClassNameDragged:"react-draggable-dragged",defaultPosition:{x:0,y:0},position:null,scale:1}),B.default=B,B.DraggableCore=W,B});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react-dom"),require("react")):"function"==typeof define&&define.amd?define(["react-dom","react"],e):t.ReactDraggable=e(t.ReactDOM,t.React)}(this,function(t,e){"use strict";function n(t,e){return t(e={exports:{}},e.exports),e.exports}function r(t){return function(){return t}}t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t};var a=o;var i=function(t,e,n,r,o,a,i,s){if(!t){var u;if(void 0===e)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,a,i,s],c=0;(u=new Error(e.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},s=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}})()&&Object.assign;var c="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",p=n(function(t){t.exports=function(){function t(t,e,n,r,o,a){a!==c&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=a,n.PropTypes=n,n}()}),f=n(function(t){!function(){var e={}.hasOwnProperty;function n(){for(var t=[],r=0;r<arguments.length;r++){var o=arguments[r];if(o){var a=typeof o;if("string"===a||"number"===a)t.push(o);else if(Array.isArray(o))t.push(n.apply(null,o));else if("object"===a)for(var i in o)e.call(o,i)&&o[i]&&t.push(i)}}return t.join(" ")}t.exports?t.exports=n:window.classNames=n}()});function d(t,e){for(var n=0,r=t.length;n<r;n++)if(e.apply(e,[t[n],n,t]))return t[n]}function g(t){return"function"==typeof t||"[object Function]"===Object.prototype.toString.call(t)}function h(t){return"number"==typeof t&&!isNaN(t)}function m(t){return parseInt(t,10)}function y(t,e,n){if(t[e])return new Error("Invalid prop "+e+" passed to "+n+" - do not set this, set it on the child.")}var b=["Moz","Webkit","O","ms"];function v(t,e){return e?""+e+function(t){for(var e="",n=!0,r=0;r<t.length;r++)n?(e+=t[r].toUpperCase(),n=!1):"-"===t[r]?n=!0:e+=t[r];return e}(t):t}var w=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"transform";if("undefined"==typeof window||void 0===window.document)return"";var e=window.document.documentElement.style;if(t in e)return"";for(var n=0;n<b.length;n++)if(v(t,b[n])in e)return b[n];return""}(),S=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},D=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),x=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},O=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},T=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},E=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},N=function(){return function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var n=[],r=!0,o=!1,a=void 0;try{for(var i,s=t[Symbol.iterator]();!(r=(i=s.next()).done)&&(n.push(i.value),!e||n.length!==e);r=!0);}catch(t){o=!0,a=t}finally{try{!r&&s.return&&s.return()}finally{if(o)throw a}}return n}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),k="";function M(t,e){return k||(k=d(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(e){return g(t[e])})),!!g(t[k])&&t[k](e)}function P(t,e,n){var r=t;do{if(M(r,e))return!0;if(r===n)return!1;r=r.parentNode}while(r);return!1}function C(t,e,n){t&&(t.attachEvent?t.attachEvent("on"+e,n):t.addEventListener?t.addEventListener(e,n,!0):t["on"+e]=n)}function j(t,e,n){t&&(t.detachEvent?t.detachEvent("on"+e,n):t.removeEventListener?t.removeEventListener(e,n,!0):t["on"+e]=null)}function R(t,e,n){var r="translate("+t.x+n+","+t.y+n+")";e&&(r="translate("+(""+("string"==typeof e.x?e.x:e.x+n))+", "+(""+("string"==typeof e.y?e.y:e.y+n))+")"+r);return r}function X(t){if(t){var e,n,r=t.getElementById("react-draggable-style-el");r||((r=t.createElement("style")).type="text/css",r.id="react-draggable-style-el",r.innerHTML=".react-draggable-transparent-selection *::-moz-selection {background: transparent;}\n",r.innerHTML+=".react-draggable-transparent-selection *::selection {background: transparent;}\n",t.getElementsByTagName("head")[0].appendChild(r)),t.body&&(e=t.body,n="react-draggable-transparent-selection",e.classList?e.classList.add(n):e.className.match(new RegExp("(?:^|\\s)"+n+"(?!\\S)"))||(e.className+=" "+n))}}function Y(t){try{t&&t.body&&(e=t.body,n="react-draggable-transparent-selection",e.classList?e.classList.remove(n):e.className=e.className.replace(new RegExp("(?:^|\\s)"+n+"(?!\\S)","g"),"")),t.selection?t.selection.empty():window.getSelection().removeAllRanges()}catch(t){}var e,n}function _(t,e,n){if(!t.props.bounds)return[e,n];var r=t.props.bounds;r="string"==typeof r?r:function(t){return{left:t.left,top:t.top,right:t.right,bottom:t.bottom}}(r);var o=I(t);if("string"==typeof r){var a=o.ownerDocument,i=a.defaultView,s=void 0;if(!((s="parent"===r?o.parentNode:a.querySelector(r))instanceof i.HTMLElement))throw new Error('Bounds selector "'+r+'" could not find an element.');var u=i.getComputedStyle(o),l=i.getComputedStyle(s);r={left:-o.offsetLeft+m(l.paddingLeft)+m(u.marginLeft),top:-o.offsetTop+m(l.paddingTop)+m(u.marginTop),right:function(t){var e=t.clientWidth,n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=m(n.paddingLeft),e-=m(n.paddingRight)}(s)-function(t){var e=t.clientWidth,n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=m(n.borderLeftWidth),e+=m(n.borderRightWidth)}(o)-o.offsetLeft+m(l.paddingRight)-m(u.marginRight),bottom:function(t){var e=t.clientHeight,n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=m(n.paddingTop),e-=m(n.paddingBottom)}(s)-function(t){var e=t.clientHeight,n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=m(n.borderTopWidth),e+=m(n.borderBottomWidth)}(o)-o.offsetTop+m(l.paddingBottom)-m(u.marginBottom)}}return h(r.right)&&(e=Math.min(e,r.right)),h(r.bottom)&&(n=Math.min(n,r.bottom)),h(r.left)&&(e=Math.max(e,r.left)),h(r.top)&&(n=Math.max(n,r.top)),[e,n]}function L(t,e,n){var r="number"==typeof e?function(t,e){return t.targetTouches&&d(t.targetTouches,function(t){return e===t.identifier})||t.changedTouches&&d(t.changedTouches,function(t){return e===t.identifier})}(t,e):null;if("number"==typeof e&&!r)return null;var o=I(n);return function(t,e){var n=e===e.ownerDocument.body?{left:0,top:0}:e.getBoundingClientRect();return{x:t.clientX+e.scrollLeft-n.left,y:t.clientY+e.scrollTop-n.top}}(r||t,n.props.offsetParent||o.offsetParent||o.ownerDocument.body)}function A(t,e,n){var r=t.state,o=!h(r.lastX),a=I(t);return o?{node:a,deltaX:0,deltaY:0,lastX:e,lastY:n,x:e,y:n}:{node:a,deltaX:e-r.lastX,deltaY:n-r.lastY,lastX:r.lastX,lastY:r.lastY,x:e,y:n}}function U(t,e){var n=t.props.scale;return{node:e.node,x:t.state.x+e.deltaX/n,y:t.state.y+e.deltaY/n,deltaX:e.deltaX/n,deltaY:e.deltaY/n,lastX:t.state.x,lastY:t.state.y}}function I(e){var n=t.findDOMNode(e);if(!n)throw new Error("<DraggableCore>: Unmounted during event!");return n}var V={touch:{start:"touchstart",move:"touchmove",stop:"touchend"},mouse:{start:"mousedown",move:"mousemove",stop:"mouseup"}},W=V.mouse,B=function(n){function r(){var e,n,o;S(this,r);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return n=o=E(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(i))),o.state={dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:null},o.handleDragStart=function(e){if(o.props.onMouseDown(e),!o.props.allowAnyClick&&"number"==typeof e.button&&0!==e.button)return!1;var n=t.findDOMNode(o);if(!n||!n.ownerDocument||!n.ownerDocument.body)throw new Error("<DraggableCore> not mounted on DragStart!");var r=n.ownerDocument;if(!(o.props.disabled||!(e.target instanceof r.defaultView.Node)||o.props.handle&&!P(e.target,o.props.handle,n)||o.props.cancel&&P(e.target,o.props.cancel,n))){var a=function(t){return t.targetTouches&&t.targetTouches[0]?t.targetTouches[0].identifier:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0].identifier:void 0}(e);o.setState({touchIdentifier:a});var i=L(e,a,o);if(null!=i){var s=i.x,u=i.y,l=A(o,s,u);o.props.onStart,!1!==o.props.onStart(e,l)&&(o.props.enableUserSelectHack&&X(r),o.setState({dragging:!0,lastX:s,lastY:u}),C(r,W.move,o.handleDrag),C(r,W.stop,o.handleDragStop))}}},o.handleDrag=function(t){"touchmove"===t.type&&t.preventDefault();var e=L(t,o.state.touchIdentifier,o);if(null!=e){var n,r,a,i=e.x,s=e.y;if(Array.isArray(o.props.grid)){var u=i-o.state.lastX,l=s-o.state.lastY,c=(n=o.props.grid,r=u,a=l,[Math.round(r/n[0])*n[0],Math.round(a/n[1])*n[1]]),p=N(c,2);if(u=p[0],l=p[1],!u&&!l)return;i=o.state.lastX+u,s=o.state.lastY+l}var f=A(o,i,s);if(!1!==o.props.onDrag(t,f))o.setState({lastX:i,lastY:s});else try{o.handleDragStop(new MouseEvent("mouseup"))}catch(t){var d=document.createEvent("MouseEvents");d.initMouseEvent("mouseup",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),o.handleDragStop(d)}}},o.handleDragStop=function(e){if(o.state.dragging){var n=L(e,o.state.touchIdentifier,o);if(null!=n){var r=n.x,a=n.y,i=A(o,r,a),s=t.findDOMNode(o);s&&o.props.enableUserSelectHack&&Y(s.ownerDocument),o.setState({dragging:!1,lastX:NaN,lastY:NaN}),o.props.onStop(e,i),s&&(j(s.ownerDocument,W.move,o.handleDrag),j(s.ownerDocument,W.stop,o.handleDragStop))}}},o.onMouseDown=function(t){return W=V.mouse,o.handleDragStart(t)},o.onMouseUp=function(t){return W=V.mouse,o.handleDragStop(t)},o.onTouchStart=function(t){return W=V.touch,o.handleDragStart(t)},o.onTouchEnd=function(t){return W=V.touch,o.handleDragStop(t)},E(o,n)}return T(r,n),D(r,[{key:"componentWillUnmount",value:function(){var e=t.findDOMNode(this);if(e){var n=e.ownerDocument;j(n,V.mouse.move,this.handleDrag),j(n,V.touch.move,this.handleDrag),j(n,V.mouse.stop,this.handleDragStop),j(n,V.touch.stop,this.handleDragStop),this.props.enableUserSelectHack&&Y(n)}}},{key:"render",value:function(){return e.cloneElement(e.Children.only(this.props.children),{style:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return O({touchAction:"none"},t)}(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.onMouseUp,onTouchEnd:this.onTouchEnd})}}]),r}(e.Component);B.displayName="DraggableCore",B.propTypes={allowAnyClick:p.bool,disabled:p.bool,enableUserSelectHack:p.bool,offsetParent:function(t,e){if(t[e]&&1!==t[e].nodeType)throw new Error("Draggable's offsetParent must be a DOM Node.")},grid:p.arrayOf(p.number),scale:p.number,handle:p.string,cancel:p.string,onStart:p.func,onDrag:p.func,onStop:p.func,onMouseDown:p.func,className:y,style:y,transform:y},B.defaultProps={allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,offsetParent:null,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}};var H=function(n){function r(t){S(this,r);var e=E(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,t));return e.onDragStart=function(t,n){if(!1===e.props.onStart(t,U(e,n)))return!1;e.setState({dragging:!0,dragged:!0})},e.onDrag=function(t,n){if(!e.state.dragging)return!1;var r=U(e,n),o={x:r.x,y:r.y};if(e.props.bounds){var a=o.x,i=o.y;o.x+=e.state.slackX,o.y+=e.state.slackY;var s=_(e,o.x,o.y),u=N(s,2),l=u[0],c=u[1];o.x=l,o.y=c,o.slackX=e.state.slackX+(a-o.x),o.slackY=e.state.slackY+(i-o.y),r.x=o.x,r.y=o.y,r.deltaX=o.x-e.state.x,r.deltaY=o.y-e.state.y}if(!1===e.props.onDrag(t,r))return!1;e.setState(o)},e.onDragStop=function(t,n){if(!e.state.dragging)return!1;if(!1===e.props.onStop(t,U(e,n)))return!1;var r={dragging:!1,slackX:0,slackY:0};if(Boolean(e.props.position)){var o=e.props.position,a=o.x,i=o.y;r.x=a,r.y=i}e.setState(r)},e.state={dragging:!1,dragged:!1,x:t.position?t.position.x:t.defaultPosition.x,y:t.position?t.position.y:t.defaultPosition.y,slackX:0,slackY:0,isElementSVG:!1},e}return T(r,n),D(r,[{key:"componentWillMount",value:function(){!this.props.position||this.props.onDrag||this.props.onStop||console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.")}},{key:"componentDidMount",value:function(){void 0!==window.SVGElement&&t.findDOMNode(this)instanceof window.SVGElement&&this.setState({isElementSVG:!0})}},{key:"componentWillReceiveProps",value:function(t){!t.position||this.props.position&&t.position.x===this.props.position.x&&t.position.y===this.props.position.y||this.setState({x:t.position.x,y:t.position.y})}},{key:"componentWillUnmount",value:function(){this.setState({dragging:!1})}},{key:"render",value:function(){var t,n,r,o={},a=null,i=!Boolean(this.props.position)||this.state.dragging,s=this.props.position||this.props.defaultPosition,u={x:function(t){return"both"===t.props.axis||"x"===t.props.axis}(this)&&i?this.state.x:s.x,y:function(t){return"both"===t.props.axis||"y"===t.props.axis}(this)&&i?this.state.y:s.y};this.state.isElementSVG?(n=u,r=this.props.positionOffset,a=R(n,r,"")):o=function(t,e){var n=R(t,e,"px");return x({},v("transform",w),n)}(u,this.props.positionOffset);var l=this.props,c=l.defaultClassName,p=l.defaultClassNameDragging,d=l.defaultClassNameDragged,g=e.Children.only(this.props.children),h=f(g.props.className||"",c,(x(t={},p,this.state.dragging),x(t,d,this.state.dragged),t));return e.createElement(B,O({},this.props,{onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop}),e.cloneElement(g,{className:h,style:O({},g.props.style,o),transform:a}))}}]),r}(e.Component);return H.displayName="Draggable",H.propTypes=O({},B.propTypes,{axis:p.oneOf(["both","x","y","none"]),bounds:p.oneOfType([p.shape({left:p.number,right:p.number,top:p.number,bottom:p.number}),p.string,p.oneOf([!1])]),defaultClassName:p.string,defaultClassNameDragging:p.string,defaultClassNameDragged:p.string,defaultPosition:p.shape({x:p.number,y:p.number}),positionOffset:p.shape({x:p.oneOfType([p.number,p.string]),y:p.oneOfType([p.number,p.string])}),position:p.shape({x:p.number,y:p.number}),className:y,style:y,transform:y}),H.defaultProps=O({},B.defaultProps,{axis:"both",bounds:!1,defaultClassName:"react-draggable",defaultClassNameDragging:"react-draggable-dragging",defaultClassNameDragged:"react-draggable-dragged",defaultPosition:{x:0,y:0},position:null,scale:1}),H.default=H,H.DraggableCore=B,H});
 //# sourceMappingURL=react-draggable.min.js.map

lib/Draggable.js

@@ -10,3 +10,3 @@ // @flow
 import DraggableCore from './DraggableCore';
-import type {ControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';
+import type {ControlPosition, PositionOffsetControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';
 import log from './utils/log';
@@ -32,2 +32,3 @@ import type {DraggableEventHandler} from './utils/types';
   defaultPosition: ControlPosition,
+  positionOffset: PositionOffsetControlPosition,
   position: ControlPosition,
@@ -126,2 +127,6 @@ scale: number
     }),
+    positionOffset: PropTypes.shape({
+      x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    }),
 
@@ -332,3 +337,3 @@ /**
     if (this.state.isElementSVG) {
-      svgTransform = createSVGTransform(transformOpts);
+      svgTransform = createSVGTransform(transformOpts, this.props.positionOffset);
     } else {
@@ -339,3 +344,3 @@ // Add a CSS transform to move the element around. This allows us to move the element around
       // has a clean slate.
-      style = createCSSTransform(transformOpts);
+      style = createCSSTransform(transformOpts, this.props.positionOffset);
     }
@@ -342,0 +347,0 @@

lib/DraggableCore.js

@@ -55,2 +55,3 @@ // @flow
 export type ControlPosition = {x: number, y: number};
+export type PositionOffsetControlPosition = {x: number|string, y: number|string};
 
@@ -57,0 +58,0 @@ export type DraggableCoreProps = {

lib/utils/domFns.js

@@ -5,3 +5,3 @@ // @flow
 
-import type {ControlPosition, MouseTouchEvent} from './types';
+import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';
 
@@ -113,10 +113,20 @@ let matchesSelectorFunc = '';
 
-export function createCSSTransform({x, y}: {x: number, y: number}): Object {
-  // Replace unitless items with px
-  return {[browserPrefixToKey('transform', browserPrefix)]: 'translate(' + x + 'px,' + y + 'px)'};
+export function createCSSTransform(controlPos: ControlPosition, positionOffset: PositionOffsetControlPosition): Object {
+  const translation = getTranslation(controlPos, positionOffset, 'px');
+  return {[browserPrefixToKey('transform', browserPrefix)]: translation };
 }
 
-export function createSVGTransform({x, y}: {x: number, y: number}): string {
-  return 'translate(' + x + ',' + y + ')';
+export function createSVGTransform(controlPos: ControlPosition, positionOffset: PositionOffsetControlPosition): string {
+  const translation = getTranslation(controlPos, positionOffset, '');
+  return translation;
 }
+export function getTranslation({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition, unitSuffix: string): string {
+  let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
+  if (positionOffset) {
+    const defaultX = `${(typeof positionOffset.x === 'string') ? positionOffset.x : positionOffset.x + unitSuffix}`;
+    const defaultY = `${(typeof positionOffset.y === 'string') ? positionOffset.y : positionOffset.y + unitSuffix}`;
+    translation = `translate(${defaultX}, ${defaultY})` + translation;
+  }
+  return translation;
+}
 
@@ -123,0 +133,0 @@ export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {

lib/utils/types.js

@@ -17,2 +17,3 @@ // @flow
 export type ControlPosition = {x: number, y: number};
+export type PositionOffsetControlPosition = {x: number|string, y: number|string};
 export type EventHandler<T> = (e: T) => void | false;
@@ -19,0 +20,0 @@

package.json

 {
   "name": "react-draggable",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "React draggable component",
@@ -5,0 +5,0 @@ "main": "dist/react-draggable.js",

README.md

@@ -222,2 +222,8 @@ # React-Draggable
 
+// A position offset to start with. Useful for giving an initial position
+// to the element. Differs from `defaultPosition` in that it does not
+// affect the postiion returned in draggable callbacks, and in that it
+// accepts strings, like `{x: '10%', y: '10%'}`.
+positionOffset: {x: number | string, y: number | string},
+
 // Specifies the scale of the canvas your are dragging this element on. This allows
@@ -224,0 +230,0 @@ // you to, for example, get the correct drag deltas while you are zoomed in or out via

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

363314

increased by1.39%

Lines of code

3307

increased by0.24%

Number of lines in readme file

320

increased by1.91%

Worsened metrics

Number of package files

24

decreased by-4%

No dependency changes