From 9d93b2ec64e8fd67f44fc39422e1579611abefe9 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 24 Oct 2012 12:12:33 -0400 Subject: [PATCH] Selection-style rendering, no more uis --- index.html | 5 +- js/iD/Connection.js | 5 ++ js/iD/renderer/Map.js | 127 ++++++++++++++++++++++++------------------ 3 files changed, 80 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 35bb7e607..2e9910b63 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ iD - @@ -15,6 +14,7 @@ + @@ -23,9 +23,6 @@ - - - diff --git a/js/iD/Connection.js b/js/iD/Connection.js index aa58f0519..9da3eac3a 100755 --- a/js/iD/Connection.js +++ b/js/iD/Connection.js @@ -16,6 +16,10 @@ iD.Connection = function(apiURL) { var connection = {}; + function all() { + return _.values(entities); + } + function assign(obj) { // summary: Save an entity to the data store. if (obj.entityType === 'node' || obj.entityType === 'way') { @@ -154,6 +158,7 @@ iD.Connection = function(apiURL) { } connection.entities = entities; + connection.all = all; connection.relations = relations; connection.loadFromAPI = loadFromAPI; connection.loadFromURL = loadFromURL; diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index e2f762acd..8a5553f3f 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -79,14 +79,11 @@ iD.renderer.Map.prototype = { div: '', //
of this map surface: null, //
.surface containing the rendering - container: null, // root-level group within the surface - backdrop: null, // coloured backdrop (MapCSS canvas element) - connection: null, // data store + container: null, // root-level group within the surface + connection: null, // data store controller: null, // UI controller - uis: {}, tilegroup: null, // group within container for adding bitmap tiles - tiles: {}, // index of tile objects tilebaseURL: 'http://ecn.t0.tiles.virtualearth.net/tiles/a$quadkey.jpeg?g=587&mkt=en-gb&n=z', // Bing imagery URL height: NaN, // size of map object in pixels @@ -104,38 +101,6 @@ iD.renderer.Map.prototype = { this.controller = controller; }, - createUI: function(e, stateClasses) { - // summary: Create a UI (sprite) for an entity, assigning any specified state classes - // (temporary attributes such as ':hover' or ':selected') - if (!this.uis[e.id]) { - if (e.entityType === 'node') { - this.uis[e.id] = new iD.renderer.NodeUI(e, this, stateClasses); - } else if (e.entityType === 'way') { - this.uis[e.id] = new iD.renderer.WayUI(e, this, stateClasses); - } - } else { - this.uis[e.id].setStateClasses(stateClasses).redraw(); - } - }, - - getUI: function(e) { - // summary: Return the UI for an entity, if it exists. - return this.uis[e.id]; // iD.renderer.EntityUI - }, - - refreshUI: function(e) { - // summary: Redraw the UI for an entity. - if (this.uis[e.id]) { this.uis[e.id].redraw(); } - }, - - deleteUI: function(e) { - // summary: Delete the UI for an entity. - if (this.uis[e.id]) { - this.uis[e.id].removeSprites(); - delete this.uis[e.id]; - } - }, - download: _.debounce(function() { // summary: Ask the connection to download data for the current viewport. this.connection.loadFromAPI(this.extent(), _.bind(this.updateUIs, this)); @@ -151,34 +116,90 @@ iD.renderer.Map.prototype = { // summary: Draw/refresh all EntityUIs within the bbox, and remove any others. // redraw: Boolean Should we redraw any UIs that are already present? // remove: Boolean Should we delete any UIs that are no longer in the bbox? - var o = this.connection.getObjectsByBbox(this.extent()); - - var touch = _(o).chain() - .filter(function(w) { return w.loaded; }) - .map(_.bind(function(e) { - if (!this.uis[e.id]) { - this.createUI(e); - } else { - this.uis[e.id].draw(); + function classes(d) { + var tags = d.tags; + var c = []; + function clean(x) { + return x.indexOf(' ') === -1 && x.length < 30; + } + for (var k in tags) { + var v = tags[k]; + if (!clean(k) || !clean(v)) { + continue; } - return '' + e.id; - }, this)).value(); + c.push(k + '-' + v); + c.push(k); + c.push(v); + } + return c.join(' '); + } - _.each(_.difference(_.keys(this.uis), touch), _.bind(function(k) { - this.deleteUI(k); - }, this)); + var linegen = this.linegen; + + var all = this.connection.all(); + + function key(d) { return d._id; } + + var ways = all.filter(function(a) { + return a.entityType === 'way' && !a.isClosed(); + }); + + var areas = all.filter(function(a) { + return a.entityType === 'way' && a.isClosed(); + }); + + var fills = this.layers[0].fill.selectAll('path.area') + .data(areas, key); + + fills.enter().append('path') + .attr('class', function(d) { + return 'area ' + classes(d); + }); + fills.exit().remove(); + fills.attr("d", function(d) { + return linegen(d.nodes); + }); + + var casings = this.layers[0].casing.selectAll('path.casing') + .data(ways, key); + + casings.enter().append('path') + .attr('class', function(d) { + return 'casing ' + classes(d); + }); + casings.exit().remove(); + casings.attr("d", function(d) { + return linegen(d.nodes); + }); + + var strokes = this.layers[0].stroke.selectAll('path.stroke') + .data(ways, key); + + strokes.enter().append('path') + .attr('class', function(d) { + return 'stroke ' + classes(d); + }); + strokes.exit().remove(); + strokes.attr("d", function(d) { + return linegen(d.nodes); + }); }, // ------------- // Zoom handling zoomIn: function() { // summary: Zoom in by one level (unless maximum reached). - return this.setZoom(this.zoom + 1); + return this.setZoom(this.getZoom() + 1); }, zoomOut: function() { // summary: Zoom out by one level (unless minimum reached). - return this.setZoom(this.zoom - 1); + return this.setZoom(this.getZoom() - 1); + }, + + getZoom: function(zoom) { + var s = this.projection.scale(); + return Math.max(Math.log(s) / Math.log(2) - 8, 0); }, setZoom: function(zoom) {