react-canvas-draw - npm Package Compare versions

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

es/index.js

 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; };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _class, _temp;
@@ -75,21 +73,20 @@
     _this.getSaveData = function () {
-      // Construct and return the saveData object
-      var saveData = {
-        lines: [].concat(_this.lines),
+      // Construct and return the stringified saveData object
+      return JSON.stringify({
+        lines: _this.lines,
         width: _this.props.canvasWidth,
         height: _this.props.canvasHeight
-      };
-      return saveData;
+      });
     };
 
     _this.loadSaveData = function (saveData, immediate) {
-      if ((typeof saveData === "undefined" ? "undefined" : _typeof(saveData)) !== "object") {
-        throw new Error("saveData needs to be of type object!");
+      if (typeof saveData !== "string") {
+        throw new Error("saveData needs to be of type string!");
       }
 
-      var lines = saveData.lines,
-          width = saveData.width,
-          height = saveData.height;
+      var _JSON$parse = JSON.parse(saveData),
+          lines = _JSON$parse.lines,
+          width = _JSON$parse.width,
+          height = _JSON$parse.height;
 
-
       if (!lines || typeof lines.push !== "function") {
@@ -96,0 +93,0 @@ throw new Error("saveData.lines needs to be an array!");

lib/index.js

@@ -8,4 +8,2 @@ "use strict";
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _class, _temp;
@@ -91,21 +89,20 @@
     _this.getSaveData = function () {
-      // Construct and return the saveData object
-      var saveData = {
-        lines: [].concat(_this.lines),
+      // Construct and return the stringified saveData object
+      return JSON.stringify({
+        lines: _this.lines,
         width: _this.props.canvasWidth,
         height: _this.props.canvasHeight
-      };
-      return saveData;
+      });
     };
 
     _this.loadSaveData = function (saveData, immediate) {
-      if ((typeof saveData === "undefined" ? "undefined" : _typeof(saveData)) !== "object") {
-        throw new Error("saveData needs to be of type object!");
+      if (typeof saveData !== "string") {
+        throw new Error("saveData needs to be of type string!");
       }
 
-      var lines = saveData.lines,
-          width = saveData.width,
-          height = saveData.height;
+      var _JSON$parse = JSON.parse(saveData),
+          lines = _JSON$parse.lines,
+          width = _JSON$parse.width,
+          height = _JSON$parse.height;
 
-
       if (!lines || typeof lines.push !== "function") {
@@ -112,0 +109,0 @@ throw new Error("saveData.lines needs to be an array!");

package.json

 {
   "name": "react-canvas-draw",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "A simple yet powerful canvas-drawing component for React.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -61,4 +61,4 @@ # React Canvas Draw
 
-- `getSaveData()` returns the drawing's save-data as stringified JSON
-- `loadSaveData(saveData: Object, immediate: Boolean)` loads a previously saved drawing using the saveData string, as well as an optional boolean flag to load it immediately, instead of live-drawing it.
+- `getSaveData()` returns the drawing's save-data as a stringified object
+- `loadSaveData(saveData: String, immediate: Boolean)` loads a previously saved drawing using the saveData string, as well as an optional boolean flag to load it immediately, instead of live-drawing it.
 - `clear()` clears the canvas completely
@@ -65,0 +65,0 @@ - `undo()` removes the latest change to the drawing. This includes everything drawn since the last MouseDown event.

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v1.0.0-alpha.5 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v1.0.0-alpha.6 - 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 y});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),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},l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function d(e,t){return{x:e.x+(t.x-e.x)/2,y:e.y+(t.y-e.y)/2}}var p={display:"block",position:"absolute"},v=[{name:"interface",zIndex:15},{name:"drawing",zIndex:11},{name:"temp",zIndex:12},{name:"grid",zIndex:10}],y=(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{lines:[].concat(i.lines),width:i.props.canvasWidth,height:i.props.canvasHeight}},i.loadSaveData=function(e,t){if("object"!==(void 0===e?"undefined":l(e)))throw new Error("saveData needs to be of type object!");var n=e.lines,r=e.width,o=e.height;if(!n||"function"!=typeof n.push)throw new Error("saveData.lines needs to be an array!");if(i.clear(),r===i.props.canvasWidth&&o===i.props.canvasHeight)i.simulateDrawingLines({lines:n,immediate:t});else{var a=i.props.canvasWidth/r,s=i.props.canvasHeight/o,u=(a+s)/2;i.simulateDrawingLines({lines:n.map(function(e){return f({},e,{points:e.points.map(function(e){return{x:e.x*a,y:e.y*s}}),brushRadius:e.brushRadius*u})}),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=d(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:f({display:"block",background:"#fff",touchAction:"none",width:this.props.canvasWidth,height:this.props.canvasHeight},this.props.style),ref:function(t){t&&(e.canvasContainer=t)}},v.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({},p,{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,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__=[]}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},f=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||r},l=g(0,0,0,0);function d(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+d(e["border-"+n+"-width"])},0)}function v(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return l;var i=f(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]=d(o)}return t}(i),o=r.left+r.right,a=r.top+r.bottom,s=d(i.width),u=d(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===f(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 f(e).SVGGraphicsElement}:function(e){return e instanceof f(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 f(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 f(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,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});
+!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});
 //# 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

Worsened metrics

Total package byte prevSize

276374

decreased by-0.37%

Lines of code

3269

decreased by-0.09%

No dependency changes