@netless/telebox-insider 1.0.0-alpha.16 → 1.0.0-alpha.19

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";
@@ -38,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";
@@ -60,7 +62,8 @@ type ValConfig = {
     maximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
     stageRatio: Val<number, boolean>;
-    highlightStage: Val<boolean, boolean>;
+    containerStyle: Val<string>;
+    stageStyle: Val<string>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
@@ -74,12 +77,13 @@ 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 = "",
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
@@ -93,8 +97,9 @@ export class TeleBoxManager {
         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 rootRect$ = new Val<TeleBoxRect>(
             {
@@ -126,6 +131,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(
@@ -197,25 +206,12 @@ export class TeleBoxManager {
                 root$,
             });
 
-        const teleStage = new TeleStage({
-            namespace,
-            rootRect$,
-            ratio$: stageRatio$,
-            root$,
-            highlightStage$: combine(
-                [highlightStage$, maximized$, minimized$],
-                ([highlightStage, maximized, minimized]) =>
-                    highlightStage && (minimized || !maximized)
-            ),
-        });
-        this._sideEffect.addDisposer(() => teleStage.destroy());
-
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
             root: root$,
             rootRect: rootRect$,
-            stageRect: teleStage.stageRect$,
+            stageRect: stageRect$,
         };
 
         withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
@@ -227,7 +223,8 @@ export class TeleBoxManager {
             minimized: minimized$,
             maximized: maximized$,
             stageRatio: stageRatio$,
-            highlightStage: highlightStage$,
+            containerStyle: containerStyle$,
+            stageStyle: stageStyle$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -336,8 +333,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,7 +432,7 @@ 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$,
@@ -396,7 +442,8 @@ export class TeleBoxManager {
             managerStageRatio$: this._stageRatio$,
             readonly$: this._readonly$,
             collectorRect$: this.collector._rect$,
-            managerHighlightStage$: this._highlightStage$,
+            managerContainerStyle$: this._containerStyle$,
+            managerStageStyle$: this._stageStyle$,
         });
 
         if (box.focus) {
@@ -663,14 +710,14 @@ 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.contentStageRatio !== undefined) {
+            box.setContentStageRatio(config.contentStageRatio, skipUpdate);
         }
         if (config.content != null) {
             box.mountContent(config.content);
@@ -697,33 +744,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;
+        }
+    }
+}

package/src/TeleBoxManager/typings.ts

@@ -21,8 +21,10 @@ 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;
+    /** Extra styles for telebox manager container */
+    readonly containerStyle?: string;
+    /** Extra styles for telebox manager stage */
+    readonly stageStyle?: string;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -36,9 +38,9 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "y"
     | "resizable"
     | "draggable"
-    | "ratio"
+    | "boxRatio"
     | "zIndex"
-    | "stageRatio";
+    | "contentStageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
@@ -56,8 +58,8 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "visible"
     | "resizable"
     | "draggable"
-    | "ratio"
-    | "stageRatio"
+    | "boxRatio"
+    | "contentStageRatio"
     | "zIndex"
     | "id"
     | "focus"

package/src/scss/variables.scss

@@ -1,5 +1,14 @@
 $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;
+
+$color-container-background: #f9f9f9;
+$color-stage-background: #fff;
+$color-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+
+$color-container-background-dark: #25282e;
+$color-stage-background-dark: #272a30;
+$color-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);

package/dist/TeleStage/index.d.ts

@@ -1,21 +0,0 @@
-import "./style.scss";
-import type { ReadonlyVal } from "value-enhancer";
-import type { TeleBoxRect } from "../TeleBox/typings";
-export interface TeleStageConfig {
-    namespace: string;
-    root$: ReadonlyVal<HTMLElement | null>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
-    ratio$: ReadonlyVal<number>;
-    highlightStage$: ReadonlyVal<boolean>;
-}
-export declare class TeleStage {
-    private readonly _sideEffect;
-    readonly namespace: string;
-    readonly stageRect$: ReadonlyVal<TeleBoxRect>;
-    readonly highlightStage$: ReadonlyVal<boolean>;
-    $boxStage?: HTMLDivElement;
-    constructor({ namespace, rootRect$, ratio$, highlightStage$, root$, }: TeleStageConfig);
-    private render;
-    destroy(): void;
-    wrapClassName(className: string): string;
-}

package/src/TeleStage/index.ts

@@ -1,174 +0,0 @@
-import "./style.scss";
-
-import shallowequal from "shallowequal";
-import { SideEffectManager } from "side-effect-manager";
-import type { ReadonlyVal } from "value-enhancer";
-import { combine } from "value-enhancer";
-import type { TeleBoxRect } from "../TeleBox/typings";
-
-export interface TeleStageConfig {
-    namespace: string;
-    root$: ReadonlyVal<HTMLElement | null>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
-    ratio$: ReadonlyVal<number>;
-    highlightStage$: ReadonlyVal<boolean>;
-}
-
-export class TeleStage {
-    private readonly _sideEffect = new SideEffectManager();
-
-    public readonly namespace: string;
-    public readonly stageRect$: ReadonlyVal<TeleBoxRect>;
-    public readonly highlightStage$: ReadonlyVal<boolean>;
-
-    public $boxStage?: HTMLDivElement;
-
-    constructor({
-        namespace,
-        rootRect$,
-        ratio$,
-        highlightStage$,
-        root$,
-    }: TeleStageConfig) {
-        this.namespace = namespace;
-        this.highlightStage$ = highlightStage$;
-
-        this.stageRect$ = combine(
-            [rootRect$, ratio$],
-            ([rootRect, ratio]) => {
-                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,
-                };
-            },
-            { compare: shallowequal }
-        );
-
-        this._sideEffect.addDisposer(
-            combine([root$, highlightStage$]).subscribe(
-                ([root, highlightStage]) => {
-                    if (root && highlightStage) {
-                        root.appendChild(this.render());
-                    } else if (this.$boxStage?.parentNode) {
-                        this.$boxStage.remove();
-                    }
-                }
-            )
-        );
-    }
-
-    private render(): HTMLDivElement {
-        if (this.$boxStage) {
-            return this.$boxStage;
-        }
-
-        const $boxStage = document.createElement("div");
-        $boxStage.className = this.wrapClassName("box-stage-container");
-        const $boxStageMask1 = document.createElement("div");
-        $boxStageMask1.className = this.wrapClassName("box-stage-mask");
-        const $boxStageMask2 = document.createElement("div");
-        $boxStageMask2.className = this.wrapClassName("box-stage-mask");
-        const $boxStageFrame = document.createElement("div");
-        $boxStageFrame.className = this.wrapClassName("box-stage-frame");
-
-        const [
-            $topLeftCorner,
-            $topRightCorner,
-            $bottomLeftCorner,
-            $bottomRightCorner,
-        ] = [
-            "M0 8V0h8v2H2v6H0Z",
-            "M8 8V0H0v2h6v6h2Z",
-            "M0 0v8h8V6H2V0H0Z",
-            "M8 0v8H0V6h6V0h2Z",
-        ].map((path, i) => {
-            const $svg = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "svg"
-            );
-            $svg.setAttribute("viewBox", "0 0 8 8");
-            $svg.setAttribute(
-                "class",
-                `${this.wrapClassName("box-stage-frame-corner")} is-${i}`
-            );
-            const $path = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "path"
-            );
-            $path.setAttribute("d", path);
-            $path.setAttribute("fill", "#3381FF");
-            $svg.appendChild($path);
-            return $svg;
-        });
-
-        $boxStageFrame.appendChild($topLeftCorner);
-        $boxStageFrame.appendChild($bottomLeftCorner);
-        $boxStageFrame.appendChild($topRightCorner);
-        $boxStageFrame.appendChild($bottomRightCorner);
-
-        $boxStage.appendChild($boxStageMask1);
-        $boxStage.appendChild($boxStageFrame);
-        $boxStage.appendChild($boxStageMask2);
-
-        this._sideEffect.addDisposer(
-            this.highlightStage$.subscribe((highlightStage) => {
-                $boxStage.classList.toggle("is-active", highlightStage);
-            })
-        );
-
-        this._sideEffect.addDisposer(
-            combine([this.highlightStage$, this.stageRect$]).subscribe(
-                ([highlightStage, stageRect]) => {
-                    if (!highlightStage) {
-                        return;
-                    }
-                    if (stageRect.x > 0) {
-                        $boxStage.style.flexDirection = "row";
-                        $boxStageMask1.style.width = `${stageRect.x}px`;
-                        $boxStageMask1.style.height = "";
-                        $boxStageMask2.style.width = `${stageRect.x}px`;
-                        $boxStageMask2.style.height = "";
-                    } else if (stageRect.y > 0) {
-                        $boxStage.style.flexDirection = "column";
-                        $boxStageMask1.style.width = "";
-                        $boxStageMask1.style.height = `${stageRect.y}px`;
-                        $boxStageMask2.style.width = "";
-                        $boxStageMask2.style.height = `${stageRect.y}px`;
-                    }
-                }
-            )
-        );
-
-        this.$boxStage = $boxStage;
-        return $boxStage;
-    }
-
-    public destroy(): void {
-        this._sideEffect.flushAll();
-    }
-
-    public wrapClassName(className: string): string {
-        return `${this.namespace}-${className}`;
-    }
-}

package/src/TeleStage/style.scss

@@ -1,49 +0,0 @@
-@import "../scss/variables.scss";
-
-.#{$namespace}-box-stage-container {
-    display: none;
-    position: absolute;
-    z-index: $stage-z-index;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-
-    &.is-active {
-        display: flex;
-    }
-}
-
-.#{$namespace}-box-stage-mask {
-    background: rgba(0, 0, 0, 0.05);
-}
-
-.#{$namespace}-box-stage-frame {
-    flex: 1;
-    position: relative;
-}
-
-.#{$namespace}-box-stage-frame-corner {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-
-    &.is-0 {
-        top: 0;
-        left: 0;
-    }
-    &.is-1 {
-        top: 0;
-        right: 0;
-    }
-    &.is-2 {
-        bottom: 0;
-        left: 0;
-    }
-    &.is-3 {
-        bottom: 0;
-        right: 0;
-    }
-}