From b3cffd78333e38aba150057678b50280df84104d Mon Sep 17 00:00:00 2001 From: Thomas Hervey Date: Wed, 25 Jul 2018 11:21:15 -0400 Subject: [PATCH] added simple keepRight button under photoItems --- data/core.yaml | 3 + dist/locales/en.json | 6 +- modules/svg/keepRight.js | 175 +++++++++++++++++++++++++++++++++++++++ modules/svg/layers.js | 6 ++ modules/ui/map_data.js | 2 +- 5 files changed, 190 insertions(+), 2 deletions(-) create mode 100644 modules/svg/keepRight.js diff --git a/data/core.yaml b/data/core.yaml index c74f1a977..ffa4f71b9 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -643,6 +643,9 @@ en: out: Zoom out cannot_zoom: "Cannot zoom out further in current mode." full_screen: Toggle Full Screen + keepRight: + tooltip: Q/A data from keepright.at + title: Keep Right streetside: tooltip: "Streetside photos from Microsoft" title: "Photo Overlay (Bing Streetside)" diff --git a/dist/locales/en.json b/dist/locales/en.json index da3671d75..c75162e1d 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -782,6 +782,10 @@ }, "cannot_zoom": "Cannot zoom out further in current mode.", "full_screen": "Toggle Full Screen", + "keepRight": { + "tooltip": "Q/A data from keepright.at", + "title": "Keep Right" + }, "streetside": { "tooltip": "Streetside photos from Microsoft", "title": "Photo Overlay (Bing Streetside)", @@ -8730,4 +8734,4 @@ } } } -} \ No newline at end of file +} diff --git a/modules/svg/keepRight.js b/modules/svg/keepRight.js new file mode 100644 index 000000000..aa01546b0 --- /dev/null +++ b/modules/svg/keepRight.js @@ -0,0 +1,175 @@ +import _some from 'lodash-es/some'; +import _throttle from 'lodash-es/throttle'; +import { select as d3_select } from 'd3-selection'; +import { svgPointTransform } from './index'; +import { services } from '../services'; + + +export function svgKeepRight(projection, context, dispatch) { + var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); + var minZoom = 12; + var layer = d3_select(null); + var _keepRight; + + + function init() { + if (svgKeepRight.initialized) return; // run once + svgKeepRight.enabled = false; + svgKeepRight.initialized = true; + } + + + function getService() { + if (services.mapillary && !_keepRight) { + _keepRight = services.mapillary; + _keepRight.event.on('loadedSigns', throttledRedraw); + } else if (!services.mapillary && _keepRight) { + _keepRight = null; + } + return _keepRight; + } + + + function showLayer() { + var service = getService(); + if (!service) return; + + service.loadViewer(context); + editOn(); + } + + + function hideLayer() { + throttledRedraw.cancel(); + editOff(); + } + + + function editOn() { + layer.style('display', 'block'); + } + + + function editOff() { + layer.selectAll('.icon-sign').remove(); + layer.style('display', 'none'); + } + + + function click(d) { + var service = getService(); + if (!service) return; + + context.map().centerEase(d.loc); + + var selected = service.getSelectedImage(); + var selectedImageKey = selected && selected.key; + var imageKey; + + // Pick one of the images the sign was detected in, + // preference given to an image already selected. + d.detections.forEach(function(detection) { + if (!imageKey || selectedImageKey === detection.image_key) { + imageKey = detection.image_key; + } + }); + + service + .selectImage(null, imageKey) + .updateViewer(imageKey, context) + .showViewer(); + } + + + function update() { + var service = getService(); + var data = (service ? service.signs(projection) : []); + var viewer = d3_select('#photoviewer'); + var selected = viewer.empty() ? undefined : viewer.datum(); + var selectedImageKey = selected && selected.key; + var transform = svgPointTransform(projection); + + var signs = layer.selectAll('.icon-sign') + .data(data, function(d) { return d.key; }); + + // exit + signs.exit() + .remove(); + + // enter + var enter = signs.enter() + .append('use') + .attr('class', 'icon-sign') + .attr('width', '24px') + .attr('height', '24px') + .attr('x', '-12px') + .attr('y', '-12px') + .attr('xlink:href', function(d) { return '#' + d.value; }) + .classed('selected', function(d) { + return _some(d.detections, function(detection) { + return detection.image_key === selectedImageKey; + }); + }) + .on('click', click); + + // update + signs + .merge(enter) + .sort(function(a, b) { + return (a === selected) ? 1 + : (b === selected) ? -1 + : b.loc[1] - a.loc[1]; // sort Y + }) + .attr('transform', transform); + } + + + function drawKeepRight(selection) { + var enabled = svgKeepRight.enabled; + var service = getService(); + + layer = selection.selectAll('.layer-keepRight') + .data(service ? [0] : []); + + layer.exit() + .remove(); + + layer = layer.enter() + .append('g') + .attr('class', 'layer-keepRight') + .style('display', enabled ? 'block' : 'none') + .merge(layer); + + if (enabled) { + if (service && ~~context.map().zoom() >= minZoom) { + editOn(); + update(); + service.loadSigns(context, projection); + } else { + editOff(); + } + } + } + + + drawKeepRight.enabled = function(_) { + if (!arguments.length) return svgKeepRight.enabled; + svgKeepRight.enabled = _; + if (svgKeepRight.enabled) { + showLayer(); + } else { + hideLayer(); + } + dispatch.call('change'); + return this; + }; + + + drawKeepRight.supported = function() { + return !!getService(); + }; + + + init(); + return drawKeepRight; +} diff --git a/modules/svg/layers.js b/modules/svg/layers.js index 4d0b9f7d2..b8810733f 100644 --- a/modules/svg/layers.js +++ b/modules/svg/layers.js @@ -9,7 +9,12 @@ import { select as d3_select } from 'd3-selection'; import { svgData } from './data'; import { svgDebug } from './debug'; +<<<<<<< HEAD import { svgGeolocate } from './geolocate'; +======= +import { svgGpx } from './gpx'; +import { svgKeepRight } from './keepRight'; +>>>>>>> added simple keepRight button under photoItems import { svgStreetside } from './streetside'; import { svgMapillaryImages } from './mapillary_images'; import { svgMapillarySigns } from './mapillary_signs'; @@ -28,6 +33,7 @@ export function svgLayers(projection, context) { { id: 'osm', layer: svgOsm(projection, context, dispatch) }, { id: 'notes', layer: svgNotes(projection, context, dispatch) }, { id: 'data', layer: svgData(projection, context, dispatch) }, + { id: 'keepRight', layer: svgKeepRight(projection, context, dispatch) }, { id: 'streetside', layer: svgStreetside(projection, context, dispatch)}, { id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) }, { id: 'mapillary-signs', layer: svgMapillarySigns(projection, context, dispatch) }, diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index e12737025..b6fbe8a4b 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -95,7 +95,7 @@ export function uiMapData(context) { function drawPhotoItems(selection) { - var photoKeys = ['streetside', 'mapillary-images', 'mapillary-signs', 'openstreetcam-images']; + var photoKeys = ['streetside', 'mapillary-images', 'mapillary-signs', 'openstreetcam-images', 'keepRight']; var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; }); var data = photoLayers.filter(function(obj) { return obj.layer.supported(); });