@netless/telebox-insider 0.2.7 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.7",
+    "version": "0.2.11",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

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",
@@ -13,6 +21,7 @@ export enum TELE_BOX_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    ZIndex = "z_index",
     State = "state",
     Minimized = "minimized",
     Maximized = "maximized",

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,62 @@ 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)"
+                            );
+                            if (prefersDark) {
+                                darkMode$.setValue(
+                                    prefersDark.matches,
+                                    skipUpdate
+                                );
+                                const handler = (
+                                    evt: MediaQueryListEvent
+                                ): void => {
+                                    darkMode$.setValue(evt.matches, skipUpdate);
+                                };
+                                prefersDark.addListener(handler);
+                                return () =>
+                                    prefersDark.removeListener(handler);
+                            } else {
+                                return noop;
+                            }
+                        } else {
+                            darkMode$.setValue(
+                                prefersColorScheme === "dark",
+                                skipUpdate
+                            );
+                            return noop;
+                        }
+                    }, "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);
 
@@ -135,7 +197,13 @@ export class TeleBox {
         const draggable$ = createVal(draggable);
         const fence$ = createVal(fence);
         const fixRatio$ = createVal(fixRatio);
+
         const zIndex$ = createVal(zIndex);
+        zIndex$.reaction((zIndex, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex);
+            }
+        });
 
         const focus$ = createVal(focus);
         focus$.reaction((focus, _, skipUpdate) => {
@@ -354,6 +422,8 @@ export class TeleBox {
         const $userStyles$ = createVal(styles);
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
+            darkMode: darkMode$,
             containerRect: containerRect$,
             collectorRect: collectorRect$,
             title: title$,
@@ -417,6 +487,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 +809,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");
@@ -1184,6 +1265,10 @@ export class TeleBox {
     }
 }
 
+function noop(): void {
+    return;
+}
+
 type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox
     ? TeleBox[K] extends Function
         ? never

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;
@@ -87,6 +96,7 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     intrinsic_move: { x: number; y: number };
     intrinsic_resize: { width: number; height: number };
     visual_resize: { width: number; height: number };
+    z_index: number;
     state: TeleBoxState;
     minimized: boolean;
     maximized: boolean;

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,13 +21,10 @@ 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 {
-        if (!box) {
-            box = this.boxes[this.boxes.length - 1];
-        }
-
         if (this.focusedBox && this.focusedBox === box) {
             return;
         }
@@ -89,6 +87,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 +118,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,11 +190,13 @@ export class MaxTitleBar extends DefaultTitleBar {
         return this.$titles;
     }
 
+    protected darkMode: boolean;
+
     protected $titles: HTMLElement | undefined;
 
     protected boxes: MaxTitleBarTeleBox[];
 
-    protected focusedBox: MaxTitleBarTeleBox | undefined;
+    public focusedBox: MaxTitleBarTeleBox | undefined;
 
     protected containerRect: TeleBoxRect;
 }

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

@@ -1,5 +1,6 @@
 export enum TELE_BOX_MANAGER_EVENT {
     Focused = "focused",
+    Blurred = "blurred",
     Created = "created",
     Removed = "removed",
     State = "state",
@@ -10,4 +11,7 @@ export enum TELE_BOX_MANAGER_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    ZIndex = "z_index",
+    PrefersColorScheme = "prefers_color_scheme",
+    DarkMode = "dark_mode",
 }