Allow removal and adding for plugins in iconMenu

examples/snowbox/index.html

@@ -61,6 +61,7 @@ <h1>POLAR map client</h1>
 			</select>
 		</label>
 		<button id="color-scheme-switcher">Switch to dark mode</button>
+		<button id="toggle-filter">Add/Remove filter plugin</button>
 		<div>
 			Coordinates of currently selected feature: <span id="selected-feature-coordinates"></span>
 		</div>

examples/snowbox/index.js

@@ -93,7 +93,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -394,6 +394,7 @@
 		layoutTag: 'BOTTOM_LEFT',
 	})
 )
+let filterItem
 addPlugin(
 	map,
 	pluginIconMenu({
@@ -409,7 +410,7 @@
 					plugin: pluginLayerChooser({}),
 				},
 			],
-			[
+			(filterItem = [
 				{
 					plugin: pluginFilter({
 						layers: {
@@ -473,7 +474,7 @@
 						},
 					}),
 				},
-			],
+			]),
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -583,3 +584,17 @@
 		colorScheme = colorScheme === 'light' ? 'dark' : 'light'
 		updateState(map, 'core', 'colorScheme', colorScheme)
 	})
+
+let hasFilter = true
+document
+	.getElementById('toggle-filter')
+	.addEventListener('click', ({ target }) => {
+		const store = getStore(map, 'iconMenu')
+		if (hasFilter) {
+			store.removePlugin('filter')
+			hasFilter = false
+		} else {
+			store.addPlugin(filterItem)
+			hasFilter = true
+		}
+	})

src/composables/useStoreWatcher.ts

@@ -182,7 +182,7 @@ export function useStoreWatcher(
 			}
 
 			const targetIsInstalled =
-				!source.plugin || coreStore.getPluginStore(source.plugin)
+				!source.plugin || coreStore.usedPlugins.includes(source.plugin)
 
 			if (targetIsInstalled && !watcherConfig.handle) {
 				setupWatcherForSource(watcherConfig)

src/core/stores/plugin.ts

@@ -10,7 +10,7 @@ import type {
 import { toMerged } from 'es-toolkit'
 import i18next from 'i18next'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { markRaw, reactive } from 'vue'
+import { markRaw, reactive, readonly } from 'vue'
 
 import { useMainStore } from './main'
 
@@ -67,20 +67,17 @@ export const usePluginStore = defineStore('plugin', () => {
 		plugins.splice(pluginIndex, 1)
 	}
 
-	function getPluginStore<T extends PluginId>(
+	function getPluginStore<T extends BundledPluginId>(
 		id: T
-	): ReturnType<
-		T extends BundledPluginId
-			? BundledPluginStores<typeof id>
-			: PolarPluginStore
-	> | null {
+	): ReturnType<BundledPluginStores<T>> | null
+	function getPluginStore(id: PluginId): ReturnType<PolarPluginStore> | null
+	function getPluginStore(id: PluginId): unknown {
 		const plugin = plugins.find((plugin) => plugin.id === id)
-		// @ts-expect-error | We trust that our internal IDs work.
 		return plugin?.storeModule?.(mainStore._instance) || null
 	}
 
 	return {
-		plugins,
+		plugins: readonly(plugins) as readonly PluginContainer[],
 		addPlugin,
 		removePlugin,
 		getPluginStore,

src/plugins/filter/store.ts

@@ -50,10 +50,12 @@ export const useFilterStore = defineStore('plugins/filter', () => {
 					{ deep: true, immediate: true }
 				)
 			)
+			teardownCallbacks.push(callback)
 		})
 	}
 
 	function teardownPlugin() {
+		filterMainStore.state = {}
 		teardownCallbacks.forEach((callback) => {
 			callback()
 		})

src/plugins/iconMenu/components/NineRegionsButton.ce.vue

@@ -13,7 +13,6 @@ import { storeToRefs } from 'pinia'
 import { computed, inject } from 'vue'
 
 import PolarIconButton from '@/components/PolarIconButton.ce.vue'
-import { useCoreStore } from '@/core/stores'
 
 import { useIconMenuStore } from '../store'
 
@@ -30,13 +29,7 @@ const active = computed(() => open.value === props.id)
 const updateMaxWidth = inject('updateMaxWidth') as () => void
 
 function toggle() {
-	if (open.value === props.id) {
-		open.value = null
-		useCoreStore().setMoveHandle(null)
-	} else {
-		open.value = props.id
-		iconMenuStore.openInMoveHandle(props.id)
-	}
+	iconMenuStore.openMenuById(open.value === props.id ? null : props.id)
 	updateMaxWidth()
 }
 </script>

src/plugins/iconMenu/components/NineRegionsMenu.ce.vue

@@ -2,8 +2,8 @@
 	<component :is="asList ? 'ul' : 'div'" class="polar-plugin-icon-menu-list">
 		<component
 			:is="asList ? 'li' : 'div'"
-			v-for="(item, index) of menus"
-			:key="index"
+			v-for="item of menus"
+			:key="item.plugin.id"
 			:class="
 				deviceIsHorizontal
 					? 'polar-plugin-icon-menu-list-item-horizontal'

src/plugins/iconMenu/components/StandardFocusMenu.ce.vue

@@ -75,16 +75,14 @@ const maxHeight = computed(() =>
 
 function toggle(id: string) {
 	if (iconMenuStore.focusOpen === id) {
-		iconMenuStore.focusOpen = null
+		iconMenuStore.openFocusMenuById(null)
 		pluginComponent.value = null
-		coreStore.setMoveHandle(null)
 	} else {
-		iconMenuStore.focusOpen = id
+		iconMenuStore.openFocusMenuById(id)
 		pluginComponent.value = markRaw(
 			(props.menus.find(({ plugin }) => plugin.id === id) as Menu).plugin
 				.component as Component
 		)
-		iconMenuStore.openInMoveHandle(id, true)
 	}
 }
 </script>

src/plugins/iconMenu/components/StandardMenuList.ce.vue

@@ -122,13 +122,7 @@ function updateMaxWidth() {
 }
 
 function toggle(id: string) {
-	if (open.value === id) {
-		open.value = null
-		coreStore.setMoveHandle(null)
-	} else {
-		open.value = id
-		iconMenuStore.openInMoveHandle(id)
-	}
+	iconMenuStore.openMenuById(open.value === id ? null : id)
 	updateMaxWidth()
 }
 </script>

src/plugins/iconMenu/store.ts

@@ -4,14 +4,12 @@
  */
 /* eslint-enable tsdoc/syntax */
 
-import type { Component } from 'vue'
-import type { Icon } from '@/core'
-import type { Menu } from './types'
+import type { FocusMenu, Menu } from './types'
 
 import { toMerged } from 'es-toolkit'
 import { t } from 'i18next'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, markRaw, ref, toRaw } from 'vue'
+import { computed, markRaw, readonly, ref, toRaw } from 'vue'
 
 import { useCoreStore } from '@/core/stores'
 
@@ -28,7 +26,7 @@ export const useIconMenuStore = defineStore('plugins/iconMenu', () => {
 	const coreStore = useCoreStore()
 
 	const menus = ref<Array<Menu[]>>([])
-	const focusMenus = ref<(Menu & { icon: Icon })[]>([])
+	const focusMenus = ref<FocusMenu[]>([])
 	const open = ref<string | null>(null)
 	const focusOpen = ref<string | null>(null)
 
@@ -42,6 +40,52 @@ export const useIconMenuStore = defineStore('plugins/iconMenu', () => {
 		() => coreStore.configuration.iconMenu?.layoutTag ?? ''
 	)
 
+	function addPlugin(menuGroup: Menu[]) {
+		menuGroup.forEach(({ plugin }) => {
+			if (plugin.component) {
+				markRaw(toRaw(plugin.component))
+			}
+			coreStore.addPlugin(toMerged(plugin, { independent: false }))
+		})
+		menus.value.push(menuGroup)
+	}
+	function addFocusPlugin(menu: FocusMenu) {
+		if (menu.plugin.component) {
+			markRaw(toRaw(menu.plugin.component))
+		}
+		coreStore.addPlugin(toMerged(menu.plugin, { independent: false }))
+		focusMenus.value.push(menu)
+	}
+	function removePlugin(pluginId: string) {
+		if (open.value === pluginId) {
+			open.value = null
+		}
+		const pluginIndex = menus.value.findIndex((menuGroup) =>
+			menuGroup.some(({ plugin: { id } }) => id === pluginId)
+		)
+		const pluginMenu = menus.value[pluginIndex]
+		if (pluginMenu) {
+			const pluginMenuIndex = pluginMenu.findIndex(
+				({ plugin: { id } }) => id === pluginId
+			)
+			pluginMenu.splice(pluginMenuIndex, 1)
+			if (pluginMenu.length === 0) {
+				menus.value.splice(pluginIndex, 1)
+			}
+		}
+
+		if (focusOpen.value === pluginId) {
+			focusOpen.value = null
+		}
+		const pluginFocusIndex = focusMenus.value.findIndex(
+			({ plugin: { id } }) => id === pluginId
+		)
+		if (pluginFocusIndex !== -1) {
+			focusMenus.value.splice(pluginFocusIndex, 1)
+		}
+		coreStore.removePlugin(pluginId)
+	}
+
 	const visibleMenus = computed(() =>
 		menus.value.map((menuGroup) =>
 			menuGroup.filter(
@@ -56,41 +100,12 @@ export const useIconMenuStore = defineStore('plugins/iconMenu', () => {
 	)
 
 	function setupPlugin() {
-		// Components are marked raw so they themselves are not made reactive
-		menus.value = (coreStore.configuration.iconMenu?.menus || []).map(
-			(menuGroup) =>
-				menuGroup
-					.filter(({ plugin: { id } }) => {
-						const display = coreStore.configuration[id]?.displayComponent
-						return typeof display === 'boolean' ? display : true
-					})
-					.map((menuItem) => ({
-						...menuItem,
-						plugin: {
-							...menuItem.plugin,
-							component: markRaw(toRaw(menuItem.plugin.component as Component)),
-						},
-					}))
-		)
-		focusMenus.value = (coreStore.configuration.iconMenu?.focusMenus || [])
-			.filter(({ plugin: { id } }) => {
-				const display = coreStore.configuration[id]?.displayComponent
-				return typeof display === 'boolean' ? display : true
-			})
-			.map((menuItem) => ({
-				...menuItem,
-				plugin: {
-					...menuItem.plugin,
-					component: markRaw(toRaw(menuItem.plugin.component as Component)),
-				},
-			}))
-
-		menus.value
-			.concat(focusMenus.value)
-			.flat()
-			.forEach(({ plugin }) => {
-				coreStore.addPlugin(toMerged(plugin, { independent: false }))
-			})
+		;(coreStore.configuration.iconMenu?.menus || []).forEach((menuGroup) => {
+			addPlugin(menuGroup)
+		})
+		;(coreStore.configuration.iconMenu?.focusMenus || []).forEach((menu) => {
+			addFocusPlugin(menu)
+		})
 
 		const initiallyOpen = coreStore.configuration.iconMenu?.initiallyOpen
 		if (
@@ -112,21 +127,25 @@ export const useIconMenuStore = defineStore('plugins/iconMenu', () => {
 	}
 	function teardownPlugin() {}
 
-	function openMenuById(openId: string) {
+	function openMenuById(openId: string | null) {
 		const entry = menus.value.flat().find(({ plugin: { id } }) => id === openId)
-
-		if (entry) {
+		if (openId && entry) {
 			open.value = openId
 			openInMoveHandle(openId)
+		} else {
+			open.value = null
+			coreStore.setMoveHandle(null)
 		}
 	}
 
-	function openFocusMenuById(openId: string) {
+	function openFocusMenuById(openId: string | null) {
 		const entry = focusMenus.value.find(({ plugin: { id } }) => id === openId)
-
-		if (entry) {
+		if (openId && entry) {
 			focusOpen.value = openId
 			openInMoveHandle(openId, true)
+		} else {
+			focusOpen.value = null
+			coreStore.setMoveHandle(null)
 		}
 	}
 
@@ -172,13 +191,55 @@ export const useIconMenuStore = defineStore('plugins/iconMenu', () => {
 	return {
 		visibleMenus,
 		visibleFocusMenus,
-		open,
-		focusOpen,
+
+		/**
+		 * Determines which menu is currently open.
+		 *
+		 * To change the open menu, use {@link openMenuById}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		open: readonly(open),
+
+		/**
+		 * Determines which focus menu is currently open.
+		 *
+		 * To change the open focus menu, use {@link openFocusMenuById}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		focusOpen: readonly(focusOpen),
+
 		buttonComponent,
-		openInMoveHandle,
 		openMenuById,
 		openFocusMenuById,
 
+		/**
+		 * Appends a group of plugins to the icon menu.
+		 *
+		 * @param menu - The menu item group to add.
+		 * @alpha
+		 */
+		addPlugin,
+
+		/**
+		 * Appends a plugin to the icon menu as a focus menu.
+		 *
+		 * @param menu - The focus menu item to add.
+		 * @alpha
+		 */
+		addFocusPlugin,
+
+		/**
+		 * Removes a plugin from the icon menu.
+		 *
+		 * @param pluginId - The ID of the plugin to remove.
+		 * @alpha
+		 */
+		removePlugin,
+
 		/** @alpha */
 		layoutTag,