From 2b395dbc815888cb555f77f068c54fbcc35a1a22 Mon Sep 17 00:00:00 2001 From: Pascal Roehling Date: Fri, 19 Apr 2024 21:29:05 +0200 Subject: [PATCH 1/3] Update initiallyOpen mechanism by adding new core state value Also, move watcher to store. --- packages/core/CHANGELOG.md | 4 ++++ .../src/utils/createMap/updateSizeOnReady.ts | 2 ++ packages/core/src/vuePlugins/vuex.ts | 1 + .../plugins/IconMenu/src/components/IconMenu.vue | 12 ------------ packages/plugins/IconMenu/src/store/index.ts | 16 +++++++++++++++- packages/types/custom/CHANGELOG.md | 1 + packages/types/custom/core.ts | 2 ++ 7 files changed, 25 insertions(+), 13 deletions(-) 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..c610af0aa 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: null, }) // OK for store creation 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..3dfca4369 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 | null moveHandle: number moveHandleActionButton: number plugin: object @@ -665,6 +666,7 @@ export interface CoreGetters { hovered: Feature | null errors: PolarError[] map: Map + mapHasDimensions: boolean | null moveHandle: MoveHandleProperties moveHandleActionButton: MoveHandleActionButton selected: Feature | null From 7804ed76b3289563f1a9fb1a7bf8bef9d9de930c Mon Sep 17 00:00:00 2001 From: Pascal Roehling Date: Fri, 19 Apr 2024 21:33:55 +0200 Subject: [PATCH 2/3] Fix tests by adding missing new state parameter --- packages/lib/testMountParameters/CHANGELOG.md | 4 ++++ packages/lib/testMountParameters/index.ts | 1 + 2 files changed, 5 insertions(+) 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..8e718a654 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: null, zoomLevel: 0, hovered: 0, selected: 0, From 6710452caabbe2dd14f69b9f1a9c0dc5cb000092 Mon Sep 17 00:00:00 2001 From: Pascal Roehling Date: Mon, 6 May 2024 18:19:53 +0200 Subject: [PATCH 3/3] Change mapHasDimensions to only be a boolean, initially being false --- packages/core/src/vuePlugins/vuex.ts | 2 +- packages/lib/testMountParameters/index.ts | 2 +- packages/types/custom/core.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/src/vuePlugins/vuex.ts b/packages/core/src/vuePlugins/vuex.ts index c610af0aa..6560a843a 100644 --- a/packages/core/src/vuePlugins/vuex.ts +++ b/packages/core/src/vuePlugins/vuex.ts @@ -74,7 +74,7 @@ const getInitialState = (): CoreState => ({ hasSmallDisplay: false, errors: [], language: '', - mapHasDimensions: null, + mapHasDimensions: false, }) // OK for store creation diff --git a/packages/lib/testMountParameters/index.ts b/packages/lib/testMountParameters/index.ts index 8e718a654..f6938b551 100644 --- a/packages/lib/testMountParameters/index.ts +++ b/packages/lib/testMountParameters/index.ts @@ -61,7 +61,7 @@ export default (): MockParameters => { moveHandleActionButton: 0, plugin: {}, language: '', - mapHasDimensions: null, + mapHasDimensions: false, zoomLevel: 0, hovered: 0, selected: 0, diff --git a/packages/types/custom/core.ts b/packages/types/custom/core.ts index 3dfca4369..7d61057eb 100644 --- a/packages/types/custom/core.ts +++ b/packages/types/custom/core.ts @@ -648,7 +648,7 @@ export interface CoreState { hovered: number language: string map: number - mapHasDimensions: boolean | null + mapHasDimensions: boolean moveHandle: number moveHandleActionButton: number plugin: object @@ -666,7 +666,7 @@ export interface CoreGetters { hovered: Feature | null errors: PolarError[] map: Map - mapHasDimensions: boolean | null + mapHasDimensions: boolean moveHandle: MoveHandleProperties moveHandleActionButton: MoveHandleActionButton selected: Feature | null