winui-svelte 0.0.6 → 0.0.8

package/src/css/runtime/native.ts

@@ -69,6 +69,7 @@ export interface CssWinui {
 // the runtime targets the element's own brush by its Color, whatever the element's type.
 const BRUSH_COLOR_PATH = /^(\w)(\w*)\.\(SolidColorBrush\.Color\)$/u;
 const BRUSH_COLOR = "Color";
+const XAML_ELEMENT_NAME = /^<\w+/u;
 
 function subscribeToEvent({ control, event, handler }: {
   control: object;
@@ -87,6 +88,33 @@ function subscribeToEvent({ control, event, handler }: {
   return typeof unsubscribe === "function" ? () => unsubscribe() : null;
 }
 
+// Runs `run` now on a loaded control, else when it loads; returns what stops waiting.
+function whenLoaded({ control, run }: {
+  control: object;
+  run: () => void;
+}) {
+  const isLoaded = readMember({
+    target: control,
+    key: "isLoaded"
+  }) === true;
+  if (isLoaded) {
+    run();
+    return () => undefined;
+  }
+
+  const unsubscribe = subscribeToEvent({
+    control,
+    event: "Loaded",
+    handler: run
+  });
+  return () => unsubscribe?.();
+}
+
+// A WinUI property's name as its projected member (`OpacityTransition` is `opacityTransition`).
+function memberOf(property: string) {
+  return `${property.charAt(0).toLowerCase()}${property.slice(1)}`;
+}
+
 function isRecord(value: NativeValue): value is Record<string, NativeValue> {
   return (typeof value === "object" || typeof value === "function") && value !== null;
 }
@@ -267,8 +295,20 @@ export function createCssNative(winui: CssWinui) {
         definitions.append(definition);
       }
     },
+    setTransition({ control, property, xaml }) {
+      const key = memberOf(property);
+      const transition = winui.XamlReader.load(xaml.replace(XAML_ELEMENT_NAME, `$& ${XAML_NAMESPACES}`));
+      const unsubscribe = whenLoaded({
+        control,
+        run: () => Object.assign(control, { [key]: transition })
+      });
+      return () => {
+        unsubscribe();
+        Object.assign(control, { [key]: null });
+      };
+    },
     setComposition({ control, property, value }) {
-      const key = `${property.charAt(0).toLowerCase()}${property.slice(1)}`;
+      const key = memberOf(property);
       const [horizontal = 0, vertical = 0, depth = 0] = value.split(",").map(Number);
       const isRotation = property === "Rotation";
       const resting = property === "Scale" ? 1 : 0;
@@ -282,31 +322,16 @@ export function createCssNative(winui: CssWinui) {
         isPlaced = true;
       }
 
-      const isLoaded = readMember({
-        target: control,
-        key: "isLoaded"
-      }) === true;
-      if (isLoaded) {
-        place({
+      const unsubscribe = whenLoaded({
+        control,
+        run: () => place({
           x: horizontal,
           y: vertical,
           z: depth
-        });
-      }
-
-      const unsubscribe = isLoaded ? null : subscribeToEvent({
-        control,
-        event: "Loaded",
-        handler() {
-          place({
-            x: horizontal,
-            y: vertical,
-            z: depth
-          });
-        }
+        })
       });
       return () => {
-        unsubscribe?.();
+        unsubscribe();
 
         if (isPlaced) {
           place({

package/src/css/translate/property-kit.ts

@@ -61,6 +61,15 @@ export interface WriteSeam {
     property: string;
     value: string;
   }): () => void;
+  /**
+   * Gives the control an implicit transition of its own (`OpacityTransition`),
+   * made from its XAML, once the control has loaded; returns what takes it off.
+   */
+  setTransition(input: {
+    control: object;
+    property: string;
+    xaml: string;
+  }): () => void;
   /** Assigns properties of the control (`{ centerPoint: ... }`). */
   assign(control: object, values: Readonly<Record<string, unknown>>): void;
   /** Calls `handler` on a WinUI event (PointerEntered...); null if the control has no such event. */

package/src/css/translate/transition-properties.ts

@@ -511,25 +511,58 @@ function entryOutputs({ input, reader, entry }: {
 
   for (const [target, type] of targets) {
     outputs.push({
-      kind: "content",
-      property: target,
-      xaml: `<${type} Duration="${duration(milliseconds)}"/>`
+      kind: "write",
+      target,
+      value: `<${type} Duration="${duration(milliseconds)}"/>`
     });
   }
 
   return outputs;
 }
 
+// One transition per WinUI property: a later entry (`all, opacity 1s`) wins.
+function lastPerTarget(outputs: Output[]) {
+  return outputs.filter((output, iOutput) => {
+    const isOverridden = output.kind === "write" && outputs
+      .slice(iOutput + 1)
+      .some(later => later.kind === "write" && later.target === output.target);
+    return !isOverridden;
+  });
+}
+
+/**
+ * An implicit transition is written to each element, not set by its Style: a
+ * Setter's value is one object that every element of the Style shares, and
+ * WinUI crashes when that shared transition animates (a ListView row restyled
+ * before it loads).
+ */
+function setImplicitTransition(property: string) {
+  return (context: WriteContext) => context.native.setTransition({
+    control: context.control,
+    property,
+    xaml: context.value
+  });
+}
+
+const implicitHandlers = Object.fromEntries(
+  [...new Set([...TRANSITION_TARGETS.values()].flat().map(([target]) => target))].map(target => [
+    target,
+    setImplicitTransition(target)
+  ])
+);
+
 /** `transition`: WinUI's implicit transition for each animatable property named, and a border color's Storyboard. */
 function transition(input: GroupInput) {
   const reader = input.reading("transition");
-  return splitCommas(reader.declaration.value)
-    .filter(entry => (splitWords(entry)[0] ?? "").toLowerCase() !== "none")
-    .flatMap(entry => entryOutputs({
-      input,
-      reader,
-      entry
-    }));
+  return lastPerTarget(
+    splitCommas(reader.declaration.value)
+      .filter(entry => (splitWords(entry)[0] ?? "").toLowerCase() !== "none")
+      .flatMap(entry => entryOutputs({
+        input,
+        reader,
+        entry
+      }))
+  );
 }
 
 const storyboardHandlers = Object.fromEntries(
@@ -558,6 +591,7 @@ export function transitionProperty() {
     members: ["transition"],
     lower: transition,
     writes: {
+      ...implicitHandlers,
       ...storyboardHandlers,
       ...discreteHandlers
     }

package/src/data-transfer/data-transfer.ts

@@ -1,4 +1,4 @@
-import type { DropEffect, EffectAllowed } from "./drag-effects.ts";
+import type { DropEffectName, EffectAllowedName } from "./drag-effects.ts";
 import { EffectAllowed as Allowed, DropEffect as Effects } from "./drag-effects.ts";
 import type { NativeFile } from "./native-file.ts";
 
@@ -114,9 +114,9 @@ export class DataTransferItemList {
  */
 export class DataTransfer {
   /** What the source lets a target do; a source sets it in `ondragstart`. */
-  effectAllowed: EffectAllowed = Allowed.uninitialized;
+  effectAllowed: EffectAllowedName = Allowed.uninitialized;
   /** What the target will do; a target sets it in `ondragenter` or `ondragover`. */
-  dropEffect: DropEffect = Effects.none;
+  dropEffect: DropEffectName = Effects.none;
   /** A picture to drag (a path or an in-memory file): WinUI shows its own preview of the data. */
   bitmap: NativeFile | undefined;
   private readonly strings = new Map<string, string>();

package/src/data-transfer/drag-effects.ts

@@ -27,6 +27,18 @@ export const EffectAllowed = {
 /** One of `EffectAllowed`'s values. */
 export type EffectAllowed = (typeof EffectAllowed)[keyof typeof EffectAllowed];
 
+/**
+ * A drop effect as a property takes it: one of `DropEffect`'s values, which an
+ * editor suggests, or any other string, which counts as `none`.
+ */
+export type DropEffectName = DropEffect | (string & Record<never, never>);
+
+/**
+ * An `effectAllowed` as a property takes it: one of `EffectAllowed`'s values,
+ * which an editor suggests, or any other string, which counts as `uninitialized`.
+ */
+export type EffectAllowedName = EffectAllowed | (string & Record<never, never>);
+
 const OPERATIONS = {
   [DropEffect.none]: DataPackageOperation.None,
   [DropEffect.copy]: DataPackageOperation.Copy,
@@ -57,8 +69,16 @@ const PREFERENCE = [DropEffect.copy, DropEffect.move, DropEffect.link] as const;
  * @param effect - The drop effect.
  * @returns The `DataPackageOperation` value.
  */
-export function operationOf(effect: DropEffect) {
-  return OPERATIONS[effect];
+export function operationOf(effect: DropEffectName) {
+  return isDropEffect(effect) ? OPERATIONS[effect] : DataPackageOperation.None;
+}
+
+function isDropEffect(value: string): value is DropEffect {
+  return Object.values<string>(DropEffect).includes(value);
+}
+
+function isEffectAllowed(value: string): value is EffectAllowed {
+  return Object.values<string>(EffectAllowed).includes(value);
 }
 
 /**
@@ -67,8 +87,8 @@ export function operationOf(effect: DropEffect) {
  * @param effectAllowed - What the source allows.
  * @returns The `DataPackageOperation` flags.
  */
-export function allowedOperationsOf(effectAllowed: EffectAllowed) {
-  return ALLOWED[effectAllowed];
+export function allowedOperationsOf(effectAllowed: EffectAllowedName) {
+  return isEffectAllowed(effectAllowed) ? ALLOWED[effectAllowed] : ALL_OPERATIONS;
 }
 
 /**
@@ -81,6 +101,30 @@ export function effectOf(operation: number) {
   return PREFERENCE.find(effect => (operation & OPERATIONS[effect]) !== 0) ?? DropEffect.none;
 }
 
+/**
+ * The operation a drop gets: the effect the target chose, or, when the source
+ * does not allow it (a folder from Explorer's address bar allows fewer than a
+ * file does), the preferred one the source does allow. A target that chose
+ * `none` refuses the drag whatever the source allows.
+ *
+ * @param options - The effect the target chose and the `DataPackageOperation` flags the source allows.
+ * @returns The `DataPackageOperation` flags to answer with.
+ */
+export function grantedOperationOf({ effect, allowed }: {
+  effect: DropEffectName;
+  allowed: number;
+}) {
+  const requested = operationOf(effect);
+  const isRefusing = requested === DataPackageOperation.None;
+  const isAllowed = (requested & allowed) !== 0;
+  const isGranted = isRefusing || isAllowed;
+  if (isGranted) {
+    return requested;
+  }
+
+  return operationOf(effectOf(allowed));
+}
+
 /**
  * The `effectAllowed` a set of WinUI operation flags is.
  *

package/src/data-transfer/drag-helper.ts

@@ -0,0 +1,216 @@
+import { createInstanceOf, DATA_OBJECT_IID } from "./native.ts";
+import {
+  DynCom,
+  DynComMethodSig,
+  DynComUnsafe,
+  DynWinRtValue,
+  WinGuid
+} from "@microsoft/dynwinrt/com/unsafe";
+import type { DynWinRTValue } from "@microsoft/dynwinrt/com/unsafe";
+import type { DynComRawMemory } from "@microsoft/dynwinrt/com/unsafe/raw";
+import { DWORD_BYTES, NO_ADDRESS, withMemory } from "#src/win32-calls.js";
+
+// The shell draws the picture a drag carries (the folder's thumbnail, the
+// "Copy" or "Link" label) only over a window whose drop target tells the
+// shell's drag helper about the drag; Explorer and every classic app do. This
+// is that call, one helper per window.
+
+const DRAG_DROP_HELPER_CLASS = "4657278a-411b-11d2-839a-00c04fd918d0";
+const DROP_TARGET_HELPER_IID = "4657278b-411b-11d2-839a-00c04fd918d0";
+const DRAG_ENTER_SLOT = 3;
+const DRAG_LEAVE_SLOT = 4;
+const DRAG_OVER_SLOT = 5;
+const DROP_SLOT = 6;
+const POINT_BYTES = 8;
+
+let cachedInterface: ReturnType<typeof makeInterface> | undefined;
+
+function makeInterface() {
+  const u32 = DynCom.u32Type();
+  const u64 = DynCom.u64Type();
+  const data = DynCom.interfaceType(WinGuid.parse(DATA_OBJECT_IID));
+  return DynCom.registerIUnknownInterface("IDropTargetHelper", WinGuid.parse(DROP_TARGET_HELPER_IID))
+    .addMethod("DragEnter", new DynComMethodSig().addIn(u64).addNullableIn(data).addIn(u64).addIn(u32))
+    .addMethod("DragLeave", new DynComMethodSig())
+    .addMethod("DragOver", new DynComMethodSig().addIn(u64).addIn(u32))
+    .addMethod("Drop", new DynComMethodSig().addNullableIn(data).addIn(u64).addIn(u32));
+}
+
+function interfaceOf() {
+  cachedInterface ??= makeInterface();
+  return cachedInterface;
+}
+
+interface Point {
+  readonly x: number;
+  readonly y: number;
+}
+
+// The helper reads the point while the call runs, so the memory only lives that long.
+function withPoint({ point, use }: {
+  point: Point;
+  use: (address: bigint) => boolean;
+}) {
+  return withMemory({
+    size: POINT_BYTES,
+    alignment: DWORD_BYTES,
+    use(memory: DynComRawMemory) {
+      memory.writeI32(0, point.x);
+      memory.writeI32(DWORD_BYTES, point.y);
+      return use(memory.pointer().address);
+    }
+  });
+}
+
+/** What tells the shell about a drag over a window, so that it draws the drag's picture there. */
+export interface DragHelper {
+  enter(call: {
+    readonly data: DynWinRTValue;
+    readonly point: Point;
+    readonly effect: number;
+  }): void;
+  over(call: {
+    readonly point: Point;
+    readonly effect: number;
+  }): void;
+  leave(): void;
+  drop(call: {
+    readonly data: DynWinRTValue;
+    readonly point: Point;
+    readonly effect: number;
+  }): void;
+  release(): void;
+}
+
+/**
+ * Makes the shell's drag helper for a window.
+ *
+ * @param hwnd - The window the drop target is registered on.
+ * @returns The helper; null when the shell could not make it (the drag then works without a picture).
+ */
+export function createDragHelper(hwnd: bigint) {
+  const address = createInstanceOf({
+    classId: DRAG_DROP_HELPER_CLASS,
+    interfaceId: DROP_TARGET_HELPER_IID
+  });
+  const isMissing = address === NO_ADDRESS;
+  if (isMissing) {
+    return null;
+  }
+
+  const helper = DynComUnsafe.adoptOwnedComPointer(address, WinGuid.parse(DROP_TARGET_HELPER_IID));
+  const calls = interfaceOf();
+
+  // A drag whose source gave no picture makes the helper answer with an error (DV_E_FORMATETC):
+  // the picture is only decoration, so the drag goes on without it.
+  function call({ slot, values }: {
+    slot: number;
+    values: DynWinRTValue[];
+  }) {
+    try {
+      calls.method(slot).invokeAll(helper, values);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // The helper hears of a drag only after it accepted the entry: told of a drag it refused, it
+  // keeps the window from receiving the next one when the cursor moves on to another window.
+  // A drag that enters where nothing takes it (the window's border) is not told either, and is
+  // told once the cursor moves over something that does.
+  let isAccepted = false;
+  let waiting: DynWinRTValue | null = null;
+
+  function begin({ data, point, effect }: {
+    data: DynWinRTValue;
+    point: Point;
+    effect: number;
+  }) {
+    isAccepted = withPoint({
+      point,
+      use: pointAddress => call({
+        slot: DRAG_ENTER_SLOT,
+        values: [
+          DynWinRtValue.u64(hwnd),
+          data,
+          DynWinRtValue.u64(pointAddress),
+          DynWinRtValue.u32(effect)
+        ]
+      })
+    });
+  }
+
+  return {
+    enter({ data, point, effect }) {
+      waiting = data;
+      const isRefused = effect === 0;
+      if (isRefused) {
+        isAccepted = false;
+        return;
+      }
+
+      begin({
+        data,
+        point,
+        effect
+      });
+    },
+    over({ point, effect }) {
+      const pending = waiting;
+      const canBegin = !isAccepted && pending !== null && effect !== 0;
+      if (canBegin) {
+        begin({
+          data: pending,
+          point,
+          effect
+        });
+        return;
+      }
+
+      if (!isAccepted) {
+        return;
+      }
+
+      withPoint({
+        point,
+        use: pointAddress => call({
+          slot: DRAG_OVER_SLOT,
+          values: [DynWinRtValue.u64(pointAddress), DynWinRtValue.u32(effect)]
+        })
+      });
+    },
+    leave() {
+      waiting = null;
+
+      if (!isAccepted) {
+        return;
+      }
+
+      isAccepted = false;
+      call({
+        slot: DRAG_LEAVE_SLOT,
+        values: []
+      });
+    },
+    drop({ data, point, effect }) {
+      waiting = null;
+
+      if (!isAccepted) {
+        return;
+      }
+
+      isAccepted = false;
+      withPoint({
+        point,
+        use: pointAddress => call({
+          slot: DROP_SLOT,
+          values: [data, DynWinRtValue.u64(pointAddress), DynWinRtValue.u32(effect)]
+        })
+      });
+    },
+    release() {
+      helper.release();
+    }
+  } satisfies DragHelper;
+}