Files
iD/modules/svg/vegbilder.js

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;
}