Start using d3 3.1.0

Update d3, use streams, d3.set, clip
Use clipping, fix side effects

js/id/core/way.js

@@ -157,7 +157,7 @@ iD.Way.areaKeys = {
     historic: {},
     landuse: {},
     military: {},
-    natural: iD.util.trueObj(['coastline']),
+    natural: { coastline: true },
     amenity: {},
     shop: {},
     man_made: {},

js/id/renderer/map.js

@@ -16,7 +16,7 @@ iD.Map = function(context) {
         transformProp = iD.util.prefixCSSProperty('Transform'),
         points = iD.svg.Points(roundedProjection),
         vertices = iD.svg.Vertices(roundedProjection),
-        lines = iD.svg.Lines(roundedProjection),
+        lines = iD.svg.Lines(projection),
         areas = iD.svg.Areas(roundedProjection),
         midpoints = iD.svg.Midpoints(roundedProjection),
         labels = iD.svg.Labels(roundedProjection),
@@ -261,6 +261,7 @@ iD.Map = function(context) {
         dimensions = _;
         surface.size(dimensions);
         background.size(dimensions);
+        projection.clipExtent([[0, 0], dimensions]);
         setCenter(center);
         return redraw();
     };

js/id/svg.js

@@ -13,30 +13,6 @@ iD.svg = {
         };
     },
 
-    resample: function(points, dx) {
-        var o = [];
-        for (var i = 0; i < points.length - 1; i++) {
-            var a = points[i], b = points[i + 1],
-                span = iD.geo.dist(a, b);
-            o.push(a);
-            // if there is space to fit one or more oneway mark
-            // in this segment
-            if (span > dx) {
-                // the angle from a to b
-                var angle = Math.atan2(b[1] - a[1], b[0] - a[0]),
-                    to = points[i].slice();
-                while (iD.geo.dist(a, to) < (span - dx)) {
-                    // a dx-length line segment in that angle
-                    to[0] += Math.cos(angle) * dx;
-                    to[1] += Math.sin(angle) * dx;
-                    o.push(to.slice());
-                }
-            }
-            o.push(b);
-        }
-        return o;
-    },
-
     LineString: function(projection, graph, dimensions, dx) {
         var cache = {},
             resample = this.resample;
@@ -46,27 +22,54 @@ iD.svg = {
                 return cache[entity.id];
             }
 
-            var clip = d3.clip.cohenSutherland()
-                .bounds([0, 0, dimensions[0], dimensions[1]]);
+            var segments = [],
+                last,
+                segment = [],
+                started = false,
+                d = '';
 
-            var segments = clip(graph.childNodes(entity).map(function(n) {
-                return projection(n.loc);
-            }));
+            projection.stream(
+                d3.geo.stream({
+                    type: 'LineString',
+                    coordinates: graph.childNodes(entity).map(function(n) {
+                        return n.loc;
+                    })
+                }, projection.stream({
+                    lineStart: function() { last = null; started = false; },
+                    lineEnd: function() { },
+                    point: function(x, y) {
+                        if (!started) d += 'M';
+                        next = [Math.floor(x), Math.floor(y)];
+                        if (dx && last && iD.geo.dist(last, next) > dx) {
+                            var span = iD.geo.dist(last, next),
+                                angle = Math.atan2(next[1] - last[1], next[0] - last[0]),
+                                to = last.slice();
+                            to[0] += Math.cos(angle) * dx;
+                            to[1] += Math.sin(angle) * dx;
+                            while (iD.geo.dist(last, to) < (span)) {
+                                // a dx-length line segment in that angle
+                                if (started) d += 'L';
+                                d += Math.floor(to[0]) + ',' + Math.floor(to[1]);
+                                started = started || true;
+                                to[0] += Math.cos(angle) * dx;
+                                to[1] += Math.sin(angle) * dx;
+                            }
+                        }
+                        if (started) d += 'L';
+                        d += next[0] + ',' + next[1];
+                        started = started || true;
+                        last = next;
+                    }
+                }))
+            );
 
-            if (segments.length === 0) {
+            if (d === '') {
                 cache[entity.id] = null;
                 return cache[entity.id];
+            } else {
+                cache[entity.id] = d;
+                return cache[entity.id];
             }
-
-            cache[entity.id] =
-                segments.map(function(points) {
-                    if (dx) points = resample(points, dx);
-                    return 'M' + points.map(function(p) {
-                        return p[0] + ',' + p[1];
-                    }).join('L');
-                }).join('');
-
-            return cache[entity.id];
         };
     },
 

js/id/svg/labels.js

@@ -212,7 +212,7 @@ iD.svg.Labels = function(projection) {
             pad = 50,
             rect = new RTree.Rectangle(mouse[0] - pad, mouse[1] - pad, 2*pad, 2*pad),
             labels = _.pluck(rtree.search(rect, this), 'leaf'),
-            containsLabel = iD.util.trueObj(labels),
+            containsLabel = d3.set(labels),
             selection = d3.select(this);
 
         // ensures that simply resetting opacity
@@ -230,7 +230,7 @@ iD.svg.Labels = function(projection) {
         if (!labels.length) return;
         selection.selectAll('.layer-label text, .layer-halo path, .layer-halo rect')
             .filter(function(d) {
-                return containsLabel[d.id];
+                return containsLabel.has(d.id);
             })
             .style('opacity', 0)
             .property('_opacity', 0);

js/id/svg/tag_classes.js

@@ -1,5 +1,5 @@
 iD.svg.TagClasses = function() {
-    var keys = iD.util.trueObj([
+    var keys = d3.set([
         'highway', 'railway', 'waterway', 'power', 'motorway', 'amenity',
         'natural', 'landuse', 'building', 'oneway', 'bridge', 'boundary',
         'leisure', 'construction', 'place'
@@ -18,7 +18,7 @@ iD.svg.TagClasses = function() {
 
             var t = tags(entity);
             for (var k in t) {
-                if (!keys[k]) continue;
+                if (!keys.has(k)) continue;
                 classes += ' tag-' + k + ' ' + 'tag-' + k + '-' + t[k];
             }
 

js/id/util.js

@@ -1,11 +1,5 @@
 iD.util = {};
 
-iD.util.trueObj = function(arr) {
-    var o = {};
-    for (var i = 0, l = arr.length; i < l; i++) o[arr[i]] = true;
-    return o;
-};
-
 iD.util.tagText = function(entity) {
     return d3.entries(entity.tags).map(function(e) {
         return e.key + '=' + e.value;