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

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -1,35 +1,47 @@
 import "./style.scss";
 
 import type { TeleBox } from "../../TeleBox";
-import { DefaultTitleBar, DefaultTitleBarConfig } from "../../TeleTitleBar";
+import type { DefaultTitleBarConfig } from "../../TeleTitleBar";
+import { DefaultTitleBar } from "../../TeleTitleBar";
 import { TELE_BOX_STATE } from "../../TeleBox/constants";
-import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
+import type { TeleBoxRect } from "../../TeleBox/typings";
+import type { ReadonlyVal } from "value-enhancer";
+import { combine } from "value-enhancer";
 
-export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly">;
+export type MaxTitleBarTitle = Pick<TeleBox, "id" | "title">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
-    darkMode: boolean;
-    boxes: MaxTitleBarTeleBox[];
-    containerRect: TeleBoxRect;
-    focusedBox?: MaxTitleBarTeleBox;
+    darkMode$: ReadonlyVal<boolean>;
+    boxes$: ReadonlyVal<TeleBox[]>;
+    rootRect$: ReadonlyVal<TeleBoxRect>;
+    root$: ReadonlyVal<HTMLElement | null>;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
     public constructor(config: MaxTitleBarConfig) {
         super(config);
 
-        this.boxes = config.boxes;
-        this.focusedBox = config.focusedBox;
-        this.containerRect = config.containerRect;
-        this.darkMode = config.darkMode;
+        this.boxes$ = config.boxes$;
+        this.rootRect$ = config.rootRect$;
+        this.darkMode$ = config.darkMode$;
+
+        this.sideEffect.addDisposer(
+            config.root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.render());
+                } else if (this.$titleBar?.parentNode) {
+                    this.$titleBar.remove();
+                }
+            })
+        );
     }
 
-    public focusBox(box?: MaxTitleBarTeleBox): void {
+    public focusBox(box?: TeleBox): void {
         if (this.focusedBox && this.focusedBox === box) {
             return;
         }
 
-        if (this.$titles && this.state === TELE_BOX_STATE.Maximized) {
+        if (this.$titles && this.state$.value === TELE_BOX_STATE.Maximized) {
             const { children } = this.$titles.firstElementChild as HTMLElement;
             for (let i = children.length - 1; i >= 0; i -= 1) {
                 const $tab = children[i] as HTMLElement;
@@ -52,116 +64,78 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.focusedBox = box;
     }
 
-    public setContainerRect(rect: TeleBoxRect): void {
-        this.containerRect = rect;
-        if (this.$titleBar) {
-            const { x, y, width } = rect;
-            this.$titleBar.style.transform = `translate(${x}px, ${y}px)`;
-            this.$titleBar.style.width = width + "px";
-        }
-    }
-
-    public setBoxes(boxes: MaxTitleBarTeleBox[]): void {
-        this.boxes = boxes;
-        this.updateTitles();
-    }
-
-    public setState(state: TeleBoxState): void {
-        super.setState(state);
-        if (this.$titleBar) {
-            this.$titleBar.classList.toggle(
-                this.wrapClassName("max-titlebar-maximized"),
-                state === TELE_BOX_STATE.Maximized
-            );
-        }
-        this.updateTitles();
-    }
-
-    public setReadonly(readonly: boolean): void {
-        super.setReadonly(readonly);
+    public render(): HTMLElement {
         if (this.$titleBar) {
-            this.$titleBar.classList.toggle(
-                this.wrapClassName("readonly"),
-                this.readonly
-            );
+            return this.$titleBar;
         }
-    }
-
-    public setDarkMode(darkMode: boolean): void {
-        if (darkMode !== this.darkMode) {
-            this.darkMode = darkMode;
-            if (this.$titleBar) {
-                this.$titleBar.classList.toggle(
-                    this.wrapClassName("color-scheme-dark"),
-                    darkMode
-                );
-                this.$titleBar.classList.toggle(
-                    this.wrapClassName("color-scheme-light"),
-                    !darkMode
-                );
-            }
-        }
-    }
 
-    public render(): HTMLElement {
         const $titleBar = super.render();
 
-        const { x, y, width } = this.containerRect;
-        $titleBar.style.transform = `translate(${x}px, ${y}px)`;
-        $titleBar.style.width = width + "px";
-
         $titleBar.classList.add(this.wrapClassName("max-titlebar"));
-        $titleBar.classList.toggle(
-            this.wrapClassName("max-titlebar-maximized"),
-            this.state === TELE_BOX_STATE.Maximized
-        );
-        $titleBar.classList.toggle(
-            this.wrapClassName("readonly"),
-            this.readonly
-        );
-        $titleBar.classList.add(
-            this.wrapClassName(
-                this.darkMode ? "color-scheme-dark" : "color-scheme-light"
-            )
+
+        this.sideEffect.addDisposer(
+            [
+                this.state$.subscribe((state) => {
+                    $titleBar.classList.toggle(
+                        this.wrapClassName("max-titlebar-maximized"),
+                        state === TELE_BOX_STATE.Maximized
+                    );
+                }),
+                this.readonly$.subscribe((readonly) => {
+                    $titleBar.classList.toggle(
+                        this.wrapClassName("readonly"),
+                        readonly
+                    );
+                }),
+                this.darkMode$.subscribe((darkMode) => {
+                    $titleBar.classList.toggle(
+                        this.wrapClassName("color-scheme-dark"),
+                        darkMode
+                    );
+                    $titleBar.classList.toggle(
+                        this.wrapClassName("color-scheme-light"),
+                        !darkMode
+                    );
+                }),
+                combine([this.state$, this.boxes$]).subscribe(
+                    ([state, titles]) => {
+                        if (state === TELE_BOX_STATE.Maximized) {
+                            $titleBar.classList.toggle(
+                                this.wrapClassName("max-titlebar-single-title"),
+                                titles.length === 1
+                            );
+                            if (titles.length !== 1) {
+                                $titleBar.replaceChild(
+                                    this.renderTitles(),
+                                    $titleBar.firstElementChild as HTMLElement
+                                );
+                            }
+                        }
+                    }
+                ),
+            ],
+            "max-render"
         );
 
         const $titlesArea = document.createElement("div");
         $titlesArea.classList.add(this.wrapClassName("titles-area"));
         $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
 
-        this.updateTitles();
-
         return $titleBar;
     }
 
     public destroy(): void {
         super.destroy();
         this.$titles = void 0;
-        this.boxes.length = 0;
         this.focusedBox = void 0;
     }
 
-    public updateTitles(): void {
-        if (this.$titleBar && this.state === TELE_BOX_STATE.Maximized) {
-            this.$titleBar.classList.toggle(
-                this.wrapClassName("max-titlebar-single-title"),
-                this.boxes.length === 1
-            );
-            if (this.boxes.length === 1) {
-                this.setTitle(this.boxes[0].title);
-            } else {
-                this.$titleBar.replaceChild(
-                    this.renderTitles(),
-                    this.$titleBar.firstElementChild as HTMLElement
-                );
-            }
-        }
-    }
-
     protected renderTitles(): HTMLElement {
         this.$titles = document.createElement("div");
         this.$titles.className = this.wrapClassName("titles");
-        this.$titles.addEventListener(
+
+        this.sideEffect.addEventListener(
+            this.$titles,
             "wheel",
             (ev) => {
                 (ev.currentTarget as HTMLElement).scrollBy({
@@ -169,14 +143,15 @@ export class MaxTitleBar extends DefaultTitleBar {
                     behavior: "smooth",
                 });
             },
-            { passive: false }
+            { passive: false },
+            "max-render-wheel-titles"
         );
 
         const $content = document.createElement("div");
         $content.className = this.wrapClassName("titles-content");
         this.$titles.appendChild($content);
 
-        this.boxes.forEach((box) => {
+        const disposers = this.boxes$.value.map((box) => {
             const $tab = document.createElement("button");
             $tab.className = this.wrapClassName("titles-tab");
             $tab.textContent = box.title;
@@ -188,18 +163,23 @@ export class MaxTitleBar extends DefaultTitleBar {
             }
 
             $content.appendChild($tab);
+
+            return box._title$.reaction((title) => ($tab.textContent = title));
         });
 
+        this.sideEffect.addDisposer(
+            () => disposers.forEach((disposer) => disposer()),
+            "max-render-tab-titles"
+        );
+
         return this.$titles;
     }
 
-    protected darkMode: boolean;
+    public focusedBox: TeleBox | undefined;
 
-    protected $titles: HTMLElement | undefined;
-
-    protected boxes: MaxTitleBarTeleBox[];
+    protected darkMode$: MaxTitleBarConfig["darkMode$"];
+    protected boxes$: MaxTitleBarConfig["boxes$"];
+    protected rootRect$: MaxTitleBarConfig["rootRect$"];
 
-    public focusedBox: MaxTitleBarTeleBox | undefined;
-
-    protected containerRect: TeleBoxRect;
+    protected $titles: HTMLElement | undefined;
 }

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -1,4 +1,5 @@
 @import "../../scss/variables.scss";
+@import "../../scss/mixins.scss";
 
 $scrollbar-size: 8px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
@@ -9,12 +10,16 @@ $scrollbar-color-hover: rgba(238, 238, 247, 1);
 $scrollbar-color-active: rgba(238, 238, 247, 1);
 
 .#{$namespace}-max-titlebar {
+    @include no-user-select;
+
     display: none;
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
-    user-select: none;
+    width: 100%;
+    z-index: $max-titlebar-z-index;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 
     .#{$namespace}-title {
         display: none;
@@ -93,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     height: 100%;
     overflow: hidden;
     max-width: 182px;
-    min-width: 50px;
+    min-width: 150px;
     padding: 0 26px 0 16px;
     outline: none;
     font-size: 13px;

package/src/TeleBoxManager/constants.ts

@@ -6,11 +6,8 @@ export enum TELE_BOX_MANAGER_EVENT {
     State = "state",
     Maximized = "maximized",
     Minimized = "minimized",
-    Move = "move",
-    Resize = "resize",
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
-    VisualResize = "visual_resize",
     ZIndex = "z_index",
     PrefersColorScheme = "prefers_color_scheme",
     DarkMode = "dark_mode",