Adds onChange (#50)

* dont-draw-interface

* trigger-on-change

Co-authored-by: Alexander K <rus.alexander.k@gmail.com>

Author: 2 people

demo/src/index.js

@@ -38,7 +38,9 @@ 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{" "}

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,
@@ -62,6 +63,7 @@ export default class extends PureComponent {
   };
 
   static defaultProps = {
+    onChange: null,
     loadTimeOffset: 5,
     lazyRadius: 12,
     brushRadius: 10,
@@ -173,6 +175,7 @@ export default class extends PureComponent {
     const lines = this.lines.slice(0, -1);
     this.clear();
     this.simulateDrawingLines({ lines, immediate: true });
+    this.triggerOnChange()
   };
 
   getSaveData = () => {
@@ -436,8 +439,14 @@ 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 = () => {
     this.lines = [];
     this.valuesChanged = true;
@@ -460,7 +469,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;
     }