Merge pull request from fsih/breakOutMode

Break out mode tools
This commit is contained in:
DD Liu 2017-12-20 15:38:13 -05:00 committed by GitHub
commit c1010b95fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 54 deletions
src
components/paint-editor
containers

View file

@ -1,8 +1,8 @@
import paper from '@scratch/paper';
import classNames from 'classnames';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import MediaQuery from 'react-responsive';
import React from 'react';
import paper from '@scratch/paper';
import PropTypes from 'prop-types';
import PaperCanvas from '../../containers/paper-canvas.jsx';
@ -25,7 +25,7 @@ import Label from '../forms/label.jsx';
import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
import LineMode from '../../containers/line-mode.jsx';
import Loupe from '../loupe/loupe.jsx';
import ModeToolsComponent from '../mode-tools/mode-tools.jsx';
import ModeToolsContainer from '../../containers/mode-tools.jsx';
import OvalMode from '../../containers/oval-mode.jsx';
import RectMode from '../../containers/rect-mode.jsx';
import ReshapeMode from '../../containers/reshape-mode.jsx';
@ -312,9 +312,8 @@ const PaintEditorComponent = props => {
/>
</InputGroup>
<InputGroup className={styles.modModeTools}>
<ModeToolsComponent
onCopyToClipboard={props.onCopyToClipboard}
onPasteFromClipboard={props.onPasteFromClipboard}
<ModeToolsContainer
onUpdateSvg={props.onUpdateSvg}
/>
</InputGroup>
</div>
@ -428,9 +427,7 @@ PaintEditorComponent.propTypes = {
intl: intlShape,
isEyeDropping: PropTypes.bool,
name: PropTypes.string,
onCopyToClipboard: PropTypes.func.isRequired,
onGroup: PropTypes.func.isRequired,
onPasteFromClipboard: PropTypes.func.isRequired,
onRedo: PropTypes.func.isRequired,
onSendBackward: PropTypes.func.isRequired,
onSendForward: PropTypes.func.isRequired,

View file

@ -0,0 +1,92 @@
import paper from '@scratch/paper';
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import bindAll from 'lodash.bindall';
import ModeToolsComponent from '../components/mode-tools/mode-tools.jsx';
import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
import {incrementPasteOffset, setClipboardItems} from '../reducers/clipboard';
import {clearSelection, getSelectedLeafItems, getSelectedRootItems} from '../helper/selection';
class ModeTools extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleCopyToClipboard',
'handlePasteFromClipboard'
]);
}
handleCopyToClipboard () {
const selectedItems = getSelectedRootItems();
if (selectedItems.length > 0) {
const clipboardItems = [];
for (let i = 0; i < selectedItems.length; i++) {
const jsonItem = selectedItems[i].exportJSON({asString: false});
clipboardItems.push(jsonItem);
}
this.props.setClipboardItems(clipboardItems);
}
}
handlePasteFromClipboard () {
clearSelection(this.props.clearSelectedItems);
if (this.props.clipboardItems.length > 0) {
for (let i = 0; i < this.props.clipboardItems.length; i++) {
const item = paper.Base.importJSON(this.props.clipboardItems[i]);
if (item) {
item.selected = true;
}
const placedItem = paper.project.getActiveLayer().addChild(item);
placedItem.position.x += 10 * this.props.pasteOffset;
placedItem.position.y += 10 * this.props.pasteOffset;
}
this.props.incrementPasteOffset();
this.props.setSelectedItems();
paper.project.view.update();
this.props.onUpdateSvg();
}
}
render () {
return (
<ModeToolsComponent
onCopyToClipboard={this.handleCopyToClipboard}
onPasteFromClipboard={this.handlePasteFromClipboard}
/>
);
}
}
ModeTools.propTypes = {
clearSelectedItems: PropTypes.func.isRequired,
clipboardItems: PropTypes.arrayOf(PropTypes.array),
incrementPasteOffset: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired,
pasteOffset: PropTypes.number,
setClipboardItems: PropTypes.func.isRequired,
setSelectedItems: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
clipboardItems: state.scratchPaint.clipboard.items,
pasteOffset: state.scratchPaint.clipboard.pasteOffset
});
const mapDispatchToProps = dispatch => ({
setClipboardItems: items => {
dispatch(setClipboardItems(items));
},
incrementPasteOffset: () => {
dispatch(incrementPasteOffset());
},
clearSelectedItems: () => {
dispatch(clearSelectedItems());
},
setSelectedItems: () => {
dispatch(setSelectedItems(getSelectedLeafItems()));
}
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ModeTools);

View file

@ -1,3 +1,4 @@
import paper from '@scratch/paper';
import PropTypes from 'prop-types';
import React from 'react';
import PaintEditorComponent from '../components/paint-editor/paint-editor.jsx';
@ -5,21 +6,19 @@ import PaintEditorComponent from '../components/paint-editor/paint-editor.jsx';
import {changeMode} from '../reducers/modes';
import {undo, redo, undoSnapshot} from '../reducers/undo';
import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
import {incrementPasteOffset, setClipboardItems} from '../reducers/clipboard';
import {deactivateEyeDropper} from '../reducers/eye-dropper';
import {hideGuideLayers, showGuideLayers} from '../helper/layer';
import {performUndo, performRedo, performSnapshot, shouldShowUndo, shouldShowRedo} from '../helper/undo';
import {bringToFront, sendBackward, sendToBack, bringForward} from '../helper/order';
import {groupSelection, ungroupSelection} from '../helper/group';
import {clearSelection, getSelectedLeafItems, getSelectedRootItems} from '../helper/selection';
import {getSelectedLeafItems} from '../helper/selection';
import {resetZoom, zoomOnSelection} from '../helper/view';
import EyeDropperTool from '../helper/tools/eye-dropper';
import Modes from '../lib/modes';
import {connect} from 'react-redux';
import bindAll from 'lodash.bindall';
import paper from '@scratch/paper';
class PaintEditor extends React.Component {
static get ZOOM_INCREMENT () {
@ -39,8 +38,6 @@ class PaintEditor extends React.Component {
'handleUngroup',
'canRedo',
'canUndo',
'handleCopyToClipboard',
'handlePasteFromClipboard',
'onMouseDown',
'setCanvas',
'startEyeDroppingLoop',
@ -118,36 +115,6 @@ class PaintEditor extends React.Component {
handleSendToFront () {
bringToFront(this.handleUpdateSvg);
}
handleCopyToClipboard () {
const selectedItems = getSelectedRootItems();
if (selectedItems.length > 0) {
const clipboardItems = [];
for (let i = 0; i < selectedItems.length; i++) {
const jsonItem = selectedItems[i].exportJSON({asString: false});
clipboardItems.push(jsonItem);
}
this.props.setClipboardItems(clipboardItems);
}
}
handlePasteFromClipboard () {
clearSelection(this.props.clearSelectedItems);
if (this.props.clipboardItems.length > 0) {
for (let i = 0; i < this.props.clipboardItems.length; i++) {
const item = paper.Base.importJSON(this.props.clipboardItems[i]);
if (item) {
item.selected = true;
}
const placedItem = paper.project.getActiveLayer().addChild(item);
placedItem.position.x += 10 * this.props.pasteOffset;
placedItem.position.y += 10 * this.props.pasteOffset;
}
this.props.incrementPasteOffset();
this.props.setSelectedItems();
paper.project.view.update();
this.handleUpdateSvg();
}
}
canUndo () {
return shouldShowUndo(this.props.undoState);
}
@ -239,9 +206,7 @@ class PaintEditor extends React.Component {
setCanvas={this.setCanvas}
svg={this.props.svg}
svgId={this.props.svgId}
onCopyToClipboard={this.handleCopyToClipboard}
onGroup={this.handleGroup}
onPasteFromClipboard={this.handlePasteFromClipboard}
onRedo={this.handleRedo}
onSendBackward={this.handleSendBackward}
onSendForward={this.handleSendForward}
@ -262,8 +227,6 @@ class PaintEditor extends React.Component {
PaintEditor.propTypes = {
changeColorToEyeDropper: PropTypes.func,
clearSelectedItems: PropTypes.func.isRequired,
clipboardItems: PropTypes.arrayOf(PropTypes.array),
incrementPasteOffset: PropTypes.func.isRequired,
isEyeDropping: PropTypes.bool,
name: PropTypes.string,
onDeactivateEyeDropper: PropTypes.func.isRequired,
@ -272,14 +235,12 @@ PaintEditor.propTypes = {
onUndo: PropTypes.func.isRequired,
onUpdateName: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired,
pasteOffset: PropTypes.number,
previousTool: PropTypes.shape({ // paper.Tool
activate: PropTypes.func.isRequired,
remove: PropTypes.func.isRequired
}),
rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number,
setClipboardItems: PropTypes.func.isRequired,
setSelectedItems: PropTypes.func.isRequired,
svg: PropTypes.string,
svgId: PropTypes.string,
@ -326,12 +287,6 @@ const mapDispatchToProps = dispatch => ({
undoSnapshot: snapshot => {
dispatch(undoSnapshot(snapshot));
},
setClipboardItems: items => {
dispatch(setClipboardItems(items));
},
incrementPasteOffset: () => {
dispatch(incrementPasteOffset());
},
onDeactivateEyeDropper: () => {
// set redux values to default for eye dropper reducer
dispatch(deactivateEyeDropper());