Inspector cleanup, needs lots more work

css/app.css

@@ -151,21 +151,21 @@ table td {
     top:90px;
     right:20px;
     overflow:auto;
-    padding:10px;
-    background:#aaa;
+    padding:5px;
+    background:#fff;
 }
 
 .inspector thead th {
     font-size:10px;
     line-height:10px;
-    color:#eee;
+    color:#999;
     font-weight:normal;
     text-transform:uppercase;
 }
 
 .inspector input {
     margin:0;
-    padding:2px;
+    padding:4px;
     border:0;
     border-bottom:1px solid #ccc;
     width:150px;

css/map.css

@@ -1,3 +1,7 @@
+image.tile {
+    opacity:0.6;
+}
+
 /* base styles */
 use, path {
     fill: none;
@@ -7,9 +11,9 @@ use, path {
 /* interactive elements */
 circle.handle {
     cursor: move;
-    stroke-width: 1;
-    stroke:#222;
-    fill:#eee;
+    stroke-width: 2;
+    stroke:#1DCAFF;
+    fill:#D3F5FF;
 }
 
 .casing {
@@ -65,12 +69,14 @@ circle.handle {
     opacity:0.2;
 }
 
+/*
 .stroke.highway {
     stroke-opacity:0.7;
 }
 .casing.highway {
-    stroke-opacity:0.2;
+    stroke-opacity:0.7;
 }
+*/
 
 /* highways */
 .stroke.highway-residential {

index.html

@@ -67,7 +67,7 @@
         width: $(document).width(),
         height: $(document).height()
     });
-    map.setZoom(19)
+    map.setZoom(18)
         .setCentre({ lat: 40.7965621, lon: -74.4773184 });
 
     // ----------------------------------------------------

js/iD/Connection.js

@@ -20,10 +20,16 @@ iD.Connection = function(apiURL) {
 
     function assign(obj) {
         // summary:	Save an entity to the data store.
-        if (obj.entityType === 'node' || obj.entityType === 'way') {
-            entities[obj.id] = obj;
+        if (obj.entityType === 'node') { // never reassign nodes
+            if (!entities[obj.id]) entities[obj.id] = obj;
+        } else if (obj.entityType === 'way') {
+            if (!entities[obj.id]) {
+                entities[obj.id] = obj;
+            } else {
+                entities[obj.id].nodes = obj.nodes;
+            }
         } else if (obj.entityType === 'relation') {
-            relations[obj.id] = obj;
+            if (!relations[obj.id]) relations[obj.id] = obj;
         }
     }
 
@@ -92,8 +98,20 @@ iD.Connection = function(apiURL) {
         return function(item) { return item.nodeName === n; };
     }
 
+    function attributeObject(obj) {
+        var o = {};
+        for (var i = 0; i < obj.attributes.length; i++) {
+            o[obj.attributes[i].nodeName] = obj.attributes[i].nodeValue;
+        }
+        return o;
+    }
+
     function getAttribute(obj, name) {
-        return _.find(obj.attributes, filterNodeName(name)).nodeValue;
+        for (var i = 0; i < obj.attributes.length; i++) {
+            if (obj.attributes[i].nodeName === name) {
+                return obj.attributes[i].nodeValue;
+            }
+        }
     }
 
     function getTags(obj) {
@@ -128,31 +146,34 @@ iD.Connection = function(apiURL) {
                 type = getAttribute(item,'type'),
                 role = getAttribute(item,'role');
 
-                var obj = getOrCreate(id,type);
-                return new iD.RelationMember(obj,role);
+                var obj = getOrCreate(id, type);
+                return new iD.RelationMember(obj, role);
             }).value();
     }
 
     function parse(callback) {
         return function(dom) {
             for (var i = 0; i < dom.childNodes[0].childNodes.length; i++) {
-                var obj = dom.childNodes[0].childNodes[i];
+                var obj = dom.childNodes[0].childNodes[i], attrib;
                 if (obj.nodeName === 'node') {
+                    attrib = attributeObject(obj);
                     var node = new iD.Node(connection,
-                        +getAttribute(obj, 'id'),
-                        +getAttribute(obj, 'lat'),
-                        +getAttribute(obj, 'lon'),
+                        +attrib.id,
+                        +attrib.lat,
+                        +attrib.lon,
                         getTags(obj));
                     assign(node);
                 } else if (obj.nodeName === 'way') {
+                    attrib = attributeObject(obj);
                     var way = new iD.Way(connection,
-                        getAttribute(obj, 'id'),
+                        attrib.id,
                         getNodes(obj, connection),
                         getTags(obj));
                     assign(way);
                 } else if (obj.nodeName === 'relation') {
+                    attrib = attributeObject(obj);
                     var relation = new iD.Relation(connection,
-                        getAttribute(obj, 'id'),
+                        attrib.id,
                         getMembers(obj, connection),
                         getTags(obj));
                     assign(relation);

js/iD/renderer/Map.js

@@ -119,7 +119,7 @@ iD.renderer.Map = function(obj) {
         shop: [
             'convenience',
             'supermarket'],
-        amenity: 
+        amenity:
             [
             'atm',
             'bank',
@@ -208,12 +208,8 @@ iD.renderer.Map = function(obj) {
                 .data(ways, key),
             strokes = layers[0].stroke.selectAll('use.stroke')
                 .data(ways, key),
-            texts = layers[0].text.selectAll('text')
-                .data(ways.filter(function(w) {
-                    return !!w.tags.name;
-                }), key),
             markers = layers[0].hit.selectAll('image.marker')
-                .data(points, key);
+                .data(points.filter(markerimage), key);
 
         var _id = selection[0];
         var active_entity = all.filter(function(a) {
@@ -224,7 +220,6 @@ iD.renderer.Map = function(obj) {
             .data(active_entity.length ? active_entity[0].nodes : [], key);
 
         defpaths.exit().remove();
-        texts.exit().remove();
         handles.exit().remove();
         fills.exit().remove();
         markers.exit().remove();
@@ -267,14 +262,6 @@ iD.renderer.Map = function(obj) {
                 return 'translate(' + projection(d) + ')';
             });
 
-        var textems = texts.enter().append('text')
-            .attr('dy', 3);
-
-        textems.append('textPath')
-            .attr('xlink:href', usehref)
-            .attr('startOffset', '50%')
-            .text(function(d) { return d.tags.name; });
-
         handles.enter().append('circle')
             .attr('class', 'handle')
             .attr('r', 5)
@@ -283,7 +270,7 @@ iD.renderer.Map = function(obj) {
             return 'translate(' + projection(d) + ')';
         });
     }
-    
+
     // -------------
     // Zoom handling
     function zoomIn() {

js/iD/ui/Inspector.js

@@ -3,42 +3,39 @@ iD.Inspector = function(selection) {
 
     // http://jsfiddle.net/7WQjr/
     selection.each(function(d, i) {
-        var tagpairs = d3.entries(d.tags);
-
         d3.select(this).selectAll('table').remove();
 
         var table = d3.select(this)
             .append('table')
             .attr('class', 'inspector');
 
-        var thead = table.append('thead');
         var tbody = table.append('tbody');
 
-        thead.append('tr')
-            .selectAll('th')
+        table.append('thead').append('tr').selectAll('th')
             .data(['tag', 'value'])
             .enter()
             .append('th')
                 .text(String);
 
         var row = tbody.selectAll('tr')
-            .data(tagpairs)
+            .data(d3.entries(d.tags))
             .enter()
             .append('tr');
 
-        row.selectAll('td')
-            .data(function(d) {
-                return [d.key, d.value];
-            })
-            .enter()
-            .append('td')
-            .append('input')
-                .attr('class', function(d, i) {
-                    return i === 0 ? 'tag-input' : 'value-input';
-                })
-                .attr('placeholder', function(d, i) {
-                    return i === 0 ? 'tag' : 'value';
-                })
-                .property('value', function(d) { return d; });
+        row.append('td').append('input')
+            .property('value', function(d) { return d.key; });
+
+        row.append('td').append('input')
+            .attr('class', 'tag-value')
+            .property('value', function(d) { return d.value; });
+
+        var save = d3.select(this)
+            .append('button')
+            .text('Save')
+            .on('click', function(d, i) {
+                var inputs = table.selectAll('input.tag-value')
+                    .data();
+                console.log(inputs);
+            });
     });
 };