react-zoom-pan
Advanced tools
Comparing version 0.1.38 to 0.1.39
@@ -1,2 +0,2 @@ | ||
| "use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react")),n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)}; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0}); | ||
| /*! ***************************************************************************** | ||
@@ -15,3 +15,9 @@ Copyright (c) Microsoft Corporation. | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */function r(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var o=function(){return(o=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},i=1,a=2,s=3,u=4,c=5,l=6,p=7,h=22,f=23,d=5,m=0,y=1,x=function(){function t(t){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(t)}return t.prototype.apply=function(t){var e=[1,0,0,1,0,0];t&&(e=t.split(",")),this.a=parseFloat(e[0]),this.b=parseFloat(e[1]),this.c=parseFloat(e[2]),this.d=parseFloat(e[3]),this.e=parseFloat(e[4]),this.f=parseFloat(e[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},t.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},t.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},t.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},t.prototype.rotate=function(t){var e=Math.cos(.017453292519943295*t),n=Math.sin(.017453292519943295*t);return this.transform(e,n,-n,e,0,0)},t.prototype.rotateDeg=function(t){return this.rotate(.017453292519943295*t)},t.prototype.scale=function(t,e){return this.transform(t,0,0,e,0,0)},t.prototype.scaleX=function(t){return this.transform(t,0,0,1,0,0)},t.prototype.scaleY=function(t){return this.transform(1,0,0,t,0,0)},t.prototype.skew=function(t,e){return this.transform(1,e,t,1,0,0)},t.prototype.skewX=function(t){return this.transform(1,0,t,1,0,0)},t.prototype.skewY=function(t){return this.transform(1,t,0,1,0,0)},t.prototype.setTransform=function(t,e,n,r,o,i){return this.a=t,this.b=e,this.c=n,this.d=r,this.e=o,this.f=i,this},t.prototype.translate=function(t,e){return this.transform(1,0,0,1,t,e)},t.prototype.transform=function(e,n,r,o,i,a){var s=this.a,u=this.b,c=this.c,l=this.d,p=this.e,h=this.f,f=new t;return f.a=s*e+c*n,f.b=u*e+l*n,f.c=s*r+c*o,f.d=u*r+l*o,f.e=s*i+c*a+p,f.f=u*i+l*a+h,f},t.prototype.multiply=function(e){var n=new t,r=this.a,o=this.b,i=this.c,a=this.d,s=this.e,u=this.f;return n.a=r*e.a+i*e.b,n.b=o*e.a+a*e.b,n.c=r*e.c+i*e.d,n.d=o*e.c+a*e.d,n.e=r*e.e+i*e.f+s,n.f=o*e.e+a*e.f+u,n},t.prototype.inverse=function(){var e=this.a,n=this.b,r=this.c,o=this.d,i=this.e,a=this.f,s=new t,u=e*o-n*r;return s.a=o/u,s.b=-n/u,s.c=-r/u,s.d=e/u,s.e=(r*a-o*i)/u,s.f=-(e*a-n*i)/u,s},t.prototype.interpolate=function(e,n){var r=new t;return r.a=this.a+(e.a-this.a)*n,r.b=this.b+(e.b-this.b)*n,r.c=this.c+(e.c-this.c)*n,r.d=this.d+(e.d-this.d)*n,r.e=this.e+(e.e-this.e)*n,r.f=this.f+(e.f-this.f)*n,r},t.prototype.applyToPoint=function(t,e){return{x:t*this.a+e*this.c+this.e,y:t*this.b+e*this.d+this.f}},t.prototype.applyToArray=function(t){var e,n,r=0,o=[];if("number"==typeof t[0])for(n=t.length;r<n;)e=this.applyToPoint(t[r++],t[r++]),o.push(e.x,e.y);else for(;e=t[r];r++)o.push(this.applyToPoint(e.x,e.y));return o},t.prototype.applyToTypedArray=function(t){for(var e,n=0,r=t.length,o=new Float32Array(r);n<r;)e=this.applyToPoint(t[n],t[n+1]),o[n++]=e.x,o[n++]=e.y;return o},t.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},t.prototype.isEqual=function(t){return this._isEqual(this.a,t.a)&&this._isEqual(this.b,t.b)&&this._isEqual(this.c,t.c)&&this._isEqual(this.d,t.d)&&this._isEqual(this.e,t.e)&&this._isEqual(this.f,t.f)},t.prototype._isEqual=function(t,e){return Math.abs(t-e)<1e-14},t.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(t.prototype,"trx",{get:function(){return this.e},set:function(t){this.e=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"try",{get:function(){return this.f},set:function(t){this.f=t},enumerable:!1,configurable:!0}),t}(),b=function(){function t(t,e){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=t,this.y=e}return t.prototype.matrixTransform=function(t){var e=this.x,n=this.y;this.x=e*t.a+n*t.c+t.e,this.y=e*t.b+n*t.d+t.f},t}(),g=new(function(){function t(){var t=this;this.addAll=function(e){e&&(t.data={},e.forEach((function(e){t.data[e.id]=e})))},this.data={}}return t.prototype.add=function(t,e){this.data[t]=e},t.prototype.del=function(t){delete this.data[t]},t.prototype.get=function(t){return this.data[t]},t.prototype.delAll=function(){this.data={}},t}()),w=180/Math.PI,v=function(){function t(){}return t.normaliseVector=function(t){return Math.abs(t.x)>Math.abs(t.y)?t.x>0?{x:1,y:0}:{x:-1,y:0}:t.y>0?{x:0,y:1}:{x:0,y:-1}},t.calculateDistance=function(t,e){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))},t.calculateRotationsAngle=function(e,n,r){var o=t.calculateDistance(e,n),i=t.calculateDistance(r,n),a=t.calculateDistance(e,r),s=Math.pow(o,2)+Math.pow(i,2)-Math.pow(a,2),u=2*o*i;return Math.acos(s/u)*w},t.getParentMatrix=function(e,n){var r=g.get(e).parent;if(!r)return n;var o=g.get(r).matrix;return n=n?n.multiply(o):o,t.getParentMatrix(r,n)},t.getCombineMatrix=function(e){var n=new x(g.get(e).transform),r=t.getParentMatrix(e,n);return r||n},t.degrees=function(t){return t*w},t.rotateToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).rotate(n)).translate(-t,-e):r},t.scaleToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).scale(n,n)).translate(-t,-e):r},t.getRotationDirection=function(e,n,r){var o={x:n.x-e.x,y:n.y-e.y};return 0===(o=t.normaliseVector(o)).y?e.y-r.y<0?o.x>0?h:f:o.x<0?h:f:e.x-r.x>0?o.y>0?h:f:o.y<0?h:f},t.transfromIncrement=function(t,e,n,r){var o=n;o=n?o.multiply(r):r;var i=new b(0,0),a=new b(t,e),s=o.inverse();return i.matrixTransform(s),a.matrixTransform(s),{dx:a.x-i.x,dy:a.y-i.y}},t.coordinatesGlobalToLocal=function(t,e,n,r){var o=new b(t,e);return n&&o.matrixTransform(n.inverse()),r&&o.matrixTransform(r.inverse()),o},t.transformToViewPort=function(t,e,n,r,o){var i=new b(t,e);if(!n||!r)return i;o&&(n=n.multiply(o));var a=n.multiply(r);return i.matrixTransform(a),i},t.viewPorttoObject=function(t,e,n,r){var o=new x;o.translate(t,e);var i=n||o;return r&&(i=i.multiply(r)),i=i.inverse(),o.multiply(i)},t.calculateRubberBandPosition=function(e,n,r,o){if(!e)return{x:0,y:0,w:0,h:0,transform:0};var i=n,a=e;(i=this.calculateTrasformBox(i,r,a,o)).x=i.x-d,i.y=i.y-d,i.w=i.w+2*d,i.h=i.h+2*d;var s=new x,u=i.x+i.w/2,c=i.y+i.h/2;return s=t.rotateToCenter(u,c,i.angle,s),{x:i.x,y:i.y,w:i.w,h:i.h,transform:s.matrixToText()}},t.calculateTrasformBox=function(e,n,r,o){var i=0;0!=r.b&&(i=t.degrees(Math.atan2(r.b,r.a))),o&&(n=n.multiply(o));var a=e.w/2,s=e.h/2;r=t.rotateToCenter(a,s,-i,r);var u=n.multiply(r),c=new b(0,0),l=new b(e.w,e.h);return c.matrixTransform(u),l.matrixTransform(u),l.x=l.x-c.x,l.y=l.y-c.y,{x:c.x,y:c.y,w:l.x,h:l.y,angle:i}},t.moveObject=function(e,n,r){var o=t.transfromIncrement(e,n,r.viewportMtx,r.selection.matrix),i=r.selection.matrix;return{matrix:i=i.translate(-o.dx,-o.dy),box:null}},t.checkConstrains=function(e,n,r){if(!r)return!0;var o=new b(0,0),i=new b(e.w,0),a=new b(0,e.h),s=new b(e.w,e.h);return o.matrixTransform(n),!!t.isPointInBox(o,r)&&(i.matrixTransform(n),!!t.isPointInBox(i,r)&&(a.matrixTransform(n),!!t.isPointInBox(a,r)&&(s.matrixTransform(n),!!t.isPointInBox(s,r))))},t.isPointInBox=function(t,e){return!(t.x<0||t.y<0)&&!(t.x>e.w||t.y>e.h)},t.rotateObject=function(e,n,r,o,i){var a=i.box,s=a.x+a.w/2,u=a.y+a.h/2,c={x:r,y:o},l={x:e,y:n},p=t.transformToViewPort(s,u,i.viewportMtx,i.selection.matrix,i.parentMtx);console.log("rotating cx:"+p.x+" cy:"+p.y+" x:"+e+" y:"+n+" ");var f=t.getRotationDirection(c,l,p),d=t.calculateRotationsAngle(c,p,l);d=f==h?d:-d;var m=i.selection.matrix;return{matrix:m=(m=(m=m.translate(s,u)).rotate(d)).translate(-s,-u),box:null}},t.scaleObject=function(e,n,r,o){var i=o.box,a=i.x+i.w/2,s=i.y+i.h/2;r||(e=-e,n=-n);var u=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),c=t.transfromIncrement(i.x+i.w-a,i.y+i.h-s,o.viewportMtx,o.selection.matrix),l=t.transfromIncrement(i.x+i.w-u.dx-a,i.y+i.h-u.dy-s,o.viewportMtx,o.selection.matrix);if(!(i.x+i.w-u.dx<a||i.y+i.h-u.dy<s)){var p=l.dx/c.dx,h=l.dy/c.dy,f=o.selection.matrix;return{matrix:f=(f=(f=f.translate(a,s)).scale(p,h)).translate(-a,-s),box:null}}},t.resizeObject=function(e,n,r,o){var i=o.selection.box,a=0,s=0,h=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),f=0,d=0,m=o.selection.matrix;switch(r){case u:a=-h.dx,s=-h.dy,f=h.dx,d=h.dy;break;case c:s=-h.dy,f=-h.dx,d=h.dy;break;case l:a=-h.dx,f=h.dx,d=-h.dy;break;case p:f=-h.dx,d=-h.dy}var y={x:0,y:0,w:i.w+f,h:i.h+d};return{matrix:m=m.translate(a,s),box:y}},t}();function M(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}M(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var T=function(t){function n(e){var n=t.call(this,e)||this;return n.calculateCoordinates=n.calculateCoordinates.bind(n),n}return r(n,t),n.prototype.shouldComponentUpdate=function(t,e){return t.selectedItem||t.viewport.viewportTr!==this.props.viewport.viewportTr||t.viewport.selectedTr!==this.props.viewport.viewportTr||t.viewport.parentTr!==this.props.viewport.viewportTr},n.prototype.calculateCoordinates=function(){var t=v.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:t.x,y:t.y,w:t.w,h:t.h,transform:t.transform}},n.prototype.render=function(){var t=this,n=this.calculateCoordinates();return this.props.selection?e.default.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(e){t.props.doRubberMouseDown(e,a)}},e.default.createElement("g",{transform:"matrix("+n.transform+")"},e.default.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:n.x,y:n.y,width:n.w,height:n.h}),e.default.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:n.x-d,y:n.y-d,width:d,height:d,onMouseDown:function(e){t.props.doRubberMouseDown(e,u)}}),e.default.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:n.x+n.w,y:n.y-d,width:d,height:d,onMouseDown:function(e){t.props.doRubberMouseDown(e,c)}}),e.default.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:n.x-d,y:n.y+n.h,width:d,height:d,onMouseDown:function(e){t.props.doRubberMouseDown(e,l)}}),e.default.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:n.x+n.w,y:n.y+n.h,width:d,height:d,onMouseDown:function(e){t.props.doRubberMouseDown(e,p)}}),e.default.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:n.x+n.w/2-d,y:n.y+1.5*n.h,width:d,height:d,onMouseDown:function(e){t.props.doRubberMouseDown(e,s)}}))):null},n}(e.default.Component),P=function(){function t(){}return t.prototype.pan=function(t,e,n){n.e-=t,n.f-=e},t.prototype.zoom=function(t,e,n,r){r.e-=e,r.f-=n,r.a*=t,r.b*=t,r.c*=t,r.d*=t,r.e*=t,r.f*=t,r.e+=e,r.f+=n},t}(),D=function(t){function n(e){var n=t.call(this,e)||this;n.x=0,n.y=0,n.w=100,n.h=100,n.transform="1,0,0,1,0,0",n.id="";var r=e.children?e.children.props:null,o=r.x,i=r.y,a=r.w,s=r.h;return n.x=o||0,n.y=i||0,n.w=a||100,n.h=s||100,n.transform="1,0,0,1,"+n.x+","+n.y,n.id=e.id,n}return r(n,t),n.prototype.render=function(){var t=this,n=this.props,r=n.transform,o=n.children,i=n.box;return this.transform=r||this.transform,i&&(this.w=i.w,this.h=i.h),console.log(this.transform),e.default.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(e){return t.props.doObjectMouseDown(e,null,t)}},o)},n}(e.default.PureComponent);M(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var E=function(t){function n(n){var r=t.call(this,n)||this;return r.selection=null,r.draggingPositionX=0,r.draggingPositionY=0,r.mode=i,r.addRemoveMouseListener=function(t,e){t.dragging&&!e.dragging?(document.addEventListener("mousemove",r.doMouseMove),document.addEventListener("mouseup",r.doMouseUp)):!t.dragging&&e.dragging&&(document.removeEventListener("mousemove",r.doMouseMove),document.removeEventListener("mouseup",r.doMouseUp))},r.getSelectedObjInfo=function(t){var e=t?new x(t.transform):new x,n=t?{id:t.id,x:0,y:0,w:t.w,h:t.h}:{id:"",x:0,y:0,w:0,h:0},o=t?r.getObjType(t):m;return{id:t?t.id:-1,item:t,matrix:e,transform:e.matrixToText(),box:n,type:o}},r.doGlobalMouseDown=function(t){0===t.button&&(r.setDraggingPosition(t),r.setState({dragging:!0}),r.mode=i)},r.doObjectMouseDown=function(t,e,n){t.stopPropagation(),r.setDraggingPosition(t),r.setState({dragging:!0}),r.props.onSelectItem&&r.props.onSelectItem(e,n),r.selection=n;var o=r.getSelectedObjInfo(n);r.setState({dragging:!0,selection:o}),r.mode=a},r.doRubberMouseDown=function(t,e,n){t.stopPropagation(),r.setDraggingPosition(t),r.setState({dragging:!0}),r.mode=e},r.doMouseMove=function(t){if(r.state.dragging){console.log("Moving"),t.stopPropagation();var e=r.adjustCoor(t.clientX,t.clientY),n=e.x,o=e.y,h=r.draggingPositionX-n,f=r.draggingPositionY-o;switch(r.mode){case i:r.pan(h,f);break;case a:r.updateSelectedItem(v.moveObject(h,f,r.state));break;case s:r.updateSelectedItem(v.rotateObject(n,o,r.draggingPositionX,r.draggingPositionY,r.state));break;case u:case c:case l:case p:var d=v.resizeObject(h,f,r.mode,r.state);r.updateSelectedItem(d)}r.setDraggingPosition(t)}},r.doMouseUp=function(t){r.setState({dragging:!1}),r.state.selection.type==y&&r.props.onSelectItem&&r.props.onSelectItem(null,null),r.props.selectedItem&&r.props.onChange&&r.props.onChange(r.props.selectedItem,{transform:r.state.selection.matrix.matrixToText(),w:r.state.selection.box.w,h:r.state.selection.box.h})},r.doMouseWheel=function(t){t.preventDefault();var e=r.adjustCoor(t.clientX,t.clientY),n=e.x,o=e.y,i=t.deltaY>0?1.05:.95;r.zoom(i,n,o)},r.onDragOver=function(t){t.preventDefault()},r.onDrop=function(t){},r.addItem=function(t,e,n){var o=parseInt(t.dataTransfer.getData("type")),i=t.dataTransfer.getData("subtype"),a=parseInt(t.dataTransfer.getData("objtype")),s={name:t.dataTransfer.getData("name"),type:o,objType:a,subtype:i,transform:n},u=r.props.onAddItem;u&&u(s,e)},r.updateSelectedItem=function(t){var e=t.matrix,n=t.box?t.box:r.state.selection.box,i=o({},r.state.selection);i.matrix=e,i.transform=e.matrixToText(),i.box=n,r.setState({box:n,selection:i})},r.pan=function(t,e){r.zoomPanHelper.pan(t,e,r.state.viewportMtx),r.applyMatrix()},r.zoom=function(t,e,n){r.zoomPanHelper.zoom(t,e,n,r.state.viewportMtx),r.applyMatrix()},r.applyMatrix=function(){var t=r.state.viewportMtx.matrixToText();r.setState({viewportTr:t})},r.setDraggingPosition=function(t){var e=r.refs.container;r.draggingPositionX=t.clientX-e.offsetLeft,r.draggingPositionY=t.clientY-e.offsetTop},r.renderChildren=function(){var t=r.state.selection,n=r.props.children;return null==n?null:(console.log(n),n.map((function(n,o){console.log(n.id),console.log("s:"+t.id+" id:"+o+" ");var i=t.id==o?t.transform:null,a=t.id==o?t.box:null;return console.log(a),e.default.createElement(D,{id:o,key:o,transform:i,box:a,doObjectMouseDown:r.doObjectMouseDown},n)})))},r.zoomPanHelper=new P,r.state={dragging:!1,viewportMtx:new x(r.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:r.getSelectedObjInfo(null)},r.draggingPositionX=0,r.draggingPositionY=0,r.mode=i,r}return r(n,t),n.prototype.shouldComponentUpdate=function(t,e){return e.dragging!==this.state.dragging&&this.addRemoveMouseListener(e,this.state),t.selectedItem!==this.props.selectedItem&&(e.selection=this.getSelectedObjInfo(t.selectedItem)),!0},n.prototype.adjustCoor=function(t,e){var n=this.refs.container;return{x:t-n.offsetLeft,y:e-n.offsetTop}},n.prototype.ownEvent=function(t){t.preventDefault(),t.stopPropagation()},n.prototype.getObjType=function(t){return t.hasOwnProperty("start")&&t.hasOwnProperty("output")&&t.hasOwnProperty("end")&&t.hasOwnProperty("input")?y:m},n.prototype.render=function(){var t=this.state.viewportTr;return e.default.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},e.default.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},e.default.createElement("div",{style:{transform:"matrix("+t+")",position:"absolute"}},this.renderChildren()),e.default.createElement(T,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},n}(e.default.Component);exports.ZoomPan=E; | ||
| ***************************************************************************** */ | ||
| var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};function t(t,r){function n(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var r=function(){return(r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function n(e,t){return e(t={exports:{}},t.exports),t.exports | ||
| /* | ||
| object-assign | ||
| (c) Sindre Sorhus | ||
| @license MIT | ||
| */}var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;function s(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var u=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,u=s(e),c=1;c<arguments.length;c++){for(var l in r=Object(arguments[c]))a.call(r,l)&&(u[l]=r[l]);if(o){n=o(r);for(var f=0;f<n.length;f++)i.call(r,n[f])&&(u[n[f]]=r[n[f]])}}return u},c="function"==typeof Symbol&&Symbol.for,l=c?Symbol.for("react.element"):60103,f=c?Symbol.for("react.portal"):60106,p=c?Symbol.for("react.fragment"):60107,d=c?Symbol.for("react.strict_mode"):60108,y=c?Symbol.for("react.profiler"):60114,h=c?Symbol.for("react.provider"):60109,m=c?Symbol.for("react.context"):60110,v=c?Symbol.for("react.forward_ref"):60112,b=c?Symbol.for("react.suspense"):60113,g=c?Symbol.for("react.memo"):60115,x=c?Symbol.for("react.lazy"):60116,w="function"==typeof Symbol&&Symbol.iterator;function _(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var P={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C={};function S(e,t,r){this.props=e,this.context=t,this.refs=C,this.updater=r||P}function O(){}function E(e,t,r){this.props=e,this.context=t,this.refs=C,this.updater=r||P}S.prototype.isReactComponent={},S.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(_(85));this.updater.enqueueSetState(this,e,t,"setState")},S.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},O.prototype=S.prototype;var R=E.prototype=new O;R.constructor=E,u(R,S.prototype),R.isPureReactComponent=!0;var k={current:null},j=Object.prototype.hasOwnProperty,T={key:!0,ref:!0,__self:!0,__source:!0};function M(e,t,r){var n,o={},a=null,i=null;if(null!=t)for(n in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(a=""+t.key),t)j.call(t,n)&&!T.hasOwnProperty(n)&&(o[n]=t[n]);var s=arguments.length-2;if(1===s)o.children=r;else if(1<s){for(var u=Array(s),c=0;c<s;c++)u[c]=arguments[c+2];o.children=u}if(e&&e.defaultProps)for(n in s=e.defaultProps)void 0===o[n]&&(o[n]=s[n]);return{$$typeof:l,type:e,key:a,ref:i,props:o,_owner:k.current}}function D(e){return"object"==typeof e&&null!==e&&e.$$typeof===l}var I=/\/+/g,$=[];function A(e,t,r,n){if($.length){var o=$.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function N(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>$.length&&$.push(e)}function B(e,t,r){return null==e?0:function e(t,r,n,o){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var i=!1;if(null===t)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(t.$$typeof){case l:case f:i=!0}}if(i)return n(o,t,""===r?"."+q(t,0):r),1;if(i=0,r=""===r?".":r+":",Array.isArray(t))for(var s=0;s<t.length;s++){var u=r+q(a=t[s],s);i+=e(a,u,n,o)}else if(null===t||"object"!=typeof t?u=null:u="function"==typeof(u=w&&t[w]||t["@@iterator"])?u:null,"function"==typeof u)for(t=u.call(t),s=0;!(a=t.next()).done;)i+=e(a=a.value,u=r+q(a,s++),n,o);else if("object"===a)throw n=""+t,Error(_(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return i}(e,"",t,r)}function q(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function F(e,t){e.func.call(e.context,t,e.count++)}function L(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?U(e,n,r,(function(e){return e})):null!=e&&(D(e)&&(e=function(e,t){return{$$typeof:l,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(I,"$&/")+"/")+r)),n.push(e))}function U(e,t,r,n,o){var a="";null!=r&&(a=(""+r).replace(I,"$&/")+"/"),B(e,L,t=A(t,a,n,o)),N(t)}var z={current:null};function V(){var e=z.current;if(null===e)throw Error(_(321));return e}var Y={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return U(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;B(e,F,t=A(null,null,t,r)),N(t)},count:function(e){return B(e,(function(){return null}),null)},toArray:function(e){var t=[];return U(e,t,null,(function(e){return e})),t},only:function(e){if(!D(e))throw Error(_(143));return e}},Component:S,Fragment:p,Profiler:y,PureComponent:E,StrictMode:d,Suspense:b,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:z,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:k,IsSomeRendererActing:{current:!1},assign:u},cloneElement:function(e,t,r){if(null==e)throw Error(_(267,e));var n=u({},e.props),o=e.key,a=e.ref,i=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,i=k.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(c in t)j.call(t,c)&&!T.hasOwnProperty(c)&&(n[c]=void 0===t[c]&&void 0!==s?s[c]:t[c])}var c=arguments.length-2;if(1===c)n.children=r;else if(1<c){s=Array(c);for(var f=0;f<c;f++)s[f]=arguments[f+2];n.children=s}return{$$typeof:l,type:e.type,key:o,ref:a,props:n,_owner:i}},createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:m,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:h,_context:e},e.Consumer=e},createElement:M,createFactory:function(e){var t=M.bind(null,e);return t.type=e,t},createRef:function(){return{current:null}},forwardRef:function(e){return{$$typeof:v,render:e}},isValidElement:D,lazy:function(e){return{$$typeof:x,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:g,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return V().useCallback(e,t)},useContext:function(e,t){return V().useContext(e,t)},useDebugValue:function(){},useEffect:function(e,t){return V().useEffect(e,t)},useImperativeHandle:function(e,t,r){return V().useImperativeHandle(e,t,r)},useLayoutEffect:function(e,t){return V().useLayoutEffect(e,t)},useMemo:function(e,t){return V().useMemo(e,t)},useReducer:function(e,t,r){return V().useReducer(e,t,r)},useRef:function(e){return V().useRef(e)},useState:function(e){return V().useState(e)},version:"16.13.1"},H=function(){};if("production"!==process.env.NODE_ENV){var W="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",X={},G=Function.call.bind(Object.prototype.hasOwnProperty);H=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function J(e,t,r,n,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(G(e,a)){var i;try{if("function"!=typeof e[a]){var s=Error((n||"React class")+": "+r+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.");throw s.name="Invariant Violation",s}i=e[a](t,a,n,r,null,W)}catch(e){i=e}if(!i||i instanceof Error||H((n||"React class")+": type specification of "+r+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in X)){X[i.message]=!0;var u=o?o():"";H("Failed "+r+" type: "+i.message+(null!=u?u:""))}}}J.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(X={})};var Z=J,K=n((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e=u,r=Z,n="function"==typeof Symbol&&Symbol.for,o=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,i=n?Symbol.for("react.fragment"):60107,s=n?Symbol.for("react.strict_mode"):60108,c=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,f=n?Symbol.for("react.context"):60110,p=n?Symbol.for("react.concurrent_mode"):60111,d=n?Symbol.for("react.forward_ref"):60112,y=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,v=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,g=n?Symbol.for("react.fundamental"):60117,x=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119,_="function"==typeof Symbol&&Symbol.iterator;function P(e){if(null===e||"object"!=typeof e)return null;var t=_&&e[_]||e["@@iterator"];return"function"==typeof t?t:null}var C={current:null},S={current:null},O=/^(.*)[\\\/]/;function E(e){if(null==e)return null;if("number"==typeof e.tag&&D("Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case i:return"Fragment";case a:return"Portal";case c:return"Profiler";case s:return"StrictMode";case y:return"Suspense";case h:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case f:return"Context.Consumer";case l:return"Context.Provider";case d:return n=e,o=e.render,u="ForwardRef",p=o.displayName||o.name||"",n.displayName||(""!==p?u+"("+p+")":u);case m:return E(e.type);case b:return E(e.render);case v:var t=1===(r=e)._status?r._result:null;if(t)return E(t)}var r,n,o,u,p;return null}var R={},k=null;function j(e){k=e}R.getCurrentStack=null,R.getStackAddendum=function(){var e="";if(k){var t=E(k.type),r=k._owner;e+=function(e,t,r){var n="";if(t){var o=t.fileName,a=o.replace(O,"");if(/^index\./.test(a)){var i=o.match(O);if(i){var s=i[1];if(s)a=s.replace(O,"")+"/"+a}}n=" (at "+a+":"+t.lineNumber+")"}else r&&(n=" (created by "+r+")");return"\n in "+(e||"Unknown")+n}(t,k._source,r&&E(r.type))}var n=R.getCurrentStack;return n&&(e+=n()||""),e};var T={ReactCurrentDispatcher:C,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:e};function M(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("warn",e,r)}function D(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("error",e,r)}function I(e,t,r){if(!(r.length>0&&"string"==typeof r[r.length-1]&&0===r[r.length-1].indexOf("\n in"))){var n=T.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(t+="%s",r=r.concat([n]))}var o=r.map((function(e){return""+e}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o);try{var a=0,i="Warning: "+t.replace(/%s/g,(function(){return r[a++]}));throw new Error(i)}catch(e){}}e(T,{ReactDebugCurrentFrame:R,ReactComponentTreeHook:{}});var $={};function A(e,t){var r=e.constructor,n=r&&(r.displayName||r.name)||"ReactClass",o=n+"."+t;$[o]||(D("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",t,n),$[o]=!0)}var N={isMounted:function(e){return!1},enqueueForceUpdate:function(e,t,r){A(e,"forceUpdate")},enqueueReplaceState:function(e,t,r,n){A(e,"replaceState")},enqueueSetState:function(e,t,r,n){A(e,"setState")}},B={};function q(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}Object.freeze(B),q.prototype.isReactComponent={},q.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},q.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};var F={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]},L=function(e,t){Object.defineProperty(q.prototype,e,{get:function(){M("%s(...) is deprecated in plain JavaScript React classes. %s",t[0],t[1])}})};for(var U in F)F.hasOwnProperty(U)&&L(U,F[U]);function z(){}function V(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}z.prototype=q.prototype;var Y=V.prototype=new z;Y.constructor=V,e(Y,q.prototype),Y.isPureReactComponent=!0;var H,W,X,G=Object.prototype.hasOwnProperty,J={key:!0,ref:!0,__self:!0,__source:!0};function K(e){if(G.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}function Q(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}function ee(e,t){var r=function(){H||(H=!0,D("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function te(e,t){var r=function(){W||(W=!0,D("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}function re(e){if("string"==typeof e.ref&&S.current&&e.__self&&S.current.stateNode!==e.__self){var t=E(S.current.type);X[t]||(D('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref',E(S.current.type),e.ref),X[t]=!0)}}X={};var ne=function(e,t,r,n,a,i,s){var u={$$typeof:o,type:e,key:t,ref:r,props:s,_owner:i,_store:{}};return Object.defineProperty(u._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(u,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(u,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u};function oe(e,t,r){var n,o={},a=null,i=null,s=null,u=null;if(null!=t)for(n in K(t)&&(i=t.ref,re(t)),Q(t)&&(a=""+t.key),s=void 0===t.__self?null:t.__self,u=void 0===t.__source?null:t.__source,t)G.call(t,n)&&!J.hasOwnProperty(n)&&(o[n]=t[n]);var c=arguments.length-2;if(1===c)o.children=r;else if(c>1){for(var l=Array(c),f=0;f<c;f++)l[f]=arguments[f+2];Object.freeze&&Object.freeze(l),o.children=l}if(e&&e.defaultProps){var p=e.defaultProps;for(n in p)void 0===o[n]&&(o[n]=p[n])}if(a||i){var d="function"==typeof e?e.displayName||e.name||"Unknown":e;a&&ee(o,d),i&&te(o,d)}return ne(e,a,i,s,u,S.current,o)}function ae(t,r,n){if(null==t)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+t+".");var o,a,i=e({},t.props),s=t.key,u=t.ref,c=t._self,l=t._source,f=t._owner;if(null!=r)for(o in K(r)&&(u=r.ref,f=S.current),Q(r)&&(s=""+r.key),t.type&&t.type.defaultProps&&(a=t.type.defaultProps),r)G.call(r,o)&&!J.hasOwnProperty(o)&&(void 0===r[o]&&void 0!==a?i[o]=a[o]:i[o]=r[o]);var p=arguments.length-2;if(1===p)i.children=n;else if(p>1){for(var d=Array(p),y=0;y<p;y++)d[y]=arguments[y+2];i.children=d}return ne(t.type,s,u,c,l,f,i)}function ie(e){return"object"==typeof e&&null!==e&&e.$$typeof===o}var se=!1,ue=/\/+/g;function ce(e){return(""+e).replace(ue,"$&/")}var le,fe=[];function pe(e,t,r,n){if(fe.length){var o=fe.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function de(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,fe.length<10&&fe.push(e)}function ye(e,t,r){return null==e?0:function e(t,r,n,i){var s=typeof t;"undefined"!==s&&"boolean"!==s||(t=null);var u,c=!1;if(null===t)c=!0;else switch(s){case"string":case"number":c=!0;break;case"object":switch(t.$$typeof){case o:case a:c=!0}}if(c)return n(i,t,""===r?"."+he(t,0):r),1;var l=0,f=""===r?".":r+":";if(Array.isArray(t))for(var p=0;p<t.length;p++)l+=e(u=t[p],f+he(u,p),n,i);else{var d=P(t);if("function"==typeof d){d===t.entries&&(se||M("Using Maps as children is deprecated and will be removed in a future major release. Consider converting children to an array of keyed ReactElements instead."),se=!0);for(var y,h=d.call(t),m=0;!(y=h.next()).done;)l+=e(u=y.value,f+he(u,m++),n,i)}else if("object"===s){var v;v=" If you meant to render a collection of children, use an array instead."+R.getStackAddendum();var b=""+t;throw Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(t).join(", ")+"}":b)+")."+v)}}return l}(e,"",t,r)}function he(e,t){return"object"==typeof e&&null!==e&&null!=e.key?(r=e.key,n={"=":"=0",":":"=2"},"$"+(""+r).replace(/[=:]/g,(function(e){return n[e]}))):t.toString(36);var r,n}function me(e,t,r){var n=e.func,o=e.context;n.call(o,t,e.count++)}function ve(e,t,r){var n,o,a=e.result,i=e.keyPrefix,s=e.func,u=e.context,c=s.call(u,t,e.count++);Array.isArray(c)?be(c,a,r,(function(e){return e})):null!=c&&(ie(c)&&(n=c,o=i+(!c.key||t&&t.key===c.key?"":ce(c.key)+"/")+r,c=ne(n.type,o,n.ref,n._self,n._source,n._owner,n.props)),a.push(c))}function be(e,t,r,n,o){var a="";null!=r&&(a=ce(r)+"/");var i=pe(t,a,n,o);ye(e,ve,i),de(i)}function ge(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===c||e===s||e===y||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===v||e.$$typeof===m||e.$$typeof===l||e.$$typeof===f||e.$$typeof===d||e.$$typeof===g||e.$$typeof===x||e.$$typeof===w||e.$$typeof===b)}function xe(){var e=C.current;if(null===e)throw Error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.");return e}function we(){if(S.current){var e=E(S.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}function _e(e){return null!=e&&void 0!==(t=e.__source)?"\n\nCheck your code at "+t.fileName.replace(/^.*[\\\/]/,"")+":"+t.lineNumber+".":"";var t}le=!1;var Pe={};function Ce(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=we();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!Pe[r]){Pe[r]=!0;var n="";e&&e._owner&&e._owner!==S.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),j(e),D('Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',r,n),j(null)}}}function Se(e,t){if("object"==typeof e)if(Array.isArray(e))for(var r=0;r<e.length;r++){var n=e[r];ie(n)&&Ce(n,t)}else if(ie(e))e._store&&(e._store.validated=!0);else if(e){var o=P(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ie(a.value)&&Ce(a.value,t)}}function Oe(e){var t=e.type;if(null!=t&&"string"!=typeof t){var n,o=E(t);if("function"==typeof t)n=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==d&&t.$$typeof!==m)return;n=t.propTypes}n?(j(e),r(n,e.props,"prop",o,R.getStackAddendum),j(null)):void 0===t.PropTypes||le||(le=!0,D("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")),"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||D("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Ee(e){j(e);for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){D("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n);break}}null!==e.ref&&D("Invalid attribute `ref` supplied to `React.Fragment`."),j(null)}function Re(e,t,r){var n=ge(e);if(!n){var a="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var s,u=_e(t);a+=u||we(),null===e?s="null":Array.isArray(e)?s="array":void 0!==e&&e.$$typeof===o?(s="<"+(E(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):s=typeof e,D("React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",s,a)}var c=oe.apply(this,arguments);if(null==c)return c;if(n)for(var l=2;l<arguments.length;l++)Se(arguments[l],e);return e===i?Ee(c):Oe(c),c}var ke=!1;try{var je=Object.freeze({}),Te=new Map([[je,null]]),Me=new Set([je]);Te.set(0,0),Me.add(0)}catch(e){}var De=Re,Ie=function(e,t,r){for(var n=ae.apply(this,arguments),o=2;o<arguments.length;o++)Se(arguments[o],n.type);return Oe(n),n},$e=function(e){var t=Re.bind(null,e);return t.type=e,ke||(ke=!0,M("React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.")),Object.defineProperty(t,"type",{enumerable:!1,get:function(){return M("Factory.type is deprecated. Access the class directly before passing it to createFactory."),Object.defineProperty(this,"type",{value:e}),e}}),t},Ae={map:function(e,t,r){if(null==e)return e;var n=[];return be(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;var n=pe(null,null,t,r);ye(e,me,n),de(n)},count:function(e){return ye(e,(function(){return null}),null)},toArray:function(e){var t=[];return be(e,t,null,(function(e){return e})),t},only:function(e){if(!ie(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};t.Children=Ae,t.Component=q,t.Fragment=i,t.Profiler=c,t.PureComponent=V,t.StrictMode=s,t.Suspense=y,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T,t.cloneElement=Ie,t.createContext=function(e,t){void 0===t?t=null:null!==t&&"function"!=typeof t&&D("createContext: Expected the optional second argument to be a function. Instead received: %s",t);var r={$$typeof:f,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null};r.Provider={$$typeof:l,_context:r};var n=!1,o=!1,a={$$typeof:f,_context:r,_calculateChangedBits:r._calculateChangedBits};return Object.defineProperties(a,{Provider:{get:function(){return o||(o=!0,D("Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?")),r.Provider},set:function(e){r.Provider=e}},_currentValue:{get:function(){return r._currentValue},set:function(e){r._currentValue=e}},_currentValue2:{get:function(){return r._currentValue2},set:function(e){r._currentValue2=e}},_threadCount:{get:function(){return r._threadCount},set:function(e){r._threadCount=e}},Consumer:{get:function(){return n||(n=!0,D("Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?")),r.Consumer}}}),r.Consumer=a,r._currentRenderer=null,r._currentRenderer2=null,r},t.createElement=De,t.createFactory=$e,t.createRef=function(){var e={current:null};return Object.seal(e),e},t.forwardRef=function(e){return null!=e&&e.$$typeof===m?D("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):"function"!=typeof e?D("forwardRef requires a render function but was given %s.",null===e?"null":typeof e):0!==e.length&&2!==e.length&&D("forwardRef render functions accept exactly two parameters: props and ref. %s",1===e.length?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),null!=e&&(null==e.defaultProps&&null==e.propTypes||D("forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?")),{$$typeof:d,render:e}},t.isValidElement=ie,t.lazy=function(e){var t,r,n={$$typeof:v,_ctor:e,_status:-1,_result:null};return Object.defineProperties(n,{defaultProps:{configurable:!0,get:function(){return t},set:function(e){D("React.lazy(...): It is not supported to assign `defaultProps` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),t=e,Object.defineProperty(n,"defaultProps",{enumerable:!0})}},propTypes:{configurable:!0,get:function(){return r},set:function(e){D("React.lazy(...): It is not supported to assign `propTypes` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),r=e,Object.defineProperty(n,"propTypes",{enumerable:!0})}}}),n},t.memo=function(e,t){return ge(e)||D("memo: The first argument must be a component. Instead received: %s",null===e?"null":typeof e),{$$typeof:m,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return xe().useCallback(e,t)},t.useContext=function(e,t){var r=xe();if(void 0!==t&&D("useContext() second argument is reserved for future use in React. Passing it is not supported. You passed: %s.%s",t,"number"==typeof t&&Array.isArray(arguments[2])?"\n\nDid you call array.map(useContext)? Calling Hooks inside a loop is not supported. Learn more at https://fb.me/rules-of-hooks":""),void 0!==e._context){var n=e._context;n.Consumer===e?D("Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be removed in a future major release. Did you mean to call useContext(Context) instead?"):n.Provider===e&&D("Calling useContext(Context.Provider) is not supported. Did you mean to call useContext(Context) instead?")}return r.useContext(e,t)},t.useDebugValue=function(e,t){return xe().useDebugValue(e,t)},t.useEffect=function(e,t){return xe().useEffect(e,t)},t.useImperativeHandle=function(e,t,r){return xe().useImperativeHandle(e,t,r)},t.useLayoutEffect=function(e,t){return xe().useLayoutEffect(e,t)},t.useMemo=function(e,t){return xe().useMemo(e,t)},t.useReducer=function(e,t,r){return xe().useReducer(e,t,r)},t.useRef=function(e){return xe().useRef(e)},t.useState=function(e){return xe().useState(e)},t.version="16.13.1"}()})),Q=(K.Children,K.Component,K.Fragment,K.Profiler,K.PureComponent,K.StrictMode,K.Suspense,K.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,K.cloneElement,K.createContext,K.createElement,K.createFactory,K.createRef,K.forwardRef,K.isValidElement,K.lazy,K.memo,K.useCallback,K.useContext,K.useDebugValue,K.useEffect,K.useImperativeHandle,K.useLayoutEffect,K.useMemo,K.useReducer,K.useRef,K.useState,K.version,n((function(e){"production"===process.env.NODE_ENV?e.exports=Y:e.exports=K}))),ee=1,te=2,re=3,ne=4,oe=5,ae=6,ie=7,se=22,ue=23,ce=5,le=0,fe=1,pe=function(){function e(e){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(e)}return e.prototype.apply=function(e){var t=[1,0,0,1,0,0];e&&(t=e.split(",")),this.a=parseFloat(t[0]),this.b=parseFloat(t[1]),this.c=parseFloat(t[2]),this.d=parseFloat(t[3]),this.e=parseFloat(t[4]),this.f=parseFloat(t[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},e.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},e.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},e.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},e.prototype.rotate=function(e){var t=Math.cos(.017453292519943295*e),r=Math.sin(.017453292519943295*e);return this.transform(t,r,-r,t,0,0)},e.prototype.rotateDeg=function(e){return this.rotate(.017453292519943295*e)},e.prototype.scale=function(e,t){return this.transform(e,0,0,t,0,0)},e.prototype.scaleX=function(e){return this.transform(e,0,0,1,0,0)},e.prototype.scaleY=function(e){return this.transform(1,0,0,e,0,0)},e.prototype.skew=function(e,t){return this.transform(1,t,e,1,0,0)},e.prototype.skewX=function(e){return this.transform(1,0,e,1,0,0)},e.prototype.skewY=function(e){return this.transform(1,e,0,1,0,0)},e.prototype.setTransform=function(e,t,r,n,o,a){return this.a=e,this.b=t,this.c=r,this.d=n,this.e=o,this.f=a,this},e.prototype.translate=function(e,t){return this.transform(1,0,0,1,e,t)},e.prototype.transform=function(t,r,n,o,a,i){var s=this.a,u=this.b,c=this.c,l=this.d,f=this.e,p=this.f,d=new e;return d.a=s*t+c*r,d.b=u*t+l*r,d.c=s*n+c*o,d.d=u*n+l*o,d.e=s*a+c*i+f,d.f=u*a+l*i+p,d},e.prototype.multiply=function(t){var r=new e,n=this.a,o=this.b,a=this.c,i=this.d,s=this.e,u=this.f;return r.a=n*t.a+a*t.b,r.b=o*t.a+i*t.b,r.c=n*t.c+a*t.d,r.d=o*t.c+i*t.d,r.e=n*t.e+a*t.f+s,r.f=o*t.e+i*t.f+u,r},e.prototype.inverse=function(){var t=this.a,r=this.b,n=this.c,o=this.d,a=this.e,i=this.f,s=new e,u=t*o-r*n;return s.a=o/u,s.b=-r/u,s.c=-n/u,s.d=t/u,s.e=(n*i-o*a)/u,s.f=-(t*i-r*a)/u,s},e.prototype.interpolate=function(t,r){var n=new e;return n.a=this.a+(t.a-this.a)*r,n.b=this.b+(t.b-this.b)*r,n.c=this.c+(t.c-this.c)*r,n.d=this.d+(t.d-this.d)*r,n.e=this.e+(t.e-this.e)*r,n.f=this.f+(t.f-this.f)*r,n},e.prototype.applyToPoint=function(e,t){return{x:e*this.a+t*this.c+this.e,y:e*this.b+t*this.d+this.f}},e.prototype.applyToArray=function(e){var t,r,n=0,o=[];if("number"==typeof e[0])for(r=e.length;n<r;)t=this.applyToPoint(e[n++],e[n++]),o.push(t.x,t.y);else for(;t=e[n];n++)o.push(this.applyToPoint(t.x,t.y));return o},e.prototype.applyToTypedArray=function(e){for(var t,r=0,n=e.length,o=new Float32Array(n);r<n;)t=this.applyToPoint(e[r],e[r+1]),o[r++]=t.x,o[r++]=t.y;return o},e.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},e.prototype.isEqual=function(e){return this._isEqual(this.a,e.a)&&this._isEqual(this.b,e.b)&&this._isEqual(this.c,e.c)&&this._isEqual(this.d,e.d)&&this._isEqual(this.e,e.e)&&this._isEqual(this.f,e.f)},e.prototype._isEqual=function(e,t){return Math.abs(e-t)<1e-14},e.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(e.prototype,"trx",{get:function(){return this.e},set:function(e){this.e=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"try",{get:function(){return this.f},set:function(e){this.f=e},enumerable:!1,configurable:!0}),e}(),de=function(){function e(e,t){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=e,this.y=t}return e.prototype.matrixTransform=function(e){var t=this.x,r=this.y;this.x=t*e.a+r*e.c+e.e,this.y=t*e.b+r*e.d+e.f},e}(),ye=new(function(){function e(){var e=this;this.addAll=function(t){t&&(e.data={},t.forEach((function(t){e.data[t.id]=t})))},this.data={}}return e.prototype.add=function(e,t){this.data[e]=t},e.prototype.del=function(e){delete this.data[e]},e.prototype.get=function(e){return this.data[e]},e.prototype.delAll=function(){this.data={}},e}()),he=180/Math.PI,me=function(){function e(){}return e.normaliseVector=function(e){return Math.abs(e.x)>Math.abs(e.y)?e.x>0?{x:1,y:0}:{x:-1,y:0}:e.y>0?{x:0,y:1}:{x:0,y:-1}},e.calculateDistance=function(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))},e.calculateRotationsAngle=function(t,r,n){var o=e.calculateDistance(t,r),a=e.calculateDistance(n,r),i=e.calculateDistance(t,n),s=Math.pow(o,2)+Math.pow(a,2)-Math.pow(i,2),u=2*o*a;return Math.acos(s/u)*he},e.getParentMatrix=function(t,r){var n=ye.get(t).parent;if(!n)return r;var o=ye.get(n).matrix;return r=r?r.multiply(o):o,e.getParentMatrix(n,r)},e.getCombineMatrix=function(t){var r=new pe(ye.get(t).transform),n=e.getParentMatrix(t,r);return n||r},e.degrees=function(e){return e*he},e.rotateToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).rotate(r)).translate(-e,-t):n},e.scaleToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).scale(r,r)).translate(-e,-t):n},e.getRotationDirection=function(t,r,n){var o={x:r.x-t.x,y:r.y-t.y};return 0===(o=e.normaliseVector(o)).y?t.y-n.y<0?o.x>0?se:ue:o.x<0?se:ue:t.x-n.x>0?o.y>0?se:ue:o.y<0?se:ue},e.transfromIncrement=function(e,t,r,n){var o=r;o=r?o.multiply(n):n;var a=new de(0,0),i=new de(e,t),s=o.inverse();return a.matrixTransform(s),i.matrixTransform(s),{dx:i.x-a.x,dy:i.y-a.y}},e.coordinatesGlobalToLocal=function(e,t,r,n){var o=new de(e,t);return r&&o.matrixTransform(r.inverse()),n&&o.matrixTransform(n.inverse()),o},e.transformToViewPort=function(e,t,r,n,o){var a=new de(e,t);if(!r||!n)return a;o&&(r=r.multiply(o));var i=r.multiply(n);return a.matrixTransform(i),a},e.viewPorttoObject=function(e,t,r,n){var o=new pe;o.translate(e,t);var a=r||o;return n&&(a=a.multiply(n)),a=a.inverse(),o.multiply(a)},e.calculateRubberBandPosition=function(t,r,n,o){if(!t)return{x:0,y:0,w:0,h:0,transform:0};var a=r,i=t;(a=this.calculateTrasformBox(a,n,i,o)).x=a.x-ce,a.y=a.y-ce,a.w=a.w+2*ce,a.h=a.h+2*ce;var s=new pe,u=a.x+a.w/2,c=a.y+a.h/2;return s=e.rotateToCenter(u,c,a.angle,s),{x:a.x,y:a.y,w:a.w,h:a.h,transform:s.matrixToText()}},e.calculateTrasformBox=function(t,r,n,o){var a=0;0!=n.b&&(a=e.degrees(Math.atan2(n.b,n.a))),o&&(r=r.multiply(o));var i=t.w/2,s=t.h/2;n=e.rotateToCenter(i,s,-a,n);var u=r.multiply(n),c=new de(0,0),l=new de(t.w,t.h);return c.matrixTransform(u),l.matrixTransform(u),l.x=l.x-c.x,l.y=l.y-c.y,{x:c.x,y:c.y,w:l.x,h:l.y,angle:a}},e.moveObject=function(t,r,n){var o=e.transfromIncrement(t,r,n.viewportMtx,n.selection.matrix),a=n.selection.matrix;return{matrix:a=a.translate(-o.dx,-o.dy),box:null}},e.checkConstrains=function(t,r,n){if(!n)return!0;var o=new de(0,0),a=new de(t.w,0),i=new de(0,t.h),s=new de(t.w,t.h);return o.matrixTransform(r),!!e.isPointInBox(o,n)&&(a.matrixTransform(r),!!e.isPointInBox(a,n)&&(i.matrixTransform(r),!!e.isPointInBox(i,n)&&(s.matrixTransform(r),!!e.isPointInBox(s,n))))},e.isPointInBox=function(e,t){return!(e.x<0||e.y<0)&&!(e.x>t.w||e.y>t.h)},e.rotateObject=function(t,r,n,o,a){var i=a.box,s=i.x+i.w/2,u=i.y+i.h/2,c={x:n,y:o},l={x:t,y:r},f=e.transformToViewPort(s,u,a.viewportMtx,a.selection.matrix,a.parentMtx);console.log("rotating cx:"+f.x+" cy:"+f.y+" x:"+t+" y:"+r+" ");var p=e.getRotationDirection(c,l,f),d=e.calculateRotationsAngle(c,f,l);d=p==se?d:-d;var y=a.selection.matrix;return{matrix:y=(y=(y=y.translate(s,u)).rotate(d)).translate(-s,-u),box:null}},e.scaleObject=function(t,r,n,o){var a=o.box,i=a.x+a.w/2,s=a.y+a.h/2;n||(t=-t,r=-r);var u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=e.transfromIncrement(a.x+a.w-i,a.y+a.h-s,o.viewportMtx,o.selection.matrix),l=e.transfromIncrement(a.x+a.w-u.dx-i,a.y+a.h-u.dy-s,o.viewportMtx,o.selection.matrix);if(!(a.x+a.w-u.dx<i||a.y+a.h-u.dy<s)){var f=l.dx/c.dx,p=l.dy/c.dy,d=o.selection.matrix;return{matrix:d=(d=(d=d.translate(i,s)).scale(f,p)).translate(-i,-s),box:null}}},e.resizeObject=function(t,r,n,o){var a=o.selection.box,i=0,s=0,u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=0,l=0,f=o.selection.matrix;switch(n){case ne:i=-u.dx,s=-u.dy,c=u.dx,l=u.dy;break;case oe:s=-u.dy,c=-u.dx,l=u.dy;break;case ae:i=-u.dx,c=u.dx,l=-u.dy;break;case ie:c=-u.dx,l=-u.dy}var p={x:0,y:0,w:a.w+c,h:a.h+l};return{matrix:f=f.translate(i,s),box:p}},e}();function ve(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}ve(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var be=function(e){function r(t){var r=e.call(this,t)||this;return r.calculateCoordinates=r.calculateCoordinates.bind(r),r}return t(r,e),r.prototype.shouldComponentUpdate=function(e,t){return e.selectedItem||e.viewport.viewportTr!==this.props.viewport.viewportTr||e.viewport.selectedTr!==this.props.viewport.viewportTr||e.viewport.parentTr!==this.props.viewport.viewportTr},r.prototype.calculateCoordinates=function(){var e=me.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:e.x,y:e.y,w:e.w,h:e.h,transform:e.transform}},r.prototype.render=function(){var e=this,t=this.calculateCoordinates();return this.props.selection?Q.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(t){e.props.doRubberMouseDown(t,te)}},Q.createElement("g",{transform:"matrix("+t.transform+")"},Q.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:t.x,y:t.y,width:t.w,height:t.h}),Q.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:t.x-ce,y:t.y-ce,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ne)}}),Q.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y-ce,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,oe)}}),Q.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x-ce,y:t.y+t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ae)}}),Q.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y+t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ie)}}),Q.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x+t.w/2-ce,y:t.y+1.5*t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,re)}}))):null},r}(Q.Component),ge=function(){function e(){}return e.prototype.pan=function(e,t,r){r.e-=e,r.f-=t},e.prototype.zoom=function(e,t,r,n){n.e-=t,n.f-=r,n.a*=e,n.b*=e,n.c*=e,n.d*=e,n.e*=e,n.f*=e,n.e+=t,n.f+=r},e}(),xe=function(e){function r(t){var r=e.call(this,t)||this;r.x=0,r.y=0,r.w=100,r.h=100,r.transform="1,0,0,1,0,0",r.id="";var n=t.children?t.children.props:null,o=n.x,a=n.y,i=n.w,s=n.h;return r.x=o||0,r.y=a||0,r.w=i||100,r.h=s||100,r.transform="1,0,0,1,"+r.x+","+r.y,r.id=t.id,r}return t(r,e),r.prototype.render=function(){var e=this,t=this.props,r=t.transform,n=t.children,o=t.box;return this.transform=r||this.transform,o&&(this.w=o.w,this.h=o.h),console.log(this.transform),Q.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(t){return e.props.doObjectMouseDown(t,null,e)}},n)},r}(Q.PureComponent);ve(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var we=function(e){function n(t){var n=e.call(this,t)||this;return n.selection=null,n.draggingPositionX=0,n.draggingPositionY=0,n.mode=ee,n.addRemoveMouseListener=function(e,t){e.dragging&&!t.dragging?(document.addEventListener("mousemove",n.doMouseMove),document.addEventListener("mouseup",n.doMouseUp)):!e.dragging&&t.dragging&&(document.removeEventListener("mousemove",n.doMouseMove),document.removeEventListener("mouseup",n.doMouseUp))},n.getSelectedObjInfo=function(e){var t=e?new pe(e.transform):new pe,r=e?{id:e.id,x:0,y:0,w:e.w,h:e.h}:{id:"",x:0,y:0,w:0,h:0},o=e?n.getObjType(e):le;return{id:e?e.id:-1,item:e,matrix:t,transform:t.matrixToText(),box:r,type:o}},n.doGlobalMouseDown=function(e){0===e.button&&(n.setDraggingPosition(e),n.setState({dragging:!0}),n.mode=ee)},n.doObjectMouseDown=function(e,t,r){e.stopPropagation(),n.setDraggingPosition(e),n.setState({dragging:!0}),n.props.onSelectItem&&n.props.onSelectItem(t,r),n.selection=r;var o=n.getSelectedObjInfo(r);n.setState({dragging:!0,selection:o}),n.mode=te},n.doRubberMouseDown=function(e,t,r){e.stopPropagation(),n.setDraggingPosition(e),n.setState({dragging:!0}),n.mode=t},n.doMouseMove=function(e){if(n.state.dragging){console.log("Moving"),e.stopPropagation();var t=n.adjustCoor(e.clientX,e.clientY),r=t.x,o=t.y,a=n.draggingPositionX-r,i=n.draggingPositionY-o;switch(n.mode){case ee:n.pan(a,i);break;case te:n.updateSelectedItem(me.moveObject(a,i,n.state));break;case re:n.updateSelectedItem(me.rotateObject(r,o,n.draggingPositionX,n.draggingPositionY,n.state));break;case ne:case oe:case ae:case ie:var s=me.resizeObject(a,i,n.mode,n.state);n.updateSelectedItem(s)}n.setDraggingPosition(e)}},n.doMouseUp=function(e){n.setState({dragging:!1}),n.state.selection.type==fe&&n.props.onSelectItem&&n.props.onSelectItem(null,null),n.props.selectedItem&&n.props.onChange&&n.props.onChange(n.props.selectedItem,{transform:n.state.selection.matrix.matrixToText(),w:n.state.selection.box.w,h:n.state.selection.box.h})},n.doMouseWheel=function(e){e.preventDefault();var t=n.adjustCoor(e.clientX,e.clientY),r=t.x,o=t.y,a=e.deltaY>0?1.05:.95;n.zoom(a,r,o)},n.onDragOver=function(e){e.preventDefault()},n.onDrop=function(e){},n.addItem=function(e,t,r){var o=parseInt(e.dataTransfer.getData("type")),a=e.dataTransfer.getData("subtype"),i=parseInt(e.dataTransfer.getData("objtype")),s={name:e.dataTransfer.getData("name"),type:o,objType:i,subtype:a,transform:r},u=n.props.onAddItem;u&&u(s,t)},n.updateSelectedItem=function(e){var t=e.matrix,o=e.box?e.box:n.state.selection.box,a=r({},n.state.selection);a.matrix=t,a.transform=t.matrixToText(),a.box=o,n.setState({box:o,selection:a})},n.pan=function(e,t){n.zoomPanHelper.pan(e,t,n.state.viewportMtx),n.applyMatrix()},n.zoom=function(e,t,r){n.zoomPanHelper.zoom(e,t,r,n.state.viewportMtx),n.applyMatrix()},n.applyMatrix=function(){var e=n.state.viewportMtx.matrixToText();n.setState({viewportTr:e})},n.setDraggingPosition=function(e){var t=n.refs.container;n.draggingPositionX=e.clientX-t.offsetLeft,n.draggingPositionY=e.clientY-t.offsetTop},n.renderChildren=function(){var e=n.state.selection,t=n.props.children;return null==t?null:(console.log(t),t.map((function(t,r){console.log(t.id),console.log("s:"+e.id+" id:"+r+" ");var o=e.id==r?e.transform:null,a=e.id==r?e.box:null;return console.log(a),Q.createElement(xe,{id:r,key:r,transform:o,box:a,doObjectMouseDown:n.doObjectMouseDown},t)})))},n.zoomPanHelper=new ge,n.state={dragging:!1,viewportMtx:new pe(n.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:n.getSelectedObjInfo(null)},n.draggingPositionX=0,n.draggingPositionY=0,n.mode=ee,n}return t(n,e),n.prototype.shouldComponentUpdate=function(e,t){return t.dragging!==this.state.dragging&&this.addRemoveMouseListener(t,this.state),e.selectedItem!==this.props.selectedItem&&(t.selection=this.getSelectedObjInfo(e.selectedItem)),!0},n.prototype.adjustCoor=function(e,t){var r=this.refs.container;return{x:e-r.offsetLeft,y:t-r.offsetTop}},n.prototype.ownEvent=function(e){e.preventDefault(),e.stopPropagation()},n.prototype.getObjType=function(e){return e.hasOwnProperty("start")&&e.hasOwnProperty("output")&&e.hasOwnProperty("end")&&e.hasOwnProperty("input")?fe:le},n.prototype.render=function(){var e=this.state.viewportTr;return Q.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},Q.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},Q.createElement("div",{style:{transform:"matrix("+e+")",position:"absolute"}},this.renderChildren()),Q.createElement(be,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},n}(Q.Component);exports.ZoomPan=we; | ||
| //# sourceMappingURL=lib.cjs.js.map |
@@ -1,2 +0,1 @@ | ||
| import t from"react"; | ||
| /*! ***************************************************************************** | ||
@@ -15,3 +14,9 @@ Copyright (c) Microsoft Corporation. | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,n)};function n(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}var r=function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},o=1,i=2,a=3,s=4,c=5,u=6,p=7,l=22,h=23,f=5,d=0,m=1,y=function(){function t(t){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(t)}return t.prototype.apply=function(t){var e=[1,0,0,1,0,0];t&&(e=t.split(",")),this.a=parseFloat(e[0]),this.b=parseFloat(e[1]),this.c=parseFloat(e[2]),this.d=parseFloat(e[3]),this.e=parseFloat(e[4]),this.f=parseFloat(e[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},t.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},t.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},t.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},t.prototype.rotate=function(t){var e=Math.cos(.017453292519943295*t),n=Math.sin(.017453292519943295*t);return this.transform(e,n,-n,e,0,0)},t.prototype.rotateDeg=function(t){return this.rotate(.017453292519943295*t)},t.prototype.scale=function(t,e){return this.transform(t,0,0,e,0,0)},t.prototype.scaleX=function(t){return this.transform(t,0,0,1,0,0)},t.prototype.scaleY=function(t){return this.transform(1,0,0,t,0,0)},t.prototype.skew=function(t,e){return this.transform(1,e,t,1,0,0)},t.prototype.skewX=function(t){return this.transform(1,0,t,1,0,0)},t.prototype.skewY=function(t){return this.transform(1,t,0,1,0,0)},t.prototype.setTransform=function(t,e,n,r,o,i){return this.a=t,this.b=e,this.c=n,this.d=r,this.e=o,this.f=i,this},t.prototype.translate=function(t,e){return this.transform(1,0,0,1,t,e)},t.prototype.transform=function(e,n,r,o,i,a){var s=this.a,c=this.b,u=this.c,p=this.d,l=this.e,h=this.f,f=new t;return f.a=s*e+u*n,f.b=c*e+p*n,f.c=s*r+u*o,f.d=c*r+p*o,f.e=s*i+u*a+l,f.f=c*i+p*a+h,f},t.prototype.multiply=function(e){var n=new t,r=this.a,o=this.b,i=this.c,a=this.d,s=this.e,c=this.f;return n.a=r*e.a+i*e.b,n.b=o*e.a+a*e.b,n.c=r*e.c+i*e.d,n.d=o*e.c+a*e.d,n.e=r*e.e+i*e.f+s,n.f=o*e.e+a*e.f+c,n},t.prototype.inverse=function(){var e=this.a,n=this.b,r=this.c,o=this.d,i=this.e,a=this.f,s=new t,c=e*o-n*r;return s.a=o/c,s.b=-n/c,s.c=-r/c,s.d=e/c,s.e=(r*a-o*i)/c,s.f=-(e*a-n*i)/c,s},t.prototype.interpolate=function(e,n){var r=new t;return r.a=this.a+(e.a-this.a)*n,r.b=this.b+(e.b-this.b)*n,r.c=this.c+(e.c-this.c)*n,r.d=this.d+(e.d-this.d)*n,r.e=this.e+(e.e-this.e)*n,r.f=this.f+(e.f-this.f)*n,r},t.prototype.applyToPoint=function(t,e){return{x:t*this.a+e*this.c+this.e,y:t*this.b+e*this.d+this.f}},t.prototype.applyToArray=function(t){var e,n,r=0,o=[];if("number"==typeof t[0])for(n=t.length;r<n;)e=this.applyToPoint(t[r++],t[r++]),o.push(e.x,e.y);else for(;e=t[r];r++)o.push(this.applyToPoint(e.x,e.y));return o},t.prototype.applyToTypedArray=function(t){for(var e,n=0,r=t.length,o=new Float32Array(r);n<r;)e=this.applyToPoint(t[n],t[n+1]),o[n++]=e.x,o[n++]=e.y;return o},t.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},t.prototype.isEqual=function(t){return this._isEqual(this.a,t.a)&&this._isEqual(this.b,t.b)&&this._isEqual(this.c,t.c)&&this._isEqual(this.d,t.d)&&this._isEqual(this.e,t.e)&&this._isEqual(this.f,t.f)},t.prototype._isEqual=function(t,e){return Math.abs(t-e)<1e-14},t.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(t.prototype,"trx",{get:function(){return this.e},set:function(t){this.e=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"try",{get:function(){return this.f},set:function(t){this.f=t},enumerable:!1,configurable:!0}),t}(),x=function(){function t(t,e){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=t,this.y=e}return t.prototype.matrixTransform=function(t){var e=this.x,n=this.y;this.x=e*t.a+n*t.c+t.e,this.y=e*t.b+n*t.d+t.f},t}(),b=new(function(){function t(){var t=this;this.addAll=function(e){e&&(t.data={},e.forEach((function(e){t.data[e.id]=e})))},this.data={}}return t.prototype.add=function(t,e){this.data[t]=e},t.prototype.del=function(t){delete this.data[t]},t.prototype.get=function(t){return this.data[t]},t.prototype.delAll=function(){this.data={}},t}()),g=180/Math.PI,w=function(){function t(){}return t.normaliseVector=function(t){return Math.abs(t.x)>Math.abs(t.y)?t.x>0?{x:1,y:0}:{x:-1,y:0}:t.y>0?{x:0,y:1}:{x:0,y:-1}},t.calculateDistance=function(t,e){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))},t.calculateRotationsAngle=function(e,n,r){var o=t.calculateDistance(e,n),i=t.calculateDistance(r,n),a=t.calculateDistance(e,r),s=Math.pow(o,2)+Math.pow(i,2)-Math.pow(a,2),c=2*o*i;return Math.acos(s/c)*g},t.getParentMatrix=function(e,n){var r=b.get(e).parent;if(!r)return n;var o=b.get(r).matrix;return n=n?n.multiply(o):o,t.getParentMatrix(r,n)},t.getCombineMatrix=function(e){var n=new y(b.get(e).transform),r=t.getParentMatrix(e,n);return r||n},t.degrees=function(t){return t*g},t.rotateToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).rotate(n)).translate(-t,-e):r},t.scaleToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).scale(n,n)).translate(-t,-e):r},t.getRotationDirection=function(e,n,r){var o={x:n.x-e.x,y:n.y-e.y};return 0===(o=t.normaliseVector(o)).y?e.y-r.y<0?o.x>0?l:h:o.x<0?l:h:e.x-r.x>0?o.y>0?l:h:o.y<0?l:h},t.transfromIncrement=function(t,e,n,r){var o=n;o=n?o.multiply(r):r;var i=new x(0,0),a=new x(t,e),s=o.inverse();return i.matrixTransform(s),a.matrixTransform(s),{dx:a.x-i.x,dy:a.y-i.y}},t.coordinatesGlobalToLocal=function(t,e,n,r){var o=new x(t,e);return n&&o.matrixTransform(n.inverse()),r&&o.matrixTransform(r.inverse()),o},t.transformToViewPort=function(t,e,n,r,o){var i=new x(t,e);if(!n||!r)return i;o&&(n=n.multiply(o));var a=n.multiply(r);return i.matrixTransform(a),i},t.viewPorttoObject=function(t,e,n,r){var o=new y;o.translate(t,e);var i=n||o;return r&&(i=i.multiply(r)),i=i.inverse(),o.multiply(i)},t.calculateRubberBandPosition=function(e,n,r,o){if(!e)return{x:0,y:0,w:0,h:0,transform:0};var i=n,a=e;(i=this.calculateTrasformBox(i,r,a,o)).x=i.x-f,i.y=i.y-f,i.w=i.w+2*f,i.h=i.h+2*f;var s=new y,c=i.x+i.w/2,u=i.y+i.h/2;return s=t.rotateToCenter(c,u,i.angle,s),{x:i.x,y:i.y,w:i.w,h:i.h,transform:s.matrixToText()}},t.calculateTrasformBox=function(e,n,r,o){var i=0;0!=r.b&&(i=t.degrees(Math.atan2(r.b,r.a))),o&&(n=n.multiply(o));var a=e.w/2,s=e.h/2;r=t.rotateToCenter(a,s,-i,r);var c=n.multiply(r),u=new x(0,0),p=new x(e.w,e.h);return u.matrixTransform(c),p.matrixTransform(c),p.x=p.x-u.x,p.y=p.y-u.y,{x:u.x,y:u.y,w:p.x,h:p.y,angle:i}},t.moveObject=function(e,n,r){var o=t.transfromIncrement(e,n,r.viewportMtx,r.selection.matrix),i=r.selection.matrix;return{matrix:i=i.translate(-o.dx,-o.dy),box:null}},t.checkConstrains=function(e,n,r){if(!r)return!0;var o=new x(0,0),i=new x(e.w,0),a=new x(0,e.h),s=new x(e.w,e.h);return o.matrixTransform(n),!!t.isPointInBox(o,r)&&(i.matrixTransform(n),!!t.isPointInBox(i,r)&&(a.matrixTransform(n),!!t.isPointInBox(a,r)&&(s.matrixTransform(n),!!t.isPointInBox(s,r))))},t.isPointInBox=function(t,e){return!(t.x<0||t.y<0)&&!(t.x>e.w||t.y>e.h)},t.rotateObject=function(e,n,r,o,i){var a=i.box,s=a.x+a.w/2,c=a.y+a.h/2,u={x:r,y:o},p={x:e,y:n},h=t.transformToViewPort(s,c,i.viewportMtx,i.selection.matrix,i.parentMtx);console.log("rotating cx:"+h.x+" cy:"+h.y+" x:"+e+" y:"+n+" ");var f=t.getRotationDirection(u,p,h),d=t.calculateRotationsAngle(u,h,p);d=f==l?d:-d;var m=i.selection.matrix;return{matrix:m=(m=(m=m.translate(s,c)).rotate(d)).translate(-s,-c),box:null}},t.scaleObject=function(e,n,r,o){var i=o.box,a=i.x+i.w/2,s=i.y+i.h/2;r||(e=-e,n=-n);var c=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),u=t.transfromIncrement(i.x+i.w-a,i.y+i.h-s,o.viewportMtx,o.selection.matrix),p=t.transfromIncrement(i.x+i.w-c.dx-a,i.y+i.h-c.dy-s,o.viewportMtx,o.selection.matrix);if(!(i.x+i.w-c.dx<a||i.y+i.h-c.dy<s)){var l=p.dx/u.dx,h=p.dy/u.dy,f=o.selection.matrix;return{matrix:f=(f=(f=f.translate(a,s)).scale(l,h)).translate(-a,-s),box:null}}},t.resizeObject=function(e,n,r,o){var i=o.selection.box,a=0,l=0,h=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),f=0,d=0,m=o.selection.matrix;switch(r){case s:a=-h.dx,l=-h.dy,f=h.dx,d=h.dy;break;case c:l=-h.dy,f=-h.dx,d=h.dy;break;case u:a=-h.dx,f=h.dx,d=-h.dy;break;case p:f=-h.dx,d=-h.dy}var y={x:0,y:0,w:i.w+f,h:i.h+d};return{matrix:m=m.translate(a,l),box:y}},t}();function v(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}v(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var M=function(e){function r(t){var n=e.call(this,t)||this;return n.calculateCoordinates=n.calculateCoordinates.bind(n),n}return n(r,e),r.prototype.shouldComponentUpdate=function(t,e){return t.selectedItem||t.viewport.viewportTr!==this.props.viewport.viewportTr||t.viewport.selectedTr!==this.props.viewport.viewportTr||t.viewport.parentTr!==this.props.viewport.viewportTr},r.prototype.calculateCoordinates=function(){var t=w.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:t.x,y:t.y,w:t.w,h:t.h,transform:t.transform}},r.prototype.render=function(){var e=this,n=this.calculateCoordinates();return this.props.selection?t.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(t){e.props.doRubberMouseDown(t,i)}},t.createElement("g",{transform:"matrix("+n.transform+")"},t.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:n.x,y:n.y,width:n.w,height:n.h}),t.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:n.x-f,y:n.y-f,width:f,height:f,onMouseDown:function(t){e.props.doRubberMouseDown(t,s)}}),t.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:n.x+n.w,y:n.y-f,width:f,height:f,onMouseDown:function(t){e.props.doRubberMouseDown(t,c)}}),t.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:n.x-f,y:n.y+n.h,width:f,height:f,onMouseDown:function(t){e.props.doRubberMouseDown(t,u)}}),t.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:n.x+n.w,y:n.y+n.h,width:f,height:f,onMouseDown:function(t){e.props.doRubberMouseDown(t,p)}}),t.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:n.x+n.w/2-f,y:n.y+1.5*n.h,width:f,height:f,onMouseDown:function(t){e.props.doRubberMouseDown(t,a)}}))):null},r}(t.Component),T=function(){function t(){}return t.prototype.pan=function(t,e,n){n.e-=t,n.f-=e},t.prototype.zoom=function(t,e,n,r){r.e-=e,r.f-=n,r.a*=t,r.b*=t,r.c*=t,r.d*=t,r.e*=t,r.f*=t,r.e+=e,r.f+=n},t}(),P=function(e){function r(t){var n=e.call(this,t)||this;n.x=0,n.y=0,n.w=100,n.h=100,n.transform="1,0,0,1,0,0",n.id="";var r=t.children?t.children.props:null,o=r.x,i=r.y,a=r.w,s=r.h;return n.x=o||0,n.y=i||0,n.w=a||100,n.h=s||100,n.transform="1,0,0,1,"+n.x+","+n.y,n.id=t.id,n}return n(r,e),r.prototype.render=function(){var e=this,n=this.props,r=n.transform,o=n.children,i=n.box;return this.transform=r||this.transform,i&&(this.w=i.w,this.h=i.h),console.log(this.transform),t.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(t){return e.props.doObjectMouseDown(t,null,e)}},o)},r}(t.PureComponent);v(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var D=function(e){function l(n){var l=e.call(this,n)||this;return l.selection=null,l.draggingPositionX=0,l.draggingPositionY=0,l.mode=o,l.addRemoveMouseListener=function(t,e){t.dragging&&!e.dragging?(document.addEventListener("mousemove",l.doMouseMove),document.addEventListener("mouseup",l.doMouseUp)):!t.dragging&&e.dragging&&(document.removeEventListener("mousemove",l.doMouseMove),document.removeEventListener("mouseup",l.doMouseUp))},l.getSelectedObjInfo=function(t){var e=t?new y(t.transform):new y,n=t?{id:t.id,x:0,y:0,w:t.w,h:t.h}:{id:"",x:0,y:0,w:0,h:0},r=t?l.getObjType(t):d;return{id:t?t.id:-1,item:t,matrix:e,transform:e.matrixToText(),box:n,type:r}},l.doGlobalMouseDown=function(t){0===t.button&&(l.setDraggingPosition(t),l.setState({dragging:!0}),l.mode=o)},l.doObjectMouseDown=function(t,e,n){t.stopPropagation(),l.setDraggingPosition(t),l.setState({dragging:!0}),l.props.onSelectItem&&l.props.onSelectItem(e,n),l.selection=n;var r=l.getSelectedObjInfo(n);l.setState({dragging:!0,selection:r}),l.mode=i},l.doRubberMouseDown=function(t,e,n){t.stopPropagation(),l.setDraggingPosition(t),l.setState({dragging:!0}),l.mode=e},l.doMouseMove=function(t){if(l.state.dragging){console.log("Moving"),t.stopPropagation();var e=l.adjustCoor(t.clientX,t.clientY),n=e.x,r=e.y,h=l.draggingPositionX-n,f=l.draggingPositionY-r;switch(l.mode){case o:l.pan(h,f);break;case i:l.updateSelectedItem(w.moveObject(h,f,l.state));break;case a:l.updateSelectedItem(w.rotateObject(n,r,l.draggingPositionX,l.draggingPositionY,l.state));break;case s:case c:case u:case p:var d=w.resizeObject(h,f,l.mode,l.state);l.updateSelectedItem(d)}l.setDraggingPosition(t)}},l.doMouseUp=function(t){l.setState({dragging:!1}),l.state.selection.type==m&&l.props.onSelectItem&&l.props.onSelectItem(null,null),l.props.selectedItem&&l.props.onChange&&l.props.onChange(l.props.selectedItem,{transform:l.state.selection.matrix.matrixToText(),w:l.state.selection.box.w,h:l.state.selection.box.h})},l.doMouseWheel=function(t){t.preventDefault();var e=l.adjustCoor(t.clientX,t.clientY),n=e.x,r=e.y,o=t.deltaY>0?1.05:.95;l.zoom(o,n,r)},l.onDragOver=function(t){t.preventDefault()},l.onDrop=function(t){},l.addItem=function(t,e,n){var r=parseInt(t.dataTransfer.getData("type")),o=t.dataTransfer.getData("subtype"),i=parseInt(t.dataTransfer.getData("objtype")),a={name:t.dataTransfer.getData("name"),type:r,objType:i,subtype:o,transform:n},s=l.props.onAddItem;s&&s(a,e)},l.updateSelectedItem=function(t){var e=t.matrix,n=t.box?t.box:l.state.selection.box,o=r({},l.state.selection);o.matrix=e,o.transform=e.matrixToText(),o.box=n,l.setState({box:n,selection:o})},l.pan=function(t,e){l.zoomPanHelper.pan(t,e,l.state.viewportMtx),l.applyMatrix()},l.zoom=function(t,e,n){l.zoomPanHelper.zoom(t,e,n,l.state.viewportMtx),l.applyMatrix()},l.applyMatrix=function(){var t=l.state.viewportMtx.matrixToText();l.setState({viewportTr:t})},l.setDraggingPosition=function(t){var e=l.refs.container;l.draggingPositionX=t.clientX-e.offsetLeft,l.draggingPositionY=t.clientY-e.offsetTop},l.renderChildren=function(){var e=l.state.selection,n=l.props.children;return null==n?null:(console.log(n),n.map((function(n,r){console.log(n.id),console.log("s:"+e.id+" id:"+r+" ");var o=e.id==r?e.transform:null,i=e.id==r?e.box:null;return console.log(i),t.createElement(P,{id:r,key:r,transform:o,box:i,doObjectMouseDown:l.doObjectMouseDown},n)})))},l.zoomPanHelper=new T,l.state={dragging:!1,viewportMtx:new y(l.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:l.getSelectedObjInfo(null)},l.draggingPositionX=0,l.draggingPositionY=0,l.mode=o,l}return n(l,e),l.prototype.shouldComponentUpdate=function(t,e){return e.dragging!==this.state.dragging&&this.addRemoveMouseListener(e,this.state),t.selectedItem!==this.props.selectedItem&&(e.selection=this.getSelectedObjInfo(t.selectedItem)),!0},l.prototype.adjustCoor=function(t,e){var n=this.refs.container;return{x:t-n.offsetLeft,y:e-n.offsetTop}},l.prototype.ownEvent=function(t){t.preventDefault(),t.stopPropagation()},l.prototype.getObjType=function(t){return t.hasOwnProperty("start")&&t.hasOwnProperty("output")&&t.hasOwnProperty("end")&&t.hasOwnProperty("input")?m:d},l.prototype.render=function(){var e=this.state.viewportTr;return t.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},t.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},t.createElement("div",{style:{transform:"matrix("+e+")",position:"absolute"}},this.renderChildren()),t.createElement(M,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},l}(t.Component);export{D as ZoomPan}; | ||
| ***************************************************************************** */ | ||
| var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};function t(t,r){function n(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var r=function(){return(r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function n(e,t){return e(t={exports:{}},t.exports),t.exports | ||
| /* | ||
| object-assign | ||
| (c) Sindre Sorhus | ||
| @license MIT | ||
| */}var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;function s(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var u=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,u=s(e),c=1;c<arguments.length;c++){for(var l in r=Object(arguments[c]))a.call(r,l)&&(u[l]=r[l]);if(o){n=o(r);for(var f=0;f<n.length;f++)i.call(r,n[f])&&(u[n[f]]=r[n[f]])}}return u},c="function"==typeof Symbol&&Symbol.for,l=c?Symbol.for("react.element"):60103,f=c?Symbol.for("react.portal"):60106,p=c?Symbol.for("react.fragment"):60107,d=c?Symbol.for("react.strict_mode"):60108,y=c?Symbol.for("react.profiler"):60114,h=c?Symbol.for("react.provider"):60109,m=c?Symbol.for("react.context"):60110,v=c?Symbol.for("react.forward_ref"):60112,b=c?Symbol.for("react.suspense"):60113,g=c?Symbol.for("react.memo"):60115,x=c?Symbol.for("react.lazy"):60116,w="function"==typeof Symbol&&Symbol.iterator;function _(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var C={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},P={};function S(e,t,r){this.props=e,this.context=t,this.refs=P,this.updater=r||C}function O(){}function E(e,t,r){this.props=e,this.context=t,this.refs=P,this.updater=r||C}S.prototype.isReactComponent={},S.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(_(85));this.updater.enqueueSetState(this,e,t,"setState")},S.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},O.prototype=S.prototype;var R=E.prototype=new O;R.constructor=E,u(R,S.prototype),R.isPureReactComponent=!0;var k={current:null},j=Object.prototype.hasOwnProperty,T={key:!0,ref:!0,__self:!0,__source:!0};function M(e,t,r){var n,o={},a=null,i=null;if(null!=t)for(n in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(a=""+t.key),t)j.call(t,n)&&!T.hasOwnProperty(n)&&(o[n]=t[n]);var s=arguments.length-2;if(1===s)o.children=r;else if(1<s){for(var u=Array(s),c=0;c<s;c++)u[c]=arguments[c+2];o.children=u}if(e&&e.defaultProps)for(n in s=e.defaultProps)void 0===o[n]&&(o[n]=s[n]);return{$$typeof:l,type:e,key:a,ref:i,props:o,_owner:k.current}}function D(e){return"object"==typeof e&&null!==e&&e.$$typeof===l}var I=/\/+/g,$=[];function A(e,t,r,n){if($.length){var o=$.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function N(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>$.length&&$.push(e)}function B(e,t,r){return null==e?0:function e(t,r,n,o){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var i=!1;if(null===t)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(t.$$typeof){case l:case f:i=!0}}if(i)return n(o,t,""===r?"."+q(t,0):r),1;if(i=0,r=""===r?".":r+":",Array.isArray(t))for(var s=0;s<t.length;s++){var u=r+q(a=t[s],s);i+=e(a,u,n,o)}else if(null===t||"object"!=typeof t?u=null:u="function"==typeof(u=w&&t[w]||t["@@iterator"])?u:null,"function"==typeof u)for(t=u.call(t),s=0;!(a=t.next()).done;)i+=e(a=a.value,u=r+q(a,s++),n,o);else if("object"===a)throw n=""+t,Error(_(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return i}(e,"",t,r)}function q(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function F(e,t){e.func.call(e.context,t,e.count++)}function L(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?U(e,n,r,(function(e){return e})):null!=e&&(D(e)&&(e=function(e,t){return{$$typeof:l,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(I,"$&/")+"/")+r)),n.push(e))}function U(e,t,r,n,o){var a="";null!=r&&(a=(""+r).replace(I,"$&/")+"/"),B(e,L,t=A(t,a,n,o)),N(t)}var z={current:null};function V(){var e=z.current;if(null===e)throw Error(_(321));return e}var Y={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return U(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;B(e,F,t=A(null,null,t,r)),N(t)},count:function(e){return B(e,(function(){return null}),null)},toArray:function(e){var t=[];return U(e,t,null,(function(e){return e})),t},only:function(e){if(!D(e))throw Error(_(143));return e}},Component:S,Fragment:p,Profiler:y,PureComponent:E,StrictMode:d,Suspense:b,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:z,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:k,IsSomeRendererActing:{current:!1},assign:u},cloneElement:function(e,t,r){if(null==e)throw Error(_(267,e));var n=u({},e.props),o=e.key,a=e.ref,i=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,i=k.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(c in t)j.call(t,c)&&!T.hasOwnProperty(c)&&(n[c]=void 0===t[c]&&void 0!==s?s[c]:t[c])}var c=arguments.length-2;if(1===c)n.children=r;else if(1<c){s=Array(c);for(var f=0;f<c;f++)s[f]=arguments[f+2];n.children=s}return{$$typeof:l,type:e.type,key:o,ref:a,props:n,_owner:i}},createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:m,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:h,_context:e},e.Consumer=e},createElement:M,createFactory:function(e){var t=M.bind(null,e);return t.type=e,t},createRef:function(){return{current:null}},forwardRef:function(e){return{$$typeof:v,render:e}},isValidElement:D,lazy:function(e){return{$$typeof:x,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:g,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return V().useCallback(e,t)},useContext:function(e,t){return V().useContext(e,t)},useDebugValue:function(){},useEffect:function(e,t){return V().useEffect(e,t)},useImperativeHandle:function(e,t,r){return V().useImperativeHandle(e,t,r)},useLayoutEffect:function(e,t){return V().useLayoutEffect(e,t)},useMemo:function(e,t){return V().useMemo(e,t)},useReducer:function(e,t,r){return V().useReducer(e,t,r)},useRef:function(e){return V().useRef(e)},useState:function(e){return V().useState(e)},version:"16.13.1"},H=function(){};if("production"!==process.env.NODE_ENV){var W="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",X={},G=Function.call.bind(Object.prototype.hasOwnProperty);H=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function J(e,t,r,n,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(G(e,a)){var i;try{if("function"!=typeof e[a]){var s=Error((n||"React class")+": "+r+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.");throw s.name="Invariant Violation",s}i=e[a](t,a,n,r,null,W)}catch(e){i=e}if(!i||i instanceof Error||H((n||"React class")+": type specification of "+r+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in X)){X[i.message]=!0;var u=o?o():"";H("Failed "+r+" type: "+i.message+(null!=u?u:""))}}}J.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(X={})};var K=J,Q=n((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e=u,r=K,n="function"==typeof Symbol&&Symbol.for,o=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,i=n?Symbol.for("react.fragment"):60107,s=n?Symbol.for("react.strict_mode"):60108,c=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,f=n?Symbol.for("react.context"):60110,p=n?Symbol.for("react.concurrent_mode"):60111,d=n?Symbol.for("react.forward_ref"):60112,y=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,v=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,g=n?Symbol.for("react.fundamental"):60117,x=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119,_="function"==typeof Symbol&&Symbol.iterator;function C(e){if(null===e||"object"!=typeof e)return null;var t=_&&e[_]||e["@@iterator"];return"function"==typeof t?t:null}var P={current:null},S={current:null},O=/^(.*)[\\\/]/;function E(e){if(null==e)return null;if("number"==typeof e.tag&&D("Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case i:return"Fragment";case a:return"Portal";case c:return"Profiler";case s:return"StrictMode";case y:return"Suspense";case h:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case f:return"Context.Consumer";case l:return"Context.Provider";case d:return n=e,o=e.render,u="ForwardRef",p=o.displayName||o.name||"",n.displayName||(""!==p?u+"("+p+")":u);case m:return E(e.type);case b:return E(e.render);case v:var t=1===(r=e)._status?r._result:null;if(t)return E(t)}var r,n,o,u,p;return null}var R={},k=null;function j(e){k=e}R.getCurrentStack=null,R.getStackAddendum=function(){var e="";if(k){var t=E(k.type),r=k._owner;e+=function(e,t,r){var n="";if(t){var o=t.fileName,a=o.replace(O,"");if(/^index\./.test(a)){var i=o.match(O);if(i){var s=i[1];if(s)a=s.replace(O,"")+"/"+a}}n=" (at "+a+":"+t.lineNumber+")"}else r&&(n=" (created by "+r+")");return"\n in "+(e||"Unknown")+n}(t,k._source,r&&E(r.type))}var n=R.getCurrentStack;return n&&(e+=n()||""),e};var T={ReactCurrentDispatcher:P,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:e};function M(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("warn",e,r)}function D(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("error",e,r)}function I(e,t,r){if(!(r.length>0&&"string"==typeof r[r.length-1]&&0===r[r.length-1].indexOf("\n in"))){var n=T.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(t+="%s",r=r.concat([n]))}var o=r.map((function(e){return""+e}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o);try{var a=0,i="Warning: "+t.replace(/%s/g,(function(){return r[a++]}));throw new Error(i)}catch(e){}}e(T,{ReactDebugCurrentFrame:R,ReactComponentTreeHook:{}});var $={};function A(e,t){var r=e.constructor,n=r&&(r.displayName||r.name)||"ReactClass",o=n+"."+t;$[o]||(D("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",t,n),$[o]=!0)}var N={isMounted:function(e){return!1},enqueueForceUpdate:function(e,t,r){A(e,"forceUpdate")},enqueueReplaceState:function(e,t,r,n){A(e,"replaceState")},enqueueSetState:function(e,t,r,n){A(e,"setState")}},B={};function q(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}Object.freeze(B),q.prototype.isReactComponent={},q.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},q.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};var F={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]},L=function(e,t){Object.defineProperty(q.prototype,e,{get:function(){M("%s(...) is deprecated in plain JavaScript React classes. %s",t[0],t[1])}})};for(var U in F)F.hasOwnProperty(U)&&L(U,F[U]);function z(){}function V(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}z.prototype=q.prototype;var Y=V.prototype=new z;Y.constructor=V,e(Y,q.prototype),Y.isPureReactComponent=!0;var H,W,X,G=Object.prototype.hasOwnProperty,J={key:!0,ref:!0,__self:!0,__source:!0};function Q(e){if(G.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}function Z(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}function ee(e,t){var r=function(){H||(H=!0,D("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function te(e,t){var r=function(){W||(W=!0,D("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}function re(e){if("string"==typeof e.ref&&S.current&&e.__self&&S.current.stateNode!==e.__self){var t=E(S.current.type);X[t]||(D('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref',E(S.current.type),e.ref),X[t]=!0)}}X={};var ne=function(e,t,r,n,a,i,s){var u={$$typeof:o,type:e,key:t,ref:r,props:s,_owner:i,_store:{}};return Object.defineProperty(u._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(u,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(u,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u};function oe(e,t,r){var n,o={},a=null,i=null,s=null,u=null;if(null!=t)for(n in Q(t)&&(i=t.ref,re(t)),Z(t)&&(a=""+t.key),s=void 0===t.__self?null:t.__self,u=void 0===t.__source?null:t.__source,t)G.call(t,n)&&!J.hasOwnProperty(n)&&(o[n]=t[n]);var c=arguments.length-2;if(1===c)o.children=r;else if(c>1){for(var l=Array(c),f=0;f<c;f++)l[f]=arguments[f+2];Object.freeze&&Object.freeze(l),o.children=l}if(e&&e.defaultProps){var p=e.defaultProps;for(n in p)void 0===o[n]&&(o[n]=p[n])}if(a||i){var d="function"==typeof e?e.displayName||e.name||"Unknown":e;a&&ee(o,d),i&&te(o,d)}return ne(e,a,i,s,u,S.current,o)}function ae(t,r,n){if(null==t)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+t+".");var o,a,i=e({},t.props),s=t.key,u=t.ref,c=t._self,l=t._source,f=t._owner;if(null!=r)for(o in Q(r)&&(u=r.ref,f=S.current),Z(r)&&(s=""+r.key),t.type&&t.type.defaultProps&&(a=t.type.defaultProps),r)G.call(r,o)&&!J.hasOwnProperty(o)&&(void 0===r[o]&&void 0!==a?i[o]=a[o]:i[o]=r[o]);var p=arguments.length-2;if(1===p)i.children=n;else if(p>1){for(var d=Array(p),y=0;y<p;y++)d[y]=arguments[y+2];i.children=d}return ne(t.type,s,u,c,l,f,i)}function ie(e){return"object"==typeof e&&null!==e&&e.$$typeof===o}var se=!1,ue=/\/+/g;function ce(e){return(""+e).replace(ue,"$&/")}var le,fe=[];function pe(e,t,r,n){if(fe.length){var o=fe.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function de(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,fe.length<10&&fe.push(e)}function ye(e,t,r){return null==e?0:function e(t,r,n,i){var s=typeof t;"undefined"!==s&&"boolean"!==s||(t=null);var u,c=!1;if(null===t)c=!0;else switch(s){case"string":case"number":c=!0;break;case"object":switch(t.$$typeof){case o:case a:c=!0}}if(c)return n(i,t,""===r?"."+he(t,0):r),1;var l=0,f=""===r?".":r+":";if(Array.isArray(t))for(var p=0;p<t.length;p++)l+=e(u=t[p],f+he(u,p),n,i);else{var d=C(t);if("function"==typeof d){d===t.entries&&(se||M("Using Maps as children is deprecated and will be removed in a future major release. Consider converting children to an array of keyed ReactElements instead."),se=!0);for(var y,h=d.call(t),m=0;!(y=h.next()).done;)l+=e(u=y.value,f+he(u,m++),n,i)}else if("object"===s){var v;v=" If you meant to render a collection of children, use an array instead."+R.getStackAddendum();var b=""+t;throw Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(t).join(", ")+"}":b)+")."+v)}}return l}(e,"",t,r)}function he(e,t){return"object"==typeof e&&null!==e&&null!=e.key?(r=e.key,n={"=":"=0",":":"=2"},"$"+(""+r).replace(/[=:]/g,(function(e){return n[e]}))):t.toString(36);var r,n}function me(e,t,r){var n=e.func,o=e.context;n.call(o,t,e.count++)}function ve(e,t,r){var n,o,a=e.result,i=e.keyPrefix,s=e.func,u=e.context,c=s.call(u,t,e.count++);Array.isArray(c)?be(c,a,r,(function(e){return e})):null!=c&&(ie(c)&&(n=c,o=i+(!c.key||t&&t.key===c.key?"":ce(c.key)+"/")+r,c=ne(n.type,o,n.ref,n._self,n._source,n._owner,n.props)),a.push(c))}function be(e,t,r,n,o){var a="";null!=r&&(a=ce(r)+"/");var i=pe(t,a,n,o);ye(e,ve,i),de(i)}function ge(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===c||e===s||e===y||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===v||e.$$typeof===m||e.$$typeof===l||e.$$typeof===f||e.$$typeof===d||e.$$typeof===g||e.$$typeof===x||e.$$typeof===w||e.$$typeof===b)}function xe(){var e=P.current;if(null===e)throw Error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.");return e}function we(){if(S.current){var e=E(S.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}function _e(e){return null!=e&&void 0!==(t=e.__source)?"\n\nCheck your code at "+t.fileName.replace(/^.*[\\\/]/,"")+":"+t.lineNumber+".":"";var t}le=!1;var Ce={};function Pe(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=we();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!Ce[r]){Ce[r]=!0;var n="";e&&e._owner&&e._owner!==S.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),j(e),D('Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',r,n),j(null)}}}function Se(e,t){if("object"==typeof e)if(Array.isArray(e))for(var r=0;r<e.length;r++){var n=e[r];ie(n)&&Pe(n,t)}else if(ie(e))e._store&&(e._store.validated=!0);else if(e){var o=C(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ie(a.value)&&Pe(a.value,t)}}function Oe(e){var t=e.type;if(null!=t&&"string"!=typeof t){var n,o=E(t);if("function"==typeof t)n=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==d&&t.$$typeof!==m)return;n=t.propTypes}n?(j(e),r(n,e.props,"prop",o,R.getStackAddendum),j(null)):void 0===t.PropTypes||le||(le=!0,D("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")),"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||D("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Ee(e){j(e);for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){D("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n);break}}null!==e.ref&&D("Invalid attribute `ref` supplied to `React.Fragment`."),j(null)}function Re(e,t,r){var n=ge(e);if(!n){var a="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var s,u=_e(t);a+=u||we(),null===e?s="null":Array.isArray(e)?s="array":void 0!==e&&e.$$typeof===o?(s="<"+(E(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):s=typeof e,D("React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",s,a)}var c=oe.apply(this,arguments);if(null==c)return c;if(n)for(var l=2;l<arguments.length;l++)Se(arguments[l],e);return e===i?Ee(c):Oe(c),c}var ke=!1;try{var je=Object.freeze({}),Te=new Map([[je,null]]),Me=new Set([je]);Te.set(0,0),Me.add(0)}catch(e){}var De=Re,Ie=function(e,t,r){for(var n=ae.apply(this,arguments),o=2;o<arguments.length;o++)Se(arguments[o],n.type);return Oe(n),n},$e=function(e){var t=Re.bind(null,e);return t.type=e,ke||(ke=!0,M("React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.")),Object.defineProperty(t,"type",{enumerable:!1,get:function(){return M("Factory.type is deprecated. Access the class directly before passing it to createFactory."),Object.defineProperty(this,"type",{value:e}),e}}),t},Ae={map:function(e,t,r){if(null==e)return e;var n=[];return be(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;var n=pe(null,null,t,r);ye(e,me,n),de(n)},count:function(e){return ye(e,(function(){return null}),null)},toArray:function(e){var t=[];return be(e,t,null,(function(e){return e})),t},only:function(e){if(!ie(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};t.Children=Ae,t.Component=q,t.Fragment=i,t.Profiler=c,t.PureComponent=V,t.StrictMode=s,t.Suspense=y,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T,t.cloneElement=Ie,t.createContext=function(e,t){void 0===t?t=null:null!==t&&"function"!=typeof t&&D("createContext: Expected the optional second argument to be a function. Instead received: %s",t);var r={$$typeof:f,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null};r.Provider={$$typeof:l,_context:r};var n=!1,o=!1,a={$$typeof:f,_context:r,_calculateChangedBits:r._calculateChangedBits};return Object.defineProperties(a,{Provider:{get:function(){return o||(o=!0,D("Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?")),r.Provider},set:function(e){r.Provider=e}},_currentValue:{get:function(){return r._currentValue},set:function(e){r._currentValue=e}},_currentValue2:{get:function(){return r._currentValue2},set:function(e){r._currentValue2=e}},_threadCount:{get:function(){return r._threadCount},set:function(e){r._threadCount=e}},Consumer:{get:function(){return n||(n=!0,D("Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?")),r.Consumer}}}),r.Consumer=a,r._currentRenderer=null,r._currentRenderer2=null,r},t.createElement=De,t.createFactory=$e,t.createRef=function(){var e={current:null};return Object.seal(e),e},t.forwardRef=function(e){return null!=e&&e.$$typeof===m?D("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):"function"!=typeof e?D("forwardRef requires a render function but was given %s.",null===e?"null":typeof e):0!==e.length&&2!==e.length&&D("forwardRef render functions accept exactly two parameters: props and ref. %s",1===e.length?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),null!=e&&(null==e.defaultProps&&null==e.propTypes||D("forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?")),{$$typeof:d,render:e}},t.isValidElement=ie,t.lazy=function(e){var t,r,n={$$typeof:v,_ctor:e,_status:-1,_result:null};return Object.defineProperties(n,{defaultProps:{configurable:!0,get:function(){return t},set:function(e){D("React.lazy(...): It is not supported to assign `defaultProps` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),t=e,Object.defineProperty(n,"defaultProps",{enumerable:!0})}},propTypes:{configurable:!0,get:function(){return r},set:function(e){D("React.lazy(...): It is not supported to assign `propTypes` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),r=e,Object.defineProperty(n,"propTypes",{enumerable:!0})}}}),n},t.memo=function(e,t){return ge(e)||D("memo: The first argument must be a component. Instead received: %s",null===e?"null":typeof e),{$$typeof:m,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return xe().useCallback(e,t)},t.useContext=function(e,t){var r=xe();if(void 0!==t&&D("useContext() second argument is reserved for future use in React. Passing it is not supported. You passed: %s.%s",t,"number"==typeof t&&Array.isArray(arguments[2])?"\n\nDid you call array.map(useContext)? Calling Hooks inside a loop is not supported. Learn more at https://fb.me/rules-of-hooks":""),void 0!==e._context){var n=e._context;n.Consumer===e?D("Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be removed in a future major release. Did you mean to call useContext(Context) instead?"):n.Provider===e&&D("Calling useContext(Context.Provider) is not supported. Did you mean to call useContext(Context) instead?")}return r.useContext(e,t)},t.useDebugValue=function(e,t){return xe().useDebugValue(e,t)},t.useEffect=function(e,t){return xe().useEffect(e,t)},t.useImperativeHandle=function(e,t,r){return xe().useImperativeHandle(e,t,r)},t.useLayoutEffect=function(e,t){return xe().useLayoutEffect(e,t)},t.useMemo=function(e,t){return xe().useMemo(e,t)},t.useReducer=function(e,t,r){return xe().useReducer(e,t,r)},t.useRef=function(e){return xe().useRef(e)},t.useState=function(e){return xe().useState(e)},t.version="16.13.1"}()})),Z=(Q.Children,Q.Component,Q.Fragment,Q.Profiler,Q.PureComponent,Q.StrictMode,Q.Suspense,Q.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,Q.cloneElement,Q.createContext,Q.createElement,Q.createFactory,Q.createRef,Q.forwardRef,Q.isValidElement,Q.lazy,Q.memo,Q.useCallback,Q.useContext,Q.useDebugValue,Q.useEffect,Q.useImperativeHandle,Q.useLayoutEffect,Q.useMemo,Q.useReducer,Q.useRef,Q.useState,Q.version,n((function(e){"production"===process.env.NODE_ENV?e.exports=Y:e.exports=Q}))),ee=1,te=2,re=3,ne=4,oe=5,ae=6,ie=7,se=22,ue=23,ce=5,le=0,fe=1,pe=function(){function e(e){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(e)}return e.prototype.apply=function(e){var t=[1,0,0,1,0,0];e&&(t=e.split(",")),this.a=parseFloat(t[0]),this.b=parseFloat(t[1]),this.c=parseFloat(t[2]),this.d=parseFloat(t[3]),this.e=parseFloat(t[4]),this.f=parseFloat(t[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},e.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},e.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},e.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},e.prototype.rotate=function(e){var t=Math.cos(.017453292519943295*e),r=Math.sin(.017453292519943295*e);return this.transform(t,r,-r,t,0,0)},e.prototype.rotateDeg=function(e){return this.rotate(.017453292519943295*e)},e.prototype.scale=function(e,t){return this.transform(e,0,0,t,0,0)},e.prototype.scaleX=function(e){return this.transform(e,0,0,1,0,0)},e.prototype.scaleY=function(e){return this.transform(1,0,0,e,0,0)},e.prototype.skew=function(e,t){return this.transform(1,t,e,1,0,0)},e.prototype.skewX=function(e){return this.transform(1,0,e,1,0,0)},e.prototype.skewY=function(e){return this.transform(1,e,0,1,0,0)},e.prototype.setTransform=function(e,t,r,n,o,a){return this.a=e,this.b=t,this.c=r,this.d=n,this.e=o,this.f=a,this},e.prototype.translate=function(e,t){return this.transform(1,0,0,1,e,t)},e.prototype.transform=function(t,r,n,o,a,i){var s=this.a,u=this.b,c=this.c,l=this.d,f=this.e,p=this.f,d=new e;return d.a=s*t+c*r,d.b=u*t+l*r,d.c=s*n+c*o,d.d=u*n+l*o,d.e=s*a+c*i+f,d.f=u*a+l*i+p,d},e.prototype.multiply=function(t){var r=new e,n=this.a,o=this.b,a=this.c,i=this.d,s=this.e,u=this.f;return r.a=n*t.a+a*t.b,r.b=o*t.a+i*t.b,r.c=n*t.c+a*t.d,r.d=o*t.c+i*t.d,r.e=n*t.e+a*t.f+s,r.f=o*t.e+i*t.f+u,r},e.prototype.inverse=function(){var t=this.a,r=this.b,n=this.c,o=this.d,a=this.e,i=this.f,s=new e,u=t*o-r*n;return s.a=o/u,s.b=-r/u,s.c=-n/u,s.d=t/u,s.e=(n*i-o*a)/u,s.f=-(t*i-r*a)/u,s},e.prototype.interpolate=function(t,r){var n=new e;return n.a=this.a+(t.a-this.a)*r,n.b=this.b+(t.b-this.b)*r,n.c=this.c+(t.c-this.c)*r,n.d=this.d+(t.d-this.d)*r,n.e=this.e+(t.e-this.e)*r,n.f=this.f+(t.f-this.f)*r,n},e.prototype.applyToPoint=function(e,t){return{x:e*this.a+t*this.c+this.e,y:e*this.b+t*this.d+this.f}},e.prototype.applyToArray=function(e){var t,r,n=0,o=[];if("number"==typeof e[0])for(r=e.length;n<r;)t=this.applyToPoint(e[n++],e[n++]),o.push(t.x,t.y);else for(;t=e[n];n++)o.push(this.applyToPoint(t.x,t.y));return o},e.prototype.applyToTypedArray=function(e){for(var t,r=0,n=e.length,o=new Float32Array(n);r<n;)t=this.applyToPoint(e[r],e[r+1]),o[r++]=t.x,o[r++]=t.y;return o},e.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},e.prototype.isEqual=function(e){return this._isEqual(this.a,e.a)&&this._isEqual(this.b,e.b)&&this._isEqual(this.c,e.c)&&this._isEqual(this.d,e.d)&&this._isEqual(this.e,e.e)&&this._isEqual(this.f,e.f)},e.prototype._isEqual=function(e,t){return Math.abs(e-t)<1e-14},e.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(e.prototype,"trx",{get:function(){return this.e},set:function(e){this.e=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"try",{get:function(){return this.f},set:function(e){this.f=e},enumerable:!1,configurable:!0}),e}(),de=function(){function e(e,t){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=e,this.y=t}return e.prototype.matrixTransform=function(e){var t=this.x,r=this.y;this.x=t*e.a+r*e.c+e.e,this.y=t*e.b+r*e.d+e.f},e}(),ye=new(function(){function e(){var e=this;this.addAll=function(t){t&&(e.data={},t.forEach((function(t){e.data[t.id]=t})))},this.data={}}return e.prototype.add=function(e,t){this.data[e]=t},e.prototype.del=function(e){delete this.data[e]},e.prototype.get=function(e){return this.data[e]},e.prototype.delAll=function(){this.data={}},e}()),he=180/Math.PI,me=function(){function e(){}return e.normaliseVector=function(e){return Math.abs(e.x)>Math.abs(e.y)?e.x>0?{x:1,y:0}:{x:-1,y:0}:e.y>0?{x:0,y:1}:{x:0,y:-1}},e.calculateDistance=function(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))},e.calculateRotationsAngle=function(t,r,n){var o=e.calculateDistance(t,r),a=e.calculateDistance(n,r),i=e.calculateDistance(t,n),s=Math.pow(o,2)+Math.pow(a,2)-Math.pow(i,2),u=2*o*a;return Math.acos(s/u)*he},e.getParentMatrix=function(t,r){var n=ye.get(t).parent;if(!n)return r;var o=ye.get(n).matrix;return r=r?r.multiply(o):o,e.getParentMatrix(n,r)},e.getCombineMatrix=function(t){var r=new pe(ye.get(t).transform),n=e.getParentMatrix(t,r);return n||r},e.degrees=function(e){return e*he},e.rotateToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).rotate(r)).translate(-e,-t):n},e.scaleToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).scale(r,r)).translate(-e,-t):n},e.getRotationDirection=function(t,r,n){var o={x:r.x-t.x,y:r.y-t.y};return 0===(o=e.normaliseVector(o)).y?t.y-n.y<0?o.x>0?se:ue:o.x<0?se:ue:t.x-n.x>0?o.y>0?se:ue:o.y<0?se:ue},e.transfromIncrement=function(e,t,r,n){var o=r;o=r?o.multiply(n):n;var a=new de(0,0),i=new de(e,t),s=o.inverse();return a.matrixTransform(s),i.matrixTransform(s),{dx:i.x-a.x,dy:i.y-a.y}},e.coordinatesGlobalToLocal=function(e,t,r,n){var o=new de(e,t);return r&&o.matrixTransform(r.inverse()),n&&o.matrixTransform(n.inverse()),o},e.transformToViewPort=function(e,t,r,n,o){var a=new de(e,t);if(!r||!n)return a;o&&(r=r.multiply(o));var i=r.multiply(n);return a.matrixTransform(i),a},e.viewPorttoObject=function(e,t,r,n){var o=new pe;o.translate(e,t);var a=r||o;return n&&(a=a.multiply(n)),a=a.inverse(),o.multiply(a)},e.calculateRubberBandPosition=function(t,r,n,o){if(!t)return{x:0,y:0,w:0,h:0,transform:0};var a=r,i=t;(a=this.calculateTrasformBox(a,n,i,o)).x=a.x-ce,a.y=a.y-ce,a.w=a.w+2*ce,a.h=a.h+2*ce;var s=new pe,u=a.x+a.w/2,c=a.y+a.h/2;return s=e.rotateToCenter(u,c,a.angle,s),{x:a.x,y:a.y,w:a.w,h:a.h,transform:s.matrixToText()}},e.calculateTrasformBox=function(t,r,n,o){var a=0;0!=n.b&&(a=e.degrees(Math.atan2(n.b,n.a))),o&&(r=r.multiply(o));var i=t.w/2,s=t.h/2;n=e.rotateToCenter(i,s,-a,n);var u=r.multiply(n),c=new de(0,0),l=new de(t.w,t.h);return c.matrixTransform(u),l.matrixTransform(u),l.x=l.x-c.x,l.y=l.y-c.y,{x:c.x,y:c.y,w:l.x,h:l.y,angle:a}},e.moveObject=function(t,r,n){var o=e.transfromIncrement(t,r,n.viewportMtx,n.selection.matrix),a=n.selection.matrix;return{matrix:a=a.translate(-o.dx,-o.dy),box:null}},e.checkConstrains=function(t,r,n){if(!n)return!0;var o=new de(0,0),a=new de(t.w,0),i=new de(0,t.h),s=new de(t.w,t.h);return o.matrixTransform(r),!!e.isPointInBox(o,n)&&(a.matrixTransform(r),!!e.isPointInBox(a,n)&&(i.matrixTransform(r),!!e.isPointInBox(i,n)&&(s.matrixTransform(r),!!e.isPointInBox(s,n))))},e.isPointInBox=function(e,t){return!(e.x<0||e.y<0)&&!(e.x>t.w||e.y>t.h)},e.rotateObject=function(t,r,n,o,a){var i=a.box,s=i.x+i.w/2,u=i.y+i.h/2,c={x:n,y:o},l={x:t,y:r},f=e.transformToViewPort(s,u,a.viewportMtx,a.selection.matrix,a.parentMtx);console.log("rotating cx:"+f.x+" cy:"+f.y+" x:"+t+" y:"+r+" ");var p=e.getRotationDirection(c,l,f),d=e.calculateRotationsAngle(c,f,l);d=p==se?d:-d;var y=a.selection.matrix;return{matrix:y=(y=(y=y.translate(s,u)).rotate(d)).translate(-s,-u),box:null}},e.scaleObject=function(t,r,n,o){var a=o.box,i=a.x+a.w/2,s=a.y+a.h/2;n||(t=-t,r=-r);var u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=e.transfromIncrement(a.x+a.w-i,a.y+a.h-s,o.viewportMtx,o.selection.matrix),l=e.transfromIncrement(a.x+a.w-u.dx-i,a.y+a.h-u.dy-s,o.viewportMtx,o.selection.matrix);if(!(a.x+a.w-u.dx<i||a.y+a.h-u.dy<s)){var f=l.dx/c.dx,p=l.dy/c.dy,d=o.selection.matrix;return{matrix:d=(d=(d=d.translate(i,s)).scale(f,p)).translate(-i,-s),box:null}}},e.resizeObject=function(t,r,n,o){var a=o.selection.box,i=0,s=0,u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=0,l=0,f=o.selection.matrix;switch(n){case ne:i=-u.dx,s=-u.dy,c=u.dx,l=u.dy;break;case oe:s=-u.dy,c=-u.dx,l=u.dy;break;case ae:i=-u.dx,c=u.dx,l=-u.dy;break;case ie:c=-u.dx,l=-u.dy}var p={x:0,y:0,w:a.w+c,h:a.h+l};return{matrix:f=f.translate(i,s),box:p}},e}();function ve(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}ve(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var be=function(e){function r(t){var r=e.call(this,t)||this;return r.calculateCoordinates=r.calculateCoordinates.bind(r),r}return t(r,e),r.prototype.shouldComponentUpdate=function(e,t){return e.selectedItem||e.viewport.viewportTr!==this.props.viewport.viewportTr||e.viewport.selectedTr!==this.props.viewport.viewportTr||e.viewport.parentTr!==this.props.viewport.viewportTr},r.prototype.calculateCoordinates=function(){var e=me.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:e.x,y:e.y,w:e.w,h:e.h,transform:e.transform}},r.prototype.render=function(){var e=this,t=this.calculateCoordinates();return this.props.selection?Z.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(t){e.props.doRubberMouseDown(t,te)}},Z.createElement("g",{transform:"matrix("+t.transform+")"},Z.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:t.x,y:t.y,width:t.w,height:t.h}),Z.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:t.x-ce,y:t.y-ce,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ne)}}),Z.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y-ce,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,oe)}}),Z.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x-ce,y:t.y+t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ae)}}),Z.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y+t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,ie)}}),Z.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x+t.w/2-ce,y:t.y+1.5*t.h,width:ce,height:ce,onMouseDown:function(t){e.props.doRubberMouseDown(t,re)}}))):null},r}(Z.Component),ge=function(){function e(){}return e.prototype.pan=function(e,t,r){r.e-=e,r.f-=t},e.prototype.zoom=function(e,t,r,n){n.e-=t,n.f-=r,n.a*=e,n.b*=e,n.c*=e,n.d*=e,n.e*=e,n.f*=e,n.e+=t,n.f+=r},e}(),xe=function(e){function r(t){var r=e.call(this,t)||this;r.x=0,r.y=0,r.w=100,r.h=100,r.transform="1,0,0,1,0,0",r.id="";var n=t.children?t.children.props:null,o=n.x,a=n.y,i=n.w,s=n.h;return r.x=o||0,r.y=a||0,r.w=i||100,r.h=s||100,r.transform="1,0,0,1,"+r.x+","+r.y,r.id=t.id,r}return t(r,e),r.prototype.render=function(){var e=this,t=this.props,r=t.transform,n=t.children,o=t.box;return this.transform=r||this.transform,o&&(this.w=o.w,this.h=o.h),console.log(this.transform),Z.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(t){return e.props.doObjectMouseDown(t,null,e)}},n)},r}(Z.PureComponent);ve(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var we=function(e){function n(t){var n=e.call(this,t)||this;return n.selection=null,n.draggingPositionX=0,n.draggingPositionY=0,n.mode=ee,n.addRemoveMouseListener=function(e,t){e.dragging&&!t.dragging?(document.addEventListener("mousemove",n.doMouseMove),document.addEventListener("mouseup",n.doMouseUp)):!e.dragging&&t.dragging&&(document.removeEventListener("mousemove",n.doMouseMove),document.removeEventListener("mouseup",n.doMouseUp))},n.getSelectedObjInfo=function(e){var t=e?new pe(e.transform):new pe,r=e?{id:e.id,x:0,y:0,w:e.w,h:e.h}:{id:"",x:0,y:0,w:0,h:0},o=e?n.getObjType(e):le;return{id:e?e.id:-1,item:e,matrix:t,transform:t.matrixToText(),box:r,type:o}},n.doGlobalMouseDown=function(e){0===e.button&&(n.setDraggingPosition(e),n.setState({dragging:!0}),n.mode=ee)},n.doObjectMouseDown=function(e,t,r){e.stopPropagation(),n.setDraggingPosition(e),n.setState({dragging:!0}),n.props.onSelectItem&&n.props.onSelectItem(t,r),n.selection=r;var o=n.getSelectedObjInfo(r);n.setState({dragging:!0,selection:o}),n.mode=te},n.doRubberMouseDown=function(e,t,r){e.stopPropagation(),n.setDraggingPosition(e),n.setState({dragging:!0}),n.mode=t},n.doMouseMove=function(e){if(n.state.dragging){console.log("Moving"),e.stopPropagation();var t=n.adjustCoor(e.clientX,e.clientY),r=t.x,o=t.y,a=n.draggingPositionX-r,i=n.draggingPositionY-o;switch(n.mode){case ee:n.pan(a,i);break;case te:n.updateSelectedItem(me.moveObject(a,i,n.state));break;case re:n.updateSelectedItem(me.rotateObject(r,o,n.draggingPositionX,n.draggingPositionY,n.state));break;case ne:case oe:case ae:case ie:var s=me.resizeObject(a,i,n.mode,n.state);n.updateSelectedItem(s)}n.setDraggingPosition(e)}},n.doMouseUp=function(e){n.setState({dragging:!1}),n.state.selection.type==fe&&n.props.onSelectItem&&n.props.onSelectItem(null,null),n.props.selectedItem&&n.props.onChange&&n.props.onChange(n.props.selectedItem,{transform:n.state.selection.matrix.matrixToText(),w:n.state.selection.box.w,h:n.state.selection.box.h})},n.doMouseWheel=function(e){e.preventDefault();var t=n.adjustCoor(e.clientX,e.clientY),r=t.x,o=t.y,a=e.deltaY>0?1.05:.95;n.zoom(a,r,o)},n.onDragOver=function(e){e.preventDefault()},n.onDrop=function(e){},n.addItem=function(e,t,r){var o=parseInt(e.dataTransfer.getData("type")),a=e.dataTransfer.getData("subtype"),i=parseInt(e.dataTransfer.getData("objtype")),s={name:e.dataTransfer.getData("name"),type:o,objType:i,subtype:a,transform:r},u=n.props.onAddItem;u&&u(s,t)},n.updateSelectedItem=function(e){var t=e.matrix,o=e.box?e.box:n.state.selection.box,a=r({},n.state.selection);a.matrix=t,a.transform=t.matrixToText(),a.box=o,n.setState({box:o,selection:a})},n.pan=function(e,t){n.zoomPanHelper.pan(e,t,n.state.viewportMtx),n.applyMatrix()},n.zoom=function(e,t,r){n.zoomPanHelper.zoom(e,t,r,n.state.viewportMtx),n.applyMatrix()},n.applyMatrix=function(){var e=n.state.viewportMtx.matrixToText();n.setState({viewportTr:e})},n.setDraggingPosition=function(e){var t=n.refs.container;n.draggingPositionX=e.clientX-t.offsetLeft,n.draggingPositionY=e.clientY-t.offsetTop},n.renderChildren=function(){var e=n.state.selection,t=n.props.children;return null==t?null:(console.log(t),t.map((function(t,r){console.log(t.id),console.log("s:"+e.id+" id:"+r+" ");var o=e.id==r?e.transform:null,a=e.id==r?e.box:null;return console.log(a),Z.createElement(xe,{id:r,key:r,transform:o,box:a,doObjectMouseDown:n.doObjectMouseDown},t)})))},n.zoomPanHelper=new ge,n.state={dragging:!1,viewportMtx:new pe(n.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:n.getSelectedObjInfo(null)},n.draggingPositionX=0,n.draggingPositionY=0,n.mode=ee,n}return t(n,e),n.prototype.shouldComponentUpdate=function(e,t){return t.dragging!==this.state.dragging&&this.addRemoveMouseListener(t,this.state),e.selectedItem!==this.props.selectedItem&&(t.selection=this.getSelectedObjInfo(e.selectedItem)),!0},n.prototype.adjustCoor=function(e,t){var r=this.refs.container;return{x:e-r.offsetLeft,y:t-r.offsetTop}},n.prototype.ownEvent=function(e){e.preventDefault(),e.stopPropagation()},n.prototype.getObjType=function(e){return e.hasOwnProperty("start")&&e.hasOwnProperty("output")&&e.hasOwnProperty("end")&&e.hasOwnProperty("input")?fe:le},n.prototype.render=function(){var e=this.state.viewportTr;return Z.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},Z.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},Z.createElement("div",{style:{transform:"matrix("+e+")",position:"absolute"}},this.renderChildren()),Z.createElement(be,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},n}(Z.Component);export{we as ZoomPan}; | ||
| //# sourceMappingURL=lib.esm.js.map |
@@ -1,2 +0,2 @@ | ||
| var lib=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(e),o=function(t,e){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)}; | ||
| var lib=function(e){"use strict"; | ||
| /*! ***************************************************************************** | ||
@@ -15,3 +15,8 @@ Copyright (c) Microsoft Corporation. | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */function i(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var a=function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},s=1,u=2,c=3,l=4,p=5,h=6,f=7,d=22,m=23,y=5,x=0,b=1,g=function(){function t(t){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(t)}return t.prototype.apply=function(t){var e=[1,0,0,1,0,0];t&&(e=t.split(",")),this.a=parseFloat(e[0]),this.b=parseFloat(e[1]),this.c=parseFloat(e[2]),this.d=parseFloat(e[3]),this.e=parseFloat(e[4]),this.f=parseFloat(e[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},t.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},t.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},t.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},t.prototype.rotate=function(t){var e=Math.cos(.017453292519943295*t),n=Math.sin(.017453292519943295*t);return this.transform(e,n,-n,e,0,0)},t.prototype.rotateDeg=function(t){return this.rotate(.017453292519943295*t)},t.prototype.scale=function(t,e){return this.transform(t,0,0,e,0,0)},t.prototype.scaleX=function(t){return this.transform(t,0,0,1,0,0)},t.prototype.scaleY=function(t){return this.transform(1,0,0,t,0,0)},t.prototype.skew=function(t,e){return this.transform(1,e,t,1,0,0)},t.prototype.skewX=function(t){return this.transform(1,0,t,1,0,0)},t.prototype.skewY=function(t){return this.transform(1,t,0,1,0,0)},t.prototype.setTransform=function(t,e,n,r,o,i){return this.a=t,this.b=e,this.c=n,this.d=r,this.e=o,this.f=i,this},t.prototype.translate=function(t,e){return this.transform(1,0,0,1,t,e)},t.prototype.transform=function(e,n,r,o,i,a){var s=this.a,u=this.b,c=this.c,l=this.d,p=this.e,h=this.f,f=new t;return f.a=s*e+c*n,f.b=u*e+l*n,f.c=s*r+c*o,f.d=u*r+l*o,f.e=s*i+c*a+p,f.f=u*i+l*a+h,f},t.prototype.multiply=function(e){var n=new t,r=this.a,o=this.b,i=this.c,a=this.d,s=this.e,u=this.f;return n.a=r*e.a+i*e.b,n.b=o*e.a+a*e.b,n.c=r*e.c+i*e.d,n.d=o*e.c+a*e.d,n.e=r*e.e+i*e.f+s,n.f=o*e.e+a*e.f+u,n},t.prototype.inverse=function(){var e=this.a,n=this.b,r=this.c,o=this.d,i=this.e,a=this.f,s=new t,u=e*o-n*r;return s.a=o/u,s.b=-n/u,s.c=-r/u,s.d=e/u,s.e=(r*a-o*i)/u,s.f=-(e*a-n*i)/u,s},t.prototype.interpolate=function(e,n){var r=new t;return r.a=this.a+(e.a-this.a)*n,r.b=this.b+(e.b-this.b)*n,r.c=this.c+(e.c-this.c)*n,r.d=this.d+(e.d-this.d)*n,r.e=this.e+(e.e-this.e)*n,r.f=this.f+(e.f-this.f)*n,r},t.prototype.applyToPoint=function(t,e){return{x:t*this.a+e*this.c+this.e,y:t*this.b+e*this.d+this.f}},t.prototype.applyToArray=function(t){var e,n,r=0,o=[];if("number"==typeof t[0])for(n=t.length;r<n;)e=this.applyToPoint(t[r++],t[r++]),o.push(e.x,e.y);else for(;e=t[r];r++)o.push(this.applyToPoint(e.x,e.y));return o},t.prototype.applyToTypedArray=function(t){for(var e,n=0,r=t.length,o=new Float32Array(r);n<r;)e=this.applyToPoint(t[n],t[n+1]),o[n++]=e.x,o[n++]=e.y;return o},t.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},t.prototype.isEqual=function(t){return this._isEqual(this.a,t.a)&&this._isEqual(this.b,t.b)&&this._isEqual(this.c,t.c)&&this._isEqual(this.d,t.d)&&this._isEqual(this.e,t.e)&&this._isEqual(this.f,t.f)},t.prototype._isEqual=function(t,e){return Math.abs(t-e)<1e-14},t.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(t.prototype,"trx",{get:function(){return this.e},set:function(t){this.e=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"try",{get:function(){return this.f},set:function(t){this.f=t},enumerable:!1,configurable:!0}),t}(),w=function(){function t(t,e){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=t,this.y=e}return t.prototype.matrixTransform=function(t){var e=this.x,n=this.y;this.x=e*t.a+n*t.c+t.e,this.y=e*t.b+n*t.d+t.f},t}(),v=new(function(){function t(){var t=this;this.addAll=function(e){e&&(t.data={},e.forEach((function(e){t.data[e.id]=e})))},this.data={}}return t.prototype.add=function(t,e){this.data[t]=e},t.prototype.del=function(t){delete this.data[t]},t.prototype.get=function(t){return this.data[t]},t.prototype.delAll=function(){this.data={}},t}()),M=180/Math.PI,T=function(){function t(){}return t.normaliseVector=function(t){return Math.abs(t.x)>Math.abs(t.y)?t.x>0?{x:1,y:0}:{x:-1,y:0}:t.y>0?{x:0,y:1}:{x:0,y:-1}},t.calculateDistance=function(t,e){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))},t.calculateRotationsAngle=function(e,n,r){var o=t.calculateDistance(e,n),i=t.calculateDistance(r,n),a=t.calculateDistance(e,r),s=Math.pow(o,2)+Math.pow(i,2)-Math.pow(a,2),u=2*o*i;return Math.acos(s/u)*M},t.getParentMatrix=function(e,n){var r=v.get(e).parent;if(!r)return n;var o=v.get(r).matrix;return n=n?n.multiply(o):o,t.getParentMatrix(r,n)},t.getCombineMatrix=function(e){var n=new g(v.get(e).transform),r=t.getParentMatrix(e,n);return r||n},t.degrees=function(t){return t*M},t.rotateToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).rotate(n)).translate(-t,-e):r},t.scaleToCenter=function(t,e,n,r){return 0!=n&&r?r=(r=(r=r.translate(t,e)).scale(n,n)).translate(-t,-e):r},t.getRotationDirection=function(e,n,r){var o={x:n.x-e.x,y:n.y-e.y};return 0===(o=t.normaliseVector(o)).y?e.y-r.y<0?o.x>0?d:m:o.x<0?d:m:e.x-r.x>0?o.y>0?d:m:o.y<0?d:m},t.transfromIncrement=function(t,e,n,r){var o=n;o=n?o.multiply(r):r;var i=new w(0,0),a=new w(t,e),s=o.inverse();return i.matrixTransform(s),a.matrixTransform(s),{dx:a.x-i.x,dy:a.y-i.y}},t.coordinatesGlobalToLocal=function(t,e,n,r){var o=new w(t,e);return n&&o.matrixTransform(n.inverse()),r&&o.matrixTransform(r.inverse()),o},t.transformToViewPort=function(t,e,n,r,o){var i=new w(t,e);if(!n||!r)return i;o&&(n=n.multiply(o));var a=n.multiply(r);return i.matrixTransform(a),i},t.viewPorttoObject=function(t,e,n,r){var o=new g;o.translate(t,e);var i=n||o;return r&&(i=i.multiply(r)),i=i.inverse(),o.multiply(i)},t.calculateRubberBandPosition=function(e,n,r,o){if(!e)return{x:0,y:0,w:0,h:0,transform:0};var i=n,a=e;(i=this.calculateTrasformBox(i,r,a,o)).x=i.x-y,i.y=i.y-y,i.w=i.w+2*y,i.h=i.h+2*y;var s=new g,u=i.x+i.w/2,c=i.y+i.h/2;return s=t.rotateToCenter(u,c,i.angle,s),{x:i.x,y:i.y,w:i.w,h:i.h,transform:s.matrixToText()}},t.calculateTrasformBox=function(e,n,r,o){var i=0;0!=r.b&&(i=t.degrees(Math.atan2(r.b,r.a))),o&&(n=n.multiply(o));var a=e.w/2,s=e.h/2;r=t.rotateToCenter(a,s,-i,r);var u=n.multiply(r),c=new w(0,0),l=new w(e.w,e.h);return c.matrixTransform(u),l.matrixTransform(u),l.x=l.x-c.x,l.y=l.y-c.y,{x:c.x,y:c.y,w:l.x,h:l.y,angle:i}},t.moveObject=function(e,n,r){var o=t.transfromIncrement(e,n,r.viewportMtx,r.selection.matrix),i=r.selection.matrix;return{matrix:i=i.translate(-o.dx,-o.dy),box:null}},t.checkConstrains=function(e,n,r){if(!r)return!0;var o=new w(0,0),i=new w(e.w,0),a=new w(0,e.h),s=new w(e.w,e.h);return o.matrixTransform(n),!!t.isPointInBox(o,r)&&(i.matrixTransform(n),!!t.isPointInBox(i,r)&&(a.matrixTransform(n),!!t.isPointInBox(a,r)&&(s.matrixTransform(n),!!t.isPointInBox(s,r))))},t.isPointInBox=function(t,e){return!(t.x<0||t.y<0)&&!(t.x>e.w||t.y>e.h)},t.rotateObject=function(e,n,r,o,i){var a=i.box,s=a.x+a.w/2,u=a.y+a.h/2,c={x:r,y:o},l={x:e,y:n},p=t.transformToViewPort(s,u,i.viewportMtx,i.selection.matrix,i.parentMtx);console.log("rotating cx:"+p.x+" cy:"+p.y+" x:"+e+" y:"+n+" ");var h=t.getRotationDirection(c,l,p),f=t.calculateRotationsAngle(c,p,l);f=h==d?f:-f;var m=i.selection.matrix;return{matrix:m=(m=(m=m.translate(s,u)).rotate(f)).translate(-s,-u),box:null}},t.scaleObject=function(e,n,r,o){var i=o.box,a=i.x+i.w/2,s=i.y+i.h/2;r||(e=-e,n=-n);var u=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),c=t.transfromIncrement(i.x+i.w-a,i.y+i.h-s,o.viewportMtx,o.selection.matrix),l=t.transfromIncrement(i.x+i.w-u.dx-a,i.y+i.h-u.dy-s,o.viewportMtx,o.selection.matrix);if(!(i.x+i.w-u.dx<a||i.y+i.h-u.dy<s)){var p=l.dx/c.dx,h=l.dy/c.dy,f=o.selection.matrix;return{matrix:f=(f=(f=f.translate(a,s)).scale(p,h)).translate(-a,-s),box:null}}},t.resizeObject=function(e,n,r,o){var i=o.selection.box,a=0,s=0,u=t.transfromIncrement(e,n,o.viewportMtx,o.selection.matrix),c=0,d=0,m=o.selection.matrix;switch(r){case l:a=-u.dx,s=-u.dy,c=u.dx,d=u.dy;break;case p:s=-u.dy,c=-u.dx,d=u.dy;break;case h:a=-u.dx,c=u.dx,d=-u.dy;break;case f:c=-u.dx,d=-u.dy}var y={x:0,y:0,w:i.w+c,h:i.h+d};return{matrix:m=m.translate(a,s),box:y}},t}();function P(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}P(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var D=function(t){function e(e){var n=t.call(this,e)||this;return n.calculateCoordinates=n.calculateCoordinates.bind(n),n}return i(e,t),e.prototype.shouldComponentUpdate=function(t,e){return t.selectedItem||t.viewport.viewportTr!==this.props.viewport.viewportTr||t.viewport.selectedTr!==this.props.viewport.viewportTr||t.viewport.parentTr!==this.props.viewport.viewportTr},e.prototype.calculateCoordinates=function(){var t=T.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:t.x,y:t.y,w:t.w,h:t.h,transform:t.transform}},e.prototype.render=function(){var t=this,e=this.calculateCoordinates();return this.props.selection?r.default.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(e){t.props.doRubberMouseDown(e,u)}},r.default.createElement("g",{transform:"matrix("+e.transform+")"},r.default.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:e.x,y:e.y,width:e.w,height:e.h}),r.default.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:e.x-y,y:e.y-y,width:y,height:y,onMouseDown:function(e){t.props.doRubberMouseDown(e,l)}}),r.default.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:e.x+e.w,y:e.y-y,width:y,height:y,onMouseDown:function(e){t.props.doRubberMouseDown(e,p)}}),r.default.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:e.x-y,y:e.y+e.h,width:y,height:y,onMouseDown:function(e){t.props.doRubberMouseDown(e,h)}}),r.default.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:e.x+e.w,y:e.y+e.h,width:y,height:y,onMouseDown:function(e){t.props.doRubberMouseDown(e,f)}}),r.default.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:e.x+e.w/2-y,y:e.y+1.5*e.h,width:y,height:y,onMouseDown:function(e){t.props.doRubberMouseDown(e,c)}}))):null},e}(r.default.Component),E=function(){function t(){}return t.prototype.pan=function(t,e,n){n.e-=t,n.f-=e},t.prototype.zoom=function(t,e,n,r){r.e-=e,r.f-=n,r.a*=t,r.b*=t,r.c*=t,r.d*=t,r.e*=t,r.f*=t,r.e+=e,r.f+=n},t}(),I=function(t){function e(e){var n=t.call(this,e)||this;n.x=0,n.y=0,n.w=100,n.h=100,n.transform="1,0,0,1,0,0",n.id="";var r=e.children?e.children.props:null,o=r.x,i=r.y,a=r.w,s=r.h;return n.x=o||0,n.y=i||0,n.w=a||100,n.h=s||100,n.transform="1,0,0,1,"+n.x+","+n.y,n.id=e.id,n}return i(e,t),e.prototype.render=function(){var t=this,e=this.props,n=e.transform,o=e.children,i=e.box;return this.transform=n||this.transform,i&&(this.w=i.w,this.h=i.h),console.log(this.transform),r.default.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(e){return t.props.doObjectMouseDown(e,null,t)}},o)},e}(r.default.PureComponent);P(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var O=function(t){function e(e){var n=t.call(this,e)||this;return n.selection=null,n.draggingPositionX=0,n.draggingPositionY=0,n.mode=s,n.addRemoveMouseListener=function(t,e){t.dragging&&!e.dragging?(document.addEventListener("mousemove",n.doMouseMove),document.addEventListener("mouseup",n.doMouseUp)):!t.dragging&&e.dragging&&(document.removeEventListener("mousemove",n.doMouseMove),document.removeEventListener("mouseup",n.doMouseUp))},n.getSelectedObjInfo=function(t){var e=t?new g(t.transform):new g,r=t?{id:t.id,x:0,y:0,w:t.w,h:t.h}:{id:"",x:0,y:0,w:0,h:0},o=t?n.getObjType(t):x;return{id:t?t.id:-1,item:t,matrix:e,transform:e.matrixToText(),box:r,type:o}},n.doGlobalMouseDown=function(t){0===t.button&&(n.setDraggingPosition(t),n.setState({dragging:!0}),n.mode=s)},n.doObjectMouseDown=function(t,e,r){t.stopPropagation(),n.setDraggingPosition(t),n.setState({dragging:!0}),n.props.onSelectItem&&n.props.onSelectItem(e,r),n.selection=r;var o=n.getSelectedObjInfo(r);n.setState({dragging:!0,selection:o}),n.mode=u},n.doRubberMouseDown=function(t,e,r){t.stopPropagation(),n.setDraggingPosition(t),n.setState({dragging:!0}),n.mode=e},n.doMouseMove=function(t){if(n.state.dragging){console.log("Moving"),t.stopPropagation();var e=n.adjustCoor(t.clientX,t.clientY),r=e.x,o=e.y,i=n.draggingPositionX-r,a=n.draggingPositionY-o;switch(n.mode){case s:n.pan(i,a);break;case u:n.updateSelectedItem(T.moveObject(i,a,n.state));break;case c:n.updateSelectedItem(T.rotateObject(r,o,n.draggingPositionX,n.draggingPositionY,n.state));break;case l:case p:case h:case f:var d=T.resizeObject(i,a,n.mode,n.state);n.updateSelectedItem(d)}n.setDraggingPosition(t)}},n.doMouseUp=function(t){n.setState({dragging:!1}),n.state.selection.type==b&&n.props.onSelectItem&&n.props.onSelectItem(null,null),n.props.selectedItem&&n.props.onChange&&n.props.onChange(n.props.selectedItem,{transform:n.state.selection.matrix.matrixToText(),w:n.state.selection.box.w,h:n.state.selection.box.h})},n.doMouseWheel=function(t){t.preventDefault();var e=n.adjustCoor(t.clientX,t.clientY),r=e.x,o=e.y,i=t.deltaY>0?1.05:.95;n.zoom(i,r,o)},n.onDragOver=function(t){t.preventDefault()},n.onDrop=function(t){},n.addItem=function(t,e,r){var o=parseInt(t.dataTransfer.getData("type")),i=t.dataTransfer.getData("subtype"),a=parseInt(t.dataTransfer.getData("objtype")),s={name:t.dataTransfer.getData("name"),type:o,objType:a,subtype:i,transform:r},u=n.props.onAddItem;u&&u(s,e)},n.updateSelectedItem=function(t){var e=t.matrix,r=t.box?t.box:n.state.selection.box,o=a({},n.state.selection);o.matrix=e,o.transform=e.matrixToText(),o.box=r,n.setState({box:r,selection:o})},n.pan=function(t,e){n.zoomPanHelper.pan(t,e,n.state.viewportMtx),n.applyMatrix()},n.zoom=function(t,e,r){n.zoomPanHelper.zoom(t,e,r,n.state.viewportMtx),n.applyMatrix()},n.applyMatrix=function(){var t=n.state.viewportMtx.matrixToText();n.setState({viewportTr:t})},n.setDraggingPosition=function(t){var e=n.refs.container;n.draggingPositionX=t.clientX-e.offsetLeft,n.draggingPositionY=t.clientY-e.offsetTop},n.renderChildren=function(){var t=n.state.selection,e=n.props.children;return null==e?null:(console.log(e),e.map((function(e,o){console.log(e.id),console.log("s:"+t.id+" id:"+o+" ");var i=t.id==o?t.transform:null,a=t.id==o?t.box:null;return console.log(a),r.default.createElement(I,{id:o,key:o,transform:i,box:a,doObjectMouseDown:n.doObjectMouseDown},e)})))},n.zoomPanHelper=new E,n.state={dragging:!1,viewportMtx:new g(n.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:n.getSelectedObjInfo(null)},n.draggingPositionX=0,n.draggingPositionY=0,n.mode=s,n}return i(e,t),e.prototype.shouldComponentUpdate=function(t,e){return e.dragging!==this.state.dragging&&this.addRemoveMouseListener(e,this.state),t.selectedItem!==this.props.selectedItem&&(e.selection=this.getSelectedObjInfo(t.selectedItem)),!0},e.prototype.adjustCoor=function(t,e){var n=this.refs.container;return{x:t-n.offsetLeft,y:e-n.offsetTop}},e.prototype.ownEvent=function(t){t.preventDefault(),t.stopPropagation()},e.prototype.getObjType=function(t){return t.hasOwnProperty("start")&&t.hasOwnProperty("output")&&t.hasOwnProperty("end")&&t.hasOwnProperty("input")?b:x},e.prototype.render=function(){var t=this.state.viewportTr;return r.default.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},r.default.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},r.default.createElement("div",{style:{transform:"matrix("+t+")",position:"absolute"}},this.renderChildren()),r.default.createElement(D,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},e}(r.default.Component);return t.ZoomPan=O,t}({},React); | ||
| ***************************************************************************** */var t=function(e,r){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,r)};function r(e,r){function n(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var n=function(){return(n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function o(e,t){return e(t={exports:{}},t.exports),t.exports | ||
| /* | ||
| object-assign | ||
| (c) Sindre Sorhus | ||
| @license MIT | ||
| */}var a=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;function u(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var c=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,o=u(e),c=1;c<arguments.length;c++){for(var l in r=Object(arguments[c]))i.call(r,l)&&(o[l]=r[l]);if(a){n=a(r);for(var f=0;f<n.length;f++)s.call(r,n[f])&&(o[n[f]]=r[n[f]])}}return o},l="function"==typeof Symbol&&Symbol.for,f=l?Symbol.for("react.element"):60103,p=l?Symbol.for("react.portal"):60106,d=l?Symbol.for("react.fragment"):60107,y=l?Symbol.for("react.strict_mode"):60108,h=l?Symbol.for("react.profiler"):60114,m=l?Symbol.for("react.provider"):60109,v=l?Symbol.for("react.context"):60110,b=l?Symbol.for("react.forward_ref"):60112,g=l?Symbol.for("react.suspense"):60113,x=l?Symbol.for("react.memo"):60115,w=l?Symbol.for("react.lazy"):60116,_="function"==typeof Symbol&&Symbol.iterator;function C(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var P={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},S={};function O(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||P}function E(){}function R(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||P}O.prototype.isReactComponent={},O.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(C(85));this.updater.enqueueSetState(this,e,t,"setState")},O.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},E.prototype=O.prototype;var k=R.prototype=new E;k.constructor=R,c(k,O.prototype),k.isPureReactComponent=!0;var j={current:null},T=Object.prototype.hasOwnProperty,M={key:!0,ref:!0,__self:!0,__source:!0};function D(e,t,r){var n,o={},a=null,i=null;if(null!=t)for(n in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(a=""+t.key),t)T.call(t,n)&&!M.hasOwnProperty(n)&&(o[n]=t[n]);var s=arguments.length-2;if(1===s)o.children=r;else if(1<s){for(var u=Array(s),c=0;c<s;c++)u[c]=arguments[c+2];o.children=u}if(e&&e.defaultProps)for(n in s=e.defaultProps)void 0===o[n]&&(o[n]=s[n]);return{$$typeof:f,type:e,key:a,ref:i,props:o,_owner:j.current}}function I(e){return"object"==typeof e&&null!==e&&e.$$typeof===f}var $=/\/+/g,A=[];function N(e,t,r,n){if(A.length){var o=A.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function B(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>A.length&&A.push(e)}function q(e,t,r){return null==e?0:function e(t,r,n,o){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var i=!1;if(null===t)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(t.$$typeof){case f:case p:i=!0}}if(i)return n(o,t,""===r?"."+F(t,0):r),1;if(i=0,r=""===r?".":r+":",Array.isArray(t))for(var s=0;s<t.length;s++){var u=r+F(a=t[s],s);i+=e(a,u,n,o)}else if(null===t||"object"!=typeof t?u=null:u="function"==typeof(u=_&&t[_]||t["@@iterator"])?u:null,"function"==typeof u)for(t=u.call(t),s=0;!(a=t.next()).done;)i+=e(a=a.value,u=r+F(a,s++),n,o);else if("object"===a)throw n=""+t,Error(C(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return i}(e,"",t,r)}function F(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function L(e,t){e.func.call(e.context,t,e.count++)}function U(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?z(e,n,r,(function(e){return e})):null!=e&&(I(e)&&(e=function(e,t){return{$$typeof:f,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace($,"$&/")+"/")+r)),n.push(e))}function z(e,t,r,n,o){var a="";null!=r&&(a=(""+r).replace($,"$&/")+"/"),q(e,U,t=N(t,a,n,o)),B(t)}var V={current:null};function Y(){var e=V.current;if(null===e)throw Error(C(321));return e}var H={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return z(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;q(e,L,t=N(null,null,t,r)),B(t)},count:function(e){return q(e,(function(){return null}),null)},toArray:function(e){var t=[];return z(e,t,null,(function(e){return e})),t},only:function(e){if(!I(e))throw Error(C(143));return e}},Component:O,Fragment:d,Profiler:h,PureComponent:R,StrictMode:y,Suspense:g,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:V,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:j,IsSomeRendererActing:{current:!1},assign:c},cloneElement:function(e,t,r){if(null==e)throw Error(C(267,e));var n=c({},e.props),o=e.key,a=e.ref,i=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,i=j.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(u in t)T.call(t,u)&&!M.hasOwnProperty(u)&&(n[u]=void 0===t[u]&&void 0!==s?s[u]:t[u])}var u=arguments.length-2;if(1===u)n.children=r;else if(1<u){s=Array(u);for(var l=0;l<u;l++)s[l]=arguments[l+2];n.children=s}return{$$typeof:f,type:e.type,key:o,ref:a,props:n,_owner:i}},createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:v,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:m,_context:e},e.Consumer=e},createElement:D,createFactory:function(e){var t=D.bind(null,e);return t.type=e,t},createRef:function(){return{current:null}},forwardRef:function(e){return{$$typeof:b,render:e}},isValidElement:I,lazy:function(e){return{$$typeof:w,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:x,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return Y().useCallback(e,t)},useContext:function(e,t){return Y().useContext(e,t)},useDebugValue:function(){},useEffect:function(e,t){return Y().useEffect(e,t)},useImperativeHandle:function(e,t,r){return Y().useImperativeHandle(e,t,r)},useLayoutEffect:function(e,t){return Y().useLayoutEffect(e,t)},useMemo:function(e,t){return Y().useMemo(e,t)},useReducer:function(e,t,r){return Y().useReducer(e,t,r)},useRef:function(e){return Y().useRef(e)},useState:function(e){return Y().useState(e)},version:"16.13.1"},W=function(){};if("production"!==process.env.NODE_ENV){var X="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",G={},J=Function.call.bind(Object.prototype.hasOwnProperty);W=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function Z(e,t,r,n,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(J(e,a)){var i;try{if("function"!=typeof e[a]){var s=Error((n||"React class")+": "+r+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.");throw s.name="Invariant Violation",s}i=e[a](t,a,n,r,null,X)}catch(e){i=e}if(!i||i instanceof Error||W((n||"React class")+": type specification of "+r+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in G)){G[i.message]=!0;var u=o?o():"";W("Failed "+r+" type: "+i.message+(null!=u?u:""))}}}Z.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(G={})};var K=Z,Q=o((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e=c,r=K,n="function"==typeof Symbol&&Symbol.for,o=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,i=n?Symbol.for("react.fragment"):60107,s=n?Symbol.for("react.strict_mode"):60108,u=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,f=n?Symbol.for("react.context"):60110,p=n?Symbol.for("react.concurrent_mode"):60111,d=n?Symbol.for("react.forward_ref"):60112,y=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,v=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,g=n?Symbol.for("react.fundamental"):60117,x=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119,_="function"==typeof Symbol&&Symbol.iterator;function C(e){if(null===e||"object"!=typeof e)return null;var t=_&&e[_]||e["@@iterator"];return"function"==typeof t?t:null}var P={current:null},S={current:null},O=/^(.*)[\\\/]/;function E(e){if(null==e)return null;if("number"==typeof e.tag&&D("Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case i:return"Fragment";case a:return"Portal";case u:return"Profiler";case s:return"StrictMode";case y:return"Suspense";case h:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case f:return"Context.Consumer";case l:return"Context.Provider";case d:return n=e,o=e.render,c="ForwardRef",p=o.displayName||o.name||"",n.displayName||(""!==p?c+"("+p+")":c);case m:return E(e.type);case b:return E(e.render);case v:var t=1===(r=e)._status?r._result:null;if(t)return E(t)}var r,n,o,c,p;return null}var R={},k=null;function j(e){k=e}R.getCurrentStack=null,R.getStackAddendum=function(){var e="";if(k){var t=E(k.type),r=k._owner;e+=function(e,t,r){var n="";if(t){var o=t.fileName,a=o.replace(O,"");if(/^index\./.test(a)){var i=o.match(O);if(i){var s=i[1];if(s)a=s.replace(O,"")+"/"+a}}n=" (at "+a+":"+t.lineNumber+")"}else r&&(n=" (created by "+r+")");return"\n in "+(e||"Unknown")+n}(t,k._source,r&&E(r.type))}var n=R.getCurrentStack;return n&&(e+=n()||""),e};var T={ReactCurrentDispatcher:P,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:e};function M(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("warn",e,r)}function D(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];I("error",e,r)}function I(e,t,r){if(!(r.length>0&&"string"==typeof r[r.length-1]&&0===r[r.length-1].indexOf("\n in"))){var n=T.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(t+="%s",r=r.concat([n]))}var o=r.map((function(e){return""+e}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o);try{var a=0,i="Warning: "+t.replace(/%s/g,(function(){return r[a++]}));throw new Error(i)}catch(e){}}e(T,{ReactDebugCurrentFrame:R,ReactComponentTreeHook:{}});var $={};function A(e,t){var r=e.constructor,n=r&&(r.displayName||r.name)||"ReactClass",o=n+"."+t;$[o]||(D("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",t,n),$[o]=!0)}var N={isMounted:function(e){return!1},enqueueForceUpdate:function(e,t,r){A(e,"forceUpdate")},enqueueReplaceState:function(e,t,r,n){A(e,"replaceState")},enqueueSetState:function(e,t,r,n){A(e,"setState")}},B={};function q(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}Object.freeze(B),q.prototype.isReactComponent={},q.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},q.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};var F={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]},L=function(e,t){Object.defineProperty(q.prototype,e,{get:function(){M("%s(...) is deprecated in plain JavaScript React classes. %s",t[0],t[1])}})};for(var U in F)F.hasOwnProperty(U)&&L(U,F[U]);function z(){}function V(e,t,r){this.props=e,this.context=t,this.refs=B,this.updater=r||N}z.prototype=q.prototype;var Y=V.prototype=new z;Y.constructor=V,e(Y,q.prototype),Y.isPureReactComponent=!0;var H,W,X,G=Object.prototype.hasOwnProperty,J={key:!0,ref:!0,__self:!0,__source:!0};function Z(e){if(G.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}function Q(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}function ee(e,t){var r=function(){H||(H=!0,D("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function te(e,t){var r=function(){W||(W=!0,D("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}function re(e){if("string"==typeof e.ref&&S.current&&e.__self&&S.current.stateNode!==e.__self){var t=E(S.current.type);X[t]||(D('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref',E(S.current.type),e.ref),X[t]=!0)}}X={};var ne=function(e,t,r,n,a,i,s){var u={$$typeof:o,type:e,key:t,ref:r,props:s,_owner:i,_store:{}};return Object.defineProperty(u._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(u,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(u,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u};function oe(e,t,r){var n,o={},a=null,i=null,s=null,u=null;if(null!=t)for(n in Z(t)&&(i=t.ref,re(t)),Q(t)&&(a=""+t.key),s=void 0===t.__self?null:t.__self,u=void 0===t.__source?null:t.__source,t)G.call(t,n)&&!J.hasOwnProperty(n)&&(o[n]=t[n]);var c=arguments.length-2;if(1===c)o.children=r;else if(c>1){for(var l=Array(c),f=0;f<c;f++)l[f]=arguments[f+2];Object.freeze&&Object.freeze(l),o.children=l}if(e&&e.defaultProps){var p=e.defaultProps;for(n in p)void 0===o[n]&&(o[n]=p[n])}if(a||i){var d="function"==typeof e?e.displayName||e.name||"Unknown":e;a&&ee(o,d),i&&te(o,d)}return ne(e,a,i,s,u,S.current,o)}function ae(t,r,n){if(null==t)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+t+".");var o,a,i=e({},t.props),s=t.key,u=t.ref,c=t._self,l=t._source,f=t._owner;if(null!=r)for(o in Z(r)&&(u=r.ref,f=S.current),Q(r)&&(s=""+r.key),t.type&&t.type.defaultProps&&(a=t.type.defaultProps),r)G.call(r,o)&&!J.hasOwnProperty(o)&&(void 0===r[o]&&void 0!==a?i[o]=a[o]:i[o]=r[o]);var p=arguments.length-2;if(1===p)i.children=n;else if(p>1){for(var d=Array(p),y=0;y<p;y++)d[y]=arguments[y+2];i.children=d}return ne(t.type,s,u,c,l,f,i)}function ie(e){return"object"==typeof e&&null!==e&&e.$$typeof===o}var se=!1,ue=/\/+/g;function ce(e){return(""+e).replace(ue,"$&/")}var le,fe=[];function pe(e,t,r,n){if(fe.length){var o=fe.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function de(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,fe.length<10&&fe.push(e)}function ye(e,t,r){return null==e?0:function e(t,r,n,i){var s=typeof t;"undefined"!==s&&"boolean"!==s||(t=null);var u,c=!1;if(null===t)c=!0;else switch(s){case"string":case"number":c=!0;break;case"object":switch(t.$$typeof){case o:case a:c=!0}}if(c)return n(i,t,""===r?"."+he(t,0):r),1;var l=0,f=""===r?".":r+":";if(Array.isArray(t))for(var p=0;p<t.length;p++)l+=e(u=t[p],f+he(u,p),n,i);else{var d=C(t);if("function"==typeof d){d===t.entries&&(se||M("Using Maps as children is deprecated and will be removed in a future major release. Consider converting children to an array of keyed ReactElements instead."),se=!0);for(var y,h=d.call(t),m=0;!(y=h.next()).done;)l+=e(u=y.value,f+he(u,m++),n,i)}else if("object"===s){var v;v=" If you meant to render a collection of children, use an array instead."+R.getStackAddendum();var b=""+t;throw Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(t).join(", ")+"}":b)+")."+v)}}return l}(e,"",t,r)}function he(e,t){return"object"==typeof e&&null!==e&&null!=e.key?(r=e.key,n={"=":"=0",":":"=2"},"$"+(""+r).replace(/[=:]/g,(function(e){return n[e]}))):t.toString(36);var r,n}function me(e,t,r){var n=e.func,o=e.context;n.call(o,t,e.count++)}function ve(e,t,r){var n,o,a=e.result,i=e.keyPrefix,s=e.func,u=e.context,c=s.call(u,t,e.count++);Array.isArray(c)?be(c,a,r,(function(e){return e})):null!=c&&(ie(c)&&(n=c,o=i+(!c.key||t&&t.key===c.key?"":ce(c.key)+"/")+r,c=ne(n.type,o,n.ref,n._self,n._source,n._owner,n.props)),a.push(c))}function be(e,t,r,n,o){var a="";null!=r&&(a=ce(r)+"/");var i=pe(t,a,n,o);ye(e,ve,i),de(i)}function ge(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===u||e===s||e===y||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===v||e.$$typeof===m||e.$$typeof===l||e.$$typeof===f||e.$$typeof===d||e.$$typeof===g||e.$$typeof===x||e.$$typeof===w||e.$$typeof===b)}function xe(){var e=P.current;if(null===e)throw Error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.");return e}function we(){if(S.current){var e=E(S.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}function _e(e){return null!=e&&void 0!==(t=e.__source)?"\n\nCheck your code at "+t.fileName.replace(/^.*[\\\/]/,"")+":"+t.lineNumber+".":"";var t}le=!1;var Ce={};function Pe(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=we();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!Ce[r]){Ce[r]=!0;var n="";e&&e._owner&&e._owner!==S.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),j(e),D('Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',r,n),j(null)}}}function Se(e,t){if("object"==typeof e)if(Array.isArray(e))for(var r=0;r<e.length;r++){var n=e[r];ie(n)&&Pe(n,t)}else if(ie(e))e._store&&(e._store.validated=!0);else if(e){var o=C(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ie(a.value)&&Pe(a.value,t)}}function Oe(e){var t=e.type;if(null!=t&&"string"!=typeof t){var n,o=E(t);if("function"==typeof t)n=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==d&&t.$$typeof!==m)return;n=t.propTypes}n?(j(e),r(n,e.props,"prop",o,R.getStackAddendum),j(null)):void 0===t.PropTypes||le||(le=!0,D("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")),"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||D("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Ee(e){j(e);for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){D("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n);break}}null!==e.ref&&D("Invalid attribute `ref` supplied to `React.Fragment`."),j(null)}function Re(e,t,r){var n=ge(e);if(!n){var a="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var s,u=_e(t);a+=u||we(),null===e?s="null":Array.isArray(e)?s="array":void 0!==e&&e.$$typeof===o?(s="<"+(E(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):s=typeof e,D("React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",s,a)}var c=oe.apply(this,arguments);if(null==c)return c;if(n)for(var l=2;l<arguments.length;l++)Se(arguments[l],e);return e===i?Ee(c):Oe(c),c}var ke=!1;try{var je=Object.freeze({}),Te=new Map([[je,null]]),Me=new Set([je]);Te.set(0,0),Me.add(0)}catch(e){}var De=Re,Ie=function(e,t,r){for(var n=ae.apply(this,arguments),o=2;o<arguments.length;o++)Se(arguments[o],n.type);return Oe(n),n},$e=function(e){var t=Re.bind(null,e);return t.type=e,ke||(ke=!0,M("React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.")),Object.defineProperty(t,"type",{enumerable:!1,get:function(){return M("Factory.type is deprecated. Access the class directly before passing it to createFactory."),Object.defineProperty(this,"type",{value:e}),e}}),t},Ae={map:function(e,t,r){if(null==e)return e;var n=[];return be(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;var n=pe(null,null,t,r);ye(e,me,n),de(n)},count:function(e){return ye(e,(function(){return null}),null)},toArray:function(e){var t=[];return be(e,t,null,(function(e){return e})),t},only:function(e){if(!ie(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};t.Children=Ae,t.Component=q,t.Fragment=i,t.Profiler=u,t.PureComponent=V,t.StrictMode=s,t.Suspense=y,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T,t.cloneElement=Ie,t.createContext=function(e,t){void 0===t?t=null:null!==t&&"function"!=typeof t&&D("createContext: Expected the optional second argument to be a function. Instead received: %s",t);var r={$$typeof:f,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null};r.Provider={$$typeof:l,_context:r};var n=!1,o=!1,a={$$typeof:f,_context:r,_calculateChangedBits:r._calculateChangedBits};return Object.defineProperties(a,{Provider:{get:function(){return o||(o=!0,D("Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?")),r.Provider},set:function(e){r.Provider=e}},_currentValue:{get:function(){return r._currentValue},set:function(e){r._currentValue=e}},_currentValue2:{get:function(){return r._currentValue2},set:function(e){r._currentValue2=e}},_threadCount:{get:function(){return r._threadCount},set:function(e){r._threadCount=e}},Consumer:{get:function(){return n||(n=!0,D("Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?")),r.Consumer}}}),r.Consumer=a,r._currentRenderer=null,r._currentRenderer2=null,r},t.createElement=De,t.createFactory=$e,t.createRef=function(){var e={current:null};return Object.seal(e),e},t.forwardRef=function(e){return null!=e&&e.$$typeof===m?D("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):"function"!=typeof e?D("forwardRef requires a render function but was given %s.",null===e?"null":typeof e):0!==e.length&&2!==e.length&&D("forwardRef render functions accept exactly two parameters: props and ref. %s",1===e.length?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),null!=e&&(null==e.defaultProps&&null==e.propTypes||D("forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?")),{$$typeof:d,render:e}},t.isValidElement=ie,t.lazy=function(e){var t,r,n={$$typeof:v,_ctor:e,_status:-1,_result:null};return Object.defineProperties(n,{defaultProps:{configurable:!0,get:function(){return t},set:function(e){D("React.lazy(...): It is not supported to assign `defaultProps` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),t=e,Object.defineProperty(n,"defaultProps",{enumerable:!0})}},propTypes:{configurable:!0,get:function(){return r},set:function(e){D("React.lazy(...): It is not supported to assign `propTypes` to a lazy component import. Either specify them where the component is defined, or create a wrapping component around it."),r=e,Object.defineProperty(n,"propTypes",{enumerable:!0})}}}),n},t.memo=function(e,t){return ge(e)||D("memo: The first argument must be a component. Instead received: %s",null===e?"null":typeof e),{$$typeof:m,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return xe().useCallback(e,t)},t.useContext=function(e,t){var r=xe();if(void 0!==t&&D("useContext() second argument is reserved for future use in React. Passing it is not supported. You passed: %s.%s",t,"number"==typeof t&&Array.isArray(arguments[2])?"\n\nDid you call array.map(useContext)? Calling Hooks inside a loop is not supported. Learn more at https://fb.me/rules-of-hooks":""),void 0!==e._context){var n=e._context;n.Consumer===e?D("Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be removed in a future major release. Did you mean to call useContext(Context) instead?"):n.Provider===e&&D("Calling useContext(Context.Provider) is not supported. Did you mean to call useContext(Context) instead?")}return r.useContext(e,t)},t.useDebugValue=function(e,t){return xe().useDebugValue(e,t)},t.useEffect=function(e,t){return xe().useEffect(e,t)},t.useImperativeHandle=function(e,t,r){return xe().useImperativeHandle(e,t,r)},t.useLayoutEffect=function(e,t){return xe().useLayoutEffect(e,t)},t.useMemo=function(e,t){return xe().useMemo(e,t)},t.useReducer=function(e,t,r){return xe().useReducer(e,t,r)},t.useRef=function(e){return xe().useRef(e)},t.useState=function(e){return xe().useState(e)},t.version="16.13.1"}()})),ee=(Q.Children,Q.Component,Q.Fragment,Q.Profiler,Q.PureComponent,Q.StrictMode,Q.Suspense,Q.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,Q.cloneElement,Q.createContext,Q.createElement,Q.createFactory,Q.createRef,Q.forwardRef,Q.isValidElement,Q.lazy,Q.memo,Q.useCallback,Q.useContext,Q.useDebugValue,Q.useEffect,Q.useImperativeHandle,Q.useLayoutEffect,Q.useMemo,Q.useReducer,Q.useRef,Q.useState,Q.version,o((function(e){"production"===process.env.NODE_ENV?e.exports=H:e.exports=Q}))),te=1,re=2,ne=3,oe=4,ae=5,ie=6,se=7,ue=22,ce=23,le=5,fe=0,pe=1,de=function(){function e(e){this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0,this.apply(e)}return e.prototype.apply=function(e){var t=[1,0,0,1,0,0];e&&(t=e.split(",")),this.a=parseFloat(t[0]),this.b=parseFloat(t[1]),this.c=parseFloat(t[2]),this.d=parseFloat(t[3]),this.e=parseFloat(t[4]),this.f=parseFloat(t[5]),this.transform=this.transform.bind(this),this.rotate=this.rotate.bind(this),this.applyToPoint=this.applyToPoint.bind(this),this._isEqual=this._isEqual.bind(this)},e.prototype.flipX=function(){return this.transform(-1,0,0,1,0,0)},e.prototype.flipY=function(){return this.transform(1,0,0,-1,0,0)},e.prototype.reset=function(){return this.a=this.d=1,this.b=this.c=this.e=this.f=0,this},e.prototype.rotate=function(e){var t=Math.cos(.017453292519943295*e),r=Math.sin(.017453292519943295*e);return this.transform(t,r,-r,t,0,0)},e.prototype.rotateDeg=function(e){return this.rotate(.017453292519943295*e)},e.prototype.scale=function(e,t){return this.transform(e,0,0,t,0,0)},e.prototype.scaleX=function(e){return this.transform(e,0,0,1,0,0)},e.prototype.scaleY=function(e){return this.transform(1,0,0,e,0,0)},e.prototype.skew=function(e,t){return this.transform(1,t,e,1,0,0)},e.prototype.skewX=function(e){return this.transform(1,0,e,1,0,0)},e.prototype.skewY=function(e){return this.transform(1,e,0,1,0,0)},e.prototype.setTransform=function(e,t,r,n,o,a){return this.a=e,this.b=t,this.c=r,this.d=n,this.e=o,this.f=a,this},e.prototype.translate=function(e,t){return this.transform(1,0,0,1,e,t)},e.prototype.transform=function(t,r,n,o,a,i){var s=this.a,u=this.b,c=this.c,l=this.d,f=this.e,p=this.f,d=new e;return d.a=s*t+c*r,d.b=u*t+l*r,d.c=s*n+c*o,d.d=u*n+l*o,d.e=s*a+c*i+f,d.f=u*a+l*i+p,d},e.prototype.multiply=function(t){var r=new e,n=this.a,o=this.b,a=this.c,i=this.d,s=this.e,u=this.f;return r.a=n*t.a+a*t.b,r.b=o*t.a+i*t.b,r.c=n*t.c+a*t.d,r.d=o*t.c+i*t.d,r.e=n*t.e+a*t.f+s,r.f=o*t.e+i*t.f+u,r},e.prototype.inverse=function(){var t=this.a,r=this.b,n=this.c,o=this.d,a=this.e,i=this.f,s=new e,u=t*o-r*n;return s.a=o/u,s.b=-r/u,s.c=-n/u,s.d=t/u,s.e=(n*i-o*a)/u,s.f=-(t*i-r*a)/u,s},e.prototype.interpolate=function(t,r){var n=new e;return n.a=this.a+(t.a-this.a)*r,n.b=this.b+(t.b-this.b)*r,n.c=this.c+(t.c-this.c)*r,n.d=this.d+(t.d-this.d)*r,n.e=this.e+(t.e-this.e)*r,n.f=this.f+(t.f-this.f)*r,n},e.prototype.applyToPoint=function(e,t){return{x:e*this.a+t*this.c+this.e,y:e*this.b+t*this.d+this.f}},e.prototype.applyToArray=function(e){var t,r,n=0,o=[];if("number"==typeof e[0])for(r=e.length;n<r;)t=this.applyToPoint(e[n++],e[n++]),o.push(t.x,t.y);else for(;t=e[n];n++)o.push(this.applyToPoint(t.x,t.y));return o},e.prototype.applyToTypedArray=function(e){for(var t,r=0,n=e.length,o=new Float32Array(n);r<n;)t=this.applyToPoint(e[r],e[r+1]),o[r++]=t.x,o[r++]=t.y;return o},e.prototype.isIdentity=function(){return this._isEqual(this.a,1)&&this._isEqual(this.b,0)&&this._isEqual(this.c,0)&&this._isEqual(this.d,1)&&this._isEqual(this.e,0)&&this._isEqual(this.f,0)},e.prototype.isEqual=function(e){return this._isEqual(this.a,e.a)&&this._isEqual(this.b,e.b)&&this._isEqual(this.c,e.c)&&this._isEqual(this.d,e.d)&&this._isEqual(this.e,e.e)&&this._isEqual(this.f,e.f)},e.prototype._isEqual=function(e,t){return Math.abs(e-t)<1e-14},e.prototype.matrixToText=function(){return this.a+", "+this.b+", "+this.c+", "+this.d+", "+this.e+", "+this.f},Object.defineProperty(e.prototype,"trx",{get:function(){return this.e},set:function(e){this.e=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"try",{get:function(){return this.f},set:function(e){this.f=e},enumerable:!1,configurable:!0}),e}(),ye=function(){function e(e,t){this.x=0,this.y=0,this.matrixTransform=this.matrixTransform.bind(this),this.x=e,this.y=t}return e.prototype.matrixTransform=function(e){var t=this.x,r=this.y;this.x=t*e.a+r*e.c+e.e,this.y=t*e.b+r*e.d+e.f},e}(),he=new(function(){function e(){var e=this;this.addAll=function(t){t&&(e.data={},t.forEach((function(t){e.data[t.id]=t})))},this.data={}}return e.prototype.add=function(e,t){this.data[e]=t},e.prototype.del=function(e){delete this.data[e]},e.prototype.get=function(e){return this.data[e]},e.prototype.delAll=function(){this.data={}},e}()),me=180/Math.PI,ve=function(){function e(){}return e.normaliseVector=function(e){return Math.abs(e.x)>Math.abs(e.y)?e.x>0?{x:1,y:0}:{x:-1,y:0}:e.y>0?{x:0,y:1}:{x:0,y:-1}},e.calculateDistance=function(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))},e.calculateRotationsAngle=function(t,r,n){var o=e.calculateDistance(t,r),a=e.calculateDistance(n,r),i=e.calculateDistance(t,n),s=Math.pow(o,2)+Math.pow(a,2)-Math.pow(i,2),u=2*o*a;return Math.acos(s/u)*me},e.getParentMatrix=function(t,r){var n=he.get(t).parent;if(!n)return r;var o=he.get(n).matrix;return r=r?r.multiply(o):o,e.getParentMatrix(n,r)},e.getCombineMatrix=function(t){var r=new de(he.get(t).transform),n=e.getParentMatrix(t,r);return n||r},e.degrees=function(e){return e*me},e.rotateToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).rotate(r)).translate(-e,-t):n},e.scaleToCenter=function(e,t,r,n){return 0!=r&&n?n=(n=(n=n.translate(e,t)).scale(r,r)).translate(-e,-t):n},e.getRotationDirection=function(t,r,n){var o={x:r.x-t.x,y:r.y-t.y};return 0===(o=e.normaliseVector(o)).y?t.y-n.y<0?o.x>0?ue:ce:o.x<0?ue:ce:t.x-n.x>0?o.y>0?ue:ce:o.y<0?ue:ce},e.transfromIncrement=function(e,t,r,n){var o=r;o=r?o.multiply(n):n;var a=new ye(0,0),i=new ye(e,t),s=o.inverse();return a.matrixTransform(s),i.matrixTransform(s),{dx:i.x-a.x,dy:i.y-a.y}},e.coordinatesGlobalToLocal=function(e,t,r,n){var o=new ye(e,t);return r&&o.matrixTransform(r.inverse()),n&&o.matrixTransform(n.inverse()),o},e.transformToViewPort=function(e,t,r,n,o){var a=new ye(e,t);if(!r||!n)return a;o&&(r=r.multiply(o));var i=r.multiply(n);return a.matrixTransform(i),a},e.viewPorttoObject=function(e,t,r,n){var o=new de;o.translate(e,t);var a=r||o;return n&&(a=a.multiply(n)),a=a.inverse(),o.multiply(a)},e.calculateRubberBandPosition=function(t,r,n,o){if(!t)return{x:0,y:0,w:0,h:0,transform:0};var a=r,i=t;(a=this.calculateTrasformBox(a,n,i,o)).x=a.x-le,a.y=a.y-le,a.w=a.w+2*le,a.h=a.h+2*le;var s=new de,u=a.x+a.w/2,c=a.y+a.h/2;return s=e.rotateToCenter(u,c,a.angle,s),{x:a.x,y:a.y,w:a.w,h:a.h,transform:s.matrixToText()}},e.calculateTrasformBox=function(t,r,n,o){var a=0;0!=n.b&&(a=e.degrees(Math.atan2(n.b,n.a))),o&&(r=r.multiply(o));var i=t.w/2,s=t.h/2;n=e.rotateToCenter(i,s,-a,n);var u=r.multiply(n),c=new ye(0,0),l=new ye(t.w,t.h);return c.matrixTransform(u),l.matrixTransform(u),l.x=l.x-c.x,l.y=l.y-c.y,{x:c.x,y:c.y,w:l.x,h:l.y,angle:a}},e.moveObject=function(t,r,n){var o=e.transfromIncrement(t,r,n.viewportMtx,n.selection.matrix),a=n.selection.matrix;return{matrix:a=a.translate(-o.dx,-o.dy),box:null}},e.checkConstrains=function(t,r,n){if(!n)return!0;var o=new ye(0,0),a=new ye(t.w,0),i=new ye(0,t.h),s=new ye(t.w,t.h);return o.matrixTransform(r),!!e.isPointInBox(o,n)&&(a.matrixTransform(r),!!e.isPointInBox(a,n)&&(i.matrixTransform(r),!!e.isPointInBox(i,n)&&(s.matrixTransform(r),!!e.isPointInBox(s,n))))},e.isPointInBox=function(e,t){return!(e.x<0||e.y<0)&&!(e.x>t.w||e.y>t.h)},e.rotateObject=function(t,r,n,o,a){var i=a.box,s=i.x+i.w/2,u=i.y+i.h/2,c={x:n,y:o},l={x:t,y:r},f=e.transformToViewPort(s,u,a.viewportMtx,a.selection.matrix,a.parentMtx);console.log("rotating cx:"+f.x+" cy:"+f.y+" x:"+t+" y:"+r+" ");var p=e.getRotationDirection(c,l,f),d=e.calculateRotationsAngle(c,f,l);d=p==ue?d:-d;var y=a.selection.matrix;return{matrix:y=(y=(y=y.translate(s,u)).rotate(d)).translate(-s,-u),box:null}},e.scaleObject=function(t,r,n,o){var a=o.box,i=a.x+a.w/2,s=a.y+a.h/2;n||(t=-t,r=-r);var u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=e.transfromIncrement(a.x+a.w-i,a.y+a.h-s,o.viewportMtx,o.selection.matrix),l=e.transfromIncrement(a.x+a.w-u.dx-i,a.y+a.h-u.dy-s,o.viewportMtx,o.selection.matrix);if(!(a.x+a.w-u.dx<i||a.y+a.h-u.dy<s)){var f=l.dx/c.dx,p=l.dy/c.dy,d=o.selection.matrix;return{matrix:d=(d=(d=d.translate(i,s)).scale(f,p)).translate(-i,-s),box:null}}},e.resizeObject=function(t,r,n,o){var a=o.selection.box,i=0,s=0,u=e.transfromIncrement(t,r,o.viewportMtx,o.selection.matrix),c=0,l=0,f=o.selection.matrix;switch(n){case oe:i=-u.dx,s=-u.dy,c=u.dx,l=u.dy;break;case ae:s=-u.dy,c=-u.dx,l=u.dy;break;case ie:i=-u.dx,c=u.dx,l=-u.dy;break;case se:c=-u.dx,l=-u.dy}var p={x:0,y:0,w:a.w+c,h:a.h+l};return{matrix:f=f.translate(i,s),box:p}},e}();function be(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}be(".rubberBand-Container{\n pointer-events:none;\n position:absolute;\n}\n.rubberBand{\n fill:none;\n pointer-events:none;\n stroke:rgb(238, 99, 243);\n stroke-width:1;\n fill-opacity:0.0;\n stroke-opacity:1;\n stroke-dasharray:2\n}\n\n.rubberBandHandle{\n fill:white;\n pointer-events:fill;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}\n\n.rubberConnector{\n pointer-events:fill;\n fill:white;\n stroke:#ee63f3;\n stroke-width:1;\n fill-opacity:1;\n stroke-opacity:0.9;\n}");var ge=function(e){function t(t){var r=e.call(this,t)||this;return r.calculateCoordinates=r.calculateCoordinates.bind(r),r}return r(t,e),t.prototype.shouldComponentUpdate=function(e,t){return e.selectedItem||e.viewport.viewportTr!==this.props.viewport.viewportTr||e.viewport.selectedTr!==this.props.viewport.viewportTr||e.viewport.parentTr!==this.props.viewport.viewportTr},t.prototype.calculateCoordinates=function(){var e=ve.calculateRubberBandPosition(this.props.viewport.selection.matrix,this.props.viewport.selection.box,this.props.viewport.viewportMtx,null);return{x:e.x,y:e.y,w:e.w,h:e.h,transform:e.transform}},t.prototype.render=function(){var e=this,t=this.calculateCoordinates();return this.props.selection?ee.createElement("svg",{id:"Rubberband",className:"rubberBand-Container",width:"100%",height:"100%",onMouseDown:function(t){e.props.doRubberMouseDown(t,re)}},ee.createElement("g",{transform:"matrix("+t.transform+")"},ee.createElement("rect",{ref:"ruberBandRect",className:"rubberBand",x:t.x,y:t.y,width:t.w,height:t.h}),ee.createElement("rect",{ref:"ruberBandTopLeft",className:"rubberBandHandle",x:t.x-le,y:t.y-le,width:le,height:le,onMouseDown:function(t){e.props.doRubberMouseDown(t,oe)}}),ee.createElement("rect",{ref:"ruberBandTopRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y-le,width:le,height:le,onMouseDown:function(t){e.props.doRubberMouseDown(t,ae)}}),ee.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x-le,y:t.y+t.h,width:le,height:le,onMouseDown:function(t){e.props.doRubberMouseDown(t,ie)}}),ee.createElement("rect",{ref:"ruberBandBottomRight",className:"rubberBandHandle",x:t.x+t.w,y:t.y+t.h,width:le,height:le,onMouseDown:function(t){e.props.doRubberMouseDown(t,se)}}),ee.createElement("rect",{ref:"ruberBandBottomLeft",className:"rubberBandHandle",x:t.x+t.w/2-le,y:t.y+1.5*t.h,width:le,height:le,onMouseDown:function(t){e.props.doRubberMouseDown(t,ne)}}))):null},t}(ee.Component),xe=function(){function e(){}return e.prototype.pan=function(e,t,r){r.e-=e,r.f-=t},e.prototype.zoom=function(e,t,r,n){n.e-=t,n.f-=r,n.a*=e,n.b*=e,n.c*=e,n.d*=e,n.e*=e,n.f*=e,n.e+=t,n.f+=r},e}(),we=function(e){function t(t){var r=e.call(this,t)||this;r.x=0,r.y=0,r.w=100,r.h=100,r.transform="1,0,0,1,0,0",r.id="";var n=t.children?t.children.props:null,o=n.x,a=n.y,i=n.w,s=n.h;return r.x=o||0,r.y=a||0,r.w=i||100,r.h=s||100,r.transform="1,0,0,1,"+r.x+","+r.y,r.id=t.id,r}return r(t,e),t.prototype.render=function(){var e=this,t=this.props,r=t.transform,n=t.children,o=t.box;return this.transform=r||this.transform,o&&(this.w=o.w,this.h=o.h),console.log(this.transform),ee.createElement("div",{id:""+this.props.id,style:{overflow:"hidden",transformOrigin:"0% 0%",top:0,left:0,height:this.h,width:this.w,position:"absolute",transform:"matrix("+this.transform+")"},onMouseDown:function(t){return e.props.doObjectMouseDown(t,null,e)}},n)},t}(ee.PureComponent);be(".zoom-pan-container {\n position: relative;\n width: 100%;\n height: 100%;\n outline: 0;\n overflow: hidden;\n user-select: none;\n}\n");var _e=function(e){function t(t){var r=e.call(this,t)||this;return r.selection=null,r.draggingPositionX=0,r.draggingPositionY=0,r.mode=te,r.addRemoveMouseListener=function(e,t){e.dragging&&!t.dragging?(document.addEventListener("mousemove",r.doMouseMove),document.addEventListener("mouseup",r.doMouseUp)):!e.dragging&&t.dragging&&(document.removeEventListener("mousemove",r.doMouseMove),document.removeEventListener("mouseup",r.doMouseUp))},r.getSelectedObjInfo=function(e){var t=e?new de(e.transform):new de,n=e?{id:e.id,x:0,y:0,w:e.w,h:e.h}:{id:"",x:0,y:0,w:0,h:0},o=e?r.getObjType(e):fe;return{id:e?e.id:-1,item:e,matrix:t,transform:t.matrixToText(),box:n,type:o}},r.doGlobalMouseDown=function(e){0===e.button&&(r.setDraggingPosition(e),r.setState({dragging:!0}),r.mode=te)},r.doObjectMouseDown=function(e,t,n){e.stopPropagation(),r.setDraggingPosition(e),r.setState({dragging:!0}),r.props.onSelectItem&&r.props.onSelectItem(t,n),r.selection=n;var o=r.getSelectedObjInfo(n);r.setState({dragging:!0,selection:o}),r.mode=re},r.doRubberMouseDown=function(e,t,n){e.stopPropagation(),r.setDraggingPosition(e),r.setState({dragging:!0}),r.mode=t},r.doMouseMove=function(e){if(r.state.dragging){console.log("Moving"),e.stopPropagation();var t=r.adjustCoor(e.clientX,e.clientY),n=t.x,o=t.y,a=r.draggingPositionX-n,i=r.draggingPositionY-o;switch(r.mode){case te:r.pan(a,i);break;case re:r.updateSelectedItem(ve.moveObject(a,i,r.state));break;case ne:r.updateSelectedItem(ve.rotateObject(n,o,r.draggingPositionX,r.draggingPositionY,r.state));break;case oe:case ae:case ie:case se:var s=ve.resizeObject(a,i,r.mode,r.state);r.updateSelectedItem(s)}r.setDraggingPosition(e)}},r.doMouseUp=function(e){r.setState({dragging:!1}),r.state.selection.type==pe&&r.props.onSelectItem&&r.props.onSelectItem(null,null),r.props.selectedItem&&r.props.onChange&&r.props.onChange(r.props.selectedItem,{transform:r.state.selection.matrix.matrixToText(),w:r.state.selection.box.w,h:r.state.selection.box.h})},r.doMouseWheel=function(e){e.preventDefault();var t=r.adjustCoor(e.clientX,e.clientY),n=t.x,o=t.y,a=e.deltaY>0?1.05:.95;r.zoom(a,n,o)},r.onDragOver=function(e){e.preventDefault()},r.onDrop=function(e){},r.addItem=function(e,t,n){var o=parseInt(e.dataTransfer.getData("type")),a=e.dataTransfer.getData("subtype"),i=parseInt(e.dataTransfer.getData("objtype")),s={name:e.dataTransfer.getData("name"),type:o,objType:i,subtype:a,transform:n},u=r.props.onAddItem;u&&u(s,t)},r.updateSelectedItem=function(e){var t=e.matrix,o=e.box?e.box:r.state.selection.box,a=n({},r.state.selection);a.matrix=t,a.transform=t.matrixToText(),a.box=o,r.setState({box:o,selection:a})},r.pan=function(e,t){r.zoomPanHelper.pan(e,t,r.state.viewportMtx),r.applyMatrix()},r.zoom=function(e,t,n){r.zoomPanHelper.zoom(e,t,n,r.state.viewportMtx),r.applyMatrix()},r.applyMatrix=function(){var e=r.state.viewportMtx.matrixToText();r.setState({viewportTr:e})},r.setDraggingPosition=function(e){var t=r.refs.container;r.draggingPositionX=e.clientX-t.offsetLeft,r.draggingPositionY=e.clientY-t.offsetTop},r.renderChildren=function(){var e=r.state.selection,t=r.props.children;return null==t?null:(console.log(t),t.map((function(t,n){console.log(t.id),console.log("s:"+e.id+" id:"+n+" ");var o=e.id==n?e.transform:null,a=e.id==n?e.box:null;return console.log(a),ee.createElement(we,{id:n,key:n,transform:o,box:a,doObjectMouseDown:r.doObjectMouseDown},t)})))},r.zoomPanHelper=new xe,r.state={dragging:!1,viewportMtx:new de(r.props.viewportMtx),viewportTr:"1,0,0,1,0,0",selection:r.getSelectedObjInfo(null)},r.draggingPositionX=0,r.draggingPositionY=0,r.mode=te,r}return r(t,e),t.prototype.shouldComponentUpdate=function(e,t){return t.dragging!==this.state.dragging&&this.addRemoveMouseListener(t,this.state),e.selectedItem!==this.props.selectedItem&&(t.selection=this.getSelectedObjInfo(e.selectedItem)),!0},t.prototype.adjustCoor=function(e,t){var r=this.refs.container;return{x:e-r.offsetLeft,y:t-r.offsetTop}},t.prototype.ownEvent=function(e){e.preventDefault(),e.stopPropagation()},t.prototype.getObjType=function(e){return e.hasOwnProperty("start")&&e.hasOwnProperty("output")&&e.hasOwnProperty("end")&&e.hasOwnProperty("input")?pe:fe},t.prototype.render=function(){var e=this.state.viewportTr;return ee.createElement("div",{ref:"container",className:"zoom-pan-container",onDragOver:this.onDragOver,onDrop:this.onDrop,tabIndex:0},ee.createElement("div",{id:"viewport",ref:"mainSvg",style:{position:"relative",userSelect:"none",height:"100%"},onMouseDown:this.doGlobalMouseDown,onWheel:this.doMouseWheel},ee.createElement("div",{style:{transform:"matrix("+e+")",position:"absolute"}},this.renderChildren()),ee.createElement(ge,{selection:this.selection,viewport:this.state,doRubberMouseDown:this.doRubberMouseDown})))},t}(ee.Component);return e.ZoomPan=_e,e}({}); | ||
| //# sourceMappingURL=lib.umd.js.map |
| { | ||
| "name": "react-zoom-pan", | ||
| "version": "0.1.38", | ||
| "version": "0.1.39", | ||
| "description": "A component to add zoom pan,move,resize and rotate elements for react apps", | ||
@@ -5,0 +5,0 @@ "private": false, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by181.1%
913049
- Lines of code
- increased by62.14%
848
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes