Rationalize vocabulary

- nodes
  - vertices
  - points
- ways
  - lines
  - areas

API.md

@@ -26,21 +26,21 @@ elements we use in order to implement a particular visual style.
 ### Geometric classes
 
 In addition to the OSM element vocabulary of nodes, ways, and relations, iD has
-established a related geometric vocabulary consisting of points, lines, and areas.
+established a related geometric vocabulary consisting of points, vertices, lines,
+and areas.
 
-A **point** is a node that is either not a member of any way, or has specific tags
-that identify it as "interesting" in some way. For example, a node belonging to a
-way may also be considered a point if it has a `traffic_signal` tag. Elements
-representing points have a `.point` class. Since a point is always a node, they
-also have a `.node` class. Nodes that are not points can be selected using
-`.node:not(.point)` (TODO: come up with something better than that.)
+A **point** is a node that is not a member of any way. Elements representing points
+have a `.point` class. Since a point is always a node, they also have a `.node` class.
+
+A **vertex** is a node that is a member of one or more ways. Elements representing
+points have `.vertex` and `.node` classes.
 
 A **line** is a way that is not an area. Elements representing lines have a `.line`
 class. Since a line is also a way, they also have a `.way` class.
 
 An **area** is a way that is circular, has certain tags, or lacks certain other
 tags (see `iD.Way#isArea` for the exact definition). Elements representing areas
-have an `.area` class. Since an area is also a way, they also have a `.way` class.
+have `.area` and `.way` classes.
 
 ### Tag classes
 

css/map.css

@@ -6,19 +6,19 @@ path {
     fill: none;
 }
 
-g.marker circle {
+g.point circle {
     fill:#fff;
 }
 
-g.marker.hover circle,
-g.marker.selected circle {
+g.point.hover circle,
+g.point.selected circle {
     fill:#ffff00;
     stroke-width:4;
     stroke:#fff
 }
 
 /* interactive elements */
-circle.handle {
+circle.vertex {
     fill:white;
     stroke:#333;
     fill-opacity:1;
@@ -26,14 +26,14 @@ circle.handle {
     stroke-opacity: 1;
 }
 
-circle.handle.shared {
+circle.vertex.shared {
     fill:#aff;
 }
 
-circle.handle.hover {
+circle.vertex.hover {
 }
 
-circle.handle.selected {
+circle.vertex.selected {
     fill: #ffff00;
 }
 
@@ -243,24 +243,19 @@ text.oneway {
     cursor:url(../img/cursor-grabbing.png) 9 9, auto;
 }
 
-.mode-browse path,
-.mode-select path {
-    cursor: url(../img/cursor-select-way.png), pointer;
+.mode-browse .point,
+.mode-select .point {
+    cursor: url(../img/cursor-select-point.png), pointer;
 }
 
-.mode-browse .marker,
-.mode-select .marker {
-    cursor: url(../img/cursor-select-marker.png), pointer;
+.mode-select .vertex,
+.mode-browse .vertex {
+    cursor: url(../img/cursor-select-vertex.png), pointer;
 }
 
-.mode-select .handle,
-.mode-browse .handle {
-    cursor: url(../img/cursor-select-node.png), pointer;
-}
-
-.mode-select .accuracy-handle,
-.mode-browse .accuracy-handle {
-    cursor: url(../img/cursor-select-split.png), pointer;
+.mode-browse .line,
+.mode-select .line {
+    cursor: url(../img/cursor-select-line.png), pointer;
 }
 
 .mode-select .area,
@@ -268,10 +263,15 @@ text.oneway {
     cursor: url(../img/cursor-select-area.png), pointer;
 }
 
-path:active,
+.mode-select .accuracy-handle,
+.mode-browse .accuracy-handle {
+    cursor: url(../img/cursor-select-split.png), pointer;
+}
+
+.point:active,
+.vertex:active,
+.line:active,
 .area:active,
-.marker:active,
-.handle:active,
 .accuracy-handle:active,
 .mode-select .selected {
     cursor: url(../img/cursor-select-acting.png), pointer;
@@ -285,7 +285,7 @@ path:active,
 }
 
 .mode-add-point #map:hover {
-    cursor:url(../img/cursor-draw-marker.png) 18 18, auto;
+    cursor:url(../img/cursor-draw-point.png) 18 18, auto;
 }
 
 #map.finish-area:hover {

index.html

@@ -34,7 +34,7 @@
         <script src='js/id/renderer/background_source.js'></script>
         <script src='js/id/renderer/map.js'></script>
         <script src='js/id/renderer/hash.js'></script>
-        <script src='js/id/renderer/markers.js'></script>
+        <script src='js/id/renderer/points.js'></script>
         <script src='js/id/ui/inspector.js'></script>
         <script src='js/id/ui/modal.js'></script>
         <script src='js/id/ui/confirm.js'></script>

js/id/behavior/drag_node.js

@@ -3,7 +3,7 @@ iD.behavior.DragNode = function(mode) {
         projection = mode.map.projection;
 
     return iD.behavior.drag()
-        .delegate(".handle, .marker")
+        .delegate(".node")
         .origin(function(entity) {
             return projection(entity.loc);
         })

js/id/renderer/map.js

@@ -16,10 +16,9 @@ iD.Map = function() {
         notice,
         background = iD.Background()
             .projection(projection),
-        class_stroke = iD.Style.styleClasses('stroke'),
-        class_fill = iD.Style.styleClasses('stroke'),
-        class_area = iD.Style.styleClasses('area'),
-        class_casing = iD.Style.styleClasses('casing'),
+        class_stroke = iD.Style.styleClasses('way line stroke'),
+        class_casing = iD.Style.styleClasses('way line casing'),
+        class_area = iD.Style.styleClasses('way area'),
         transformProp = iD.util.prefixCSSProperty('Transform'),
         support3d = iD.util.support3d(),
         supersurface, surface, defs, tilegroup, r, g, alength;
@@ -76,7 +75,7 @@ iD.Map = function() {
 
     function drawVector(difference) {
         if (surface.style(transformProp) != 'none') return;
-        var filter, all, ways = [], lines = [], areas = [], points = [], waynodes = [],
+        var filter, all, ways = [], lines = [], areas = [], points = [], vertices = [],
             extent = map.extent(),
             graph = history.graph();
 
@@ -109,19 +108,19 @@ iD.Map = function() {
             } else if (a._poi) {
                 points.push(a);
             } else if (!a._poi && a.type === 'node' && a.intersects(extent)) {
-                waynodes.push(a);
+                vertices.push(a);
             }
         }
         var parentStructure = graph.parentStructure(ways);
         var wayAccuracyHandles = ways.reduce(function(mem, w) {
             return mem.concat(accuracyHandles(w));
         }, []);
-        drawHandles(waynodes, parentStructure, filter);
+        drawVertices(vertices, parentStructure, filter);
         drawAccuracyHandles(wayAccuracyHandles, filter);
         drawCasings(lines, filter);
         drawFills(areas, filter);
         drawStrokes(lines, filter);
-        drawMarkers(points, filter);
+        drawPoints(points, filter);
     }
 
     function accuracyHandles(way) {
@@ -139,21 +138,19 @@ iD.Map = function() {
         return handles;
     }
 
-    function drawHandles(waynodes, parentStructure, filter) {
+    function drawVertices(vertices, parentStructure, filter) {
         function shared(d) { return parentStructure[d.id] > 1; }
 
-        var handles = g.hit.selectAll('circle.handle')
+        var vertices = g.hit.selectAll('circle.vertex')
             .filter(filter)
-            .data(waynodes, key);
+            .data(vertices, key);
 
-        handles.exit().remove();
+        vertices.exit().remove();
 
-        handles.enter().insert('circle', ':first-child')
-            .attr({
-                'class': 'handle'
-            });
+        vertices.enter().insert('circle', ':first-child')
+            .attr('class', 'node vertex');
 
-        handles.attr('transform', function(entity) {
+        vertices.attr('transform', function(entity) {
                 var p = projection(entity.loc);
                 return 'translate(' + [~~p[0], ~~p[1]] +
                     ')';
@@ -161,7 +158,7 @@ iD.Map = function() {
             .classed('shared', shared)
             .classed('hover', classHover);
 
-        handles.transition().duration(50).attr('r', function(d) {
+        vertices.transition().duration(50).attr('r', function(d) {
                 return d.id === hover ? 8: 4;
             });
     }
@@ -211,23 +208,23 @@ iD.Map = function() {
         drawLines(ways, filter, g.casing, class_casing);
     }
 
-    function drawMarkers(points, filter) {
-        var markers = g.hit.selectAll('g.marker')
+    function drawPoints(points, filter) {
+        var points = g.hit.selectAll('g.point')
             .filter(filter)
             .data(points, key);
-        markers.exit().remove();
-        var marker = markers.enter().append('g')
-            .attr('class', 'marker');
-        marker.append('circle')
+        points.exit().remove();
+        var group = points.enter().append('g')
+            .attr('class', 'node point');
+        group.append('circle')
             .attr({ r: 10, cx: 8, cy: 8 });
-        marker.append('image')
+        group.append('image')
             .attr({ width: 16, height: 16 });
-        markers.attr('transform', function(d) {
+        points.attr('transform', function(d) {
                 var pt = projection(d.loc);
                 return 'translate(' + [~~pt[0], ~~pt[1]] + ') translate(-8, -8)';
             });
-        markers.classed('hover', classHover);
-        markers.select('image').attr('xlink:href', iD.Style.markerimage);
+        points.classed('hover', classHover);
+        points.select('image').attr('xlink:href', iD.Style.pointImage);
     }
 
     function drawStrokes(ways, filter) {

js/id/renderer/points.js

@@ -1,6 +1,6 @@
-// an index of tag -> marker image combinations, taken from
+// an index of tag -> point image combinations, taken from
 // http://svn.openstreetmap.org/applications/rendering/mapnik/inc/layer-amenity-symbols.xml.inc
-iD._markers = [
+iD._points = [
     {
         tags: { aeroway: 'helipad' },
         icon: 'helipad'
@@ -549,18 +549,18 @@ iD._markers = [
     }
 ];
 
-// generate a fast lookup table for marker styling
-iD._markertable = (function(markers) {
+// generate a fast lookup table for point styling
+iD._pointTable = (function(points) {
     var table = {};
-    for (var i = 0; i < markers.length; i++) {
-        var marker = markers[i];
+    for (var i = 0; i < points.length; i++) {
+        var point = points[i];
         // single-tag matches, the easy case
-        if (Object.keys(marker.tags).length === 1) {
-            for (var k in marker.tags) {
-                var key = k + '=' + marker.tags[k];
-                table[key] = marker.icon;
+        if (Object.keys(point.tags).length === 1) {
+            for (var k in point.tags) {
+                var key = k + '=' + point.tags[k];
+                table[key] = point.icon;
             }
         }
     }
     return table;
-})(iD._markers);
+})(iD._points);

js/id/renderer/style.js

@@ -5,7 +5,7 @@ iD.Style = {};
 // Since SVG does not support z-index, we sort roads manually with d3's `sort`
 // and the `waystack` fn.
 //
-// This also chooses kosher CSS classes for ways, and marker images for POIs
+// This also chooses kosher CSS classes for ways, and images for points
 
 iD.Style.highway_stack = {
     motorway: 0,
@@ -37,12 +37,12 @@ iD.Style.waystack = function(a, b) {
     return as - bs;
 };
 
-iD.Style.markerimage = function(d) {
+iD.Style.pointImage = function(d) {
     // TODO: optimize
     for (var k in d.tags) {
         var key = k + '=' + d.tags[k];
-        if (iD._markertable[key]) {
-            return 'icons/' + iD._markertable[key] + '.png';
+        if (iD._pointTable[key]) {
+            return 'icons/' + iD._pointTable[key] + '.png';
         }
     }
     return 'icons/unknown.png';

test/index.html

@@ -37,7 +37,7 @@
     <script src='../js/id/renderer/background_source.js'></script>
     <script src='../js/id/renderer/map.js'></script>
     <script src='../js/id/renderer/hash.js'></script>
-    <script src='../js/id/renderer/markers.js'></script>
+    <script src='../js/id/renderer/points.js'></script>
     <script src='../js/id/renderer/style.js'></script>
     <script src='../js/id/ui/inspector.js'></script>
     <script src='../js/id/ui/commit.js'></script>