@netless/telebox-insider 1.0.0-alpha.21 → 1.0.0-alpha.24

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.21",
+    "version": "1.0.0-alpha.24",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -20,7 +20,7 @@ import {
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import { clamp, flattenEvent, getBoxDefaultName, preventEvent } from "../utils";
+import { clamp, getBoxDefaultName, preventEvent } from "../utils";
 import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
@@ -613,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;
 
@@ -849,27 +852,29 @@ export class TeleBox {
 
         $boxMain.appendChild($titleBar);
 
-        if (this.enableShadowDOM) {
-            const $quarantineWrap = document.createElement("div");
-            $quarantineWrap.className = this.wrapClassName("quarantine-wrap");
-            $boxMain.appendChild($quarantineWrap);
+        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");
-            bindBoxStates($quarantine, "bind-quarantine-state");
+        const $quarantineOuter = document.createElement("div");
+        $quarantineOuter.className = this.wrapClassName("quarantine-outer");
+        $main.appendChild($quarantineOuter);
 
+        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.appendChild($shadowStyle);
-            $quarantine.appendChild($body);
-            $quarantine.appendChild($footer);
-
-            const shadow = $quarantineWrap.attachShadow({ mode: "open" });
+            $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
+            const shadow = $quarantineOuter.attachShadow({ mode: "open" });
             shadow.appendChild($quarantine);
         } else {
-            $boxMain.appendChild($body);
-            $boxMain.appendChild($footer);
+            $quarantineOuter.appendChild($quarantine);
         }
 
         this._renderResizeHandlers();
@@ -935,9 +940,9 @@ export class TeleBox {
         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);
     };
 
@@ -974,14 +979,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;
             }
@@ -1045,7 +1050,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) {
@@ -1061,8 +1070,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;
             }
 
@@ -1090,8 +1099,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;
@@ -1113,25 +1121,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
                         );
                     };
@@ -1143,18 +1150,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

@@ -32,10 +32,15 @@
     z-index: 1;
 }
 
-.#{$namespace}-quarantine-wrap {
-    all: initial;
+.#{$namespace}-main {
     flex: 1;
     width: 100%;
+}
+
+.#{$namespace}-quarantine-outer {
+    position: relative;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
 

package/src/TeleBox/style.shadow.scss

@@ -2,6 +2,7 @@
 @import "../scss/mixins.scss";
 
 .#{$namespace}-quarantine {
+    all: initial;
     position: relative;
     width: 100%;
     height: 100%;

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/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,13 +271,7 @@ export class TeleBoxManager {
 
         this._sideEffect.addEventListener(
             window,
-            "mousedown",
-            checkFocusBox,
-            true
-        );
-        this._sideEffect.addEventListener(
-            window,
-            "touchstart",
+            "pointerdown",
             checkFocusBox,
             true
         );

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