@netless/telebox-insider 1.0.0-alpha.25 → 1.0.0-alpha.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.25",
+    "version": "1.0.0-alpha.28",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -65,6 +65,7 @@ type PropsValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    managerStageRatio: RequiredTeleBoxConfig["managerStageRatio$"];
     defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
     defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
@@ -240,6 +241,7 @@ export class TeleBox {
             readonly: readonly$,
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
+            managerStageRatio: managerStageRatio$,
             defaultBoxBodyStyle: defaultBoxBodyStyle$,
             defaultBoxStageStyle: defaultBoxStageStyle$,
             collectorRect: collectorRect$,

package/src/TeleBox/style.scss

@@ -14,8 +14,8 @@
 }
 
 .#{$namespace}-box-main {
-    @include v(border, box-border, $box-border);
-    @include v(box-shadow, box-shadow, $box-shadow);
+    @include clr(border, boxBorder);
+    @include clr(boxShadow, boxShadow);
 
     position: relative;
     width: 100%;
@@ -50,6 +50,8 @@
 
     position: absolute;
     z-index: 2147483647;
+    // enable pointermove event on touch devices
+    touch-action: none;
 }
 
 .#{$namespace}-n {
@@ -169,7 +171,7 @@
 }
 
 .#{$namespace}-maximized {
-    box-shadow: none;
+    boxshadow: none;
     transition: none;
 }
 
@@ -198,7 +200,7 @@
     color-scheme: dark;
 
     .#{$namespace}-box-main {
-        @include v(border, box-border-dark, $box-border-dark);
-        @include v(box-shadow, box-shadow-dark, $box-shadow-dark);
+        @include clr-dark(border, boxBorder);
+        @include clr-dark(boxShadow, boxShadow);
     }
 }

package/src/TeleBox/style.shadow.scss

@@ -1,5 +1,6 @@
 @import "../scss/variables.scss";
 @import "../scss/mixins.scss";
+@import "../scss/fancy-scrollbar.scss";
 
 .#{$namespace}-quarantine {
     all: initial;
@@ -11,7 +12,7 @@
 }
 
 .#{$namespace}-body-wrap {
-    @include v(color, box-color, $box-color);
+    @include clr(color, boxColor);
 
     flex: 1;
     width: 100%;
@@ -26,11 +27,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    @include v(
-        background-color,
-        manager-container-background,
-        $manager-container-background
-    );
+    @include clr(background-color, boxContainerBackground);
 }
 
 .#{$namespace}-box-stage {
@@ -38,12 +35,8 @@
     z-index: 1;
     overflow: hidden;
 
-    @include v(
-        background-color,
-        manager-stage-background,
-        $manager-stage-background
-    );
-    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
+    @include clr(background-color, boxStageBackground);
+    @include clr(boxShadow, boxStageShadow);
 }
 
 .#{$namespace}-footer-wrap {
@@ -51,6 +44,9 @@
     display: flex;
     flex-direction: column;
 
+    @include clr(color, boxFooterColor);
+    @include clr(background-color, boxFooterBackground);
+
     &::before {
         content: "";
         display: block;
@@ -62,27 +58,20 @@
     color-scheme: dark;
 
     .#{$namespace}-body-wrap {
-        @include v(color, box-color-dark, $box-color-dark);
+        @include clr-dark(color, boxColor);
     }
 
     .#{$namespace}-content {
-        @include v(
-            background-color,
-            manager-container-background-dark,
-            $manager-container-background-dark
-        );
+        @include clr-dark(background-color, boxContainerBackground);
     }
 
     .#{$namespace}-box-stage {
-        @include v(
-            background-color,
-            manager-stage-background-dark,
-            $manager-stage-background-dark
-        );
-        @include v(
-            box-shadow,
-            manager-stage-shadow-dark,
-            $manager-stage-shadow-dark
-        );
+        @include clr-dark(background-color, boxStageBackground);
+        @include clr-dark(boxShadow, boxStageShadow);
+    }
+
+    .#{$namespace}-footer-wrap {
+        @include clr-dark(color, boxFooterColor);
+        @include clr-dark(background-color, boxFooterBackground);
     }
 }

package/src/TeleBoxCollector/index.ts

@@ -9,7 +9,6 @@ import type {
 import { derive } from "value-enhancer";
 import {
     withValueEnhancer,
-    combine,
     Val,
     withReadonlyValueEnhancer,
     ValManager,
@@ -20,10 +19,11 @@ import type { TeleBoxRect } from "../TeleBox/typings";
 export interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
-    root$: ReadonlyVal<HTMLElement | null>;
-    minimized$: Val<boolean>;
+    root: HTMLElement;
+    minimized$: ReadonlyVal<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
+    onClick?: () => void;
 }
 
 type ValConfig = {
@@ -31,17 +31,13 @@ type ValConfig = {
     $collector: Val<HTMLElement>;
 };
 
-type PropsValConfig = {
-    root: TeleBoxCollectorConfig["root$"];
-};
-
 type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
-    ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
+    ReadonlyValEnhancedResult<MyReadonlyValConfig>;
 
 export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
@@ -52,7 +48,8 @@ export class TeleBoxCollector {
         darkMode$,
         namespace = "telebox",
         styles = {},
-        root$,
+        root,
+        onClick,
     }: TeleBoxCollectorConfig) {
         this.namespace = namespace;
 
@@ -71,12 +68,6 @@ export class TeleBoxCollector {
 
         withValueEnhancer(this, valConfig, valManager);
 
-        const propsValConfig: PropsValConfig = {
-            root: root$,
-        };
-
-        withReadonlyValueEnhancer(this, propsValConfig);
-
         const myReadonlyValConfig: MyReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
@@ -89,12 +80,17 @@ export class TeleBoxCollector {
 
         this._sideEffect.addDisposer(
             el$.subscribe(($collector) => {
+                this._sideEffect.add(() => {
+                    root.appendChild($collector);
+                    return () => $collector.remove();
+                }, "telebox-collector-mount");
+
                 this._sideEffect.addEventListener(
                     $collector,
-                    "pointerup",
-                    (ev) => {
-                        if (ev.isPrimary && !readonly$.value) {
-                            minimized$.setValue(false);
+                    "click",
+                    () => {
+                        if (!readonly$.value) {
+                            onClick?.();
                         }
                     },
                     {},
@@ -136,28 +132,20 @@ export class TeleBoxCollector {
                                 }
                             });
                         }),
-                        root$.subscribe((root) => {
-                            if (root) {
-                                root.appendChild($collector);
-                            }
-                        }),
                         // Place after $collector appended to the DOM so that rect calc works
-                        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,
-                                        width,
-                                        height,
-                                    });
-                                }
+                        minimized$.subscribe((minimized) => {
+                            if (minimized) {
+                                const { x, y, width, height } =
+                                    $collector.getBoundingClientRect();
+                                const rootRect = root.getBoundingClientRect();
+                                rect$.setValue({
+                                    x: x - rootRect.x,
+                                    y: y - rootRect.y,
+                                    width,
+                                    height,
+                                });
                             }
-                        ),
+                        }),
                     ],
                     "telebox-collector-el"
                 );

package/src/TeleBoxCollector/style.scss

@@ -24,8 +24,8 @@
     background-position: center;
     -webkit-tap-highlight-color: transparent;
 
-    @include v(background-color, collector-background, $collector-background);
-    @include v(box-shadow, collector-shadow, $collector-shadow);
+    @include clr(background-color, collectorBackground);
+    @include clr(boxShadow, collectorShadow);
 }
 
 .#{$namespace}-collector-visible {
@@ -41,11 +41,7 @@
     color-scheme: dark;
 
     &.#{$namespace}-collector {
-        @include v(
-            background-color,
-            collector-background-dark,
-            $collector-background-dark
-        );
-        @include v(box-shadow, collector-shadow-dark, $collector-shadow-dark);
+        @include clr-dark(background-color, collectorBackground);
+        @include clr-dark(boxShadow, collectorShadow);
     }
 }

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -113,21 +113,13 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     cursor: pointer;
     user-select: none;
 
-    @include v(color, titlebar-tab-color, $titlebar-tab-color);
-    @include v(
-        background-color,
-        titlebar-tab-background,
-        $titlebar-tab-background
-    );
-    @include v(
-        border-right-color,
-        titlebar-tab-divider-color,
-        $titlebar-tab-divider-color
-    );
+    @include clr(color, titlebarTabColor);
+    @include clr(background-color, titlebarTabBackground);
+    @include clr(border-right-color, titlebarTabDividerColor);
 }
 
 .#{$namespace}-titles-tab-focus {
-    @include v(color, titlebar-tab-focus-color, $titlebar-tab-focus-color);
+    @include clr(color, titlebarTabFocusColor);
 }
 
 .#{$namespace}-readonly {
@@ -140,24 +132,12 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     color-scheme: dark;
 
     .#{$namespace}-titles-tab {
-        @include v(color, titlebar-tab-color-dark, $titlebar-tab-color-dark);
-        @include v(
-            background-color,
-            titlebar-tab-background-dark,
-            $titlebar-tab-background-dark
-        );
-        @include v(
-            border-right-color,
-            titlebar-tab-divider-color-dark,
-            $titlebar-tab-divider-color-dark
-        );
+        @include clr-dark(color, titlebarTabColor);
+        @include clr-dark(background-color, titlebarTabBackground);
+        @include clr-dark(border-right-color, titlebarTabDividerColor);
     }
 
     .#{$namespace}-titles-tab-focus {
-        @include v(
-            color,
-            titlebar-tab-focus-color-dark,
-            $titlebar-tab-focus-color-dark
-        );
+        @include clr-dark(color, titlebarTabFocusColor);
     }
 }

package/src/TeleBoxManager/index.ts

@@ -36,7 +36,9 @@ import type {
     TeleBoxManagerConfig,
     TeleBoxManagerCreateConfig,
     TeleBoxManagerEventConfig,
+    TeleBoxFullscreen,
     TeleBoxManagerQueryConfig,
+    TeleBoxManagerThemeConfig,
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
@@ -53,13 +55,14 @@ 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>;
     containerStyle: Val<string>;
@@ -76,6 +79,7 @@ export interface TeleBoxManager extends CombinedValEnhancedResult {}
 export class TeleBoxManager {
     public constructor({
         root = null,
+        fullscreen = false,
         prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
@@ -88,6 +92,7 @@ export class TeleBoxManager {
         stageStyle = "",
         defaultBoxBodyStyle = null,
         defaultBoxStageStyle = null,
+        theme = {},
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
@@ -98,14 +103,28 @@ export class TeleBoxManager {
 
         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 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>(
             {
@@ -202,32 +221,23 @@ export class TeleBoxManager {
                     : TELE_BOX_STATE.Normal
         );
 
-        this.collector =
-            collector ??
-            new TeleBoxCollector({
-                minimized$: minimized$,
-                readonly$: readonly$,
-                darkMode$: darkMode$,
-                namespace,
-                root$,
-            });
-
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
             root: root$,
             rootRect: rootRect$,
             stageRect: stageRect$,
+            minimized: minimized$,
+            maximized: maximized$,
         };
 
         withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
+            fullscreen: fullscreen$,
             prefersColorScheme: prefersColorScheme$,
             readonly: readonly$,
             fence: fence$,
-            minimized: minimized$,
-            maximized: maximized$,
             stageRatio: stageRatio$,
             containerStyle: containerStyle$,
             stageStyle: stageStyle$,
@@ -278,6 +288,7 @@ export class TeleBoxManager {
 
         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");
@@ -294,11 +305,34 @@ export class TeleBoxManager {
                     !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("is-maximized", maximized);
+                this.$container.classList.toggle(
+                    this.wrapClassName("is-maximized"),
+                    maximized
+                );
             }),
             minimized$.subscribe((minimized) => {
-                this.$container.classList.toggle("is-minimized", minimized);
+                this.$container.classList.toggle(
+                    this.wrapClassName("is-minimized"),
+                    minimized
+                );
             }),
             containerStyle$.subscribe((containerStyle) => {
                 this.$container.style.cssText = containerStyle;
@@ -321,6 +355,17 @@ export class TeleBoxManager {
             }),
         ]);
 
+        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 || ""),
@@ -333,11 +378,11 @@ export class TeleBoxManager {
             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: {
@@ -403,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) {
@@ -576,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.
      */

package/src/TeleBoxManager/style.scss

@@ -9,48 +9,47 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    @include v(
-        background,
-        manager-container-background,
-        $manager-container-background
-    );
-
-    &.is-maximized,
-    &.is-minimized {
+    @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 v(background, manager-stage-background, $manager-stage-background);
-    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
+    @include clr(background, managerStageBackground);
+    @include clr(boxShadow, managerStageShadow);
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     &.#{$namespace}-manager-container {
-        @include v(
-            background,
-            manager-container-background-dark,
-            $manager-container-background-dark
-        );
+        @include clr-root-dark();
+        @include clr-dark(background, managerContainerBackground);
 
         & > .#{$namespace}-manager-stage {
-            @include v(
-                background,
-                manager-stage-background-dark,
-                $manager-stage-background-dark
-            );
-            @include v(
-                box-shadow,
-                manager-stage-shadow-dark,
-                $manager-stage-shadow-dark
-            );
+            @include clr-dark(background, managerStageBackground);
+            @include clr-dark(boxShadow, managerStageShadow);
         }
     }
 }