react-canvas-draw - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

es/index.js

@@ -167,3 +167,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; };
     _this.draw = function (e) {
-      if (!_this.isMouseDown) return;
+      if (!_this.isMouseDown || _this.props.disabled) return;
 
@@ -252,5 +252,6 @@ // calculate the current x, y coords
   canvasWidth: 400,
-  canvasHeight: 400
+  canvasHeight: 400,
+  disabled: false
 }, _temp);
 
 export { _default as default };

lib/index.js

@@ -176,3 +176,3 @@ "use strict";
     _this.draw = function (e) {
-      if (!_this.isMouseDown) return;
+      if (!_this.isMouseDown || _this.props.disabled) return;
 
@@ -261,3 +261,4 @@ // calculate the current x, y coords
   canvasWidth: 400,
-  canvasHeight: 400
+  canvasHeight: 400,
+  disabled: false
 }, _temp);
@@ -264,0 +265,0 @@

package.json

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

README.md

@@ -45,9 +45,10 @@ # React Canvas Draw
 ```
-  static defaultProps = {
-    loadTimeOffset: 5,
-    brushSize: 6,
-    brushColor: "#444",
-    canvasWidth: 400,
-    canvasHeight: 400
-  };
+static defaultProps = {
+  loadTimeOffset: 5,
+  brushSize: 6,
+  brushColor: "#444",
+  canvasWidth: 400,
+  canvasHeight: 400,
+  disabled: false
+};
 ```
@@ -63,3 +64,4 @@
 * `undo()` removes the latest change to the drawing. This includes everything drawn since the last MouseDown event.
-* `drawLine(line)` to draw a line. This can be useful if you want to automate drawing.  The line parameter is an object of the following form:
+* `drawLine(line)` to draw a line. This can be useful if you want to automate drawing. The line parameter is an object of the following form:
+
 ```
@@ -76,3 +78,2 @@ const line = {
 
-
 ## Local Development
@@ -79,0 +80,0 @@

umd/react-canvas-draw.js

 /*!
- * react-canvas-draw v0.1.8 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.9 - https://mbeierl.github.io/react-canvas-draw/
  * MIT Licensed
@@ -262,3 +262,3 @@ */
     _this.draw = function (e) {
-      if (!_this.isMouseDown) return;
+      if (!_this.isMouseDown || _this.props.disabled) return;
 
@@ -347,3 +347,4 @@ // calculate the current x, y coords
   canvasWidth: 400,
-  canvasHeight: 400
+  canvasHeight: 400,
+  disabled: false
 }, _temp);
@@ -350,0 +351,0 @@

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v0.1.8 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.9 - https://mbeierl.github.io/react-canvas-draw/
  * MIT Licensed
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCanvasDraw=e(require("react")):t.ReactCanvasDraw=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){t.exports=r(1)},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r.d(e,"default",function(){return c});var n,o,a=r(2),i=r.n(a),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t};var c=(o=n=function(t){function e(r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,r));return n.getSaveData=function(){var t={linesArray:n.linesArray,width:n.props.canvasWidth,height:n.props.canvasHeight};return JSON.stringify(t)},n.loadSaveData=function(t,e){try{if("string"!=typeof t)throw new Error("saveData needs to be a stringified array!");var r=JSON.parse(t),o=r.linesArray,a=r.width,i=r.height;if(!o||"function"!=typeof o.push)throw new Error("linesArray needs to be an array!");if(n.clear(),a===n.props.canvasWidth&&i===n.props.canvasHeight)n.linesArray=o;else{var c=n.props.canvasWidth/a,u=n.props.canvasHeight/i,p=(c+u)/2;n.linesArray=o.map(function(t){return s({},t,{endX:t.endX*c,endY:t.endY*u,startX:t.startX*c,startY:t.startY*u,size:t.size*p})})}n.redraw(e)}catch(t){throw t}},n.redraw=function(t){n.ctx&&n.ctx.clearRect(0,0,n.props.canvasWidth,n.props.canvasHeight),n.timeoutValidity++;var e=n.timeoutValidity;n.linesArray.forEach(function(r,o){t?n.drawLine(r):window.setTimeout(function(){e===n.timeoutValidity&&n.drawLine(r)},o*n.props.loadTimeOffset)})},n.getMousePos=function(t){var e=n.canvas.getBoundingClientRect(),r=t.clientX,o=t.clientY;return t.touches&&t.touches.length>0&&(r=t.touches[0].clientX,o=t.touches[0].clientY),{x:r-e.left,y:o-e.top}},n.clear=function(){n.ctx&&n.ctx.clearRect(0,0,n.props.canvasWidth,n.props.canvasHeight),n.timeoutValidity++,n.linesArray=[],n.startDrawIdx=[]},n.undo=function(){return n.startDrawIdx.length>0&&(n.linesArray.splice(n.startDrawIdx.pop()),n.redraw(!0),!0)},n.drawLine=function(t){n.ctx&&(n.ctx.strokeStyle=t.color,n.ctx.lineWidth=t.size,n.ctx.lineCap="round",n.ctx.beginPath(),n.ctx.moveTo(t.startX,t.startY),n.ctx.lineTo(t.endX,t.endY),n.ctx.stroke())},n.drawStart=function(t){n.isMouseDown=!0,n.startDrawIdx.push(n.linesArray.length);var e=n.getMousePos(t),r=e.x,o=e.y;n.x=r,n.y=o,n.draw(t)},n.drawEnd=function(){n.isMouseDown=!1},n.draw=function(t){if(n.isMouseDown){var e=n.getMousePos(t),r=e.x+1,o=e.y+1,a={color:n.props.brushColor,size:n.props.brushSize,startX:n.x,startY:n.y,endX:r,endY:o};n.drawLine(a),n.linesArray.push(a),"function"==typeof n.props.onChange&&n.props.onChange(n.linesArray),n.x=r,n.y=o}},n.isMouseDown=!1,n.linesArray=[],n.startDrawIdx=[],n.timeoutValidity=0,n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.render=function(){var t=this;return i.a.createElement("canvas",{width:this.props.canvasWidth,height:this.props.canvasHeight,style:s({display:"block",background:"#fff",touchAction:"none"},this.props.style),ref:function(e){e&&(t.canvas=e,t.ctx=e.getContext("2d"))},onMouseDown:this.drawStart,onClick:function(){return!1},onMouseUp:this.drawEnd,onMouseOut:this.drawEnd,onMouseMove:this.draw,onTouchStart:this.drawStart,onTouchMove:this.draw,onTouchEnd:this.drawEnd,onTouchCancel:this.drawEnd})},e}(a.Component),n.defaultProps={loadTimeOffset:5,brushSize:6,brushColor:"#444",canvasWidth:400,canvasHeight:400},o)},function(e,r){e.exports=t}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCanvasDraw=e(require("react")):t.ReactCanvasDraw=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){t.exports=r(1)},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r.d(e,"default",function(){return c});var n,o,a=r(2),i=r.n(a),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t};var c=(o=n=function(t){function e(r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,r));return n.getSaveData=function(){var t={linesArray:n.linesArray,width:n.props.canvasWidth,height:n.props.canvasHeight};return JSON.stringify(t)},n.loadSaveData=function(t,e){try{if("string"!=typeof t)throw new Error("saveData needs to be a stringified array!");var r=JSON.parse(t),o=r.linesArray,a=r.width,i=r.height;if(!o||"function"!=typeof o.push)throw new Error("linesArray needs to be an array!");if(n.clear(),a===n.props.canvasWidth&&i===n.props.canvasHeight)n.linesArray=o;else{var c=n.props.canvasWidth/a,u=n.props.canvasHeight/i,p=(c+u)/2;n.linesArray=o.map(function(t){return s({},t,{endX:t.endX*c,endY:t.endY*u,startX:t.startX*c,startY:t.startY*u,size:t.size*p})})}n.redraw(e)}catch(t){throw t}},n.redraw=function(t){n.ctx&&n.ctx.clearRect(0,0,n.props.canvasWidth,n.props.canvasHeight),n.timeoutValidity++;var e=n.timeoutValidity;n.linesArray.forEach(function(r,o){t?n.drawLine(r):window.setTimeout(function(){e===n.timeoutValidity&&n.drawLine(r)},o*n.props.loadTimeOffset)})},n.getMousePos=function(t){var e=n.canvas.getBoundingClientRect(),r=t.clientX,o=t.clientY;return t.touches&&t.touches.length>0&&(r=t.touches[0].clientX,o=t.touches[0].clientY),{x:r-e.left,y:o-e.top}},n.clear=function(){n.ctx&&n.ctx.clearRect(0,0,n.props.canvasWidth,n.props.canvasHeight),n.timeoutValidity++,n.linesArray=[],n.startDrawIdx=[]},n.undo=function(){return n.startDrawIdx.length>0&&(n.linesArray.splice(n.startDrawIdx.pop()),n.redraw(!0),!0)},n.drawLine=function(t){n.ctx&&(n.ctx.strokeStyle=t.color,n.ctx.lineWidth=t.size,n.ctx.lineCap="round",n.ctx.beginPath(),n.ctx.moveTo(t.startX,t.startY),n.ctx.lineTo(t.endX,t.endY),n.ctx.stroke())},n.drawStart=function(t){n.isMouseDown=!0,n.startDrawIdx.push(n.linesArray.length);var e=n.getMousePos(t),r=e.x,o=e.y;n.x=r,n.y=o,n.draw(t)},n.drawEnd=function(){n.isMouseDown=!1},n.draw=function(t){if(n.isMouseDown&&!n.props.disabled){var e=n.getMousePos(t),r=e.x+1,o=e.y+1,a={color:n.props.brushColor,size:n.props.brushSize,startX:n.x,startY:n.y,endX:r,endY:o};n.drawLine(a),n.linesArray.push(a),"function"==typeof n.props.onChange&&n.props.onChange(n.linesArray),n.x=r,n.y=o}},n.isMouseDown=!1,n.linesArray=[],n.startDrawIdx=[],n.timeoutValidity=0,n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.render=function(){var t=this;return i.a.createElement("canvas",{width:this.props.canvasWidth,height:this.props.canvasHeight,style:s({display:"block",background:"#fff",touchAction:"none"},this.props.style),ref:function(e){e&&(t.canvas=e,t.ctx=e.getContext("2d"))},onMouseDown:this.drawStart,onClick:function(){return!1},onMouseUp:this.drawEnd,onMouseOut:this.drawEnd,onMouseMove:this.draw,onTouchStart:this.drawStart,onTouchMove:this.draw,onTouchEnd:this.drawEnd,onTouchCancel:this.drawEnd})},e}(a.Component),n.defaultProps={loadTimeOffset:5,brushSize:6,brushColor:"#444",canvasWidth:400,canvasHeight:400,disabled:!1},o)},function(e,r){e.exports=t}]).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

53412

increased by0.48%

Lines of code

748

increased by0.4%

Number of lines in readme file

96

increased by1.05%

No dependency changes