@netless/telebox-insider 0.3.0-beta.8 → 0.3.0

package/dist/telebox-insider.es.js

@@ -1183,6 +1183,8 @@ var TELE_BOX_EVENT = /* @__PURE__ */ ((TELE_BOX_EVENT2) => {
   TELE_BOX_EVENT2["Destroyed"] = "destroyed";
   TELE_BOX_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
+  TELE_BOX_EVENT2["ForceTop"] = "force_top";
+  TELE_BOX_EVENT2["ForceNormal"] = "force_normal";
   return TELE_BOX_EVENT2;
 })(TELE_BOX_EVENT || {});
 var TELE_BOX_DELEGATE_EVENT = /* @__PURE__ */ ((TELE_BOX_DELEGATE_EVENT2) => {
@@ -1237,7 +1239,9 @@ class DefaultTitleBar {
     onDragStart,
     namespace = "telebox",
     state = TELE_BOX_STATE.Normal,
-    boxStatus
+    boxStatus,
+    forceTop = false,
+    forceNormal = false
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1311,7 +1315,14 @@ class DefaultTitleBar {
     this.title = title;
     this.state = state;
     this.boxStatus = boxStatus;
-    this.buttons = buttons || [
+    this.forceTop = forceTop;
+    this.forceNormal = forceNormal;
+    this.buttons = buttons || (forceNormal ? [
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Close,
+        iconClassName: this.wrapClassName("titlebar-icon-close")
+      }
+    ] : [
       {
         type: TELE_BOX_DELEGATE_EVENT.Minimize,
         iconClassName: this.wrapClassName("titlebar-icon-minimize")
@@ -1325,7 +1336,7 @@ class DefaultTitleBar {
         type: TELE_BOX_DELEGATE_EVENT.Close,
         iconClassName: this.wrapClassName("titlebar-icon-close")
       }
-    ];
+    ]);
     this.$dragArea = this.renderDragArea();
   }
   setTitle(title) {
@@ -1498,7 +1509,10 @@ class TeleBox {
     },
     collectorRect,
     boxStatus,
-    lastNotMinimizedBoxStatus
+    lastNotMinimizedBoxStatus,
+    forceTop = false,
+    forceNormal = false,
+    isDragContent = false
   } = {}) {
     this._renderSideEffect = new o();
     this.handleTrackStart = (ev) => {
@@ -1565,6 +1579,19 @@ class TeleBox {
     });
     const containerRect$ = createVal(containerRect, shallowequal);
     const collectorRect$ = createVal(collectorRect, shallowequal);
+    const forceTop$ = createVal(forceTop);
+    forceTop$.reaction((forceTop2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.ForceTop, forceTop2 || false);
+      }
+    });
+    const forceNormal$ = createVal(forceNormal);
+    forceNormal$.reaction((forceNormal2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.ForceNormal, forceNormal2 || false);
+      }
+    });
+    const isDragContent$ = createVal(isDragContent);
     const title$ = createVal(title);
     title$.reaction((title2, _, skipUpdate) => {
       if (!skipUpdate) {
@@ -1742,6 +1769,8 @@ class TeleBox {
       title: title$.value,
       namespace: this.namespace,
       boxStatus: boxStatus$.value,
+      forceTop: forceTop$.value,
+      forceNormal: forceNormal$.value,
       onDragStart: (event) => {
         var _a;
         return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
@@ -1805,7 +1834,10 @@ class TeleBox {
       maximized: maximized$,
       $userContent: $userContent$,
       $userFooter: $userFooter$,
-      $userStyles: $userStyles$
+      $userStyles: $userStyles$,
+      forceTop: forceTop$,
+      forceNormal: forceNormal$,
+      isDragContent: isDragContent$
     };
     i(this, valConfig);
     this._state$ = state$;
@@ -2142,6 +2174,9 @@ class TeleBox {
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("content") + " tele-fancy-scrollbar";
     this.$content = $content;
+    if (this.isDragContent) {
+      this.$content.appendChild(this.titleBar.$dragArea);
+    }
     this._renderSideEffect.add(() => {
       let last$userStyles;
       return this._$userStyles$.subscribe(($userStyles) => {
@@ -2571,6 +2606,7 @@ class TeleBoxCollector {
     return `${this.namespace}-${className}`;
   }
 }
+TeleBoxCollector.kind = "TeleBoxCollector";
 var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
   TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
   TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
@@ -2619,7 +2655,7 @@ class MaxTitleBar extends DefaultTitleBar {
     if (this.getBoxesStatus) {
       const boxesStatus = this.getBoxesStatus();
       if (boxesStatus) {
-        return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+        return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized && !box.forceTop);
       }
     }
     return [];
@@ -2898,7 +2934,6 @@ class AppMenu {
   createMinimizedItem(appId) {
     const appItem = document.createElement("div");
     appItem.classList.add(this.c("app-menu-item"));
-    console.log("appId=====>", appId);
     appItem.setAttribute(`data-${this.c("app-id")}`, appId);
     const titleDiv = document.createElement("div");
     titleDiv.classList.add(this.c("app-menu-item-title"));
@@ -2960,9 +2995,11 @@ class TeleBoxManager {
     this.boxes$ = createVal([]);
     this.topBox$ = this.boxes$.derive((boxes) => {
       if (boxes.length > 0) {
-        console.log("topBox===>topBox$===>000");
         let currentTopBox = void 0;
         const topBox = boxes.reduce((topBox2, box) => {
+          if (box.forceTop) {
+            return topBox2;
+          }
           if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
             return topBox2;
           }
@@ -2972,7 +3009,6 @@ class TeleBoxManager {
           }
           return topBox2.zIndex > box.zIndex ? topBox2 : box;
         }, currentTopBox);
-        console.log("topBox===>topBox$===>end", topBox == null ? void 0 : topBox.id);
         return topBox;
       }
       return;
@@ -3169,7 +3205,6 @@ class TeleBoxManager {
                 this.makeMaximizedTopBoxFocus();
               }
             }
-            console.log("checkFocusBox===>", box.id);
             this.focusBox(box);
             return;
           }
@@ -3232,7 +3267,7 @@ class TeleBoxManager {
                 const box = this.getBox(targetBox.id);
                 if (box) {
                   let isFocusChanged = false;
-                  if (this.topBox === box) {
+                  if (box.focus) {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
@@ -3262,7 +3297,7 @@ class TeleBoxManager {
                 const box = this.getBox(targetBox.id);
                 if (box) {
                   let isFocusChanged = false;
-                  if (this.topBox === box) {
+                  if (box.focus) {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
@@ -3315,6 +3350,21 @@ class TeleBoxManager {
   get topBox() {
     return this.topBox$.value;
   }
+  get forceTopBoxes() {
+    return this.boxes.find((box) => box.forceTop);
+  }
+  get maxForceTopBox() {
+    return this.boxes.reduce((maxTopBox, box) => {
+      var _a;
+      if (box.forceTop && box.zIndex > ((_a = maxTopBox == null ? void 0 : maxTopBox.zIndex) != null ? _a : 0)) {
+        return box;
+      }
+      return maxTopBox;
+    }, void 0);
+  }
+  get forceNormalBoxes() {
+    return this.boxes.find((box) => box.forceNormal);
+  }
   get darkMode() {
     return this._darkMode$.value;
   }
@@ -3401,7 +3451,7 @@ class TeleBoxManager {
       var _a;
       const boxStatus = this.boxesStatus$.get(box.id);
       if (boxStatus) {
-        if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
+        if (boxStatus !== TELE_BOX_STATE.Minimized && !this.isForceTop(box) && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
           newTopBox = box;
         }
         box.setBoxStatus(boxStatus, skipUpdate);
@@ -3410,15 +3460,13 @@ class TeleBoxManager {
     this.effectBoxStatusChange();
     if (newTopBox && curTopBox !== newTopBox) {
       this.topBox$.setValue(newTopBox);
-      this.focusBox(newTopBox, skipUpdate);
     }
     if (!newTopBox && curTopBox) {
       this.topBox$.setValue(void 0);
-      this.blurBox(curTopBox, skipUpdate);
     }
   }
   async effectBoxesStatusChange(skipUpdate = false) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     if (!this.useBoxesStatus) {
       if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
@@ -3433,11 +3481,9 @@ class TeleBoxManager {
       if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
         if (this.effectBoxesStatusTimer.resolve) {
-          console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
           this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
         }
         this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
-        console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3453,17 +3499,13 @@ class TeleBoxManager {
       const _skipUpdate = await new Promise((resolve) => {
         this.effectBoxesStatusTimer.resolve = resolve;
         this.effectBoxesStatusTimer.timer = setTimeout(() => {
-          var _a2, _b2;
           if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
-            console.log("effectBoxStatusTimerFunc===>000", skipUpdate, { id: (_a2 = this.topBox$.value) == null ? void 0 : _a2.id, zIndex: (_b2 = this.topBox$.value) == null ? void 0 : _b2.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
             this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
           }
         }, 100);
       });
-      console.log("effectBoxStatusTimerFunc===>000==>00", skipUpdate, { id: (_c = this.topBox$.value) == null ? void 0 : _c.id, zIndex: (_d = this.topBox$.value) == null ? void 0 : _d.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
       this.effectBoxesStatusTimerFunc(_skipUpdate);
       this.effectBoxesStatusTimer = void 0;
-      console.log("effectBoxStatusTimerFunc===>000==>11", skipUpdate, { id: (_e = this.topBox$.value) == null ? void 0 : _e.id, zIndex: (_f = this.topBox$.value) == null ? void 0 : _f.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
     }
   }
   hasBoxesStatus() {
@@ -3547,11 +3589,9 @@ class TeleBoxManager {
       clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
       if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
         if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-          console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
           this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
         }
         this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
-        console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3568,22 +3608,18 @@ class TeleBoxManager {
         this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
         this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
           if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-            console.log("effectLastNotMinimizedBoxStatusTimer===>000", skipUpdate);
             this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
           }
         }, 100);
       });
-      console.log("effectLastNotMinimizedBoxStatusFunc===>000==>00", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
       this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
       this.effectLastNotMinimizedBoxStatusTimer = void 0;
-      console.log("effectLastNotMinimizedBoxStatusFunc===>000==>11", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
     }
   }
   effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
     if (!this.useBoxesStatus) {
       return;
     }
-    console.log("effectLastNotMinimizedBoxStatusFunc===>end", skipUpdate);
     this.boxes.forEach((box) => {
       const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
       if (boxStatus) {
@@ -3599,7 +3635,7 @@ class TeleBoxManager {
       return this.getUnabledBoxesStatusZIndex();
     }
     return this.boxes.reduce((maxZIndex, box) => {
-      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized && !this.isForceTop(box)) {
         return Math.max(maxZIndex, box.zIndex);
       }
       return maxZIndex;
@@ -3610,17 +3646,32 @@ class TeleBoxManager {
       return this.getUnabledBoxesStatusZIndex();
     }
     return this.boxes.reduce((maxZIndex, box) => {
-      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal && !this.isForceTop(box)) {
         return Math.max(maxZIndex, box.zIndex);
       }
       return maxZIndex;
     }, 299);
   }
+  getMaxForceTopBoxZIndex() {
+    if (!this.useBoxesStatus) {
+      return this.getUnabledBoxesStatusZIndex();
+    }
+    return this.boxes.reduce((maxZIndex, box) => {
+      if (box.boxStatus && this.isForceTop(box)) {
+        return Math.max(maxZIndex, box.zIndex);
+      }
+      return maxZIndex;
+    }, 699);
+  }
+  isForceNormal(box) {
+    return box._forceNormal$.value;
+  }
+  isForceTop(box) {
+    return box._forceTop$.value;
+  }
   create(config = {}, smartPosition = true) {
-    var _a;
-    console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
     const box = new TeleBox({
-      zIndex: this.getMaxNormalBoxZIndex() + 1,
+      zIndex: config.forceTop ? this.getMaxForceTopBoxZIndex() + 1 : this.getMaxNormalBoxZIndex() + 1,
       ...smartPosition ? this.smartPosition(config) : config,
       darkMode: this.darkMode,
       prefersColorScheme: this.prefersColorScheme,
@@ -3648,15 +3699,17 @@ class TeleBoxManager {
     }
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
       if (this.useBoxesStatus && box.boxStatus) {
+        if (box._forceNormal$.value) {
+          return;
+        }
         if (box.boxStatus === TELE_BOX_STATE.Maximized) {
           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).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) {
-              console.log("maximized===>", box2.id);
               this.setBox(box2.id, {
                 status: TELE_BOX_STATE.Maximized,
                 zIndex: this.getMaxMaximizedBoxZIndex() + 1
@@ -3670,12 +3723,12 @@ class TeleBoxManager {
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
-      var _a2;
       if (box.boxStatus && this.useBoxesStatus) {
-        if (this.topBox === box) {
-          if ((_a2 = this.topBox) == null ? void 0 : _a2.focus) {
-            this.blurBox(this.topBox);
-          }
+        if (box._forceNormal$.value) {
+          return;
+        }
+        if (box.focus) {
+          this.blurBox(box);
         }
         this.setBox(box, {
           status: TELE_BOX_STATE.Minimized,
@@ -3688,6 +3741,9 @@ class TeleBoxManager {
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+      if (this.useBoxesStatus && box.focus) {
+        this.blurBox(box);
+      }
       this.remove(box);
       this.focusTopBox();
     });
@@ -3718,9 +3774,11 @@ class TeleBoxManager {
     });
     box._zIndex$.reaction((_, __, skipUpdate) => {
       if (this.boxes.length > 0) {
-        console.log("topBox===>_zIndex", this.boxes.map((box2) => ({ id: box2.id, zIndex: box2.zIndex, boxStatus: box2.boxStatus })));
         let currentTopBox = void 0;
         const topBox = this.boxes.reduce((topBox2, box2) => {
+          if (this.isForceTop(box2)) {
+            return topBox2;
+          }
           if (box2.boxStatus && box2.boxStatus === TELE_BOX_STATE.Minimized) {
             return topBox2;
           }
@@ -3730,7 +3788,6 @@ class TeleBoxManager {
           }
           return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
         }, currentTopBox);
-        console.log("topBox===>_zIndex===>end", topBox == null ? void 0 : topBox.id);
         this.topBox$.setValue(topBox);
       }
       if (!skipUpdate) {
@@ -3951,13 +4008,27 @@ class TeleBoxManager {
         lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
       }, skipUpdate);
     }
+    if (config.forceTop != null) {
+      box.setForceTop(config.forceTop, skipUpdate);
+    }
+    if (config.forceNormal != null) {
+      box.setForceNormal(config.forceNormal, skipUpdate);
+    }
   }
   smartPosition(config = {}) {
     let { x, y } = config;
     const { width = 0.5, height = 0.5 } = config;
     if (x == null) {
       let vx = 20;
-      if (this.topBox) {
+      if (config.forceTop) {
+        const forceTopBox = this.maxForceTopBox || this.topBox;
+        if (forceTopBox) {
+          vx = forceTopBox.intrinsicX * this.containerRect.width + 20;
+          if (vx > this.containerRect.width - width * this.containerRect.width) {
+            vx = 20;
+          }
+        }
+      } else if (this.topBox) {
         vx = this.topBox.intrinsicX * this.containerRect.width + 20;
         if (vx > this.containerRect.width - width * this.containerRect.width) {
           vx = 20;
@@ -3971,7 +4042,15 @@ class TeleBoxManager {
     }
     if (y == null) {
       let vy = 20;
-      if (this.topBox) {
+      if (config.forceTop) {
+        const forceTopBox = this.maxForceTopBox || this.topBox;
+        if (forceTopBox) {
+          vy = forceTopBox.intrinsicY * this.containerRect.height + 20;
+          if (vy > this.containerRect.height - height * this.containerRect.height) {
+            vy = 20;
+          }
+        }
+      } else if (this.topBox) {
         vy = this.topBox.intrinsicY * this.containerRect.height + 20;
         if (vy > this.containerRect.height - height * this.containerRect.height) {
           vy = 20;
@@ -4013,9 +4092,7 @@ class TeleBoxManager {
       return;
     }
     const maximizedBox = this.getMaximizedTopBox();
-    console.log("makeMaximizedTopBoxFocus===>", maximizedBox == null ? void 0 : maximizedBox.id);
     this.maxTitleBar.focusBox(maximizedBox);
-    console.log("makeMaximizedTopBoxFocus===>end", maximizedBox == null ? void 0 : maximizedBox.id);
   }
   getBoxIndex(boxOrID) {
     return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
@@ -4038,5 +4115,6 @@ class TeleBoxManager {
     return;
   }
 }
+TeleBoxManager.kind = "TeleBoxManager";
 export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager };
 //# sourceMappingURL=telebox-insider.es.js.map