Re-add drawing of ui & add hideInterface prop

Author: embiem

README.md

@@ -57,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

@@ -38,9 +38,7 @@ class Demo extends Component {
           default values.
         </p>
         <p>Try it out! Draw on this white canvas:</p>
-        <CanvasDraw
-          onChange={() => console.log('onChange') }
-        />
+        <CanvasDraw onChange={() => console.log("onChange")} />
         <h2>Custom Brush-Color</h2>
         <p>
           Let's spice things up by using custom brush colors{" "}
@@ -71,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

src/index.js

@@ -59,7 +59,8 @@ 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 = {
@@ -77,7 +78,8 @@ export default class extends PureComponent {
     disabled: false,
     imgSrc: "",
     saveData: "",
-    immediateLoading: false
+    immediateLoading: false,
+    hideInterface: false
   };
 
   constructor(props) {
@@ -175,7 +177,7 @@ export default class extends PureComponent {
     const lines = this.lines.slice(0, -1);
     this.clear();
     this.simulateDrawingLines({ lines, immediate: true });
-    this.triggerOnChange()
+    this.triggerOnChange();
   };
 
   getSaveData = () => {
@@ -440,12 +442,12 @@ export default class extends PureComponent {
     // Clear the temporary line-drawing canvas
     this.ctx.temp.clearRect(0, 0, width, height);
 
-    this.triggerOnChange()
+    this.triggerOnChange();
   };
 
   triggerOnChange = () => {
-    this.props.onChange && this.props.onChange(this)
-  }
+    this.props.onChange && this.props.onChange(this);
+  };
 
   clear = () => {
     this.lines = [];
@@ -469,7 +471,7 @@ export default class extends PureComponent {
       const pointer = this.lazy.getPointerCoordinates();
       const brush = this.lazy.getBrushCoordinates();
 
-      // this.drawInterface(this.ctx.interface, pointer, brush);
+      this.drawInterface(this.ctx.interface, pointer, brush);
       this.mouseHasMoved = false;
       this.valuesChanged = false;
     }
@@ -512,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