-
+ {
+ // Open with focus on Close, as before, rather than on the zoom controls that now precede it.
+ event.preventDefault()
+ close?.focus()
+ }}
+ >
)
}
+
+function shortcut(key: string) {
+ if (key === "=" || key === "+") return "in"
+
+ if (key === "-" || key === "_") return "out"
+
+ if (key === "0") return "fit"
+}
+
+function pixels(event: WheelEvent, delta: number) {
+ if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) return delta * 16
+
+ if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) return delta * window.innerHeight
+
+ return delta
+}
diff --git a/packages/ui/src/components/image-zoom.test.ts b/packages/ui/src/components/image-zoom.test.ts
new file mode 100644
index 00000000000..f9bbcd488d4
--- /dev/null
+++ b/packages/ui/src/components/image-zoom.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, test } from "bun:test"
+import { clampView, detailScale, FIT_VIEW, maxScale, panBy, wheelZoomFactor, zoomAt } from "./image-zoom"
+
+// A 1000×500 image fitted into a 1000×600 viewport at half its natural size.
+const bounds = { width: 1000, height: 500, viewportWidth: 1000, viewportHeight: 600, maxScale: maxScale(0.5) }
+
+describe("zoomAt", () => {
+ test("keeps the image point under the cursor in place", () => {
+ const anchor = { x: 300, y: -100 }
+ const view = zoomAt(FIT_VIEW, 2, anchor, bounds)
+ // The fitted point under the anchor sits at (anchor - offset) / scale in image space.
+ const before = { x: (anchor.x - FIT_VIEW.x) / FIT_VIEW.scale, y: (anchor.y - FIT_VIEW.y) / FIT_VIEW.scale }
+
+ expect(view).toEqual({ scale: 2, x: -300, y: 100 })
+ expect({ x: before.x * view.scale + view.x, y: before.y * view.scale + view.y }).toEqual(anchor)
+ })
+
+ test("zooms about the center without moving it", () => {
+ expect(zoomAt({ scale: 2, x: 120, y: -40 }, 4, { x: 0, y: 0 }, bounds)).toEqual({ scale: 4, x: 240, y: -80 })
+ })
+
+ test("never shrinks below fit or grows past the limit", () => {
+ expect(zoomAt({ scale: 3, x: 400, y: 200 }, 0.2, { x: 100, y: 100 }, bounds)).toEqual(FIT_VIEW)
+ expect(zoomAt(FIT_VIEW, 100, { x: 0, y: 0 }, bounds).scale).toBe(16)
+ })
+
+ test("pulls an anchor near the edge back so no empty space shows", () => {
+ expect(zoomAt(FIT_VIEW, 2, { x: 500, y: 0 }, bounds)).toEqual({ scale: 2, x: -500, y: 0 })
+ expect(zoomAt(FIT_VIEW, 1.1, { x: 500, y: 300 }, bounds)).toEqual({ scale: 1.1, x: -50, y: 0 })
+ })
+})
+
+describe("panBy", () => {
+ test("moves freely inside the overflow", () => {
+ expect(panBy({ scale: 2, x: 0, y: 0 }, { x: 120, y: -80 }, bounds)).toEqual({ scale: 2, x: 120, y: -80 })
+ })
+
+ test("stops at each edge of the zoomed image", () => {
+ // At 2x the image is 2000×1000, so it can travel 500px horizontally and 200px vertically each way.
+ expect(panBy({ scale: 2, x: 450, y: 150 }, { x: 900, y: 900 }, bounds)).toEqual({ scale: 2, x: 500, y: 200 })
+ expect(panBy({ scale: 2, x: 0, y: 0 }, { x: -900, y: -900 }, bounds)).toEqual({ scale: 2, x: -500, y: -200 })
+ })
+
+ test("keeps an axis that still fits centered", () => {
+ expect(panBy(FIT_VIEW, { x: 40, y: 40 }, bounds)).toEqual(FIT_VIEW)
+ expect(panBy({ scale: 1.1, x: 0, y: 0 }, { x: 0, y: 40 }, bounds)).toEqual({ scale: 1.1, x: 0, y: 0 })
+ })
+})
+
+describe("clampView", () => {
+ test("re-centers a pan that a smaller zoom or larger viewport no longer allows", () => {
+ expect(clampView({ scale: 2, x: 500, y: 200 }, { ...bounds, viewportWidth: 1600, viewportHeight: 1200 })).toEqual({
+ scale: 2,
+ x: 200,
+ y: 0,
+ })
+ })
+})
+
+describe("detailScale", () => {
+ test("opens a downscaled image at 100%", () => {
+ expect(detailScale(0.25)).toBe(4)
+ })
+
+ test("doubles an image already shown near its natural size", () => {
+ expect(detailScale(1)).toBe(2)
+ expect(detailScale(0.8)).toBe(2)
+ })
+})
+
+describe("wheelZoomFactor", () => {
+ test("zooms in for upward deltas and out for downward ones by the same ratio", () => {
+ expect(wheelZoomFactor(-10)).toBeGreaterThan(1)
+ expect(wheelZoomFactor(-10) * wheelZoomFactor(10)).toBeCloseTo(1)
+ })
+
+ test("bounds a coarse mouse-wheel notch", () => {
+ expect(wheelZoomFactor(-400)).toBe(wheelZoomFactor(-100))
+ expect(wheelZoomFactor(-400)).toBeLessThan(1.5)
+ })
+})
diff --git a/packages/ui/src/components/image-zoom.ts b/packages/ui/src/components/image-zoom.ts
new file mode 100644
index 00000000000..165bfab8917
--- /dev/null
+++ b/packages/ui/src/components/image-zoom.ts
@@ -0,0 +1,75 @@
+/**
+ * Zoom and pan math for a fitted image inside a clipping viewport.
+ *
+ * `scale` is relative to the fitted size, so 1 is "fit". `x` and `y` offset the image center from the viewport
+ * center in screen pixels, and anchors use the same viewport-center coordinates.
+ */
+export type ZoomView = { scale: number; x: number; y: number }
+
+export type ZoomBounds = {
+ /** The image's fitted size, before any zoom. */
+ width: number
+ height: number
+ viewportWidth: number
+ viewportHeight: number
+ maxScale: number
+}
+
+export type ZoomPoint = { x: number; y: number }
+
+/** Upper zoom limit, relative to the image's natural pixel size. */
+export const MAX_NATURAL_ZOOM = 8
+
+export const FIT_VIEW: ZoomView = { scale: 1, x: 0, y: 0 }
+
+/** The largest fitted-relative scale, given how far the fitted image is shrunk from its natural size. */
+export function maxScale(fitRatio: number) {
+ return Math.max(1, MAX_NATURAL_ZOOM / fitRatio)
+}
+
+/** Scales the view while the image point under `anchor` stays where it is on screen. */
+export function zoomAt(view: ZoomView, scale: number, anchor: ZoomPoint, bounds: ZoomBounds): ZoomView {
+ const next = clamp(scale, 1, bounds.maxScale)
+ const ratio = next / view.scale
+
+ return clampView(
+ { scale: next, x: anchor.x - (anchor.x - view.x) * ratio, y: anchor.y - (anchor.y - view.y) * ratio },
+ bounds,
+ )
+}
+
+export function panBy(view: ZoomView, delta: ZoomPoint, bounds: ZoomBounds): ZoomView {
+ return clampView({ scale: view.scale, x: view.x + delta.x, y: view.y + delta.y }, bounds)
+}
+
+/** Keeps the zoomed image covering the viewport on each axis it overflows, and centered on each axis it fits. */
+export function clampView(view: ZoomView, bounds: ZoomBounds): ZoomView {
+ return {
+ scale: view.scale,
+ x: clampAxis(view.x, bounds.width * view.scale, bounds.viewportWidth),
+ y: clampAxis(view.y, bounds.height * view.scale, bounds.viewportHeight),
+ }
+}
+
+/** The double-click target: 100% for a downscaled image, or twice the fitted size when 100% is barely larger. */
+export function detailScale(fitRatio: number) {
+ const actual = 1 / fitRatio
+
+ return actual >= 1.5 ? actual : 2
+}
+
+/** The zoom factor for one wheel event, bounded so a coarse mouse-wheel notch is a step rather than a jump. */
+export function wheelZoomFactor(deltaY: number) {
+ return Math.exp(-clamp(deltaY, -30, 30) / 100)
+}
+
+function clampAxis(offset: number, size: number, viewport: number) {
+ const limit = Math.max(0, (size - viewport) / 2)
+
+ // Adding zero turns -0 into 0.
+ return clamp(offset, -limit, limit) + 0
+}
+
+function clamp(value: number, min: number, max: number) {
+ return Math.min(Math.max(value, min), max)
+}
diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts
index ef90500ee82..d3087d9bbd4 100644
--- a/packages/ui/src/i18n/en.ts
+++ b/packages/ui/src/i18n/en.ts
@@ -178,6 +178,9 @@ const source = {
"ui.textField.copied": "Copied",
"ui.imagePreview.alt": "Image preview",
+ "ui.imagePreview.zoomIn": "Zoom in",
+ "ui.imagePreview.zoomOut": "Zoom out",
+ "ui.imagePreview.zoomToFit": "Zoom to fit",
"ui.scrollView.ariaLabel": "scrollable content",
"ui.tool.read": "Read",
diff --git a/packages/ui/src/icons/catalog.ts b/packages/ui/src/icons/catalog.ts
index f40c80b25e5..cac5d3c1bcf 100644
--- a/packages/ui/src/icons/catalog.ts
+++ b/packages/ui/src/icons/catalog.ts
@@ -78,6 +78,10 @@ const icons = {
viewBox: "0 0 16 16",
body: `
+
-
+
- 
+
1 ? "" : undefined}
+ data-dragging={drag() ? "" : undefined}
+ onDblClick={(event) => {
+ if (goal.scale > 1) return ease(FIT_VIEW)
+ ease(zoomAt(goal, detailScale(fitRatio()), point(event), bounds()))
+ }}
+ onPointerDown={(event) => {
+ if (event.button !== 0 || view().scale <= 1) return
+ event.preventDefault()
+ viewport.setPointerCapture(event.pointerId)
+ setDrag({ id: event.pointerId, x: event.clientX, y: event.clientY })
+ }}
+ onPointerMove={(event) => {
+ const current = drag()
+
+ if (current?.id !== event.pointerId) return
+ setDrag({ id: current.id, x: event.clientX, y: event.clientY })
+ follow(panBy(view(), { x: event.clientX - current.x, y: event.clientY - current.y }, bounds()))
+ }}
+ onPointerUp={(event) => {
+ if (drag()?.id === event.pointerId) setDrag(undefined)
+ }}
+ onPointerCancel={(event) => {
+ if (drag()?.id === event.pointerId) setDrag(undefined)
+ }}
+ >
+