Merge pull request #42 from allmaps/develop

Added unlink option in compare mode

Author: sammeltassen

config.yml

@@ -260,6 +260,8 @@ controls:
   followOrientation: Kaartoriëntatie volgen
   disableFocus: Kaartlaagfocus uitschakelen
   followFocus: Kaartlaagfocus volgen
+  linkViews: Kaartbeelden koppelen
+  unlinkViews: Kaartbeelden ontkoppelen
   opacity: Opacity
   adjustOpacity: Opacity aanpassen
   layerOpacity: Opacity kaartlaag

content/gouda/config.yml

@@ -259,6 +259,8 @@ controls:
   followOrientation: Kaartoriëntatie volgen
   disableFocus: Kaartlaagfocus uitschakelen
   followFocus: Kaartlaagfocus volgen
+  linkViews: Kaartbeelden koppelen
+  unlinkViews: Kaartbeelden ontkoppelen
   opacity: Opacity
   adjustOpacity: Opacity aanpassen
   layerOpacity: Opacity kaartlaag

src/lib/components/Map.svelte

@@ -15,6 +15,7 @@
 		GeocoderBounds,
 		MapKeyboardCommand,
 		MapLocation,
+		MapLocationSyncCommand,
 		MapToolbarCommand
 	} from '$lib/types';
 
@@ -69,6 +70,8 @@
 		opacity = $bindable(viewState.opacity),
 		rotateToMapOrientation = $bindable(false),
 		focusActiveMap = $bindable(false),
+		viewsLinked = $bindable(false),
+		locationSyncCommand,
 		inViewOnly = $bindable(false),
 		currentLocation = $bindable({
 			center: [...config.map.initialView.center] as [number, number],
@@ -88,7 +91,10 @@
 		enableLocationMarker = false,
 		navPosition = 'left',
 		controlsPosition = 'top-right',
+		showZoomControls = true,
+		showLinkControl = false,
 		showInViewControl = false,
+		onLocationChange,
 		autoplayActive = false,
 		autoplayNextAnnotation,
 		loaded = $bindable(false)
@@ -98,6 +104,8 @@
 		opacity?: number;
 		rotateToMapOrientation?: boolean;
 		focusActiveMap?: boolean;
+		viewsLinked?: boolean;
+		locationSyncCommand?: MapLocationSyncCommand;
 		inViewOnly?: boolean;
 		currentLocation?: MapLocation;
 		annotationsInView?: string[];
@@ -110,7 +118,10 @@
 		enableLocationMarker?: boolean;
 		navPosition?: 'left' | 'right';
 		controlsPosition?: 'top-left' | 'top-right';
+		showZoomControls?: boolean;
+		showLinkControl?: boolean;
 		showInViewControl?: boolean;
+		onLocationChange?: (location: MapLocation) => void;
 		autoplayActive?: boolean;
 		autoplayNextAnnotation?: string;
 		loaded?: boolean;
@@ -145,6 +156,8 @@
 	let zoomLimitRetryTimer: ReturnType<typeof setTimeout> | undefined;
 	let visibilityCheckFrame: number | undefined;
 	let isSyncing = false;
+	let previousLocationSyncCommandId = 0;
+	let activeLocationSyncCommandId = 0;
 	let warpedMapList = getWarpedMapList();
 	let warpedMapLayer = new WarpedMapLayer({
 		visible: false,
@@ -217,16 +230,48 @@
 
 	// Synchronize the map position with the bound location.
 	$effect(() => {
-		if (mapReady && map && currentLocation) {
-			const center = currentLocation.center;
-			const zoom = currentLocation.zoom;
-			const bearing = currentLocation.bearing ?? 0;
-			if (!mapMatchesLocation(center, zoom, bearing)) {
-				clearPreferredSelectionZoom();
+		if (!mapReady || !map || !currentLocation) return;
+
+		const pendingAnimatedSync =
+			locationSyncCommand && locationSyncCommand.id !== previousLocationSyncCommandId
+				? locationSyncCommand
+				: undefined;
+
+		if (
+			!pendingAnimatedSync &&
+			activeLocationSyncCommandId &&
+			locationSyncCommand?.id === activeLocationSyncCommandId
+		) {
+			return;
+		}
+
+		const targetLocation = pendingAnimatedSync?.location ?? currentLocation;
+		const center = targetLocation.center;
+		const zoom = targetLocation.zoom;
+		const bearing = targetLocation.bearing ?? 0;
+		if (!mapMatchesLocation(center, zoom, bearing)) {
+			clearPreferredSelectionZoom();
+
+			if (pendingAnimatedSync) {
+				previousLocationSyncCommandId = pendingAnimatedSync.id;
+				activeLocationSyncCommandId = pendingAnimatedSync.id;
+				isSyncing = true;
+				map.stop();
+				map.once('moveend', () => {
+					if (activeLocationSyncCommandId === pendingAnimatedSync.id) {
+						activeLocationSyncCommandId = 0;
+					}
+					isSyncing = false;
+				});
+				map.flyTo({ center, zoom, bearing, pitch: 0, essential: true });
+			} else {
 				isSyncing = true;
 				map.jumpTo({ center, zoom, bearing });
 				isSyncing = false;
 			}
+		} else if (pendingAnimatedSync) {
+			previousLocationSyncCommandId = pendingAnimatedSync.id;
+			activeLocationSyncCommandId = 0;
 		}
 	});
 
@@ -335,6 +380,7 @@
 		if (!mapReady || !map || !command || command.id === previousKeyboardCommandId) return;
 
 		previousKeyboardCommandId = command.id;
+
 		let zoom = command.zoomDelta === undefined ? map.getZoom() : map.getZoom() + command.zoomDelta;
 
 		clearPreferredSelectionZoom();
@@ -1072,11 +1118,13 @@
 
 		mapInstance.on('move', () => {
 			if (!isSyncing) {
-				currentLocation = {
+				const nextLocation = {
 					center: mapInstance.getCenter().toArray() as [number, number],
 					zoom: mapInstance.getZoom(),
 					bearing: mapInstance.getBearing()
 				};
+				currentLocation = nextLocation;
+				onLocationChange?.(nextLocation);
 			}
 
 			if (visibilityWarningOpen) {
@@ -1160,10 +1208,13 @@
 			bind:opacity
 			bind:rotateToMapOrientation
 			bind:focusActiveMap
+			bind:viewsLinked
 			bind:inViewOnly
 			position={controlsPosition}
 			canZoomToMap={canZoomToActiveMap}
 			canFilterInView={annotationsInView.length > 0}
+			{showZoomControls}
+			{showLinkControl}
 			{showInViewControl}
 			onUserCameraAction={clearPreferredSelectionZoom}
 		/>

src/lib/components/MapControls.svelte

@@ -1,20 +1,33 @@
 <script lang="ts">
-	import { Compass, Focus, MapPinned, Minus, Plus, SlidersHorizontal } from '@lucide/svelte';
+	import {
+		Compass,
+		Focus,
+		Link,
+		Unlink,
+		MapPinned,
+		Minus,
+		Plus,
+		SlidersHorizontal
+	} from '@lucide/svelte';
 	import type { AppConfig } from '$lib/types';
 	import type maplibregl from 'maplibre-gl';
 
 	type ControlPosition = 'top-left' | 'top-right';
+	const CONTROL_WIDTH_REM = 2.25;
 
 	let {
 		config,
 		map,
 		opacity = $bindable(100),
 		rotateToMapOrientation = $bindable(false),
 		focusActiveMap = $bindable(false),
+		viewsLinked = $bindable(false),
 		inViewOnly = $bindable(false),
 		position = 'top-right',
 		canZoomToMap = false,
 		canFilterInView = false,
+		showZoomControls = true,
+		showLinkControl = false,
 		showInViewControl = false,
 		onUserCameraAction
 	}: {
@@ -23,10 +36,13 @@
 		opacity?: number;
 		rotateToMapOrientation?: boolean;
 		focusActiveMap?: boolean;
+		viewsLinked?: boolean;
 		inViewOnly?: boolean;
 		position?: ControlPosition;
 		canZoomToMap?: boolean;
 		canFilterInView?: boolean;
+		showZoomControls?: boolean;
+		showLinkControl?: boolean;
 		showInViewControl?: boolean;
 		onUserCameraAction?: () => void;
 	} = $props();
@@ -60,6 +76,14 @@
 			}
 		}
 	]);
+	let controlCount = $derived(
+		(showZoomControls ? zoomControls.length : 0) +
+			2 +
+			(showLinkControl ? 1 : 0) +
+			(showInViewControl ? 1 : 0) +
+			1
+	);
+	let toolbarWidth = $derived(`${controlCount * CONTROL_WIDTH_REM}rem`);
 	const controlButtonClass =
 		'flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center hover:bg-gray-100 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-main disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-white';
 
@@ -81,6 +105,10 @@
 		focusActiveMap = !focusActiveMap;
 	}
 
+	function toggleViewsLinked() {
+		viewsLinked = !viewsLinked;
+	}
+
 	function toggleInViewOnly() {
 		if (!inViewOnly && !canFilterInView) return;
 
@@ -108,20 +136,23 @@
 	ondblclick={(event) => event.stopPropagation()}
 >
 	<div
-		class="inline-grid auto-cols-[2.25rem] grid-flow-col divide-x divide-gray-200 overflow-hidden rounded-md border border-gray-200 bg-white text-gray-800 shadow-lg"
+		style:width={toolbarWidth}
+		class="inline-grid auto-cols-[2.25rem] grid-flow-col divide-x divide-gray-200 overflow-hidden rounded-md border border-gray-200 bg-white text-gray-800 shadow-lg transition-[width] duration-200 ease-out"
 	>
-		{#each zoomControls as control (control.label)}
-			{@const Icon = control.icon}
-			<button
-				type="button"
-				aria-label={control.label}
-				title={control.label}
-				onclick={control.action}
-				class={controlButtonClass}
-			>
-				<Icon class="h-4 w-4" />
-			</button>
-		{/each}
+		{#if showZoomControls}
+			{#each zoomControls as control (control.label)}
+				{@const Icon = control.icon}
+				<button
+					type="button"
+					aria-label={control.label}
+					title={control.label}
+					onclick={control.action}
+					class={controlButtonClass}
+				>
+					<Icon class="h-4 w-4" />
+				</button>
+			{/each}
+		{/if}
 
 		<button
 			type="button"
@@ -151,6 +182,23 @@
 			<Focus class="h-4 w-4" />
 		</button>
 
+		{#if showLinkControl}
+			<button
+				type="button"
+				aria-label={viewsLinked ? config.controls.unlinkViews : config.controls.linkViews}
+				title={viewsLinked ? config.controls.unlinkViews : config.controls.linkViews}
+				aria-pressed={viewsLinked}
+				onclick={toggleViewsLinked}
+				class={getToggleButtonClass(viewsLinked)}
+			>
+				{#if viewsLinked}
+					<Link class="h-4 w-4" />
+				{:else}
+					<Unlink class="h-4 w-4" />
+				{/if}
+			</button>
+		{/if}
+
 		{#if showInViewControl}
 			<button
 				type="button"

src/lib/components/MapPane.svelte

@@ -10,6 +10,7 @@
 		MapLayersOpenCommand,
 		MapKeyboardCommand,
 		MapLocation,
+		MapLocationSyncCommand,
 		MapMetadata,
 		MapToolbarCommand,
 		SliderKeyboardCommand
@@ -35,16 +36,20 @@
 		mapToolbarCommand,
 		paneSide = 'left',
 		layersId = `map-layers-${navPosition}`,
-		bordered = false,
 		showMapYearTicks = true,
 		showOnlyAvailableYears = config.slider.showOnlyAvailableYears ?? false,
 		enableFlyTo = false,
 		enableLocationMarker = false,
 		enableLayersShortcut = false,
 		showLayersPaneIndicator = false,
 		showInViewControl = false,
+		showZoomControls = true,
+		showLinkControl = false,
 		rotateToMapOrientation = $bindable(false),
 		focusActiveMap = $bindable(false),
+		viewsLinked = $bindable(false),
+		locationSyncCommand,
+		onLocationChange,
 		autoplayActive = false,
 		autoplayNextAnnotation,
 		annotationsInView = $bindable<string[]>([]),
@@ -66,16 +71,20 @@
 		mapToolbarCommand?: MapToolbarCommand;
 		paneSide?: 'left' | 'right';
 		layersId?: string;
-		bordered?: boolean;
 		showMapYearTicks?: boolean;
 		showOnlyAvailableYears?: boolean;
 		enableFlyTo?: boolean;
 		enableLocationMarker?: boolean;
 		enableLayersShortcut?: boolean;
 		showLayersPaneIndicator?: boolean;
 		showInViewControl?: boolean;
+		showZoomControls?: boolean;
+		showLinkControl?: boolean;
 		rotateToMapOrientation?: boolean;
 		focusActiveMap?: boolean;
+		viewsLinked?: boolean;
+		locationSyncCommand?: MapLocationSyncCommand;
+		onLocationChange?: (location: MapLocation) => void;
 		autoplayActive?: boolean;
 		autoplayNextAnnotation?: string;
 		annotationsInView?: string[];
@@ -103,11 +112,7 @@
 	});
 </script>
 
-<section
-	class="map-pane relative flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden {bordered
-		? 'md:border-r-2 md:border-gray-300'
-		: ''}"
->
+<section class="map-pane relative flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden">
 	{#if !autoplayActive && mapLoaded}
 		<div
 			class="absolute inset-y-0 z-20 flex-none {navPosition === 'right' ? 'right-0' : 'left-0'}"
@@ -136,6 +141,8 @@
 			bind:opacity
 			bind:rotateToMapOrientation
 			bind:focusActiveMap
+			bind:viewsLinked
+			{locationSyncCommand}
 			bind:inViewOnly={sliderInViewOnly}
 			bind:currentLocation
 			bind:annotationsInView
@@ -151,6 +158,9 @@
 			{navPosition}
 			{controlsPosition}
 			{showInViewControl}
+			{showZoomControls}
+			{showLinkControl}
+			{onLocationChange}
 			{autoplayActive}
 			{autoplayNextAnnotation}
 		/>