react-drawable-canvas-fork/lib/index.js

A React.js component for drawable canvas.

"use strict";function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _defineProperty(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,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 n=0;n<e.length;n++){var a=e[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,n,a){return n&&t(e.prototype,n),a&&t(e,a),e}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_objectAssign=require("object-assign"),_objectAssign2=_interopRequireDefault(_objectAssign),DrawableCanvas=function(t){function e(t){return _classCallCheck(this,e),_possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return _inherits(e,t),_createClass(e,[{key:"componentDidMount",value:function(){var t=_reactDom2.default.findDOMNode(this);t.style.width=this.props.width,t.style.height=this.props.height,t.width=this.props.width,t.height=this.props.height;var e=t.getContext("2d");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(),n=this.state.lastX,a=this.state.lastY,o=t.targetTouches[0].pageX-e.left,s=t.targetTouches[0].pageY-e.top;this.draw(n,a,o,s),this.setState({lastX:o,lastY:s})}}},{key:"handleOnMouseMove",value:function(t){if(this.state.drawing){var e=this.state.canvas.getBoundingClientRect(),n=this.state.lastX,a=this.state.lastY,o=t.clientX-e.left,s=t.clientY-e.top;this.draw(n,a,o,s),this.setState({lastX:o,lastY:s})}}},{key:"handleonMouseUp",value:function(){this.setState({drawing:!1})}},{key:"draw",value:function(t,e,n,a){var o=this.state.context;o.strokeStyle=this.props.brushColor,o.lineWidth=this.props.lineWidth,this.setState({context:o}),this.state.context.moveTo(t,e),this.state.context.lineTo(n,a),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(),n=this.props.canvasStyle;return(0,_objectAssign2.default)({},t,n)}},{key:"render",value:function(){var t;return _react2.default.createElement("canvas",(t={style:this.canvasStyle(),width:this.props.width},_defineProperty(t,"width",this.props.height),_defineProperty(t,"onMouseDown",this.handleOnMouseDown.bind(this)),_defineProperty(t,"onTouchStart",this.handleOnTouchStart.bind(this)),_defineProperty(t,"onMouseMove",this.handleOnMouseMove.bind(this)),_defineProperty(t,"onTouchMove",this.handleOnTouchMove.bind(this)),_defineProperty(t,"onMouseUp",this.handleonMouseUp.bind(this)),_defineProperty(t,"onTouchEnd",this.handleonMouseUp.bind(this)),t))}}],[{key:"getDefaultStyle",value:function(){return{brushColor:"#FFFF00",lineWidth:4,cursor:"pointer",canvasStyle:{backgroundColor:"#00FFDC"},clear:!1}}}]),e}(_react2.default.Component);exports.default=DrawableCanvas;