react-canvas-draw - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

es/index.js

@@ -65,4 +65,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
       _this.image = new Image();
-      _this.image.src = _this.props.imgSrc;
 
+      // Prevent SecurityError "Tainted canvases may not be exported." #70
+      _this.image.crossOrigin = "anonymous";
+
       // Draw the image once loaded
@@ -72,2 +74,3 @@ _this.image.onload = function () {
       };
+      _this.image.src = _this.props.imgSrc;
     };
@@ -193,3 +196,8 @@
 
-    _this.handleTouchStart = function (e) {
+    _this.handleDrawStart = function (e) {
+      e.preventDefault();
+
+      // Start drawing
+      _this.isPressing = true;
+
       var _this$getPointerPos = _this.getPointerPos(e),
@@ -199,9 +207,12 @@ x = _this$getPointerPos.x,
 
-      _this.lazy.update({ x: x, y: y }, { both: true });
-      _this.handleMouseDown(e);
+      if (e.touches && e.touches.length > 0) {
+        // on touch, set catenary position to touch pos
+        _this.lazy.update({ x: x, y: y }, { both: true });
+      }
 
-      _this.mouseHasMoved = true;
+      // Ensure the initial down position gets added to our line
+      _this.handlePointerMove(x, y);
     };
 
-    _this.handleTouchMove = function (e) {
+    _this.handleDrawMove = function (e) {
       e.preventDefault();
@@ -216,27 +227,11 @@
 
-    _this.handleTouchEnd = function (e) {
-      _this.handleMouseUp(e);
-      var brush = _this.lazy.getBrushCoordinates();
-      _this.lazy.update({ x: brush.x, y: brush.y }, { both: true });
-      _this.mouseHasMoved = true;
-    };
-
-    _this.handleMouseDown = function (e) {
+    _this.handleDrawEnd = function (e) {
       e.preventDefault();
-      _this.isPressing = true;
-    };
 
-    _this.handleMouseMove = function (e) {
-      var _this$getPointerPos3 = _this.getPointerPos(e),
-          x = _this$getPointerPos3.x,
-          y = _this$getPointerPos3.y;
+      // Draw to this end pos
+      _this.handleDrawMove(e);
 
-      _this.handlePointerMove(x, y);
-    };
-
-    _this.handleMouseUp = function (e) {
-      e.preventDefault();
+      // Stop drawing & save the drawn line
       _this.isDrawing = false;
       _this.isPressing = false;
-
       _this.saveLine();
@@ -270,2 +265,3 @@ };
         _this.drawGrid(_this.ctx.grid);
+        _this.drawImage();
         _this.loop({ once: true });
@@ -306,6 +302,6 @@ }
 
-      var hasChanged = _this.lazy.update({ x: x, y: y });
+      _this.lazy.update({ x: x, y: y });
       var isDisabled = !_this.lazy.isEnabled();
 
-      if (_this.isPressing && hasChanged && !_this.isDrawing || isDisabled && _this.isPressing) {
+      if (_this.isPressing && !_this.isDrawing || isDisabled && _this.isPressing) {
         // Start drawing and add point
@@ -316,3 +312,3 @@ _this.isDrawing = true;
 
-      if (_this.isDrawing && (_this.lazy.brushHasMoved() || isDisabled)) {
+      if (_this.isDrawing) {
         // Add new point
@@ -594,10 +590,10 @@ _this.points.push(_this.lazy.brush.toObject());
           style: _extends({}, canvasStyle, { zIndex: zIndex }),
-          onMouseDown: isInterface ? _this3.handleMouseDown : undefined,
-          onMouseMove: isInterface ? _this3.handleMouseMove : undefined,
-          onMouseUp: isInterface ? _this3.handleMouseUp : undefined,
-          onMouseOut: isInterface ? _this3.handleMouseUp : undefined,
-          onTouchStart: isInterface ? _this3.handleTouchStart : undefined,
-          onTouchMove: isInterface ? _this3.handleTouchMove : undefined,
-          onTouchEnd: isInterface ? _this3.handleTouchEnd : undefined,
-          onTouchCancel: isInterface ? _this3.handleTouchEnd : undefined
+          onMouseDown: isInterface ? _this3.handleDrawStart : undefined,
+          onMouseMove: isInterface ? _this3.handleDrawMove : undefined,
+          onMouseUp: isInterface ? _this3.handleDrawEnd : undefined,
+          onMouseOut: isInterface ? _this3.handleDrawEnd : undefined,
+          onTouchStart: isInterface ? _this3.handleDrawStart : undefined,
+          onTouchMove: isInterface ? _this3.handleDrawMove : undefined,
+          onTouchEnd: isInterface ? _this3.handleDrawEnd : undefined,
+          onTouchCancel: isInterface ? _this3.handleDrawEnd : undefined
         });
@@ -604,0 +600,0 @@ })

lib/index.js

@@ -83,4 +83,6 @@ "use strict";
       _this.image = new Image();
-      _this.image.src = _this.props.imgSrc;
 
+      // Prevent SecurityError "Tainted canvases may not be exported." #70
+      _this.image.crossOrigin = "anonymous";
+
       // Draw the image once loaded
@@ -90,2 +92,3 @@ _this.image.onload = function () {
       };
+      _this.image.src = _this.props.imgSrc;
     };
@@ -211,3 +214,8 @@
 
-    _this.handleTouchStart = function (e) {
+    _this.handleDrawStart = function (e) {
+      e.preventDefault();
+
+      // Start drawing
+      _this.isPressing = true;
+
       var _this$getPointerPos = _this.getPointerPos(e),
@@ -217,9 +225,12 @@ x = _this$getPointerPos.x,
 
-      _this.lazy.update({ x: x, y: y }, { both: true });
-      _this.handleMouseDown(e);
+      if (e.touches && e.touches.length > 0) {
+        // on touch, set catenary position to touch pos
+        _this.lazy.update({ x: x, y: y }, { both: true });
+      }
 
-      _this.mouseHasMoved = true;
+      // Ensure the initial down position gets added to our line
+      _this.handlePointerMove(x, y);
     };
 
-    _this.handleTouchMove = function (e) {
+    _this.handleDrawMove = function (e) {
       e.preventDefault();
@@ -234,27 +245,11 @@
 
-    _this.handleTouchEnd = function (e) {
-      _this.handleMouseUp(e);
-      var brush = _this.lazy.getBrushCoordinates();
-      _this.lazy.update({ x: brush.x, y: brush.y }, { both: true });
-      _this.mouseHasMoved = true;
-    };
-
-    _this.handleMouseDown = function (e) {
+    _this.handleDrawEnd = function (e) {
       e.preventDefault();
-      _this.isPressing = true;
-    };
 
-    _this.handleMouseMove = function (e) {
-      var _this$getPointerPos3 = _this.getPointerPos(e),
-          x = _this$getPointerPos3.x,
-          y = _this$getPointerPos3.y;
+      // Draw to this end pos
+      _this.handleDrawMove(e);
 
-      _this.handlePointerMove(x, y);
-    };
-
-    _this.handleMouseUp = function (e) {
-      e.preventDefault();
+      // Stop drawing & save the drawn line
       _this.isDrawing = false;
       _this.isPressing = false;
-
       _this.saveLine();
@@ -288,2 +283,3 @@ };
         _this.drawGrid(_this.ctx.grid);
+        _this.drawImage();
         _this.loop({ once: true });
@@ -324,6 +320,6 @@ }
 
-      var hasChanged = _this.lazy.update({ x: x, y: y });
+      _this.lazy.update({ x: x, y: y });
       var isDisabled = !_this.lazy.isEnabled();
 
-      if (_this.isPressing && hasChanged && !_this.isDrawing || isDisabled && _this.isPressing) {
+      if (_this.isPressing && !_this.isDrawing || isDisabled && _this.isPressing) {
         // Start drawing and add point
@@ -334,3 +330,3 @@ _this.isDrawing = true;
 
-      if (_this.isDrawing && (_this.lazy.brushHasMoved() || isDisabled)) {
+      if (_this.isDrawing) {
         // Add new point
@@ -612,10 +608,10 @@ _this.points.push(_this.lazy.brush.toObject());
           style: _extends({}, canvasStyle, { zIndex: zIndex }),
-          onMouseDown: isInterface ? _this3.handleMouseDown : undefined,
-          onMouseMove: isInterface ? _this3.handleMouseMove : undefined,
-          onMouseUp: isInterface ? _this3.handleMouseUp : undefined,
-          onMouseOut: isInterface ? _this3.handleMouseUp : undefined,
-          onTouchStart: isInterface ? _this3.handleTouchStart : undefined,
-          onTouchMove: isInterface ? _this3.handleTouchMove : undefined,
-          onTouchEnd: isInterface ? _this3.handleTouchEnd : undefined,
-          onTouchCancel: isInterface ? _this3.handleTouchEnd : undefined
+          onMouseDown: isInterface ? _this3.handleDrawStart : undefined,
+          onMouseMove: isInterface ? _this3.handleDrawMove : undefined,
+          onMouseUp: isInterface ? _this3.handleDrawEnd : undefined,
+          onMouseOut: isInterface ? _this3.handleDrawEnd : undefined,
+          onTouchStart: isInterface ? _this3.handleDrawStart : undefined,
+          onTouchMove: isInterface ? _this3.handleDrawMove : undefined,
+          onTouchEnd: isInterface ? _this3.handleDrawEnd : undefined,
+          onTouchCancel: isInterface ? _this3.handleDrawEnd : undefined
         });
@@ -622,0 +618,0 @@ })

package.json

 {
   "name": "react-canvas-draw",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A simple yet powerful canvas-drawing component for React.",
@@ -37,4 +37,4 @@ "main": "lib/index.js",
     "babel-eslint": "^7.2.3",
-    "codecov": "^3.5.0",
-    "coveralls": "^3.0.9",
+    "codecov": "^3.6.5",
+    "coveralls": "^3.1.0",
     "css-loader": "^0.28.9",
@@ -41,0 +41,0 @@ "enzyme": "^3.3.0",

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v1.1.0 - https://embiem.github.io/react-canvas-draw/
+ * react-canvas-draw v1.1.1 - https://embiem.github.io/react-canvas-draw/
  * MIT Licensed
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCanvasDraw=t(require("react")):e.ReactCanvasDraw=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(1),a=(i=o)&&i.__esModule?i:{default:i};var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.default),r(t,[{key:"update",value:function(e){this.x=e.x,this.y=e.y}},{key:"moveByAngle",value:function(e,t){var n=e+Math.PI/2;this.x=this.x+Math.sin(n)*t,this.y=this.y-Math.cos(n)*t}},{key:"equalsTo",value:function(e){return this.x===e.x&&this.y===e.y}},{key:"getDifferenceTo",value:function(e){return new a.default(this.x-e.x,this.y-e.y)}},{key:"getDistanceTo",value:function(e){var t=this.getDifferenceTo(e);return Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2))}},{key:"getAngleTo",value:function(e){var t=this.getDifferenceTo(e);return Math.atan2(t.y,t.x)}},{key:"toObject",value:function(){return{x:this.x,y:this.y}}}]),t}();t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default=function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.x=t,this.y=n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();var r=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.x=t,this.y=n}return i(e,[{key:"update",value:function(e){this.x=e.x,this.y=e.y}},{key:"getDifferenceTo",value:function(t){return new e(this.x-t.x,this.y-t.y)}},{key:"getDistanceTo",value:function(e){var t=this.getDifferenceTo(e);return Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2))}}]),e}();t.default=r},function(e,t,n){e.exports=n(4)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return b});var i,r,o=n(5),a=n.n(o),s=n(6),u=n.n(s),c=n(9),h=(n.n(c),n(11)),l=(n.n(h),n(13)),d=n(15),f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e};function p(e,t){return{x:e.x+(t.x-e.x)/2,y:e.y+(t.y-e.y)/2}}var v={display:"block",position:"absolute"},y=[{name:"interface",zIndex:15},{name:"drawing",zIndex:11},{name:"temp",zIndex:12},{name:"grid",zIndex:10}],b=(u.a.oneOfType([u.a.number,u.a.string]),r=i=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var i=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));return i.componentWillUnmount=function(){i.canvasObserver.unobserve(i.canvasContainer)},i.drawImage=function(){i.props.imgSrc&&(i.image=new Image,i.image.src=i.props.imgSrc,i.image.onload=function(){return Object(d.a)({ctx:i.ctx.grid,img:i.image})})},i.undo=function(){var e=i.lines.slice(0,-1);i.clear(),i.simulateDrawingLines({lines:e,immediate:!0}),i.triggerOnChange()},i.getSaveData=function(){return JSON.stringify({lines:i.lines,width:i.props.canvasWidth,height:i.props.canvasHeight})},i.loadSaveData=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i.props.immediateLoading;if("string"!=typeof e)throw new Error("saveData needs to be of type string!");var n=JSON.parse(e),r=n.lines,o=n.width,a=n.height;if(!r||"function"!=typeof r.push)throw new Error("saveData.lines needs to be an array!");if(i.clear(),o===i.props.canvasWidth&&a===i.props.canvasHeight)i.simulateDrawingLines({lines:r,immediate:t});else{var s=i.props.canvasWidth/o,u=i.props.canvasHeight/a,c=(s+u)/2;i.simulateDrawingLines({lines:r.map(function(e){return f({},e,{points:e.points.map(function(e){return{x:e.x*s,y:e.y*u}}),brushRadius:e.brushRadius*c})}),immediate:t})}},i.simulateDrawingLines=function(e){var t=e.lines,n=e.immediate,r=0,o=n?0:i.props.loadTimeOffset;t.forEach(function(e){var t=e.points,a=e.brushColor,s=e.brushRadius;if(n)return i.drawPoints({points:t,brushColor:a,brushRadius:s}),i.points=t,void i.saveLine({brushColor:a,brushRadius:s});for(var u=function(e){r+=o,window.setTimeout(function(){i.drawPoints({points:t.slice(0,e+1),brushColor:a,brushRadius:s})},r)},c=1;c<t.length;c++)u(c);r+=o,window.setTimeout(function(){i.points=t,i.saveLine({brushColor:a,brushRadius:s})},r)})},i.handleTouchStart=function(e){var t=i.getPointerPos(e),n=t.x,r=t.y;i.lazy.update({x:n,y:r},{both:!0}),i.handleMouseDown(e),i.mouseHasMoved=!0},i.handleTouchMove=function(e){e.preventDefault();var t=i.getPointerPos(e),n=t.x,r=t.y;i.handlePointerMove(n,r)},i.handleTouchEnd=function(e){i.handleMouseUp(e);var t=i.lazy.getBrushCoordinates();i.lazy.update({x:t.x,y:t.y},{both:!0}),i.mouseHasMoved=!0},i.handleMouseDown=function(e){e.preventDefault(),i.isPressing=!0},i.handleMouseMove=function(e){var t=i.getPointerPos(e),n=t.x,r=t.y;i.handlePointerMove(n,r)},i.handleMouseUp=function(e){e.preventDefault(),i.isDrawing=!1,i.isPressing=!1,i.saveLine()},i.handleCanvasResize=function(e,t){var n=i.getSaveData(),r=e,o=Array.isArray(r),a=0;for(r=o?r:r[Symbol.iterator]();;){var s;if(o){if(a>=r.length)break;s=r[a++]}else{if((a=r.next()).done)break;s=a.value}var u=s.contentRect,c=u.width,h=u.height;i.setCanvasSize(i.canvas.interface,c,h),i.setCanvasSize(i.canvas.drawing,c,h),i.setCanvasSize(i.canvas.temp,c,h),i.setCanvasSize(i.canvas.grid,c,h),i.drawGrid(i.ctx.grid),i.loop({once:!0})}i.loadSaveData(n,!0)},i.setCanvasSize=function(e,t,n){e.width=t,e.height=n,e.style.width=t,e.style.height=n},i.getPointerPos=function(e){var t=i.canvas.interface.getBoundingClientRect(),n=e.clientX,r=e.clientY;return e.changedTouches&&e.changedTouches.length>0&&(n=e.changedTouches[0].clientX,r=e.changedTouches[0].clientY),{x:n-t.left,y:r-t.top}},i.handlePointerMove=function(e,t){if(!i.props.disabled){var n=i.lazy.update({x:e,y:t}),r=!i.lazy.isEnabled();(i.isPressing&&n&&!i.isDrawing||r&&i.isPressing)&&(i.isDrawing=!0,i.points.push(i.lazy.brush.toObject())),i.isDrawing&&(i.lazy.brushHasMoved()||r)&&(i.points.push(i.lazy.brush.toObject()),i.drawPoints({points:i.points,brushColor:i.props.brushColor,brushRadius:i.props.brushRadius})),i.mouseHasMoved=!0}},i.drawPoints=function(e){var t=e.points,n=e.brushColor,r=e.brushRadius;i.ctx.temp.lineJoin="round",i.ctx.temp.lineCap="round",i.ctx.temp.strokeStyle=n,i.ctx.temp.clearRect(0,0,i.ctx.temp.canvas.width,i.ctx.temp.canvas.height),i.ctx.temp.lineWidth=2*r;var o=t[0],a=t[1];i.ctx.temp.moveTo(a.x,a.y),i.ctx.temp.beginPath();for(var s=1,u=t.length;s<u;s++){var c=p(o,a);i.ctx.temp.quadraticCurveTo(o.x,o.y,c.x,c.y),o=t[s],a=t[s+1]}i.ctx.temp.lineTo(o.x,o.y),i.ctx.temp.stroke()},i.saveLine=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.brushColor,n=e.brushRadius;if(!(i.points.length<2)){i.lines.push({points:[].concat(i.points),brushColor:t||i.props.brushColor,brushRadius:n||i.props.brushRadius}),i.points.length=0;var r=i.canvas.temp.width,o=i.canvas.temp.height;i.ctx.drawing.drawImage(i.canvas.temp,0,0,r,o),i.ctx.temp.clearRect(0,0,r,o),i.triggerOnChange()}},i.triggerOnChange=function(){i.props.onChange&&i.props.onChange(i)},i.clear=function(){i.lines=[],i.valuesChanged=!0,i.ctx.drawing.clearRect(0,0,i.canvas.drawing.width,i.canvas.drawing.height),i.ctx.temp.clearRect(0,0,i.canvas.temp.width,i.canvas.temp.height)},i.loop=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).once,t=void 0!==e&&e;if(i.mouseHasMoved||i.valuesChanged){var n=i.lazy.getPointerCoordinates(),r=i.lazy.getBrushCoordinates();i.drawInterface(i.ctx.interface,n,r),i.mouseHasMoved=!1,i.valuesChanged=!1}t||window.requestAnimationFrame(function(){i.loop()})},i.drawGrid=function(e){if(!i.props.hideGrid){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.beginPath(),e.setLineDash([5,1]),e.setLineDash([]),e.strokeStyle=i.props.gridColor,e.lineWidth=.5;for(var t=0;t<e.canvas.width;)t+=25,e.moveTo(t,0),e.lineTo(t,e.canvas.height);e.stroke();for(var n=0;n<e.canvas.height;)n+=25,e.moveTo(0,n),e.lineTo(e.canvas.width,n);e.stroke()}},i.drawInterface=function(e,t,n){i.props.hideInterface||(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.beginPath(),e.fillStyle=i.props.brushColor,e.arc(n.x,n.y,i.props.brushRadius,0,2*Math.PI,!0),e.fill(),e.beginPath(),e.fillStyle=i.props.catenaryColor,e.arc(t.x,t.y,4,0,2*Math.PI,!0),e.fill(),i.lazy.isEnabled()&&(e.beginPath(),e.lineWidth=2,e.lineCap="round",e.setLineDash([2,4]),e.strokeStyle=i.props.catenaryColor,i.catenary.drawToCanvas(i.ctx.interface,n,t,i.chainLength),e.stroke()),e.beginPath(),e.fillStyle=i.props.catenaryColor,e.arc(n.x,n.y,2,0,2*Math.PI,!0),e.fill())},i.canvas={},i.ctx={},i.catenary=new h.Catenary,i.points=[],i.lines=[],i.mouseHasMoved=!0,i.valuesChanged=!0,i.isDrawing=!1,i.isPressing=!1,i}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){var e=this;this.lazy=new c.LazyBrush({radius:this.props.lazyRadius*window.devicePixelRatio,enabled:!0,initialPoint:{x:window.innerWidth/2,y:window.innerHeight/2}}),this.chainLength=this.props.lazyRadius*window.devicePixelRatio,this.canvasObserver=new l.a(function(t,n){return e.handleCanvasResize(t,n)}),this.canvasObserver.observe(this.canvasContainer),this.drawImage(),this.loop(),window.setTimeout(function(){var t=window.innerWidth/2,n=window.innerHeight/2;e.lazy.update({x:t-e.chainLength/4,y:n},{both:!0}),e.lazy.update({x:t+e.chainLength/4,y:n},{both:!1}),e.mouseHasMoved=!0,e.valuesChanged=!0,e.clear(),e.props.saveData&&e.loadSaveData(e.props.saveData)},100)},t.prototype.componentDidUpdate=function(e){e.lazyRadius!==this.props.lazyRadius&&(this.chainLength=this.props.lazyRadius*window.devicePixelRatio,this.lazy.setRadius(this.props.lazyRadius*window.devicePixelRatio)),e.saveData!==this.props.saveData&&this.loadSaveData(this.props.saveData),JSON.stringify(e)!==JSON.stringify(this.props)&&(this.valuesChanged=!0)},t.prototype.render=function(){var e=this;return a.a.createElement("div",{className:this.props.className,style:f({display:"block",background:this.props.backgroundColor,touchAction:"none",width:this.props.canvasWidth,height:this.props.canvasHeight},this.props.style),ref:function(t){t&&(e.canvasContainer=t)}},y.map(function(t){var n=t.name,i=t.zIndex,r="interface"===n;return a.a.createElement("canvas",{key:n,ref:function(t){t&&(e.canvas[n]=t,e.ctx[n]=t.getContext("2d"))},style:f({},v,{zIndex:i}),onMouseDown:r?e.handleMouseDown:void 0,onMouseMove:r?e.handleMouseMove:void 0,onMouseUp:r?e.handleMouseUp:void 0,onMouseOut:r?e.handleMouseUp:void 0,onTouchStart:r?e.handleTouchStart:void 0,onTouchMove:r?e.handleTouchMove:void 0,onTouchEnd:r?e.handleTouchEnd:void 0,onTouchCancel:r?e.handleTouchEnd:void 0})}))},t}(o.PureComponent),i.defaultProps={onChange:null,loadTimeOffset:5,lazyRadius:12,brushRadius:10,brushColor:"#444",catenaryColor:"#0a0302",gridColor:"rgba(150,150,150,0.17)",backgroundColor:"#FFF",hideGrid:!1,canvasWidth:400,canvasHeight:400,disabled:!1,imgSrc:"",saveData:"",immediateLoading:!1,hideInterface:!1},r)},function(t,n){t.exports=e},function(e,t,n){e.exports=n(7)()},function(e,t,n){"use strict";var i=n(8);function r(){}e.exports=function(){function e(e,t,n,r,o,a){if(a!==i){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LazyPoint=t.Point=t.LazyBrush=void 0;var i=a(n(10)),r=a(n(1)),o=a(n(0));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyBrush=i.default,t.Point=r.default,t.LazyPoint=o.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(0),a=(i=o)&&i.__esModule?i:{default:i};var s=30,u=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.radius,i=void 0===n?s:n,r=t.enabled,o=void 0===r||r,u=t.initialPoint,c=void 0===u?{x:0,y:0}:u;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.radius=i,this._isEnabled=o,this.pointer=new a.default(c.x,c.y),this.brush=new a.default(c.x,c.y),this.angle=0,this.distance=0,this._hasMoved=!1}return r(e,[{key:"enable",value:function(){this._isEnabled=!0}},{key:"disable",value:function(){this._isEnabled=!1}},{key:"isEnabled",value:function(){return this._isEnabled}},{key:"setRadius",value:function(e){this.radius=e}},{key:"getRadius",value:function(){return this.radius}},{key:"getBrushCoordinates",value:function(){return this.brush.toObject()}},{key:"getPointerCoordinates",value:function(){return this.pointer.toObject()}},{key:"getBrush",value:function(){return this.brush}},{key:"getPointer",value:function(){return this.pointer}},{key:"getAngle",value:function(){return this.angle}},{key:"getDistance",value:function(){return this.distance}},{key:"brushHasMoved",value:function(){return this._hasMoved}},{key:"update",value:function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).both,n=void 0!==t&&t;return this._hasMoved=!1,!(this.pointer.equalsTo(e)&&!n)&&(this.pointer.update(e),n?(this._hasMoved=!0,this.brush.update(e),!0):(this._isEnabled?(this.distance=this.pointer.getDistanceTo(this.brush),this.angle=this.pointer.getAngleTo(this.brush),this.distance>this.radius&&(this.brush.moveByAngle(this.angle,this.distance-this.radius),this._hasMoved=!0)):(this.distance=0,this.angle=0,this.brush.update(e),this._hasMoved=!0),!0))}}]),e}();t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Point=t.Catenary=void 0;var i=o(n(12)),r=o(n(2));function o(e){return e&&e.__esModule?e:{default:e}}t.Catenary=i.default,t.Point=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(2),a=(i=o)&&i.__esModule?i:{default:i};var s=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.segments,i=void 0===n?50:n,r=t.iterationLimit,o=void 0===r?100:r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.p1=new a.default,this.p2=new a.default,this.segments=i,this.iterationLimit=o}return r(e,[{key:"drawToCanvas",value:function(e,t,n,i){this.p1.update(t),this.p2.update(n);var r=this.p1.x>this.p2.x,o=r?this.p2:this.p1,a=r?this.p1:this.p2,s=[],u=!0;if(o.getDistanceTo(a)<i)if(a.x-o.x>.01){var c=a.x-o.x,h=a.y-o.y,l=-this.getCatenaryParameter(c,h,i,this.iterationLimit),d=.5*(l*Math.log((i+h)/(i-h))-c),f=l*Math.cosh(d/l),p=o.x-d,v=o.y-f;s=this.getCurve(l,o,a,p,v,this.segments),u=!1}else{var y=.5*(o.x+a.x),b=.5*(o.y+a.y+i);s=[[o.x,o.y],[y,b],[a.x,a.y]]}else s=[[o.x,o.y],[a.x,a.y]];return u?this.drawLine(s,e):this.drawCurve(s,e),s}},{key:"getCatenaryParameter",value:function(e,t,n,i){for(var r=Math.sqrt(n*n-t*t)/e,o=Math.acosh(r)+1,a=-1,s=0;Math.abs(o-a)>1e-6&&s<i;)a=o,o-=(Math.sinh(o)-r*o)/(Math.cosh(o)-r),s++;return e/(2*o)}},{key:"getCurve",value:function(e,t,n,i,r,o){for(var a=[t.x,e*Math.cosh((t.x-i)/e)+r],s=n.x-t.x,u=o-1,c=0;c<u;c++){var h=t.x+s*(c+.5)/u,l=e*Math.cosh((h-i)/e)+r;a.push(h,l)}return a.push(n.x,e*Math.cosh((n.x-i)/e)+r),a}},{key:"drawLine",value:function(e,t){t.moveTo(e[0][0],e[0][1]),t.lineTo(e[1][0],e[1][1])}},{key:"drawCurve",value:function(e,t){var n=.5*e.length-1,i=e[2],r=e[3],o=[];t.moveTo(e[0],e[1]);for(var a=2;a<n;a++){var s=e[2*a],u=e[2*a+1],c=.5*(s+i),h=.5*(u+r);o.push([i,r,c,h]),t.quadraticCurveTo(i,r,c,h),i=s,r=u}return n=e.length,t.quadraticCurveTo(e[n-4],e[n-3],e[n-2],e[n-1]),o}}]),e}();t.default=s},function(e,t,n){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some(function(e,i){return e[0]===t&&(n=i,!0)}),n}return function(){function t(){this.__entries__=[]}var n={size:{configurable:!0}};return n.size.get=function(){return this.__entries__.length},t.prototype.get=function(t){var n=e(this.__entries__,t),i=this.__entries__[n];return i&&i[1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,i=this.__entries__;n<i.length;n+=1){var r=i[n];e.call(t,r[1],r[0])}},Object.defineProperties(t.prototype,n),t}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,r=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),o="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(r):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},a=2,s=["top","right","bottom","left","width","height","size","weight"],u="undefined"!=typeof MutationObserver,c=function(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,i=!1,r=0;function s(){n&&(n=!1,e()),i&&c()}function u(){o(s)}function c(){var e=Date.now();if(n){if(e-r<a)return;i=!0}else n=!0,i=!1,setTimeout(u,t);r=e}return c}(this.refresh.bind(this),20)};c.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},c.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},c.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},c.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),e.length>0},c.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),u?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},c.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},c.prototype.onTransitionEnd_=function(e){var t=e.propertyName;void 0===t&&(t=""),s.some(function(e){return!!~t.indexOf(e)})&&this.refresh()},c.getInstance=function(){return this.instance_||(this.instance_=new c),this.instance_},c.instance_=null;var h=function(e,t){for(var n=0,i=Object.keys(t);n<i.length;n+=1){var r=i[n];Object.defineProperty(e,r,{value:t[r],enumerable:!1,writable:!1,configurable:!0})}return e},l=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||r},d=g(0,0,0,0);function f(e){return parseFloat(e)||0}function p(e){for(var t=[],n=arguments.length-1;n-- >0;)t[n]=arguments[n+1];return t.reduce(function(t,n){return t+f(e["border-"+n+"-width"])},0)}function v(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return d;var i=l(e).getComputedStyle(e),r=function(e){for(var t={},n=0,i=["top","right","bottom","left"];n<i.length;n+=1){var r=i[n],o=e["padding-"+r];t[r]=f(o)}return t}(i),o=r.left+r.right,a=r.top+r.bottom,s=f(i.width),u=f(i.height);if("border-box"===i.boxSizing&&(Math.round(s+o)!==t&&(s-=p(i,"left","right")+o),Math.round(u+a)!==n&&(u-=p(i,"top","bottom")+a)),!function(e){return e===l(e).document.documentElement}(e)){var c=Math.round(s+o)-t,h=Math.round(u+a)-n;1!==Math.abs(c)&&(s-=c),1!==Math.abs(h)&&(u-=h)}return g(r.left,r.top,s,u)}var y="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof l(e).SVGGraphicsElement}:function(e){return e instanceof l(e).SVGElement&&"function"==typeof e.getBBox};function b(e){return i?y(e)?function(e){var t=e.getBBox();return g(0,0,t.width,t.height)}(e):v(e):d}function g(e,t,n,i){return{x:e,y:t,width:n,height:i}}var m=function(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=e};m.prototype.isActive=function(){var e=b(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},m.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e};var w=function(e,t){var n,i,r,o,a,s,u,c=(i=(n=t).x,r=n.y,o=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,u=Object.create(s.prototype),h(u,{x:i,y:r,width:o,height:a,top:r,right:i+o,bottom:a+r,left:i}),u);h(this,{target:e,contentRect:c})},_=function(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i};_.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof l(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new m(e)),this.controller_.addObserver(this),this.controller_.refresh())}},_.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof l(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},_.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},_.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach(function(t){t.isActive()&&e.activeObservations_.push(t)})},_.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new w(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},_.prototype.clearActive=function(){this.activeObservations_.splice(0)},_.prototype.hasActive=function(){return this.activeObservations_.length>0};var x="undefined"!=typeof WeakMap?new WeakMap:new n,M=function(e){if(!(this instanceof M))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var t=c.getInstance(),n=new _(e,t,this);x.set(this,n)};["observe","unobserve","disconnect"].forEach(function(e){M.prototype[e]=function(){return(t=x.get(this))[e].apply(t,arguments);var t}});var O=void 0!==r.ResizeObserver?r.ResizeObserver:M;t.a=O}).call(t,n(14))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";t.a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.ctx,n=e.img,i=e.x,r=e.y,o=e.w,a=e.h,s=e.offsetX,u=e.offsetY;"number"!=typeof i&&(i=0);"number"!=typeof r&&(r=0);"number"!=typeof o&&(o=t.canvas.width);"number"!=typeof a&&(a=t.canvas.height);"number"!=typeof s&&(s=.5);"number"!=typeof u&&(u=.5);s<0&&(s=0);u<0&&(u=0);s>1&&(s=1);u>1&&(u=1);var c,h,l,d,f=n.width,p=n.height,v=Math.min(o/f,a/p),y=f*v,b=p*v,g=1;y<o&&(g=o/y);Math.abs(g-1)<1e-14&&b<a&&(g=a/b);h=(p-(d=p/((b*=g)/a)))*u,(c=(f-(l=f/((y*=g)/o)))*s)<0&&(c=0);h<0&&(h=0);l>f&&(l=f);d>p&&(d=p);t.drawImage(n,c,h,l,d,i,r,o,a)}}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCanvasDraw=t(require("react")):e.ReactCanvasDraw=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(1),a=(i=o)&&i.__esModule?i:{default:i};var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.default),r(t,[{key:"update",value:function(e){this.x=e.x,this.y=e.y}},{key:"moveByAngle",value:function(e,t){var n=e+Math.PI/2;this.x=this.x+Math.sin(n)*t,this.y=this.y-Math.cos(n)*t}},{key:"equalsTo",value:function(e){return this.x===e.x&&this.y===e.y}},{key:"getDifferenceTo",value:function(e){return new a.default(this.x-e.x,this.y-e.y)}},{key:"getDistanceTo",value:function(e){var t=this.getDifferenceTo(e);return Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2))}},{key:"getAngleTo",value:function(e){var t=this.getDifferenceTo(e);return Math.atan2(t.y,t.x)}},{key:"toObject",value:function(){return{x:this.x,y:this.y}}}]),t}();t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default=function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.x=t,this.y=n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();var r=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.x=t,this.y=n}return i(e,[{key:"update",value:function(e){this.x=e.x,this.y=e.y}},{key:"getDifferenceTo",value:function(t){return new e(this.x-t.x,this.y-t.y)}},{key:"getDistanceTo",value:function(e){var t=this.getDifferenceTo(e);return Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2))}}]),e}();t.default=r},function(e,t,n){e.exports=n(4)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return b});var i,r,o=n(5),a=n.n(o),s=n(6),u=n.n(s),c=n(9),h=(n.n(c),n(11)),f=(n.n(h),n(13)),l=n(15),d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e};function p(e,t){return{x:e.x+(t.x-e.x)/2,y:e.y+(t.y-e.y)/2}}var v={display:"block",position:"absolute"},y=[{name:"interface",zIndex:15},{name:"drawing",zIndex:11},{name:"temp",zIndex:12},{name:"grid",zIndex:10}],b=(u.a.oneOfType([u.a.number,u.a.string]),r=i=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var i=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));return i.componentWillUnmount=function(){i.canvasObserver.unobserve(i.canvasContainer)},i.drawImage=function(){i.props.imgSrc&&(i.image=new Image,i.image.crossOrigin="anonymous",i.image.onload=function(){return Object(l.a)({ctx:i.ctx.grid,img:i.image})},i.image.src=i.props.imgSrc)},i.undo=function(){var e=i.lines.slice(0,-1);i.clear(),i.simulateDrawingLines({lines:e,immediate:!0}),i.triggerOnChange()},i.getSaveData=function(){return JSON.stringify({lines:i.lines,width:i.props.canvasWidth,height:i.props.canvasHeight})},i.loadSaveData=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i.props.immediateLoading;if("string"!=typeof e)throw new Error("saveData needs to be of type string!");var n=JSON.parse(e),r=n.lines,o=n.width,a=n.height;if(!r||"function"!=typeof r.push)throw new Error("saveData.lines needs to be an array!");if(i.clear(),o===i.props.canvasWidth&&a===i.props.canvasHeight)i.simulateDrawingLines({lines:r,immediate:t});else{var s=i.props.canvasWidth/o,u=i.props.canvasHeight/a,c=(s+u)/2;i.simulateDrawingLines({lines:r.map(function(e){return d({},e,{points:e.points.map(function(e){return{x:e.x*s,y:e.y*u}}),brushRadius:e.brushRadius*c})}),immediate:t})}},i.simulateDrawingLines=function(e){var t=e.lines,n=e.immediate,r=0,o=n?0:i.props.loadTimeOffset;t.forEach(function(e){var t=e.points,a=e.brushColor,s=e.brushRadius;if(n)return i.drawPoints({points:t,brushColor:a,brushRadius:s}),i.points=t,void i.saveLine({brushColor:a,brushRadius:s});for(var u=function(e){r+=o,window.setTimeout(function(){i.drawPoints({points:t.slice(0,e+1),brushColor:a,brushRadius:s})},r)},c=1;c<t.length;c++)u(c);r+=o,window.setTimeout(function(){i.points=t,i.saveLine({brushColor:a,brushRadius:s})},r)})},i.handleDrawStart=function(e){e.preventDefault(),i.isPressing=!0;var t=i.getPointerPos(e),n=t.x,r=t.y;e.touches&&e.touches.length>0&&i.lazy.update({x:n,y:r},{both:!0}),i.handlePointerMove(n,r)},i.handleDrawMove=function(e){e.preventDefault();var t=i.getPointerPos(e),n=t.x,r=t.y;i.handlePointerMove(n,r)},i.handleDrawEnd=function(e){e.preventDefault(),i.handleDrawMove(e),i.isDrawing=!1,i.isPressing=!1,i.saveLine()},i.handleCanvasResize=function(e,t){var n=i.getSaveData(),r=e,o=Array.isArray(r),a=0;for(r=o?r:r[Symbol.iterator]();;){var s;if(o){if(a>=r.length)break;s=r[a++]}else{if((a=r.next()).done)break;s=a.value}var u=s.contentRect,c=u.width,h=u.height;i.setCanvasSize(i.canvas.interface,c,h),i.setCanvasSize(i.canvas.drawing,c,h),i.setCanvasSize(i.canvas.temp,c,h),i.setCanvasSize(i.canvas.grid,c,h),i.drawGrid(i.ctx.grid),i.drawImage(),i.loop({once:!0})}i.loadSaveData(n,!0)},i.setCanvasSize=function(e,t,n){e.width=t,e.height=n,e.style.width=t,e.style.height=n},i.getPointerPos=function(e){var t=i.canvas.interface.getBoundingClientRect(),n=e.clientX,r=e.clientY;return e.changedTouches&&e.changedTouches.length>0&&(n=e.changedTouches[0].clientX,r=e.changedTouches[0].clientY),{x:n-t.left,y:r-t.top}},i.handlePointerMove=function(e,t){if(!i.props.disabled){i.lazy.update({x:e,y:t});var n=!i.lazy.isEnabled();(i.isPressing&&!i.isDrawing||n&&i.isPressing)&&(i.isDrawing=!0,i.points.push(i.lazy.brush.toObject())),i.isDrawing&&(i.points.push(i.lazy.brush.toObject()),i.drawPoints({points:i.points,brushColor:i.props.brushColor,brushRadius:i.props.brushRadius})),i.mouseHasMoved=!0}},i.drawPoints=function(e){var t=e.points,n=e.brushColor,r=e.brushRadius;i.ctx.temp.lineJoin="round",i.ctx.temp.lineCap="round",i.ctx.temp.strokeStyle=n,i.ctx.temp.clearRect(0,0,i.ctx.temp.canvas.width,i.ctx.temp.canvas.height),i.ctx.temp.lineWidth=2*r;var o=t[0],a=t[1];i.ctx.temp.moveTo(a.x,a.y),i.ctx.temp.beginPath();for(var s=1,u=t.length;s<u;s++){var c=p(o,a);i.ctx.temp.quadraticCurveTo(o.x,o.y,c.x,c.y),o=t[s],a=t[s+1]}i.ctx.temp.lineTo(o.x,o.y),i.ctx.temp.stroke()},i.saveLine=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.brushColor,n=e.brushRadius;if(!(i.points.length<2)){i.lines.push({points:[].concat(i.points),brushColor:t||i.props.brushColor,brushRadius:n||i.props.brushRadius}),i.points.length=0;var r=i.canvas.temp.width,o=i.canvas.temp.height;i.ctx.drawing.drawImage(i.canvas.temp,0,0,r,o),i.ctx.temp.clearRect(0,0,r,o),i.triggerOnChange()}},i.triggerOnChange=function(){i.props.onChange&&i.props.onChange(i)},i.clear=function(){i.lines=[],i.valuesChanged=!0,i.ctx.drawing.clearRect(0,0,i.canvas.drawing.width,i.canvas.drawing.height),i.ctx.temp.clearRect(0,0,i.canvas.temp.width,i.canvas.temp.height)},i.loop=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).once,t=void 0!==e&&e;if(i.mouseHasMoved||i.valuesChanged){var n=i.lazy.getPointerCoordinates(),r=i.lazy.getBrushCoordinates();i.drawInterface(i.ctx.interface,n,r),i.mouseHasMoved=!1,i.valuesChanged=!1}t||window.requestAnimationFrame(function(){i.loop()})},i.drawGrid=function(e){if(!i.props.hideGrid){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.beginPath(),e.setLineDash([5,1]),e.setLineDash([]),e.strokeStyle=i.props.gridColor,e.lineWidth=.5;for(var t=0;t<e.canvas.width;)t+=25,e.moveTo(t,0),e.lineTo(t,e.canvas.height);e.stroke();for(var n=0;n<e.canvas.height;)n+=25,e.moveTo(0,n),e.lineTo(e.canvas.width,n);e.stroke()}},i.drawInterface=function(e,t,n){i.props.hideInterface||(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.beginPath(),e.fillStyle=i.props.brushColor,e.arc(n.x,n.y,i.props.brushRadius,0,2*Math.PI,!0),e.fill(),e.beginPath(),e.fillStyle=i.props.catenaryColor,e.arc(t.x,t.y,4,0,2*Math.PI,!0),e.fill(),i.lazy.isEnabled()&&(e.beginPath(),e.lineWidth=2,e.lineCap="round",e.setLineDash([2,4]),e.strokeStyle=i.props.catenaryColor,i.catenary.drawToCanvas(i.ctx.interface,n,t,i.chainLength),e.stroke()),e.beginPath(),e.fillStyle=i.props.catenaryColor,e.arc(n.x,n.y,2,0,2*Math.PI,!0),e.fill())},i.canvas={},i.ctx={},i.catenary=new h.Catenary,i.points=[],i.lines=[],i.mouseHasMoved=!0,i.valuesChanged=!0,i.isDrawing=!1,i.isPressing=!1,i}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.componentDidMount=function(){var e=this;this.lazy=new c.LazyBrush({radius:this.props.lazyRadius*window.devicePixelRatio,enabled:!0,initialPoint:{x:window.innerWidth/2,y:window.innerHeight/2}}),this.chainLength=this.props.lazyRadius*window.devicePixelRatio,this.canvasObserver=new f.a(function(t,n){return e.handleCanvasResize(t,n)}),this.canvasObserver.observe(this.canvasContainer),this.drawImage(),this.loop(),window.setTimeout(function(){var t=window.innerWidth/2,n=window.innerHeight/2;e.lazy.update({x:t-e.chainLength/4,y:n},{both:!0}),e.lazy.update({x:t+e.chainLength/4,y:n},{both:!1}),e.mouseHasMoved=!0,e.valuesChanged=!0,e.clear(),e.props.saveData&&e.loadSaveData(e.props.saveData)},100)},t.prototype.componentDidUpdate=function(e){e.lazyRadius!==this.props.lazyRadius&&(this.chainLength=this.props.lazyRadius*window.devicePixelRatio,this.lazy.setRadius(this.props.lazyRadius*window.devicePixelRatio)),e.saveData!==this.props.saveData&&this.loadSaveData(this.props.saveData),JSON.stringify(e)!==JSON.stringify(this.props)&&(this.valuesChanged=!0)},t.prototype.render=function(){var e=this;return a.a.createElement("div",{className:this.props.className,style:d({display:"block",background:this.props.backgroundColor,touchAction:"none",width:this.props.canvasWidth,height:this.props.canvasHeight},this.props.style),ref:function(t){t&&(e.canvasContainer=t)}},y.map(function(t){var n=t.name,i=t.zIndex,r="interface"===n;return a.a.createElement("canvas",{key:n,ref:function(t){t&&(e.canvas[n]=t,e.ctx[n]=t.getContext("2d"))},style:d({},v,{zIndex:i}),onMouseDown:r?e.handleDrawStart:void 0,onMouseMove:r?e.handleDrawMove:void 0,onMouseUp:r?e.handleDrawEnd:void 0,onMouseOut:r?e.handleDrawEnd:void 0,onTouchStart:r?e.handleDrawStart:void 0,onTouchMove:r?e.handleDrawMove:void 0,onTouchEnd:r?e.handleDrawEnd:void 0,onTouchCancel:r?e.handleDrawEnd:void 0})}))},t}(o.PureComponent),i.defaultProps={onChange:null,loadTimeOffset:5,lazyRadius:12,brushRadius:10,brushColor:"#444",catenaryColor:"#0a0302",gridColor:"rgba(150,150,150,0.17)",backgroundColor:"#FFF",hideGrid:!1,canvasWidth:400,canvasHeight:400,disabled:!1,imgSrc:"",saveData:"",immediateLoading:!1,hideInterface:!1},r)},function(t,n){t.exports=e},function(e,t,n){e.exports=n(7)()},function(e,t,n){"use strict";var i=n(8);function r(){}function o(){}o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,a){if(a!==i){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LazyPoint=t.Point=t.LazyBrush=void 0;var i=a(n(10)),r=a(n(1)),o=a(n(0));function a(e){return e&&e.__esModule?e:{default:e}}t.LazyBrush=i.default,t.Point=r.default,t.LazyPoint=o.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(0),a=(i=o)&&i.__esModule?i:{default:i};var s=30,u=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.radius,i=void 0===n?s:n,r=t.enabled,o=void 0===r||r,u=t.initialPoint,c=void 0===u?{x:0,y:0}:u;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.radius=i,this._isEnabled=o,this.pointer=new a.default(c.x,c.y),this.brush=new a.default(c.x,c.y),this.angle=0,this.distance=0,this._hasMoved=!1}return r(e,[{key:"enable",value:function(){this._isEnabled=!0}},{key:"disable",value:function(){this._isEnabled=!1}},{key:"isEnabled",value:function(){return this._isEnabled}},{key:"setRadius",value:function(e){this.radius=e}},{key:"getRadius",value:function(){return this.radius}},{key:"getBrushCoordinates",value:function(){return this.brush.toObject()}},{key:"getPointerCoordinates",value:function(){return this.pointer.toObject()}},{key:"getBrush",value:function(){return this.brush}},{key:"getPointer",value:function(){return this.pointer}},{key:"getAngle",value:function(){return this.angle}},{key:"getDistance",value:function(){return this.distance}},{key:"brushHasMoved",value:function(){return this._hasMoved}},{key:"update",value:function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).both,n=void 0!==t&&t;return this._hasMoved=!1,!(this.pointer.equalsTo(e)&&!n)&&(this.pointer.update(e),n?(this._hasMoved=!0,this.brush.update(e),!0):(this._isEnabled?(this.distance=this.pointer.getDistanceTo(this.brush),this.angle=this.pointer.getAngleTo(this.brush),this.distance>this.radius&&(this.brush.moveByAngle(this.angle,this.distance-this.radius),this._hasMoved=!0)):(this.distance=0,this.angle=0,this.brush.update(e),this._hasMoved=!0),!0))}}]),e}();t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Point=t.Catenary=void 0;var i=o(n(12)),r=o(n(2));function o(e){return e&&e.__esModule?e:{default:e}}t.Catenary=i.default,t.Point=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(2),a=(i=o)&&i.__esModule?i:{default:i};var s=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.segments,i=void 0===n?50:n,r=t.iterationLimit,o=void 0===r?100:r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.p1=new a.default,this.p2=new a.default,this.segments=i,this.iterationLimit=o}return r(e,[{key:"drawToCanvas",value:function(e,t,n,i){this.p1.update(t),this.p2.update(n);var r=this.p1.x>this.p2.x,o=r?this.p2:this.p1,a=r?this.p1:this.p2,s=[],u=!0;if(o.getDistanceTo(a)<i)if(a.x-o.x>.01){var c=a.x-o.x,h=a.y-o.y,f=-this.getCatenaryParameter(c,h,i,this.iterationLimit),l=.5*(f*Math.log((i+h)/(i-h))-c),d=f*Math.cosh(l/f),p=o.x-l,v=o.y-d;s=this.getCurve(f,o,a,p,v,this.segments),u=!1}else{var y=.5*(o.x+a.x),b=.5*(o.y+a.y+i);s=[[o.x,o.y],[y,b],[a.x,a.y]]}else s=[[o.x,o.y],[a.x,a.y]];return u?this.drawLine(s,e):this.drawCurve(s,e),s}},{key:"getCatenaryParameter",value:function(e,t,n,i){for(var r=Math.sqrt(n*n-t*t)/e,o=Math.acosh(r)+1,a=-1,s=0;Math.abs(o-a)>1e-6&&s<i;)a=o,o-=(Math.sinh(o)-r*o)/(Math.cosh(o)-r),s++;return e/(2*o)}},{key:"getCurve",value:function(e,t,n,i,r,o){for(var a=[t.x,e*Math.cosh((t.x-i)/e)+r],s=n.x-t.x,u=o-1,c=0;c<u;c++){var h=t.x+s*(c+.5)/u,f=e*Math.cosh((h-i)/e)+r;a.push(h,f)}return a.push(n.x,e*Math.cosh((n.x-i)/e)+r),a}},{key:"drawLine",value:function(e,t){t.moveTo(e[0][0],e[0][1]),t.lineTo(e[1][0],e[1][1])}},{key:"drawCurve",value:function(e,t){var n=.5*e.length-1,i=e[2],r=e[3],o=[];t.moveTo(e[0],e[1]);for(var a=2;a<n;a++){var s=e[2*a],u=e[2*a+1],c=.5*(s+i),h=.5*(u+r);o.push([i,r,c,h]),t.quadraticCurveTo(i,r,c,h),i=s,r=u}return n=e.length,t.quadraticCurveTo(e[n-4],e[n-3],e[n-2],e[n-1]),o}}]),e}();t.default=s},function(e,t,n){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some(function(e,i){return e[0]===t&&(n=i,!0)}),n}return function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),i=this.__entries__[n];return i&&i[1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,i=this.__entries__;n<i.length;n++){var r=i[n];e.call(t,r[1],r[0])}},t}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,r=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),o="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(r):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},a=2;var s=20,u=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,h=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,i=!1,r=0;function s(){n&&(n=!1,e()),i&&c()}function u(){o(s)}function c(){var e=Date.now();if(n){if(e-r<a)return;i=!0}else n=!0,i=!1,setTimeout(u,t);r=e}return c}(this.refresh.bind(this),s)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),e.length>0},e.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;u.some(function(e){return!!~n.indexOf(e)})&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),f=function(e,t){for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];Object.defineProperty(e,r,{value:t[r],enumerable:!1,writable:!1,configurable:!0})}return e},l=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||r},d=m(0,0,0,0);function p(e){return parseFloat(e)||0}function v(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce(function(t,n){return t+p(e["border-"+n+"-width"])},0)}function y(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return d;var i=l(e).getComputedStyle(e),r=function(e){for(var t={},n=0,i=["top","right","bottom","left"];n<i.length;n++){var r=i[n],o=e["padding-"+r];t[r]=p(o)}return t}(i),o=r.left+r.right,a=r.top+r.bottom,s=p(i.width),u=p(i.height);if("border-box"===i.boxSizing&&(Math.round(s+o)!==t&&(s-=v(i,"left","right")+o),Math.round(u+a)!==n&&(u-=v(i,"top","bottom")+a)),!function(e){return e===l(e).document.documentElement}(e)){var c=Math.round(s+o)-t,h=Math.round(u+a)-n;1!==Math.abs(c)&&(s-=c),1!==Math.abs(h)&&(u-=h)}return m(r.left,r.top,s,u)}var b="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof l(e).SVGGraphicsElement}:function(e){return e instanceof l(e).SVGElement&&"function"==typeof e.getBBox};function g(e){return i?b(e)?function(e){var t=e.getBBox();return m(0,0,t.width,t.height)}(e):y(e):d}function m(e,t,n,i){return{x:e,y:t,width:n,height:i}}var w=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=m(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=g(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),_=function(){return function(e,t){var n,i,r,o,a,s,u,c=(i=(n=t).x,r=n.y,o=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,u=Object.create(s.prototype),f(u,{x:i,y:r,width:o,height:a,top:r,right:i+o,bottom:a+r,left:i}),u);f(this,{target:e,contentRect:c})}}(),x=function(){function e(e,t,i){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof l(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new w(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof l(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach(function(t){t.isActive()&&e.activeObservations_.push(t)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new _(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),O="undefined"!=typeof WeakMap?new WeakMap:new n,M=function(){return function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=h.getInstance(),i=new x(t,n,this);O.set(this,i)}}();["observe","unobserve","disconnect"].forEach(function(e){M.prototype[e]=function(){var t;return(t=O.get(this))[e].apply(t,arguments)}});var C=void 0!==r.ResizeObserver?r.ResizeObserver:M;t.a=C}).call(t,n(14))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";t.a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.ctx,n=e.img,i=e.x,r=e.y,o=e.w,a=e.h,s=e.offsetX,u=e.offsetY;"number"!=typeof i&&(i=0);"number"!=typeof r&&(r=0);"number"!=typeof o&&(o=t.canvas.width);"number"!=typeof a&&(a=t.canvas.height);"number"!=typeof s&&(s=.5);"number"!=typeof u&&(u=.5);s<0&&(s=0);u<0&&(u=0);s>1&&(s=1);u>1&&(u=1);var c,h,f,l,d=n.width,p=n.height,v=Math.min(o/d,a/p),y=d*v,b=p*v,g=1;y<o&&(g=o/y);Math.abs(g-1)<1e-14&&b<a&&(g=a/b);h=(p-(l=p/((b*=g)/a)))*u,(c=(d-(f=d/((y*=g)/o)))*s)<0&&(c=0);h<0&&(h=0);f>d&&(f=d);l>p&&(l=p);t.drawImage(n,c,h,f,l,i,r,o,a)}}]).default});
 //# sourceMappingURL=react-canvas-draw.min.js.map

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

338562

increased by5.23%

Number of package files

11

increased by10%

Lines of code

4426

increased by6.24%

No dependency changes