@netless/telebox-insider 1.0.0-alpha.20 → 1.0.0-alpha.23

package/src/TeleBoxManager/index.ts

@@ -239,8 +239,8 @@ export class TeleBoxManager {
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
-        const checkFocusBox = (ev: MouseEvent | TouchEvent): void => {
-            if (readonly$.value) {
+        const checkFocusBox = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || readonly$.value) {
                 return;
             }
 
@@ -271,17 +271,56 @@ export class TeleBoxManager {
 
         this._sideEffect.addEventListener(
             window,
-            "mousedown",
-            checkFocusBox,
-            true
-        );
-        this._sideEffect.addEventListener(
-            window,
-            "touchstart",
+            "pointerdown",
             checkFocusBox,
             true
         );
 
+        this.$container = document.createElement("div");
+        this.$container.className = this.wrapClassName("manager-container");
+
+        this.$stage = document.createElement("div");
+        this.$stage.className = this.wrapClassName("manager-stage");
+        this.$container.appendChild(this.$stage);
+
+        this._sideEffect.addDisposer([
+            darkMode$.subscribe((darkMode) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }),
+            maximized$.subscribe((maximized) => {
+                this.$container.classList.toggle("is-maximized", maximized);
+            }),
+            minimized$.subscribe((minimized) => {
+                this.$container.classList.toggle("is-minimized", minimized);
+            }),
+            containerStyle$.subscribe((containerStyle) => {
+                this.$container.style.cssText = containerStyle;
+            }),
+            stageStyle$.subscribe((stageStyle) => {
+                this.$stage.style.cssText = stageStyle;
+                this.$stage.style.width = stageRect$.value.width + "px";
+                this.$stage.style.height = stageRect$.value.height + "px";
+            }),
+            stageRect$.subscribe((stageRect) => {
+                this.$stage.style.width = stageRect.width + "px";
+                this.$stage.style.height = stageRect.height + "px";
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$container);
+                } else if (this.$container.parentElement) {
+                    this.$container.remove();
+                }
+            }),
+        ]);
+
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
             title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
@@ -289,8 +328,8 @@ export class TeleBoxManager {
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
-            root$,
             rootRect$: rootRect$,
+            root: this.$container,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
@@ -341,51 +380,6 @@ export class TeleBoxManager {
                 }
             }),
         ]);
-
-        this.$container = document.createElement("div");
-        this.$container.className = this.wrapClassName("manager-container");
-
-        this.$stage = document.createElement("div");
-        this.$stage.className = this.wrapClassName("manager-stage");
-        this.$container.appendChild(this.$stage);
-
-        this._sideEffect.addDisposer([
-            darkMode$.subscribe((darkMode) => {
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-dark"),
-                    darkMode
-                );
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-light"),
-                    !darkMode
-                );
-            }),
-            maximized$.subscribe((maximized) => {
-                this.$container.classList.toggle("is-maximized", maximized);
-            }),
-            minimized$.subscribe((minimized) => {
-                this.$container.classList.toggle("is-minimized", minimized);
-            }),
-            containerStyle$.subscribe((containerStyle) => {
-                this.$container.style.cssText = containerStyle;
-            }),
-            stageStyle$.subscribe((stageStyle) => {
-                this.$stage.style.cssText = stageStyle;
-                this.$stage.style.width = stageRect$.value.width + "px";
-                this.$stage.style.height = stageRect$.value.height + "px";
-            }),
-            stageRect$.subscribe((stageRect) => {
-                this.$stage.style.width = stageRect.width + "px";
-                this.$stage.style.height = stageRect.height + "px";
-            }),
-            root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.$container);
-                } else if (this.$container.parentElement) {
-                    this.$container.remove();
-                }
-            }),
-        ]);
     }
 
     public readonly $container: HTMLDivElement;

package/src/TeleBoxManager/style.scss

@@ -1,4 +1,5 @@
 @import "../scss/variables.scss";
+@import "../scss/mixins.scss";
 
 .#{$namespace}-manager-container {
     position: relative;
@@ -8,7 +9,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: $color-container-background;
+    @include v(
+        background,
+        manager-container-background,
+        $manager-container-background
+    );
 
     &.is-maximized,
     &.is-minimized {
@@ -21,19 +26,31 @@
 .#{$namespace}-manager-stage {
     position: relative;
     overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
+    @include v(background, manager-stage-background, $manager-stage-background);
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     &.#{$namespace}-manager-container {
-        background: $color-container-background-dark;
+        @include v(
+            background,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
 
         & > .#{$namespace}-manager-stage {
-            background: $color-stage-background-dark;
-            box-shadow: $color-stage-shadow-dark;
+            @include v(
+                background,
+                manager-stage-background-dark,
+                $manager-stage-background-dark
+            );
+            @include v(
+                box-shadow,
+                manager-stage-shadow-dark,
+                $manager-stage-shadow-dark
+            );
         }
     }
 }

package/src/TeleBoxManager/typings.ts

@@ -52,8 +52,12 @@ export type TeleBoxManagerCreateConfig = Pick<
     | "content"
     | "stage"
     | "footer"
+    | "styles"
+    | "bodyStyle"
+    | "stageStyle"
     | "id"
     | "focus"
+    | "enableShadowDOM"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -122,9 +122,9 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             this.sideEffect.addEventListener(
                 $buttonsContainer,
-                "click",
+                "pointerup",
                 (ev) => {
-                    if (this.readonly$.value) {
+                    if (!ev.isPrimary || this.readonly$.value) {
                         return;
                     }
                     const target = ev.target as HTMLElement;
@@ -162,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;
     }
 
@@ -211,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;
         }
 
@@ -245,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 v(color, titlebar-color, $titlebar-color);
+    @include v(background-color, titlebar-background, $titlebar-background);
+    @include v(border-bottom, titlebar-border-bottom, $titlebar-border-bottom);
 }
 
 .#{$namespace}-title-area {
@@ -26,6 +28,7 @@
 
 .#{$namespace}-title {
     @include no-user-select;
+    @include v(color, titlebar-color, $titlebar-color);
 
     overflow: hidden;
     margin: 0;
@@ -36,7 +39,6 @@
     white-space: nowrap;
     word-break: keep-all;
     text-overflow: ellipsis;
-    color: #191919;
 }
 
 .#{$namespace}-drag-area {
@@ -85,31 +87,86 @@
 }
 
 .#{$namespace}-titlebar-icon-minimize {
-    background: center / cover no-repeat url("./icons/minimize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-minimize,
+        url("./icons/minimize.svg")
+    );
 }
 
 .#{$namespace}-titlebar-icon-maximize {
-    background: center / cover no-repeat url("./icons/maximize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-maximize,
+        url("./icons/maximize.svg")
+    );
 
     &.is-active {
-        background-image: url("./icons/maximize-active.svg");
+        @include v(
+            background-image,
+            titlebar-icon-maximize-active,
+            url("./icons/maximize-active.svg")
+        );
     }
 }
 
 .#{$namespace}-titlebar-icon-close {
-    background: center / cover no-repeat url("./icons/close.svg");
+    background: center / cover no-repeat;
+    @include v(background-image, titlebar-icon-close, url("./icons/close.svg"));
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     .#{$namespace}-title {
-        color: #e9e9e9;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
     }
 
     .#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
+        @include v(
+            background-color,
+            titlebar-background-dark,
+            $titlebar-background-dark
+        );
+        @include v(
+            border-bottom,
+            titlebar-border-bottom-dark,
+            $titlebar-border-bottom-dark
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-minimize {
+        @include v(
+            background-image,
+            titlebar-icon-minimize-dark,
+            url("./icons/minimize.svg")
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-maximize {
+        @include v(
+            background-image,
+            titlebar-icon-maximize-dark,
+            url("./icons/maximize.svg")
+        );
+
+        &.is-active {
+            @include v(
+                background-image,
+                titlebar-icon-maximize-active-dark,
+                url("./icons/maximize-active.svg")
+            );
+        }
+    }
+
+    .#{$namespace}-titlebar-icon-close {
+        @include v(
+            background-image,
+            titlebar-icon-close-dark,
+            url("./icons/close.svg")
+        );
     }
 }

package/src/TeleTitleBar/typings.ts

@@ -14,7 +14,7 @@ export interface TeleTitleBarConfig {
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;
-    onDragStart?: (event: MouseEvent | TouchEvent) => void;
+    onDragStart?: (event: PointerEvent) => void;
 }
 
 export interface TeleTitleBar {

package/src/scss/mixins.scss

@@ -5,3 +5,8 @@
     // iOS Safari
     -webkit-user-select: none;
 }
+
+@mixin v($property, $varName, $val) {
+    #{$property}: $val;
+    #{$property}: var(--tele-#{$varName}, $val);
+}

package/src/scss/variables.scss

@@ -5,10 +5,44 @@ $max-titlebar-z-index: $base-z-index + 5000;
 $stage-z-index: $max-titlebar-z-index + 10;
 $collector-z-index: $stage-z-index + 10;
 
-$color-container-background: #f9f9f9;
-$color-stage-background: #fff;
-$color-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+$manager-container-background: #f9f9f9;
+$manager-container-background-dark: #25282e;
+$manager-stage-background: #fff;
+$manager-stage-background-dark: #272a30;
+$manager-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+$manager-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
 
-$color-container-background-dark: #25282e;
-$color-stage-background-dark: #272a30;
-$color-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
+$box-container-background: $manager-container-background;
+$box-container-background-dark: $manager-container-background-dark;
+$box-stage-background: $manager-stage-background;
+$box-stage-background-dark: $manager-stage-background-dark;
+$box-stage-shadow: $manager-stage-shadow;
+$box-stage-shadow-dark: $manager-stage-shadow-dark;
+
+$box-color: #191919;
+$box-color-dark: #e9e9e9;
+$box-border: 1px solid #e3e3ec;
+$box-border-dark: 1px solid #383b42;
+$box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
+$box-shadow-dark: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
+
+$titlebar-color: #191919;
+$titlebar-color-dark: #e9e9e9;
+$titlebar-background: #fff;
+$titlebar-background-dark: #383b42;
+$titlebar-border-bottom: 1px solid #eeeef7;
+$titlebar-border-bottom-dark: none;
+
+$titlebar-tab-color: #7b88a0;
+$titlebar-tab-color-dark: #e9e9e9;
+$titlebar-tab-focus-color: #357bf6;
+$titlebar-tab-focus-color-dark: #357bf6;
+$titlebar-tab-background: transparent;
+$titlebar-tab-background-dark: transparent;
+$titlebar-tab-divider-color: #e5e5f0;
+$titlebar-tab-divider-color-dark: #7b88a0;
+
+$collector-background: #fff;
+$collector-background-dark: #383b42;
+$collector-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
+$collector-shadow-dark: $collector-shadow;

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);