From 9f00f0fee251581644ecc78ce71307796ba60a3c Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 31 Oct 2012 21:57:15 -0400 Subject: [PATCH] Add map resize API, bind to window onresize event. Fixes #39 --- index.html | 5 +++ js/iD/Node.js | 7 +++- js/iD/Relation.js | 11 ++--- js/iD/Way.js | 11 +++-- js/iD/renderer/Map.js | 91 +++++++++++++++++++++-------------------- js/iD/renderer/tiles.js | 14 +++++-- 6 files changed, 77 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index 82463d893..fef944cec 100755 --- a/index.html +++ b/index.html @@ -77,6 +77,11 @@ map.setZoom(18) .setCentre({ lat: 40.7965621, lon: -74.4773184 }); + window.onresize = function() { + map.setSize(m.node().offsetWidth, + m.node().offsetHeight); + }; + // ---------------------------------------------------- // Data is loaded and app ready to go // Set initial controllerState diff --git a/js/iD/Node.js b/js/iD/Node.js index e6e963c1f..dfd613890 100644 --- a/js/iD/Node.js +++ b/js/iD/Node.js @@ -1,22 +1,25 @@ iD.Node = function(id, lat, lon, tags, loaded) { - this.type = 'node'; this.id = id; this._id = iD.Util.id(); this.lat = lat; this.lon = lon; this[0] = lon; this[1] = lat; - this.tags = tags; + this.tags = tags || {}; this.loaded = (loaded === undefined) ? true : loaded; }; iD.Node.prototype = { + + type: 'node', + intersects: function(extent) { return (this.lon >= extent[0][0]) && (this.lon <= extent[1][0]) && (this.lat <= extent[0][1]) && (this.lat >= extent[1][1]); } + }; iD.Util.extend(iD.Node, iD.Entity); diff --git a/js/iD/Relation.js b/js/iD/Relation.js index fb90e8c3f..55cb216bd 100644 --- a/js/iD/Relation.js +++ b/js/iD/Relation.js @@ -1,17 +1,14 @@ iD.Relation = function(id, children, tags, loaded) { - members = members || []; - tags = tags || {}; - this.type = 'relation'; this.id = id; this._id = iD.Util.id(); - this.entity = new iD.Entity(); - this.children = children; - this.tags = tags; - this.modified = this.id < 0; + this.children = children || []; + this.tags = tags || {}; this.loaded = (loaded === undefined) ? true : loaded; }; iD.Relation.prototype = { + type: 'relation', + intersects: function() { return true; } }; diff --git a/js/iD/Way.js b/js/iD/Way.js index 491dc9761..d35edd5d8 100644 --- a/js/iD/Way.js +++ b/js/iD/Way.js @@ -6,20 +6,19 @@ // // If a a way is _closed_, it is assumed to be an area unless it has a // `highway` or `barrier` tag and is not also tagged `area`. -iD.Way = function(id, nodes, tags, loaded) { - nodes = nodes || []; - tags = tags || {}; - this.type = 'way'; +iD.Way = function(id, children, tags, loaded) { this.id = id; this._id = iD.Util.id(); - this.tags = tags; - this.children = nodes; + this.tags = tags || {}; + this.children = children || []; this.loaded = (loaded === undefined) ? true : loaded; this.extent = {}; }; iD.Way.prototype = { + type: 'way', + // JOSM: http://josm.openstreetmap.de/browser/josm/trunk/src/org/openstreetmap/josm/data/osm/Way.java#L466 isClosed: function() { // summary: Is this a closed way (first and last nodes the same)? diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 370fe91ce..18e1524f9 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -11,8 +11,7 @@ iD.Map = function(obj) { height = obj.height || 400, projection = d3.geo.mercator() .scale(512).translate([512, 512]), - connection = obj.connection, - layers = {}; + connection = obj.connection; var inspector = iD.Inspector(); @@ -34,20 +33,19 @@ iD.Map = function(obj) { // http://bl.ocks.org/1557377 function dragmove(d) { - d3.select(this).attr('transform', function() { - return 'translate(' + d3.event.x + ',' + d3.event.y + ')'; - }); - var ll = projection.invert([d3.event.x, d3.event.y]); - d[0] = ll[0]; - d[1] = ll[1]; - drawVector(); + d3.select(this).attr('transform', function() { + return 'translate(' + d3.event.x + ',' + d3.event.y + ')'; + }); + var ll = projection.invert([d3.event.x, d3.event.y]); + d[0] = ll[0]; + d[1] = ll[1]; + drawVector(); } zoombehavior.on('zoom', redraw); var surface = d3.selectAll(obj.selector) .append('svg') - .attr({ width: width, height: height }) .call(zoombehavior); var defs = surface.append('defs'); @@ -56,29 +54,28 @@ iD.Map = function(obj) { .attr('id', 'clip') .append('rect') .attr('id', 'clip-rect') - .attr({ x: 0, y: 0 }) - .attr({ width: width, height: height }); + .attr({ x: 0, y: 0 }); var tilegroup = surface.append('g') .attr('clip-path', 'url(#clip)') .on('click', deselectClick), - container = surface.append('g') + r = surface.append('g') .attr('clip-path', 'url(#clip)'); - var tileclient = iD.Tiles(tilegroup, width, height); + var tileclient = iD.Tiles(tilegroup, projection, width, height); - var r = container.append('g'); + function setSize(width, height) { + surface.attr({ width: width, height: height }); + clipPath.attr({ width: width, height: height }); + tileclient.setSize(width, height); + } - layers[0] = { - root: r, - fill: r.append('g'), - casing: r.append('g'), - stroke: r.append('g'), - text: r.append('g'), - hit: r.append('g') - }; - - var elastic = container.append('g'); + var fill_g = r.append('g'), + casing_g = r.append('g'), + stroke_g = r.append('g'), + text_g = r.append('g'), + hit_g = r.append('g'), + elastic = r.append('g'); var download = _.debounce(function() { connection.loadFromAPI(extent(), drawVector); @@ -148,24 +145,35 @@ iD.Map = function(obj) { return a.type === 'node'; }); - var fills = layers[0].fill.selectAll('path.area') + var fills = fill_g.selectAll('path.area') .data(areas, key), - casings = layers[0].casing.selectAll('path.casing') + casings = casing_g.selectAll('path.casing') .data(ways, key), - strokes = layers[0].stroke.selectAll('path.stroke') + strokes = stroke_g.selectAll('path.stroke') .data(ways, key), - markers = layers[0].hit.selectAll('image.marker') + markers = hit_g.selectAll('image.marker') .data(points.filter(iD.markerimage), key); - var _id = selection[0]; - var active_entity = all.filter(function(a) { - return a._id === _id && a.entityType === 'way'; - }); + if (selection.length) { + var _id = selection[0]; + var active_entity = all.filter(function(a) { + return a._id === _id && a.entityType === 'way'; + }); - var handles = layers[0].hit.selectAll('circle.handle') - .data(active_entity.length ? active_entity[0].children : [], key); + var handles = hit_g.selectAll('circle.handle') + .data(active_entity.length ? active_entity[0].children : [], key); + + handles.exit().remove(); + + handles.enter().append('circle') + .attr('class', 'handle') + .attr('r', 5) + .call(dragbehavior); + handles.attr('transform', function(d) { + return 'translate(' + projection(d) + ')'; + }); + } - handles.exit().remove(); fills.exit().remove(); markers.exit().remove(); casings.exit().remove(); @@ -201,13 +209,6 @@ iD.Map = function(obj) { return 'translate(' + projection(d) + ')'; }); - handles.enter().append('circle') - .attr('class', 'handle') - .attr('r', 5) - .call(dragbehavior); - handles.attr('transform', function(d) { - return 'translate(' + projection(d) + ')'; - }); } function zoomIn() { @@ -238,7 +239,7 @@ iD.Map = function(obj) { .translate(d3.event.translate) .scale(d3.event.scale); } - tileclient.redraw(projection); + tileclient.redraw(); drawVector(); download(); } @@ -267,7 +268,9 @@ iD.Map = function(obj) { map.connection = connection; map.projection = projection; + map.setSize = setSize; + setSize(width, height); redraw(); return map; }; diff --git a/js/iD/renderer/tiles.js b/js/iD/renderer/tiles.js index cede0fb2f..1150e765f 100644 --- a/js/iD/renderer/tiles.js +++ b/js/iD/renderer/tiles.js @@ -1,8 +1,8 @@ // a minimal map tile client, to be turned on and off etc. -iD.Tiles = function(selection, width, height) { +iD.Tiles = function(selection, projection, width, height) { var tiles = {}; - function tilesForView(projection) { + function tilesForView() { var t = projection.translate(), s = projection.scale(), z = Math.max(Math.log(s) / Math.log(2) - 8, 0); @@ -36,7 +36,7 @@ iD.Tiles = function(selection, width, height) { return tmpl.replace('$quadkey', u); } - function redraw(projection) { + function redraw() { var t = projection.translate(), s = projection.scale(), z = Math.max(Math.log(s) / Math.log(2) - 8, 0); @@ -63,6 +63,14 @@ iD.Tiles = function(selection, width, height) { }); } + function setSize(w, h) { + width = w; + height = h; + redraw(); + return tiles; + } + + tiles.setSize = setSize; tiles.redraw = redraw; return tiles;