69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
|
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 })
|
||
|
|
})
|
||
|
|
})
|