Handle removing the viewbox and centering

This commit is contained in:
DD 2017-09-05 15:45:56 -04:00
parent b0d29a946b
commit 36016bbd11
4 changed files with 49 additions and 16 deletions

View file

@ -24,6 +24,8 @@ class PaintEditorComponent extends React.Component {
<div> <div>
<PaperCanvas <PaperCanvas
canvasRef={this.setCanvas} canvasRef={this.setCanvas}
rotationCenterX={this.props.rotationCenterX}
rotationCenterY={this.props.rotationCenterY}
svg={this.props.svg} svg={this.props.svg}
/> />
<BrushMode <BrushMode
@ -51,6 +53,8 @@ class PaintEditorComponent extends React.Component {
PaintEditorComponent.propTypes = { PaintEditorComponent.propTypes = {
onUpdateSvg: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number,
svg: PropTypes.string svg: PropTypes.string
}; };

View file

@ -24,13 +24,20 @@ class PaintEditor extends React.Component {
if (!this.props.onUpdateSvg) { if (!this.props.onUpdateSvg) {
return; return;
} }
const bounds = paper.project.activeLayer.bounds;
this.props.onUpdateSvg( this.props.onUpdateSvg(
paper.project.exportSVG({asString: true}) // TODO can this be made independent of paper paper.project.exportSVG({
); asString: true,
matrix: new paper.Matrix().translate(-bounds.x, -bounds.y)
}),
paper.project.view.center.x - bounds.x,
paper.project.view.center.y - bounds.y);
} }
render () { render () {
return ( return (
<PaintEditorComponent <PaintEditorComponent
rotationCenterX={this.props.rotationCenterX}
rotationCenterY={this.props.rotationCenterY}
svg={this.props.svg} svg={this.props.svg}
onUpdateSvg={this.handleUpdateSvg} onUpdateSvg={this.handleUpdateSvg}
/> />
@ -41,6 +48,8 @@ class PaintEditor extends React.Component {
PaintEditor.propTypes = { PaintEditor.propTypes = {
onKeyPress: PropTypes.func.isRequired, onKeyPress: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number,
svg: PropTypes.string svg: PropTypes.string
}; };

View file

@ -14,28 +14,41 @@ class PaperCanvas extends React.Component {
componentDidMount () { componentDidMount () {
paper.setup(this.canvas); paper.setup(this.canvas);
if (this.props.svg) { if (this.props.svg) {
this.importSvg(this.props.svg); this.importSvg(this.props.svg, this.props.rotationCenterX, this.props.rotationCenterY);
} }
} }
componentWillReceiveProps (newProps) { componentWillReceiveProps (newProps) {
if (newProps.svg !== this.props.svg) { paper.project.activeLayer.removeChildren();
paper.project.activeLayer.removeChildren(); this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY);
this.importSvg(newProps.svg);
}
} }
componentWillUnmount () { componentWillUnmount () {
paper.remove(); paper.remove();
} }
importSvg (svg) { importSvg (svg, rotationCenterX, rotationCenterY) {
paper.project.importSVG(svg, const imported = paper.project.importSVG(svg,
{ {
expandShapes: true, expandShapes: true,
onLoad: function (item) { onLoad: function (item) {
// Remove viewbox
if (item.clipped) {
item.clipped = false;
// Consider removing clip mask here?
}
while (item.reduce() !== item) { while (item.reduce() !== item) {
item = item.reduce(); item = item.reduce();
} }
} }
}); });
if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
imported.position =
paper.project.view.center
.add(imported.bounds.width / 2, imported.bounds.height / 2)
.subtract(rotationCenterX, rotationCenterY);
} else {
// Center
imported.position = paper.project.view.center;
}
paper.project.view.update(); paper.project.view.update();
} }
setCanvas (canvas) { setCanvas (canvas) {
@ -55,6 +68,8 @@ class PaperCanvas extends React.Component {
PaperCanvas.propTypes = { PaperCanvas.propTypes = {
canvasRef: PropTypes.func, canvasRef: PropTypes.func,
rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number,
svg: PropTypes.string svg: PropTypes.string
}; };

View file

@ -14,19 +14,24 @@ const store = createStore(
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); );
const svgString = const svgString =
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' + '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
'<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />' + ' x="0px" y="0px" width="32px" height="32px" viewBox="0.5 384.5 32 32"' +
'<circle cx="125" cy="125" r="75" fill="orange" />' + ' enable-background="new 0.5 384.5 32 32" xml:space="preserve">' +
'<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />' + '<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M7.5,392.241h7.269' +
'<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />' + 'c4.571,0,8.231,5.555,8.231,10.123v7.377"/>' +
'<polyline points="10.689,399.492 3.193,391.997 10.689,384.5 "/>' +
'<polyline points="30.185,405.995 22.689,413.491 15.192,405.995 "/>' +
'</svg>'; '</svg>';
const onUpdateSvg = function () { const onUpdateSvg = function (newSvgString, rotationCenterX, rotationCenterY) {
return; console.log(newSvgString);
console.log(`rotationCenterX: ${rotationCenterX} rotationCenterY: ${rotationCenterY}`);
}; };
ReactDOM.render(( ReactDOM.render((
<Provider store={store}> <Provider store={store}>
<IntlProvider> <IntlProvider>
<PaintEditor <PaintEditor
rotationCenterX={0}
rotationCenterY={0}
svg={svgString} svg={svgString}
onUpdateSvg={onUpdateSvg} onUpdateSvg={onUpdateSvg}
/> />