@netless/telebox-insider 0.2.16 → 0.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.16",
+    "version": "0.2.20",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -935,7 +935,7 @@ export class TeleBox {
                 }
                 last$userStyles = $userStyles;
                 if ($userStyles) {
-                    $content.appendChild($userStyles);
+                    $contentWrap.appendChild($userStyles);
                 }
             });
         });

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -105,6 +105,13 @@ export class MaxTitleBar extends DefaultTitleBar {
 
     public render(): HTMLElement {
         const $titleBar = super.render();
+        if ($titleBar.firstElementChild?.nextElementSibling) {
+            $titleBar.insertBefore(
+                this.$dragArea,
+                $titleBar.firstElementChild.nextElementSibling
+            );
+        }
+
         const { x, y, width } = this.containerRect;
         $titleBar.style.transform = `translate(${x}px, ${y}px)`;
         $titleBar.style.width = width + "px";

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -15,6 +15,15 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     left: 0;
     z-index: $base-z-index * 500;
     user-select: none;
+
+    .#{$namespace}-drag-area {
+        height: 100%;
+        min-width: 16px;
+        position: static;
+        margin: 0;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
 }
 
 .#{$namespace}-max-titlebar-maximized {
@@ -36,9 +45,8 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
 }
 
 .#{$namespace}-titles {
-    flex: 1;
     height: 100%;
-    margin: 0 16px 0 -16px;
+    margin: 0;
     overflow-y: hidden;
     overflow-x: scroll;
     overflow-x: overlay; // for webkit
@@ -92,6 +100,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
 }
 
 .#{$namespace}-titles-tab {
+    height: 100%;
     overflow: hidden;
     max-width: 182px;
     min-width: 50px;
@@ -108,10 +117,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     color: #7b88a0;
     background: transparent;
     cursor: pointer;
-
-    & ~ & {
-        margin-left: 2px;
-    }
+    user-select: none;
 }
 
 .#{$namespace}-titles-tab-focus {

package/src/TeleBoxManager/index.ts

@@ -37,6 +37,7 @@ type ValConfig = {
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collector: Val<TeleBoxCollector | null>;
+    collectorRect: Val<TeleBoxRect | undefined>;
     readonly: Val<boolean, boolean>;
     minimized: Val<boolean, boolean>;
     maximized: Val<boolean, boolean>;
@@ -197,25 +198,36 @@ export class TeleBoxManager {
             collector$.value?.setDarkMode(darkMode);
         });
 
+        const calcCollectorRect = (): TeleBoxRect | undefined => {
+            if (collector$.value?.$collector) {
+                const { x, y, width, height } =
+                    collector$.value.$collector.getBoundingClientRect();
+                const rootRect = this.root.getBoundingClientRect();
+                return {
+                    x: x - rootRect.x,
+                    y: y - rootRect.y,
+                    width,
+                    height,
+                };
+            }
+            return;
+        };
+
+        const collectorRect$ = createVal(
+            minimized$.value ? calcCollectorRect() : void 0
+        );
+        collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
+            this.boxes.forEach((box) => {
+                box.setCollectorRect(collectorRect, skipUpdate);
+            });
+        });
+
         minimized$.subscribe((minimized, _, skipUpdate) => {
             collector$.value?.setVisible(minimized);
 
             if (minimized) {
                 if (collector$.value?.$collector) {
-                    const { x, y, width, height } =
-                        collector$.value.$collector.getBoundingClientRect();
-                    const rootRect = this.root.getBoundingClientRect();
-                    this.boxes.forEach((box) => {
-                        box.setCollectorRect(
-                            {
-                                x: x - rootRect.x,
-                                y: y - rootRect.y,
-                                width,
-                                height,
-                            },
-                            true
-                        );
-                    });
+                    collectorRect$.setValue(calcCollectorRect());
                 } else if (import.meta.env.DEV) {
                     console.warn("No collector for minimized boxes.");
                 }
@@ -255,6 +267,7 @@ export class TeleBoxManager {
                     const box = this.getBox(id);
                     if (box) {
                         this.focusBox(box);
+                        this.makeBoxTop(box);
                         return;
                     }
                 }
@@ -293,6 +306,7 @@ export class TeleBoxManager {
                     }
                     case TELE_BOX_EVENT.Close: {
                         this.removeTopBox();
+                        this.focusTopBox();
                         break;
                     }
                     default: {
@@ -315,6 +329,7 @@ export class TeleBoxManager {
             prefersColorScheme: prefersColorScheme$,
             containerRect: containerRect$,
             collector: collector$,
+            collectorRect: collectorRect$,
             readonly: readonly$,
             fence: fence$,
             minimized: minimized$,
@@ -393,12 +408,16 @@ export class TeleBoxManager {
             namespace: this.namespace,
             containerRect: this.containerRect,
             readonly: this.readonly,
+            collectorRect: this.collectorRect,
         });
 
         box.mount(this.root);
 
         if (box.focus) {
             this.focusBox(box);
+            if (smartPosition) {
+                this.makeBoxTop(box);
+            }
         }
 
         this.boxes$.setValue([...this.boxes, box]);
@@ -411,26 +430,40 @@ export class TeleBoxManager {
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
             this.remove(box);
+            this.focusTopBox();
         });
-        box.events.on(TELE_BOX_EVENT.Move, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
+        box._coord$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.Resize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
+        box._size$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.IntrinsicMove, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+        box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.IntrinsicResize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+        box._intrinsicSize$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.VisualResize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
+        box._visualSize$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.ZIndex, () => {
+        box._zIndex$.reaction((_, __, skipUpdate) => {
             if (this.topBox && box.zIndex > this.topBox.zIndex) {
                 this.topBox$.setValue(box);
             }
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+            }
         });
         this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
 
@@ -480,7 +513,6 @@ export class TeleBoxManager {
             const boxes = this.boxes.slice();
             const deletedBoxes = boxes.splice(index, 1);
             this.boxes$.setValue(boxes);
-            this.focusTopBox();
             deletedBoxes.forEach((box) => box.destroy());
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
@@ -542,7 +574,6 @@ export class TeleBoxManager {
                         focusChanged = true;
                         targetBox.setFocus(true, skipUpdate);
                     }
-                    this.makeBoxTop(targetBox, skipUpdate);
                     if (focusChanged && !skipUpdate) {
                         this.events.emit(
                             TELE_BOX_MANAGER_EVENT.Focused,
@@ -640,16 +671,16 @@ export class TeleBoxManager {
             box.setMinWidth(config.minWidth, skipUpdate);
         }
         if (config.resizable != null) {
-            box.setResizable(config.resizable);
+            box.setResizable(config.resizable, skipUpdate);
         }
         if (config.draggable != null) {
-            box.setDraggable(config.draggable);
+            box.setDraggable(config.draggable, skipUpdate);
         }
         if (config.fixRatio != null) {
             box.setFixRatio(config.fixRatio, skipUpdate);
         }
         if (config.zIndex != null) {
-            box.setZIndex(config.zIndex);
+            box.setZIndex(config.zIndex, skipUpdate);
         }
         if (config.content != null) {
             box.mountContent(config.content);
@@ -704,9 +735,6 @@ export class TeleBoxManager {
             if (box !== this.topBox) {
                 box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
                 this.topBox$.setValue(box);
-                if (!skipUpdate) {
-                    this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
-                }
             }
         }
     }

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -56,6 +56,8 @@ export class DefaultTitleBar implements TeleTitleBar {
                 iconClassName: this.wrapClassName("titlebar-icon-close"),
             },
         ];
+
+        this.$dragArea = this.renderDragArea();
     }
 
     public readonly namespace: string;
@@ -64,6 +66,8 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $title: HTMLElement | undefined;
 
+    public $dragArea: HTMLElement;
+
     public setTitle(title: string): void {
         this.title = title;
         if (this.$title) {
@@ -97,18 +101,10 @@ export class DefaultTitleBar implements TeleTitleBar {
         if (!this.$titleBar) {
             this.$titleBar = document.createElement("div");
             this.$titleBar.className = this.wrapClassName("titlebar");
-            this.$titleBar.dataset.teleBoxHandle = TeleBoxDragHandleType;
-            this.sideEffect.addEventListener(
-                this.$titleBar,
-                "mousedown",
-                this.handleTitleBarClick
-            );
-            this.sideEffect.addEventListener(
-                this.$titleBar,
-                "touchstart",
-                this.handleTitleBarClick,
-                { passive: true }
-            );
+
+            const $titleArea = document.createElement("div");
+            $titleArea.className = this.wrapClassName("title-area");
+            $titleArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
 
             this.$title = document.createElement("h1");
             this.$title.className = this.wrapClassName("title");
@@ -118,6 +114,9 @@ export class DefaultTitleBar implements TeleTitleBar {
                 this.$title.title = this.title;
             }
 
+            $titleArea.appendChild(this.$title);
+            $titleArea.appendChild(this.$dragArea);
+
             const $buttonsContainer = document.createElement("div");
             $buttonsContainer.className = this.wrapClassName("titlebar-btns");
 
@@ -167,13 +166,31 @@ export class DefaultTitleBar implements TeleTitleBar {
                 }
             );
 
-            this.$titleBar.appendChild(this.$title);
+            this.$titleBar.appendChild($titleArea);
             this.$titleBar.appendChild($buttonsContainer);
         }
 
         return this.$titleBar;
     }
 
+    public renderDragArea(): HTMLElement {
+        const $dragArea = document.createElement("div");
+        $dragArea.className = this.wrapClassName("drag-area");
+        $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+        this.sideEffect.addEventListener(
+            $dragArea,
+            "mousedown",
+            this.handleTitleBarClick
+        );
+        this.sideEffect.addEventListener(
+            $dragArea,
+            "touchstart",
+            this.handleTitleBarTouch,
+            { passive: true }
+        );
+        return $dragArea;
+    }
+
     public dragHandle(): HTMLElement | undefined {
         return this.$titleBar;
     }
@@ -209,17 +226,18 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     protected sideEffect = new SideEffectManager();
 
-    protected lastTitleBarClick = 0;
+    protected lastTitleBarClick = {
+        timestamp: 0,
+        clientX: -100,
+        clientY: -100,
+    };
 
-    protected handleTitleBarClick = (ev: MouseEvent | TouchEvent): void => {
+    protected handleTitleBarClick = (ev: MouseEvent): void => {
         if (this.readonly) {
             return;
         }
 
-        if (
-            (ev as MouseEvent).button != null &&
-            (ev as MouseEvent).button !== 0
-        ) {
+        if (ev.button !== 0) {
             return; // Not left mouse
         }
 
@@ -230,14 +248,62 @@ export class DefaultTitleBar implements TeleTitleBar {
         preventEvent(ev);
 
         const now = Date.now();
-        if (now - this.lastTitleBarClick <= 500) {
-            // double click
-            if (this.onEvent) {
-                this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+        if (now - this.lastTitleBarClick.timestamp <= 500) {
+            if (
+                Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 3 &&
+                Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 3
+            ) {
+                // double click
+                if (this.onEvent) {
+                    this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+                }
+            }
+        } else if (this.onDragStart) {
+            this.onDragStart(ev);
+        }
+        this.lastTitleBarClick.timestamp = now;
+        this.lastTitleBarClick.clientX = ev.clientX;
+        this.lastTitleBarClick.clientY = ev.clientY;
+    };
+
+    protected lastTitleBarTouch = {
+        timestamp: 0,
+        clientX: -100,
+        clientY: -100,
+    };
+
+    protected handleTitleBarTouch = (ev: TouchEvent): void => {
+        if (this.readonly) {
+            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) <= 3 &&
+                Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 3
+            ) {
+                // double click
+                if (this.onEvent) {
+                    this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+                }
             }
         } else if (this.onDragStart) {
             this.onDragStart(ev);
         }
-        this.lastTitleBarClick = now;
+        this.lastTitleBarTouch.timestamp = now;
+        this.lastTitleBarTouch.clientX = clientX;
+        this.lastTitleBarTouch.clientY = clientY;
     };
 }

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -9,11 +9,21 @@
     background: #fff;
     user-select: none;
     border-bottom: 1px solid #eeeef7;
+    touch-action: manipulation;
+}
+
+.#{$namespace}-title-area {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
 }
 
 .#{$namespace}-title {
     overflow: hidden;
-    margin: 0 24px 0 0;
+    margin: 0;
     padding: 0;
     font-size: 14px;
     font-weight: 400;
@@ -24,6 +34,16 @@
     color: #191919;
 }
 
+.#{$namespace}-drag-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: 10;
+}
+
 .#{$namespace}-titlebar-btns {
     white-space: nowrap;
     word-break: keep-all;