Merge branch 'release/1.1.0'

Author: embiem

README.md

@@ -44,6 +44,7 @@ These are the defaultProps of CanvasDraw. You can pass along any of these props
 
 ```javascript
   static defaultProps = {
+    onChange: null
     loadTimeOffset: 5,
     lazyRadius: 30,
     brushRadius: 12,
@@ -56,7 +57,8 @@ These are the defaultProps of CanvasDraw. You can pass along any of these props
     disabled: false,
     imgSrc: "",
     saveData: null,
-    immediateLoading: false
+    immediateLoading: false,
+    hideInterface: false
   };
 ```
 

demo/src/index.js

@@ -27,7 +27,7 @@ class Demo extends Component {
         <iframe
           title="GitHub link"
           src="https://ghbtns.com/github-btn.html?user=embiem&repo=react-canvas-draw&type=star&count=true"
-          frameborder="0"
+          frameBorder="0"
           scrolling="0"
           width="160px"
           height="30px"
@@ -38,7 +38,7 @@ class Demo extends Component {
           default values.
         </p>
         <p>Try it out! Draw on this white canvas:</p>
-        <CanvasDraw />
+        <CanvasDraw onChange={() => console.log("onChange")} />
         <h2>Custom Brush-Color</h2>
         <p>
           Let's spice things up by using custom brush colors{" "}
@@ -69,6 +69,9 @@ class Demo extends Component {
           brushColor="rgba(155,12,60,0.3)"
           imgSrc="https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg"
         />
+        <h2>Hide UI</h2>
+        <p>To hide the UI elements, set the `hideInterface` prop. You can also hide the grid with the `hideGrid` prop.</p>
+        <CanvasDraw hideInterface hideGrid />
         <h2>Save & Load</h2>
         <p>
           This part got me most excited. Very easy to use saving and loading of

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-canvas-draw",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A simple yet powerful canvas-drawing component for React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,9 @@
     "nwb": "0.21.x",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "style-loader": "^0.19.1"
+    "style-loader": "^0.19.1",
+    "codecov": "3.5.x",
+    "coveralls": "3.0.x"
   },
   "author": {
     "name": "Martin Beierling",

src/index.js

@@ -45,6 +45,7 @@ const dimensionsPropTypes = PropTypes.oneOfType([
 
 export default class extends PureComponent {
   static propTypes = {
+    onChange: PropTypes.func,
     loadTimeOffset: PropTypes.number,
     lazyRadius: PropTypes.number,
     brushRadius: PropTypes.number,
@@ -58,10 +59,12 @@ export default class extends PureComponent {
     disabled: PropTypes.bool,
     imgSrc: PropTypes.string,
     saveData: PropTypes.string,
-    immediateLoading: PropTypes.bool
+    immediateLoading: PropTypes.bool,
+    hideInterface: PropTypes.bool
   };
 
   static defaultProps = {
+    onChange: null,
     loadTimeOffset: 5,
     lazyRadius: 12,
     brushRadius: 10,
@@ -75,7 +78,8 @@ export default class extends PureComponent {
     disabled: false,
     imgSrc: "",
     saveData: "",
-    immediateLoading: false
+    immediateLoading: false,
+    hideInterface: false
   };
 
   constructor(props) {
@@ -173,6 +177,7 @@ export default class extends PureComponent {
     const lines = this.lines.slice(0, -1);
     this.clear();
     this.simulateDrawingLines({ lines, immediate: true });
+    this.triggerOnChange();
   };
 
   getSaveData = () => {
@@ -234,6 +239,22 @@ export default class extends PureComponent {
     lines.forEach(line => {
       const { points, brushColor, brushRadius } = line;
 
+      // Draw all at once if immediate flag is set, instead of using setTimeout
+      if (immediate) {
+        // Draw the points
+        this.drawPoints({
+          points,
+          brushColor,
+          brushRadius
+        });
+
+        // Save line with the drawn points
+        this.points = points;
+        this.saveLine({ brushColor, brushRadius });
+        return;
+      }
+
+      // Use timeout to draw
       for (let i = 1; i < points.length; i++) {
         curTime += timeoutGap;
         window.setTimeout(() => {
@@ -420,6 +441,12 @@ export default class extends PureComponent {
 
     // Clear the temporary line-drawing canvas
     this.ctx.temp.clearRect(0, 0, width, height);
+
+    this.triggerOnChange();
+  };
+
+  triggerOnChange = () => {
+    this.props.onChange && this.props.onChange(this);
   };
 
   clear = () => {
@@ -487,6 +514,8 @@ export default class extends PureComponent {
   };
 
   drawInterface = (ctx, pointer, brush) => {
+    if (this.props.hideInterface) return;
+
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
     // Draw brush preview