LayerSwipe feature

src/domain/queryParameters.js

@@ -37,6 +37,14 @@ export const QueryParameters = Object.freeze({
 	 * The timestamp of a layer (`string`)
 	 */
 	LAYER_TIMESTAMP: 'l_t',
+	/**
+	 * The swipe alignment of a layer (`string`)
+	 */
+	LAYER_SWIPE_ALIGNMENT: 'l_sa',
+	/**
+	 * The swipe ratio of the map (`number`, 0-1)
+	 */
+	SWIPE_RATIO: 'sr',
 	/**
 	 * Currently not supported. The active topic (`string`)
 	 */

src/domain/tools.js

@@ -12,7 +12,8 @@ export const Tools = Object.freeze({
 	SHARE: 'share',
 	IMPORT: 'import',
 	EXPORT: 'export',
-	ROUTING: 'routing'
+	ROUTING: 'routing',
+	COMPARE: 'compare'
 });
 
 /**

src/index.html

@@ -33,5 +33,6 @@
 		<ba-notification-panel></ba-notification-panel>
 		<ba-modal></ba-modal>
 		<ba-map-context-menu></ba-map-context-menu>
+		<ba-layer-swipe></ba-layer-swipe>
 	</body>
 </html>

src/injection/config.js

@@ -66,6 +66,7 @@ import { fileStorageServiceFactory } from './factories';
 import { FileStoragePlugin } from '../plugins/FileStoragePlugin';
 import { TimeTravelPlugin } from '../plugins/TimeTravelPlugin';
 import { BvvPredefinedConfigurationService } from '../services/PredefinedConfigurationService';
+import { ComparePlugin } from '../plugins/ComparePlugin';
 
 $injector
 	.registerSingleton('ProjectionService', new Proj4JsService())
@@ -133,6 +134,7 @@ $injector
 	.registerSingleton('ObserveWcAttributesPlugin', new ObserveWcAttributesPlugin())
 	.registerSingleton('EncodeStatePlugin', new EncodeStatePlugin())
 	.registerSingleton('TimeTravelPlugin', new TimeTravelPlugin())
+	.registerSingleton('ComparePlugin', new ComparePlugin())
 	.registerSingleton('ObserveStateForEncodingPlugin', new ObserveStateForEncodingPlugin())
 	.registerModule(mapModule)
 	.registerModule(topicsModule)

src/modules/layerManager/components/LayerItem.js

@@ -20,9 +20,11 @@ import { fitLayer } from '../../../store/position/position.action';
 import { GeoResourceFuture, RtVectorGeoResource, VectorGeoResource } from '../../../domain/geoResources';
 import { MenuTypes } from '../../commons/components/overflowMenu/OverflowMenu';
 import { openSlider } from '../../../store/timeTravel/timeTravel.action';
+import { SwipeAlignment } from '../../../store/layers/layers.action';
 
 const Update_Layer = 'update_layer';
 const Update_Layer_Collapsed = 'update_layer_collapsed';
+const Update_Layer_Swipe = 'update_layer_swipe';
 const Default_Extra_Property_Values = {
 	collapsed: true,
 	opacity: 1,
@@ -47,7 +49,8 @@ const Default_Extra_Property_Values = {
 export class LayerItem extends AbstractMvuContentPanel {
 	constructor() {
 		super({
-			layer: null
+			layer: null,
+			isLayerSwipeActive: null
 		});
 		const { TranslationService, GeoResourceService } = $injector.inject('TranslationService', 'GeoResourceService');
 		this._translationService = TranslationService;
@@ -75,9 +78,21 @@ export class LayerItem extends AbstractMvuContentPanel {
 				};
 			case Update_Layer_Collapsed:
 				return { ...model, layer: { ...model.layer, collapsed: data } };
+			case Update_Layer_Swipe:
+				return { ...model, ...data };
 		}
 	}
 
+	/**
+	 * @override
+	 */
+	onInitialize() {
+		this.observe(
+			(state) => state.layerSwipe,
+			(layerSwipe) => this.signal(Update_Layer_Swipe, { isLayerSwipeActive: layerSwipe.active })
+		);
+	}
+
 	/**
 	 * @override
 	 */
@@ -110,7 +125,7 @@ export class LayerItem extends AbstractMvuContentPanel {
 	 */
 	createView(model) {
 		const translate = (key) => this._translationService.translate(key);
-		const { layer } = model;
+		const { layer, isLayerSwipeActive } = model;
 
 		if (!layer) {
 			return nothing;
@@ -253,6 +268,44 @@ export class LayerItem extends AbstractMvuContentPanel {
 			];
 		};
 
+		const leftSide = () => {
+			modifyLayer(layer.id, { swipeAlignment: SwipeAlignment.LEFT });
+		};
+		const bothSide = () => {
+			modifyLayer(layer.id, { swipeAlignment: SwipeAlignment.NOT_SET });
+		};
+		const rightSide = () => {
+			modifyLayer(layer.id, { swipeAlignment: SwipeAlignment.RIGHT });
+		};
+
+		const getLayerSwipe = () => {
+			const direction = layer.constraints.swipeAlignment;
+			return isLayerSwipeActive
+				? html`
+						<div class="compare">
+							<ba-button
+								id="left"
+								.type=${direction === SwipeAlignment.LEFT ? 'primary' : 'secondary'}
+								.label=${translate('layerManager_compare_left')}
+								@click=${leftSide}
+							></ba-button>
+							<ba-button
+								id="both"
+								.type=${direction === SwipeAlignment.NOT_SET ? 'primary' : 'secondary'}
+								.label=${translate('layerManager_compare_both')}
+								@click=${bothSide}
+							></ba-button>
+							<ba-button
+								id="right"
+								.type=${direction === SwipeAlignment.RIGHT ? 'primary' : 'secondary'}
+								.label=${translate('layerManager_compare_right')}
+								@click=${rightSide}
+							></ba-button>
+						</div>
+					`
+				: nothing;
+		};
+
 		return html` <style>
 				${css}
 			</style>
@@ -305,6 +358,7 @@ export class LayerItem extends AbstractMvuContentPanel {
 						<ba-overflow-menu .type=${MenuTypes.MEATBALL} .items=${getMenuItems()}></ba-overflow-menu>
 					</div>
 				</div>
+				${getLayerSwipe()}
 			</div>`;
 	}
 

src/modules/layerManager/components/LayerManager.js

@@ -5,12 +5,15 @@ import { html, nothing } from 'lit-html';
 import { $injector } from '../../../injection';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { modifyLayer, removeLayer } from './../../../store/layers/layers.action';
+import { toggleCurrentTool } from './../../../store/tools/tools.action';
+import { Tools } from '../../../domain/tools';
 import css from './layerManager.css';
 import { MvuElement } from '../../MvuElement';
 
 const Update_Draggable_Items = 'update_draggable_items';
 const Update_Collapse_Change = 'update_collapse_change';
 const Update_Dragged_Item = 'update_dragged_item';
+const Update_Layer_Swipe = 'update_layer_swipe';
 /**
  * Renders a list of layers representing their order on a map and provides
  * actions like reordering, removing and changing visibility and opacity
@@ -44,6 +47,8 @@ export class LayerManager extends MvuElement {
 				return { ...model, draggableItems: model.draggableItems.map((i) => (i.id === data.id ? data : i)) };
 			case Update_Dragged_Item:
 				return { ...model, draggedItem: data };
+			case Update_Layer_Swipe:
+				return { ...model, ...data };
 		}
 	}
 
@@ -52,6 +57,10 @@ export class LayerManager extends MvuElement {
 			(store) => store.layers.active,
 			(active) => this._buildDraggableItems(active.filter((l) => !l.constraints.hidden))
 		);
+		this.observe(
+			(state) => state.layerSwipe,
+			(layerSwipe) => this.signal(Update_Layer_Swipe, { isLayerSwipeActive: layerSwipe.active })
+		);
 	}
 
 	/**
@@ -207,7 +216,7 @@ export class LayerManager extends MvuElement {
 
 	_getButtons(model) {
 		const translate = (key) => this._translationService.translate(key);
-		const { draggableItems } = model;
+		const { draggableItems, isLayerSwipeActive } = model;
 		const expandAll = () => {
 			this.signal(
 				Update_Draggable_Items,
@@ -241,6 +250,12 @@ export class LayerManager extends MvuElement {
 						style="border-right: 1px dotted var(--header-background-color);"
 					></ba-button>
 					<ba-button id="button_remove_all" .label=${translate('layerManager_remove_all')} .type=${'secondary'} @click=${removeAll}></ba-button>
+					<ba-button
+						id="button_layer_swipe"
+						.label=${translate(isLayerSwipeActive ? 'layerManager_compare_stop' : 'layerManager_compare')}
+						.type=${'secondary'}
+						@click=${() => toggleCurrentTool(Tools.COMPARE)}
+					></ba-button>
 					<div></div>
 				</div>`
 			: nothing;

src/modules/layerManager/components/layerItem.css

@@ -70,3 +70,22 @@
 .time-travel-icon {
 	margin-right: 0.5em;
 }
+.compare {
+	display: flex;
+	border: 1px solid var(--header-background-color);
+	align-items: stretch;
+	border-radius: 0em;
+	margin: 0.5em 1em 1em 1em;
+	overflow: hidden;
+}
+.compare ba-button {
+	display: flex;
+	width: 100%;
+	border-right: 1px dotted var(--primary-color);
+}
+.compare ba-button:last-child {
+	border-right: none;
+}
+.compare ba-button::part(button) {
+	font-size: 0.7rem !important;
+}

src/modules/layerManager/components/layerManager.css

@@ -54,6 +54,10 @@ li {
 	justify-content: flex-start;
 }
 
+.layermanager__actions ba-button::part(button) {
+	font-size: 0.95rem;
+}
+
 .layermanager__expandOrCollapse {
 	padding-left: 0.8em;
 }

src/modules/layerManager/i18n/layerManager.provider.js

@@ -17,9 +17,14 @@ export const provide = (lang) => {
 				layerManager_expand_all: 'expand all',
 				layerManager_collapse_all: 'collapse all',
 				layerManager_remove_all: 'remove all',
+				layerManager_compare: 'compare',
+				layerManager_compare_stop: 'compare stop',
 				layerManager_loading_hint: 'Loading',
 				layerManager_time_travel_hint: 'Choose a year',
-				layerManager_time_travel_slider: 'Open slider'
+				layerManager_time_travel_slider: 'Open slider',
+				layerManager_compare_left: 'Left',
+				layerManager_compare_both: 'Both',
+				layerManager_compare_right: 'Right'
 			};
 
 		case 'de':
@@ -39,9 +44,14 @@ export const provide = (lang) => {
 				layerManager_expand_all: 'Alle ausklappen',
 				layerManager_collapse_all: 'Alle einklappen',
 				layerManager_remove_all: 'Alle entfernen',
+				layerManager_compare: 'Vergleichen',
+				layerManager_compare_stop: 'Vergleichen beenden',
 				layerManager_loading_hint: 'Wird geladen',
 				layerManager_time_travel_hint: 'Bitte ein Jahr auswählen',
-				layerManager_time_travel_slider: 'Schieberegler öffnen'
+				layerManager_time_travel_slider: 'Schieberegler öffnen',
+				layerManager_compare_left: 'Links',
+				layerManager_compare_both: 'Beide',
+				layerManager_compare_right: 'Rechts'
 			};
 
 		default:

src/modules/map/components/layerSwipeSlider/LayerSwipeSlider.js

@@ -0,0 +1,76 @@
+/**
+ * @module modules/map/components/layerSwipeSlider/LayerSwipeSlider
+ */
+import { html } from 'lit-html';
+
+import { $injector } from '../../../../injection';
+import css from './layerSwipeSlider.css';
+import { MvuElement } from '../../../MvuElement';
+import { updateRatio } from '../../../../store/layerSwipe/layerSwipe.action';
+import { nothing } from '../../../../../node_modules/ol/pixel';
+
+const Update_Layer_Swipe = 'update_layer_swipe';
+
+/**
+ * Component to swipe map layers
+ * @class
+ * @author alsturm
+ */
+
+export class LayerSwipeSlider extends MvuElement {
+	constructor() {
+		super({ active: false, ratio: null });
+		const { TranslationService } = $injector.inject('TranslationService');
+		this._translationService = TranslationService;
+	}
+
+	update(type, data, model) {
+		switch (type) {
+			case Update_Layer_Swipe:
+				return { ...model, ...data };
+		}
+	}
+
+	onInitialize() {
+		this.observe(
+			(state) => state.layerSwipe,
+			(layerSwipe) => this.signal(Update_Layer_Swipe, { active: layerSwipe.active, ratio: layerSwipe.ratio })
+		);
+	}
+
+	createView(model) {
+		const { active, ratio } = model;
+		const translate = (key) => this._translationService.translate(key);
+
+		const onChangeSlider = (event) => {
+			const line = this.shadowRoot.getElementById('line');
+			line.style.left = parseInt(event.target.value) + '%';
+
+			updateRatio(parseInt(event.target.value));
+		};
+
+		return active
+			? html`
+					<style>
+						${css}
+					</style>
+					<div id="line" class="line" style="left:${ratio}%"></div>
+					<div class="layer-swipe">
+						<input
+							id="rangeslider"
+							type="range"
+							min="0"
+							max="100"
+							step="1"
+							title="${translate('map_layerSwipeSlider')}"
+							value="${ratio}"
+							@input=${onChangeSlider}
+						/>
+					</div>
+				`
+			: nothing;
+	}
+	static get tag() {
+		return 'ba-layer-swipe';
+	}
+}

src/modules/map/components/layerSwipeSlider/index.js

@@ -0,0 +1,4 @@
+import { LayerSwipeSlider } from './LayerSwipeSlider';
+if (!window.customElements.get(LayerSwipeSlider.tag)) {
+	window.customElements.define(LayerSwipeSlider.tag, LayerSwipeSlider);
+}