@netless/telebox-insider 0.2.0 → 0.2.4

package/src/TeleBox/typings.ts

@@ -88,6 +88,8 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     intrinsic_resize: { width: number; height: number };
     visual_resize: { width: number; height: number };
     state: TeleBoxState;
+    minimized: boolean;
+    maximized: boolean;
     readonly: boolean;
     destroyed: void;
 }>;

package/src/TeleBoxManager/constants.ts

@@ -3,6 +3,8 @@ export enum TELE_BOX_MANAGER_EVENT {
     Created = "created",
     Removed = "removed",
     State = "state",
+    Maximized = "maximized",
+    Minimized = "minimized",
     Move = "move",
     Resize = "resize",
     IntrinsicMove = "intrinsic_move",

package/src/TeleBoxManager/index.ts

@@ -18,12 +18,27 @@ import type {
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
 import { TELE_BOX_DELEGATE_EVENT } from "..";
-import { Val, CombinedVal } from "../Val";
 import { SideEffectManager } from "side-effect-manager";
+import {
+    createSideEffectBinder,
+    Val,
+    ValEnhancedResult,
+    withValueEnhancer,
+} from "value-enhancer";
 
 export * from "./typings";
 export * from "./constants";
 
+type ValConfig = {
+    containerRect: Val<TeleBoxRect, boolean>;
+    collector: Val<TeleBoxCollector | null>;
+    readonly: Val<boolean, boolean>;
+    minimized: Val<boolean, boolean>;
+    maximized: Val<boolean, boolean>;
+    fence: Val<boolean, boolean>;
+};
+export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
+
 export class TeleBoxManager {
     public constructor({
         root = document.body,
@@ -42,27 +57,31 @@ export class TeleBoxManager {
         readonly = false,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
+        const { combine, createVal } = createSideEffectBinder(this._sideEffect);
 
         this.root = root;
         this.namespace = namespace;
         this.zIndex = zIndex;
 
-        this._readonly = new Val(readonly);
-        this._readonly.reaction((readonly, skipUpdate) => {
+        const readonly$ = createVal(readonly);
+        readonly$.reaction((readonly, _, skipUpdate) => {
             this.boxes.forEach((box) => box.setReadonly(readonly, skipUpdate));
         });
 
-        this._minimized = new Val(minimized);
+        const minimized$ = createVal(minimized);
 
-        this._maximized = new Val(maximized);
-        this._maximized.reaction((maximized, skipUpdate) => {
+        const maximized$ = createVal(maximized);
+        maximized$.reaction((maximized, _, skipUpdate) => {
             this.boxes.forEach((box) =>
                 box.setMaximized(maximized, skipUpdate)
             );
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized);
+            }
         });
 
-        this._state = new CombinedVal(
-            [this._minimized, this._maximized],
+        const state$ = combine(
+            [minimized$, maximized$],
             ([minimized, maximized]): TeleBoxState =>
                 minimized
                     ? TELE_BOX_STATE.Minimized
@@ -70,61 +89,61 @@ export class TeleBoxManager {
                     ? TELE_BOX_STATE.Maximized
                     : TELE_BOX_STATE.Normal
         );
-        this._state.reaction((state, skipUpdate) => {
+        state$.reaction((state, _, skipUpdate) => {
             this.maxTitleBar.setState(state);
             if (!skipUpdate) {
                 this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
             }
         });
 
-        this._fence = new Val(fence);
-        this._fence.subscribe((fence, skipUpdate) => {
+        const fence$ = createVal(fence);
+        fence$.subscribe((fence, _, skipUpdate) => {
             this.boxes.forEach((box) => box.setFence(fence, skipUpdate));
         });
 
-        this._containerRect = new Val(containerRect, shallowequal);
-        this._containerRect.reaction((containerRect, skipUpdate) => {
+        const containerRect$ = createVal(containerRect, shallowequal);
+        containerRect$.reaction((containerRect, _, skipUpdate) => {
             this.boxes.forEach((box) =>
                 box.setContainerRect(containerRect, skipUpdate)
             );
             this.maxTitleBar.setContainerRect(containerRect);
         });
 
-        this._collector = new Val(
+        const collector$ = createVal(
             collector === null
                 ? null
                 : collector ||
-                  new TeleBoxCollector({
-                      visible: minimized,
-                      readonly: readonly,
-                      namespace,
-                  }).mount(root)
+                      new TeleBoxCollector({
+                          visible: minimized,
+                          readonly: readonly,
+                          namespace,
+                      }).mount(root)
         );
-        this._collector.subscribe((collector) => {
+        collector$.subscribe((collector) => {
             if (collector) {
-                collector.setVisible(this.minimized);
-                collector.setReadonly(this.readonly);
+                collector.setVisible(minimized$.value);
+                collector.setReadonly(readonly$.value);
                 this._sideEffect.add(() => {
                     collector.onClick = () => {
-                        if (!this.readonly) {
-                            this.setMinimized(false);
+                        if (!readonly$.value) {
+                            minimized$.setValue(false);
                         }
                     };
                     return () => collector.destroy();
                 }, "collect-onClick");
             }
         });
-        this._readonly.subscribe((readonly) =>
-            this.collector?.setReadonly(readonly)
+        readonly$.subscribe((readonly) =>
+            collector$.value?.setReadonly(readonly)
         );
 
-        this._minimized.subscribe((minimized, skipUpdate) => {
-            this.collector?.setVisible(minimized);
+        minimized$.subscribe((minimized, _, skipUpdate) => {
+            collector$.value?.setVisible(minimized);
 
             if (minimized) {
-                if (this.collector?.$collector) {
+                if (collector$.value?.$collector) {
                     const { x, y, width, height } =
-                        this.collector.$collector.getBoundingClientRect();
+                        collector$.value.$collector.getBoundingClientRect();
                     const rootRect = this.root.getBoundingClientRect();
                     this.boxes.forEach((box) => {
                         box.setCollectorRect(
@@ -145,10 +164,14 @@ export class TeleBoxManager {
             this.boxes.forEach((box) =>
                 box.setMinimized(minimized, skipUpdate)
             );
+
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized);
+            }
         });
 
         const checkFocusBox = (ev: MouseEvent | TouchEvent): void => {
-            if (this.readonly) {
+            if (readonly$.value) {
                 return;
             }
 
@@ -187,20 +210,20 @@ export class TeleBoxManager {
         );
 
         this.maxTitleBar = new MaxTitleBar({
-            readonly: this.readonly,
+            readonly: readonly$.value,
             namespace: this.namespace,
-            state: this.state,
+            state: state$.value,
             boxes: this.boxes,
             focusedBox: this._focusedBox,
-            containerRect: this.containerRect,
+            containerRect: containerRect$.value,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
-                        this.setMaximized(!this.maximized);
+                        maximized$.setValue(!maximized$.value);
                         break;
                     }
                     case TELE_BOX_DELEGATE_EVENT.Minimize: {
-                        this.setMinimized(true);
+                        minimized$.setValue(true);
                         break;
                     }
                     case TELE_BOX_EVENT.Close: {
@@ -218,10 +241,23 @@ export class TeleBoxManager {
                 }
             },
         });
-        this._readonly.subscribe((readonly) =>
+        readonly$.subscribe((readonly) =>
             this.maxTitleBar.setReadonly(readonly)
         );
 
+        const valConfig: ValConfig = {
+            containerRect: containerRect$,
+            collector: collector$,
+            readonly: readonly$,
+            fence: fence$,
+            minimized: minimized$,
+            maximized: maximized$,
+        };
+
+        withValueEnhancer(this, valConfig);
+
+        this._state$ = state$;
+
         this.root.appendChild(this.maxTitleBar.render());
     }
 
@@ -235,75 +271,31 @@ export class TeleBoxManager {
 
     public zIndex: number;
 
-    protected _collector: Val<TeleBoxCollector | null>;
-
-    public get collector(): TeleBoxCollector | null {
-        return this._collector.value;
-    }
-
-    public setCollector(collector: TeleBoxCollector): void {
-        this._collector.setValue(collector);
-    }
-
-    protected _readonly: Val<boolean, boolean>;
-
-    /** Is box readonly */
-    public get readonly(): boolean {
-        return this._readonly.value;
-    }
-
-    public setReadonly(readonly: boolean, skipUpdate = false): this {
-        this._readonly.setValue(readonly, skipUpdate);
-        return this;
-    }
-
-    protected _minimized: Val<boolean, boolean>;
-
-    public get minimized(): boolean {
-        return this._minimized.value;
-    }
-
-    public setMinimized(minimized: boolean, skipUpdate = false): this {
-        this._minimized.setValue(minimized, skipUpdate);
-        return this;
-    }
-
-    protected _maximized: Val<boolean, boolean>;
-
-    public get maximized(): boolean {
-        return this._maximized.value;
-    }
-
-    public setMaximized(maximized: boolean, skipUpdate = false): this {
-        this._maximized.setValue(maximized, skipUpdate);
-        return this;
-    }
-
-    protected _state: Val<TeleBoxState, boolean>;
+    public _state$: Val<TeleBoxState, boolean>;
 
     public get state(): TeleBoxState {
-        return this._state.value;
-    }
-
-    protected _fence: Val<boolean, boolean>;
-
-    public get fence(): boolean {
-        return this._fence.value;
+        return this._state$.value;
     }
 
-    public setFence(fence: boolean, skipUpdate = false): this {
-        this._fence.setValue(fence, skipUpdate);
-        return this;
-    }
-
-    protected _containerRect: Val<TeleBoxRect, boolean>;
-
-    public get containerRect(): TeleBoxRect {
-        return this._containerRect.value;
-    }
-
-    public setContainerRect(rect: TeleBoxRect, skipUpdate = false): this {
-        this._containerRect.setValue(rect, skipUpdate);
+    /** @deprecated use setMaximized and setMinimized instead */
+    public setState(state: TeleBoxState, skipUpdate = false): this {
+        switch (state) {
+            case TELE_BOX_STATE.Maximized: {
+                this.setMinimized(false, skipUpdate);
+                this.setMaximized(true, skipUpdate);
+                break;
+            }
+            case TELE_BOX_STATE.Minimized: {
+                this.setMinimized(true, skipUpdate);
+                this.setMaximized(false, skipUpdate);
+                break;
+            }
+            default: {
+                this.setMinimized(false, skipUpdate);
+                this.setMaximized(false, skipUpdate);
+                break;
+            }
+        }
         return this;
     }
 
@@ -444,28 +436,6 @@ export class TeleBoxManager {
         });
     }
 
-    /** @deprecated use setMaximized and setMinimized instead */
-    public setState(state: TeleBoxState, skipUpdate = false): this {
-        switch (state) {
-            case TELE_BOX_STATE.Maximized: {
-                this.setMinimized(false, skipUpdate);
-                this.setMaximized(true, skipUpdate);
-                break;
-            }
-            case TELE_BOX_STATE.Minimized: {
-                this.setMinimized(true, skipUpdate);
-                this.setMaximized(false, skipUpdate);
-                break;
-            }
-            default: {
-                this.setMinimized(false, skipUpdate);
-                this.setMaximized(false, skipUpdate);
-                break;
-            }
-        }
-        return this;
-    }
-
     public wrapClassName(className: string): string {
         return `${this.namespace}-${className}`;
     }
@@ -495,15 +465,15 @@ export class TeleBoxManager {
     ): void {
         if (config.x != null || config.y != null) {
             box.move(
-                config.x == null ? box.x : config.x,
-                config.y == null ? box.y : config.y,
+                config.x == null ? box.intrinsicX : config.x,
+                config.y == null ? box.intrinsicY : config.y,
                 skipUpdate
             );
         }
         if (config.width != null || config.height != null) {
             box.resize(
-                config.width == null ? box.width : config.width,
-                config.height == null ? box.height : config.height,
+                config.width == null ? box.intrinsicWidth : config.width,
+                config.height == null ? box.intrinsicHeight : config.height,
                 skipUpdate
             );
         }
@@ -600,8 +570,8 @@ export class TeleBoxManager {
         let y = 20;
 
         if (upMostBox) {
-            x = upMostBox.x * this.containerRect.width + 20;
-            y = upMostBox.y * this.containerRect.height + 20;
+            x = upMostBox.intrinsicX * this.containerRect.width + 20;
+            y = upMostBox.intrinsicY * this.containerRect.height + 20;
 
             if (
                 x >

package/src/TeleBoxManager/typings.ts

@@ -60,6 +60,8 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     created: [ReadonlyTeleBox];
     removed: [ReadonlyTeleBox[]];
     state: [TeleBoxState];
+    maximized: [boolean];
+    minimized: [boolean];
     move: [ReadonlyTeleBox];
     resize: [ReadonlyTeleBox];
     intrinsic_move: [ReadonlyTeleBox];

package/dist/Val/CombinedVal.d.ts

@@ -1,11 +0,0 @@
-import { Val, ValCompare } from "./Val";
-export declare type CombinedValInputTuple<TArr, TMeta> = {
-    [K in keyof TArr]: Val<TArr[K], TMeta>;
-};
-export declare type CombinedValTransform<TValue, TInputs extends readonly unknown[]> = (values: TInputs) => TValue;
-export declare class CombinedVal<TValue, TInputs extends readonly unknown[], TMeta = any> extends Val<TValue, TMeta> {
-    private _disposers;
-    private _values;
-    constructor(vals: readonly [...CombinedValInputTuple<TInputs, TMeta>], transform: CombinedValTransform<TValue, TInputs>, compare?: ValCompare<TValue>);
-    destroy(): void;
-}

package/dist/Val/ComputedVal.d.ts

@@ -1,7 +0,0 @@
-import { Val, ValCompare } from "./Val";
-export declare type ComputedValTransform<TValue, TUpstream> = (value: TUpstream) => TValue;
-export declare class ComputedVal<TValue, TUpstream = TValue, TMeta = void> extends Val<TValue, TMeta> {
-    private _disposer;
-    constructor(val: Val<TUpstream, TMeta>, transform: ComputedValTransform<TValue, TUpstream>, compare?: ValCompare<TValue>);
-    destroy(): void;
-}

package/dist/Val/Val.d.ts

@@ -1,15 +0,0 @@
-export declare type ValCompare<TValue> = (newValue: TValue, oldValue: TValue) => boolean;
-export declare type ValSubscriber<TValue, TMeta> = (value: TValue, meta?: TMeta) => void;
-export declare type ValDisposer = () => void;
-export declare class Val<TValue, TMeta = any> {
-    protected _value: TValue;
-    constructor(value: TValue, compare?: ValCompare<TValue>);
-    get value(): TValue;
-    setValue(value: TValue, meta?: TMeta): void;
-    reaction(subscriber: ValSubscriber<TValue, TMeta>): ValDisposer;
-    /** reaction + immediate emission */
-    subscribe(subscriber: ValSubscriber<TValue, TMeta>, meta?: TMeta): ValDisposer;
-    destroy(): void;
-    compare(newValue: TValue, oldValue: TValue): boolean;
-    protected _subscribers?: Set<ValSubscriber<TValue, TMeta>>;
-}

package/dist/Val/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./Val";
-export * from "./CombinedVal";
-export * from "./ComputedVal";

package/src/Val/CombinedVal.ts

@@ -1,39 +0,0 @@
-import { Val, ValCompare, ValDisposer } from "./Val";
-
-export type CombinedValInputTuple<TArr, TMeta> = {
-    [K in keyof TArr]: Val<TArr[K], TMeta>;
-};
-
-export type CombinedValTransform<TValue, TInputs extends readonly unknown[]> = (
-    values: TInputs
-) => TValue;
-
-export class CombinedVal<
-    TValue,
-    TInputs extends readonly unknown[],
-    TMeta = any
-> extends Val<TValue, TMeta> {
-    private _disposers: ValDisposer[];
-    private _values: [...TInputs];
-
-    public constructor(
-        vals: readonly [...CombinedValInputTuple<TInputs, TMeta>],
-        transform: CombinedValTransform<TValue, TInputs>,
-        compare?: ValCompare<TValue>
-    ) {
-        const initValues = vals.map((val) => val.value) as [...TInputs];
-        super(transform(initValues), compare);
-        this._values = initValues;
-        this._disposers = vals.map((val, i) =>
-            val.reaction((value, meta) => {
-                this._values[i] = value;
-                super.setValue(transform(this._values), meta);
-            })
-        );
-    }
-
-    public destroy(): void {
-        this._disposers.forEach((disposer) => disposer());
-        super.destroy();
-    }
-}

package/src/Val/ComputedVal.ts

@@ -1,28 +0,0 @@
-import { Val, ValCompare, ValDisposer } from "./Val";
-
-export type ComputedValTransform<TValue, TUpstream> = (
-    value: TUpstream
-) => TValue;
-
-export class ComputedVal<TValue, TUpstream = TValue, TMeta = void> extends Val<
-    TValue,
-    TMeta
-> {
-    private _disposer: ValDisposer;
-
-    public constructor(
-        val: Val<TUpstream, TMeta>,
-        transform: ComputedValTransform<TValue, TUpstream>,
-        compare?: ValCompare<TValue>
-    ) {
-        super(transform(val.value), compare);
-        this._disposer = val.reaction((value, meta) => {
-            super.setValue(transform(value), meta);
-        });
-    }
-
-    public destroy(): void {
-        this._disposer();
-        super.destroy();
-    }
-}

package/src/Val/Val.ts

@@ -1,73 +0,0 @@
-export type ValCompare<TValue> = (
-    newValue: TValue,
-    oldValue: TValue
-) => boolean;
-
-export type ValSubscriber<TValue, TMeta> = (
-    value: TValue,
-    meta?: TMeta
-) => void;
-
-export type ValDisposer = () => void;
-
-export class Val<TValue, TMeta = any> {
-    protected _value: TValue;
-
-    public constructor(value: TValue, compare?: ValCompare<TValue>) {
-        this._value = value;
-        if (typeof compare === "function") {
-            this.compare = compare;
-        }
-    }
-
-    public get value(): TValue {
-        return this._value;
-    }
-
-    public setValue(value: TValue, meta?: TMeta): void {
-        if (!this.compare(value, this._value)) {
-            this._value = value;
-            if (this._subscribers) {
-                this._subscribers.forEach((subscriber) =>
-                    subscriber(value, meta)
-                );
-            }
-        }
-    }
-
-    public reaction(subscriber: ValSubscriber<TValue, TMeta>): ValDisposer {
-        if (!this._subscribers) {
-            this._subscribers = new Set();
-        }
-
-        this._subscribers.add(subscriber);
-
-        return (): void => {
-            if (this._subscribers) {
-                this._subscribers.delete(subscriber);
-            }
-        };
-    }
-
-    /** reaction + immediate emission */
-    public subscribe(
-        subscriber: ValSubscriber<TValue, TMeta>,
-        meta?: TMeta
-    ): ValDisposer {
-        const disposer = this.reaction(subscriber);
-        subscriber(this._value, meta);
-        return disposer;
-    }
-
-    public destroy(): void {
-        if (this._subscribers) {
-            this._subscribers.clear();
-        }
-    }
-
-    public compare(newValue: TValue, oldValue: TValue): boolean {
-        return newValue === oldValue;
-    }
-
-    protected _subscribers?: Set<ValSubscriber<TValue, TMeta>>;
-}

package/src/Val/index.ts

@@ -1,3 +0,0 @@
-export * from "./Val";
-export * from "./CombinedVal";
-export * from "./ComputedVal";