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

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function preventEvent(ev: Event): void;
-export declare function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch;
 export declare function getRandomInt(min: number, max: number): number;
 export declare function getBoxDefaultName(): string;
 export declare function identity<TValue>(value: TValue): TValue;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.20",
+    "version": "1.0.0-alpha.23",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -54,7 +54,7 @@
         "sass": "^1.36.0",
         "sass-loader": "^10.1.1",
         "typescript": "^4.1.2",
-        "vite": "^2.4.4"
+        "vite": "^2.9.13"
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",

package/src/TeleBox/index.ts

@@ -1,4 +1,5 @@
 import "./style.scss";
+import shadowStyles from "./style.shadow.scss?inline";
 
 import Emittery from "emittery";
 import styler from "stylefire";
@@ -19,14 +20,7 @@ import {
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import {
-    clamp,
-    flattenEvent,
-    getBoxDefaultName,
-    isFalsy,
-    isTruthy,
-    preventEvent,
-} from "../utils";
+import { clamp, getBoxDefaultName, preventEvent } from "../utils";
 import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
@@ -116,6 +110,7 @@ export class TeleBox {
         focus = false,
         zIndex = 100,
         stageRatio = null,
+        enableShadowDOM = true,
         titleBar,
         content,
         stage,
@@ -141,6 +136,7 @@ export class TeleBox {
 
         this.id = id;
         this.namespace = namespace;
+        this.enableShadowDOM = enableShadowDOM;
 
         const valManager = new ValManager();
         this._sideEffect.addDisposer(() => valManager.destroy());
@@ -368,6 +364,9 @@ export class TeleBox {
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     public readonly namespace: string;
 
+    /** Enable shadow DOM for box content. Default true. */
+    public readonly enableShadowDOM: boolean;
+
     public readonly events = new Emittery<
         TeleBoxEventConfig,
         TeleBoxEventConfig
@@ -614,6 +613,9 @@ export class TeleBox {
     /** DOM of the box */
     public $box: HTMLElement;
 
+    /** DOM of main area of the box. Including $body and $footer. */
+    public $main!: HTMLElement;
+
     /** DOM of the box body */
     public $body!: HTMLElement;
 
@@ -640,35 +642,48 @@ export class TeleBox {
             return this.$box;
         }
 
-        this.$box = document.createElement("div");
-
-        this.$box.classList.add(this.wrapClassName("box"));
-
-        const bindClassName = <TValue>(
-            el: Element,
-            val: ReadonlyVal<TValue, boolean>,
-            className: string,
-            predicate: (value: TValue) => boolean = isTruthy
-        ): string => {
-            return this._sideEffect.add(() => {
-                const wrappedClassName = this.wrapClassName(className);
-                return val.subscribe((value) => {
-                    el.classList.toggle(wrappedClassName, predicate(value));
-                });
-            });
+        const bindBoxStates = (el: Element, disposerID?: string): string => {
+            return this._sideEffect.addDisposer(
+                [
+                    this._readonly$.subscribe((readonly) =>
+                        el.classList.toggle(
+                            this.wrapClassName("readonly"),
+                            readonly
+                        )
+                    ),
+                    this._draggable$.subscribe((draggable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-drag"),
+                            !draggable
+                        )
+                    ),
+                    this._resizable$.subscribe((resizable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-resize"),
+                            !resizable
+                        )
+                    ),
+                    this._focus$.subscribe((focus) =>
+                        el.classList.toggle(this.wrapClassName("blur"), !focus)
+                    ),
+                    this._darkMode$.subscribe((darkMode) => {
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-dark"),
+                            darkMode
+                        );
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-light"),
+                            !darkMode
+                        );
+                    }),
+                ],
+                disposerID
+            );
         };
 
-        bindClassName(this.$box, this._readonly$, "readonly");
-        bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
-        bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
-        bindClassName(this.$box, this._focus$, "blur", isFalsy);
-        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
-        bindClassName(
-            this.$box,
-            this._darkMode$,
-            "color-scheme-light",
-            isFalsy
-        );
+        this.$box = document.createElement("div");
+        this.$box.classList.add(this.wrapClassName("box"));
+        bindBoxStates(this.$box, "bind-box-state");
 
         this._sideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
@@ -806,7 +821,7 @@ export class TeleBox {
         this.$titleBar = $titleBar;
 
         const $body = document.createElement("div");
-        $body.className = this.wrapClassName("content-wrap");
+        $body.className = this.wrapClassName("body-wrap");
         this.$body = $body;
 
         const $styles = document.createElement("style");
@@ -836,8 +851,27 @@ export class TeleBox {
         this.$footer = $footer;
 
         $boxMain.appendChild($titleBar);
-        $boxMain.appendChild($body);
-        $boxMain.appendChild($footer);
+
+        const $main = document.createElement("div");
+        $main.className = this.wrapClassName("main");
+        this.$main = $main;
+        $boxMain.appendChild($main);
+
+        const $quarantine = document.createElement("div");
+        $quarantine.className = this.wrapClassName("quarantine");
+        $quarantine.appendChild($body);
+        $quarantine.appendChild($footer);
+
+        if (this.enableShadowDOM) {
+            bindBoxStates($quarantine, "bind-quarantine-state");
+            const $shadowStyle = document.createElement("style");
+            $shadowStyle.textContent = shadowStyles;
+            $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
+            const shadow = $main.attachShadow({ mode: "open" });
+            shadow.appendChild($quarantine);
+        } else {
+            $main.appendChild($quarantine);
+        }
 
         this._renderResizeHandlers();
 
@@ -878,7 +912,7 @@ export class TeleBox {
     private _renderStage(): HTMLDivElement {
         const $stage = document.createElement("div");
 
-        $stage.className = this.wrapClassName("content-stage");
+        $stage.className = this.wrapClassName("box-stage");
         const updateStageRect = (stageRect: TeleBoxRect): void => {
             $stage.style.top = stageRect.y + "px";
             $stage.style.left = stageRect.x + "px";
@@ -897,14 +931,14 @@ export class TeleBox {
                 }),
                 this._stageRect$.subscribe(updateStageRect),
             ],
-            "content-stage-styles"
+            "box-stage-styles"
         );
         return $stage;
     }
 
-    private _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
+    private _handleTrackStart?: (ev: PointerEvent) => void;
 
-    public handleTrackStart: (ev: MouseEvent | TouchEvent) => void = (ev) => {
+    public handleTrackStart: (ev: PointerEvent) => void = (ev) => {
         return this._handleTrackStart?.(ev);
     };
 
@@ -941,14 +975,14 @@ export class TeleBox {
 
         let trackingHandle: TeleBoxHandleType | undefined;
 
-        const handleTracking = (ev: MouseEvent | TouchEvent): void => {
-            if (this.state !== TELE_BOX_STATE.Normal) {
+        const handleTracking = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || this.state !== TELE_BOX_STATE.Normal) {
                 return;
             }
 
             preventEvent(ev);
 
-            let { pageX, pageY } = flattenEvent(ev);
+            let { pageX, pageY } = ev;
             if (pageY < 0) {
                 pageY = 0;
             }
@@ -1012,7 +1046,11 @@ export class TeleBox {
             this.transform(newX, newY, newWidth, newHeight);
         };
 
-        const handleTrackEnd = (ev: MouseEvent | TouchEvent): void => {
+        const handleTrackEnd = (ev: PointerEvent): void => {
+            if (!ev.isPrimary) {
+                return;
+            }
+
             trackingHandle = void 0;
 
             if (!$trackMask) {
@@ -1028,8 +1066,8 @@ export class TeleBox {
             $trackMask.remove();
         };
 
-        const handleTrackStart = (ev: MouseEvent | TouchEvent): void => {
-            if (this.readonly) {
+        const handleTrackStart = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || this.readonly) {
                 return;
             }
 
@@ -1057,8 +1095,7 @@ export class TeleBox {
                 ({ width: trackStartWidth, height: trackStartHeight } =
                     this.pxIntrinsicSize);
 
-                ({ pageX: trackStartPageX, pageY: trackStartPageY } =
-                    flattenEvent(ev));
+                ({ pageX: trackStartPageX, pageY: trackStartPageY } = ev);
 
                 trackingHandle = target.dataset
                     .teleBoxHandle as TELE_BOX_RESIZE_HANDLE;
@@ -1080,25 +1117,24 @@ export class TeleBox {
                 this.$box.classList.add(transformingClassName);
 
                 this._sideEffect.add(() => {
-                    window.addEventListener("mousemove", handleTracking);
-                    window.addEventListener("touchmove", handleTracking, {
+                    window.addEventListener("pointermove", handleTracking, {
                         passive: false,
                     });
-                    window.addEventListener("mouseup", handleTrackEnd);
-                    window.addEventListener("touchend", handleTrackEnd, {
+                    window.addEventListener("pointerup", handleTrackEnd, {
                         passive: false,
                     });
-                    window.addEventListener("touchcancel", handleTrackEnd, {
+                    window.addEventListener("pointercancel", handleTrackEnd, {
                         passive: false,
                     });
 
                     return () => {
-                        window.removeEventListener("mousemove", handleTracking);
-                        window.removeEventListener("touchmove", handleTracking);
-                        window.removeEventListener("mouseup", handleTrackEnd);
-                        window.removeEventListener("touchend", handleTrackEnd);
                         window.removeEventListener(
-                            "touchcancel",
+                            "pointermove",
+                            handleTracking
+                        );
+                        window.removeEventListener("pointerup", handleTrackEnd);
+                        window.removeEventListener(
+                            "pointercancel",
                             handleTrackEnd
                         );
                     };
@@ -1110,18 +1146,10 @@ export class TeleBox {
 
         this._sideEffect.addEventListener(
             $resizeHandles,
-            "mousedown",
+            "pointerdown",
             handleTrackStart,
             {},
-            "box-resizeHandles-mousedown"
-        );
-
-        this._sideEffect.addEventListener(
-            $resizeHandles,
-            "touchstart",
-            handleTrackStart,
-            { passive: false },
-            "box-resizeHandles-touchstart"
+            "box-resizeHandles-pointerdown"
         );
     }
 

package/src/TeleBox/style.scss

@@ -1,6 +1,8 @@
 @import "../scss/variables.scss";
 @import "../scss/mixins.scss";
 
+@import "./style.shadow.scss";
+
 .#{$namespace}-box {
     position: absolute;
     top: 0;
@@ -12,15 +14,16 @@
 }
 
 .#{$namespace}-box-main {
+    @include v(border, box-border, $box-border);
+    @include v(box-shadow, box-shadow, $box-shadow);
+
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
     border-radius: 6px;
-    border: 1px solid #e3e3ec;
 }
 
 .#{$namespace}-titlebar-wrap {
@@ -29,41 +32,11 @@
     z-index: 1;
 }
 
-.#{$namespace}-content-wrap {
-    flex: 1;
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.#{$namespace}-main {
     position: relative;
-}
-
-.#{$namespace}-content {
+    flex: 1;
     width: 100%;
-    height: 100%;
-    position: relative;
-    background: $color-container-background;
-}
-
-.#{$namespace}-content-stage {
-    position: absolute;
-    z-index: 1;
     overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
-}
-
-.#{$namespace}-footer-wrap {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-
-    &::before {
-        content: "";
-        display: block;
-        flex: 1;
-    }
 }
 
 .#{$namespace}-resize-handle {
@@ -219,16 +192,7 @@
     color-scheme: dark;
 
     .#{$namespace}-box-main {
-        color: #e9e9e9;
-        border-color: #43434d;
-    }
-
-    .#{$namespace}-content {
-        background: $color-container-background-dark;
-    }
-
-    .#{$namespace}-content-stage {
-        background: $color-stage-background-dark;
-        box-shadow: $color-stage-shadow-dark;
+        @include v(border, box-border-dark, $box-border-dark);
+        @include v(box-shadow, box-shadow-dark, $box-shadow-dark);
     }
 }

package/src/TeleBox/style.shadow.scss

@@ -0,0 +1,88 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+
+.#{$namespace}-quarantine {
+    all: initial;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.#{$namespace}-body-wrap {
+    @include v(color, box-color, $box-color);
+
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.#{$namespace}-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    @include v(
+        background-color,
+        manager-container-background,
+        $manager-container-background
+    );
+}
+
+.#{$namespace}-box-stage {
+    position: absolute;
+    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);
+}
+
+.#{$namespace}-footer-wrap {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        content: "";
+        display: block;
+        flex: 1;
+    }
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-body-wrap {
+        @include v(color, box-color-dark, $box-color-dark);
+    }
+
+    .#{$namespace}-content {
+        @include v(
+            background-color,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
+    }
+
+    .#{$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
+        );
+    }
+}

package/src/TeleBox/typings.ts

@@ -60,6 +60,8 @@ export interface TeleBoxConfig {
     readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM?: boolean;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
     /** Box content element. */

package/src/TeleBoxCollector/index.ts

@@ -91,9 +91,9 @@ export class TeleBoxCollector {
             el$.subscribe(($collector) => {
                 this._sideEffect.addEventListener(
                     $collector,
-                    "click",
-                    () => {
-                        if (!readonly$.value) {
+                    "pointerup",
+                    (ev) => {
+                        if (ev.isPrimary && !readonly$.value) {
                             minimized$.setValue(false);
                         }
                     },

package/src/TeleBoxCollector/style.scss

@@ -16,8 +16,6 @@
     outline: none;
     font-size: 0;
     border-radius: 50%;
-    background: #fff;
-    box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
     cursor: pointer;
     user-select: none;
     pointer-events: none;
@@ -25,6 +23,9 @@
     background-size: 18px 16px;
     background-position: center;
     -webkit-tap-highlight-color: transparent;
+
+    @include v(background-color, collector-background, $collector-background);
+    @include v(box-shadow, collector-shadow, $collector-shadow);
 }
 
 .#{$namespace}-collector-visible {
@@ -40,6 +41,11 @@
     color-scheme: dark;
 
     &.#{$namespace}-collector {
-        background-color: #43434d;
+        @include v(
+            background-color,
+            collector-background-dark,
+            $collector-background-dark
+        );
+        @include v(box-shadow, collector-shadow-dark, $collector-shadow-dark);
     }
 }

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -14,7 +14,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
-    root$: ReadonlyVal<HTMLElement | null>;
+    root: HTMLElement;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
@@ -25,15 +25,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         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();
-                }
-            })
-        );
+        config.root.appendChild(this.render());
     }
 
     public focusBox(box?: TeleBox): void {
@@ -87,16 +79,6 @@ export class MaxTitleBar extends DefaultTitleBar {
                         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) {

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -1,7 +1,7 @@
 @import "../../scss/variables.scss";
 @import "../../scss/mixins.scss";
 
-$scrollbar-size: 8px;
+$scrollbar-size: 4px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
 $scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
 $scrollbar-track-color: transparent;
@@ -108,15 +108,26 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     white-space: nowrap;
     word-break: keep-all;
     border: none;
-    border-right: 1px solid #e5e5f0;
-    color: #7b88a0;
-    background: transparent;
+    border-right-width: 1px;
+    border-right-style: solid;
     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
+    );
 }
 
 .#{$namespace}-titles-tab-focus {
-    color: #357bf6;
+    @include v(color, titlebar-tab-focus-color, $titlebar-tab-focus-color);
 }
 
 .#{$namespace}-readonly {
@@ -128,17 +139,25 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
-    &.#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
-    }
-
     .#{$namespace}-titles-tab {
-        border-right-color: #7b88a0;
+        @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
+        );
     }
 
-    .#{$namespace}-title {
-        color: #e9e9e9;
+    .#{$namespace}-titles-tab-focus {
+        @include v(
+            color,
+            titlebar-tab-focus-color-dark,
+            $titlebar-tab-focus-color-dark
+        );
     }
 }