@netless/telebox-insider 1.0.0-alpha.2 → 1.0.0-alpha.22

package/src/TeleBoxManager/index.ts

@@ -1,3 +1,5 @@
+import "./style.scss";
+
 import shallowequal from "shallowequal";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import { SideEffectManager } from "side-effect-manager";
@@ -6,11 +8,13 @@ import type {
     ValEnhancedResult,
     ReadonlyValEnhancedResult,
 } from "value-enhancer";
+import { derive } from "value-enhancer";
 import {
     combine,
     Val,
     withValueEnhancer,
     withReadonlyValueEnhancer,
+    ValManager,
 } from "value-enhancer";
 import Emittery from "emittery";
 import type {
@@ -36,7 +40,7 @@ import type {
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
-import { TeleStage } from "../TeleStage";
+import { calcStageRect } from "../TeleBox/utils";
 
 export * from "./typings";
 export * from "./constants";
@@ -58,7 +62,10 @@ type ValConfig = {
     maximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
     stageRatio: Val<number, boolean>;
-    highlightStage: Val<boolean, boolean>;
+    containerStyle: Val<string>;
+    stageStyle: Val<string>;
+    defaultBoxBodyStyle: Val<string | null>;
+    defaultBoxStageStyle: Val<string | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
@@ -72,24 +79,33 @@ export class TeleBoxManager {
         prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
-        fence = false,
+        fence = true,
         collector,
         namespace = "telebox",
         readonly = false,
         stageRatio = -1,
-        highlightStage = true,
+        containerStyle = "",
+        stageStyle = "",
+        defaultBoxBodyStyle = null,
+        defaultBoxStageStyle = null,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
         const root$ = new Val(root);
         const readonly$ = new Val(readonly);
         const minimized$ = new Val(minimized);
         const maximized$ = new Val(maximized);
         const fence$ = new Val(fence);
+        const containerStyle$ = new Val(containerStyle);
+        const stageStyle$ = new Val(stageStyle);
         const stageRatio$ = new Val(stageRatio);
-        const highlightStage$ = new Val(highlightStage);
+        const defaultBoxBodyStyle$ = new Val(defaultBoxBodyStyle);
+        const defaultBoxStageStyle$ = new Val(defaultBoxStageStyle);
 
         const rootRect$ = new Val<TeleBoxRect>(
             {
@@ -106,23 +122,14 @@ export class TeleBoxManager {
                     if (!root) {
                         return () => void 0;
                     }
-                    const observer = new ResizeObserver((entries) => {
-                        this._sideEffect.setTimeout(
-                            // debounce
-                            () => {
-                                const rect = entries[0]?.contentRect;
-                                if (rect) {
-                                    rootRect$.setValue({
-                                        x: rect.x,
-                                        y: rect.y,
-                                        width: rect.width,
-                                        height: rect.height,
-                                    });
-                                }
-                            },
-                            50,
-                            "root-resize-observer"
-                        );
+                    const observer = new ResizeObserver(() => {
+                        const rect = root.getBoundingClientRect();
+                        rootRect$.setValue({
+                            x: 0,
+                            y: 0,
+                            width: rect.width,
+                            height: rect.height,
+                        });
                     });
                     observer.observe(root);
                     return () => observer.disconnect();
@@ -130,6 +137,10 @@ export class TeleBoxManager {
             })
         );
 
+        const stageRect$ = combine([rootRect$, stageRatio$], calcStageRect, {
+            compare: shallowequal,
+        });
+
         this.boxes$ = new Val<TeleBox[]>([]);
         this.topBox$ = new Val<TeleBox | undefined>(undefined);
         this._sideEffect.addDisposer(
@@ -199,27 +210,17 @@ export class TeleBoxManager {
                 darkMode$: darkMode$,
                 namespace,
                 root$,
-                rootRect$,
             });
 
-        const teleStage = new TeleStage({
-            namespace,
-            rootRect$,
-            ratio$: stageRatio$,
-            root$,
-            highlightStage$,
-        });
-        this._sideEffect.addDisposer(() => teleStage.destroy());
-
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
             root: root$,
             rootRect: rootRect$,
-            stageRect: teleStage.stageRect$,
+            stageRect: stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             prefersColorScheme: prefersColorScheme$,
@@ -228,10 +229,13 @@ export class TeleBoxManager {
             minimized: minimized$,
             maximized: maximized$,
             stageRatio: stageRatio$,
-            highlightStage: highlightStage$,
+            containerStyle: containerStyle$,
+            stageStyle: stageStyle$,
+            defaultBoxBodyStyle: defaultBoxBodyStyle$,
+            defaultBoxStageStyle: defaultBoxStageStyle$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
@@ -278,14 +282,60 @@ export class TeleBoxManager {
             true
         );
 
+        this.$container = document.createElement("div");
+        this.$container.className = this.wrapClassName("manager-container");
+
+        this.$stage = document.createElement("div");
+        this.$stage.className = this.wrapClassName("manager-stage");
+        this.$container.appendChild(this.$stage);
+
+        this._sideEffect.addDisposer([
+            darkMode$.subscribe((darkMode) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }),
+            maximized$.subscribe((maximized) => {
+                this.$container.classList.toggle("is-maximized", maximized);
+            }),
+            minimized$.subscribe((minimized) => {
+                this.$container.classList.toggle("is-minimized", minimized);
+            }),
+            containerStyle$.subscribe((containerStyle) => {
+                this.$container.style.cssText = containerStyle;
+            }),
+            stageStyle$.subscribe((stageStyle) => {
+                this.$stage.style.cssText = stageStyle;
+                this.$stage.style.width = stageRect$.value.width + "px";
+                this.$stage.style.height = stageRect$.value.height + "px";
+            }),
+            stageRect$.subscribe((stageRect) => {
+                this.$stage.style.width = stageRect.width + "px";
+                this.$stage.style.height = stageRect.height + "px";
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$container);
+                } else if (this.$container.parentElement) {
+                    this.$container.remove();
+                }
+            }),
+        ]);
+
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
+            title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
             boxes$: this.boxes$,
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
-            root$,
             rootRect$: rootRect$,
+            root: this.$container,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
@@ -338,6 +388,10 @@ export class TeleBoxManager {
         ]);
     }
 
+    public readonly $container: HTMLDivElement;
+
+    public readonly $stage: HTMLDivElement;
+
     public get boxes(): ReadonlyArray<TeleBox> {
         return this.boxes$.value;
     }
@@ -386,17 +440,18 @@ export class TeleBoxManager {
             ...config,
             ...(smartPosition ? this.smartPosition(config) : {}),
             namespace: this.namespace,
-            root$: this._root$,
+            root: this.$stage,
             darkMode$: this._darkMode$,
             maximized$: this._maximized$,
             minimized$: this._minimized$,
             fence$: this._fence$,
             rootRect$: this._rootRect$,
             managerStageRect$: this._stageRect$,
-            stageRatio$: this._stageRatio$,
+            managerStageRatio$: this._stageRatio$,
             readonly$: this._readonly$,
             collectorRect$: this.collector._rect$,
-            managerHighlightStage$: this._highlightStage$,
+            defaultBoxBodyStyle$: this._defaultBoxBodyStyle$,
+            defaultBoxStageStyle$: this._defaultBoxStageStyle$,
         });
 
         if (box.focus) {
@@ -663,12 +718,15 @@ export class TeleBoxManager {
         if (config.draggable != null) {
             box._draggable$.setValue(config.draggable, skipUpdate);
         }
-        if (config.ratio != null) {
-            box._ratio$.setValue(config.ratio, skipUpdate);
+        if (config.boxRatio != null) {
+            box._boxRatio$.setValue(config.boxRatio, skipUpdate);
         }
         if (config.zIndex != null) {
             box._zIndex$.setValue(config.zIndex, skipUpdate);
         }
+        if (config.stageRatio !== undefined) {
+            box.setStageRatio(config.stageRatio, skipUpdate);
+        }
         if (config.content != null) {
             box.mountContent(config.content);
         }
@@ -694,33 +752,27 @@ export class TeleBoxManager {
         const topBox = this.topBox;
 
         if (x == null) {
-            let pxX = stageRect.x + 20;
+            let pxX = 20;
             if (topBox) {
                 const pxPreferredX = topBox.pxIntrinsicCoord.x + 20;
                 const pxIntrinsicWidth = width * stageRect.width;
-                if (
-                    pxPreferredX + pxIntrinsicWidth <=
-                    stageRect.x + stageRect.width
-                ) {
+                if (pxPreferredX + pxIntrinsicWidth <= stageRect.width) {
                     pxX = pxPreferredX;
                 }
             }
-            x = (pxX - stageRect.x) / stageRect.width;
+            x = pxX / stageRect.width;
         }
 
         if (y == null) {
-            let pxY = stageRect.y + 20;
+            let pxY = 20;
             if (topBox) {
                 const pxPreferredY = topBox.pxIntrinsicCoord.y + 20;
                 const pxIntrinsicHeight = height * stageRect.height;
-                if (
-                    pxPreferredY + pxIntrinsicHeight <=
-                    stageRect.y + stageRect.height
-                ) {
+                if (pxPreferredY + pxIntrinsicHeight <= stageRect.height) {
                     pxY = pxPreferredY;
                 }
             }
-            y = (pxY - stageRect.y) / stageRect.height;
+            y = pxY / stageRect.height;
         }
 
         return { x, y, width, height };

package/src/TeleBoxManager/style.scss

@@ -0,0 +1,56 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+
+.#{$namespace}-manager-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @include v(
+        background,
+        manager-container-background,
+        $manager-container-background
+    );
+
+    &.is-maximized,
+    &.is-minimized {
+        & > .#{$namespace}-manager-stage {
+            overflow: visible;
+        }
+    }
+}
+
+.#{$namespace}-manager-stage {
+    position: relative;
+    overflow: hidden;
+    @include v(background, manager-stage-background, $manager-stage-background);
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-manager-container {
+        @include v(
+            background,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
+
+        & > .#{$namespace}-manager-stage {
+            @include v(
+                background,
+                manager-stage-background-dark,
+                $manager-stage-background-dark
+            );
+            @include v(
+                box-shadow,
+                manager-stage-shadow-dark,
+                $manager-stage-shadow-dark
+            );
+        }
+    }
+}

package/src/TeleBoxManager/typings.ts

@@ -21,8 +21,14 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     readonly minimized?: boolean;
     /** Is box readonly */
     readonly readonly?: boolean;
-    /** Show stage frame and grey-out the non-stage area. Default true. */
-    readonly highlightStage?: boolean;
+    /** Custom styles for telebox manager container */
+    readonly containerStyle?: string;
+    /** Custom styles for telebox manager stage */
+    readonly stageStyle?: string;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxStageStyle?: string | null;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -36,12 +42,22 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "y"
     | "resizable"
     | "draggable"
-    | "ratio"
-    | "zIndex";
+    | "boxRatio"
+    | "zIndex"
+    | "stageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
+    | TeleBoxManagerBoxConfigBaseProps
+    | "content"
+    | "stage"
+    | "footer"
+    | "styles"
+    | "bodyStyle"
+    | "stageStyle"
+    | "id"
+    | "focus"
+    | "enableShadowDOM"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
@@ -50,7 +66,8 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "visible"
     | "resizable"
     | "draggable"
-    | "ratio"
+    | "boxRatio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"
@@ -58,7 +75,7 @@ export type TeleBoxManagerQueryConfig = Pick<
 
 export type TeleBoxManagerUpdateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer"
 >;
 
 type CheckTeleBoxManagerConfig<

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -14,7 +14,7 @@ import type {
     TeleTitleBarEvent,
 } from "../typings";
 import { preventEvent } from "../../utils";
-import { Val } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 
 export type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
@@ -29,7 +29,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     public constructor({
         readonly$,
         state$,
-        title = "",
+        title$,
         buttons,
         onEvent,
         onDragStart,
@@ -37,7 +37,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     }: DefaultTitleBarConfig) {
         this.readonly$ = readonly$;
         this.state$ = state$;
-        this.title$ = new Val(title);
+        this.title$ = title$;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
         this.namespace = namespace;
@@ -67,14 +67,6 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $dragArea: HTMLElement;
 
-    public get title(): string {
-        return this.title$.value;
-    }
-
-    public setTitle(title: string): void {
-        this.title$.setValue(title);
-    }
-
     public render(): HTMLElement {
         if (!this.$titleBar) {
             this.$titleBar = document.createElement("div");
@@ -205,7 +197,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     protected readonly$: TeleTitleBarConfig["readonly$"];
 
-    protected title$: Val<string>;
+    protected title$: ReadonlyVal<string>;
 
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
 

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -8,10 +8,12 @@
     height: 26px;
     display: flex;
     align-items: center;
-    background: #fff;
     user-select: none;
-    border-bottom: 1px solid #eeeef7;
     touch-action: manipulation;
+
+    @include v(color, titlebar-color, $titlebar-color);
+    @include v(background-color, titlebar-background, $titlebar-background);
+    @include v(border-bottom, titlebar-border-bottom, $titlebar-border-bottom);
 }
 
 .#{$namespace}-title-area {
@@ -26,6 +28,7 @@
 
 .#{$namespace}-title {
     @include no-user-select;
+    @include v(color, titlebar-color, $titlebar-color);
 
     overflow: hidden;
     margin: 0;
@@ -36,7 +39,6 @@
     white-space: nowrap;
     word-break: keep-all;
     text-overflow: ellipsis;
-    color: #191919;
 }
 
 .#{$namespace}-drag-area {
@@ -85,31 +87,86 @@
 }
 
 .#{$namespace}-titlebar-icon-minimize {
-    background: center / cover no-repeat url("./icons/minimize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-minimize,
+        url("./icons/minimize.svg")
+    );
 }
 
 .#{$namespace}-titlebar-icon-maximize {
-    background: center / cover no-repeat url("./icons/maximize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-maximize,
+        url("./icons/maximize.svg")
+    );
 
     &.is-active {
-        background-image: url("./icons/maximize-active.svg");
+        @include v(
+            background-image,
+            titlebar-icon-maximize-active,
+            url("./icons/maximize-active.svg")
+        );
     }
 }
 
 .#{$namespace}-titlebar-icon-close {
-    background: center / cover no-repeat url("./icons/close.svg");
+    background: center / cover no-repeat;
+    @include v(background-image, titlebar-icon-close, url("./icons/close.svg"));
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     .#{$namespace}-title {
-        color: #e9e9e9;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
     }
 
     .#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
+        @include v(
+            background-color,
+            titlebar-background-dark,
+            $titlebar-background-dark
+        );
+        @include v(
+            border-bottom,
+            titlebar-border-bottom-dark,
+            $titlebar-border-bottom-dark
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-minimize {
+        @include v(
+            background-image,
+            titlebar-icon-minimize-dark,
+            url("./icons/minimize.svg")
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-maximize {
+        @include v(
+            background-image,
+            titlebar-icon-maximize-dark,
+            url("./icons/maximize.svg")
+        );
+
+        &.is-active {
+            @include v(
+                background-image,
+                titlebar-icon-maximize-active-dark,
+                url("./icons/maximize-active.svg")
+            );
+        }
+    }
+
+    .#{$namespace}-titlebar-icon-close {
+        @include v(
+            background-image,
+            titlebar-icon-close-dark,
+            url("./icons/close.svg")
+        );
     }
 }

package/src/TeleTitleBar/typings.ts

@@ -10,7 +10,7 @@ export type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> =
 
 export interface TeleTitleBarConfig {
     readonly$: ReadonlyVal<boolean, boolean>;
-    title?: string;
+    title$: ReadonlyVal<string, boolean>;
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;

package/src/scss/mixins.scss

@@ -5,3 +5,8 @@
     // iOS Safari
     -webkit-user-select: none;
 }
+
+@mixin v($property, $varName, $val) {
+    #{$property}: $val;
+    #{$property}: var(--tele-#{$varName}, $val);
+}

package/src/scss/variables.scss

@@ -1,2 +1,48 @@
 $namespace: "telebox";
+
 $base-z-index: 100;
+$max-titlebar-z-index: $base-z-index + 5000;
+$stage-z-index: $max-titlebar-z-index + 10;
+$collector-z-index: $stage-z-index + 10;
+
+$manager-container-background: #f9f9f9;
+$manager-container-background-dark: #25282e;
+$manager-stage-background: #fff;
+$manager-stage-background-dark: #272a30;
+$manager-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+$manager-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
+
+$box-container-background: $manager-container-background;
+$box-container-background-dark: $manager-container-background-dark;
+$box-stage-background: $manager-stage-background;
+$box-stage-background-dark: $manager-stage-background-dark;
+$box-stage-shadow: $manager-stage-shadow;
+$box-stage-shadow-dark: $manager-stage-shadow-dark;
+
+$box-color: #191919;
+$box-color-dark: #e9e9e9;
+$box-border: 1px solid #e3e3ec;
+$box-border-dark: 1px solid #383b42;
+$box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
+$box-shadow-dark: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
+
+$titlebar-color: #191919;
+$titlebar-color-dark: #e9e9e9;
+$titlebar-background: #fff;
+$titlebar-background-dark: #383b42;
+$titlebar-border-bottom: 1px solid #eeeef7;
+$titlebar-border-bottom-dark: none;
+
+$titlebar-tab-color: #7b88a0;
+$titlebar-tab-color-dark: #e9e9e9;
+$titlebar-tab-focus-color: #357bf6;
+$titlebar-tab-focus-color-dark: #357bf6;
+$titlebar-tab-background: transparent;
+$titlebar-tab-background-dark: transparent;
+$titlebar-tab-divider-color: #e5e5f0;
+$titlebar-tab-divider-color-dark: #7b88a0;
+
+$collector-background: #fff;
+$collector-background-dark: #383b42;
+$collector-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
+$collector-shadow-dark: $collector-shadow;