@netless/telebox-insider 0.3.0-beta.9 → 0.3.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.0-beta.9",
+  "version": "0.3.1-beta.0",
   "private": false,
   "description": "Window widget for Whiteboard",
   "author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",

package/src/AppMenu/index.ts

@@ -111,7 +111,6 @@ export class AppMenu {
   private createMinimizedItem(appId: AppId){
     const appItem = document.createElement('div');
     appItem.classList.add(this.c('app-menu-item'));
-    console.log("appId=====>", appId);
     appItem.setAttribute(`data-${this.c('app-id')}`, appId);
     const titleDiv = document.createElement('div');
     titleDiv.classList.add(this.c('app-menu-item-title'));

package/src/TeleBox/constants.ts

@@ -29,6 +29,8 @@ export enum TELE_BOX_EVENT {
     Destroyed = "destroyed",
     BoxStatus = "box_status",
     LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
+    ForceTop = "force_top",
+    ForceNormal = "force_normal",
 }
 
 export enum TELE_BOX_DELEGATE_EVENT {

package/src/TeleBox/index.ts

@@ -72,6 +72,14 @@ type ValConfig = {
     $userContent: Val<HTMLElement | undefined>;
     $userFooter: Val<HTMLElement | undefined>;
     $userStyles: Val<HTMLStyleElement | undefined>;
+    /** Force top. */
+    forceTop: Val<boolean, boolean>;
+    /** Force normal. */
+    forceNormal: Val<boolean, boolean>;
+    /** Force maximized room policy. */
+    forceMaximized: Val<boolean, boolean>;
+    /** Drag content. */
+    isDragContent: Val<boolean, boolean>;
 };
 export interface TeleBox extends ValEnhancedResult<ValConfig> {}
 
@@ -110,7 +118,11 @@ export class TeleBox {
         },
         collectorRect,
         boxStatus,
-        lastNotMinimizedBoxStatus
+        lastNotMinimizedBoxStatus,
+        forceTop = false,
+        forceNormal = false,
+        forceMaximized = false,
+        isDragContent = false,
     }: TeleBoxConfig = {}) {
         this._sideEffect = new SideEffectManager();
         this._valSideEffectBinder = createSideEffectBinder(this._sideEffect);
@@ -120,8 +132,13 @@ export class TeleBox {
         this.namespace = namespace;
         this.events = new EventEmitter();
         this._delegateEvents = new EventEmitter();
-        const boxStatus$ = createVal<TeleBoxState | undefined, boolean>(boxStatus);
-        const lastNotMinimizedBoxStatus$ = createVal<NotMinimizedBoxState | undefined, boolean>(lastNotMinimizedBoxStatus);
+        const boxStatus$ = createVal<TeleBoxState | undefined, boolean>(
+            boxStatus
+        );
+        const lastNotMinimizedBoxStatus$ = createVal<
+            NotMinimizedBoxState | undefined,
+            boolean
+        >(lastNotMinimizedBoxStatus);
 
         const prefersColorScheme$ = createVal<TeleBoxColorScheme, boolean>(
             prefersColorScheme
@@ -182,6 +199,25 @@ export class TeleBox {
         const containerRect$ = createVal(containerRect, shallowequal);
         const collectorRect$ = createVal(collectorRect, shallowequal);
 
+        const forceTop$ = createVal(forceTop);
+        forceTop$.reaction((forceTop, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.ForceTop, forceTop || false);
+            }
+        });
+
+        const forceNormal$ = createVal(forceNormal);
+        const forceMaximized$ = createVal(forceMaximized);
+        forceNormal$.reaction((forceNormal, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(
+                    TELE_BOX_EVENT.ForceNormal,
+                    forceNormal || false
+                );
+            }
+        });
+        const isDragContent$ = createVal(isDragContent);
+
         const title$ = createVal(title);
         title$.reaction((title, _, skipUpdate) => {
             if (!skipUpdate) {
@@ -245,7 +281,8 @@ export class TeleBox {
                     ? TELE_BOX_STATE.Minimized
                     : maximized
                     ? TELE_BOX_STATE.Maximized
-                    : !boxStatus ? TELE_BOX_STATE.Normal
+                    : !boxStatus
+                    ? TELE_BOX_STATE.Normal
                     : boxStatus
         );
         state$.reaction((state, _, skipUpdate) => {
@@ -303,7 +340,10 @@ export class TeleBox {
         const visualSize$ = combine(
             [size$, minimized$, containerRect$, collectorRect$, boxStatus$],
             ([size, minimized, containerRect, collectorRect, boxStatus]) => {
-                if ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect) {
+                if (
+                    (minimized || boxStatus === TELE_BOX_STATE.Minimized) &&
+                    collectorRect
+                ) {
                     return {
                         width:
                             collectorRect.width /
@@ -356,8 +396,14 @@ export class TeleBox {
                 boxStatus,
                 lastNotMinimizedBoxStatus,
             ]) => {
-                if ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect) {
-                    if (maximized || lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized) {
+                if (
+                    (minimized || boxStatus === TELE_BOX_STATE.Minimized) &&
+                    collectorRect
+                ) {
+                    if (
+                        maximized ||
+                        lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized
+                    ) {
                         return {
                             x:
                                 (collectorRect.x + collectorRect.width / 2) /
@@ -400,6 +446,9 @@ export class TeleBox {
                 title: title$.value,
                 namespace: this.namespace,
                 boxStatus: boxStatus$.value,
+                forceTop: forceTop$.value,
+                forceNormal: forceNormal$.value,
+                forceMaximized: forceMaximized$.value,
                 onDragStart: (event) => this._handleTrackStart?.(event),
                 onEvent: (event): void => {
                     if (this._delegateEvents.listeners.length > 0) {
@@ -407,7 +456,10 @@ export class TeleBox {
                     } else {
                         switch (event.type) {
                             case TELE_BOX_DELEGATE_EVENT.Maximize: {
-                                if (!boxStatus$.value) {
+                                if (
+                                    !boxStatus$.value &&
+                                    !(forceMaximized$.value && maximized$.value)
+                                ) {
                                     maximized$.setValue(!maximized$.value);
                                 }
                                 break;
@@ -436,6 +488,9 @@ export class TeleBox {
         readonly$.reaction((readonly) => {
             this.titleBar.setReadonly(readonly);
         });
+        forceMaximized$.reaction((forceMaximized) => {
+            this.titleBar.setForceMaximized(forceMaximized);
+        });
         boxStatus$.reaction((boxStatus) => {
             this.titleBar.setBoxStatus(boxStatus);
         });
@@ -463,6 +518,10 @@ export class TeleBox {
             $userContent: $userContent$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
+            forceTop: forceTop$,
+            forceNormal: forceNormal$,
+            forceMaximized: forceMaximized$,
+            isDragContent: isDragContent$,
         };
 
         withValueEnhancer(this, valConfig);
@@ -512,7 +571,10 @@ export class TeleBox {
     public _coord$: Val<TeleBoxCoord, boolean>;
     public _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
     public _boxStatus$: Val<TeleBoxState | undefined, boolean>;
-    public _lastNotMinimizedBoxStatus$: Val<NotMinimizedBoxState | undefined, boolean>;
+    public _lastNotMinimizedBoxStatus$: Val<
+        NotMinimizedBoxState | undefined,
+        boolean
+    >;
 
     public get boxStatus(): TeleBoxState | undefined {
         return this._boxStatus$.value;
@@ -559,23 +621,41 @@ export class TeleBox {
 
     public setBoxStatus(boxStatus: TeleBoxState, skipUpdate = false): this {
         if (boxStatus === TELE_BOX_STATE.Minimized) {
-            if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
-                this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
+            if (
+                this._boxStatus$.value &&
+                this._boxStatus$.value !== TELE_BOX_STATE.Minimized
+            ) {
+                this.setLastNotMinimizedBoxStatus(
+                    this._boxStatus$.value,
+                    skipUpdate
+                );
             }
         } else {
             this.setLastNotMinimizedBoxStatus(undefined, skipUpdate);
         }
         this._boxStatus$.setValue(boxStatus, skipUpdate);
         if (!skipUpdate) {
-            this.events.emit(TELE_BOX_EVENT.BoxStatus, {id: this.id, boxStatus});
+            this.events.emit(TELE_BOX_EVENT.BoxStatus, {
+                id: this.id,
+                boxStatus,
+            });
         }
         return this;
     }
 
-    public setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate = false): this {
-        this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
+    public setLastNotMinimizedBoxStatus(
+        lastNotMinimizedBoxStatus?: NotMinimizedBoxState,
+        skipUpdate = false
+    ): this {
+        this._lastNotMinimizedBoxStatus$.setValue(
+            lastNotMinimizedBoxStatus,
+            skipUpdate
+        );
         if (!skipUpdate) {
-            this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, {id: this.id, lastNotMinimizedBoxStatus});
+            this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, {
+                id: this.id,
+                lastNotMinimizedBoxStatus,
+            });
         }
         return this;
     }
@@ -950,24 +1030,43 @@ export class TeleBox {
                     this._collectorRect$,
                     this._boxStatus$,
                 ],
-                ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
+                ([
+                    coord,
+                    size,
+                    minimized,
+                    containerRect,
+                    collectorRect,
+                    boxStatus,
+                ]) => {
                     const absoluteWidth = size.width * containerRect.width;
                     const absoluteHeight = size.height * containerRect.height;
                     return {
                         width:
                             absoluteWidth +
-                            ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
+                            ((minimized ||
+                                boxStatus === TELE_BOX_STATE.Minimized) &&
+                            collectorRect
+                                ? 1
+                                : 0),
                         height:
                             absoluteHeight +
-                            ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
+                            ((minimized ||
+                                boxStatus === TELE_BOX_STATE.Minimized) &&
+                            collectorRect
+                                ? 1
+                                : 0),
                         x: coord.x * containerRect.width,
                         y: coord.y * containerRect.height,
                         scaleX:
-                            (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect
+                            (minimized ||
+                                boxStatus === TELE_BOX_STATE.Minimized) &&
+                            collectorRect
                                 ? collectorRect.width / absoluteWidth
                                 : 1,
                         scaleY:
-                            (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect
+                            (minimized ||
+                                boxStatus === TELE_BOX_STATE.Minimized) &&
+                            collectorRect
                                 ? collectorRect.height / absoluteHeight
                                 : 1,
                     };
@@ -996,6 +1095,9 @@ export class TeleBox {
         $content.className =
             this.wrapClassName("content") + " tele-fancy-scrollbar";
         this.$content = $content;
+        if (this.isDragContent) {
+            this.$content.appendChild(this.titleBar.$dragArea);
+        }
 
         this._renderSideEffect.add(() => {
             let last$userStyles: HTMLStyleElement | undefined;

package/src/TeleBox/typings.ts

@@ -17,7 +17,10 @@ export type TeleBoxSize = { width: number; height: number };
 
 export type TeleBoxState = `${TELE_BOX_STATE}`;
 
-export type NotMinimizedBoxState = `${Exclude<TELE_BOX_STATE, TELE_BOX_STATE.Minimized>}`;
+export type NotMinimizedBoxState = `${Exclude<
+    TELE_BOX_STATE,
+    TELE_BOX_STATE.Minimized
+>}`;
 
 export interface TeleBoxRect {
     readonly x: number;
@@ -87,6 +90,13 @@ export interface TeleBoxConfig {
     readonly boxStatus?: TeleBoxState;
     /** Last not minimized box status. */
     readonly lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+    /** Force top. */
+    readonly forceTop?: boolean;
+    /** Force normal. */
+    readonly forceNormal?: boolean;
+    readonly forceMaximized?: boolean;
+    /** Is drag content. */
+    readonly isDragContent?: boolean;
 }
 
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
@@ -109,7 +119,13 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     readonly: boolean;
     destroyed: void;
     box_status: { id: string; boxStatus: TeleBoxState };
-    last_not_minimized_box_status: { id: string; lastNotMinimizedBoxStatus?: NotMinimizedBoxState };
+    last_not_minimized_box_status: {
+        id: string;
+        lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+    };
+    force_normal: boolean;
+    force_maximized: boolean;
+    force_top: boolean;
 }>;
 
 export type TeleBoxEvent = keyof TeleBoxEventConfig;

package/src/TeleBoxCollector/index.ts

@@ -15,6 +15,7 @@ export interface TeleBoxCollectorConfig {
 }
 
 export class TeleBoxCollector {
+    static readonly kind = "TeleBoxCollector";
     public getBoxesStatus?: () => Map<string, TeleBoxState>;
     public constructor({
         visible = true,
@@ -79,7 +80,7 @@ export class TeleBoxCollector {
         return this;
     }
 
-    private hasMinimizedBox(): boolean {
+    protected hasMinimizedBox(): boolean {
         const boxesStatus = this.boxesStatus;
         if (boxesStatus) {
            for (const status of boxesStatus.values()) {

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -5,7 +5,7 @@ import { DefaultTitleBar, DefaultTitleBarConfig } from "../../TeleTitleBar";
 import { TELE_BOX_STATE } from "../../TeleBox/constants";
 import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
 
-export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box">;
+export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box" | "forceTop" | "forceNormal">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode: boolean;
@@ -45,7 +45,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         if (this.getBoxesStatus) {
             const boxesStatus = this.getBoxesStatus();
             if (boxesStatus) {
-                return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+                return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized && !box.forceTop);
             }
         }
         return [];

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -16,7 +16,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 10;
+    z-index: $base-z-index * 3 - 1;
 
     .#{$namespace}-title {
         display: none;