@netless/telebox-insider 1.0.0-alpha.3 → 1.0.0-alpha.32

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -14,7 +14,7 @@ import type {
     TeleTitleBarEvent,
 } from "../typings";
 import { preventEvent } from "../../utils";
-import { Val } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 
 export type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
@@ -29,7 +29,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     public constructor({
         readonly$,
         state$,
-        title = "",
+        title$,
         buttons,
         onEvent,
         onDragStart,
@@ -37,7 +37,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     }: DefaultTitleBarConfig) {
         this.readonly$ = readonly$;
         this.state$ = state$;
-        this.title$ = new Val(title);
+        this.title$ = title$;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
         this.namespace = namespace;
@@ -67,14 +67,6 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $dragArea: HTMLElement;
 
-    public get title(): string {
-        return this.title$.value;
-    }
-
-    public setTitle(title: string): void {
-        this.title$.setValue(title);
-    }
-
     public render(): HTMLElement {
         if (!this.$titleBar) {
             this.$titleBar = document.createElement("div");
@@ -170,15 +162,9 @@ export class DefaultTitleBar implements TeleTitleBar {
         $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
         this.sideEffect.addEventListener(
             $dragArea,
-            "mousedown",
+            "pointerdown",
             this.handleTitleBarClick
         );
-        this.sideEffect.addEventListener(
-            $dragArea,
-            "touchstart",
-            this.handleTitleBarTouch,
-            { passive: true }
-        );
         return $dragArea;
     }
 
@@ -205,7 +191,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     protected readonly$: TeleTitleBarConfig["readonly$"];
 
-    protected title$: Val<string>;
+    protected title$: ReadonlyVal<string>;
 
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
 
@@ -219,8 +205,8 @@ export class DefaultTitleBar implements TeleTitleBar {
         clientY: -100,
     };
 
-    protected handleTitleBarClick = (ev: MouseEvent): void => {
-        if (this.readonly$.value) {
+    protected handleTitleBarClick = (ev: PointerEvent): void => {
+        if (!ev.isPrimary || this.readonly$.value) {
             return;
         }
 
@@ -253,44 +239,44 @@ export class DefaultTitleBar implements TeleTitleBar {
         this.lastTitleBarClick.clientY = ev.clientY;
     };
 
-    protected lastTitleBarTouch = {
-        timestamp: 0,
-        clientX: -100,
-        clientY: -100,
-    };
-
-    protected handleTitleBarTouch = (ev: TouchEvent): void => {
-        if (this.readonly$.value) {
-            return;
-        }
-
-        if ((ev.target as HTMLElement).dataset?.teleTitleBarNoDblClick) {
-            return; // btns
-        }
-
-        preventEvent(ev);
-
-        const now = Date.now();
-        const {
-            clientX = this.lastTitleBarTouch.clientX + 100,
-            clientY = this.lastTitleBarTouch.clientY + 100,
-        } = ev.touches[0] || {};
-
-        if (now - this.lastTitleBarTouch.timestamp <= 500) {
-            if (
-                Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 &&
-                Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10
-            ) {
-                // double click
-                if (this.onEvent) {
-                    this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
-                }
-            }
-        } else if (this.onDragStart) {
-            this.onDragStart(ev);
-        }
-        this.lastTitleBarTouch.timestamp = now;
-        this.lastTitleBarTouch.clientX = clientX;
-        this.lastTitleBarTouch.clientY = clientY;
-    };
+    // protected lastTitleBarTouch = {
+    //     timestamp: 0,
+    //     clientX: -100,
+    //     clientY: -100,
+    // };
+
+    // protected handleTitleBarTouch = (ev: TouchEvent): void => {
+    //     if (this.readonly$.value) {
+    //         return;
+    //     }
+
+    //     if ((ev.target as HTMLElement).dataset?.teleTitleBarNoDblClick) {
+    //         return; // btns
+    //     }
+
+    //     preventEvent(ev);
+
+    //     const now = Date.now();
+    //     const {
+    //         clientX = this.lastTitleBarTouch.clientX + 100,
+    //         clientY = this.lastTitleBarTouch.clientY + 100,
+    //     } = ev.touches[0] || {};
+
+    //     if (now - this.lastTitleBarTouch.timestamp <= 500) {
+    //         if (
+    //             Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 &&
+    //             Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10
+    //         ) {
+    //             // double click
+    //             if (this.onEvent) {
+    //                 this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+    //             }
+    //         }
+    //     } else if (this.onDragStart) {
+    //         this.onDragStart(ev);
+    //     }
+    //     this.lastTitleBarTouch.timestamp = now;
+    //     this.lastTitleBarTouch.clientX = clientX;
+    //     this.lastTitleBarTouch.clientY = clientY;
+    // };
 }

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -8,10 +8,12 @@
     height: 26px;
     display: flex;
     align-items: center;
-    background: #fff;
     user-select: none;
-    border-bottom: 1px solid #eeeef7;
     touch-action: manipulation;
+
+    @include clr(color, titlebarColor);
+    @include clr(background-color, titlebarBackground);
+    @include clr(border-bottom, titlebarBorderBottom);
 }
 
 .#{$namespace}-title-area {
@@ -26,6 +28,7 @@
 
 .#{$namespace}-title {
     @include no-user-select;
+    @include clr(color, titlebarColor);
 
     overflow: hidden;
     margin: 0;
@@ -36,7 +39,6 @@
     white-space: nowrap;
     word-break: keep-all;
     text-overflow: ellipsis;
-    color: #191919;
 }
 
 .#{$namespace}-drag-area {
@@ -47,6 +49,8 @@
     bottom: 0;
     margin: auto;
     z-index: 10;
+    // enable pointermove event on touch devices
+    touch-action: none;
 }
 
 .#{$namespace}-titlebar-btns {
@@ -85,31 +89,47 @@
 }
 
 .#{$namespace}-titlebar-icon-minimize {
-    background: center / cover no-repeat url("./icons/minimize.svg");
+    background: center / cover no-repeat;
+    background-image: url("./icons/minimize.svg");
+    background-image: var(
+        --tele-titlebarIconMinimize,
+        url("./icons/minimize.svg")
+    );
 }
 
 .#{$namespace}-titlebar-icon-maximize {
-    background: center / cover no-repeat url("./icons/maximize.svg");
+    background: center / cover no-repeat;
+    background-image: url("./icons/maximize.svg");
+    background-image: var(
+        --tele-titlebarIconMaximize,
+        url("./icons/maximize.svg")
+    );
 
     &.is-active {
         background-image: url("./icons/maximize-active.svg");
+        background-image: var(
+            --tele-titlebarIconMaximizeActive,
+            url("./icons/maximize-active.svg")
+        );
     }
 }
 
 .#{$namespace}-titlebar-icon-close {
-    background: center / cover no-repeat url("./icons/close.svg");
+    background: center / cover no-repeat;
+    background-image: url("./icons/close.svg");
+    background-image: var(--tele-titlebarIconClose, url("./icons/close.svg"));
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     .#{$namespace}-title {
-        color: #e9e9e9;
+        @include clr-dark(color, titlebarColor);
     }
 
     .#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
+        @include clr-dark(color, titlebarColor);
+        @include clr-dark(background-color, titlebarBackground);
+        @include clr-dark(border-bottom, titlebarBorderBottom);
     }
 }

package/src/TeleTitleBar/typings.ts

@@ -10,11 +10,11 @@ export type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> =
 
 export interface TeleTitleBarConfig {
     readonly$: ReadonlyVal<boolean, boolean>;
-    title?: string;
+    title$: ReadonlyVal<string, boolean>;
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;
-    onDragStart?: (event: MouseEvent | TouchEvent) => void;
+    onDragStart?: (event: PointerEvent) => void;
 }
 
 export interface TeleTitleBar {

package/src/index.ts

@@ -1,5 +1,3 @@
-import "./scss/fancy-scrollbar.scss";
-
 export * from "./TeleBox";
 export * from "./TeleTitleBar";
 export * from "./TeleBoxManager";

package/src/scss/variables.scss

@@ -1,2 +1,74 @@
 $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;
+
+$tele-colors: (
+    managerContainerBackground: #f9f9f9,
+    managerStageBackground: #fff,
+    managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08),
+    boxContainerBackground: #f9f9f9,
+    boxStageBackground: #fff,
+    boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08),
+    boxColor: #191919,
+    boxBorder: 1px solid #e3e3ec,
+    boxShadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15),
+    boxFooterColor: #191919,
+    boxFooterBackground: #fff,
+    titlebarColor: #191919,
+    titlebarBackground: #fff,
+    titlebarBorderBottom: 1px solid #eeeef7,
+    titlebarTabColor: #7b88a0,
+    titlebarTabFocusColor: #357bf6,
+    titlebarTabBackground: transparent,
+    titlebarTabDividerColor: #e5e5f0,
+    collectorBackground: #fff,
+    collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15),
+);
+
+$tele-colors-dark: (
+    managerContainerBackground: #25282e,
+    managerStageBackground: #272a30,
+    managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24),
+    boxContainerBackground: #25282e,
+    boxStageBackground: #272a30,
+    boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24),
+    boxColor: #e9e9e9,
+    boxBorder: 1px solid #383b42,
+    boxShadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15),
+    boxFooterColor: #e9e9e9,
+    boxFooterBackground: #383b42,
+    titlebarColor: #e9e9e9,
+    titlebarBackground: #383b42,
+    titlebarBorderBottom: none,
+    titlebarTabColor: #e9e9e9,
+    titlebarTabFocusColor: #357bf6,
+    titlebarTabBackground: transparent,
+    titlebarTabDividerColor: #7b88a0,
+    collectorBackground: #383b42,
+    collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15),
+);
+
+@mixin clr($property, $key) {
+    #{$property}: map-get($tele-colors, $key);
+    #{$property}: var(--tele-#{$key}, map-get($tele-colors, $key));
+}
+
+@mixin clr-dark($property, $key) {
+    #{$property}: map-get($tele-colors-dark, $key);
+    #{$property}: var(--tele-#{$key}, map-get($tele-colors-dark, $key));
+}
+
+@mixin clr-root() {
+    @each $key, $value in $tele-colors {
+        --tele-#{$key}: #{$value};
+    }
+}
+
+@mixin clr-root-dark() {
+    @each $key, $value in $tele-colors-dark {
+        --tele-#{$key}: #{$value};
+    }
+}

package/src/utils.ts

@@ -9,12 +9,6 @@ export function preventEvent(ev: Event): void {
     }
 }
 
-export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
-    return (ev as TouchEvent).touches
-        ? (ev as TouchEvent).touches[0]
-        : (ev as MouseEvent);
-}
-
 export function getRandomInt(min: number, max: number): number {
     min = Math.ceil(min);
     max = Math.floor(max);

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,178 +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$, highlightStage$, ratio$],
-            ([rootRect, highlightStage, ratio]) => {
-                if (!highlightStage) {
-                    return rootRect;
-                }
-
-                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: $base-z-index + 2000;
-    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;
-    }
-}