From 09e201a0505cd80361169875916be3cc0db24a67 Mon Sep 17 00:00:00 2001
From: Andrew Guterman <andrew_guterman@yahoo.com>
Date: Mon, 19 Feb 2018 20:23:59 -0800
Subject: [PATCH 1/2] defaultImage and onDraw

---
 lib/index.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/lib/index.jsx b/lib/index.jsx
index e8bbc72..4ea741f 100644
--- a/lib/index.jsx
+++ b/lib/index.jsx
@@ -15,6 +15,17 @@ class DrawableCanvas extends React.Component {
 
     const context = canvas.getContext('2d');
 
+    if(this.props.defaultImage)
+    {
+      let image = new Image();
+      image.src = this.props.defaultImage;
+      
+      image.onload = function()
+      {
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      };
+    }
+
     this.setState({
       canvas,
       context
@@ -94,6 +105,11 @@ class DrawableCanvas extends React.Component {
     this.setState({
       drawing: false
     });
+
+    if(this.props.onDraw)
+    {
+      this.props.onDraw(this.state.canvas.toDataURL());
+    }
   }
 
   draw(lX, lY, cX, cY) {

From 84e21177ae14b8ded03633f6011f226a24193a65 Mon Sep 17 00:00:00 2001
From: Andrew Guterman <andrew_guterman@yahoo.com>
Date: Fri, 29 Jun 2018 16:07:01 -0700
Subject: [PATCH 2/2] Built new version

---
 .gitignore   | 1 -
 lib/index.js | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 lib/index.js

diff --git a/.gitignore b/.gitignore
index 5d42bc7..57886fa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,7 +40,6 @@ Thumbs.db
 # Custom
 #####################
 node_modules
-lib/index.js
 
 # Bundles created by webpack
 **/public/*.js
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 0000000..ffcb6a2
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1 @@
+"use strict";function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(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}function _inherits(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)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function t(t,e){for(var a=0;a<e.length;a++){var n=e[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,a,n){return a&&t(e.prototype,a),n&&t(e,n),e}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_objectAssign=require("object-assign"),_objectAssign2=_interopRequireDefault(_objectAssign),DrawableCanvas=function(t){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return _inherits(e,t),_createClass(e,[{key:"componentDidMount",value:function(){var t=_reactDom2.default.findDOMNode(this);t.style.width="100%",t.style.height="100%",t.width=t.offsetWidth,t.height=t.offsetHeight;var e=t.getContext("2d");if(this.props.defaultImage){var a=new Image;a.src=this.props.defaultImage,a.onload=function(){e.drawImage(a,0,0,t.width,t.height)}}this.setState({canvas:t,context:e})}},{key:"componentWillReceiveProps",value:function(t){t.clear&&this.resetCanvas()}},{key:"handleOnTouchStart",value:function(t){var e=this.state.canvas.getBoundingClientRect();this.state.context.beginPath(),this.setState({lastX:t.targetTouches[0].pageX-e.left,lastY:t.targetTouches[0].pageY-e.top,drawing:!0})}},{key:"handleOnMouseDown",value:function(t){var e=this.state.canvas.getBoundingClientRect();this.state.context.beginPath(),this.setState({lastX:t.clientX-e.left,lastY:t.clientY-e.top,drawing:!0})}},{key:"handleOnTouchMove",value:function(t){if(this.state.drawing){var e=this.state.canvas.getBoundingClientRect(),a=this.state.lastX,n=this.state.lastY,s=t.targetTouches[0].pageX-e.left,o=t.targetTouches[0].pageY-e.top;this.draw(a,n,s,o),this.setState({lastX:s,lastY:o})}}},{key:"handleOnMouseMove",value:function(t){if(this.state.drawing){var e=this.state.canvas.getBoundingClientRect(),a=this.state.lastX,n=this.state.lastY,s=t.clientX-e.left,o=t.clientY-e.top;this.draw(a,n,s,o),this.setState({lastX:s,lastY:o})}}},{key:"handleonMouseUp",value:function(){this.setState({drawing:!1}),this.props.onDraw&&this.props.onDraw(this.state.canvas.toDataURL())}},{key:"draw",value:function(t,e,a,n){var s=this.state.context;s.strokeStyle=this.props.brushColor,s.lineWidth=this.props.lineWidth,this.setState({context:s}),this.state.context.moveTo(t,e),this.state.context.lineTo(a,n),this.state.context.stroke()}},{key:"resetCanvas",value:function(){var t=this.state.context.canvas.width,e=this.state.context.canvas.height;this.state.context.clearRect(0,0,t,e)}},{key:"canvasStyle",value:function(){var t=e.getDefaultStyle(),a=this.props.canvasStyle;return(0,_objectAssign2.default)({},t,a)}},{key:"render",value:function(){return _react2.default.createElement("canvas",{style:this.canvasStyle(),onMouseDown:this.handleOnMouseDown.bind(this),onTouchStart:this.handleOnTouchStart.bind(this),onMouseMove:this.handleOnMouseMove.bind(this),onTouchMove:this.handleOnTouchMove.bind(this),onMouseUp:this.handleonMouseUp.bind(this),onTouchEnd:this.handleonMouseUp.bind(this)})}}],[{key:"getDefaultStyle",value:function(){return{brushColor:"#FFFF00",lineWidth:4,cursor:"pointer",canvasStyle:{backgroundColor:"#00FFDC"},clear:!1}}}]),e}(_react2.default.Component);DrawableCanvas.propTypes={brushColor:_propTypes2.default.string,lineWidth:_propTypes2.default.number,cursor:_propTypes2.default.string,canvasStyle:_propTypes2.default.shape({backgroundColor:_propTypes2.default.string}),clear:_propTypes2.default.bool},exports.default=DrawableCanvas;
\ No newline at end of file