feat(gfi): migrate plugin

examples/snowbox/YetAnotherEmptyComponent.vue

@@ -1,7 +1,17 @@
 <template>
-	<div style="background: #fff">Awesome</div>
+	<div style="background: #fff; z-index: 99999; pointer-events: all">
+		Awesome
+		<button @click="goHamburg()">Go to Hamburg</button>
+	</div>
 </template>
 
 <script setup lang="ts">
-// keep this block to enforce language
+// eslint-disable-next-line
+// @ts-nocheck
+
+const coreStore = document.getElementById('snowbox').store
+
+function goHamburg() {
+	coreStore.center = [561210, 5932600]
+}
 </script>

examples/snowbox/debug-assistant.js

@@ -0,0 +1,25 @@
+import { getStore } from '@polar/polar'
+
+function initializeDebugAssistant() {
+	const map = document.getElementById('snowbox')
+	const coreStore = getStore(map, 'core')
+	const activePluginIds = coreStore.activePluginIds
+
+	window.map = map
+	window.olMap = coreStore.map
+	window.coreStore = coreStore
+	window.activePluginIds = activePluginIds
+	for (const pluginId of activePluginIds) {
+		window[`${pluginId}Store`] = coreStore.getPluginStore(pluginId)
+	}
+}
+
+// We want to load as late as possible.
+// Especially, the timeout stuff from snowbox code should be done when doing this.
+setTimeout(() => {
+	initializeDebugAssistant()
+
+	// 7 seconds may be long sometimes, inform the developer about it.
+	// eslint-disable-next-line no-console
+	console.info('POLAR debug assistant was successfully initialized')
+}, 7000)

examples/snowbox/index.html

@@ -8,6 +8,7 @@
 		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
 		<link rel="stylesheet" href="@polar/polar/polar.css" />
 		<script type="module" defer src="index.js"></script>
+		<script type="module" defer src="debug-assistant.js"></script>
 		<style>
 			/* style just for example page, not directly related to POLAR */
 			:root {

examples/snowbox/index.js

@@ -10,6 +10,7 @@
 import pluginFooter from '@polar/polar/plugins/footer'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
+import pluginGfi from '@polar/polar/plugins/gfi'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
@@ -30,6 +31,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
+const kielPolygon = 'kiel_polygon'
 const hamburgBorder = '1693'
 
 let colorScheme = 'light'
@@ -73,7 +75,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -93,7 +95,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -149,6 +151,12 @@
 					},
 				},
 			},
+			{
+				id: kielPolygon,
+				type: 'mask',
+				name: 'Kiel Polygone',
+				visibility: true,
+			},
 		],
 		layout: 'standard',
 		checkServiceAvailability: true,
@@ -173,14 +181,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -193,6 +201,18 @@
 							label_off: 'Mach klein',
 						},
 					},
+					gfi: {
+						layer: {
+							[reports]: {
+								property: {
+									addr: 'Adresse',
+									statu: 'Status',
+									beschr: 'Beschr.',
+									kat_text: 'Kat.',
+								},
+							},
+						},
+					},
 					iconMenu: {
 						hints: {
 							attributions: 'LMAO',
@@ -293,7 +313,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -318,7 +338,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -334,6 +354,68 @@
 					}),
 				},
 			],
+			[
+				{
+					plugin: pluginGfi({
+						layers: {
+							[reports]: {
+								window: true,
+								properties: [
+									'addr',
+									'statu',
+									'beschr',
+									'pic',
+									'kat_text',
+									'skat_text',
+								],
+								exportProperty: 'pic',
+								showTooltip: (feature) => [
+									[
+										'span',
+										`Coordinates: ${feature.getGeometry().getCoordinates().join(', ')}`,
+									],
+								],
+							},
+							[kielPolygon]: {
+								window: true,
+							},
+						},
+						afterLoadFunction: (featuresByLayerId) => {
+							Object.values(featuresByLayerId).forEach((featureList) => {
+								featureList.forEach((feature) => {
+									if (feature.properties) {
+										feature.properties = {
+											addr: [
+												feature.properties.str,
+												feature.properties.hsnr,
+											].join(' '),
+											...feature.properties,
+										}
+									}
+								})
+							})
+							return featuresByLayerId
+						},
+						featureList: {
+							activeLayers: {
+								plugin: 'layerChooser',
+								key: 'activeMaskIds',
+							},
+							mode: 'visible',
+							bindWithCoreHoverSelect: false,
+							pageLength: 5,
+							text: {
+								title: (feature) =>
+									feature.get('str') + ' ' + feature.get('hsnr'),
+								subtitle: 'Michels Meldung',
+								subSubtitle: (feature) => feature.get('skat_text'),
+							},
+						},
+						multiSelect: 'box',
+						directSelect: true,
+					}),
+				},
+			],
 			[
 				{
 					plugin: {

examples/snowbox/services.js

@@ -74,4 +74,14 @@ export default [
 		version: '1.3.0',
 		transparent: true,
 	},
+	{
+		id: 'kiel_polygon',
+		name: 'Kiel Polygon',
+		url: 'https://polar.dataport.de/qgisserver?MAP=/home/qgis/projects/dev_services.qgz',
+		typ: 'WFS',
+		featureType: 'polygon_kiel',
+		outputFormat: 'XML',
+		version: '1.1.0',
+		legendURL: '',
+	},
 ]

src/architecture.spec.ts

@@ -33,7 +33,7 @@ describe('Architectural checks', () => {
 			.matchingPattern('^plugins/.*$')
 			.should()
 			.matchPattern(
-				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts)$'
+				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts|composables/.*\\.ts)$'
 			)
 			.check()
 		expect(violations).toEqual([])

src/components/kern/KernPagination.ce.vue

@@ -0,0 +1,154 @@
+<template>
+	<nav
+		v-if="pageCount > 1"
+		:aria-label="$t(($) => $.pagination.wrapper, { ns: 'shared' })"
+	>
+		<ul>
+			<li>
+				<button
+					class="kern-btn kern-btn--secondary"
+					:disabled="currentPage <= 1"
+					@click="currentPage--"
+				>
+					<span class="kern-icon kern-icon--arrow-back" />
+					<span class="kern-label kern-sr-only">
+						{{ $t(($) => $.pagination.previous, { ns: 'shared' }) }}
+					</span>
+				</button>
+			</li>
+			<li
+				v-for="option of visibleOptions"
+				:key="'dots' in option ? option.dots : option.page"
+			>
+				<template v-if="'dots' in option">…</template>
+				<button
+					v-else-if="option.page"
+					class="kern-btn kern-btn--secondary"
+					:class="{ active: currentPage === option.page }"
+					:aria-label="
+						$t(($) => $.pagination.page, { ns: 'shared', page: option.page })
+					"
+					@click="currentPage = option.page"
+				>
+					<span class="kern-label">
+						{{ option.page }}
+					</span>
+				</button>
+			</li>
+			<li>
+				<button
+					class="kern-btn kern-btn--secondary"
+					:disabled="currentPage >= pageCount"
+					@click="currentPage++"
+				>
+					<span class="kern-icon kern-icon--arrow-forward" />
+					<span class="kern-label kern-sr-only">
+						{{ $t(($) => $.pagination.next, { ns: 'shared' }) }}
+					</span>
+				</button>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+
+const props = defineProps<{
+	count: number
+	pageSize: number
+}>()
+
+const startIndex = defineModel<number>({ required: true })
+const currentPage = computed({
+	get: () => startIndex.value / props.pageSize + 1,
+	set: (page) => {
+		startIndex.value = (page - 1) * props.pageSize
+	},
+})
+
+const pageCount = computed(() => Math.ceil(props.count / props.pageSize))
+
+watch([() => props.count, () => props.pageSize], () => {
+	if (currentPage.value > pageCount.value) {
+		startIndex.value = 0
+	}
+})
+
+const visibleOptions = computed<({ dots: string } | { page: number })[]>(() => {
+	const generatePageInterval = (start: number, end: number) =>
+		new Array(end - start + 1).fill(null).map((_, idx) => ({
+			page: idx + start,
+		}))
+
+	if (pageCount.value <= 7) {
+		return generatePageInterval(1, pageCount.value)
+	}
+
+	if (currentPage.value < 5) {
+		return [
+			...generatePageInterval(1, 5),
+			{ dots: 'only' },
+			...generatePageInterval(pageCount.value, pageCount.value),
+		]
+	}
+
+	if (currentPage.value > pageCount.value - 4) {
+		return [
+			...generatePageInterval(1, 1),
+			{ dots: 'only' },
+			...generatePageInterval(pageCount.value - 4, pageCount.value),
+		]
+	}
+
+	return [
+		...generatePageInterval(1, 1),
+		{ dots: 'only' },
+		...generatePageInterval(currentPage.value - 1, currentPage.value + 1),
+		{ dots: 'only' },
+		...generatePageInterval(pageCount.value, pageCount.value),
+	]
+})
+</script>
+
+<style scoped>
+nav {
+	width: 100%;
+}
+
+ul {
+	width: 100%;
+	display: flex;
+	list-style-type: none;
+	padding: 0;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--kern-metric-space-x-small);
+}
+
+.kern-btn {
+	padding: 0;
+	min-width: var(--kern-metric-dimension-large);
+	min-height: calc(
+		var(--kern-metric-dimension-large) + var(--kern-metric-dimension-2x-small)
+	);
+
+	&:has(.kern-sr-only) {
+		width: var(--kern-metric-dimension-large);
+	}
+
+	&.active {
+		background-color: var(--kern-color-action-default);
+		pointer-events: none;
+
+		.kern-label {
+			color: white;
+		}
+	}
+
+	.kern-label {
+		font-size: var(--kern-typography-font-size-static-small);
+		line-height: var(--kern-typography-line-height-static-small);
+	}
+}
+</style>

src/core/components/PolarMap.ce.vue

@@ -31,13 +31,15 @@ import { updateDragAndZoomInteractions } from '../utils/map/updateDragAndZoomInt
 import PolarMapOverlay from './PolarMapOverlay.ce.vue'
 
 const mainStore = useMainStore()
-const { hasWindowSize, hasSmallDisplay, center, zoom } = storeToRefs(mainStore)
+const { hasWindowSize, hasSmallDisplay, center, extent, zoom } =
+	storeToRefs(mainStore)
 
 const polarMapContainer = useTemplateRef<HTMLDivElement>('polar-map-container')
 const overlay = useTemplateRef<typeof PolarMapOverlay>('polar-map-overlay')
 
 function onMove() {
 	center.value = mainStore.map.getView().getCenter() || center.value
+	extent.value = mainStore.map.getView().calculateExtent()
 	zoom.value = mainStore.map.getView().getZoom() || zoom.value
 }