diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 651253d0..43a4b7bc 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/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 {
-
) : null}
diff --git a/src/containers/rect-mode.jsx b/src/containers/rect-mode.jsx
index daed7954..5c1fe557 100644
--- a/src/containers/rect-mode.jsx
+++ b/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 => ({
diff --git a/src/helper/style-path.js b/src/helper/style-path.js
index 7fea6770..48111b68 100644
--- a/src/helper/style-path.js
+++ b/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
};
diff --git a/src/helper/tools/rect-tool.js b/src/helper/tools/rect-tool.js
index feb662b8..c6a451d4 100644
--- a/src/helper/tools/rect-tool.js
+++ b/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;
}
}