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

package/src/TeleBox/style.scss

@@ -18,7 +18,6 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: #f9f9fc;
     box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
     border-radius: 6px;
     border: 1px solid #e3e3ec;
@@ -44,6 +43,15 @@
     width: 100%;
     height: 100%;
     position: relative;
+    background: $color-container-background;
+}
+
+.#{$namespace}-content-stage {
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+    background: $color-stage-background;
+    box-shadow: $color-stage-shadow;
 }
 
 .#{$namespace}-footer-wrap {
@@ -212,7 +220,15 @@
 
     .#{$namespace}-box-main {
         color: #e9e9e9;
-        background: #212126;
         border-color: #43434d;
     }
+
+    .#{$namespace}-content {
+        background: $color-container-background-dark;
+    }
+
+    .#{$namespace}-content-stage {
+        background: $color-stage-background-dark;
+        box-shadow: $color-stage-shadow-dark;
+    }
 }

package/src/TeleBox/typings.ts

@@ -51,23 +51,31 @@ export interface TeleBoxConfig {
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
     /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
-    readonly ratio?: number;
+    readonly boxRatio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box content stage ratio. Follow manager stage ratio if null. Default null. */
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
-    /** Box content. */
+    /** Box content element. */
     readonly content?: HTMLElement;
-    /** Box footer. */
+    /** Stage element. */
+    readonly stage?: HTMLElement;
+    /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
-    readonly styles?: HTMLStyleElement;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
-    readonly highlightStage?: boolean | null;
+    readonly styles?: string;
+    /** Box content styles from end users. */
+    readonly userStyles?: string;
+    /** Custom styles for box content container. Inherit from manager container style if null. Default null. */
+    readonly bodyStyle?: string | null;
+    /** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
+    readonly stageStyle?: string | null;
     /** Actual Box Dark Mode */
     readonly darkMode$: ReadonlyVal<boolean, boolean>;
     /** Restrict box to always be within the stage area. Default false. */
@@ -79,17 +87,19 @@ export interface TeleBoxConfig {
     /** Is box readonly */
     readonly readonly$: ReadonlyVal<boolean, boolean>;
     /** Root element to mount boxes */
-    readonly root$: ReadonlyVal<HTMLElement | null>;
+    readonly root: HTMLElement;
     /** Position and dimension of root element */
     readonly rootRect$: ReadonlyVal<TeleBoxRect>;
     /** Position and dimension of stage area */
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
-    readonly stageRatio$: ReadonlyVal<number, boolean>;
+    readonly managerStageRatio$: ReadonlyVal<number, boolean>;
+    /** Default content styles for all boxes */
+    readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
+    /** Default stage styles for all boxes */
+    readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
     /** Position and dimension of collector */
     readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
-    /** highlight stage settings from manager */
-    readonly managerHighlightStage$: ReadonlyVal<boolean>;
 }
 
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;

package/src/TeleBox/utils.ts

@@ -0,0 +1,32 @@
+import type { TeleBoxRect } from "./typings";
+
+export function calcStageRect([rootRect, ratio]: [
+    TeleBoxRect,
+    number
+]): TeleBoxRect {
+    if (ratio <= 0 || rootRect.width <= 0 || rootRect.height <= 0) {
+        return rootRect;
+    }
+
+    const preferredHeight = rootRect.width * ratio;
+    if (preferredHeight === rootRect.height) {
+        return rootRect;
+    }
+
+    if (preferredHeight < rootRect.height) {
+        return {
+            x: 0,
+            y: (rootRect.height - preferredHeight) / 2,
+            width: rootRect.width,
+            height: preferredHeight,
+        };
+    }
+
+    const preferredWidth = rootRect.height / ratio;
+    return {
+        x: (rootRect.width - preferredWidth) / 2,
+        y: 0,
+        width: preferredWidth,
+        height: rootRect.height,
+    };
+}

package/src/TeleBoxCollector/index.ts

@@ -6,10 +6,14 @@ import type {
     ReadonlyValEnhancedResult,
     ValEnhancedResult,
 } from "value-enhancer";
-import { withValueEnhancer } from "value-enhancer";
-import { combine } from "value-enhancer";
-import { Val } from "value-enhancer";
-import { withReadonlyValueEnhancer } from "value-enhancer";
+import { derive } from "value-enhancer";
+import {
+    withValueEnhancer,
+    combine,
+    Val,
+    withReadonlyValueEnhancer,
+    ValManager,
+} from "value-enhancer";
 import { SideEffectManager } from "side-effect-manager";
 import type { TeleBoxRect } from "../TeleBox/typings";
 
@@ -20,22 +24,24 @@ export interface TeleBoxCollectorConfig {
     minimized$: Val<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
 }
 
 type ValConfig = {
     styles: Val<TeleStyles>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
+};
+
+type PropsValConfig = {
+    root: TeleBoxCollectorConfig["root$"];
 };
 
-type ReadonlyValConfig = {
+type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
-    root: ReadonlyVal<HTMLElement | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
-    ReadonlyValEnhancedResult<ReadonlyValConfig>;
+    ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
 
 export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
@@ -44,32 +50,39 @@ export class TeleBoxCollector {
         minimized$,
         readonly$,
         darkMode$,
-        rootRect$,
         namespace = "telebox",
         styles = {},
         root$,
     }: TeleBoxCollectorConfig) {
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
         const rect$ = new Val<TeleBoxRect | undefined>(void 0);
-        const visible$ = minimized$;
+        const visible$ = derive(minimized$);
         const styles$ = new Val(styles);
         const el$ = new Val<HTMLElement>(document.createElement("button"));
 
         const valConfig: ValConfig = {
             styles: styles$,
-            el: el$,
+            $collector: el$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
+            root: root$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
-            root: root$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         el$.value.className = this.wrapClassName("collector");
         el$.value.style.backgroundImage = `url('${collectorSVG}')`;
@@ -129,11 +142,13 @@ export class TeleBoxCollector {
                             }
                         }),
                         // Place after $collector appended to the DOM so that rect calc works
-                        combine([minimized$, rootRect$, root$]).subscribe(
-                            ([minimized, rootRect, root]) => {
+                        combine([minimized$, root$]).subscribe(
+                            ([minimized, root]) => {
                                 if (minimized && root) {
                                     const { x, y, width, height } =
                                         $collector.getBoundingClientRect();
+                                    const rootRect =
+                                        root.getBoundingClientRect();
                                     rect$.setValue({
                                         x: x - rootRect.x,
                                         y: y - rootRect.y,

package/src/TeleBoxCollector/style.scss

@@ -7,7 +7,7 @@
     visibility: hidden;
     display: block;
     position: absolute;
-    z-index: $base-z-index * 2;
+    z-index: $collector-z-index;
     width: 40px;
     height: 40px;
     margin: 0;

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -75,11 +75,6 @@ export class MaxTitleBar extends DefaultTitleBar {
 
         this.sideEffect.addDisposer(
             [
-                this.rootRect$.subscribe((rootRect) => {
-                    const { x, y, width } = rootRect;
-                    $titleBar.style.transform = `translate(${x}px, ${y}px)`;
-                    $titleBar.style.width = width + "px";
-                }),
                 this.state$.subscribe((state) => {
                     $titleBar.classList.toggle(
                         this.wrapClassName("max-titlebar-maximized"),
@@ -109,9 +104,7 @@ export class MaxTitleBar extends DefaultTitleBar {
                                 this.wrapClassName("max-titlebar-single-title"),
                                 titles.length === 1
                             );
-                            if (titles.length === 1) {
-                                this.setTitle(titles[0].title);
-                            } else {
+                            if (titles.length !== 1) {
                                 $titleBar.replaceChild(
                                     this.renderTitles(),
                                     $titleBar.firstElementChild as HTMLElement

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -16,7 +16,10 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
+    width: 100%;
+    z-index: $max-titlebar-z-index;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 
     .#{$namespace}-title {
         display: none;
@@ -95,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     height: 100%;
     overflow: hidden;
     max-width: 182px;
-    min-width: 50px;
+    min-width: 150px;
     padding: 0 26px 0 16px;
     outline: none;
     font-size: 13px;

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");
 
@@ -280,6 +284,7 @@ export class TeleBoxManager {
 
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
+            title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
             boxes$: this.boxes$,
             darkMode$: darkMode$,
             readonly$: readonly$,
@@ -336,8 +341,57 @@ export class TeleBoxManager {
                 }
             }),
         ]);
+
+        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();
+                }
+            }),
+        ]);
     }
 
+    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,39 @@
+@import "../scss/variables.scss";
+
+.#{$namespace}-manager-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $color-container-background;
+
+    &.is-maximized,
+    &.is-minimized {
+        & > .#{$namespace}-manager-stage {
+            overflow: visible;
+        }
+    }
+}
+
+.#{$namespace}-manager-stage {
+    position: relative;
+    overflow: hidden;
+    background: $color-stage-background;
+    box-shadow: $color-stage-shadow;
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-manager-container {
+        background: $color-container-background-dark;
+
+        & > .#{$namespace}-manager-stage {
+            background: $color-stage-background-dark;
+            box-shadow: $color-stage-shadow-dark;
+        }
+    }
+}