Merge pull request #132 from ueokande/meta-keys

Meta keys
jh-changes
Shin'ya Ueoka 7 years ago committed by GitHub
commit c7b05482f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 16
      src/content/actions/setting.js
  2. 2
      src/content/components/common/follow.js
  3. 21
      src/content/components/common/input.js
  4. 23
      src/content/components/common/keymapper.js
  5. 2
      src/content/components/top-content/follow-controller.js
  6. 6
      src/content/reducers/input.js
  7. 2
      src/content/reducers/setting.js
  8. 86
      src/shared/utils/keys.js
  9. 23
      test/content/actions/setting.test.js
  10. 41
      test/content/components/common/input.test.js
  11. 12
      test/content/reducers/input.test.js
  12. 2
      test/content/reducers/setting.test.js
  13. 145
      test/shared/utils/keys.test.js
  14. 0
      test/shared/utils/re.test.js

@ -1,9 +1,23 @@
import actions from 'content/actions'; import actions from 'content/actions';
import * as keyUtils from 'shared/utils/keys';
const set = (value) => { const set = (value) => {
let maps = new Map();
if (value.keymaps) {
let entries = Object.entries(value.keymaps).map((entry) => {
return [
keyUtils.fromMapKeys(entry[0]),
entry[1],
];
});
maps = new Map(entries);
}
return { return {
type: actions.SETTING_SET, type: actions.SETTING_SET,
value, value: Object.assign({}, value, {
keymaps: maps,
})
}; };
}; };

@ -46,7 +46,7 @@ export default class Follow {
} }
this.win.parent.postMessage(JSON.stringify({ this.win.parent.postMessage(JSON.stringify({
type: messages.FOLLOW_KEY_PRESS, type: messages.FOLLOW_KEY_PRESS,
key, key: key.key,
}), '*'); }), '*');
return true; return true;
} }

@ -1,22 +1,5 @@
import * as dom from 'shared/utils/dom'; import * as dom from 'shared/utils/dom';
import * as keys from 'shared/utils/keys';
const modifierdKeyName = (name) => {
if (name.length === 1) {
return name.toUpperCase();
} else if (name === 'Escape') {
return 'Esc';
}
return name;
};
const mapKey = (e) => {
if (e.ctrlKey) {
return '<C-' + modifierdKeyName(e.key) + '>';
} else if (e.shiftKey && e.key.length !== 1) {
return '<S-' + modifierdKeyName(e.key) + '>';
}
return e.key;
};
export default class InputComponent { export default class InputComponent {
constructor(target) { constructor(target) {
@ -64,7 +47,7 @@ export default class InputComponent {
return; return;
} }
let key = mapKey(e); let key = keys.fromKeyboardEvent(e);
for (let listener of this.onKeyListeners) { for (let listener of this.onKeyListeners) {
let stop = listener(key); let stop = listener(key);

@ -1,6 +1,19 @@
import * as inputActions from 'content/actions/input'; import * as inputActions from 'content/actions/input';
import * as operationActions from 'content/actions/operation'; import * as operationActions from 'content/actions/operation';
import operations from 'shared/operations'; import operations from 'shared/operations';
import * as keyUtils from 'shared/utils/keys';
const mapStartsWith = (mapping, keys) => {
if (mapping.length < keys.length) {
return false;
}
for (let i = 0; i < keys.length; ++i) {
if (!keyUtils.equals(mapping[i], keys[i])) {
return false;
}
}
return true;
};
export default class KeymapperComponent { export default class KeymapperComponent {
constructor(store) { constructor(store) {
@ -14,14 +27,14 @@ export default class KeymapperComponent {
let input = state.input; let input = state.input;
let keymaps = state.setting.keymaps; let keymaps = state.setting.keymaps;
let matched = Object.keys(keymaps).filter((keyStr) => { let matched = Array.from(keymaps.keys()).filter((mapping) => {
return keyStr.startsWith(input.keys); return mapStartsWith(mapping, input.keys);
}); });
if (!state.addon.enabled) { if (!state.addon.enabled) {
// available keymaps are only ADDON_ENABLE and ADDON_TOGGLE_ENABLED if // available keymaps are only ADDON_ENABLE and ADDON_TOGGLE_ENABLED if
// the addon disabled // the addon disabled
matched = matched.filter((keys) => { matched = matched.filter((keys) => {
let type = keymaps[keys].type; let type = keymaps.get(keys).type;
return type === operations.ADDON_ENABLE || return type === operations.ADDON_ENABLE ||
type === operations.ADDON_TOGGLE_ENABLED; type === operations.ADDON_TOGGLE_ENABLED;
}); });
@ -30,10 +43,10 @@ export default class KeymapperComponent {
this.store.dispatch(inputActions.clearKeys()); this.store.dispatch(inputActions.clearKeys());
return false; return false;
} else if (matched.length > 1 || } else if (matched.length > 1 ||
matched.length === 1 && input.keys !== matched[0]) { matched.length === 1 && input.keys.length < matched[0].length) {
return true; return true;
} }
let operation = keymaps[matched]; let operation = keymaps.get(matched[0]);
this.store.dispatch(operationActions.exec(operation)); this.store.dispatch(operationActions.exec(operation));
this.store.dispatch(inputActions.clearKeys()); this.store.dispatch(inputActions.clearKeys());
return true; return true;

@ -76,7 +76,7 @@ export default class FollowController {
this.activate(); this.activate();
this.store.dispatch(followControllerActions.disable()); this.store.dispatch(followControllerActions.disable());
break; break;
case 'Escape': case 'Esc':
this.store.dispatch(followControllerActions.disable()); this.store.dispatch(followControllerActions.disable());
break; break;
case 'Backspace': case 'Backspace':

@ -1,18 +1,18 @@
import actions from 'content/actions'; import actions from 'content/actions';
const defaultState = { const defaultState = {
keys: '' keys: []
}; };
export default function reducer(state = defaultState, action = {}) { export default function reducer(state = defaultState, action = {}) {
switch (action.type) { switch (action.type) {
case actions.INPUT_KEY_PRESS: case actions.INPUT_KEY_PRESS:
return Object.assign({}, state, { return Object.assign({}, state, {
keys: state.keys + action.key keys: state.keys.concat([action.key]),
}); });
case actions.INPUT_CLEAR_KEYS: case actions.INPUT_CLEAR_KEYS:
return Object.assign({}, state, { return Object.assign({}, state, {
keys: '', keys: [],
}); });
default: default:
return state; return state;

@ -1,7 +1,7 @@
import actions from 'content/actions'; import actions from 'content/actions';
const defaultState = { const defaultState = {
keymaps: {}, keymaps: new Map(),
}; };
export default function reducer(state = defaultState, action = {}) { export default function reducer(state = defaultState, action = {}) {

@ -0,0 +1,86 @@
const modifierdKeyName = (name) => {
if (name.length === 1) {
return name;
} else if (name === 'Escape') {
return 'Esc';
}
return name;
};
const fromKeyboardEvent = (e) => {
let key = modifierdKeyName(e.key);
let shift = e.shiftKey;
if (key.length === 1 && key.toUpperCase() === key.toLowerCase()) {
// make shift false for symbols to enable key bindings by symbold keys.
// But this limits key bindings by symbol keys with Shift (such as Shift+$>.
shift = false;
}
return {
key: modifierdKeyName(e.key),
shiftKey: shift,
ctrlKey: e.ctrlKey,
altKey: e.altKey,
metaKey: e.metaKey,
};
};
const fromMapKey = (key) => {
if (key.startsWith('<') && key.endsWith('>')) {
let inner = key.slice(1, -1);
let shift = inner.includes('S-');
let base = inner.slice(inner.lastIndexOf('-') + 1);
if (shift && base.length === 1) {
base = base.toUpperCase();
} else if (!shift && base.length === 1) {
base = base.toLowerCase();
}
return {
key: base,
shiftKey: inner.includes('S-'),
ctrlKey: inner.includes('C-'),
altKey: inner.includes('A-'),
metaKey: inner.includes('M-'),
};
}
return {
key: key,
shiftKey: key.toLowerCase() !== key,
ctrlKey: false,
altKey: false,
metaKey: false,
};
};
const fromMapKeys = (keys) => {
const fromMapKeysRecursive = (remainings, mappedKeys) => {
if (remainings.length === 0) {
return mappedKeys;
}
let nextPos = 1;
if (remainings.startsWith('<')) {
let ltPos = remainings.indexOf('>');
if (ltPos > 0) {
nextPos = ltPos + 1;
}
}
return fromMapKeysRecursive(
remainings.slice(nextPos),
mappedKeys.concat([fromMapKey(remainings.slice(0, nextPos))])
);
};
return fromMapKeysRecursive(keys, []);
};
const equals = (e1, e2) => {
return e1.key === e2.key &&
e1.ctrlKey === e2.ctrlKey &&
e1.metaKey === e2.metaKey &&
e1.altKey === e2.altKey &&
e1.shiftKey === e2.shiftKey;
};
export { fromKeyboardEvent, fromMapKey, fromMapKeys, equals };

@ -7,7 +7,28 @@ describe("setting actions", () => {
it('create SETTING_SET action', () => { it('create SETTING_SET action', () => {
let action = settingActions.set({ red: 'apple', yellow: 'banana' }); let action = settingActions.set({ red: 'apple', yellow: 'banana' });
expect(action.type).to.equal(actions.SETTING_SET); expect(action.type).to.equal(actions.SETTING_SET);
expect(action.value).to.deep.equal({ red: 'apple', yellow: 'banana' }); expect(action.value.red).to.equal('apple');
expect(action.value.yellow).to.equal('banana');
expect(action.value.keymaps).to.be.empty;
});
it('converts keymaps', () => {
let action = settingActions.set({
keymaps: {
'dd': 'remove current tab',
'z<C-A>': 'increment',
}
});
let keymaps = action.value.keymaps;
expect(action.value.keymaps).to.have.deep.all.keys(
[
[{ key: 'd', shiftKey: false, ctrlKey: false, altKey: false, metaKey: false },
{ key: 'd', shiftKey: false, ctrlKey: false, altKey: false, metaKey: false }],
[{ key: 'z', shiftKey: false, ctrlKey: false, altKey: false, metaKey: false },
{ key: 'a', shiftKey: false, ctrlKey: true, altKey: false, metaKey: false }],
]
);
}); });
}); });
}); });

@ -4,20 +4,21 @@ import { expect } from "chai";
describe('InputComponent', () => { describe('InputComponent', () => {
it('register callbacks', () => { it('register callbacks', () => {
let component = new InputComponent(window.document); let component = new InputComponent(window.document);
let key = { key: 'a', ctrlKey: true, shiftKey: false, altKey: false, metaKey: false };
component.onKey((key) => { component.onKey((key) => {
expect(key).is.equals('a'); expect(key).to.deep.equal(key);
}); });
component.onKeyDown({ key: 'a' }); component.onKeyDown(key);
}); });
it('invoke callback once', () => { it('invoke callback once', () => {
let component = new InputComponent(window.document); let component = new InputComponent(window.document);
let a = 0, b = 0; let a = 0, b = 0;
component.onKey((key) => { component.onKey((key) => {
if (key == 'a') { if (key.key == 'a') {
++a; ++a;
} else { } else {
key == 'b' key.key == 'b'
++b; ++b;
} }
}); });
@ -32,38 +33,6 @@ describe('InputComponent', () => {
expect(b).is.equals(1); expect(b).is.equals(1);
}) })
it('add prefix when ctrl pressed', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('<C-A>');
});
component.onKeyDown({ key: 'a', ctrlKey: true });
})
it('press X', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('X');
});
component.onKeyDown({ key: 'X', shiftKey: true });
})
it('press <Shift> + <Esc>', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('<S-Esc>');
});
component.onKeyDown({ key: 'Escape', shiftKey: true });
})
it('press <Ctrl> + <Esc>', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('<C-Esc>');
});
component.onKeyDown({ key: 'Escape', ctrlKey: true });
})
it('does not invoke only meta keys', () => { it('does not invoke only meta keys', () => {
let component = new InputComponent(window.document); let component = new InputComponent(window.document);
component.onKey((key) => { component.onKey((key) => {

@ -5,22 +5,22 @@ import inputReducer from 'content/reducers/input';
describe("input reducer", () => { describe("input reducer", () => {
it('return the initial state', () => { it('return the initial state', () => {
let state = inputReducer(undefined, {}); let state = inputReducer(undefined, {});
expect(state).to.have.deep.property('keys', ''); expect(state).to.have.deep.property('keys', []);
}); });
it('return next state for INPUT_KEY_PRESS', () => { it('return next state for INPUT_KEY_PRESS', () => {
let action = { type: actions.INPUT_KEY_PRESS, key: 'a' }; let action = { type: actions.INPUT_KEY_PRESS, key: 'a' };
let state = inputReducer(undefined, action); let state = inputReducer(undefined, action);
expect(state).to.have.deep.property('keys', 'a'); expect(state).to.have.deep.property('keys', ['a']);
action = { type: actions.INPUT_KEY_PRESS, key: '<C-B>' }; action = { type: actions.INPUT_KEY_PRESS, key: 'b' };
state = inputReducer(state, action); state = inputReducer(state, action);
expect(state).to.have.deep.property('keys', 'a<C-B>'); expect(state).to.have.deep.property('keys', ['a', 'b']);
}); });
it('return next state for INPUT_CLEAR_KEYS', () => { it('return next state for INPUT_CLEAR_KEYS', () => {
let action = { type: actions.INPUT_CLEAR_KEYS }; let action = { type: actions.INPUT_CLEAR_KEYS };
let state = inputReducer({ keys: 'abc' }, action); let state = inputReducer({ keys: [1, 2, 3] }, action);
expect(state).to.have.deep.property('keys', ''); expect(state).to.have.deep.property('keys', []);
}); });
}); });

@ -5,7 +5,7 @@ import settingReducer from 'content/reducers/setting';
describe("content setting reducer", () => { describe("content setting reducer", () => {
it('return the initial state', () => { it('return the initial state', () => {
let state = settingReducer(undefined, {}); let state = settingReducer(undefined, {});
expect(state).to.deep.equal({ keymaps: {} }); expect(state.keymaps).to.be.empty;
}); });
it('return next state for SETTING_SET', () => { it('return next state for SETTING_SET', () => {

@ -0,0 +1,145 @@
import { expect } from 'chai';
import * as keys from 'shared/utils/keys';
describe("keys util", () => {
describe('fromKeyboardEvent', () => {
it('returns from keyboard input Ctrl+X', () => {
let k = keys.fromKeyboardEvent({
key: 'x', shiftKey: false, ctrlKey: true, altKey: false, metaKey: true
});
expect(k.key).to.equal('x');
expect(k.shiftKey).to.be.false;
expect(k.ctrlKey).to.be.true;
expect(k.altKey).to.be.false;
expect(k.metaKey).to.be.true;
});
it('returns from keyboard input Shift+Esc', () => {
let k = keys.fromKeyboardEvent({
key: 'Escape', shiftKey: true, ctrlKey: false, altKey: false, metaKey: true
});
expect(k.key).to.equal('Esc');
expect(k.shiftKey).to.be.true;
expect(k.ctrlKey).to.be.false;
expect(k.altKey).to.be.false;
expect(k.metaKey).to.be.true;
});
it('returns from keyboard input Ctrl+$', () => {
// $ required shift pressing on most keyboards
let k = keys.fromKeyboardEvent({
key: '$', shiftKey: true, ctrlKey: true, altKey: false, metaKey: false
});
expect(k.key).to.equal('$');
expect(k.shiftKey).to.be.false;
expect(k.ctrlKey).to.be.true;
expect(k.altKey).to.be.false;
expect(k.metaKey).to.be.false;
});
});
describe('fromMapKey', () => {
it('return for X', () => {
let key = keys.fromMapKey('x');
expect(key.key).to.equal('x');
expect(key.shiftKey).to.be.false;
expect(key.ctrlKey).to.be.false;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
it('return for Shift+X', () => {
let key = keys.fromMapKey('X');
expect(key.key).to.equal('X');
expect(key.shiftKey).to.be.true;
expect(key.ctrlKey).to.be.false;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
it('return for Ctrl+X', () => {
let key = keys.fromMapKey('<C-X>');
expect(key.key).to.equal('x');
expect(key.shiftKey).to.be.false;
expect(key.ctrlKey).to.be.true;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
it('returns for Ctrl+Meta+X', () => {
let key = keys.fromMapKey('<C-M-X>');
expect(key.key).to.equal('x');
expect(key.shiftKey).to.be.false;
expect(key.ctrlKey).to.be.true;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.true;
});
it('returns for Ctrl+Shift+x', () => {
let key = keys.fromMapKey('<C-S-x>');
expect(key.key).to.equal('X');
expect(key.shiftKey).to.be.true;
expect(key.ctrlKey).to.be.true;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
it('returns for Shift+Esc', () => {
let key = keys.fromMapKey('<S-Esc>');
expect(key.key).to.equal('Esc');
expect(key.shiftKey).to.be.true;
expect(key.ctrlKey).to.be.false;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
it('returns for Ctrl+Esc', () => {
let key = keys.fromMapKey('<C-Esc>');
expect(key.key).to.equal('Esc');
expect(key.shiftKey).to.be.false;
expect(key.ctrlKey).to.be.true;
expect(key.altKey).to.be.false;
expect(key.metaKey).to.be.false;
});
});
describe('fromMapKeys', () => {
it('returns mapped keys for Shift+Esc', () => {
let keyArray = keys.fromMapKeys('<S-Esc>');
expect(keyArray).to.have.lengthOf(1);
expect(keyArray[0].key).to.equal('Esc');
expect(keyArray[0].shiftKey).to.be.true;
});
it('returns mapped keys for a<C-B><A-C>d<M-e>', () => {
let keyArray = keys.fromMapKeys('a<C-B><A-C>d<M-e>');
expect(keyArray).to.have.lengthOf(5);
expect(keyArray[0].key).to.equal('a');
expect(keyArray[1].ctrlKey).to.be.true;
expect(keyArray[1].key).to.equal('b');
expect(keyArray[2].altKey).to.be.true;
expect(keyArray[2].key).to.equal('c');
expect(keyArray[3].key).to.equal('d');
expect(keyArray[4].metaKey).to.be.true;
expect(keyArray[4].key).to.equal('e');
});
})
describe('equals', () => {
expect(keys.equals({
key: 'x',
ctrlKey: true,
}, {
key: 'x',
ctrlKey: true,
})).to.be.true;
expect(keys.equals({
key: 'X',
shiftKey: true,
}, {
key: 'x',
ctrlKey: true,
})).to.be.false;
});
});