Move lib/d3.keybinding.js -> util/keybinding.js

almost none of the original d3 "plugin" code remains
This commit is contained in:
Bryan Housel
2018-11-13 13:42:09 -05:00
parent 2ffcec965a
commit bb30cbf555
35 changed files with 176 additions and 231 deletions
+2 -4
View File
@@ -10,8 +10,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { svgIcon } from '../svg';
import { uiBackgroundDisplayOptions } from './background_display_options';
@@ -23,7 +21,7 @@ import { uiMapData } from './map_data';
import { uiMapInMap } from './map_in_map';
import { uiSettingsCustomBackground } from './settings/custom_background';
import { uiTooltipHtml } from './tooltipHtml';
import { utilCallWhenIdle } from '../util';
import { utilCallWhenIdle, utilKeybinding } from '../util';
import { tooltip } from '../util/tooltip';
@@ -412,7 +410,7 @@ export function uiBackground(context) {
update();
var keybinding = d3_keybinding('background')
var keybinding = utilKeybinding('background')
.on(key, togglePane)
.on(uiCmd('⌘' + key), quickSwitch)
.on([t('map_data.key'), t('help.key')], hidePane);
+2 -3
View File
@@ -5,8 +5,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { JXON } from '../util/jxon';
import { geoExtent } from '../geo';
@@ -16,6 +14,7 @@ import { utilDetect } from '../util/detect';
import {
utilEntityOrMemberSelector,
utilKeybinding,
utilRebind,
utilWrap
} from '../util';
@@ -23,7 +22,7 @@ import {
export function uiConflicts(context) {
var dispatch = d3_dispatch('cancel', 'save');
var keybinding = d3_keybinding('conflicts');
var keybinding = utilKeybinding('conflicts');
var _origChanges;
var _conflictList;
+2 -3
View File
@@ -3,8 +3,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import * as sexagesimal from '@mapbox/sexagesimal';
import { t } from '../util/locale';
import { dmsCoordinatePair } from '../util/units';
@@ -20,12 +18,13 @@ import {
utilDisplayName,
utilDisplayType,
utilEntityOrMemberSelector,
utilKeybinding,
utilNoAuto
} from '../util';
export function uiFeatureList(context) {
var keybinding = d3_keybinding('uiFeatureList');
var keybinding = utilKeybinding('uiFeatureList');
var _geocodeResults;
+2 -3
View File
@@ -3,15 +3,14 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { uiCmd } from './cmd';
import { utilKeybinding } from '../util';
import { utilDetect } from '../util/detect';
export function uiFullScreen(context) {
var element = context.container().node(),
keybinding = d3_keybinding('full-screen');
keybinding = utilKeybinding('full-screen');
// button;
+4 -4
View File
@@ -3,10 +3,7 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import marked from 'marked';
import { t, textDirection } from '../util/locale';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiBackground } from './background';
@@ -14,6 +11,9 @@ import { uiIntro } from './intro';
import { uiMapData } from './map_data';
import { uiShortcuts } from './shortcuts';
import { uiTooltipHtml } from './tooltipHtml';
import { utilKeybinding } from '../util';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { icon } from './intro/helper';
@@ -476,7 +476,7 @@ export function uiHelp(context) {
clickHelp(docs[0], 0);
var keybinding = d3_keybinding('help')
var keybinding = utilKeybinding('help')
.on(key, togglePane)
.on([t('background.key'), t('map_data.key')], hidePane);
+2 -3
View File
@@ -3,12 +3,11 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiInfoPanels } from './panels';
import { utilKeybinding } from '../util';
export function uiInfo(context) {
@@ -118,7 +117,7 @@ export function uiInfo(context) {
redraw();
var keybinding = d3_keybinding('info')
var keybinding = utilKeybinding('info')
.on(uiCmd('⌘' + t('info_panels.key')), toggle);
ids.forEach(function(k) {
+2 -3
View File
@@ -3,8 +3,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
@@ -12,6 +10,7 @@ import { behaviorHash } from '../behavior';
import { modeBrowse } from '../modes';
import { svgDefs, svgIcon } from '../svg';
import { utilGetDimensions } from '../util/dimensions';
import { utilKeybinding } from '../util';
import { uiAccount } from './account';
import { uiAttribution } from './attribution';
@@ -298,7 +297,7 @@ export function uiInit(context) {
var panPixels = 80;
var keybinding = d3_keybinding('main')
var keybinding = utilKeybinding('main')
.on('⌫', function() { d3_event.preventDefault(); })
.on(t('sidebar.key'), ui.sidebar.toggle)
.on('←', pan([panPixels, 0]))
+2 -3
View File
@@ -3,8 +3,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { svgIcon } from '../svg';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
@@ -15,6 +13,7 @@ import { uiDisclosure } from './disclosure';
import { uiHelp } from './help';
import { uiSettingsCustomData } from './settings/custom_data';
import { uiTooltipHtml } from './tooltipHtml';
import { utilKeybinding } from '../util';
export function uiMapData(context) {
@@ -646,7 +645,7 @@ export function uiMapData(context) {
update();
setFill(_fillSelected);
var keybinding = d3_keybinding('features')
var keybinding = utilKeybinding('features')
.on(key, togglePane)
.on(t('area_fill.wireframe.key'), toggleWireframe)
.on([t('background.key'), t('help.key')], hidePane);
+2 -4
View File
@@ -10,8 +10,6 @@ import {
zoomIdentity as d3_zoomIdentity
} from 'd3-zoom';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import {
geoRawMercator,
@@ -23,7 +21,7 @@ import {
import { rendererTileLayer } from '../renderer';
import { svgDebug, svgData } from '../svg';
import { utilSetTransform } from '../util';
import { utilKeybinding, utilSetTransform } from '../util';
import { utilGetDimensions } from '../util/dimensions';
@@ -336,7 +334,7 @@ export function uiMapInMap(context) {
redraw();
var keybinding = d3_keybinding('map-in-map')
var keybinding = utilKeybinding('map-in-map')
.on(t('background.minimap.key'), toggle);
d3_select(document)
+2 -3
View File
@@ -3,13 +3,12 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { svgIcon } from '../svg';
import { utilKeybinding } from '../util';
export function uiModal(selection, blocking) {
var keybinding = d3_keybinding('modal');
var keybinding = utilKeybinding('modal');
var previous = selection.select('div.modal');
var animate = previous.empty();
+2 -2
View File
@@ -1,7 +1,6 @@
import _debounce from 'lodash-es/debounce';
import { select as d3_select } from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import {
modeAddArea,
@@ -13,6 +12,7 @@ import {
import { svgIcon } from '../svg';
import { tooltip } from '../util/tooltip';
import { utilKeybinding } from '../util';
import { uiTooltipHtml } from './tooltipHtml';
@@ -56,7 +56,7 @@ export function uiModes(context) {
.classed('mode-' + exited.id, false);
});
var keybinding = d3_keybinding('mode-buttons');
var keybinding = utilKeybinding('mode-buttons');
modes.forEach(function(mode) {
keybinding.on(mode.key, function() {
+42 -49
View File
@@ -5,8 +5,6 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { actionChangePreset } from '../actions/index';
import { operationDelete } from '../operations/index';
@@ -14,19 +12,19 @@ import { modeBrowse } from '../modes/index';
import { svgIcon } from '../svg/index';
import { uiPresetIcon } from './preset_icon';
import { uiTagReference } from './tag_reference';
import { utilNoAuto, utilRebind } from '../util';
import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
export function uiPresetList(context) {
var dispatch = d3_dispatch('choose'),
id,
currentPreset,
autofocus = false;
var dispatch = d3_dispatch('choose');
var _entityID;
var _currentPreset;
var _autofocus = false;
function presetList(selection) {
var entity = context.entity(id),
geometry = context.geometry(id);
var entity = context.entity(_entityID);
var geometry = context.geometry(_entityID);
// Treat entities on addr:interpolation lines as points, not vertices (#3241)
if (geometry === 'vertex' && entity.isOnAddressLine(context.graph())) {
@@ -45,11 +43,11 @@ export function uiPresetList(context) {
.append('h3')
.text(t('inspector.choose'));
if (context.entity(id).isUsed(context.graph())) {
if (context.entity(_entityID).isUsed(context.graph())) {
messagewrap
.append('button')
.attr('class', 'preset-choose')
.on('click', function() { dispatch.call('choose', this, currentPreset); })
.on('click', function() { dispatch.call('choose', this, _currentPreset); })
.call(svgIcon((textDirection === 'rtl') ? '#iD-icon-backward' : '#iD-icon-forward'));
} else {
messagewrap
@@ -64,16 +62,16 @@ export function uiPresetList(context) {
function initialKeydown() {
// hack to let delete shortcut work when search is autofocused
if (search.property('value').length === 0 &&
(d3_event.keyCode === d3_keybinding.keyCodes['⌫'] ||
d3_event.keyCode === d3_keybinding.keyCodes['⌦'])) {
(d3_event.keyCode === utilKeybinding.keyCodes['⌫'] ||
d3_event.keyCode === utilKeybinding.keyCodes['⌦'])) {
d3_event.preventDefault();
d3_event.stopPropagation();
operationDelete([id], context)();
operationDelete([_entityID], context)();
// hack to let undo work when search is autofocused
} else if (search.property('value').length === 0 &&
(d3_event.ctrlKey || d3_event.metaKey) &&
d3_event.keyCode === d3_keybinding.keyCodes.z) {
d3_event.keyCode === utilKeybinding.keyCodes.z) {
d3_event.preventDefault();
d3_event.stopPropagation();
context.undo();
@@ -86,7 +84,7 @@ export function uiPresetList(context) {
function keydown() {
// down arrow
if (d3_event.keyCode === d3_keybinding.keyCodes['↓'] &&
if (d3_event.keyCode === utilKeybinding.keyCodes['↓'] &&
// if insertion point is at the end of the string
search.node().selectionStart === search.property('value').length) {
d3_event.preventDefault();
@@ -137,7 +135,7 @@ export function uiPresetList(context) {
searchWrap
.call(svgIcon('#iD-icon-search', 'pre-text'));
if (autofocus) {
if (_autofocus) {
search.node().focus();
}
@@ -168,7 +166,7 @@ export function uiPresetList(context) {
items.enter()
.append('div')
.attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); })
.classed('current', function(item) { return item.preset === currentPreset; })
.classed('current', function(item) { return item.preset === _currentPreset; })
.each(function(item) { d3_select(this).call(item); })
.style('opacity', 0)
.transition()
@@ -181,7 +179,7 @@ export function uiPresetList(context) {
var parentItem = d3_select(item.node().parentElement.closest('.preset-list-item'));
// arrow down, move focus to the next, lower item
if (d3_event.keyCode === d3_keybinding.keyCodes['↓']) {
if (d3_event.keyCode === utilKeybinding.keyCodes['↓']) {
d3_event.preventDefault();
d3_event.stopPropagation();
// the next item in the list at the same level
@@ -205,7 +203,7 @@ export function uiPresetList(context) {
}
// arrow up, move focus to the previous, higher item
} else if (d3_event.keyCode === d3_keybinding.keyCodes['↑']) {
} else if (d3_event.keyCode === utilKeybinding.keyCodes['↑']) {
d3_event.preventDefault();
d3_event.stopPropagation();
// the previous item in the list at the same level
@@ -215,8 +213,7 @@ export function uiPresetList(context) {
if (previousItem.empty()) {
// if there is a parent item
if (!parentItem.empty()) {
// the item is the first subitem of a sublist,
// select the parent item
// the item is the first subitem of a sublist select the parent item
previousItem = parentItem;
}
// if the previous item is expanded
@@ -224,29 +221,27 @@ export function uiPresetList(context) {
// select the last subitem of the sublist of the previous item
previousItem = previousItem.select('.subgrid .preset-list-item:last-child');
}
if (!previousItem.empty()) {
// focus on the previous item
previousItem.select('.preset-list-button').node().focus();
}
else {
} else {
// the focus is at the top of the list, move focus back to the search field
var search = d3_select(this.closest('.preset-list-pane')).select('.preset-search-input');
search.node().focus();
}
}
// arrow left, move focus to the parent item if there is one
else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
} else if (d3_event.keyCode === utilKeybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
d3_event.preventDefault();
d3_event.stopPropagation();
// if there is a parent item
// if there is a parent item, focus on the parent item
if (!parentItem.empty()) {
// focus on the parent item
parentItem.select('.preset-list-button').node().focus();
}
}
// arrow right, choose this item
else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
} else if (d3_event.keyCode === utilKeybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
d3_event.preventDefault();
d3_event.stopPropagation();
item.datum().choose();
@@ -277,12 +272,12 @@ export function uiPresetList(context) {
.attr('class', 'preset-list-button')
.classed('expanded', false)
.call(uiPresetIcon()
.geometry(context.geometry(id))
.geometry(context.geometry(_entityID))
.preset(preset))
.on('click', click)
.on('keydown', function() {
// right arrow, expand the focused item
if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
if (d3_event.keyCode === utilKeybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
d3_event.preventDefault();
d3_event.stopPropagation();
// if the item isn't expanded
@@ -291,7 +286,7 @@ export function uiPresetList(context) {
click.call(this);
}
// left arrow, collapse the focused item
} else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
} else if (d3_event.keyCode === utilKeybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
d3_event.preventDefault();
d3_event.stopPropagation();
// if the item is expanded
@@ -348,7 +343,6 @@ export function uiPresetList(context) {
};
item.preset = preset;
return item;
}
@@ -361,7 +355,7 @@ export function uiPresetList(context) {
wrap.append('button')
.attr('class', 'preset-list-button')
.call(uiPresetIcon()
.geometry(context.geometry(id))
.geometry(context.geometry(_entityID))
.preset(preset))
.on('click', item.choose)
.on('keydown', itemKeydown)
@@ -375,9 +369,8 @@ export function uiPresetList(context) {
item.choose = function() {
context.presets().choose(preset);
context.perform(
actionChangePreset(id, currentPreset, preset),
actionChangePreset(_entityID, _currentPreset, preset),
t('operations.change_tags.annotation')
);
@@ -390,30 +383,30 @@ export function uiPresetList(context) {
};
item.preset = preset;
item.reference = uiTagReference(preset.reference(context.geometry(id)), context);
item.reference = uiTagReference(preset.reference(context.geometry(_entityID)), context);
return item;
}
presetList.autofocus = function(_) {
if (!arguments.length) return autofocus;
autofocus = _;
presetList.autofocus = function(val) {
if (!arguments.length) return _autofocus;
_autofocus = val;
return presetList;
};
presetList.entityID = function(_) {
if (!arguments.length) return id;
id = _;
presetList.preset(context.presets().match(context.entity(id), context.graph()));
presetList.entityID = function(val) {
if (!arguments.length) return _entityID;
_entityID = val;
presetList.preset(context.presets().match(context.entity(_entityID), context.graph()));
return presetList;
};
presetList.preset = function(_) {
if (!arguments.length) return currentPreset;
currentPreset = _;
presetList.preset = function(val) {
if (!arguments.length) return _currentPreset;
_currentPreset = val;
return presetList;
};
+2 -3
View File
@@ -5,13 +5,12 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { modeSave } from '../modes';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiTooltipHtml } from './tooltipHtml';
import { utilKeybinding } from '../util';
import { tooltip } from '../util/tooltip';
@@ -101,7 +100,7 @@ export function uiSave(context) {
updateCount();
var keybinding = d3_keybinding('uiSave')
var keybinding = utilKeybinding('uiSave')
.on(key, save, true);
d3_select(document)
+19 -20
View File
@@ -3,33 +3,32 @@ import {
selectAll as d3_selectAll
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { dataShortcuts } from '../../data';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiModal } from './modal';
import { utilKeybinding } from '../util';
import { utilDetect } from '../util/detect';
export function uiShortcuts() {
var detected = utilDetect();
var activeTab = 0;
var modalSelection;
var savedSelection;
var _activeTab = 0;
var _modalSelection;
var _selection = d3_select(null);
var keybinding = d3_keybinding('shortcuts')
var keybinding = utilKeybinding('shortcuts')
.on(t('shortcuts.toggle.key'), function () {
if (d3_selectAll('.modal-shortcuts').size()) { // already showing
if (modalSelection) {
modalSelection.close();
modalSelection = null;
if (_modalSelection) {
_modalSelection.close();
_modalSelection = null;
}
} else {
modalSelection = uiModal(savedSelection);
shortcutsModal(modalSelection);
_modalSelection = uiModal(_selection);
shortcutsModal(_modalSelection);
}
});
@@ -38,11 +37,11 @@ export function uiShortcuts() {
function shortcutsModal(modalSelection) {
modalSelection.select('.modal')
function shortcutsModal(_modalSelection) {
_modalSelection.select('.modal')
.classed('modal-shortcuts', true);
var shortcutsModal = modalSelection.select('.content');
var shortcutsModal = _modalSelection.select('.content');
shortcutsModal
.append('div')
@@ -84,7 +83,7 @@ export function uiShortcuts() {
.append('div')
.attr('class', 'tab')
.on('click', function (d, i) {
activeTab = i;
_activeTab = i;
render(selection);
});
@@ -98,7 +97,7 @@ export function uiShortcuts() {
// Update
wrapper.selectAll('.tab')
.classed('active', function (d, i) {
return i === activeTab;
return i === _activeTab;
});
@@ -246,16 +245,16 @@ export function uiShortcuts() {
// Update
wrapper.selectAll('.shortcut-tab')
.style('display', function (d, i) {
return i === activeTab ? 'flex' : 'none';
return i === _activeTab ? 'flex' : 'none';
});
}
return function(selection, show) {
savedSelection = selection;
_selection = selection;
if (show) {
modalSelection = uiModal(selection);
shortcutsModal(modalSelection);
_modalSelection = uiModal(selection);
shortcutsModal(_modalSelection);
}
};
}
+2 -3
View File
@@ -5,12 +5,11 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiTooltipHtml } from './tooltipHtml';
import { utilKeybinding } from '../util';
import { tooltip } from '../util/tooltip';
@@ -65,7 +64,7 @@ export function uiUndoRedo(context) {
.call(svgIcon('#iD-icon-' + iconName));
});
var keybinding = d3_keybinding('undo')
var keybinding = utilKeybinding('undo')
.on(commands[0].cmd, function() { d3_event.preventDefault(); commands[0].action(); })
.on(commands[1].cmd, function() { d3_event.preventDefault(); commands[1].action(); });
+2 -3
View File
@@ -3,12 +3,11 @@ import {
select as d3_select
} from 'd3-selection';
import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { svgIcon } from '../svg';
import { uiCmd } from './cmd';
import { uiTooltipHtml } from './tooltipHtml';
import { utilKeybinding } from '../util';
import { tooltip } from '../util/tooltip';
@@ -73,7 +72,7 @@ export function uiZoom(context) {
.call(svgIcon('#iD-icon-' + d.icon, 'light'));
});
var keybinding = d3_keybinding('zoom');
var keybinding = utilKeybinding('zoom');
['plus', 'ffplus', '=', 'ffequals'].forEach(function(key) {
keybinding.on([key], zoomIn);