Pipe through updateSvg and call it whenever a tool finishes an action

This commit is contained in:
DD 2017-08-30 18:43:34 -04:00
parent 162bf7e335
commit b0d29a946b
7 changed files with 48 additions and 23 deletions

View file

@ -26,9 +26,18 @@ class PaintEditorComponent extends React.Component {
canvasRef={this.setCanvas}
svg={this.props.svg}
/>
<BrushMode canvas={this.state.canvas} />
<EraserMode canvas={this.state.canvas} />
<LineMode canvas={this.state.canvas} />
<BrushMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
<EraserMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
<LineMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
</div>
);
}
@ -41,6 +50,7 @@ class PaintEditorComponent extends React.Component {
}
PaintEditorComponent.propTypes = {
onUpdateSvg: PropTypes.func.isRequired,
svg: PropTypes.string
};

View file

@ -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;

View file

@ -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 => ({

View file

@ -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 => ({

View file

@ -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 => ({

View file

@ -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 (
<PaintEditorComponent svg={this.props.svg} />
<PaintEditorComponent
svg={this.props.svg}
onUpdateSvg={this.handleUpdateSvg}
/>
);
}
}
PaintEditor.propTypes = {
assetId: PropTypes.string,
assetIndex: PropTypes.number,
onKeyPress: PropTypes.func.isRequired,
onUpdate: PropTypes.func,
onUpdateSvg: PropTypes.func.isRequired,
svg: PropTypes.string
};

View file

@ -20,10 +20,16 @@ const svgString =
'<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />' +
'<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />' +
'</svg>';
const onUpdateSvg = function () {
return;
};
ReactDOM.render((
<Provider store={store}>
<IntlProvider>
<PaintEditor svg={svgString} />
<PaintEditor
svg={svgString}
onUpdateSvg={onUpdateSvg}
/>
</IntlProvider>
</Provider>
), appTarget);