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

package/dist/telebox-insider.es.js

@@ -2688,6 +2688,7 @@ class TeleBoxManager {
                     this.setBoxStatus(box.id, TELE_BOX_STATE.Normal);
                   }
                 });
+                this.effectBoxStatusChange();
               }
               minimized$.setValue(false);
             }
@@ -2782,6 +2783,7 @@ class TeleBoxManager {
           case TELE_BOX_DELEGATE_EVENT.Maximize: {
             if (this.hasBoxesStatus() && ((_a = this.maxTitleBar.focusedBox) == null ? void 0 : _a.id)) {
               this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Normal);
+              this.effectBoxStatusChange();
               this.makeMaximizedTopBoxFocus();
             } else {
               maximized$.setValue(!maximized$.value);
@@ -2791,6 +2793,7 @@ class TeleBoxManager {
           case TELE_BOX_DELEGATE_EVENT.Minimize: {
             if (this.hasBoxesStatus() && ((_b = this.maxTitleBar.focusedBox) == null ? void 0 : _b.id)) {
               this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Minimized);
+              this.effectBoxStatusChange();
               this.makeMaximizedTopBoxFocus();
             } else {
               minimized$.setValue(true);
@@ -2864,33 +2867,50 @@ class TeleBoxManager {
     return this;
   }
   setBoxStatus(boxId, boxStatus, skipUpdate = false) {
-    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, void 0, skipUpdate);
+        this.effectLastNotMinimizedBoxStatusChange();
       }
     } else {
-      boxesStatus.delete(boxId);
+      this.boxesStatus$.delete(boxId);
       this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
+      this.effectLastNotMinimizedBoxStatusChange();
     }
-    this.setBoxesStatus(boxesStatus, skipUpdate);
     if (!skipUpdate) {
       this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
     }
   }
+  getBoxStatus(boxId) {
+    return this.boxesStatus$.get(boxId);
+  }
+  getLastNotMinimizedBoxStatus(boxId) {
+    return this.lastNotMinimizedBoxesStatus$.get(boxId);
+  }
+  get boxesStatus() {
+    return this.boxesStatus$;
+  }
+  get lastNotMinimizedBoxesStatus() {
+    return this.lastNotMinimizedBoxesStatus$;
+  }
   setBoxesStatus(boxesStatus, skipUpdate = false) {
-    var _a, _b, _c, _d;
     this.boxesStatus$ = boxesStatus;
+    this.effectBoxStatusChange(skipUpdate);
+  }
+  effectBoxStatusTimerFunc(skipUpdate) {
+    var _a, _b, _c, _d;
+    this.effectBoxStatusTimer = void 0;
     let topBox;
     const topBoxId = (_a = this.topBox) == null ? void 0 : _a.id;
     let hasMinimizedBox = false;
     this.boxes.forEach((box) => {
       var _a2;
-      const boxStatus = boxesStatus.get(box.id);
+      const boxStatus = this.boxesStatus$.get(box.id);
       if (boxStatus) {
         if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a2 = topBox == null ? void 0 : topBox.zIndex) != null ? _a2 : 0)) {
           topBox = box;
@@ -2917,6 +2937,28 @@ 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 })));
+  }
+  effectBoxStatusChange(skipUpdate = false) {
+    var _a, _b;
+    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: void 0
+      };
+    }
+    console.log("effectBoxStatusTimerFunc===>000", skipUpdate, { id: (_a = this.topBox$.value) == null ? void 0 : _a.id, zIndex: (_b = this.topBox$.value) == null ? void 0 : _b.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);
   }
   hasBoxesStatus() {
     return this.boxesStatus$.size > 0;
@@ -2925,24 +2967,23 @@ class TeleBoxManager {
     return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
   }
   setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
-    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 });
     }
   }
   setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
     this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
+    this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
+  }
+  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);
     });
   }
   getAllMinimizedBoxes() {
@@ -2972,9 +3013,11 @@ class TeleBoxManager {
     this.boxes$.setValue([...this.boxes, box]);
     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, () => {
       if (box.boxStatus) {
@@ -2987,6 +3030,7 @@ class TeleBoxManager {
             }
           });
         }
+        this.effectBoxStatusChange();
         this.makeMaximizedTopBoxFocus();
       } else {
         this.setMaximized(!this.maximized);
@@ -2996,6 +3040,7 @@ 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();
         }
@@ -3068,10 +3113,6 @@ class TeleBoxManager {
   }
   remove(boxOrID, skipUpdate = false) {
     const box = this.getBox(boxOrID);
-    if (box) {
-      this.setBoxStatus(box.id, void 0, skipUpdate);
-      this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
-    }
     const index2 = this.getBoxIndex(boxOrID);
     if (index2 >= 0) {
       const boxes = this.boxes.slice();
@@ -3079,8 +3120,12 @@ class TeleBoxManager {
       this.boxes$.setValue(boxes);
       deletedBoxes.forEach((box2) => box2.destroy());
       if (box) {
+        this.setBoxStatus(box.id, void 0, skipUpdate);
         this.boxesStatus$.delete(box.id);
+        this.effectBoxStatusChange(skipUpdate);
+        this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
         this.lastNotMinimizedBoxesStatus$.delete(box.id);
+        this.effectLastNotMinimizedBoxStatusChange();
       }
       if (!skipUpdate) {
         if (this.boxes.length <= 0) {
@@ -3236,9 +3281,11 @@ 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();
     }
   }
   smartPosition(config = {}) {
@@ -3269,10 +3316,25 @@ class TeleBoxManager {
   makeBoxTop(box, skipUpdate = false) {
     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((maxZIndex2, box2) => {
+          return Math.max(maxZIndex2, box2.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);
+            }
+          });
+        }
       }
     }
   }
@@ -3290,15 +3352,6 @@ class TeleBoxManager {
       }
     }
   }
-  makeTopBoxEffect(boxId, addZIndex, currentZIndex, skipUpdate = false) {
-    if (this.hasBoxesStatus() && this.hasMinimizedBox()) {
-      this.boxes.forEach((b) => {
-        if (b.boxStatus && b.id !== boxId && b.zIndex >= currentZIndex) {
-          b.setZIndex(b.zIndex + addZIndex, skipUpdate);
-        }
-      });
-    }
-  }
   makeMaximizedBoxFocus(maximizedBox, skipUpdate = false) {
     if (this.maxTitleBar.hasMaximizedBoxInStatus() && this.maxTitleBar.MaximizedBoxes.find((box) => box.id === maximizedBox.id)) {
       const currentZIndex = maximizedBox.zIndex;