Merge pull request #127 from Dataport/fix/icon-menu-initially-open-prod

Fix initiallyOpen not working in prod mode

Author: dopenguin

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.

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)

packages/core/src/vuePlugins/vuex.ts

@@ -74,6 +74,7 @@ const getInitialState = (): CoreState => ({
   hasSmallDisplay: false,
   errors: [],
   language: '',
+  mapHasDimensions: false,
 })
 
 // OK for store creation

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.

packages/lib/testMountParameters/index.ts

@@ -61,6 +61,7 @@ export default (): MockParameters => {
       moveHandleActionButton: 0,
       plugin: {},
       language: '',
+      mapHasDimensions: false,
       zoomLevel: 0,
       hovered: 0,
       selected: 0,

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) {

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)

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

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