From 75d2c45fd6f02aec087c80fe43e2b0da0b421ee2 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 24 Sep 2017 21:43:54 -0400 Subject: [PATCH] Convert lodah-es and d3 to named imports for behaviors --- modules/behavior/add_way.js | 9 +++-- modules/behavior/breathe.js | 24 ++++++++---- modules/behavior/copy.js | 29 ++++++++------ modules/behavior/drag.js | 51 ++++++++++++++---------- modules/behavior/draw.js | 73 +++++++++++++++++++++-------------- modules/behavior/draw_way.js | 24 +++++++++--- modules/behavior/hash.js | 24 ++++++++---- modules/behavior/hover.js | 32 ++++++++------- modules/behavior/lasso.js | 29 +++++++++----- modules/behavior/operation.js | 16 +++++--- modules/behavior/paste.js | 30 ++++++++------ modules/behavior/select.js | 49 ++++++++++++++--------- modules/behavior/tail.js | 22 ++++++----- modules/util/index.js | 4 +- 14 files changed, 259 insertions(+), 157 deletions(-) diff --git a/modules/behavior/add_way.js b/modules/behavior/add_way.js index fe0d34a79..41a36e35c 100644 --- a/modules/behavior/add_way.js +++ b/modules/behavior/add_way.js @@ -1,11 +1,12 @@ -import * as d3 from 'd3'; -import { utilRebind } from '../util/rebind'; -import { modeBrowse } from '../modes/index'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + import { behaviorDraw } from './draw'; +import { modeBrowse } from '../modes'; +import { utilRebind } from '../util/rebind'; export function behaviorAddWay(context) { - var dispatch = d3.dispatch('start', 'startFromWay', 'startFromNode'), + var dispatch = d3_dispatch('start', 'startFromWay', 'startFromNode'), draw = behaviorDraw(context); var addWay = function(surface) { diff --git a/modules/behavior/breathe.js b/modules/behavior/breathe.js index 80870914f..f90a89f30 100644 --- a/modules/behavior/breathe.js +++ b/modules/behavior/breathe.js @@ -1,12 +1,20 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _isEqual from 'lodash-es/isEqual'; + +import { + interpolateNumber as d3_interpolateNumber, + quantize as d3_quantize +} from 'd3-interpolate'; + +import { select as d3_select } from 'd3-selection'; +import { scaleQuantize as d3_scaleQuantize } from 'd3-scale'; +import { timer as d3_timer } from 'd3-timer'; export function behaviorBreathe() { var duration = 800, steps = 4, selector = '.selected.shadow, .selected .shadow', - selected = d3.select(null), + selected = d3_select(null), classed = '', params = {}, done = false, @@ -16,9 +24,9 @@ export function behaviorBreathe() { function ratchetyInterpolator(a, b, steps, units) { a = parseFloat(a); b = parseFloat(b); - var sample = d3.scaleQuantize() + var sample = d3_scaleQuantize() .domain([0, 1]) - .range(d3.quantize(d3.interpolateNumber(a, b), steps)); + .range(d3_quantize(d3_interpolateNumber(a, b), steps)); return function(t) { return String(sample(t)) + (units || ''); @@ -76,7 +84,7 @@ export function behaviorBreathe() { selection .call(reset) .each(function(d) { - var s = d3.select(this), + var s = d3_select(this), tag = s.node().tagName, p = {'from': {}, 'to': {}}, opacity, width; @@ -111,7 +119,7 @@ export function behaviorBreathe() { return; } - if (!_.isEqual(currSelected.data(), selected.data()) || currClassed !== classed) { + if (!_isEqual(currSelected.data(), selected.data()) || currClassed !== classed) { selected.call(reset); classed = currClassed; selected = currSelected.call(calcAnimationParams); @@ -129,7 +137,7 @@ export function behaviorBreathe() { var breathe = function(surface) { done = false; - timer = d3.timer(function() { + timer = d3_timer(function() { // wait for elements to actually become selected if (surface.selectAll(selector).empty()) { return false; diff --git a/modules/behavior/copy.js b/modules/behavior/copy.js index 8535f6d77..34e5ac88f 100644 --- a/modules/behavior/copy.js +++ b/modules/behavior/copy.js @@ -1,17 +1,24 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; -import { uiCmd } from '../ui/index'; +import _extend from 'lodash-es/extend'; +import _groupBy from 'lodash-es/groupBy'; +import _map from 'lodash-es/map'; + +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 '../ui'; export function behaviorCopy(context) { - var keybinding = d3keybinding('copy'); + var keybinding = d3_keybinding('copy'); function groupEntities(ids, graph) { var entities = ids.map(function (id) { return graph.entity(id); }); - return _.extend({relation: [], way: [], node: []}, - _.groupBy(entities, function(entity) { return entity.type; })); + return _extend({relation: [], way: [], node: []}, + _groupBy(entities, function(entity) { return entity.type; })); } @@ -22,7 +29,7 @@ export function behaviorCopy(context) { descendants = descendants || {}; if (entity.type === 'relation') { - children = _.map(entity.members, 'id'); + children = _map(entity.members, 'id'); } else if (entity.type === 'way') { children = entity.nodes; } else { @@ -41,7 +48,7 @@ export function behaviorCopy(context) { function doCopy() { - d3.event.preventDefault(); + d3_event.preventDefault(); var graph = context.graph(), selected = groupEntities(context.selectedIDs(), graph), @@ -76,13 +83,13 @@ export function behaviorCopy(context) { function copy() { keybinding.on(uiCmd('⌘C'), doCopy); - d3.select(document).call(keybinding); + d3_select(document).call(keybinding); return copy; } copy.off = function() { - d3.select(document).call(keybinding.off); + d3_select(document).call(keybinding.off); }; diff --git a/modules/behavior/drag.js b/modules/behavior/drag.js index 760b878ca..ebd2ea706 100644 --- a/modules/behavior/drag.js +++ b/modules/behavior/drag.js @@ -1,13 +1,24 @@ -import * as d3 from 'd3'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + customEvent as d3_customEvent, + event as d3_event, + mouse as d3_mouse, + select as d3_select, + selection as d3_selection, + touches as d3_touches +} from 'd3-selection'; + import { utilRebind } from '../util/rebind'; + import { utilPrefixCSSProperty, utilPrefixDOMProperty -} from '../util/index'; +} from '../util'; /* - `behaviorDrag` is like `d3.behavior.drag`, with the following differences: + `behaviorDrag` is like `d3_behavior.drag`, with the following differences: * The `origin` function is expected to return an [x, y] tuple rather than an {x, y} object. @@ -22,7 +33,7 @@ import { */ export function behaviorDrag() { - var event = d3.dispatch('start', 'move', 'end'), + var event = d3_dispatch('start', 'move', 'end'), origin = null, selector = '', filter = null, @@ -31,7 +42,7 @@ export function behaviorDrag() { var d3_event_userSelectProperty = utilPrefixCSSProperty('UserSelect'), d3_event_userSelectSuppress = function() { - var selection = d3.selection(), + var selection = d3_selection(), select = selection.style(d3_event_userSelectProperty); selection.style(d3_event_userSelectProperty, 'none'); return function() { @@ -41,15 +52,15 @@ export function behaviorDrag() { function d3_eventCancel() { - d3.event.stopPropagation(); - d3.event.preventDefault(); + d3_event.stopPropagation(); + d3_event.preventDefault(); } function eventOf(thiz, argumentz) { return function(e1) { e1.target = drag; - d3.customEvent(e1, event.apply, event, [e1.type, thiz, argumentz]); + d3_customEvent(e1, event.apply, event, [e1.type, thiz, argumentz]); }; } @@ -58,14 +69,14 @@ export function behaviorDrag() { target = this; event_ = eventOf(target, arguments); - var eventTarget = d3.event.target, - touchId = d3.event.touches ? d3.event.changedTouches[0].identifier : null, + var eventTarget = d3_event.target, + touchId = d3_event.touches ? d3_event.changedTouches[0].identifier : null, offset, origin_ = point(), started = false, selectEnable = d3_event_userSelectSuppress(touchId !== null ? 'drag-' + touchId : 'drag'); - d3.select(window) + d3_select(window) .on(touchId !== null ? 'touchmove.drag-' + touchId : 'mousemove.drag', dragmove) .on(touchId !== null ? 'touchend.drag-' + touchId : 'mouseup.drag', dragend, true); @@ -77,15 +88,15 @@ export function behaviorDrag() { } if (touchId === null) { - d3.event.stopPropagation(); + d3_event.stopPropagation(); } function point() { var p = surface || target.parentNode; - return touchId !== null ? d3.touches(p).filter(function(p) { + return touchId !== null ? d3_touches(p).filter(function(p) { return p.identifier === touchId; - })[0] : d3.mouse(p); + })[0] : d3_mouse(p); } @@ -118,13 +129,13 @@ export function behaviorDrag() { event_({ type: 'end' }); d3_eventCancel(); - if (d3.event.target === eventTarget) { - d3.select(window) + if (d3_event.target === eventTarget) { + d3_select(window) .on('click.drag', click, true); } } - d3.select(window) + d3_select(window) .on(touchId !== null ? 'touchmove.drag-' + touchId : 'mousemove.drag', null) .on(touchId !== null ? 'touchend.drag-' + touchId : 'mouseup.drag', null); @@ -134,7 +145,7 @@ export function behaviorDrag() { function click() { d3_eventCancel(); - d3.select(window) + d3_select(window) .on('click.drag', null); } } @@ -147,7 +158,7 @@ export function behaviorDrag() { if (selector) { delegate = function() { var root = this, - target = d3.event.target; + target = d3_event.target; for (; target && target !== root; target = target.parentNode) { if (target[matchesSelector](selector) && (!filter || filter(target.__data__))) { @@ -192,7 +203,7 @@ export function behaviorDrag() { drag.cancel = function() { - d3.select(window) + d3_select(window) .on('mousemove.drag', null) .on('mouseup.drag', null); return drag; diff --git a/modules/behavior/draw.js b/modules/behavior/draw.js index f5f082ab5..62c6031f6 100644 --- a/modules/behavior/draw.js +++ b/modules/behavior/draw.js @@ -1,9 +1,22 @@ -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, + mouse as d3_mouse, + select as d3_select, + touches as d3_touches +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; import { behaviorEdit } from './edit'; import { behaviorHover } from './hover'; import { behaviorTail } from './tail'; -import { geoChooseEdge, geoEuclideanDistance } from '../geo/index'; + +import { + geoChooseEdge, + geoEuclideanDistance +} from '../geo'; + import { utilRebind } from '../util/rebind'; @@ -13,9 +26,9 @@ var lastSpace = null; export function behaviorDraw(context) { - var dispatch = d3.dispatch('move', 'click', 'clickWay', + var dispatch = d3_dispatch('move', 'click', 'clickWay', 'clickNode', 'undo', 'cancel', 'finish'), - keybinding = d3keybinding('draw'), + keybinding = d3_keybinding('draw'), hover = behaviorHover(context) .altDisables(true) .on('hover', context.ui().sidebar.hover), @@ -28,12 +41,12 @@ export function behaviorDraw(context) { function datum() { - if (d3.event.altKey) return {}; + if (d3_event.altKey) return {}; - if (d3.event.type === 'keydown') { + if (d3_event.type === 'keydown') { return (lastMouse && lastMouse.target.__data__) || {}; } else { - return d3.event.target.__data__ || {}; + return d3_event.target.__data__ || {}; } } @@ -42,37 +55,37 @@ export function behaviorDraw(context) { function point() { var p = context.container().node(); - return touchId !== null ? d3.touches(p).filter(function(p) { + return touchId !== null ? d3_touches(p).filter(function(p) { return p.identifier === touchId; - })[0] : d3.mouse(p); + })[0] : d3_mouse(p); } - var element = d3.select(this), - touchId = d3.event.touches ? d3.event.changedTouches[0].identifier : null, + var element = d3_select(this), + touchId = d3_event.touches ? d3_event.changedTouches[0].identifier : null, t1 = +new Date(), p1 = point(); element.on('mousemove.draw', null); - d3.select(window).on('mouseup.draw', function() { + d3_select(window).on('mouseup.draw', function() { var t2 = +new Date(), p2 = point(), dist = geoEuclideanDistance(p1, p2); element.on('mousemove.draw', mousemove); - d3.select(window).on('mouseup.draw', null); + d3_select(window).on('mouseup.draw', null); if (dist < closeTolerance || (dist < tolerance && (t2 - t1) < 500)) { // Prevent a quick second click - d3.select(window).on('click.draw-block', function() { - d3.event.stopPropagation(); + d3_select(window).on('click.draw-block', function() { + d3_event.stopPropagation(); }, true); context.map().dblclickEnable(false); window.setTimeout(function() { context.map().dblclickEnable(true); - d3.select(window).on('click.draw-block', null); + d3_select(window).on('click.draw-block', null); }, 500); click(); @@ -82,7 +95,7 @@ export function behaviorDraw(context) { function mousemove() { - lastMouse = d3.event; + lastMouse = d3_event; dispatch.call('move', this, datum()); } @@ -124,8 +137,8 @@ export function behaviorDraw(context) { function space() { - d3.event.preventDefault(); - d3.event.stopPropagation(); + d3_event.preventDefault(); + d3_event.stopPropagation(); var currSpace = context.mouse(); if (disableSpace && lastSpace) { @@ -141,11 +154,11 @@ export function behaviorDraw(context) { lastSpace = currSpace; disableSpace = true; - d3.select(window).on('keyup.space-block', function() { - d3.event.preventDefault(); - d3.event.stopPropagation(); + d3_select(window).on('keyup.space-block', function() { + d3_event.preventDefault(); + d3_event.stopPropagation(); disableSpace = false; - d3.select(window).on('keyup.space-block', null); + d3_select(window).on('keyup.space-block', null); }); click(); @@ -153,19 +166,19 @@ export function behaviorDraw(context) { function backspace() { - d3.event.preventDefault(); + d3_event.preventDefault(); dispatch.call('undo'); } function del() { - d3.event.preventDefault(); + d3_event.preventDefault(); dispatch.call('cancel'); } function ret() { - d3.event.preventDefault(); + d3_event.preventDefault(); dispatch.call('finish'); } @@ -192,7 +205,7 @@ export function behaviorDraw(context) { .on('mousedown.draw', mousedown) .on('mousemove.draw', mousemove); - d3.select(document) + d3_select(document) .call(keybinding); return draw; @@ -215,11 +228,11 @@ export function behaviorDraw(context) { .on('mousedown.draw', null) .on('mousemove.draw', null); - d3.select(window) + d3_select(window) .on('mouseup.draw', null); // note: keyup.space-block, click.draw-block should remain - d3.select(document) + d3_select(document) .call(keybinding.off); }; diff --git a/modules/behavior/draw_way.js b/modules/behavior/draw_way.js index 80bba15c8..57ecfb193 100644 --- a/modules/behavior/draw_way.js +++ b/modules/behavior/draw_way.js @@ -1,4 +1,5 @@ -import _ from 'lodash'; +import _clone from 'lodash-es/clone'; + import { t } from '../util/locale'; import { @@ -9,9 +10,22 @@ import { } from '../actions'; import { behaviorDraw } from './draw'; -import { geoChooseEdge, geoEdgeEqual } from '../geo'; -import { modeBrowse, modeSelect } from '../modes'; -import { osmNode, osmWay } from '../osm'; + +import { + geoChooseEdge, + geoEdgeEqual +} from '../geo'; + +import { + modeBrowse, + modeSelect +} from '../modes'; + +import { + osmNode, + osmWay +} from '../osm'; + import { utilEntitySelector } from '../util'; @@ -37,7 +51,7 @@ export function behaviorDrawWay(context, wayId, index, mode, startGraph) { end = osmNode({ id: 'nEnd', loc: context.map().mouseCoordinates() }); segment = osmWay({ id: 'wTemp', nodes: typeof index === 'undefined' ? [start.id, end.id] : [end.id, start.id], - tags: _.clone(origWay.tags) + tags: _clone(origWay.tags) }); } else { end = osmNode({ loc: context.map().mouseCoordinates() }); diff --git a/modules/behavior/hash.js b/modules/behavior/hash.js index 63cece2df..e295fb491 100644 --- a/modules/behavior/hash.js +++ b/modules/behavior/hash.js @@ -1,8 +1,16 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _assign from 'lodash-es/assign'; +import _omit from 'lodash-es/omit'; +import _throttle from 'lodash-es/throttle'; + +import { select as d3_select } from 'd3-selection'; + import { geoSphericalDistance } from '../geo'; import { modeBrowse } from '../modes'; -import { utilQsString, utilStringQs } from '../util'; + +import { + utilQsString, + utilStringQs +} from '../util'; export function behaviorHash(context) { @@ -37,7 +45,7 @@ export function behaviorHash(context) { var center = map.center(), zoom = map.zoom(), precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)), - q = _.omit(utilStringQs(window.location.hash.substring(1)), + q = _omit(utilStringQs(window.location.hash.substring(1)), ['comment', 'hashtags', 'walkthrough'] ), newParams = {}; @@ -54,7 +62,7 @@ export function behaviorHash(context) { '/' + center[1].toFixed(precision) + '/' + center[0].toFixed(precision); - return '#' + utilQsString(_.assign(q, newParams), true); + return '#' + utilQsString(_assign(q, newParams), true); }; @@ -67,7 +75,7 @@ export function behaviorHash(context) { } - var throttledUpdate = _.throttle(update, 500); + var throttledUpdate = _throttle(update, 500); function hashchange() { @@ -85,7 +93,7 @@ export function behaviorHash(context) { context .on('enter.hash', throttledUpdate); - d3.select(window) + d3_select(window) .on('hashchange.hash', hashchange); if (window.location.hash) { @@ -127,7 +135,7 @@ export function behaviorHash(context) { context .on('enter.hash', null); - d3.select(window) + d3_select(window) .on('hashchange.hash', null); window.location.hash = ''; diff --git a/modules/behavior/hover.js b/modules/behavior/hover.js index 4d0bb7882..f7ea0b4eb 100644 --- a/modules/behavior/hover.js +++ b/modules/behavior/hover.js @@ -1,5 +1,11 @@ -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 { osmEntity } from '../osm/index'; import { utilRebind } from '../util/rebind'; @@ -14,8 +20,8 @@ import { utilRebind } from '../util/rebind'; have the .hover class. */ export function behaviorHover(context) { - var dispatch = d3.dispatch('hover'), - _selection = d3.select(null), + var dispatch = d3_dispatch('hover'), + _selection = d3_select(null), newId = null, buttonDown, altDisables, @@ -23,7 +29,7 @@ export function behaviorHover(context) { function keydown() { - if (altDisables && d3.event.keyCode === d3keybinding.modifierCodes.alt) { + if (altDisables && d3_event.keyCode === d3_keybinding.modifierCodes.alt) { _selection.selectAll('.hover') .classed('hover-suppressed', true) .classed('hover', false); @@ -37,7 +43,7 @@ export function behaviorHover(context) { function keyup() { - if (altDisables && d3.event.keyCode === d3keybinding.modifierCodes.alt) { + if (altDisables && d3_event.keyCode === d3_keybinding.modifierCodes.alt) { _selection.selectAll('.hover-suppressed') .classed('hover-suppressed', false) .classed('hover', true); @@ -59,35 +65,35 @@ export function behaviorHover(context) { .on('mouseout.hover', mouseout) .on('mousedown.hover', mousedown); - d3.select(window) + d3_select(window) .on('keydown.hover', keydown) .on('keyup.hover', keyup); function mouseover() { if (buttonDown) return; - var target = d3.event.target; + var target = d3_event.target; enter(target ? target.__data__ : null); } function mouseout() { if (buttonDown) return; - var target = d3.event.relatedTarget; + var target = d3_event.relatedTarget; enter(target ? target.__data__ : null); } function mousedown() { buttonDown = true; - d3.select(window) + d3_select(window) .on('mouseup.hover', mouseup, true); } function mouseup() { buttonDown = false; - d3.select(window) + d3_select(window) .on('mouseup.hover', null, true); } @@ -118,7 +124,7 @@ export function behaviorHover(context) { }); } - var suppressed = altDisables && d3.event && d3.event.altKey; + var suppressed = altDisables && d3_event && d3_event.altKey; _selection.selectAll(selector) .classed(suppressed ? 'hover-suppressed' : 'hover', true); @@ -147,7 +153,7 @@ export function behaviorHover(context) { .on('mouseout.hover', null) .on('mousedown.hover', null); - d3.select(window) + d3_select(window) .on('keydown.hover', null) .on('keyup.hover', null); }; diff --git a/modules/behavior/lasso.js b/modules/behavior/lasso.js index cfad8d9a6..9fe82bcd2 100644 --- a/modules/behavior/lasso.js +++ b/modules/behavior/lasso.js @@ -1,8 +1,17 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { geoExtent, geoPointInPolygon } from '../geo/index'; -import { modeSelect } from '../modes/index'; -import { uiLasso } from '../ui/index'; +import _map from 'lodash-es/map'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { + geoExtent, + geoPointInPolygon +} from '../geo'; + +import { modeSelect } from '../modes'; +import { uiLasso } from '../ui'; export function behaviorLasso(context) { @@ -13,14 +22,14 @@ export function behaviorLasso(context) { function mousedown() { var button = 0; // left - if (d3.event.button === button && d3.event.shiftKey === true) { + if (d3_event.button === button && d3_event.shiftKey === true) { lasso = null; - d3.select(window) + d3_select(window) .on('mousemove.lasso', mousemove) .on('mouseup.lasso', mouseup); - d3.event.stopPropagation(); + d3_event.stopPropagation(); } } @@ -49,7 +58,7 @@ export function behaviorLasso(context) { bounds = lasso.extent().map(context.projection.invert), extent = geoExtent(normalize(bounds[0], bounds[1])); - return _.map(context.intersects(extent).filter(function(entity) { + return _map(context.intersects(extent).filter(function(entity) { return entity.type === 'node' && geoPointInPolygon(context.projection(entity.loc), lasso.coordinates) && !context.features().isHidden(entity, graph, entity.geometry(graph)); @@ -58,7 +67,7 @@ export function behaviorLasso(context) { function mouseup() { - d3.select(window) + d3_select(window) .on('mousemove.lasso', null) .on('mouseup.lasso', null); diff --git a/modules/behavior/operation.js b/modules/behavior/operation.js index 5bb103dc3..9dfb8502d 100644 --- a/modules/behavior/operation.js +++ b/modules/behavior/operation.js @@ -1,5 +1,9 @@ -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 { uiFlash } from '../ui'; @@ -34,9 +38,9 @@ export function behaviorOperation() { var behavior = function () { if (which && which.available()) { - keybinding = d3keybinding('behavior.key.' + which.id); + keybinding = d3_keybinding('behavior.key.' + which.id); keybinding.on(which.keys, function() { - d3.event.preventDefault(); + d3_event.preventDefault(); var disabled = which.disabled(); if (disabled) { @@ -58,7 +62,7 @@ export function behaviorOperation() { which(); } }); - d3.select(document).call(keybinding); + d3_select(document).call(keybinding); } return behavior; }; @@ -66,7 +70,7 @@ export function behaviorOperation() { behavior.off = function() { if (keybinding) { - d3.select(document).call(keybinding.off); + d3_select(document).call(keybinding.off); } }; diff --git a/modules/behavior/paste.js b/modules/behavior/paste.js index 26e140a7a..f29c5fe72 100644 --- a/modules/behavior/paste.js +++ b/modules/behavior/paste.js @@ -1,27 +1,33 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; -import { d3keybinding } from '../lib/d3.keybinding.js'; +import _invert from 'lodash-es/invert'; +import _mapValues from 'lodash-es/mapValues'; + +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; import { actionCopyEntities, actionMove -} from '../actions/index'; +} from '../actions'; import { geoExtent, geoPointInPolygon -} from '../geo/index'; +} from '../geo/'; -import { modeMove } from '../modes/index'; -import { uiCmd } from '../ui/index'; +import { modeMove } from '../modes'; +import { uiCmd } from '../ui'; export function behaviorPaste(context) { - var keybinding = d3keybinding('paste'); + var keybinding = d3_keybinding('paste'); function doPaste() { - d3.event.preventDefault(); + d3_event.preventDefault(); var baseGraph = context.graph(), mouse = context.mouse(), @@ -41,7 +47,7 @@ export function behaviorPaste(context) { context.perform(action); var copies = action.copies(); - var originals = _.invert(_.mapValues(copies, 'id')); + var originals = _invert(_mapValues(copies, 'id')); for (var id in copies) { var oldEntity = oldGraph.entity(id), newEntity = copies[id]; @@ -74,13 +80,13 @@ export function behaviorPaste(context) { function paste() { keybinding.on(uiCmd('⌘V'), doPaste); - d3.select(document).call(keybinding); + d3_select(document).call(keybinding); return paste; } paste.off = function() { - d3.select(document).call(keybinding.off); + d3_select(document).call(keybinding.off); }; diff --git a/modules/behavior/select.js b/modules/behavior/select.js index fdaea2585..f3daf0bc2 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -1,7 +1,18 @@ -import * as d3 from 'd3'; -import _ from 'lodash'; +import _without from 'lodash-es/without'; + +import { + event as d3_event, + mouse as d3_mouse, + select as d3_select +} from 'd3-selection'; + import { geoEuclideanDistance } from '../geo'; -import { modeBrowse, modeSelect } from '../modes'; + +import { + modeBrowse, + modeSelect +} from '../modes'; + import { osmEntity } from '../osm'; @@ -13,12 +24,12 @@ export function behaviorSelect(context) { function point() { - return d3.mouse(context.container().node()); + return d3_mouse(context.container().node()); } function keydown() { - var e = d3.event; + var e = d3_event; if (e && e.shiftKey) { context.surface() .classed('behavior-multiselect', true); @@ -32,7 +43,7 @@ export function behaviorSelect(context) { function keyup() { - var e = d3.event; + var e = d3_event; if (!e || !e.shiftKey) { context.surface() .classed('behavior-multiselect', false); @@ -49,7 +60,7 @@ export function behaviorSelect(context) { function mousedown() { if (!p1) p1 = point(); - d3.select(window) + d3_select(window) .on('mouseup.select', mouseup, true); var isShowAlways = +context.storage('edit-menu-show-always') === 1; @@ -58,7 +69,7 @@ export function behaviorSelect(context) { function mousemove() { - if (d3.event) lastMouse = d3.event; + if (d3_event) lastMouse = d3_event; } @@ -68,7 +79,7 @@ export function behaviorSelect(context) { function contextmenu() { - var e = d3.event; + var e = d3_event; e.preventDefault(); e.stopPropagation(); @@ -87,7 +98,7 @@ export function behaviorSelect(context) { function click() { - d3.select(window) + d3_select(window) .on('mouseup.select', null, true); if (!p1) return; @@ -99,9 +110,9 @@ export function behaviorSelect(context) { return; } - var isMultiselect = d3.event.shiftKey || d3.select('#surface .lasso').node(), + var isMultiselect = d3_event.shiftKey || d3_select('#surface .lasso').node(), isShowAlways = +context.storage('edit-menu-show-always') === 1, - datum = d3.event.target.__data__ || (lastMouse && lastMouse.target.__data__), + datum = d3_event.target.__data__ || (lastMouse && lastMouse.target.__data__), mode = context.mode(); @@ -136,7 +147,7 @@ export function behaviorSelect(context) { mode.suppressMenu(false).reselect(); } else { // deselect clicked entity, then reenter select mode or return to browse mode.. - selectedIDs = _.without(selectedIDs, datum.id); + selectedIDs = _without(selectedIDs, datum.id); context.enter(selectedIDs.length ? modeSelect(context, selectedIDs) : modeBrowse(context)); } } else { @@ -157,17 +168,17 @@ export function behaviorSelect(context) { suppressMenu = true; p1 = null; - d3.select(window) + d3_select(window) .on('keydown.select', keydown) .on('keyup.select', keyup) .on('contextmenu.select-window', function() { // Edge and IE really like to show the contextmenu on the // menubar when user presses a keyboard menu button // even after we've already preventdefaulted the key event. - var e = d3.event; + var e = d3_event; if (+e.clientX === 0 && +e.clientY === 0) { - d3.event.preventDefault(); - d3.event.stopPropagation(); + d3_event.preventDefault(); + d3_event.stopPropagation(); } }); @@ -176,7 +187,7 @@ export function behaviorSelect(context) { .on('mousemove.select', mousemove) .on('contextmenu.select', contextmenu); - if (d3.event && d3.event.shiftKey) { + if (d3_event && d3_event.shiftKey) { context.surface() .classed('behavior-multiselect', true); } @@ -184,7 +195,7 @@ export function behaviorSelect(context) { behavior.off = function(selection) { - d3.select(window) + d3_select(window) .on('keydown.select', null) .on('keyup.select', null) .on('contextmenu.select-window', null) diff --git a/modules/behavior/tail.js b/modules/behavior/tail.js index 9b6b86c37..7aff12cad 100644 --- a/modules/behavior/tail.js +++ b/modules/behavior/tail.js @@ -1,5 +1,9 @@ -import * as d3 from 'd3'; -import { utilSetTransform } from '../util/index'; +import { + event as d3_event, + select as d3_select +} from 'd3-selection'; + +import { utilSetTransform } from '../util'; import { utilGetDimensions } from '../util/dimensions'; @@ -14,10 +18,10 @@ export function behaviorTail() { function tail(selection) { if (!text) return; - d3.select(window) + d3_select(window) .on('resize.tail', function() { selectionSize = utilGetDimensions(selection); }); - container = d3.select(document.body) + container = d3_select(document.body) .append('div') .style('display', 'none') .attr('class', 'tail tooltip-inner'); @@ -45,22 +49,22 @@ export function behaviorTail() { function mousemove() { if (container.style('display') === 'none') show(); - var xoffset = ((d3.event.clientX + tooltipSize[0] + xmargin) > selectionSize[0]) ? + var xoffset = ((d3_event.clientX + tooltipSize[0] + xmargin) > selectionSize[0]) ? -tooltipSize[0] - xmargin : xmargin; container.classed('left', xoffset > 0); - utilSetTransform(container, d3.event.clientX + xoffset, d3.event.clientY); + utilSetTransform(container, d3_event.clientX + xoffset, d3_event.clientY); } function mouseleave() { - if (d3.event.relatedTarget !== container.node()) { + if (d3_event.relatedTarget !== container.node()) { container.style('display', 'none'); } } function mouseenter() { - if (d3.event.relatedTarget !== container.node()) { + if (d3_event.relatedTarget !== container.node()) { show(); } } @@ -79,7 +83,7 @@ export function behaviorTail() { .on('mouseenter.tail', null) .on('mouseleave.tail', null); - d3.select(window) + d3_select(window) .on('resize.tail', null); }; diff --git a/modules/util/index.js b/modules/util/index.js index f3bf74842..577c42db5 100644 --- a/modules/util/index.js +++ b/modules/util/index.js @@ -1,4 +1,5 @@ export { utilAsyncMap } from './util'; +export { utilCallWhenIdle } from './call_when_idle'; export { utilDisplayName } from './util'; export { utilDisplayNameForPath } from './util'; export { utilDisplayType } from './util'; @@ -10,6 +11,7 @@ export { utilFunctor } from './util'; export { utilGetAllNodes } from './util'; export { utilGetPrototypeOf } from './util'; export { utilGetSetValue } from './get_set_value'; +export { utilIdleWorker} from './idle_worker'; export { utilNoAuto } from './util'; export { utilPrefixCSSProperty } from './util'; export { utilPrefixDOMProperty } from './util'; @@ -22,5 +24,3 @@ export { utilSuggestNames } from './suggest_names'; export { utilTagText } from './util'; export { utilTriggerEvent } from './trigger_event'; export { utilWrap } from './util'; -export { utilIdleWorker} from './idle_worker'; -export { utilCallWhenIdle } from './call_when_idle';