diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml index 01384827a..da3fce2bc 100644 --- a/.github/workflows/documentation.yml +++ b/.github/workflows/documentation.yml @@ -16,7 +16,7 @@ jobs: with: node-version: 20 - name: Install pnpm - run: npm install --location=global pnpm + run: npm install --location=global pnpm@9.0.6 - name: Remove pnpm-workspace.yaml run: rm -rf ./pnpm-workspace.yaml - name: Install dependencies diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 26e838921..256a39738 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -23,7 +23,7 @@ jobs: with: node-version: ${{ matrix.node-version }} - name: Install pnpm - run: npm install -g pnpm + run: npm install -g pnpm@9.0.6 - name: Install dependencies run: pnpm install - name: Create env file diff --git a/package.json b/package.json index 7533ac6a8..9c5bb6f44 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "repository": "git@github.com:diegoazh/gmap-vue.git", "author": "\"Daniel Sim, Guillaume Leclerc\",", "license": "MIT", - "packageManager": "pnpm@9.0.5", + "packageManager": "pnpm@9.0.6", "scripts": { "serve:docs": "pnpm run --filter docs start", "build:all": "pnpm run --recursive build", diff --git a/packages/v3/cypress/runner/components/ClusterTest.vue b/packages/v3/cypress/runner/components/ClusterTest.vue index 16b54ac58..cb50dd126 100644 --- a/packages/v3/cypress/runner/components/ClusterTest.vue +++ b/packages/v3/cypress/runner/components/ClusterTest.vue @@ -6,13 +6,15 @@ style="width: 100%; height: 500px" mapId="DEMO_MAP_ID" > - + diff --git a/packages/v3/src/components/info-window.vue b/packages/v3/src/components/info-window.vue index 5c7585abb..b91ede818 100644 --- a/packages/v3/src/components/info-window.vue +++ b/packages/v3/src/components/info-window.vue @@ -18,11 +18,12 @@ import { getPropsValuesWithoutOptionsProp, useComponentPromiseFactory, useDestroyPromisesOnUnmounted, + useMarkerPromise, usePluginOptions, } from '@/composables'; import type { IInfoWindowVueComponentProps } from '@/interfaces'; import { $infoWindowPromise } from '@/keys'; -import { inject, onMounted, provide, ref, watch } from 'vue'; +import { computed, inject, onMounted, provide, ref, watch } from 'vue'; /** * InfoWindow component @@ -80,12 +81,6 @@ const mapPromise = props.mapKey google.maps.Map | undefined >); -const markerPromise = props.markerKey - ? inject>( - props.markerKey, - ) - : undefined; - if (!mapPromise) { throw new Error('The map promise was not built'); } @@ -102,16 +97,17 @@ provide(props.infoWindowKey || $infoWindowPromise, promise); ******************************************************************************/ defineOptions({ name: 'info-window' }); const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.(); -let map: google.maps.Map | undefined; -let markerOwner: google.maps.marker.AdvancedMarkerElement | undefined; +let rawMap: google.maps.Map | undefined; +let rawMarkerOwner: google.maps.marker.AdvancedMarkerElement | undefined; mapPromise ?.then(async (mapInstance) => { if (!mapInstance) { throw new Error('the map instance is not defined'); } - map = mapInstance; + rawMap = mapInstance; + const markerPromise = useMarkerPromise(props.markerKey); const infoWindowOptions: Partial & { map: google.maps.Map | undefined; [key: string]: any; @@ -123,14 +119,14 @@ mapPromise if (markerPromise) { markerPromise.then((markerInstance) => { - markerOwner = markerInstance; + rawMarkerOwner = markerInstance; }); } const { InfoWindow } = (await google.maps.importLibrary( 'maps', )) as google.maps.MapsLibrary; - const infoWindowInstance = new InfoWindow({ + const infoWindow = new InfoWindow({ ...infoWindowOptions, content: gmvInfoWindow.value, }); @@ -143,14 +139,14 @@ mapPromise bindPropsWithGoogleMapsSettersAndGettersOnSetup( infoWindowPropsConfig, - infoWindowInstance, + infoWindow, emits as any, props, ); bindGoogleMapsEventsToVueEventsOnSetup( infoWindowEventsConfig, - infoWindowInstance, + infoWindow, emits as any, excludedEvents, ); @@ -161,7 +157,7 @@ mapPromise throw new Error('infoWindowPromiseDeferred.resolve is undefined'); } - infoWindowPromiseDeferred.resolve(infoWindowInstance); + infoWindowPromiseDeferred.resolve(infoWindow); }) .catch((error) => { throw error; @@ -170,6 +166,8 @@ mapPromise /******************************************************************************* * COMPUTED ******************************************************************************/ +const map = computed(() => rawMap); +const markerOwner = computed(() => rawMarkerOwner); /******************************************************************************* * METHODS @@ -178,16 +176,16 @@ const openInfoWindow = async (): Promise => { const infoWindow = await promise; if (!infoWindow) { - return console.error('the info window is not defined'); + return console.error('the info window instance is not defined'); } if (props.opened) { - if (markerOwner) { - infoWindow.open(map, markerOwner); + if (markerOwner.value) { + infoWindow.open(map.value, markerOwner.value); } else if (props.marker) { - infoWindow.open(map, props.marker); + infoWindow.open(map.value, props.marker); } else { - infoWindow.open(map); + infoWindow.open(map.value); } } else { infoWindow.close(); diff --git a/packages/v3/src/components/marker-icon.vue b/packages/v3/src/components/marker-icon.vue index 1507bd2f0..ffef4cf5d 100644 --- a/packages/v3/src/components/marker-icon.vue +++ b/packages/v3/src/components/marker-icon.vue @@ -6,6 +6,7 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useClusterPromise, useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, @@ -13,7 +14,7 @@ import { import type { IMarkerIconVueComponentProps } from '@/interfaces'; import { $markerPromise } from '@/keys'; import type { MarkerClusterer } from '@googlemaps/markerclusterer'; -import { h, inject, onUnmounted, provide, useSlots } from 'vue'; +import { computed, h, inject, onUnmounted, provide, useSlots } from 'vue'; /** * Marker component @@ -72,20 +73,20 @@ const mapPromise = props.mapKey google.maps.Map | undefined >); -const clusterPromise = props.clusterKey - ? inject>(props.clusterKey) - : (findParentInstanceByName('cluster-icon')?.exposed - ?.clusterPromise as Promise); - -let clusterOwner: MarkerClusterer | undefined; - if (!mapPromise) { throw new Error('The map promise was not built'); } +const clusterPromise = props.clusterKey + ? useClusterPromise(props.clusterKey) + : (findParentInstanceByName('cluster-icon')?.exposed?.clusterPromise as + | Promise + | undefined); + /******************************************************************************* * PROVIDE ******************************************************************************/ +let rawClusterOwner: MarkerClusterer | undefined; const { promiseDeferred: markerPromiseDeferred, promise } = useComponentPromiseFactory(props.markerKey || $markerPromise); provide(props.markerKey || $markerPromise, promise); @@ -163,7 +164,7 @@ mapPromise if (clusterPromise) { clusterPromise.then((clusterInstance) => { clusterInstance?.addMarker(marker); - clusterOwner = clusterInstance; + rawClusterOwner = clusterInstance; }); } @@ -180,6 +181,12 @@ mapPromise /******************************************************************************* * COMPUTED ******************************************************************************/ +const clusterOwner = computed({ + get: () => rawClusterOwner, + set: (val) => { + rawClusterOwner = val; + }, +}); /******************************************************************************* * METHODS @@ -199,11 +206,11 @@ onUnmounted(async () => { return console.error('the marker instance is not defined'); } - if (clusterOwner) { + if (clusterOwner.value) { // Repaint will be performed in `updated()` of cluster - clusterOwner.removeMarker(marker, true); + clusterOwner.value.removeMarker(marker, true); /* Performance optimization when destroying a large number of markers */ - clusterOwner = undefined; + clusterOwner.value = undefined; } else if (marker) { marker.map = null; }