@netless/telebox-insider 0.2.5 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.5",
+    "version": "0.2.9",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -75,6 +75,6 @@
         "shallowequal": "^1.1.0",
         "side-effect-manager": "^0.1.5",
         "stylefire": "^7.0.3",
-        "value-enhancer": "^0.0.7"
+        "value-enhancer": "^0.0.8"
     }
 }

package/src/TeleBox/constants.ts

@@ -1,3 +1,9 @@
+export enum TELE_BOX_COLOR_SCHEME {
+    Light = "light",
+    Dark = "dark",
+    Auto = "auto",
+}
+
 export enum TELE_BOX_STATE {
     Normal = "normal",
     Minimized = "minimized",
@@ -5,6 +11,8 @@ export enum TELE_BOX_STATE {
 }
 
 export enum TELE_BOX_EVENT {
+    DarkMode = "dark_mode",
+    PrefersColorScheme = "prefers_color_scheme",
     Close = "close",
     Focus = "focus",
     Blur = "blur",

package/src/TeleBox/index.ts

@@ -26,6 +26,7 @@ import {
     TELE_BOX_STATE,
     TELE_BOX_RESIZE_HANDLE,
     TELE_BOX_DELEGATE_EVENT,
+    TELE_BOX_COLOR_SCHEME,
 } from "./constants";
 import type {
     TeleBoxConfig,
@@ -36,12 +37,15 @@ import type {
     TeleBoxDelegateEvents,
     TeleBoxCoord,
     TeleBoxSize,
+    TeleBoxColorScheme,
 } from "./typings";
 
 export * from "./constants";
 export * from "./typings";
 
 type ValConfig = {
+    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
+    darkMode: Val<boolean, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collectorRect: Val<TeleBoxRect | undefined, boolean>;
     /** Box title. Default empty. */
@@ -74,6 +78,8 @@ export class TeleBox {
     public constructor({
         id = genUniqueKey(),
         title = getBoxDefaultName(),
+        prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+        darkMode,
         visible = true,
         width = 0.5,
         height = 0.5,
@@ -112,6 +118,58 @@ export class TeleBox {
         this.events = new EventEmitter();
         this._delegateEvents = new EventEmitter();
 
+        const prefersColorScheme$ = createVal<TeleBoxColorScheme, boolean>(
+            prefersColorScheme
+        );
+        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(
+                    TELE_BOX_EVENT.PrefersColorScheme,
+                    prefersColorScheme
+                );
+            }
+        });
+
+        const darkMode$ = createVal(Boolean(darkMode));
+
+        if (darkMode == null) {
+            prefersColorScheme$.subscribe(
+                (prefersColorScheme, _, skipUpdate) => {
+                    this._sideEffect.add(() => {
+                        if (prefersColorScheme === "auto") {
+                            const prefersDark = window.matchMedia(
+                                "(prefers-color-scheme: dark)"
+                            );
+                            darkMode$.setValue(prefersDark.matches, skipUpdate);
+                            const handler = (
+                                evt: MediaQueryListEvent
+                            ): void => {
+                                darkMode$.setValue(evt.matches, skipUpdate);
+                            };
+                            prefersDark.addEventListener("change", handler);
+                            return () =>
+                                prefersDark.removeEventListener(
+                                    "change",
+                                    handler
+                                );
+                        } else {
+                            darkMode$.setValue(
+                                prefersColorScheme === "dark",
+                                skipUpdate
+                            );
+                            return () => {};
+                        }
+                    }, "prefers-color-scheme");
+                }
+            );
+        }
+
+        darkMode$.reaction((darkMode, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode);
+            }
+        });
+
         const containerRect$ = createVal(containerRect, shallowequal);
         const collectorRect$ = createVal(collectorRect, shallowequal);
 
@@ -354,6 +412,8 @@ export class TeleBox {
         const $userStyles$ = createVal(styles);
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
+            darkMode: darkMode$,
             containerRect: containerRect$,
             collectorRect: collectorRect$,
             title: title$,
@@ -417,6 +477,10 @@ export class TeleBox {
     public _coord$: Val<TeleBoxCoord, boolean>;
     public _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
 
+    public get darkMode(): boolean {
+        return this._darkMode$.value;
+    }
+
     public _state$: Val<TeleBoxState, boolean>;
 
     public get state(): TeleBoxState {
@@ -735,6 +799,13 @@ export class TeleBox {
         bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
         bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
         bindClassName(this.$box, this._focus$, "blur", isFalsy);
+        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
+        bindClassName(
+            this.$box,
+            this._darkMode$,
+            "color-scheme-light",
+            isFalsy
+        );
 
         this._renderSideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");

package/src/TeleBox/style.scss

@@ -202,3 +202,13 @@
         pointer-events: none !important;
     }
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-box-main {
+        color: #e9e9e9;
+        background: #212126;
+        border-color: #43434d;
+    }
+}

package/src/TeleBox/typings.ts

@@ -6,8 +6,11 @@ import type {
     TELE_BOX_DELEGATE_EVENT,
     TELE_BOX_RESIZE_HANDLE,
     TELE_BOX_STATE,
+    TELE_BOX_COLOR_SCHEME,
 } from "./constants";
 
+export type TeleBoxColorScheme = `${TELE_BOX_COLOR_SCHEME}`;
+
 export type TeleBoxCoord = { x: number; y: number };
 
 export type TeleBoxSize = { width: number; height: number };
@@ -26,6 +29,10 @@ export interface TeleBoxConfig {
     readonly id?: string;
     /** Box title. Default empty. */
     readonly title?: string;
+    /** Prefers Box color scheme. Default light. */
+    readonly prefersColorScheme?: TeleBoxColorScheme;
+    /** Actual Box Dark Mode */
+    readonly darkMode?: boolean;
     /** Box visible. Default true. */
     readonly visible?: boolean;
     /** Box width relative to root element. 0~1. Default 0.5. */
@@ -79,6 +86,8 @@ export interface TeleBoxConfig {
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 
 export type TeleBoxEventConfig = CheckTeleBoxConfig<{
+    dark_mode: boolean;
+    prefers_color_scheme: TeleBoxColorScheme;
     close: void;
     focus: void;
     blur: void;

package/src/TeleBoxCollector/index.ts

@@ -5,6 +5,7 @@ import { TeleStyles } from "../typings";
 export interface TeleBoxCollectorConfig {
     visible?: boolean;
     readonly?: boolean;
+    darkMode?: boolean;
     namespace?: string;
     styles?: TeleStyles;
     onClick?: () => void;
@@ -14,12 +15,14 @@ export class TeleBoxCollector {
     public constructor({
         visible = true,
         readonly = false,
+        darkMode = false,
         namespace = "telebox",
         styles = {},
         onClick,
     }: TeleBoxCollectorConfig = {}) {
-        this._visible = Boolean(visible);
-        this._readonly = Boolean(readonly);
+        this._visible = visible;
+        this._readonly = readonly;
+        this._darkMode = darkMode;
         this.namespace = namespace;
         this.styles = styles;
         this.onClick = onClick;
@@ -37,6 +40,10 @@ export class TeleBoxCollector {
         return this._readonly;
     }
 
+    public get darkMode(): boolean {
+        return this._darkMode;
+    }
+
     public onClick: (() => void) | undefined;
 
     public $collector: HTMLElement | undefined;
@@ -85,6 +92,23 @@ export class TeleBoxCollector {
         return this;
     }
 
+    public setDarkMode(darkMode: boolean): this {
+        if (this._darkMode !== darkMode) {
+            this._darkMode = darkMode;
+            if (this.$collector) {
+                this.$collector.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$collector.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }
+        }
+        return this;
+    }
+
     public setStyles(styles: TeleStyles): this {
         Object.assign(this.styles, styles);
         if (this.$collector) {
@@ -103,6 +127,7 @@ export class TeleBoxCollector {
         if (!this.$collector) {
             this.$collector = document.createElement("button");
             this.$collector.className = this.wrapClassName("collector");
+            this.$collector.style.backgroundImage = `url('${collectorSVG}')`;
             this.$collector.addEventListener(
                 "click",
                 this.handleCollectorClick
@@ -120,12 +145,11 @@ export class TeleBoxCollector {
                 );
             }
 
-            const $icon = document.createElement("img");
-            $icon.draggable = false;
-            $icon.className = this.wrapClassName("collector-icon");
-            $icon.src = collectorSVG;
-
-            this.$collector.appendChild($icon);
+            this.$collector.classList.add(
+                this.wrapClassName(
+                    this._darkMode ? "color-scheme-dark" : "color-scheme-light"
+                )
+            );
 
             this.setStyles(this.styles);
         }
@@ -153,6 +177,8 @@ export class TeleBoxCollector {
 
     protected _readonly: boolean;
 
+    protected _darkMode: boolean;
+
     protected handleCollectorClick = (): void => {
         if (!this._readonly && this.onClick) {
             this.onClick();

package/src/TeleBoxCollector/style.scss

@@ -18,11 +18,9 @@
     cursor: pointer;
     user-select: none;
     pointer-events: none;
-}
-
-.#{$namespace}-collector-icon {
-    width: 18px;
-    height: 16px;
+    background-repeat: no-repeat;
+    background-size: 18px 16px;
+    background-position: center;
 }
 
 .#{$namespace}-collector-visible {
@@ -33,3 +31,11 @@
 .#{$namespace}-collector-readonly {
     cursor: not-allowed;
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-collector {
+        background-color: #43434d;
+    }
+}

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -8,6 +8,7 @@ import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
 export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
+    darkMode: boolean;
     boxes: MaxTitleBarTeleBox[];
     containerRect: TeleBoxRect;
     focusedBox?: MaxTitleBarTeleBox;
@@ -20,6 +21,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.boxes = config.boxes;
         this.focusedBox = config.focusedBox;
         this.containerRect = config.containerRect;
+        this.darkMode = config.darkMode;
     }
 
     public focusBox(box?: MaxTitleBarTeleBox): void {
@@ -89,6 +91,22 @@ export class MaxTitleBar extends DefaultTitleBar {
         }
     }
 
+    public setDarkMode(darkMode: boolean): void {
+        if (darkMode !== this.darkMode) {
+            this.darkMode = darkMode;
+            if (this.$titleBar) {
+                this.$titleBar.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$titleBar.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }
+        }
+    }
+
     public render(): HTMLElement {
         const $titleBar = super.render();
         const { x, y, width } = this.containerRect;
@@ -104,6 +122,11 @@ export class MaxTitleBar extends DefaultTitleBar {
             this.wrapClassName("readonly"),
             this.readonly
         );
+        $titleBar.classList.add(
+            this.wrapClassName(
+                this.darkMode ? "color-scheme-dark" : "color-scheme-light"
+            )
+        );
 
         this.updateTitles();
 
@@ -171,6 +194,8 @@ export class MaxTitleBar extends DefaultTitleBar {
         return this.$titles;
     }
 
+    protected darkMode: boolean;
+
     protected $titles: HTMLElement | undefined;
 
     protected boxes: MaxTitleBarTeleBox[];

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -123,3 +123,21 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
         cursor: not-allowed;
     }
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-titlebar {
+        color: #e9e9e9;
+        background: #43434d;
+        border-bottom: none;
+    }
+
+    .#{$namespace}-titles-tab {
+        border-right-color: #7b88a0;
+    }
+
+    .#{$namespace}-title {
+        color: #e9e9e9;
+    }
+}

package/src/TeleBoxManager/constants.ts

@@ -10,4 +10,6 @@ export enum TELE_BOX_MANAGER_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    PrefersColorScheme = "prefers_color_scheme",
+    DarkMode = "dark_mode",
 }

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,43 @@ export class TeleBoxManager {
         this.namespace = namespace;
         this.zIndex = zIndex;
 
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const prefersDark$ = createVal(prefersDark.matches);
+        this._sideEffect.add(() => {
+            const handler = (evt: MediaQueryListEvent): void => {
+                prefersDark$.setValue(evt.matches);
+            };
+            prefersDark.addEventListener("change", handler);
+            return () => prefersDark.removeEventListener("change", 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 +166,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 +180,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);
@@ -210,6 +257,7 @@ export class TeleBoxManager {
         );
 
         this.maxTitleBar = new MaxTitleBar({
+            darkMode: this.darkMode,
             readonly: readonly$.value,
             namespace: this.namespace,
             state: state$.value,
@@ -244,8 +292,12 @@ export class TeleBoxManager {
         readonly$.subscribe((readonly) =>
             this.maxTitleBar.setReadonly(readonly)
         );
+        this._darkMode$.subscribe((darkMode) => {
+            this.maxTitleBar.setDarkMode(darkMode);
+        });
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
             containerRect: containerRect$,
             collector: collector$,
             readonly: readonly$,
@@ -271,6 +323,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 {
@@ -385,11 +443,11 @@ export class TeleBoxManager {
             const box = boxes[0];
             this.focusBox({ focus: false, box });
             box.destroy();
-            if (this.boxes.length <= 0) {
-                this.setMaximized(false);
-                this.setMinimized(false);
-            }
             if (!skipUpdate) {
+                if (this.boxes.length <= 0) {
+                    this.setMaximized(false);
+                    this.setMinimized(false);
+                }
                 this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
             }
             return box;
@@ -412,11 +470,11 @@ export class TeleBoxManager {
         const boxes = this.boxes.splice(0, this.boxes.length);
         this.maxTitleBar.setBoxes(this.boxes);
         boxes.forEach((box) => box.destroy());
-        if (this.boxes.length <= 0) {
-            this.setMaximized(false);
-            this.setMinimized(false);
-        }
         if (!skipUpdate) {
+            if (this.boxes.length <= 0) {
+                this.setMaximized(false);
+                this.setMinimized(false);
+            }
             this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
         }
         return boxes;
@@ -614,6 +672,8 @@ export class TeleBoxManager {
             y,
             width,
             height,
+            darkMode: this.darkMode,
+            prefersColorScheme: this.prefersColorScheme,
             maximized: this.maximized,
             minimized: this.minimized,
             fence: this.fence,

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"
@@ -67,6 +69,8 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     intrinsic_move: [ReadonlyTeleBox];
     intrinsic_resize: [ReadonlyTeleBox];
     visual_resize: [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;
+    }
+}