@netless/telebox-insider 0.2.26 → 1.0.0-alpha.11

package/src/TeleBox/index.ts

@@ -1,21 +1,27 @@
 import "./style.scss";
 
-import EventEmitter from "eventemitter3";
+import Emittery from "emittery";
 import styler from "stylefire";
 import shallowequal from "shallowequal";
-import { SideEffectManager } from "side-effect-manager";
+import { genUID, SideEffectManager } from "side-effect-manager";
+import type {
+    ReadonlyVal,
+    ReadonlyValEnhancedResult,
+    ValEnhancedResult,
+} from "value-enhancer";
 import {
-    createSideEffectBinder,
+    combine,
     Val,
-    ValEnhancedResult,
-    ValSideEffectBinder,
+    withReadonlyValueEnhancer,
     withValueEnhancer,
+    ValManager,
 } from "value-enhancer";
-import { DefaultTitleBar, TeleTitleBar } from "../TeleTitleBar";
+import type { TeleTitleBar } from "../TeleTitleBar";
+import { DefaultTitleBar } from "../TeleTitleBar";
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import {
     clamp,
     flattenEvent,
-    genUniqueKey,
     getBoxDefaultName,
     isFalsy,
     isTruthy,
@@ -25,61 +31,80 @@ import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
     TELE_BOX_RESIZE_HANDLE,
-    TELE_BOX_DELEGATE_EVENT,
-    TELE_BOX_COLOR_SCHEME,
 } from "./constants";
 import type {
     TeleBoxConfig,
-    TeleBoxRect,
-    TeleBoxEvents,
     TeleBoxHandleType,
     TeleBoxState,
-    TeleBoxDelegateEvents,
     TeleBoxCoord,
     TeleBoxSize,
-    TeleBoxColorScheme,
+    TeleBoxEventConfig,
+    TeleBoxEvent,
+    TeleBoxDelegateEventConfig,
+    TeleBoxRect,
 } from "./typings";
+import { TeleStage } from "../TeleStage";
 
 export * from "./constants";
 export * from "./typings";
 
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+type RequiredTeleBoxConfig = Required<TeleBoxConfig>;
+
 type ValConfig = {
-    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
-    darkMode: Val<boolean, boolean>;
-    containerRect: Val<TeleBoxRect, boolean>;
-    collectorRect: Val<TeleBoxRect | undefined, boolean>;
-    /** Box title. Default empty. */
-    title: Val<string, boolean>;
-    /** Is box visible */
-    visible: Val<boolean, boolean>;
-    /** Is box readonly */
-    readonly: Val<boolean, boolean>;
-    /** Able to resize box window */
-    resizable: Val<boolean, boolean>;
-    /** Able to drag box window */
-    draggable: Val<boolean, boolean>;
-    /** Restrict box to always be within the containing area. */
-    fence: Val<boolean, boolean>;
-    /** Fixed width/height ratio for box window. */
-    fixRatio: Val<boolean, boolean>;
-    focus: Val<boolean, boolean>;
-    zIndex: Val<number, boolean>;
-    /** Is box minimized. Default false. */
-    minimized: Val<boolean, boolean>;
-    /** Is box maximized. Default false. */
-    maximized: Val<boolean, boolean>;
-    $userContent: Val<HTMLElement | undefined>;
-    $userFooter: Val<HTMLElement | undefined>;
-    $userStyles: Val<HTMLStyleElement | undefined>;
+    title: Val<RequiredTeleBoxConfig["title"], boolean>;
+    visible: Val<RequiredTeleBoxConfig["visible"], boolean>;
+    resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
+    draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
+    ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
+    stageRatio: Val<number | null>;
+};
+
+type PropsValConfig = {
+    darkMode: RequiredTeleBoxConfig["darkMode$"];
+    fence: RequiredTeleBoxConfig["fence$"];
+    minimized: RequiredTeleBoxConfig["minimized$"];
+    maximized: RequiredTeleBoxConfig["maximized$"];
+    readonly: RequiredTeleBoxConfig["readonly$"];
+    rootRect: RequiredTeleBoxConfig["rootRect$"];
+    managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    collectorRect: RequiredTeleBoxConfig["collectorRect$"];
 };
-export interface TeleBox extends ValEnhancedResult<ValConfig> {}
+
+type MyReadonlyValConfig = {
+    zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
+    focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
+
+    $userContent: Val<TeleBoxConfig["content"], boolean>;
+    $userFooter: Val<TeleBoxConfig["footer"], boolean>;
+    $userStyles: Val<TeleBoxConfig["styles"], boolean>;
+
+    minSize: Val<TeleBoxSize, boolean>;
+    intrinsicSize: Val<TeleBoxSize, boolean>;
+    intrinsicCoord: Val<TeleBoxCoord, boolean>;
+    pxMinSize: ReadonlyVal<TeleBoxSize, boolean>;
+    pxIntrinsicSize: ReadonlyVal<TeleBoxSize, boolean>;
+    pxIntrinsicCoord: ReadonlyVal<TeleBoxCoord, boolean>;
+    state: ReadonlyVal<TeleBoxState, boolean>;
+    highlightStage: ReadonlyVal<boolean, boolean>;
+    boxHighlightStage: Val<boolean | null, boolean>;
+    contentRect: Val<TeleBoxRect>;
+    contentStageRect: ReadonlyVal<TeleBoxRect | null>;
+};
+
+type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
+    PropsValConfig & MyReadonlyValConfig
+> &
+    ValEnhancedResult<ValConfig>;
+
+export interface TeleBox extends CombinedValEnhancedResult {}
 
 export class TeleBox {
     public constructor({
-        id = genUniqueKey(),
+        id = genUID(),
         title = getBoxDefaultName(),
-        prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
-        darkMode,
+        namespace = "telebox",
         visible = true,
         width = 0.5,
         height = 0.5,
@@ -87,146 +112,47 @@ export class TeleBox {
         minHeight = 0,
         x = 0.1,
         y = 0.1,
-        minimized = false,
-        maximized = false,
-        readonly = false,
         resizable = true,
         draggable = true,
-        fence = true,
-        fixRatio = false,
+        ratio = -1,
         focus = false,
         zIndex = 100,
-        namespace = "telebox",
+        stageRatio = null,
         titleBar,
         content,
         footer,
         styles,
-        containerRect = {
-            x: 0,
-            y: 0,
-            width: window.innerWidth,
-            height: window.innerHeight,
-        },
-        collectorRect,
-    }: TeleBoxConfig = {}) {
+        highlightStage = null,
+        darkMode$,
+        fence$,
+        minimized$,
+        maximized$,
+        readonly$,
+        root$,
+        rootRect$,
+        managerStageRect$,
+        managerStageRatio$,
+        collectorRect$,
+        managerHighlightStage$,
+    }: TeleBoxConfig) {
         this._sideEffect = new SideEffectManager();
-        this._valSideEffectBinder = createSideEffectBinder(this._sideEffect);
-        const { combine, createVal } = this._valSideEffectBinder;
 
         this.id = id;
         this.namespace = namespace;
-        this.events = new EventEmitter();
-        this._delegateEvents = new EventEmitter();
-
-        const prefersColorScheme$ = createVal<TeleBoxColorScheme, boolean>(
-            prefersColorScheme
-        );
-        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(
-                    TELE_BOX_EVENT.PrefersColorScheme,
-                    prefersColorScheme
-                );
-            }
-        });
-
-        const darkMode$ = createVal(Boolean(darkMode));
-
-        if (darkMode == null) {
-            prefersColorScheme$.subscribe(
-                (prefersColorScheme, _, skipUpdate) => {
-                    this._sideEffect.add(() => {
-                        if (prefersColorScheme === "auto") {
-                            const prefersDark = window.matchMedia(
-                                "(prefers-color-scheme: dark)"
-                            );
-                            if (prefersDark) {
-                                darkMode$.setValue(
-                                    prefersDark.matches,
-                                    skipUpdate
-                                );
-                                const handler = (
-                                    evt: MediaQueryListEvent
-                                ): void => {
-                                    darkMode$.setValue(evt.matches, skipUpdate);
-                                };
-                                prefersDark.addListener(handler);
-                                return () =>
-                                    prefersDark.removeListener(handler);
-                            } else {
-                                return noop;
-                            }
-                        } else {
-                            darkMode$.setValue(
-                                prefersColorScheme === "dark",
-                                skipUpdate
-                            );
-                            return noop;
-                        }
-                    }, "prefers-color-scheme");
-                }
-            );
-        }
-
-        darkMode$.reaction((darkMode, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode);
-            }
-        });
-
-        const containerRect$ = createVal(containerRect, shallowequal);
-        const collectorRect$ = createVal(collectorRect, shallowequal);
-
-        const title$ = createVal(title);
-
-        const visible$ = createVal(visible);
-        visible$.reaction((visible, _, skipUpdate) => {
-            if (!skipUpdate && !visible) {
-                this.events.emit(TELE_BOX_EVENT.Close);
-            }
-        });
-
-        const readonly$ = createVal(readonly);
-        readonly$.reaction((readonly, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.Readonly, readonly);
-            }
-        });
-
-        const resizable$ = createVal(resizable);
-        const draggable$ = createVal(draggable);
-        const fence$ = createVal(fence);
-        const fixRatio$ = createVal(fixRatio);
 
-        const zIndex$ = createVal(zIndex);
-        zIndex$.reaction((zIndex, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex);
-            }
-        });
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
 
-        const focus$ = createVal(focus);
-        focus$.reaction((focus, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(
-                    focus ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
-                );
-            }
-        });
-
-        const minimized$ = createVal(minimized);
-        minimized$.reaction((minimized, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.Minimized, minimized);
-            }
-        });
-
-        const maximized$ = createVal(maximized);
-        maximized$.reaction((maximized, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.Maximized, maximized);
-            }
-        });
+        const title$ = new Val(title);
+        const visible$ = new Val(visible);
+        const resizable$ = new Val(resizable);
+        const draggable$ = new Val(draggable);
+        const ratio$ = new Val(ratio);
+        const zIndex$ = new Val(zIndex);
+        const focus$ = new Val(focus);
+        const $userContent$ = new Val(content);
+        const $userFooter$ = new Val(footer);
+        const $userStyles$ = new Val(styles);
 
         const state$ = combine(
             [minimized$, maximized$],
@@ -237,232 +163,229 @@ export class TeleBox {
                     ? TELE_BOX_STATE.Maximized
                     : TELE_BOX_STATE.Normal
         );
-        state$.reaction((state, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.State, state);
-            }
-        });
 
-        const minSize$ = createVal(
+        const minSize$ = new Val(
             {
                 width: clamp(minWidth, 0, 1),
                 height: clamp(minHeight, 0, 1),
             },
-            shallowequal
+            { compare: shallowequal }
         );
 
-        const intrinsicSize$ = createVal(
-            {
-                width: clamp(width, minSize$.value.width, 1),
-                height: clamp(height, minSize$.value.height, 1),
-            },
-            shallowequal
+        const pxMinSize$ = combine(
+            [minSize$, managerStageRect$],
+            ([minSize, managerStageRect]) => ({
+                width: minSize.width * managerStageRect.width,
+                height: minSize.height * managerStageRect.height,
+            }),
+            { compare: shallowequal }
         );
-        minSize$.reaction((minSize, _, skipUpdate) => {
-            intrinsicSize$.setValue(
-                {
-                    width: clamp(width, minSize.width, 1),
-                    height: clamp(height, minSize.height, 1),
-                },
-                skipUpdate
-            );
-        });
-        intrinsicSize$.reaction((size, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.IntrinsicResize, size);
-            }
-        });
 
-        const size$ = combine(
-            [intrinsicSize$, maximized$],
-            ([intrinsicSize, maximized]) => {
-                if (maximized) {
-                    return { width: 1, height: 1 };
-                }
-                return intrinsicSize;
-            },
-            shallowequal
+        const intrinsicSize$ = new Val(
+            { width, height },
+            { compare: shallowequal }
         );
-        size$.reaction((size, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.Resize, size);
-            }
-        });
 
-        const visualSize$ = combine(
-            [size$, minimized$, containerRect$, collectorRect$],
-            ([size, minimized, containerRect, collectorRect]) => {
-                if (minimized && collectorRect) {
-                    return {
-                        width:
-                            collectorRect.width /
-                            size.width /
-                            containerRect.width,
-                        height:
-                            collectorRect.height /
-                            size.height /
-                            containerRect.height,
-                    };
-                }
-                return size;
-            },
-            shallowequal
+        this._sideEffect.addDisposer(
+            // check intrinsicSize overflow
+            minSize$.reaction((minSize, skipUpdate) => {
+                intrinsicSize$.setValue(
+                    {
+                        width: Math.max(width, minSize.width),
+                        height: Math.max(height, minSize.height),
+                    },
+                    skipUpdate
+                );
+            })
         );
-        visualSize$.reaction((size, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.VisualResize, size);
-            }
-        });
 
-        const intrinsicCoord$ = createVal(
-            { x: clamp(x, 0, 1), y: clamp(y, 0, 1) },
-            shallowequal
+        const intrinsicCoord$ = new Val({ x, y }, { compare: shallowequal });
+
+        const pxIntrinsicSize$ = combine(
+            [intrinsicSize$, managerStageRect$],
+            ([size, managerStageRect]) => ({
+                width: managerStageRect.width * size.width,
+                height: managerStageRect.height * size.height,
+            }),
+            { compare: shallowequal }
         );
-        intrinsicCoord$.reaction((coord, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.IntrinsicMove, coord);
-            }
-        });
 
-        const coord$ = combine(
-            [
-                intrinsicCoord$,
-                intrinsicSize$,
-                containerRect$,
-                collectorRect$,
-                minimized$,
-                maximized$,
-            ],
-            ([
-                intrinsicCoord,
-                intrinsicSize,
-                containerRect,
-                collectorRect,
-                minimized,
-                maximized,
-            ]) => {
-                if (minimized && collectorRect) {
-                    if (maximized) {
-                        return {
-                            x:
-                                (collectorRect.x + collectorRect.width / 2) /
-                                    containerRect.width -
-                                1 / 2,
-                            y:
-                                (collectorRect.y + collectorRect.height / 2) /
-                                    containerRect.height -
-                                1 / 2,
-                        };
-                    }
-                    return {
-                        x:
-                            (collectorRect.x + collectorRect.width / 2) /
-                                containerRect.width -
-                            intrinsicSize.width / 2,
-                        y:
-                            (collectorRect.y + collectorRect.height / 2) /
-                                containerRect.height -
-                            intrinsicSize.height / 2,
-                    };
-                }
-                if (maximized) {
-                    return { x: 0, y: 0 };
-                }
-                return intrinsicCoord;
-            },
-            shallowequal
+        const pxIntrinsicCoord$ = combine(
+            [intrinsicCoord$, managerStageRect$],
+            ([intrinsicCoord, managerStageRect]) => ({
+                x:
+                    intrinsicCoord.x * managerStageRect.width +
+                    managerStageRect.x,
+                y:
+                    intrinsicCoord.y * managerStageRect.height +
+                    managerStageRect.y,
+            }),
+            { compare: shallowequal }
         );
-        coord$.reaction((coord, _, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_EVENT.Move, coord);
-            }
-        });
 
-        this.titleBar =
-            titleBar ||
-            new DefaultTitleBar({
-                readonly: readonly$.value,
-                title: title$.value,
-                namespace: this.namespace,
-                onDragStart: (event) => this._handleTrackStart?.(event),
-                onEvent: (event): void => {
-                    if (this._delegateEvents.listeners.length > 0) {
-                        this._delegateEvents.emit(event.type);
-                    } else {
-                        switch (event.type) {
-                            case TELE_BOX_DELEGATE_EVENT.Maximize: {
-                                maximized$.setValue(!maximized$.value);
-                                break;
-                            }
-                            case TELE_BOX_DELEGATE_EVENT.Minimize: {
-                                minimized$.setValue(true);
-                                break;
-                            }
-                            case TELE_BOX_DELEGATE_EVENT.Close: {
-                                visible$.setValue(false);
-                                break;
-                            }
-                            default: {
-                                console.error(
-                                    "Unsupported titleBar event:",
-                                    event
-                                );
-                                break;
-                            }
-                        }
-                    }
-                },
-            });
-        readonly$.reaction((readonly) => {
-            this.titleBar.setReadonly(readonly);
+        const boxHighlightStage$ = new Val<boolean | null, boolean>(
+            highlightStage
+        );
+
+        const highlightStage$ = combine(
+            [maximized$, boxHighlightStage$, managerHighlightStage$],
+            ([maximized, boxHighlightStage, managerHighlightStage]) =>
+                boxHighlightStage === null
+                    ? managerHighlightStage && maximized
+                    : boxHighlightStage
+        );
+
+        const contentRoot$ = new Val<HTMLElement | null>(null);
+
+        const contentRect$ = new Val<TeleBoxRect>(rootRect$.value, {
+            compare: shallowequal,
         });
 
-        const $userContent$ = createVal(content);
-        const $userFooter$ = createVal(footer);
-        const $userStyles$ = createVal(styles);
+        const stageRatio$ = new Val(stageRatio);
+
+        const teleStage = new TeleStage({
+            namespace,
+            root$: contentRoot$,
+            rootRect$: contentRect$,
+            ratio$: combine(
+                [stageRatio$, managerStageRatio$],
+                ([stageRatio, managerStageRatio]) =>
+                    stageRatio ?? managerStageRatio
+            ),
+            highlightStage$,
+        });
+        this._sideEffect.addDisposer(() => teleStage.destroy());
 
-        const valConfig: ValConfig = {
-            prefersColorScheme: prefersColorScheme$,
+        const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
-            containerRect: containerRect$,
-            collectorRect: collectorRect$,
-            title: title$,
-            visible: visible$,
-            readonly: readonly$,
-            resizable: resizable$,
-            draggable: draggable$,
             fence: fence$,
-            fixRatio: fixRatio$,
-            focus: focus$,
-            zIndex: zIndex$,
             minimized: minimized$,
             maximized: maximized$,
+            readonly: readonly$,
+            rootRect: rootRect$,
+            managerStageRect: managerStageRect$,
+            collectorRect: collectorRect$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
+            zIndex: zIndex$,
+            focus: focus$,
+
             $userContent: $userContent$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
+
+            state: state$,
+            minSize: minSize$,
+            pxMinSize: pxMinSize$,
+            intrinsicSize: intrinsicSize$,
+            intrinsicCoord: intrinsicCoord$,
+            pxIntrinsicSize: pxIntrinsicSize$,
+            pxIntrinsicCoord: pxIntrinsicCoord$,
+            highlightStage: highlightStage$,
+            boxHighlightStage: boxHighlightStage$,
+            contentRect: contentRect$,
+            contentStageRect: teleStage.stageRect$,
         };
 
-        withValueEnhancer(this, valConfig);
-
-        this._state$ = state$;
-        this._minSize$ = minSize$;
-        this._size$ = size$;
-        this._intrinsicSize$ = intrinsicSize$;
-        this._visualSize$ = visualSize$;
-        this._coord$ = coord$;
-        this._intrinsicCoord$ = intrinsicCoord$;
-
-        if (this.fixRatio) {
-            this.transform(
-                coord$.value.x,
-                coord$.value.y,
-                size$.value.width,
-                size$.value.height,
-                true
-            );
-        }
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+
+        const valConfig: ValConfig = {
+            title: title$,
+            visible: visible$,
+            resizable: resizable$,
+            draggable: draggable$,
+            ratio: ratio$,
+            stageRatio: stageRatio$,
+        };
+
+        withValueEnhancer(this, valConfig, valManager);
+
+        this.titleBar =
+            titleBar ||
+            new DefaultTitleBar({
+                readonly$: readonly$,
+                state$: state$,
+                title$: title$,
+                namespace: this.namespace,
+                onDragStart: (event) => this._handleTrackStart?.(event),
+                onEvent: (event) => this._delegateEvents.emit(event.type),
+            });
+
+        this._sideEffect.addDisposer(
+            ratio$.subscribe((ratio) => {
+                if (ratio > 0) {
+                    this.transform(
+                        pxIntrinsicCoord$.value.x,
+                        pxIntrinsicCoord$.value.y,
+                        pxIntrinsicSize$.value.width,
+                        pxIntrinsicSize$.value.height,
+                        true
+                    );
+                }
+            })
+        );
+
+        this._sideEffect.addDisposer(
+            fence$.subscribe((fence) => {
+                if (fence) {
+                    this.move(
+                        pxIntrinsicCoord$.value.x,
+                        pxIntrinsicCoord$.value.y,
+                        true
+                    );
+                }
+            })
+        );
 
         this.$box = this.render();
+        contentRoot$.setValue(this.$content.parentElement);
+
+        const watchValEvent = <E extends TeleBoxEvent>(
+            val: ReadonlyVal<TeleBoxEventConfig[E], boolean>,
+            event: E
+        ) => {
+            this._sideEffect.addDisposer(
+                val.reaction((v, skipUpdate) => {
+                    if (!skipUpdate) {
+                        this.events.emit<any>(event, v);
+                    }
+                })
+            );
+        };
+
+        watchValEvent(darkMode$, TELE_BOX_EVENT.DarkMode);
+        watchValEvent(readonly$, TELE_BOX_EVENT.Readonly);
+        watchValEvent(zIndex$, TELE_BOX_EVENT.ZIndex);
+        watchValEvent(minimized$, TELE_BOX_EVENT.Minimized);
+        watchValEvent(maximized$, TELE_BOX_EVENT.Maximized);
+        watchValEvent(state$, TELE_BOX_EVENT.State);
+        watchValEvent(intrinsicSize$, TELE_BOX_EVENT.IntrinsicResize);
+        watchValEvent(intrinsicCoord$, TELE_BOX_EVENT.IntrinsicMove);
+
+        this._sideEffect.addDisposer([
+            visible$.reaction((visible, skipUpdate) => {
+                if (!skipUpdate && !visible) {
+                    this.events.emit(TELE_BOX_EVENT.Close);
+                }
+            }),
+            focus$.reaction((focus, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(
+                        focus ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
+                    );
+                }
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$box);
+                } else if (this.$box.parentNode) {
+                    this.$box.remove();
+                }
+            }),
+        ]);
     }
 
     public readonly id: string;
@@ -470,97 +393,50 @@ export class TeleBox {
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     public readonly namespace: string;
 
-    public readonly events: TeleBoxEvents;
+    public readonly events = new Emittery<
+        TeleBoxEventConfig,
+        TeleBoxEventConfig
+    >();
 
-    public readonly _delegateEvents: TeleBoxDelegateEvents;
+    public readonly _delegateEvents = new Emittery<
+        TeleBoxDelegateEventConfig,
+        TeleBoxDelegateEventConfig
+    >();
 
     protected _sideEffect: SideEffectManager;
 
-    protected _valSideEffectBinder: ValSideEffectBinder;
-
     public titleBar: TeleTitleBar;
 
-    public _minSize$: Val<TeleBoxSize, boolean>;
-    public _size$: Val<TeleBoxSize, boolean>;
-    public _intrinsicSize$: Val<TeleBoxSize, boolean>;
-    public _visualSize$: Val<TeleBoxSize, boolean>;
-    public _coord$: Val<TeleBoxCoord, boolean>;
-    public _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
-
-    public get darkMode(): boolean {
-        return this._darkMode$.value;
-    }
-
-    public _state$: Val<TeleBoxState, boolean>;
-
-    public get state(): TeleBoxState {
-        return this._state$.value;
-    }
-
-    /** @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;
-    }
-
-    /** Minimum box width relative to container element. 0~1. Default 0. */
+    /** Minimum box width relative to stage area. 0~1. Default 0. */
     public get minWidth(): number {
         return this._minSize$.value.width;
     }
 
-    /** Minimum box height relative to container element. 0~1. Default 0. */
+    /** Minimum box height relative to stage area. 0~1. Default 0. */
     public get minHeight(): number {
         return this._minSize$.value.height;
     }
 
     /**
-     * @param minWidth Minimum box width relative to container element. 0~1.
+     * @param minWidth Minimum box width relative to stage area. 0~1.
      * @returns this
      */
-    public setMinWidth(minWidth: number, skipUpdate = false): this {
+    public setMinWidth(minWidth: number, skipUpdate = false): void {
         this._minSize$.setValue(
             { width: minWidth, height: this.minHeight },
             skipUpdate
         );
-        return this;
     }
 
     /**
      * @param minHeight Minimum box height relative to container element. 0~1.
      * @returns this
      */
-    public setMinHeight(minHeight: number, skipUpdate = false): this {
+    public setMinHeight(minHeight: number, skipUpdate = false): void {
         this._minSize$.setValue(
             { width: this.minWidth, height: minHeight },
             skipUpdate
         );
-        return this;
-    }
-
-    /** Intrinsic box width relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.5. */
-    public get intrinsicWidth(): number {
-        return this._intrinsicSize$.value.width;
-    }
-
-    /** Intrinsic box height relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.5. */
-    public get intrinsicHeight(): number {
-        return this._intrinsicSize$.value.height;
     }
 
     /**
@@ -570,39 +446,14 @@ export class TeleBox {
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    public resize(width: number, height: number, skipUpdate = false): this {
-        this._intrinsicSize$.setValue({ width, height }, skipUpdate);
-        return this;
-    }
-
-    /** Box width relative to container element. 0~1. Default 0.5. */
-    public get width(): number {
-        return this._size$.value.width;
-    }
-
-    /** Box height relative to container element. 0~1. Default 0.5. */
-    public get height(): number {
-        return this._size$.value.height;
-    }
-
-    /** Box width in pixels. */
-    public get absoluteWidth(): number {
-        return this.width * this.containerRect.width;
-    }
-
-    /** Box height in pixels. */
-    public get absoluteHeight(): number {
-        return this.height * this.containerRect.height;
-    }
-
-    /** Actual rendered box width relative to container element. 0~1. Default 0.5. */
-    public get visualWidth(): number {
-        return this._visualSize$.value.width;
-    }
-
-    /** Actual rendered box height relative to container element. 0~1. Default 0.5. */
-    public get visualHeight(): number {
-        return this._visualSize$.value.height;
+    public resize(width: number, height: number, skipUpdate = false): void {
+        this._intrinsicSize$.setValue(
+            {
+                width: Math.max(width, this.minWidth),
+                height: Math.max(height, this.minHeight),
+            },
+            skipUpdate
+        );
     }
 
     /** Intrinsic box x position relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
@@ -615,133 +466,141 @@ export class TeleBox {
         return this._intrinsicCoord$.value.y;
     }
 
+    /** Intrinsic box width relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
+    public get intrinsicWidth(): number {
+        return this._intrinsicSize$.value.width;
+    }
+
+    /** Intrinsic box height relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
+    public get intrinsicHeight(): number {
+        return this._intrinsicSize$.value.height;
+    }
+
     /**
      * Move box position.
-     * @param x x position relative to container element. 0~1.
-     * @param y y position relative to container element. 0~1.
+     * @param x x position in px.
+     * @param y y position in px.
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    public move(x: number, y: number, skipUpdate = false): this {
-        this._intrinsicCoord$.setValue({ x, y }, skipUpdate);
-        return this;
-    }
-
-    /** Box x position relative to container element. 0~1. Default 0.1. */
-    public get x(): number {
-        return this._coord$.value.x;
-    }
+    protected move(x: number, y: number, skipUpdate = false): void {
+        let safeX: number;
+        let safeY: number;
+        const managerStageRect = this.managerStageRect;
+        const pxIntrinsicSize = this.pxIntrinsicSize;
+
+        if (this.fence) {
+            safeX = clamp(
+                x,
+                managerStageRect.x,
+                managerStageRect.x +
+                    managerStageRect.width -
+                    pxIntrinsicSize.width
+            );
+            safeY = clamp(
+                y,
+                managerStageRect.y,
+                managerStageRect.y +
+                    managerStageRect.height -
+                    pxIntrinsicSize.height
+            );
+        } else {
+            const rootRect = this.rootRect;
+            safeX = clamp(
+                x,
+                0 - pxIntrinsicSize.width + 20,
+                0 + rootRect.width - 20
+            );
+            safeY = clamp(y, 0, 0 + rootRect.height - 20);
+        }
 
-    /** Box y position relative to container element. 0~1. Default 0.1. */
-    public get y(): number {
-        return this._coord$.value.y;
+        this._intrinsicCoord$.setValue(
+            {
+                x: (safeX - managerStageRect.x) / managerStageRect.width,
+                y: (safeY - managerStageRect.y) / managerStageRect.height,
+            },
+            skipUpdate
+        );
     }
 
     /**
      * Resize + Move, with respect to fixed ratio.
-     * @param x x position relative to container element. 0~1.
-     * @param y y position relative to container element. 0~1.
-     * @param width Box width relative to container element. 0~1.
-     * @param height Box height relative to container element. 0~1.
+     * @param x x position in px.
+     * @param y y position in px.
+     * @param width Box width in px.
+     * @param height Box height in px.
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    public transform(
+    protected transform(
         x: number,
         y: number,
         width: number,
         height: number,
         skipUpdate = false
-    ): this {
-        if (this.fixRatio) {
-            const newHeight =
-                (this.intrinsicHeight / this.intrinsicWidth) * width;
-            if (y !== this.intrinsicY) {
+    ): void {
+        const managerStageRect = this.managerStageRect;
+        const rootRect = this.rootRect;
+
+        width = Math.max(width, this.pxMinSize.width);
+        height = Math.max(height, this.pxMinSize.height);
+
+        if (this.ratio > 0) {
+            const newHeight = this.ratio * width;
+            if (y !== this.pxIntrinsicCoord.y) {
                 y -= newHeight - height;
             }
             height = newHeight;
         }
 
-        if (y < 0) {
-            y = 0;
-            if (height > this.intrinsicHeight) {
-                height = this.intrinsicHeight;
-            }
+        if (y < rootRect.y) {
+            y = rootRect.y;
+            height = this.pxIntrinsicSize.height;
         }
 
-        this._intrinsicCoord$.setValue(
-            {
-                x: width >= this.minWidth ? x : this.intrinsicX,
-                y: height >= this.minHeight ? y : this.intrinsicY,
-            },
-            skipUpdate
-        );
+        this.move(x, y, skipUpdate);
         this._intrinsicSize$.setValue(
             {
-                width: clamp(width, this.minWidth, 1),
-                height: clamp(height, this.minHeight, 1),
+                width: width / managerStageRect.width,
+                height: height / managerStageRect.height,
             },
             skipUpdate
         );
-
-        return this;
-    }
-
-    /**
-     * Mount box to a container element.
-     */
-    public mount(container: HTMLElement): this {
-        container.appendChild(this.render());
-        return this;
-    }
-
-    /**
-     * Unmount box from the container element.
-     */
-    public unmount(): this {
-        if (this.$box) {
-            this.$box.remove();
-        }
-        return this;
     }
 
     /**
      * Mount dom to box content.
      */
-    public mountContent(content: HTMLElement): this {
-        this.set$userContent(content);
-        return this;
+    public mountContent(content: HTMLElement): void {
+        this._$userContent$.setValue(content);
     }
 
     /**
      * Unmount content from the box.
      */
-    public unmountContent(): this {
-        this.set$userContent(undefined);
-        return this;
+    public unmountContent(): void {
+        this._$userContent$.setValue(undefined);
     }
 
     /**
      * Mount dom to box Footer.
      */
-    public mountFooter(footer: HTMLElement): this {
-        this.set$userFooter(footer);
-        return this;
+    public mountFooter(footer: HTMLElement): void {
+        this._$userFooter$.setValue(footer);
     }
 
     /**
      * Unmount Footer from the box.
      */
-    public unmountFooter(): this {
-        this.set$userFooter(undefined);
-        return this;
+    public unmountFooter(): void {
+        this._$userFooter$.setValue(undefined);
     }
 
     public getUserStyles(): HTMLStyleElement | undefined {
         return this.$userStyles;
     }
 
-    public mountStyles(styles: string | HTMLStyleElement): this {
+    public mountStyles(styles: string | HTMLStyleElement): void {
         let $styles: HTMLStyleElement;
         if (typeof styles === "string") {
             $styles = document.createElement("style");
@@ -749,13 +608,16 @@ export class TeleBox {
         } else {
             $styles = styles;
         }
-        this.set$userStyles($styles);
-        return this;
+        this._$userStyles$.setValue($styles);
+    }
+
+    public unmountStyles(): void {
+        this._$userStyles$.setValue(undefined);
     }
 
-    public unmountStyles(): this {
-        this.set$userStyles(undefined);
-        return this;
+    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
+    setHighlightStage(highlightStage: boolean | null): void {
+        this._boxHighlightStage$.setValue(highlightStage);
     }
 
     /** DOM of the box */
@@ -770,34 +632,22 @@ export class TeleBox {
     /** DOM of the box footer */
     public $footer!: HTMLElement;
 
-    protected _renderSideEffect = new SideEffectManager();
-
-    public render(root?: HTMLElement): HTMLElement {
-        if (root) {
-            if (root === this.$box) {
-                return this.$box;
-            } else {
-                this.$box = root;
-            }
-        } else {
-            if (this.$box) {
-                return this.$box;
-            } else {
-                this.$box = document.createElement("div");
-            }
+    protected render(): HTMLElement {
+        if (this.$box) {
+            return this.$box;
         }
 
-        this._renderSideEffect.flushAll();
+        this.$box = document.createElement("div");
 
         this.$box.classList.add(this.wrapClassName("box"));
 
         const bindClassName = <TValue>(
             el: Element,
-            val: Val<TValue, boolean>,
+            val: ReadonlyVal<TValue, boolean>,
             className: string,
             predicate: (value: TValue) => boolean = isTruthy
         ): string => {
-            return this._renderSideEffect.add(() => {
+            return this._sideEffect.add(() => {
                 const wrappedClassName = this.wrapClassName(className);
                 return val.subscribe((value) => {
                     el.classList.toggle(wrappedClassName, predicate(value));
@@ -817,7 +667,7 @@ export class TeleBox {
             isFalsy
         );
 
-        this._renderSideEffect.add(() => {
+        this._sideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
             const maximizedClassName = this.wrapClassName("maximized");
             const MAXIMIZED_TIMER_ID = "box-maximized-timer";
@@ -829,11 +679,11 @@ export class TeleBox {
                 );
 
                 if (state === TELE_BOX_STATE.Maximized) {
-                    this._renderSideEffect.flush(MAXIMIZED_TIMER_ID);
+                    this._sideEffect.flush(MAXIMIZED_TIMER_ID);
                     this.$box.classList.toggle(maximizedClassName, true);
                 } else {
                     // delay so that transition won't be triggered
-                    this._renderSideEffect.setTimeout(
+                    this._sideEffect.setTimeout(
                         () => {
                             this.$box.classList.toggle(
                                 maximizedClassName,
@@ -847,68 +697,88 @@ export class TeleBox {
             });
         });
 
-        this._renderSideEffect.add(() =>
+        this._sideEffect.addDisposer(
             this._visible$.subscribe((visible) => {
                 this.$box.style.display = visible ? "block" : "none";
             })
         );
 
-        this._renderSideEffect.add(() =>
+        this._sideEffect.addDisposer(
             this._zIndex$.subscribe((zIndex) => {
                 this.$box.style.zIndex = String(zIndex);
             })
         );
 
+        this.$box.dataset.teleBoxID = this.id;
+
         const boxStyler = styler(this.$box);
 
-        this.$box.dataset.teleBoxID = this.id;
+        const boxStyles$ = combine(
+            [
+                this._maximized$,
+                this._minimized$,
+                this._pxIntrinsicSize$,
+                this._pxIntrinsicCoord$,
+                this._collectorRect$,
+            ],
+            ([
+                maximized,
+                minimized,
+                pxIntrinsicSize,
+                pxIntrinsicCoord,
+                collectorRect,
+            ]) => {
+                const styles = maximized
+                    ? {
+                          x: 0,
+                          y: 0,
+                          width: "100%",
+                          height: "100%",
+                          scaleX: 1,
+                          scaleY: 1,
+                      }
+                    : {
+                          x: pxIntrinsicCoord.x,
+                          y: pxIntrinsicCoord.y,
+                          width: pxIntrinsicSize.width + "px",
+                          height: pxIntrinsicSize.height + "px",
+                          scaleX: 1,
+                          scaleY: 1,
+                      };
+                if (minimized && collectorRect) {
+                    const { width: boxWidth, height: boxHeight } = maximized
+                        ? this.rootRect
+                        : pxIntrinsicSize;
+                    styles.x =
+                        collectorRect.x -
+                        boxWidth / 2 +
+                        collectorRect.width / 2;
+                    styles.y =
+                        collectorRect.y -
+                        boxHeight / 2 +
+                        collectorRect.height / 2;
+                    styles.scaleX = collectorRect.width / boxWidth;
+                    styles.scaleY = collectorRect.height / boxHeight;
+                }
+                return styles;
+            },
+            { compare: shallowequal }
+        );
 
-        this.$box.style.width = this.absoluteWidth + "px";
-        this.$box.style.height = this.absoluteHeight + "px";
+        const boxStyles = boxStyles$.value;
+        this.$box.style.width = boxStyles.width;
+        this.$box.style.height = boxStyles.height;
         // Add 10px offset on first frame
         // which creates a subtle moving effect
-        const translateX =
-            this.x * this.containerRect.width + this.containerRect.x;
-        const translateY =
-            this.y * this.containerRect.height + this.containerRect.y;
-        this.$box.style.transform = `translate(${translateX - 10}px,${
-            translateY - 10
+        this.$box.style.transform = `translate(${boxStyles.x - 10}px,${
+            boxStyles.y - 10
         }px)`;
 
-        this._valSideEffectBinder
-            .combine(
-                [
-                    this._coord$,
-                    this._size$,
-                    this._minimized$,
-                    this._containerRect$,
-                    this._collectorRect$,
-                ],
-                ([coord, size, minimized, containerRect, collectorRect]) => {
-                    const absoluteWidth = size.width * containerRect.width;
-                    const absoluteHeight = size.height * containerRect.height;
-                    return {
-                        width: absoluteWidth,
-                        height: absoluteHeight,
-                        x: coord.x * containerRect.width,
-                        y: coord.y * containerRect.height,
-                        scaleX:
-                            minimized && collectorRect
-                                ? collectorRect.width / absoluteWidth
-                                : 1,
-                        scaleY:
-                            minimized && collectorRect
-                                ? collectorRect.height / absoluteHeight
-                                : 1,
-                    };
-                },
-                shallowequal
-            )
-            .subscribe((styles) => {
+        this._sideEffect.addDisposer(
+            boxStyles$.subscribe((styles) => {
                 boxStyler.set(styles);
-            });
-
-        boxStyler.set({ x: translateX, y: translateY });
+            })
+        );
 
         const $boxMain = document.createElement("div");
         $boxMain.className = this.wrapClassName("box-main");
@@ -927,7 +797,21 @@ export class TeleBox {
             this.wrapClassName("content") + " tele-fancy-scrollbar";
         this.$content = $content;
 
-        this._renderSideEffect.add(() => {
+        this._sideEffect.add(() => {
+            const observer = new ResizeObserver(() => {
+                const rect = $content.getBoundingClientRect();
+                this._contentRect$.setValue({
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                });
+            });
+            observer.observe($content);
+            return () => observer.disconnect();
+        });
+
+        this._sideEffect.add(() => {
             let last$userStyles: HTMLStyleElement | undefined;
             return this._$userStyles$.subscribe(($userStyles) => {
                 if (last$userStyles) {
@@ -940,7 +824,7 @@ export class TeleBox {
             });
         });
 
-        this._renderSideEffect.add(() => {
+        this._sideEffect.add(() => {
             let last$userContent: HTMLElement | undefined;
             return this._$userContent$.subscribe(($userContent) => {
                 if (last$userContent) {
@@ -959,7 +843,7 @@ export class TeleBox {
         $footer.className = this.wrapClassName("footer-wrap");
         this.$footer = $footer;
 
-        this._renderSideEffect.add(() => {
+        this._sideEffect.add(() => {
             let last$userFooter: HTMLElement | undefined;
             return this._$userFooter$.subscribe(($userFooter) => {
                 if (last$userFooter) {
@@ -1028,109 +912,67 @@ export class TeleBox {
             preventEvent(ev);
 
             let { pageX, pageY } = flattenEvent(ev);
-            if (pageY < 0) {
-                pageY = 0;
+            if (pageY < this.rootRect.y) {
+                pageY = this.rootRect.y;
             }
 
-            const offsetX =
-                (pageX - trackStartPageX) / this.containerRect.width;
-            const offsetY =
-                (pageY - trackStartPageY) / this.containerRect.height;
+            const offsetX = pageX - trackStartPageX;
+            const offsetY = pageY - trackStartPageY;
+
+            let { x: newX, y: newY } = this.pxIntrinsicCoord;
+            let { width: newWidth, height: newHeight } = this.pxIntrinsicSize;
 
             switch (trackingHandle) {
                 case TELE_BOX_RESIZE_HANDLE.North: {
-                    this.transform(
-                        this.x,
-                        trackStartY + offsetY,
-                        this.width,
-                        trackStartHeight - offsetY
-                    );
+                    newY = trackStartY + offsetY;
+                    newHeight = trackStartHeight - offsetY;
                     break;
                 }
+                // eslint-disable-next-line no-fallthrough
                 case TELE_BOX_RESIZE_HANDLE.South: {
-                    this.transform(
-                        this.x,
-                        this.y,
-                        this.width,
-                        trackStartHeight + offsetY
-                    );
+                    newHeight = trackStartHeight + offsetY;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.West: {
-                    this.transform(
-                        trackStartX + offsetX,
-                        this.y,
-                        trackStartWidth - offsetX,
-                        this.height
-                    );
+                    newX = trackStartX + offsetX;
+                    newWidth = trackStartWidth - offsetX;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.East: {
-                    this.transform(
-                        this.x,
-                        this.y,
-                        trackStartWidth + offsetX,
-                        this.height
-                    );
+                    newWidth = trackStartWidth + offsetX;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.NorthWest: {
-                    this.transform(
-                        trackStartX + offsetX,
-                        trackStartY + offsetY,
-                        trackStartWidth - offsetX,
-                        trackStartHeight - offsetY
-                    );
+                    newX = trackStartX + offsetX;
+                    newY = trackStartY + offsetY;
+                    newWidth = trackStartWidth - offsetX;
+                    newHeight = trackStartHeight - offsetY;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.NorthEast: {
-                    this.transform(
-                        this.x,
-                        trackStartY + offsetY,
-                        trackStartWidth + offsetX,
-                        trackStartHeight - offsetY
-                    );
+                    newY = trackStartY + offsetY;
+                    newWidth = trackStartWidth + offsetX;
+                    newHeight = trackStartHeight - offsetY;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.SouthEast: {
-                    this.transform(
-                        this.x,
-                        this.y,
-                        trackStartWidth + offsetX,
-                        trackStartHeight + offsetY
-                    );
+                    newWidth = trackStartWidth + offsetX;
+                    newHeight = trackStartHeight + offsetY;
                     break;
                 }
                 case TELE_BOX_RESIZE_HANDLE.SouthWest: {
-                    this.transform(
-                        trackStartX + offsetX,
-                        this.y,
-                        trackStartWidth - offsetX,
-                        trackStartHeight + offsetY
-                    );
+                    newX = trackStartX + offsetX;
+                    newWidth = trackStartWidth - offsetX;
+                    newHeight = trackStartHeight + offsetY;
                     break;
                 }
                 default: {
-                    if (this.fence) {
-                        this.move(
-                            clamp(trackStartX + offsetX, 0, 1 - this.width),
-                            clamp(trackStartY + offsetY, 0, 1 - this.height)
-                        );
-                    } else {
-                        const xOverflowOffset = 20 / this.containerRect.width;
-                        const yOverflowOffset = 20 / this.containerRect.height;
-                        this.move(
-                            clamp(
-                                trackStartX + offsetX,
-                                xOverflowOffset - this.width,
-                                1 - xOverflowOffset
-                            ),
-                            clamp(trackStartY + offsetY, 0, 1 - yOverflowOffset)
-                        );
-                    }
-                    break;
+                    this.move(trackStartX + offsetX, trackStartY + offsetY);
+                    return;
                 }
             }
+
+            this.transform(newX, newY, newWidth, newHeight);
         };
 
         const handleTrackEnd = (ev: MouseEvent | TouchEvent): void => {
@@ -1174,10 +1016,9 @@ export class TeleBox {
             if (target.dataset?.teleBoxHandle) {
                 preventEvent(ev);
 
-                trackStartX = this.x;
-                trackStartY = this.y;
-                trackStartWidth = this.width;
-                trackStartHeight = this.height;
+                ({ x: trackStartX, y: trackStartY } = this.pxIntrinsicCoord);
+                ({ width: trackStartWidth, height: trackStartHeight } =
+                    this.pxIntrinsicSize);
 
                 ({ pageX: trackStartPageX, pageY: trackStartPageY } =
                     flattenEvent(ev));
@@ -1247,14 +1088,14 @@ export class TeleBox {
         );
     }
 
-    public destroy(): void {
+    public async destroy(): Promise<void> {
         this.$box.remove();
-        this.events.emit(TELE_BOX_EVENT.Destroyed);
-
         this._sideEffect.flushAll();
-        this._renderSideEffect.flushAll();
-        this.events.removeAllListeners();
-        this._delegateEvents.removeAllListeners();
+        this._sideEffect.flushAll();
+
+        await this.events.emit(TELE_BOX_EVENT.Destroyed);
+        this.events.clearListeners();
+        this._delegateEvents.clearListeners();
     }
 
     /**
@@ -1265,12 +1106,9 @@ export class TeleBox {
     }
 }
 
-function noop(): void {
-    return;
-}
-
 type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox
-    ? TeleBox[K] extends Function
+    ? // eslint-disable-next-line @typescript-eslint/ban-types
+      TeleBox[K] extends Function
         ? never
         : K
     : never;