Convert lodah-es and d3 to named imports for svg

2026-03-06 03:11:22 +00:00 · 2017-09-25 23:16:24 -04:00
parent 50da78c1fd
commit 9edae82673
17 changed files with 152 additions and 101 deletions
--- a/modules/svg/areas.js
+++ b/modules/svg/areas.js
@@ -1,6 +1,9 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
-import { osmEntity, osmIsSimpleMultipolygonOuterMember } from '../osm/index';
+import _map from 'lodash-es/map';
+import _values from 'lodash-es/values';
+
+import { bisector as d3_bisector } from 'd3-array';
+
+import { osmEntity, osmIsSimpleMultipolygonOuterMember } from '../osm';
 import { svgPath, svgTagClasses } from './index';


@@ -61,9 +64,9 @@ export function svgAreas(projection, context) {
            }
        }

-        areas = d3.values(areas).filter(function hasPath(a) { return path(a.entity); });
+        areas = _values(areas).filter(function hasPath(a) { return path(a.entity); });
        areas.sort(function areaSort(a, b) { return b.area - a.area; });
-        areas = _.map(areas, 'entity');
+        areas = _map(areas, 'entity');

        var strokes = areas.filter(function(area) {
            return area.type === 'way';
@@ -117,7 +120,7 @@ export function svgAreas(projection, context) {

        var fills = selection.selectAll('.area-fill path.area').nodes();

-        var bisect = d3.bisector(function(node) {
+        var bisect = d3_bisector(function(node) {
            return -node.__data__.area(graph);
        }).left;

--- a/modules/svg/debug.js
+++ b/modules/svg/debug.js
@@ -1,10 +1,12 @@
-import * as d3 from 'd3';
-import { geoPolygonIntersectsPolygon } from '../geo/index';
+import { geoPath as d3_geoPath } from 'd3-geo';
+import { select as d3_select } from 'd3-selection';
+
+import { geoPolygonIntersectsPolygon } from '../geo';
 import {
    data,
    dataImperial,
    dataDriveLeft
-} from '../../data/index';
+} from '../../data';


 export function svgDebug(projection, context) {
@@ -24,7 +26,7 @@ export function svgDebug(projection, context) {
            showsImagery = context.getDebug('imagery'),
            showsImperial = context.getDebug('imperial'),
            showsDriveLeft = context.getDebug('driveLeft'),
-            path = d3.geoPath(projection);
+            path = d3_geoPath(projection);


        var debugData = [];
@@ -45,7 +47,7 @@ export function svgDebug(projection, context) {
        }


-        var legend = d3.select('#content')
+        var legend = d3_select('#content')
            .selectAll('.debug-legend')
            .data(debugData.length ? [0] : []);

--- a/modules/svg/defs.js
+++ b/modules/svg/defs.js
@@ -1,4 +1,6 @@
-import * as d3 from 'd3';
+import { request as d3_request } from 'd3-request';
+import { select as d3_select } from 'd3-selection';
+

 /*
    A standalone SVG element that contains only a `defs` sub-element. To be
@@ -8,13 +10,13 @@ export function svgDefs(context) {

    function SVGSpriteDefinition(id, href) {
        return function(defs) {
-            d3.request(href)
+            d3_request(href)
                .mimeType('image/svg+xml')
                .response(function(xhr) { return xhr.responseXML; })
                .get(function(err, svg) {
                    if (err) return;
                    defs.node().appendChild(
-                        d3.select(svg.documentElement).attr('id', id).node()
+                        d3_select(svg.documentElement).attr('id', id).node()
                    );
                });
        };
--- a/modules/svg/gpx.js
+++ b/modules/svg/gpx.js
@@ -1,6 +1,24 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
-import { geoExtent, geoPolygonIntersectsPolygon } from '../geo/index';
+import _flatten from 'lodash-es/flatten';
+import _isEmpty from 'lodash-es/isEmpty';
+import _isUndefined from 'lodash-es/isUndefined';
+import _reduce from 'lodash-es/reduce';
+import _union from 'lodash-es/union';
+
+import {
+    geoBounds as d3_geoBounds,
+    geoPath as d3_geoPath
+} from 'd3-geo';
+
+import {
+    text as d3_text
+} from 'd3-request';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { geoExtent, geoPolygonIntersectsPolygon } from '../geo';
 import { utilDetect } from '../util/detect';
 import toGeoJSON from '@mapbox/togeojson';

@@ -18,18 +36,18 @@ export function svgGpx(projection, context, dispatch) {
        svgGpx.enabled = true;

        function over() {
-            d3.event.stopPropagation();
-            d3.event.preventDefault();
-            d3.event.dataTransfer.dropEffect = 'copy';
+            d3_event.stopPropagation();
+            d3_event.preventDefault();
+            d3_event.dataTransfer.dropEffect = 'copy';
        }

-        d3.select('body')
+        d3_select('body')
            .attr('dropzone', 'copy')
            .on('drop.localgpx', function() {
-                d3.event.stopPropagation();
-                d3.event.preventDefault();
+                d3_event.stopPropagation();
+                d3_event.preventDefault();
                if (!detected.filedrop) return;
-                drawGpx.files(d3.event.dataTransfer.files);
+                drawGpx.files(d3_event.dataTransfer.files);
            })
            .on('dragenter.localgpx', over)
            .on('dragexit.localgpx', over)
@@ -68,7 +86,7 @@ export function svgGpx(projection, context, dispatch) {
            .merge(paths);


-        var path = d3.geoPath(projection);
+        var path = d3_geoPath(projection);

        paths
            .attr('d', path);
@@ -107,7 +125,7 @@ export function svgGpx(projection, context, dispatch) {


    function getExtension(fileName) {
-        if (_.isUndefined(fileName)) {
+        if (_isUndefined(fileName)) {
            return '';
        }

@@ -153,13 +171,13 @@ export function svgGpx(projection, context, dispatch) {

    drawGpx.hasGpx = function() {
        var geojson = svgGpx.geojson;
-        return (!(_.isEmpty(geojson) || _.isEmpty(geojson.features)));
+        return (!(_isEmpty(geojson) || _isEmpty(geojson.features)));
    };


    drawGpx.geojson = function(gj) {
        if (!arguments.length) return svgGpx.geojson;
-        if (_.isEmpty(gj) || _.isEmpty(gj.features)) return this;
+        if (_isEmpty(gj) || _isEmpty(gj.features)) return this;
        svgGpx.geojson = gj;
        dispatch.call('change');
        return this;
@@ -167,7 +185,7 @@ export function svgGpx(projection, context, dispatch) {


    drawGpx.url = function(url) {
-        d3.text(url, function(err, data) {
+        d3_text(url, function(err, data) {
            if (!err) {
                var extension = getExtension(url);
                parseSaveAndZoom(extension, data);
@@ -201,7 +219,7 @@ export function svgGpx(projection, context, dispatch) {

        var map = context.map(),
            viewport = map.trimmedExtent().polygon(),
-            coords = _.reduce(geojson.features, function(coords, feature) {
+            coords = _reduce(geojson.features, function(coords, feature) {
                var c = feature.geometry.coordinates;

                /* eslint-disable no-fallthrough */
@@ -213,19 +231,19 @@ export function svgGpx(projection, context, dispatch) {
                        break;

                    case 'MultiPolygon':
-                        c = _.flatten(c);
+                        c = _flatten(c);
                    case 'Polygon':
                    case 'MultiLineString':
-                        c = _.flatten(c);
+                        c = _flatten(c);
                        break;
                }
                /* eslint-enable no-fallthrough */

-                return _.union(coords, c);
+                return _union(coords, c);
            }, []);

        if (!geoPolygonIntersectsPolygon(viewport, coords, true)) {
-            var extent = geoExtent(d3.geoBounds({ type: 'LineString', coordinates: coords }));
+            var extent = geoExtent(d3_geoBounds({ type: 'LineString', coordinates: coords }));
            map.centerZoom(extent.center(), map.trimmedExtentZoom(extent));
        }

--- a/modules/svg/labels.js
+++ b/modules/svg/labels.js
@@ -1,7 +1,11 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _map from 'lodash-es/map';
+import _some from 'lodash-es/some';
+import _throttle from 'lodash-es/throttle';
+
+import { geoPath as d3_geoPath } from 'd3-geo';
+
 import rbush from 'rbush';
-import { dataFeatureIcons } from '../../data/index';
+import { dataFeatureIcons } from '../../data';
 import { textDirection } from '../util/locale';

 import {
@@ -10,9 +14,9 @@ import {
    geoInterp,
    geoPolygonIntersectsPolygon,
    geoPathLength
-} from '../geo/index';
+} from '../geo';

-import { osmEntity } from '../osm/index';
+import { osmEntity } from '../osm';
 import { utilDetect } from '../util/detect';

 import {
@@ -20,11 +24,11 @@ import {
    utilDisplayNameForPath,
    utilEntitySelector,
    utilCallWhenIdle
-} from '../util/index';
+} from '../util';


 export function svgLabels(projection, context) {
-    var path = d3.geoPath(projection),
+    var path = d3_geoPath(projection),
        detected = utilDetect(),
        baselineHack = (detected.ie || detected.browser.toLowerCase() === 'edge'),
        rdrawn = rbush(),
@@ -71,7 +75,7 @@ export function svgLabels(projection, context) {

    function blacklisted(preset) {
        var noIcons = ['building', 'landuse', 'natural'];
-        return _.some(noIcons, function(s) {
+        return _some(noIcons, function(s) {
            return preset.id.indexOf(s) >= 0;
        });
    }
@@ -255,7 +259,7 @@ export function svgLabels(projection, context) {
                .merge(debugboxes);

            debugboxes
-                .attr('d', d3.geoPath());
+                .attr('d', d3_geoPath());
        }
    }

@@ -399,7 +403,7 @@ export function svgLabels(projection, context) {

        function getLineLabel(entity, width, height) {
            var viewport = geoExtent(context.projection.clipExtent()).polygon(),
-                nodes = _.map(graph.childNodes(entity), 'loc').map(projection),
+                nodes = _map(graph.childNodes(entity), 'loc').map(projection),
                length = geoPathLength(nodes);

            if (length < width + 20) return;
@@ -629,7 +633,7 @@ export function svgLabels(projection, context) {
        if (mouse) {
            pad = 20;
            bbox = { minX: mouse[0] - pad, minY: mouse[1] - pad, maxX: mouse[0] + pad, maxY: mouse[1] + pad };
-            ids.push.apply(ids, _.map(rdrawn.search(bbox), 'id'));
+            ids.push.apply(ids, _map(rdrawn.search(bbox), 'id'));
        }

        // hide labels along selected ways, or near selected vertices
@@ -644,7 +648,7 @@ export function svgLabels(projection, context) {
                var point = context.projection(entity.loc);
                pad = 10;
                bbox = { minX: point[0] - pad, minY: point[1] - pad, maxX: point[0] + pad, maxY: point[1] + pad };
-                ids.push.apply(ids, _.map(rdrawn.search(bbox), 'id'));
+                ids.push.apply(ids, _map(rdrawn.search(bbox), 'id'));
            }
        }

@@ -653,7 +657,7 @@ export function svgLabels(projection, context) {
    }


-    var throttleFilterLabels = _.throttle(utilCallWhenIdle(filterLabels), 100);
+    var throttleFilterLabels = _throttle(utilCallWhenIdle(filterLabels), 100);


    drawLabels.observe = function(selection) {
--- a/modules/svg/layers.js
+++ b/modules/svg/layers.js
@@ -1,17 +1,23 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
-import { utilRebind } from '../util/rebind';
-import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';
+import _difference from 'lodash-es/difference';
+import _find from 'lodash-es/find';
+import _map from 'lodash-es/map';
+import _reject from 'lodash-es/reject';
+
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { select as d3_select } from 'd3-selection';
+
 import { svgDebug } from './debug';
 import { svgGpx } from './gpx';
 import { svgMapillaryImages } from './mapillary_images';
 import { svgMapillarySigns } from './mapillary_signs';
 import { svgOsm } from './osm';
+import { utilRebind } from '../util/rebind';
+import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';


 export function svgLayers(projection, context) {
-    var dispatch = d3.dispatch('change'),
-        svg = d3.select(null),
+    var dispatch = d3_dispatch('change'),
+        svg = d3_select(null),
        layers = [
            { id: 'osm', layer: svgOsm(projection, context, dispatch) },
            { id: 'gpx', layer: svgGpx(projection, context, dispatch) },
@@ -47,7 +53,7 @@ export function svgLayers(projection, context) {
            .append('g')
            .attr('class', function(d) { return 'data-layer data-layer-' + d.id; })
            .merge(groups)
-            .each(function(d) { d3.select(this).call(d.layer); });
+            .each(function(d) { d3_select(this).call(d.layer); });
    }


@@ -57,14 +63,14 @@ export function svgLayers(projection, context) {


    drawLayers.layer = function(id) {
-        var obj = _.find(layers, function(o) {return o.id === id;});
+        var obj = _find(layers, function(o) {return o.id === id;});
        return obj && obj.layer;
    };


    drawLayers.only = function(what) {
        var arr = [].concat(what);
-        drawLayers.remove(_.difference(_.map(layers, 'id'), arr));
+        drawLayers.remove(_difference(_map(layers, 'id'), arr));
        return this;
    };

@@ -72,7 +78,7 @@ export function svgLayers(projection, context) {
    drawLayers.remove = function(what) {
        var arr = [].concat(what);
        arr.forEach(function(id) {
-            layers = _.reject(layers, function(o) {return o.id === id;});
+            layers = _reject(layers, function(o) {return o.id === id;});
        });
        dispatch.call('change');
        return this;
--- a/modules/svg/lines.js
+++ b/modules/svg/lines.js
@@ -1,5 +1,11 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _groupBy from 'lodash-es/groupBy';
+import _filter from 'lodash-es/filter';
+import _flatten from 'lodash-es/flatten';
+import _forOwn from 'lodash-es/forOwn';
+import _map from 'lodash-es/map';
+
+import { range as d3_range } from 'd3-array';
+
 import {
    svgOneWaySegments,
    svgPath,
@@ -103,14 +109,11 @@ export function svgLines(projection, context) {
        }

        ways = ways.filter(getPath);
-        pathdata = _.groupBy(ways, function(way) { return way.layer(); });
+        pathdata = _groupBy(ways, function(way) { return way.layer(); });

-        _.forOwn(pathdata, function(v, k) {
-            onewaydata[k] = _(v)
-                .filter(function(d) { return d.isOneWay(); })
-                .map(svgOneWaySegments(projection, graph, 35))
-                .flatten()
-                .valueOf();
+        _forOwn(pathdata, function(v, k) {
+            var arr = _filter(v, function(d) { return d.isOneWay(); });
+            onewaydata[k] = _flatten(_map(arr, svgOneWaySegments(projection, graph, 35)));
        });


@@ -118,7 +121,7 @@ export function svgLines(projection, context) {

        var layergroup = layer
            .selectAll('g.layergroup')
-            .data(d3.range(-10, 11));
+            .data(d3_range(-10, 11));

        layergroup = layergroup.enter()
            .append('g')
--- a/modules/svg/mapillary_images.js
+++ b/modules/svg/mapillary_images.js
@@ -1,14 +1,14 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
 import { svgPointTransform } from './point_transform';
-import { services } from '../services/index';
+import { services } from '../services';


 export function svgMapillaryImages(projection, context, dispatch) {
-    var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000),
+    var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000),
        minZoom = 12,
        minViewfieldZoom = 17,
-        layer = d3.select(null),
+        layer = d3_select(null),
        _mapillary;


--- a/modules/svg/mapillary_signs.js
+++ b/modules/svg/mapillary_signs.js
@@ -1,12 +1,13 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
-import { services } from '../services/index';
+import _some from 'lodash-es/some';
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
+import { services } from '../services';


 export function svgMapillarySigns(projection, context, dispatch) {
-    var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000),
+    var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000),
        minZoom = 12,
-        layer = d3.select(null),
+        layer = d3_select(null),
        _mapillary;


@@ -91,7 +92,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
            .attr('width', '24px')      // for Firefox
            .attr('height', '24px')     // for Firefox
            .classed('selected', function(d) {
-                return _.some(d.detections, function(detection) {
+                return _some(d.detections, function(detection) {
                    return detection.image_key === imageKey;
                });
            })
--- a/modules/svg/midpoints.js
+++ b/modules/svg/midpoints.js
@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import _values from 'lodash-es/values';
+
 import {
    svgPointTransform,
    svgTagClasses
@@ -9,7 +10,7 @@ import {
    geoEuclideanDistance,
    geoInterp,
    geoLineIntersection
-} from '../geo/index';
+} from '../geo';


 export function svgMidpoints(projection, context) {
@@ -97,7 +98,7 @@ export function svgMidpoints(projection, context) {
        var groups = layer
            .selectAll('g.midpoint')
            .filter(midpointFilter)
-            .data(_.values(midpoints), function(d) { return d.id; });
+            .data(_values(midpoints), function(d) { return d.id; });

        groups.exit()
            .remove();
--- a/modules/svg/one_way_segments.js
+++ b/modules/svg/one_way_segments.js
@@ -1,5 +1,9 @@
-import * as d3 from 'd3';
-import { geoEuclideanDistance } from '../geo/index';
+import {
+    geoIdentity as d3_geoIdentity,
+    geoStream as d3_geoStream
+} from 'd3-geo';
+
+import { geoEuclideanDistance } from '../geo';


 export function svgOneWaySegments(projection, graph, dt) {
@@ -9,14 +13,14 @@ export function svgOneWaySegments(projection, graph, dt) {
            i = 0,
            offset = dt,
            segments = [],
-            clip = d3.geoIdentity().clipExtent(projection.clipExtent()).stream,
+            clip = d3_geoIdentity().clipExtent(projection.clipExtent()).stream,
            coordinates = graph.childNodes(entity).map(function(n) {
                return n.loc;
            });

        if (entity.tags.oneway === '-1') coordinates.reverse();

-        d3.geoStream({
+        d3_geoStream({
            type: 'LineString',
            coordinates: coordinates
        }, projection.stream(clip({
--- a/modules/svg/path.js
+++ b/modules/svg/path.js
@@ -1,4 +1,8 @@
-import * as d3 from 'd3';
+import {
+    geoIdentity as d3_geoIdentity,
+    geoPath as d3_geoPath
+} from 'd3-geo';
+

 export function svgPath(projection, graph, isArea) {

@@ -18,9 +22,9 @@ export function svgPath(projection, graph, isArea) {
            [viewport[0][0] - padding, viewport[0][1] - padding],
            [viewport[1][0] + padding, viewport[1][1] + padding]
        ],
-        clip = d3.geoIdentity().clipExtent(paddedExtent).stream,
+        clip = d3_geoIdentity().clipExtent(paddedExtent).stream,
        project = projection.stream,
-        path = d3.geoPath()
+        path = d3_geoPath()
            .projection({stream: function(output) { return project(clip(output)); }});

    return function(entity) {
--- a/modules/svg/points.js
+++ b/modules/svg/points.js
@@ -1,6 +1,7 @@
-import _ from 'lodash';
-import { dataFeatureIcons } from '../../data/index';
-import { osmEntity } from '../osm/index';
+import _filter from 'lodash-es/filter';
+
+import { dataFeatureIcons } from '../../data';
+import { osmEntity } from '../osm';
 import { svgPointTransform, svgTagClasses } from './index';


@@ -20,7 +21,7 @@ export function svgPoints(projection, context) {

    return function drawPoints(selection, graph, entities, filter) {
        var wireframe = context.surface().classed('fill-wireframe'),
-            points = wireframe ? [] : _.filter(entities, function(e) {
+            points = wireframe ? [] : _filter(entities, function(e) {
                return e.geometry(graph) === 'point';
            });

--- a/modules/svg/relation_member_tags.js
+++ b/modules/svg/relation_member_tags.js
@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import _extend from 'lodash-es/extend';
+

 export function svgRelationMemberTags(graph) {
    return function(entity) {
@@ -6,7 +7,7 @@ export function svgRelationMemberTags(graph) {
        graph.parentRelations(entity).forEach(function(relation) {
            var type = relation.tags.type;
            if (type === 'multipolygon' || type === 'boundary') {
-                tags = _.extend({}, relation.tags, tags);
+                tags = _extend({}, relation.tags, tags);
            }
        });
        return tags;
--- a/modules/svg/tag_classes.js
+++ b/modules/svg/tag_classes.js
@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import { select as d3_select } from 'd3-selection';
 import { osmPavedTags } from '../osm/tags';


@@ -102,7 +102,7 @@ export function svgTagClasses() {
            classes = classes.trim();

            if (classes !== value) {
-                d3.select(this).attr('class', classes);
+                d3_select(this).attr('class', classes);
            }
        });
    };
--- a/modules/svg/turns.js
+++ b/modules/svg/turns.js
@@ -1,4 +1,4 @@
-import { geoAngle } from '../geo/index';
+import { geoAngle } from '../geo';


 export function svgTurns(projection) {
--- a/modules/svg/vertices.js
+++ b/modules/svg/vertices.js
@@ -1,6 +1,7 @@
-import * as d3 from 'd3';
-import { dataFeatureIcons } from '../../data/index';
-import { osmEntity } from '../osm/index';
+import _values from 'lodash-es/values';
+
+import { dataFeatureIcons } from '../../data';
+import { osmEntity } from '../osm';
 import { svgPointTransform } from './index';


@@ -194,7 +195,7 @@ export function svgVertices(projection, context) {
        var layer = selection.selectAll('.layer-hit');

        layer.selectAll('g.vertex.vertex-hover')
-            .call(draw, d3.values(hovered), 'vertex-hover', graph, zoom);
+            .call(draw, _values(hovered), 'vertex-hover', graph, zoom);
    }