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

package/package.json

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

package/src/TeleBox/constants.ts

@@ -27,6 +27,8 @@ export enum TELE_BOX_EVENT {
     Maximized = "maximized",
     Readonly = "readonly",
     Destroyed = "destroyed",
+    BoxStatus = "box_status",
+    LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
 }
 
 export enum TELE_BOX_DELEGATE_EVENT {

package/src/TeleBox/index.ts

@@ -38,6 +38,7 @@ import type {
     TeleBoxCoord,
     TeleBoxSize,
     TeleBoxColorScheme,
+    NotMinimizedBoxState,
 } from "./typings";
 
 export * from "./constants";
@@ -108,6 +109,8 @@ export class TeleBox {
             height: window.innerHeight,
         },
         collectorRect,
+        boxStatus,
+        lastNotMinimizedBoxStatus
     }: TeleBoxConfig = {}) {
         this._sideEffect = new SideEffectManager();
         this._valSideEffectBinder = createSideEffectBinder(this._sideEffect);
@@ -117,6 +120,8 @@ export class TeleBox {
         this.namespace = namespace;
         this.events = new EventEmitter();
         this._delegateEvents = new EventEmitter();
+        const boxStatus$ = createVal<TeleBoxState | undefined, boolean>(boxStatus);
+        const lastNotMinimizedBoxStatus$ = createVal<NotMinimizedBoxState | undefined, boolean>(lastNotMinimizedBoxStatus);
 
         const prefersColorScheme$ = createVal<TeleBoxColorScheme, boolean>(
             prefersColorScheme
@@ -234,13 +239,14 @@ export class TeleBox {
         });
 
         const state$ = combine(
-            [minimized$, maximized$],
-            ([minimized, maximized]): TeleBoxState =>
+            [minimized$, maximized$, boxStatus$],
+            ([minimized, maximized, boxStatus]): TeleBoxState =>
                 minimized
                     ? TELE_BOX_STATE.Minimized
                     : maximized
                     ? TELE_BOX_STATE.Maximized
-                    : TELE_BOX_STATE.Normal
+                    : !boxStatus ? TELE_BOX_STATE.Normal
+                    : boxStatus
         );
         state$.reaction((state, _, skipUpdate) => {
             if (!skipUpdate) {
@@ -279,9 +285,9 @@ export class TeleBox {
         });
 
         const size$ = combine(
-            [intrinsicSize$, maximized$],
-            ([intrinsicSize, maximized]) => {
-                if (maximized) {
+            [intrinsicSize$, maximized$, boxStatus$],
+            ([intrinsicSize, maximized, boxStatus]) => {
+                if (maximized || boxStatus === TELE_BOX_STATE.Maximized) {
                     return { width: 1, height: 1 };
                 }
                 return intrinsicSize;
@@ -295,9 +301,9 @@ export class TeleBox {
         });
 
         const visualSize$ = combine(
-            [size$, minimized$, containerRect$, collectorRect$],
-            ([size, minimized, containerRect, collectorRect]) => {
-                if (minimized && collectorRect) {
+            [size$, minimized$, containerRect$, collectorRect$, boxStatus$],
+            ([size, minimized, containerRect, collectorRect, boxStatus]) => {
+                if ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect) {
                     return {
                         width:
                             collectorRect.width /
@@ -337,6 +343,8 @@ export class TeleBox {
                 collectorRect$,
                 minimized$,
                 maximized$,
+                boxStatus$,
+                lastNotMinimizedBoxStatus$,
             ],
             ([
                 intrinsicCoord,
@@ -345,9 +353,11 @@ export class TeleBox {
                 collectorRect,
                 minimized,
                 maximized,
+                boxStatus,
+                lastNotMinimizedBoxStatus,
             ]) => {
-                if (minimized && collectorRect) {
-                    if (maximized) {
+                if ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect) {
+                    if (maximized || lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized) {
                         return {
                             x:
                                 (collectorRect.x + collectorRect.width / 2) /
@@ -370,7 +380,7 @@ export class TeleBox {
                             intrinsicSize.height / 2,
                     };
                 }
-                if (maximized) {
+                if (maximized || boxStatus === TELE_BOX_STATE.Maximized) {
                     return { x: 0, y: 0 };
                 }
                 return intrinsicCoord;
@@ -389,6 +399,7 @@ export class TeleBox {
                 readonly: readonly$.value,
                 title: title$.value,
                 namespace: this.namespace,
+                boxStatus: boxStatus$.value,
                 onDragStart: (event) => this._handleTrackStart?.(event),
                 onEvent: (event): void => {
                     if (this._delegateEvents.listeners.length > 0) {
@@ -396,11 +407,15 @@ export class TeleBox {
                     } else {
                         switch (event.type) {
                             case TELE_BOX_DELEGATE_EVENT.Maximize: {
-                                maximized$.setValue(!maximized$.value);
+                                if (!boxStatus$.value) {
+                                    maximized$.setValue(!maximized$.value);
+                                }
                                 break;
                             }
                             case TELE_BOX_DELEGATE_EVENT.Minimize: {
-                                minimized$.setValue(true);
+                                if (!boxStatus$.value) {
+                                    minimized$.setValue(true);
+                                }
                                 break;
                             }
                             case TELE_BOX_DELEGATE_EVENT.Close: {
@@ -421,6 +436,9 @@ export class TeleBox {
         readonly$.reaction((readonly) => {
             this.titleBar.setReadonly(readonly);
         });
+        boxStatus$.reaction((boxStatus) => {
+            this.titleBar.setBoxStatus(boxStatus);
+        });
 
         const $userContent$ = createVal(content);
         const $userFooter$ = createVal(footer);
@@ -456,6 +474,8 @@ export class TeleBox {
         this._visualSize$ = visualSize$;
         this._coord$ = coord$;
         this._intrinsicCoord$ = intrinsicCoord$;
+        this._boxStatus$ = boxStatus$;
+        this._lastNotMinimizedBoxStatus$ = lastNotMinimizedBoxStatus$;
 
         if (this.fixRatio) {
             this.transform(
@@ -491,7 +511,20 @@ export class TeleBox {
     public _visualSize$: Val<TeleBoxSize, boolean>;
     public _coord$: Val<TeleBoxCoord, boolean>;
     public _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
+    public _boxStatus$: Val<TeleBoxState | undefined, boolean>;
+    public _lastNotMinimizedBoxStatus$: Val<NotMinimizedBoxState | undefined, boolean>;
+
+    public get boxStatus(): TeleBoxState | undefined {
+        return this._boxStatus$.value;
+    }
+
+    public set boxStatus(boxStatus: TeleBoxState | undefined) {
+        this._boxStatus$.setValue(boxStatus);
+    }
 
+    public get lastNotMinimizedBoxStatus(): NotMinimizedBoxState | undefined {
+        return this._lastNotMinimizedBoxStatus$.value;
+    }
     public get darkMode(): boolean {
         return this._darkMode$.value;
     }
@@ -524,6 +557,29 @@ export class TeleBox {
         return this;
     }
 
+    public setBoxStatus(boxStatus: TeleBoxState, skipUpdate = false): this {
+        if (boxStatus === TELE_BOX_STATE.Minimized) {
+            if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
+                this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
+            }
+        } else {
+            this.setLastNotMinimizedBoxStatus(undefined, skipUpdate);
+        }
+        this._boxStatus$.setValue(boxStatus, skipUpdate);
+        if (!skipUpdate) {
+            this.events.emit(TELE_BOX_EVENT.BoxStatus, {id: this.id, boxStatus});
+        }
+        return this;
+    }
+
+    public setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate = false): this {
+        this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
+        if (!skipUpdate) {
+            this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, {id: this.id, lastNotMinimizedBoxStatus});
+        }
+        return this;
+    }
+
     /** Minimum box width relative to container element. 0~1. Default 0. */
     public get minWidth(): number {
         return this._minSize$.value.width;
@@ -892,25 +948,26 @@ export class TeleBox {
                     this._minimized$,
                     this._containerRect$,
                     this._collectorRect$,
+                    this._boxStatus$,
                 ],
-                ([coord, size, minimized, containerRect, collectorRect]) => {
+                ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
                     const absoluteWidth = size.width * containerRect.width;
                     const absoluteHeight = size.height * containerRect.height;
                     return {
                         width:
                             absoluteWidth +
-                            (minimized && collectorRect ? 1 : 0),
+                            ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
                         height:
                             absoluteHeight +
-                            (minimized && collectorRect ? 1 : 0),
+                            ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
                         x: coord.x * containerRect.width,
                         y: coord.y * containerRect.height,
                         scaleX:
-                            minimized && collectorRect
+                            (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect
                                 ? collectorRect.width / absoluteWidth
                                 : 1,
                         scaleY:
-                            minimized && collectorRect
+                            (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect
                                 ? collectorRect.height / absoluteHeight
                                 : 1,
                     };

package/src/TeleBox/typings.ts

@@ -17,6 +17,8 @@ export type TeleBoxSize = { width: number; height: number };
 
 export type TeleBoxState = `${TELE_BOX_STATE}`;
 
+export type NotMinimizedBoxState = `${Exclude<TELE_BOX_STATE, TELE_BOX_STATE.Minimized>}`;
+
 export interface TeleBoxRect {
     readonly x: number;
     readonly y: number;
@@ -81,6 +83,10 @@ export interface TeleBoxConfig {
     readonly containerRect?: TeleBoxRect;
     /** Position and dimension of collector */
     readonly collectorRect?: TeleBoxRect;
+    /** Status of boxes. */
+    readonly boxStatus?: TeleBoxState;
+    /** Last not minimized box status. */
+    readonly lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
 }
 
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
@@ -102,6 +108,8 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     maximized: boolean;
     readonly: boolean;
     destroyed: void;
+    box_status: { id: string; boxStatus: TeleBoxState };
+    last_not_minimized_box_status: { id: string; lastNotMinimizedBoxStatus?: NotMinimizedBoxState };
 }>;
 
 export type TeleBoxEvent = keyof TeleBoxEventConfig;

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -5,16 +5,18 @@ 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">;
+export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode: boolean;
     boxes: MaxTitleBarTeleBox[];
     containerRect: TeleBoxRect;
     focusedBox?: MaxTitleBarTeleBox;
+    boxesStatus?: Map<string, TeleBoxState>;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
+    public boxesStatus?: Map<string, TeleBoxState>;
     public constructor(config: MaxTitleBarConfig) {
         super(config);
 
@@ -22,34 +24,74 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.focusedBox = config.focusedBox;
         this.containerRect = config.containerRect;
         this.darkMode = config.darkMode;
+        this.boxesStatus = config.boxesStatus;
     }
 
+    public hasMaximizedBoxInStatus(): boolean {
+        if (!this.boxesStatus || this.boxesStatus.size === 0) {
+            return false
+        }
+        const hasMaximizedBox = [...this.boxesStatus.values()].find((state) => state === TELE_BOX_STATE.Maximized);
+        return !!hasMaximizedBox;
+    }
+
+    public get MaximizedBoxes(): MaxTitleBarTeleBox[] {
+        if (!this.boxesStatus || this.boxesStatus.size === 0) {
+            return [];
+        }
+        return this.boxes.filter((box) => this.boxesStatus && this.boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+    }
+
+    /**
+     * 设置MaxTitleBar的focusedBox
+     * @param box 如果box为空，则全部失去焦点
+     * @returns 
+     */
     public focusBox(box?: MaxTitleBarTeleBox): void {
         if (this.focusedBox && this.focusedBox === box) {
             return;
         }
-
-        if (this.$titles && this.state === TELE_BOX_STATE.Maximized) {
+        if (this.$titles) {
             const { children } = this.$titles.firstElementChild as HTMLElement;
-            for (let i = children.length - 1; i >= 0; i -= 1) {
-                const $tab = children[i] as HTMLElement;
-                const id = $tab.dataset?.teleBoxID;
-                if (id) {
-                    if (box && id === box.id) {
-                        $tab.classList.toggle(
-                            this.wrapClassName("titles-tab-focus"),
-                            true
-                        );
-                    } else if (this.focusedBox && id === this.focusedBox.id) {
-                        $tab.classList.toggle(
-                            this.wrapClassName("titles-tab-focus"),
-                            false
-                        );
+            if (this.state === TELE_BOX_STATE.Maximized && !this.hasMaximizedBoxInStatus()) {
+                for (let i = children.length - 1; i >= 0; i -= 1) {
+                    const $tab = children[i] as HTMLElement;
+                    const id = $tab.dataset?.teleBoxID;
+                    if (id) {
+                        if (box && id === box.id) {
+                            $tab.classList.toggle(
+                                this.wrapClassName("titles-tab-focus"),
+                                true
+                            );
+                        } else if (this.focusedBox && id === this.focusedBox.id) {
+                            $tab.classList.toggle(
+                                this.wrapClassName("titles-tab-focus"),
+                                false
+                            );
+                        }
+                    }
+                }
+            } else if (this.hasMaximizedBoxInStatus()) {
+                for (let i = children.length - 1; i >= 0; i -= 1) {
+                    const $tab = children[i] as HTMLElement;
+                    const id = $tab.dataset?.teleBoxID;
+                    if (id) {
+                        if (box && id === box.id) {
+                            $tab.classList.toggle(
+                                this.wrapClassName("titles-tab-focus"),
+                                true
+                            );
+                        } else if (this.focusedBox && id === this.focusedBox.id) {
+                            $tab.classList.toggle(
+                                this.wrapClassName("titles-tab-focus"),
+                                false
+                            );
+                        }
                     }
                 }
             }
         }
-        this.focusedBox = box;
+        this.focusedBox = box;  
     }
 
     public setContainerRect(rect: TeleBoxRect): void {
@@ -61,12 +103,26 @@ export class MaxTitleBar extends DefaultTitleBar {
         }
     }
 
+    public setBoxesStatus(boxesStatus: Map<string, TeleBoxState>): void {
+        this.boxesStatus = boxesStatus;
+        if (this.hasMaximizedBoxInStatus()) {
+            this.setBoxStatus(TELE_BOX_STATE.Maximized);
+        }
+        if (this.$titleBar) {
+            this.$titleBar.classList.toggle(
+                this.wrapClassName("max-titlebar-maximized"),
+                this.state === TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus()
+            );
+        }
+        this.updateTitles();
+    }
+
     public setBoxes(boxes: MaxTitleBarTeleBox[]): void {
         this.boxes = boxes;
         if (this.$titleBar) {
             this.$titleBar.classList.toggle(
                 this.wrapClassName("max-titlebar-maximized"),
-                this.state === TELE_BOX_STATE.Maximized && boxes.length > 0
+                this.state === TELE_BOX_STATE.Maximized && boxes.length > 0 || this.hasMaximizedBoxInStatus()
             );
         }
         this.updateTitles();
@@ -77,7 +133,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         if (this.$titleBar) {
             this.$titleBar.classList.toggle(
                 this.wrapClassName("max-titlebar-maximized"),
-                state === TELE_BOX_STATE.Maximized && this.boxes.length > 0
+                (state === TELE_BOX_STATE.Maximized && this.boxes.length > 0) || this.hasMaximizedBoxInStatus()
             );
         }
         this.updateTitles();
@@ -148,12 +204,12 @@ export class MaxTitleBar extends DefaultTitleBar {
     }
 
     public updateTitles(): void {
-        if (this.$titleBar && this.state === TELE_BOX_STATE.Maximized) {
+        if (this.$titleBar && (this.state === TELE_BOX_STATE.Maximized || this.hasMaximizedBoxInStatus())) {
             this.$titleBar.classList.toggle(
                 this.wrapClassName("max-titlebar-single-title"),
-                this.boxes.length === 1
+                this.boxes.length === 1 || (this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1)
             );
-            if (this.boxes.length === 1) {
+            if (this.boxes.length === 1 || (this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1)) {
                 this.setTitle(this.boxes[0].title);
             } else {
                 this.$titleBar.replaceChild(
@@ -182,7 +238,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         $content.className = this.wrapClassName("titles-content");
         this.$titles.appendChild($content);
 
-        this.boxes.forEach((box) => {
+        (this.hasMaximizedBoxInStatus() ? this.MaximizedBoxes : this.boxes).forEach((box) => {
             const $tab = document.createElement("button");
             $tab.className = this.wrapClassName("titles-tab");
             $tab.textContent = box.title;

package/src/TeleBoxManager/constants.ts

@@ -14,4 +14,6 @@ export enum TELE_BOX_MANAGER_EVENT {
     ZIndex = "z_index",
     PrefersColorScheme = "prefers_color_scheme",
     DarkMode = "dark_mode",
+    BoxStatus = "box_status",
+    LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
 }