@netless/telebox-insider 0.2.26 → 1.0.0-alpha.11

package/src/TeleBox/style.scss

@@ -37,6 +37,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 }
 
 .#{$namespace}-content {

package/src/TeleBox/typings.ts

@@ -1,4 +1,5 @@
-import type EventEmitter from "eventemitter3";
+import type Emittery from "emittery";
+import type { ReadonlyVal } from "value-enhancer";
 import type { TeleTitleBar } from "../TeleTitleBar";
 import type {
     TeleBoxDragHandleType,
@@ -29,44 +30,34 @@ export interface TeleBoxConfig {
     readonly id?: string;
     /** Box title. Default empty. */
     readonly title?: string;
-    /** Prefers Box color scheme. Default light. */
-    readonly prefersColorScheme?: TeleBoxColorScheme;
-    /** Actual Box Dark Mode */
-    readonly darkMode?: boolean;
     /** Box visible. Default true. */
     readonly visible?: boolean;
-    /** Box width relative to root element. 0~1. Default 0.5. */
+    /** Box width relative to stage area. 0~1. Default 0.5. */
     readonly width?: number;
-    /** Box height relative to root element. 0~1. Default 0.5. */
+    /** Box height relative to stage area. 0~1. Default 0.5. */
     readonly height?: number;
-    /** Minimum box width relative to root element. 0~1. Default 0. */
+    /** Minimum box width relative to stage area. 0~1. Default 0. */
     readonly minWidth?: number;
-    /** Minimum box height relative to root element. 0~1. Default 0. */
+    /** Minimum box height relative to stage area. 0~1. Default 0. */
     readonly minHeight?: number;
-    /** x position relative to root element. 0~1. Default 0.1. */
+    /** x position relative to stage area. 0~1. Default 0.1. */
     readonly x?: number;
-    /** y position relative to root element. 0~1. Default 0.1. */
+    /** y position relative to stage area. 0~1. Default 0.1. */
     readonly y?: number;
-    /** Maximize box. Default false. */
-    readonly maximized?: boolean;
-    /** Minimize box. Overwrites maximized state. Default false. */
-    readonly minimized?: boolean;
     /** The initial state of the box. Default normal. */
     readonly state?: TeleBoxState;
-    /** Is box readonly */
-    readonly readonly?: boolean;
     /** Able to resize box window. Default true. */
     readonly resizable?: boolean;
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
-    /** Restrict box to always be within the containing area. Default true. */
-    readonly fence?: boolean;
-    /** Fixed width/height ratio for box window. Default false. */
-    readonly fixRatio?: boolean;
+    /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
+    readonly ratio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box 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. */
@@ -77,10 +68,30 @@ export interface TeleBoxConfig {
     readonly footer?: HTMLElement;
     /** Box content styles. */
     readonly styles?: HTMLStyleElement;
-    /** Position and dimension of container */
-    readonly containerRect?: TeleBoxRect;
+    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
+    readonly highlightStage?: boolean | null;
+    /** Actual Box Dark Mode */
+    readonly darkMode$: ReadonlyVal<boolean, boolean>;
+    /** Restrict box to always be within the stage area. Default false. */
+    readonly fence$: ReadonlyVal<boolean, boolean>;
+    /** Maximize box. Default false. */
+    readonly maximized$: ReadonlyVal<boolean, boolean>;
+    /** Minimize box. Overwrites maximized state. Default false. */
+    readonly minimized$: ReadonlyVal<boolean, boolean>;
+    /** Is box readonly */
+    readonly readonly$: ReadonlyVal<boolean, boolean>;
+    /** Root element to mount boxes */
+    readonly root$: ReadonlyVal<HTMLElement | null>;
+    /** 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 managerStageRatio$: ReadonlyVal<number, boolean>;
     /** Position and dimension of collector */
-    readonly collectorRect?: TeleBoxRect;
+    readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
+    /** highlight stage settings from manager */
+    readonly managerHighlightStage$: ReadonlyVal<boolean>;
 }
 
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
@@ -88,44 +99,22 @@ type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     dark_mode: boolean;
     prefers_color_scheme: TeleBoxColorScheme;
-    close: void;
-    focus: void;
-    blur: void;
-    move: { x: number; y: number };
-    resize: { width: number; height: number };
+    close: undefined;
+    focus: undefined;
+    blur: undefined;
     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;
     readonly: boolean;
-    destroyed: void;
+    destroyed: undefined;
 }>;
 
 export type TeleBoxEvent = keyof TeleBoxEventConfig;
 
-export interface TeleBoxEvents extends EventEmitter<TeleBoxEvent> {
-    on<U extends TeleBoxEvent>(
-        event: U,
-        listener: (value: TeleBoxEventConfig[U]) => void
-    ): this;
-    once<U extends TeleBoxEvent>(
-        event: U,
-        listener: (value: TeleBoxEventConfig[U]) => void
-    ): this;
-    addListener<U extends TeleBoxEvent>(
-        event: U,
-        listener: (value: TeleBoxEventConfig[U]) => void
-    ): this;
-    emit<U extends TeleBoxEvent>(
-        event: U,
-        ...value: TeleBoxEventConfig[U] extends void
-            ? []
-            : [TeleBoxEventConfig[U]]
-    ): boolean;
-}
+export type TeleBoxEvents = Emittery<TeleBoxEventConfig>;
 
 export type TeleBoxHandleType =
     | TELE_BOX_RESIZE_HANDLE
@@ -136,31 +125,11 @@ type CheckTeleBoxDelegateConfig<
 > = T;
 
 export type TeleBoxDelegateEventConfig = CheckTeleBoxDelegateConfig<{
-    close: void;
-    maximize: void;
-    minimize: void;
+    close: undefined;
+    maximize: undefined;
+    minimize: undefined;
 }>;
 
 export type TeleBoxDelegateEvent = keyof TeleBoxDelegateEventConfig;
 
-export interface TeleBoxDelegateEvents
-    extends EventEmitter<TeleBoxDelegateEvent> {
-    on<U extends TeleBoxDelegateEvent>(
-        event: U,
-        listener: (value: TeleBoxDelegateEventConfig[U]) => void
-    ): this;
-    once<U extends TeleBoxDelegateEvent>(
-        event: U,
-        listener: (value: TeleBoxDelegateEventConfig[U]) => void
-    ): this;
-    addListener<U extends TeleBoxDelegateEvent>(
-        event: U,
-        listener: (value: TeleBoxDelegateEventConfig[U]) => void
-    ): this;
-    emit<U extends TeleBoxDelegateEvent>(
-        event: U,
-        ...value: TeleBoxDelegateEventConfig[U] extends void
-            ? []
-            : [TeleBoxDelegateEventConfig[U]]
-    ): boolean;
-}
+export type TeleBoxDelegateEvents = Emittery<TeleBoxDelegateEventConfig>;

package/src/TeleBoxCollector/index.ts

@@ -1,187 +1,179 @@
 import "./style.scss";
 import collectorSVG from "./icons/collector.svg";
-import { TeleStyles } from "../typings";
+import type { TeleStyles } from "../typings";
+import type {
+    ReadonlyVal,
+    ReadonlyValEnhancedResult,
+    ValEnhancedResult,
+} 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";
 
 export interface TeleBoxCollectorConfig {
-    visible?: boolean;
-    readonly?: boolean;
-    darkMode?: boolean;
     namespace?: string;
     styles?: TeleStyles;
-    onClick?: () => void;
+    root$: ReadonlyVal<HTMLElement | null>;
+    minimized$: Val<boolean>;
+    readonly$: ReadonlyVal<boolean>;
+    darkMode$: ReadonlyVal<boolean>;
+    rootRect$: ReadonlyVal<TeleBoxRect>;
 }
 
-export class TeleBoxCollector {
-    public constructor({
-        visible = true,
-        readonly = false,
-        darkMode = false,
-        namespace = "telebox",
-        styles = {},
-        onClick,
-    }: TeleBoxCollectorConfig = {}) {
-        this._visible = visible;
-        this._readonly = readonly;
-        this._darkMode = darkMode;
-        this.namespace = namespace;
-        this.styles = styles;
-        this.onClick = onClick;
-    }
-
-    public readonly styles: TeleStyles;
-
-    public readonly namespace: string;
-
-    public get visible(): boolean {
-        return this._visible;
-    }
-
-    public get readonly(): boolean {
-        return this._readonly;
-    }
-
-    public get darkMode(): boolean {
-        return this._darkMode;
-    }
+type ValConfig = {
+    styles: Val<TeleStyles>;
+    $collector: Val<HTMLElement>;
+};
 
-    public onClick: (() => void) | undefined;
+type PropsValConfig = {
+    root: TeleBoxCollectorConfig["root$"];
+};
 
-    public $collector: HTMLElement | undefined;
+type MyReadonlyValConfig = {
+    rect: ReadonlyVal<TeleBoxRect | undefined>;
+    visible: ReadonlyVal<boolean>;
+};
 
-    /**
-     * Mount collector to a root element.
-     */
-    public mount(root: HTMLElement): this {
-        root.appendChild(this.render());
-        return this;
-    }
+type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
+    ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
 
-    /**
-     * Unmount collector from the root element.
-     */
-    public unmount(): this {
-        if (this.$collector) {
-            this.$collector.remove();
-        }
-        return this;
-    }
+export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
-    public setVisible(visible: boolean): this {
-        if (this._visible !== visible) {
-            this._visible = visible;
-            if (this.$collector) {
-                this.$collector.classList.toggle(
-                    this.wrapClassName("collector-visible"),
-                    visible
-                );
-            }
-        }
-        return this;
-    }
+export class TeleBoxCollector {
+    public constructor({
+        minimized$,
+        readonly$,
+        darkMode$,
+        rootRect$,
+        namespace = "telebox",
+        styles = {},
+        root$,
+    }: TeleBoxCollectorConfig) {
+        this.namespace = namespace;
 
-    public setReadonly(readonly: boolean): this {
-        if (this._readonly !== readonly) {
-            this._readonly = readonly;
-            if (this.$collector) {
-                this.$collector.classList.toggle(
-                    this.wrapClassName("collector-readonly"),
-                    readonly
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
+        const rect$ = new Val<TeleBoxRect | undefined>(void 0);
+        const visible$ = derive(minimized$);
+        const styles$ = new Val(styles);
+        const el$ = new Val<HTMLElement>(document.createElement("button"));
+
+        const valConfig: ValConfig = {
+            styles: styles$,
+            $collector: el$,
+        };
+
+        withValueEnhancer(this, valConfig, valManager);
+
+        const propsValConfig: PropsValConfig = {
+            root: root$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
+            rect: rect$,
+            visible: visible$,
+        };
+
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+
+        el$.value.className = this.wrapClassName("collector");
+        el$.value.style.backgroundImage = `url('${collectorSVG}')`;
+
+        this._sideEffect.addDisposer(
+            el$.subscribe(($collector) => {
+                this._sideEffect.addEventListener(
+                    $collector,
+                    "click",
+                    () => {
+                        if (!readonly$.value) {
+                            minimized$.setValue(false);
+                        }
+                    },
+                    {},
+                    "telebox-collector-click"
                 );
-            }
-        }
-        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._sideEffect.addDisposer(
+                    [
+                        visible$.subscribe((visible) => {
+                            $collector.classList.toggle(
+                                this.wrapClassName("collector-visible"),
+                                visible
+                            );
+                        }),
+                        readonly$.subscribe((readonly) => {
+                            $collector.classList.toggle(
+                                this.wrapClassName("collector-readonly"),
+                                readonly
+                            );
+                        }),
+                        darkMode$.subscribe((darkMode) => {
+                            $collector.classList.toggle(
+                                this.wrapClassName("color-scheme-dark"),
+                                darkMode
+                            );
+                            $collector.classList.toggle(
+                                this.wrapClassName("color-scheme-light"),
+                                !darkMode
+                            );
+                        }),
+                        styles$.subscribe((styles) => {
+                            Object.keys(styles).forEach((key) => {
+                                const value = styles[
+                                    key as keyof TeleStyles
+                                ] as string;
+                                if (value != null) {
+                                    $collector.style[key as keyof TeleStyles] =
+                                        value;
+                                }
+                            });
+                        }),
+                        root$.subscribe((root) => {
+                            if (root) {
+                                root.appendChild($collector);
+                            }
+                        }),
+                        // Place after $collector appended to the DOM so that rect calc works
+                        combine([minimized$, rootRect$, root$]).subscribe(
+                            ([minimized, rootRect, root]) => {
+                                if (minimized && root) {
+                                    const { x, y, width, height } =
+                                        $collector.getBoundingClientRect();
+                                    rect$.setValue({
+                                        x: x - rootRect.x,
+                                        y: y - rootRect.y,
+                                        width,
+                                        height,
+                                    });
+                                }
+                            }
+                        ),
+                    ],
+                    "telebox-collector-el"
                 );
-                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) {
-            const $collector = this.$collector;
-            Object.keys(styles).forEach((key) => {
-                const value = styles[key as keyof TeleStyles] as string;
-                if (value != null) {
-                    $collector.style[key as keyof TeleStyles] = value;
-                }
-            });
-        }
-        return this;
+            })
+        );
     }
 
-    public render(): HTMLElement {
-        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
-            );
-
-            if (this._visible) {
-                this.$collector.classList.add(
-                    this.wrapClassName("collector-visible")
-                );
-            }
-
-            if (this._readonly) {
-                this.$collector.classList.add(
-                    this.wrapClassName("collector-readonly")
-                );
-            }
-
-            this.$collector.classList.add(
-                this.wrapClassName(
-                    this._darkMode ? "color-scheme-dark" : "color-scheme-light"
-                )
-            );
-
-            this.setStyles(this.styles);
-        }
+    public readonly namespace: string;
 
-        return this.$collector;
-    }
+    protected readonly _sideEffect = new SideEffectManager();
 
     public destroy(): void {
-        if (this.$collector) {
-            this.$collector.removeEventListener(
-                "click",
-                this.handleCollectorClick
-            );
-            this.$collector.remove();
-            this.$collector = void 0;
-        }
-        this.onClick = void 0;
+        this._sideEffect.flushAll();
     }
 
     public wrapClassName(className: string): string {
         return `${this.namespace}-${className}`;
     }
-
-    protected _visible: boolean;
-
-    protected _readonly: boolean;
-
-    protected _darkMode: boolean;
-
-    protected handleCollectorClick = (): void => {
-        if (!this._readonly && this.onClick) {
-            this.onClick();
-        }
-    };
 }

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;