@seelen-ui/lib 2.4.10 → 2.5.0

package/esm/src/state/widget/mod.js

@@ -1,38 +1,32 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import { WidgetPreset, WidgetStatus, } from "../../../gen/types/mod.js";
 import { invoke, SeelenCommand, SeelenEvent } from "../../handlers/mod.js";
-import { List } from "../../utils/List.js";
-import { newFromInvoke, newOnEvent } from "../../utils/State.js";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { decodeBase64Url } from "../../../deps/jsr.io/@std/encoding/1.0.10/mod.js";
-import { PhysicalPosition, PhysicalSize } from "@tauri-apps/api/dpi";
-import { monitorFromPoint } from "@tauri-apps/api/window";
 import { debounce } from "../../utils/async.js";
 import { WidgetAutoSizer } from "./sizing.js";
-import { adjustPostionByPlacement } from "./positioning.js";
+import { adjustPositionByPlacement, fitIntoMonitor, initMonitorsState } from "./positioning.js";
 import { startThemingTool } from "../theme/theming.js";
-export const SeelenSettingsWidgetId = "@seelen/settings";
-export const SeelenPopupWidgetId = "@seelen/popup";
-export const SeelenWegWidgetId = "@seelen/weg";
-export const SeelenToolbarWidgetId = "@seelen/fancy-toolbar";
-export const SeelenWindowManagerWidgetId = "@seelen/window-manager";
-export const SeelenLauncherWidgetId = "@seelen/launcher";
-export const SeelenWallWidgetId = "@seelen/wallpaper-manager";
-export class WidgetList extends List {
-    static getAsync() {
-        return newFromInvoke(this, SeelenCommand.StateGetWidgets);
-    }
-    static onChange(cb) {
-        return newOnEvent(cb, this, SeelenEvent.StateWidgetsChanged);
-    }
-    findById(id) {
-        return this.asArray().find((widget) => widget.id === id);
-    }
-}
+import { getCurrentWebview } from "@tauri-apps/api/webview";
 /**
  * Represents the widget instance running in the current webview
  */
 export class Widget {
+    /**
+     * Alternative accesor for the current running widget.\
+     * Will throw if the library is being used on a non Seelen UI environment
+     */
+    static getCurrent() {
+        const scope = dntShim.dntGlobalThis;
+        if (!scope.__SLU_WIDGET) {
+            throw new Error("The library is being used on a non Seelen UI environment");
+        }
+        return (scope.__SLU_WIDGET_INSTANCE || (scope.__SLU_WIDGET_INSTANCE = new Widget(scope.__SLU_WIDGET)));
+    }
+    /** The current running widget */
+    static get self() {
+        return Widget.getCurrent();
+    }
     /** widget id */
     id;
     /** widget definition */
@@ -42,15 +36,24 @@ export class Widget {
     /** current webview window */
     webview;
     autoSizer;
-    initOptions = {};
     runtimeState = {
+        hwnd: 0,
         initialized: false,
         ready: false,
+        position: {
+            x: 0,
+            y: 0,
+        },
+        size: {
+            width: 0,
+            height: 0,
+        },
+        firstFocus: true,
     };
     constructor(widget) {
         this.def = widget;
         this.webview = getCurrentWebviewWindow();
-        const [id, query] = Widget.getDecodedWebviewLabel();
+        const [id, query] = getDecodedWebviewLabel();
         const params = new URLSearchParams(query);
         const paramsObj = Object.freeze(Object.fromEntries(params));
         this.id = id;
@@ -61,43 +64,24 @@ export class Widget {
             params: Object.freeze(Object.fromEntries(params)),
         });
     }
-    static getDecodedWebviewLabel() {
-        const encondedLabel = getCurrentWebviewWindow().label;
-        const decodedLabel = new TextDecoder().decode(decodeBase64Url(encondedLabel));
-        const [id, query] = decodedLabel.split("?");
-        if (!id) {
-            throw new Error("Missing widget id on webview label");
-        }
-        return [id, query];
-    }
-    /** Will throw if the library is being used on a non Seelen UI environment */
-    static getCurrentWidgetId() {
-        return this.getCurrent().id;
-    }
-    /** Will throw if the library is being used on a non Seelen UI environment */
-    static getCurrent() {
-        const scope = dntShim.dntGlobalThis;
-        if (!scope.__SLU_WIDGET) {
-            throw new Error("The library is being used on a non Seelen UI environment");
-        }
-        return (scope.__SLU_WIDGET_INSTANCE || (scope.__SLU_WIDGET_INSTANCE = new Widget(scope.__SLU_WIDGET)));
+    /** Returns the current window id of the widget */
+    get windowId() {
+        return this.runtimeState.hwnd;
     }
-    static getEntryDefaultValues(entry) {
-        const config = {
-            [entry.config.key]: entry.config.defaultValue,
+    /** Returns the current position and size of the widget */
+    get frame() {
+        return {
+            x: this.runtimeState.position.x,
+            y: this.runtimeState.position.y,
+            width: this.runtimeState.size.width,
+            height: this.runtimeState.size.height,
         };
-        for (const item of entry.children) {
-            Object.assign(config, Widget.getEntryDefaultValues(item));
-        }
-        return config;
     }
     /** Returns the default config of the widget, declared on the widget definition */
     getDefaultConfig() {
         const config = { enabled: true };
-        for (const { group } of this.def.settings) {
-            for (const entry of group) {
-                Object.assign(config, Widget.getEntryDefaultValues(entry));
-            }
+        for (const definition of this.def.settings) {
+            Object.assign(config, getDefinitionDefaultValues(definition));
         }
         return config;
     }
@@ -115,32 +99,17 @@ export class Widget {
     }
     /** Will apply the recommended settings for a desktop widget */
     async applyDesktopPreset() {
-        await Promise.all([
-            ...this.applyInvisiblePreset(),
-            // Desktop widgets are always on bottom
-            this.webview.setAlwaysOnBottom(true),
-            this.persistPositionAndSize(),
-        ]);
+        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnBottom(true)]);
     }
     /** Will apply the recommended settings for an overlay widget */
     async applyOverlayPreset() {
-        await Promise.all([
-            ...this.applyInvisiblePreset(),
-            // Overlay widgets are always on top
-            this.webview.setAlwaysOnTop(true),
-            this.persistPositionAndSize(),
-        ]);
+        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnTop(true)]);
     }
     /** Will apply the recommended settings for a popup widget */
     async applyPopupPreset() {
-        await Promise.all([...this.applyInvisiblePreset()]);
-        // auto close after 1 minute when not in use to save resources
-        const closeOnTimeout = debounce(() => {
-            this.webview.close();
-        }, 60_000);
+        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnTop(true)]);
         const hideWebview = debounce(() => {
-            this.webview.hide();
-            closeOnTimeout();
+            this.hide(true);
         }, 100);
         this.webview.onFocusChanged(({ payload: focused }) => {
             if (focused) {
@@ -153,20 +122,30 @@ export class Widget {
         this.onTrigger(async ({ desiredPosition, alignX, alignY }) => {
             // avoid flickering when clicking a button that triggers the widget
             hideWebview.cancel();
+            if (this.autoSizer && alignX && alignY) {
+                this.autoSizer.originX = alignX;
+                this.autoSizer.originY = alignY;
+            }
             if (desiredPosition) {
-                const { width, height } = await this.webview.outerSize();
-                const pos = await adjustPostionByPlacement({
-                    x: desiredPosition[0],
-                    y: desiredPosition[1],
-                    width,
-                    height,
-                    alignX,
-                    alignY,
+                const adjusted = adjustPositionByPlacement({
+                    frame: {
+                        x: desiredPosition.x,
+                        y: desiredPosition.y,
+                        width: this.runtimeState.size.width,
+                        height: this.runtimeState.size.height,
+                    },
+                    originX: alignX,
+                    originY: alignY,
+                });
+                await this.setPosition({
+                    left: adjusted.x,
+                    top: adjusted.y,
+                    right: adjusted.x + adjusted.width,
+                    bottom: adjusted.y + adjusted.height,
                 });
-                await this.webview.setPosition(new PhysicalPosition(pos.x, pos.y));
             }
-            await this.webview.show();
-            await this.webview.setFocus();
+            await this.show();
+            await this.focus();
         });
     }
     /**
@@ -175,30 +154,32 @@ export class Widget {
      */
     async persistPositionAndSize() {
         const storage = globalThis.window.localStorage;
-        const { label } = this.webview;
-        const [x, y, width, height] = [`x`, `y`, `width`, `height`].map((k) => storage.getItem(`${label}::${k}`));
-        if (x && y) {
-            const pos = new PhysicalPosition(Number(x), Number(y));
-            // check if the stored position is still valid
-            const monitor = await monitorFromPoint(pos.x, pos.y);
-            if (monitor) {
-                await this.webview.setPosition(pos);
-            }
-        }
-        if (width && height) {
-            const size = new PhysicalSize(Number(width), Number(height));
-            await this.webview.setSize(size);
+        const [x, y, width, height] = [`x`, `y`, `width`, `height`].map((k) => storage.getItem(`${k}`));
+        if (x && y && width && height) {
+            const frame = {
+                x: Number(x),
+                y: Number(y),
+                width: Number(width),
+                height: Number(height),
+            };
+            const safeFrame = fitIntoMonitor(frame);
+            await this.setPosition({
+                left: safeFrame.x,
+                top: safeFrame.y,
+                right: safeFrame.x + safeFrame.width,
+                bottom: safeFrame.y + safeFrame.height,
+            });
         }
         this.webview.onMoved(debounce((e) => {
             const { x, y } = e.payload;
-            storage.setItem(`${label}::x`, x.toString());
-            storage.setItem(`${label}::y`, y.toString());
+            storage.setItem(`x`, x.toString());
+            storage.setItem(`y`, y.toString());
             console.info(`Widget position saved: ${x} ${y}`);
         }, 500));
         this.webview.onResized(debounce((e) => {
             const { width, height } = e.payload;
-            storage.setItem(`${label}::width`, width.toString());
-            storage.setItem(`${label}::height`, height.toString());
+            storage.setItem(`width`, width.toString());
+            storage.setItem(`height`, height.toString());
             console.info(`Widget size saved: ${width} ${height}`);
         }, 500));
     }
@@ -212,8 +193,14 @@ export class Widget {
             console.warn(`Widget already initialized`);
             return;
         }
+        this.runtimeState.hwnd = await invoke(SeelenCommand.GetSelfWindowId);
         this.runtimeState.initialized = true;
-        this.initOptions = options;
+        if (options.autoSizeByContent) {
+            this.autoSizer = new WidgetAutoSizer(this, options.autoSizeByContent);
+        }
+        else if (options.saveAndRestoreLastRect ?? this.def.preset === WidgetPreset.Desktop) {
+            await this.persistPositionAndSize();
+        }
         switch (this.def.preset) {
             case WidgetPreset.None:
                 break;
@@ -228,9 +215,18 @@ export class Widget {
                 break;
         }
         await startThemingTool();
-        if (options.autoSizeByContent) {
-            this.autoSizer = new WidgetAutoSizer(this.webview, options.autoSizeByContent);
-        }
+        await initMonitorsState();
+        // state initialization
+        this.runtimeState.size = await this.webview.outerSize();
+        this.runtimeState.position = await this.webview.outerPosition();
+        this.webview.onResized((e) => {
+            this.runtimeState.size.width = e.payload.width;
+            this.runtimeState.size.height = e.payload.height;
+        });
+        this.webview.onMoved((e) => {
+            this.runtimeState.position.x = e.payload.x;
+            this.runtimeState.position.y = e.payload.y;
+        });
     }
     /**
      * Will mark the widget as `ready` and pool pending triggers.
@@ -238,7 +234,8 @@ export class Widget {
      * If the widget is not lazy this will inmediately show the widget.
      * Lazy widget should be shown on trigger action.
      */
-    async ready() {
+    async ready(options = {}) {
+        const { show = !this.def.lazy } = options;
         if (!this.runtimeState.initialized) {
             throw new Error(`Widget was not initialized before ready`);
         }
@@ -248,17 +245,87 @@ export class Widget {
         }
         this.runtimeState.ready = true;
         await this.autoSizer?.execute();
-        if (this.initOptions.show ?? !this.def.lazy) {
-            await this.webview.show();
+        if (show && !(await this.webview.isVisible())) {
+            await this.show();
+            await this.focus();
         }
         // this will mark the widget as ready, and send pending trigger event if exists
         await invoke(SeelenCommand.SetCurrentWidgetStatus, { status: WidgetStatus.Ready });
     }
     onTrigger(cb) {
         this.webview.listen(SeelenEvent.WidgetTriggered, ({ payload }) => {
-            // fix for cutted popups, ensure correct size on trigger.
-            // await this.autoSizer?.execute();
             cb(payload);
         });
     }
+    /** If animations are enabled this will animate the movement of the widget */
+    setPosition(rect) {
+        this.runtimeState.position.x = rect.left;
+        this.runtimeState.position.y = rect.top;
+        this.runtimeState.size.width = rect.right - rect.left;
+        this.runtimeState.size.height = rect.bottom - rect.top;
+        return invoke(SeelenCommand.SetSelfPosition, {
+            rect: {
+                left: Math.round(rect.left),
+                top: Math.round(rect.top),
+                right: Math.round(rect.right),
+                bottom: Math.round(rect.bottom),
+            },
+        });
+    }
+    async show() {
+        debouncedClose.cancel();
+        await this.webview.show();
+    }
+    /** Will force foreground the widget */
+    async focus() {
+        if (this.runtimeState.firstFocus) {
+            await getCurrentWebview().setFocus();
+            this.runtimeState.firstFocus = false;
+        }
+        await invoke(SeelenCommand.RequestFocus, { hwnd: this.runtimeState.hwnd }).catch(() => {
+            console.warn(`Failed to focus widget: ${this.decoded.label}`);
+        });
+    }
+    hide(closeAfterInactivity) {
+        Widget.self.webview.hide();
+        if (closeAfterInactivity) {
+            debouncedClose();
+        }
+    }
+}
+const debouncedClose = debounce(() => {
+    Widget.self.webview.close();
+}, 30_000);
+export const SeelenSettingsWidgetId = "@seelen/settings";
+export const SeelenPopupWidgetId = "@seelen/popup";
+export const SeelenWegWidgetId = "@seelen/weg";
+export const SeelenToolbarWidgetId = "@seelen/fancy-toolbar";
+export const SeelenWindowManagerWidgetId = "@seelen/window-manager";
+export const SeelenWallWidgetId = "@seelen/wallpaper-manager";
+function getDecodedWebviewLabel() {
+    const encondedLabel = getCurrentWebviewWindow().label;
+    const decodedLabel = new TextDecoder().decode(decodeBase64Url(encondedLabel));
+    const [id, query] = decodedLabel.split("?");
+    if (!id) {
+        throw new Error("Missing widget id on webview label");
+    }
+    return [id, query];
+}
+function getDefinitionDefaultValues(definition) {
+    const config = {};
+    // Check if it's a group (has "group" property)
+    if ("group" in definition) {
+        // Recursively process all items in the group
+        for (const item of definition.group.items) {
+            Object.assign(config, getDefinitionDefaultValues(item));
+        }
+    }
+    else {
+        // It's a setting item, extract key and defaultValue
+        const item = definition;
+        if ("key" in item && "defaultValue" in item) {
+            config[item.key] = item.defaultValue;
+        }
+    }
+    return config;
 }

package/esm/src/state/widget/positioning.d.ts

@@ -1,15 +1,11 @@
-import { Alignment } from "../../../gen/types/mod.js";
+import { Alignment, type Frame } from "../../../gen/types/mod.js";
 interface args {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    alignX?: Alignment | null;
-    alignY?: Alignment | null;
+    frame: Frame;
+    originX?: Alignment | null;
+    originY?: Alignment | null;
 }
-export declare function adjustPostionByPlacement({ x, y, width, height, alignX, alignY, }: args): Promise<{
-    x: number;
-    y: number;
-}>;
+export declare function initMonitorsState(): Promise<void>;
+export declare function adjustPositionByPlacement({ frame: { x, y, width, height }, originX, originY, }: args): Frame;
+export declare function fitIntoMonitor({ x, y, width, height }: Frame): Frame;
 export {};
 //# sourceMappingURL=positioning.d.ts.map

package/esm/src/state/widget/positioning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/positioning.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED,wBAAsB,wBAAwB,CAAC,EAC7C,CAAC,EACD,CAAC,EACD,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,IAAI,GAAG,OAAO,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAkB1C"}
+{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,KAAK,EAAwB,MAAM,2BAA2B,CAAC;AAKxF,UAAU,IAAI;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAMD,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,CAKvD;AAYD,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAC9B,OAAO,EACP,OAAO,GACR,EAAE,IAAI,GAAG,KAAK,CAoBd;AAED,wBAAgB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,GAAG,KAAK,CAoCpE"}

package/esm/src/state/widget/positioning.js

@@ -1,59 +1,71 @@
-import { monitorFromPoint } from "@tauri-apps/api/window";
 import { Alignment } from "../../../gen/types/mod.js";
-export async function adjustPostionByPlacement({ x, y, width, height, alignX, alignY, }) {
-    if (alignX === Alignment.Center) {
+import { invoke, subscribe } from "../../handlers/mod.js";
+import { SeelenCommand } from "../../lib.js";
+import { SeelenEvent } from "../../handlers/events.js";
+const monitors = {
+    value: [],
+};
+export async function initMonitorsState() {
+    monitors.value = await invoke(SeelenCommand.SystemGetMonitors);
+    subscribe(SeelenEvent.SystemMonitorsChanged, ({ payload }) => {
+        monitors.value = payload;
+    });
+}
+function monitorFromPoint(x, y) {
+    return monitors.value.find((m) => m.rect.left <= x && x < m.rect.right && m.rect.top <= y && y < m.rect.bottom);
+}
+function primaryMonitor() {
+    return monitors.value.find((m) => m.isPrimary);
+}
+export function adjustPositionByPlacement({ frame: { x, y, width, height }, originX, originY, }) {
+    if (originX === Alignment.Center) {
         x -= width / 2;
     }
-    else if (alignX === Alignment.Start) {
+    else if (originX === Alignment.End) {
         x -= width;
     }
-    if (alignY === Alignment.Center) {
+    if (originY === Alignment.Center) {
         y -= height / 2;
     }
-    else if (alignY === Alignment.Start) {
+    else if (originY === Alignment.End) {
         y -= height;
     }
-    const fixed = await fitIntoMonitor({ x, y, width, height });
+    const newFrame = fitIntoMonitor({ x, y, width, height });
     return {
-        x: Math.round(fixed.x),
-        y: Math.round(fixed.y),
+        x: Math.round(newFrame.x),
+        y: Math.round(newFrame.y),
+        width: Math.round(newFrame.width),
+        height: Math.round(newFrame.height),
     };
 }
-async function fitIntoMonitor({ x, y, width, height, }) {
-    const monitor = await monitorFromPoint(x, y);
+export function fitIntoMonitor({ x, y, width, height }) {
+    const monitor = monitorFromPoint(Math.round(x), Math.round(y)) || primaryMonitor();
     if (monitor) {
+        width = Math.min(width, monitor.rect.right - monitor.rect.left);
+        height = Math.min(height, monitor.rect.bottom - monitor.rect.top);
         const x2 = x + width;
         const y2 = y + height;
-        const mx = monitor.position.x;
-        const my = monitor.position.y;
-        const mx2 = mx + monitor.size.width;
-        const my2 = my + monitor.size.height;
         // check left edge
-        if (x < mx) {
-            x = mx;
+        if (x < monitor.rect.left) {
+            x = monitor.rect.left;
         }
         // check top edge
-        if (y < my) {
-            y = my;
+        if (y < monitor.rect.top) {
+            y = monitor.rect.top;
         }
         // check right edge
-        if (x2 > mx2) {
-            x = mx2 - width;
+        if (x2 > monitor.rect.right) {
+            x = monitor.rect.right - width;
         }
         // check bottom edge
-        if (y2 > my2) {
-            y = my2 - height;
-        }
-        // ensure final position is still within monitor bounds (in case window is larger than monitor)
-        if (x < mx) {
-            x = mx;
-        }
-        if (y < my) {
-            y = my;
+        if (y2 > monitor.rect.bottom) {
+            y = monitor.rect.bottom - height;
         }
     }
     return {
         x,
         y,
+        width,
+        height,
     };
 }

package/esm/src/state/widget/sizing.d.ts

@@ -1,11 +1,13 @@
-import type { WebviewWindow } from "@tauri-apps/api/webviewWindow";
-export interface AutoSizeOptions {
-    onResize?: () => void;
-}
+import type { Widget } from "./mod.js";
+import { Alignment } from "../../../gen/types/mod.js";
 export declare class WidgetAutoSizer {
-    private webview;
+    private widget;
     private element;
-    constructor(webview: WebviewWindow, element: HTMLElement);
+    /** From which side the widget will grow */
+    originX: Alignment;
+    /** From which side the widget will grow */
+    originY: Alignment;
+    constructor(widget: Widget, element: HTMLElement);
     private setup;
     execute(): Promise<void>;
 }

package/esm/src/state/widget/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGnE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,eAAe;IACd,OAAO,CAAC,OAAO;IAAiB,OAAO,CAAC,OAAO;gBAAvC,OAAO,EAAE,aAAa,EAAU,OAAO,EAAE,WAAW;IAKxE,OAAO,CAAC,KAAK;IAmBP,OAAO;CAkBd"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/sizing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,qBAAa,eAAe;IAOxB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,OAAO;IAPjB,2CAA2C;IAC3C,OAAO,EAAE,SAAS,CAAmB;IACrC,2CAA2C;IAC3C,OAAO,EAAE,SAAS,CAAmB;gBAG3B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW;IAM9B,OAAO,CAAC,KAAK;IAcP,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CA6C/B"}

package/esm/src/state/widget/sizing.js

@@ -1,42 +1,66 @@
-import { LogicalSize } from "@tauri-apps/api/dpi";
+import { PhysicalSize } from "@tauri-apps/api/dpi";
+import { Alignment } from "../../../gen/types/mod.js";
 export class WidgetAutoSizer {
-    webview;
+    widget;
     element;
-    constructor(webview, element) {
-        this.webview = webview;
+    /** From which side the widget will grow */
+    originX = Alignment.Start;
+    /** From which side the widget will grow */
+    originY = Alignment.Start;
+    constructor(widget, element) {
+        this.widget = widget;
         this.element = element;
         this.execute = this.execute.bind(this);
         this.setup();
     }
     setup() {
         // Disable resizing by the user
-        this.webview.setResizable(false);
-        // Update size when content changes
-        const observer = new MutationObserver(this.execute);
+        this.widget.webview.setResizable(false);
+        const observer = new ResizeObserver(this.execute);
         observer.observe(this.element, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            characterData: true,
+            box: "border-box",
         });
-        // Cleanup function
         return () => {
             observer.disconnect();
         };
     }
     async execute() {
-        const contentWidth = this.element.scrollWidth;
-        const contentHeight = this.element.scrollHeight;
-        if (contentWidth < 1 || contentHeight < 1) {
+        const { x, y, width, height } = this.widget.frame;
+        const frame = {
+            x,
+            y,
+            width: Math.ceil(this.element.scrollWidth * globalThis.window.devicePixelRatio),
+            height: Math.ceil(this.element.scrollHeight * globalThis.window.devicePixelRatio),
+        };
+        const widthDiff = frame.width - width;
+        const heightDiff = frame.height - height;
+        // Only update if the difference is more than 1px (avoid infinite loops from decimal differences)
+        if (widthDiff === 0 && heightDiff === 0) {
             return;
         }
-        const { width: physicalWidth, height: physicalHeight } = await this.webview.outerSize();
-        const logicalWidth = physicalWidth * globalThis.window.devicePixelRatio;
-        const logicalHeight = physicalHeight * globalThis.window.devicePixelRatio;
-        // Only update if the difference is more than 1px (avoid infinite loops from decimal differences)
-        if (Math.abs(contentWidth - logicalWidth) > 1 || Math.abs(contentHeight - logicalHeight) > 1) {
-            const size = new LogicalSize(contentWidth, contentHeight);
-            await this.webview.setSize(size);
+        console.trace(`Auto resize from ${width}x${height} to ${frame.width}x${frame.height}`);
+        if (this.originX === Alignment.Center) {
+            frame.x -= widthDiff / 2;
+        }
+        else if (this.originX === Alignment.End) {
+            frame.x -= widthDiff;
+        }
+        if (this.originY === Alignment.Center) {
+            frame.y -= heightDiff / 2;
         }
+        else if (this.originY === Alignment.End) {
+            frame.y -= heightDiff;
+        }
+        // only update size no position on this case
+        if (frame.x === x && frame.y === y) {
+            await this.widget.webview.setSize(new PhysicalSize(frame.width, frame.height));
+            return;
+        }
+        await this.widget.setPosition({
+            left: frame.x,
+            top: frame.y,
+            right: frame.x + frame.width,
+            bottom: frame.y + frame.height,
+        });
     }
 }