CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-25 09:34:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Draw selected marker big, fix draw ordering issues, fix close button

Browse Source
This commit is contained in:
Bryan Housel
2017-11-09 11:27:36 -05:00
parent 9dac13a915
commit d53637618e
6 changed files with 103 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/60_photos.css
+4
View File
@@ -87,6 +87,10 @@
fill-opacity: 0.9;
}
.viewfield-group.selected .viewfield-scale {
transform: scale(2,2);
}
.sequence {
fill: none;
stroke-width: 2;
modules/services/mapillary.js
+7 -3
View File
@@ -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);
},
modules/services/openstreetcam.js
+7 -3
View File
@@ -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);
},
modules/svg/mapillary_images.js
+42 -24
View File
@@ -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();
}
modules/svg/openstreetcam_images.js
+38 -20
View File
@@ -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');
}
modules/ui/init.js
+5 -6
View File
@@ -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'));