mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -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>
|
<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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue