@netless/telebox-insider 0.2.25 → 1.0.0-alpha.10

package/src/TeleBoxManager/typings.ts

@@ -1,25 +1,28 @@
-import type EventEmitter from "eventemitter3";
-import { TeleBoxColorScheme } from "..";
+import type { TeleBoxColorScheme } from "..";
 import type { ReadonlyTeleBox, TeleBoxState } from "../TeleBox";
 import type { TeleBoxConfig } from "../TeleBox/typings";
 import type { TeleBoxCollector } from "../TeleBoxCollector";
 import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 
-export interface TeleBoxManagerConfig
-    extends Pick<
-        TeleBoxConfig,
-        | "prefersColorScheme"
-        | "fence"
-        | "containerRect"
-        | "maximized"
-        | "minimized"
-        | "namespace"
-        | "readonly"
-    > {
+export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Element to mount boxes. */
-    root?: HTMLElement;
+    readonly root?: HTMLElement | null;
+    /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
+    readonly stageRatio?: number;
     /** Where the minimized boxes go. */
-    collector?: TeleBoxCollector;
+    readonly collector?: TeleBoxCollector;
+    /** Restrict box to always be within the stage area. Default false. */
+    readonly fence?: boolean;
+    /** Prefers Box color scheme. Default light. */
+    readonly prefersColorScheme?: TeleBoxColorScheme;
+    /** Maximize box. Default false. */
+    readonly maximized?: boolean;
+    /** Minimize box. Overwrites maximized state. Default false. */
+    readonly minimized?: boolean;
+    /** Is box readonly */
+    readonly readonly?: boolean;
+    /** Show stage frame and grey-out the non-stage area. Default true. */
+    readonly highlightStage?: boolean;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -33,7 +36,7 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "y"
     | "resizable"
     | "draggable"
-    | "fixRatio"
+    | "ratio"
     | "zIndex";
 
 export type TeleBoxManagerCreateConfig = Pick<
@@ -43,7 +46,14 @@ export type TeleBoxManagerCreateConfig = Pick<
 
 export type TeleBoxManagerQueryConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "id" | "focus"
+    | "title"
+    | "visible"
+    | "resizable"
+    | "draggable"
+    | "ratio"
+    | "zIndex"
+    | "id"
+    | "focus"
 >;
 
 export type TeleBoxManagerUpdateConfig = Pick<
@@ -56,41 +66,21 @@ type CheckTeleBoxManagerConfig<
 > = T;
 
 export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
-    focused: [ReadonlyTeleBox | undefined];
-    blurred: [ReadonlyTeleBox | undefined];
-    created: [ReadonlyTeleBox];
-    removed: [ReadonlyTeleBox[]];
-    state: [TeleBoxState];
-    maximized: [boolean];
-    minimized: [boolean];
-    move: [ReadonlyTeleBox];
-    resize: [ReadonlyTeleBox];
-    intrinsic_move: [ReadonlyTeleBox];
-    intrinsic_resize: [ReadonlyTeleBox];
-    visual_resize: [ReadonlyTeleBox];
-    z_index: [ReadonlyTeleBox];
-    prefers_color_scheme: [TeleBoxColorScheme];
-    dark_mode: [boolean];
+    focused: ReadonlyTeleBox | undefined;
+    blurred: ReadonlyTeleBox | undefined;
+    created: ReadonlyTeleBox;
+    removed: ReadonlyTeleBox[];
+    state: TeleBoxState;
+    maximized: boolean;
+    minimized: boolean;
+    move: ReadonlyTeleBox;
+    resize: ReadonlyTeleBox;
+    intrinsic_move: ReadonlyTeleBox;
+    intrinsic_resize: ReadonlyTeleBox;
+    visual_resize: ReadonlyTeleBox;
+    z_index: ReadonlyTeleBox;
+    prefers_color_scheme: TeleBoxColorScheme;
+    dark_mode: boolean;
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
-
-export interface TeleBoxManagerEvents
-    extends EventEmitter<TeleBoxManagerEvent> {
-    on<U extends TeleBoxManagerEvent>(
-        event: U,
-        listener: (...value: TeleBoxManagerEventConfig[U]) => void
-    ): this;
-    once<U extends TeleBoxManagerEvent>(
-        event: U,
-        listener: (...value: TeleBoxManagerEventConfig[U]) => void
-    ): this;
-    addListener<U extends TeleBoxManagerEvent>(
-        event: U,
-        listener: (...value: TeleBoxManagerEventConfig[U]) => void
-    ): this;
-    emit<U extends TeleBoxManagerEvent>(
-        event: U,
-        ...value: TeleBoxManagerEventConfig[U]
-    ): boolean;
-}

package/src/TeleStage/index.ts

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,49 @@
+@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;
+    }
+}

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -14,6 +14,7 @@ import type {
     TeleTitleBarEvent,
 } from "../typings";
 import { preventEvent } from "../../utils";
+import type { ReadonlyVal } from "value-enhancer";
 
 export type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
@@ -26,20 +27,20 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
 
 export class DefaultTitleBar implements TeleTitleBar {
     public constructor({
-        readonly = false,
-        title,
+        readonly$,
+        state$,
+        title$,
         buttons,
         onEvent,
         onDragStart,
         namespace = "telebox",
-        state = TELE_BOX_STATE.Normal,
-    }: DefaultTitleBarConfig = {}) {
-        this.readonly = readonly;
+    }: DefaultTitleBarConfig) {
+        this.readonly$ = readonly$;
+        this.state$ = state$;
+        this.title$ = title$;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
         this.namespace = namespace;
-        this.title = title;
-        this.state = state;
 
         this.buttons = buttons || [
             {
@@ -64,39 +65,8 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $titleBar: HTMLElement | undefined;
 
-    public $title: HTMLElement | undefined;
-
     public $dragArea: HTMLElement;
 
-    public setTitle(title: string): void {
-        this.title = title;
-        if (this.$title) {
-            this.$title.textContent = title;
-            this.$title.title = title;
-        }
-    }
-
-    public setState(state: TeleBoxState): void {
-        if (this.state !== state) {
-            this.state = state;
-
-            this.buttons.forEach((btn, i) => {
-                if (btn.isActive) {
-                    this.$btns[i].classList.toggle(
-                        "is-active",
-                        btn.isActive(state)
-                    );
-                }
-            });
-        }
-    }
-
-    public setReadonly(readonly: boolean): void {
-        if (this.readonly !== readonly) {
-            this.readonly = readonly;
-        }
-    }
-
     public render(): HTMLElement {
         if (!this.$titleBar) {
             this.$titleBar = document.createElement("div");
@@ -106,21 +76,17 @@ export class DefaultTitleBar implements TeleTitleBar {
             $titleArea.className = this.wrapClassName("title-area");
             $titleArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
 
-            this.$title = document.createElement("h1");
-            this.$title.className = this.wrapClassName("title");
-            this.$title.dataset.teleBoxHandle = TeleBoxDragHandleType;
-            if (this.title) {
-                this.$title.textContent = this.title;
-                this.$title.title = this.title;
-            }
+            const $title = document.createElement("h1");
+            $title.className = this.wrapClassName("title");
+            $title.dataset.teleBoxHandle = TeleBoxDragHandleType;
 
-            $titleArea.appendChild(this.$title);
+            $titleArea.appendChild($title);
             $titleArea.appendChild(this.$dragArea);
 
             const $buttonsContainer = document.createElement("div");
             $buttonsContainer.className = this.wrapClassName("titlebar-btns");
 
-            this.buttons.forEach(({ iconClassName, isActive }, i) => {
+            this.buttons.forEach(({ iconClassName }, i) => {
                 const teleTitleBarBtnIndex = String(i);
 
                 const $btn = document.createElement("button");
@@ -129,21 +95,36 @@ export class DefaultTitleBar implements TeleTitleBar {
                 )} ${iconClassName}`;
                 $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
                 $btn.dataset.teleTitleBarNoDblClick = "true";
-
-                if (isActive) {
-                    $btn.classList.toggle("is-active", isActive(this.state));
-                }
-
-                this.$btns.push($btn);
-
                 $buttonsContainer.appendChild($btn);
             });
 
+            this.sideEffect.addDisposer(
+                this.title$.subscribe((title) => {
+                    $title.textContent = title;
+                    $title.title = title;
+                }),
+                "render-title"
+            );
+
+            this.sideEffect.addDisposer(
+                this.state$.subscribe((state) => {
+                    this.buttons.forEach((btn, i) => {
+                        if (btn.isActive) {
+                            $buttonsContainer.children[i]?.classList.toggle(
+                                "is-active",
+                                btn.isActive(state)
+                            );
+                        }
+                    });
+                }),
+                "render-state-btns"
+            );
+
             this.sideEffect.addEventListener(
                 $buttonsContainer,
                 "click",
                 (ev) => {
-                    if (this.readonly) {
+                    if (this.readonly$.value) {
                         return;
                     }
                     const target = ev.target as HTMLElement;
@@ -163,7 +144,9 @@ export class DefaultTitleBar implements TeleTitleBar {
                             } as TeleTitleBarEvent);
                         }
                     }
-                }
+                },
+                {},
+                "render-btns-container-click"
             );
 
             this.$titleBar.appendChild($titleArea);
@@ -203,8 +186,6 @@ export class DefaultTitleBar implements TeleTitleBar {
         this.sideEffect.flushAll();
         if (this.$titleBar) {
             this.$titleBar = void 0;
-            this.$title = void 0;
-            this.$btns.length = 0;
             this.onDragStart = void 0;
             this.onEvent = void 0;
         }
@@ -214,15 +195,13 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public onDragStart?: TeleTitleBarConfig["onDragStart"];
 
-    protected readonly: boolean;
+    protected readonly$: TeleTitleBarConfig["readonly$"];
 
-    protected title?: string;
+    protected title$: ReadonlyVal<string>;
 
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
 
-    protected state: TeleBoxState;
-
-    protected $btns: HTMLButtonElement[] = [];
+    protected state$: TeleTitleBarConfig["state$"];
 
     protected sideEffect = new SideEffectManager();
 
@@ -233,7 +212,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     };
 
     protected handleTitleBarClick = (ev: MouseEvent): void => {
-        if (this.readonly) {
+        if (this.readonly$.value) {
             return;
         }
 
@@ -273,7 +252,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     };
 
     protected handleTitleBarTouch = (ev: TouchEvent): void => {
-        if (this.readonly) {
+        if (this.readonly$.value) {
             return;
         }
 

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -1,6 +1,9 @@
 @import "../../scss/variables.scss";
+@import "../../scss/mixins.scss";
 
 .#{$namespace}-titlebar {
+    @include no-user-select;
+
     box-sizing: border-box;
     height: 26px;
     display: flex;
@@ -22,6 +25,8 @@
 }
 
 .#{$namespace}-title {
+    @include no-user-select;
+
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -53,6 +58,8 @@
 }
 
 .#{$namespace}-titlebar-btn {
+    @include no-user-select;
+
     width: 22px;
     height: 22px;
     padding: 0;

package/src/TeleTitleBar/typings.ts

@@ -1,3 +1,4 @@
+import type { ReadonlyVal } from "value-enhancer";
 import type { TeleBoxDelegateEventConfig, TeleBoxState } from "../TeleBox";
 
 export type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> =
@@ -8,22 +9,15 @@ export type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> =
         : never;
 
 export interface TeleTitleBarConfig {
-    readonly?: boolean;
-    title?: string;
-    state?: TeleBoxState;
+    readonly$: ReadonlyVal<boolean, boolean>;
+    title$: ReadonlyVal<string, boolean>;
+    state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
 
 export interface TeleTitleBar {
-    setTitle(title: string): void;
-
-    setState(state: TeleBoxState): void;
-
-    setReadonly(readonly: boolean): void;
-
     render(): HTMLElement;
-
     destroy(): void;
 }

package/src/index.ts

@@ -2,6 +2,5 @@ import "./scss/fancy-scrollbar.scss";
 
 export * from "./TeleBox";
 export * from "./TeleTitleBar";
-export * from "./TeleBoxReact";
 export * from "./TeleBoxManager";
 export * from "./TeleBoxCollector";

package/src/scss/mixins.scss

@@ -0,0 +1,7 @@
+@mixin no-user-select {
+    user-select: none;
+    // touch device
+    -webkit-touch-callout: none;
+    // iOS Safari
+    -webkit-user-select: none;
+}

package/src/scss/variables.scss

@@ -1,2 +1,5 @@
 $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;

package/src/utils.ts

@@ -15,12 +15,6 @@ export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
         : (ev as MouseEvent);
 }
 
-export function genUniqueKey(): string {
-    return (
-        Date.now().toString().slice(6) + Math.random().toString().slice(2, 8)
-    );
-}
-
 export function getRandomInt(min: number, max: number): number {
     min = Math.ceil(min);
     max = Math.floor(max);

package/dist/TeleBoxCollector/TeleBoxCollector.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import { TeleBoxCollectorConfig } from ".";
-declare const storyMeta: Meta;
-export default storyMeta;
-export declare const Overview: Story<TeleBoxCollectorConfig>;

package/dist/TeleBoxManager/MaxTitleBar/MaxTitleBar.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import { MaxTitleBarReactProps } from "./MaxTitleBarReact";
-declare const storyMeta: Meta;
-export default storyMeta;
-export declare const Overview: Story<MaxTitleBarReactProps>;
-export declare const SingleBox: Story<MaxTitleBarReactProps>;
-export declare const BoxOverflows: Story<MaxTitleBarReactProps>;

package/dist/TeleBoxManager/MaxTitleBar/MaxTitleBarReact.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import { MaxTitleBarConfig } from ".";
-export declare type MaxTitleBarReactProps = MaxTitleBarConfig;
-export declare const MaxTitleBarReact: FC<MaxTitleBarConfig>;

package/dist/TeleBoxReact/TeleBox.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import { TeleBoxReactProps } from ".";
-declare const storyMeta: Meta<TeleBoxReactProps>;
-export default storyMeta;
-export declare const Overview: Story<TeleBoxReactProps>;
-export declare const Resizable: Story<TeleBoxReactProps>;
-export declare const Draggable: Story<TeleBoxReactProps>;
-export declare const FixRatio: Story<TeleBoxReactProps>;
-export declare const Readonly: Story<TeleBoxReactProps>;