WIP: add detail slider to restriction editor

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

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 = [];
 

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