diff --git a/css/80_app.css b/css/80_app.css index 78792e46a..e851b66ec 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1834,7 +1834,11 @@ input[type=number] { /* Restrictions editor */ -.form-field-restrictions .preset-input-wrap { +.form-field-restrictions .restriction-detail { + height: 30px; +} + +.form-field-restrictions .restriction-container { position: relative; height: 400px; } @@ -1844,7 +1848,7 @@ input[type=number] { height: 100%; } -.form-field-restrictions .restriction-help { +.restriction-container .restriction-help { z-index: 1; position: absolute; top: 0; @@ -1856,11 +1860,11 @@ input[type=number] { text-align: center; } -.form-field-restrictions .restriction-help span { +.restriction-help span { margin: 2px; } -.form-field-restrictions .restriction-help span.qualifier { +.restriction-help span.qualifier { color: #666; font-weight: bold; } diff --git a/modules/osm/intersection.js b/modules/osm/intersection.js index 236fa9c5f..6947e1240 100644 --- a/modules/osm/intersection.js +++ b/modules/osm/intersection.js @@ -29,7 +29,12 @@ export function osmTurn(turn) { } -export function osmIntersection(graph, startVertexId) { +// +// detail = 0 - via node only +// detail = 1 - via node / 1 via way +// detail = 2 - via node / up to 2 via ways +// +export function osmIntersection(graph, startVertexId, detail) { var vgraph = coreGraph(); // virtual graph var i, j, k; @@ -101,6 +106,7 @@ export function osmIntersection(graph, startVertexId) { ways.push(way); // it's a road, or it's already in a turn restriction hasWays = true; + if (!detail) continue; // check the way's children for more key vertices nodes = _uniq(graph.childNodes(way)); @@ -384,7 +390,10 @@ export function osmIntersection(graph, startVertexId) { var start = vgraph.entity(fromWayId); if (!start || !(start.__from || start.__via)) return []; - var maxPathLength = 7; // from-*-via-*-via-*-to (2 vias max) + // detail=0 from-*-to (0 vias) + // detail=1 from-*-via-*-to (1 via max) + // detail=2 from-*-via-*-via-*-to (2 vias max) + var maxPathLength = (detail * 2) + 3; var maxStepDist = 30; // meters var turns = []; diff --git a/modules/ui/fields/restrictions.js b/modules/ui/fields/restrictions.js index 8ea0b5b95..1ce8d6c12 100644 --- a/modules/ui/fields/restrictions.js +++ b/modules/ui/fields/restrictions.js @@ -52,8 +52,9 @@ export function uiFieldRestrictions(field, context) { var breathe = behaviorBreathe(context); var hover = behaviorHover(context); + var _detail = 0; var _initialized = false; - var _wrap = d3_select(null); + var _container = d3_select(null); var _graph; var _vertexID; var _intersection; @@ -71,27 +72,72 @@ export function uiFieldRestrictions(field, context) { var wrap = selection.selectAll('.preset-input-wrap') .data([0]); - _wrap = wrap.enter() + wrap = wrap.enter() .append('div') .attr('class', 'preset-input-wrap') .merge(wrap); - var help = _wrap.selectAll('.restriction-help') + var detailEnter = wrap.selectAll('.restriction-detail') + .data([0]) + .enter() + .append('div') + .attr('class', 'restriction-detail'); + + detailEnter + .append('span') + .attr('class', 'restriction-detail-label') + .text('Max Detail: '); + + detailEnter + .append('input') + .attr('class', 'restriction-detail-input') + .attr('type', 'range') + .attr('min', '0') + .attr('max', '2') + .attr('step', '1') + .on('input', function(d) { + var val = d3_select(this).property('value'); + _detail = +val; + _intersection = null; + _container.selectAll('.layer-osm *').remove(); + selection.call(restrictions); + }); + + detailEnter + .append('span') + .attr('class', 'restriction-detail-text'); + + // update + wrap.selectAll('.restriction-detail-input') + .property('value', _detail); + + var t = ['via node only', 'via 1 way', 'via 2 ways']; + wrap.selectAll('.restriction-detail-text') + .text(t[_detail]); + + + var container = wrap.selectAll('.restriction-container') .data([0]); - help.enter() + var containerEnter = container.enter() + .append('div') + .attr('class', 'restriction-container'); + + containerEnter .append('div') .attr('class', 'restriction-help'); + _container = containerEnter + .merge(container); // try to reuse the intersection, but always rebuild it if the graph has changed if (context.graph() !== _graph || !_intersection) { _graph = context.graph(); - _intersection = osmIntersection(_graph, _vertexID); + _intersection = osmIntersection(_graph, _vertexID, _detail); } var ok = (_intersection.vertices.length && _intersection.ways.length); - _wrap + _container .call(renderViewer); } @@ -103,7 +149,7 @@ export function uiFieldRestrictions(field, context) { var filter = utilFunctor(true); var projection = geoRawMercator(); - var d = utilGetDimensions(_wrap); + var d = utilGetDimensions(_container); var c = geoVecScale(d, 0.5); var z = 22; @@ -155,18 +201,13 @@ export function uiFieldRestrictions(field, context) { .call(breathe) .call(hover); -// entity editor will redraw all fields anyway? - // context.history() - // .on('change.restrictions', redraw); - d3_select(window) .on('resize.restrictions', function() { - utilSetDimensions(_wrap, null); + utilSetDimensions(_container, null); redraw(); }); } - surface .call(utilSetDimensions, d) .call(drawVertices, vgraph, _intersection.vertices, filter, extent, z) @@ -240,7 +281,7 @@ export function uiFieldRestrictions(field, context) { function mouseover() { - var help = _wrap.selectAll('.restriction-help').html(''); + var help = _container.selectAll('.restriction-help').html(''); var div, d; var datum = d3_event.target.__data__; @@ -321,7 +362,7 @@ export function uiFieldRestrictions(field, context) { // ' VIA ' + (datum.via.node || datum.via.ways.join(',')) + // ' TO ' + datum.to.way; - // _wrap.selectAll('.restriction-help') + // _container.selectAll('.restriction-help') // .text(str); // return; @@ -341,7 +382,7 @@ export function uiFieldRestrictions(field, context) { // ); // } - // _wrap.selectAll('.restriction-help') + // _container.selectAll('.restriction-help') // .text(t('operations.restriction.help.' + // (datum.restriction ? 'toggle_off' : 'toggle_on'), // { restriction: preset.name() }) @@ -351,7 +392,7 @@ export function uiFieldRestrictions(field, context) { function mouseout() { - var help = _wrap.selectAll('.restriction-help').html(''); + var help = _container.selectAll('.restriction-help').html(''); var div = help.append('div'); var d; @@ -366,7 +407,7 @@ export function uiFieldRestrictions(field, context) { div.append('span').text('way'); } - // _wrap.selectAll('.restriction-help') + // _container.selectAll('.restriction-help') // .text(t('operations.restriction.help.' + // (_fromWayID ? 'toggle' : 'select')) // ); @@ -375,7 +416,7 @@ export function uiFieldRestrictions(field, context) { function redraw() { if (context.hasEntity(_vertexID)) { - _wrap.call(renderViewer); + _container.call(renderViewer); } } } @@ -412,9 +453,6 @@ export function uiFieldRestrictions(field, context) { .on('mouseover.restrictions', null) .on('mouseout.restrictions', null); - // context.history() - // .on('change.restrictions', null); - d3_select(window) .on('resize.restrictions', null); };