@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
180 lines (179 loc) • 6.77 kB
JavaScript
import { getRenderPixel } from 'ol/render.js';
import LayerWmts from '../../../models/layers/layerwmts.js';
import LayerWms from '../../../models/layers/layerwms.js';
import LayerLocalFile from '../../../models/layers/layerlocalfile.js';
class SwipeManager {
map;
swiper;
closeButton;
swiperEventListeners = {};
swiperMaxVal;
wmtsManager;
wmsManager;
localFileManager;
constructor(map, swiper, closeButton, wmtsManager, wmsManager, localFileManager) {
this.map = map;
this.swiper = swiper;
const maxVal = swiper.getAttribute('max');
if (!maxVal) {
throw new Error('The Attribute <max> on the swiper is not defined !');
}
this.swiperMaxVal = parseInt(maxVal);
this.wmtsManager = wmtsManager;
this.wmsManager = wmsManager;
this.localFileManager = localFileManager;
this.closeButton = closeButton;
}
toggleSwipe(layer) {
if (layer instanceof LayerWms) {
this.toggleSwipeForWms(layer);
}
else if (layer instanceof LayerWmts) {
this.toggleSwipeForWmts(layer);
}
else if (layer instanceof LayerLocalFile) {
this.toggleSwipeForLocalFile(layer);
}
}
toggleSwipeForWmts(layer) {
if (this.wmtsManager.layerExists(layer)) {
const olayer = this.wmtsManager.getLayer(layer);
if (olayer) {
if (layer.swiped === 'no') {
this.deactivateSwipeForLayer(layer.layer, olayer);
}
else {
this.activateSwipeForLayer(layer.layer, olayer, layer.swiped);
}
return;
}
}
throw new Error('Cannot swipe this layer: it does not exist.');
}
toggleSwipeForLocalFile(layer) {
if (this.localFileManager.layerExists(layer)) {
const olayer = this.localFileManager.getLayer(layer);
if (olayer) {
if (layer.swiped === 'no') {
this.deactivateSwipeForLayer(layer.name, olayer);
}
else {
this.activateSwipeForLayer(layer.name, olayer, layer.swiped);
}
return;
}
}
throw new Error('Cannot swipe this layer: it does not exist.');
}
toggleSwipeForWms(layer) {
if (this.wmsManager.getClient(layer).layerExists(layer)) {
this.wmsManager.getClient(layer).prepareSwipe(layer);
const olayer = this.wmsManager.getClient(layer).getOLayer(layer);
if (olayer) {
if (layer.swiped === 'no') {
this.deactivateSwipeForLayer(layer.name, olayer);
}
else {
this.activateSwipeForLayer(layer.name, olayer, layer.swiped);
}
return;
}
}
throw new Error('Layer does not exists. Cannot activate swiper.');
}
showSwiper() {
this.swiper.style.display = 'block';
this.closeButton.style.display = 'block';
}
hideSwiper() {
this.swiper.style.display = 'none';
this.closeButton.style.display = 'none';
}
activateSwipeForLayer(layername, olayer, side) {
// First, remove the old event listener
if (layername in this.swiperEventListeners) {
const eventListeners = this.swiperEventListeners[layername];
olayer.removeEventListener('prerender', eventListeners.prerender);
olayer.removeEventListener('postrender', eventListeners.postrender);
delete this.swiperEventListeners[layername];
}
// Then add the new listener
const prerenderHandler = (e) => this.prerenderSwipe(e, side);
const postrenderHandler = (e) => this.postrenderSwipe(e);
this.swiperEventListeners[layername] = {
olayer: olayer,
prerender: prerenderHandler,
postrender: postrenderHandler
};
olayer.addEventListener('prerender', prerenderHandler);
olayer.addEventListener('postrender', postrenderHandler);
this.showSwiper();
this.map.render();
}
deactivateSwipeForLayer(layername, olayer) {
if (layername in this.swiperEventListeners) {
const eventListeners = this.swiperEventListeners[layername];
olayer.removeEventListener('prerender', eventListeners.prerender);
olayer.removeEventListener('postrender', eventListeners.postrender);
delete this.swiperEventListeners[layername];
}
if (Object.keys(this.swiperEventListeners).length <= 0) {
this.hideSwiper();
}
this.map.render();
}
deactivateSwiper() {
// Remove all events listeners
for (const [_key, value] of Object.entries(this.swiperEventListeners)) {
value.olayer.removeEventListener('prerender', value.prerender);
value.olayer.removeEventListener('postrender', value.postrender);
}
this.hideSwiper();
this.map.render();
}
prerenderSwipe(event, side) {
// TODO REG : This method won't work with WegGL rendering
const ctx = event.context;
const size = this.map.getSize();
if (!size) {
throw new Error('The size of the map is null !');
}
const mapSize = size;
const width = mapSize[0] * (parseInt(this.swiper.value) / this.swiperMaxVal);
let tl;
let tr;
let bl;
let br;
if (side === 'right') {
// Coordinates for rendering to the right
tl = getRenderPixel(event, [width, 0]);
tr = getRenderPixel(event, [mapSize[0], 0]);
bl = getRenderPixel(event, [width, mapSize[1]]);
br = getRenderPixel(event, mapSize);
}
else if (side === 'left') {
// Coordinates for rendering to the left
tl = getRenderPixel(event, [0, 0]);
tr = getRenderPixel(event, [width, 0]);
bl = getRenderPixel(event, [0, mapSize[1]]);
br = getRenderPixel(event, [width, mapSize[1]]);
}
else {
throw new Error('Invalid value for parameter side');
}
ctx.save();
ctx.beginPath();
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
}
postrenderSwipe(event) {
// TODO REG : This method won't work with WegGL rendering
const ctx = event.context;
ctx.restore();
}
}
export default SwipeManager;