Merge pull request #3001 from openstreetmap/data-layer-refactor2

Data layer refactor
openstreetmap · Feb 28, 2016 · 4a93977 · 4a93977
2 parents 80bbb44 + 1bf90fa
commit 4a93977
Show file tree

Hide file tree

Showing 38 changed files with 662 additions and 573 deletions.
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
@@ -296,7 +296,7 @@ correspondence with entities:
   two vertices.
 * `iD.svg.Labels` renders the textual
   [labels](http://mapbox.com/osmdev/2013/02/12/labeling-id/).
-* `iD.svg.Surface` sets up a number of layers that ensure that map elements
+* `iD.svg.Layers` sets up a number of layers that ensure that map elements
   appear in an appropriate z-order.
 
 ## Other UI

diff --git a/css/app.css b/css/app.css
@@ -2132,7 +2132,7 @@ div.full-screen > button:hover {
     user-select: none;
 }
 
-#supersurface, .layer-layer {
+#supersurface, .layer {
     position: absolute;
     top: 0;
     left: 0;
@@ -2208,7 +2208,7 @@ div.full-screen > button:hover {
     border-bottom: 1px solid black;
 }
 
-.infobox .selection-heading {
+.infobox .infobox-heading {
     display: block;
     border-radius: 4px 0 0 0;
     padding: 5px 10px;

diff --git a/css/map.css b/css/map.css
@@ -24,11 +24,11 @@ img.tile-removing {
 use { pointer-events: none; }
 
 /* base styles */
-.layer path:not(.oneway) { fill: none; }     /* IE needs :not(.oneway) */
+.layer-osm path:not(.oneway) { fill: none; }     /* IE needs :not(.oneway) */
 
 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
-.layer use.icon path { fill: #333; }                       /* FF svg Maki icons */
-.layer .turn use path { fill: #000; }                      /* FF turn restriction icons */
+.layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
+.layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
 #turn-only-shape2, #turn-only-u-shape2 { fill: #7092FF; }  /* FF turn-only, turn-only-u */
 #turn-no-shape2, #turn-no-u-shape2     { fill: #E06D5F; }  /* FF turn-no, turn-no-u */
 #turn-yes-shape2, #turn-yes-u-shape2   { fill: #8CD05F; }  /* FF turn-yes, turn-yes-u */
@@ -1268,7 +1268,7 @@ path.shadow.tag-cutting {
 
 /* Surface - unpaved */
 path.casing.tag-unpaved {
-    stroke: #eaeaea;
+    stroke: #ccc;
     stroke-linecap: butt;
     stroke-dasharray: 4, 3;
 }
@@ -1500,7 +1500,7 @@ g.turn circle {
 }
 
 /* GPX Paths */
-div.layer-gpx {
+.layer-gpx {
     pointer-events: none;
 }
 

diff --git a/index.html b/index.html
@@ -56,21 +56,22 @@
         <script src='js/id/renderer/background.js'></script>
         <script src='js/id/renderer/background_source.js'></script>
         <script src='js/id/renderer/features.js'></script>
-        <script src='js/id/renderer/gpx_layer.js'></script>
-        <script src='js/id/renderer/tile_layer.js'></script>
         <script src='js/id/renderer/map.js'></script>
-        <script src='js/id/renderer/mapillary_image_layer.js'></script>
-        <script src='js/id/renderer/mapillary_sign_layer.js'></script>
+        <script src='js/id/renderer/tile_layer.js'></script>
 
         <script src="js/id/svg.js"></script>
         <script src="js/id/svg/areas.js"></script>
         <script src="js/id/svg/defs.js"></script>
+        <script src='js/id/svg/gpx.js'></script>
         <script src="js/id/svg/icon.js"></script>
         <script src="js/id/svg/labels.js"></script>
         <script src="js/id/svg/lines.js"></script>
+        <script src='js/id/svg/mapillary_images.js'></script>
+        <script src='js/id/svg/mapillary_signs.js'></script>
         <script src="js/id/svg/midpoints.js"></script>
+        <script src="js/id/svg/osm.js"></script>
         <script src="js/id/svg/points.js"></script>
-        <script src="js/id/svg/surface.js"></script>
+        <script src="js/id/svg/layers.js"></script>
         <script src="js/id/svg/tag_classes.js"></script>
         <script src="js/id/svg/turns.js"></script>
         <script src="js/id/svg/vertices.js"></script>

diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
@@ -1,11 +1,6 @@
 iD.Background = function(context) {
     var dispatch = d3.dispatch('change'),
-        baseLayer = iD.TileLayer()
-            .projection(context.projection),
-        gpxLayer = iD.GpxLayer(context, dispatch)
-            .projection(context.projection),
-        mapillaryImageLayer,
-        mapillarySignLayer,
+        baseLayer = iD.TileLayer().projection(context.projection),
         overlayLayers = [];
 
     var backgroundSources;
@@ -49,80 +44,37 @@ iD.Background = function(context) {
             }
         });
 
-        if (background.showsGpxLayer()) {
+        var gpx = context.layers().layer('gpx');
+        if (gpx && gpx.enabled() && gpx.hasGpx()) {
             imageryUsed.push('Local GPX');
         }
 
         context.history().imageryUsed(imageryUsed);
     }
 
     function background(selection) {
-        var base = selection.selectAll('.background-layer')
+        var base = selection.selectAll('.layer-background')
             .data([0]);
 
-        base.enter().insert('div', '.layer-data')
-            .attr('class', 'layer-layer background-layer');
+        base.enter()
+            .insert('div', '.layer-data')
+            .attr('class', 'layer layer-background');
 
         base.call(baseLayer);
 
         var overlays = selection.selectAll('.layer-overlay')
             .data(overlayLayers, function(d) { return d.source().name(); });
 
-        overlays.enter().insert('div', '.layer-data')
-            .attr('class', 'layer-layer layer-overlay');
+        overlays.enter()
+            .insert('div', '.layer-data')
+            .attr('class', 'layer layer-overlay');
 
         overlays.each(function(layer) {
             d3.select(this).call(layer);
         });
 
         overlays.exit()
             .remove();
-
-        var gpx = selection.selectAll('.layer-gpx')
-            .data([0]);
-
-        gpx.enter().insert('div')
-            .attr('class', 'layer-layer layer-gpx');
-
-        gpx.call(gpxLayer);
-
-
-        var mapillary = iD.services.mapillary,
-            supportsMapillaryImages = !!mapillary,
-            supportsMapillarySigns = !!mapillary && mapillary().signsSupported();
-
-        var mapillaryImages = selection.selectAll('.layer-mapillary-images')
-            .data(supportsMapillaryImages ? [0] : []);
-
-        mapillaryImages.enter().insert('div')
-            .attr('class', 'layer-layer layer-mapillary-images');
-
-        if (supportsMapillaryImages) {
-            if (!mapillaryImageLayer) { mapillaryImageLayer = iD.MapillaryImageLayer(context); }
-            mapillaryImages.call(mapillaryImageLayer);
-        } else {
-            mapillaryImageLayer = null;
-        }
-
-        mapillaryImages.exit()
-            .remove();
-
-
-        var mapillarySigns = selection.selectAll('.layer-mapillary-signs')
-            .data(supportsMapillarySigns ? [0] : []);
-
-        mapillarySigns.enter().insert('div')
-            .attr('class', 'layer-layer layer-mapillary-signs');
-
-        if (supportsMapillarySigns) {
-            if (!mapillarySignLayer) { mapillarySignLayer = iD.MapillarySignLayer(context); }
-            mapillarySigns.call(mapillarySignLayer);
-        } else {
-            mapillarySignLayer = null;
-        }
-
-        mapillarySigns.exit()
-            .remove();
     }
 
     background.sources = function(extent) {
@@ -133,9 +85,6 @@ iD.Background = function(context) {
 
     background.dimensions = function(_) {
         baseLayer.dimensions(_);
-        gpxLayer.dimensions(_);
-        if (mapillaryImageLayer) mapillaryImageLayer.dimensions(_);
-        if (mapillarySignLayer) mapillarySignLayer.dimensions(_);
 
         overlayLayers.forEach(function(layer) {
             layer.dimensions(_);
@@ -156,74 +105,6 @@ iD.Background = function(context) {
         background.baseLayerSource(findSource('Bing'));
     };
 
-    background.hasGpxLayer = function() {
-        return !_.isEmpty(gpxLayer.geojson());
-    };
-
-    background.showsGpxLayer = function() {
-        return background.hasGpxLayer() && gpxLayer.enable();
-    };
-
-    function toDom(x) {
-        return (new DOMParser()).parseFromString(x, 'text/xml');
-    }
-
-    background.gpxLayerFiles = function(fileList) {
-        var f = fileList[0],
-            reader = new FileReader();
-
-        reader.onload = function(e) {
-            gpxLayer.geojson(toGeoJSON.gpx(toDom(e.target.result)));
-            iD.ui.MapInMap.gpxLayer.geojson(toGeoJSON.gpx(toDom(e.target.result)));
-            background.zoomToGpxLayer();
-            dispatch.change();
-        };
-
-        reader.readAsText(f);
-    };
-
-    background.zoomToGpxLayer = function() {
-        if (background.hasGpxLayer()) {
-            var map = context.map(),
-                viewport = map.trimmedExtent().polygon(),
-                coords = _.reduce(gpxLayer.geojson().features, function(coords, feature) {
-                    var c = feature.geometry.coordinates;
-                    return _.union(coords, feature.geometry.type === 'Point' ? [c] : c);
-                }, []);
-
-            if (!iD.geo.polygonIntersectsPolygon(viewport, coords, true)) {
-                var extent = iD.geo.Extent(d3.geo.bounds(gpxLayer.geojson()));
-                map.centerZoom(extent.center(), map.trimmedExtentZoom(extent));
-            }
-        }
-    };
-
-    background.toggleGpxLayer = function() {
-        gpxLayer.enable(!gpxLayer.enable());
-        iD.ui.MapInMap.gpxLayer.enable(!iD.ui.MapInMap.gpxLayer.enable());
-        dispatch.change();
-    };
-
-    background.showsMapillaryImageLayer = function() {
-        return mapillaryImageLayer && mapillaryImageLayer.enable();
-    };
-
-    background.showsMapillarySignLayer = function() {
-        return mapillarySignLayer && mapillarySignLayer.enable();
-    };
-
-    background.toggleMapillaryImageLayer = function() {
-        if (!mapillaryImageLayer) return;
-        mapillaryImageLayer.enable(!mapillaryImageLayer.enable());
-        dispatch.change();
-    };
-
-    background.toggleMapillarySignLayer = function() {
-        if (!mapillarySignLayer) return;
-        mapillarySignLayer.enable(!mapillarySignLayer.enable());
-        dispatch.change();
-    };
-
     background.showsLayer = function(d) {
         return d === baseLayer.source() ||
             (d.id === 'custom' && baseLayer.source().id === 'custom') ||
@@ -317,15 +198,9 @@ iD.Background = function(context) {
             if (overlay) background.toggleOverlayLayer(overlay);
         });
 
-        var gpx = q.gpx;
-        if (gpx) {
-            d3.text(gpx, function(err, gpxTxt) {
-                if (!err) {
-                    gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt)));
-                    iD.ui.MapInMap.gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt)));
-                    dispatch.change();
-                }
-            });
+        if (q.gpx) {
+            var gpx = context.layers().layer('gpx');
+            if (gpx) { gpx.url(q.gpx); }
         }
     };
 

diff --git a/js/id/renderer/gpx_layer.js b/js/id/renderer/gpx_layer.js