feat(zIndexManager): rearrange zindex after many zindex updates

packages/common/Popover/src/PopoverContent.js

@@ -133,9 +133,6 @@ export default {
   mounted () {
     if (this.active) {
       this.$parent.transferElement()
-      // this.$nextTick().then(() => {
-      //   this.updatePosition()
-      // })
     }
     if (this.controller) {
       this.controller.updatePosition = this.updatePosition
@@ -184,24 +181,20 @@ export default {
       if (this.triggeredByHover) {
         if (!this.active) return
         this.cancelVanishTimer()
-        // console.log('[PopoverContent.handleMouseLeave]')
         const activator = this.activator()
         activator.vanishTimerId = window.setTimeout(() => {
           if (activator && activator.$el) {
             const activatorEl = activator.$el
             if (activatorEl.contains(e.target)) {
-              // console.log('[PopoverContent.handleMouseLeave] move on activator, do nothing')
               return
             }
           }
-          // console.log('[PopoverContent.handleMouseLeave] move on outside, close the popover')
           activator.vanishTimerId = null
           this.deactivate()
         }, this.duration)
       }
     },
     handleMouseMoveOutside (e) {
-      // console.log('[PopoverContent.handleMouseMoveOutside')
       if (this.triggeredByHover) {
         this.handleMouseLeave(e)
       }
@@ -212,20 +205,16 @@ export default {
         if (activator && activator.$el) {
           const activatorEl = activator.$el
           if (activatorEl.contains(e.target)) {
-            // console.log('[PopoverContent.handleClickOutside] click at activator, do nothing')
             return
           }
         }
-        // console.log('[PopoverContent.handleClickOutside] click at outside, close the popover')
         this.deactivate()
       }
     },
     getTrackingElement () {
-      // console.log('getTrackingElement', this.activator().$el)
       return this.$refs.content
     },
     getTrackedElement () {
-      // console.log('getTrackedEleme')
       return this.activator().$el
     },
     getZindexableContent () {
@@ -233,7 +222,6 @@ export default {
     }
   },
   render (h) {
-    // console.log('render popover content', this.$props)
     return h('div', {
       staticClass: 'n-detached-content-container',
       class: {

packages/common/Popover/src/activatorMixin.js

@@ -63,15 +63,12 @@ export default {
     }
   },
   mounted () {
-    // console.log('[Activator.mounted] id', this.id)
-    // console.log('[Activator.mounted] active', this.active)
     this.registerListeners()
     if (this.controller) {
       this.controller.show = this.activate
       this.controller.hide = this.deactivate
     }
   },
-  beforeUpdate () {},
   updated () {
     this.registerListeners()
     if (this.controller) {

packages/utils/dom/zIndexManager.js

@@ -22,6 +22,7 @@ class ZIndexManager {
       this.elementZIndex.set(el, this.nextZIndex)
       this.nextZIndex++
     }
+    this.afterManipulation()
   }
   setNewZIndex (el) {
     console.debug('[ZIndexManager.setNewZIndex]: called')
@@ -37,6 +38,7 @@ class ZIndexManager {
     } else {
       console.debug('[ZIndexManager.setNewZIndex]: element not found, please register it first')
     }
+    this.afterManipulation()
   }
   unregisterElement (el) {
     console.debug('[ZIndexManager.unregisterElement]: called')
@@ -44,11 +46,27 @@ class ZIndexManager {
       console.debug('[ZIndexManager.unregisterElement]: successfully delete $el') //, el)
       this.elementZIndex.delete(el)
     } else {
-      console.log('[ZIndexManager.unregisterElement]: element not found')
+      console.error('[ZIndexManager.unregisterElement]: element not found')
     }
+    this.afterManipulation()
+  }
+  afterManipulation () {
     if (!this.elementCount) {
       this.nextZIndex = 2000
     }
+    if (this.nextZIndex - this.elementCount > 2500) this.rearrangeZIndex()
+  }
+  rearrangeZIndex () {
+    const elementZIndexPair = Array.from(this.elementZIndex.entries())
+    elementZIndexPair.sort((pair1, pair2) => {
+      return pair1[1] - pair2[1]
+    })
+    this.nextZIndex = 2000
+    elementZIndexPair.forEach(pair => {
+      const el = pair[0]
+      const zIndex = this.nextZIndex++
+      if (zIndex !== el.style.zIndex) el.style.zIndex = zIndex
+    })
   }
 }