react-canvas-draw - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

es/index.js

@@ -22,3 +22,8 @@ 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.getSaveData = function () {
-      return JSON.stringify(_this.linesArray);
+      var saveData = {
+        linesArray: _this.linesArray,
+        width: _this.props.canvasWidth,
+        height: _this.props.canvasHeight
+      };
+      return JSON.stringify(saveData);
     };
@@ -32,6 +37,10 @@
         // parse first to catch any possible errors before clear()
-        var parsedSaveData = JSON.parse(saveData);
 
-        if (typeof parsedSaveData.push !== "function") {
-          throw new Error("parsedSaveData needs to be an array!");
+        var _JSON$parse = JSON.parse(saveData),
+            linesArray = _JSON$parse.linesArray,
+            width = _JSON$parse.width,
+            height = _JSON$parse.height;
+
+        if (!linesArray || typeof linesArray.push !== "function") {
+          throw new Error("linesArray needs to be an array!");
         }
@@ -41,3 +50,22 @@
         _this.clear();
-        _this.linesArray = parsedSaveData;
+
+        if (width === _this.props.canvasWidth && height === _this.props.canvasHeight) {
+          _this.linesArray = linesArray;
+        } else {
+          // we need to rescale the lines based on saved & current dimensions
+          var scaleX = _this.props.canvasWidth / width;
+          var scaleY = _this.props.canvasHeight / height;
+          var scaleAvg = (scaleX + scaleY) / 2;
+
+          _this.linesArray = linesArray.map(function (line) {
+            return _extends({}, line, {
+              endX: line.endX * scaleX,
+              endY: line.endY * scaleY,
+              startX: line.startX * scaleX,
+              startY: line.startY * scaleY,
+              size: line.size * scaleAvg
+            });
+          });
+        }
+
         _this.linesArray.forEach(function (line, idx) {
@@ -44,0 +72,0 @@ // draw the line with a time offset

lib/index.js

@@ -31,3 +31,8 @@ "use strict";
     _this.getSaveData = function () {
-      return JSON.stringify(_this.linesArray);
+      var saveData = {
+        linesArray: _this.linesArray,
+        width: _this.props.canvasWidth,
+        height: _this.props.canvasHeight
+      };
+      return JSON.stringify(saveData);
     };
@@ -41,6 +46,10 @@
         // parse first to catch any possible errors before clear()
-        var parsedSaveData = JSON.parse(saveData);
 
-        if (typeof parsedSaveData.push !== "function") {
-          throw new Error("parsedSaveData needs to be an array!");
+        var _JSON$parse = JSON.parse(saveData),
+            linesArray = _JSON$parse.linesArray,
+            width = _JSON$parse.width,
+            height = _JSON$parse.height;
+
+        if (!linesArray || typeof linesArray.push !== "function") {
+          throw new Error("linesArray needs to be an array!");
         }
@@ -50,3 +59,22 @@
         _this.clear();
-        _this.linesArray = parsedSaveData;
+
+        if (width === _this.props.canvasWidth && height === _this.props.canvasHeight) {
+          _this.linesArray = linesArray;
+        } else {
+          // we need to rescale the lines based on saved & current dimensions
+          var scaleX = _this.props.canvasWidth / width;
+          var scaleY = _this.props.canvasHeight / height;
+          var scaleAvg = (scaleX + scaleY) / 2;
+
+          _this.linesArray = linesArray.map(function (line) {
+            return _extends({}, line, {
+              endX: line.endX * scaleX,
+              endY: line.endY * scaleY,
+              startX: line.startX * scaleX,
+              startY: line.startY * scaleY,
+              size: line.size * scaleAvg
+            });
+          });
+        }
+
         _this.linesArray.forEach(function (line, idx) {
@@ -53,0 +81,0 @@ // draw the line with a time offset

package.json

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

README.md

@@ -9,3 +9,2 @@ # React Canvas Draw
 
-
 ## Installation
@@ -44,2 +43,14 @@
 
+### Props
+
+```
+  static defaultProps = {
+    loadTimeOffset: 5,
+    brushSize: 6,
+    brushColor: "#444",
+    canvasWidth: 400,
+    canvasHeight: 400
+  };
+```
+
 ## Local Development
@@ -51,2 +62,6 @@
 
+## Tips
+
+If you want to save large strings, like the stringified JSON of a drawing, I recommend you to use [pieroxy/lz-string](https://github.com/pieroxy/lz-string) for compression. It's LZ compression will bring down your long strings to only ~10% of it's original size.
+
 ## License
@@ -53,0 +68,0 @@

umd/react-canvas-draw.js

 /*!
- * react-canvas-draw v0.1.3 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.5 - https://mbeierl.github.io/react-canvas-draw/
  * MIT Licensed
@@ -117,3 +117,8 @@ */
     _this.getSaveData = function () {
-      return JSON.stringify(_this.linesArray);
+      var saveData = {
+        linesArray: _this.linesArray,
+        width: _this.props.canvasWidth,
+        height: _this.props.canvasHeight
+      };
+      return JSON.stringify(saveData);
     };
@@ -127,6 +132,10 @@
         // parse first to catch any possible errors before clear()
-        var parsedSaveData = JSON.parse(saveData);
 
-        if (typeof parsedSaveData.push !== "function") {
-          throw new Error("parsedSaveData needs to be an array!");
+        var _JSON$parse = JSON.parse(saveData),
+            linesArray = _JSON$parse.linesArray,
+            width = _JSON$parse.width,
+            height = _JSON$parse.height;
+
+        if (!linesArray || typeof linesArray.push !== "function") {
+          throw new Error("linesArray needs to be an array!");
         }
@@ -136,3 +145,22 @@
         _this.clear();
-        _this.linesArray = parsedSaveData;
+
+        if (width === _this.props.canvasWidth && height === _this.props.canvasHeight) {
+          _this.linesArray = linesArray;
+        } else {
+          // we need to rescale the lines based on saved & current dimensions
+          var scaleX = _this.props.canvasWidth / width;
+          var scaleY = _this.props.canvasHeight / height;
+          var scaleAvg = (scaleX + scaleY) / 2;
+
+          _this.linesArray = linesArray.map(function (line) {
+            return _extends({}, line, {
+              endX: line.endX * scaleX,
+              endY: line.endY * scaleY,
+              startX: line.startX * scaleX,
+              startY: line.startY * scaleY,
+              size: line.size * scaleAvg
+            });
+          });
+        }
+
         _this.linesArray.forEach(function (line, idx) {
@@ -139,0 +167,0 @@ // draw the line with a time offset

umd/react-canvas-draw.min.js

 /*!
- * react-canvas-draw v0.1.3 - https://mbeierl.github.io/react-canvas-draw/
+ * react-canvas-draw v0.1.5 - 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 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:6,brushColor:"#444",canvasWidth:400,canvasHeight:400},o)},function(e,n){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 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),s=n.n(a),i=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(){var t={linesArray:r.linesArray,width:r.props.canvasWidth,height:r.props.canvasHeight};return JSON.stringify(t)},r.loadSaveData=function(t){try{if("string"!=typeof t)throw new Error("saveData needs to be a stringified array!");var e=JSON.parse(t),n=e.linesArray,o=e.width,a=e.height;if(!n||"function"!=typeof n.push)throw new Error("linesArray needs to be an array!");if(r.clear(),o===r.props.canvasWidth&&a===r.props.canvasHeight)r.linesArray=n;else{var s=r.props.canvasWidth/o,c=r.props.canvasHeight/a,u=(s+c)/2;r.linesArray=n.map(function(t){return i({},t,{endX:t.endX*s,endY:t.endY*c,startX:t.startX*s,startY:t.startY*c,size:t.size*u})})}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 s.a.createElement("canvas",{width:this.props.canvasWidth,height:this.props.canvasHeight,style:i({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:6,brushColor:"#444",canvasWidth:400,canvasHeight:400},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

47686

increased by13.26%

Lines of code

659

increased by12.46%

Number of lines in readme file

74

increased by25.42%

No dependency changes