@netless/telebox-insider 0.3.0-beta.11 → 0.3.0-beta.13

package/package.json

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

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/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/index.ts

@@ -92,6 +92,9 @@ export class TeleBoxManager {
             if (boxes.length > 0) {
                 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;
                     }
@@ -487,6 +490,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;
@@ -599,7 +619,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);
@@ -803,7 +823,7 @@ export 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;
@@ -816,19 +836,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 {
         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,
@@ -861,6 +901,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,
@@ -868,7 +911,7 @@ 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) {
                             this.setBox(box.id, {
                                 status: TELE_BOX_STATE.Maximized,
@@ -885,6 +928,9 @@ export 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);
                 }
@@ -935,6 +981,9 @@ export class TeleBoxManager {
             if (this.boxes.length > 0) {
                 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;
                     }
@@ -1218,6 +1267,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 {
@@ -1226,7 +1281,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 >
@@ -1245,8 +1311,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 (

package/src/TeleBoxManager/typings.ts

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

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -27,6 +27,8 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
 
 export class DefaultTitleBar implements TeleTitleBar {
     protected boxStatus?: TeleBoxState;
+    protected forceTop?: boolean;
+    protected forceNormal?: boolean;
     public constructor({
         readonly = false,
         title,
@@ -36,7 +38,9 @@ export class DefaultTitleBar implements TeleTitleBar {
         namespace = "telebox",
         state = TELE_BOX_STATE.Normal,
         boxStatus,
-    }: DefaultTitleBarConfig = {}) {
+        forceTop = false,
+        forceNormal = false,
+    }: DefaultTitleBarConfig = {}) {    
         this.readonly = readonly;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
@@ -44,23 +48,29 @@ export class DefaultTitleBar implements TeleTitleBar {
         this.title = title;
         this.state = state;
         this.boxStatus = boxStatus;
+        this.forceTop = forceTop;
+        this.forceNormal = forceNormal;
 
-        this.buttons = buttons || [
-            {
-                type: TELE_BOX_DELEGATE_EVENT.Minimize,
-                iconClassName: this.wrapClassName("titlebar-icon-minimize"),
-            },
-            {
-                type: TELE_BOX_DELEGATE_EVENT.Maximize,
-                iconClassName: this.wrapClassName("titlebar-icon-maximize"),
-                isActive: (state) => state === TELE_BOX_STATE.Maximized,
-            },
-            {
+        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"),
+                }, 
+                {
+                    type: TELE_BOX_DELEGATE_EVENT.Maximize,
+                    iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+                    isActive: (state) => state === TELE_BOX_STATE.Maximized,
+                },
+                {
+                    type: TELE_BOX_DELEGATE_EVENT.Close,
+                    iconClassName: this.wrapClassName("titlebar-icon-close"),
+                },
+            ]);
         this.$dragArea = this.renderDragArea();
     }
 
@@ -70,7 +80,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $title: HTMLElement | undefined;
 
-    public $dragArea: HTMLElement;
+    public readonly $dragArea: HTMLElement;
 
     public setTitle(title: string): void {
         this.title = title;
@@ -137,7 +147,6 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             $titleArea.appendChild(this.$title);
             $titleArea.appendChild(this.$dragArea);
-
             const $buttonsContainer = document.createElement("div");
             $buttonsContainer.className = this.wrapClassName("titlebar-btns");
 

package/src/TeleTitleBar/typings.ts

@@ -12,11 +12,14 @@ export interface TeleTitleBarConfig {
     title?: string;
     state?: TeleBoxState;
     namespace?: string;
+    forceTop?: boolean;
+    forceNormal?: boolean;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
 
 export interface TeleTitleBar {
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
 
     setState(state: TeleBoxState): void;