Enable way segments toolbar item and basic orthogonal drawing support (…

…close #6453)

css/80_app.css

@@ -370,6 +370,10 @@ button[disabled].action:hover {
     width: 20px;
     height: 20px;
 }
+.icon-30 {
+    width: 30px;
+    height: 30px;
+}
 
 .icon.inline {
     vertical-align: text-top;

data/core.yaml

@@ -17,6 +17,8 @@ en:
     favorites: Favorites
     add_feature: Add Feature
     finish: Finish
+    segments:
+      title: Segments
   modes:
     add_feature:
       search_placeholder: Search feature types

dist/locales/en.json

@@ -19,7 +19,10 @@
             "recent": "Recent",
             "favorites": "Favorites",
             "add_feature": "Add Feature",
-            "finish": "Finish"
+            "finish": "Finish",
+            "segments": {
+                "title": "Segments"
+            }
         },
         "modes": {
             "add_feature": {

modules/behavior/draw_way.js

@@ -94,13 +94,67 @@ export function behaviorDrawWay(context, wayID, index, mode, startGraph, baselin
             if (choice) {
                 loc = choice.loc;
             }
+        } else {
+            if (context.storage('line-segments') === 'orthogonal') {
+                var orthoLoc = orthogonalLoc(loc);
+                if (orthoLoc) loc = orthoLoc;
+            }
         }
 
         context.replace(actionMoveNode(end.id, loc));
         end = context.entity(end.id);
         checkGeometry(false);
     }
 
+    function orthogonalLoc(mouseLoc) {
+        var way = context.hasEntity(wayID);
+        if (!way) return null;
+
+        if (way.nodes.length - 1 < (way.isArea() ? 3 : 2)) return null;
+
+        var baselineNodeIndex = way.isClosed() ? way.nodes.length - 3 : way.nodes.length - 2;
+        var node1 = context.hasEntity(way.nodes[baselineNodeIndex - 1]);
+        var node2 = context.hasEntity(way.nodes[baselineNodeIndex]);
+
+        if (!node1 || !node2 ||
+            node1.loc === node2.loc) return null;
+
+        var projection = context.projection;
+
+        var pA = projection(node1.loc),
+            pB = projection(node2.loc),
+            p3 = projection(mouseLoc);
+
+        var xA = pA[0],
+            yA = pA[1],
+            xB = pB[0],
+            yB = pB[1],
+            x3 = p3[0],
+            y3 = p3[1];
+
+        var x1 = xB,
+            y1 = yB,
+            x2 = xB + 1,
+            y2;
+
+        if (xA === xB) {
+            y2 = y1;
+        } else {
+            var slope = (yB-yA)/(xB-xA);
+            var perpSlope = -1/slope;
+            var b = yB - perpSlope*xB;
+            y2 = perpSlope * x2 + b;
+        }
+
+        var k = ((y2-y1) * (x3-x1) - (x2-x1) * (y3-y1)) / (Math.pow(y2-y1, 2) + Math.pow(x2-x1, 2));
+        var x4 = x3 - k * (y2-y1);
+        var y4 = y3 + k * (x2-x1);
+
+        if (!isFinite(x4) || !isFinite(y4)) return null;
+
+        return projection.invert([x4, y4]);
+    }
+
 
     // Check whether this edit causes the geometry to break.
     // If so, class the surface with a nope cursor.

modules/ui/tools/add_favorite.js

@@ -14,7 +14,7 @@ export function uiToolAddFavorite(context) {
 
     var tool = {
         id: 'add_favorite',
-        klass: 'modes',
+        itemClass: 'modes',
         label: t('toolbar.favorites')
     };
 

modules/ui/tools/add_recent.js

@@ -14,7 +14,7 @@ export function uiToolAddRecent(context) {
 
     var tool = {
         id: 'add_recent',
-        klass: 'modes',
+        itemClass: 'modes',
         label: t('toolbar.recent')
     };
 

modules/ui/tools/operation.js

@@ -11,7 +11,7 @@ export function uiToolOperation() {
     var operation;
 
     var tool = {
-        klass: 'operation'
+        itemClass: 'operation'
     };
 
     var button, tooltipBehavior;
@@ -44,7 +44,7 @@ export function uiToolOperation() {
 
     tool.update = function() {
         if (!operation) return;
-        
+
         if (tooltipBehavior) {
             tooltipBehavior.title(uiTooltipHtml(operation.tooltip(), operation.keys[0]));
         }

modules/ui/tools/way_segments.js

@@ -0,0 +1,61 @@
+import {
+    select as d3_select
+} from 'd3-selection';
+
+import { svgIcon } from '../../svg';
+import { t } from '../../util/locale';
+
+export function uiToolWaySegments(context) {
+
+    var tool = {
+        id: 'way_segments',
+        contentClass: 'joined',
+        label: t('toolbar.segments.title')
+    };
+
+    tool.render = function(selection) {
+
+        var waySegmentTypes = [
+            {
+                id: 'straight'
+            },
+            {
+                id: 'orthogonal'
+            }
+        ];
+
+        var buttons = selection.selectAll('.bar-button')
+            .data(waySegmentTypes)
+            .enter();
+
+        buttons
+            .append('button')
+            .attr('class', function(d) {
+                var segmentType = context.storage('line-segments') || 'straight';
+                return 'bar-button ' + (segmentType === d.id ? 'active' : '');
+            })
+            .attr('tabindex', -1)
+            .on('click', function(d) {
+                if (d3_select(this).classed('active')) return;
+
+                context.storage('line-segments', d.id);
+
+                selection.selectAll('.bar-button')
+                    .classed('active', false);
+                d3_select(this).classed('active', true);
+            })
+            .each(function(d) {
+                d3_select(this).call(svgIcon('#iD-segment-' + d.id, 'icon-30'));
+            });
+    };
+
+    tool.update = function() {
+
+    };
+
+    tool.uninstall = function() {
+
+    };
+
+    return tool;
+}

modules/ui/top_toolbar.js

@@ -7,6 +7,7 @@ import { modeBrowse } from '../modes/browse';
 import _debounce from 'lodash-es/debounce';
 import { uiToolAddFavorite, uiToolAddRecent, uiToolNotes, uiToolOperation, uiToolSave, uiToolAddFeature, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
 import { uiToolSimpleButton } from './tools/simple_button';
+import { uiToolWaySegments } from './tools/way_segments';
 
 export function uiTopToolbar(context) {
 
@@ -17,6 +18,7 @@ export function uiTopToolbar(context) {
         notes = uiToolNotes(context),
         undoRedo = uiToolUndoRedo(context),
         save = uiToolSave(context),
+        waySegments = uiToolWaySegments(context),
         deselect = uiToolSimpleButton('deselect', t('toolbar.deselect.title'), 'iD-icon-close', function() {
             context.enter(modeBrowse(context));
         }, null, 'Esc'),
@@ -90,23 +92,31 @@ export function uiTopToolbar(context) {
 
             tools = tools.concat([undoRedo, save]);
 
-        } else if (mode.id === 'add-point' || mode.id === 'add-line' || mode.id === 'add-area') {
-            tools.push(sidebarToggle);
-            tools.push('spacer');
+        } else if (mode.id === 'add-point' || mode.id === 'add-line' || mode.id === 'add-area' ||
+            mode.id === 'draw-line' || mode.id === 'draw-area') {
 
-            tools.push(cancelDrawing);
-        } else if (mode.id === 'draw-line' || mode.id === 'draw-area') {
             tools.push(sidebarToggle);
             tools.push('spacer');
 
-            tools.push(undoRedo);
+            if (mode.id.indexOf('line') !== -1 || mode.id.indexOf('area') !== -1) {
+                tools.push(waySegments);
+                tools.push('spacer');
+            }
+
+            if (mode.id.indexOf('draw') !== -1) {
+
+                tools.push(undoRedo);
 
-            var way = context.hasEntity(mode.wayID);
-            if (way && new Set(way.nodes).size - 1 >= (way.isArea() ? 3 : 2)) {
-                tools.push(finishDrawing);
+                var way = context.hasEntity(mode.wayID);
+                if (way && new Set(way.nodes).size - 1 >= (way.isArea() ? 3 : 2)) {
+                    tools.push(finishDrawing);
+                } else {
+                    tools.push(cancelDrawing);
+                }
             } else {
                 tools.push(cancelDrawing);
             }
+
         } else {
             tools.push(sidebarToggle);
             tools.push('spacer');
@@ -174,15 +184,19 @@ export function uiTopToolbar(context) {
                 .append('div')
                 .attr('class', function(d) {
                     var classes = 'toolbar-item ' + (d.id || d).replace('_', '-');
-                    if (d.klass) classes += ' ' + d.klass;
+                    if (d.itemClass) classes += ' ' + d.itemClass;
                     return classes;
                 });
 
             var actionableItems = itemsEnter.filter(function(d) { return typeof d !== 'string'; });
 
             actionableItems
                 .append('div')
-                .attr('class', 'item-content')
+                .attr('class', function(d) {
+                    var classes = 'item-content';
+                    if (d.contentClass) classes += ' ' + d.contentClass;
+                    return classes;
+                })
                 .each(function(d) {
                     d3_select(this).call(d.render, bar);
                 });