CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-23 08:39:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Move layer-hit to layer-points with explict sublayers, update tests

Browse Source 
This is more work to further isolate the layers that entities draw to.
It makes it easier to debug what is going on, and can eventually lead to
deferred drawing, if each draw function is in its own place and not dependant
on anything else.

I've started to replace the vertex-hover with an explicit layer for touch
targets.

Also had to change a lot of the svg tests, which are really brittle.
Things would happen like - the surface would be created, it would kick of a
deferred redraw, which would notice that the zoom was 0 and call
editOff, which would remove the osm layers that were just created and
that the tests were trying to draw to. These tests need proper zoom and
projection otherwise nothing works.
This commit is contained in:
Bryan Housel
2017-12-14 17:38:43 -05:00
parent bfaf17538e
commit b9e48d1682
17 changed files with 405 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/renderer/map.js
+16 -16
View File
@@ -178,23 +178,23 @@ export function rendererMap(context) {
})
.on('mousemove.map', function() {
mousemove = d3_event;
})
.on('mouseover.vertices', function() {
if (map.editable() && !transformed) {
var hover = d3_event.target.__data__;
surface.selectAll('.data-layer-osm')
.call(drawVertices.drawHover, context.graph(), hover, map.extent());
dispatch.call('drawn', this, { full: false });
}
})
.on('mouseout.vertices', function() {
if (map.editable() && !transformed) {
var hover = d3_event.relatedTarget && d3_event.relatedTarget.__data__;
surface.selectAll('.data-layer-osm')
.call(drawVertices.drawHover, context.graph(), hover, map.extent());
dispatch.call('drawn', this, { full: false });
}
});
// .on('mouseover.vertices', function() {
// if (map.editable() && !transformed) {
// var hover = d3_event.target.__data__;
// surface.selectAll('.data-layer-osm')
// .call(drawVertices.drawHover, context.graph(), hover, map.extent());
// dispatch.call('drawn', this, { full: false });
// }
// })
// .on('mouseout.vertices', function() {
// if (map.editable() && !transformed) {
// var hover = d3_event.relatedTarget && d3_event.relatedTarget.__data__;
// surface.selectAll('.data-layer-osm')
// .call(drawVertices.drawHover, context.graph(), hover, map.extent());
// dispatch.call('drawn', this, { full: false });
// }
// });
supersurface
.call(context.background());
modules/svg/labels.js
-10
View File
@@ -676,20 +676,10 @@ export function svgLabels(projection, context) {
var layer = selection.selectAll('.layer-labels');
var groups = layer.selectAll('.layer-labels-group')
.data(['halo','label','debug']);
groups = groups.enter()
.append('g')
.attr('class', function(d) { return 'layer-labels-group layer-labels-' + d; })
.merge(groups);
var halo = layer.selectAll('.layer-labels-halo');
var label = layer.selectAll('.layer-labels-label');
var debug = layer.selectAll('.layer-labels-debug');
// points
drawPointLabels(label, labelled.point, filter, 'pointlabel', positions.point);
drawPointLabels(halo, labelled.point, filter, 'pointlabel-halo', positions.point);
modules/svg/midpoints.js
+1 -1
View File
@@ -16,7 +16,7 @@ import {
export function svgMidpoints(projection, context) {
return function drawMidpoints(selection, graph, entities, filter, extent) {
var layer = selection.selectAll('.layer-hit');
var layer = selection.selectAll('.layer-points .layer-points-midpoints');
var mode = context.mode();
if (mode && mode.id !== 'select') {
modules/svg/osm.js
+13 -1
View File
@@ -4,10 +4,22 @@ export function svgOsm(projection, context, dispatch) {
function drawOsm(selection) {
selection.selectAll('.layer-osm')
.data(['areas', 'lines', 'hit', 'labels'])
.data(['areas', 'lines', 'points', 'labels'])
.enter()
.append('g')
.attr('class', function(d) { return 'layer-osm layer-' + d; });
selection.selectAll('.layer-points').selectAll('.layer-points-group')
.data(['points', 'midpoints', 'vertices', 'turns', 'targets'])
.enter()
.append('g')
.attr('class', function(d) { return 'layer-points-group layer-points-' + d; });
selection.selectAll('.layer-labels').selectAll('.layer-labels-group')
.data(['halo', 'label', 'debug'])
.enter()
.append('g')
.attr('class', function(d) { return 'layer-labels-group layer-labels-' + d; });
}
modules/svg/points.js
+2 -1
View File
@@ -36,7 +36,8 @@ export function svgPoints(projection, context) {
points.sort(sortY);
var layer = selection.selectAll('.layer-hit');
var layer = selection.selectAll('.layer-points .layer-points-points');
var groups = layer.selectAll('g.point')
.filter(filter)
modules/svg/turns.js
+2 -1
View File
@@ -18,7 +18,8 @@ export function svgTurns(projection) {
(!turn.indirect_restriction && /^only_/.test(restriction) ? 'only' : 'no') + u;
}
var groups = selection.selectAll('.layer-hit').selectAll('g.turn')
var layer = selection.selectAll('.layer-points .layer-points-turns');
var groups = layer.selectAll('g.turn')
.data(turns, key);
groups.exit()
modules/svg/vertices.js
+97 -78
View File
@@ -54,7 +54,8 @@ export function svgVertices(projection, context) {
function setClass(klass) {
return function(entity) {
this.setAttribute('class', 'node vertex ' + klass + ' ' + entity.id);
d3_select(this)
.attr('class', 'node vertex ' + klass + ' ' + entity.id);
};
}
@@ -171,9 +172,7 @@ export function svgVertices(projection, context) {
function drawVertices(selection, graph, entities, filter, extent) {
var wireframe = context.surface().classed('fill-wireframe');
var zoom = ktoz(projection.scale());
var siblings = {};
getSiblingAndChildVertices(context.selectedIDs(), graph, extent);
var siblings = getSiblingAndChildVertices(context.selectedIDs(), graph, extent, wireframe, zoom);
// always render selected and sibling vertices..
var vertices = _clone(siblings);
@@ -184,7 +183,7 @@ export function svgVertices(projection, context) {
var entity = entities[i];
var geometry = entity.geometry(graph);
if ((geometry === 'point') && renderAsVertex(entity)) {
if ((geometry === 'point') && renderAsVertex(entity, graph, wireframe, zoom)) {
vertices[entity.id] = entity;
} else if ((geometry === 'vertex') &&
@@ -193,85 +192,105 @@ export function svgVertices(projection, context) {
}
}
selection.selectAll('.layer-hit')
selection.selectAll('.layer-points .layer-points-vertices')
.call(draw, _values(vertices), 'vertex-persistent', graph, siblings, filterWithSiblings);
// drawHover(selection, graph, extent, true);
drawTargets(selection, graph, _values(vertices), filter, extent);
// Points can also render as vertices:
// 1. in wireframe mode or
// 2. at higher zooms if they have a direction
function renderAsVertex(entity) {
var geometry = entity.geometry(graph);
return geometry === 'vertex' || (geometry === 'point' && (
wireframe || (zoom > 18 && entity.directions(graph, projection).length)
));
}
function getSiblingAndChildVertices(ids, graph, extent) {
function addChildVertices(entity) {
var geometry = entity.geometry(graph);
if (!context.features().isHiddenFeature(entity, graph, geometry)) {
var i;
if (entity.type === 'way') {
for (i = 0; i < entity.nodes.length; i++) {
var child = context.hasEntity(entity.nodes[i]);
if (child) {
addChildVertices(child);
}
}
} else if (entity.type === 'relation') {
for (i = 0; i < entity.members.length; i++) {
var member = context.hasEntity(entity.members[i].id);
if (member) {
addChildVertices(member);
}
}
} else if (renderAsVertex(entity) && entity.intersects(extent, graph)) {
siblings[entity.id] = entity;
}
}
}
ids.forEach(function(id) {
var entity = context.hasEntity(id);
if (!entity) return;
if (entity.type === 'node') {
if (renderAsVertex(entity)) {
siblings[entity.id] = entity;
graph.parentWays(entity).forEach(function(entity) {
addChildVertices(entity);
});
}
} else { // way, relation
addChildVertices(entity);
}
});
}
}
// function drawHover(selection, graph, extent, follow) {
// var hovered = _hover ? siblingAndChildVertices([_hover.id], graph, extent) : {};
// var wireframe = context.surface().classed('fill-wireframe');
// var layer = selection.selectAll('.layer-hit');
//
// layer.selectAll('g.vertex.vertex-hover')
// .call(draw, _values(hovered), 'vertex-hover', graph, {}, false);
// }
//
//
// drawVertices.drawHover = function(selection, graph, target, extent) {
// if (target === _hover) return;
// _hover = target;
// drawHover(selection, graph, extent);
// };
function drawTargets(selection, graph, entities, filter, extent) {
// todo coming soon
return;
var layer = selection.selectAll('.layer-points .layer-points-targets');
var targets = layer.selectAll('g.vertex.target')
.data(entities, osmEntity.key);
// exit
targets.exit()
.remove();
// enter/update
targets.enter()
.append('circle')
.attr('r', radiuses.shadow[3]) // just use the biggest one for now
.attr('class', function(d) { return 'node vertex target ' + d.id; })
.merge(targets)
.attr('transform', svgPointTransform(projection));
}
// Points can also render as vertices:
// 1. in wireframe mode or
// 2. at higher zooms if they have a direction
function renderAsVertex(entity, graph, wireframe, zoom) {
var geometry = entity.geometry(graph);
return geometry === 'vertex' || (geometry === 'point' && (
wireframe || (zoom > 18 && entity.directions(graph, projection).length)
));
}
function getSiblingAndChildVertices(ids, graph, extent, wireframe, zoom) {
var results = {};
function addChildVertices(entity) {
var geometry = entity.geometry(graph);
if (!context.features().isHiddenFeature(entity, graph, geometry)) {
var i;
if (entity.type === 'way') {
for (i = 0; i < entity.nodes.length; i++) {
var child = context.hasEntity(entity.nodes[i]);
if (child) {
addChildVertices(child);
}
}
} else if (entity.type === 'relation') {
for (i = 0; i < entity.members.length; i++) {
var member = context.hasEntity(entity.members[i].id);
if (member) {
addChildVertices(member);
}
}
} else if (renderAsVertex(entity, graph, wireframe, zoom) && entity.intersects(extent, graph)) {
results[entity.id] = entity;
}
}
}
ids.forEach(function(id) {
var entity = context.hasEntity(id);
if (!entity) return;
if (entity.type === 'node') {
if (renderAsVertex(entity, graph, wireframe, zoom)) {
results[entity.id] = entity;
graph.parentWays(entity).forEach(function(entity) {
addChildVertices(entity);
});
}
} else { // way, relation
addChildVertices(entity);
}
});
return results;
}
drawVertices.drawHover = function(selection, graph, target, extent) {
if (target === _hover) return;
_hover = target;
var wireframe = context.surface().classed('fill-wireframe');
var zoom = ktoz(projection.scale());
var hovered = _hover ? getSiblingAndChildVertices([_hover.id], graph, extent, wireframe, zoom) : {};
var filter = function() { return true; };
drawTargets(selection, graph, _values(hovered), filter, extent);
};
return drawVertices;
}