From 1f337aa9602ea85252cc28dea1542ff8d3ebfb70 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 23 Feb 2016 16:15:26 -0500 Subject: [PATCH] Move more data layers from Background into Surface --- index.html | 1 + js/id/renderer/background.js | 66 +++++++++++++++------------------ js/id/renderer/map.js | 2 +- js/id/svg/gpx.js | 7 +++- js/id/svg/mapillary_images.js | 10 ++--- js/id/svg/mapillary_signs.js | 10 ++--- js/id/svg/osm.js | 9 +++++ js/id/svg/surface.js | 56 +++++++++++++++++++++++++--- js/id/ui/preset/restrictions.js | 21 +++++++---- test/index.html | 1 + test/rendering.html | 1 + 11 files changed, 120 insertions(+), 64 deletions(-) create mode 100644 js/id/svg/osm.js diff --git a/index.html b/index.html index fb5c184ff..b5706274f 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@ + diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js index 7a420e014..8bed81f87 100644 --- a/js/id/renderer/background.js +++ b/js/id/renderer/background.js @@ -78,56 +78,48 @@ iD.Background = function(context) { - // var gpx = selection.selectAll('.layer-gpx') - // .data([0]); - - // gpx.enter().insert('div') - // .attr('class', 'layer-layer layer-gpx'); - - // gpx.call(gpxLayer); - - selection.selectAll('#surface') - .call(gpxLayer); + // selection.selectAll('#surface') + // .call(gpxLayer); - var mapillary = iD.services.mapillary, - supportsMapillaryImages = !!mapillary, - supportsMapillarySigns = !!mapillary && mapillary().signsSupported(); + // var mapillary = iD.services.mapillary, + // supportsMapillaryImages = !!mapillary, + // supportsMapillarySigns = !!mapillary && mapillary().signsSupported(); - var mapillaryImages = selection.selectAll('.layer-mapillary-images') - .data(supportsMapillaryImages ? [0] : []); + // var mapillaryImages = selection.selectAll('.layer-mapillary-images') + // .data(supportsMapillaryImages ? [0] : []); - mapillaryImages.enter().insert('div') - .attr('class', 'layer-layer layer-mapillary-images'); + // mapillaryImages.enter().insert('div') + // .attr('class', 'layer-layer layer-mapillary-images'); - if (supportsMapillaryImages) { - if (!mapillaryImageLayer) { mapillaryImageLayer = iD.svg.MapillaryImages(context); } - mapillaryImages.call(mapillaryImageLayer); - } else { - mapillaryImageLayer = null; - } + // if (supportsMapillaryImages) { + // if (!mapillaryImageLayer) { mapillaryImageLayer = iD.svg.MapillaryImages(context); } + // mapillaryImages.call(mapillaryImageLayer); + // } else { + // mapillaryImageLayer = null; + // } - mapillaryImages.exit() - .remove(); + // mapillaryImages.exit() + // .remove(); - var mapillarySigns = selection.selectAll('.layer-mapillary-signs') - .data(supportsMapillarySigns ? [0] : []); + // var mapillarySigns = selection.selectAll('.layer-mapillary-signs') + // .data(supportsMapillarySigns ? [0] : []); - mapillarySigns.enter().insert('div') - .attr('class', 'layer-layer layer-mapillary-signs'); + // mapillarySigns.enter().insert('div') + // .attr('class', 'layer-layer layer-mapillary-signs'); - if (supportsMapillarySigns) { - if (!mapillarySignLayer) { mapillarySignLayer = iD.svg.MapillarySigns(context); } - mapillarySigns.call(mapillarySignLayer); - } else { - mapillarySignLayer = null; - } + // if (supportsMapillarySigns) { + // if (!mapillarySignLayer) { mapillarySignLayer = iD.svg.MapillarySigns(context); } + // mapillarySigns.call(mapillarySignLayer); + // } else { + // mapillarySignLayer = null; + // } - mapillarySigns.exit() - .remove(); + // mapillarySigns.exit() + // .remove(); } background.sources = function(extent) { diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 3c606061f..bb3ca1d50 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -56,7 +56,7 @@ iD.Map = function(context) { if (resetTransform()) redraw(); }) .attr('id', 'surface') - .call(iD.svg.Surface(context)); + .call(iD.svg.Surface(projection, context)); supersurface.call(context.background()); diff --git a/js/id/svg/gpx.js b/js/id/svg/gpx.js index bc4699fef..8bf4ab9cd 100644 --- a/js/id/svg/gpx.js +++ b/js/id/svg/gpx.js @@ -93,6 +93,9 @@ iD.svg.Gpx = function(projection, context) { return (new DOMParser()).parseFromString(x, 'text/xml'); } + function redraw() { + context.pan([0,0]); + } gpx.showLabels = function(_) { if (!arguments.length) return showLabels; @@ -117,7 +120,7 @@ iD.svg.Gpx = function(projection, context) { d3.text(url, function(err, data) { if (!err) { gpx.geojson(toGeoJSON.gpx(toDom(data))); - // dispatch.change(); + redraw(); } }); return gpx; @@ -129,7 +132,7 @@ iD.svg.Gpx = function(projection, context) { reader.onload = function(e) { gpx.geojson(toGeoJSON.gpx(toDom(e.target.result))).fitZoom(); - // dispatch.change(); + redraw(); }; reader.readAsText(f); diff --git a/js/id/svg/mapillary_images.js b/js/id/svg/mapillary_images.js index 6f061cd8b..075828cd8 100644 --- a/js/id/svg/mapillary_images.js +++ b/js/id/svg/mapillary_images.js @@ -1,4 +1,4 @@ -iD.svg.MapillaryImages = function(context) { +iD.svg.MapillaryImages = function(projection, context) { var debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000), enabled = false, minZoom = 12, @@ -19,7 +19,7 @@ iD.svg.MapillaryImages = function(context) { if (!mapillary) return; var thumb = mapillary.selectedThumbnail(), - posX = context.projection(image.loc)[0], + posX = projection(image.loc)[0], width = layer.dimensions()[0], position = (posX < width / 2) ? 'right' : 'left'; @@ -71,14 +71,14 @@ iD.svg.MapillaryImages = function(context) { } function transform(d) { - var t = iD.svg.PointTransform(context.projection)(d); + var t = iD.svg.PointTransform(projection)(d); if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; return t; } function drawMarkers() { var mapillary = getMapillary(), - data = (mapillary ? mapillary.images(context.projection, layer.dimensions()) : []); + data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []); var markers = layer.selectAll('.viewfield-group') .data(data, function(d) { return d.key; }); @@ -153,7 +153,7 @@ iD.svg.MapillaryImages = function(context) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); drawMarkers(); - mapillary.loadImages(context.projection, layer.dimensions()); + mapillary.loadImages(projection, layer.dimensions()); } else { editOff(); } diff --git a/js/id/svg/mapillary_signs.js b/js/id/svg/mapillary_signs.js index 56375bd42..98a25115b 100644 --- a/js/id/svg/mapillary_signs.js +++ b/js/id/svg/mapillary_signs.js @@ -1,4 +1,4 @@ -iD.svg.MapillarySigns = function(context) { +iD.svg.MapillarySigns = function(projection, context) { var debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000), enabled = false, minZoom = 12, @@ -19,7 +19,7 @@ iD.svg.MapillarySigns = function(context) { if (!mapillary) return; var thumb = mapillary.selectedThumbnail(), - posX = context.projection(image.loc)[0], + posX = projection(image.loc)[0], width = layer.dimensions()[0], position = (posX < width / 2) ? 'right' : 'left'; @@ -63,7 +63,7 @@ iD.svg.MapillarySigns = function(context) { function drawSigns() { var mapillary = getMapillary(), - data = (mapillary ? mapillary.signs(context.projection, layer.dimensions()) : []); + data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []); var signs = layer.select('.mapillary-sign-offset') .selectAll('.icon-sign') @@ -111,7 +111,7 @@ iD.svg.MapillarySigns = function(context) { // Update signs - .attr('transform', iD.svg.PointTransform(context.projection)); + .attr('transform', iD.svg.PointTransform(projection)); } function render(selection) { @@ -135,7 +135,7 @@ iD.svg.MapillarySigns = function(context) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); drawSigns(); - mapillary.loadSigns(context, context.projection, layer.dimensions()); + mapillary.loadSigns(context, projection, layer.dimensions()); } else { editOff(); } diff --git a/js/id/svg/osm.js b/js/id/svg/osm.js new file mode 100644 index 000000000..31ba891ac --- /dev/null +++ b/js/id/svg/osm.js @@ -0,0 +1,9 @@ +iD.svg.Osm = function() { + return function (selection) { + var layers = selection.selectAll('.layer-osm') + .data(['areas', 'lines', 'hit', 'halo', 'label']); + + layers.enter().append('g') + .attr('class', function(d) { return 'layer layer-osm layer-' + d; }); + }; +}; diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js index 0aafadd1b..06df27eac 100644 --- a/js/id/svg/surface.js +++ b/js/id/svg/surface.js @@ -1,14 +1,58 @@ -iD.svg.Surface = function() { - return function (selection) { +iD.svg.Surface = function (projection, context) { + var all = [ + { order: 1, id: 'osm', render: iD.svg.Osm(projection, context) }, + { order: 2, id: 'gpx', render: iD.svg.Gpx(projection, context) }, + { order: 3, id: 'mapillary-images', render: iD.svg.MapillaryImages(projection, context) }, + { order: 4, id: 'mapillary-signs', render: iD.svg.MapillarySigns(projection, context) } + ]; + + + function surface (selection) { selection.selectAll('defs') .data([0]) .enter() .append('defs'); - var layers = selection.selectAll('.layer') - .data(['areas', 'lines', 'hit', 'halo', 'label']); + var groups = selection.selectAll('.data-layer') + .data(all); - layers.enter().append('g') - .attr('class', function(d) { return 'layer layer-osm layer-' + d; }); + groups.enter() + .append('g') + .attr('class', function(d) { return 'layer data-layer data-layer-' + d.id; }); + + groups + .sort(function(a, b) { return a.order - b.order; }) + .each(function(d) { d3.select(this).call(d.render); }); + + groups.exit() + .remove(); + } + + + surface.only = function (what) { + var arr = [].concat(what); + surface.remove(_.difference(_.pluck(all, 'id'), arr)); + return surface; }; + + surface.remove = function (what) { + var arr = [].concat(what); + _.each(arr, function(id) { + all = _.reject(all, function(d) { return d.id === id; }); + }); + return surface; + }; + + surface.add = function (what) { + var arr = [].concat(what); + _.each(arr, function(obj) { + if ('order' in obj && 'id' in obj && 'render' in obj) { + all.push(obj); + } + }); + return surface; + }; + + + return surface; }; diff --git a/js/id/ui/preset/restrictions.js b/js/id/ui/preset/restrictions.js index aa0b91ee6..6a57ecbf9 100644 --- a/js/id/ui/preset/restrictions.js +++ b/js/id/ui/preset/restrictions.js @@ -7,21 +7,19 @@ iD.ui.preset.restrictions = function(field, context) { var wrap = selection.selectAll('.preset-input-wrap') .data([0]); - var enter = wrap.enter().append('div') + var enter = wrap.enter() + .append('div') .attr('class', 'preset-input-wrap'); - enter.append('div') + enter + .append('div') .attr('class', 'restriction-help'); - enter.append('svg') - .call(iD.svg.Surface(context)) - .call(iD.behavior.Hover(context)); var intersection = iD.geo.Intersection(context.graph(), vertexID), graph = intersection.graph, vertex = graph.entity(vertexID), - surface = wrap.selectAll('svg'), - filter = function () { return true; }, + filter = d3.functor(true), extent = iD.geo.Extent(), projection = iD.geo.RawMercator(), lines = iD.svg.Lines(projection, context), @@ -30,7 +28,7 @@ iD.ui.preset.restrictions = function(field, context) { var d = wrap.dimensions(), c = [d[0] / 2, d[1] / 2], - z = 21; + z = 24; projection .scale(256 * Math.pow(2, z) / (2 * Math.PI)); @@ -41,6 +39,13 @@ iD.ui.preset.restrictions = function(field, context) { .translate([c[0] - s[0], c[1] - s[1]]) .clipExtent([[0, 0], d]); + enter + .append('svg') + .call(iD.svg.Surface(projection, context).only('osm')) + .call(iD.behavior.Hover(context)); + + var surface = wrap.selectAll('svg'); + surface .call(vertices, graph, [vertex], filter, extent, z) .call(lines, graph, intersection.ways, filter) diff --git a/test/index.html b/test/index.html index febd5a40a..abd89e8ea 100644 --- a/test/index.html +++ b/test/index.html @@ -74,6 +74,7 @@ + diff --git a/test/rendering.html b/test/rendering.html index c6a7f9437..dfe463a48 100644 --- a/test/rendering.html +++ b/test/rendering.html @@ -21,6 +21,7 @@ +