From d53637618e1c4442beb8d7eed57451401956d6b6 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 9 Nov 2017 11:27:36 -0500 Subject: [PATCH] Draw selected marker big, fix draw ordering issues, fix close button --- css/60_photos.css | 4 ++ modules/services/mapillary.js | 10 +++-- modules/services/openstreetcam.js | 10 +++-- modules/svg/mapillary_images.js | 66 ++++++++++++++++++----------- modules/svg/openstreetcam_images.js | 58 ++++++++++++++++--------- modules/ui/init.js | 11 +++-- 6 files changed, 103 insertions(+), 56 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 67fbe49e0..8433eb60d 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -87,6 +87,10 @@ fill-opacity: 0.9; } +.viewfield-group.selected .viewfield-scale { + transform: scale(2,2); +} + .sequence { fill: none; stroke-width: 2; diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 36df2c0ad..b67d02365 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -475,7 +475,12 @@ export default { hideViewer: function() { - d3_select('#photoviewer') + _mlySelectedImage = null; + + var viewer = d3_select('#photoviewer'); + if (!viewer.empty()) viewer.datum(null); + + viewer .classed('hide', true) .selectAll('.photo-wrapper') .classed('hide', true); @@ -483,8 +488,7 @@ export default { d3_selectAll('.viewfield-group, .sequence, .icon-sign') .classed('selected', false); - _mlySelectedImage = null; - return this; + return this.setStyles(null, true); }, diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 51d767be7..d0f35a020 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -395,7 +395,12 @@ export default { hideViewer: function() { - d3_select('#photoviewer') + _oscSelectedImage = null; + + var viewer = d3_select('#photoviewer'); + if (!viewer.empty()) viewer.datum(null); + + viewer .classed('hide', true) .selectAll('.photo-wrapper') .classed('hide', true); @@ -403,8 +408,7 @@ export default { d3_selectAll('.viewfield-group, .sequence, .icon-sign') .classed('selected', false); - _oscSelectedImage = null; - return this; + return this.setStyles(null, true); }, diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 83cca9249..1bae3436c 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -86,12 +86,12 @@ export function svgMapillaryImages(projection, context, dispatch) { var service = getService(); if (!service) return; - context.map().centerEase(d.loc); - service .selectImage(d) .updateViewer(d.key, context) .showViewer(); + + context.map().centerEase(d.loc); } @@ -109,12 +109,17 @@ export function svgMapillaryImages(projection, context, dispatch) { function transform(d) { var t = svgPointTransform(projection)(d); - if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + if (d.ca) { + t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + } return t; } function update() { + var viewer = d3_select('#photoviewer'); + var selected = viewer.empty() ? undefined : viewer.datum(); + var z = ~~context.map().zoom(); var showMarkers = (z >= minMarkerZoom); var showViewfields = (z >= minViewfieldZoom); @@ -144,35 +149,36 @@ export function svgMapillaryImages(projection, context, dispatch) { .attr('d', makePath); - var markers = layer.selectAll('.markers').selectAll('.viewfield-group') + var groups = layer.selectAll('.markers').selectAll('.viewfield-group') .data(images, function(d) { return d.key; }); - markers.exit() + // exit + groups.exit() .remove(); - var enter = markers.enter() + // enter + var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') .on('mouseover', mouseover) .on('mouseout', mouseout) .on('click', click); - markers = markers - .merge(enter) - .attr('transform', transform); + groupsEnter + .append('g') + .attr('class', 'viewfield-scale'); + // update + var markers = groups + .merge(groupsEnter) + .sort(function(a, b) { + return (a === selected) ? 1 + : (b === selected) ? -1 + : b.loc[1] - a.loc[1]; // sort Y + }) + .attr('transform', transform) + .select('.viewfield-scale'); - var viewfields = markers.selectAll('.viewfield') - .data(showViewfields ? [0] : []); - - viewfields.exit() - .remove(); - - viewfields.enter() - .append('path') - .attr('class', 'viewfield') - .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') - .attr('d', viewfieldPath); markers.selectAll('circle') .data([0]) @@ -182,6 +188,18 @@ export function svgMapillaryImages(projection, context, dispatch) { .attr('dy', '0') .attr('r', '6'); + var viewfields = markers.selectAll('.viewfield') + .data(showViewfields ? [0] : []); + + viewfields.exit() + .remove(); + + viewfields.enter() // viewfields may or may not be drawn... + .insert('path', 'circle') // but if they are, draw below the circles + .attr('class', 'viewfield') + .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') + .attr('d', viewfieldPath); + function viewfieldPath() { var d = this.parentNode.__data__; if (d.pano) { @@ -195,10 +213,10 @@ export function svgMapillaryImages(projection, context, dispatch) { function drawImages(selection) { var enabled = svgMapillaryImages.enabled, - mapillary = getService(); + service = getService(); layer = selection.selectAll('.layer-mapillary-images') - .data(mapillary ? [0] : []); + .data(service ? [0] : []); layer.exit() .remove(); @@ -220,10 +238,10 @@ export function svgMapillaryImages(projection, context, dispatch) { .merge(layer); if (enabled) { - if (mapillary && ~~context.map().zoom() >= minZoom) { + if (service && ~~context.map().zoom() >= minZoom) { editOn(); update(); - mapillary.loadImages(projection); + service.loadImages(projection); } else { editOff(); } diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index d487c086d..3184a7bc2 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -86,12 +86,12 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var service = getService(); if (!service) return; - context.map().centerEase(d.loc); - service .selectImage(d) .updateViewer(d) .showViewer(); + + context.map().centerEase(d.loc); } @@ -109,12 +109,17 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { function transform(d) { var t = svgPointTransform(projection)(d); - if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + if (d.ca) { + t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + } return t; } function update() { + var viewer = d3_select('#photoviewer'); + var selected = viewer.empty() ? undefined : viewer.datum(); + var z = ~~context.map().zoom(); var showMarkers = (z >= minMarkerZoom); var showViewfields = (z >= minViewfieldZoom); @@ -144,35 +149,36 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { .attr('d', makePath); - var markers = layer.selectAll('.markers').selectAll('.viewfield-group') + var groups = layer.selectAll('.markers').selectAll('.viewfield-group') .data(images, function(d) { return d.key; }); - markers.exit() + // exit + groups.exit() .remove(); - var enter = markers.enter() + // enter + var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') .on('mouseover', mouseover) .on('mouseout', mouseout) .on('click', click); - markers = markers - .merge(enter) - .attr('transform', transform); + groupsEnter + .append('g') + .attr('class', 'viewfield-scale'); + // update + var markers = groups + .merge(groupsEnter) + .sort(function(a, b) { + return (a === selected) ? 1 + : (b === selected) ? -1 + : b.loc[1] - a.loc[1]; // sort Y + }) + .attr('transform', transform) + .select('.viewfield-scale'); - var viewfields = markers.selectAll('.viewfield') - .data(showViewfields ? [0] : []); - - viewfields.exit() - .remove(); - - viewfields.enter() - .append('path') - .attr('class', 'viewfield') - .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') - .attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'); markers.selectAll('circle') .data([0]) @@ -181,6 +187,18 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { .attr('dx', '0') .attr('dy', '0') .attr('r', '6'); + + var viewfields = markers.selectAll('.viewfield') + .data(showViewfields ? [0] : []); + + viewfields.exit() + .remove(); + + viewfields.enter() // viewfields may or may not be drawn... + .insert('path', 'circle') // but if they are, draw below the circles + .attr('class', 'viewfield') + .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') + .attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'); } diff --git a/modules/ui/init.js b/modules/ui/init.js index 69eda0302..adeb376fb 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -8,9 +8,10 @@ import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; import { t, textDirection } from '../util/locale'; import { tooltip } from '../util/tooltip'; -import { svgDefs, svgIcon } from '../svg'; -import { modeBrowse } from '../modes'; import { behaviorHash } from '../behavior'; +import { modeBrowse } from '../modes'; +import { services } from '../services'; +import { svgDefs, svgIcon } from '../svg'; import { utilGetDimensions } from '../util/dimensions'; import { uiAccount } from './account'; @@ -248,10 +249,8 @@ export function uiInit(context) { .append('button') .attr('class', 'thumb-hide') .on('click', function () { - d3_select('#photoviewer') - .classed('hide', true) - .select('div') - .classed('hide', true); + if (services.mapillary) { services.mapillary.hideViewer(); } + if (services.openstreetcam) { services.openstreetcam.hideViewer(); } }) .append('div') .call(svgIcon('#icon-close'));