react-canvas-draw - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

es/index.js

@@ -55,6 +55,16 @@ 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; };
 
-      // calculate mouse position inside canvas
+      // use cursor pos as default
+      var clientX = e.clientX;
+      var clientY = e.clientY;
+
+      // use first touch if available
+      if (e.touches && e.touches.length > 0) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      }
+
+      // return mouse/touch position inside canvas
       return {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
+        x: clientX - rect.left,
+        y: clientY - rect.top
       };
@@ -94,5 +104,2 @@ };
       _this.draw(e);
-      e.clientX += 1;
-      e.clientY += 1;
-      _this.draw(e);
     };
@@ -113,5 +120,8 @@
 
-      var newX = x;
-      var newY = y;
+      // Offset by 1 to ensure drawing a dot on click
 
+
+      var newX = x + 1;
+      var newY = y + 1;
+
       // create current line object
@@ -157,3 +167,3 @@ var line = {
         background: "#fff",
-        margin: "0.9rem"
+        touchAction: "none"
       }, this.props.style),
@@ -172,3 +182,7 @@ ref: function ref(canvas) {
       onMouseOut: this.drawEnd,
-      onMouseMove: this.draw
+      onMouseMove: this.draw,
+      onTouchStart: this.drawStart,
+      onTouchMove: this.draw,
+      onTouchEnd: this.drawEnd,
+      onTouchCancel: this.drawEnd
     });
@@ -182,6 +196,6 @@ };
   brushColor: "#444",
-  canvasWidth: 800,
-  canvasHeight: 600
+  canvasWidth: window.innerWidth * 0.8,
+  canvasHeight: window.innerHeight * 0.5
 }, _temp);
 
 export { _default as default };

lib/index.js

@@ -64,6 +64,16 @@ "use strict";
 
-      // calculate mouse position inside canvas
+      // use cursor pos as default
+      var clientX = e.clientX;
+      var clientY = e.clientY;
+
+      // use first touch if available
+      if (e.touches && e.touches.length > 0) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      }
+
+      // return mouse/touch position inside canvas
       return {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
+        x: clientX - rect.left,
+        y: clientY - rect.top
       };
@@ -103,5 +113,2 @@ };
       _this.draw(e);
-      e.clientX += 1;
-      e.clientY += 1;
-      _this.draw(e);
     };
@@ -122,5 +129,8 @@
 
-      var newX = x;
-      var newY = y;
+      // Offset by 1 to ensure drawing a dot on click
 
+
+      var newX = x + 1;
+      var newY = y + 1;
+
       // create current line object
@@ -166,3 +176,3 @@ var line = {
         background: "#fff",
-        margin: "0.9rem"
+        touchAction: "none"
       }, this.props.style),
@@ -181,3 +191,7 @@ ref: function ref(canvas) {
       onMouseOut: this.drawEnd,
-      onMouseMove: this.draw
+      onMouseMove: this.draw,
+      onTouchStart: this.drawStart,
+      onTouchMove: this.draw,
+      onTouchEnd: this.drawEnd,
+      onTouchCancel: this.drawEnd
     });
@@ -191,4 +205,4 @@ };
   brushColor: "#444",
-  canvasWidth: 800,
-  canvasHeight: 600
+  canvasWidth: window.innerWidth * 0.8,
+  canvasHeight: window.innerHeight * 0.5
 }, _temp);
@@ -195,0 +209,0 @@

package.json

 {
   "name": "react-canvas-draw",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A simple yet powerful canvas-drawing component for React.",
@@ -27,5 +27,12 @@ "main": "lib/index.js",
   "devDependencies": {
+    "babel-eslint": "^7.2.3",
     "css-loader": "^0.28.9",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.1.1",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-plugin-flowtype": "^2.34.1",
+    "eslint-plugin-import": "^2.6.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.1.0",
     "gh-pages": "^1.1.0",
@@ -32,0 +39,0 @@ "nwb": "0.21.x",

umd/react-canvas-draw.js

 /*!
- * react-canvas-draw v0.1.0 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.1 - https://mbeierl.github.io/react-canvas-draw/
  * MIT Licensed
@@ -150,6 +150,16 @@ */
 
-      // calculate mouse position inside canvas
+      // use cursor pos as default
+      var clientX = e.clientX;
+      var clientY = e.clientY;
+
+      // use first touch if available
+      if (e.touches && e.touches.length > 0) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      }
+
+      // return mouse/touch position inside canvas
       return {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
+        x: clientX - rect.left,
+        y: clientY - rect.top
       };
@@ -189,5 +199,2 @@ };
       _this.draw(e);
-      e.clientX += 1;
-      e.clientY += 1;
-      _this.draw(e);
     };
@@ -208,5 +215,8 @@
 
-      var newX = x;
-      var newY = y;
+      // Offset by 1 to ensure drawing a dot on click
 
+
+      var newX = x + 1;
+      var newY = y + 1;
+
       // create current line object
@@ -252,3 +262,3 @@ var line = {
         background: "#fff",
-        margin: "0.9rem"
+        touchAction: "none"
       }, this.props.style),
@@ -267,3 +277,7 @@ ref: function ref(canvas) {
       onMouseOut: this.drawEnd,
-      onMouseMove: this.draw
+      onMouseMove: this.draw,
+      onTouchStart: this.drawStart,
+      onTouchMove: this.draw,
+      onTouchEnd: this.drawEnd,
+      onTouchCancel: this.drawEnd
     });
@@ -277,4 +291,4 @@ };
   brushColor: "#444",
-  canvasWidth: 800,
-  canvasHeight: 600
+  canvasWidth: window.innerWidth * 0.8,
+  canvasHeight: window.innerHeight * 0.5
 }, _temp);
@@ -281,0 +295,0 @@

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v0.1.0 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.1 - 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(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});
+!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 n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"default",function(){return c});var r,o,a=n(2),i=n.n(a),s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t};var c=(o=r=function(t){function e(n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var r=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,n));return r.getSaveData=function(){return JSON.stringify(r.linesArray)},r.loadSaveData=function(t){try{if("string"!=typeof t)throw new Error("saveData needs to be a stringified array!");var e=JSON.parse(t);if("function"!=typeof e.push)throw new Error("parsedSaveData needs to be an array!");r.clear(),r.linesArray=e,r.linesArray.forEach(function(t,e){window.setTimeout(function(){return r.drawLine(t)},e*r.props.loadTimeOffset)})}catch(t){throw t}},r.getMousePos=function(t){var e=r.canvas.getBoundingClientRect(),n=t.clientX,o=t.clientY;return t.touches&&t.touches.length>0&&(n=t.touches[0].clientX,o=t.touches[0].clientY),{x:n-e.left,y:o-e.top}},r.clear=function(){r.ctx&&r.ctx.clearRect(0,0,r.props.canvasWidth,r.props.canvasHeight),r.linesArray=[]},r.drawLine=function(t){r.ctx&&(r.ctx.strokeStyle=t.color,r.ctx.lineWidth=t.size,r.ctx.lineCap="round",r.ctx.beginPath(),r.ctx.moveTo(t.startX,t.startY),r.ctx.lineTo(t.endX,t.endY),r.ctx.stroke())},r.drawStart=function(t){r.isMouseDown=!0;var e=r.getMousePos(t),n=e.x,o=e.y;r.x=n,r.y=o,r.draw(t)},r.drawEnd=function(){r.isMouseDown=!1},r.draw=function(t){if(r.isMouseDown){var e=r.getMousePos(t),n=e.x+1,o=e.y+1,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(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),r.defaultProps={loadTimeOffset:5,brushSize:10,brushColor:"#444",canvasWidth:.8*window.innerWidth,canvasHeight:.5*window.innerHeight},o)},function(e,n){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

42368

increased by6.41%

Lines of code

586

increased by5.59%

Worsened metrics

Dev dependency count

15

increased by87.5%

No dependency changes