381 lines
13 KiB
TypeScript
381 lines
13 KiB
TypeScript
import React from "react";
|
||
|
||
import { Excalidraw } from "../index";
|
||
import { snapScrollToDevicePixels } from "../renderer/helpers";
|
||
|
||
import { API } from "./helpers/api";
|
||
import { act, GlobalTestState, render, waitFor } from "./test-utils";
|
||
|
||
import type { NormalizedZoomValue } from "../types";
|
||
|
||
type CanvasEvent = {
|
||
type: string;
|
||
transform: [number, number, number, number, number, number];
|
||
props: { dx: number; dy: number; dWidth: number };
|
||
};
|
||
|
||
/** the static canvas's element blits, in device pixels */
|
||
const getBlits = () => {
|
||
const context = GlobalTestState.canvas.getContext("2d") as any;
|
||
return (context.__getEvents() as CanvasEvent[])
|
||
.filter((event) => event.type === "drawImage")
|
||
.map(({ transform: [a, b, c, d, e, f], props }) => ({
|
||
// the matrix's scale, whatever its rotation
|
||
scale: Math.hypot(a, b),
|
||
x: a * props.dx + c * props.dy + e,
|
||
y: b * props.dx + d * props.dy + f,
|
||
width: props.dWidth,
|
||
}));
|
||
};
|
||
|
||
/** re-renders at the given viewport and returns that render's blits */
|
||
const renderAt = async (zoom: number, scrollX: number, scrollY: number) => {
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
API.setAppState({
|
||
zoom: { value: zoom as NormalizedZoomValue },
|
||
scrollX,
|
||
scrollY,
|
||
});
|
||
return waitFor(() => {
|
||
// the static scene renders on the next frame
|
||
const blits = getBlits().filter(
|
||
(blit) => Math.abs(blit.scale - zoom) < 1e-9,
|
||
);
|
||
expect(blits.length).toBeGreaterThan(0);
|
||
return blits;
|
||
});
|
||
};
|
||
|
||
const distanceToWholePixel = ({ x, y }: { x: number; y: number }) =>
|
||
Math.abs(x - Math.round(x)) + Math.abs(y - Math.round(y));
|
||
|
||
describe("element pixel snap", () => {
|
||
beforeEach(async () => {
|
||
await render(<Excalidraw />);
|
||
// jsdom gives the editor no size, which culls every element
|
||
API.setAppState({ width: 800, height: 600 });
|
||
});
|
||
|
||
it.each([
|
||
["text", { type: "text" as const, text: "hello" }],
|
||
["rectangle", { type: "rectangle" as const, width: 120, height: 60 }],
|
||
])(
|
||
"blits an unrotated %s on whole device pixels at any zoom",
|
||
async (_, props) => {
|
||
API.setElements([API.createElement({ x: 10.37, y: 20.61, ...props })]);
|
||
for (const zoom of [1, 1.5, 0.73, 2.2]) {
|
||
const blits = await renderAt(zoom, 3.3, -7.77);
|
||
for (const blit of blits) {
|
||
expect(distanceToWholePixel(blit)).toBeLessThan(1e-6);
|
||
}
|
||
}
|
||
},
|
||
);
|
||
|
||
it.each([Math.PI / 2, (3 * Math.PI) / 2])(
|
||
"snaps a right-angle rotation (%s rad) without displacing it",
|
||
async (angle) => {
|
||
API.setElements([
|
||
API.createElement({
|
||
type: "rectangle",
|
||
x: 110.37,
|
||
y: 120.61,
|
||
width: 120,
|
||
height: 60,
|
||
angle: angle as any,
|
||
}),
|
||
]);
|
||
const blits = await renderAt(1.5, 3.3, -7.77);
|
||
for (const blit of blits) {
|
||
expect(distanceToWholePixel(blit)).toBeLessThan(1e-6);
|
||
// and it stays where the element is — a formula that divides by the
|
||
// near-zero diagonal of a rotation sends it far offscreen
|
||
expect(Math.abs(blit.x)).toBeLessThan(2000);
|
||
expect(Math.abs(blit.y)).toBeLessThan(2000);
|
||
}
|
||
},
|
||
);
|
||
|
||
it("does not snap while a zoom gesture keeps the cached bitmaps", async () => {
|
||
API.setElements([
|
||
API.createElement({ type: "text", x: 10.37, y: 20.61, text: "hello" }),
|
||
]);
|
||
// the bitmaps are resampled during the gesture; rounding would only
|
||
// make elements twitch
|
||
await renderAt(1, 0, 0);
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
API.setAppState({
|
||
shouldCacheIgnoreZoom: true,
|
||
zoom: { value: 1.5 as NormalizedZoomValue },
|
||
scrollX: 3.3,
|
||
scrollY: -7.77,
|
||
});
|
||
const [blit] = await waitFor(() => {
|
||
const blits = getBlits();
|
||
expect(blits.length).toBeGreaterThan(0);
|
||
return blits;
|
||
});
|
||
expect(distanceToWholePixel(blit)).toBeGreaterThan(1e-3);
|
||
API.setAppState({ shouldCacheIgnoreZoom: false });
|
||
});
|
||
|
||
it.each([
|
||
// a plain fractional offset, and one that is exactly half a device pixel
|
||
// at 150% (51 scene units → 76.5), where the float noise of a drag used
|
||
// to flip the rounding between two neighbors
|
||
["fractional", { box: [100.3, 100.3], label: [150.7, 140.2] }],
|
||
["half-pixel tie", { box: [10, 10], label: [61, 30] }],
|
||
])(
|
||
"keeps a label at a constant device offset from its container while dragged (%s)",
|
||
async (_, { box, label }) => {
|
||
const offsets = new Set<string>();
|
||
for (const drag of [0, 0.3, 0.4, 0.7, 1.4]) {
|
||
API.setElements([
|
||
API.createElement({
|
||
type: "rectangle",
|
||
id: "box",
|
||
x: box[0] + drag,
|
||
y: box[1] + drag,
|
||
width: 200,
|
||
height: 100,
|
||
boundElements: [{ type: "text", id: "label" }],
|
||
}),
|
||
API.createElement({
|
||
type: "text",
|
||
id: "label",
|
||
x: label[0] + drag,
|
||
y: label[1] + drag,
|
||
text: "hi",
|
||
fontSize: 20,
|
||
containerId: "box",
|
||
}),
|
||
]);
|
||
const blits = await renderAt(1.5, 3.3, -7.77);
|
||
expect(blits).toHaveLength(2);
|
||
for (const blit of blits) {
|
||
expect(distanceToWholePixel(blit)).toBeLessThan(1e-6);
|
||
}
|
||
// the container's bitmap is the wider one
|
||
const [labelBlit, boxBlit] = [...blits].sort(
|
||
(p, q) => p.width - q.width,
|
||
);
|
||
offsets.add(`${labelBlit.x - boxBlit.x},${labelBlit.y - boxBlit.y}`);
|
||
}
|
||
expect(offsets.size).toBe(1);
|
||
},
|
||
);
|
||
|
||
it("leaves rotated elements alone", async () => {
|
||
API.setElements([
|
||
API.createElement({
|
||
type: "text",
|
||
x: 10.37,
|
||
y: 20.61,
|
||
text: "hello",
|
||
angle: 0.4 as any,
|
||
}),
|
||
]);
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
API.setAppState({
|
||
zoom: { value: 1.5 as NormalizedZoomValue },
|
||
scrollX: 3.3,
|
||
scrollY: -7.77,
|
||
});
|
||
// a rotated blit is resampled regardless; at these coordinates its
|
||
// unsnapped offset is not a whole pixel
|
||
const [blit] = await waitFor(() => {
|
||
const blits = getBlits();
|
||
expect(blits.length).toBeGreaterThan(0);
|
||
return blits;
|
||
});
|
||
expect(distanceToWholePixel(blit)).toBeGreaterThan(1e-3);
|
||
});
|
||
|
||
it.each([0, Math.PI / 2, 0.4])(
|
||
"places overridden bitmaps like translated document geometry (%s rad)",
|
||
async (angle) => {
|
||
const ownerWindow = GlobalTestState.canvas.ownerDocument.defaultView!;
|
||
const pixelRatioDescriptor = Object.getOwnPropertyDescriptor(
|
||
ownerWindow,
|
||
"devicePixelRatio",
|
||
)!;
|
||
try {
|
||
for (const devicePixelRatio of [1, 2]) {
|
||
Object.defineProperty(ownerWindow, "devicePixelRatio", {
|
||
configurable: true,
|
||
value: devicePixelRatio,
|
||
});
|
||
for (const zoom of [1, 1.5, 0.73]) {
|
||
const props = {
|
||
type: "rectangle" as const,
|
||
x: 110.37,
|
||
y: 140.61,
|
||
width: 120,
|
||
height: 60,
|
||
angle: angle as any,
|
||
};
|
||
const element = API.createElement(props);
|
||
API.setElements([element]);
|
||
await renderAt(zoom, 3.3, -7.77);
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
act(() =>
|
||
window.h.app.api.setElementRenderOverrides(
|
||
new Map([[element.id, { offset: { x: 13.37, y: -7.61 } }]]),
|
||
),
|
||
);
|
||
const [overridden] = await waitFor(() => {
|
||
const blits = getBlits();
|
||
expect(blits).toHaveLength(1);
|
||
return blits;
|
||
});
|
||
act(() => window.h.app.api.setElementRenderOverrides(null));
|
||
API.setElements([
|
||
API.createElement({
|
||
...props,
|
||
x: props.x + 13.37,
|
||
y: props.y - 7.61,
|
||
}),
|
||
]);
|
||
const [translated] = await renderAt(zoom, 3.3, -7.77);
|
||
expect(overridden.x).toBeCloseTo(translated.x, 6);
|
||
expect(overridden.y).toBeCloseTo(translated.y, 6);
|
||
expect(overridden.scale).toBeCloseTo(translated.scale, 6);
|
||
if (angle !== 0.4) {
|
||
expect(distanceToWholePixel(overridden)).toBeLessThan(1e-6);
|
||
}
|
||
}
|
||
}
|
||
} finally {
|
||
Object.defineProperty(
|
||
ownerWindow,
|
||
"devicePixelRatio",
|
||
pixelRatioDescriptor,
|
||
);
|
||
}
|
||
},
|
||
);
|
||
|
||
it("keeps bound-label snapping stable through inherited fractional offsets", async () => {
|
||
const box = API.createElement({
|
||
type: "rectangle",
|
||
id: "box",
|
||
x: 10,
|
||
y: 10,
|
||
width: 200,
|
||
height: 100,
|
||
boundElements: [{ type: "text", id: "label" }],
|
||
});
|
||
const label = API.createElement({
|
||
type: "text",
|
||
id: "label",
|
||
x: 61,
|
||
y: 30,
|
||
text: "hi",
|
||
fontSize: 20,
|
||
containerId: box.id,
|
||
});
|
||
API.setElements([box, label]);
|
||
await renderAt(1.5, 3.3, -7.77);
|
||
const offsets = new Set<string>();
|
||
for (const translation of [0, 0.3, 0.4, 0.7, 1.4]) {
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
act(() =>
|
||
window.h.app.api.setElementRenderOverrides(
|
||
new Map([[box.id, { offset: { x: translation, y: translation } }]]),
|
||
),
|
||
);
|
||
const blits = await waitFor(() => {
|
||
const blits = getBlits();
|
||
expect(blits).toHaveLength(2);
|
||
return blits;
|
||
});
|
||
const [labelBlit, boxBlit] = [...blits].sort((p, q) => p.width - q.width);
|
||
offsets.add(`${labelBlit.x - boxBlit.x},${labelBlit.y - boxBlit.y}`);
|
||
}
|
||
expect(offsets.size).toBe(1);
|
||
});
|
||
});
|
||
|
||
describe("scroll pixel snap", () => {
|
||
it("rounds the scroll to whole device pixels and is identity when it already is", () => {
|
||
const zoom = { value: 1.5 as NormalizedZoomValue };
|
||
const snapped = snapScrollToDevicePixels(
|
||
{ scrollX: 3.3, scrollY: -7.77, zoom },
|
||
2,
|
||
);
|
||
// 3.3 × 1.5 × 2 = 9.9 → 10; -7.77 × 3 = -23.31 → -23
|
||
expect(snapped.scrollX * 3).toBeCloseTo(10, 9);
|
||
expect(snapped.scrollY * 3).toBeCloseTo(-23, 9);
|
||
|
||
const whole = { scrollX: 4, scrollY: -6, zoom };
|
||
expect(snapScrollToDevicePixels(whole, 2)).toBe(whole);
|
||
});
|
||
|
||
it("blits a shape at integer coordinates on whole device pixels at any fractional scroll", async () => {
|
||
await render(<Excalidraw />);
|
||
API.setAppState({ width: 800, height: 600 });
|
||
API.setElements([
|
||
API.createElement({
|
||
type: "rectangle",
|
||
x: 100,
|
||
y: 200,
|
||
width: 200,
|
||
height: 100,
|
||
}),
|
||
]);
|
||
// zooms at which the element canvas's padding is itself whole device
|
||
// pixels, so the only fractional term left is the scroll
|
||
for (const zoom of [1, 1.5]) {
|
||
const [atFirst] = await renderAt(zoom, 3.3, -7.77);
|
||
expect(distanceToWholePixel(atFirst)).toBeLessThan(1e-6);
|
||
// a tenth of a device pixel further lands on the same pixels
|
||
const [atSecond] = await renderAt(zoom, 3.3 + 0.1 / zoom, -7.77);
|
||
expect(atSecond).toEqual(atFirst);
|
||
}
|
||
});
|
||
});
|
||
|
||
describe("grid pixel snap", () => {
|
||
/** the static canvas's path starts, in device pixels */
|
||
const getPathStarts = () => {
|
||
const context = GlobalTestState.canvas.getContext("2d") as any;
|
||
return (context.__getEvents() as CanvasEvent[])
|
||
.filter((event) => event.type === "moveTo")
|
||
.map(({ transform: [a, , , d, e, f], props }) => ({
|
||
scale: a,
|
||
x: a * (props as any).x + e,
|
||
y: d * (props as any).y + f,
|
||
}));
|
||
};
|
||
const fraction = (value: number) => value - Math.floor(value);
|
||
|
||
it("centers one-pixel grid lines on device pixels at any zoom", async () => {
|
||
await render(<Excalidraw />);
|
||
API.setAppState({ width: 800, height: 600, gridModeEnabled: true });
|
||
// zooms at which a grid line is at least a device pixel wide — 1.9
|
||
// included, where `(1 / zoom) × zoom` evaluates just under 1
|
||
for (const zoom of [1, 1.5, 1.9, 2.2]) {
|
||
(GlobalTestState.canvas.getContext("2d") as any).__clearEvents();
|
||
API.setAppState({
|
||
zoom: { value: zoom as NormalizedZoomValue },
|
||
scrollX: 3.3,
|
||
scrollY: -7.77,
|
||
});
|
||
const lines = await waitFor(() => {
|
||
const starts = getPathStarts().filter(
|
||
(start) => Math.abs(start.scale - zoom) < 1e-9,
|
||
);
|
||
expect(starts.length).toBeGreaterThan(0);
|
||
return starts;
|
||
});
|
||
for (const line of lines) {
|
||
// a vertical line has its x on the half pixel, a horizontal its y
|
||
const onHalfPixel =
|
||
Math.abs(fraction(line.x) - 0.5) < 1e-6 ||
|
||
Math.abs(fraction(line.y) - 0.5) < 1e-6;
|
||
expect(onHalfPixel).toBe(true);
|
||
}
|
||
}
|
||
});
|
||
});
|