feat(cropper): add image cropping primitives

2026-09-29 17:09:26 +08:00
parent acbc62463e
commit 23e0867027
12 changed files with 1228 additions and 0 deletions
@@ -0,0 +1,68 @@
+import {
+  constrainCropperValue,
+  getCoverScale,
+  getCropArea,
+  getCropperBounds,
+  zoomCropperValueAtPoint,
+} from "@workspace/cropper"
+import { describe, expect, it } from "vitest"
+
+const viewport = { height: 300, width: 300 }
+const landscape = { height: 500, width: 1000 }
+
+describe("cropper geometry", () => {
+  it("fits an image so the viewport is always covered", () => {
+    expect(getCoverScale(viewport, landscape)).toBe(0.6)
+    expect(getCropperBounds(viewport, landscape, 1)).toEqual({
+      maxX: 150,
+      maxY: 0,
+    })
+  })
+
+  it("constrains zoom and translation to the covered image", () => {
+    expect(
+      constrainCropperValue(
+        { x: 5000, y: -500, zoom: 10 },
+        { image: landscape, maxZoom: 4, minZoom: 1, viewport }
+      )
+    ).toEqual({ x: 1050, y: -450, zoom: 4 })
+  })
+
+  it("preserves an initial translation until dimensions are available", () => {
+    expect(
+      constrainCropperValue(
+        { x: 40, y: -20, zoom: 2 },
+        { image: { height: 0, width: 0 }, viewport }
+      )
+    ).toEqual({ x: 40, y: -20, zoom: 2 })
+  })
+
+  it("returns a source-pixel crop rectangle", () => {
+    expect(getCropArea({ x: 0, y: 0, zoom: 1 }, viewport, landscape)).toEqual({
+      height: 500,
+      width: 500,
+      x: 250,
+      y: 0,
+    })
+
+    expect(getCropArea({ x: 150, y: 0, zoom: 1 }, viewport, landscape)).toEqual(
+      {
+        height: 500,
+        width: 500,
+        x: 0,
+        y: 0,
+      }
+    )
+  })
+
+  it("keeps the source point beneath the zoom origin stationary", () => {
+    expect(
+      zoomCropperValueAtPoint(
+        { x: 0, y: 0, zoom: 1 },
+        2,
+        { x: 100, y: 0 },
+        { image: landscape, viewport }
+      )
+    ).toEqual({ x: -100, y: 0, zoom: 2 })
+  })
+})