diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx
index 8cdaaf69..306bde8f 100644
--- a/src/components/paint-editor.jsx
+++ b/src/components/paint-editor.jsx
@@ -24,6 +24,8 @@ class PaintEditorComponent extends React.Component {
@@ -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
};
diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index f44bc10d..fdd6e44d 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -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
};
diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx
index 39cdc45c..f59ef2b0 100644
--- a/src/playground/playground.jsx
+++ b/src/playground/playground.jsx
@@ -14,19 +14,24 @@ const store = createStore(
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
const svgString =
- '