add keyboard shortcuts

pull/6/head
casperlamboo 5 years ago
parent 6c01f66815
commit 15f2237d27
  1. 5
      package-lock.json
  2. 5
      package.json
  3. 89
      src/components/App.js

5
package-lock.json generated

@ -7154,6 +7154,11 @@
}
}
},
"keycode": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
"integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
},
"killable": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",

@ -28,6 +28,7 @@
"bowser": "^1.8.1",
"fit-curve": "^0.1.6",
"imports-loader": "^0.7.1",
"keycode": "^2.1.9",
"memoizee": "^0.3.9",
"pouchdb": "^6.3.4",
"proptypes": "^1.1.0",
@ -39,6 +40,7 @@
"react-notification-system-redux": "^1.2.0",
"react-redux": "^5.0.6",
"react-resize-detector": "^1.1.0",
"react-svg-inline": "^2.0.1",
"redux-form": "^7.1.2",
"redux-undo": "^1.0.0-beta9-9-7",
"reselect": "^3.0.1",
@ -46,8 +48,7 @@
"shortid": "^2.2.8",
"three": "^0.88.0",
"three-js-csg": "github:Doodle3D/three-js-csg",
"valid-url": "^1.0.9",
"react-svg-inline": "^2.0.1"
"valid-url": "^1.0.9"
},
"devDependencies": {
"babel-cli": "6.24.1",

@ -13,6 +13,9 @@ import btnUndoImageURL from '../../img/mainmenu/btnUndo.png';
import btnRedoImageURL from '../../img/mainmenu/btnRedo.png';
import InlineIconsLoader from './InlineIconsLoader.js';
import JSONToSketchData from '../shape/JSONToSketchData.js';
import keycode from 'keycode';
import bowser from 'bowser';
import * as d2Tools from '../constants/d2Tools.js';
const styles = {
container: {
@ -63,7 +66,12 @@ class App extends React.Component {
addImage: PropTypes.func.isRequired,
undo: PropTypes.func.isRequired,
redo: PropTypes.func.isRequired,
classes: PropTypes.objectOf(PropTypes.string)
classes: PropTypes.objectOf(PropTypes.string),
deleteSelection: PropTypes.func.isRequired,
selectAll: PropTypes.func.isRequired,
d2ChangeTool: PropTypes.func.isRequired,
moveSelection: PropTypes.func.isRequired,
selectedPen: PropTypes.string.isRequired
};
componentDidMount() {
@ -71,6 +79,13 @@ class App extends React.Component {
container.addEventListener('dragover', event => event.preventDefault());
container.addEventListener('drop', this.onDrop);
window.addEventListener('keydown', this.onKeyDown);
}
componentWillUnmount() {
const { container } = this.refs;
container.removeEventListener('drop', this.onDrop);
window.removeEventListener('keydown', this.onKeyDown);
}
onDrop = async event => {
@ -100,9 +115,65 @@ class App extends React.Component {
}
};
componentWillUnmount() {
const { container } = this.refs;
container.removeEventListener('drop', this.onDrop);
onKeyDown = (event) => {
const { undo, redo, deleteSelection, selectAll, d2ChangeTool, moveSelection, selectedPen } = this.props;
const { metaKey, ctrlKey, shiftKey } = event;
const key = keycode(event);
const commandKey = bowser.mac ? metaKey : ctrlKey;
const targetTag = event.target.tagName.toLowerCase();
if (targetTag === 'input' || targetTag === 'textarea') return;
switch (key) {
case 'backspace':
case 'delete':
event.preventDefault();
deleteSelection();
break;
case 'a':
if (commandKey) selectAll();
break;
case 'z':
if (commandKey) {
if (shiftKey) {
redo();
} else {
undo();
}
}
break;
case 't': {
if (!commandKey) d2ChangeTool(d2Tools.TEXT);
break;
}
case 'b': {
if (!commandKey) d2ChangeTool(selectedPen);
break;
}
case 'left':
case 'right':
case 'up':
case 'down': {
const delta = shiftKey ? 10 : 1;
const deltas = {
left: { deltaX: -delta, deltaY: 0 },
right: { deltaX: delta, deltaY: 0 },
up: { deltaX: 0, deltaY: -delta },
down: { deltaX: 0, deltaY: delta }
};
const { deltaX, deltaY } = deltas[key];
moveSelection(deltaX, deltaY);
}
default:
break;
}
}
render() {
@ -126,9 +197,15 @@ class App extends React.Component {
}
}
export default injectSheet(styles)(connect(null, {
export default injectSheet(styles)(connect(state => ({
selectedPen: state.sketcher.present.menus['pen-tools'].selected
}), {
undo: actions.undo.undo,
redo: actions.undo.redo,
openSketch: actions.openSketch,
addImage: actions.addImage
addImage: actions.addImage,
deleteSelection: actions.deleteSelection,
selectAll: actions.selectAll,
d2ChangeTool: actions.d2ChangeTool,
moveSelection: actions.moveSelection
})(App));

Loading…
Cancel
Save