Add oval, rect, rounded rect buttons that do nothing

src/components/oval-mode.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+const OvalModeComponent = props => (
+    <button onClick={props.onMouseDown}>
+        <FormattedMessage
+            defaultMessage="Circle"
+            description="Label for the oval-drawing tool"
+            id="paint.ovalMode.oval"
+        />
+    </button>
+);
+
+OvalModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default OvalModeComponent;

src/components/paint-editor.jsx

@@ -10,6 +10,9 @@ import ReshapeMode from '../containers/reshape-mode.jsx';
 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';
 import StrokeColorIndicatorComponent from '../containers/stroke-color-indicator.jsx';
@@ -150,6 +153,15 @@ class PaintEditorComponent extends React.Component {
                             <ReshapeMode
                                 onUpdateSvg={this.props.onUpdateSvg}
                             />
+                            <OvalMode
+                                onUpdateSvg={this.props.onUpdateSvg}
+                            />
+                            <RectMode
+                                onUpdateSvg={this.props.onUpdateSvg}
+                            />
+                            <RoundedRectMode
+                                onUpdateSvg={this.props.onUpdateSvg}
+                            />
                         </div>
                     ) : null}
 

src/components/rect-mode.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+const RectModeComponent = props => (
+    <button onClick={props.onMouseDown}>
+        <FormattedMessage
+            defaultMessage="Rectangle"
+            description="Label for the rectangle tool"
+            id="paint.rectMode.rect"
+        />
+    </button>
+);
+
+RectModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default RectModeComponent;

src/components/rounded-rect-mode.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+const RoundedRectModeComponent = props => (
+    <button onClick={props.onMouseDown}>
+        <FormattedMessage
+            defaultMessage="Rounded Rectangle"
+            description="Label for the rounded rectangle tool"
+            id="paint.roundedRectMode.roundedRect"
+        />
+    </button>
+);
+
+RoundedRectModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default RoundedRectModeComponent;

src/containers/oval-mode.jsx

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
+import Modes from '../modes/modes';
+
+import {changeMode} from '../reducers/modes';
+import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
+import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
+
+import {getSelectedLeafItems} from '../helper/selection';
+import OvalTool from '../helper/tools/oval-tool';
+import OvalModeComponent from '../components/oval-mode.jsx';
+
+class OvalMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'activateTool',
+            'deactivateTool'
+        ]);
+    }
+    componentDidMount () {
+        if (this.props.isOvalModeActive) {
+            this.activateTool(this.props);
+        }
+    }
+    componentWillReceiveProps (nextProps) {
+        if (this.tool && nextProps.hoveredItemId !== this.props.hoveredItemId) {
+            this.tool.setPrevHoveredItemId(nextProps.hoveredItemId);
+        }
+
+        if (nextProps.isOvalModeActive && !this.props.isOvalModeActive) {
+            this.activateTool();
+        } else if (!nextProps.isOvalModeActive && this.props.isOvalModeActive) {
+            this.deactivateTool();
+        }
+    }
+    shouldComponentUpdate () {
+        return false; // Static component, for now
+    }
+    activateTool () {
+        this.tool = new OvalTool(
+            this.props.setHoveredItem,
+            this.props.clearHoveredItem,
+            this.props.setSelectedItems,
+            this.props.clearSelectedItems,
+            this.props.onUpdateSvg
+        );
+        this.tool.activate();
+    }
+    deactivateTool () {
+        this.tool.deactivateTool();
+        this.tool.remove();
+        this.tool = null;
+    }
+    render () {
+        return (
+            <OvalModeComponent onMouseDown={this.props.handleMouseDown} />
+        );
+    }
+}
+
+OvalMode.propTypes = {
+    clearHoveredItem: PropTypes.func.isRequired,
+    clearSelectedItems: PropTypes.func.isRequired,
+    handleMouseDown: PropTypes.func.isRequired,
+    hoveredItemId: PropTypes.number,
+    isOvalModeActive: PropTypes.bool.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired,
+    setHoveredItem: PropTypes.func.isRequired,
+    setSelectedItems: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    isOvalModeActive: state.scratchPaint.mode === Modes.OVAL,
+    hoveredItemId: state.scratchPaint.hoveredItemId
+});
+const mapDispatchToProps = dispatch => ({
+    setHoveredItem: hoveredItemId => {
+        dispatch(setHoveredItem(hoveredItemId));
+    },
+    clearHoveredItem: () => {
+        dispatch(clearHoveredItem());
+    },
+    clearSelectedItems: () => {
+        dispatch(clearSelectedItems());
+    },
+    setSelectedItems: () => {
+        dispatch(setSelectedItems(getSelectedLeafItems()));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.OVAL));
+    },
+    deactivateTool () {
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(OvalMode);

src/containers/rect-mode.jsx

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
+import Modes from '../modes/modes';
+
+import {changeMode} from '../reducers/modes';
+import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
+import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
+
+import {getSelectedLeafItems} from '../helper/selection';
+import RectTool from '../helper/tools/rect-tool';
+import RectModeComponent from '../components/rect-mode.jsx';
+
+class RectMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'activateTool',
+            'deactivateTool'
+        ]);
+    }
+    componentDidMount () {
+        if (this.props.isRectModeActive) {
+            this.activateTool(this.props);
+        }
+    }
+    componentWillReceiveProps (nextProps) {
+        if (this.tool && nextProps.hoveredItemId !== this.props.hoveredItemId) {
+            this.tool.setPrevHoveredItemId(nextProps.hoveredItemId);
+        }
+
+        if (nextProps.isRectModeActive && !this.props.isRectModeActive) {
+            this.activateTool();
+        } else if (!nextProps.isRectModeActive && this.props.isRectModeActive) {
+            this.deactivateTool();
+        }
+    }
+    shouldComponentUpdate () {
+        return false; // Static component, for now
+    }
+    activateTool () {
+        this.tool = new RectTool(
+            this.props.setHoveredItem,
+            this.props.clearHoveredItem,
+            this.props.setSelectedItems,
+            this.props.clearSelectedItems,
+            this.props.onUpdateSvg
+        );
+        this.tool.activate();
+    }
+    deactivateTool () {
+        this.tool.deactivateTool();
+        this.tool.remove();
+        this.tool = null;
+    }
+    render () {
+        return (
+            <RectModeComponent onMouseDown={this.props.handleMouseDown} />
+        );
+    }
+}
+
+RectMode.propTypes = {
+    clearHoveredItem: PropTypes.func.isRequired,
+    clearSelectedItems: PropTypes.func.isRequired,
+    handleMouseDown: PropTypes.func.isRequired,
+    hoveredItemId: PropTypes.number,
+    isRectModeActive: PropTypes.bool.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired,
+    setHoveredItem: PropTypes.func.isRequired,
+    setSelectedItems: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    isRectModeActive: state.scratchPaint.mode === Modes.RECT,
+    hoveredItemId: state.scratchPaint.hoveredItemId
+});
+const mapDispatchToProps = dispatch => ({
+    setHoveredItem: hoveredItemId => {
+        dispatch(setHoveredItem(hoveredItemId));
+    },
+    clearHoveredItem: () => {
+        dispatch(clearHoveredItem());
+    },
+    clearSelectedItems: () => {
+        dispatch(clearSelectedItems());
+    },
+    setSelectedItems: () => {
+        dispatch(setSelectedItems(getSelectedLeafItems()));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.RECT));
+    },
+    deactivateTool () {
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RectMode);

src/containers/rounded-rect-mode.jsx

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
+import Modes from '../modes/modes';
+
+import {changeMode} from '../reducers/modes';
+import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
+import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
+
+import {getSelectedLeafItems} from '../helper/selection';
+import RoundedRectTool from '../helper/tools/rounded-rect-tool';
+import RoundedRectModeComponent from '../components/rounded-rect-mode.jsx';
+
+class RoundedRectMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'activateTool',
+            'deactivateTool'
+        ]);
+    }
+    componentDidMount () {
+        if (this.props.isRoundedRectModeActive) {
+            this.activateTool(this.props);
+        }
+    }
+    componentWillReceiveProps (nextProps) {
+        if (this.tool && nextProps.hoveredItemId !== this.props.hoveredItemId) {
+            this.tool.setPrevHoveredItemId(nextProps.hoveredItemId);
+        }
+
+        if (nextProps.isRoundedRectModeActive && !this.props.isRoundedRectModeActive) {
+            this.activateTool();
+        } else if (!nextProps.isRoundedRectModeActive && this.props.isRoundedRectModeActive) {
+            this.deactivateTool();
+        }
+    }
+    shouldComponentUpdate () {
+        return false; // Static component, for now
+    }
+    activateTool () {
+        this.tool = new RoundedRectTool(
+            this.props.setHoveredItem,
+            this.props.clearHoveredItem,
+            this.props.setSelectedItems,
+            this.props.clearSelectedItems,
+            this.props.onUpdateSvg
+        );
+        this.tool.activate();
+    }
+    deactivateTool () {
+        this.tool.deactivateTool();
+        this.tool.remove();
+        this.tool = null;
+    }
+    render () {
+        return (
+            <RoundedRectModeComponent onMouseDown={this.props.handleMouseDown} />
+        );
+    }
+}
+
+RoundedRectMode.propTypes = {
+    clearHoveredItem: PropTypes.func.isRequired,
+    clearSelectedItems: PropTypes.func.isRequired,
+    handleMouseDown: PropTypes.func.isRequired,
+    hoveredItemId: PropTypes.number,
+    isRoundedRectModeActive: PropTypes.bool.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired,
+    setHoveredItem: PropTypes.func.isRequired,
+    setSelectedItems: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    isRoundedRectModeActive: state.scratchPaint.mode === Modes.ROUNDED_RECT,
+    hoveredItemId: state.scratchPaint.hoveredItemId
+});
+const mapDispatchToProps = dispatch => ({
+    setHoveredItem: hoveredItemId => {
+        dispatch(setHoveredItem(hoveredItemId));
+    },
+    clearHoveredItem: () => {
+        dispatch(clearHoveredItem());
+    },
+    clearSelectedItems: () => {
+        dispatch(clearSelectedItems());
+    },
+    setSelectedItems: () => {
+        dispatch(setSelectedItems(getSelectedLeafItems()));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.ROUNDED_RECT));
+    },
+    deactivateTool () {
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RoundedRectMode);

src/helper/tools/oval-tool.js

@@ -0,0 +1,54 @@
+import paper from '@scratch/paper';
+import log from '../../log/log';
+
+/**
+ * Tool for drawing ovals.
+ */
+class OvalTool extends paper.Tool {
+    /**
+     * @param {function} setHoveredItem Callback to set the hovered item
+     * @param {function} clearHoveredItem Callback to clear the hovered item
+     * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
+     * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
+     * @param {!function} onUpdateSvg A callback to call when the image visibly changes
+     */
+    constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateSvg) {
+        super();
+        this.setHoveredItem = setHoveredItem;
+        this.clearHoveredItem = clearHoveredItem;
+        this.setSelectedItems = setSelectedItems;
+        this.clearSelectedItems = clearSelectedItems;
+        this.onUpdateSvg = onUpdateSvg;
+        this.prevHoveredItemId = null;
+        
+        // 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;
+    }
+    /**
+     * To be called when the hovered item changes. When the select tool hovers over a
+     * new item, it compares against this to see if a hover item change event needs to
+     * be fired.
+     * @param {paper.Item} prevHoveredItemId ID of the highlight item that indicates the mouse is
+     *     over a given item currently
+     */
+    setPrevHoveredItemId (prevHoveredItemId) {
+        this.prevHoveredItemId = prevHoveredItemId;
+    }
+    handleMouseDown () {
+        log.warn('Circle tool not yet implemented');
+    }
+    handleMouseMove () {
+    }
+    handleMouseDrag () {
+    }
+    handleMouseUp () {
+    }
+    deactivateTool () {
+    }
+}
+
+export default OvalTool;

src/helper/tools/pen-tool.js

@@ -47,6 +47,8 @@ class PenTool extends paper.Tool {
     }
     handleMouseUp () {
     }
+    deactivateTool () {
+    }
 }
 
 export default PenTool;

src/helper/tools/rect-tool.js

@@ -0,0 +1,54 @@
+import paper from '@scratch/paper';
+import log from '../../log/log';
+
+/**
+ * Tool for drawing rectangles.
+ */
+class RectTool extends paper.Tool {
+    /**
+     * @param {function} setHoveredItem Callback to set the hovered item
+     * @param {function} clearHoveredItem Callback to clear the hovered item
+     * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
+     * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
+     * @param {!function} onUpdateSvg A callback to call when the image visibly changes
+     */
+    constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateSvg) {
+        super();
+        this.setHoveredItem = setHoveredItem;
+        this.clearHoveredItem = clearHoveredItem;
+        this.setSelectedItems = setSelectedItems;
+        this.clearSelectedItems = clearSelectedItems;
+        this.onUpdateSvg = onUpdateSvg;
+        this.prevHoveredItemId = null;
+        
+        // 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;
+    }
+    /**
+     * To be called when the hovered item changes. When the select tool hovers over a
+     * new item, it compares against this to see if a hover item change event needs to
+     * be fired.
+     * @param {paper.Item} prevHoveredItemId ID of the highlight item that indicates the mouse is
+     *     over a given item currently
+     */
+    setPrevHoveredItemId (prevHoveredItemId) {
+        this.prevHoveredItemId = prevHoveredItemId;
+    }
+    handleMouseDown () {
+        log.warn('Rectangle tool not yet implemented');
+    }
+    handleMouseMove () {
+    }
+    handleMouseDrag () {
+    }
+    handleMouseUp () {
+    }
+    deactivateTool () {
+    }
+}
+
+export default RectTool;

src/helper/tools/rounded-rect-tool.js

@@ -0,0 +1,54 @@
+import paper from '@scratch/paper';
+import log from '../../log/log';
+
+/**
+ * Tool for drawing rounded rectangles
+ */
+class RoundedRectTool extends paper.Tool {
+    /**
+     * @param {function} setHoveredItem Callback to set the hovered item
+     * @param {function} clearHoveredItem Callback to clear the hovered item
+     * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
+     * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
+     * @param {!function} onUpdateSvg A callback to call when the image visibly changes
+     */
+    constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateSvg) {
+        super();
+        this.setHoveredItem = setHoveredItem;
+        this.clearHoveredItem = clearHoveredItem;
+        this.setSelectedItems = setSelectedItems;
+        this.clearSelectedItems = clearSelectedItems;
+        this.onUpdateSvg = onUpdateSvg;
+        this.prevHoveredItemId = null;
+        
+        // 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;
+    }
+    /**
+     * To be called when the hovered item changes. When the select tool hovers over a
+     * new item, it compares against this to see if a hover item change event needs to
+     * be fired.
+     * @param {paper.Item} prevHoveredItemId ID of the highlight item that indicates the mouse is
+     *     over a given item currently
+     */
+    setPrevHoveredItemId (prevHoveredItemId) {
+        this.prevHoveredItemId = prevHoveredItemId;
+    }
+    handleMouseDown () {
+        log.warn('Rounded Rectangle tool not yet implemented');
+    }
+    handleMouseMove () {
+    }
+    handleMouseDrag () {
+    }
+    handleMouseUp () {
+    }
+    deactivateTool () {
+    }
+}
+
+export default RoundedRectTool;

src/modes/modes.js

@@ -6,7 +6,10 @@ const Modes = keyMirror({
     LINE: null,
     SELECT: null,
     RESHAPE: null,
-    PEN: null
+    PEN: null,
+    OVAL: null,
+    RECT: null,
+    ROUNDED_RECT: null
 });
 
 export default Modes;