Update fixtures

.api-report/mafs.api.md

@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="react" />
-
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KatexOptions } from 'katex';
 import * as React_2 from 'react';
@@ -82,6 +80,29 @@ export interface Filled {
     weight?: number;
 }
 
+// @public (undocumented)
+function Image_2({ href, x, y, width, height, anchor, preserveAspectRatio, svgImageProps, }: ImageProps): JSX_2.Element;
+export { Image_2 as Image }
+
+// @public (undocumented)
+export interface ImageProps {
+    // Warning: (ae-forgotten-export) The symbol "Anchor" needs to be exported by the entry point index.d.ts
+    anchor?: Anchor;
+    // (undocumented)
+    height: number;
+    // (undocumented)
+    href: string;
+    preserveAspectRatio?: string;
+    // (undocumented)
+    svgImageProps?: React.SVGProps<SVGImageElement>;
+    // (undocumented)
+    width: number;
+    // (undocumented)
+    x: number;
+    // (undocumented)
+    y: number;
+}
+
 // @public (undocumented)
 export type Interval = [min: number, max: number];
 

docs/components/guide-examples/display/images/ImageAnchorExample.tsx

@@ -7,39 +7,39 @@ import {
   useMovablePoint,
 } from "mafs"
 
-import mafs from "./mafs.png"
+import image from "./mafs.png"
 
 export default function VectorExample() {
   const center = useMovablePoint([2, 2])
   return (
     <Mafs viewBox={{ x: [-1, 7], y: [-1, 5] }}>
       <Coordinates.Cartesian />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="tl"
         x={center.x + 0.1}
         y={center.y - 0.1}
         width={1}
         height={1}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="tr"
         x={center.x - 0.1}
         y={center.y - 0.1}
         width={1}
         height={1}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="bl"
         x={center.x + 0.1}
         y={center.y + 0.1}
         width={1}
         height={1}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="br"
         x={center.x - 0.1}
         y={center.y + 0.1}

docs/components/guide-examples/display/images/ImageExample.tsx

@@ -2,13 +2,12 @@
 
 import {
   Coordinates,
-  Debug,
   Image,
   Mafs,
   useMovablePoint,
 } from "mafs"
 
-import mafs from "./mafs.png"
+import image from "./mafs.png"
 
 export default function ImageExample() {
   const origin = useMovablePoint([3, 3])
@@ -18,31 +17,31 @@ export default function ImageExample() {
     <Mafs viewBox={{ x: [-1, 7], y: [-1, 5] }}>
       <Coordinates.Cartesian />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="tl"
         x={origin.x + padding}
         y={origin.y - padding}
         width={2}
         height={2}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="tr"
         x={origin.x - padding}
         y={origin.y - padding}
         width={2}
         height={2}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="bl"
         x={origin.x + padding}
         y={origin.y + padding}
         width={2}
         height={2}
       />
       <Image
-        src={mafs.src}
+        href={image.src ?? image}
         anchor="br"
         x={origin.x - padding}
         y={origin.y + padding}

e2e/generated-vrt.spec.tsx

@@ -41,6 +41,8 @@ import SimpleTransform from "../docs/components/guide-examples/utility/SimpleTra
 import CartesianCoordinatesConfigExample from "../docs/components/guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
 import CartesianCoordinatesExample from "../docs/components/guide-examples/display/coordinates/CartesianCoordinatesExample"
 import PolarCoordinatesExample from "../docs/components/guide-examples/display/coordinates/PolarCoordinatesExample"
+import ImageAnchorExample from "../docs/components/guide-examples/display/images/ImageAnchorExample"
+import ImageExample from "../docs/components/guide-examples/display/images/ImageExample"
 import VectorExample from "../docs/components/guide-examples/display/vectors/VectorExample"
 import ContainViewbox from "../docs/components/guide-examples/display/viewbox/ContainViewbox"
 import StretchViewbox from "../docs/components/guide-examples/display/viewbox/StretchViewbox"
@@ -381,6 +383,24 @@ test("guide-examples/display/coordinates/PolarCoordinatesExample", async ({ moun
     </TestContextProvider>,
   ))
 
+test("guide-examples/display/images/ImageAnchorExample", async ({ mount, page }) =>
+  await visualTest(
+    mount,
+    page,
+    <TestContextProvider value={{ overrideHeight: 500 }}>
+      <ImageAnchorExample />
+    </TestContextProvider>,
+  ))
+
+test("guide-examples/display/images/ImageExample", async ({ mount, page }) =>
+  await visualTest(
+    mount,
+    page,
+    <TestContextProvider value={{ overrideHeight: 500 }}>
+      <ImageExample />
+    </TestContextProvider>,
+  ))
+
 test("guide-examples/display/vectors/VectorExample", async ({ mount, page }) =>
   await visualTest(
     mount,

src/display/Image.tsx

@@ -1,18 +1,33 @@
 import { Anchor, computeAnchor } from "../math"
 
 export interface ImageProps {
-  src: string
+  href: string
   x: number
   y: number
+  /**
+   * Indicate where, in the image (top, bottom, left, right, center), the x and
+   * y coordinate refers to.
+   */
+  anchor?: Anchor
   width: number
   height: number
-  anchor?: Anchor
+  /**
+   * Whether to preserve the aspect ratio of the image. By default, the image
+   * will be centered and scaled to fit the width and height. If you want to
+   * squish the image to be the same shape as the box, set this to "none".
+   *
+   * This is passed directly to the `preserveAspectRatio` attribute of the SVG
+   * `<image>` element.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+   */
   preserveAspectRatio?: string
+
   svgImageProps?: React.SVGProps<SVGImageElement>
 }
 
 export function Image({
-  src,
+  href,
   x,
   y,
   width,
@@ -26,37 +41,21 @@ export function Image({
   const transform = [
     "var(--mafs-view-transform)",
     "var(--mafs-user-transform)",
-    // Ensure the image is not upside down (since Mafs has the y-axis pointing,
-    // while SVG has it pointing down)
+    // Ensure the image is not upside down (since Mafs has the y-axis pointing
+    // up, while SVG has it pointing down).
     "scaleY(-1)",
   ].join(" ")
 
-  const debug = false
-
   return (
-    <>
-      {debug && (
-        <rect
-          x={anchorX}
-          y={-anchorY}
-          width={width}
-          height={height}
-          fill="none"
-          stroke="red"
-          vectorEffect={"non-scaling-stroke"}
-          style={{ transform }}
-        />
-      )}
-      <image
-        href={src}
-        x={anchorX}
-        y={-anchorY}
-        width={width}
-        height={height}
-        preserveAspectRatio={preserveAspectRatio}
-        {...svgImageProps}
-        style={{ transform }}
-      />
-    </>
+    <image
+      href={href}
+      x={anchorX}
+      y={-anchorY}
+      width={width}
+      height={height}
+      preserveAspectRatio={preserveAspectRatio}
+      {...svgImageProps}
+      style={{ transform }}
+    />
   )
 }