From f95bbe2ca5f98d845182f60c1c34a83abc4ffa8a Mon Sep 17 00:00:00 2001 From: DD Date: Thu, 19 Oct 2017 16:52:24 -0400 Subject: [PATCH] Basic rectangle tool --- src/components/paint-editor/paint-editor.jsx | 4 -- src/containers/rect-mode.jsx | 12 +++++ src/helper/style-path.js | 7 +++ src/helper/tools/rect-tool.js | 48 +++++++++++++++----- 4 files changed, 56 insertions(+), 15 deletions(-) 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; } }