From b0d29a946ba3ce7bafba3ecfaecd804e92792cc0 Mon Sep 17 00:00:00 2001 From: DD Date: Wed, 30 Aug 2017 18:43:34 -0400 Subject: [PATCH] Pipe through updateSvg and call it whenever a tool finishes an action --- src/components/paint-editor.jsx | 16 +++++++++++++--- src/containers/blob/blob.js | 9 ++++++++- src/containers/brush-mode.jsx | 5 +++-- src/containers/eraser-mode.jsx | 5 +++-- src/containers/line-mode.jsx | 4 +++- src/containers/paint-editor.jsx | 24 +++++++++++------------- src/playground/playground.jsx | 8 +++++++- 7 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx index cb07fcd1..8cdaaf69 100644 --- a/src/components/paint-editor.jsx +++ b/src/components/paint-editor.jsx @@ -26,9 +26,18 @@ class PaintEditorComponent extends React.Component { canvasRef={this.setCanvas} svg={this.props.svg} /> - - - + + + ); } @@ -41,6 +50,7 @@ class PaintEditorComponent extends React.Component { } PaintEditorComponent.propTypes = { + onUpdateSvg: PropTypes.func.isRequired, svg: PropTypes.string }; diff --git a/src/containers/blob/blob.js b/src/containers/blob/blob.js index bc7f63d1..22f4cda5 100644 --- a/src/containers/blob/blob.js +++ b/src/containers/blob/blob.js @@ -24,9 +24,13 @@ class Blobbiness { return 9; } - constructor () { + /** + * @param {function} updateCallback call when the drawing has changed to let listeners know + */ + constructor (updateCallback) { this.broadBrushHelper = new BroadBrushHelper(); this.segmentBrushHelper = new SegmentBrushHelper(); + this.updateCallback = updateCallback; } /** @@ -113,6 +117,9 @@ class Blobbiness { blob.mergeBrush(lastPath); } + blob.cursorPreview.visible = false; + blob.updateCallback(); + blob.cursorPreview.visible = true; blob.cursorPreview.bringToFront(); blob.cursorPreview.position = event.point; diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index e751030f..c89e08f9 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -16,7 +16,7 @@ class BrushMode extends React.Component { 'deactivateTool', 'onScroll' ]); - this.blob = new Blobbiness(); + this.blob = new Blobbiness(this.props.onUpdateSvg); } componentDidMount () { if (this.props.isBrushModeActive) { @@ -70,7 +70,8 @@ BrushMode.propTypes = { canvas: PropTypes.instanceOf(Element).isRequired, changeBrushSize: PropTypes.func.isRequired, handleMouseDown: PropTypes.func.isRequired, - isBrushModeActive: PropTypes.bool.isRequired + isBrushModeActive: PropTypes.bool.isRequired, + onUpdateSvg: PropTypes.func.isRequired }; const mapStateToProps = state => ({ diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index af932329..0972ed36 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -16,7 +16,7 @@ class EraserMode extends React.Component { 'deactivateTool', 'onScroll' ]); - this.blob = new Blobbiness(); + this.blob = new Blobbiness(this.props.onUpdateSvg); } componentDidMount () { if (this.props.isEraserModeActive) { @@ -66,7 +66,8 @@ EraserMode.propTypes = { brushSize: PropTypes.number.isRequired }), handleMouseDown: PropTypes.func.isRequired, - isEraserModeActive: PropTypes.bool.isRequired + isEraserModeActive: PropTypes.bool.isRequired, + onUpdateSvg: PropTypes.func.isRequired }; const mapStateToProps = state => ({ diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 030b33ba..7648c045 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -209,6 +209,7 @@ class LineMode extends React.Component { } this.hitResult = null; } + this.props.onUpdateSvg(); // TODO add back undo // if (this.path) { @@ -280,7 +281,8 @@ LineMode.propTypes = { isLineModeActive: PropTypes.bool.isRequired, lineModeState: PropTypes.shape({ lineWidth: PropTypes.number.isRequired - }) + }), + onUpdateSvg: PropTypes.func.isRequired }; const mapStateToProps = state => ({ diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index cb2a5af9..ac081516 100644 --- a/src/containers/paint-editor.jsx +++ b/src/containers/paint-editor.jsx @@ -5,44 +5,42 @@ import {changeMode} from '../reducers/modes'; import Modes from '../modes/modes'; import {connect} from 'react-redux'; import bindAll from 'lodash.bindall'; +import paper from 'paper'; class PaintEditor extends React.Component { constructor (props) { super(props); bindAll(this, [ - 'updateSvg' + 'handleUpdateSvg' ]); } componentDidMount () { document.addEventListener('keydown', this.props.onKeyPress); } - shouldComponentUpdate (newProps) { - return newProps.assetId !== this.props.assetId; - } componentWillUnmount () { document.removeEventListener('keydown', this.props.onKeyPress); } - updateSvg (svg) { - if (!this.props.onUpdate) { + handleUpdateSvg () { + if (!this.props.onUpdateSvg) { return; } - this.props.onUpdate( - this.props.assetIndex, - svg + this.props.onUpdateSvg( + paper.project.exportSVG({asString: true}) // TODO can this be made independent of paper ); } render () { return ( - + ); } } PaintEditor.propTypes = { - assetId: PropTypes.string, - assetIndex: PropTypes.number, onKeyPress: PropTypes.func.isRequired, - onUpdate: PropTypes.func, + onUpdateSvg: PropTypes.func.isRequired, svg: PropTypes.string }; diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx index a3f2a15f..39cdc45c 100644 --- a/src/playground/playground.jsx +++ b/src/playground/playground.jsx @@ -20,10 +20,16 @@ const svgString = '' + '' + ''; +const onUpdateSvg = function () { + return; +}; ReactDOM.render(( - + ), appTarget);