From 3debcd29f22ec17e6f3e1acc085b277be640511c Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Wed, 4 Dec 2024 08:21:53 +0800
Subject: [PATCH] feat: implement auto-z-index directive and update z-index
 values across components

---
 src/renderer/Main.vue                         |  2 +-
 src/renderer/components/ContextMenu.vue       |  4 +-
 src/renderer/components/ControlCenter.vue     |  3 +-
 src/renderer/components/FixedFloat.vue        |  2 +-
 src/renderer/components/KeyboardShortcuts.vue |  2 +-
 src/renderer/components/Mask.vue              | 53 +++---------------
 src/renderer/components/Premium.vue           |  2 +-
 src/renderer/components/StatusBarMenu.vue     |  2 +-
 src/renderer/components/TitleBar.vue          |  2 +-
 src/renderer/components/Toast.vue             |  2 +-
 src/renderer/directives/auto-z-index.ts       | 56 +++++++++++++++++++
 src/renderer/directives/index.ts              |  4 +-
 src/renderer/plugins/drop-to-open-file.ts     |  2 +-
 src/renderer/plugins/image-viewer.tsx         |  2 +-
 src/renderer/plugins/status-bar-premium.ts    |  2 +-
 src/renderer/services/export.ts               |  2 +-
 16 files changed, 82 insertions(+), 60 deletions(-)
 create mode 100644 src/renderer/directives/auto-z-index.ts

diff --git a/src/renderer/Main.vue b/src/renderer/Main.vue
index b27bce75..98ce8d91 100644
--- a/src/renderer/Main.vue
+++ b/src/renderer/Main.vue
@@ -145,7 +145,7 @@ export default defineComponent({
 
 .presentation-exit {
   position: fixed;
-  z-index: 99999;
+  z-index: 210000000;
   bottom: 6px;
   left: 6px;
   padding: 10px;
diff --git a/src/renderer/components/ContextMenu.vue b/src/renderer/components/ContextMenu.vue
index 60e50c22..9e9b66dc 100644
--- a/src/renderer/components/ContextMenu.vue
+++ b/src/renderer/components/ContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <XMask transparent :show="items && items.length > 0" @close="hide" :style="{ zIndex: 2147483646 }">
+  <XMask transparent :show="items && items.length > 0" @close="hide" layer="context-menu">
     <ul :class="{menu: true, 'item-focus': itemFocus}" ref="refMenu" @contextmenu.prevent tabindex="-1" v-auto-focus>
       <template v-for="(item, i) in items">
         <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type" />
@@ -175,7 +175,7 @@ export default defineComponent({
   border: 1px var(--g-color-84) solid;
   border-left: 0;
   border-top: 0;
-  z-index: 2147483647;
+  z-index: 1000;
   color: var(--g-foreground-color);
   min-width: 9em;
   cursor: default;
diff --git a/src/renderer/components/ControlCenter.vue b/src/renderer/components/ControlCenter.vue
index c9988ce9..f71f51c9 100644
--- a/src/renderer/components/ControlCenter.vue
+++ b/src/renderer/components/ControlCenter.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div v-if="visible && schema" class="control-center" v-fixed-float="{ onClose: (byClickSelf: any) => !byClickSelf && toggle(false) }">
+    <div v-if="visible && schema" class="control-center" v-fixed-float="{ onClose: (byClickSelf: any) => !byClickSelf && toggle(false) }" v-auto-z-index="{ layer: 'popup' }">
       <div v-for="(row, category) in schema" :key="category" class="row">
         <template v-for="(item, i) in row?.items" :key="i">
           <div
@@ -82,7 +82,6 @@ onBeforeUnmount(() => {
   position: fixed;
   right: 14px;
   top: 36px;
-  z-index: 1000;
   outline: none;
   background: var(--g-color-backdrop);
   backdrop-filter: var(--g-backdrop-filter);
diff --git a/src/renderer/components/FixedFloat.vue b/src/renderer/components/FixedFloat.vue
index 07724554..49394d97 100644
--- a/src/renderer/components/FixedFloat.vue
+++ b/src/renderer/components/FixedFloat.vue
@@ -7,6 +7,7 @@
         onBlur: (byClickSelf: any) => emits('blur', byClickSelf),
         disableAutoFocus: props.disableAutoFocus
       }"
+      v-auto-z-index="{ layer: 'popup' }"
       @click.stop
       v-bind="$attrs"
       :style="{
@@ -56,6 +57,5 @@ const emits = defineEmits<{
   border-radius: var(--g-border-radius);
   overflow: hidden;
   backdrop-filter: var(--g-backdrop-filter);
-  z-index: 9999999;
 }
 </style>
diff --git a/src/renderer/components/KeyboardShortcuts.vue b/src/renderer/components/KeyboardShortcuts.vue
index 08bcb006..9b30851f 100644
--- a/src/renderer/components/KeyboardShortcuts.vue
+++ b/src/renderer/components/KeyboardShortcuts.vue
@@ -534,7 +534,7 @@ table {
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 900000;
+  z-index: 210000000;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/renderer/components/Mask.vue b/src/renderer/components/Mask.vue
index 76d02bf6..3c5cb1f5 100644
--- a/src/renderer/components/Mask.vue
+++ b/src/renderer/components/Mask.vue
@@ -1,7 +1,7 @@
 <template>
   <teleport to="body">
     <transition name="fade">
-      <div v-if="show" :class="{'mask-wrapper': true, transparent}" :style="wrapperStyle">
+      <div v-if="show" :class="{'mask-wrapper': true, transparent}" :style="style" v-auto-z-index="{ layer, onEsc }">
         <div class="mask" @click="() => maskCloseable && $emit('close')" @contextmenu.prevent.stop="$emit('close')" />
         <div class="content">
           <slot></slot>
@@ -12,11 +12,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { registerHook, removeHook } from '@fe/core/hook'
-
-let zIndex = 199998
-const maskStack: number[] = []
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'x-mask',
@@ -38,50 +34,20 @@ export default defineComponent({
       type: [Object, String],
       default: () => ({}),
     },
+    layer: {
+      type: String as () => 'popup' | 'context-menu' | 'max',
+      default: 'popup'
+    },
   },
   emits: ['close'],
   setup (props, { emit }) {
-    const zIndexRef = ref(zIndex++)
-
-    function keydownHandler (e: KeyboardEvent) {
-      if (e.key === 'Escape' && props.show) {
-        // close top mask
-        if (!maskStack.includes(zIndexRef.value) || Math.max(...maskStack) !== zIndexRef.value) {
-          return
-        }
-
+    function onEsc () {
+      if (props.show) {
         props.escCloseable && emit('close')
-        e.stopPropagation()
       }
     }
 
-    watch(() => props.show, (val) => {
-      if (val) {
-        maskStack.push(zIndexRef.value)
-      } else {
-        maskStack.splice(maskStack.indexOf(zIndexRef.value), 1)
-      }
-    }, { immediate: true, flush: 'post' })
-
-    watch(() => props.show, (val) => {
-      if (val) {
-        zIndex++
-        zIndexRef.value = zIndex
-      }
-    })
-
-    const wrapperStyle = computed(() => (typeof props.style === 'string' ? props.style : { zIndex: zIndexRef.value, ...props.style }))
-
-    onMounted(() => {
-      registerHook('GLOBAL_KEYDOWN', keydownHandler)
-    })
-
-    onBeforeUnmount(() => {
-      removeHook('GLOBAL_KEYDOWN', keydownHandler)
-      maskStack.splice(maskStack.indexOf(zIndexRef.value), 1)
-    })
-
-    return { wrapperStyle }
+    return { onEsc }
   },
 })
 </script>
@@ -93,7 +59,6 @@ export default defineComponent({
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 199998;
   padding-top: 6em;
 }
 
diff --git a/src/renderer/components/Premium.vue b/src/renderer/components/Premium.vue
index 30248f44..1a1dbe61 100644
--- a/src/renderer/components/Premium.vue
+++ b/src/renderer/components/Premium.vue
@@ -283,7 +283,7 @@ export default defineComponent({
           particleCount: 150,
           spread: 100,
           origin: { y: 0.6 },
-          zIndex: Number.MAX_SAFE_INTEGER,
+          zIndex: 2.1e8,
         })
       }
     }
diff --git a/src/renderer/components/StatusBarMenu.vue b/src/renderer/components/StatusBarMenu.vue
index 4ebd4d88..aadf74c2 100644
--- a/src/renderer/components/StatusBarMenu.vue
+++ b/src/renderer/components/StatusBarMenu.vue
@@ -103,7 +103,7 @@ export default defineComponent({
 .status-bar-menu {
   cursor: pointer;
   user-select: none;
-  z-index: 99999999;
+  z-index: 300000;
   position: relative;
   overflow-x: hidden;
   font-variant-numeric: tabular-nums;
diff --git a/src/renderer/components/TitleBar.vue b/src/renderer/components/TitleBar.vue
index ff757153..833af6e3 100644
--- a/src/renderer/components/TitleBar.vue
+++ b/src/renderer/components/TitleBar.vue
@@ -252,7 +252,7 @@ export default defineComponent({
   -webkit-user-select: none;
   -webkit-app-region: drag;
   position: relative;
-  z-index: 199999;
+  z-index: 8000000;
 }
 
 .resizer {
diff --git a/src/renderer/components/Toast.vue b/src/renderer/components/Toast.vue
index 349807ff..4789df44 100644
--- a/src/renderer/components/Toast.vue
+++ b/src/renderer/components/Toast.vue
@@ -61,7 +61,7 @@ export default defineComponent({
   left: 0;
   top: 100px;
   padding: 10px 20px;
-  z-index: 999999;
+  z-index: 200000000;
   right: 0;
   margin: auto;
   border-radius: 50px;
diff --git a/src/renderer/directives/auto-z-index.ts b/src/renderer/directives/auto-z-index.ts
new file mode 100644
index 00000000..af9a366d
--- /dev/null
+++ b/src/renderer/directives/auto-z-index.ts
@@ -0,0 +1,56 @@
+import { App } from 'vue'
+import { registerHook, removeHook } from '@fe/core/hook'
+
+let globalZIndex = 0
+const stack: number[] = []
+
+const layers = {
+  popup: 2e5,
+  'context-menu': 9e6,
+  max: 2e8,
+}
+
+export function install (app: App) {
+  const getKeydownHandler = (zIndex: number, onEsc: () => void) => (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      // close top layer
+      if (!stack.includes(zIndex) || Math.max(...stack) !== zIndex) {
+        return
+      }
+
+      onEsc()
+      e.stopPropagation()
+    }
+  }
+
+  app.directive('auto-z-index', {
+    mounted (el: HTMLElement, binding) {
+      const value: { layer: keyof typeof layers, onEsc?: () => void } = binding.value
+      const layer = value.layer || 'popup'
+      const baseZIndex = layers[layer] || layers.popup
+
+      const zIndex = baseZIndex + globalZIndex++
+      ;(el as any)._autoZIndex = zIndex
+      stack.push(zIndex)
+      el.style.zIndex = zIndex.toString()
+
+      const globalKeydownHandler = value.onEsc && getKeydownHandler(zIndex, value.onEsc)
+      if (globalKeydownHandler) {
+        registerHook('GLOBAL_KEYDOWN', globalKeydownHandler)
+        ;(el as any)._autoZIndexKeydownHandler = globalKeydownHandler
+      }
+    },
+    beforeUnmount: (el: HTMLElement) => {
+      const zIndex = (el as any)._autoZIndex
+      const index = stack.indexOf(zIndex)
+      if (index !== -1) {
+        stack.splice(index, 1)
+      }
+
+      const keydownHandler = (el as any)._autoZIndexKeydownHandler
+      if (keydownHandler) {
+        removeHook('GLOBAL_KEYDOWN', keydownHandler)
+      }
+    }
+  })
+}
diff --git a/src/renderer/directives/index.ts b/src/renderer/directives/index.ts
index d24f3db8..d18b906a 100644
--- a/src/renderer/directives/index.ts
+++ b/src/renderer/directives/index.ts
@@ -5,8 +5,9 @@ import * as placeholder from './placeholder'
 import * as upDownHistory from './up-down-history'
 import * as fixedFloat from './fixed-float'
 import * as textareaOnEnter from './textarea-on-enter'
+import * as autoZIndex from './auto-z-index'
 
-export { autoFocus, autoResize, placeholder, upDownHistory, fixedFloat, textareaOnEnter }
+export { autoFocus, autoResize, placeholder, upDownHistory, fixedFloat, textareaOnEnter, autoZIndex }
 
 export default function (app: App) {
   autoFocus.install(app)
@@ -15,4 +16,5 @@ export default function (app: App) {
   upDownHistory.install(app)
   fixedFloat.install(app)
   textareaOnEnter.install(app)
+  autoZIndex.install(app)
 }
diff --git a/src/renderer/plugins/drop-to-open-file.ts b/src/renderer/plugins/drop-to-open-file.ts
index 38c38662..054c73f4 100644
--- a/src/renderer/plugins/drop-to-open-file.ts
+++ b/src/renderer/plugins/drop-to-open-file.ts
@@ -82,7 +82,7 @@ export default {
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.2);
-        z-index: 99999999;
+        z-index: 210000000;
       }
     `)
   }
diff --git a/src/renderer/plugins/image-viewer.tsx b/src/renderer/plugins/image-viewer.tsx
index 9eb8ce0d..005c8a92 100644
--- a/src/renderer/plugins/image-viewer.tsx
+++ b/src/renderer/plugins/image-viewer.tsx
@@ -87,7 +87,7 @@ export default {
     ctx.registerHook('VIEW_MOUNTED', () => {
       setTimeout(() => {
         const viewer = new Viewer(ctx.view.getViewDom()!, {
-          zIndex: 299999,
+          zIndex: 2.11e8,
           container: document.body,
           transition: false,
           toolbar: {
diff --git a/src/renderer/plugins/status-bar-premium.ts b/src/renderer/plugins/status-bar-premium.ts
index 80a629b8..5b06a171 100644
--- a/src/renderer/plugins/status-bar-premium.ts
+++ b/src/renderer/plugins/status-bar-premium.ts
@@ -14,7 +14,7 @@ export default {
           particleCount: 150,
           spread: 100,
           origin: { y: 0.6 },
-          zIndex: Number.MAX_SAFE_INTEGER,
+          zIndex: 2.1e8,
         })
       }
     }
diff --git a/src/renderer/services/export.ts b/src/renderer/services/export.ts
index 46dfe358..c890cd4d 100644
--- a/src/renderer/services/export.ts
+++ b/src/renderer/services/export.ts
@@ -90,7 +90,7 @@ export async function printCurrentDocumentToPDF (opts?: PrintOpts): Promise<Buff
   const id = '__export_pdf__' + Date.now()
   const url = buildSrc(`
     <style> @media screen { html { overflow: hidden; min-width: 16cm; } } </style>
-    <div class="skip-print" style="position: fixed; left: 0; top: 0; width: 100vw; height: 100%; z-index: 99999; background: #fff; color: #24292f; display: flex; align-items: center; justify-content: center;">Exporting……</div>
+    <div class="skip-print" style="position: fixed; left: 0; top: 0; width: 100vw; height: 100%; z-index: 210000000; background: #fff; color: #24292f; display: flex; align-items: center; justify-content: center;">Exporting……</div>
     <div id="app"></div>
   `, 'Export PDF', { id, globalStyle: true })