mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 13:32:28 -05:00
Handle removing the viewbox and centering
This commit is contained in:
parent
b0d29a946b
commit
36016bbd11
4 changed files with 49 additions and 16 deletions
|
@ -24,6 +24,8 @@ class PaintEditorComponent extends React.Component {
|
|||
<div>
|
||||
<PaperCanvas
|
||||
canvasRef={this.setCanvas}
|
||||
rotationCenterX={this.props.rotationCenterX}
|
||||
rotationCenterY={this.props.rotationCenterY}
|
||||
svg={this.props.svg}
|
||||
/>
|
||||
<BrushMode
|
||||
|
@ -51,6 +53,8 @@ class PaintEditorComponent extends React.Component {
|
|||
|
||||
PaintEditorComponent.propTypes = {
|
||||
onUpdateSvg: PropTypes.func.isRequired,
|
||||
rotationCenterX: PropTypes.number,
|
||||
rotationCenterY: PropTypes.number,
|
||||
svg: PropTypes.string
|
||||
};
|
||||
|
||||
|
|
|
@ -24,13 +24,20 @@ class PaintEditor extends React.Component {
|
|||
if (!this.props.onUpdateSvg) {
|
||||
return;
|
||||
}
|
||||
const bounds = paper.project.activeLayer.bounds;
|
||||
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 () {
|
||||
return (
|
||||
<PaintEditorComponent
|
||||
rotationCenterX={this.props.rotationCenterX}
|
||||
rotationCenterY={this.props.rotationCenterY}
|
||||
svg={this.props.svg}
|
||||
onUpdateSvg={this.handleUpdateSvg}
|
||||
/>
|
||||
|
@ -41,6 +48,8 @@ class PaintEditor extends React.Component {
|
|||
PaintEditor.propTypes = {
|
||||
onKeyPress: PropTypes.func.isRequired,
|
||||
onUpdateSvg: PropTypes.func.isRequired,
|
||||
rotationCenterX: PropTypes.number,
|
||||
rotationCenterY: PropTypes.number,
|
||||
svg: PropTypes.string
|
||||
};
|
||||
|
||||
|
|
|
@ -14,28 +14,41 @@ class PaperCanvas extends React.Component {
|
|||
componentDidMount () {
|
||||
paper.setup(this.canvas);
|
||||
if (this.props.svg) {
|
||||
this.importSvg(this.props.svg);
|
||||
this.importSvg(this.props.svg, this.props.rotationCenterX, this.props.rotationCenterY);
|
||||
}
|
||||
}
|
||||
componentWillReceiveProps (newProps) {
|
||||
if (newProps.svg !== this.props.svg) {
|
||||
paper.project.activeLayer.removeChildren();
|
||||
this.importSvg(newProps.svg);
|
||||
}
|
||||
paper.project.activeLayer.removeChildren();
|
||||
this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY);
|
||||
}
|
||||
componentWillUnmount () {
|
||||
paper.remove();
|
||||
}
|
||||
importSvg (svg) {
|
||||
paper.project.importSVG(svg,
|
||||
importSvg (svg, rotationCenterX, rotationCenterY) {
|
||||
const imported = paper.project.importSVG(svg,
|
||||
{
|
||||
expandShapes: true,
|
||||
onLoad: function (item) {
|
||||
// Remove viewbox
|
||||
if (item.clipped) {
|
||||
item.clipped = false;
|
||||
// Consider removing clip mask here?
|
||||
}
|
||||
while (item.reduce() !== item) {
|
||||
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();
|
||||
}
|
||||
setCanvas (canvas) {
|
||||
|
@ -55,6 +68,8 @@ class PaperCanvas extends React.Component {
|
|||
|
||||
PaperCanvas.propTypes = {
|
||||
canvasRef: PropTypes.func,
|
||||
rotationCenterX: PropTypes.number,
|
||||
rotationCenterY: PropTypes.number,
|
||||
svg: PropTypes.string
|
||||
};
|
||||
|
||||
|
|
|
@ -14,19 +14,24 @@ const store = createStore(
|
|||
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
|
||||
);
|
||||
const svgString =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' +
|
||||
'<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />' +
|
||||
'<circle cx="125" cy="125" r="75" fill="orange" />' +
|
||||
'<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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
|
||||
' x="0px" y="0px" width="32px" height="32px" viewBox="0.5 384.5 32 32"' +
|
||||
' enable-background="new 0.5 384.5 32 32" xml:space="preserve">' +
|
||||
'<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M7.5,392.241h7.269' +
|
||||
'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>';
|
||||
const onUpdateSvg = function () {
|
||||
return;
|
||||
const onUpdateSvg = function (newSvgString, rotationCenterX, rotationCenterY) {
|
||||
console.log(newSvgString);
|
||||
console.log(`rotationCenterX: ${rotationCenterX} rotationCenterY: ${rotationCenterY}`);
|
||||
};
|
||||
ReactDOM.render((
|
||||
<Provider store={store}>
|
||||
<IntlProvider>
|
||||
<PaintEditor
|
||||
rotationCenterX={0}
|
||||
rotationCenterY={0}
|
||||
svg={svgString}
|
||||
onUpdateSvg={onUpdateSvg}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue