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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.0-beta.8",
+  "version": "0.3.0",
   "private": false,
   "description": "Window widget for Whiteboard",
   "author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",

package/src/AppMenu/index.ts

@@ -111,7 +111,6 @@ export class AppMenu {
   private createMinimizedItem(appId: 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'));

package/src/TeleBox/constants.ts

@@ -29,6 +29,8 @@ export enum TELE_BOX_EVENT {
     Destroyed = "destroyed",
     BoxStatus = "box_status",
     LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
+    ForceTop = "force_top",
+    ForceNormal = "force_normal",
 }
 
 export enum TELE_BOX_DELEGATE_EVENT {

package/src/TeleBox/index.ts

@@ -72,6 +72,12 @@ type ValConfig = {
     $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>;
 };
 export interface TeleBox extends ValEnhancedResult<ValConfig> {}
 
@@ -110,7 +116,10 @@ export class TeleBox {
         },
         collectorRect,
         boxStatus,
-        lastNotMinimizedBoxStatus
+        lastNotMinimizedBoxStatus,
+        forceTop = false,
+        forceNormal = false,
+        isDragContent = false,
     }: TeleBoxConfig = {}) {
         this._sideEffect = new SideEffectManager();
         this._valSideEffectBinder = createSideEffectBinder(this._sideEffect);
@@ -182,6 +191,21 @@ export class TeleBox {
         const containerRect$ = createVal(containerRect, shallowequal);
         const collectorRect$ = createVal(collectorRect, shallowequal);
 
+        const forceTop$ = createVal(forceTop);
+        forceTop$.reaction((forceTop, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.ForceTop, forceTop || false);
+            }
+        });
+
+        const forceNormal$ = createVal(forceNormal);
+        forceNormal$.reaction((forceNormal, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.ForceNormal, forceNormal || false);
+            }
+        });
+        const isDragContent$ = createVal(isDragContent);
+
         const title$ = createVal(title);
         title$.reaction((title, _, skipUpdate) => {
             if (!skipUpdate) {
@@ -400,6 +424,8 @@ export class TeleBox {
                 title: title$.value,
                 namespace: this.namespace,
                 boxStatus: boxStatus$.value,
+                forceTop: forceTop$.value,
+                forceNormal: forceNormal$.value,
                 onDragStart: (event) => this._handleTrackStart?.(event),
                 onEvent: (event): void => {
                     if (this._delegateEvents.listeners.length > 0) {
@@ -463,6 +489,9 @@ export class TeleBox {
             $userContent: $userContent$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
+            forceTop: forceTop$,
+            forceNormal: forceNormal$,
+            isDragContent: isDragContent$,
         };
 
         withValueEnhancer(this, valConfig);
@@ -989,6 +1018,7 @@ export class TeleBox {
         $titleBar.appendChild(this.titleBar.render());
         this.$titleBar = $titleBar;
 
+
         const $contentWrap = document.createElement("div");
         $contentWrap.className = this.wrapClassName("content-wrap");
 
@@ -996,6 +1026,9 @@ export class TeleBox {
         $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: HTMLStyleElement | undefined;

package/src/TeleBox/typings.ts

@@ -87,6 +87,12 @@ export 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;
@@ -110,6 +116,8 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     destroyed: void;
     box_status: { id: string; boxStatus: TeleBoxState };
     last_not_minimized_box_status: { id: string; lastNotMinimizedBoxStatus?: NotMinimizedBoxState };
+    force_normal: boolean;
+    force_top: boolean;
 }>;
 
 export type TeleBoxEvent = keyof TeleBoxEventConfig;

package/src/TeleBoxCollector/index.ts

@@ -15,6 +15,7 @@ export interface TeleBoxCollectorConfig {
 }
 
 export class TeleBoxCollector {
+    static readonly kind = "TeleBoxCollector";
     public getBoxesStatus?: () => Map<string, TeleBoxState>;
     public constructor({
         visible = true,
@@ -79,7 +80,7 @@ export class TeleBoxCollector {
         return this;
     }
 
-    private hasMinimizedBox(): boolean {
+    protected hasMinimizedBox(): boolean {
         const boxesStatus = this.boxesStatus;
         if (boxesStatus) {
            for (const status of boxesStatus.values()) {

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -5,7 +5,7 @@ import { DefaultTitleBar, DefaultTitleBarConfig } from "../../TeleTitleBar";
 import { TELE_BOX_STATE } from "../../TeleBox/constants";
 import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
 
-export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box">;
+export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box" | "forceTop" | "forceNormal">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode: boolean;
@@ -45,7 +45,7 @@ export 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 [];

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -16,7 +16,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 10;
+    z-index: $base-z-index * 3 - 1;
 
     .#{$namespace}-title {
         display: none;

package/src/TeleBoxManager/index.ts

@@ -48,16 +48,17 @@ type ValConfig = {
 export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
 
 export class TeleBoxManager {
-    private boxesStatus$: Map<string, TeleBoxState>;
-    private lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
-    private appMenu: AppMenu | undefined;
-    private useBoxesStatus: boolean;
-    private effectBoxesStatusTimer?: {
+    static readonly kind = "TeleBoxManager";
+    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;
     }
-    private effectLastNotMinimizedBoxStatusTimer?: {
+    protected effectLastNotMinimizedBoxStatusTimer?: {
         skipUpdate: boolean;
         timer: number | undefined;
         resolve?: (skipUpdate: boolean) => void;
@@ -90,9 +91,11 @@ export class TeleBoxManager {
         this.boxes$ = createVal<TeleBox[]>([]);
         this.topBox$ = this.boxes$.derive((boxes) => {
             if (boxes.length > 0) {
-                console.log("topBox===>topBox$===>000");
                 let currentTopBox: TeleBox | undefined = undefined;
                 const topBox = boxes.reduce((topBox, box) => {
+                    if (box.forceTop) {
+                        return topBox;
+                    }
                     if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
                         return topBox;
                     }
@@ -102,7 +105,6 @@ export class TeleBoxManager {
                     }
                     return topBox.zIndex > box.zIndex ? topBox : box;
                 }, currentTopBox as (TeleBox | undefined));
-                console.log("topBox===>topBox$===>end", topBox?.id);
                 return topBox;
             }
             return;
@@ -331,7 +333,6 @@ export class TeleBoxManager {
                                 this.makeMaximizedTopBoxFocus();
                             }
                         } 
-                        console.log("checkFocusBox===>", box.id);
                         this.focusBox(box);
                         return;
                     }
@@ -396,7 +397,7 @@ export 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;
                                     }
@@ -426,7 +427,7 @@ export 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;
                                     }
@@ -490,6 +491,23 @@ export class TeleBoxManager {
         return this.topBox$.value;
     }
 
+    public get forceTopBoxes(): TeleBox | undefined {
+        return this.boxes.find((box) => box.forceTop);
+    }
+
+    public get maxForceTopBox(): TeleBox | undefined {
+        return this.boxes.reduce<TeleBox | undefined>((maxTopBox, box) => {
+            if (box.forceTop && box.zIndex > (maxTopBox?.zIndex ?? 0)) {
+                return box;
+            }
+            return maxTopBox;
+        }, undefined);
+    }
+
+    public get forceNormalBoxes(): TeleBox | undefined {
+        return this.boxes.find((box) => box.forceNormal);
+    }
+
     public readonly events = new EventEmitter() as TeleBoxManagerEvents;
 
     protected _sideEffect: SideEffectManager;
@@ -575,7 +593,7 @@ export class TeleBoxManager {
         return this.boxesStatus$;
     }
 
-    private effectBoxStatusChange(){
+    protected effectBoxStatusChange(){
         if (!this.useBoxesStatus) {
             return;
         }
@@ -593,7 +611,7 @@ export class TeleBoxManager {
         }
     }
 
-    private effectBoxesStatusTimerFunc(skipUpdate: boolean){
+    protected effectBoxesStatusTimerFunc(skipUpdate: boolean){
         if (!this.useBoxesStatus) {
             return;
         }
@@ -602,7 +620,7 @@ export class TeleBoxManager {
         this.boxes.forEach((box) => {
             const boxStatus = this.boxesStatus$.get(box.id);
             if (boxStatus) {
-                if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > (newTopBox?.zIndex ?? 0)) {
+                if (boxStatus !== TELE_BOX_STATE.Minimized && !this.isForceTop(box) && box.zIndex > (newTopBox?.zIndex ?? 0)) {
                     newTopBox = box;
                 }
                 box.setBoxStatus(boxStatus, skipUpdate);
@@ -611,11 +629,9 @@ export class TeleBoxManager {
         this.effectBoxStatusChange();
         if (newTopBox && curTopBox !== newTopBox) {
             this.topBox$.setValue(newTopBox);
-            this.focusBox(newTopBox, skipUpdate);
         }
         if (!newTopBox && curTopBox) {
             this.topBox$.setValue(undefined);
-            this.blurBox(curTopBox, skipUpdate);
         }
     }
 
@@ -634,11 +650,9 @@ export class TeleBoxManager {
             if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
                 clearTimeout(this.effectBoxesStatusTimer.timer);
                 if (this.effectBoxesStatusTimer.resolve) {
-                    console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
                     this.effectBoxesStatusTimer.resolve(!!this.effectBoxesStatusTimer?.skipUpdate);
                 }
                 this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
-                console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
             } else {
                 return;
             }
@@ -658,15 +672,12 @@ export class TeleBoxManager {
                 this.effectBoxesStatusTimer!.resolve = resolve;
                 this.effectBoxesStatusTimer!.timer = setTimeout(()=>{
                     if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
-                        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.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer!.skipUpdate);
                     }
                 }, 100) as unknown as number;
             })
-            console.log("effectBoxStatusTimerFunc===>000==>00", 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.effectBoxesStatusTimerFunc(_skipUpdate)
             this.effectBoxesStatusTimer = undefined;
-            console.log("effectBoxStatusTimerFunc===>000==>11", 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})));
         }
     }
     
@@ -744,7 +755,7 @@ export class TeleBoxManager {
         this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
     }
 
-    private async effectLastNotMinimizedBoxStatusChange(skipUpdate = false): Promise<void> {
+    protected async effectLastNotMinimizedBoxStatusChange(skipUpdate = false): Promise<void> {
         if (!this.useBoxesStatus) {
             if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
                 clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
@@ -760,11 +771,9 @@ export class TeleBoxManager {
             if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
                 // this.effectLastNotMinimizedBoxStatusFunc(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate)
                 if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-                    console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
                     this.effectLastNotMinimizedBoxStatusTimer.resolve(!!this.effectLastNotMinimizedBoxStatusTimer?.skipUpdate);
                 }
                 this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
-                console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
             } else {
                 return;
             }
@@ -784,23 +793,19 @@ export 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) as unknown as number;
             })
-            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 = undefined;
-            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})));
         }
     }
 
-    private effectLastNotMinimizedBoxStatusFunc(skipUpdate = false){
+    protected 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){
@@ -809,26 +814,17 @@ export class TeleBoxManager {
         });
     }
 
-    private getUnabledBoxesStatusZIndex(): number {
+    protected getUnabledBoxesStatusZIndex(): number {
         return this.topBox ? this.topBox.zIndex : 99;
     }
 
-    // private getTopBoxZIndex(): number {
-    //     if (!this.useBoxesStatus) {
-    //         return this.getUnabledBoxesStatusZIndex();
-    //     }
-    //     return [...this.boxes].filter((box) => box.boxStatus !== TELE_BOX_STATE.Minimized).reduce((maxZIndex, box) => {
-    //         return Math.max(maxZIndex, box.zIndex);
-    //     }, 100);
-    // }
-
     /** Maximized box zIndex range: 100-299 */
     public getMaxMaximizedBoxZIndex(): number {
         if (!this.useBoxesStatus) {
             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;
@@ -841,20 +837,39 @@ export 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);
     }
 
+    public getMaxForceTopBoxZIndex(): number {
+        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);
+    }
+
+    public isForceNormal(box: TeleBox): boolean {
+        return box._forceNormal$.value;
+    }
+
+    public isForceTop(box: TeleBox): boolean {
+        return box._forceTop$.value;
+    }
+
     public create(
         config: TeleBoxManagerCreateConfig = {},
         smartPosition = true
     ): ReadonlyTeleBox {
-        console.log("create===>", config, this.topBox?.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,
@@ -887,6 +902,9 @@ export 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,
@@ -894,9 +912,8 @@ export class TeleBoxManager {
                     }, false);
                 } else {
                     // 所有normal box都最大化
-                    [...this.boxes].filter((box) => box.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box) => {
+                    [...this.boxes].filter((box) => box.boxStatus === TELE_BOX_STATE.Normal && !this.isForceNormal(box)).sort((a, b) => a.zIndex - b.zIndex).forEach((box) => {
                         if (box.boxStatus === TELE_BOX_STATE.Normal) {
-                            console.log("maximized===>", box.id);
                             this.setBox(box.id, {
                                 status: TELE_BOX_STATE.Maximized,
                                 zIndex: this.getMaxMaximizedBoxZIndex() + 1
@@ -912,10 +929,11 @@ export class TeleBoxManager {
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
             if (box.boxStatus && this.useBoxesStatus) {
-                if (this.topBox === box) {
-                    if (this.topBox?.focus) {
-                        this.blurBox(this.topBox);
-                    }
+                if (box._forceNormal$.value) {
+                    return;
+                }
+                if(box.focus) {
+                    this.blurBox(box);
                 }
                 this.setBox(box, {
                     status: TELE_BOX_STATE.Minimized,
@@ -929,6 +947,9 @@ export class TeleBoxManager {
             }
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+            if (this.useBoxesStatus && box.focus) {
+                this.blurBox(box);
+            }
             this.remove(box);
             this.focusTopBox();
         });
@@ -959,9 +980,11 @@ export class TeleBoxManager {
         });
         box._zIndex$.reaction((_, __, skipUpdate) => {
             if (this.boxes.length > 0) {
-                console.log("topBox===>_zIndex", this.boxes.map((box) => ({id: box.id, zIndex: box.zIndex, boxStatus: box.boxStatus})));
                 let currentTopBox: TeleBox | undefined = undefined;
                 const topBox = this.boxes.reduce((topBox, box) => {
+                    if (this.isForceTop(box)) {
+                        return topBox;
+                    }
                     if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
                         return topBox;
                     }
@@ -971,7 +994,6 @@ export class TeleBoxManager {
                     }
                     return topBox.zIndex > box.zIndex ? topBox : box;
                 }, currentTopBox as (TeleBox | undefined));
-                console.log("topBox===>_zIndex===>end", topBox?.id);
                 this.topBox$.setValue(topBox);
             }
             if (!skipUpdate) {
@@ -1246,6 +1268,12 @@ export class TeleBoxManager {
                 lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
             }, skipUpdate);
         }
+        if (config.forceTop != null) {
+            box.setForceTop(config.forceTop, skipUpdate);
+        }
+        if (config.forceNormal != null) {
+            box.setForceNormal(config.forceNormal, skipUpdate);
+        }
     }
 
     protected smartPosition(config: TeleBoxConfig = {}): TeleBoxConfig {
@@ -1254,7 +1282,18 @@ export class TeleBoxManager {
 
         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 >
@@ -1273,8 +1312,20 @@ export 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 (
@@ -1307,7 +1358,7 @@ export class TeleBoxManager {
         }
     }
 
-    private getMaximizedTopBox(): MaxTitleBarTeleBox | undefined {
+    protected getMaximizedTopBox(): MaxTitleBarTeleBox | undefined {
         if (!this.useBoxesStatus) {
             return undefined;
         }
@@ -1328,9 +1379,7 @@ export class TeleBoxManager {
             return;
         }
         const maximizedBox: MaxTitleBarTeleBox | undefined = this.getMaximizedTopBox();
-        console.log("makeMaximizedTopBoxFocus===>", maximizedBox?.id);
         this.maxTitleBar.focusBox(maximizedBox);
-        console.log("makeMaximizedTopBoxFocus===>end", maximizedBox?.id);
     }
 
     protected getBoxIndex(boxOrID: TeleBox | string): number {

package/src/TeleBoxManager/typings.ts

@@ -38,7 +38,10 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "fixRatio"
     | "zIndex"
     | "boxStatus"
-    | "lastNotMinimizedBoxStatus";
+    | "lastNotMinimizedBoxStatus"
+    | "forceTop"
+    | "forceNormal"
+    | "isDragContent";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,