diff --git a/modules/behavior/select.js b/modules/behavior/select.js index 7cf66ba4c..c5351bc1f 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -111,7 +111,7 @@ export function behaviorSelect(context) { if (dist > tolerance) return; var datum = d3_event.target.__data__ || (_lastMouse && _lastMouse.target.__data__); - var isMultiselect = d3_event.shiftKey || d3_select('.surface .lasso').node(); + var isMultiselect = d3_event.shiftKey || context.surface().select('.lasso').node(); processClick(datum, isMultiselect); } diff --git a/modules/modes/drag_node.js b/modules/modes/drag_node.js index 3f5221b68..79cc9c5fc 100644 --- a/modules/modes/drag_node.js +++ b/modules/modes/drag_node.js @@ -445,7 +445,7 @@ export function modeDragNode(context) { var drag = behaviorDrag() .selector('.layer-touch.points .target') - .surface(d3_select('.main-map').node()) + .surface(context.container().select('.main-map').node()) .origin(origin) .on('start', start) .on('move', move) diff --git a/modules/modes/drag_note.js b/modules/modes/drag_note.js index ed5fbba17..df016c2fb 100644 --- a/modules/modes/drag_note.js +++ b/modules/modes/drag_note.js @@ -1,6 +1,5 @@ import { - event as d3_event, - select as d3_select + event as d3_event } from 'd3-selection'; import { services } from '../services'; @@ -107,7 +106,7 @@ export function modeDragNote(context) { var drag = behaviorDrag() .selector('.layer-touch.markers .target.note.new') - .surface(d3_select('.main-map').node()) + .surface(context.container().select('.main-map').node()) .origin(origin) .on('start', start) .on('move', move) diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 0b68192bf..eddcb2904 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -827,7 +827,7 @@ export function rendererMap(context) { }; map.unobscuredOffsetPx = function() { - var openPane = d3_select('.map-panes .map-pane.shown'); + var openPane = context.container().select('.map-panes .map-pane.shown'); if (!openPane.empty()) { return [openPane.node().offsetWidth/2, 0]; } diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 8060f3081..22996d7c6 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -379,7 +379,8 @@ export default { loadViewer: function(context) { // add mly-wrapper - var wrap = d3_select('.photoviewer').selectAll('.mly-wrapper') + var wrap = context.container().select('.photoviewer') + .selectAll('.mly-wrapper') .data([0]); wrap.enter() @@ -440,14 +441,14 @@ export default { }, - hideViewer: function() { + hideViewer: function(context) { _mlySelectedImageKey = null; if (!_mlyFallback && _mlyViewer) { _mlyViewer.getComponent('sequence').stop(); } - var viewer = d3_select('.photoviewer'); + var viewer = context.container().select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -455,7 +456,7 @@ export default { .selectAll('.photo-wrapper') .classed('hide', true); - d3_selectAll('.viewfield-group, .sequence, .icon-detected') + context.container().selectAll('.viewfield-group, .sequence, .icon-detected') .classed('currentView', false); return this.setStyles(null, true); diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 29219c486..ee96f9810 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -371,10 +371,10 @@ export default { }, - hideViewer: function() { + hideViewer: function(context) { _oscSelectedImage = null; - var viewer = d3_select('.photoviewer'); + var viewer = context.container().select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -382,7 +382,7 @@ export default { .selectAll('.photo-wrapper') .classed('hide', true); - d3_selectAll('.viewfield-group, .sequence, .icon-sign') + context.container().selectAll('.viewfield-group, .sequence, .icon-sign') .classed('currentView', false); return this.setStyles(null, true); diff --git a/modules/services/streetside.js b/modules/services/streetside.js index b92ff31ae..b613c4c95 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -692,8 +692,8 @@ export default { /** * hideViewer() */ - hideViewer: function () { - let viewer = d3_select('.photoviewer'); + hideViewer: function (context) { + let viewer = context.container().select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -701,7 +701,7 @@ export default { .selectAll('.photo-wrapper') .classed('hide', true); - d3_selectAll('.viewfield-group, .sequence, .icon-sign') + context.container().selectAll('.viewfield-group, .sequence, .icon-sign') .classed('currentView', false); return this.setStyles(null, true); diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js index 210451670..3b5f01d18 100644 --- a/modules/ui/entity_editor.js +++ b/modules/ui/entity_editor.js @@ -1,5 +1,5 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; -import { event as d3_event, selectAll as d3_selectAll } from 'd3-selection'; +import { event as d3_event } from 'd3-selection'; import deepEqual from 'fast-deep-equal'; import { t, textDirection } from '../util/locale'; @@ -154,7 +154,7 @@ export function uiEntityEditor(context) { if (priorActivePreset && _activePresets.length === 1 && priorActivePreset !== _activePresets[0]) { // flash the button to indicate the preset changed - d3_selectAll('.entity-editor button.preset-reset .label') + context.container().selectAll('.entity-editor button.preset-reset .label') .style('background-color', '#fff') .transition() .duration(750) diff --git a/modules/ui/info.js b/modules/ui/info.js index efe1b99b0..a67ed7f64 100644 --- a/modules/ui/info.js +++ b/modules/ui/info.js @@ -94,7 +94,7 @@ export function uiInfo(context) { wasActive = [which]; } - d3_select('.' + which + '-panel-toggle-item') + context.container().select('.' + which + '-panel-toggle-item') .classed('active', active[which]) .select('input') .property('checked', active[which]); diff --git a/modules/ui/init.js b/modules/ui/init.js index 7d6a028fc..ba1ba783f 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -1,7 +1,6 @@ import { event as d3_event, - select as d3_select, - selectAll as d3_selectAll + select as d3_select } from 'd3-selection'; import { t, textDirection, setLocale } from '../util/locale'; @@ -422,8 +421,8 @@ export function uiInit(context) { // Recalc dimensions of map and sidebar.. (`true` = force recalc) // This will call `getBoundingClientRect` and trigger reflow, // but the values will be cached for later use. - var mapDimensions = utilGetDimensions(d3_select('.main-content'), true); - utilGetDimensions(d3_select('.sidebar'), true); + var mapDimensions = utilGetDimensions(context.container().select('.main-content'), true); + utilGetDimensions(context.container().select('.sidebar'), true); if (withPan !== undefined) { map.redrawEnable(false); @@ -470,14 +469,14 @@ export function uiInit(context) { }; ui.togglePanes = function(showPane) { - var shownPanes = d3_selectAll('.map-pane.shown'); + var shownPanes = context.container().selectAll('.map-pane.shown'); var side = textDirection === 'ltr' ? 'right' : 'left'; shownPanes .classed('shown', false); - d3_selectAll('.map-pane-control button') + context.container().selectAll('.map-pane-control button') .classed('active', false); if (showPane) { @@ -485,7 +484,7 @@ export function uiInit(context) { .style('display', 'none') .style(side, '-500px'); - d3_selectAll('.' + showPane.attr('pane') + '-control button') + context.container().selectAll('.' + showPane.attr('pane') + '-control button') .classed('active', true); showPane diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js index 1fff0aa40..5715f2aaa 100644 --- a/modules/ui/inspector.js +++ b/modules/ui/inspector.js @@ -1,5 +1,5 @@ import { interpolate as d3_interpolate } from 'd3-interpolate'; -import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection'; +import { select as d3_select } from 'd3-selection'; import { uiEntityEditor } from './entity_editor'; import { uiPresetList } from './preset_list'; @@ -136,7 +136,7 @@ export function uiInspector(context) { entityEditor.state(_state); // remove any old field help overlay that might have gotten attached to the inspector - d3_selectAll('.field-help-body').remove(); + context.container().selectAll('.field-help-body').remove(); return inspector; }; diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index d9e60fa14..1ec957467 100644 --- a/modules/ui/intro/intro.js +++ b/modules/ui/intro/intro.js @@ -1,4 +1,4 @@ -import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection'; +import { select as d3_select } from 'd3-selection'; import { t, textDirection } from '../../util/locale'; import { localize } from './helper'; @@ -72,14 +72,14 @@ export function uiIntro(context) { let zoom = context.map().zoom(); let background = context.background().baseLayerSource(); let overlays = context.background().overlayLayerSources(); - let opacity = d3_selectAll('.main-map .layer-background').style('opacity'); + let opacity = context.container().selectAll('.main-map .layer-background').style('opacity'); let caches = osm && osm.caches(); let baseEntities = context.history().graph().base().entities; // Show sidebar and disable the sidebar resizing button // (this needs to be before `context.inIntro(true)`) context.ui().sidebar.expand(); - d3_selectAll('button.sidebar-toggle').classed('disabled', true); + context.container().selectAll('button.sidebar-toggle').classed('disabled', true); // Block saving context.inIntro(true); @@ -109,7 +109,7 @@ export function uiIntro(context) { }); - d3_selectAll('.main-map .layer-background').style('opacity', 1); + context.container().selectAll('.main-map .layer-background').style('opacity', 1); let curtain = uiCurtain(); selection.call(curtain); @@ -156,8 +156,8 @@ export function uiIntro(context) { curtain.remove(); navwrap.remove(); - d3_selectAll('.main-map .layer-background').style('opacity', opacity); - d3_selectAll('button.sidebar-toggle').classed('disabled', false); + context.container().selectAll('.main-map .layer-background').style('opacity', opacity); + context.container().selectAll('button.sidebar-toggle').classed('disabled', false); if (osm) { osm.toggle(true).reset().caches(caches); } context.history().reset().merge(Object.values(baseEntities)); context.background().baseLayerSource(background); diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js index f6fc21c8d..4ee09861c 100644 --- a/modules/ui/intro/start_editing.js +++ b/modules/ui/intro/start_editing.js @@ -1,7 +1,6 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; import { - select as d3_select, - selectAll as d3_selectAll + select as d3_select } from 'd3-selection'; import { t } from '../../util/locale'; @@ -38,7 +37,7 @@ export function uiIntroStartEditing(context, reveal) { } function showSave() { - d3_selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts reveal('.top-toolbar button.save', t('intro.startediting.save'), { buttonText: t('intro.ok'), @@ -48,7 +47,7 @@ export function uiIntroStartEditing(context, reveal) { } function showStart() { - d3_selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts modalSelection = uiModal(context.container()); @@ -86,7 +85,7 @@ export function uiIntroStartEditing(context, reveal) { chapter.exit = function() { modalSelection.remove(); - d3_selectAll('.shaded').remove(); // in case user opened keyboard shortcuts + context.container().selectAll('.shaded').remove(); // in case user opened keyboard shortcuts }; diff --git a/modules/ui/issues_info.js b/modules/ui/issues_info.js index 6d97a4cec..8592462a6 100644 --- a/modules/ui/issues_info.js +++ b/modules/ui/issues_info.js @@ -71,7 +71,7 @@ export function uiIssuesInfo(context) { tooltipBehavior.hide(d3_select(this)); // open the Issues pane - context.ui().togglePanes(d3_select('.map-panes .issues-pane')); + context.ui().togglePanes(context.container().select('.map-panes .issues-pane')); }); chipSelection.call(svgIcon('#' + d.iconID)); diff --git a/modules/ui/map_in_map.js b/modules/ui/map_in_map.js index 7d88928f9..4a4d81436 100644 --- a/modules/ui/map_in_map.js +++ b/modules/ui/map_in_map.js @@ -263,7 +263,7 @@ export function uiMapInMap(context) { _isHidden = !_isHidden; - d3_select('.minimap-toggle-item') + context.container().select('.minimap-toggle-item') .classed('active', !_isHidden) .select('input') .property('checked', !_isHidden); diff --git a/modules/ui/panels/background.js b/modules/ui/panels/background.js index eb7c515d7..c1ecb5839 100644 --- a/modules/ui/panels/background.js +++ b/modules/ui/panels/background.js @@ -1,8 +1,7 @@ import _debounce from 'lodash-es/debounce'; import { - event as d3_event, - select as d3_select + event as d3_event } from 'd3-selection'; import { t } from '../../util/locale'; @@ -101,7 +100,7 @@ export function uiPanelBackground(context) { var debouncedGetMetadata = _debounce(getMetadata, 250); function getMetadata(selection) { - var tile = d3_select('.layer-background img.tile-center'); // tile near viewport center + var tile = context.container().select('.layer-background img.tile-center'); // tile near viewport center if (tile.empty()) return; var sourceName = currSourceName; diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index a9accb740..2c864a3ac 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -18,9 +18,9 @@ export function uiPhotoviewer(context) { .append('button') .attr('class', 'thumb-hide') .on('click', function () { - if (services.streetside) { services.streetside.hideViewer(); } - if (services.mapillary) { services.mapillary.hideViewer(); } - if (services.openstreetcam) { services.openstreetcam.hideViewer(); } + if (services.streetside) { services.streetside.hideViewer(context); } + if (services.mapillary) { services.mapillary.hideViewer(context); } + if (services.openstreetcam) { services.openstreetcam.hideViewer(context); } }) .append('div') .call(svgIcon('#iD-icon-close')); @@ -104,8 +104,8 @@ export function uiPhotoviewer(context) { } photoviewer.onMapResize = function() { - var photoviewer = d3_select('.photoviewer'); - var content = d3_select('.main-content'); + var photoviewer = context.container().select('.photoviewer'); + var content = context.container().select('.main-content'); var mapDimensions = utilGetDimensions(content, true); // shrink photo viewer if it is too big // (-90 preserves space at top and bottom of map used by menus) diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js index 27c65e43a..2fcfd9de9 100644 --- a/modules/ui/preset_list.js +++ b/modules/ui/preset_list.js @@ -3,8 +3,7 @@ import * as countryCoder from '@ideditor/country-coder'; import { event as d3_event, - select as d3_select, - selectAll as d3_selectAll + select as d3_select } from 'd3-selection'; import { t, textDirection } from '../util/locale'; @@ -434,7 +433,7 @@ export function uiPresetList(context) { if (!_entityIDs.every(context.hasEntity)) return; var geometries = entityGeometries(); - var button = d3_selectAll('.preset-list .preset-list-button'); + var button = context.container().selectAll('.preset-list .preset-list-button'); // remove existing tooltips button.call(tooltip().destroyAny); diff --git a/modules/ui/sections/background_offset.js b/modules/ui/sections/background_offset.js index 53adba172..42bfe71e3 100644 --- a/modules/ui/sections/background_offset.js +++ b/modules/ui/sections/background_offset.js @@ -1,7 +1,6 @@ import { event as d3_event, - select as d3_select, - selectAll as d3_selectAll + select as d3_select } from 'd3-selection'; import { t, textDirection } from '../../util/locale'; @@ -36,12 +35,12 @@ export function uiSectionBackgroundOffset(context) { var x = +meters[0].toFixed(2); var y = +meters[1].toFixed(2); - d3_selectAll('.nudge-inner-rect') + context.container().selectAll('.nudge-inner-rect') .select('input') .classed('error', false) .property('value', x + ', ' + y); - d3_selectAll('.nudge-reset') + context.container().selectAll('.nudge-reset') .classed('disabled', function() { return (x === 0 && y === 0); }); @@ -125,7 +124,7 @@ export function uiSectionBackgroundOffset(context) { }) .on('mouseup.offset', function() { if (d3_event.button !== 0) return; - d3_selectAll('.nudge-surface') + context.container().selectAll('.nudge-surface') .remove(); d3_select(window) diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index d0bfde270..660546a1a 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -1,4 +1,4 @@ -import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection'; +import { select as d3_select } from 'd3-selection'; import { t } from '../util/locale'; import { svgIcon } from '../svg/icon'; @@ -17,7 +17,7 @@ export function uiShortcuts(context) { context.keybinding() .on([t('shortcuts.toggle.key'), '?'], function () { - if (d3_selectAll('.modal-shortcuts').size()) { // already showing + if (context.container().selectAll('.modal-shortcuts').size()) { // already showing if (_modalSelection) { _modalSelection.close(); _modalSelection = null; diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js index 14d6c919d..e66fdb751 100644 --- a/modules/ui/sidebar.js +++ b/modules/ui/sidebar.js @@ -4,9 +4,7 @@ import { drag as d3_drag } from 'd3-drag'; import { interpolateNumber as d3_interpolateNumber } from 'd3-interpolate'; import { - select as d3_select, - event as d3_event, - selectAll as d3_selectAll + event as d3_event } from 'd3-selection'; import { utilArrayIdentical } from '../util/array'; import { osmEntity, osmNote, QAItem } from '../osm'; @@ -35,7 +33,7 @@ export function uiSidebar(context) { function sidebar(selection) { - var container = d3_select('#id-container'); + var container = context.container(); var minWidth = 280; var sidebarWidth; var containerWidth; @@ -159,7 +157,7 @@ export function uiSidebar(context) { errEditor = improveOsmEditor; } - d3_selectAll('.qaItem.' + datum.service) + context.container().selectAll('.qaItem.' + datum.service) .classed('hover', function(d) { return d.id === datum.id; }); sidebar @@ -197,8 +195,8 @@ export function uiSidebar(context) { _wasNote = false; _wasData = false; _wasQaItem = false; - d3_selectAll('.note').classed('hover', false); - d3_selectAll('.qaItem').classed('hover', false); + context.container().selectAll('.note').classed('hover', false); + context.container().selectAll('.qaItem').classed('hover', false); sidebar.hide(); } } diff --git a/modules/ui/tools/modes.js b/modules/ui/tools/modes.js index c8a3cac13..2c7d52832 100644 --- a/modules/ui/tools/modes.js +++ b/modules/ui/tools/modes.js @@ -130,7 +130,7 @@ export function uiToolOldDrawModes(context) { .placement('bottom') .html(true) .title(function(d) { return uiTooltipHtml(d.description, d.key); }) - .scrollContainer(d3_select('.top-toolbar')) + .scrollContainer(context.container().select('.top-toolbar')) ); buttonsEnter diff --git a/modules/ui/tools/notes.js b/modules/ui/tools/notes.js index 611fc3edc..70fe4b9ab 100644 --- a/modules/ui/tools/notes.js +++ b/modules/ui/tools/notes.js @@ -107,7 +107,7 @@ export function uiToolNotes(context) { .placement('bottom') .html(true) .title(function(d) { return uiTooltipHtml(d.description, d.key); }) - .scrollContainer(d3_select('.top-toolbar')) + .scrollContainer(context.container().select('.top-toolbar')) ); buttonsEnter diff --git a/modules/ui/tools/save.js b/modules/ui/tools/save.js index af17a9515..3455ef4be 100644 --- a/modules/ui/tools/save.js +++ b/modules/ui/tools/save.js @@ -1,5 +1,5 @@ import { interpolateRgb as d3_interpolateRgb } from 'd3-interpolate'; -import { event as d3_event, select as d3_select } from 'd3-selection'; +import { event as d3_event } from 'd3-selection'; import { t } from '../../util/locale'; import { modeSave } from '../../modes'; @@ -80,7 +80,7 @@ export function uiToolSave(context) { .placement('bottom') .html(true) .title(uiTooltipHtml(t('save.no_changes'), key)) - .scrollContainer(d3_select('.top-toolbar')); + .scrollContainer(context.container().select('.top-toolbar')); button = selection .append('button') diff --git a/modules/ui/tools/sidebar_toggle.js b/modules/ui/tools/sidebar_toggle.js index e7beb3932..8e75884ab 100644 --- a/modules/ui/tools/sidebar_toggle.js +++ b/modules/ui/tools/sidebar_toggle.js @@ -1,4 +1,3 @@ -import { select as d3_select } from 'd3-selection'; import { t, textDirection } from '../../util/locale'; import { svgIcon } from '../../svg'; import { uiTooltipHtml } from '../tooltipHtml'; @@ -22,7 +21,7 @@ export function uiToolSidebarToggle(context) { .placement('bottom') .html(true) .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key'))) - .scrollContainer(d3_select('.top-toolbar')) + .scrollContainer(context.container().select('.top-toolbar')) ) .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left'))); }; diff --git a/modules/ui/tools/undo_redo.js b/modules/ui/tools/undo_redo.js index bf2464a30..097ee7124 100644 --- a/modules/ui/tools/undo_redo.js +++ b/modules/ui/tools/undo_redo.js @@ -46,7 +46,7 @@ export function uiToolUndoRedo(context) { t(d.id + '.tooltip', {action: d.annotation()}) : t(d.id + '.nothing'), d.cmd); }) - .scrollContainer(d3_select('.top-toolbar')); + .scrollContainer(context.container().select('.top-toolbar')); var buttons = selection.selectAll('button') .data(commands)