@netless/telebox-insider 0.2.18 → 0.2.22

package/package.json

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

package/src/TeleBox/style.scss

@@ -5,7 +5,6 @@
     top: 0;
     left: 0;
     z-index: $base-z-index;
-    will-change: transform;
     transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02),
         height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95),
         opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;
@@ -182,7 +181,6 @@
 }
 
 .#{$namespace}-minimized {
-    will-change: transform;
     transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02),
         height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95),
         opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;

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

@@ -432,24 +432,40 @@ export class TeleBoxManager {
             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, () => {
-            if (this.topBox && box.zIndex > this.topBox.zIndex) {
-                this.topBox$.setValue(box);
+        box._zIndex$.reaction((_, __, skipUpdate) => {
+            if (this.boxes.length > 0) {
+                const topBox = this.boxes.reduce((topBox, box) =>
+                    topBox.zIndex > box.zIndex ? topBox : box
+                );
+                this.topBox$.setValue(topBox);
+            }
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
             }
         });
         this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
@@ -658,16 +674,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);
@@ -721,10 +737,6 @@ export class TeleBoxManager {
         if (this.topBox) {
             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;