feat(gfi): migrate plugin

examples/iceberg/App.vue

@@ -45,6 +45,7 @@
 import kernExtraIcons from 'virtual:kern-extra-icons'
 import { computed, ref } from 'vue'
 
+import GfiConfig from './components/GfiConfig.vue'
 import IcebergMap from './components/IcebergMap.vue'
 import LayoutChooser from './components/LayoutChooser.vue'
 import TaskMenu from './components/TaskMenu.vue'
@@ -55,6 +56,11 @@ const configTasks = [
 		label: 'Layout wählen',
 		component: LayoutChooser,
 	},
+	{
+		id: 'configure-gfi',
+		label: 'GFI konfigurieren',
+		component: GfiConfig,
+	},
 ]
 const tasks = computed(() => [
 	'menu',

examples/iceberg/components/GfiConfig.vue

@@ -0,0 +1,84 @@
+<template>
+	<fieldset class="kern-fieldset">
+		<legend class="kern-label">
+			Wie soll die Auswahl für das GFI-Plugin ablaufen?
+		</legend>
+		<div class="kern-fieldset__body">
+			<div
+				v-for="mode of selectionModes"
+				:key="mode.value"
+				class="kern-form-check"
+			>
+				<input
+					:id="`${id}-${mode.value}`"
+					v-model="selectionMode"
+					class="kern-form-check__radio"
+					:name="`${id}-layout`"
+					type="radio"
+					:value="mode.value"
+				/>
+				<label :for="`${id}-${mode.value}`" class="kern-label">
+					{{ mode.label }}
+				</label>
+			</div>
+		</div>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import type { MapConfiguration } from '@polar/polar'
+
+import { isEqual } from 'es-toolkit'
+import { computed, useId } from 'vue'
+
+import { useIcebergStore } from '../stores/iceberg'
+
+const id = useId()
+const store = useIcebergStore()
+
+const selectionModes = [
+	{
+		value: 'direct',
+		label: 'Direkte Auswahl',
+		config: {
+			directSelect: true,
+		},
+	},
+	{
+		value: 'multi',
+		label: 'Mehrfachauswahl',
+		config: {
+			directSelect: true,
+			multiSelect: 'box',
+		},
+	},
+	{
+		value: 'pins',
+		label: 'Auswahl über das Pins-Plugin',
+		config: {
+			coordinateSources: [
+				{
+					plugin: 'pins',
+					key: 'coordinate',
+				},
+			],
+		},
+	},
+] satisfies {
+	value: 'direct' | 'multi' | 'pins'
+	label: string
+	config: Partial<MapConfiguration['gfi']>
+}[]
+
+const selectionMode = computed({
+	get: () =>
+		selectionModes.find((mode) =>
+			isEqual(mode.config, store.mapConfiguration.gfi)
+		)?.value || 'direct',
+	set: (value) => {
+		store.mapConfiguration.gfi = selectionModes.find(
+			(mode) => mode.value === value
+		)?.config as MapConfiguration['gfi']
+	},
+})
+</script>

examples/iceberg/components/IcebergMap.vue

@@ -39,6 +39,7 @@ import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
 import pluginAttributions from '@polar/polar/plugins/attributions'
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
+import pluginGfi from '@polar/polar/plugins/gfi'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginPins from '@polar/polar/plugins/pins'
@@ -119,6 +120,16 @@ watch(map, (map) => {
 			layoutTag: 'TOP_LEFT',
 			searchMethods: [],
 		}),
+		pluginGfi({
+			displayComponent: true,
+			layoutTag: 'TOP_LEFT',
+			layers: {
+				'1454': {
+					window: true,
+					geometry: true,
+				},
+			},
+		}),
 		pluginPins({
 			coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
 			boundary: {

examples/iceberg/stores/iceberg.ts

@@ -31,7 +31,6 @@ export const useIcebergStore = defineStore('iceberg', () => {
 				name: 'Ausgleichsflächen',
 				styleId: 'panda',
 				visibility: true,
-				minZoom: 5,
 			},
 			{
 				id: '1693',
@@ -69,6 +68,7 @@ export const useIcebergStore = defineStore('iceberg', () => {
 				visibility: true,
 				type: 'mask',
 				name: 'snowbox.layers.mml',
+				minZoom: 5,
 			},
 		],
 		startCenter: [565874, 5934140],
@@ -132,6 +132,9 @@ export const useIcebergStore = defineStore('iceberg', () => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 		},
+		gfi: {
+			directSelect: true,
+		} as MapConfiguration['gfi'],
 		markers: {
 			layers: [
 				{

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

@@ -13,6 +13,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'
@@ -32,6 +33,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
+const kielPolygon = 'kiel_polygon'
 const hamburgBorder = '6074'
 
 let colorScheme = 'light'
@@ -93,7 +95,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		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,
@@ -213,6 +221,18 @@
 							label_off: 'Mach klein',
 						},
 					},
+					gfi: {
+						layer: {
+							[reports]: {
+								property: {
+									addr: 'Adresse',
+									statu: 'Status',
+									beschr: 'Beschr.',
+									kat_text: 'Kat.',
+								},
+							},
+						},
+					},
 					iconMenu: {
 						hints: {
 							attributions: 'LMAO',
@@ -403,7 +423,68 @@
 					plugin: pluginLayerChooser({}),
 				},
 			],
+			[
+				{
+					plugin: pluginGfi({
+						layers: {
+							[reports]: {
+								window: true,
+								geometry: false,
+								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: true,
+							pageLength: 5,
+							text: {
+								title: (feature) =>
+									feature.get('str') + ' ' + feature.get('hsnr'),
+								subtitle: 'Michels Meldung',
+								subSubtitle: (feature) => feature.get('skat_text'),
+							},
+						},
+					}),
+				},
+			],
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: {

examples/snowbox/services.js

@@ -86,4 +86,14 @@ export default [
 		featureNS: 'http://www.deegree.org/app',
 		featurePrefix: 'app',
 	},
+	{
+		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|stores/.*\\.ts)$'
+				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts|composables/.*\\.ts)$'
 			)
 			.check()
 		expect(violations).toEqual([])