@weasel-js/labkit 1.7.3 → 1.8.1

package/src/loupe/TrialLoupe.browser.test.tsx

@@ -0,0 +1,342 @@
+import '@weasel-js/theme/tokens.css';
+import '../styles.less';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { useEffect, useRef, useState } from 'react';
+import { afterEach, expect, test } from 'vitest';
+import { SurfaceContext } from '../surface/SurfaceContext';
+import { useTiledSurface } from '../surface/useTiledSurface';
+import { TrialLoupe } from './TrialLoupe';
+import type { LoupeOptions } from './types';
+
+// The lens has to open where the pointer already is, however it comes up:
+// the peek key held over a still pointer, or the lens turned on under one.
+// Its position and what it draws are layout and pixels, which is why this is
+// a browser test.
+
+afterEach(cleanup);
+
+const CSS_W = 100;
+const CSS_H = 50;
+const DIAMETER = 40;
+/** Four vertical bands, each a quarter of the canvas wide. */
+const BANDS: Array<[number, number, number]> = [
+  [255, 0, 0],
+  [0, 255, 0],
+  [0, 0, 255],
+  [255, 255, 255],
+];
+
+/** A WebGL2 scene whose buffer is preserved, so the lens reads it with no
+ *  capture — the shape of astv's 3D stage. */
+function SourceScene({
+  enabled,
+  lab,
+  onColorChange,
+  shape,
+  place,
+}: {
+  enabled?: boolean;
+  /** Mount inside `.lk-root`, under the lab's own resets. */
+  lab?: boolean;
+  onColorChange?: (hex: string) => void;
+  shape?: LoupeOptions['shape'];
+  place?: LoupeOptions['place'];
+}) {
+  const ref = useRef<HTMLCanvasElement | null>(null);
+  const [gl, setGl] = useState<WebGL2RenderingContext | null>(null);
+  useEffect(() => {
+    const ctx = ref.current?.getContext('webgl2', {
+      preserveDrawingBuffer: true,
+      antialias: false,
+    });
+    if (!ctx) throw new Error('no WebGL2');
+    const w = ctx.drawingBufferWidth / BANDS.length;
+    ctx.enable(ctx.SCISSOR_TEST);
+    BANDS.forEach(([r, g, b], i) => {
+      ctx.scissor(i * w, 0, w, ctx.drawingBufferHeight);
+      ctx.clearColor(r / 255, g / 255, b / 255, 1);
+      ctx.clear(ctx.COLOR_BUFFER_BIT);
+    });
+    setGl(ctx);
+  }, []);
+  return (
+    <div className={lab ? 'lk-root' : undefined} style={{ width: CSS_W, height: CSS_H }}>
+      <TrialLoupe
+        enabled={enabled}
+        source={gl ?? undefined}
+        factor={4}
+        diameter={DIAMETER}
+        shape={shape}
+        place={place}
+        onColorChange={onColorChange}
+      >
+        <canvas
+          ref={ref}
+          width={CSS_W * 2}
+          height={CSS_H * 2}
+          style={{ display: 'block', width: CSS_W, height: CSS_H }}
+        />
+      </TrialLoupe>
+    </div>
+  );
+}
+
+/** DOM content with a `render` lens, which draws it again magnified. */
+function RenderScene({ enabled, lab }: { enabled?: boolean; lab?: boolean }) {
+  return (
+    <div className={lab ? 'lk-root' : undefined} style={{ width: CSS_W, height: CSS_H }}>
+      <TrialLoupe enabled={enabled} factor={4} diameter={DIAMETER} render={() => <div />}>
+        <div style={{ width: CSS_W, height: CSS_H }} />
+      </TrialLoupe>
+    </div>
+  );
+}
+
+const frames = (n: number): Promise<void> =>
+  new Promise((resolve) => {
+    const step = (k: number): void => {
+      if (k === 0) resolve();
+      else requestAnimationFrame(() => step(k - 1));
+    };
+    step(n);
+  });
+
+function host(container: HTMLElement): HTMLElement {
+  const h = container.querySelector<HTMLElement>('.lk-loupe-host');
+  if (!h) throw new Error('no host');
+  return h;
+}
+
+function move(container: HTMLElement, x: number, y: number): void {
+  const h = host(container);
+  const r = h.getBoundingClientRect();
+  fireEvent.pointerMove(h, { clientX: r.left + x, clientY: r.top + y });
+}
+
+function peek(down: boolean): void {
+  act(() => {
+    if (down) fireEvent.keyDown(window, { key: 'Alt' });
+    else fireEvent.keyUp(window, { key: 'Alt' });
+  });
+}
+
+/** The middle of the lens's inner box — inside its ring, where the painters
+ *  put the aimed point — in the host's CSS px, read from layout and rounded to
+ *  the nearest half pixel. */
+function lensCenter(container: HTMLElement): { x: number; y: number } | null {
+  const lens = container.querySelector<HTMLElement>('.lk-loupe');
+  if (!lens) return null;
+  const l = lens.getBoundingClientRect();
+  const h = host(container).getBoundingClientRect();
+  const half = (n: number): number => Math.round(n * 2) / 2;
+  return {
+    x: half(l.left + lens.clientLeft + lens.clientWidth / 2 - h.left),
+    y: half(l.top + lens.clientTop + lens.clientHeight / 2 - h.top),
+  };
+}
+
+/** The pixel at the lens's own center. */
+function lensMiddle(container: HTMLElement): number[] {
+  const lens = container.querySelector<HTMLCanvasElement>('.lk-loupe__canvas');
+  if (!lens) throw new Error('no lens canvas');
+  const ctx = lens.getContext('2d');
+  if (!ctx) throw new Error('no 2d');
+  return [...ctx.getImageData(lens.width / 2, lens.height / 2, 1, 1).data];
+}
+
+test('a source lens peeked over a still pointer opens under it', async () => {
+  const colors: string[] = [];
+  const { container } = render(
+    <SourceScene enabled={false} onColorChange={(c) => colors.push(c)} />,
+  );
+  await frames(2);
+  // Inside the blue band, then the peek key with no move after it.
+  move(container, 62, 25);
+  expect(lensCenter(container)).toBeNull();
+  peek(true);
+  await waitFor(() => expect(lensCenter(container)).toEqual({ x: 62, y: 25 }));
+  await waitFor(() => expect(lensMiddle(container)).toEqual([0, 0, 255, 255]));
+  expect(colors.at(-1)).toBe('#0000ff');
+  peek(false);
+  expect(lensCenter(container)).toBeNull();
+});
+
+test('a source lens turned on under a still pointer opens under it', async () => {
+  const { container, rerender } = render(<SourceScene enabled={false} />);
+  await frames(2);
+  move(container, 30, 25);
+  rerender(<SourceScene enabled />);
+  await waitFor(() => expect(lensCenter(container)).toEqual({ x: 30, y: 25 }));
+  await waitFor(() => expect(lensMiddle(container)).toEqual([0, 255, 0, 255]));
+});
+
+test('a peek before the pointer ever reaches the host shows nothing until it does', async () => {
+  const { container } = render(<SourceScene enabled={false} />);
+  await frames(2);
+  peek(true);
+  await frames(2);
+  expect(lensCenter(container)).toBeNull();
+  move(container, 88, 25);
+  await waitFor(() => expect(lensCenter(container)).toEqual({ x: 88, y: 25 }));
+  await waitFor(() => expect(lensMiddle(container)).toEqual([255, 255, 255, 255]));
+});
+
+test('a render lens peeked over a still pointer opens under it', async () => {
+  const { container } = render(<RenderScene enabled={false} />);
+  await frames(2);
+  move(container, 70, 20);
+  peek(true);
+  await waitFor(() => expect(lensCenter(container)).toEqual({ x: 70, y: 20 }));
+});
+
+// Where the magnified point lands on the page, against the pointer. The ring
+// is drawn outside the box the painters fill, so a lens positioned by its
+// outer edge puts the aim a border-width off; and under `.lk-root`, whose
+// resets make every box `border-box`, the ring also eats into the painters'
+// box. Both contexts, since they fail differently.
+for (const lab of [false, true]) {
+  const where = lab ? 'inside a lab' : 'outside a lab';
+
+  test(`a source lens's magnified point sits under the pointer, ${where}`, async () => {
+    const { container } = render(<SourceScene enabled lab={lab} />);
+    await frames(2);
+    move(container, 62, 25);
+    await waitFor(() => expect(container.querySelector('.lk-loupe__canvas')).not.toBeNull());
+    const canvas = container.querySelector<HTMLElement>('.lk-loupe__canvas');
+    const c = canvas?.getBoundingClientRect() as DOMRect;
+    const h = host(container).getBoundingClientRect();
+    // The canvas is drawn for exactly the diameter, aim in its middle.
+    expect(c.width).toBeCloseTo(DIAMETER, 1);
+    expect(c.height).toBeCloseTo(DIAMETER, 1);
+    expect(Math.abs(c.left + c.width / 2 - (h.left + 62))).toBeLessThanOrEqual(0.5);
+    expect(Math.abs(c.top + c.height / 2 - (h.top + 25))).toBeLessThanOrEqual(0.5);
+  });
+
+  test(`a render lens's magnified point sits under the pointer, ${where}`, async () => {
+    const { container } = render(<RenderScene enabled lab={lab} />);
+    await frames(2);
+    move(container, 70, 20);
+    await waitFor(() => expect(container.querySelector('.lk-loupe__stage')).not.toBeNull());
+    const lens = container.querySelector<HTMLElement>('.lk-loupe') as HTMLElement;
+    const stage = container.querySelector<HTMLElement>('.lk-loupe__stage') as HTMLElement;
+    const s = stage.getBoundingClientRect();
+    const h = host(container).getBoundingClientRect();
+    // The stage reproduces the host and zooms about the aim, so the aim sits
+    // at its own offset into the stage: under the pointer when the stage
+    // lines up with the host.
+    expect(lens.clientWidth).toBe(DIAMETER);
+    expect(lens.clientHeight).toBe(DIAMETER);
+    expect(Math.abs(s.left - h.left)).toBeLessThanOrEqual(0.5);
+    expect(Math.abs(s.top - h.top)).toBeLessThanOrEqual(0.5);
+  });
+}
+
+test('a placed square lens is drawn at its center, shows the point it names, and reports the aim', async () => {
+  const colors: string[] = [];
+  // Drawn in the host's middle, showing the middle of the blue band (50–75)
+  // at 2x: 30 page px across, so its edges reach the green and white bands.
+  const place = () => ({
+    center: { x: 50, y: 25 },
+    shows: { x: 62, y: 25 },
+    width: 60,
+    height: 20,
+    factor: 2,
+  });
+  const { container } = render(
+    <SourceScene enabled shape="square" place={place} onColorChange={(c) => colors.push(c)} />,
+  );
+  await frames(2);
+  move(container, 30, 25);
+  await waitFor(() => expect(container.querySelector('.lk-loupe__canvas')).not.toBeNull());
+  const canvas = container.querySelector<HTMLCanvasElement>(
+    '.lk-loupe__canvas',
+  ) as HTMLCanvasElement;
+  const c = canvas.getBoundingClientRect();
+  const h = host(container).getBoundingClientRect();
+  expect(c.width).toBeCloseTo(60, 1);
+  expect(c.height).toBeCloseTo(20, 1);
+  expect(Math.abs(c.left + c.width / 2 - (h.left + 50))).toBeLessThanOrEqual(0.5);
+  expect(Math.abs(c.top + c.height / 2 - (h.top + 25))).toBeLessThanOrEqual(0.5);
+
+  const lens = container.querySelector<HTMLElement>('.lk-loupe') as HTMLElement;
+  expect(getComputedStyle(lens).borderTopLeftRadius).not.toBe('50%');
+
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  const at = (x: number): number[] => [...ctx.getImageData(x, canvas.height / 2, 1, 1).data];
+  await waitFor(() => expect(lensMiddle(container)).toEqual([0, 0, 255, 255]));
+  expect(at(2)).toEqual([0, 255, 0, 255]);
+  expect(at(canvas.width - 3)).toEqual([255, 255, 255, 255]);
+  // The pointer is over the green band, and that is the color reported.
+  await waitFor(() => expect(colors.at(-1)).toBe('#00ff00'));
+});
+
+test('a hollow lens draws only its outline, and tells the host where it is', async () => {
+  const lenses: unknown[] = [];
+  const { container } = render(
+    <div style={{ width: CSS_W, height: CSS_H }}>
+      <TrialLoupe
+        enabled
+        hollow
+        shape="square"
+        factor={4}
+        diameter={DIAMETER}
+        onLens={(l) => lenses.push(l)}
+      >
+        <div style={{ width: CSS_W, height: CSS_H }} />
+      </TrialLoupe>
+    </div>,
+  );
+  await frames(2);
+  move(container, 30, 25);
+  await waitFor(() => expect(lensCenter(container)).toEqual({ x: 30, y: 25 }));
+  const lens = container.querySelector<HTMLElement>('.lk-loupe') as HTMLElement;
+  expect(lens.children).toHaveLength(0);
+  expect(getComputedStyle(lens).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+  expect(getComputedStyle(lens).borderTopStyle).not.toBe('none');
+  expect(lenses.at(-1)).toEqual({
+    center: { x: 30, y: 25 },
+    shows: { x: 30, y: 25 },
+    width: DIAMETER,
+    height: DIAMETER,
+    factor: 4,
+    shape: 'square',
+  });
+});
+
+/** Four tiles side by side, each a quarter of the host wide, under a hollow lens. */
+function TiledHollow({ dirtied }: { dirtied: string[][] }) {
+  const surface = useTiledSurface({ onFrame: (f) => dirtied.push([...f.dirty].sort()) });
+  return (
+    <SurfaceContext.Provider value={surface}>
+      <TrialLoupe enabled hollow diameter={20}>
+        <div ref={surface.containerRef} style={{ display: 'flex', width: CSS_W, height: CSS_H }}>
+          {['t0', 't1', 't2', 't3'].map((id) => (
+            <div key={id} ref={(el) => surface.registerTile(id, el)} style={{ width: CSS_W / 4 }} />
+          ))}
+        </div>
+      </TrialLoupe>
+    </SurfaceContext.Provider>
+  );
+}
+
+test('a hollow lens on a surface dirties the tiles it leaves and lands on, and no others', async () => {
+  const dirtied: string[][] = [];
+  const { container } = render(<TiledHollow dirtied={dirtied} />);
+  await frames(3);
+  dirtied.length = 0;
+
+  // A 20px lens at x 15 spans 5..25: inside t0 alone.
+  move(container, 15, 25);
+  await waitFor(() => expect(dirtied).toEqual([['t0']]));
+  dirtied.length = 0;
+
+  // At x 40 it spans 30..50: t1, and t0 for the box it left.
+  move(container, 40, 25);
+  await waitFor(() => expect(dirtied).toEqual([['t0', 't1']]));
+  dirtied.length = 0;
+
+  act(() => {
+    fireEvent.pointerLeave(host(container));
+  });
+  await waitFor(() => expect(dirtied).toEqual([['t1']]));
+});

package/src/loupe/TrialLoupe.tsx

@@ -1,15 +1,28 @@
-import { type ReactNode, type RefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { useLatest } from '@weasel-js/core';
+import {
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { CameraContext, CameraScope } from '../canvas/CameraInput';
 import { CanvasStackContext } from '../canvas/CanvasStackContext';
 import { fromCameraView } from '../canvas/cameraView';
 import type { ViewTransform } from '../instrument/types';
+import type { Box } from '../surface/rect';
+import { useSurfaceOptional } from '../surface/useSurfaceTile';
 import { LoupeSwitchContext } from '../trial/loupeSwitch';
 import { CanvasLoupe } from './CanvasLoupe';
 import { sampleStack } from './canvasLens';
 import { DomLoupe } from './DomLoupe';
 import { LoupeBubble } from './LoupeBubble';
 import { LoupeGestures } from './LoupeGestures';
-import { type LoupeOptions, resolveLoupe } from './types';
+import { SourceLoupe } from './SourceLoupe';
+import { resolveLoupeSource, sampleSource, sourceBoxIn } from './sourceLens';
+import { type LoupeLens, type LoupeOptions, resolveLoupe } from './types';
 import { useHostSize } from './useHostSize';
 import { useLoupe } from './useLoupe';
 
@@ -38,7 +51,7 @@ const IDENTITY: ViewTransform = { zoom: 1, pan: { x: 0, y: 0 } };
  *
  * With no `render` inside a `<CanvasStack>`, it re-draws the stack's own
  * layers through a zoomed camera. With `render`, it asks for the content again
- * at a magnified camera.
+ * at a magnified camera. With `source`, it enlarges the pixels of any canvas.
  */
 export function TrialLoupe({
   enabled,
@@ -46,33 +59,23 @@ export function TrialLoupe({
   hostRef,
   children,
   render,
+  source,
   factor,
   minFactor,
   maxFactor,
   mode,
   diameter,
+  shape,
+  place,
+  hollow,
+  onLens,
   peekKey,
   onColorChange,
 }: TrialLoupeProps) {
-  const options = useMemo(
-    () =>
-      resolveLoupe({
-        render,
-        factor,
-        minFactor,
-        maxFactor,
-        mode,
-        diameter,
-        peekKey,
-        onColorChange,
-      }),
-    [render, factor, minFactor, maxFactor, mode, diameter, peekKey, onColorChange],
-  );
-
   const stack = useContext(CanvasStackContext);
   const camera = useContext(CameraContext);
   const loupeSwitch = useContext(LoupeSwitchContext);
-  const surface = options.render ? undefined : stack?.surface;
+  const surface = render || source || hollow ? undefined : stack?.surface;
 
   const ownHost = useRef<HTMLDivElement | null>(null);
   const cameraHost = useMemo<RefObject<HTMLElement | null> | null>(
@@ -88,25 +91,110 @@ export function TrialLoupe({
   );
   const host = surface?.element ?? hostRef ?? cameraHost ?? ownHost;
   const wraps = host === ownHost;
+  const hostLatest = useLatest(host);
+
+  // A hollow lens is drawn by the host into the tiles under it, so on a shared surface each
+  // move dirties the tiles it left and the ones it landed on.
+  const tiles = useSurfaceOptional();
+  const onLensLatest = useLatest(onLens);
+  const was = useRef<Box | null>(null);
+  const damage = hollow ? tiles : null;
+  const reportLens = useCallback(
+    (lens: LoupeLens | null) => {
+      onLensLatest.current?.(lens);
+      if (!damage) return;
+      const at = hostLatest.current.current?.getBoundingClientRect();
+      const now =
+        lens && at
+          ? {
+              left: at.left + lens.center.x - lens.width / 2,
+              top: at.top + lens.center.y - lens.height / 2,
+              width: lens.width,
+              height: lens.height,
+            }
+          : null;
+      if (was.current) damage.invalidateBox(was.current);
+      if (now) damage.invalidateBox(now);
+      was.current = now;
+    },
+    [damage, onLensLatest, hostLatest],
+  );
+  const options = useMemo(
+    () =>
+      resolveLoupe({
+        render,
+        source,
+        factor,
+        minFactor,
+        maxFactor,
+        mode,
+        diameter,
+        shape,
+        place,
+        hollow,
+        onLens: onLens || damage ? reportLens : undefined,
+        peekKey,
+        onColorChange,
+      }),
+    [
+      render,
+      source,
+      factor,
+      minFactor,
+      maxFactor,
+      mode,
+      diameter,
+      shape,
+      place,
+      hollow,
+      onLens,
+      damage,
+      reportLens,
+      peekKey,
+      onColorChange,
+    ],
+  );
 
   // A lens told whether it is on has no use for the trial's toggle.
   const mount = enabled === undefined ? loupeSwitch?.mount : undefined;
   useEffect(() => mount?.(), [mount]);
 
   const sample = useMemo(() => {
+    if (options.source) {
+      const input = options.source;
+      return (p: { x: number; y: number }): string | null => {
+        const src = resolveLoupeSource(input);
+        return src ? sampleSource(src, p, sourceBoxIn(src, host.current)) : null;
+      };
+    }
     if (!surface) return undefined;
     return (p: { x: number; y: number }): string | null => {
       const canvases = surface.canvases.current;
       return canvases ? sampleStack(surface.layers, canvases, p, surface.size.dpr) : null;
     };
-  }, [surface]);
+  }, [surface, options.source, host]);
+
+  // Keyed on the resolved source, not the prop: an inline getter is re-made
+  // every render, and every aim renders.
+  const resolved = resolveLoupeSource(options.source);
+  const subscribeResample = useMemo(
+    () => (resolved ? (fn: () => void) => resolved.subscribeFrame(fn) : undefined),
+    [resolved],
+  );
 
   const loupe = useLoupe({
     options,
     hostRef: host,
     enabled: enabled ?? loupeSwitch?.on ?? false,
     sample,
+    subscribeResample,
   });
+  // A captured source copies frames only while someone is reading them. Taken
+  // after `useLoupe` has subscribed, so the frame a first reader's redraw
+  // captures reaches the color too.
+  const reading = loupe.visible ? resolved : null;
+  useEffect(() => reading?.retain(), [reading]);
+
   const measured = useHostSize(host);
   const size = surface?.size ?? measured;
 
@@ -120,14 +208,16 @@ export function TrialLoupe({
     </CameraScope>
   );
 
+  const { center, shows, width, height, factor: shownFactor, shape: lensShape } = loupe.lens;
+  const box = { width, height };
   const lens = loupe.visible ? (
-    <LoupeBubble aim={loupe.aim} diameter={options.diameter}>
-      {options.render ? (
+    <LoupeBubble aim={center} diameter={box} shape={lensShape} hollow={options.hollow}>
+      {options.hollow ? null : options.render ? (
         <DomLoupe
-          aim={loupe.aim}
-          factor={loupe.factor}
+          aim={shows}
+          factor={shownFactor}
           mode={loupe.mode}
-          diameter={options.diameter}
+          diameter={box}
           size={size}
           view={
             view ??
@@ -137,12 +227,20 @@ export function TrialLoupe({
           frame={stack?.frame ?? camera?.frame}
           render={options.render}
         />
+      ) : options.source ? (
+        <SourceLoupe
+          aim={shows}
+          factor={shownFactor}
+          diameter={box}
+          source={options.source}
+          hostRef={host}
+        />
       ) : surface && stack ? (
         <CanvasLoupe
-          aim={loupe.aim}
-          factor={loupe.factor}
+          aim={shows}
+          factor={shownFactor}
           mode={loupe.mode}
-          diameter={options.diameter}
+          diameter={box}
           surface={surface}
           view={stack.view}
           frame={stack.frame}

package/src/loupe/canvasLens.ts

@@ -1,11 +1,11 @@
-import type { LoupePoint } from '@weasel-js/loupe';
+import { type LoupePoint, type LoupeSize, loupeExtent } from '@weasel-js/loupe';
 import { centerOn } from '../canvas/camera';
 import { screenToWorld } from '../canvas/canvasCoords';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
 import { DEFAULT_FRAME, resolveFrame, type WorldFrame, type WorldSpec } from '../canvas/worldSpec';
 import type { ViewTransform } from '../instrument/types';
 
-/** The camera a round lens of `diameter` shows a magnified region through, and
+/** The camera a lens of `size` shows a magnified region through, and
  *  the coordinate system it is read in — the instrument's own `WorldSpec`,
  *  resolved against the lens rather than the stack. */
 export interface LensCamera {
@@ -24,13 +24,13 @@ export function lensCamera(
   outer: ViewTransform,
   outerFrame: WorldFrame,
   factor: number,
-  diameter: number,
+  size: LoupeSize,
   worldSpec?: WorldSpec,
 ): LensCamera {
-  const size = { width: diameter, height: diameter };
-  const frame = resolveFrame(worldSpec, size);
+  const extent = loupeExtent(size);
+  const frame = resolveFrame(worldSpec, extent);
   const world = screenToWorld(aim, outer, outerFrame);
-  return { view: centerOn(world, outer.zoom * factor, size, frame), frame };
+  return { view: centerOn(world, outer.zoom * factor, extent, frame), frame };
 }
 
 /** A rectangle in a backing store's own device pixels. */
@@ -42,21 +42,23 @@ export interface SourceRect {
 }
 
 /**
- * The region a pixel-mode lens copies out of a presented canvas: the `diameter
- * / factor` CSS px around `aim`, in that canvas' backing-store pixels.
+ * The region a pixel-mode lens copies out of a presented canvas: `size /
+ * factor` CSS px around `aim`, in that canvas' backing-store pixels.
  */
 export function lensSourceRect(
   aim: LoupePoint,
   factor: number,
-  diameter: number,
+  size: LoupeSize,
   dpr: number,
 ): SourceRect {
-  const span = diameter / factor;
+  const { width, height } = loupeExtent(size);
+  const spanX = width / factor;
+  const spanY = height / factor;
   return {
-    sx: (aim.x - span / 2) * dpr,
-    sy: (aim.y - span / 2) * dpr,
-    sw: span * dpr,
-    sh: span * dpr,
+    sx: (aim.x - spanX / 2) * dpr,
+    sy: (aim.y - spanY / 2) * dpr,
+    sw: spanX * dpr,
+    sh: spanY * dpr,
   };
 }
 
@@ -95,7 +97,7 @@ export function drawCanvasLens(
   opts: {
     aim: LoupePoint;
     factor: number;
-    diameter: number;
+    diameter: LoupeSize;
     dpr: number;
     mode: 'vector' | 'pixel';
     outer: ViewTransform;
@@ -106,9 +108,10 @@ export function drawCanvasLens(
   },
 ): void {
   const { aim, factor, diameter, dpr, mode, outer, layers, canvases } = opts;
+  const { width, height } = loupeExtent(diameter);
   ctx.save();
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-  ctx.clearRect(0, 0, diameter, diameter);
+  ctx.clearRect(0, 0, width, height);
 
   if (mode === 'pixel') {
     const { sx, sy, sw, sh } = lensSourceRect(aim, factor, diameter, dpr);
@@ -117,7 +120,7 @@ export function drawCanvasLens(
       if (!layer.visible) continue;
       const canvas = canvases.get(layer.id);
       if (!canvas || canvas.width === 0 || canvas.height === 0) continue;
-      ctx.drawImage(canvas, sx, sy, sw, sh, 0, 0, diameter, diameter);
+      ctx.drawImage(canvas, sx, sy, sw, sh, 0, 0, width, height);
     }
     ctx.restore();
     return;