@netless/telebox-insider 0.2.7 → 0.2.11

package/src/TeleBoxManager/index.ts

@@ -17,7 +17,11 @@ import type {
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
-import { TELE_BOX_DELEGATE_EVENT } from "..";
+import {
+    TeleBoxColorScheme,
+    TELE_BOX_COLOR_SCHEME,
+    TELE_BOX_DELEGATE_EVENT,
+} from "..";
 import { SideEffectManager } from "side-effect-manager";
 import {
     createSideEffectBinder,
@@ -30,6 +34,7 @@ export * from "./typings";
 export * from "./constants";
 
 type ValConfig = {
+    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collector: Val<TeleBoxCollector | null>;
     readonly: Val<boolean, boolean>;
@@ -42,6 +47,7 @@ export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
 export class TeleBoxManager {
     public constructor({
         root = document.body,
+        prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
         fence = true,
@@ -63,6 +69,58 @@ export class TeleBoxManager {
         this.namespace = namespace;
         this.zIndex = zIndex;
 
+        this.boxes$ = createVal<TeleBox[]>([]);
+        this.topBox$ = this.boxes$.derive((boxes) => {
+            if (boxes.length > 0) {
+                const topBox = boxes.reduce((topBox, box) =>
+                    topBox.zIndex > box.zIndex ? topBox : box
+                );
+                return topBox;
+            }
+            return;
+        });
+
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const prefersDark$ = createVal(false);
+
+        if (prefersDark) {
+            prefersDark$.setValue(prefersDark.matches);
+            this._sideEffect.add(() => {
+                const handler = (evt: MediaQueryListEvent): void => {
+                    prefersDark$.setValue(evt.matches);
+                };
+                prefersDark.addListener(handler);
+                return () => prefersDark.removeListener(handler);
+            });
+        }
+
+        const prefersColorScheme$ = createVal(prefersColorScheme);
+        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
+            this.boxes.forEach((box) =>
+                box.setPrefersColorScheme(prefersColorScheme, skipUpdate)
+            );
+            if (!skipUpdate) {
+                this.events.emit(
+                    TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
+                    prefersColorScheme
+                );
+            }
+        });
+
+        this._darkMode$ = combine(
+            [prefersDark$, prefersColorScheme$],
+            ([prefersDark, prefersColorScheme]) =>
+                prefersColorScheme === "auto"
+                    ? prefersDark
+                    : prefersColorScheme === "dark"
+        );
+        this._darkMode$.reaction((darkMode, _, skipUpdate) => {
+            this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+            }
+        });
+
         const readonly$ = createVal(readonly);
         readonly$.reaction((readonly, _, skipUpdate) => {
             this.boxes.forEach((box) => box.setReadonly(readonly, skipUpdate));
@@ -123,6 +181,7 @@ export class TeleBoxManager {
             if (collector) {
                 collector.setVisible(minimized$.value);
                 collector.setReadonly(readonly$.value);
+                collector.setDarkMode(this._darkMode$.value);
                 this._sideEffect.add(() => {
                     collector.onClick = () => {
                         if (!readonly$.value) {
@@ -136,6 +195,9 @@ export class TeleBoxManager {
         readonly$.subscribe((readonly) =>
             collector$.value?.setReadonly(readonly)
         );
+        this._darkMode$.subscribe((darkMode) => {
+            collector$.value?.setDarkMode(darkMode);
+        });
 
         minimized$.subscribe((minimized, _, skipUpdate) => {
             collector$.value?.setVisible(minimized);
@@ -170,6 +232,8 @@ export class TeleBoxManager {
             }
         });
 
+        const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
+
         const checkFocusBox = (ev: MouseEvent | TouchEvent): void => {
             if (readonly$.value) {
                 return;
@@ -185,11 +249,14 @@ export class TeleBoxManager {
                 el;
                 el = el.parentElement
             ) {
+                if (el.classList && el.classList.contains(closeBtnClassName)) {
+                    return;
+                }
                 const id = el.dataset?.teleBoxID;
                 if (id) {
-                    const box = this.boxes.find((box) => box.id === id);
+                    const box = this.getBox(id);
                     if (box) {
-                        this.focusBox({ focus: true, box });
+                        this.focusBox(box);
                         return;
                     }
                 }
@@ -210,11 +277,11 @@ export class TeleBoxManager {
         );
 
         this.maxTitleBar = new MaxTitleBar({
+            darkMode: this.darkMode,
             readonly: readonly$.value,
             namespace: this.namespace,
             state: state$.value,
-            boxes: this.boxes,
-            focusedBox: this._focusedBox,
+            boxes: this.boxes$.value,
             containerRect: containerRect$.value,
             onEvent: (event): void => {
                 switch (event.type) {
@@ -227,12 +294,7 @@ export class TeleBoxManager {
                         break;
                     }
                     case TELE_BOX_EVENT.Close: {
-                        const box =
-                            this._focusedBox ??
-                            this.boxes[this.boxes.length - 1];
-                        if (box) {
-                            this.remove(box.id);
-                        }
+                        this.removeTopBox();
                         break;
                     }
                     default: {
@@ -244,8 +306,15 @@ export class TeleBoxManager {
         readonly$.subscribe((readonly) =>
             this.maxTitleBar.setReadonly(readonly)
         );
+        this._darkMode$.subscribe((darkMode) => {
+            this.maxTitleBar.setDarkMode(darkMode);
+        });
+        this.boxes$.reaction((boxes) => {
+            this.maxTitleBar.setBoxes(boxes);
+        });
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
             containerRect: containerRect$,
             collector: collector$,
             readonly: readonly$,
@@ -261,6 +330,14 @@ export class TeleBoxManager {
         this.root.appendChild(this.maxTitleBar.render());
     }
 
+    public get boxes(): ReadonlyArray<TeleBox> {
+        return this.boxes$.value;
+    }
+
+    public get topBox(): TeleBox | undefined {
+        return this.topBox$.value;
+    }
+
     public readonly events = new EventEmitter() as TeleBoxManagerEvents;
 
     protected _sideEffect: SideEffectManager;
@@ -271,6 +348,12 @@ export class TeleBoxManager {
 
     public zIndex: number;
 
+    public _darkMode$: Val<boolean, boolean>;
+
+    public get darkMode(): boolean {
+        return this._darkMode$.value;
+    }
+
     public _state$: Val<TeleBoxState, boolean>;
 
     public get state(): TeleBoxState {
@@ -299,16 +382,30 @@ export class TeleBoxManager {
         return this;
     }
 
-    public create(config?: TeleBoxManagerCreateConfig): ReadonlyTeleBox {
-        const box = new TeleBox(this.wrapCreateConfig(config));
+    public create(
+        config: TeleBoxManagerCreateConfig = {},
+        smartPosition = true
+    ): ReadonlyTeleBox {
+        const box = new TeleBox({
+            zIndex: this.zIndex,
+            ...(smartPosition ? this.smartPosition(config) : config),
+            darkMode: this.darkMode,
+            prefersColorScheme: this.prefersColorScheme,
+            maximized: this.maximized,
+            minimized: this.minimized,
+            fence: this.fence,
+            namespace: this.namespace,
+            containerRect: this.containerRect,
+            readonly: this.readonly,
+        });
+
         box.mount(this.root);
-        this.boxes.push(box);
 
         if (box.focus) {
-            this.focusBox({ focus: true, box, increaseZIndex: false });
+            this.focusBox(box);
         }
 
-        this.maxTitleBar.setBoxes(this.boxes);
+        this.boxes$.setValue([...this.boxes, box]);
 
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
             this.setMaximized(!this.maximized);
@@ -317,8 +414,7 @@ export class TeleBoxManager {
             this.setMinimized(true);
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
-            this.focusBox({ focus: false, box });
-            this.remove(box.id);
+            this.remove(box);
         });
         box.events.on(TELE_BOX_EVENT.Move, () => {
             this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
@@ -375,16 +471,16 @@ export class TeleBoxManager {
     }
 
     public remove(
-        boxID: string,
+        boxOrID: string | TeleBox,
         skipUpdate = false
     ): ReadonlyTeleBox | undefined {
-        const index = this.boxes.findIndex((box) => box.id === boxID);
+        const index = this.getBoxIndex(boxOrID);
         if (index >= 0) {
-            const boxes = this.boxes.splice(index, 1);
-            this.maxTitleBar.setBoxes(this.boxes);
-            const box = boxes[0];
-            this.focusBox({ focus: false, box });
-            box.destroy();
+            const boxes = this.boxes.slice();
+            const deletedBox = boxes.splice(index, 1)[0];
+            this.boxes$.setValue(boxes);
+            this.focusTopBox();
+            deletedBox.destroy();
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
                     this.setMaximized(false);
@@ -392,40 +488,35 @@ export class TeleBoxManager {
                 }
                 this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
             }
-            return box;
+            return deletedBox;
         }
         return;
     }
 
-    public removeAll(skipUpdate = false): ReadonlyTeleBox[] {
-        if (this._focusedBox) {
-            const box = this._focusedBox;
-            this._focusedBox = void 0;
-            if (!skipUpdate) {
-                this.events.emit(
-                    TELE_BOX_MANAGER_EVENT.Focused,
-                    undefined,
-                    box
-                );
-            }
+    public removeTopBox(): ReadonlyTeleBox | undefined {
+        if (this.topBox) {
+            return this.remove(this.topBox);
         }
-        const boxes = this.boxes.splice(0, this.boxes.length);
-        this.maxTitleBar.setBoxes(this.boxes);
-        boxes.forEach((box) => box.destroy());
+        return;
+    }
+
+    public removeAll(skipUpdate = false): ReadonlyTeleBox[] {
+        const deletedBoxes = this.boxes$.value;
+        this.boxes$.setValue([]);
+        deletedBoxes.forEach((box) => box.destroy());
         if (!skipUpdate) {
             if (this.boxes.length <= 0) {
                 this.setMaximized(false);
                 this.setMinimized(false);
             }
-            this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
+            this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
         }
-        return boxes;
+        return deletedBoxes;
     }
 
     public destroy(skipUpdate = false): void {
         this.events.removeAllListeners();
         this._sideEffect.flushAll();
-        this._focusedBox = void 0;
         this.removeAll(skipUpdate);
 
         Object.keys(this).forEach((key) => {
@@ -440,13 +531,70 @@ export class TeleBoxManager {
         return `${this.namespace}-${className}`;
     }
 
-    protected maxTitleBar: MaxTitleBar;
+    public focusBox(boxOrID: string | TeleBox, skipUpdate = false): void {
+        const targetBox = this.getBox(boxOrID);
+        if (targetBox) {
+            this.boxes.forEach((box) => {
+                if (targetBox === box) {
+                    let focusChanged = false;
+                    if (!targetBox.focus) {
+                        focusChanged = true;
+                        targetBox.setFocus(true, skipUpdate);
+                    }
+                    this.makeBoxTop(targetBox, skipUpdate);
+                    if (focusChanged && !skipUpdate) {
+                        this.events.emit(
+                            TELE_BOX_MANAGER_EVENT.Focused,
+                            targetBox
+                        );
+                    }
+                } else if (box.focus) {
+                    this.blurBox(box, skipUpdate);
+                }
+            });
+            this.maxTitleBar.focusBox(targetBox);
+        }
+    }
 
-    protected _focusedBox: TeleBox | undefined;
+    public focusTopBox(): void {
+        if (this.topBox && !this.topBox.focus) {
+            return this.focusBox(this.topBox);
+        }
+    }
 
-    protected boxes: TeleBox[] = [];
+    public blurBox(boxOrID: string | TeleBox, skipUpdate = false): void {
+        const targetBox = this.getBox(boxOrID);
+        if (targetBox) {
+            if (targetBox.focus) {
+                targetBox.setFocus(false, skipUpdate);
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+                }
+            }
+            if (this.maxTitleBar.focusedBox === targetBox) {
+                this.maxTitleBar.focusBox();
+            }
+        }
+    }
 
-    protected lastState: TeleBoxState | undefined;
+    public blurAll(skipUpdate = false): void {
+        this.boxes.forEach((box) => {
+            if (box.focus) {
+                box.setFocus(false, skipUpdate);
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
+                }
+            }
+        });
+        if (this.maxTitleBar.focusedBox) {
+            this.maxTitleBar.focusBox();
+        }
+    }
+
+    protected maxTitleBar: MaxTitleBar;
+
+    protected boxes$: Val<TeleBox[]>;
+    protected topBox$: Val<TeleBox | undefined>;
 
     protected teleBoxMatcher(
         config: TeleBoxManagerQueryConfig
@@ -499,9 +647,6 @@ export class TeleBoxManager {
         if (config.fixRatio != null) {
             box.setFixRatio(config.fixRatio, skipUpdate);
         }
-        if (config.focus != null) {
-            this.focusBox({ focus: config.focus, box, skipUpdate });
-        }
         if (config.content != null) {
             box.mountContent(config.content);
         }
@@ -510,117 +655,69 @@ export class TeleBoxManager {
         }
     }
 
-    protected focusBox({
-        focus,
-        box,
-        skipUpdate = false,
-        increaseZIndex = true,
-    }: {
-        focus: boolean;
-        box: TeleBox;
-        skipUpdate?: boolean;
-        increaseZIndex?: boolean;
-    }): void {
-        box.setFocus(focus, skipUpdate);
-        if (box.focus) {
-            if (this._focusedBox !== box) {
-                const lastFocusedBox = this._focusedBox;
-                if (this._focusedBox) {
-                    this._focusedBox.setFocus(false, skipUpdate);
-                }
-                this._focusedBox = box;
-                if (increaseZIndex) {
-                    box.setZIndex(++this.zIndex);
-                }
-                if (!skipUpdate) {
-                    this.events.emit(
-                        TELE_BOX_MANAGER_EVENT.Focused,
-                        box,
-                        lastFocusedBox
-                    );
-                }
-            }
-        } else {
-            if (this._focusedBox === box) {
-                this._focusedBox = void 0;
+    protected smartPosition(config: TeleBoxConfig = {}): TeleBoxConfig {
+        let { x, y } = config;
+        const { width = 0.5, height = 0.5 } = config;
 
-                if (!skipUpdate) {
-                    this.events.emit(
-                        TELE_BOX_MANAGER_EVENT.Focused,
-                        undefined,
-                        box
-                    );
+        if (x == null) {
+            let vx = 20;
+            if (this.topBox) {
+                vx = this.topBox.intrinsicX * this.containerRect.width + 20;
+
+                if (
+                    vx >
+                    this.containerRect.width - width * this.containerRect.width
+                ) {
+                    vx = 20;
                 }
             }
+            x = vx / this.containerRect.width;
         }
-        this.maxTitleBar.focusBox(this._focusedBox);
-    }
 
-    protected getInitialPosition(
-        width: number,
-        height: number
-    ): { x: number; y: number } {
-        const upMostBox =
-            this.boxes.length > 0 &&
-            this.boxes.reduce((box1, box2) =>
-                box1.zIndex > box2.zIndex ? box1 : box2
-            );
+        if (y == null) {
+            let vy = 20;
 
-        let x = 20;
-        let y = 20;
+            if (this.topBox) {
+                vy = this.topBox.intrinsicY * this.containerRect.height + 20;
 
-        if (upMostBox) {
-            x = upMostBox.intrinsicX * this.containerRect.width + 20;
-            y = upMostBox.intrinsicY * this.containerRect.height + 20;
-
-            if (
-                x >
-                    this.containerRect.width -
-                        width * this.containerRect.width ||
-                y >
+                if (
+                    vy >
                     this.containerRect.height -
                         height * this.containerRect.height
-            ) {
-                x = 20;
-                y = 20;
+                ) {
+                    vy = 20;
+                }
             }
+
+            y = vy / this.containerRect.height;
         }
 
-        return {
-            x: x / this.containerRect.width,
-            y: y / this.containerRect.height,
-        };
+        return { ...config, x, y, width, height };
     }
 
-    protected wrapCreateConfig(config: TeleBoxConfig = {}): TeleBoxConfig {
-        let { x, y } = config;
-        const { width = 0.5, height = 0.5 } = config;
-
-        if (x == null || y == null) {
-            const initialPos = this.getInitialPosition(width, height);
-
-            if (x == null) {
-                x = initialPos.x;
-            }
-
-            if (y == null) {
-                y = initialPos.y;
+    protected makeBoxTop(box: TeleBox, skipUpdate = false): void {
+        if (box !== this.topBox) {
+            const maxIndex = this.boxes.reduce(
+                (max, box) => Math.max(max, box.zIndex),
+                0
+            );
+            box.setZIndex(maxIndex + 1, skipUpdate);
+            this.topBox$.setValue(box);
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
             }
         }
+    }
 
-        return {
-            ...config,
-            x,
-            y,
-            width,
-            height,
-            maximized: this.maximized,
-            minimized: this.minimized,
-            fence: this.fence,
-            zIndex: this.zIndex,
-            namespace: this.namespace,
-            containerRect: this.containerRect,
-            readonly: this.readonly,
-        };
+    protected getBoxIndex(boxOrID: TeleBox | string): number {
+        return typeof boxOrID === "string"
+            ? this.boxes.findIndex((box) => box.id === boxOrID)
+            : this.boxes.findIndex((box) => box === boxOrID);
+    }
+
+    protected getBox(boxOrID: TeleBox | string): TeleBox | undefined {
+        return typeof boxOrID === "string"
+            ? this.boxes.find((box) => box.id === boxOrID)
+            : boxOrID;
     }
 }

package/src/TeleBoxManager/typings.ts

@@ -1,4 +1,5 @@
 import type EventEmitter from "eventemitter3";
+import { TeleBoxColorScheme } from "..";
 import type { ReadonlyTeleBox, TeleBoxState } from "../TeleBox";
 import type { TeleBoxConfig } from "../TeleBox/typings";
 import type { TeleBoxCollector } from "../TeleBoxCollector";
@@ -7,6 +8,7 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 export interface TeleBoxManagerConfig
     extends Pick<
         TeleBoxConfig,
+        | "prefersColorScheme"
         | "fence"
         | "containerRect"
         | "maximized"
@@ -33,16 +35,16 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "resizable"
     | "draggable"
     | "fixRatio"
-    | "focus";
+    | "zIndex";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "id"
+    TeleBoxManagerBoxConfigBaseProps | "id" | "focus"
 >;
 
 export type TeleBoxManagerUpdateConfig = Pick<
@@ -55,8 +57,8 @@ type CheckTeleBoxManagerConfig<
 > = T;
 
 export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
-    /** current focused box and last focused box */
-    focused: [ReadonlyTeleBox | undefined, ReadonlyTeleBox | undefined];
+    focused: [ReadonlyTeleBox | undefined];
+    blurred: [ReadonlyTeleBox | undefined];
     created: [ReadonlyTeleBox];
     removed: [ReadonlyTeleBox[]];
     state: [TeleBoxState];
@@ -67,6 +69,9 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     intrinsic_move: [ReadonlyTeleBox];
     intrinsic_resize: [ReadonlyTeleBox];
     visual_resize: [ReadonlyTeleBox];
+    z_index: [ReadonlyTeleBox];
+    prefers_color_scheme: [TeleBoxColorScheme];
+    dark_mode: [boolean];
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;

package/src/TeleBoxReact/index.tsx

@@ -16,6 +16,12 @@ export type TeleBoxReactProps = TeleBoxConfig & {
 export const TeleBoxReact: FC<TeleBoxReactProps> = (props) => {
     const [teleBox] = useState(() => new TeleBox(props));
 
+    useUpdateEffect(() => {
+        if (props.prefersColorScheme != null) {
+            teleBox.setPrefersColorScheme(props.prefersColorScheme);
+        }
+    }, [teleBox, props.prefersColorScheme]);
+
     useUpdateEffect(() => {
         if (props.minWidth != null) {
             teleBox.setMinWidth(props.minWidth);
@@ -52,6 +58,18 @@ export const TeleBoxReact: FC<TeleBoxReactProps> = (props) => {
         }
     }, [teleBox, props.visible]);
 
+    useUpdateEffect(() => {
+        if (props.minimized != null) {
+            teleBox.setMinimized(props.minimized, true);
+        }
+    }, [teleBox, props.minimized]);
+
+    useUpdateEffect(() => {
+        if (props.maximized != null) {
+            teleBox.setMaximized(props.maximized, true);
+        }
+    }, [teleBox, props.maximized]);
+
     useUpdateEffect(() => {
         if (props.state != null) {
             teleBox.setState(props.state, true);

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -71,3 +71,17 @@
 .#{$namespace}-titlebar-icon-close {
     background: center / cover no-repeat url("./icons/close.svg");
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-title {
+        color: #e9e9e9;
+    }
+
+    .#{$namespace}-titlebar {
+        color: #e9e9e9;
+        background: #43434d;
+        border-bottom: none;
+    }
+}