@netless/telebox-insider 1.0.0-alpha.3 → 1.0.0-alpha.30

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 {
@@ -32,11 +36,13 @@ import type {
     TeleBoxManagerConfig,
     TeleBoxManagerCreateConfig,
     TeleBoxManagerEventConfig,
+    TeleBoxFullscreen,
     TeleBoxManagerQueryConfig,
+    TeleBoxManagerThemeConfig,
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
-import { TeleStage } from "../TeleStage";
+import { calcStageRect } from "../TeleBox/utils";
 
 export * from "./typings";
 export * from "./constants";
@@ -49,16 +55,20 @@ type ReadonlyValConfig = {
     root: Val<HTMLElement | null>;
     rootRect: Val<TeleBoxRect>;
     stageRect: ReadonlyVal<TeleBoxRect>;
+    minimized: ReadonlyVal<boolean, boolean>;
+    maximized: ReadonlyVal<boolean, boolean>;
 };
 
 type ValConfig = {
+    fullscreen: Val<TeleBoxFullscreen>;
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     readonly: Val<boolean, boolean>;
-    minimized: Val<boolean, boolean>;
-    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> &
@@ -69,27 +79,52 @@ export interface TeleBoxManager extends CombinedValEnhancedResult {}
 export class TeleBoxManager {
     public constructor({
         root = null,
+        fullscreen = false,
         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,
+        theme = {},
     }: 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 fullscreen$ = new Val(fullscreen);
+
+        const input_minimized$ = new Val(minimized);
+        const input_maximized$ = new Val(maximized);
+        const maximized$ = combine(
+            [input_maximized$, fullscreen$],
+            ([maximized, fullscreen]) => (fullscreen ? true : maximized)
+        );
+        const minimized$ = combine(
+            [input_minimized$, fullscreen$],
+            ([minimized, fullscreen]) => (fullscreen ? false : minimized)
+        );
+        this.setMaximized = (maximized, skipUpdate) =>
+            input_maximized$.setValue(maximized, skipUpdate);
+        this.setMinimized = (minimized, skipUpdate) =>
+            input_minimized$.setValue(minimized, skipUpdate);
 
         const rootRect$ = new Val<TeleBoxRect>(
             {
@@ -106,16 +141,14 @@ export class TeleBoxManager {
                     if (!root) {
                         return () => void 0;
                     }
-                    const observer = new ResizeObserver((entries) => {
-                        const rect = entries[0]?.contentRect;
-                        if (rect) {
-                            rootRect$.setValue({
-                                x: rect.x,
-                                y: rect.y,
-                                width: rect.width,
-                                height: rect.height,
-                            });
-                        }
+                    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();
@@ -123,6 +156,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(
@@ -184,55 +221,36 @@ export class TeleBoxManager {
                     : TELE_BOX_STATE.Normal
         );
 
-        this.collector =
-            collector ??
-            new TeleBoxCollector({
-                minimized$: minimized$,
-                readonly$: readonly$,
-                darkMode$: darkMode$,
-                namespace,
-                root$,
-                rootRect$,
-            });
-
-        const teleStage = new TeleStage({
-            namespace,
-            rootRect$,
-            ratio$: stageRatio$,
-            root$,
-            highlightStage$: combine(
-                [highlightStage$, maximized$],
-                ([highlightStage, maximized]) => highlightStage && !maximized
-            ),
-        });
-        this._sideEffect.addDisposer(() => teleStage.destroy());
-
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
             root: root$,
             rootRect: rootRect$,
-            stageRect: teleStage.stageRect$,
+            stageRect: stageRect$,
+            minimized: minimized$,
+            maximized: maximized$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
+            fullscreen: fullscreen$,
             prefersColorScheme: prefersColorScheme$,
             readonly: readonly$,
             fence: fence$,
-            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");
 
-        const checkFocusBox = (ev: MouseEvent | TouchEvent): void => {
-            if (readonly$.value) {
+        const checkFocusBox = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || readonly$.value) {
                 return;
             }
 
@@ -263,33 +281,108 @@ export class TeleBoxManager {
 
         this._sideEffect.addEventListener(
             window,
-            "mousedown",
-            checkFocusBox,
-            true
-        );
-        this._sideEffect.addEventListener(
-            window,
-            "touchstart",
+            "pointerdown",
             checkFocusBox,
             true
         );
 
+        this.$container = document.createElement("div");
+        this.$container.className = this.wrapClassName("manager-container");
+        this.setTheme(theme);
+
+        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
+                );
+            }),
+            fullscreen$.subscribe((fullscreen) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("is-fullscreen"),
+                    Boolean(fullscreen)
+                );
+            }),
+            combine(
+                [this.boxes$, fullscreen$],
+                ([boxes, fullscreen]) =>
+                    fullscreen === "no-titlebar" ||
+                    (fullscreen === true && boxes.length <= 1)
+            ).subscribe((hideSingleTabTitlebar) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("hide-fullscreen-titlebar"),
+                    hideSingleTabTitlebar
+                );
+            }),
+            maximized$.subscribe((maximized) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("is-maximized"),
+                    maximized
+                );
+            }),
+            minimized$.subscribe((minimized) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("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.collector =
+            collector ??
+            new TeleBoxCollector({
+                minimized$: minimized$,
+                readonly$: readonly$,
+                darkMode$: darkMode$,
+                namespace,
+                root: this.$container,
+                onClick: () => input_minimized$.setValue(false),
+            });
+
         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: {
-                        maximized$.setValue(!maximized$.value);
+                        this.setMaximized(!maximized$.value);
                         break;
                     }
                     case TELE_BOX_DELEGATE_EVENT.Minimize: {
-                        minimized$.setValue(true);
+                        this.setMinimized(true);
                         break;
                     }
                     case TELE_BOX_EVENT.Close: {
@@ -334,6 +427,10 @@ export class TeleBoxManager {
         ]);
     }
 
+    public readonly $container: HTMLDivElement;
+
+    public readonly $stage: HTMLDivElement;
+
     public get boxes(): ReadonlyArray<TeleBox> {
         return this.boxes$.value;
     }
@@ -351,6 +448,9 @@ export class TeleBoxManager {
 
     public readonly namespace: string;
 
+    public setMinimized: (minimized: boolean, skipUpdate?: boolean) => void;
+    public setMaximized: (maximized: boolean, skipUpdate?: boolean) => void;
+
     /** @deprecated use setMaximized and setMinimized instead */
     public setState(state: TeleBoxState, skipUpdate = false): this {
         switch (state) {
@@ -382,17 +482,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) {
@@ -523,6 +624,15 @@ export class TeleBoxManager {
         return deletedBoxes;
     }
 
+    public setTheme(theme: TeleBoxManagerThemeConfig): void {
+        Object.keys(theme).forEach((key) => {
+            this.$container.style.setProperty(
+                `--tele-${key}`,
+                theme[key as keyof TeleBoxManagerThemeConfig] ?? null
+            );
+        });
+    }
+
     /**
      * Mount manager to a container element.
      */
@@ -659,12 +769,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);
         }
@@ -690,33 +803,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,55 @@
+@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 clr-root();
+    @include clr(background, managerContainerBackground);
+
+    &.#{$namespace}-is-maximized,
+    &.#{$namespace}-is-minimized {
+        & > .#{$namespace}-manager-stage {
+            overflow: visible;
+        }
+    }
+
+    &.#{$namespace}-is-fullscreen {
+        .#{$namespace}-titlebar-icon-maximize,
+        .#{$namespace}-titlebar-icon-minimize {
+            display: none !important;
+        }
+    }
+
+    &.#{$namespace}-hide-fullscreen-titlebar {
+        .#{$namespace}-titlebar {
+            display: none !important;
+        }
+    }
+}
+
+.#{$namespace}-manager-stage {
+    position: relative;
+    overflow: hidden;
+    @include clr(background, managerStageBackground);
+    @include clr(box-shadow, managerStageShadow);
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-manager-container {
+        @include clr-root-dark();
+        @include clr-dark(background, managerContainerBackground);
+
+        & > .#{$namespace}-manager-stage {
+            @include clr-dark(background, managerStageBackground);
+            @include clr-dark(box-shadow, managerStageShadow);
+        }
+    }
+}

package/src/TeleBoxManager/typings.ts

@@ -7,6 +7,8 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Element to mount boxes. */
     readonly root?: HTMLElement | null;
+    /** Fullscreen mode. Default false. */
+    readonly fullscreen?: TeleBoxFullscreen;
     /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
     readonly stageRatio?: number;
     /** Where the minimized boxes go. */
@@ -21,8 +23,16 @@ 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;
+    /** Theme variable */
+    readonly theme?: TeleBoxManagerThemeConfig;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -36,12 +46,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 +70,8 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "visible"
     | "resizable"
     | "draggable"
-    | "ratio"
+    | "boxRatio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"
@@ -58,7 +79,7 @@ export type TeleBoxManagerQueryConfig = Pick<
 
 export type TeleBoxManagerUpdateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer"
 >;
 
 type CheckTeleBoxManagerConfig<
@@ -84,3 +105,44 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
+
+/**
+ * Fullscreen mode.
+ * - `true`: fullscreen mode. hide titlebar for single tab.
+ * - `false`: normal mode.
+ * - `"no-titlebar"`: always hide titlebar
+ * - `"always-titlebar"`: always show titlebar
+ */
+export type TeleBoxFullscreen = boolean | "no-titlebar" | "always-titlebar";
+
+export type TeleBoxManagerThemeConfig = {
+    managerContainerBackground?: string | null;
+    managerStageBackground?: string | null;
+    managerStageShadow?: string | null;
+
+    boxContainerBackground?: string | null;
+    boxStageBackground?: string | null;
+    boxStageShadow?: string | null;
+
+    boxColor?: string | null;
+    boxBorder?: string | null;
+    boxShadow?: string | null;
+    boxFooterColor?: string | null;
+    boxFooterBackground?: string | null;
+
+    titlebarColor?: string | null;
+    titlebarBackground?: string | null;
+    titlebarBorderBottom?: string | null;
+    titlebarTabColor?: string | null;
+    titlebarTabFocusColor?: string | null;
+    titlebarTabBackground?: string | null;
+    titlebarTabDividerColor?: string | null;
+
+    collectorBackground?: string | null;
+    collectorShadow?: string | null;
+
+    titlebarIconMinimize?: string | null;
+    titlebarIconMaximize?: string | null;
+    titlebarIconMaximizeActive?: string | null;
+    titlebarIconClose?: string | null;
+};