feat(plugins/pins): migrate plugin

examples/snowbox/index.js

@@ -11,6 +11,7 @@
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
+import pluginPins from '@polar/polar/plugins/pins'
 import pluginToast from '@polar/polar/plugins/toast'
 import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
@@ -22,7 +23,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
-// const hamburgBorder = '1693' // boundary layer for pins / geolocalization
+const hamburgBorder = '1693'
 
 let colorScheme = 'light'
 // eslint-disable-next-line no-unused-vars
@@ -58,7 +59,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -78,7 +79,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -91,6 +92,13 @@
 				name: 'Basemap.de (Grau)',
 				maxZoom: 6,
 			},
+			{
+				id: hamburgBorder,
+				visibility: true,
+				hideInMenu: true,
+				type: 'mask',
+				name: 'meldemichel.layers.hamburgBorder',
+			},
 			{
 				id: reports,
 				type: 'mask',
@@ -151,14 +159,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: [
@@ -224,6 +232,19 @@
 		loaderStyle: 'BasicLoader',
 	})
 )
+addPlugin(
+	map,
+	pluginPins({
+		boundary: {
+			layerId: hamburgBorder,
+		},
+		movable: 'drag',
+		style: {
+			fill: '#FF0019',
+		},
+		toZoomLevel: 7,
+	})
+)
 addPlugin(
 	map,
 	pluginIconMenu({
@@ -241,7 +262,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({

package.json

@@ -84,6 +84,7 @@
 		"@material-symbols/svg-400": "^0.38.0",
 		"@pinia/testing": "^1.0.2",
 		"@repositoryname/noop": "^1.0.6",
+		"@types/geojson": "7946.0.16",
 		"@types/node": "^24.3.1",
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@vitest/coverage-v8": "^3.2.4",

src/core/types/main.ts

@@ -8,6 +8,7 @@
 import type { GeoLocationPluginOptions } from '@/plugins/geoLocation'
 import type { IconMenuPluginOptions } from '@/plugins/iconMenu'
 import type { LoadingIndicatorOptions } from '@/plugins/loadingIndicator'
+import type { PinsPluginOptions } from '@/plugins/pins'
 import type { ToastPluginOptions } from '@/plugins/toast'
 
 export interface ServiceAvailabilityCheck {
@@ -286,32 +287,24 @@
 	theme?: PolarTheme
 	// Plugins are not sorted alphabetical, but listed last.
 	// Remember to sort them alphabetical inside their space.
 	// TODO: Generate this section via types/plugin.ts
 	/* eslint-disable perfectionist/sort-interfaces */
-
-	/**
-	 * Configuration for fullscreen plugin.
-	 */
+	/**  Configuration for fullscreen plugin. */
 	fullscreen?: FullscreenPluginOptions
 
-	/**
-	 * Configuration for geoLocation plugin.
-	 */
+	/** Configuration for geoLocation plugin. */
 	geoLocation?: GeoLocationPluginOptions
 
-	/**
-	 * Configuration for iconMenu plugin.
-	 */
+	/** Configuration for iconMenu plugin. */
 	iconMenu?: IconMenuPluginOptions
 
-	/**
-	 * Configuration for loadingIndicator plugin.
-	 */
+	/** Configuration for loadingIndicator plugin. */
 	loadingIndicator?: LoadingIndicatorOptions
 
-	/**
-	 * Configuration for toast plugin.
-	 */
+	/** Configuration for pins plugin. */
+	pins?: PinsPluginOptions
+
+	/** Configuration for toast plugin. */
 	toast?: ToastPluginOptions
 	/* eslint-enable perfectionist/sort-interfaces */
 }

src/core/types/plugin.ts

@@ -22,6 +22,10 @@
 import type { PluginId as LoadingIndicatorId } from '@/plugins/loadingIndicator'
 import type { useLoadingIndicatorStore as LoadingIndicatorStore } from '@/plugins/loadingIndicator/store'
 
+import type { PluginId as PinsPluginId } from '@/plugins/pins'
+import type { usePinsStore as PinsStore } from '@/plugins/pins/store'
+import type { resourcesEn as PinsResources } from '@/plugins/pins/locales'
+
 import type { PluginId as ToastPluginId } from '@/plugins/toast'
 import type { useToastStore as ToastStore } from '@/plugins/toast/store'
 import type { resourcesEn as ToastResources } from '@/plugins/toast/locales'
@@ -80,12 +84,13 @@
 	| typeof IconMenuPluginId
 	| typeof LayerChooserPluginId
 	| typeof LoadingIndicatorId
+	| typeof PinsPluginId
 	| typeof ToastPluginId
 
 type GetPluginStore<
 	T extends BundledPluginId,
 	I extends BundledPluginId,
 	// TODO: This fixes the type error, but relaxes type-checking for the plugin store too much.
 	// However, it is not clear if Pinia's type system allows for stronger checks at the moment.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	S extends PolarPluginStore<any>,
@@ -98,6 +103,7 @@
 	| GetPluginStore<T, typeof IconMenuPluginId, typeof IconMenuStore>
 	| GetPluginStore<T, typeof LayerChooserPluginId, typeof LayerChooserStore>
 	| GetPluginStore<T, typeof LoadingIndicatorId, typeof LoadingIndicatorStore>
+	| GetPluginStore<T, typeof PinsPluginId, typeof PinsStore>
 	| GetPluginStore<T, typeof ToastPluginId, typeof ToastStore>
 
 type GetPluginResources<
@@ -120,6 +126,7 @@
 			typeof LayerChooserPluginId,
 			typeof LayerChooserResources
 	  >
+	| GetPluginResources<T, typeof PinsPluginId, typeof PinsResources>
 	| GetPluginResources<T, typeof ToastPluginId, typeof ToastResources>
 
 /** @internal */

src/plugins/pins/index.ts

@@ -0,0 +1,33 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * @module \@polar/polar/plugins/pins
+ */
+/* eslint-enable tsdoc/syntax */
+
+import locales from './locales'
+import { usePinsStore } from './store'
+import { PluginId, type PinsPluginOptions } from './types'
+import type { PluginContainer, PolarPluginStore } from '@/core'
+
+/**
+ * Pins plugin for POLAR that adds map interactions to client that allow users
+ * to indicate a specific point on the map.
+ *
+ * The plugin handles marking locations. Embedding processes can then use that
+ * coordinate for further steps. The plugin may react to other plugins,
+ * especially address searches.
+ *
+ * @returns Plugin for use with {@link addPlugin}.
+ */
+export default function pluginPins(
+	options: PinsPluginOptions
+): PluginContainer {
+	return {
+		id: PluginId,
+		locales,
+		storeModule: usePinsStore as PolarPluginStore,
+		options,
+	}
+}
+
+export * from './types'

src/plugins/pins/locales.ts

@@ -0,0 +1,51 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * This is the documentation for the locales keys in the pins plugin.
+ * These locales are *NOT* exported, but documented only.
+ *
+ * @module locales/plugins/pins
+ */
+/* eslint-enable tsdoc/syntax */
+
+import type { Locale } from '@/core'
+
+/**
+ * German locales for pins plugin.
+ * For overwriting these values, use the plugin's ID as namespace.
+ */
+export const resourcesDe = {
+	boundaryError:
+		'Die Überprüfung der Koordinate ist fehlgeschlagen. Bitte versuchen Sie es später erneut oder wenden Sie sich an einen Administrator, wenn das Problem bestehen bleibt.',
+	notInBoundary: 'Diese Koordinate kann nicht gewählt werden.',
+} as const
+
+/**
+ * English locales for pins plugin.
+ * For overwriting these values, use the plugin's ID as namespace.
+ */
+export const resourcesEn = {
+	boundaryError:
+		'Validating the coordinate failed. Please try again later or contact an administrator if the issue persists.',
+	notInBoundary: 'It is not possible to select this coordinate.',
+} as const
+
+/**
+ * Pins plugin locales.
+ *
+ * @privateRemarks
+ * The first entry will be used as fallback.
+ *
+ * @internal
+ */
+const locales: Locale[] = [
+	{
+		type: 'de',
+		resources: resourcesDe,
+	},
+	{
+		type: 'en',
+		resources: resourcesEn,
+	},
+]
+
+export default locales