feat(routing): migrate plugin

examples/snowbox/index.js

@@ -19,6 +19,7 @@
 import pluginPins from '@polar/polar/plugins/pins'
 import pluginPointerPosition from '@polar/polar/plugins/pointerPosition'
 import pluginReverseGeocoder from '@polar/polar/plugins/reverseGeocoder'
+import pluginRouting from '@polar/polar/plugins/routing'
 import pluginScale from '@polar/polar/plugins/scale'
 import pluginToast from '@polar/polar/plugins/toast'
 import pluginZoom from '@polar/polar/plugins/zoom'
@@ -92,7 +93,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -488,6 +489,16 @@
 						}, */
 					}),
 				},
+				{
+					plugin: pluginRouting({
+						type: 'ors',
+						url: 'https://api.openrouteservice.org/v2/directions/',
+						apiKey: '',
+						displayPreferences: true,
+						displayRouteTypesToAvoid: true,
+					}),
+					icon: 'kern-icon-fill--assistant-direction',
+				},
 			],
 			[
 				{

src/components/PolarSelect.ce.vue

@@ -30,12 +30,14 @@
 </template>
 
 <script setup lang="ts">
+import type { Ref } from 'vue'
+
 import { computed, useId } from 'vue'
 
 const props = defineProps<{
 	options: {
 		value: string | number
-		label: string
+		label: string | Ref<string>
 		ariaLabel?: string
 		[key: string]: unknown
 	}[]

src/core/types/main.ts

@@ -11,6 +11,7 @@
 import type { PinsPluginOptions } from '@/plugins/pins'
 import type { PointerPositionPluginOptions } from '@/plugins/pointerPosition'
 import type { ReverseGeocoderPluginOptions } from '@/plugins/reverseGeocoder'
+import type { RoutingPluginOptions } from '@/plugins/routing'
 import type { ScalePluginOptions } from '@/plugins/scale'
 import type { ToastPluginOptions } from '@/plugins/toast'
 import type defaults from '../utils/defaults'
@@ -304,7 +305,7 @@
 
 	// 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 addressSearch plugin. */
@@ -343,6 +344,9 @@
 	/** Configuration for reverseGeocoder plugin. */
 	reverseGeocoder?: ReverseGeocoderPluginOptions
 
+	/** Configuration for routing plugin. */
+	routing?: RoutingPluginOptions
+
 	/** Configuration for scale plugin. */
 	scale?: ScalePluginOptions
 

src/core/types/plugin.ts

@@ -38,6 +38,9 @@
 import type { usePointerPositionStore as PointerPositionStore } from '@/plugins/pointerPosition/store'
 import type { PluginId as ReverseGeocoderPluginId } from '@/plugins/reverseGeocoder'
 import type { useReverseGeocoderStore as ReverseGeocoderStore } from '@/plugins/reverseGeocoder/store'
+import type { PluginId as RoutingPluginId } from '@/plugins/routing'
+import type { resourcesEn as RoutingResources } from '@/plugins/routing/locales'
+import type { useRoutingStore as RoutingStore } from '@/plugins/routing/store'
 import type { PluginId as ScalePluginId } from '@/plugins/scale'
 import type { resourcesEn as ScaleResources } from '@/plugins/scale/locales'
 import type { useScaleStore as ScaleStore } from '@/plugins/scale/store'
@@ -151,6 +154,7 @@
 	| typeof PinsPluginId
 	| typeof PointerPositionPluginId
 	| typeof ReverseGeocoderPluginId
+	| typeof RoutingPluginId
 	| typeof ScalePluginId
 	| typeof ToastPluginId
 	| typeof ZoomPluginId
@@ -158,7 +162,7 @@
 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>,
@@ -187,6 +191,7 @@
 			typeof ReverseGeocoderPluginId,
 			typeof ReverseGeocoderStore
 	  >
+	| GetPluginStore<T, typeof RoutingPluginId, typeof RoutingStore>
 	| GetPluginStore<T, typeof ScalePluginId, typeof ScaleStore>
 	| GetPluginStore<T, typeof ToastPluginId, typeof ToastStore>
 	| GetPluginStore<T, typeof ZoomPluginId, typeof ZoomStore>
@@ -230,6 +235,7 @@
 			typeof PointerPositionPluginId,
 			typeof PointerPositionResources
 	  >
+	| GetPluginResources<T, typeof RoutingPluginId, typeof RoutingResources>
 	| GetPluginResources<T, typeof ScalePluginId, typeof ScaleResources>
 	| GetPluginResources<T, typeof ToastPluginId, typeof ToastResources>
 	| GetPluginResources<T, typeof ZoomPluginId, typeof ZoomResources>

src/plugins/routing/components/RoutingDetails.ce.vue

@@ -0,0 +1,193 @@
+<template>
+	<div class="routing-live-region">
+		<hr class="kern-divider" aria-hidden="true" />
+		<span role="status" aria-live="polite">
+			{{
+				$t(($) => $.ariaLive, {
+					ns: PluginId,
+					steps: steps.length,
+					duration: formatDuration(duration),
+					distance: formatDistance(distance),
+				})
+			}}
+		</span>
+	</div>
+	<section v-show="showDetails">
+		<div class="routing-details-header">
+			<h3>{{ $t(($) => $.label.details, { ns: PluginId }) }}</h3>
+			<span aria-hidden="true">
+				{{
+					$t(($) => $.duration, {
+						ns: PluginId,
+						duration: formatDuration(duration),
+					})
+				}}
+			</span>
+			<span aria-hidden="true">
+				{{
+					$t(($) => $.distance, {
+						ns: PluginId,
+						distance: formatDistance(distance),
+					})
+				}}
+			</span>
+		</div>
+		<ol :aria-label="$t(($) => $.label.steps, { ns: PluginId })">
+			<li v-for="(step, i) in steps" :key="i">
+				<span class="routing-instruction">
+					{{ step.instruction }}
+				</span>
+				<div class="routing-badges">
+					<span
+						class="kern-badge"
+						:aria-label="
+							$t(($) => $.duration, {
+								ns: PluginId,
+								duration: formatDuration(step.duration),
+							})
+						"
+					>
+						<span class="kern-icon kern-icon--pace" aria-hidden="true" />
+						<span class="kern-label" aria-hidden="true">
+							{{ formatDuration(step.duration) }}
+						</span>
+					</span>
+					<span
+						class="kern-badge"
+						:aria-label="
+							$t(($) => $.distance, {
+								ns: PluginId,
+								distance: formatDistance(step.distance),
+							})
+						"
+					>
+						<span class="kern-icon kern-icon--arrow-range" aria-hidden="true" />
+						<span class="kern-label" aria-hidden="true">
+							{{ formatDistance(step.distance) }}
+						</span>
+					</span>
+				</div>
+			</li>
+		</ol>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useRoutingStore } from '../store.ts'
+import { PluginId } from '../types'
+
+const routingStore = useRoutingStore()
+const { showDetails } = storeToRefs(routingStore)
+
+const segments = computed(
+	() => routingStore.routeFeature?.properties.segments ?? []
+)
+const distance = computed(() =>
+	segments.value.reduce((acc, segment) => acc + segment.distance, 0)
+)
+const duration = computed(() =>
+	segments.value.reduce((acc, segment) => acc + segment.duration, 0)
+)
+const steps = computed(() => segments.value.flatMap((segment) => segment.steps))
+
+function formatDistance(distance: number) {
+	if (distance >= 1000) {
+		return `${(distance / 1000).toFixed(1)} km`
+	}
+	return `${distance} m`
+}
+function formatDuration(duration: number) {
+	if (duration >= 3600) {
+		return `${(duration / 3600).toFixed(2)} h`
+	} else if (duration >= 60) {
+		return `${(duration / 60).toFixed(1)} min`
+	}
+	return `${duration} sec`
+}
+</script>
+
+<style scoped>
+.routing-live-region {
+	position: relative;
+	width: 100%;
+
+	hr {
+		width: 100%;
+	}
+
+	span {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		pointer-events: none;
+		margin: calc(-1 * var(--kern-metric-space-small)) 0;
+	}
+}
+
+section {
+	margin-top: var(--kern-metric-space-small);
+
+	.routing-details-header {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		gap: var(--kern-metric-space-small);
+		margin-bottom: var(--kern-metric-space-small);
+
+		h3 {
+			position: absolute;
+			inset: 0;
+			opacity: 0;
+			pointer-events: none;
+			margin: 0;
+		}
+
+		span {
+			font-size: var(--kern-typography-font-size-medium-static);
+		}
+	}
+
+	ol {
+		display: flex;
+		flex-direction: column;
+		gap: var(--kern-metric-space-small);
+		padding: 0;
+
+		li {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--kern-metric-space-small);
+			padding: var(--kern-metric-space-small);
+			padding-left: var(--kern-metric-space-default);
+			border-radius: var(--kern-metric-border-radius-default);
+			background-color: var(--kern-color-layout-background-hued);
+			white-space: break-spaces;
+			overflow-wrap: break-word;
+
+			.routing-instruction {
+				font-weight: var(--kern-typography-font-weight-label-default);
+				color: var(--kern-color-layout-text-default);
+			}
+
+			.routing-badges {
+				display: flex;
+				gap: var(--kern-metric-space-small);
+				width: 100%;
+				color: var(--kern-color-layout-text-default);
+
+				.kern-badge {
+					box-sizing: content-box;
+					justify-content: center;
+					width: var(--kern-metric-dimension-5x-large);
+					border: var(--kern-metric-border-width-light) solid
+						var(--kern-color-decorative-border-contextual);
+				}
+			}
+		}
+	}
+}
+</style>

src/plugins/routing/components/RoutingInput.ce.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="polar-plugin-routing-route-wrapper">
+		<div class="kern-form-input">
+			<label class="kern-label" :for="`polar-plugin-routing-input-${index}`">
+				{{ $t(($) => $.label[getRouteLabel(index)], { ns: PluginId }) }}
+			</label>
+			<input
+				:id="`polar-plugin-routing-input-${index}`"
+				v-model="route[index]"
+				class="kern-form-input__input"
+				:aria-label="
+					$t(($) => $.label.aria, {
+						ns: PluginId,
+						position: $t(($) => $.label[getRouteLabel(index)], {
+							ns: PluginId,
+						}),
+					})
+				"
+				@focus="currentlyFocusedInput = index"
+			/>
+		</div>
+		<div class="polar-plugin-routing-waypoint-button-wrapper">
+			<KernButton
+				icon="kern-icon--add"
+				:label-sr-only="true"
+				class="kern-btn--tertiary"
+				:disabled="addWaypointButtonDisabled"
+				@click="routeStore.setRoute(index)"
+			>
+				{{ $t(($) => $.label.add, { ns: PluginId }) }}
+			</KernButton>
+			<KernButton
+				icon="kern-icon--remove"
+				:label-sr-only="true"
+				class="kern-btn--tertiary"
+				:disabled="route.length === 2"
+				@click="routeStore.setRoute(index, true)"
+			>
+				{{ $t(($) => $.label.remove, { ns: PluginId }) }}
+			</KernButton>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import KernButton from '@/components/kern/KernButton.ce.vue'
+
+import { useRoutingStore } from '../store.ts'
+import { PluginId } from '../types'
+
+defineProps<{
+	index: number
+}>()
+
+const routeStore = useRoutingStore()
+
+const { currentlyFocusedInput, route } = storeToRefs(routeStore)
+
+/**
+ * This makes sure that there are always two fillable input fields at max.
+ */
+const addWaypointButtonDisabled = computed(() => {
+	return (
+		route.value.filter((part) => Boolean(part.length)).length <
+		route.value.length - 1
+	)
+})
+
+function getRouteLabel(index: number) {
+	return index === 0
+		? 'start'
+		: index === route.value.length - 1
+			? 'end'
+			: 'middle'
+}
+</script>
+
+<style scoped>
+.polar-plugin-routing-route-wrapper {
+	display: flex;
+	align-items: end;
+	gap: var(--kern-metric-space-default);
+
+	.polar-plugin-routing-waypoint-button-wrapper {
+		display: flex;
+		gap: var(--kern-metric-space-small);
+	}
+}
+</style>