scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

switch to use id instead of hovered item

Browse source
This commit is contained in:
DD 2017-09-22 13:56:58 -04:00
parent 7e1375d855
commit 32661dde92
2 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/containers/reshape-mode.jsx
View file

@ -26,8 +26,8 @@ class ReshapeMode extends React.Component {
} }
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (this.tool && nextProps.hoveredItem !== this.props.hoveredItem) { if (this.tool && nextProps.hoveredItemId !== this.props.hoveredItemId) {
this.tool.setPrevHoveredItem(nextProps.hoveredItem); this.tool.setPrevHoveredItemId(nextProps.hoveredItemId);
} }
if (nextProps.isReshapeModeActive && !this.props.isReshapeModeActive) { if (nextProps.isReshapeModeActive && !this.props.isReshapeModeActive) {
@ -41,7 +41,7 @@ class ReshapeMode extends React.Component {
} }
activateTool () { activateTool () {
this.tool = new ReshapeTool(this.props.setHoveredItem, this.props.clearHoveredItem, this.props.onUpdateSvg); this.tool = new ReshapeTool(this.props.setHoveredItem, this.props.clearHoveredItem, this.props.onUpdateSvg);
this.tool.setPrevHoveredItem(this.props.hoveredItem); this.tool.setPrevHoveredItemId(this.props.hoveredItemId);
this.tool.activate(); this.tool.activate();
} }
deactivateTool () { deactivateTool () {
@ -60,7 +60,7 @@ class ReshapeMode extends React.Component {
ReshapeMode.propTypes = { ReshapeMode.propTypes = {
clearHoveredItem: PropTypes.func.isRequired, clearHoveredItem: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired, handleMouseDown: PropTypes.func.isRequired,
hoveredItem: PropTypes.instanceOf(paper.Item), hoveredItemId: PropTypes.number,
isReshapeModeActive: PropTypes.bool.isRequired, isReshapeModeActive: PropTypes.bool.isRequired,
onUpdateSvg: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired,
setHoveredItem: PropTypes.func.isRequired setHoveredItem: PropTypes.func.isRequired
@ -68,11 +68,11 @@ ReshapeMode.propTypes = {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
isReshapeModeActive: state.scratchPaint.mode === Modes.RESHAPE, isReshapeModeActive: state.scratchPaint.mode === Modes.RESHAPE,
hoveredItem: state.scratchPaint.hoveredItem hoveredItemId: state.scratchPaint.hoveredItemId
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
setHoveredItem: hoveredItem => { setHoveredItem: hoveredItemId => {
dispatch(setHoveredItem(hoveredItem)); dispatch(setHoveredItem(hoveredItemId));
}, },
clearHoveredItem: () => { clearHoveredItem: () => {
dispatch(clearHoveredItem()); dispatch(clearHoveredItem());

24
src/helper/selection-tools/reshape-tool.js
View file

@ -31,10 +31,9 @@ class ReshapeTool extends paper.Tool {
this.setHoveredItem = setHoveredItem; this.setHoveredItem = setHoveredItem;
this.clearHoveredItem = clearHoveredItem; this.clearHoveredItem = clearHoveredItem;
this.onUpdateSvg = onUpdateSvg; this.onUpdateSvg = onUpdateSvg;
this.prevHoveredItem = null; this.prevHoveredItemId = null;
this.lastEvent = null; this.lastEvent = null;
this.mode = ReshapeModes.SELECTION_BOX; this.mode = ReshapeModes.SELECTION_BOX;
this.selectionRect = null;
this._modeMap = {}; this._modeMap = {};
this._modeMap[ReshapeModes.FILL] = new MoveTool(onUpdateSvg); this._modeMap[ReshapeModes.FILL] = new MoveTool(onUpdateSvg);
this._modeMap[ReshapeModes.POINT] = new PointTool(onUpdateSvg); this._modeMap[ReshapeModes.POINT] = new PointTool(onUpdateSvg);
@ -86,8 +85,8 @@ class ReshapeTool extends paper.Tool {
} }
return hitOptions; return hitOptions;
} }
setPrevHoveredItem (prevHoveredItem) { setPrevHoveredItemId (prevHoveredItemId) {
this.prevHoveredItem = prevHoveredItem; this.prevHoveredItemId = prevHoveredItemId;
} }
handleMouseDown (event) { handleMouseDown (event) {
if (event.event.button > 0) return; // only first mouse button if (event.event.button > 0) return; // only first mouse button
@ -169,11 +168,11 @@ class ReshapeTool extends paper.Tool {
} }
handleMouseMove (event) { handleMouseMove (event) {
const hoveredItem = getHoveredItem(event, this.getHitOptions(), true /* subselect */); const hoveredItem = getHoveredItem(event, this.getHitOptions(), true /* subselect */);
if ((!hoveredItem && this.prevHoveredItem) || // There is no longer a hovered item if ((!hoveredItem && this.prevHoveredItemId) || // There is no longer a hovered item
(hoveredItem && !this.prevHoveredItem) || // There is now a hovered item (hoveredItem && !this.prevHoveredItemId) || // There is now a hovered item
(hoveredItem && this.prevHoveredItem && (hoveredItem && this.prevHoveredItemId &&
hoveredItem.id !== this.prevHoveredItem.id)) { // hovered item changed hoveredItem.id !== this.prevHoveredItemId)) { // hovered item changed
this.setHoveredItem(hoveredItem); this.setHoveredItem(hoveredItem ? hoveredItem.id : null);
} }
} }
handleMouseDrag (event) { handleMouseDrag (event) {
@ -192,9 +191,14 @@ class ReshapeTool extends paper.Tool {
this.onUpdateSvg(); this.onUpdateSvg();
} }
} }
deactivateTool() { deactivateTool () {
paper.settings.handleSize = 0; paper.settings.handleSize = 0;
this.clearHoveredItem(); this.clearHoveredItem();
this.setHoveredItem = null;
this.clearHoveredItem = null;
this.onUpdateSvg = null;
this.prevHoveredItemId = null;
this.lastEvent = null;
} }
} }