@netless/telebox-insider 0.3.0-beta.10 → 0.3.0-beta.12

package/dist/index.d.ts

@@ -284,7 +284,9 @@ declare enum TELE_BOX_EVENT {
     Readonly = "readonly",
     Destroyed = "destroyed",
     BoxStatus = "box_status",
-    LastNotMinimizedBoxStatus = "last_not_minimized_box_status"
+    LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
+    ForceTop = "force_top",
+    ForceNormal = "force_normal"
 }
 declare enum TELE_BOX_DELEGATE_EVENT {
     Close = "close",
@@ -381,6 +383,12 @@ interface TeleBoxConfig {
     readonly boxStatus?: TeleBoxState;
     /** Last not minimized box status. */
     readonly lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+    /** Force top. */
+    readonly forceTop?: boolean;
+    /** Force normal. */
+    readonly forceNormal?: boolean;
+    /** Is drag content. */
+    readonly isDragContent?: boolean;
 }
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 type TeleBoxEventConfig = CheckTeleBoxConfig<{
@@ -423,6 +431,8 @@ type TeleBoxEventConfig = CheckTeleBoxConfig<{
         id: string;
         lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
     };
+    force_normal: boolean;
+    force_top: boolean;
 }>;
 type TeleBoxEvent = keyof TeleBoxEventConfig;
 interface TeleBoxEvents extends EventEmitter<TeleBoxEvent> {
@@ -460,10 +470,13 @@ interface TeleTitleBarConfig {
     title?: string;
     state?: TeleBoxState;
     namespace?: string;
+    forceTop?: boolean;
+    forceNormal?: boolean;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
 interface TeleTitleBar {
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
     setState(state: TeleBoxState): void;
     setReadonly(readonly: boolean): void;
@@ -482,11 +495,13 @@ interface DefaultTitleBarConfig extends TeleTitleBarConfig {
 }
 declare class DefaultTitleBar implements TeleTitleBar {
     protected boxStatus?: TeleBoxState;
-    constructor({ readonly, title, buttons, onEvent, onDragStart, namespace, state, boxStatus, }?: DefaultTitleBarConfig);
+    protected forceTop?: boolean;
+    protected forceNormal?: boolean;
+    constructor({ readonly, title, buttons, onEvent, onDragStart, namespace, state, boxStatus, forceTop, forceNormal, }?: DefaultTitleBarConfig);
     readonly namespace: string;
     $titleBar: HTMLElement | undefined;
     $title: HTMLElement | undefined;
-    $dragArea: HTMLElement;
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
     setState(state: TeleBoxState): void;
     setBoxStatus(boxStatus?: TeleBoxState): void;
@@ -546,11 +561,17 @@ type ValConfig$1 = {
     $userContent: Val<HTMLElement | undefined>;
     $userFooter: Val<HTMLElement | undefined>;
     $userStyles: Val<HTMLStyleElement | undefined>;
+    /** Force top. */
+    forceTop: Val<boolean, boolean>;
+    /** Force normal. */
+    forceNormal: Val<boolean, boolean>;
+    /** Drag content. */
+    isDragContent: Val<boolean, boolean>;
 };
 interface TeleBox extends ValEnhancedResult<ValConfig$1> {
 }
 declare class TeleBox {
-    constructor({ id, title, prefersColorScheme, darkMode, visible, width, height, minWidth, minHeight, x, y, minimized, maximized, readonly, resizable, draggable, fence, fixRatio, focus, zIndex, namespace, titleBar, content, footer, styles, containerRect, collectorRect, boxStatus, lastNotMinimizedBoxStatus }?: TeleBoxConfig);
+    constructor({ id, title, prefersColorScheme, darkMode, visible, width, height, minWidth, minHeight, x, y, minimized, maximized, readonly, resizable, draggable, fence, fixRatio, focus, zIndex, namespace, titleBar, content, footer, styles, containerRect, collectorRect, boxStatus, lastNotMinimizedBoxStatus, forceTop, forceNormal, isDragContent, }?: TeleBoxConfig);
     readonly id: string;
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     readonly namespace: string;
@@ -722,7 +743,7 @@ declare class TeleBoxCollector {
      * Unmount collector from the root element.
      */
     unmount(): this;
-    private hasMinimizedBox;
+    protected hasMinimizedBox(): boolean;
     updateBoxesStatus(): void;
     setVisible(visible: boolean): this;
     setReadonly(readonly: boolean): this;
@@ -765,7 +786,7 @@ interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "prefersColorScheme"
     /** Whether to use boxes status. */
     useBoxesStatus?: boolean;
 }
-type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex" | "boxStatus" | "lastNotMinimizedBoxStatus";
+type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex" | "boxStatus" | "lastNotMinimizedBoxStatus" | "forceTop" | "forceNormal" | "isDragContent";
 type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
 type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "id" | "focus">;
 type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer">;
@@ -803,7 +824,7 @@ interface TeleBoxManagerEvents extends EventEmitter<TeleBoxManagerEvent> {
     emit<U extends TeleBoxManagerEvent>(event: U, ...value: TeleBoxManagerEventConfig[U]): boolean;
 }
 
-type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box">;
+type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box" | "forceTop" | "forceNormal">;
 interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode: boolean;
     boxes: MaxTitleBarTeleBox[];
@@ -885,15 +906,26 @@ type ValConfig = {
 interface TeleBoxManager extends ValEnhancedResult<ValConfig> {
 }
 declare class TeleBoxManager {
-    private boxesStatus$;
-    private lastNotMinimizedBoxesStatus$;
-    private appMenu;
-    private useBoxesStatus;
-    private effectBoxesStatusTimer?;
-    private effectLastNotMinimizedBoxStatusTimer?;
+    protected boxesStatus$: Map<string, TeleBoxState>;
+    protected lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
+    protected appMenu: AppMenu | undefined;
+    protected useBoxesStatus: boolean;
+    protected effectBoxesStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
+    protected effectLastNotMinimizedBoxStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
     constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, useBoxesStatus, }?: TeleBoxManagerConfig);
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
+    get forceTopBoxes(): TeleBox | undefined;
+    get maxForceTopBox(): TeleBox | undefined;
+    get forceNormalBoxes(): TeleBox | undefined;
     readonly events: TeleBoxManagerEvents;
     protected _sideEffect: SideEffectManager;
     protected root: HTMLElement;
@@ -912,8 +944,8 @@ declare class TeleBoxManager {
     get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState>;
     setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate?: boolean): void;
     getBoxesStatus(): Map<string, TeleBoxState>;
-    private effectBoxStatusChange;
-    private effectBoxesStatusTimerFunc;
+    protected effectBoxStatusChange(): void;
+    protected effectBoxesStatusTimerFunc(skipUpdate: boolean): void;
     effectBoxesStatusChange(skipUpdate?: boolean): Promise<void>;
     hasBoxesStatus(): boolean;
     hasMinimizedBox(): boolean;
@@ -924,13 +956,16 @@ declare class TeleBoxManager {
     getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined;
     setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate?: boolean): void;
     setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate?: boolean): void;
-    private effectLastNotMinimizedBoxStatusChange;
-    private effectLastNotMinimizedBoxStatusFunc;
-    private getUnabledBoxesStatusZIndex;
+    protected effectLastNotMinimizedBoxStatusChange(skipUpdate?: boolean): Promise<void>;
+    protected effectLastNotMinimizedBoxStatusFunc(skipUpdate?: boolean): void;
+    protected getUnabledBoxesStatusZIndex(): number;
     /** Maximized box zIndex range: 100-299 */
     getMaxMaximizedBoxZIndex(): number;
     /** normal box zIndex range: 300-499 */
     getMaxNormalBoxZIndex(): number;
+    getMaxForceTopBoxZIndex(): number;
+    isForceNormal(box: TeleBox): boolean;
+    isForceTop(box: TeleBox): boolean;
     create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
     query(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox[];
     queryOne(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox | undefined;
@@ -957,7 +992,7 @@ declare class TeleBoxManager {
     protected updateBox(box: TeleBox, config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
     protected smartPosition(config?: TeleBoxConfig): TeleBoxConfig;
     protected makeBoxTop(box: TeleBox, skipUpdate?: boolean): void;
-    private getMaximizedTopBox;
+    protected getMaximizedTopBox(): MaxTitleBarTeleBox | undefined;
     protected makeMaximizedTopBoxFocus(): void;
     protected getBoxIndex(boxOrID: TeleBox | string): number;
     getBox(boxOrID: TeleBox | string): TeleBox | undefined;

package/dist/telebox-insider.cjs.js

@@ -1185,6 +1185,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) => {
@@ -1239,7 +1241,9 @@ class DefaultTitleBar {
     onDragStart,
     namespace = "telebox",
     state = TELE_BOX_STATE.Normal,
-    boxStatus
+    boxStatus,
+    forceTop = false,
+    forceNormal = false
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1313,7 +1317,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")
@@ -1327,7 +1338,7 @@ class DefaultTitleBar {
         type: TELE_BOX_DELEGATE_EVENT.Close,
         iconClassName: this.wrapClassName("titlebar-icon-close")
       }
-    ];
+    ]);
     this.$dragArea = this.renderDragArea();
   }
   setTitle(title) {
@@ -1500,7 +1511,10 @@ class TeleBox {
     },
     collectorRect,
     boxStatus,
-    lastNotMinimizedBoxStatus
+    lastNotMinimizedBoxStatus,
+    forceTop = false,
+    forceNormal = false,
+    isDragContent = false
   } = {}) {
     this._renderSideEffect = new o();
     this.handleTrackStart = (ev) => {
@@ -1567,6 +1581,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) {
@@ -1744,6 +1771,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);
@@ -1807,7 +1836,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$;
@@ -2144,6 +2176,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) => {
@@ -2621,7 +2656,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 [];
@@ -2963,6 +2998,9 @@ class TeleBoxManager {
       if (boxes.length > 0) {
         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;
           }
@@ -3313,6 +3351,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;
+    });
+  }
+  get forceNormalBoxes() {
+    return this.boxes.find((box) => box.forceNormal);
+  }
   get darkMode() {
     return this._darkMode$.value;
   }
@@ -3399,7 +3452,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);
@@ -3583,7 +3636,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;
@@ -3594,15 +3647,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) {
     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,
@@ -3630,13 +3700,16 @@ 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) {
               this.setBox(box2.id, {
                 status: TELE_BOX_STATE.Maximized,
@@ -3652,6 +3725,9 @@ class TeleBoxManager {
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
       if (box.boxStatus && this.useBoxesStatus) {
+        if (box._forceNormal$.value) {
+          return;
+        }
         if (box.focus) {
           this.blurBox(box);
         }
@@ -3701,6 +3777,9 @@ class TeleBoxManager {
       if (this.boxes.length > 0) {
         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;
           }
@@ -3930,13 +4009,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;
@@ -3950,7 +4043,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;