CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-13 01:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move more data layers from Background into Surface

Browse Source
This commit is contained in:
Bryan Housel
2016-02-23 16:15:26 -05:00
parent a5d8e1b0cb
commit 1f337aa960
11 changed files with 120 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -69,6 +69,7 @@
<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/tag_classes.js"></script>

66
js/id/renderer/background.js
View File

@@ -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) {

2
js/id/renderer/map.js
View File

@@ -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());

7
js/id/svg/gpx.js
View File

@@ -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);

10
js/id/svg/mapillary_images.js
View File

@@ -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();
}

10
js/id/svg/mapillary_signs.js
View File

@@ -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();
}

9
js/id/svg/osm.js Normal file
View File

@@ -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; });
};
};

56
js/id/svg/surface.js
View File

@@ -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;
};

21
js/id/ui/preset/restrictions.js
View File

@@ -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)

1
test/index.html
View File

@@ -74,6 +74,7 @@
<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/tag_classes.js"></script>

1
test/rendering.html
View File

@@ -21,6 +21,7 @@
<script src="../js/id/svg/icon.js"></script>
<script src="../js/id/svg/lines.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/tag_classes.js"></script>