winui-svelte 0.0.2 → 0.0.4

package/src/window/window-host.svelte.ts

@@ -1,3 +1,5 @@
+import type { SizeToContent, WindowAnchor, WindowBounds, WindowSize } from "./anchor.ts";
+import { fittedBounds, SizeToContent as SizeToContentKind, WindowAnchor as WindowAnchorKind } from "./anchor.ts";
 import {
   applyCaptionButtonColors,
   applyPresentation,
@@ -13,6 +15,7 @@ import { isBackgroundRun } from "./background-mode.ts";
 import { backgroundPlacement, keepInBackground } from "./background.ts";
 import type { CaptionButtonColors, CaptionButtonProperty, TitleBarHeight, WindowRegion } from "./chrome.ts";
 import { TitleBarHeight as TitleBarHeightKind, WindowPresentation, WindowTheme } from "./chrome.ts";
+import { toDevicePixels } from "./css-pixels.ts";
 import {
   clearWindowClip,
   clipToRoundedRectangle,
@@ -28,22 +31,20 @@ import type { FrameworkElement } from "#src/winui.js";
 import {
   DisplayArea,
   DisplayAreaFallback,
+  Grid,
   NonClientRegionKind,
+  ScrollBarVisibility,
+  ScrollMode,
+  ScrollViewer,
   Window,
   WindowActivationState
 } from "#src/winui.js";
 
+export type { WindowBounds, WindowSize } from "./anchor.ts";
+
 // What <Window> (components/hand-written/Window.svelte) does: a native window
 // around the component's content, kept in line with its props.
 
-/** The window's position and size, in device pixels, as AppWindow has them. */
-export interface WindowBounds {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 /**
  * Where the window opens, in device pixels; a size left out is the width or
  * height prop's.
@@ -110,6 +111,23 @@ export interface WindowProps {
   width?: number;
   height?: number;
 
+  /**
+   * Which sides of the window follow its content: the content is measured
+   * after every layout pass and the window is resized to it (frame included,
+   * within the size limits) with one `AppWindow.MoveAndResize`, so a growing
+   * content never flickers. A side that follows the content ignores the
+   * `width` or `height` prop and the user's resizing. Windowed presentation
+   * only; the default is `none`.
+   */
+  sizeToContent?: SizeToContent | undefined;
+
+  /**
+   * The corner that stays where it is when the window is sized to its content
+   * (and when the scale changes the size): a window docked bottom-right whose
+   * content grows taller grows upward. The default is `topLeft`.
+   */
+  anchor?: WindowAnchor | undefined;
+
   /** The least the user can resize to, in device-independent pixels. */
   minWidth?: number;
   minHeight?: number;
@@ -228,12 +246,6 @@ export interface WindowProps {
   onboundschanged?: (bounds: WindowBounds) => void;
 }
 
-/** A size in device pixels. */
-export interface WindowSize {
-  width: number;
-  height: number;
-}
-
 /** What `attachWindow` opens a window around, and how. */
 export interface AttachOptions {
   content: FrameworkElement;
@@ -244,11 +256,40 @@ export interface AttachOptions {
   size?: WindowSize | undefined;
 }
 
-function round({ value, scale }: {
-  value: number;
+// A side of the window in device pixels: the prop's, unless the prop is left
+// out or the content sets that side.
+function sideOf({ value, current, isFitted, scale }: {
+  value: number | undefined;
+  current: number;
+  isFitted: boolean;
   scale: number;
 }) {
-  return Math.round(value * scale);
+  const isKept = value === undefined || isFitted;
+  if (isKept) {
+    return current;
+  }
+
+  return toDevicePixels({
+    value,
+    scale
+  });
+}
+
+// A size limit in device pixels; `fallback` when the app names none.
+function limitOf({ value, fallback, scale }: {
+  value: number | undefined;
+  fallback: number;
+  scale: number;
+}) {
+  const isNamed = value !== undefined;
+  if (!isNamed) {
+    return fallback;
+  }
+
+  return toDevicePixels({
+    value,
+    scale
+  });
 }
 
 // A prop the app left out is undefined; a guard names the test.
@@ -256,6 +297,11 @@ function isGiven<Value>(value: Value | undefined): value is Value {
   return value !== undefined;
 }
 
+// Windows whose component is gone while the application goes on, waiting one
+// tick for the component that replaces it (a hot update re-creates it) to take
+// the same window over; a window nobody takes is closed.
+const orphans: Window[] = [];
+
 class WindowHost {
   readonly handle: WindowHandle;
   private readonly props: WindowProps;
@@ -276,13 +322,16 @@ class WindowHost {
   private isClipApplied = false;
   private isTopApplied = false;
   private hasShown = false;
+  private isFitting = false;
+  private scroller: ScrollViewer | null = null;
+  private readonly isTakenOver: boolean;
   private readonly openSize: WindowSize | undefined;
   private appliedSize: {
     width: number | undefined;
     height: number | undefined;
   };
 
-  constructor({ content, props, titleBar, size }: AttachOptions) {
+  constructor({ content, props, titleBar, size }: AttachOptions, orphan: Window | undefined) {
     this.props = props;
     this.openSize = size;
     this.content = content;
@@ -297,15 +346,18 @@ class WindowHost {
       joinAppUserModel(appUserModelId);
     }
 
-    const window = new Window();
+    const window = orphan ?? new Window();
+    this.isTakenOver = orphan !== undefined;
     this.handle = new WindowHandle(window);
 
-    if (isBackgroundRun()) {
+    const isNewBackgroundWindow = isBackgroundRun() && !this.isTakenOver;
+    if (isNewBackgroundWindow) {
       keepInBackground(this.handle.appWindow.id.value);
     }
 
     this.handle.guardClose(() => this.isCloseRefused());
     window.content = content;
+    this.keepInLine(() => this.syncContainer());
     this.keepInLine(() => this.syncText());
     this.keepInLine(() => this.syncBackdrop());
     this.keepInLine(() => this.syncTheme());
@@ -316,8 +368,13 @@ class WindowHost {
     this.keepInLine(() => this.syncLimits());
     this.keepInLine(() => this.syncFrame());
     this.keepInLine(() => this.syncShape());
-    this.placeFirst();
+
+    if (!this.isTakenOver) {
+      this.placeFirst();
+    }
+
     $effect(() => this.syncSize());
+    $effect(() => this.fitToContent());
     this.syncOwner();
     this.listen();
     this.watchScale();
@@ -325,7 +382,14 @@ class WindowHost {
     $effect(() => this.syncVisibility());
   }
 
-  dispose() {
+  /**
+   * Ends the host. `isClosedLater`: its component is going while the
+   * application goes on (a hot update re-creates it). The window is not closed
+   * but offered for one tick to the component that replaces it, which takes it
+   * over (no relaunch), and closed if nobody does. Closing it during the
+   * component's teardown is no option: WinUI aborts Window.Close (E_ABORT).
+   */
+  dispose(isClosedLater: boolean) {
     this.releaseBackdrop?.();
     this.releaseBackdrop = null;
     for (const unsubscribe of this.unsubscribe.splice(0)) {
@@ -333,9 +397,26 @@ class WindowHost {
     }
 
     this.handle.guardClose(() => false);
+
+    if (isClosedLater) {
+      const { window } = this.handle;
+      orphans.push(window);
+      setTimeout(() => this.closeIfOrphan(window), 0);
+      return;
+    }
+
     this.handle.close();
   }
 
+  private closeIfOrphan(window: Window) {
+    const index = orphans.indexOf(window);
+    const isOrphan = index !== -1;
+    if (isOrphan) {
+      orphans.splice(index, 1);
+      this.handle.close();
+    }
+  }
+
   // Applied now, so the window opens as it is meant to, and again whenever
   // what `sync` reads changes.
   private keepInLine(sync: () => void) {
@@ -343,6 +424,51 @@ class WindowHost {
     $effect(sync);
   }
 
+  // A measure offers an element the space it has and clamps what it asks for
+  // to that, so a root as large as the window could never ask for more or
+  // less than the window is. Inside a ScrollViewer that may scroll along a
+  // side the content sets, the root is offered all the room there (the
+  // scroll bars stay hidden), and what it asks for is what it needs.
+  private syncContainer() {
+    const { isWidthFitted, isHeightFitted } = this.fittedSides;
+    const isAnySideFitted = isWidthFitted || isHeightFitted;
+    const isFitted = isAnySideFitted && this.isWindowed;
+    const { window } = this.handle;
+    if (!isFitted) {
+      this.uncontain();
+      return;
+    }
+
+    const scroller = this.scroller ?? new ScrollViewer();
+    scroller.horizontalScrollBarVisibility = isWidthFitted ? ScrollBarVisibility.Hidden : ScrollBarVisibility.Disabled;
+    scroller.horizontalScrollMode = isWidthFitted ? ScrollMode.Enabled : ScrollMode.Disabled;
+    scroller.verticalScrollBarVisibility = isHeightFitted ? ScrollBarVisibility.Hidden : ScrollBarVisibility.Disabled;
+    scroller.verticalScrollMode = isHeightFitted ? ScrollMode.Enabled : ScrollMode.Disabled;
+    const isContained = this.scroller !== null;
+    if (isContained) {
+      return;
+    }
+
+    window.content = new Grid();
+    scroller.content = this.content;
+    window.content = scroller;
+    this.scroller = scroller;
+  }
+
+  private uncontain() {
+    const { scroller } = this;
+    const isContained = scroller !== null;
+    if (!isContained) {
+      return;
+    }
+
+    const { window } = this.handle;
+    window.content = new Grid();
+    scroller.content = null;
+    window.content = this.content;
+    this.scroller = null;
+  }
+
   private syncText() {
     const { window } = this.handle;
     window.title = this.props.title ?? "";
@@ -504,28 +630,28 @@ class WindowHost {
     }
 
     if (isGiven(minWidth)) {
-      presenter.preferredMinimumWidth = round({
+      presenter.preferredMinimumWidth = toDevicePixels({
         value: minWidth,
         scale
       });
     }
 
     if (isGiven(minHeight)) {
-      presenter.preferredMinimumHeight = round({
+      presenter.preferredMinimumHeight = toDevicePixels({
         value: minHeight,
         scale
       });
     }
 
     if (isGiven(maxWidth)) {
-      presenter.preferredMaximumWidth = round({
+      presenter.preferredMaximumWidth = toDevicePixels({
         value: maxWidth,
         scale
       });
     }
 
     if (isGiven(maxHeight)) {
-      presenter.preferredMaximumHeight = round({
+      presenter.preferredMaximumHeight = toDevicePixels({
         value: maxHeight,
         scale
       });
@@ -629,7 +755,7 @@ class WindowHost {
       hwnd,
       width,
       height,
-      radius: round({
+      radius: toDevicePixels({
         value: cornerRadius,
         scale: this.handle.scale
       })
@@ -684,11 +810,11 @@ class WindowHost {
     const { scale } = this.handle;
     const current = this.openSize ?? appWindow.size;
     const size = {
-      width: props.width === undefined ? current.width : round({
+      width: props.width === undefined ? current.width : toDevicePixels({
         value: props.width,
         scale
       }),
-      height: props.height === undefined ? current.height : round({
+      height: props.height === undefined ? current.height : toDevicePixels({
         value: props.height,
         scale
       })
@@ -733,7 +859,8 @@ class WindowHost {
   }
 
   // A new width or height resizes the window; the user's own resizing is not
-  // undone, since the props did not change.
+  // undone, since the props did not change. A side that follows the content
+  // (sizeToContent) is the content's to set.
   private syncSize() {
     const { width, height } = this.props;
     const isChanged = width !== this.appliedSize.width || height !== this.appliedSize.height;
@@ -747,18 +874,108 @@ class WindowHost {
     };
     const { appWindow } = this.handle.window;
     const { scale } = this.handle;
+    const { isWidthFitted, isHeightFitted } = this.fittedSides;
     appWindow.resize({
-      width: width === undefined ? appWindow.size.width : round({
+      width: sideOf({
         value: width,
+        current: appWindow.size.width,
+        isFitted: isWidthFitted,
         scale
       }),
-      height: height === undefined ? appWindow.size.height : round({
+      height: sideOf({
         value: height,
+        current: appWindow.size.height,
+        isFitted: isHeightFitted,
         scale
       })
     });
   }
 
+  private get fittedSides() {
+    const mode = this.props.sizeToContent ?? SizeToContentKind.none;
+    return {
+      isWidthFitted: mode === SizeToContentKind.width || mode === SizeToContentKind.both,
+      isHeightFitted: mode === SizeToContentKind.height || mode === SizeToContentKind.both
+    };
+  }
+
+  // Sizes the window to what its content asks for, whenever the prop, the
+  // limits, the scale or a layout pass changes it: one MoveAndResize, so the
+  // anchor corner never moves between the size and the position.
+  private fitToContent() {
+    const mode = this.props.sizeToContent ?? SizeToContentKind.none;
+    const anchor = this.props.anchor ?? WindowAnchorKind.topLeft;
+    const { minWidth, minHeight, maxWidth, maxHeight } = this.props;
+    const isIdle = mode === SizeToContentKind.none || !this.isWindowed || this.isFitting;
+    if (isIdle) {
+      return;
+    }
+
+    const { desiredSize } = this.content;
+    const isMeasured = desiredSize.width > 0 && desiredSize.height > 0;
+    if (!isMeasured) {
+      return;
+    }
+
+    const { appWindow, scale } = this.handle;
+    const { size, position, clientSize } = appWindow;
+    const frame = {
+      width: size.width - clientSize.width,
+      height: size.height - clientSize.height
+    };
+    const target = fittedBounds({
+      bounds: {
+        ...position,
+        ...size
+      },
+      desired: {
+        width: toDevicePixels({
+          value: desiredSize.width,
+          scale
+        }) + frame.width,
+        height: toDevicePixels({
+          value: desiredSize.height,
+          scale
+        }) + frame.height
+      },
+      mode,
+      anchor,
+      limits: {
+        minWidth: limitOf({
+          value: minWidth,
+          fallback: 0,
+          scale
+        }),
+        minHeight: limitOf({
+          value: minHeight,
+          fallback: 0,
+          scale
+        }),
+        maxWidth: limitOf({
+          value: maxWidth,
+          fallback: Infinity,
+          scale
+        }),
+        maxHeight: limitOf({
+          value: maxHeight,
+          fallback: Infinity,
+          scale
+        })
+      }
+    });
+    const hasTarget = target !== null;
+    if (!hasTarget) {
+      return;
+    }
+
+    this.isFitting = true;
+    try {
+      appWindow.moveAndResize(target);
+    } finally {
+      this.isFitting = false;
+    }
+  }
+
   private isCloseRefused() {
     return this.props.onclosing?.() === true;
   }
@@ -779,6 +996,7 @@ class WindowHost {
         this.releaseBackdrop = null;
         this.props.onclosed?.();
       }),
+      this.content.onLayoutUpdated(() => this.fitToContent()),
       window.appWindow.onChanged((_sender, event) => {
         const isMoved = event.didPositionChange || event.didSizeChange;
         if (isMoved) {
@@ -800,6 +1018,7 @@ class WindowHost {
         this.syncLimits();
         this.syncRegions();
         this.syncShape();
+        this.fitToContent();
         this.props.onscalechanged?.(scale);
       }
     });
@@ -824,7 +1043,8 @@ class WindowHost {
   // them (to reopen where the window was) needs them before the user moves it.
   private show() {
     const isHidden = this.props.isHidden === true;
-    if (!isHidden) {
+    const isToShow = !isHidden && !this.isTakenOver;
+    if (isToShow) {
       this.showWindow();
     }
 
@@ -850,14 +1070,14 @@ class WindowHost {
  * where an effect can be created (a component, or an effect root).
  */
 export function attachWindow(options: AttachOptions) {
-  const host = new WindowHost(options);
-  const forget = onTeardown(() => host.dispose());
+  const host = new WindowHost(options, orphans.shift());
+  const forget = onTeardown(() => host.dispose(false));
   host.handle.window.onClosed(forget);
   return {
     handle: host.handle,
     dispose() {
       forget();
-      host.dispose();
+      host.dispose(true);
     }
   };
 }

package/src/winui.ts

@@ -8,6 +8,9 @@ export { Application } from "#winui/microsoft/ui/xaml/Application";
 export { ColumnDefinition } from "#winui/microsoft/ui/xaml/controls/ColumnDefinition";
 export { Grid } from "#winui/microsoft/ui/xaml/controls/Grid";
 export { RowDefinition } from "#winui/microsoft/ui/xaml/controls/RowDefinition";
+export { ScrollBarVisibility } from "#winui/microsoft/ui/xaml/controls/ScrollBarVisibility";
+export { ScrollMode } from "#winui/microsoft/ui/xaml/controls/ScrollMode";
+export { ScrollViewer } from "#winui/microsoft/ui/xaml/controls/ScrollViewer";
 export { Run } from "#winui/microsoft/ui/xaml/documents/Run";
 export { DispatcherQueue } from "#winui/microsoft/ui/dispatching/DispatcherQueue";
 export { DesktopAcrylicBackdrop } from "#winui/microsoft/ui/xaml/media/DesktopAcrylicBackdrop";
@@ -18,6 +21,8 @@ export { DesktopAcrylicKind } from "#winui/microsoft/ui/composition/system-backd
 export { SystemBackdropConfiguration } from "#winui/microsoft/ui/composition/system-backdrops/SystemBackdropConfiguration";
 export { SystemBackdropTheme } from "#winui/microsoft/ui/composition/system-backdrops/SystemBackdropTheme";
 export { ICompositionSupportsSystemBackdrop } from "#winui/microsoft/ui/composition/ICompositionSupportsSystemBackdrop";
+export { Compositor as SystemCompositor } from "#winui/windows/ui/composition/Compositor";
+export { CompositionColorBrush as SystemCompositionColorBrush } from "#winui/windows/ui/composition/CompositionColorBrush";
 export { MicaKind } from "#winui/microsoft/ui/composition/system-backdrops/MicaKind";
 export { AppWindow } from "#winui/microsoft/ui/windowing/AppWindow";
 export { AppWindowPresenterKind } from "#winui/microsoft/ui/windowing/AppWindowPresenterKind";