diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 03a6b1329..08741e69a 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## unpublished + +- Feature: Add new state parameter `mapHasDimensions` to let plugins have a "hook" to react on when the map is ready. + ## 1.4.1 - Feature: Additionally export `PolarCore` type. diff --git a/packages/core/src/utils/createMap/updateSizeOnReady.ts b/packages/core/src/utils/createMap/updateSizeOnReady.ts index 1d2faeaf3..94dc14aca 100644 --- a/packages/core/src/utils/createMap/updateSizeOnReady.ts +++ b/packages/core/src/utils/createMap/updateSizeOnReady.ts @@ -20,12 +20,14 @@ export const updateSizeOnReady = (instance: Vue) => { console.error( `@polar/core: The POLAR map client could not update its size. The map is probably invisible due to having 0 width or 0 height. This might be a CSS issue – please check the wrapper's size.` ) + instance.$store.commit('setMapHasDimensions', false) } else { // OL prints warnings – add this log to reduce confusion // eslint-disable-next-line no-console console.log( `@polar/core: The map now has dimensions and can be rendered.` ) + instance.$store.commit('setMapHasDimensions', true) clearInterval(intervalId) } }, 0) diff --git a/packages/core/src/vuePlugins/vuex.ts b/packages/core/src/vuePlugins/vuex.ts index 3b94c3124..6560a843a 100644 --- a/packages/core/src/vuePlugins/vuex.ts +++ b/packages/core/src/vuePlugins/vuex.ts @@ -74,6 +74,7 @@ const getInitialState = (): CoreState => ({ hasSmallDisplay: false, errors: [], language: '', + mapHasDimensions: false, }) // OK for store creation diff --git a/packages/lib/testMountParameters/CHANGELOG.md b/packages/lib/testMountParameters/CHANGELOG.md index 91d704261..ccfedc1a2 100644 --- a/packages/lib/testMountParameters/CHANGELOG.md +++ b/packages/lib/testMountParameters/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## unpublished + +- Feature: Extend mock state to match current core state type. + ## 1.2.1 - Fix: Test now uses a mock EPSG code instead of an empty string. diff --git a/packages/lib/testMountParameters/index.ts b/packages/lib/testMountParameters/index.ts index aa42e8b61..f6938b551 100644 --- a/packages/lib/testMountParameters/index.ts +++ b/packages/lib/testMountParameters/index.ts @@ -61,6 +61,7 @@ export default (): MockParameters => { moveHandleActionButton: 0, plugin: {}, language: '', + mapHasDimensions: false, zoomLevel: 0, hovered: 0, selected: 0, diff --git a/packages/plugins/IconMenu/src/components/IconMenu.vue b/packages/plugins/IconMenu/src/components/IconMenu.vue index 5df4ad784..b4942e564 100644 --- a/packages/plugins/IconMenu/src/components/IconMenu.vue +++ b/packages/plugins/IconMenu/src/components/IconMenu.vue @@ -68,7 +68,6 @@ export default Vue.extend({ computed: { ...mapGetters([ 'clientHeight', - 'clientWidth', 'hasSmallDisplay', 'hasSmallHeight', 'hasSmallWidth', @@ -97,17 +96,6 @@ export default Vue.extend({ }, }, watch: { - // The map initially has a height of 0, so initially opening a menu only works after the height has changed - clientHeight(newValue: number, oldValue: number) { - if ( - oldValue === 0 && - newValue > 0 && - !this.hasSmallHeight && - !this.hasSmallWidth - ) { - this.openMenuById(this.initiallyOpen) - } - }, // Fixes an issue if the orientation of a mobile device is changed while a plugin is open isHorizontal(newVal: boolean) { if (!newVal) { diff --git a/packages/plugins/IconMenu/src/store/index.ts b/packages/plugins/IconMenu/src/store/index.ts index addbae4d9..cf9ab2dd3 100644 --- a/packages/plugins/IconMenu/src/store/index.ts +++ b/packages/plugins/IconMenu/src/store/index.ts @@ -18,7 +18,7 @@ export const makeStoreModule = () => { namespaced: true, state: getInitialState(), actions: { - setupModule({ commit, rootGetters }): void { + setupModule({ commit, dispatch, getters, rootGetters }): void { const menus = rootGetters.configuration?.iconMenu?.menus || [] const initializedMenus = menus .filter(({ id }) => { @@ -45,6 +45,20 @@ export const makeStoreModule = () => { }) commit('setMenus', initializedMenus) + + // The map initially has a height of 0, so initially opening a menu only works after the height has changed + this.watch( + () => rootGetters.mapHasDimensions, + (value) => { + if ( + value && + !rootGetters.hasSmallHeight && + !rootGetters.hasSmallWidth + ) { + dispatch('openMenuById', getters.initiallyOpen) + } + } + ) }, openMenuById({ commit, dispatch, getters }, openId: string) { const index = getters.menus.findIndex(({ id }) => id === openId) diff --git a/packages/types/custom/CHANGELOG.md b/packages/types/custom/CHANGELOG.md index bf2ba3460..8055d28a8 100644 --- a/packages/types/custom/CHANGELOG.md +++ b/packages/types/custom/CHANGELOG.md @@ -2,6 +2,7 @@ ## unpublished +- Feature: Add `mapHasDimensions` to `CoreState` and `CoreGetters`. - Fix: Add `string` as option for `SearchType` since arbitrary strings can be registered. ## 1.4.1 diff --git a/packages/types/custom/core.ts b/packages/types/custom/core.ts index dc8cdaa25..7d61057eb 100644 --- a/packages/types/custom/core.ts +++ b/packages/types/custom/core.ts @@ -648,6 +648,7 @@ export interface CoreState { hovered: number language: string map: number + mapHasDimensions: boolean moveHandle: number moveHandleActionButton: number plugin: object @@ -665,6 +666,7 @@ export interface CoreGetters { hovered: Feature | null errors: PolarError[] map: Map + mapHasDimensions: boolean moveHandle: MoveHandleProperties moveHandleActionButton: MoveHandleActionButton selected: Feature | null