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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.0-beta.3",
+  "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,
@@ -201,6 +209,7 @@ export class TeleBoxManager {
                                         this.setBoxStatus(box.id, TELE_BOX_STATE.Normal);
                                     }
                                 });
+                                this.effectBoxStatusChange();
                             }
                             minimized$.setValue(false);
                         }
@@ -323,6 +332,7 @@ export class TeleBoxManager {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
                         if (this.hasBoxesStatus() && this.maxTitleBar.focusedBox?.id) {
                             this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Normal);
+                            this.effectBoxStatusChange();
                             this.makeMaximizedTopBoxFocus();
                         } else {
                             maximized$.setValue(!maximized$.value);
@@ -332,6 +342,7 @@ export class TeleBoxManager {
                     case TELE_BOX_DELEGATE_EVENT.Minimize: {
                         if (this.hasBoxesStatus() && this.maxTitleBar.focusedBox?.id) {
                             this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Minimized);
+                            this.effectBoxStatusChange();
                             this.makeMaximizedTopBoxFocus();
                         } else {
                             minimized$.setValue(true);
@@ -435,32 +446,55 @@ export class TeleBoxManager {
     }
 
     public setBoxStatus(boxId: string, boxStatus?: TeleBoxState, skipUpdate = false): void {
-        const boxesStatus = this.boxesStatus$;
         if (boxStatus) {
-            const oldBoxStatus = boxesStatus.get(boxId);
-            boxesStatus.set(boxId, boxStatus);
+            const oldBoxStatus = this.boxesStatus$.get(boxId);
+            this.boxesStatus$.set(boxId, boxStatus);
             if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
                 this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
+                this.effectLastNotMinimizedBoxStatusChange();
             } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
                 this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
+                this.effectLastNotMinimizedBoxStatusChange();
             }
         } else {
-            boxesStatus.delete(boxId);
+            this.boxesStatus$.delete(boxId);
             this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
-        this.setBoxesStatus(boxesStatus, skipUpdate);
         if (!skipUpdate) {
             this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus});
         }
     }
 
+    public getBoxStatus(boxId: string): TeleBoxState | undefined {
+        return this.boxesStatus$.get(boxId);
+    }
+
+    public getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined {
+        return this.lastNotMinimizedBoxesStatus$.get(boxId);
+    }
+
+    public get boxesStatus(): ReadonlyMap<string, TeleBoxState> {
+        return this.boxesStatus$;
+    }
+
+    public get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState> {
+        return this.lastNotMinimizedBoxesStatus$;
+    }
+
     public setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate = false): void {
         this.boxesStatus$ = boxesStatus;
+        this.effectBoxStatusChange(skipUpdate);
+    }
+
+
+    private effectBoxStatusTimerFunc(skipUpdate: boolean){
+        this.effectBoxStatusTimer = undefined;
         let topBox:TeleBox | undefined;
         const topBoxId = this.topBox?.id;
         let hasMinimizedBox = false;
         this.boxes.forEach((box) => {
-            const boxStatus = boxesStatus.get(box.id);
+            const boxStatus = this.boxesStatus$.get(box.id);
             if (boxStatus) {
                 if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > (topBox?.zIndex ?? 0)) {
                     topBox = box;
@@ -489,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 {
@@ -500,13 +559,11 @@ export class TeleBoxManager {
     }
 
     public setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate = false): void {
-        const boxesStatus = this.lastNotMinimizedBoxesStatus$;
         if (lastNotMinimizedBoxStatus) {
-            boxesStatus.set(boxId, lastNotMinimizedBoxStatus);
+            this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
         } else {
-            boxesStatus.delete(boxId);
+            this.lastNotMinimizedBoxesStatus$.delete(boxId);
         }
-        this.setLastNotMinimizedBoxesStatus(boxesStatus, skipUpdate);
         if (!skipUpdate) {
             this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus:lastNotMinimizedBoxStatus});
         }
@@ -514,11 +571,13 @@ export class TeleBoxManager {
 
     public setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate = false): void {
         this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
+        this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
+    }
+
+    private effectLastNotMinimizedBoxStatusChange(skipUpdate = false){
         this.boxes.forEach((box) => {
-            const boxStatus = lastNotMinimizedBoxesStatus.get(box.id);
-            if (boxStatus) {
-                box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
-            }
+            const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
+            box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
         });
     }
 
@@ -557,10 +616,12 @@ export class TeleBoxManager {
 
         if (box.boxStatus) {
             this.setBoxStatus(box.id, box.boxStatus, true);
+            this.effectBoxStatusChange(true);
         }
 
         if (box._lastNotMinimizedBoxStatus$.value) {
             this.setLastNotMinimizedBoxStatus(box.id, box._lastNotMinimizedBoxStatus$.value, true);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
 
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
@@ -574,6 +635,7 @@ export class TeleBoxManager {
                         }
                     });
                 }
+                this.effectBoxStatusChange();
                 this.makeMaximizedTopBoxFocus();
             } else {
                 this.setMaximized(!this.maximized);
@@ -584,6 +646,7 @@ export class TeleBoxManager {
             if (box.boxStatus) {
                 const oldBoxStatus = box.boxStatus;
                 this.setBoxStatus(box.id, TELE_BOX_STATE.Minimized);
+                this.effectBoxStatusChange();
                 if (oldBoxStatus === TELE_BOX_STATE.Maximized) {
                     this.makeMaximizedTopBoxFocus();
                 }
@@ -678,10 +741,6 @@ export class TeleBoxManager {
         skipUpdate = false
     ): ReadonlyTeleBox | undefined {
         const box = this.getBox(boxOrID);
-        if (box) {
-            this.setBoxStatus(box.id, undefined, skipUpdate);
-            this.setLastNotMinimizedBoxStatus(box.id, undefined, skipUpdate);
-        }
         const index = this.getBoxIndex(boxOrID);
         if (index >= 0) {
             const boxes = this.boxes.slice();
@@ -689,8 +748,12 @@ export class TeleBoxManager {
             this.boxes$.setValue(boxes);
             deletedBoxes.forEach((box) => box.destroy());
             if (box) {
+                this.setBoxStatus(box.id, undefined, skipUpdate);
                 this.boxesStatus$.delete(box.id);
+                this.effectBoxStatusChange(skipUpdate);
+                this.setLastNotMinimizedBoxStatus(box.id, undefined, skipUpdate);
                 this.lastNotMinimizedBoxesStatus$.delete(box.id);
+                this.effectLastNotMinimizedBoxStatusChange();
             }
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
@@ -882,9 +945,11 @@ export class TeleBoxManager {
         }
         if (config.boxStatus) {
             this.setBoxStatus(box.id, config.boxStatus, skipUpdate);
+            this.effectBoxStatusChange(skipUpdate);
         }
         if (config.lastNotMinimizedBoxStatus) {
             this.setLastNotMinimizedBoxStatus(box.id, config.lastNotMinimizedBoxStatus, skipUpdate);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
     }
 
@@ -931,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);
+                        }
+                    });
+                }
             }
         }
     }
@@ -954,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;