react-canvas-draw - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

es/index.js

@@ -13,4 +13,2 @@ 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 classes from "./index.css";
-
 var _default = (_temp = _class = function (_Component) {
@@ -154,4 +152,4 @@ _inherits(_default, _Component);
       height: this.props.canvasHeight,
-      className: classes.canvas,
       style: _extends({
+        display: "block",
         background: "#fff",
@@ -158,0 +156,0 @@ margin: "0.9rem"

lib/index.js

@@ -14,6 +14,2 @@ "use strict";
 
-var _index = require("./index.css");
-
-var _index2 = _interopRequireDefault(_index);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -165,4 +161,4 @@
       height: this.props.canvasHeight,
-      className: _index2.default.canvas,
       style: _extends({
+        display: "block",
         background: "#fff",
@@ -169,0 +165,0 @@ margin: "0.9rem"

package.json

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

README.md

@@ -39,3 +39,3 @@ # React Canvas Draw
 
-For more examples, like saving and loading a drawing ==> look into the `/demo/src` folder.
+For more examples, like saving and loading a drawing ==> look into the [`/demo/src` folder](https://github.com/mBeierl/react-canvas-draw/tree/master/demo/src).
 
@@ -52,3 +52,3 @@ Even more examples are coming, check back soon!
 
-MIT, see LICENSE.md for details.
+MIT, see [LICENSE](https://github.com/mBeierl/react-canvas-draw/blob/master/LICENSE) for details.
 
@@ -55,0 +55,0 @@ [build-badge]: https://img.shields.io/travis/mBeierl/react-canvas-draw/master.png?style=flat-square

umd/react-canvas-draw.js

@@ -96,4 +96,2 @@ /*!
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index_css__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__index_css__);
 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; };
@@ -111,4 +109,2 @@
 
-
-
 var _default = (_temp = _class = function (_Component) {
@@ -252,4 +248,4 @@ _inherits(_default, _Component);
       height: this.props.canvasHeight,
-      className: __WEBPACK_IMPORTED_MODULE_1__index_css___default.a.canvas,
       style: _extends({
+        display: "block",
         background: "#fff",
@@ -291,11 +287,4 @@ margin: "0.9rem"
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-// removed by extract-text-webpack-plugin
-module.exports = {"canvas":"canvas__1aihf"};
-
 /***/ })
 /******/ ])["default"];
 });

umd/react-canvas-draw.min.js

@@ -5,3 +5,3 @@ /*!
  */
-!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(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},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=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return f});var r,o,a=n(2),i=n.n(a),s=n(3),c=n.n(s),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};var f=(o=r=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 r=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 r.getSaveData=function(){return JSON.stringify(r.linesArray)},r.loadSaveData=function(e){try{if("string"!=typeof e)throw new Error("saveData needs to be a stringified array!");var t=JSON.parse(e);if("function"!=typeof t.push)throw new Error("parsedSaveData needs to be an array!");r.clear(),r.linesArray=t,r.linesArray.forEach(function(e,t){window.setTimeout(function(){return r.drawLine(e)},t*r.props.loadTimeOffset)})}catch(e){throw e}},r.getMousePos=function(e){var t=r.canvas.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}},r.clear=function(){r.ctx&&r.ctx.clearRect(0,0,r.props.canvasWidth,r.props.canvasHeight),r.linesArray=[]},r.drawLine=function(e){r.ctx&&(r.ctx.strokeStyle=e.color,r.ctx.lineWidth=e.size,r.ctx.lineCap="round",r.ctx.beginPath(),r.ctx.moveTo(e.startX,e.startY),r.ctx.lineTo(e.endX,e.endY),r.ctx.stroke())},r.drawStart=function(e){r.isMouseDown=!0;var t=r.getMousePos(e),n=t.x,o=t.y;r.x=n,r.y=o,r.draw(e),e.clientX+=1,e.clientY+=1,r.draw(e)},r.drawEnd=function(){r.isMouseDown=!1},r.draw=function(e){if(r.isMouseDown){var t=r.getMousePos(e),n=t.x,o=t.y,a={color:r.props.brushColor,size:r.props.brushSize,startX:r.x,startY:r.y,endX:n,endY:o};r.drawLine(a),r.linesArray.push(a),"function"==typeof r.props.onChange&&r.props.onChange(r.linesArray),r.x=n,r.y=o}},r.isMouseDown=!1,r.linesArray=[],r}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.render=function(){var e=this;return i.a.createElement("canvas",{width:this.props.canvasWidth,height:this.props.canvasHeight,className:c.a.canvas,style:u({background:"#fff",margin:"0.9rem"},this.props.style),ref:function(t){t&&(e.canvas=t,e.ctx=t.getContext("2d"))},onMouseDown:this.drawStart,onClick:function(){return!1},onMouseUp:this.drawEnd,onMouseOut:this.drawEnd,onMouseMove:this.draw})},t}(a.Component),r.defaultProps={loadTimeOffset:5,brushSize:10,brushColor:"#444",canvasWidth:800,canvasHeight:600},o)},function(t,n){t.exports=e},function(e,t){e.exports={canvas:"canvas__1aihf"}}]).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(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},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=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return c});var r,o,a=n(2),i=n.n(a),s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};var c=(o=r=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 r=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 r.getSaveData=function(){return JSON.stringify(r.linesArray)},r.loadSaveData=function(e){try{if("string"!=typeof e)throw new Error("saveData needs to be a stringified array!");var t=JSON.parse(e);if("function"!=typeof t.push)throw new Error("parsedSaveData needs to be an array!");r.clear(),r.linesArray=t,r.linesArray.forEach(function(e,t){window.setTimeout(function(){return r.drawLine(e)},t*r.props.loadTimeOffset)})}catch(e){throw e}},r.getMousePos=function(e){var t=r.canvas.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}},r.clear=function(){r.ctx&&r.ctx.clearRect(0,0,r.props.canvasWidth,r.props.canvasHeight),r.linesArray=[]},r.drawLine=function(e){r.ctx&&(r.ctx.strokeStyle=e.color,r.ctx.lineWidth=e.size,r.ctx.lineCap="round",r.ctx.beginPath(),r.ctx.moveTo(e.startX,e.startY),r.ctx.lineTo(e.endX,e.endY),r.ctx.stroke())},r.drawStart=function(e){r.isMouseDown=!0;var t=r.getMousePos(e),n=t.x,o=t.y;r.x=n,r.y=o,r.draw(e),e.clientX+=1,e.clientY+=1,r.draw(e)},r.drawEnd=function(){r.isMouseDown=!1},r.draw=function(e){if(r.isMouseDown){var t=r.getMousePos(e),n=t.x,o=t.y,a={color:r.props.brushColor,size:r.props.brushSize,startX:r.x,startY:r.y,endX:n,endY:o};r.drawLine(a),r.linesArray.push(a),"function"==typeof r.props.onChange&&r.props.onChange(r.linesArray),r.x=n,r.y=o}},r.isMouseDown=!1,r.linesArray=[],r}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.render=function(){var e=this;return i.a.createElement("canvas",{width:this.props.canvasWidth,height:this.props.canvasHeight,style:s({display:"block",background:"#fff",margin:"0.9rem"},this.props.style),ref:function(t){t&&(e.canvas=t,e.ctx=t.getContext("2d"))},onMouseDown:this.drawStart,onClick:function(){return!1},onMouseUp:this.drawEnd,onMouseOut:this.drawEnd,onMouseMove:this.draw})},t}(a.Component),r.defaultProps={loadTimeOffset:5,brushSize:10,brushColor:"#444",canvasWidth:800,canvasHeight:600},o)},function(t,n){t.exports=e}]).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

39817

decreased by-0.5%

Number of package files

8

decreased by-20%

Lines of code

555

decreased by-3.81%

No dependency changes