Handle removing the viewbox and centering

src/components/paint-editor.jsx

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

src/containers/paint-editor.jsx

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

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);
-        }
+        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
 };
 

src/playground/playground.jsx

@@ -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}
             />