mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
391 lines
9.1 KiB
JavaScript
391 lines
9.1 KiB
JavaScript
import _throttle from 'lodash-es/throttle';
|
|
import { select as d3_select } from 'd3-selection';
|
|
import { svgPath, svgPointTransform } from './helpers';
|
|
import { services } from '../services';
|
|
|
|
|
|
export function svgVegbilder(projection, context, dispatch) {
|
|
const throttledRedraw = _throttle(() => dispatch.call('change'), 1000);
|
|
const minZoom = 14;
|
|
const minMarkerZoom = 16;
|
|
const minViewfieldZoom = 18;
|
|
let layer = d3_select(null);
|
|
let _viewerYaw = 0;
|
|
let _vegbilder;
|
|
|
|
/**
|
|
* init().
|
|
*/
|
|
function init() {
|
|
if (svgVegbilder.initialized) return; // run once
|
|
svgVegbilder.enabled = false;
|
|
svgVegbilder.initialized = true;
|
|
}
|
|
|
|
/**
|
|
* getService().
|
|
*/
|
|
function getService() {
|
|
if (services.vegbilder && !_vegbilder) {
|
|
_vegbilder = services.vegbilder;
|
|
_vegbilder.event
|
|
.on('viewerChanged.svgVegbilder', viewerChanged)
|
|
.on('loadedImages.svgVegbilder', throttledRedraw);
|
|
} else if (!services.vegbilder && _vegbilder) {
|
|
_vegbilder = null;
|
|
}
|
|
|
|
return _vegbilder;
|
|
}
|
|
|
|
/**
|
|
* showLayer().
|
|
*/
|
|
function showLayer() {
|
|
const service = getService();
|
|
if (!service) return;
|
|
|
|
editOn();
|
|
|
|
layer
|
|
.style('opacity', 0)
|
|
.transition()
|
|
.duration(250)
|
|
.style('opacity', 1)
|
|
.on('end', () => dispatch.call('change'));
|
|
}
|
|
|
|
/**
|
|
* hideLayer().
|
|
*/
|
|
function hideLayer() {
|
|
throttledRedraw.cancel();
|
|
|
|
layer
|
|
.transition()
|
|
.duration(250)
|
|
.style('opacity', 0)
|
|
.on('end', editOff);
|
|
}
|
|
|
|
/**
|
|
* editOn().
|
|
*/
|
|
function editOn() {
|
|
layer.style('display', 'block');
|
|
}
|
|
|
|
/**
|
|
* editOff().
|
|
*/
|
|
function editOff() {
|
|
layer.selectAll('.viewfield-group').remove();
|
|
layer.style('display', 'none');
|
|
}
|
|
|
|
function click(d3_event, d) {
|
|
const service = getService();
|
|
if (!service) return;
|
|
|
|
service
|
|
.ensureViewerLoaded(context)
|
|
.then(() => {
|
|
service
|
|
.selectImage(context, d.key)
|
|
.showViewer(context);
|
|
});
|
|
|
|
context.map().centerEase(d.loc);
|
|
}
|
|
|
|
/**
|
|
* mouseover().
|
|
*/
|
|
function mouseover(d3_event, d) {
|
|
const service = getService();
|
|
if (service) service.setStyles(context, d);
|
|
}
|
|
|
|
/**
|
|
* mouseout().
|
|
*/
|
|
function mouseout() {
|
|
const service = getService();
|
|
if (service) service.setStyles(context, null);
|
|
}
|
|
|
|
/**
|
|
* transform().
|
|
*/
|
|
function transform(d, selected) {
|
|
let t = svgPointTransform(projection)(d);
|
|
let rot = d.ca;
|
|
if (d === selected) {
|
|
rot += _viewerYaw;
|
|
}
|
|
if (rot) {
|
|
t += ' rotate(' + Math.floor(rot) + ',0,0)';
|
|
}
|
|
return t;
|
|
}
|
|
|
|
|
|
function viewerChanged() {
|
|
const service = getService();
|
|
if (!service) return;
|
|
|
|
const frame = service.photoFrame();
|
|
if (!frame) return;
|
|
|
|
// update viewfield rotation
|
|
_viewerYaw = frame.getYaw();
|
|
|
|
// avoid updating if the map is currently transformed
|
|
// e.g. during drags or easing.
|
|
if (context.map().isTransformed()) return;
|
|
|
|
layer.selectAll('.viewfield-group.currentView')
|
|
.attr('transform', (d) => transform(d, d));
|
|
}
|
|
|
|
function filterImages(images) {
|
|
const photoContext = context.photos();
|
|
const fromDateString = photoContext.fromDate();
|
|
const toDateString = photoContext.toDate();
|
|
const showsFlat = photoContext.showsFlat();
|
|
const showsPano = photoContext.showsPanoramic();
|
|
|
|
if (fromDateString) {
|
|
const fromDate = new Date(fromDateString);
|
|
images = images.filter(image => image.captured_at.getTime() >= fromDate.getTime());
|
|
}
|
|
|
|
if (toDateString) {
|
|
const toDate = new Date(toDateString);
|
|
images = images.filter(image => image.captured_at.getTime() <= toDate.getTime());
|
|
}
|
|
|
|
if (!showsPano) {
|
|
images = images.filter(image => !image.is_sphere);
|
|
}
|
|
|
|
if (!showsFlat) {
|
|
images = images.filter(image => image.is_sphere);
|
|
}
|
|
|
|
return images;
|
|
}
|
|
|
|
function filterSequences(sequences) {
|
|
const photoContext = context.photos();
|
|
const fromDateString = photoContext.fromDate();
|
|
const toDateString = photoContext.toDate();
|
|
const showsFlat = photoContext.showsFlat();
|
|
const showsPano = photoContext.showsPanoramic();
|
|
|
|
if (fromDateString) {
|
|
const fromDate = new Date(fromDateString);
|
|
sequences = sequences.filter(({images}) => images[0].captured_at.getTime() >= fromDate.getTime());
|
|
}
|
|
|
|
if (toDateString) {
|
|
const toDate = new Date(toDateString);
|
|
sequences = sequences.filter(({images}) => images[images.length - 1].captured_at.getTime() <= toDate.getTime());
|
|
}
|
|
|
|
if (!showsPano) {
|
|
sequences = sequences.filter(({images}) => !images[0].is_sphere);
|
|
}
|
|
|
|
if (!showsFlat) {
|
|
sequences = sequences.filter(({images}) => images[0].is_sphere);
|
|
}
|
|
|
|
return sequences;
|
|
}
|
|
|
|
/**
|
|
* update().
|
|
*/
|
|
function update() {
|
|
const viewer = context.container().select('.photoviewer');
|
|
const selected = viewer.empty() ? undefined : viewer.datum();
|
|
const z = ~~context.map().zoom();
|
|
const showMarkers = (z >= minMarkerZoom);
|
|
const showViewfields = (z >= minViewfieldZoom);
|
|
const service = getService();
|
|
let sequences = [];
|
|
let images = [];
|
|
|
|
if (service) {
|
|
// The WFS-layer for that year or image type may not be loaded after a filter is changed
|
|
service.loadImages(context);
|
|
|
|
sequences = service.sequences(projection);
|
|
images = showMarkers ? service.images(projection) : [];
|
|
|
|
dispatch.call('photoDatesChanged', this, 'vegbilder', images.map(p => p.captured_at));
|
|
|
|
images = filterImages(images);
|
|
sequences = filterSequences(sequences);
|
|
}
|
|
|
|
let traces = layer.selectAll('.sequences').selectAll('.sequence')
|
|
.data(sequences, d => d.key);
|
|
|
|
// exit
|
|
traces.exit()
|
|
.remove();
|
|
|
|
// enter/update
|
|
traces.enter()
|
|
.append('path')
|
|
.attr('class', 'sequence')
|
|
.merge(traces)
|
|
.attr('d', svgPath(projection).geojson);
|
|
|
|
|
|
const groups = layer.selectAll('.markers').selectAll('.viewfield-group')
|
|
.data(images, (d) => d.key);
|
|
|
|
// exit
|
|
groups.exit()
|
|
.remove();
|
|
|
|
// enter
|
|
const groupsEnter = groups.enter()
|
|
.append('g')
|
|
.attr('class', 'viewfield-group')
|
|
.on('mouseenter', mouseover)
|
|
.on('mouseleave', mouseout)
|
|
.on('click', click);
|
|
|
|
groupsEnter
|
|
.append('g')
|
|
.attr('class', 'viewfield-scale');
|
|
|
|
// update
|
|
const markers = groups
|
|
.merge(groupsEnter)
|
|
.sort((a, b) => {
|
|
return (a === selected) ? 1
|
|
: (b === selected) ? -1
|
|
: b.loc[1] - a.loc[1];
|
|
})
|
|
.attr('transform', (d) => transform(d, selected))
|
|
.select('.viewfield-scale');
|
|
|
|
|
|
markers.selectAll('circle')
|
|
.data([0])
|
|
.enter()
|
|
.append('circle')
|
|
.attr('dx', '0')
|
|
.attr('dy', '0')
|
|
.attr('r', '6');
|
|
|
|
const viewfields = markers.selectAll('.viewfield')
|
|
.data(showViewfields ? [0] : []);
|
|
|
|
viewfields.exit()
|
|
.remove();
|
|
|
|
// viewfields may or may not be drawn...
|
|
// but if they are, draw below the circles
|
|
viewfields.enter()
|
|
.insert('path', 'circle')
|
|
.attr('class', 'viewfield')
|
|
.attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
|
|
.attr('d', viewfieldPath);
|
|
|
|
function viewfieldPath() {
|
|
const d = this.parentNode.__data__;
|
|
if (d.is_sphere) {
|
|
return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
|
|
} else {
|
|
return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* drawImages()
|
|
* drawImages is the method that is returned (and that runs) every time 'svgStreetside()' is called.
|
|
* 'svgStreetside()' is called from index.js
|
|
*/
|
|
function drawImages(selection) {
|
|
const enabled = svgVegbilder.enabled;
|
|
const service = getService();
|
|
|
|
layer = selection.selectAll('.layer-vegbilder')
|
|
.data(service ? [0] : []);
|
|
|
|
layer.exit()
|
|
.remove();
|
|
|
|
const layerEnter = layer.enter()
|
|
.append('g')
|
|
.attr('class', 'layer-vegbilder')
|
|
.style('display', enabled ? 'block' : 'none');
|
|
|
|
layerEnter
|
|
.append('g')
|
|
.attr('class', 'sequences');
|
|
|
|
layerEnter
|
|
.append('g')
|
|
.attr('class', 'markers');
|
|
|
|
layer = layerEnter
|
|
.merge(layer);
|
|
|
|
if (enabled) {
|
|
if (service && ~~context.map().zoom() >= minZoom) {
|
|
editOn();
|
|
update();
|
|
service.loadImages(context);
|
|
} else {
|
|
editOff();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* drawImages.enabled().
|
|
*/
|
|
drawImages.enabled = function (_) {
|
|
if (!arguments.length) return svgVegbilder.enabled;
|
|
svgVegbilder.enabled = _;
|
|
if (svgVegbilder.enabled) {
|
|
showLayer();
|
|
context.photos().on('change.vegbilder', update);
|
|
} else {
|
|
hideLayer();
|
|
context.photos().on('change.vegbilder', null);
|
|
}
|
|
dispatch.call('change');
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* drawImages.supported().
|
|
*/
|
|
drawImages.supported = function () {
|
|
return !!getService();
|
|
};
|
|
|
|
drawImages.rendered = function(zoom) {
|
|
return zoom >= minZoom;
|
|
};
|
|
|
|
drawImages.validHere = function(extent, zoom) {
|
|
return zoom >= (minZoom - 2)
|
|
&& getService().validHere(extent);
|
|
};
|
|
|
|
init();
|
|
|
|
return drawImages;
|
|
}
|