@netless/telebox-insider 0.3.0 → 0.3.1-beta.0

package/dist/telebox-insider.es.js

@@ -1241,7 +1241,8 @@ class DefaultTitleBar {
     state = TELE_BOX_STATE.Normal,
     boxStatus,
     forceTop = false,
-    forceNormal = false
+    forceNormal = false,
+    forceMaximized = false
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1265,7 +1266,7 @@ class DefaultTitleBar {
       const now = Date.now();
       if (now - this.lastTitleBarClick.timestamp <= 500) {
         if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
-          if (this.onEvent) {
+          if (this.onEvent && !this.forceMaximized) {
             this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
@@ -1297,7 +1298,7 @@ class DefaultTitleBar {
       } = ev.touches[0] || {};
       if (now - this.lastTitleBarTouch.timestamp <= 500) {
         if (Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10) {
-          if (this.onEvent) {
+          if (this.onEvent && !this.forceMaximized) {
             this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
@@ -1317,24 +1318,33 @@ class DefaultTitleBar {
     this.boxStatus = boxStatus;
     this.forceTop = forceTop;
     this.forceNormal = forceNormal;
+    this.forceMaximized = forceMaximized;
     this.buttons = buttons || (forceNormal ? [
       {
         type: TELE_BOX_DELEGATE_EVENT.Close,
-        iconClassName: this.wrapClassName("titlebar-icon-close")
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-close"
+        )
       }
     ] : [
       {
         type: TELE_BOX_DELEGATE_EVENT.Minimize,
-        iconClassName: this.wrapClassName("titlebar-icon-minimize")
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-minimize"
+        )
       },
       {
         type: TELE_BOX_DELEGATE_EVENT.Maximize,
-        iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-maximize"
+        ),
         isActive: (state2) => state2 === TELE_BOX_STATE.Maximized
       },
       {
         type: TELE_BOX_DELEGATE_EVENT.Close,
-        iconClassName: this.wrapClassName("titlebar-icon-close")
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-close"
+        )
       }
     ]);
     this.$dragArea = this.renderDragArea();
@@ -1379,6 +1389,20 @@ class DefaultTitleBar {
       this.readonly = readonly;
     }
   }
+  setForceMaximized(forceMaximized) {
+    this.forceMaximized = forceMaximized;
+    this.$btns.forEach((button, index2) => {
+      var _a;
+      if (((_a = this.buttons[index2]) == null ? void 0 : _a.type) === TELE_BOX_DELEGATE_EVENT.Maximize) {
+        button.disabled = forceMaximized;
+        button.setAttribute("aria-disabled", String(forceMaximized));
+        button.classList.toggle(
+          this.wrapClassName("disabled"),
+          forceMaximized
+        );
+      }
+    });
+  }
   render() {
     if (!this.$titleBar) {
       this.$titleBar = document.createElement("div");
@@ -1406,7 +1430,10 @@ class DefaultTitleBar {
         $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
         $btn.dataset.teleTitleBarNoDblClick = "true";
         if (isActive) {
-          $btn.classList.toggle("is-active", isActive(this.boxStatus || this.state));
+          $btn.classList.toggle(
+            "is-active",
+            isActive(this.boxStatus || this.state)
+          );
         }
         this.$btns.push($btn);
         $buttonsContainer.appendChild($btn);
@@ -1426,6 +1453,9 @@ class DefaultTitleBar {
           if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
             preventEvent(ev);
             const btn = this.buttons[teleTitleBarBtnIndex];
+            if (this.forceMaximized && btn.type === TELE_BOX_DELEGATE_EVENT.Maximize) {
+              return;
+            }
             if (this.onEvent) {
               this.onEvent({
                 type: btn.type,
@@ -1437,6 +1467,7 @@ class DefaultTitleBar {
       );
       this.$titleBar.appendChild($titleArea);
       this.$titleBar.appendChild($buttonsContainer);
+      this.setForceMaximized(Boolean(this.forceMaximized));
     }
     return this.$titleBar;
   }
@@ -1512,6 +1543,7 @@ class TeleBox {
     lastNotMinimizedBoxStatus,
     forceTop = false,
     forceNormal = false,
+    forceMaximized = false,
     isDragContent = false
   } = {}) {
     this._renderSideEffect = new o();
@@ -1526,7 +1558,9 @@ class TeleBox {
     this.namespace = namespace;
     this.events = new EventEmitter();
     this._delegateEvents = new EventEmitter();
-    const boxStatus$ = createVal(boxStatus);
+    const boxStatus$ = createVal(
+      boxStatus
+    );
     const lastNotMinimizedBoxStatus$ = createVal(lastNotMinimizedBoxStatus);
     const prefersColorScheme$ = createVal(
       prefersColorScheme
@@ -1586,9 +1620,13 @@ class TeleBox {
       }
     });
     const forceNormal$ = createVal(forceNormal);
+    const forceMaximized$ = createVal(forceMaximized);
     forceNormal$.reaction((forceNormal2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(TELE_BOX_EVENT.ForceNormal, forceNormal2 || false);
+        this.events.emit(
+          TELE_BOX_EVENT.ForceNormal,
+          forceNormal2 || false
+        );
       }
     });
     const isDragContent$ = createVal(isDragContent);
@@ -1771,6 +1809,7 @@ class TeleBox {
       boxStatus: boxStatus$.value,
       forceTop: forceTop$.value,
       forceNormal: forceNormal$.value,
+      forceMaximized: forceMaximized$.value,
       onDragStart: (event) => {
         var _a;
         return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
@@ -1781,7 +1820,7 @@ class TeleBox {
         } else {
           switch (event.type) {
             case TELE_BOX_DELEGATE_EVENT.Maximize: {
-              if (!boxStatus$.value) {
+              if (!boxStatus$.value && !(forceMaximized$.value && maximized$.value)) {
                 maximized$.setValue(!maximized$.value);
               }
               break;
@@ -1810,6 +1849,9 @@ class TeleBox {
     readonly$.reaction((readonly2) => {
       this.titleBar.setReadonly(readonly2);
     });
+    forceMaximized$.reaction((forceMaximized2) => {
+      this.titleBar.setForceMaximized(forceMaximized2);
+    });
     boxStatus$.reaction((boxStatus2) => {
       this.titleBar.setBoxStatus(boxStatus2);
     });
@@ -1837,6 +1879,7 @@ class TeleBox {
       $userStyles: $userStyles$,
       forceTop: forceTop$,
       forceNormal: forceNormal$,
+      forceMaximized: forceMaximized$,
       isDragContent: isDragContent$
     };
     i(this, valConfig);
@@ -1898,21 +1941,33 @@ class TeleBox {
   setBoxStatus(boxStatus, skipUpdate = false) {
     if (boxStatus === TELE_BOX_STATE.Minimized) {
       if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
-        this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          this._boxStatus$.value,
+          skipUpdate
+        );
       }
     } else {
       this.setLastNotMinimizedBoxStatus(void 0, skipUpdate);
     }
     this._boxStatus$.setValue(boxStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_EVENT.BoxStatus, { id: this.id, boxStatus });
+      this.events.emit(TELE_BOX_EVENT.BoxStatus, {
+        id: this.id,
+        boxStatus
+      });
     }
     return this;
   }
   setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate = false) {
-    this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
+    this._lastNotMinimizedBoxStatus$.setValue(
+      lastNotMinimizedBoxStatus,
+      skipUpdate
+    );
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, { id: this.id, lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, {
+        id: this.id,
+        lastNotMinimizedBoxStatus
+      });
     }
     return this;
   }
@@ -2145,7 +2200,14 @@ class TeleBox {
         this._collectorRect$,
         this._boxStatus$
       ],
-      ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
+      ([
+        coord,
+        size,
+        minimized,
+        containerRect,
+        collectorRect,
+        boxStatus
+      ]) => {
         const absoluteWidth = size.width * containerRect.width;
         const absoluteHeight = size.height * containerRect.height;
         return {
@@ -2984,6 +3046,7 @@ class TeleBoxManager {
     collector,
     namespace = "telebox",
     readonly = false,
+    forceMaximized = false,
     useBoxesStatus = false
   } = {}) {
     this.events = new EventEmitter();
@@ -3055,6 +3118,14 @@ class TeleBoxManager {
     });
     const minimized$ = createVal(minimized);
     const maximized$ = createVal(maximized);
+    const forceMaximized$ = createVal(forceMaximized);
+    forceMaximized$.reaction((forceMaximized2, _, skipUpdate) => {
+      var _a;
+      this.boxes.forEach(
+        (box) => box.setForceMaximized(forceMaximized2, skipUpdate)
+      );
+      (_a = this.maxTitleBar) == null ? void 0 : _a.setForceMaximized(forceMaximized2);
+    });
     maximized$.reaction((maximized2, _, skipUpdate) => {
       this.boxes.forEach(
         (box) => box.setMaximized(maximized2, skipUpdate)
@@ -3191,16 +3262,24 @@ class TeleBoxManager {
               if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
                 const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
                 if (maxNormalBoxZIndex > box.zIndex) {
-                  this.setBox(box, {
-                    zIndex: maxNormalBoxZIndex + 1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      zIndex: maxNormalBoxZIndex + 1
+                    },
+                    false
+                  );
                 }
               } else if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
                 const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
                 if (maxMaximizedBoxZIndex > box.zIndex) {
-                  this.setBox(box, {
-                    zIndex: maxMaximizedBoxZIndex + 1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      zIndex: maxMaximizedBoxZIndex + 1
+                    },
+                    false
+                  );
                 }
                 this.makeMaximizedTopBoxFocus();
               }
@@ -3228,6 +3307,7 @@ class TeleBoxManager {
       readonly: readonly$.value,
       namespace: this.namespace,
       state: state$.value,
+      forceMaximized: forceMaximized$.value,
       boxes: this.boxes$.value,
       containerRect: containerRect$.value,
       getBoxesStatus: () => {
@@ -3236,6 +3316,9 @@ class TeleBoxManager {
       onEvent: (event) => {
         switch (event.type) {
           case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            if (forceMaximized$.value && this.state === TELE_BOX_STATE.Maximized) {
+              return;
+            }
             if (this.hasBoxesStatus()) {
               let targetBox = this.maxTitleBar.focusedBox;
               if (!targetBox) {
@@ -3244,12 +3327,17 @@ class TeleBoxManager {
               if (targetBox == null ? void 0 : targetBox.id) {
                 const box = this.getBox(targetBox.id);
                 if (box) {
-                  this.setBox(box, {
-                    status: TELE_BOX_STATE.Normal,
-                    zIndex: this.getMaxNormalBoxZIndex() + 1
-                  }, false, () => {
-                    this.makeMaximizedTopBoxFocus();
-                  });
+                  this.setBox(
+                    box,
+                    {
+                      status: TELE_BOX_STATE.Normal,
+                      zIndex: this.getMaxNormalBoxZIndex() + 1
+                    },
+                    false,
+                    () => {
+                      this.makeMaximizedTopBoxFocus();
+                    }
+                  );
                 }
               }
             } else {
@@ -3271,10 +3359,14 @@ class TeleBoxManager {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
-                  this.setBox(box, {
-                    status: TELE_BOX_STATE.Minimized,
-                    zIndex: -1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      status: TELE_BOX_STATE.Minimized,
+                      zIndex: -1
+                    },
+                    false
+                  );
                   if (isFocusChanged) {
                     this.focusTopBox();
                   } else {
@@ -3335,7 +3427,8 @@ class TeleBoxManager {
       readonly: readonly$,
       fence: fence$,
       minimized: minimized$,
-      maximized: maximized$
+      maximized: maximized$,
+      forceMaximized: forceMaximized$
     };
     i(this, valConfig);
     this._state$ = state$;
@@ -3372,6 +3465,9 @@ class TeleBoxManager {
     return this._state$.value;
   }
   setState(state, skipUpdate = false) {
+    if (state === TELE_BOX_STATE.Normal && this.forceMaximized) {
+      return this;
+    }
     switch (state) {
       case TELE_BOX_STATE.Maximized: {
         this.setMinimized(false, skipUpdate);
@@ -3396,7 +3492,11 @@ class TeleBoxManager {
       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.setLastNotMinimizedBoxStatus(
+          boxId,
+          oldBoxStatus,
+          skipUpdate
+        );
       } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
         this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
       }
@@ -3405,7 +3505,10 @@ class TeleBoxManager {
       this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
     }
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, {
+        id: boxId,
+        boxStatus
+      });
     }
   }
   getBoxStatus(boxId) {
@@ -3471,7 +3574,9 @@ class TeleBoxManager {
       if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
         if (this.effectBoxesStatusTimer.resolve) {
-          this.effectBoxesStatusTimer.resolve(!!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate));
+          this.effectBoxesStatusTimer.resolve(
+            !!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate)
+          );
         }
       }
       this.effectBoxesStatusTimer = void 0;
@@ -3481,7 +3586,9 @@ class TeleBoxManager {
       if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
         if (this.effectBoxesStatusTimer.resolve) {
-          this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
+          this.effectBoxesStatusTimer.resolve(
+            !!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate)
+          );
         }
         this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
       } else {
@@ -3500,7 +3607,9 @@ class TeleBoxManager {
         this.effectBoxesStatusTimer.resolve = resolve;
         this.effectBoxesStatusTimer.timer = setTimeout(() => {
           if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
-            this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
+            this.effectBoxesStatusTimer.resolve(
+              this.effectBoxesStatusTimer.skipUpdate
+            );
           }
         }, 100);
       });
@@ -3518,13 +3627,18 @@ class TeleBoxManager {
     if (!this.useBoxesStatus) {
       return false;
     }
-    return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
+    return this.boxes.some(
+      (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized
+    );
   }
   getMinimizedBoxesStatus() {
     const minimizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Minimized) {
-        minimizedBoxes.set(boxId, boxStatus);
+        minimizedBoxes.set(
+          boxId,
+          boxStatus
+        );
       }
     });
     return minimizedBoxes;
@@ -3542,7 +3656,10 @@ class TeleBoxManager {
     const maximizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Maximized) {
-        maximizedBoxes.set(boxId, boxStatus);
+        maximizedBoxes.set(
+          boxId,
+          boxStatus
+        );
       }
     });
     return maximizedBoxes;
@@ -3561,12 +3678,18 @@ class TeleBoxManager {
   }
   setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
     if (lastNotMinimizedBoxStatus) {
-      this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
+      this.lastNotMinimizedBoxesStatus$.set(
+        boxId,
+        lastNotMinimizedBoxStatus
+      );
     } else {
       this.lastNotMinimizedBoxesStatus$.delete(boxId);
     }
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, {
+        id: boxId,
+        boxStatus: lastNotMinimizedBoxStatus
+      });
     }
   }
   setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
@@ -3579,7 +3702,9 @@ class TeleBoxManager {
       if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
         clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
         if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate));
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(
+            !!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate)
+          );
         }
       }
       this.effectLastNotMinimizedBoxStatusTimer = void 0;
@@ -3589,7 +3714,9 @@ class TeleBoxManager {
       clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
       if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
         if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(
+            !!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate)
+          );
         }
         this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
       } else {
@@ -3606,11 +3733,16 @@ class TeleBoxManager {
     if (this.effectLastNotMinimizedBoxStatusTimer) {
       const _skipUpdate = await new Promise((resolve) => {
         this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
-        this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
-          if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-            this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
-          }
-        }, 100);
+        this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(
+          () => {
+            if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
+              this.effectLastNotMinimizedBoxStatusTimer.resolve(
+                this.effectLastNotMinimizedBoxStatusTimer.skipUpdate
+              );
+            }
+          },
+          100
+        );
       });
       this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
       this.effectLastNotMinimizedBoxStatusTimer = void 0;
@@ -3681,15 +3813,20 @@ class TeleBoxManager {
       namespace: this.namespace,
       containerRect: this.containerRect,
       readonly: this.readonly,
+      forceMaximized: this.forceMaximized,
       collectorRect: this.collectorRect
     });
     box.mount(this.root);
     this.boxes$.setValue([...this.boxes, box]);
     if (box.boxStatus && this.useBoxesStatus) {
-      this.setBox(box, {
-        status: box.boxStatus,
-        lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
-      }, true);
+      this.setBox(
+        box,
+        {
+          status: box.boxStatus,
+          lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
+        },
+        true
+      );
     }
     if (box.focus) {
       this.focusBox(box);
@@ -3703,23 +3840,35 @@ class TeleBoxManager {
           return;
         }
         if (box.boxStatus === TELE_BOX_STATE.Maximized) {
-          this.setBox(box.id, {
-            status: TELE_BOX_STATE.Normal,
-            zIndex: this.getMaxNormalBoxZIndex() + 1
-          }, false);
+          this.setBox(
+            box.id,
+            {
+              status: TELE_BOX_STATE.Normal,
+              zIndex: this.getMaxNormalBoxZIndex() + 1
+            },
+            false
+          );
         } else {
-          [...this.boxes].filter((box2) => box2.boxStatus === TELE_BOX_STATE.Normal && !this.isForceNormal(box2)).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
+          [...this.boxes].filter(
+            (box2) => box2.boxStatus === TELE_BOX_STATE.Normal && !this.isForceNormal(box2)
+          ).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
             if (box2.boxStatus === TELE_BOX_STATE.Normal) {
-              this.setBox(box2.id, {
-                status: TELE_BOX_STATE.Maximized,
-                zIndex: this.getMaxMaximizedBoxZIndex() + 1
-              }, false);
+              this.setBox(
+                box2.id,
+                {
+                  status: TELE_BOX_STATE.Maximized,
+                  zIndex: this.getMaxMaximizedBoxZIndex() + 1
+                },
+                false
+              );
             }
           });
           this.makeMaximizedTopBoxFocus();
         }
       } else {
-        this.setMaximized(!this.maximized);
+        if (!(this.forceMaximized && this.maximized)) {
+          this.setMaximized(!this.maximized);
+        }
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
@@ -3730,12 +3879,17 @@ class TeleBoxManager {
         if (box.focus) {
           this.blurBox(box);
         }
-        this.setBox(box, {
-          status: TELE_BOX_STATE.Minimized,
-          zIndex: -1
-        }, false, () => {
-          this.focusTopBox();
-        });
+        this.setBox(
+          box,
+          {
+            status: TELE_BOX_STATE.Minimized,
+            zIndex: -1
+          },
+          false,
+          () => {
+            this.focusTopBox();
+          }
+        );
       } else {
         this.setMinimized(true);
       }
@@ -3827,8 +3981,15 @@ class TeleBoxManager {
         box.setZIndex(zIndex, skipUpdate);
       }
       if (lastNotMinimizedBoxStatus) {
-        this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
-        box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          box.id,
+          lastNotMinimizedBoxStatus,
+          skipUpdate
+        );
+        box.setLastNotMinimizedBoxStatus(
+          lastNotMinimizedBoxStatus,
+          skipUpdate
+        );
       }
       effectFunc && effectFunc();
     }
@@ -3843,12 +4004,16 @@ class TeleBoxManager {
       deletedBoxes.forEach((box2) => box2.destroy());
       if (box && this.useBoxesStatus) {
         this.setBoxStatus(box.id, void 0, skipUpdate);
-        this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          box.id,
+          void 0,
+          skipUpdate
+        );
         this.effectBoxStatusChange();
         effectFunc && effectFunc();
       }
       if (!skipUpdate) {
-        if (this.boxes.length <= 0) {
+        if (this.boxes.length <= 0 && !this.forceMaximized) {
           this.setMaximized(false);
           this.setMinimized(false);
         }
@@ -3871,7 +4036,7 @@ class TeleBoxManager {
     this.boxesStatus$.clear();
     this.lastNotMinimizedBoxesStatus$.clear();
     if (!skipUpdate) {
-      if (this.boxes.length <= 0) {
+      if (this.boxes.length <= 0 && !this.forceMaximized) {
         this.setMaximized(false);
         this.setMinimized(false);
       }
@@ -4003,10 +4168,14 @@ class TeleBoxManager {
       box.mountFooter(config.footer);
     }
     if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
-      this.setBox(box, {
-        status: config.boxStatus,
-        lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
-      }, skipUpdate);
+      this.setBox(
+        box,
+        {
+          status: config.boxStatus,
+          lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
+        },
+        skipUpdate
+      );
     }
     if (config.forceTop != null) {
       box.setForceTop(config.forceTop, skipUpdate);
@@ -4034,8 +4203,13 @@ class TeleBoxManager {
           vx = 20;
         }
       } else if (this.hasMinimizedBox()) {
-        vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
-          return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
+        vx = [...this.boxes].filter(
+          (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal
+        ).reduce((maxX, box) => {
+          return Math.max(
+            maxX,
+            box.intrinsicX * this.containerRect.width + 20
+          );
         }, vx);
       }
       x = vx / this.containerRect.width;
@@ -4056,8 +4230,13 @@ class TeleBoxManager {
           vy = 20;
         }
       } else if (this.hasMinimizedBox()) {
-        vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
-          return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
+        vy = [...this.boxes].filter(
+          (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal
+        ).reduce((maxY, box) => {
+          return Math.max(
+            maxY,
+            box.intrinsicY * this.containerRect.height + 20
+          );
         }, vy);
       }
       y = vy / this.containerRect.height;
@@ -4078,12 +4257,14 @@ class TeleBoxManager {
     }
     let maximizedBox;
     if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-      maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
-        if (!topBox) {
-          return currentBox;
+      maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce(
+        (topBox, currentBox) => {
+          if (!topBox) {
+            return currentBox;
+          }
+          return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
         }
-        return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
-      });
+      );
     }
     return maximizedBox;
   }