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>