winui-svelte 0.0.4 → 0.0.6

package/src/win2d/child-slot.ts

@@ -0,0 +1,43 @@
+import type { CompositionContainerVisual } from "#winui/microsoft/ui/composition/ContainerVisual";
+import { ElementCompositionPreview } from "#winui/microsoft/ui/xaml/hosting/ElementCompositionPreview";
+import type { UIElement } from "#winui/microsoft/ui/xaml/UIElement";
+
+// An element has one child-visual slot (ElementCompositionPreview.SetElementChildVisual),
+// so everything CSS draws into it shares one container: the sprites of an
+// element's effects go into the slot of its parent, the sprites of its shadows
+// into its own.
+
+interface Slot {
+  container: CompositionContainerVisual;
+}
+
+const slots = new Map<string, Slot>();
+const SLOT_COMMENT = "winui-svelte effects ";
+
+/**
+ * The child-visual slot of `owner`, shared by every sprite that wants it; null
+ * when someone else's visual holds it. A new object stands for the same parent
+ * each time, so a slot is told by the comment its owner's visual carries.
+ */
+export function childSlotOf(owner: UIElement) {
+  const ownerVisual = ElementCompositionPreview.getElementVisual(owner);
+  const known = slots.get(ownerVisual.comment);
+  const hasKnown = known !== undefined;
+  if (hasKnown) {
+    return known;
+  }
+
+  const foreign: unknown = ElementCompositionPreview.getElementChildVisual(owner);
+  const isForeign = foreign !== null && foreign !== undefined;
+  if (isForeign) {
+    return null;
+  }
+
+  const container = ownerVisual.compositor.createContainerVisual();
+  ElementCompositionPreview.setElementChildVisual(owner, container);
+  const comment = `${SLOT_COMMENT}${slots.size}`;
+  ownerVisual.comment = comment;
+  const slot = { container };
+  slots.set(comment, slot);
+  return slot;
+}

package/src/win2d/context-2d/pointer-events.ts

@@ -1,45 +1,17 @@
 import type { CanvasElement } from "./canvas-element.ts";
 import type { EventArguments } from "#src/components/convert.js";
 import type { CanvasControlComponentProps } from "#src/components/generated/win2d/index.js";
-import { InputPointerDeviceType } from "#winui/microsoft/ui/input/PointerDeviceType";
-import { InputPointerUpdateKind } from "#winui/microsoft/ui/input/PointerUpdateKind";
+import { isPointerArguments, pointerFields } from "#src/input/pointer-fields.js";
+import type { PointerHandlerName } from "#src/input/pointer-routes.js";
+import { POINTER_EVENT_TYPES } from "#src/input/pointer-routes.js";
 import type { PointerRoutedEventArgs } from "#winui/microsoft/ui/xaml/input/PointerRoutedEventArgs";
 import type { UIElement } from "#winui/microsoft/ui/xaml/UIElement";
-import { VirtualKeyModifiers } from "#winui/windows/system/VirtualKeyModifiers";
 
 // WinUI pointer events of the control a canvas is shown in, as the DOM events
 // a drawing library listens for on a canvas element. A listener that calls
 // `preventDefault` marks the WinUI event handled, so it goes no further up the
 // tree (a wheel over the canvas does not scroll the ScrollViewer around it).
 
-const PRIMARY_BUTTON = 0;
-const MIDDLE_BUTTON = 1;
-const SECONDARY_BUTTON = 2;
-const NO_BUTTON = -1;
-const BUTTON_MASKS = {
-  left: 1,
-  right: 2,
-  middle: 4
-} as const;
-// The button a pointer update is about: a release has no button pressed any more.
-const UPDATE_BUTTONS = new Map<number, number>([
-  [InputPointerUpdateKind.LeftButtonPressed, PRIMARY_BUTTON],
-  [InputPointerUpdateKind.LeftButtonReleased, PRIMARY_BUTTON],
-  [InputPointerUpdateKind.MiddleButtonPressed, MIDDLE_BUTTON],
-  [InputPointerUpdateKind.MiddleButtonReleased, MIDDLE_BUTTON],
-  [InputPointerUpdateKind.RightButtonPressed, SECONDARY_BUTTON],
-  [InputPointerUpdateKind.RightButtonReleased, SECONDARY_BUTTON]
-]);
-const POINTER_TYPES = new Map<number, string>([
-  [InputPointerDeviceType.Touch, "touch"],
-  [InputPointerDeviceType.Pen, "pen"],
-  [InputPointerDeviceType.Mouse, "mouse"],
-  [InputPointerDeviceType.Touchpad, "mouse"]
-]);
-
-/** The handler props of the control that the canvas listens through. */
-export type PointerHandlerName = "onpointerpressed" | "onpointermoved" | "onpointerreleased" | "onpointerentered" | "onpointerexited" | "onpointercanceled" | "onpointerwheelchanged";
-
 type PointerHandlers = Pick<CanvasControlComponentProps, PointerHandlerName>;
 
 /** The pointer handlers an app passed to the component, each optional. */
@@ -47,94 +19,17 @@ export type UserPointerHandlers = {
   [Name in PointerHandlerName]?: PointerHandlers[Name] | undefined;
 };
 
-// What each WinUI event is called in the DOM; a pointer event also has its mouse twin.
-const EVENT_TYPES: Record<PointerHandlerName, string[]> = {
-  onpointerpressed: ["pointerdown", "mousedown"],
-  onpointermoved: ["pointermove", "mousemove"],
-  onpointerreleased: ["pointerup", "mouseup", "click"],
-  onpointerentered: ["pointerenter", "mouseenter", "pointerover", "mouseover"],
-  onpointerexited: ["pointerleave", "mouseleave", "pointerout", "mouseout"],
-  onpointercanceled: ["pointercancel"],
-  onpointerwheelchanged: ["wheel"]
+// A pointer event also has its mouse twin in the DOM.
+const MOUSE_TWINS: Record<PointerHandlerName, string[]> = {
+  onpointerpressed: ["mousedown"],
+  onpointermoved: ["mousemove"],
+  onpointerreleased: ["mouseup", "click"],
+  onpointerentered: ["mouseenter", "pointerover", "mouseover"],
+  onpointerexited: ["mouseleave", "pointerout", "mouseout"],
+  onpointercanceled: [],
+  onpointerwheelchanged: []
 };
 
-function isPointerArguments(value: unknown): value is PointerRoutedEventArgs {
-  return typeof value === "object" && value !== null && "getCurrentPoint" in value;
-}
-
-function buttonOf({ isLeft, isRight, isMiddle }: {
-  isLeft: boolean;
-  isRight: boolean;
-  isMiddle: boolean;
-}) {
-  if (isLeft) {
-    return PRIMARY_BUTTON;
-  }
-
-  if (isMiddle) {
-    return MIDDLE_BUTTON;
-  }
-
-  return isRight ? SECONDARY_BUTTON : NO_BUTTON;
-}
-
-function maskOf({ isLeft, isRight, isMiddle }: {
-  isLeft: boolean;
-  isRight: boolean;
-  isMiddle: boolean;
-}) {
-  const left = isLeft ? BUTTON_MASKS.left : 0;
-  const right = isRight ? BUTTON_MASKS.right : 0;
-  const middle = isMiddle ? BUTTON_MASKS.middle : 0;
-  return left | right | middle;
-}
-
-function eventFields({ args, element }: {
-  args: PointerRoutedEventArgs;
-  element: UIElement;
-}) {
-  const point = args.getCurrentPoint(element);
-  const properties = point.properties;
-  const isLeft = properties.isLeftButtonPressed;
-  const isRight = properties.isRightButtonPressed;
-  const isMiddle = properties.isMiddleButtonPressed;
-  const modifiers = args.keyModifiers;
-  const wheel = properties.mouseWheelDelta;
-  const isHorizontal = properties.isHorizontalMouseWheel;
-  return {
-    clientX: point.position.x,
-    clientY: point.position.y,
-    offsetX: point.position.x,
-    offsetY: point.position.y,
-    pageX: point.position.x,
-    pageY: point.position.y,
-    x: point.position.x,
-    y: point.position.y,
-    button: UPDATE_BUTTONS.get(properties.pointerUpdateKind) ?? buttonOf({
-      isLeft,
-      isRight,
-      isMiddle
-    }),
-    buttons: maskOf({
-      isLeft,
-      isRight,
-      isMiddle
-    }),
-    pointerId: point.pointerId,
-    pointerType: POINTER_TYPES.get(point.pointerDeviceType) ?? "mouse",
-    isPrimary: properties.isPrimary,
-    pressure: properties.pressure,
-    ctrlKey: (modifiers & VirtualKeyModifiers.Control) !== 0,
-    altKey: (modifiers & VirtualKeyModifiers.Menu) !== 0,
-    shiftKey: (modifiers & VirtualKeyModifiers.Shift) !== 0,
-    metaKey: (modifiers & VirtualKeyModifiers.Windows) !== 0,
-    deltaX: isHorizontal ? wheel : 0,
-    deltaY: isHorizontal ? 0 : -wheel,
-    deltaZ: 0,
-    deltaMode: 0
-  };
-}
-
 function forward({ name, canvas, element, user }: {
   name: PointerHandlerName;
   canvas: CanvasElement;
@@ -145,12 +40,12 @@ function forward({ name, canvas, element, user }: {
     const target = element();
     const isPointer = target !== undefined && isPointerArguments(pointerArguments);
     if (isPointer) {
-      const fields = eventFields({
+      const fields = pointerFields({
         args: pointerArguments,
         element: target
       });
       let isPrevented = false;
-      for (const type of EVENT_TYPES[name]) {
+      for (const type of [POINTER_EVENT_TYPES[name], ...MOUSE_TWINS[name]]) {
         const isAllowed = canvas.dispatchEvent({
           type,
           ...fields

package/src/win2d/element-lifecycle.ts

@@ -0,0 +1,97 @@
+import type { FrameworkElement } from "#winui/microsoft/ui/xaml/FrameworkElement";
+
+// What the controllers that draw on an element's Composition visual have in
+// common: they follow its layout, report a failure in a WinUI event, and are
+// one per element.
+
+const NEWLINE = "\n";
+
+/** The size of a laid-out element. */
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * Follows one element's layout for a controller: arranges its drawing when
+ * the element is laid out or loaded, and lets go of it when it leaves the tree.
+ */
+export class ElementFollower {
+  private readonly element: FrameworkElement;
+  private readonly onArrange: (size: ElementSize) => void;
+  private readonly onUnload: () => void;
+  private stopWatching: (() => void) | null = null;
+
+  constructor({ element, arrange, onUnload }: {
+    element: FrameworkElement;
+    arrange(size: ElementSize): void;
+    onUnload(): void;
+  }) {
+    this.element = element;
+    this.onArrange = arrange;
+    this.onUnload = onUnload;
+  }
+
+  /** Starts following the element if it is not yet, and arranges now. */
+  start() {
+    const isWatching = this.stopWatching !== null;
+    if (!isWatching) {
+      const stops = [
+        this.element.onLayoutUpdated(() => this.arrange()),
+        this.element.onUnloaded(() => this.onUnload()),
+        this.element.onLoaded(() => this.arrange())
+      ];
+      this.stopWatching = () => {
+        for (const stop of stops) {
+          stop();
+        }
+      };
+    }
+
+    this.arrange();
+  }
+
+  /** Stops following the element. */
+  stop() {
+    this.stopWatching?.();
+    this.stopWatching = null;
+  }
+
+  /**
+   * Arranges the drawing once the element has a size; a failure here is raised from a WinUI event, which
+   * would only say that a callback failed, so it is written out.
+   */
+  arrange() {
+    const { x: width, y: height } = this.element.actualSize;
+    const isMeasured = width > 0 && height > 0;
+    if (!isMeasured) {
+      return;
+    }
+
+    try {
+      this.onArrange({
+        width,
+        height
+      });
+    } catch (error) {
+      process.stderr.write(`winui-svelte css: ${error instanceof Error ? error.message : String(error)}${NEWLINE}`);
+    }
+  }
+}
+
+/** The controller of an element in `controllers`, made by `create` the first time. */
+export function controllerOf<Element extends WeakKey, Controller>({ controllers, element, create }: {
+  controllers: WeakMap<Element, Controller>;
+  element: Element;
+  create(): Controller;
+}) {
+  const known = controllers.get(element);
+  const hasKnown = known !== undefined;
+  if (hasKnown) {
+    return known;
+  }
+
+  const controller = create();
+  controllers.set(element, controller);
+  return controller;
+}

package/src/win2d/element-shadow.ts

@@ -0,0 +1,167 @@
+import { colorOfArgb } from "./argb.ts";
+import { childSlotOf } from "./child-slot.ts";
+import { createGeometricClip } from "./clip-geometry.ts";
+import { controllerOf, ElementFollower } from "./element-lifecycle.ts";
+import type { ElementSize } from "./element-lifecycle.ts";
+import { shadowFrame } from "./shadow-geometry.ts";
+import type { ShadowLayer } from "#src/css/parse/box-shadow.js";
+import type { CompositionDropShadow } from "#winui/microsoft/ui/composition/DropShadow";
+import type { SpriteVisual } from "#winui/microsoft/ui/composition/SpriteVisual";
+import type { FrameworkElement } from "#winui/microsoft/ui/xaml/FrameworkElement";
+import { ElementCompositionPreview } from "#winui/microsoft/ui/xaml/hosting/ElementCompositionPreview";
+
+// A `box-shadow` drawn by Composition: one sprite visual per layer in the
+// element's own child-visual slot, each with a DropShadow. The sprite has no
+// brush of its own; the shadow's mask is a solid brush, so the shadow is the
+// rectangle of the sprite, and the sprite's clip cuts the element's border box
+// out of it (src/win2d/shadow-geometry.ts has the numbers).
+
+const OPAQUE_WHITE = {
+  a: 255,
+  r: 255,
+  g: 255,
+  b: 255
+};
+
+/** What one element's Composition shadow is made to do. */
+interface ElementShadow {
+  /** Draws these layers (the first on top), or none for an empty list. */
+  setLayers(layers: readonly ShadowLayer[]): void;
+}
+
+// A sprite that casts one layer, and what takes it off again.
+interface Cast {
+  sprite: SpriteVisual;
+  shadow: CompositionDropShadow;
+  stop(): void;
+}
+
+const controllers = new WeakMap<FrameworkElement, Controller>();
+
+class Controller implements ElementShadow {
+  private readonly element: FrameworkElement;
+  private layers: readonly ShadowLayer[] = [];
+  private casts: Cast[] = [];
+  private readonly follower: ElementFollower;
+
+  constructor(element: FrameworkElement) {
+    this.element = element;
+    this.follower = new ElementFollower({
+      element,
+      arrange: size => this.arrange(size),
+      onUnload: () => this.clear()
+    });
+  }
+
+  setLayers(layers: readonly ShadowLayer[]) {
+    this.layers = layers;
+    this.clear();
+    const isIdle = layers.length === 0;
+    if (isIdle) {
+      this.follower.stop();
+      controllers.delete(this.element);
+      return;
+    }
+
+    this.follower.start();
+  }
+
+  private arrange({ width, height }: ElementSize) {
+    const isBuilt = this.casts.length === this.layers.length;
+    if (!isBuilt) {
+      this.clear();
+      this.build();
+    }
+
+    for (const [iLayer, layer] of this.layers.entries()) {
+      const cast = this.casts[iLayer];
+      const hasCast = cast !== undefined;
+      if (hasCast) {
+        this.place({
+          cast,
+          layer,
+          size: {
+            width,
+            height
+          }
+        });
+      }
+    }
+  }
+
+  private build() {
+    const slot = childSlotOf(this.element);
+    const isSlotMissing = slot === null;
+    if (isSlotMissing) {
+      throw new Error("the element already holds a Composition child visual of its own");
+    }
+
+    const { compositor } = ElementCompositionPreview.getElementVisual(this.element);
+    for (const layer of this.layers) {
+      const sprite = compositor.createSpriteVisual();
+      const shadow = compositor.createDropShadow();
+      shadow.mask = compositor.createColorBrush(OPAQUE_WHITE);
+      shadow.color = colorOfArgb(layer.color);
+      sprite.shadow = shadow;
+      slot.container.children.insertAtBottom(sprite);
+      this.casts.push({
+        sprite,
+        shadow,
+        stop() {
+          slot.container.children.remove(sprite);
+          sprite.close();
+          shadow.close();
+        }
+      });
+    }
+  }
+
+  private place({ cast, layer, size }: {
+    cast: Cast;
+    layer: ShadowLayer;
+    size: {
+      width: number;
+      height: number;
+    };
+  }) {
+    const { sprite, shadow } = cast;
+    const frame = shadowFrame({
+      layer,
+      size
+    });
+    const { compositor } = ElementCompositionPreview.getElementVisual(this.element);
+    sprite.isVisible = frame.isVisible;
+    sprite.size = frame.size;
+    sprite.offset = frame.offset;
+    sprite.clip = createGeometricClip({
+      compositor,
+      shape: frame.clip,
+      offset: {
+        x: 0,
+        y: 0
+      }
+    });
+    shadow.blurRadius = frame.blurRadius;
+    shadow.offset = frame.shadowOffset;
+  }
+
+  private clear() {
+    for (const cast of this.casts) {
+      cast.stop();
+    }
+
+    this.casts = [];
+  }
+}
+
+/**
+ * The handle on the Composition shadow of one element: made when asked for,
+ * and let go of when its layers are emptied.
+ */
+export function elementShadowOf(element: FrameworkElement) {
+  return controllerOf({
+    controllers,
+    element,
+    create: () => new Controller(element)
+  });
+}

package/src/win2d/element-visual.ts

@@ -1,7 +1,10 @@
+import { childSlotOf } from "./child-slot.ts";
 import { createGeometricClip } from "./clip-geometry.ts";
 import { effectSource } from "./composition.ts";
 import { BLUR_PROPERTY, buildEffectGraph, shadowName } from "./effect-graph.ts";
 import { parentElementOf } from "./element-guard.ts";
+import { controllerOf, ElementFollower } from "./element-lifecycle.ts";
+import type { ElementSize } from "./element-lifecycle.ts";
 import { createMaskBrush } from "./mask-brush.ts";
 import { resolveClipShape } from "#src/css/parse/clip-shapes.js";
 import type { ClipShape } from "#src/css/parse/clip-shapes.js";
@@ -10,7 +13,6 @@ import type { VisualEffects } from "#src/css/parse/visual-effects.js";
 import { releaseProjected } from "#winui/lifetime";
 import type { CompositionEffectBrush } from "#winui/microsoft/ui/composition/CompositionEffectBrush";
 import type { CompositionVisualSurface } from "#winui/microsoft/ui/composition/CompositionVisualSurface";
-import type { CompositionContainerVisual } from "#winui/microsoft/ui/composition/ContainerVisual";
 import type { SpriteVisual } from "#winui/microsoft/ui/composition/SpriteVisual";
 import type { FrameworkElement } from "#winui/microsoft/ui/xaml/FrameworkElement";
 import { ElementCompositionPreview } from "#winui/microsoft/ui/xaml/hosting/ElementCompositionPreview";
@@ -42,10 +44,6 @@ export interface ElementVisual {
   setBlur(radius: number | null): void;
 }
 
-interface Slot {
-  container: CompositionContainerVisual;
-}
-
 // A sprite that is drawing the element through its effects.
 interface Shown {
   sprite: SpriteVisual;
@@ -63,14 +61,11 @@ interface Shown {
   stop(): void;
 }
 
-const slots = new Map<string, Slot>();
 const controllers = new WeakMap<UIElement, Controller>();
-const SLOT_COMMENT = "winui-svelte effects ";
 const BLEED_SIGMAS = 3;
 const SHADOW_SIGMA_PER_RADIUS = 2;
 const NO_BLUR_RADIUS = 0;
 const UNCLIPPED_INSET = 1_000_000;
-const NEWLINE = "\n";
 const TRANSPARENT = {
   a: 0,
   r: 0,
@@ -82,31 +77,6 @@ function compositorOf(element: UIElement) {
   return ElementCompositionPreview.getElementVisual(element).compositor;
 }
 
-// The child-visual slot of `owner`, shared by every sprite that wants it; null when someone else's visual holds it.
-// A new object stands for the same parent each time, so a slot is told by the comment its owner's visual carries.
-function slotOf(owner: UIElement) {
-  const ownerVisual = ElementCompositionPreview.getElementVisual(owner);
-  const known = slots.get(ownerVisual.comment);
-  const hasKnown = known !== undefined;
-  if (hasKnown) {
-    return known;
-  }
-
-  const foreign: unknown = ElementCompositionPreview.getElementChildVisual(owner);
-  const isForeign = foreign !== null && foreign !== undefined;
-  if (isForeign) {
-    return null;
-  }
-
-  const container = ownerVisual.compositor.createContainerVisual();
-  ElementCompositionPreview.setElementChildVisual(owner, container);
-  const comment = `${SLOT_COMMENT}${slots.size}`;
-  ownerVisual.comment = comment;
-  const slot = { container };
-  slots.set(comment, slot);
-  return slot;
-}
-
 // How far one step of the filter draws outside the element: three deviations of a blur, and a shadow's offset and blur
 // (a backdrop filter stays inside the element).
 function reachOf(step: VisualEffects["filter"][number]) {
@@ -162,11 +132,16 @@ class Controller implements ElementVisual {
   private clip: ClipShape | null = null;
   private blur: number | null = null;
   private shown: Shown | null = null;
-  private stopWatching: (() => void) | null = null;
+  private readonly follower: ElementFollower;
   private isElementClipSet = false;
 
   constructor(element: FrameworkElement) {
     this.element = element;
+    this.follower = new ElementFollower({
+      element,
+      arrange: size => this.arrange(size),
+      onUnload: () => this.hide()
+    });
   }
 
   setEffects(effects: VisualEffects) {
@@ -195,8 +170,7 @@ class Controller implements ElementVisual {
   private refresh() {
     const isIdle = isNoEffect(this.wanted) && this.clip === null;
     if (isIdle) {
-      this.stopWatching?.();
-      this.stopWatching = null;
+      this.follower.stop();
       this.hide();
       this.placeClip({
         width: 0,
@@ -206,45 +180,10 @@ class Controller implements ElementVisual {
       return;
     }
 
-    this.watch();
-    this.layout();
-  }
-
-  private watch() {
-    const isWatching = this.stopWatching !== null;
-    if (isWatching) {
-      return;
-    }
-
-    const stops = [
-      this.element.onLayoutUpdated(() => this.layout()),
-      this.element.onUnloaded(() => this.hide()),
-      this.element.onLoaded(() => this.layout())
-    ];
-    this.stopWatching = () => {
-      for (const stop of stops) {
-        stop();
-      }
-    };
+    this.follower.start();
   }
 
-  // A failure here is raised from a WinUI event, which would only say that a callback failed.
-  private layout() {
-    try {
-      this.arrange();
-    } catch (error) {
-      process.stderr.write(`winui-svelte css: ${error instanceof Error ? error.message : String(error)}${NEWLINE}`);
-    }
-  }
-
-  private arrange() {
-    const { element } = this;
-    const { x: width, y: height } = element.actualSize;
-    const isMeasured = width > 0 && height > 0;
-    if (!isMeasured) {
-      return;
-    }
-
+  private arrange({ width, height }: ElementSize) {
     const { wanted } = this;
     const isEffect = !isNoEffect(wanted);
     if (isEffect) {
@@ -307,7 +246,7 @@ class Controller implements ElementVisual {
     const parent = parentElementOf(element);
     const isHosted = parent !== null;
     const owner = parent ?? element;
-    const slot = slotOf(owner);
+    const slot = childSlotOf(owner);
     const isSlotMissing = slot === null;
     if (isSlotMissing) {
       throw new Error("the element or its parent already holds a Composition child visual of its own");
@@ -382,7 +321,7 @@ class Controller implements ElementVisual {
       }
     };
     this.shown = shown;
-    this.layout();
+    this.follower.arrange();
   }
 
   private async placeMask({ shown, wanted }: {
@@ -532,13 +471,9 @@ class Controller implements ElementVisual {
  * none of them wants anything of the element.
  */
 export function elementVisualOf(element: FrameworkElement) {
-  const known = controllers.get(element);
-  const hasKnown = known !== undefined;
-  if (hasKnown) {
-    return known;
-  }
-
-  const controller = new Controller(element);
-  controllers.set(element, controller);
-  return controller;
+  return controllerOf({
+    controllers,
+    element,
+    create: () => new Controller(element)
+  });
 }