From 3d1362070521a4942da696da76436376311827d3 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 26 Sep 2017 11:22:43 -0400 Subject: [PATCH] Convert lodah-es and d3 to named imports for ui --- modules/ui/account.js | 7 +- modules/ui/attribution.js | 12 ++-- modules/ui/background.js | 102 ++++++++++++++++------------ modules/ui/changeset_editor.js | 14 ++-- modules/ui/cmd.js | 1 + modules/ui/commit.js | 30 ++++---- modules/ui/commit_changes.js | 5 +- modules/ui/conflicts.js | 20 ++++-- modules/ui/contributors.js | 14 ++-- modules/ui/curtain.js | 26 ++++--- modules/ui/disclosure.js | 5 +- modules/ui/edit_menu.js | 14 ++-- modules/ui/entity_editor.js | 41 +++++++---- modules/ui/feature_info.js | 21 +++--- modules/ui/feature_list.js | 12 ++-- modules/ui/field.js | 37 ++++++---- modules/ui/flash.js | 16 +++-- modules/ui/form_fields.js | 9 +-- modules/ui/full_screen.js | 15 ++-- modules/ui/geolocate.js | 6 +- modules/ui/help.js | 19 ++++-- modules/ui/info.js | 25 ++++--- modules/ui/init.js | 21 +++--- modules/ui/inspector.js | 7 +- modules/ui/lasso.js | 6 +- modules/ui/loading.js | 1 + modules/ui/map_data.js | 56 ++++++++------- modules/ui/map_in_map.js | 52 ++++++++------ modules/ui/modal.js | 17 +++-- modules/ui/modes.js | 19 +++--- modules/ui/notice.js | 5 +- modules/ui/preset_editor.js | 12 +++- modules/ui/preset_icon.js | 11 +-- modules/ui/preset_list.js | 45 ++++++------ modules/ui/radial_menu.js | 14 ++-- modules/ui/raw_member_editor.js | 25 ++++--- modules/ui/raw_membership_editor.js | 50 ++++++++------ modules/ui/raw_tag_editor.js | 42 ++++++++---- modules/ui/save.js | 25 ++++--- modules/ui/scale.js | 2 +- modules/ui/selection_list.js | 13 ++-- modules/ui/shortcuts.js | 20 +++--- modules/ui/sidebar.js | 4 +- modules/ui/source_switch.js | 14 ++-- modules/ui/splash.js | 2 +- modules/ui/status.js | 7 +- modules/ui/success.js | 22 +++--- modules/ui/tag_reference.js | 32 +++++---- modules/ui/toggle.js | 5 +- modules/ui/tooltipHtml.js | 1 + modules/ui/undo_redo.js | 28 +++++--- modules/ui/version.js | 3 +- modules/ui/view_on_osm.js | 2 +- modules/ui/zoom.js | 30 ++++---- 54 files changed, 621 insertions(+), 423 deletions(-) diff --git a/modules/ui/account.js b/modules/ui/account.js index ec8811ee2..adbd8990a 100644 --- a/modules/ui/account.js +++ b/modules/ui/account.js @@ -1,6 +1,7 @@ -import * as d3 from 'd3'; +import { event as d3_event } from 'd3-selection'; + import { t } from '../util/locale'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; export function uiAccount(context) { @@ -53,7 +54,7 @@ export function uiAccount(context) { .attr('href', '#') .text(t('logout')) .on('click.logout', function() { - d3.event.preventDefault(); + d3_event.preventDefault(); osm.logout(); }); }); diff --git a/modules/ui/attribution.js b/modules/ui/attribution.js index ec0ac468e..23d473b65 100644 --- a/modules/ui/attribution.js +++ b/modules/ui/attribution.js @@ -1,5 +1,5 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _throttle from 'lodash-es/throttle'; +import { select as d3_select } from 'd3-selection'; import { t } from '../util/locale'; @@ -28,19 +28,19 @@ export function uiAttribution(context) { .attr('class', 'attribution') .each(function(d) { if (d.terms_html) { - d3.select(this) + d3_select(this) .html(d.terms_html); return; } var selection; if (d.terms_url) { - selection = d3.select(this) + selection = d3_select(this) .append('a') .attr('href', d.terms_url) .attr('target', '_blank'); } else { - selection = d3.select(this); + selection = d3_select(this); } @@ -98,7 +98,7 @@ export function uiAttribution(context) { .on('change.attribution', update); context.map() - .on('move.attribution', _.throttle(update, 400, {leading: false})); + .on('move.attribution', _throttle(update, 400, {leading: false})); update(); }; diff --git a/modules/ui/background.js b/modules/ui/background.js index 419931fe0..c7ada03d9 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -1,11 +1,23 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import _debounce from 'lodash-es/debounce'; + +import { + descending as d3_descending, + ascending as d3_ascending +} from 'd3-array'; + +import { + event as d3_event, + select as d3_select, + selectAll as d3_selectAll +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + import { t, textDirection } from '../util/locale'; -import { geoMetersToOffset, geoOffsetToMeters } from '../geo/index'; +import { geoMetersToOffset, geoOffsetToMeters } from '../geo'; import { utilDetect } from '../util/detect'; -import { utilSetTransform, utilCallWhenIdle } from '../util/index'; -import { svgIcon } from '../svg/index'; +import { utilSetTransform, utilCallWhenIdle } from '../util'; +import { svgIcon } from '../svg'; import { uiMapInMap } from './map_in_map'; import { uiCmd } from './cmd'; import { uiTooltipHtml } from './tooltipHtml'; @@ -35,7 +47,7 @@ export function uiBackground(context) { function sortSources(a, b) { return a.best() && !b.best() ? -1 : b.best() && !a.best() ? 1 - : d3.descending(a.area(), b.area()) || d3.ascending(a.name(), b.name()) || 0; + : d3_descending(a.area(), b.area()) || d3_ascending(a.name(), b.name()) || 0; } @@ -58,7 +70,7 @@ export function uiBackground(context) { function setTooltips(selection) { selection.each(function(d, i, nodes) { - var item = d3.select(this).select('label'), + var item = d3_select(this).select('label'), span = item.select('span'), placement = (i < nodes.length / 2) ? 'bottom' : 'top', description = d.description(), @@ -104,7 +116,7 @@ export function uiBackground(context) { return editCustom(); } - d3.event.preventDefault(); + d3_event.preventDefault(); previous = context.background().baseLayerSource(); context.background().baseLayerSource(d); selectLayer(); @@ -113,7 +125,7 @@ export function uiBackground(context) { function editCustom() { - d3.event.preventDefault(); + d3_event.preventDefault(); var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; var template = window.prompt( t('background.custom_prompt', { example: example }), @@ -131,7 +143,7 @@ export function uiBackground(context) { function clickSetOverlay(d) { - d3.event.preventDefault(); + d3_event.preventDefault(); context.background().toggleOverlayLayer(d); selectLayer(); document.activeElement.blur(); @@ -207,12 +219,12 @@ export function uiBackground(context) { x = +meters[0].toFixed(2), y = +meters[1].toFixed(2); - d3.selectAll('.nudge-inner-rect') + d3_selectAll('.nudge-inner-rect') .select('input') .classed('error', false) .property('value', x + ', ' + y); - d3.selectAll('.nudge-reset') + d3_selectAll('.nudge-reset') .classed('disabled', function() { return (x === 0 && y === 0); }); @@ -220,7 +232,7 @@ export function uiBackground(context) { function resetOffset() { - if (d3.event.button !== 0) return; + if (d3_event.button !== 0) return; context.background().offset([0, 0]); updateOffsetVal(); } @@ -233,7 +245,7 @@ export function uiBackground(context) { function buttonOffset(d) { - if (d3.event.button !== 0) return; + if (d3_event.button !== 0) return; var timeout = window.setTimeout(function() { interval = window.setInterval(nudge.bind(null, d), 100); }, 500), @@ -242,12 +254,12 @@ export function uiBackground(context) { function doneNudge() { window.clearTimeout(timeout); window.clearInterval(interval); - d3.select(window) + d3_select(window) .on('mouseup.buttonoffset', null, true) .on('mousedown.buttonoffset', null, true); } - d3.select(window) + d3_select(window) .on('mouseup.buttonoffset', doneNudge, true) .on('mousedown.buttonoffset', doneNudge, true); @@ -256,8 +268,8 @@ export function uiBackground(context) { function inputOffset() { - if (d3.event.button !== 0) return; - var input = d3.select(this); + if (d3_event.button !== 0) return; + var input = d3_select(this); var d = input.node().value; if (d === '') return resetOffset(); @@ -278,16 +290,16 @@ export function uiBackground(context) { function dragOffset() { - if (d3.event.button !== 0) return; - var origin = [d3.event.clientX, d3.event.clientY]; + if (d3_event.button !== 0) return; + var origin = [d3_event.clientX, d3_event.clientY]; context.container() .append('div') .attr('class', 'nudge-surface'); - d3.select(window) + d3_select(window) .on('mousemove.offset', function() { - var latest = [d3.event.clientX, d3.event.clientY]; + var latest = [d3_event.clientX, d3_event.clientY]; var d = [ -(origin[0] - latest[0]) / 4, -(origin[1] - latest[1]) / 4 @@ -297,16 +309,16 @@ export function uiBackground(context) { nudge(d); }) .on('mouseup.offset', function() { - if (d3.event.button !== 0) return; - d3.selectAll('.nudge-surface') + if (d3_event.button !== 0) return; + d3_selectAll('.nudge-surface') .remove(); - d3.select(window) + d3_select(window) .on('mousemove.offset', null) .on('mouseup.offset', null); }); - d3.event.preventDefault(); + d3_event.preventDefault(); } @@ -316,8 +328,8 @@ export function uiBackground(context) { function toggle() { - if (d3.event) { - d3.event.preventDefault(); + if (d3_event) { + d3_event.preventDefault(); } tooltipBehavior.hide(button); setVisible(!button.classed('active')); @@ -325,9 +337,9 @@ export function uiBackground(context) { function quickSwitch() { - if (d3.event) { - d3.event.stopImmediatePropagation(); - d3.event.preventDefault(); + if (d3_event) { + d3_event.stopImmediatePropagation(); + d3_event.preventDefault(); } if (previous) { clickSetSource(previous); @@ -343,7 +355,7 @@ export function uiBackground(context) { if (show) { selection .on('mousedown.background-inside', function() { - d3.event.stopPropagation(); + d3_event.stopPropagation(); }); content @@ -364,7 +376,7 @@ export function uiBackground(context) { .duration(200) .style('right', '-300px') .on('end', function() { - d3.select(this).style('display', 'none'); + d3_select(this).style('display', 'none'); }); selection @@ -466,7 +478,7 @@ export function uiBackground(context) { .attr('type', 'checkbox') .on('change', function() { uiMapInMap.toggle(); - d3.event.preventDefault(); + d3_event.preventDefault(); }); minimapLabel @@ -487,11 +499,11 @@ export function uiBackground(context) { .classed('hide-toggle', true) .classed('expanded', false) .on('click', function() { - if (d3.event.button !== 0) return; - var exp = d3.select(this).classed('expanded'); + if (d3_event.button !== 0) return; + var exp = d3_select(this).classed('expanded'); nudgeContainer.style('display', exp ? 'none' : 'block'); - d3.select(this).classed('expanded', !exp); - d3.event.preventDefault(); + d3_select(this).classed('expanded', !exp); + d3_event.preventDefault(); }); var nudgeContainer = adjustments @@ -515,8 +527,8 @@ export function uiBackground(context) { .append('input') .on('change', inputOffset) .on('mousedown', function() { - if (d3.event.button !== 0) return; - d3.event.stopPropagation(); + if (d3_event.button !== 0) return; + d3_event.stopPropagation(); }); nudgeContainer @@ -526,7 +538,7 @@ export function uiBackground(context) { .append('button') .attr('class', function(d) { return d[0] + ' nudge'; }) .on('mousedown', function(d) { - if (d3.event.button !== 0) return; + if (d3_event.button !== 0) return; buttonOffset(d[1]); }); @@ -540,7 +552,7 @@ export function uiBackground(context) { ); context.map() - .on('move.background-update', _.debounce(utilCallWhenIdle(update), 1000)); + .on('move.background-update', _debounce(utilCallWhenIdle(update), 1000)); context.background() .on('change.background-update', update); @@ -549,12 +561,12 @@ export function uiBackground(context) { update(); setOpacity(opacityDefault); - var keybinding = d3keybinding('background') + var keybinding = d3_keybinding('background') .on(key, toggle) .on(uiCmd('⌘' + key), quickSwitch) .on([t('map_data.key'), t('help.key')], hide); - d3.select(document) + d3_select(document) .call(keybinding); context.surface().on('mousedown.background-outside', hide); diff --git a/modules/ui/changeset_editor.js b/modules/ui/changeset_editor.js index f04b47e3d..c6d4572b7 100644 --- a/modules/ui/changeset_editor.js +++ b/modules/ui/changeset_editor.js @@ -1,6 +1,8 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3combobox } from '../lib/d3.combobox.js'; +import _uniqBy from 'lodash-es/uniqBy'; + +import { dispatch as d3_dispatch } from 'd3-dispatch'; +import { d3combobox as d3_combobox } from '../lib/d3.combobox.js'; + import { t } from '../util/locale'; import { svgIcon } from '../svg'; import { uiField } from './field'; @@ -9,7 +11,7 @@ import { utilRebind, utilTriggerEvent } from '../util'; export function uiChangesetEditor(context) { - var dispatch = d3.dispatch('change'), + var dispatch = d3_dispatch('change'), formFields = uiFormFields(context), fieldsArr, tags, @@ -79,10 +81,10 @@ export function uiChangesetEditor(context) { }); commentField - .call(d3combobox() + .call(d3_combobox() .container(context.container()) .caseSensitive(true) - .data(_.uniqBy(comments, 'title')) + .data(_uniqBy(comments, 'title')) ); }); } diff --git a/modules/ui/cmd.js b/modules/ui/cmd.js index a18b0f10c..c704731ee 100644 --- a/modules/ui/cmd.js +++ b/modules/ui/cmd.js @@ -1,6 +1,7 @@ import { t } from '../util/locale'; import { utilDetect } from '../util/detect'; + // Translate a MacOS key command into the appropriate Windows/Linux equivalent. // For example, ⌘Z -> Ctrl+Z export var uiCmd = function (code) { diff --git a/modules/ui/commit.js b/modules/ui/commit.js index 4dbfef0ed..0c0b8c78c 100644 --- a/modules/ui/commit.js +++ b/modules/ui/commit.js @@ -1,5 +1,11 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _clone from 'lodash-es/clone'; +import _forEach from 'lodash-es/forEach'; +import _isEqual from 'lodash-es/isEqual'; +import _unionBy from 'lodash-es/unionBy'; + +import { dispatch as d3_dispatch } from 'd3-dispatch'; +import { select as d3_select } from 'd3-selection'; + import { t } from '../util/locale'; import { osmChangeset } from '../osm'; import { uiChangesetEditor } from './changeset_editor'; @@ -22,7 +28,7 @@ var readOnlyTags = [ export function uiCommit(context) { - var dispatch = d3.dispatch('cancel', 'save'), + var dispatch = d3_dispatch('cancel', 'save'), userDetails, _selection; @@ -72,7 +78,7 @@ export function uiCommit(context) { changeset = new osmChangeset({ tags: tags }); } - tags = _.clone(changeset.tags); + tags = _clone(changeset.tags); var header = selection.selectAll('.header') .data([0]); @@ -133,7 +139,7 @@ export function uiCommit(context) { osm.userDetails(function(err, user) { if (err) return; - var userLink = d3.select(document.createElement('div')); + var userLink = d3_select(document.createElement('div')); userDetails = user; @@ -222,7 +228,7 @@ export function uiCommit(context) { buttonSection.selectAll('.save-button') .attr('disabled', function() { - var n = d3.select('#preset-input-comment').node(); + var n = d3_select('#preset-input-comment').node(); return (n && n.value.length) ? null : true; }) .on('click.save', function() { @@ -244,7 +250,7 @@ export function uiCommit(context) { .call(rawTagEditor .expanded(expanded) .readOnlyTags(readOnlyTags) - .tags(_.clone(changeset.tags)) + .tags(_clone(changeset.tags)) ); @@ -262,7 +268,7 @@ export function uiCommit(context) { .call(rawTagEditor .expanded(expanded) .readOnlyTags(readOnlyTags) - .tags(_.clone(changeset.tags)) + .tags(_clone(changeset.tags)) ); } } @@ -295,7 +301,7 @@ export function uiCommit(context) { context.storage('hashtags', null); // always remove stored hashtags - #4304 if (commentOnly) { inHashTags = null; } // optionally override hashtags field } - return _.unionBy(inComment, inHashTags, function (s) { + return _unionBy(inComment, inHashTags, function (s) { return s.toLowerCase(); }); @@ -329,9 +335,9 @@ export function uiCommit(context) { function updateChangeset(changed, onInput) { - var tags = _.clone(changeset.tags); + var tags = _clone(changeset.tags); - _.forEach(changed, function(v, k) { + _forEach(changed, function(v, k) { k = k.trim().substr(0, 255); if (readOnlyTags.indexOf(k) !== -1) return; @@ -386,7 +392,7 @@ export function uiCommit(context) { delete tags.changesets_count; } - if (!_.isEqual(changeset.tags, tags)) { + if (!_isEqual(changeset.tags, tags)) { changeset = changeset.update({ tags: tags }); } } diff --git a/modules/ui/commit_changes.js b/modules/ui/commit_changes.js index c33c1bddb..321d643bc 100644 --- a/modules/ui/commit_changes.js +++ b/modules/ui/commit_changes.js @@ -1,4 +1,5 @@ -import * as d3 from 'd3'; +import { select as d3_select } from 'd3-selection'; + import { t } from '../util/locale'; import { JXON } from '../util/jxon'; import { actionDiscardTags } from '../actions'; @@ -50,7 +51,7 @@ export function uiCommitChanges(context) { itemsEnter .each(function(d) { - d3.select(this) + d3_select(this) .call(svgIcon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType)); }); diff --git a/modules/ui/conflicts.js b/modules/ui/conflicts.js index ca89b9980..2cfe3448e 100644 --- a/modules/ui/conflicts.js +++ b/modules/ui/conflicts.js @@ -1,4 +1,10 @@ -import * as d3 from 'd3'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { t } from '../util/locale'; import { JXON } from '../util/jxon'; import { geoExtent } from '../geo'; @@ -10,7 +16,7 @@ import { utilRebind } from '../util/rebind'; export function uiConflicts(context) { - var dispatch = d3.dispatch('cancel', 'save'), + var dispatch = d3_dispatch('cancel', 'save'), origChanges, conflictList; @@ -109,7 +115,7 @@ export function uiConflicts(context) { function showConflict(selection, index) { if (index < 0 || index >= conflictList.length) return; - var parent = d3.select(selection.node().parentNode); + var parent = d3_select(selection.node().parentNode); // enable save button if this is the last conflict being reviewed.. if (index === conflictList.length - 1) { @@ -144,7 +150,7 @@ export function uiConflicts(context) { .text(function(d) { return d.name; }) .on('click', function(d) { zoomToEntity(d.id); - d3.event.preventDefault(); + d3_event.preventDefault(); }); var details = enter @@ -190,7 +196,7 @@ export function uiConflicts(context) { container .call(showConflict, index + sign); - d3.event.preventDefault(); + d3_event.preventDefault(); }); item.exit() @@ -235,9 +241,9 @@ export function uiConflicts(context) { function choose(ul, datum) { - if (d3.event) d3.event.preventDefault(); + if (d3_event) d3_event.preventDefault(); - d3.select(ul) + d3_select(ul) .selectAll('li') .classed('active', function(d) { return d === datum; }) .selectAll('input') diff --git a/modules/ui/contributors.js b/modules/ui/contributors.js index 2a07a5b87..9aa00ea96 100644 --- a/modules/ui/contributors.js +++ b/modules/ui/contributors.js @@ -1,15 +1,17 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _debounce from 'lodash-es/debounce'; + +import { select as d3_select } from 'd3-selection'; + import { t } from '../util/locale'; import { svgIcon } from '../svg/index'; export function uiContributors(context) { var osm = context.connection(), - debouncedUpdate = _.debounce(function() { update(); }, 1000), + debouncedUpdate = _debounce(function() { update(); }, 1000), limit = 4, hidden = false, - wrap = d3.select(null); + wrap = d3_select(null); function update() { @@ -28,7 +30,7 @@ export function uiContributors(context) { wrap.html('') .call(svgIcon('#icon-nearby', 'pre-text light')); - var userList = d3.select(document.createElement('span')); + var userList = d3_select(document.createElement('span')); userList.selectAll() .data(subset) @@ -41,7 +43,7 @@ export function uiContributors(context) { .text(String); if (u.length > limit) { - var count = d3.select(document.createElement('span')); + var count = d3_select(document.createElement('span')); count.append('a') .attr('target', '_blank') diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js index d8e64e8db..ba671bfdd 100644 --- a/modules/ui/curtain.js +++ b/modules/ui/curtain.js @@ -1,4 +1,10 @@ -import * as d3 from 'd3'; +import { easeLinear as d3_easeLinear } from 'd3-ease'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { textDirection } from '../util/locale'; import { uiToggle } from './toggle'; @@ -6,9 +12,9 @@ import { uiToggle } from './toggle'; // Tooltips and svg mask used to highlight certain features export function uiCurtain() { - var surface = d3.select(null), - tooltip = d3.select(null), - darkness = d3.select(null); + var surface = d3_select(null), + tooltip = d3_select(null), + darkness = d3_select(null); function curtain(selection) { surface = selection @@ -25,7 +31,7 @@ export function uiCurtain() { .attr('y', 0) .attr('class', 'curtain-darkness'); - d3.select(window).on('resize.curtain', resize); + d3_select(window).on('resize.curtain', resize); tooltip = selection.append('div') .attr('class', 'tooltip') @@ -66,7 +72,7 @@ export function uiCurtain() { */ curtain.reveal = function(box, text, options) { if (typeof box === 'string') { - box = d3.select(box).node(); + box = d3_select(box).node(); } if (box && box.getBoundingClientRect) { box = copyBox(box.getBoundingClientRect()); @@ -78,7 +84,7 @@ export function uiCurtain() { if (options.tooltipBox) { tooltipBox = options.tooltipBox; if (typeof tooltipBox === 'string') { - tooltipBox = d3.select(tooltipBox).node(); + tooltipBox = d3_select(tooltipBox).node(); } if (tooltipBox && tooltipBox.getBoundingClientRect) { tooltipBox = copyBox(tooltipBox.getBoundingClientRect()); @@ -113,7 +119,7 @@ export function uiCurtain() { var button = tooltip.selectAll('.button-section .button.action'); button .on('click', function() { - d3.event.preventDefault(); + d3_event.preventDefault(); options.buttonCallback(); }); } @@ -231,7 +237,7 @@ export function uiCurtain() { selection = darkness .transition() .duration(duration || 600) - .ease(d3.easeLinear); + .ease(d3_easeLinear); } selection @@ -254,7 +260,7 @@ export function uiCurtain() { curtain.remove = function() { surface.remove(); tooltip.remove(); - d3.select(window).on('resize.curtain', null); + d3_select(window).on('resize.curtain', null); }; diff --git a/modules/ui/disclosure.js b/modules/ui/disclosure.js index ec38211ba..82ee9f0b4 100644 --- a/modules/ui/disclosure.js +++ b/modules/ui/disclosure.js @@ -1,10 +1,11 @@ -import * as d3 from 'd3'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + import { utilRebind } from '../util/rebind'; import { uiToggle } from './toggle'; export function uiDisclosure() { - var dispatch = d3.dispatch('toggled'), + var dispatch = d3_dispatch('toggled'), title, expanded = false, content = function () {}; diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js index 490c4bf69..b0856c56f 100644 --- a/modules/ui/edit_menu.js +++ b/modules/ui/edit_menu.js @@ -1,5 +1,9 @@ -import * as d3 from 'd3'; -import { geoRoundCoords } from '../geo/index'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { geoRoundCoords } from '../geo'; import { textDirection } from '../util/locale'; import { uiTooltipHtml } from './tooltipHtml'; @@ -102,20 +106,20 @@ export function uiEditMenu(context, operations) { }) .attr('xlink:href', function (d) { return '#operation-' + d.id; }); - tooltip = d3.select(document.body) + tooltip = d3_select(document.body) .append('div') .attr('class', 'tooltip-inner edit-menu-tooltip'); function click(operation) { - d3.event.stopPropagation(); + d3_event.stopPropagation(); if (operation.disabled()) return; operation(); editMenu.close(); } function mousedown() { - d3.event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 + d3_event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 } function mouseover(d, i) { diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js index 9bd0a4296..8e7127a8a 100644 --- a/modules/ui/entity_editor.js +++ b/modules/ui/entity_editor.js @@ -1,10 +1,21 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _clone from 'lodash-es/clone'; +import _forEach from 'lodash-es/forEach'; +import _isEmpty from 'lodash-es/isEmpty'; +import _isEqual from 'lodash-es/isEqual'; +import _some from 'lodash-es/some'; + +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + selectAll as d3_selectAll +} from 'd3-selection'; + import { t, textDirection } from '../util/locale'; import { tooltip } from '../util/tooltip'; -import { actionChangeTags } from '../actions/index'; -import { modeBrowse } from '../modes/index'; -import { svgIcon } from '../svg/index'; +import { actionChangeTags } from '../actions'; +import { modeBrowse } from '../modes'; +import { svgIcon } from '../svg'; import { uiPresetIcon } from './preset_icon'; import { uiRawMemberEditor } from './raw_member_editor'; import { uiRawMembershipEditor } from './raw_membership_editor'; @@ -15,7 +26,7 @@ import { utilRebind } from '../util'; export function uiEntityEditor(context) { - var dispatch = d3.dispatch('choose'), + var dispatch = d3_dispatch('choose'), state = 'select', coalesceChanges = false, modified = false, @@ -32,7 +43,7 @@ export function uiEntityEditor(context) { function entityEditor(selection) { var entity = context.entity(entityId), - tags = _.clone(entity.tags); + tags = _clone(entity.tags); // Header var header = selection.selectAll('.header') @@ -170,8 +181,8 @@ export function uiEntityEditor(context) { .on('keydown.key-trap', function() { // On tabbing, send focus back to the first field on the inspector-body // (probably the `name` field) #4159 - if (d3.event.keyCode === 9 && !d3.event.shiftKey) { - d3.event.preventDefault(); + if (d3_event.keyCode === 9 && !d3_event.shiftKey) { + d3_event.preventDefault(); body.select('input').node().focus(); } }); @@ -189,7 +200,7 @@ export function uiEntityEditor(context) { var match = context.presets().match(entity, graph); var activePreset = entityEditor.preset(); - var weakPreset = activePreset && _.isEmpty(activePreset.addTags); + var weakPreset = activePreset && _isEmpty(activePreset.addTags); // A "weak" preset doesn't set any tags. (e.g. "Address") // Don't replace a weak preset with a fallback preset (e.g. "Point") @@ -210,7 +221,7 @@ export function uiEntityEditor(context) { } var blacklist = ['description', 'note', 'fixme']; - if (_.some(blacklist, function(s) { return k.indexOf(s) !== -1; })) return v; + if (_some(blacklist, function(s) { return k.indexOf(s) !== -1; })) return v; var cleaned = v.split(';') .map(function(s) { return s.trim(); }) @@ -245,9 +256,9 @@ export function uiEntityEditor(context) { function changeTags(changed, onInput) { var entity = context.entity(entityId), annotation = t('operations.change_tags.annotation'), - tags = _.clone(entity.tags); + tags = _clone(entity.tags); - _.forEach(changed, function(v, k) { + _forEach(changed, function(v, k) { if (v !== undefined || tags.hasOwnProperty(k)) { tags[k] = v; } @@ -257,7 +268,7 @@ export function uiEntityEditor(context) { tags = clean(tags); } - if (!_.isEqual(entity.tags, tags)) { + if (!_isEqual(entity.tags, tags)) { if (coalesceChanges) { context.overwrite(actionChangeTags(entityId, tags), annotation); } else { @@ -271,7 +282,7 @@ export function uiEntityEditor(context) { entityEditor.modified = function(_) { if (!arguments.length) return modified; modified = _; - d3.selectAll('button.preset-close use') + d3_selectAll('button.preset-close use') .attr('xlink:href', (modified ? '#icon-apply' : '#icon-close')); }; diff --git a/modules/ui/feature_info.js b/modules/ui/feature_info.js index d214fb27d..8deec2291 100644 --- a/modules/ui/feature_info.js +++ b/modules/ui/feature_info.js @@ -1,5 +1,8 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _compact from 'lodash-es/compact'; +import _map from 'lodash-es/map'; + +import { event as d3_event } from 'd3-selection'; + import { t } from '../util/locale'; import { uiTooltipHtml } from './tooltipHtml'; import { tooltip } from '../util/tooltip'; @@ -10,7 +13,7 @@ export function uiFeatureInfo(context) { var features = context.features(), stats = features.stats(), count = 0, - hiddenList = _.compact(_.map(features.hidden(), function(k) { + hiddenList = _compact(_map(features.hidden(), function(k) { if (stats[k]) { count += stats[k]; return String(stats[k]) + ' ' + t('feature.' + k + '.description'); @@ -21,11 +24,11 @@ export function uiFeatureInfo(context) { if (hiddenList.length) { var tooltipBehavior = tooltip() - .placement('top') - .html(true) - .title(function() { - return uiTooltipHtml(hiddenList.join('
')); - }); + .placement('top') + .html(true) + .title(function() { + return uiTooltipHtml(hiddenList.join('
')); + }); var warning = selection.append('a') .attr('href', '#') @@ -35,7 +38,7 @@ export function uiFeatureInfo(context) { .on('click', function() { tooltipBehavior.hide(warning); // open map data panel? - d3.event.preventDefault(); + d3_event.preventDefault(); }); } diff --git a/modules/ui/feature_list.js b/modules/ui/feature_list.js index 6faf63233..378e2f9e3 100644 --- a/modules/ui/feature_list.js +++ b/modules/ui/feature_list.js @@ -1,4 +1,8 @@ -import * as d3 from 'd3'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import * as sexagesimal from '@mapbox/sexagesimal'; import { t } from '../util/locale'; import { geoExtent, geoChooseEdge } from '../geo/index'; @@ -59,7 +63,7 @@ export function uiFeatureList(context) { function keypress() { var q = search.property('value'), items = list.selectAll('.feature-list-item'); - if (d3.event.keyCode === 13 && q.length && items.size()) { + if (d3_event.keyCode === 13 && q.length && items.size()) { click(items.datum()); } } @@ -224,7 +228,7 @@ export function uiFeatureList(context) { .attr('class', 'label'); label.each(function(d) { - d3.select(this) + d3_select(this) .call(svgIcon('#icon-' + d.geometry, 'pre-text')); }); @@ -262,7 +266,7 @@ export function uiFeatureList(context) { function click(d) { - d3.event.preventDefault(); + d3_event.preventDefault(); if (d.location) { context.map().centerZoom([d.location[1], d.location[0]], 20); } diff --git a/modules/ui/field.js b/modules/ui/field.js index d2c34ebd8..bffaf4a9d 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -1,5 +1,14 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _clone from 'lodash-es/clone'; +import _extend from 'lodash-es/extend'; +import _some from 'lodash-es/some'; + +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { textDirection } from '../util/locale'; import { svgIcon } from '../svg'; import { uiFields } from './fields'; @@ -8,7 +17,7 @@ import { utilRebind } from '../util'; export function uiField(context, presetField, entity, options) { - options = _.extend({ + options = _extend({ show: true, wrap: true, remove: true, @@ -16,8 +25,8 @@ export function uiField(context, presetField, entity, options) { info: true }, options); - var dispatch = d3.dispatch('change'), - field = _.clone(presetField), + var dispatch = d3_dispatch('change'), + field = _clone(presetField), show = options.show, state = '', tags = {}; @@ -38,22 +47,22 @@ export function uiField(context, presetField, entity, options) { function isModified() { if (!entity) return false; var original = context.graph().base().entities[entity.id]; - return _.some(field.keys, function(key) { + return _some(field.keys, function(key) { return original ? tags[key] !== original.tags[key] : tags[key]; }); } function isPresent() { - return _.some(field.keys, function(key) { + return _some(field.keys, function(key) { return tags[key]; }); } function revert(d) { - d3.event.stopPropagation(); - d3.event.preventDefault(); + d3_event.stopPropagation(); + d3_event.preventDefault(); if (!entity) return false; var original = context.graph().base().entities[entity.id], @@ -67,8 +76,8 @@ export function uiField(context, presetField, entity, options) { function remove(d) { - d3.event.stopPropagation(); - d3.event.preventDefault(); + d3_event.stopPropagation(); + d3_event.preventDefault(); var t = {}; d.keys.forEach(function(key) { @@ -146,11 +155,11 @@ export function uiField(context, presetField, entity, options) { } } - d3.select(this) + d3_select(this) .call(d.impl); if (options.wrap && options.info) { - d3.select(this) + d3_select(this) .call(reference.body) .select('.form-label-button-wrap') .call(reference.button); @@ -186,7 +195,7 @@ export function uiField(context, presetField, entity, options) { field.isShown = function() { - return show || _.some(field.keys, function(key) { return !!tags[key]; }); + return show || _some(field.keys, function(key) { return !!tags[key]; }); }; diff --git a/modules/ui/flash.js b/modules/ui/flash.js index 45dcc0a09..27a5d759e 100644 --- a/modules/ui/flash.js +++ b/modules/ui/flash.js @@ -1,7 +1,9 @@ -import * as d3 from 'd3'; +import { select as d3_select } from 'd3-selection'; +import { timeout as d3_timeout } from 'd3-timer'; var timer; + export function uiFlash(showDuration) { showDuration = showDuration || 1500; @@ -9,12 +11,12 @@ export function uiFlash(showDuration) { timer.stop(); } - d3.select('#footer-wrap') + d3_select('#footer-wrap') .attr('class', 'footer-hide'); - d3.select('#flash-wrap') + d3_select('#flash-wrap') .attr('class', 'footer-show'); - var content = d3.select('#flash-wrap').selectAll('.content') + var content = d3_select('#flash-wrap').selectAll('.content') .data([0]); content = content.enter() @@ -22,11 +24,11 @@ export function uiFlash(showDuration) { .attr('class', 'content') .merge(content); - timer = d3.timeout(function() { + timer = d3_timeout(function() { timer = null; - d3.select('#footer-wrap') + d3_select('#footer-wrap') .attr('class', 'footer-show'); - d3.select('#flash-wrap') + d3_select('#flash-wrap') .attr('class', 'footer-hide'); }, showDuration); diff --git a/modules/ui/form_fields.js b/modules/ui/form_fields.js index 25876376b..b6ca78cc7 100644 --- a/modules/ui/form_fields.js +++ b/modules/ui/form_fields.js @@ -1,5 +1,6 @@ -import * as d3 from 'd3'; -import { d3combobox } from '../lib/d3.combobox.js'; +import { select as d3_select } from 'd3-selection'; +import { d3combobox as d3_combobox } from '../lib/d3.combobox.js'; + import { t } from '../util/locale'; import { utilGetSetValue, utilNoAuto } from '../util'; @@ -45,7 +46,7 @@ export function uiFormFields(context) { fields .order() .each(function(d) { - d3.select(this) + d3_select(this) .call(d.render); }); @@ -95,7 +96,7 @@ export function uiFormFields(context) { } return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : ''); }) - .call(d3combobox() + .call(d3_combobox() .container(context.container()) .data(notShown) .minItems(1) diff --git a/modules/ui/full_screen.js b/modules/ui/full_screen.js index ea1e35423..55ed0df9d 100644 --- a/modules/ui/full_screen.js +++ b/modules/ui/full_screen.js @@ -1,12 +1,17 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + import { uiCmd } from './cmd'; import { utilDetect } from '../util/detect'; export function uiFullScreen(context) { var element = context.container().node(), - keybinding = d3keybinding('full-screen'); + keybinding = d3_keybinding('full-screen'); // button; @@ -50,7 +55,7 @@ export function uiFullScreen(context) { function fullScreen() { - d3.event.preventDefault(); + d3_event.preventDefault(); if (!isFullScreen()) { // button.classed('active', true); getFullScreenFn().apply(element); @@ -78,7 +83,7 @@ export function uiFullScreen(context) { var keys = detected.os === 'mac' ? [uiCmd('⌃⌘F'), 'f11'] : ['f11']; keybinding.on(keys, fullScreen); - d3.select(document) + d3_select(document) .call(keybinding); }; } diff --git a/modules/ui/geolocate.js b/modules/ui/geolocate.js index b63a9de85..7faeca2d4 100644 --- a/modules/ui/geolocate.js +++ b/modules/ui/geolocate.js @@ -1,8 +1,8 @@ import { t, textDirection } from '../util/locale'; import { tooltip } from '../util/tooltip'; -import { modeBrowse } from '../modes/index'; -import { geoExtent } from '../geo/index'; -import { svgIcon } from '../svg/index'; +import { geoExtent } from '../geo'; +import { modeBrowse } from '../modes'; +import { svgIcon } from '../svg'; import { uiLoading } from './loading'; diff --git a/modules/ui/help.js b/modules/ui/help.js index fd6e0e1c4..aafe0c152 100644 --- a/modules/ui/help.js +++ b/modules/ui/help.js @@ -1,6 +1,11 @@ -import * as d3 from 'd3'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + import marked from 'marked'; -import { d3keybinding } from '../lib/d3.keybinding.js'; import { t, textDirection } from '../util/locale'; import { svgIcon } from '../svg'; import { uiIntro } from './intro'; @@ -40,7 +45,7 @@ export function uiHelp(context) { function toggle() { - if (d3.event) d3.event.preventDefault(); + if (d3_event) d3_event.preventDefault(); tooltipBehavior.hide(button); setVisible(!button.classed('active')); } @@ -53,7 +58,7 @@ export function uiHelp(context) { if (show) { selection.on('mousedown.help-inside', function() { - return d3.event.stopPropagation(); + return d3_event.stopPropagation(); }); pane.style('display', 'block') .style('right', '-500px') @@ -66,7 +71,7 @@ export function uiHelp(context) { .duration(200) .style('right', '-500px') .on('end', function() { - d3.select(this).style('display', 'none'); + d3_select(this).style('display', 'none'); }); selection.on('mousedown.help-inside', null); } @@ -212,11 +217,11 @@ export function uiHelp(context) { clickHelp(docs[0], 0); - var keybinding = d3keybinding('help') + var keybinding = d3_keybinding('help') .on(key, toggle) .on([t('background.key'), t('map_data.key')], hide); - d3.select(document) + d3_select(document) .call(keybinding); context.surface().on('mousedown.help-outside', hide); diff --git a/modules/ui/info.js b/modules/ui/info.js index 4a9790838..22824c36f 100644 --- a/modules/ui/info.js +++ b/modules/ui/info.js @@ -1,9 +1,14 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { + event as d3_event, + 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/index'; +import { uiInfoPanels } from './panels'; export function uiInfo(context) { @@ -35,7 +40,7 @@ export function uiInfo(context) { .duration(200) .style('opacity', 0) .on('end', function(d) { - d3.select(this) + d3_select(this) .call(panels[d].off) .remove(); }); @@ -72,15 +77,15 @@ export function uiInfo(context) { // redraw the panels infoPanels.selectAll('.panel-content') .each(function(d) { - d3.select(this).call(panels[d]); + d3_select(this).call(panels[d]); }); } function toggle(which) { - if (d3.event) { - d3.event.stopImmediatePropagation(); - d3.event.preventDefault(); + if (d3_event) { + d3_event.stopImmediatePropagation(); + d3_event.preventDefault(); } var activeids = ids.filter(function(k) { return active[k]; }); @@ -113,7 +118,7 @@ export function uiInfo(context) { redraw(); - var keybinding = d3keybinding('info') + var keybinding = d3_keybinding('info') .on(uiCmd('⌘' + t('info_panels.key')), toggle); ids.forEach(function(k) { @@ -123,7 +128,7 @@ export function uiInfo(context) { .on(uiCmd('⌘⇧' + key), function() { toggle(k); }); }); - d3.select(document) + d3_select(document) .call(keybinding); } diff --git a/modules/ui/init.js b/modules/ui/init.js index c11db01d9..8519c6f88 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -1,5 +1,10 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { + event as d3_event, + 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'; @@ -249,14 +254,14 @@ export function uiInit(context) { map.dimensions(mapDimensions); } - d3.select(window) + d3_select(window) .on('resize.editor', onResize); onResize(); function pan(d) { return function() { - d3.event.preventDefault(); + d3_event.preventDefault(); context.pan(d, 100); }; } @@ -265,8 +270,8 @@ export function uiInit(context) { // pan amount var pa = 80; - var keybinding = d3keybinding('main') - .on('⌫', function() { d3.event.preventDefault(); }) + var keybinding = d3_keybinding('main') + .on('⌫', function() { d3_event.preventDefault(); }) .on('←', pan([pa, 0])) .on('↑', pan([0, pa])) .on('→', pan([-pa, 0])) @@ -276,7 +281,7 @@ export function uiInit(context) { .on(['⇧→', uiCmd('⌘→')], pan([-mapDimensions[0], 0])) .on(['⇧↓', uiCmd('⌘↓')], pan([0, -mapDimensions[1]])); - d3.select(document) + d3_select(document) .call(keybinding); context.enter(modeBrowse(context)); @@ -319,7 +324,7 @@ export function uiInit(context) { function ui(node, callback) { renderCallback = callback; - var container = d3.select(node); + var container = d3_select(node); context.container(container); context.loadLocale(function(err) { if (!err) { diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js index 458e06694..b2a398db2 100644 --- a/modules/ui/inspector.js +++ b/modules/ui/inspector.js @@ -1,4 +1,5 @@ -import * as d3 from 'd3'; +import { interpolate as d3_interpolate } from 'd3-interpolate'; + import { uiEntityEditor } from './entity_editor'; import { uiPresetList } from './preset_list'; import { uiViewOnOSM } from './view_on_osm'; @@ -70,7 +71,7 @@ export function uiInspector(context) { function showList(preset) { wrap.transition() - .styleTween('right', function() { return d3.interpolate('0%', '-100%'); }); + .styleTween('right', function() { return d3_interpolate('0%', '-100%'); }); presetPane .call(presetList.preset(preset).autofocus(true)); @@ -79,7 +80,7 @@ export function uiInspector(context) { function setPreset(preset) { wrap.transition() - .styleTween('right', function() { return d3.interpolate('-100%', '0%'); }); + .styleTween('right', function() { return d3_interpolate('-100%', '0%'); }); editorPane .call(entityEditor.preset(preset)); diff --git a/modules/ui/lasso.js b/modules/ui/lasso.js index b2f50efa1..9372adea9 100644 --- a/modules/ui/lasso.js +++ b/modules/ui/lasso.js @@ -1,5 +1,5 @@ -import * as d3 from 'd3'; -import { geoExtent } from '../geo/index'; +import { select as d3_select } from 'd3-selection'; +import { geoExtent } from '../geo'; import { uiToggle } from './toggle'; @@ -51,7 +51,7 @@ export function uiLasso(context) { lasso.close = function() { if (group) { group.call(uiToggle(false, function() { - d3.select(this).remove(); + d3_select(this).remove(); })); } context.container().classed('lasso', false); diff --git a/modules/ui/loading.js b/modules/ui/loading.js index ba91d8692..0b567fc71 100644 --- a/modules/ui/loading.js +++ b/modules/ui/loading.js @@ -1,5 +1,6 @@ import { uiModal } from './modal'; + export function uiLoading(context) { var message = '', blocking = false, diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 21c71324f..12e676d0e 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -1,8 +1,12 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { + event as d3_event, + 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/index'; +import { svgIcon } from '../svg'; import { uiTooltipHtml } from './tooltipHtml'; import { tooltip } from '../util/tooltip'; @@ -40,7 +44,7 @@ export function uiMapData(context) { function setFill(d) { - _.each(fills, function(opt) { + fills.forEach(function(opt) { context.surface().classed('fill-' + opt, Boolean(opt === d)); }); @@ -263,8 +267,8 @@ export function uiMapData(context) { .title(t('gpx.zoom')) .placement((textDirection === 'rtl') ? 'right' : 'left')) .on('click', function() { - d3.event.preventDefault(); - d3.event.stopPropagation(); + d3_event.preventDefault(); + d3_event.stopPropagation(); gpx.fitZoom(); }) .call(svgIcon('#icon-search')); @@ -277,10 +281,10 @@ export function uiMapData(context) { .placement((textDirection === 'rtl') ? 'right' : 'left') ) .on('click', function() { - d3.select(document.createElement('input')) + d3_select(document.createElement('input')) .attr('type', 'file') .on('change', function() { - gpx.files(d3.event.target.files); + gpx.files(d3_event.target.files); }) .node().click(); }) @@ -390,16 +394,16 @@ export function uiMapData(context) { function togglePanel() { - if (d3.event) d3.event.preventDefault(); + if (d3_event) d3_event.preventDefault(); tooltipBehavior.hide(button); setVisible(!button.classed('active')); } function toggleWireframe() { - if (d3.event) { - d3.event.preventDefault(); - d3.event.stopPropagation(); + if (d3_event) { + d3_event.preventDefault(); + d3_event.stopPropagation(); } setFill((fillSelected === 'wireframe' ? fillDefault : 'wireframe')); context.map().pan([0,0]); // trigger a redraw @@ -414,7 +418,7 @@ export function uiMapData(context) { if (show) { update(); selection.on('mousedown.map_data-inside', function() { - return d3.event.stopPropagation(); + return d3_event.stopPropagation(); }); content.style('display', 'block') .style('right', '-300px') @@ -428,7 +432,7 @@ export function uiMapData(context) { .duration(200) .style('right', '-300px') .on('end', function() { - d3.select(this).style('display', 'none'); + d3_select(this).style('display', 'none'); }); selection.on('mousedown.map_data-inside', null); } @@ -464,10 +468,10 @@ export function uiMapData(context) { .classed('hide-toggle', true) .classed('expanded', true) .on('click', function() { - var exp = d3.select(this).classed('expanded'); + var exp = d3_select(this).classed('expanded'); dataLayerContainer.style('display', exp ? 'none' : 'block'); - d3.select(this).classed('expanded', !exp); - d3.event.preventDefault(); + d3_select(this).classed('expanded', !exp); + d3_event.preventDefault(); }); var dataLayerContainer = content @@ -484,10 +488,10 @@ export function uiMapData(context) { .classed('hide-toggle', true) .classed('expanded', false) .on('click', function() { - var exp = d3.select(this).classed('expanded'); + var exp = d3_select(this).classed('expanded'); fillContainer.style('display', exp ? 'none' : 'block'); - d3.select(this).classed('expanded', !exp); - d3.event.preventDefault(); + d3_select(this).classed('expanded', !exp); + d3_event.preventDefault(); }); var fillContainer = content @@ -508,10 +512,10 @@ export function uiMapData(context) { .classed('hide-toggle', true) .classed('expanded', false) .on('click', function() { - var exp = d3.select(this).classed('expanded'); + var exp = d3_select(this).classed('expanded'); featureContainer.style('display', exp ? 'none' : 'block'); - d3.select(this).classed('expanded', !exp); - d3.event.preventDefault(); + d3_select(this).classed('expanded', !exp); + d3_event.preventDefault(); }); var featureContainer = content @@ -529,12 +533,12 @@ export function uiMapData(context) { setFill(fillDefault); - var keybinding = d3keybinding('features') + var keybinding = d3_keybinding('features') .on(key, togglePanel) .on(t('area_fill.wireframe.key'), toggleWireframe) .on([t('background.key'), t('help.key')], hidePanel); - d3.select(document) + d3_select(document) .call(keybinding); context.surface().on('mousedown.map_data-outside', hidePanel); diff --git a/modules/ui/map_in_map.js b/modules/ui/map_in_map.js index 7fc33abc8..4a6609c98 100644 --- a/modules/ui/map_in_map.js +++ b/modules/ui/map_in_map.js @@ -1,10 +1,22 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { geoPath as d3_geoPath } from 'd3-geo'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { + zoom as d3_zoom, + zoomIdentity as d3_zoomIdentity +} from 'd3-zoom'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + import { t } from '../util/locale'; -import { svgDebug, svgGpx } from '../svg/index'; -import { geoRawMercator } from '../geo/index'; -import { rendererTileLayer } from '../renderer/index'; -import { utilSetTransform } from '../util/index'; +import { svgDebug, svgGpx } from '../svg'; +import { geoRawMercator } from '../geo'; +import { rendererTileLayer } from '../renderer'; +import { utilSetTransform } from '../util'; import { utilGetDimensions } from '../util/dimensions'; @@ -24,7 +36,7 @@ export function uiMapInMap(context) { projection = geoRawMercator(), gpxLayer = svgGpx(projection, context).showLabels(false), debugLayer = svgDebug(projection, context), - zoom = d3.zoom() + zoom = d3_zoom() .scaleExtent([ztok(0.5), ztok(24)]) .on('start', zoomStarted) .on('zoom', zoomed) @@ -34,9 +46,9 @@ export function uiMapInMap(context) { skipEvents = false, gesture = null, zDiff = 6, // by default, minimap renders at (main zoom - 6) - wrap = d3.select(null), - tiles = d3.select(null), - viewport = d3.select(null), + wrap = d3_select(null), + tiles = d3_select(null), + viewport = d3_select(null), tStart, // transform at start of gesture tCurr, // transform at most recent event timeoutId; @@ -52,9 +64,9 @@ export function uiMapInMap(context) { function zoomed() { if (skipEvents) return; - var x = d3.event.transform.x, - y = d3.event.transform.y, - k = d3.event.transform.k, + var x = d3_event.transform.x, + y = d3_event.transform.y, + k = d3_event.transform.k, isZooming = (k !== tStart.k), isPanning = (x !== tStart.x || y !== tStart.y); @@ -86,7 +98,7 @@ export function uiMapInMap(context) { utilSetTransform(tiles, tX, tY, scale); utilSetTransform(viewport, 0, 0, scale); isTransformed = true; - tCurr = d3.zoomIdentity.translate(x, y).scale(k); + tCurr = d3_zoomIdentity.translate(x, y).scale(k); var zMain = ktoz(context.projection.scale()), zMini = ktoz(k); @@ -217,7 +229,7 @@ export function uiMapInMap(context) { overlays = overlays.enter() .append('div') .merge(overlays) - .each(function(layer) { d3.select(this).call(layer); }); + .each(function(layer) { d3_select(this).call(layer); }); var dataLayers = tiles @@ -237,7 +249,7 @@ export function uiMapInMap(context) { // redraw viewport bounding box if (gesture !== 'pan') { - var getPath = d3.geoPath(projection), + var getPath = d3_geoPath(projection), bbox = { type: 'Polygon', coordinates: [context.map().extent().polygon()] }; viewport = wrap.selectAll('.map-in-map-viewport') @@ -269,11 +281,11 @@ export function uiMapInMap(context) { function toggle() { - if (d3.event) d3.event.preventDefault(); + if (d3_event) d3_event.preventDefault(); isHidden = !isHidden; - var label = d3.select('.minimap-toggle'); + var label = d3_select('.minimap-toggle'); label.classed('active', !isHidden) .select('input').property('checked', !isHidden); @@ -324,10 +336,10 @@ export function uiMapInMap(context) { redraw(); - var keybinding = d3keybinding('map-in-map') + var keybinding = d3_keybinding('map-in-map') .on(t('background.minimap.key'), toggle); - d3.select(document) + d3_select(document) .call(keybinding); } diff --git a/modules/ui/modal.js b/modules/ui/modal.js index 8c98af1f9..ee13f02f6 100644 --- a/modules/ui/modal.js +++ b/modules/ui/modal.js @@ -1,10 +1,15 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; -import { svgIcon } from '../svg/index'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + +import { svgIcon } from '../svg'; export function uiModal(selection, blocking) { - var keybinding = d3keybinding('modal'); + var keybinding = d3_keybinding('modal'); var previous = selection.select('div.modal'); var animate = previous.empty(); @@ -40,7 +45,7 @@ export function uiModal(selection, blocking) { if (!blocking) { shaded.on('click.remove-modal', function() { - if (d3.event.target === this) { + if (d3_event.target === this) { shaded.close(); } }); @@ -54,7 +59,7 @@ export function uiModal(selection, blocking) { .on('⌫', shaded.close) .on('⎋', shaded.close); - d3.select(document) + d3_select(document) .call(keybinding); } diff --git a/modules/ui/modes.js b/modules/ui/modes.js index 0787aa348..f2cab402c 100644 --- a/modules/ui/modes.js +++ b/modules/ui/modes.js @@ -1,15 +1,16 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +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, modeAddLine, modeAddPoint, modeBrowse -} from '../modes/index'; +} from '../modes'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; import { tooltip } from '../util/tooltip'; import { uiTooltipHtml } from './tooltipHtml'; @@ -56,7 +57,7 @@ export function uiModes(context) { buttons .each(function(d) { - d3.select(this) + d3_select(this) .call(svgIcon('#icon-' + d.button, 'pre-text')); }); @@ -79,7 +80,7 @@ export function uiModes(context) { .classed('mode-' + exited.id, false); }); - var keybinding = d3keybinding('mode-buttons'); + var keybinding = d3_keybinding('mode-buttons'); modes.forEach(function(mode) { keybinding.on(mode.key, function() { @@ -93,11 +94,11 @@ export function uiModes(context) { }); }); - d3.select(document) + d3_select(document) .call(keybinding); - var debouncedUpdate = _.debounce(update, 500, { leading: true, trailing: true }); + var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true }); context.map() .on('move.modes', debouncedUpdate) diff --git a/modules/ui/notice.js b/modules/ui/notice.js index 9f125d2fb..4f21c8090 100644 --- a/modules/ui/notice.js +++ b/modules/ui/notice.js @@ -1,4 +1,5 @@ -import _ from 'lodash'; +import _debounce from 'lodash-es/debounce'; + import { t } from '../util/locale'; import { svgIcon } from '../svg/index'; @@ -30,7 +31,7 @@ export function uiNotice(context) { } context.map() - .on('move.notice', _.debounce(disableTooHigh, 500)); + .on('move.notice', _debounce(disableTooHigh, 500)); disableTooHigh(); }; diff --git a/modules/ui/preset_editor.js b/modules/ui/preset_editor.js index c597256c5..9944c8c97 100644 --- a/modules/ui/preset_editor.js +++ b/modules/ui/preset_editor.js @@ -1,4 +1,10 @@ -import * as d3 from 'd3'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { t } from '../util/locale'; import { modeBrowse } from '../modes'; import { uiDisclosure } from './disclosure'; @@ -8,7 +14,7 @@ import { utilRebind } from '../util'; export function uiPresetEditor(context) { - var dispatch = d3.dispatch('change'), + var dispatch = d3_dispatch('change'), formFields = uiFormFields(context), expandedPreference = (context.storage('preset_fields.expanded') !== 'false'), state, @@ -85,7 +91,7 @@ export function uiPresetEditor(context) { selection.selectAll('.wrap-form-field input') .on('keydown', function() { // if user presses enter, and combobox is not active, accept edits.. - if (d3.event.keyCode === 13 && d3.select('.combobox').empty()) { + if (d3_event.keyCode === 13 && d3_select('.combobox').empty()) { context.enter(modeBrowse(context)); } }); diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index f0255ff9f..8cac58443 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -1,7 +1,8 @@ -import * as d3 from 'd3'; -import { dataFeatureIcons } from '../../data/index'; -import { svgIcon } from '../svg/index'; -import { utilFunctor } from '../util/index'; +import { select as d3_select } from 'd3-selection'; + +import { dataFeatureIcons } from '../../data'; +import { svgIcon } from '../svg'; +import { utilFunctor } from '../util'; export function uiPresetIcon() { @@ -26,7 +27,7 @@ export function uiPresetIcon() { function render() { - var selection = d3.select(this), + var selection = d3_select(this), p = preset.apply(this, arguments), geom = geometry.apply(this, arguments), picon = getIcon(p, geom), diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js index 5d7439a02..69a14e801 100644 --- a/modules/ui/preset_list.js +++ b/modules/ui/preset_list.js @@ -1,5 +1,12 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + 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'; @@ -11,7 +18,7 @@ import { utilNoAuto, utilRebind } from '../util'; export function uiPresetList(context) { - var dispatch = d3.dispatch('choose'), + var dispatch = d3_dispatch('choose'), id, currentPreset, autofocus = false; @@ -57,26 +64,26 @@ export function uiPresetList(context) { function keydown() { // hack to let delete shortcut work when search is autofocused if (search.property('value').length === 0 && - (d3.event.keyCode === d3keybinding.keyCodes['⌫'] || - d3.event.keyCode === d3keybinding.keyCodes['⌦'])) { - d3.event.preventDefault(); - d3.event.stopPropagation(); + (d3_event.keyCode === d3_keybinding.keyCodes['⌫'] || + d3_event.keyCode === d3_keybinding.keyCodes['⌦'])) { + d3_event.preventDefault(); + d3_event.stopPropagation(); operationDelete([id], context)(); } else if (search.property('value').length === 0 && - (d3.event.ctrlKey || d3.event.metaKey) && - d3.event.keyCode === d3keybinding.keyCodes.z) { - d3.event.preventDefault(); - d3.event.stopPropagation(); + (d3_event.ctrlKey || d3_event.metaKey) && + d3_event.keyCode === d3_keybinding.keyCodes.z) { + d3_event.preventDefault(); + d3_event.stopPropagation(); context.undo(); - } else if (!d3.event.ctrlKey && !d3.event.metaKey) { - d3.select(this).on('keydown', null); + } else if (!d3_event.ctrlKey && !d3_event.metaKey) { + d3_select(this).on('keydown', null); } } function keypress() { // enter var value = search.property('value'); - if (d3.event.keyCode === 13 && value.length) { + if (d3_event.keyCode === 13 && value.length) { list.selectAll('.preset-list-item:first-child').datum().choose(); } } @@ -146,7 +153,7 @@ export function uiPresetList(context) { .append('div') .attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); }) .classed('current', function(item) { return item.preset === currentPreset; }) - .each(function(item) { d3.select(this).call(item); }) + .each(function(item) { d3_select(this).call(item); }) .style('opacity', 0) .transition() .style('opacity', 1); @@ -168,12 +175,12 @@ export function uiPresetList(context) { .geometry(context.geometry(id)) .preset(preset)) .on('click', function() { - var isExpanded = d3.select(this).classed('expanded'); + var isExpanded = d3_select(this).classed('expanded'); var iconName = isExpanded ? (textDirection === 'rtl' ? '#icon-backward' : '#icon-forward') : '#icon-down'; - d3.select(this) + d3_select(this) .classed('expanded', !isExpanded); - d3.select(this).selectAll('div.label svg.icon use') + d3_select(this).selectAll('div.label svg.icon use') .attr('href', iconName); item.choose(); }); @@ -258,7 +265,7 @@ export function uiPresetList(context) { }; item.help = function() { - d3.event.stopPropagation(); + d3_event.stopPropagation(); item.reference.toggle(); }; diff --git a/modules/ui/radial_menu.js b/modules/ui/radial_menu.js index 8c62abb5b..01b6d2458 100644 --- a/modules/ui/radial_menu.js +++ b/modules/ui/radial_menu.js @@ -1,5 +1,9 @@ -import * as d3 from 'd3'; -import { geoRoundCoords } from '../geo/index'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { geoRoundCoords } from '../geo'; import { uiTooltipHtml } from './tooltipHtml'; @@ -15,7 +19,7 @@ export function uiRadialMenu(context, operations) { selection.node().parentNode.focus(); function click(operation) { - d3.event.stopPropagation(); + d3_event.stopPropagation(); if (operation.disabled()) return; operation(); radialMenu.close(); @@ -74,12 +78,12 @@ export function uiRadialMenu(context, operations) { .attr('height', '20') .attr('xlink:href', function(d) { return '#operation-' + d.id; }); - tooltip = d3.select(document.body) + tooltip = d3_select(document.body) .append('div') .attr('class', 'tooltip-inner radial-menu-tooltip'); function mousedown() { - d3.event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 + d3_event.stopPropagation(); // https://github.com/openstreetmap/iD/issues/1869 } function mouseover(d, i) { diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index 234930a69..73c7de159 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -1,5 +1,10 @@ -import * as d3 from 'd3'; -import { d3combobox } from '../lib/d3.combobox.js'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3combobox as d3_combobox } from '../lib/d3.combobox.js'; + import { t } from '../util/locale'; import { actionChangeMember, actionDeleteMember } from '../actions'; import { modeBrowse, modeSelect } from '../modes'; @@ -20,13 +25,13 @@ export function uiRawMemberEditor(context) { function selectMember(d) { - d3.event.preventDefault(); + d3_event.preventDefault(); context.enter(modeSelect(context, [d.id])); } function changeRole(d) { - var role = d3.select(this).property('value'); + var role = d3_select(this).property('value'); var member = { id: d.id, type: d.type, role: role }; context.perform( actionChangeMember(d.relation.id, member, d.index), @@ -106,7 +111,7 @@ export function uiRawMemberEditor(context) { enter .each(function(d) { if (d.member) { - var label = d3.select(this).append('label') + var label = d3_select(this).append('label') .attr('class', 'form-label') .append('a') .attr('href', '#') @@ -124,7 +129,7 @@ export function uiRawMemberEditor(context) { .text(function(d) { return utilDisplayName(d.member); }); } else { - d3.select(this).append('label') + d3_select(this).append('label') .attr('class', 'form-label') .text(t('inspector.incomplete', { id: d.id })); } @@ -153,7 +158,7 @@ export function uiRawMemberEditor(context) { function bindTypeahead(d) { - var row = d3.select(this), + var row = d3_select(this), role = row.selectAll('input.member-role'); function sort(value, data) { @@ -169,7 +174,7 @@ export function uiRawMemberEditor(context) { return sameletter.concat(other); } - role.call(d3combobox() + role.call(d3_combobox() .container(context.container()) .fetcher(function(role, callback) { var rtype = entity.tags.type; @@ -186,10 +191,10 @@ export function uiRawMemberEditor(context) { function unbind() { - var row = d3.select(this); + var row = d3_select(this); row.selectAll('input.member-role') - .call(d3combobox.off); + .call(d3_combobox.off); } } } diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index 47ca15638..21952ab08 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -1,6 +1,14 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3combobox } from '../lib/d3.combobox.js'; +import _extend from 'lodash-es/extend'; +import _filter from 'lodash-es/filter'; +import _groupBy from 'lodash-es/groupBy'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3combobox as d3_combobox } from '../lib/d3.combobox.js'; + import { t } from '../util/locale'; import { @@ -8,14 +16,14 @@ import { actionAddMember, actionChangeMember, actionDeleteMember -} from '../actions/index'; +} from '../actions'; -import { modeSelect } from '../modes/index'; -import { osmEntity, osmRelation } from '../osm/index'; -import { services } from '../services/index'; -import { svgIcon } from '../svg/index'; +import { modeSelect } from '../modes'; +import { osmEntity, osmRelation } from '../osm'; +import { services } from '../services'; +import { svgIcon } from '../svg'; import { uiDisclosure } from './disclosure'; -import { utilDisplayName, utilNoAuto } from '../util/index'; +import { utilDisplayName, utilNoAuto } from '../util'; export function uiRawMembershipEditor(context) { @@ -24,15 +32,15 @@ export function uiRawMembershipEditor(context) { function selectRelation(d) { - d3.event.preventDefault(); + d3_event.preventDefault(); context.enter(modeSelect(context, [d.relation.id])); } function changeRole(d) { - var role = d3.select(this).property('value'); + var role = d3_select(this).property('value'); context.perform( - actionChangeMember(d.relation.id, _.extend({}, d.member, { role: role }), d.index), + actionChangeMember(d.relation.id, _extend({}, d.member, { role: role }), d.index), t('operations.change_role.annotation') ); } @@ -99,10 +107,10 @@ export function uiRawMembershipEditor(context) { }); // Dedupe identical names by appending relation id - see #2891 - var dupeGroups = _(result) - .groupBy('value') - .filter(function(v) { return v.length > 1; }) - .value(); + var dupeGroups = _filter( + _groupBy(result, 'value'), + function(v) { return v.length > 1; } + ); dupeGroups.forEach(function(group) { group.forEach(function(obj) { @@ -245,7 +253,7 @@ export function uiRawMembershipEditor(context) { .merge(enter); newrow.selectAll('.member-entity-input') - .call(d3combobox() + .call(d3_combobox() .container(context.container()) .minItems(1) .fetcher(function(value, callback) { callback(relations(value)); }) @@ -277,7 +285,7 @@ export function uiRawMembershipEditor(context) { function bindTypeahead(d) { - var row = d3.select(this), + var row = d3_select(this), role = row.selectAll('input.member-role'); function sort(value, data) { @@ -293,7 +301,7 @@ export function uiRawMembershipEditor(context) { return sameletter.concat(other); } - role.call(d3combobox() + role.call(d3_combobox() .container(context.container()) .fetcher(function(role, callback) { var rtype = d.relation.tags.type; @@ -310,10 +318,10 @@ export function uiRawMembershipEditor(context) { function unbind() { - var row = d3.select(this); + var row = d3_select(this); row.selectAll('input.member-role') - .call(d3combobox.off); + .call(d3_combobox.off); } } } diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index 2991895d6..e3cf7b6e4 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -1,8 +1,18 @@ -import * as d3 from 'd3'; -import { d3combobox } from '../lib/d3.combobox.js'; +import _map from 'lodash-es/map'; + +import { ascending as d3_ascending } from 'd3-array'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3combobox as d3_combobox } from '../lib/d3.combobox.js'; + import { t } from '../util/locale'; -import { services } from '../services/index'; -import { svgIcon } from '../svg/index'; +import { services } from '../services'; +import { svgIcon } from '../svg'; import { uiDisclosure } from './disclosure'; import { uiTagReference } from './tag_reference'; import { @@ -14,7 +24,7 @@ import { export function uiRawTagEditor(context) { var taginfo = services.taginfo, - dispatch = d3.dispatch('change'), + dispatch = d3_dispatch('change'), expandedPreference = (context.storage('raw_tag_editor.expanded') === 'true'), expandedCurrent = expandedPreference, updatePreference = true, @@ -51,7 +61,9 @@ export function uiRawTagEditor(context) { function content(wrap) { - var entries = d3.entries(tags); + var entries = _map(tags, function(v, k) { + return { key: k, value: v }; + }); if (!entries.length || showBlank) { showBlank = false; @@ -128,12 +140,12 @@ export function uiRawTagEditor(context) { .sort(function(a, b) { return (a.key === newRow && b.key !== newRow) ? 1 : (a.key !== newRow && b.key === newRow) ? -1 - : d3.ascending(a.key, b.key); + : d3_ascending(a.key, b.key); }); items .each(function(tag) { - var row = d3.select(this), + var row = d3_select(this), key = row.select('input.key'), // propagate bound data to child value = row.select('input.value'); // propagate bound data to child @@ -185,7 +197,7 @@ export function uiRawTagEditor(context) { function pushMore() { - if (d3.event.keyCode === 9 && !d3.event.shiftKey && + if (d3_event.keyCode === 9 && !d3_event.shiftKey && list.selectAll('li:last-child input.value').node() === this) { addTag(); } @@ -196,7 +208,7 @@ export function uiRawTagEditor(context) { if (isReadOnly({ key: key })) return; var geometry = context.geometry(id); - key.call(d3combobox() + key.call(d3_combobox() .container(context.container()) .fetcher(function(value, callback) { taginfo.keys({ @@ -208,7 +220,7 @@ export function uiRawTagEditor(context) { }); })); - value.call(d3combobox() + value.call(d3_combobox() .container(context.container()) .fetcher(function(value, callback) { taginfo.values({ @@ -238,13 +250,13 @@ export function uiRawTagEditor(context) { function unbind() { - var row = d3.select(this); + var row = d3_select(this); row.selectAll('input.key') - .call(d3combobox.off); + .call(d3_combobox.off); row.selectAll('input.value') - .call(d3combobox.off); + .call(d3_combobox.off); } @@ -299,7 +311,7 @@ export function uiRawTagEditor(context) { var tag = {}; tag[d.key] = undefined; dispatch.call('change', this, tag); - d3.select(this.parentNode).remove(); + d3_select(this.parentNode).remove(); } diff --git a/modules/ui/save.js b/modules/ui/save.js index abb027823..de7f9dd40 100644 --- a/modules/ui/save.js +++ b/modules/ui/save.js @@ -1,8 +1,15 @@ -import * as d3 from 'd3'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { interpolateRgb as d3_interpolateRgb } from 'd3-interpolate'; + +import { + event as d3_event, + 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/index'; -import { svgIcon } from '../svg/index'; +import { modeSave } from '../modes'; +import { svgIcon } from '../svg'; import { uiCmd } from './cmd'; import { uiTooltipHtml } from './tooltipHtml'; import { tooltip } from '../util/tooltip'; @@ -19,7 +26,7 @@ export function uiSave(context) { function save() { - d3.event.preventDefault(); + d3_event.preventDefault(); if (!context.inIntro() && !saving() && history.hasChanges()) { context.enter(modeSave(context)); } @@ -32,10 +39,10 @@ export function uiSave(context) { return null; } else if (numChanges <= 50) { step = numChanges / 50; - return d3.interpolateRgb('#fff', '#ff8')(step); // white -> yellow + return d3_interpolateRgb('#fff', '#ff8')(step); // white -> yellow } else { step = Math.min((numChanges - 50) / 50, 1.0); - return d3.interpolateRgb('#ff8', '#f88')(step); // yellow -> red + return d3_interpolateRgb('#ff8', '#f88')(step); // yellow -> red } } @@ -93,10 +100,10 @@ export function uiSave(context) { updateCount(); - var keybinding = d3keybinding('save') + var keybinding = d3_keybinding('save') .on(key, save, true); - d3.select(document) + d3_select(document) .call(keybinding); context.history() diff --git a/modules/ui/scale.js b/modules/ui/scale.js index 3a470e888..fb7f869c1 100644 --- a/modules/ui/scale.js +++ b/modules/ui/scale.js @@ -1,4 +1,4 @@ -import { geoLonToMeters, geoMetersToLon } from '../geo/index'; +import { geoLonToMeters, geoMetersToLon } from '../geo'; import { utilDetect } from '../util/detect'; diff --git a/modules/ui/selection_list.js b/modules/ui/selection_list.js index 71ce89cb5..5fbd9e534 100644 --- a/modules/ui/selection_list.js +++ b/modules/ui/selection_list.js @@ -1,9 +1,10 @@ -import * as d3 from 'd3'; +import { event as d3_event } from 'd3-selection'; + import { t } from '../util/locale'; -import { modeSelect } from '../modes/index'; -import { osmEntity } from '../osm/index'; -import { svgIcon } from '../svg/index'; -import { utilDisplayName } from '../util/index'; +import { modeSelect } from '../modes'; +import { osmEntity } from '../osm'; +import { svgIcon } from '../svg'; +import { utilDisplayName } from '../util'; export function uiSelectionList(context, selectedIDs) { @@ -14,7 +15,7 @@ export function uiSelectionList(context, selectedIDs) { function deselectEntity(entity) { - d3.event.stopPropagation(); + d3_event.stopPropagation(); var index = selectedIDs.indexOf(entity.id); if (index > -1) { selectedIDs.splice(index, 1); diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 2e2a63d8f..89647ca3f 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -1,7 +1,11 @@ -import * as d3 from 'd3'; +import { + select as d3_select, + selectAll as d3_selectAll +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; import { t } from '../util/locale'; -import { d3keybinding } from '../lib/d3.keybinding.js'; import { dataShortcuts } from '../../data'; import { svgIcon } from '../svg'; import { uiCmd } from './cmd'; @@ -16,9 +20,9 @@ export function uiShortcuts() { var savedSelection; - var keybinding = d3keybinding('shortcuts') + var keybinding = d3_keybinding('shortcuts') .on(t('shortcuts.toggle.key'), function () { - if (d3.selectAll('.modal-shortcuts').size()) { // already showing + if (d3_selectAll('.modal-shortcuts').size()) { // already showing if (modalSelection) { modalSelection.close(); modalSelection = null; @@ -29,7 +33,7 @@ export function uiShortcuts() { } }); - d3.select(document) + d3_select(document) .call(keybinding); @@ -158,7 +162,7 @@ export function uiShortcuts() { }) .enter() .each(function () { - var selection = d3.select(this); + var selection = d3_select(this); selection .append('kbd') @@ -190,7 +194,7 @@ export function uiShortcuts() { }) .enter() .each(function (d, i, nodes) { - var selection = d3.select(this); + var selection = d3_select(this); var click = d.shortcut.toLowerCase().match(/(.*).click/); if (click && click[1]) { @@ -217,7 +221,7 @@ export function uiShortcuts() { shortcutKeys .filter(function(d) { return d.gesture; }) .each(function () { - var selection = d3.select(this); + var selection = d3_select(this); selection .append('span') diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js index 2a5e4e0aa..0062b7031 100644 --- a/modules/ui/sidebar.js +++ b/modules/ui/sidebar.js @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import _throttle from 'lodash-es/throttle'; import { uiFeatureList } from './feature_list'; import { uiInspector } from './inspector'; @@ -49,7 +49,7 @@ export function uiSidebar(context) { } - sidebar.hover = _.throttle(hover, 200); + sidebar.hover = _throttle(hover, 200); sidebar.select = function(id, newFeature) { diff --git a/modules/ui/source_switch.js b/modules/ui/source_switch.js index 5b6af31c9..244e26b46 100644 --- a/modules/ui/source_switch.js +++ b/modules/ui/source_switch.js @@ -1,6 +1,10 @@ -import * as d3 from 'd3'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { t } from '../util/locale'; -import { modeBrowse } from '../modes/index'; +import { modeBrowse } from '../modes'; export function uiSourceSwitch(context) { @@ -8,12 +12,12 @@ export function uiSourceSwitch(context) { function click() { - d3.event.preventDefault(); + d3_event.preventDefault(); if (context.history().hasChanges() && !window.confirm(t('source_switch.lose_changes'))) return; - var live = d3.select(this) + var live = d3_select(this) .classed('live'); context.history().clearSaved(); @@ -21,7 +25,7 @@ export function uiSourceSwitch(context) { context.enter(modeBrowse(context)); context.flush(); - d3.select(this) + d3_select(this) .text(live ? t('source_switch.dev') : t('source_switch.live')) .classed('live', !live); } diff --git a/modules/ui/splash.js b/modules/ui/splash.js index 6b2eef670..c383b73b0 100644 --- a/modules/ui/splash.js +++ b/modules/ui/splash.js @@ -1,5 +1,5 @@ import { t } from '../util/locale'; -import { uiIntro } from './intro/index'; +import { uiIntro } from './intro'; import { uiModal } from './modal'; diff --git a/modules/ui/status.js b/modules/ui/status.js index 9d9dbc3e2..ec758011c 100644 --- a/modules/ui/status.js +++ b/modules/ui/status.js @@ -1,6 +1,7 @@ -import * as d3 from 'd3'; +import { event as d3_event } from 'd3-selection'; + import { t } from '../util/locale'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; export function uiStatus(context) { @@ -25,7 +26,7 @@ export function uiStatus(context) { .append('span') .text(t('login')) .on('click.login', function() { - d3.event.preventDefault(); + d3_event.preventDefault(); osm.authenticate(); }); } else { diff --git a/modules/ui/success.js b/modules/ui/success.js index bf9b19541..eb12d7f3d 100644 --- a/modules/ui/success.js +++ b/modules/ui/success.js @@ -1,12 +1,14 @@ -import * as d3 from 'd3'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; +import { select as d3_select } from 'd3-selection'; + import { t } from '../util/locale'; import { tooltip } from '../util/tooltip'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; import { utilRebind } from '../util/rebind'; export function uiSuccess(context) { - var dispatch = d3.dispatch('cancel'), + var dispatch = d3_dispatch('cancel'), changeset; @@ -67,14 +69,14 @@ export function uiSuccess(context) { var message = (changeset.tags.comment || t('success.edited_osm')).substring(0, 130) + ' ' + changesetURL; - var sharing = { - facebook: 'https://facebook.com/sharer/sharer.php?u=' + encodeURIComponent(changesetURL), - twitter: 'https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent(message), - google: 'https://plus.google.com/share?url=' + encodeURIComponent(changesetURL) - }; + var sharing = [ + { key: 'facebook', value: 'https://facebook.com/sharer/sharer.php?u=' + encodeURIComponent(changesetURL) }, + { key: 'twitter', value: 'https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent(message) }, + { key: 'google', value: 'https://plus.google.com/share?url=' + encodeURIComponent(changesetURL) } + ]; body.selectAll('.button.social') - .data(d3.entries(sharing)) + .data(sharing) .enter() .append('a') .attr('class', 'button social col4') @@ -83,7 +85,7 @@ export function uiSuccess(context) { .call(tooltip() .title(function(d) { return t('success.' + d.key); }) .placement('bottom')) - .each(function(d) { d3.select(this).call(svgIcon('#logo-' + d.key, 'social')); }); + .each(function(d) { d3_select(this).call(svgIcon('#logo-' + d.key, 'social')); }); } diff --git a/modules/ui/tag_reference.js b/modules/ui/tag_reference.js index 35a96376c..4c5b39dcd 100644 --- a/modules/ui/tag_reference.js +++ b/modules/ui/tag_reference.js @@ -1,16 +1,22 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _find from 'lodash-es/find'; +import _omit from 'lodash-es/omit'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + import { t } from '../util/locale'; import { utilDetect } from '../util/detect'; -import { services } from '../services/index'; -import { svgIcon } from '../svg/index'; +import { services } from '../services'; +import { svgIcon } from '../svg'; export function uiTagReference(tag) { var taginfo = services.taginfo, tagReference = {}, - button = d3.select(null), - body = d3.select(null), + button = d3_select(null), + body = d3_select(null), loaded, showing; @@ -20,7 +26,7 @@ export function uiTagReference(tag) { localized; if (locale !== 'pt-br') { // see #3776, prefer 'pt' over 'pt-br' - localized = _.find(data, function(d) { + localized = _find(data, function(d) { return d.lang.toLowerCase() === locale; }); if (localized) return localized; @@ -30,14 +36,14 @@ export function uiTagReference(tag) { // 'en' if the language is 'en-US' if (locale.indexOf('-') !== -1) { var first = locale.split('-')[0]; - localized = _.find(data, function(d) { + localized = _find(data, function(d) { return d.lang.toLowerCase() === first; }); if (localized) return localized; } // finally fall back to english - return _.find(data, function(d) { + return _find(data, function(d) { return d.lang.toLowerCase() === 'en'; }); } @@ -59,7 +65,7 @@ export function uiTagReference(tag) { if (!docs || !docs.title) { if (param.hasOwnProperty('value')) { - load(_.omit(param, 'value')); // retry with key only + load(_omit(param, 'value')); // retry with key only } else { body .append('p') @@ -76,7 +82,7 @@ export function uiTagReference(tag) { .attr('class', 'tag-reference-wiki-image') .attr('src', docs.image.thumb_url_prefix + '100' + docs.image.thumb_url_suffix) .on('load', function() { done(); }) - .on('error', function() { d3.select(this).remove(); done(); }); + .on('error', function() { d3_select(this).remove(); done(); }); } else { done(); } @@ -156,8 +162,8 @@ export function uiTagReference(tag) { button .on('click', function () { - d3.event.stopPropagation(); - d3.event.preventDefault(); + d3_event.stopPropagation(); + d3_event.preventDefault(); if (showing) { hide(); } else if (loaded) { diff --git a/modules/ui/toggle.js b/modules/ui/toggle.js index 708b4157e..6d2490022 100644 --- a/modules/ui/toggle.js +++ b/modules/ui/toggle.js @@ -1,4 +1,5 @@ -import * as d3 from 'd3'; +import { select as d3_select } from 'd3-selection'; + // toggles the visibility of ui elements, using a combination of the // hide class, which sets display=none, and a d3 transition for opacity. @@ -12,7 +13,7 @@ export function uiToggle(show, callback) { .transition() .style('opacity', show ? 1 : 0) .on('end', function() { - d3.select(this) + d3_select(this) .classed('hide', !show) .style('opacity', null); if (callback) callback.apply(this); diff --git a/modules/ui/tooltipHtml.js b/modules/ui/tooltipHtml.js index 3d57e6e6e..d867f4984 100644 --- a/modules/ui/tooltipHtml.js +++ b/modules/ui/tooltipHtml.js @@ -1,5 +1,6 @@ import { t } from '../util/locale'; + export function uiTooltipHtml(text, key, heading) { var s = ''; diff --git a/modules/ui/undo_redo.js b/modules/ui/undo_redo.js index aea4e3565..d3f0a3df7 100644 --- a/modules/ui/undo_redo.js +++ b/modules/ui/undo_redo.js @@ -1,8 +1,14 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import _debounce from 'lodash-es/debounce'; + +import { + event as d3_event, + 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/index'; +import { svgIcon } from '../svg'; import { uiCmd } from './cmd'; import { uiTooltipHtml } from './tooltipHtml'; import { tooltip } from '../util/tooltip'; @@ -54,19 +60,19 @@ export function uiUndoRedo(context) { iconName = 'undo'; } } - d3.select(this) + d3_select(this) .call(svgIcon('#icon-' + iconName)); }); - var keybinding = d3keybinding('undo') - .on(commands[0].cmd, function() { d3.event.preventDefault(); commands[0].action(); }) - .on(commands[1].cmd, function() { d3.event.preventDefault(); commands[1].action(); }); + var keybinding = d3_keybinding('undo') + .on(commands[0].cmd, function() { d3_event.preventDefault(); commands[0].action(); }) + .on(commands[1].cmd, function() { d3_event.preventDefault(); commands[1].action(); }); - d3.select(document) + d3_select(document) .call(keybinding); - var debouncedUpdate = _.debounce(update, 500, { leading: true, trailing: true }); + var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true }); context.map() .on('move.undo_redo', debouncedUpdate) @@ -84,7 +90,7 @@ export function uiUndoRedo(context) { .property('disabled', !editable()) .classed('disabled', function(d) { return !d.annotation(); }) .each(function() { - var selection = d3.select(this); + var selection = d3_select(this); if (selection.property('tooltipVisible')) { selection.call(tooltipBehavior.show); } diff --git a/modules/ui/version.js b/modules/ui/version.js index c73f3a4ed..74955fb47 100644 --- a/modules/ui/version.js +++ b/modules/ui/version.js @@ -1,7 +1,8 @@ import { t } from '../util/locale'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; import { tooltip } from '../util/tooltip'; + // these are module variables so they are preserved through a ui.restart() var sawVersion = null, isNewVersion = false, diff --git a/modules/ui/view_on_osm.js b/modules/ui/view_on_osm.js index 06f0c91fb..17ff0e0b6 100644 --- a/modules/ui/view_on_osm.js +++ b/modules/ui/view_on_osm.js @@ -1,5 +1,5 @@ import { t } from '../util/locale'; -import { svgIcon } from '../svg/index'; +import { svgIcon } from '../svg'; export function uiViewOnOSM(context) { diff --git a/modules/ui/zoom.js b/modules/ui/zoom.js index ba60f349d..3e874ff49 100644 --- a/modules/ui/zoom.js +++ b/modules/ui/zoom.js @@ -1,8 +1,12 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import { + event as d3_event, + 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/index'; +import { svgIcon } from '../svg'; import { uiCmd } from './cmd'; import { uiTooltipHtml } from './tooltipHtml'; import { tooltip } from '../util/tooltip'; @@ -25,25 +29,25 @@ export function uiZoom(context) { function zoomIn() { - d3.event.preventDefault(); + d3_event.preventDefault(); context.zoomIn(); } function zoomOut() { - d3.event.preventDefault(); + d3_event.preventDefault(); context.zoomOut(); } function zoomInFurther() { - d3.event.preventDefault(); + d3_event.preventDefault(); context.zoomInFurther(); } function zoomOutFurther() { - d3.event.preventDefault(); + d3_event.preventDefault(); context.zoomOutFurther(); } @@ -65,23 +69,23 @@ export function uiZoom(context) { ); button.each(function(d) { - d3.select(this) + d3_select(this) .call(svgIcon('#icon-' + d.icon, 'light')); }); - var keybinding = d3keybinding('zoom'); + var keybinding = d3_keybinding('zoom'); - _.each(['plus', 'ffplus', '=', 'ffequals'], function(key) { + ['plus', 'ffplus', '=', 'ffequals'].forEach(function(key) { keybinding.on([key], zoomIn); keybinding.on([uiCmd('⌘' + key)], zoomInFurther); }); - _.each(['_', '-', 'ffminus', 'dash'], function(key) { + ['_', '-', 'ffminus', 'dash'].forEach(function(key) { keybinding.on([key], zoomOut); keybinding.on([uiCmd('⌘' + key)], zoomOutFurther); }); - d3.select(document) + d3_select(document) .call(keybinding); }; }