From 9ee790c1cc738c4924562d3174381c96ddc99ec9 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 30 Oct 2016 22:40:11 -0400 Subject: [PATCH] Don't need to pass dimensions to sublayers.. use projection.clipExtent (the dimensions call to layers is to set width/height on svg surface element) --- modules/services/mapillary.js | 31 ++++++++++++++++--------------- modules/svg/layers.js | 5 ----- modules/svg/mapillary_images.js | 21 +++++++-------------- modules/svg/mapillary_signs.js | 18 +++++------------- test/spec/services/mapillary.js | 28 +++++++++++++++------------- 5 files changed, 43 insertions(+), 60 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index c02bdd68b..ac46b462f 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -43,7 +43,7 @@ function nearNullIsland(x, y, z) { } -function getTiles(projection, dimensions) { +function getTiles(projection) { var s = projection.scale() * 2 * Math.PI, z = Math.max(Math.log(s) / Math.log(2) - 8, 0), ts = 256 * Math.pow(2, z - tileZoom), @@ -54,7 +54,7 @@ function getTiles(projection, dimensions) { return d3geoTile() .scaleExtent([tileZoom, tileZoom]) .scale(s) - .size(dimensions) + .size(projection.clipExtent()[1]) .translate(projection.translate())() .map(function(tile) { var x = tile[0] * ts - origin[0], @@ -71,8 +71,8 @@ function getTiles(projection, dimensions) { } -function loadTiles(which, url, projection, dimensions) { - var tiles = getTiles(projection, dimensions).filter(function(t) { +function loadTiles(which, url, projection) { + var tiles = getTiles(projection).filter(function(t) { var xyz = t.id.split(','); return !nearNullIsland(xyz[0], xyz[1], xyz[2]); }); @@ -139,7 +139,8 @@ function loadTilePage(which, url, tile, page) { // partition viewport into `psize` x `psize` regions -function partitionViewport(psize, projection, dimensions) { +function partitionViewport(psize, projection) { + var dimensions = projection.clipExtent()[1]; psize = psize || 16; var cols = d3.range(0, dimensions[0], psize), rows = d3.range(0, dimensions[1], psize), @@ -159,10 +160,10 @@ function partitionViewport(psize, projection, dimensions) { // no more than `limit` results per partition. -function searchLimited(psize, limit, projection, dimensions, rtree) { +function searchLimited(psize, limit, projection, rtree) { limit = limit || 3; - var partitions = partitionViewport(psize, projection, dimensions); + var partitions = partitionViewport(psize, projection); return _.flatten(_.compact(_.map(partitions, function(extent) { return rtree.search(extent.bbox()) .slice(0, limit) @@ -204,15 +205,15 @@ export default { }, - images: function(projection, dimensions) { + images: function(projection) { var psize = 16, limit = 3; - return searchLimited(psize, limit, projection, dimensions, mapillaryCache.images.rtree); + return searchLimited(psize, limit, projection, mapillaryCache.images.rtree); }, - signs: function(projection, dimensions) { + signs: function(projection) { var psize = 32, limit = 3; - return searchLimited(psize, limit, projection, dimensions, mapillaryCache.signs.rtree); + return searchLimited(psize, limit, projection, mapillaryCache.signs.rtree); }, @@ -235,15 +236,15 @@ export default { }, - loadImages: function(projection, dimensions) { + loadImages: function(projection) { var url = apibase + 'search/im/geojson?'; - loadTiles('images', url, projection, dimensions); + loadTiles('images', url, projection); }, - loadSigns: function(context, projection, dimensions) { + loadSigns: function(context, projection) { var url = apibase + 'search/im/geojson/or?'; - loadTiles('signs', url, projection, dimensions); + loadTiles('signs', url, projection); // load traffico css d3.select('head').selectAll('#traffico') diff --git a/modules/svg/layers.js b/modules/svg/layers.js index 98b5ba901..87d38149c 100644 --- a/modules/svg/layers.js +++ b/modules/svg/layers.js @@ -94,11 +94,6 @@ export function svgLayers(projection, context) { drawLayers.dimensions = function(_) { if (!arguments.length) return utilGetDimensions(svg); utilSetDimensions(svg, _); - layers.forEach(function(obj) { - if (obj.layer.dimensions) { - obj.layer.dimensions(_); - } - }); return this; }; diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 47e5ede03..740f2a7ac 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -1,12 +1,11 @@ import * as d3 from 'd3'; import _ from 'lodash'; import { svgPointTransform } from './point_transform'; -import { utilGetDimensions, utilSetDimensions } from '../util/dimensions'; import { services } from '../services/index'; export function svgMapillaryImages(projection, context, dispatch) { - var debouncedRedraw = _.debounce(function () { dispatch.call('change'); }, 1000), + var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000), minZoom = 12, minViewfieldZoom = 16, layer = d3.select(null), @@ -23,7 +22,7 @@ export function svgMapillaryImages(projection, context, dispatch) { function getMapillary() { if (services.mapillary && !_mapillary) { _mapillary = services.mapillary; - _mapillary.event.on('loadedImages', debouncedRedraw); + _mapillary.event.on('loadedImages', throttledRedraw); } else if (!services.mapillary && _mapillary) { _mapillary = null; } @@ -44,7 +43,7 @@ export function svgMapillaryImages(projection, context, dispatch) { .transition() .duration(500) .style('opacity', 1) - .on('end', debouncedRedraw); + .on('end', function () { dispatch.call('change'); }); } @@ -54,7 +53,7 @@ export function svgMapillaryImages(projection, context, dispatch) { mapillary.hideViewer(); } - debouncedRedraw.cancel(); + throttledRedraw.cancel(); layer .transition() @@ -97,7 +96,7 @@ export function svgMapillaryImages(projection, context, dispatch) { function update() { var mapillary = getMapillary(), - data = (mapillary ? mapillary.images(projection, utilGetDimensions(layer)) : []), + data = (mapillary ? mapillary.images(projection) : []), imageKey = mapillary ? mapillary.selectedImage() : null; var markers = layer.selectAll('.viewfield-group') @@ -112,7 +111,7 @@ export function svgMapillaryImages(projection, context, dispatch) { .classed('selected', function(d) { return d.key === imageKey; }) .on('click', click); - markers + markers = markers .merge(enter) .attr('transform', transform); @@ -159,7 +158,7 @@ export function svgMapillaryImages(projection, context, dispatch) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); update(); - mapillary.loadImages(projection, utilGetDimensions(layer)); + mapillary.loadImages(projection); } else { editOff(); } @@ -185,12 +184,6 @@ export function svgMapillaryImages(projection, context, dispatch) { }; - drawImages.dimensions = function(_) { - if (!arguments.length) return utilGetDimensions(layer); - utilSetDimensions(layer, _); - return this; - }; - init(); return drawImages; } diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index c0309b8a7..0ff746055 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -1,11 +1,10 @@ import * as d3 from 'd3'; import _ from 'lodash'; -import { utilGetDimensions, utilSetDimensions } from '../util/dimensions'; import { services } from '../services/index'; export function svgMapillarySigns(projection, context, dispatch) { - var debouncedRedraw = _.debounce(function () { dispatch.call('change'); }, 1000), + var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000), minZoom = 12, layer = d3.select(null), _mapillary; @@ -21,7 +20,7 @@ export function svgMapillarySigns(projection, context, dispatch) { function getMapillary() { if (services.mapillary && !_mapillary) { _mapillary = services.mapillary; - _mapillary.event.on('loadedSigns', debouncedRedraw); + _mapillary.event.on('loadedSigns', throttledRedraw); } else if (!services.mapillary && _mapillary) { _mapillary = null; } @@ -31,12 +30,11 @@ export function svgMapillarySigns(projection, context, dispatch) { function showLayer() { editOn(); - debouncedRedraw(); } function hideLayer() { - debouncedRedraw.cancel(); + throttledRedraw.cancel(); editOff(); } @@ -67,7 +65,7 @@ export function svgMapillarySigns(projection, context, dispatch) { function update() { var mapillary = getMapillary(), - data = (mapillary ? mapillary.signs(projection, utilGetDimensions(layer)) : []), + data = (mapillary ? mapillary.signs(projection) : []), imageKey = mapillary ? mapillary.selectedImage() : null; var signs = layer.selectAll('.icon-sign') @@ -116,7 +114,7 @@ export function svgMapillarySigns(projection, context, dispatch) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); update(); - mapillary.loadSigns(context, projection, utilGetDimensions(layer)); + mapillary.loadSigns(context, projection); } else { editOff(); } @@ -143,12 +141,6 @@ export function svgMapillarySigns(projection, context, dispatch) { }; - drawSigns.dimensions = function(_) { - if (!arguments.length) return utilGetDimensions(layer); - utilSetDimensions(layer, _); - return this; - }; - init(); return drawSigns; } diff --git a/test/spec/services/mapillary.js b/test/spec/services/mapillary.js index 5bf447eeb..c9b1068d5 100644 --- a/test/spec/services/mapillary.js +++ b/test/spec/services/mapillary.js @@ -8,8 +8,10 @@ describe('iD.serviceMapillary', function() { beforeEach(function() { context = iD.Context(window).assetPath('../dist/'); - context.projection.scale(667544.214430109); // z14 - context.projection.translate([-116508, 0]); // 10,0 + context.projection + .scale(667544.214430109) // z14 + .translate([-116508, 0]) // 10,0 + .clipExtent([[0,0], dimensions]); server = sinon.fakeServer.create(); mapillary = iD.services.mapillary; @@ -66,7 +68,7 @@ describe('iD.serviceMapillary', function() { it('fires loadedImages when images are loaded', function() { var spy = sinon.spy(); mapillary.on('loadedImages', spy); - mapillary.loadImages(context.projection, dimensions); + mapillary.loadImages(context.projection); var match = /search\/im\/geojson/, features = [{ @@ -87,7 +89,7 @@ describe('iD.serviceMapillary', function() { var spy = sinon.spy(); context.projection.translate([0,0]); mapillary.on('loadedImages', spy); - mapillary.loadImages(context.projection, dimensions); + mapillary.loadImages(context.projection); var match = /search\/im\/geojson/, features = [{ @@ -107,7 +109,7 @@ describe('iD.serviceMapillary', function() { it.skip('loads multiple pages of image results', function() { var spy = sinon.spy(); mapillary.on('loadedImages', spy); - mapillary.loadImages(context.projection, dimensions); + mapillary.loadImages(context.projection); var features0 = [], features1 = [], @@ -145,7 +147,7 @@ describe('iD.serviceMapillary', function() { describe('#loadSigns', function() { it('loads sign_defs', function() { - mapillary.loadSigns(context, context.projection, dimensions); + mapillary.loadSigns(context, context.projection); var base = 'regulatory--maximum-speed-limit-65--', match = /traffico\/string-maps\/(\w+)-map.json/; @@ -178,7 +180,7 @@ describe('iD.serviceMapillary', function() { it('fires loadedSigns when signs are loaded', function() { var spy = sinon.spy(); mapillary.on('loadedSigns', spy); - mapillary.loadSigns(context, context.projection, dimensions); + mapillary.loadSigns(context, context.projection); var match = /search\/im\/geojson\/or/, rects = [{ @@ -206,7 +208,7 @@ describe('iD.serviceMapillary', function() { var spy = sinon.spy(); context.projection.translate([0,0]); mapillary.on('loadedSigns', spy); - mapillary.loadSigns(context, context.projection, dimensions); + mapillary.loadSigns(context, context.projection); var match = /search\/im\/geojson\/or/, rects = [{ @@ -233,7 +235,7 @@ describe('iD.serviceMapillary', function() { it.skip('loads multiple pages of signs results', function() { var spy = sinon.spy(); mapillary.on('loadedSigns', spy); - mapillary.loadSigns(context, context.projection, dimensions); + mapillary.loadSigns(context, context.projection); var rects = [{ 'package': 'trafficsign_us_3.0', @@ -286,7 +288,7 @@ describe('iD.serviceMapillary', function() { ]; mapillary.cache().images.rtree.load(features); - var res = mapillary.images(context.projection, dimensions); + var res = mapillary.images(context.projection); expect(res).to.deep.eql([ { key: '0', loc: [10,0], ca: 90 }, @@ -304,7 +306,7 @@ describe('iD.serviceMapillary', function() { ]; mapillary.cache().images.rtree.load(features); - var res = mapillary.images(context.projection, dimensions); + var res = mapillary.images(context.projection); expect(res).to.have.length.of.at.most(3); }); }); @@ -325,7 +327,7 @@ describe('iD.serviceMapillary', function() { ]; mapillary.cache().signs.rtree.load(features); - var res = mapillary.signs(context.projection, dimensions); + var res = mapillary.signs(context.projection); expect(res).to.deep.eql([ { key: '0', loc: [10,0], signs: signs }, @@ -350,7 +352,7 @@ describe('iD.serviceMapillary', function() { ]; mapillary.cache().signs.rtree.load(features); - var res = mapillary.signs(context.projection, dimensions); + var res = mapillary.signs(context.projection); expect(res).to.have.length.of.at.most(3); }); });