winui-svelte 0.0.3 → 0.0.4

package/src/window/dock.ts

@@ -0,0 +1,99 @@
+import type { WindowAnchor } from "./anchor.ts";
+import { dockedBounds } from "./anchor.ts";
+import { foregroundWindowHandle } from "./native.ts";
+import type { AppWindow } from "#src/winui.js";
+import { DisplayArea, DisplayAreaFallback } from "#src/winui.js";
+
+/**
+ * Which display a window is docked to: the one the user is working on (the
+ * foreground window's), the one the window is on, or the primary one.
+ */
+export const DockDisplay = {
+  active: "active",
+  current: "current",
+  primary: "primary"
+} as const;
+
+/** One of `DockDisplay`'s values. */
+export type DockDisplay = (typeof DockDisplay)[keyof typeof DockDisplay];
+
+const NO_WINDOW = 0n;
+
+function activeDisplayArea(appWindow: AppWindow) {
+  const foreground = foregroundWindowHandle();
+  const hasForeground = foreground !== NO_WINDOW;
+  const windowId = hasForeground ? { value: foreground } : appWindow.id;
+  return DisplayArea.getFromWindowId(windowId, DisplayAreaFallback.Nearest);
+}
+
+const DISPLAY_FINDERS = {
+  [DockDisplay.active]: activeDisplayArea,
+  [DockDisplay.current]: appWindow => DisplayArea.getFromWindowId(appWindow.id, DisplayAreaFallback.Nearest),
+  [DockDisplay.primary]: () => DisplayArea.primary
+} as const satisfies Record<DockDisplay, (appWindow: AppWindow) => DisplayArea>;
+
+/**
+ * The display area `display` names for `appWindow`. The `active` one is the
+ * display of the foreground window, so an overlay that shows up while the user
+ * works on a second monitor lands there.
+ *
+ * @param options - The window and which display to find.
+ * @returns The WinUI `DisplayArea`: `workArea` is its desktop minus the taskbar, in device pixels.
+ */
+export function displayAreaOf({ appWindow, display }: {
+  appWindow: AppWindow;
+  display: DockDisplay;
+}) {
+  return DISPLAY_FINDERS[display](appWindow);
+}
+
+/** Where `dockWindow` puts a window. */
+export interface DockOptions {
+  /** The corner of the work area the window sits against. */
+  anchor: WindowAnchor;
+
+  /** Device pixels between the window and the two edges at that corner; 0 by default. */
+  inset?: number;
+
+  /** The display to dock to; the active one by default. */
+  display?: DockDisplay;
+}
+
+/**
+ * Moves the window against the `anchor` corner of a display's work area (the
+ * display minus the taskbar), `inset` device pixels in from both edges, with
+ * one `AppWindow.MoveAndResize`. The window keeps its size.
+ *
+ * A window moved to a display with another scale first goes there at its old
+ * size and is docked once Windows has rescaled it, so the corner it ends on is
+ * the one asked for at the size it really has.
+ *
+ * @param options - The window, the corner, the inset in device pixels (0 by
+ * default) and the display (the active one by default).
+ */
+export function dockWindow({ appWindow, anchor, inset = 0, display = DockDisplay.active }: DockOptions & {
+  appWindow: AppWindow;
+}) {
+  const area = displayAreaOf({
+    appWindow,
+    display
+  });
+  const { workArea } = area;
+  const currentArea = DisplayArea.getFromWindowId(appWindow.id, DisplayAreaFallback.Nearest);
+  const isOnOtherDisplay = currentArea.displayId.value !== area.displayId.value;
+  if (isOnOtherDisplay) {
+    appWindow.move({
+      x: workArea.x,
+      y: workArea.y
+    });
+  }
+
+  appWindow.moveAndResize(
+    dockedBounds({
+      area: workArea,
+      size: appWindow.size,
+      anchor,
+      inset
+    })
+  );
+}

package/src/window/index.ts

@@ -2,6 +2,10 @@ export type { RunWindowOptions } from "./application.ts";
 export { exitApplication, runWindow } from "./application.ts";
 export type { AppWindow, WindowOptions } from "./create-window.ts";
 export { Backdrop } from "./backdrop.ts";
+export type { WindowBounds, WindowSize } from "./anchor.ts";
+export { SizeToContent, WindowAnchor } from "./anchor.ts";
+export type { DockOptions } from "./dock.ts";
+export { displayAreaOf, DockDisplay, dockWindow } from "./dock.ts";
 export type { CaptionButtonColors, WindowRegion } from "./chrome.ts";
 export { TitleBarHeight, WindowPresentation, WindowTheme } from "./chrome.ts";
 export { createWindow } from "./create-window.ts";

package/src/window/native.ts

@@ -58,6 +58,18 @@ export function scaleOf(hwnd: bigint) {
   return dpi > 0 ? dpi / BASE_DPI : 1;
 }
 
+const getForegroundWindow = bind({
+  dll: "user32.dll",
+  entryPoint: "GetForegroundWindow",
+  parameters: [],
+  returnType: "pointer"
+});
+
+/** The handle of the window the user is working in; 0 when no window has the foreground. */
+export function foregroundWindowHandle() {
+  return addressOf(getForegroundWindow.invoke([]).returnValue);
+}
+
 /**
  * Makes the window `owner` own the window `hwnd`: the owned window stays above
  * its owner, and closes, minimizes and restores with it.

package/src/window/transparent-backdrop.ts

@@ -0,0 +1,38 @@
+import { write } from "#src/renderer/host/reflect.js";
+import type { Window } from "#src/winui.js";
+import { ICompositionSupportsSystemBackdrop, SystemCompositor } from "#src/winui.js";
+
+// The Windows App SDK's own Microsoft.UI.Xaml.Media.TransparentTintBackdrop is
+// not in the metadata of any release this package restores (2.2 and 2.3 have
+// DesktopAcrylicBackdrop, MicaBackdrop and the abstract SystemBackdrop only),
+// so it cannot be generated. What it does is what a window offers through
+// ICompositionSupportsSystemBackdrop: a composition brush placed behind the
+// content, one of the system's (Windows.UI.Composition) and not of the window's
+// own compositor (Microsoft.UI.Composition), which is what the interface takes.
+// A color brush with alpha 0 there makes the window show the desktop through
+// every pixel the content leaves clear, with per-pixel alpha.
+
+const CLEAR = {
+  a: 0,
+  r: 0,
+  g: 0,
+  b: 0
+};
+
+/**
+ * Puts a fully transparent system backdrop behind `window`'s content: the
+ * desktop shows through wherever the content paints nothing, and a partly
+ * transparent pixel blends with it. The window must have no XAML backdrop of
+ * its own (`applyBackdrop` takes it away first).
+ *
+ * @returns What takes the backdrop away again.
+ */
+export function attachTransparentBackdrop(window: Window) {
+  const target = window.as(ICompositionSupportsSystemBackdrop);
+  target.systemBackdrop = new SystemCompositor().createColorBrush(CLEAR);
+  return () => {
+    // The binding types the property as non-null, but null is how the target
+    // lets a backdrop go.
+    write(target, "systemBackdrop", null);
+  };
+}

package/src/window/window-handle.ts

@@ -1,7 +1,10 @@
 import { applyShownInSwitchers } from "./apply-chrome.ts";
+import type { DockOptions } from "./dock.ts";
+import { dockWindow } from "./dock.ts";
 import { scaleOf } from "./native.ts";
 import type { OpenFilePickerOptions, PickerOptions, SaveFilePickerOptions } from "./pickers.ts";
 import { pickFile, pickFilePaths, pickFolder, saveFile } from "./pickers.ts";
+import { WindowGeometry } from "#src/web-apis/window-geometry.js";
 import type { Window } from "#src/winui.js";
 import {
   FileOpenPicker,
@@ -18,11 +21,18 @@ import {
 export class WindowHandle {
   /** The native WinUI window. */
   readonly window: Window;
+
+  /**
+   * The window's size and place as the web has them: `outerWidth`,
+   * `screenX`, `resizeTo`, `moveBy` and the rest, in CSS pixels.
+   */
+  readonly geometry: WindowGeometry;
   private isClosed = false;
   private closeGuard = () => false;
 
   constructor(window: Window) {
     this.window = window;
+    this.geometry = new WindowGeometry(window.appWindow, () => this.scale);
     window.onClosed(() => {
       this.isClosed = true;
     });
@@ -59,6 +69,22 @@ export class WindowHandle {
     });
   }
 
+  /**
+   * Moves the window against a corner of a display's work area (the display
+   * minus the taskbar), `inset` device pixels in from both edges: an overlay
+   * that sits bottom-right above the taskbar of the display the user is on.
+   * With `sizeToContent` and the same `anchor` on the window, the corner stays
+   * as the content grows.
+   *
+   * @param options - The corner, the inset in device pixels and the display (the active one by default).
+   */
+  dock(options: DockOptions) {
+    dockWindow({
+      appWindow: this.appWindow,
+      ...options
+    });
+  }
+
   /** Shows the window and gives it focus. */
   activate() {
     this.window.activate();

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;
+}) {
+  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;
 }) {
-  return Math.round(value * scale);
+  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.
@@ -281,6 +322,8 @@ 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: {
@@ -314,6 +357,7 @@ class WindowHost {
 
     this.handle.guardClose(() => this.isCloseRefused());
     window.content = content;
+    this.keepInLine(() => this.syncContainer());
     this.keepInLine(() => this.syncText());
     this.keepInLine(() => this.syncBackdrop());
     this.keepInLine(() => this.syncTheme());
@@ -330,6 +374,7 @@ class WindowHost {
     }
 
     $effect(() => this.syncSize());
+    $effect(() => this.fitToContent());
     this.syncOwner();
     this.listen();
     this.watchScale();
@@ -379,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 ?? "";
@@ -540,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
       });
@@ -665,7 +755,7 @@ class WindowHost {
       hwnd,
       width,
       height,
-      radius: round({
+      radius: toDevicePixels({
         value: cornerRadius,
         scale: this.handle.scale
       })
@@ -720,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
       })
@@ -769,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;
@@ -783,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;
   }
@@ -815,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) {
@@ -836,6 +1018,7 @@ class WindowHost {
         this.syncLimits();
         this.syncRegions();
         this.syncShape();
+        this.fitToContent();
         this.props.onscalechanged?.(scale);
       }
     });

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";