get rotate working

src/containers/paint-editor.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import PaintEditorComponent from '../components/paint-editor.jsx';
 import {changeMode} from '../reducers/modes';
+import {getGuideLayer} from '../helper/layer';
 import Modes from '../modes/modes';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
@@ -21,6 +22,8 @@ class PaintEditor extends React.Component {
         document.removeEventListener('keydown', this.props.onKeyPress);
     }
     handleUpdateSvg () {
+        // Hide bounding box
+        getGuideLayer().visible = false;
         const bounds = paper.project.activeLayer.bounds;
         this.props.onUpdateSvg(
             paper.project.exportSVG({
@@ -29,6 +32,7 @@ class PaintEditor extends React.Component {
             }),
             paper.project.view.center.x - bounds.x,
             paper.project.view.center.y - bounds.y);
+        getGuideLayer().visible = true;
     }
     render () {
         return (

src/helper/bounding-box/bounding-box-tool.js

@@ -119,7 +119,7 @@ class BoundingBoxTool {
         this.boundsPath.fullySelected = true;
         this.boundsPath.parent = getGuideLayer();
         
-        for (let index = 0; index < this.boundsPath.segments; index++) {
+        for (let index = 0; index < this.boundsPath.segments.length; index++) {
             const segment = this.boundsPath.segments[index];
             let size = 4;
             
@@ -131,11 +131,11 @@ class BoundingBoxTool {
                 const offset = new paper.Point(0, 20);
                 
                 const arrows = new paper.Path(ARROW_PATH);
-                arrows.translate(segment.point + offset + [-10.5, -5]);
+                arrows.translate(segment.point.add(offset).add(-10.5, -5));
                 
                 const line = new paper.Path.Rectangle(
-                    segment.point + offset - [1, 0],
+                    segment.point.add(offset).subtract(1, 0),
-                    segment.point + [1, 0]);
+                    segment.point);
 
                 const rotHandle = arrows.unite(line);
                 line.remove();

src/helper/bounding-box/rotate-tool.js

@@ -1,3 +1,5 @@
+import paper from 'paper';
+
 class RotateTool {
     constructor () {
         this.rotItems = [];
@@ -10,16 +12,21 @@ class RotateTool {
      * @param {!object} boundsPath Where the boundaries of the hit item are
      * @param {!Array.<paper.Item>} selectedItems Set of selected paper.Items
      */
-    onMouseDown (boundsPath, selectedItems) {
+    onMouseDown (hitResult, boundsPath, selectedItems) {
         this.rotGroupPivot = boundsPath.bounds.center;
-        this.rotItems = selectedItems;
+        for (const item of selectedItems) {
+            // Rotate only root items; all nested items shouldn't get rotated again.
+            if (item.parent instanceof paper.Layer) {
+                this.rotItems.push(item);
+            }
+        }
         
         for (let i = 0; i < this.rotItems.length; i++) {
-            this.prevRot[i] = (event.point - this.rotGroupPivot).angle;
+            this.prevRot[i] = 90;
         }
     }
     onMouseDrag (event) {
-        let rotAngle = (event.point - this.rotGroupPivot).angle;
+        let rotAngle = (event.point.subtract(this.rotGroupPivot)).angle;
         
         for (let i = 0; i < this.rotItems.length; i++) {
             const item = this.rotItems[i];
@@ -44,6 +51,11 @@ class RotateTool {
         for (const item of this.rotItems) {
             item.applyMatrix = true;
         }
+        
+        this.rotItems.length = 0;
+        this.rotGroupPivot = null;
+        this.prevRot = [];
+
         // @todo add back undo
         // pg.undo.snapshot('rotateSelection');
     }