diff --git a/css/60_photos.css b/css/60_photos.css index 3d4de1341..4df1e4382 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -101,7 +101,7 @@ cursor: pointer; } -.viewfield-group.selected * { +.viewfield-group.currentView * { fill: #ffee00 !important; } .viewfield-group.hovered * { @@ -125,7 +125,7 @@ stroke-opacity: 0.9; fill-opacity: 0.9; } -.viewfield-group.highlighted.selected circle { +.viewfield-group.highlighted.currentView circle { stroke: #222; stroke-width: 2; stroke-opacity: 1; @@ -145,12 +145,12 @@ stroke-width: 1; fill-opacity: 0.8; } -.viewfield-group.highlighted.selected .viewfield { +.viewfield-group.highlighted.currentView .viewfield { stroke-width: 1; fill-opacity: 0.9; } -.viewfield-group.selected .viewfield-scale { +.viewfield-group.currentView .viewfield-scale { transform: scale(2,2); } @@ -160,7 +160,7 @@ stroke-opacity: 0.4; } .sequence.highlighted, -.sequence.selected { +.sequence.currentView { stroke-width: 4; stroke-opacity: 1; } @@ -204,7 +204,7 @@ outline: 5px solid #eebb00; background-color: #eebb00; } -.layer-mapillary-signs .icon-sign.selected { +.layer-mapillary-signs .icon-sign.currentView { outline: 5px solid #ffee00; background-color: #ffee00; } diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 5e13da7b2..0cc6b650e 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -410,7 +410,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -531,7 +531,7 @@ export default { // if signs signs are shown, highlight the ones that appear in this image d3_selectAll('.layer-mapillary-signs .icon-sign') - .classed('selected', function(d) { + .classed('currentView', function(d) { return _some(d.detections, function(detection) { return detection.image_key === imageKey; }); @@ -556,16 +556,19 @@ export default { }, + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function(hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredImageKey = hovered && hovered.key; @@ -586,11 +589,11 @@ export default { d3_selectAll('.layer-mapillary-images .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) - .classed('selected', function(d) { return d.key === selectedImageKey; }); + .classed('currentView', function(d) { return d.key === selectedImageKey; }); d3_selectAll('.layer-mapillary-images .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 4f1d180bc..d4963a1f3 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -403,7 +403,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -476,7 +476,7 @@ export default { this.setStyles(null, true); d3_selectAll('.icon-sign') - .classed('selected', false); + .classed('currentView', false); return this; }, @@ -492,16 +492,19 @@ export default { }, + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function(hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredImageKey = hovered && hovered.key; @@ -522,11 +525,11 @@ export default { d3_selectAll('.layer-openstreetcam-images .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) - .classed('selected', function(d) { return d.key === selectedImageKey; }); + .classed('currentView', function(d) { return d.key === selectedImageKey; }); d3_selectAll('.layer-openstreetcam-images .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/services/streetside.js b/modules/services/streetside.js index a7bdf4eb4..da7181172 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -750,7 +750,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -925,19 +925,19 @@ export default { }, - /** - * setStyles(). - */ + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function (hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredBubbleKey = hovered && hovered.key; @@ -958,11 +958,11 @@ export default { d3_selectAll('.layer-streetside-images .viewfield-group') .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; }) .classed('hovered', function (d) { return d.key === hoveredBubbleKey; }) - .classed('selected', function (d) { return d.key === selectedBubbleKey; }); + .classed('currentView', function (d) { return d.key === selectedBubbleKey; }); d3_selectAll('.layer-streetside-images .sequence') .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function (d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 55dfa7dd3..7b43840b4 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -33,7 +33,7 @@ export function svgMapillaryImages(projection, context, dispatch) { // e.g. during drags or easing. if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.selected') + layer.selectAll('.viewfield-group.currentView') .filter(function(d) { return d.pano; }) @@ -164,8 +164,8 @@ export function svgMapillaryImages(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index 6f95126d0..c282d5363 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -105,7 +105,7 @@ export function svgMapillarySigns(projection, context, dispatch) { .attr('x', '-12px') .attr('y', '-12px') .attr('xlink:href', function(d) { return '#' + d.value; }) - .classed('selected', function(d) { + .classed('currentView', function(d) { return _some(d.detections, function(detection) { return detection.image_key === selectedImageKey; }); diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index 35fc76cc0..254897169 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -147,8 +147,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 8acfd3cff..89b9883dc 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -12,7 +12,6 @@ export function svgStreetside(projection, context, dispatch) { var layer = d3_select(null); var _viewerYaw = 0; var _selectedSequence = null; - var _hoveredBubble = null; var _streetside; /** @@ -121,8 +120,7 @@ export function svgStreetside(projection, context, dispatch) { */ function mouseover(d) { var service = getService(); - _hoveredBubble = d; - if (service) service.setStyles(d, true); + if (service) service.setStyles(d); } /** @@ -130,8 +128,7 @@ export function svgStreetside(projection, context, dispatch) { */ function mouseout() { var service = getService(); - _hoveredBubble = null; - if (service) service.setStyles(null, true); + if (service) service.setStyles(null); } /** @@ -161,7 +158,7 @@ export function svgStreetside(projection, context, dispatch) { // e.g. during drags or easing. if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.selected') + layer.selectAll('.viewfield-group.currentView') .attr('transform', transform); } @@ -209,8 +206,8 @@ export function svgStreetside(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter @@ -251,12 +248,6 @@ export function svgStreetside(projection, context, dispatch) { .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); - - if (service) { - service.setStyles(_hoveredBubble, true); - } - - function viewfieldPath() { var d = this.parentNode.__data__; if (d.pano) {