@netless/telebox-insider 0.2.8 → 0.2.12

package/package.json

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

package/src/TeleBox/constants.ts

@@ -21,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

@@ -140,24 +140,28 @@ export class TeleBox {
                             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
+                            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 () => {};
+                            return noop;
                         }
                     }, "prefers-color-scheme");
                 }
@@ -193,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) => {
@@ -1255,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

@@ -204,6 +204,8 @@
 }
 
 .#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
     .#{$namespace}-box-main {
         color: #e9e9e9;
         background: #212126;

package/src/TeleBox/typings.ts

@@ -96,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,6 +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",
 }