react-canvas-draw - npm Package Compare versions

Comparing version 1.0.0-alpha.7 to 1.0.0-alpha.8

es/index.js

@@ -12,2 +12,3 @@ 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; };
 import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
 import { LazyBrush } from "lazy-brush";
@@ -82,3 +83,5 @@ import { Catenary } from "catenary-curve";
 
-    _this.loadSaveData = function (saveData, immediate) {
+    _this.loadSaveData = function (saveData) {
+      var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.immediateLoading;
+
       if (typeof saveData !== "string") {
@@ -132,2 +135,3 @@ throw new Error("saveData needs to be of type string!");
       // Simulate live-drawing of the loaded lines
+      // TODO use a generator
       var curTime = 0;
@@ -491,2 +495,7 @@ var timeoutGap = immediate ? 0 : _this.props.loadTimeOffset;
       _this2.clear();
+
+      // Load saveData from prop if it exists
+      if (_this2.props.saveData) {
+        _this2.loadSaveData(_this2.props.saveData);
+      }
     }, 100);
@@ -502,2 +511,6 @@ };
 
+    if (prevProps.saveData !== this.props.saveData) {
+      this.loadSaveData(this.props.saveData);
+    }
+
     if (JSON.stringify(prevProps) !== JSON.stringify(this.props)) {
@@ -556,5 +569,19 @@ // Signal this.loop function that values changed
   return _default;
-}(PureComponent), _class.defaultProps = {
+}(PureComponent), _class.propTypes = {
+  loadTimeOffset: PropTypes.number,
+  lazyRadius: PropTypes.number,
+  brushRadius: PropTypes.number,
+  brushColor: PropTypes.string,
+  catenaryColor: PropTypes.string,
+  gridColor: PropTypes.string,
+  hideGrid: PropTypes.bool,
+  canvasWidth: PropTypes.number,
+  canvasHeight: PropTypes.number,
+  disabled: PropTypes.bool,
+  imgSrc: PropTypes.string,
+  saveData: PropTypes.string,
+  immediateLoading: PropTypes.bool
+}, _class.defaultProps = {
   loadTimeOffset: 5,
-  lazyRadius: 20,
+  lazyRadius: 12,
   brushRadius: 10,
@@ -568,5 +595,7 @@ brushColor: "#444",
   disabled: false,
-  imgSrc: ""
+  imgSrc: "",
+  saveData: "",
+  immediateLoading: false
 }, _temp);
 
 export { _default as default };

lib/index.js

@@ -14,2 +14,6 @@ "use strict";
 
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _lazyBrush = require("lazy-brush");
@@ -97,3 +101,5 @@
 
-    _this.loadSaveData = function (saveData, immediate) {
+    _this.loadSaveData = function (saveData) {
+      var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.immediateLoading;
+
       if (typeof saveData !== "string") {
@@ -147,2 +153,3 @@ throw new Error("saveData needs to be of type string!");
       // Simulate live-drawing of the loaded lines
+      // TODO use a generator
       var curTime = 0;
@@ -506,2 +513,7 @@ var timeoutGap = immediate ? 0 : _this.props.loadTimeOffset;
       _this2.clear();
+
+      // Load saveData from prop if it exists
+      if (_this2.props.saveData) {
+        _this2.loadSaveData(_this2.props.saveData);
+      }
     }, 100);
@@ -517,2 +529,6 @@ };
 
+    if (prevProps.saveData !== this.props.saveData) {
+      this.loadSaveData(this.props.saveData);
+    }
+
     if (JSON.stringify(prevProps) !== JSON.stringify(this.props)) {
@@ -571,5 +587,19 @@ // Signal this.loop function that values changed
   return _default;
-}(_react.PureComponent), _class.defaultProps = {
+}(_react.PureComponent), _class.propTypes = {
+  loadTimeOffset: _propTypes2.default.number,
+  lazyRadius: _propTypes2.default.number,
+  brushRadius: _propTypes2.default.number,
+  brushColor: _propTypes2.default.string,
+  catenaryColor: _propTypes2.default.string,
+  gridColor: _propTypes2.default.string,
+  hideGrid: _propTypes2.default.bool,
+  canvasWidth: _propTypes2.default.number,
+  canvasHeight: _propTypes2.default.number,
+  disabled: _propTypes2.default.bool,
+  imgSrc: _propTypes2.default.string,
+  saveData: _propTypes2.default.string,
+  immediateLoading: _propTypes2.default.bool
+}, _class.defaultProps = {
   loadTimeOffset: 5,
-  lazyRadius: 20,
+  lazyRadius: 12,
   brushRadius: 10,
@@ -583,3 +613,5 @@ brushColor: "#444",
   disabled: false,
-  imgSrc: ""
+  imgSrc: "",
+  saveData: "",
+  immediateLoading: false
 }, _temp);
@@ -586,0 +618,0 @@

package.json

 {
   "name": "react-canvas-draw",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "A simple yet powerful canvas-drawing component for React.",
@@ -25,2 +25,3 @@ "main": "lib/index.js",
     "lazy-brush": "^1.0.1",
+    "prop-types": "^15.6.2",
     "resize-observer-polyfill": "^1.5.0"
@@ -27,0 +28,0 @@ },

README.md

@@ -53,3 +53,5 @@ # React Canvas Draw
     disabled: false,
-    imgSrc: ""
+    imgSrc: "",
+    saveData: null,
+    immediateLoading: false
   };
@@ -56,0 +58,0 @@ ```

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v1.0.0-alpha.6 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v1.0.0-alpha.7 - https://mbeierl.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 v});var i,r,o=n(5),a=n.n(o),s=n(6),u=(n.n(s),n(8)),c=(n.n(u),n(10)),h=n(12),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 f(e,t){return{x:e.x+(t.x-e.x)/2,y:e.y+(t.y-e.y)/2}}var l={display:"block",position:"absolute"},p=[{name:"interface",zIndex:15},{name:"drawing",zIndex:11},{name:"temp",zIndex:12},{name:"grid",zIndex:10}],v=(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.drawImage=function(){i.props.imgSrc&&(i.image=new Image,i.image.src=i.props.imgSrc,i.image.onload=function(){return Object(h.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.getSaveData=function(){return JSON.stringify({lines:i.lines,width:i.props.canvasWidth,height:i.props.canvasHeight})},i.loadSaveData=function(e,t){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=0,r=e.immediate?0:i.props.loadTimeOffset;t.forEach(function(e){for(var t=e.points,o=e.brushColor,a=e.brushRadius,s=function(e){n+=r,window.setTimeout(function(){i.drawPoints({points:t.slice(0,e+1),brushColor:o,brushRadius:a})},n)},u=1;u<t.length;u++)s(u);n+=r,window.setTimeout(function(){i.points=t,i.saveLine({brushColor:o,brushRadius:a})},n)})},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=e,r=Array.isArray(n),o=0;for(n=r?n:n[Symbol.iterator]();;){var a;if(r){if(o>=n.length)break;a=n[o++]}else{if((o=n.next()).done)break;a=o.value}var s=a.contentRect,u=s.width,c=s.height;i.setCanvasSize(i.canvas.interface,u,c),i.setCanvasSize(i.canvas.drawing,u,c),i.setCanvasSize(i.canvas.temp,u,c),i.setCanvasSize(i.canvas.grid,u,c),i.drawGrid(i.ctx.grid),i.loop({once:!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=f(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.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){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 u.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 s.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,new c.a(function(t,n){return e.handleCanvasResize(t,n)}).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()},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)),JSON.stringify(e)!==JSON.stringify(this.props)&&(this.valuesChanged=!0)},t.prototype.render=function(){var e=this;return a.a.createElement("div",{style:d({display:"block",background:"#fff",touchAction:"none",width:this.props.canvasWidth,height:this.props.canvasHeight},this.props.style),ref:function(t){t&&(e.canvasContainer=t)}},p.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({},l,{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={loadTimeOffset:5,lazyRadius:20,brushRadius:10,brushColor:"#444",catenaryColor:"#0a0302",gridColor:"rgba(150,150,150,0.17)",hideGrid:!1,canvasWidth:400,canvasHeight:400,disabled:!1,imgSrc:""},r)},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LazyPoint=t.Point=t.LazyBrush=void 0;var i=a(n(7)),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(9)),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,d=-this.getCatenaryParameter(c,h,i,this.iterationLimit),f=.5*(d*Math.log((i+h)/(i-h))-c),l=d*Math.cosh(f/d),p=o.x-f,v=o.y-l;s=this.getCurve(d,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,d=e*Math.cosh((h-i)/e)+r;a.push(h,d)}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},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||r},f=g(0,0,0,0);function l(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+l(e["border-"+n+"-width"])},0)}function v(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return f;var i=d(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]=l(o)}return t}(i),o=r.left+r.right,a=r.top+r.bottom,s=l(i.width),u=l(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===d(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 d(e).SVGGraphicsElement}:function(e){return e instanceof d(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):f}function g(e,t,n,i){return{x:e,y:t,width:n,height:i}}var w=function(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=e};w.prototype.isActive=function(){var e=b(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},w.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e};var m=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 d(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())}},_.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 d(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 m(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(11))},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,d,f,l=n.width,p=n.height,v=Math.min(o/l,a/p),y=l*v,b=p*v,g=1;y<o&&(g=o/y);Math.abs(g-1)<1e-14&&b<a&&(g=a/b);h=(p-(f=p/((b*=g)/a)))*u,(c=(l-(d=l/((y*=g)/o)))*s)<0&&(c=0);h<0&&(h=0);d>l&&(d=l);f>p&&(f=p);t.drawImage(n,c,h,d,f,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 v});var i,r,o=n(5),a=n.n(o),s=n(6),u=(n.n(s),n(8)),c=(n.n(u),n(10)),h=n(12),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 l(e,t){return{x:e.x+(t.x-e.x)/2,y:e.y+(t.y-e.y)/2}}var f={display:"block",position:"absolute"},p=[{name:"interface",zIndex:15},{name:"drawing",zIndex:11},{name:"temp",zIndex:12},{name:"grid",zIndex:10}],v=(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.drawImage=function(){i.props.imgSrc&&(i.image=new Image,i.image.src=i.props.imgSrc,i.image.onload=function(){return Object(h.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.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=0,r=e.immediate?0:i.props.loadTimeOffset;t.forEach(function(e){for(var t=e.points,o=e.brushColor,a=e.brushRadius,s=function(e){n+=r,window.setTimeout(function(){i.drawPoints({points:t.slice(0,e+1),brushColor:o,brushRadius:a})},n)},u=1;u<t.length;u++)s(u);n+=r,window.setTimeout(function(){i.points=t,i.saveLine({brushColor:o,brushRadius:a})},n)})},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=e,r=Array.isArray(n),o=0;for(n=r?n:n[Symbol.iterator]();;){var a;if(r){if(o>=n.length)break;a=n[o++]}else{if((o=n.next()).done)break;a=o.value}var s=a.contentRect,u=s.width,c=s.height;i.setCanvasSize(i.canvas.interface,u,c),i.setCanvasSize(i.canvas.drawing,u,c),i.setCanvasSize(i.canvas.temp,u,c),i.setCanvasSize(i.canvas.grid,u,c),i.drawGrid(i.ctx.grid),i.loop({once:!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=l(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.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){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 u.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 s.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,new c.a(function(t,n){return e.handleCanvasResize(t,n)}).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",{style:d({display:"block",background:"#fff",touchAction:"none",width:this.props.canvasWidth,height:this.props.canvasHeight},this.props.style),ref:function(t){t&&(e.canvasContainer=t)}},p.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({},f,{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={loadTimeOffset:5,lazyRadius:12,brushRadius:10,brushColor:"#444",catenaryColor:"#0a0302",gridColor:"rgba(150,150,150,0.17)",hideGrid:!1,canvasWidth:400,canvasHeight:400,disabled:!1,imgSrc:"",saveData:"",immediateLoading:!1},r)},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LazyPoint=t.Point=t.LazyBrush=void 0;var i=a(n(7)),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(9)),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,d=-this.getCatenaryParameter(c,h,i,this.iterationLimit),l=.5*(d*Math.log((i+h)/(i-h))-c),f=d*Math.cosh(l/d),p=o.x-l,v=o.y-f;s=this.getCurve(d,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,d=e*Math.cosh((h-i)/e)+r;a.push(h,d)}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},d=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||r},l=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 l;var i=d(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===d(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 d(e).SVGGraphicsElement}:function(e){return e instanceof d(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):l}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 d(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 d(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(11))},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,d,l,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-(l=p/((b*=g)/a)))*u,(c=(f-(d=f/((y*=g)/o)))*s)<0&&(c=0);h<0&&(h=0);d>f&&(d=f);l>p&&(l=p);t.drawImage(n,c,h,d,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

308801

increased by11.73%

Lines of code

4063

increased by24.29%

Number of lines in readme file

94

increased by2.17%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedprop-types@^15.6.2