@weasel-js/labkit 1.6.0 → 1.7.0

package/src/canvas/CameraInput.test.tsx

@@ -0,0 +1,136 @@
+/**
+ * A labkit camera on weasel's dispatcher: drag pans by the screen delta, the
+ * zoom range holds with the opening zoom kept reachable, and the pointer is
+ * published in the instrument's world.
+ */
+
+import { act, render } from '@testing-library/react';
+import { createPointerStore, PointerContextProvider } from '@weasel-js/core';
+import { useState } from 'react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import type { ViewTransform } from '../instrument/types';
+import { CanvasStack } from './CanvasStack';
+import { Stage } from './Stage';
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+  const proto = HTMLElement.prototype as unknown as Record<string, unknown>;
+  proto.setPointerCapture = vi.fn();
+  proto.releasePointerCapture = vi.fn();
+  proto.hasPointerCapture = vi.fn(() => true);
+});
+
+function lastOf<T>(list: readonly T[]): T {
+  const item = list[list.length - 1];
+  if (item === undefined) throw new Error('nothing recorded');
+  return item;
+}
+
+function pointer(el: Element, type: string, x: number, y: number, buttons = 1) {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: 1,
+      clientX: x,
+      clientY: y,
+      button: 0,
+      buttons,
+    }),
+  );
+}
+
+function mountStage(initial: ViewTransform, opts: { minZoom?: number; maxZoom?: number } = {}) {
+  const seen: ViewTransform[] = [];
+  function Host() {
+    const [view, setView] = useState(initial);
+    return (
+      <Stage
+        size={{ width: 100, height: 100 }}
+        view={view}
+        onViewChange={(v) => {
+          seen.push(v);
+          setView(v);
+        }}
+        {...opts}
+      >
+        <div />
+      </Stage>
+    );
+  }
+  const { container } = render(<Host />);
+  const host = container.querySelector('.lk-stage') as HTMLElement;
+  return { host, seen };
+}
+
+describe('camera input', () => {
+  it('pans by the screen delta of a drag', () => {
+    const { host, seen } = mountStage({ zoom: 2, pan: { x: 10, y: 20 } });
+    act(() => {
+      pointer(host, 'pointerdown', 50, 50);
+      pointer(host, 'pointermove', 60, 55);
+      pointer(host, 'pointermove', 80, 70);
+      pointer(host, 'pointerup', 80, 70, 0);
+    });
+    const last = lastOf(seen);
+    expect(last.zoom).toBeCloseTo(2);
+    expect(last.pan.x).toBeCloseTo(40);
+    expect(last.pan.y).toBeCloseTo(40);
+  });
+
+  it('stops the zoom at the bound, anchored on the pointer', () => {
+    const { host, seen } = mountStage({ zoom: 1, pan: { x: 0, y: 0 } }, { maxZoom: 1.2 });
+    act(() => {
+      host.dispatchEvent(
+        new WheelEvent('wheel', {
+          bubbles: true,
+          cancelable: true,
+          deltaY: -2000,
+          clientX: 40,
+          clientY: 30,
+        }),
+      );
+    });
+    const last = lastOf(seen);
+    expect(last.zoom).toBeCloseTo(1.2);
+    // The world point under (40, 30) stayed there.
+    expect((40 - last.pan.x) / last.zoom).toBeCloseTo(40);
+    expect((30 - last.pan.y) / last.zoom).toBeCloseTo(30);
+  });
+
+  it('keeps the opening zoom reachable past a narrower range', () => {
+    const { host, seen } = mountStage({ zoom: 4, pan: { x: 0, y: 0 } }, { maxZoom: 2 });
+    act(() => {
+      host.dispatchEvent(
+        new WheelEvent('wheel', {
+          bubbles: true,
+          cancelable: true,
+          deltaY: 100,
+          clientX: 0,
+          clientY: 0,
+        }),
+      );
+    });
+    // Zooming out from 4 lands between 2 and 4, not snapped to 2.
+    expect(lastOf(seen).zoom).toBeGreaterThan(2);
+  });
+
+  it("publishes the pointer in the instrument's world as the stage", () => {
+    const store = createPointerStore();
+    const { container } = render(
+      <PointerContextProvider store={store}>
+        <CanvasStack
+          layers={[]}
+          view={{ zoom: 2, pan: { x: 0, y: 0 } }}
+          onViewChange={() => {}}
+          worldSpec={{ yAxis: 'up' }}
+        />
+      </PointerContextProvider>,
+    );
+    const host = container.querySelector('.lk-canvas-stack') as HTMLElement;
+    act(() => pointer(host, 'pointermove', 40, 30, 0));
+    expect(store.get()).toEqual({ worldX: 20, worldY: -15, viewId: 'stage' });
+  });
+});

package/src/canvas/CameraInput.tsx

@@ -0,0 +1,322 @@
+/**
+ * A labkit camera driven by weasel's dispatcher: drag pans, the wheel zooms
+ * about the pointer, a tap reports the world point, and the pointer is
+ * published into the store in scope. What `usePanZoom` used to hand-roll.
+ */
+import {
+  type Action,
+  type ActionsRegistry,
+  InputScope,
+  makeViewportZoomAction,
+  PointerContextProvider,
+  type PointerWorldPos,
+  type Tool,
+  useActionsRegistry,
+  useDepSource,
+  useGestureDispatcher,
+  usePointerContext,
+  type View,
+  type ViewApi,
+  viewportDragPanAction,
+  type Yoke,
+} from '@weasel-js/core';
+import {
+  createContext,
+  type ReactNode,
+  type RefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { Point, ViewTransform } from '../instrument/types';
+import { normalize2DView } from '../state/view';
+import { CameraWheelContext } from './CameraWheelContext';
+import { usePublishCamera } from './cameraRegistry';
+import { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
+import type { ViewportSize, WorldFrame } from './worldSpec';
+
+/** The view id the stage publishes its pointer under. */
+export const STAGE_VIEW_ID = 'stage';
+
+/**
+ * A camera, as the things that sit beside it read it: an overview, a loupe, a
+ * linked cursor. Points are *frame-local* — the world with `y` multiplied by
+ * `frame.yDir` — which is the space `view` works in.
+ */
+export interface CameraContextValue {
+  /** The camera as a weasel `ViewApi`, clamped to its zoom range. */
+  view: ViewApi;
+  frame: WorldFrame;
+  /** The element the camera's dispatcher listens on. */
+  element: () => HTMLElement | null;
+  /** The content's own rect, frame-local, when it has one — a `<Stage>`'s. */
+  content?: { x: number; y: number; width: number; height: number };
+}
+
+/** The camera around the caller, or `null` outside one. */
+export const CameraContext = createContext<CameraContextValue | null>(null);
+
+/**
+ * The input scope a camera routes through. Inside another camera — a loupe or
+ * an overlay laid over a canvas stack — it joins that camera's scope, so its
+ * actions reach the dispatcher already listening there. Anywhere else it
+ * mounts a scope of its own, which keeps its own tool unless it joins `yoke`:
+ * a camera beside another never takes that one's gestures. The pointer store is the exception — one
+ * already in scope is kept, since sharing it is the point.
+ */
+export function CameraScope({ yoke, children }: { yoke?: Yoke; children: ReactNode }) {
+  const around = useContext(CameraContext);
+  const pointer = usePointerContext();
+  if (around) return <>{children}</>;
+  const scoped = <InputScope yoke={yoke}>{children}</InputScope>;
+  return pointer ? scoped : <PointerContextProvider>{scoped}</PointerContextProvider>;
+}
+
+/** Options for {@link useCameraView}. */
+export interface CameraViewOptions {
+  view: ViewTransform;
+  onViewChange: (v: ViewTransform) => void;
+  frame: WorldFrame;
+  hostRef: RefObject<HTMLElement | null>;
+  minZoom?: number;
+  maxZoom?: number;
+}
+
+/** A camera's zoom limits, after widening to admit its opening zoom. */
+export interface ZoomRange {
+  min: number;
+  max: number;
+}
+
+/** A labkit camera: a weasel `ViewApi` that also says how far it zooms. */
+export interface CameraView extends ViewApi {
+  zoomRange(): ZoomRange;
+}
+
+function isPositiveFinite(n: number): boolean {
+  return Number.isFinite(n) && n > 0;
+}
+
+/**
+ * A labkit camera as a stable `ViewApi`. Its zoom range is widened to keep the
+ * opening zoom reachable — captured once, so a zoom-out cannot shrink the
+ * range and strand the opening view behind it.
+ */
+export function useCameraView({
+  view,
+  onViewChange,
+  frame,
+  hostRef,
+  minZoom = 0.1,
+  maxZoom = 32,
+}: CameraViewOptions): CameraView {
+  const live = useRef({ view: normalize2DView(view), onViewChange, frame });
+  live.current = { view: normalize2DView(view), onViewChange, frame };
+  const initialZoom = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);
+  const bounds = useRef({ min: minZoom, max: maxZoom });
+  const opening = initialZoom.current;
+  bounds.current = {
+    min: opening == null ? minZoom : Math.min(minZoom, opening),
+    max: opening == null ? maxZoom : Math.max(maxZoom, opening),
+  };
+
+  return useMemo<CameraView>(() => {
+    const get = (): View => toCameraView(live.current.view, live.current.frame);
+    return {
+      get,
+      set: (next: View) => {
+        const { min, max } = bounds.current;
+        const clamped = clampZoomAbout(get(), next, min, max);
+        const vt = fromCameraView(clamped, live.current.frame);
+        // Written ahead of the render, so a second event inside one commit
+        // steps from this one.
+        live.current.view = vt;
+        live.current.onViewChange(vt);
+      },
+      hostSize: () => {
+        const r = hostRef.current?.getBoundingClientRect();
+        return r ? { width: r.width, height: r.height } : null;
+      },
+      zoomRange: () => ({ ...bounds.current }),
+    };
+  }, [hostRef]);
+}
+
+const TAP_ID = 'camera.tap';
+const NO_TOOLS: ReadonlyMap<string, Tool> = new Map();
+const CHANNELS = { contextMenu: false, ingest: false } as const;
+
+/** Props for `<CameraInput>`. */
+export interface CameraInputProps {
+  hostRef: RefObject<HTMLElement | null>;
+  /** Published to the host's camera registry while its scope is the active
+   *  one, so chrome acting on "the camera" acts on the one last used. */
+  camera: CameraView;
+  frame: WorldFrame;
+  /** A primary-button press released without crossing the drag threshold, at
+   *  the world point it landed on. */
+  onTap?: (world: Point) => void;
+}
+
+/**
+ * Mounts the dispatcher on `hostRef` and routes the camera's gestures through
+ * it. Render it inside a `<CameraScope>`; with no actions registry in scope it
+ * renders nothing.
+ */
+export function CameraInput(props: CameraInputProps) {
+  const registry = useActionsRegistry();
+  if (!registry) return null;
+  return <CameraDispatch {...props} registry={registry} />;
+}
+
+function CameraDispatch({
+  hostRef,
+  camera,
+  frame,
+  onTap,
+  registry,
+}: CameraInputProps & { registry: ActionsRegistry }) {
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
+  const onTapRef = useRef(onTap);
+  onTapRef.current = onTap;
+
+  useDepSource('view', () => camera);
+  useDepSource('rootView', () => camera);
+
+  const actions = useMemo<Action[]>(() => {
+    // Unclamped here: `camera.set` clamps, to a range widened around the
+    // opening zoom, and anchors the clamp where the wheel was.
+    const zoom = makeViewportZoomAction({
+      wheel: 'plain',
+      min: 1e-9,
+      max: Number.POSITIVE_INFINITY,
+    });
+    // The wheel and the trackpad's two pinch forms only: the zoom keys listen
+    // on the window, and every trial on a page would take them at once.
+    const wheelOnly = (zoom.defaultBinding as { spec: { kind: string } }[]).filter(
+      (b) => b.spec.kind === 'wheel' || b.spec.kind === 'pinch',
+    );
+    const tap: Action = {
+      id: TAP_ID,
+      label: 'Tap the canvas',
+      defaultBinding: { kind: 'click' },
+      invoker: {
+        timing: 'immediate',
+        run: (_deps, params) => {
+          const p = params as { worldX?: number; worldY?: number } | undefined;
+          if (p?.worldX === undefined || p.worldY === undefined) return;
+          onTapRef.current?.(frameLocalToWorld({ x: p.worldX, y: p.worldY }, frameRef.current));
+        },
+      },
+    };
+    return [
+      // A trial pans on a plain drag; the kit action binds none of its own.
+      { ...viewportDragPanAction, defaultBinding: { kind: 'drag' } },
+      { ...zoom, defaultBinding: wheelOnly as Action['defaultBinding'] },
+      tap,
+    ];
+  }, []);
+
+  useEffect(() => {
+    const offs = actions.map((a) => registry.register(a));
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [registry, actions]);
+
+  const clientToWorld = useMemo(
+    () => (cx: number, cy: number) => {
+      const r = hostRef.current?.getBoundingClientRect();
+      const v = camera.get();
+      return {
+        x: (cx - (r?.left ?? 0)) / v.scale.x + v.x,
+        y: (cy - (r?.top ?? 0)) / v.scale.y + v.y,
+      };
+    },
+    [hostRef, camera],
+  );
+
+  useGestureDispatcher({
+    canvasRef: hostRef,
+    actions: registry,
+    entriesById: NO_TOOLS,
+    clientToWorld,
+    channels: CHANNELS,
+  });
+
+  usePublishPointer(hostRef, clientToWorld, frame, STAGE_VIEW_ID);
+  usePublishCamera(camera);
+
+  // Input that lands outside the camera's element — an annotation target's
+  // box, portalled into the surface — reaches the active camera's dispatcher
+  // through here.
+  const wheelSlot = useContext(CameraWheelContext);
+  useEffect(() => {
+    if (!wheelSlot) return;
+    const forward = (e: WheelEvent): void => {
+      hostRef.current?.dispatchEvent(new WheelEvent('wheel', e));
+    };
+    const claim = (): void => {
+      if (registry.isActive()) wheelSlot.current = forward;
+    };
+    claim();
+    const off = registry.subscribe(claim);
+    return () => {
+      off();
+      if (wheelSlot.current === forward) wheelSlot.current = null;
+    };
+  }, [wheelSlot, hostRef, registry]);
+
+  return null;
+}
+
+/**
+ * Publish the pointer over `hostRef` into the store in scope, in the
+ * instrument's world, as `viewId`; clear it when the pointer leaves with no
+ * button held.
+ */
+export function usePublishPointer(
+  hostRef: RefObject<HTMLElement | null>,
+  clientToLocal: (cx: number, cy: number) => Point,
+  frame: WorldFrame,
+  viewId: string,
+): void {
+  const store = usePointerContext();
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
+  const toLocal = useRef(clientToLocal);
+  toLocal.current = clientToLocal;
+  useEffect(() => {
+    const el = hostRef.current;
+    if (!el || !store) return;
+    const onMove = (e: PointerEvent): void => {
+      const w = frameLocalToWorld(toLocal.current(e.clientX, e.clientY), frameRef.current);
+      store.set({ worldX: w.x, worldY: w.y, viewId });
+    };
+    const onLeave = (e: PointerEvent): void => {
+      if (e.buttons !== 0) return;
+      if (store.get()?.viewId === viewId) store.set(null);
+    };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerleave', onLeave);
+    return () => {
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerleave', onLeave);
+    };
+  }, [hostRef, store, viewId]);
+}
+
+/** The pointer as a frame-local point, or `null` when there is none or it is
+ *  over `viewId` itself. */
+export function pointerElsewhere(
+  p: PointerWorldPos,
+  viewId: string,
+  frame: WorldFrame,
+): Point | null {
+  if (!p || p.viewId === viewId) return null;
+  return frameLocalToWorld({ x: p.worldX, y: p.worldY }, frame);
+}
+
+export type { ViewportSize };

package/src/canvas/CanvasStack.tsx

@@ -1,19 +1,11 @@
-import {
-  type CSSProperties,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { Yoke } from '@weasel-js/core';
+import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import type { Point, ViewTransform } from '../instrument/types';
 import { normalize2DView } from '../state/view';
-import { CameraWheelContext } from './CameraWheelContext';
+import { CameraContext, CameraInput, CameraScope, useCameraView } from './CameraInput';
 import { CanvasStackContext } from './CanvasStackContext';
-import { screenToWorld } from './canvasCoords';
+import { LinkedCursor } from './LinkedCursor';
 import { type CanvasLayerDescriptor, useLayerScheduler } from './useLayerScheduler';
-import { usePanZoom } from './usePanZoom';
 import { resolveFrame, type ViewportSize, type WorldSpec } from './worldSpec';
 
 /** Props for `<CanvasStack>`. */
@@ -34,11 +26,15 @@ export interface CanvasStackProps {
   onResize?: (size: ViewportSize) => void;
   onHitTest?: (worldPos: Point) => void;
   children?: ReactNode;
+  /** A yoke to join, from `useYoke()`: cameras on one yoke share their tool
+   *  and gesture in flight. Omitted, this one keeps its own. */
+  yoke?: Yoke;
 }
 
 /** Stacks one `<canvas>` per layer and drives them from a shared view, so a
  *  layer that changes rarely is not redrawn with one that changes every frame.
- *  Handles sizing, device pixel ratio, and pan/zoom. */
+ *  Handles sizing and device pixel ratio; pan and zoom route through weasel's
+ *  gesture dispatcher (`<CameraInput>`). */
 export function CanvasStack({
   layers,
   view: viewProp,
@@ -52,6 +48,7 @@ export function CanvasStack({
   onResize,
   onHitTest,
   children,
+  yoke,
 }: CanvasStackProps) {
   const view = normalize2DView(viewProp);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -92,31 +89,18 @@ export function CanvasStack({
 
   const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);
 
-  const onTap = (e: PointerEvent) => {
-    const el = containerRef.current;
-    if (!onHitTest || !el) return;
-    const rect = el.getBoundingClientRect();
-    onHitTest(screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top }, view, frame));
-  };
-
-  const handlers = usePanZoom({ view: viewProp, onViewChange, minZoom, maxZoom, frame, onTap });
-  const onWheelRef = useRef(handlers.onWheel);
-  onWheelRef.current = handlers.onWheel;
-  const wheelSlot = useContext(CameraWheelContext);
-
-  // Bound by hand because React registers wheel listeners passive, where
-  // `preventDefault` is refused and the page scrolls under the zoom.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const wheel = (e: WheelEvent): void => onWheelRef.current(e, el);
-    el.addEventListener('wheel', wheel, { passive: false });
-    if (wheelSlot) wheelSlot.current = wheel;
-    return () => {
-      el.removeEventListener('wheel', wheel);
-      if (wheelSlot?.current === wheel) wheelSlot.current = null;
-    };
-  }, [wheelSlot]);
+  const camera = useCameraView({
+    view: viewProp,
+    onViewChange,
+    frame,
+    hostRef: containerRef,
+    minZoom,
+    maxZoom,
+  });
+  const cameraCtx = useMemo(
+    () => ({ view: camera, frame, element: () => containerRef.current }),
+    [camera, frame],
+  );
   useLayerScheduler({ layers, view, frame, canvasRefs: canvasMap, size, host: containerRef });
 
   const ctxValue = useMemo(
@@ -139,25 +123,30 @@ export function CanvasStack({
   };
 
   return (
-    <CanvasStackContext.Provider value={ctxValue}>
-      <div
-        ref={containerRef}
-        className={className ? `lk-canvas-stack ${className}` : 'lk-canvas-stack'}
-        style={containerStyle}
-        onPointerDown={handlers.onPointerDown}
-      >
-        {layers.map((layer) => (
-          <canvas
-            key={layer.id}
-            ref={(el) => setCanvasRef(layer.id, el)}
-            className="lk-canvas-stack__canvas"
-            width={canvasPx.width}
-            height={canvasPx.height}
-            style={{ ...canvasCss, display: layer.visible ? 'block' : 'none' }}
-          />
-        ))}
-        <div className="lk-canvas-stack__overlay">{children}</div>
-      </div>
-    </CanvasStackContext.Provider>
+    <CameraScope yoke={yoke}>
+      <CameraContext.Provider value={cameraCtx}>
+        <CanvasStackContext.Provider value={ctxValue}>
+          <CameraInput hostRef={containerRef} camera={camera} frame={frame} onTap={onHitTest} />
+          <div
+            ref={containerRef}
+            className={className ? `lk-canvas-stack ${className}` : 'lk-canvas-stack'}
+            style={containerStyle}
+          >
+            {layers.map((layer) => (
+              <canvas
+                key={layer.id}
+                ref={(el) => setCanvasRef(layer.id, el)}
+                className="lk-canvas-stack__canvas"
+                width={canvasPx.width}
+                height={canvasPx.height}
+                style={{ ...canvasCss, display: layer.visible ? 'block' : 'none' }}
+              />
+            ))}
+            <LinkedCursor />
+            <div className="lk-canvas-stack__overlay">{children}</div>
+          </div>
+        </CanvasStackContext.Provider>
+      </CameraContext.Provider>
+    </CameraScope>
   );
 }

package/src/canvas/LinkedCursor.less

@@ -0,0 +1,16 @@
+.lk-linked-cursor {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.lk-linked-cursor__halo {
+  fill: rgb(0 0 0 / 60%);
+}
+
+.lk-linked-cursor__bar {
+  fill: var(--wzl-accent);
+}

package/src/canvas/LinkedCursor.tsx

@@ -0,0 +1,54 @@
+import { crosshairRects, usePointerPosition } from '@weasel-js/core';
+import { useContext } from 'react';
+import { CameraContext, pointerElsewhere, STAGE_VIEW_ID } from './CameraInput';
+
+/** `crosshairRects` returns its four arms in this order. */
+const ARMS = ['left', 'right', 'up', 'down'] as const;
+
+/**
+ * The other side of a linked cursor: a crosshair on the camera's own element
+ * wherever the shared pointer is over some other view — an overview, say. The
+ * same crosshair core paints on a weasel canvas.
+ */
+export function LinkedCursor() {
+  const camera = useContext(CameraContext);
+  const pointer = usePointerPosition();
+  if (!camera) return null;
+  const local = pointerElsewhere(pointer, STAGE_VIEW_ID, camera.frame);
+  if (!local) return null;
+  // `pointerElsewhere` hands back the instrument's world; the camera works
+  // frame-local, and the map is its own inverse.
+  const v = camera.view.get();
+  const x = (local.x - v.x) * v.scale.x;
+  const y = (local.y * camera.frame.yDir - v.y) * v.scale.y;
+  const { halo, bars } = crosshairRects(x, y, 1);
+  const arms = ARMS.map((name, i) => ({ name, halo: halo[i], bar: bars[i] }));
+  return (
+    <svg className="lk-linked-cursor" aria-hidden="true">
+      {arms.map(({ name, halo: r }) =>
+        r ? (
+          <rect
+            key={`halo-${name}`}
+            className="lk-linked-cursor__halo"
+            x={r.x}
+            y={r.y}
+            width={r.w}
+            height={r.h}
+          />
+        ) : null,
+      )}
+      {arms.map(({ name, bar: r }) =>
+        r ? (
+          <rect
+            key={`bar-${name}`}
+            className="lk-linked-cursor__bar"
+            x={r.x}
+            y={r.y}
+            width={r.w}
+            height={r.h}
+          />
+        ) : null,
+      )}
+    </svg>
+  );
+}