Basic rectangle tool

src/components/paint-editor/paint-editor.jsx

@@ -11,7 +11,6 @@ import SelectMode from '../../containers/select-mode.jsx';
 import LineMode from '../../containers/line-mode.jsx';
 import PenMode from '../../containers/pen-mode.jsx';
 import RectMode from '../../containers/rect-mode.jsx';
-import RoundedRectMode from '../../containers/rounded-rect-mode.jsx';
 import OvalMode from '../../containers/oval-mode.jsx';
 
 import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
@@ -159,9 +158,6 @@ class PaintEditorComponent extends React.Component {
                             <RectMode
                                 onUpdateSvg={this.props.onUpdateSvg}
                             />
-                            <RoundedRectMode
-                                onUpdateSvg={this.props.onUpdateSvg}
-                            />
                         </div>
                     ) : null}
 

src/containers/rect-mode.jsx

@@ -25,6 +25,10 @@ class RectMode extends React.Component {
         }
     }
     componentWillReceiveProps (nextProps) {
+        if (this.tool && nextProps.colorState !== this.props.colorState) {
+            this.tool.setColorState(nextProps.colorState);
+        }
+
         if (nextProps.isRectModeActive && !this.props.isRectModeActive) {
             this.activateTool();
         } else if (!nextProps.isRectModeActive && this.props.isRectModeActive) {
@@ -35,11 +39,13 @@ class RectMode extends React.Component {
         return nextProps.isRectModeActive !== this.props.isRectModeActive;
     }
     activateTool () {
+        this.props.clearSelectedItems();
         this.tool = new RectTool(
             this.props.setSelectedItems,
             this.props.clearSelectedItems,
             this.props.onUpdateSvg
         );
+        this.tool.setColorState(this.props.colorState);
         this.tool.activate();
     }
     deactivateTool () {
@@ -59,6 +65,11 @@ class RectMode extends React.Component {
 
 RectMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
+    colorState: PropTypes.shape({
+        fillColor: PropTypes.string,
+        strokeColor: PropTypes.string,
+        strokeWidth: PropTypes.number
+    }).isRequired,
     handleMouseDown: PropTypes.func.isRequired,
     isRectModeActive: PropTypes.bool.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
@@ -66,6 +77,7 @@ RectMode.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    colorState: state.scratchPaint.color,
     isRectModeActive: state.scratchPaint.mode === Modes.RECT
 });
 const mapDispatchToProps = dispatch => ({

src/helper/style-path.js

@@ -230,6 +230,12 @@ const styleCursorPreview = function (path, options) {
     }
 };
 
+const styleShape = function (path, options) {
+    path.fillColor = options.fillColor;
+    path.strokeColor = options.strokeColor;
+    path.strokeWidth = options.strokeWidth;
+};
+
 export {
     applyFillColorToSelection,
     applyStrokeColorToSelection,
@@ -237,6 +243,7 @@ export {
     getColorsFromSelection,
     MIXED,
     styleBlob,
+    styleShape,
     stylePath,
     styleCursorPreview
 };

src/helper/tools/rect-tool.js

@@ -1,5 +1,7 @@
 import paper from '@scratch/paper';
-import log from '../../log/log';
+import Modes from '../../modes/modes';
+import {styleShape} from '../style-path';
+import BoundingBoxTool from '../selection-tools/bounding-box-tool';
 
 /**
  * Tool for drawing rectangles.
@@ -12,28 +14,52 @@ class RectTool extends paper.Tool {
      */
     constructor (setSelectedItems, clearSelectedItems, onUpdateSvg) {
         super();
-        this.setSelectedItems = setSelectedItems;
-        this.clearSelectedItems = clearSelectedItems;
         this.onUpdateSvg = onUpdateSvg;
         this.prevHoveredItemId = null;
+        this.boundingBoxTool = new BoundingBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems, onUpdateSvg);
         
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
-        this.onMouseDown = this.handleMouseDown;
-        this.onMouseMove = this.handleMouseMove;
         this.onMouseDrag = this.handleMouseDrag;
         this.onMouseUp = this.handleMouseUp;
+
+        this.downPoint = null;
+        this.rect = null;
+        this.colorState = null;
     }
-    handleMouseDown () {
-        log.warn('Rectangle tool not yet implemented');
+    setColorState (colorState) {
+        this.colorState = colorState;
     }
-    handleMouseMove () {
+    handleMouseDrag (event) {
+        if (event.event.button > 0) return;  // only first mouse button
+
+        if (this.rect) {
+            this.rect.remove();
+        }
+        this.rect = new paper.Path.Rectangle(event.downPoint, event.point);
+        
+        if (event.modifiers.shift) {
+            this.rect.height = this.rect.width;
+        }
+        
+        if (event.modifiers.alt) {
+            this.rect.position = event.downPoint;
+        }
+        
+        styleShape(this.rect, this.colorState);
     }
-    handleMouseDrag () {
-    }
-    handleMouseUp () {
+    handleMouseUp (event) {
+        if (event.event.button > 0) return;  // only first mouse button
+        
+        if (this.rect) {
+            this.onUpdateSvg();
+            this.rect = null;
+        }
     }
     deactivateTool () {
+        this.downPoint = null;
+        this.rect = null;
+        this.colorState = null;
     }
 }