Skip to content

Commit

Permalink
feat(keyboard): move arrow bindings to keyboard-move feature
Browse files Browse the repository at this point in the history
Moving canvas with keyboard will now be controlled by
KeyboardMove feature. To use it, press Cmd/Ctrl and arrows.
Use Shift for accelerated move speed.

Configure speed by adding `keyboardMove` to `config`
with following properties:

- moveSpeed
- moveSpeedAccelerated

BREAKING CHANGES:

- remove canvas movement controls from Keyboard
- move canvas with keyboard arrows and Cmd/Ctrl
  • Loading branch information
barmac authored and nikku committed Oct 26, 2018
1 parent b0ea76d commit 571efb9
Show file tree
Hide file tree
Showing 6 changed files with 397 additions and 220 deletions.
51 changes: 0 additions & 51 deletions lib/features/keyboard/KeyboardBindings.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import {
*/
export default function KeyboardBindings(keyboard, editorActions) {

var config = keyboard._config;

// undo
// (CTRL|CMD) + Z
function undo(context) {
Expand Down Expand Up @@ -133,53 +131,6 @@ export default function KeyboardBindings(keyboard, editorActions) {
}
}

// move canvas left
// left arrow
//
// 37 = Left
// 38 = Up
// 39 = Right
// 40 = Down
function moveCanvas(context) {

var event = context.event;

if (isKey([
'ArrowLeft', 'Left',
'ArrowUp', 'Up',
'ArrowDown', 'Down',
'ArrowRight', 'Right'
], event)) {

var opts = {
invertY: config.invertY,
speed: (config.speed || 50)
};

switch (event.key) {
case 'ArrowLeft':
case 'Left':
opts.direction = 'left';
break;
case 'ArrowUp':
case 'Up':
opts.direction = 'up';
break;
case 'ArrowRight':
case 'Right':
opts.direction = 'right';
break;
case 'ArrowDown':
case 'Down':
opts.direction = 'down';
break;
}

editorActions.trigger('moveCanvas', opts);

return true;
}
}

keyboard.addListener(copy);
keyboard.addListener(paste);
Expand All @@ -192,8 +143,6 @@ export default function KeyboardBindings(keyboard, editorActions) {
keyboard.addListener(zoomDefault);
keyboard.addListener(zoomIn);
keyboard.addListener(zoomOut);

keyboard.addListener(moveCanvas);
}

KeyboardBindings.$inject = [
Expand Down
82 changes: 82 additions & 0 deletions lib/navigation/keyboard-move/KeyboardMove.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { assign } from 'min-dash';


var DEFAULT_CONFIG = {
moveSpeed: 50,
moveSpeedAccelerated: 200
};


/**
*
* @param {Object} config
* @param {Number} [config.moveSpeed=50]
* @param {Number} [config.moveSpeedAccelerated=200]
* @param {Keyboard} keyboard
* @param {EditorActions} editorActions
*/
export default function KeyboardNavigation(
config,
keyboard,
editorActions
) {

var self = this;

this._config = assign({}, DEFAULT_CONFIG, config || {});

keyboard.addListener(arrowsListener);


function arrowsListener(context) {

var event = context.event,
config = self._config;

if (!keyboard.isCmd(event)) {
return;
}

if (keyboard.isKey([
'ArrowLeft', 'Left',
'ArrowUp', 'Up',
'ArrowDown', 'Down',
'ArrowRight', 'Right'
], event)) {

var opts = {
speed: keyboard.isShift(event) ? config.moveSpeedAccelerated : config.moveSpeed
};

switch (event.key) {
case 'ArrowLeft':
case 'Left':
opts.direction = 'left';
break;
case 'ArrowUp':
case 'Up':
opts.direction = 'up';
break;
case 'ArrowRight':
case 'Right':
opts.direction = 'right';
break;
case 'ArrowDown':
case 'Down':
opts.direction = 'down';
break;
}

editorActions.trigger('moveCanvas', opts);

return true;
}
}
}


KeyboardNavigation.$inject = [
'config.keyboardMove',
'keyboard',
'editorActions'
];
14 changes: 14 additions & 0 deletions lib/navigation/keyboard-move/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import EditorActions from '../../features/editor-actions';
import KeyboardModule from '../../features/keyboard';

import KeyboardMove from './KeyboardMove';


export default {
__depends__: [
EditorActions,
KeyboardModule
],
__init__: [ 'keyboardMove' ],
keyboardMove: [ 'type', KeyboardMove ]
};
38 changes: 26 additions & 12 deletions lib/navigation/movecanvas/MoveCanvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,28 @@ import {
} from '../../util/Event';


function length(point) {
return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
}

var THRESHOLD = 15;


/**
* @param {EventBus} eventBus
* @param {Canvas} canvas
* @param {Keyboard} keyboard
* @param {EditorActions} editorActions
*/
export default function MoveCanvas(eventBus, canvas) {

var context;


// listen for move on element mouse down;
// allow others to hook into the event before us though
// (dragging / element moving will do this)
eventBus.on('element.mousedown', 500, function(e) {
return handleStart(e.originalEvent);
});


function handleMove(event) {

var start = context.start,
Expand Down Expand Up @@ -96,15 +107,18 @@ export default function MoveCanvas(eventBus, canvas) {
// we've handled the event
return true;
}
}


MoveCanvas.$inject = [
'eventBus',
'canvas'
];

// listen for move on element mouse down;
// allow others to hook into the event before us though
// (dragging / element moving will do this)
eventBus.on('element.mousedown', 500, function(e) {
return handleStart(e.originalEvent);
});

}

// helpers ///////

MoveCanvas.$inject = [ 'eventBus', 'canvas' ];
function length(point) {
return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
}
157 changes: 0 additions & 157 deletions test/spec/features/keyboard/MoveCanvasSpec.js

This file was deleted.

0 comments on commit 571efb9

Please sign in to comment.