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

package/package.json

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

package/src/TeleBox/index.ts

@@ -76,6 +76,8 @@ type ValConfig = {
     forceTop: Val<boolean, boolean>;
     /** Force normal. */
     forceNormal: Val<boolean, boolean>;
+    /** Force maximized room policy. */
+    forceMaximized: Val<boolean, boolean>;
     /** Drag content. */
     isDragContent: Val<boolean, boolean>;
 };
@@ -119,6 +121,7 @@ export class TeleBox {
         lastNotMinimizedBoxStatus,
         forceTop = false,
         forceNormal = false,
+        forceMaximized = false,
         isDragContent = false,
     }: TeleBoxConfig = {}) {
         this._sideEffect = new SideEffectManager();
@@ -129,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
@@ -199,9 +207,13 @@ export class TeleBox {
         });
 
         const forceNormal$ = createVal(forceNormal);
+        const forceMaximized$ = createVal(forceMaximized);
         forceNormal$.reaction((forceNormal, _, skipUpdate) => {
             if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.ForceNormal, forceNormal || false);
+                this.events.emit(
+                    TELE_BOX_EVENT.ForceNormal,
+                    forceNormal || false
+                );
             }
         });
         const isDragContent$ = createVal(isDragContent);
@@ -269,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) => {
@@ -327,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 /
@@ -380,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) /
@@ -426,6 +448,7 @@ export class TeleBox {
                 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) {
@@ -433,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;
@@ -462,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);
         });
@@ -491,6 +520,7 @@ export class TeleBox {
             $userStyles: $userStyles$,
             forceTop: forceTop$,
             forceNormal: forceNormal$,
+            forceMaximized: forceMaximized$,
             isDragContent: isDragContent$,
         };
 
@@ -541,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;
@@ -588,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;
     }
@@ -979,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,
                     };
@@ -1018,7 +1088,6 @@ export class TeleBox {
         $titleBar.appendChild(this.titleBar.render());
         this.$titleBar = $titleBar;
 
-
         const $contentWrap = document.createElement("div");
         $contentWrap.className = this.wrapClassName("content-wrap");
 

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;
@@ -91,6 +94,7 @@ export interface TeleBoxConfig {
     readonly forceTop?: boolean;
     /** Force normal. */
     readonly forceNormal?: boolean;
+    readonly forceMaximized?: boolean;
     /** Is drag content. */
     readonly isDragContent?: boolean;
 }
@@ -115,8 +119,12 @@ 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;
 }>;