Refactor/style switcher (#390)

* refactor: refactored style-switcher code

* fix

Author: JinIgarashi

.changeset/warm-panthers-applaud.md

@@ -0,0 +1,5 @@
+---
+"@watergis/svelte-maplibre-style-switcher": patch
+---
+
+refactor: refactored style-switcher code

packages/style-switcher/src/lib/StyleSwitcher.svelte

@@ -1,8 +1,85 @@
+<script context="module" lang="ts">
+	export type StyleSwitcherOption = {
+		title: string;
+		uri: string;
+	};
+
+	export class StyleUrl {
+		private STYLE_PATHNAME = 'style';
+
+		private getUrl() {
+			const location = window.location;
+			const url = new URL(location.href);
+			url.hash = location.hash;
+			return url;
+		}
+
+		private updateUrl(url: URL) {
+			history.replaceState('', '', url.toString());
+		}
+
+		public get(): string | null {
+			const url = this.getUrl();
+			const style = url.searchParams.get(this.STYLE_PATHNAME);
+			return style;
+		}
+
+		public set(style: string) {
+			const url = this.getUrl();
+			url.searchParams.set(this.STYLE_PATHNAME, style);
+			this.updateUrl(url);
+		}
+
+		public delete() {
+			const url = this.getUrl();
+			url.searchParams.delete(this.STYLE_PATHNAME);
+			this.updateUrl(url);
+		}
+
+		public getMatchedStyleByTitle(
+			styles: StyleSwitcherOption[],
+			title: string
+		): StyleSwitcherOption | undefined {
+			for (const style of styles) {
+				if (style.title === title) {
+					return style;
+				}
+			}
+			return;
+		}
+
+		public getMatchedStyleByUrl(
+			styles: StyleSwitcherOption[],
+			url: string
+		): StyleSwitcherOption | undefined {
+			for (const style of styles) {
+				if (style.uri === url) {
+					return style;
+				}
+			}
+			return;
+		}
+
+		public getInitialStyle(styles: StyleSwitcherOption[]) {
+			const defaultStyle = styles[0];
+			const styleFromUrl = this.get();
+			let initialStyle = defaultStyle;
+			if (styleFromUrl) {
+				const styleObj = this.getMatchedStyleByTitle(styles, styleFromUrl);
+				if (styleObj) {
+					initialStyle = styleObj;
+				}
+			} else {
+				this.set(initialStyle.title);
+			}
+			return initialStyle;
+		}
+	}
+</script>
+
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { StyleUrl } from '$lib/style-url';
 	import type { Map } from 'maplibre-gl';
-	import type { StyleSwitcherOption } from './types';
+	import { createEventDispatcher } from 'svelte';
 
 	export let map: Map;
 	export let styles: StyleSwitcherOption[];

packages/style-switcher/src/lib/StyleSwitcherControl.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
+	import type { ControlPosition, Map } from 'maplibre-gl';
 	import { onMount } from 'svelte';
-	import type { Map } from 'maplibre-gl';
-	import type { Position, StyleSwitcherOption } from './types';
 	import MapButtons from './MapButtons.svelte';
-	import { StyleUrl } from '$lib/style-url';
+	import { StyleUrl, type StyleSwitcherOption } from './StyleSwitcher.svelte';
 
 	export let styles: StyleSwitcherOption[];
 	export let map: Map;
-	export let position: Position = 'bottom-left';
+	export let position: ControlPosition = 'bottom-left';
 	export let selectedStyle: StyleSwitcherOption;
 
 	let styleSwitcherDiv: HTMLDivElement;

packages/style-switcher/src/lib/index.ts

@@ -1,7 +1,5 @@
-import { default as StyleSwitcher } from './StyleSwitcher.svelte';
-import { default as StyleSwitcherControl } from './StyleSwitcherControl.svelte';
-import type { StyleSwitcherOption } from './types';
-import { StyleUrl } from './style-url';
+import StyleSwitcher, { StyleUrl, type StyleSwitcherOption } from './StyleSwitcher.svelte';
+import StyleSwitcherControl from './StyleSwitcherControl.svelte';
 
 export { StyleSwitcher, StyleSwitcherControl, StyleUrl };
 export type { StyleSwitcherOption };