@netless/telebox-insider 0.3.0-beta.4 → 0.3.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.0-beta.4",
+  "version": "0.3.0-beta.5",
   "private": false,
   "description": "Window widget for Whiteboard",
   "author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",

package/src/TeleBoxManager/index.ts

@@ -49,6 +49,14 @@ export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
 export class TeleBoxManager {
     private boxesStatus$: Map<string, TeleBoxState>;
     private lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
+    private effectBoxStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+    }
+    private effectLastNotMinimizedBoxStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+    }
 
     public constructor({
         root = document.body,
@@ -479,7 +487,9 @@ export class TeleBoxManager {
         this.effectBoxStatusChange(skipUpdate);
     }
 
-    private effectBoxStatusChange(skipUpdate = false){
+
+    private effectBoxStatusTimerFunc(skipUpdate: boolean){
+        this.effectBoxStatusTimer = undefined;
         let topBox:TeleBox | undefined;
         const topBoxId = this.topBox?.id;
         let hasMinimizedBox = false;
@@ -513,6 +523,31 @@ export class TeleBoxManager {
         if (this.maxTitleBar) {
             this.maxTitleBar.updateBoxesStatus();
         }
+        console.log("effectBoxStatusTimerFunc===>end", skipUpdate, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex})));
+    }
+
+    private effectBoxStatusChange(skipUpdate = false){
+        if (this.effectBoxStatusTimer && this.effectBoxStatusTimer.timer) {
+            clearTimeout(this.effectBoxStatusTimer.timer);
+            if (this.effectBoxStatusTimer.skipUpdate !== skipUpdate) {
+                this.effectBoxStatusTimer.skipUpdate = skipUpdate;
+                console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
+                this.effectBoxStatusTimerFunc(this.effectBoxStatusTimer.skipUpdate)
+            }
+        }
+        if (!this.effectBoxStatusTimer) {
+            this.effectBoxStatusTimer = {
+                skipUpdate,
+                timer: undefined,
+            } as {
+                skipUpdate: boolean;
+                timer: number | undefined;
+            }
+        }
+        console.log("effectBoxStatusTimerFunc===>000", skipUpdate, {id:this.topBox$.value?.id, zIndex:this.topBox$.value?.zIndex}, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex})));
+        this.effectBoxStatusTimer.timer = setTimeout(()=>{
+            this.effectBoxStatusTimerFunc(skipUpdate)
+        }, 100) as unknown as number;
     }
     
     public hasBoxesStatus(): boolean {
@@ -961,10 +996,25 @@ export class TeleBoxManager {
     protected makeBoxTop(box: TeleBox, skipUpdate = false): void {
         if (this.topBox) {
             if (box !== this.topBox) {
-                const currentBoxZIndex = box.zIndex;
-                const addZIndex = this.topBox.zIndex + 1 - box.zIndex;
-                box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
-                this.makeTopBoxEffect(box.id, addZIndex, currentBoxZIndex, skipUpdate);
+                if (!this.hasBoxesStatus()) {
+                    box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
+                    return;
+                }
+                const maxZIndex = this.boxes.reduce((maxZIndex, box) => {
+                    return Math.max(maxZIndex, box.zIndex);
+                }, 0);
+                const currentTopBoxZIndex = Math.min(this.topBox.zIndex, box.zIndex);
+                const addZIndex = maxZIndex + 1 - currentTopBoxZIndex;
+                box.setZIndex(maxZIndex + 1, skipUpdate);
+                console.log("makeBoxTop===>", box.id, maxZIndex + 1, addZIndex, this.topBox.id, currentTopBoxZIndex);
+                if (box.boxStatus !== TELE_BOX_STATE.Minimized) {
+                    this.boxes.forEach((b) => {
+                        if (b.boxStatus === TELE_BOX_STATE.Minimized && b.zIndex >= currentTopBoxZIndex) {
+                            console.log("makeBoxTop===>111", b.id, b.zIndex + addZIndex);
+                            b.setZIndex(b.zIndex + addZIndex, skipUpdate);
+                        }
+                    });
+                }
             }
         }
     }
@@ -984,16 +1034,6 @@ export class TeleBoxManager {
         }
     }
 
-    private makeTopBoxEffect(boxId: string, addZIndex: number, currentZIndex: number, skipUpdate = false): void {
-        if (this.hasBoxesStatus() && this.hasMinimizedBox()) {
-            this.boxes.forEach((b) => {
-                if (b.boxStatus && b.id !== boxId && b.zIndex >= currentZIndex) {
-                    b.setZIndex(b.zIndex + addZIndex, skipUpdate);
-                }
-            });
-        }
-    }
-
     protected makeMaximizedBoxFocus(maximizedBox: MaxTitleBarTeleBox, skipUpdate = false): void {
         if (this.maxTitleBar.hasMaximizedBoxInStatus() && this.maxTitleBar.MaximizedBoxes.find((box) => box.id === maximizedBox.id)) {
             const currentZIndex = maximizedBox.zIndex;