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/lib/watchArray.ts

@@ -0,0 +1,69 @@
+import type { WatchOptions, WatchSource } from 'vue'
+
+import { watch } from 'vue'
+
+function getDifference<T>(items: T[], otherItems: T[]) {
+	const unmatchedItems = [...otherItems]
+	return items.filter((item) => {
+		const matchIndex = unmatchedItems.findIndex((otherItem) =>
+			Object.is(item, otherItem)
+		)
+		if (matchIndex === -1) {
+			return true
+		}
+		unmatchedItems.splice(matchIndex, 1)
+		return false
+	})
+}
+
+/**
+ * Watches an array and invokes callbacks for every added and removed item.
+ *
+ * @param source - Reactive array source to watch
+ * @param onAdded - Callback invoked for every added item
+ * @param onRemoved - Callback invoked for every removed item
+ * @param options - Vue watch options
+ */
+export function watchArray<T>(
+	source: WatchSource<T[]>,
+	onAdded: (item: T) => void,
+	onRemoved: (item: T) => void,
+	options?: WatchOptions
+) {
+	return watch(
+		source,
+		(newItems, oldItems) => {
+			const previousItems = oldItems ?? []
+			getDifference(newItems, previousItems).forEach((item) => {
+				onAdded(item)
+			})
+			getDifference(previousItems, newItems).forEach((item) => {
+				onRemoved(item)
+			})
+		},
+		options
+	)
+}
+
+if (import.meta.vitest) {
+	const { expect, test, vi } = import.meta.vitest
+	const { ref } = await import('vue')
+
+	test('calls the respective callback for each added and removed item', () => {
+		const items = ref([{ id: 1 }, { id: 2 }])
+		const onAdded = vi.fn()
+		const onRemoved = vi.fn()
+
+		watchArray(items, onAdded, onRemoved, { flush: 'sync' })
+
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const retainedItem = items.value[1]!
+		const addedItem = { id: 3 }
+		items.value = [retainedItem, addedItem]
+
+		expect(onAdded).toHaveBeenCalledOnce()
+		expect(onAdded).toHaveBeenCalledWith(addedItem)
+		expect(onRemoved).toHaveBeenCalledOnce()
+		expect(onRemoved).toHaveBeenCalledWith({ id: 1 })
+	})
+}

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'
 
@@ -31,11 +30,9 @@ const updateMaxWidth = inject('updateMaxWidth') as () => void
 
 function toggle() {
 	if (open.value === props.id) {
-		open.value = null
-		useCoreStore().setMoveHandle(null)
+		iconMenuStore.openMenuById(null)
 	} else {
-		open.value = props.id
-		iconMenuStore.openInMoveHandle(props.id)
+		iconMenuStore.openMenuById(props.id)
 	}
 	updateMaxWidth()
 }

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

@@ -123,11 +123,9 @@ function updateMaxWidth() {
 
 function toggle(id: string) {
 	if (open.value === id) {
-		open.value = null
-		coreStore.setMoveHandle(null)
+		iconMenuStore.openMenuById(null)
 	} else {
-		open.value = id
-		iconMenuStore.openInMoveHandle(id)
+		iconMenuStore.openMenuById(id)
 	}
 	updateMaxWidth()
 }