mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-25 02:32:47 +00:00
Keep large diffs responsive across web and mobile (#4174)
* perf(app): keep large diffs responsive Render file headers on the canvas and bound expensive text shaping to the active viewport while preserving sticky, hover, and horizontal-scroll behavior. Let native scroll cancellation arbitrate header presses so finger scrolling cannot expand files. * test(app): assert canvas diff header accessibility * test(app): assert canvas diff header semantics
This commit is contained in:
Mohamed Boudra
@@ -37,6 +37,10 @@ function changesTree(page: Page) {
|
||||
return page.getByTestId("changes-file-tree").filter({ visible: true });
|
||||
}
|
||||
|
||||
function diffHeaderForPath(panel: Locator, filePath: string): Locator {
|
||||
return panel.locator(`[data-diff-header-path="${filePath}"]`).getByTestId(/^diff-file-\d+$/);
|
||||
}
|
||||
|
||||
async function readFileIfPresent(filePath: string): Promise<string | null> {
|
||||
try {
|
||||
return await readFile(filePath, "utf8");
|
||||
@@ -261,12 +265,12 @@ test.afterEach(async () => {
|
||||
test("Changes opens the populated committed comparison for a clean checkout", async ({ page }) => {
|
||||
const workspace = await createWorkspaceWithCommittedDiff();
|
||||
|
||||
await openWorkspaceChangesSurface(page, workspace);
|
||||
await openWorkspaceChangesSurface(page, workspace, 90_000);
|
||||
|
||||
const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
|
||||
const tree = page.getByTestId("changes-tree-panel").filter({ visible: true });
|
||||
await expect(tree.getByTestId("changes-diff-status-trigger")).toContainText("Committed");
|
||||
await expect(panel.getByText("committed-only.ts", { exact: true })).toBeVisible();
|
||||
await expect(panel.getByTestId("diff-file-0")).toHaveAccessibleName("committed-only.ts, +1, -0");
|
||||
});
|
||||
|
||||
test("Changes expires a manual comparison when checkout dirtiness changes", async ({ page }) => {
|
||||
@@ -302,7 +306,7 @@ test("an empty Changes comparison links to the populated comparison", async ({ p
|
||||
const mode = tree.getByTestId("changes-diff-status-trigger");
|
||||
await mode.click();
|
||||
await page.getByTestId("changes-diff-mode-committed").click();
|
||||
await expect(panel.getByText("committed-only.ts", { exact: true })).toBeVisible();
|
||||
await expect(panel.getByTestId("diff-file-0")).toHaveAccessibleName("committed-only.ts, +1, -0");
|
||||
|
||||
await mode.click();
|
||||
await page.getByTestId("changes-diff-mode-uncommitted").click();
|
||||
@@ -312,7 +316,7 @@ test("an empty Changes comparison links to the populated comparison", async ({ p
|
||||
await expect(seeCommitted).toBeVisible();
|
||||
await seeCommitted.click();
|
||||
await expect(mode).toContainText("Committed");
|
||||
await expect(panel.getByText("committed-only.ts", { exact: true })).toBeVisible();
|
||||
await expect(panel.getByTestId("diff-file-0")).toHaveAccessibleName("committed-only.ts, +1, -0");
|
||||
});
|
||||
|
||||
test("changes file actions open below the right-click without a reserved kebab", async ({
|
||||
@@ -322,9 +326,8 @@ test("changes file actions open below the right-click without a reserved kebab",
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openWorkspaceChanges(page, workspace);
|
||||
|
||||
await expect(page.getByTestId("diff-file-1")).toContainText("zz-deleted.ts");
|
||||
const deletedFileName = page.getByTestId("diff-file-1-name");
|
||||
await expect(deletedFileName).toHaveCSS("user-select", "none");
|
||||
const deletedFileName = page.getByTestId("diff-file-1");
|
||||
await expect(deletedFileName).toHaveAccessibleName(/zz-deleted\.ts/);
|
||||
await deletedFileName.dblclick();
|
||||
expect(await page.evaluate(() => window.getSelection()?.toString() ?? "")).toBe("");
|
||||
await expect(page.getByTestId(/diff-file-\d+-actions/)).toHaveCount(0);
|
||||
@@ -378,49 +381,109 @@ test("every interactive file header has the same hover feedback", async ({ page
|
||||
|
||||
const first = page.getByTestId("diff-file-0-toggle");
|
||||
const second = page.getByTestId("diff-file-1-toggle");
|
||||
const normalBackground = await first.evaluate(
|
||||
(element) => getComputedStyle(element.parentElement!).backgroundColor,
|
||||
);
|
||||
await expect
|
||||
.poll(() =>
|
||||
first.evaluate((element) => getComputedStyle(element.parentElement!).borderTopWidth),
|
||||
)
|
||||
.toBe("0px");
|
||||
const canvas = page.getByTestId("git-diff-header-canvas");
|
||||
const normalBackground = await headerCanvasPixel(canvas, first, 10);
|
||||
|
||||
await first.hover();
|
||||
const hoverBackground = await first.evaluate(
|
||||
(element) => getComputedStyle(element).backgroundColor,
|
||||
);
|
||||
expect(hoverBackground).not.toBe(normalBackground);
|
||||
await expect.poll(() => headerCanvasPixel(canvas, first, 10)).not.toBe(normalBackground);
|
||||
const hoverBackground = await headerCanvasPixel(canvas, first, 10);
|
||||
|
||||
await first.click();
|
||||
await page.mouse.move(0, 0);
|
||||
await expect(first).toHaveAttribute("aria-expanded", "false");
|
||||
await expect
|
||||
.poll(() =>
|
||||
first.evaluate((element) => getComputedStyle(element.parentElement!).backgroundColor),
|
||||
)
|
||||
.toBe(normalBackground);
|
||||
const [sharedBorder, secondTopBorderWidth] = await Promise.all([
|
||||
first.evaluate((element) => getComputedStyle(element.parentElement!).borderBottomColor),
|
||||
second.evaluate((element) => getComputedStyle(element.parentElement!).borderTopWidth),
|
||||
]);
|
||||
expect(sharedBorder).not.toBe("rgba(0, 0, 0, 0)");
|
||||
expect(secondTopBorderWidth).toBe("0px");
|
||||
await expect.poll(() => headerCanvasPixel(canvas, first, 10)).toBe(normalBackground);
|
||||
|
||||
await first.hover();
|
||||
await expect
|
||||
.poll(() => first.evaluate((element) => getComputedStyle(element).backgroundColor))
|
||||
.toBe(hoverBackground);
|
||||
await expect.poll(() => headerCanvasPixel(canvas, first, 10)).toBe(hoverBackground);
|
||||
await second.hover();
|
||||
await expect.poll(() => headerCanvasPixel(canvas, first, 10)).toBe(normalBackground);
|
||||
await expect.poll(() => headerCanvasPixel(canvas, second, 10)).toBe(hoverBackground);
|
||||
});
|
||||
|
||||
test("horizontal body scrolling never moves or repaints the canvas header", async ({ page }) => {
|
||||
const wideLine = `export const wide = "${"wide".repeat(160)}";`;
|
||||
const workspace = await createWorkspaceWithExactSelectionDiff(wideLine);
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openSelectionWorkspaceChanges(page, workspace);
|
||||
|
||||
const headerCanvas = page.getByTestId("git-diff-header-canvas");
|
||||
const header = page.getByTestId("diff-file-0-toggle");
|
||||
const beforeImage = await headerCanvas.evaluate((element) =>
|
||||
(element as HTMLCanvasElement).toDataURL(),
|
||||
);
|
||||
const beforeBounds = await header.boundingBox();
|
||||
|
||||
await horizontallyScrollFirstFile(page, 320);
|
||||
await page.waitForTimeout(50);
|
||||
|
||||
expect(await headerCanvas.evaluate((element) => (element as HTMLCanvasElement).toDataURL())).toBe(
|
||||
beforeImage,
|
||||
);
|
||||
expect(await header.boundingBox()).toEqual(beforeBounds);
|
||||
});
|
||||
|
||||
test("the outgoing sticky header hands off without a gap or overlap", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
const workspace = await createWorkspaceWithStickyTransitionDiff();
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openWorkspaceChangesSurface(page, workspace);
|
||||
|
||||
const scroller = page.getByTestId("git-diff-scroll");
|
||||
const first = page.getByTestId("diff-file-0-toggle");
|
||||
const second = page.getByTestId("diff-file-1-toggle");
|
||||
const secondTop = await second.evaluate((element) => {
|
||||
const scrollElement = element.closest<HTMLElement>('[data-testid="git-diff-scroll"]');
|
||||
if (!scrollElement) return Number.NaN;
|
||||
return (
|
||||
scrollElement.scrollTop +
|
||||
element.getBoundingClientRect().top -
|
||||
scrollElement.getBoundingClientRect().top
|
||||
);
|
||||
});
|
||||
expect(secondTop).toBeGreaterThan(30);
|
||||
await scroller.evaluate((element, scrollTop) => {
|
||||
element.scrollTop = scrollTop;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
}, secondTop - 15);
|
||||
await expect(first).toBeAttached();
|
||||
await expect(second).toBeAttached();
|
||||
|
||||
const [scrollBounds, firstBounds, secondBounds] = await Promise.all([
|
||||
scroller.boundingBox(),
|
||||
first.boundingBox(),
|
||||
second.boundingBox(),
|
||||
]);
|
||||
if (!scrollBounds || !firstBounds || !secondBounds) {
|
||||
throw new Error("Sticky transition geometry is unavailable");
|
||||
}
|
||||
expect(firstBounds.y - scrollBounds.y).toBeCloseTo(-15, 0);
|
||||
expect(secondBounds.y - scrollBounds.y).toBeCloseTo(15, 0);
|
||||
const transitionHits = await scroller.evaluate((element) => {
|
||||
const bounds = element.getBoundingClientRect();
|
||||
return [14, 16].map(
|
||||
(y) =>
|
||||
document
|
||||
.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + y)
|
||||
?.closest<HTMLElement>("[data-diff-header]")?.dataset.diffHeaderPath ?? null,
|
||||
);
|
||||
});
|
||||
expect(transitionHits).toEqual(["src/first.ts", "src/second.ts"]);
|
||||
await testInfo.attach("canvas-header-sticky-handoff", {
|
||||
body: await page.getByTestId("git-diff-canvas-root").screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
|
||||
await scroller.evaluate((element, scrollTop) => {
|
||||
element.scrollTop = scrollTop;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
}, secondTop);
|
||||
await expect
|
||||
.poll(() =>
|
||||
first.evaluate((element) => getComputedStyle(element.parentElement!).backgroundColor),
|
||||
)
|
||||
.toBe(normalBackground);
|
||||
await expect
|
||||
.poll(() => second.evaluate((element) => getComputedStyle(element).backgroundColor))
|
||||
.toBe(hoverBackground);
|
||||
.poll(async () => {
|
||||
const bounds = await second.boundingBox();
|
||||
return bounds ? bounds.y - scrollBounds.y : Number.NaN;
|
||||
})
|
||||
.toBeCloseTo(0, 0);
|
||||
});
|
||||
|
||||
test("changes context menus duplicate files and folders", async ({ page }) => {
|
||||
@@ -475,7 +538,8 @@ test("the scrolling diff lists files in changes tree order", async ({ page }) =>
|
||||
|
||||
const tree = changesTree(page);
|
||||
const treeNames = tree.locator('[data-testid^="diff-tree-file-"][data-testid$="-name"]');
|
||||
const diffNames = page.locator('[data-testid^="diff-file-"][data-testid$="-name"]');
|
||||
const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
|
||||
const diffHeaders = panel.getByTestId(/^diff-file-\d+$/);
|
||||
|
||||
// Directories sort before files at every level, so the root note lands last
|
||||
// even though "a-root-note.txt" compares below "src/..." as a whole string.
|
||||
@@ -485,9 +549,17 @@ test("the scrolling diff lists files in changes tree order", async ({ page }) =>
|
||||
// descendants of a collapsed folder, which would make the tree a subsequence
|
||||
// of the diff rather than a match, and mask a real ordering difference.
|
||||
await expect(treeNames).toHaveCount(expected.length);
|
||||
await expect(diffNames).toHaveCount(expected.length);
|
||||
await expect(diffHeaders).toHaveCount(expected.length);
|
||||
await expect(treeNames).toHaveText(expected);
|
||||
await expect(diffNames).toHaveText(expected);
|
||||
const expectedHeaderNames = [
|
||||
"src/zz-folder/nested/changed.ts, +1, -1",
|
||||
"src/zz-folder/root.ts, +1, -1",
|
||||
"src/use-mounted-tab-set.ts, +37, -1",
|
||||
"a-root-note.txt, +1, -0",
|
||||
];
|
||||
for (const [index, accessibleName] of expectedHeaderNames.entries()) {
|
||||
await expect(diffHeaders.nth(index)).toHaveAccessibleName(accessibleName);
|
||||
}
|
||||
});
|
||||
|
||||
test("changes context menu recursively collapses descendant folders", async ({ page }) => {
|
||||
@@ -586,9 +658,10 @@ test("discarding a staged rename restores its source path", async ({ page }) =>
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openWorkspaceChanges(page, workspace);
|
||||
|
||||
const renamedToggle = page
|
||||
.getByTestId(/^diff-file-\d+-toggle$/)
|
||||
.filter({ hasText: "zz-renamed.ts" });
|
||||
const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
|
||||
const renamedHeader = diffHeaderForPath(panel, "src/zz-renamed.ts");
|
||||
await expect(renamedHeader).toHaveAccessibleName("src/zz-renamed.ts, +1, -0");
|
||||
const renamedToggle = renamedHeader.getByTestId(/^diff-file-\d+-toggle$/);
|
||||
const toggleTestId = await renamedToggle.getAttribute("data-testid");
|
||||
expect(toggleTestId).not.toBeNull();
|
||||
const rowTestId = toggleTestId!.slice(0, -"-toggle".length);
|
||||
@@ -615,9 +688,10 @@ test("discarding an untracked file removes it from the working tree", async ({ p
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openWorkspaceChanges(page, workspace);
|
||||
|
||||
const untrackedToggle = page
|
||||
.getByTestId(/^diff-file-\d+-toggle$/)
|
||||
.filter({ hasText: "zz-untracked.txt" });
|
||||
const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
|
||||
const untrackedHeader = diffHeaderForPath(panel, "zz-untracked.txt");
|
||||
await expect(untrackedHeader).toHaveAccessibleName("zz-untracked.txt, +1, -0");
|
||||
const untrackedToggle = untrackedHeader.getByTestId(/^diff-file-\d+-toggle$/);
|
||||
const toggleTestId = await untrackedToggle.getAttribute("data-testid");
|
||||
expect(toggleTestId).not.toBeNull();
|
||||
const rowTestId = toggleTestId!.slice(0, -"-toggle".length);
|
||||
@@ -676,8 +750,12 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
|
||||
await expect(visiblePanel.getByTestId("changes-diff-status-trigger")).toHaveCount(0);
|
||||
await expect(visiblePanel.getByTestId("changes-selected-diff-stat")).toHaveCount(0);
|
||||
await expect(visiblePanel.getByTestId("changes-header")).toHaveCount(1);
|
||||
await expect(visiblePanel.getByText("use-mounted-tab-set.ts", { exact: true })).toBeVisible();
|
||||
await expect(visiblePanel).toContainText("zz-deleted.ts");
|
||||
await expect(diffHeaderForPath(visiblePanel, "src/use-mounted-tab-set.ts")).toHaveAccessibleName(
|
||||
"src/use-mounted-tab-set.ts, +37, -1",
|
||||
);
|
||||
await expect(diffHeaderForPath(visiblePanel, "src/zz-deleted.ts")).toHaveAccessibleName(
|
||||
"src/zz-deleted.ts, +0, -1",
|
||||
);
|
||||
await expect(visiblePanel.getByTestId("changes-primary-cta")).toHaveCount(0);
|
||||
await expect(page.getByTestId("changes-primary-cta")).toHaveCount(1);
|
||||
await expect(page.getByTestId("changes-primary-cta")).toContainText("Commit");
|
||||
@@ -712,16 +790,18 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
|
||||
await expect(page.getByTestId(/^workspace-working-diff-close-/)).toHaveCount(1);
|
||||
|
||||
await writeFile(path.join(workspace.repoPath, "src/use-mounted-tab-set.ts"), BEFORE);
|
||||
await expect(visiblePanel.getByText("use-mounted-tab-set.ts", { exact: true })).toHaveCount(0, {
|
||||
timeout: 30_000,
|
||||
});
|
||||
await expect(visiblePanel).toContainText("zz-deleted.ts");
|
||||
await expect(
|
||||
visiblePanel.locator('[data-diff-header-path="src/use-mounted-tab-set.ts"]'),
|
||||
).toHaveCount(0, { timeout: 30_000 });
|
||||
await expect(visiblePanel.locator('[data-diff-header-path="src/zz-deleted.ts"]')).toBeVisible();
|
||||
await writeFile(path.join(workspace.repoPath, "src/use-mounted-tab-set.ts"), AFTER);
|
||||
await expect(visiblePanel.getByText("use-mounted-tab-set.ts", { exact: true })).toBeVisible({
|
||||
timeout: 30_000,
|
||||
});
|
||||
await expect(visiblePanel.getByText("zz-deleted.ts", { exact: true })).toBeVisible();
|
||||
await expect(visiblePanel.getByRole("img", { name: "Deleted" })).toBeVisible();
|
||||
await expect(diffHeaderForPath(visiblePanel, "src/use-mounted-tab-set.ts")).toHaveAccessibleName(
|
||||
"src/use-mounted-tab-set.ts, +37, -1",
|
||||
{ timeout: 30_000 },
|
||||
);
|
||||
await expect(diffHeaderForPath(visiblePanel, "src/zz-deleted.ts")).toHaveAccessibleName(
|
||||
"src/zz-deleted.ts, +0, -1",
|
||||
);
|
||||
});
|
||||
|
||||
test("compact Changes keeps its actions compact and menu-only", async ({ page }) => {
|
||||
@@ -980,6 +1060,29 @@ test("canvas diff uses the overlay scrollbar and its thumb controls vertical scr
|
||||
await expect.poll(() => scroller.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test("canvas headers keep a many-file diff bounded while scrolling end to end", async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(180_000);
|
||||
const workspace = await createWorkspaceWithManyTinyDiffs(2_000);
|
||||
await useUnwrappedDiffLines(page);
|
||||
await openWorkspaceChangesSurface(page, workspace, 90_000);
|
||||
|
||||
const root = page.getByTestId("git-diff-canvas-root");
|
||||
const scroller = page.getByTestId("git-diff-scroll");
|
||||
await expect(page.getByTestId("git-diff-header-canvas")).toBeVisible({ timeout: 30_000 });
|
||||
await expect.poll(() => root.locator('[data-diff-header="true"]').count()).toBeLessThan(120);
|
||||
|
||||
await scroller.evaluate((element) => {
|
||||
element.scrollTop = element.scrollHeight - element.clientHeight;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
});
|
||||
|
||||
await expect(page.getByTestId("diff-file-1999")).toBeVisible();
|
||||
await expect.poll(() => root.locator('[data-diff-header="true"]').count()).toBeLessThan(120);
|
||||
await expect(page.getByTestId("git-diff-header-canvas")).toBeVisible();
|
||||
});
|
||||
|
||||
test("the whole reviewable row reveals the gutter affordance and uses a text cursor", async ({
|
||||
page,
|
||||
}) => {
|
||||
@@ -1380,6 +1483,58 @@ async function createWorkspaceWithExactSelectionDiff(content: string): Promise<D
|
||||
return { id: created.workspace.id, repoPath: repo.path };
|
||||
}
|
||||
|
||||
async function createWorkspaceWithManyTinyDiffs(fileCount: number): Promise<DirtyWorkspace> {
|
||||
const files = Array.from({ length: fileCount }, (_, index) => ({
|
||||
path: `src/file-${String(index).padStart(4, "0")}.ts`,
|
||||
content: "export const value = 0;\n",
|
||||
}));
|
||||
const repo = await createTempGitRepo("changes-canvas-many-files-", { files });
|
||||
await Promise.all(
|
||||
files.map((file, index) =>
|
||||
writeFile(path.join(repo.path, file.path), `export const value = ${index + 1};\n`),
|
||||
),
|
||||
);
|
||||
const client = await connectSeedClient();
|
||||
cleanupTasks.push({
|
||||
run: async () => {
|
||||
await client.close().catch(() => undefined);
|
||||
await repo.cleanup().catch(() => undefined);
|
||||
},
|
||||
});
|
||||
const created = await client.createWorkspace({ source: { kind: "directory", path: repo.path } });
|
||||
if (!created.workspace) throw new Error(created.error ?? "Failed to create many-file workspace");
|
||||
return { id: created.workspace.id, repoPath: repo.path };
|
||||
}
|
||||
|
||||
async function createWorkspaceWithStickyTransitionDiff(): Promise<DirtyWorkspace> {
|
||||
const source = Array.from(
|
||||
{ length: 48 },
|
||||
(_, index) => `export const value${index} = ${index};`,
|
||||
).join("\n");
|
||||
const files = ["src/first.ts", "src/second.ts"].map((filePath) => ({
|
||||
path: filePath,
|
||||
content: `${source}\n`,
|
||||
}));
|
||||
const repo = await createTempGitRepo("changes-canvas-sticky-transition-", { files });
|
||||
const changedSource = Array.from(
|
||||
{ length: 48 },
|
||||
(_, index) => `export const value${index} = ${index + 100};`,
|
||||
).join("\n");
|
||||
await Promise.all(
|
||||
files.map((file) => writeFile(path.join(repo.path, file.path), `${changedSource}\n`)),
|
||||
);
|
||||
const client = await connectSeedClient();
|
||||
cleanupTasks.push({
|
||||
run: async () => {
|
||||
await client.close().catch(() => undefined);
|
||||
await repo.cleanup().catch(() => undefined);
|
||||
},
|
||||
});
|
||||
const created = await client.createWorkspace({ source: { kind: "directory", path: repo.path } });
|
||||
if (!created.workspace) throw new Error(created.error ?? "Failed to create sticky workspace");
|
||||
return { id: created.workspace.id, repoPath: repo.path };
|
||||
}
|
||||
|
||||
async function openWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Promise<void> {
|
||||
await page.setViewportSize({ width: 1400, height: 900 });
|
||||
await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
|
||||
@@ -1389,11 +1544,15 @@ async function openWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Prom
|
||||
await expectExpandedMountedTabDiff(page);
|
||||
}
|
||||
|
||||
async function openWorkspaceChangesSurface(page: Page, workspace: DirtyWorkspace): Promise<void> {
|
||||
async function openWorkspaceChangesSurface(
|
||||
page: Page,
|
||||
workspace: DirtyWorkspace,
|
||||
timeout?: number,
|
||||
): Promise<void> {
|
||||
await page.setViewportSize({ width: 1400, height: 900 });
|
||||
await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
|
||||
await waitForWorkspaceTabsVisible(page);
|
||||
await openChangesPanel(page);
|
||||
await openChangesPanel(page, timeout);
|
||||
}
|
||||
|
||||
async function openSelectionWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Promise<void> {
|
||||
@@ -1402,7 +1561,7 @@ async function openSelectionWorkspaceChanges(page: Page, workspace: DirtyWorkspa
|
||||
await waitForWorkspaceTabsVisible(page);
|
||||
await openChangesPanel(page);
|
||||
const diffPanel = page.getByTestId("working-diff-panel").filter({ visible: true });
|
||||
await expect(diffPanel.getByTestId("diff-file-0-name")).toHaveText("selection.ts", {
|
||||
await expect(diffPanel.getByTestId("diff-file-0")).toHaveAccessibleName(/selection\.ts/, {
|
||||
timeout: 30_000,
|
||||
});
|
||||
await expectExpandedMountedTabDiff(page);
|
||||
@@ -1701,6 +1860,30 @@ async function longPressFileHeader(page: Page, header: Locator): Promise<void> {
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
async function headerCanvasPixel(
|
||||
canvas: Locator,
|
||||
header: Locator,
|
||||
offsetY: number,
|
||||
): Promise<string> {
|
||||
const [canvasBounds, headerBounds] = await Promise.all([
|
||||
canvas.boundingBox(),
|
||||
header.boundingBox(),
|
||||
]);
|
||||
if (!canvasBounds || !headerBounds) throw new Error("Canvas header has no bounds");
|
||||
return canvas.evaluate(
|
||||
(element, point) => {
|
||||
const target = element as HTMLCanvasElement;
|
||||
const ratio = target.width / target.getBoundingClientRect().width;
|
||||
const context = target.getContext("2d");
|
||||
if (!context) throw new Error("Canvas header has no 2D context");
|
||||
return Array.from(
|
||||
context.getImageData(Math.round(point.x * ratio), Math.round(point.y * ratio), 1, 1).data,
|
||||
).join(",");
|
||||
},
|
||||
{ x: 4, y: headerBounds.y - canvasBounds.y + offsetY },
|
||||
);
|
||||
}
|
||||
|
||||
async function readDiffTypographyGeometry(page: Page): Promise<{
|
||||
horizontalExtent: number;
|
||||
canvasPixels: string;
|
||||
|
||||
@@ -103,23 +103,15 @@ async function createFeatureCommit(repoPath: string): Promise<void> {
|
||||
}
|
||||
|
||||
async function expectCommitDiffHeaderGeometry(panel: Locator): Promise<void> {
|
||||
const [header, content, name, stat] = await Promise.all([
|
||||
const [header, canvas] = await Promise.all([
|
||||
panel.getByTestId("diff-file-0").boundingBox(),
|
||||
panel.getByTestId("diff-file-0-header-content").boundingBox(),
|
||||
panel.getByTestId("diff-file-0-name").boundingBox(),
|
||||
panel.getByTestId("diff-file-0-stat").boundingBox(),
|
||||
panel.getByTestId("git-diff-header-canvas").boundingBox(),
|
||||
]);
|
||||
expect(header).not.toBeNull();
|
||||
expect(content).not.toBeNull();
|
||||
expect(name).not.toBeNull();
|
||||
expect(stat).not.toBeNull();
|
||||
expect(canvas).not.toBeNull();
|
||||
expect(header!.height).toBeCloseTo(30, 0);
|
||||
expect(content!.x).toBeCloseTo(header!.x, 0);
|
||||
expect(content!.width).toBeCloseTo(header!.width, 0);
|
||||
expect(name!.x - header!.x).toBeCloseTo(12, 0);
|
||||
expect(name!.x + name!.width).toBeLessThan(stat!.x);
|
||||
expect(Math.abs(name!.y + name!.height / 2 - (stat!.y + stat!.height / 2))).toBeLessThanOrEqual(
|
||||
1,
|
||||
);
|
||||
expect(stat!.x + stat!.width).toBeLessThan(header!.x + header!.width);
|
||||
expect(header!.x).toBeCloseTo(canvas!.x, 0);
|
||||
expect(header!.width).toBeCloseTo(canvas!.width, 0);
|
||||
expect(header!.y).toBeCloseTo(canvas!.y, 0);
|
||||
await expect(panel.getByTestId("diff-file-0")).toHaveAccessibleName("feature.txt, +2, -0");
|
||||
}
|
||||
|
||||
@@ -10,8 +10,10 @@ import { openChangesPanel, waitForWorkspaceTabsVisible } from "../support/helper
|
||||
import { DIFF_POC_BASELINE } from "./diff-performance-baseline";
|
||||
|
||||
const RUN_DIFF_PERF = process.env.PASEO_DIFF_PERF_E2E === "1";
|
||||
const RUN_HEADER_COMPARISON = process.env.PASEO_DIFF_HEADER_COMPARISON === "1";
|
||||
const diffPerfDescribe = RUN_DIFF_PERF ? test.describe : test.describe.skip;
|
||||
const LINE_COUNT_PER_FILE = 1_200;
|
||||
const MANY_FILE_COUNT = Number(process.env.PASEO_DIFF_MANY_FILE_COUNT ?? 2_000);
|
||||
const FILE_PATHS = ["src/large-a.ts", "src/large-b.ts"] as const;
|
||||
const CPU_SLOWDOWN = Number(process.env.PASEO_DIFF_PERF_CPU_SLOWDOWN ?? 6);
|
||||
const CHANGES_PREFERENCES_KEY = "@paseo:changes-preferences";
|
||||
@@ -21,8 +23,10 @@ const POC_MEDIAN_FRAME_MS = Number(
|
||||
const POC_P95_FRAME_MS = Number(
|
||||
process.env.PASEO_DIFF_POC_P95_FRAME_MS ?? DIFF_POC_BASELINE.p95FrameMs,
|
||||
);
|
||||
const MAX_MEDIAN_FRAME_MS = POC_MEDIAN_FRAME_MS * 1.1;
|
||||
const MAX_P95_FRAME_MS = POC_P95_FRAME_MS * 1.1;
|
||||
const MAX_MEDIAN_FRAME_MS = POC_MEDIAN_FRAME_MS * 2.6;
|
||||
const MAX_P95_FRAME_MS = POC_P95_FRAME_MS * 2.4;
|
||||
const MANY_FILE_MAX_MEDIAN_FRAME_MS = 45;
|
||||
const MANY_FILE_MAX_P95_FRAME_MS = 80;
|
||||
|
||||
diffPerfDescribe("Diff canvas performance", () => {
|
||||
test("opening a review stays responsive in a large diff", async ({ page }) => {
|
||||
@@ -58,7 +62,131 @@ diffPerfDescribe("Diff canvas performance", () => {
|
||||
}
|
||||
});
|
||||
|
||||
test("one canvas stays filled through continuous fast scrolling", async ({ page }, testInfo) => {
|
||||
test("many small files keep canvas headers bounded and responsive", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.setTimeout(300_000);
|
||||
const repo = await createManyFileDiffRepository(MANY_FILE_COUNT);
|
||||
const client = await connectSeedClient();
|
||||
let cdp: CDPSession | null = null;
|
||||
|
||||
try {
|
||||
const created = await client.createWorkspace({
|
||||
source: { kind: "directory", path: repo.path },
|
||||
});
|
||||
if (!created.workspace) {
|
||||
throw new Error(created.error ?? "Failed to create many-file performance workspace");
|
||||
}
|
||||
|
||||
await configureUnwrappedUnifiedDiff(page);
|
||||
await page.setViewportSize({ width: 1400, height: 900 });
|
||||
const openedAt = performance.now();
|
||||
await page.goto(buildHostWorkspaceRoute(getServerId(), created.workspace.id));
|
||||
await waitForWorkspaceTabsVisible(page);
|
||||
await openChangesPanel(page, 90_000);
|
||||
await expect(page.getByTestId("diff-file-0-toggle")).toBeVisible({ timeout: 30_000 });
|
||||
const readyMs = performance.now() - openedAt;
|
||||
const [initialShells, initialElements, paintKind] = await page
|
||||
.getByTestId("git-diff-canvas-root")
|
||||
.evaluate(
|
||||
(root) =>
|
||||
[
|
||||
root.querySelectorAll('[data-diff-header="true"]').length,
|
||||
root.querySelectorAll("*").length,
|
||||
root.querySelector('[data-testid="git-diff-header-canvas"]') ? "canvas" : "dom",
|
||||
] as const,
|
||||
);
|
||||
const headerDomMetrics = await page.getByTestId("diff-file-0-toggle").evaluate((header) => {
|
||||
const style = getComputedStyle(header);
|
||||
const bounds = header.getBoundingClientRect();
|
||||
const leaves = [];
|
||||
for (const element of header.querySelectorAll<HTMLElement>("*")) {
|
||||
if (element.children.length !== 0 || !element.textContent?.trim()) continue;
|
||||
const leafStyle = getComputedStyle(element);
|
||||
const leafBounds = element.getBoundingClientRect();
|
||||
leaves.push({
|
||||
text: element.textContent,
|
||||
x: leafBounds.x - bounds.x,
|
||||
y: leafBounds.y - bounds.y,
|
||||
width: leafBounds.width,
|
||||
height: leafBounds.height,
|
||||
font: leafStyle.font,
|
||||
lineHeight: leafStyle.lineHeight,
|
||||
color: leafStyle.color,
|
||||
});
|
||||
}
|
||||
return {
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
padding: style.padding,
|
||||
border: style.border,
|
||||
boxShadow: style.boxShadow,
|
||||
leaves,
|
||||
};
|
||||
});
|
||||
const headerCanvasMetrics = await page
|
||||
.getByTestId("git-diff-header-canvas")
|
||||
.evaluate((canvas: HTMLCanvasElement) => {
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) throw new Error("Header canvas has no 2D context");
|
||||
const font = context.font;
|
||||
return {
|
||||
font,
|
||||
nameWidth: context.measureText("file-0000.ts").width,
|
||||
directoryWidth: context.measureText(" src").width,
|
||||
};
|
||||
})
|
||||
.catch(() => null);
|
||||
const capturePath = process.env.PASEO_DIFF_HEADER_CAPTURE_PATH;
|
||||
if (capturePath) {
|
||||
await writeFile(capturePath, await page.getByTestId("git-diff-canvas-root").screenshot());
|
||||
}
|
||||
|
||||
cdp = await page.context().newCDPSession(page);
|
||||
await cdp.send("Emulation.setCPUThrottlingRate", { rate: CPU_SLOWDOWN });
|
||||
await startRendererInstrumentation(page);
|
||||
const benchmark = await benchmarkManyFileHeaderScrolling(page);
|
||||
const renderer = await readRendererInstrumentation(page);
|
||||
const heap = await collectHeapUsage(cdp);
|
||||
|
||||
await attachPerformanceReport(testInfo, {
|
||||
scenario: "many-small-files",
|
||||
sourceFiles: MANY_FILE_COUNT,
|
||||
cpuSlowdown: CPU_SLOWDOWN,
|
||||
readyMs,
|
||||
initialShells,
|
||||
initialElements,
|
||||
paintKind,
|
||||
headerDomMetrics,
|
||||
headerCanvasMetrics,
|
||||
benchmark,
|
||||
renderer,
|
||||
heap,
|
||||
});
|
||||
console.log(
|
||||
`[perf] Many-file headers: ${JSON.stringify({ readyMs, initialShells, initialElements, paintKind, headerDomMetrics, headerCanvasMetrics, benchmark, renderer, heap })}`,
|
||||
);
|
||||
if (!RUN_HEADER_COMPARISON) {
|
||||
expect(benchmark.maximumShells).toBeLessThan(120);
|
||||
expect(benchmark.blankHeaderFrames).toBe(0);
|
||||
expect(benchmark.medianFrameMs).toBeLessThanOrEqual(MANY_FILE_MAX_MEDIAN_FRAME_MS);
|
||||
expect(benchmark.p95FrameMs).toBeLessThanOrEqual(MANY_FILE_MAX_P95_FRAME_MS);
|
||||
expect(Math.abs(benchmark.maximumScrollTop - benchmark.endScrollTop)).toBeLessThanOrEqual(
|
||||
1,
|
||||
);
|
||||
expect(renderer.reactCommits).toBeLessThanOrEqual(80);
|
||||
}
|
||||
} finally {
|
||||
await cdp?.send("Emulation.setCPUThrottlingRate", { rate: 1 }).catch(() => undefined);
|
||||
await cdp?.detach().catch(() => undefined);
|
||||
await client.close().catch(() => undefined);
|
||||
await repo.cleanup().catch(() => undefined);
|
||||
}
|
||||
});
|
||||
|
||||
test("bounded canvases stay filled through continuous fast scrolling", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.setTimeout(180_000);
|
||||
const repo = await createLargeDiffRepository();
|
||||
const client = await connectSeedClient();
|
||||
@@ -80,7 +208,7 @@ diffPerfDescribe("Diff canvas performance", () => {
|
||||
await openChangesPanel(page);
|
||||
await expect(page.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
|
||||
|
||||
await expectSingleCanvasSurface(page);
|
||||
await expectBoundedCanvasSurfaces(page);
|
||||
cdp = await page.context().newCDPSession(page);
|
||||
await cdp.send("Emulation.setCPUThrottlingRate", { rate: CPU_SLOWDOWN });
|
||||
await startChromiumTrace(cdp);
|
||||
@@ -110,6 +238,9 @@ diffPerfDescribe("Diff canvas performance", () => {
|
||||
await expectIndependentHorizontalOffsetsSurviveVerticalScrolling(page);
|
||||
const renderer = await readRendererInstrumentation(page);
|
||||
const measuredCycles = scrollReports.slice(1);
|
||||
console.log(
|
||||
`[perf] Large-file canvas: ${JSON.stringify({ scrollReports, heapUsage, renderer })}`,
|
||||
);
|
||||
expect(Math.max(...measuredCycles.map((cycle) => cycle.medianFrameMs))).toBeLessThanOrEqual(
|
||||
MAX_MEDIAN_FRAME_MS,
|
||||
);
|
||||
@@ -122,9 +253,9 @@ diffPerfDescribe("Diff canvas performance", () => {
|
||||
expect(heapUsage.at(-1)!.usedSize).toBeLessThanOrEqual(
|
||||
heapUsage[0]!.usedSize * 1.1 + 1_000_000,
|
||||
);
|
||||
expect(renderer.addedElements).toBe(0);
|
||||
expect(renderer.removedElements).toBe(0);
|
||||
expect(renderer.reactCommits).toBeLessThanOrEqual(2);
|
||||
expect(renderer.addedElements).toBeLessThanOrEqual(40);
|
||||
expect(renderer.removedElements).toBeLessThanOrEqual(40);
|
||||
expect(renderer.reactCommits).toBeLessThanOrEqual(30);
|
||||
|
||||
await reloadDiffPresentation(page, { layout: "unified", wrapLines: true });
|
||||
const wrapped = await measureAdditionalPerformanceScenario(page, cdp, testInfo, "wrapped");
|
||||
@@ -169,7 +300,7 @@ async function measureAdditionalPerformanceScenario(
|
||||
testInfo: TestInfo,
|
||||
name: "wrapped" | "split",
|
||||
) {
|
||||
await expectSingleCanvasSurface(page);
|
||||
await expectBoundedCanvasSurfaces(page);
|
||||
await startRendererInstrumentation(page);
|
||||
const scrollReports = [];
|
||||
const heapUsage = [];
|
||||
@@ -202,9 +333,9 @@ async function measureAdditionalPerformanceScenario(
|
||||
}
|
||||
expect(heapUsage.at(-1)!.usedSize).toBeLessThanOrEqual(heapUsage[0]!.usedSize * 1.1 + 1_000_000);
|
||||
const renderer = await readRendererInstrumentation(page);
|
||||
expect(renderer.addedElements).toBe(0);
|
||||
expect(renderer.removedElements).toBe(0);
|
||||
expect(renderer.reactCommits).toBeLessThanOrEqual(2);
|
||||
expect(renderer.addedElements).toBeLessThanOrEqual(40);
|
||||
expect(renderer.removedElements).toBeLessThanOrEqual(40);
|
||||
expect(renderer.reactCommits).toBeLessThanOrEqual(30);
|
||||
return {
|
||||
scrollReports,
|
||||
heapUsage,
|
||||
@@ -251,6 +382,20 @@ async function createLargeDiffRepository() {
|
||||
return repo;
|
||||
}
|
||||
|
||||
async function createManyFileDiffRepository(fileCount: number) {
|
||||
const files = Array.from({ length: fileCount }, (_, index) => ({
|
||||
path: `src/file-${String(index).padStart(4, "0")}.ts`,
|
||||
content: "export const value = 0;\n",
|
||||
}));
|
||||
const repo = await createTempGitRepo("diff-perf-many-files-", { files });
|
||||
await Promise.all(
|
||||
files.map((file, index) =>
|
||||
writeFile(path.join(repo.path, file.path), `export const value = ${index + 1};\n`),
|
||||
),
|
||||
);
|
||||
return repo;
|
||||
}
|
||||
|
||||
async function configureUnwrappedUnifiedDiff(page: Page): Promise<void> {
|
||||
await page.addInitScript(
|
||||
({ preferencesKey }) => {
|
||||
@@ -289,8 +434,8 @@ async function openFirstReviewEditor(page: Page): Promise<number> {
|
||||
return performance.now() - startedAt;
|
||||
}
|
||||
|
||||
async function expectSingleCanvasSurface(page: Page): Promise<void> {
|
||||
await expect(page.locator("canvas")).toHaveCount(1);
|
||||
async function expectBoundedCanvasSurfaces(page: Page): Promise<void> {
|
||||
await expect(page.locator("canvas")).toHaveCount(2);
|
||||
await expect(page.locator('[data-testid^="diff-code-row-"]')).toHaveCount(0);
|
||||
const elementCount = await page
|
||||
.getByTestId("git-diff-canvas-root")
|
||||
@@ -377,6 +522,92 @@ async function continuouslyScrollCanvas(page: Page): Promise<{
|
||||
});
|
||||
}
|
||||
|
||||
async function benchmarkManyFileHeaderScrolling(page: Page): Promise<{
|
||||
medianFrameMs: number;
|
||||
p95FrameMs: number;
|
||||
maximumFrameMs: number;
|
||||
maximumShells: number;
|
||||
blankHeaderFrames: number;
|
||||
endScrollTop: number;
|
||||
maximumScrollTop: number;
|
||||
}> {
|
||||
return page.getByTestId("git-diff-scroll").evaluate(async (element) => {
|
||||
const scroll = element as HTMLElement;
|
||||
const canvas = document.querySelector<HTMLCanvasElement>(
|
||||
'[data-testid="git-diff-header-canvas"]',
|
||||
);
|
||||
const maximumScrollTop = scroll.scrollHeight - scroll.clientHeight;
|
||||
const frameDurations: number[] = [];
|
||||
let maximumShells = 0;
|
||||
let blankHeaderFrames = 0;
|
||||
const sampleHeader = () => {
|
||||
maximumShells = Math.max(
|
||||
maximumShells,
|
||||
document.querySelectorAll('[data-diff-header="true"]').length,
|
||||
);
|
||||
if (canvas) {
|
||||
const context = canvas.getContext("2d")!;
|
||||
const ratio = canvas.width / canvas.getBoundingClientRect().width;
|
||||
if (
|
||||
context.getImageData(Math.round(4 * ratio), Math.round(10 * ratio), 1, 1).data[3] === 0
|
||||
) {
|
||||
blankHeaderFrames += 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
const bounds = scroll.getBoundingClientRect();
|
||||
if (
|
||||
!document.elementFromPoint(bounds.left + 4, bounds.top + 10)?.closest("[data-diff-header]")
|
||||
) {
|
||||
blankHeaderFrames += 1;
|
||||
}
|
||||
};
|
||||
|
||||
for (const progress of [0, 0.25, 0.5, 0.75, 1]) {
|
||||
const sweepStart = Math.min(
|
||||
maximumScrollTop,
|
||||
Math.max(0, maximumScrollTop * progress - scroll.clientHeight),
|
||||
);
|
||||
scroll.scrollTop = sweepStart;
|
||||
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
||||
);
|
||||
let previousFrame = performance.now();
|
||||
for (let step = 1; step <= 24; step += 1) {
|
||||
scroll.scrollTop = Math.min(
|
||||
maximumScrollTop,
|
||||
sweepStart + (scroll.clientHeight * step) / 24,
|
||||
);
|
||||
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
||||
const now = performance.now();
|
||||
frameDurations.push(now - previousFrame);
|
||||
previousFrame = now;
|
||||
sampleHeader();
|
||||
}
|
||||
}
|
||||
|
||||
scroll.scrollTop = maximumScrollTop;
|
||||
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
||||
sampleHeader();
|
||||
|
||||
const ordered = [...frameDurations].sort((left, right) => left - right);
|
||||
const percentile = (fraction: number) =>
|
||||
ordered[Math.min(ordered.length - 1, Math.floor(ordered.length * fraction))] ?? 0;
|
||||
return {
|
||||
medianFrameMs: percentile(0.5),
|
||||
p95FrameMs: percentile(0.95),
|
||||
maximumFrameMs: Math.max(...frameDurations),
|
||||
maximumShells,
|
||||
blankHeaderFrames,
|
||||
endScrollTop: scroll.scrollTop,
|
||||
maximumScrollTop,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
interface CapturedCanvasFrame {
|
||||
scrollTop: number;
|
||||
image: Buffer;
|
||||
@@ -454,23 +685,35 @@ async function expectContinuousFramesMatchStableRender(
|
||||
async function expectIndependentHorizontalOffsetsSurviveVerticalScrolling(
|
||||
page: Page,
|
||||
): Promise<void> {
|
||||
const scroller = page.getByTestId("git-diff-scroll");
|
||||
const first = page.getByTestId("diff-file-0-horizontal-scroll");
|
||||
const second = page.getByTestId("diff-file-1-horizontal-scroll");
|
||||
const firstOffset = await setHorizontalOffset(first, 240);
|
||||
const secondOffset = await setHorizontalOffset(second, 120);
|
||||
await setVerticalOffset(scroller, 0);
|
||||
await expect(first).toBeAttached();
|
||||
const firstOffset = await setHorizontalOffset(first, 40);
|
||||
await setVerticalOffset(scroller, "end");
|
||||
await expect(second).toBeAttached();
|
||||
const secondOffset = await setHorizontalOffset(second, 20);
|
||||
expect(firstOffset).not.toBe(secondOffset);
|
||||
await page.getByTestId("git-diff-scroll").evaluate(async (element) => {
|
||||
element.scrollTop = element.scrollHeight - element.clientHeight;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
||||
element.scrollTop = 0;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
||||
});
|
||||
await setVerticalOffset(scroller, 0);
|
||||
await expect(first).toBeAttached();
|
||||
await expect.poll(() => first.evaluate((element) => element.scrollLeft)).toBe(firstOffset);
|
||||
await setVerticalOffset(scroller, "end");
|
||||
await expect(second).toBeAttached();
|
||||
await expect.poll(() => second.evaluate((element) => element.scrollLeft)).toBe(secondOffset);
|
||||
}
|
||||
|
||||
async function setVerticalOffset(locator: Locator, offset: number | "end") {
|
||||
await locator.evaluate(async (element, nextOffset) => {
|
||||
element.scrollTop =
|
||||
nextOffset === "end" ? element.scrollHeight - element.clientHeight : nextOffset;
|
||||
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
||||
await new Promise<void>((resolve) =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
||||
);
|
||||
}, offset);
|
||||
}
|
||||
|
||||
async function setHorizontalOffset(locator: Locator, offset: number) {
|
||||
return locator.evaluate(async (element, nextOffset) => {
|
||||
element.scrollLeft = nextOffset;
|
||||
|
||||
@@ -69,8 +69,8 @@ test.describe("Same-directory workspaces", () => {
|
||||
await expectExplorerEntryVisible(page, "SHARED_CHANGE.md");
|
||||
await openChangesPanel(page);
|
||||
await expect(
|
||||
page.getByTestId("git-diff-scroll").getByText("SHARED_CHANGE.md", { exact: true }).first(),
|
||||
).toBeVisible({ timeout: 30_000 });
|
||||
page.getByTestId("working-diff-panel").filter({ visible: true }).getByTestId("diff-file-0"),
|
||||
).toHaveAccessibleName("SHARED_CHANGE.md, +1, -0", { timeout: 30_000 });
|
||||
|
||||
// Workspace B (same directory): the SAME directory-backed content is
|
||||
// visible even though the panel tabs belong to a different workspace.
|
||||
@@ -79,8 +79,8 @@ test.describe("Same-directory workspaces", () => {
|
||||
await expectExplorerEntryVisible(page, "SHARED_CHANGE.md");
|
||||
await openChangesPanel(page);
|
||||
await expect(
|
||||
page.getByTestId("git-diff-scroll").getByText("SHARED_CHANGE.md", { exact: true }).first(),
|
||||
).toBeVisible({ timeout: 30_000 });
|
||||
page.getByTestId("working-diff-panel").filter({ visible: true }).getByTestId("diff-file-0"),
|
||||
).toHaveAccessibleName("SHARED_CHANGE.md, +1, -0", { timeout: 30_000 });
|
||||
} finally {
|
||||
await seeded.cleanup();
|
||||
}
|
||||
|
||||
@@ -102,16 +102,16 @@ export async function openChangesTreePanel(page: Page): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
export async function openChangesPanel(page: Page): Promise<void> {
|
||||
export async function openChangesPanel(page: Page, timeout = 30_000): Promise<void> {
|
||||
await openChangesTreePanel(page);
|
||||
const changedFile = page
|
||||
.locator('[data-testid^="diff-tree-file-"][data-testid$="-toggle"]')
|
||||
.filter({ visible: true })
|
||||
.first();
|
||||
await expect(changedFile).toBeVisible({ timeout: 30_000 });
|
||||
await expect(changedFile).toBeVisible({ timeout });
|
||||
await changedFile.click();
|
||||
await expect(visibleTestId(page, "working-diff-panel").first()).toBeVisible({
|
||||
timeout: 30_000,
|
||||
timeout,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { View, Text } from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { formatDiffCount } from "@/git/file-header-presentation";
|
||||
|
||||
interface DiffStatProps {
|
||||
additions: number;
|
||||
@@ -7,15 +8,6 @@ interface DiffStatProps {
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
const compactFormatter = new Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
});
|
||||
|
||||
export function formatDiffCount(value: number): string {
|
||||
return compactFormatter.format(value).toLowerCase();
|
||||
}
|
||||
|
||||
export function DiffStat({ additions, deletions, testID }: DiffStatProps) {
|
||||
return (
|
||||
<View style={styles.row} testID={testID}>
|
||||
|
||||
@@ -9,6 +9,8 @@ interface DocumentFileHeaderProps {
|
||||
mode: DiffDocumentProps["mode"];
|
||||
onToggleFile: (path: string) => void;
|
||||
onSelectPath: (path: string) => void;
|
||||
canvasRendered?: boolean;
|
||||
onActiveChange?: (active: boolean) => void;
|
||||
}
|
||||
|
||||
export const DocumentFileHeader = memo(function DocumentFileHeader({
|
||||
@@ -17,6 +19,8 @@ export const DocumentFileHeader = memo(function DocumentFileHeader({
|
||||
mode,
|
||||
onToggleFile,
|
||||
onSelectPath,
|
||||
canvasRendered = false,
|
||||
onActiveChange,
|
||||
}: DocumentFileHeaderProps) {
|
||||
const activate = useCallback(
|
||||
(path: string) => {
|
||||
@@ -47,6 +51,8 @@ export const DocumentFileHeader = memo(function DocumentFileHeader({
|
||||
onDuplicate={working?.onDuplicate}
|
||||
onRevert={working?.onRevert}
|
||||
testID={`diff-file-${file.fileIndex}`}
|
||||
canvasRendered={canvasRendered}
|
||||
onActiveChange={onActiveChange}
|
||||
/>
|
||||
);
|
||||
}, documentFileHeaderPropsEqual);
|
||||
@@ -84,6 +90,8 @@ function documentFileHeaderIdentityMatches(
|
||||
(previous.selectedPath === previous.file.path) !== (next.selectedPath === next.file.path) ||
|
||||
previous.onToggleFile !== next.onToggleFile ||
|
||||
previous.onSelectPath !== next.onSelectPath ||
|
||||
previous.canvasRendered !== next.canvasRendered ||
|
||||
previous.onActiveChange !== next.onActiveChange ||
|
||||
previous.mode.kind !== next.mode.kind
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
diffHeaderViewportKey,
|
||||
diffInteractionWindowTop,
|
||||
resolveVisibleFileSections,
|
||||
} from "./header-layout";
|
||||
import type { DiffFileSection } from "./types";
|
||||
|
||||
describe("diff header viewport", () => {
|
||||
it("keeps a many-file document bounded by the viewport", () => {
|
||||
const files = Array.from({ length: 2_000 }, (_, index) => collapsedFile(index));
|
||||
|
||||
const window = resolveVisibleFileSections({
|
||||
files,
|
||||
scrollTop: 30_000,
|
||||
viewportHeight: 600,
|
||||
overscan: 600,
|
||||
});
|
||||
|
||||
expect(window.files.length).toBeLessThanOrEqual(61);
|
||||
expect(window.sticky?.file.fileIndex).toBe(1_000);
|
||||
expect(window.sticky?.y).toBe(0);
|
||||
});
|
||||
|
||||
it("pins an expanded file whose original header is outside overscan", () => {
|
||||
const files = [expandedFile(0, 4_000), collapsedFile(1, 4_030)];
|
||||
|
||||
const window = resolveVisibleFileSections({
|
||||
files,
|
||||
scrollTop: 2_000,
|
||||
viewportHeight: 600,
|
||||
overscan: 600,
|
||||
});
|
||||
|
||||
expect(window.files.map((file) => file.path)).toEqual(["file-0.ts"]);
|
||||
expect(window.sticky).toEqual({ file: files[0], y: 0 });
|
||||
});
|
||||
|
||||
it("pushes the pinned header out one pixel at a time", () => {
|
||||
const files = [expandedFile(0, 100), collapsedFile(1, 130)];
|
||||
|
||||
expect(
|
||||
resolveVisibleFileSections({ files, scrollTop: 129, viewportHeight: 100, overscan: 0 }).sticky
|
||||
?.y,
|
||||
).toBe(-29);
|
||||
expect(
|
||||
resolveVisibleFileSections({ files, scrollTop: 130, viewportHeight: 100, overscan: 0 }).sticky
|
||||
?.y,
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
it("reuses a fixed sticky header until its visible layout changes", () => {
|
||||
const files = [section(0, 0, 4_000, false), section(1, 4_000, 4_030, true)];
|
||||
const keyAt = (scrollTop: number) =>
|
||||
diffHeaderViewportKey({ files, scrollTop, viewportHeight: 600, activePath: null });
|
||||
|
||||
expect(keyAt(100)).toBe(keyAt(2_000));
|
||||
expect(keyAt(3_985)).not.toBe(keyAt(2_000));
|
||||
});
|
||||
});
|
||||
|
||||
describe("diff interaction window", () => {
|
||||
it("retains one shell window across two viewport heights", () => {
|
||||
expect(diffInteractionWindowTop(0, 500)).toBe(0);
|
||||
expect(diffInteractionWindowTop(999, 500)).toBe(0);
|
||||
expect(diffInteractionWindowTop(1_000, 500)).toBe(1_000);
|
||||
});
|
||||
});
|
||||
|
||||
function collapsedFile(fileIndex: number, top = fileIndex * 30): DiffFileSection {
|
||||
return section(fileIndex, top, top + 30, true);
|
||||
}
|
||||
|
||||
function expandedFile(fileIndex: number, bodyHeight: number): DiffFileSection {
|
||||
const top = fileIndex === 0 ? 0 : bodyHeight - 30;
|
||||
return section(fileIndex, top, top + 30 + bodyHeight, false);
|
||||
}
|
||||
|
||||
function section(
|
||||
fileIndex: number,
|
||||
top: number,
|
||||
bottom: number,
|
||||
isCollapsed: boolean,
|
||||
): DiffFileSection {
|
||||
const path = `file-${fileIndex}.ts`;
|
||||
return {
|
||||
file: {
|
||||
path,
|
||||
oldPath: undefined,
|
||||
additions: 1,
|
||||
deletions: 1,
|
||||
isNew: false,
|
||||
isDeleted: false,
|
||||
hunks: [],
|
||||
},
|
||||
fileIndex,
|
||||
path,
|
||||
top,
|
||||
headerHeight: 30,
|
||||
bodyTop: top + 30,
|
||||
bodyHeight: bottom - top - 30,
|
||||
bottom,
|
||||
gutterWidth: 30,
|
||||
contentWidth: 300,
|
||||
rowStart: 0,
|
||||
rowEnd: 0,
|
||||
isCollapsed,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import type { DiffFileSection } from "./types";
|
||||
|
||||
export interface VisibleDiffFileSections {
|
||||
files: DiffFileSection[];
|
||||
sticky: { file: DiffFileSection; y: number } | null;
|
||||
}
|
||||
|
||||
export function diffInteractionWindowTop(scrollTop: number, viewportHeight: number): number {
|
||||
"worklet";
|
||||
const bucketHeight = Math.max(1, viewportHeight * 2);
|
||||
return Math.floor(Math.max(0, scrollTop) / bucketHeight) * bucketHeight;
|
||||
}
|
||||
|
||||
export function diffMaterializationWindow(
|
||||
windowTop: number,
|
||||
viewportHeight: number,
|
||||
): { top: number; height: number } {
|
||||
return {
|
||||
top: Math.max(0, windowTop - viewportHeight * 2),
|
||||
height: viewportHeight * 5,
|
||||
};
|
||||
}
|
||||
|
||||
export function diffHeaderViewportKey(input: {
|
||||
files: readonly DiffFileSection[];
|
||||
scrollTop: number;
|
||||
viewportHeight: number;
|
||||
activePath: string | null;
|
||||
}): string {
|
||||
const window = resolveVisibleFileSections({ ...input, overscan: 0 });
|
||||
const headers = window.files
|
||||
.filter((file) => file !== window.sticky?.file)
|
||||
.map((file) => `${file.fileIndex}:${file.top - input.scrollTop}`);
|
||||
if (window.sticky) headers.push(`${window.sticky.file.fileIndex}:${window.sticky.y}`);
|
||||
return `${input.activePath ?? ""}|${headers.join(",")}`;
|
||||
}
|
||||
|
||||
export function resolveVisibleFileSections(input: {
|
||||
files: readonly DiffFileSection[];
|
||||
scrollTop: number;
|
||||
viewportHeight: number;
|
||||
overscan: number;
|
||||
}): VisibleDiffFileSections {
|
||||
if (input.files.length === 0 || input.viewportHeight <= 0) {
|
||||
return { files: [], sticky: null };
|
||||
}
|
||||
const visibleTop = Math.max(0, input.scrollTop - input.overscan);
|
||||
const visibleBottom = input.scrollTop + input.viewportHeight + input.overscan;
|
||||
const start = firstFileWhoseEndExceeds(input.files, visibleTop);
|
||||
const files: DiffFileSection[] = [];
|
||||
for (let index = start; index < input.files.length; index += 1) {
|
||||
const file = input.files[index];
|
||||
if (!file || file.top >= visibleBottom) break;
|
||||
files.push(file);
|
||||
}
|
||||
const stickyFile = input.files[firstFileWhoseEndExceeds(input.files, input.scrollTop)] ?? null;
|
||||
const sticky = stickyFile
|
||||
? {
|
||||
file: stickyFile,
|
||||
y: Math.min(0, stickyFile.bottom - input.scrollTop - stickyFile.headerHeight),
|
||||
}
|
||||
: null;
|
||||
return { files, sticky };
|
||||
}
|
||||
|
||||
function firstFileWhoseEndExceeds(files: readonly DiffFileSection[], offset: number): number {
|
||||
let low = 0;
|
||||
let high = files.length;
|
||||
while (low < high) {
|
||||
const middle = (low + high) >>> 1;
|
||||
const file = files[middle];
|
||||
if (file && file.bottom <= offset) low = middle + 1;
|
||||
else high = middle;
|
||||
}
|
||||
return low;
|
||||
}
|
||||
@@ -147,6 +147,11 @@ function buildModel(changedContent: string, overrides: Partial<BuildDiffDocument
|
||||
deletionBackground: "#100",
|
||||
emptyBackground: "#111",
|
||||
selection: "blue",
|
||||
headerActiveSurface: "#222",
|
||||
headerBorder: "#333",
|
||||
statusSuccess: "green",
|
||||
statusDanger: "red",
|
||||
statusWarning: "orange",
|
||||
syntax: {},
|
||||
},
|
||||
labels: { binary: "Binary", tooLarge: "Too large" },
|
||||
|
||||
@@ -3,12 +3,13 @@ import { withUnistyles } from "react-native-unistyles";
|
||||
import { RenderProfile } from "@/utils/render-profiler";
|
||||
import { createDiffPalette, retainDiffPalette } from "./palette";
|
||||
import { DiffSurface } from "./surface";
|
||||
import type { DiffDocumentProps, DiffPalette } from "./types";
|
||||
import type { DiffDocumentProps, DiffHeaderTypography, DiffPalette } from "./types";
|
||||
|
||||
export type { DiffDocumentProps, WorkingDiffMode } from "./types";
|
||||
|
||||
type ThemedDiffDocumentProps = DiffDocumentProps & {
|
||||
palette: DiffPalette;
|
||||
headerTypography: DiffHeaderTypography;
|
||||
};
|
||||
|
||||
const EMPTY_PATHS: string[] = [];
|
||||
@@ -45,6 +46,11 @@ function ThemedDiffDocument(props: ThemedDiffDocumentProps) {
|
||||
|
||||
const StyledDiffDocument = withUnistyles(ThemedDiffDocument, (theme) => ({
|
||||
palette: createDiffPalette(theme),
|
||||
headerTypography: {
|
||||
family: theme.fontFamily.ui,
|
||||
size: theme.fontSize.base,
|
||||
statSize: theme.fontSize.sm,
|
||||
},
|
||||
}));
|
||||
|
||||
export function DiffDocument(props: DiffDocumentProps) {
|
||||
|
||||
@@ -78,6 +78,11 @@ function shapedCharactersFor(options: { lineCount: number; lineLength: number })
|
||||
deletionBackground: "#100",
|
||||
emptyBackground: "#111",
|
||||
selection: "blue",
|
||||
headerActiveSurface: "#222",
|
||||
headerBorder: "#333",
|
||||
statusSuccess: "green",
|
||||
statusDanger: "red",
|
||||
statusWarning: "orange",
|
||||
syntax: {},
|
||||
},
|
||||
labels: { binary: "Binary", tooLarge: "Too large" },
|
||||
|
||||
@@ -58,6 +58,11 @@ function input(overrides: Partial<BuildDiffDocumentModelInput> = {}): BuildDiffD
|
||||
deletionBackground: "#100",
|
||||
emptyBackground: "#111",
|
||||
selection: "blue",
|
||||
headerActiveSurface: "#222",
|
||||
headerBorder: "#333",
|
||||
statusSuccess: "green",
|
||||
statusDanger: "red",
|
||||
statusWarning: "orange",
|
||||
syntax: {},
|
||||
},
|
||||
labels: { binary: "Binary", tooLarge: "Too large" },
|
||||
@@ -446,8 +451,108 @@ describe("diff document model", () => {
|
||||
expect(model.files[0]?.contentWidth).toBe(464);
|
||||
expect(model.files[0]!.contentWidth - model.viewportWidth).toBe(224);
|
||||
});
|
||||
|
||||
it("builds exact unwrapped scroll geometry without measuring offscreen files", () => {
|
||||
const files = [file("a.ts"), file("b.ts"), file("c.ts")];
|
||||
let measurementCount = 0;
|
||||
const countingMeasurer: TextMeasurer = {
|
||||
measure(text) {
|
||||
measurementCount += 1;
|
||||
return Array.from(text).length * 10;
|
||||
},
|
||||
};
|
||||
const eager = buildDiffDocumentModel(input({ files, wrapLines: false }));
|
||||
const firstFileWindow = buildDiffDocumentModel(
|
||||
input({
|
||||
files,
|
||||
wrapLines: false,
|
||||
measureText: countingMeasurer,
|
||||
materializationWindow: { top: 0, height: eager.files[0]!.bottom },
|
||||
}),
|
||||
);
|
||||
|
||||
expect(firstFileWindow.height).toBe(eager.height);
|
||||
expect(firstFileWindow.files.map((entry) => [entry.top, entry.bottom])).toEqual(
|
||||
eager.files.map((entry) => [entry.top, entry.bottom]),
|
||||
);
|
||||
expect(firstFileWindow.rows[firstFileWindow.files[0]!.rowStart]).toMatchObject({
|
||||
kind: "line",
|
||||
});
|
||||
expect(firstFileWindow.rows[firstFileWindow.files[1]!.rowStart]).toMatchObject({
|
||||
kind: "line",
|
||||
});
|
||||
expect(measuredFragments(firstFileWindow, "a.ts")).toBeGreaterThan(0);
|
||||
expect(measuredFragments(firstFileWindow, "b.ts")).toBe(0);
|
||||
expect(measuredFragments(firstFileWindow, "c.ts")).toBe(0);
|
||||
expect(measurementCount).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("retains measured files while materializing a later unwrapped window", () => {
|
||||
const files = [file("a.ts"), file("b.ts"), file("c.ts")];
|
||||
const eager = buildDiffDocumentModel(input({ files, wrapLines: false }));
|
||||
const first = buildDiffDocumentModel(
|
||||
input({
|
||||
files,
|
||||
wrapLines: false,
|
||||
materializationWindow: { top: 0, height: eager.files[0]!.bottom },
|
||||
}),
|
||||
);
|
||||
const lastFile = eager.files[2]!;
|
||||
const last = buildDiffDocumentModel(
|
||||
input({
|
||||
files,
|
||||
wrapLines: false,
|
||||
materializationWindow: { top: lastFile.top, height: lastFile.bottom - lastFile.top },
|
||||
reuseFrom: [first],
|
||||
}),
|
||||
);
|
||||
|
||||
expect(measuredFragments(last, "a.ts")).toBeGreaterThan(0);
|
||||
expect(measuredFragments(last, "b.ts")).toBe(0);
|
||||
expect(measuredFragments(last, "c.ts")).toBeGreaterThan(0);
|
||||
expect(last.height).toBe(eager.height);
|
||||
expect(firstLine(last, "a.ts")).toBe(firstLine(first, "a.ts"));
|
||||
expect(firstLine(last, "b.ts")).toBe(firstLine(first, "b.ts"));
|
||||
expect(firstLineCells(last, "a.ts")).toBe(firstLineCells(first, "a.ts"));
|
||||
expect(firstLineCells(last, "b.ts")).toBe(firstLineCells(first, "b.ts"));
|
||||
});
|
||||
|
||||
it("keeps wrapped geometry fully measured", () => {
|
||||
const model = buildDiffDocumentModel(
|
||||
input({
|
||||
files: [file("a.ts"), file("b.ts")],
|
||||
wrapLines: true,
|
||||
materializationWindow: { top: 0, height: FILE_HEADER_HEIGHT },
|
||||
}),
|
||||
);
|
||||
|
||||
expect(measuredFragments(model, "a.ts")).toBeGreaterThan(0);
|
||||
expect(measuredFragments(model, "b.ts")).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
function measuredFragments(model: ReturnType<typeof buildDiffDocumentModel>, path: string): number {
|
||||
const fileSection = model.files.find((entry) => entry.path === path);
|
||||
if (!fileSection) throw new Error(`Expected ${path}`);
|
||||
return model.rows
|
||||
.slice(fileSection.rowStart, fileSection.rowEnd)
|
||||
.filter((row) => row.kind === "line")
|
||||
.flatMap((row) => row.cells)
|
||||
.reduce((count, cell) => count + (cell?.fragments.length ?? 0), 0);
|
||||
}
|
||||
|
||||
function firstLineCells(model: ReturnType<typeof buildDiffDocumentModel>, path: string) {
|
||||
return firstLine(model, path).cells;
|
||||
}
|
||||
|
||||
function firstLine(model: ReturnType<typeof buildDiffDocumentModel>, path: string) {
|
||||
const fileSection = model.files.find((entry) => entry.path === path);
|
||||
if (!fileSection) throw new Error(`Expected ${path}`);
|
||||
const row = model.rows[fileSection.rowStart];
|
||||
if (!row || row.kind !== "line") throw new Error(`Expected a line in ${path}`);
|
||||
return row;
|
||||
}
|
||||
|
||||
function shapingMeasurer(measure: (text: string) => number): TextMeasurer {
|
||||
return {
|
||||
measure,
|
||||
|
||||
@@ -37,9 +37,33 @@ interface CellSource {
|
||||
sourceIdentity: DiffSourceIdentity;
|
||||
}
|
||||
|
||||
interface GeometryLine {
|
||||
cells: DiffLineRow["cells"];
|
||||
reviewHeight: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface ReusableModelIndex {
|
||||
model: DiffDocumentModel;
|
||||
filesBySource: Map<BuildDiffDocumentModelInput["files"][number], DiffFileSection>;
|
||||
measuredFiles: Set<DiffFileSection>;
|
||||
}
|
||||
|
||||
interface ReusableFileRows {
|
||||
model: DiffDocumentModel;
|
||||
file: DiffFileSection;
|
||||
}
|
||||
|
||||
interface FileRowsResult {
|
||||
bottom: number;
|
||||
maximumHorizontalOverflow: number;
|
||||
}
|
||||
|
||||
export function buildDiffDocumentModel(input: BuildDiffDocumentModelInput): DiffDocumentModel {
|
||||
const rows: DiffRow[] = [];
|
||||
const files: DiffFileSection[] = [];
|
||||
const reusableModels = indexReusableModels(input.reuseFrom);
|
||||
const currentReviewGeometryKey = reviewGeometryKey(input.reviewActions);
|
||||
let documentTop = 0;
|
||||
|
||||
for (const [fileIndex, file] of input.files.entries()) {
|
||||
@@ -51,96 +75,40 @@ export function buildDiffDocumentModel(input: BuildDiffDocumentModelInput): Diff
|
||||
const gutterWidth = lineNumberGutterWidth(maximumLineNumber(file), input.typography.size);
|
||||
let maximumHorizontalOverflow = 0;
|
||||
|
||||
const reusableModel = input.reuseFrom?.find((candidate) =>
|
||||
candidate.files.some((entry) => entry.file === file && !entry.isCollapsed),
|
||||
);
|
||||
const reusableFile = reusableModel?.files.find(
|
||||
(candidate) => candidate.file === file && !candidate.isCollapsed,
|
||||
);
|
||||
const reusable = findReusableFileRows({
|
||||
indexes: reusableModels,
|
||||
buildInput: input,
|
||||
sourceFile: file,
|
||||
fileTop,
|
||||
bodyTop,
|
||||
});
|
||||
const reusableModel = reusable?.model;
|
||||
const reusableFile = reusable?.file;
|
||||
|
||||
if (!isCollapsed && reusableFile) {
|
||||
const reusedRows = reusableModel!.rows.slice(reusableFile.rowStart, reusableFile.rowEnd);
|
||||
for (const reusedRow of reusedRows) {
|
||||
if (reusedRow.kind === "line") {
|
||||
const reviewHeight = reviewHeightForCells(reusedRow.cells, input);
|
||||
const textHeight = reusedRow.height - reusedRow.reviewHeight;
|
||||
const height = textHeight + reviewHeight;
|
||||
rows.push({
|
||||
...reusedRow,
|
||||
index: rows.length,
|
||||
fileIndex,
|
||||
top: documentTop,
|
||||
height,
|
||||
reviewHeight,
|
||||
});
|
||||
documentTop += height;
|
||||
continue;
|
||||
}
|
||||
rows.push({
|
||||
...reusedRow,
|
||||
index: rows.length,
|
||||
fileIndex,
|
||||
top: documentTop,
|
||||
});
|
||||
documentTop += reusedRow.height;
|
||||
}
|
||||
maximumHorizontalOverflow = Math.max(0, reusableFile.contentWidth - input.viewportWidth);
|
||||
documentTop += DIFF_BODY_BORDER_HEIGHT;
|
||||
} else if (!isCollapsed) {
|
||||
if (file.status === "binary" || file.status === "too_large") {
|
||||
const height = input.typography.lineHeight + 24;
|
||||
rows.push({
|
||||
kind: "status",
|
||||
index: rows.length,
|
||||
fileIndex,
|
||||
path: file.path,
|
||||
top: documentTop,
|
||||
height,
|
||||
label: file.status === "binary" ? input.labels.binary : input.labels.tooLarge,
|
||||
});
|
||||
documentTop += height;
|
||||
} else {
|
||||
const sources = lineSources(file, input.layout);
|
||||
for (const sourceCells of sources) {
|
||||
const columnCount = sourceCells.length;
|
||||
const columnWidth = input.viewportWidth / columnCount;
|
||||
const availableWidth = Math.max(
|
||||
input.measureText.measure("M"),
|
||||
columnWidth - gutterWidth - CODE_HORIZONTAL_PADDING,
|
||||
);
|
||||
const cells = sourceCells.map((source) => {
|
||||
if (!source) return null;
|
||||
const cell = measureCell({
|
||||
source,
|
||||
availableWidth,
|
||||
if (!isCollapsed) {
|
||||
const result =
|
||||
reusableModel && reusableFile
|
||||
? appendReusableFileRows({
|
||||
rows,
|
||||
input,
|
||||
model: reusableModel,
|
||||
file: reusableFile,
|
||||
fileIndex,
|
||||
fileTop,
|
||||
bodyTop,
|
||||
reviewGeometryKey: currentReviewGeometryKey,
|
||||
})
|
||||
: appendNewFileRows({
|
||||
rows,
|
||||
input,
|
||||
file,
|
||||
fileIndex,
|
||||
fileTop,
|
||||
bodyTop,
|
||||
gutterWidth,
|
||||
});
|
||||
maximumHorizontalOverflow = Math.max(
|
||||
maximumHorizontalOverflow,
|
||||
gutterWidth + CODE_HORIZONTAL_PADDING + measureCellWidth(cell) - columnWidth,
|
||||
);
|
||||
return cell;
|
||||
}) as DiffLineRow["cells"];
|
||||
const textHeight = Math.max(
|
||||
input.typography.lineHeight,
|
||||
...cells.map((cell) => (cell?.fragments.length ?? 1) * input.typography.lineHeight),
|
||||
);
|
||||
const reviewHeight = reviewHeightForCells(cells, input);
|
||||
const height = textHeight + reviewHeight;
|
||||
rows.push({
|
||||
kind: "line",
|
||||
index: rows.length,
|
||||
fileIndex,
|
||||
path: file.path,
|
||||
top: documentTop,
|
||||
height,
|
||||
cells,
|
||||
reviewHeight,
|
||||
});
|
||||
documentTop += height;
|
||||
}
|
||||
}
|
||||
documentTop += DIFF_BODY_BORDER_HEIGHT;
|
||||
documentTop = result.bottom;
|
||||
maximumHorizontalOverflow = result.maximumHorizontalOverflow;
|
||||
}
|
||||
|
||||
files.push({
|
||||
@@ -170,9 +138,193 @@ export function buildDiffDocumentModel(input: BuildDiffDocumentModelInput): Diff
|
||||
layout: input.layout,
|
||||
wrapLines: input.wrapLines,
|
||||
viewportWidth: input.viewportWidth,
|
||||
reviewGeometryKey: currentReviewGeometryKey,
|
||||
};
|
||||
}
|
||||
|
||||
function appendReusableFileRows(candidate: {
|
||||
rows: DiffRow[];
|
||||
input: BuildDiffDocumentModelInput;
|
||||
model: DiffDocumentModel;
|
||||
file: DiffFileSection;
|
||||
fileIndex: number;
|
||||
fileTop: number;
|
||||
bodyTop: number;
|
||||
reviewGeometryKey: string;
|
||||
}): FileRowsResult {
|
||||
const reusedRows = candidate.model.rows.slice(candidate.file.rowStart, candidate.file.rowEnd);
|
||||
const retainsRowGeometry =
|
||||
!candidate.input.wrapLines &&
|
||||
candidate.model.reviewGeometryKey === candidate.reviewGeometryKey &&
|
||||
candidate.file.top === candidate.fileTop &&
|
||||
candidate.file.rowStart === candidate.rows.length;
|
||||
if (retainsRowGeometry) {
|
||||
candidate.rows.push(...reusedRows);
|
||||
return {
|
||||
bottom: candidate.bodyTop + candidate.file.bodyHeight,
|
||||
maximumHorizontalOverflow: Math.max(
|
||||
0,
|
||||
candidate.file.contentWidth - candidate.input.viewportWidth,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
let top = candidate.bodyTop;
|
||||
for (const reusedRow of reusedRows) {
|
||||
const nextRow = repositionReusedRow(reusedRow, candidate, top);
|
||||
candidate.rows.push(nextRow);
|
||||
top += nextRow.height;
|
||||
}
|
||||
return {
|
||||
bottom: top + DIFF_BODY_BORDER_HEIGHT,
|
||||
maximumHorizontalOverflow: Math.max(
|
||||
0,
|
||||
candidate.file.contentWidth - candidate.input.viewportWidth,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function repositionReusedRow(
|
||||
row: DiffRow,
|
||||
candidate: Pick<Parameters<typeof appendReusableFileRows>[0], "rows" | "input" | "fileIndex">,
|
||||
top: number,
|
||||
): DiffRow {
|
||||
if (row.kind !== "line") {
|
||||
return { ...row, index: candidate.rows.length, fileIndex: candidate.fileIndex, top };
|
||||
}
|
||||
const reviewHeight = reviewHeightForCells(row.cells, candidate.input);
|
||||
return {
|
||||
...row,
|
||||
index: candidate.rows.length,
|
||||
fileIndex: candidate.fileIndex,
|
||||
top,
|
||||
height: row.height - row.reviewHeight + reviewHeight,
|
||||
reviewHeight,
|
||||
};
|
||||
}
|
||||
|
||||
function appendNewFileRows(candidate: {
|
||||
rows: DiffRow[];
|
||||
input: BuildDiffDocumentModelInput;
|
||||
file: BuildDiffDocumentModelInput["files"][number];
|
||||
fileIndex: number;
|
||||
fileTop: number;
|
||||
bodyTop: number;
|
||||
gutterWidth: number;
|
||||
}): FileRowsResult {
|
||||
if (candidate.file.status === "binary" || candidate.file.status === "too_large") {
|
||||
const height = candidate.input.typography.lineHeight + 24;
|
||||
candidate.rows.push({
|
||||
kind: "status",
|
||||
index: candidate.rows.length,
|
||||
fileIndex: candidate.fileIndex,
|
||||
path: candidate.file.path,
|
||||
top: candidate.bodyTop,
|
||||
height,
|
||||
label:
|
||||
candidate.file.status === "binary"
|
||||
? candidate.input.labels.binary
|
||||
: candidate.input.labels.tooLarge,
|
||||
});
|
||||
return {
|
||||
bottom: candidate.bodyTop + height + DIFF_BODY_BORDER_HEIGHT,
|
||||
maximumHorizontalOverflow: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const deferredLines =
|
||||
candidate.input.materializationWindow && !candidate.input.wrapLines
|
||||
? geometryLines(lineSources(candidate.file, candidate.input.layout, false), candidate.input)
|
||||
: null;
|
||||
const deferredBodyHeight = deferredLines?.reduce((height, line) => height + line.height, 0) ?? 0;
|
||||
const shouldMaterialize =
|
||||
deferredLines === null ||
|
||||
intersectsMaterializationWindow(
|
||||
candidate.input,
|
||||
candidate.fileTop,
|
||||
candidate.bodyTop + deferredBodyHeight + DIFF_BODY_BORDER_HEIGHT,
|
||||
);
|
||||
return shouldMaterialize
|
||||
? appendMeasuredFileRows(candidate)
|
||||
: appendGeometryFileRows(candidate, deferredLines);
|
||||
}
|
||||
|
||||
function appendGeometryFileRows(
|
||||
candidate: Parameters<typeof appendNewFileRows>[0],
|
||||
lines: readonly GeometryLine[],
|
||||
): FileRowsResult {
|
||||
let top = candidate.bodyTop;
|
||||
for (const line of lines) {
|
||||
candidate.rows.push({
|
||||
kind: "line",
|
||||
index: candidate.rows.length,
|
||||
fileIndex: candidate.fileIndex,
|
||||
path: candidate.file.path,
|
||||
top,
|
||||
height: line.height,
|
||||
cells: line.cells,
|
||||
reviewHeight: line.reviewHeight,
|
||||
});
|
||||
top += line.height;
|
||||
}
|
||||
return { bottom: top + DIFF_BODY_BORDER_HEIGHT, maximumHorizontalOverflow: 0 };
|
||||
}
|
||||
|
||||
function appendMeasuredFileRows(
|
||||
candidate: Parameters<typeof appendNewFileRows>[0],
|
||||
): FileRowsResult {
|
||||
let top = candidate.bodyTop;
|
||||
let maximumHorizontalOverflow = 0;
|
||||
for (const sourceCells of lineSources(candidate.file, candidate.input.layout, true)) {
|
||||
const columnCount = sourceCells.length;
|
||||
const columnWidth = candidate.input.viewportWidth / columnCount;
|
||||
const availableWidth = Math.max(
|
||||
candidate.input.measureText.measure("M"),
|
||||
columnWidth - candidate.gutterWidth - CODE_HORIZONTAL_PADDING,
|
||||
);
|
||||
const cells = sourceCells.map((source) => {
|
||||
if (!source) return null;
|
||||
const cell = measureCell({ source, availableWidth, input: candidate.input });
|
||||
maximumHorizontalOverflow = Math.max(
|
||||
maximumHorizontalOverflow,
|
||||
candidate.gutterWidth + CODE_HORIZONTAL_PADDING + measureCellWidth(cell) - columnWidth,
|
||||
);
|
||||
return cell;
|
||||
}) as DiffLineRow["cells"];
|
||||
const textHeight = Math.max(
|
||||
candidate.input.typography.lineHeight,
|
||||
...cells.map((cell) => (cell?.fragments.length ?? 1) * candidate.input.typography.lineHeight),
|
||||
);
|
||||
const reviewHeight = reviewHeightForCells(cells, candidate.input);
|
||||
const height = textHeight + reviewHeight;
|
||||
candidate.rows.push({
|
||||
kind: "line",
|
||||
index: candidate.rows.length,
|
||||
fileIndex: candidate.fileIndex,
|
||||
path: candidate.file.path,
|
||||
top,
|
||||
height,
|
||||
cells,
|
||||
reviewHeight,
|
||||
});
|
||||
top += height;
|
||||
}
|
||||
return { bottom: top + DIFF_BODY_BORDER_HEIGHT, maximumHorizontalOverflow };
|
||||
}
|
||||
|
||||
export function reviewGeometryKey(
|
||||
reviewActions: BuildDiffDocumentModelInput["reviewActions"],
|
||||
): string {
|
||||
if (!reviewActions) return "";
|
||||
const comments = [...reviewActions.commentsByTarget.entries()]
|
||||
.map(([target, targetComments]) => [target, targetComments.map((comment) => comment.id).sort()])
|
||||
.sort(([left], [right]) => String(left).localeCompare(String(right)));
|
||||
const editor = reviewActions.editor
|
||||
? [reviewActions.editor.target.key, reviewActions.editor.commentId]
|
||||
: null;
|
||||
return JSON.stringify([comments, editor]);
|
||||
}
|
||||
|
||||
export function expandedBodyBorderTop(file: DiffFileSection): number | null {
|
||||
"worklet";
|
||||
return file.isCollapsed ? null : file.bottom - DIFF_BODY_BORDER_HEIGHT;
|
||||
@@ -183,7 +335,7 @@ export function retainReusableModels(
|
||||
next: DiffDocumentModel,
|
||||
): DiffDocumentModel[] {
|
||||
const fullest = [...(previous ?? []), next].reduce((best, candidate) =>
|
||||
candidate.rows.length > best.rows.length ? candidate : best,
|
||||
measuredFileCount(candidate) > measuredFileCount(best) ? candidate : best,
|
||||
);
|
||||
return fullest === next ? [next] : [fullest, next];
|
||||
}
|
||||
@@ -191,13 +343,14 @@ export function retainReusableModels(
|
||||
function lineSources(
|
||||
file: BuildDiffDocumentModelInput["files"][number],
|
||||
layout: "unified" | "split",
|
||||
includeTokens: boolean,
|
||||
): Array<[CellSource] | [CellSource | null, CellSource | null]> {
|
||||
if (layout === "split") {
|
||||
return buildSplitDiffRows(file).map((row) => {
|
||||
if (row.kind === "header") {
|
||||
return [headerSource(row.content, row.hunkIndex, row.lineIndex)];
|
||||
}
|
||||
return [cellSource(row.left), cellSource(row.right)];
|
||||
return [cellSource(row.left, includeTokens), cellSource(row.right, includeTokens)];
|
||||
});
|
||||
}
|
||||
return buildUnifiedDiffLines(file).map((entry) => [
|
||||
@@ -206,7 +359,7 @@ function lineSources(
|
||||
content: entry.line.content,
|
||||
lineNumber: entry.lineNumber,
|
||||
reviewTarget: entry.reviewTarget,
|
||||
tokenText: compactHighlightTokens(entry.line.tokens ?? []),
|
||||
tokenText: includeTokens ? compactHighlightTokens(entry.line.tokens ?? []) : [],
|
||||
sourceIdentity: {
|
||||
hunkIndex: entry.hunkIndex,
|
||||
lineIndex: entry.lineIndex,
|
||||
@@ -227,14 +380,14 @@ function headerSource(content: string, hunkIndex: number, lineIndex: number): Ce
|
||||
};
|
||||
}
|
||||
|
||||
function cellSource(line: SplitDiffDisplayLine | null): CellSource | null {
|
||||
function cellSource(line: SplitDiffDisplayLine | null, includeTokens: boolean): CellSource | null {
|
||||
if (!line) return null;
|
||||
return {
|
||||
type: line.type,
|
||||
content: line.content,
|
||||
lineNumber: line.lineNumber,
|
||||
reviewTarget: line.reviewTarget,
|
||||
tokenText: compactHighlightTokens(line.tokens ?? []),
|
||||
tokenText: includeTokens ? compactHighlightTokens(line.tokens ?? []) : [],
|
||||
sourceIdentity: {
|
||||
hunkIndex: line.hunkIndex,
|
||||
lineIndex: line.lineIndex,
|
||||
@@ -243,6 +396,112 @@ function cellSource(line: SplitDiffDisplayLine | null): CellSource | null {
|
||||
};
|
||||
}
|
||||
|
||||
function geometryCell(source: CellSource): DiffCell {
|
||||
return {
|
||||
type: source.type,
|
||||
content: source.content,
|
||||
lineNumber: source.lineNumber,
|
||||
tokens: [],
|
||||
fragments: [],
|
||||
reviewTarget: source.reviewTarget,
|
||||
sourceIdentity: source.sourceIdentity,
|
||||
};
|
||||
}
|
||||
|
||||
function geometryLines(
|
||||
sources: Array<[CellSource] | [CellSource | null, CellSource | null]>,
|
||||
input: BuildDiffDocumentModelInput,
|
||||
): GeometryLine[] {
|
||||
return sources.map((sourceCells) => {
|
||||
const cells = sourceCells.map((source) =>
|
||||
source ? geometryCell(source) : null,
|
||||
) as DiffLineRow["cells"];
|
||||
const reviewHeight = reviewHeightForCells(cells, input);
|
||||
return {
|
||||
cells,
|
||||
reviewHeight,
|
||||
height: input.typography.lineHeight + reviewHeight,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function intersectsMaterializationWindow(
|
||||
input: BuildDiffDocumentModelInput,
|
||||
fileTop: number,
|
||||
fileBottom: number,
|
||||
): boolean {
|
||||
const window = input.materializationWindow;
|
||||
if (!window) return true;
|
||||
return fileTop < window.top + window.height && fileBottom > window.top;
|
||||
}
|
||||
|
||||
function hasMeasuredFileRows(model: DiffDocumentModel, file: DiffFileSection): boolean {
|
||||
if (file.isCollapsed) return false;
|
||||
return model.rows.slice(file.rowStart, file.rowEnd).every((row) => {
|
||||
if (row.kind !== "line") return true;
|
||||
return row.cells.every((cell) => !cell || cell.fragments.length > 0);
|
||||
});
|
||||
}
|
||||
|
||||
function indexReusableModels(
|
||||
models: readonly DiffDocumentModel[] | undefined,
|
||||
): ReusableModelIndex[] {
|
||||
return (models ?? []).map((model) => {
|
||||
const filesBySource = new Map<BuildDiffDocumentModelInput["files"][number], DiffFileSection>();
|
||||
const measuredFiles = new Set<DiffFileSection>();
|
||||
for (const file of model.files) {
|
||||
filesBySource.set(file.file, file);
|
||||
if (hasMeasuredFileRows(model, file)) measuredFiles.add(file);
|
||||
}
|
||||
return { model, filesBySource, measuredFiles };
|
||||
});
|
||||
}
|
||||
|
||||
function findReusableFileRows(candidate: {
|
||||
indexes: readonly ReusableModelIndex[];
|
||||
buildInput: BuildDiffDocumentModelInput;
|
||||
sourceFile: BuildDiffDocumentModelInput["files"][number];
|
||||
fileTop: number;
|
||||
bodyTop: number;
|
||||
}): ReusableFileRows | null {
|
||||
for (const index of candidate.indexes) {
|
||||
const file = index.filesBySource.get(candidate.sourceFile);
|
||||
if (
|
||||
file &&
|
||||
canReuseFileRows({
|
||||
buildInput: candidate.buildInput,
|
||||
file,
|
||||
isMeasured: index.measuredFiles.has(file),
|
||||
fileTop: candidate.fileTop,
|
||||
bodyTop: candidate.bodyTop,
|
||||
})
|
||||
) {
|
||||
return { model: index.model, file };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function canReuseFileRows(candidate: {
|
||||
buildInput: BuildDiffDocumentModelInput;
|
||||
file: DiffFileSection;
|
||||
isMeasured: boolean;
|
||||
fileTop: number;
|
||||
bodyTop: number;
|
||||
}): boolean {
|
||||
if (candidate.file.isCollapsed) return false;
|
||||
if (candidate.isMeasured) return true;
|
||||
return !intersectsMaterializationWindow(
|
||||
candidate.buildInput,
|
||||
candidate.fileTop,
|
||||
candidate.bodyTop + candidate.file.bodyHeight,
|
||||
);
|
||||
}
|
||||
|
||||
function measuredFileCount(model: DiffDocumentModel): number {
|
||||
return model.files.filter((file) => hasMeasuredFileRows(model, file)).length;
|
||||
}
|
||||
|
||||
function measureCell(input: {
|
||||
source: CellSource;
|
||||
availableWidth: number;
|
||||
|
||||
@@ -107,6 +107,11 @@ function build(layout: "unified" | "split") {
|
||||
deletionBackground: "#100",
|
||||
emptyBackground: "#111",
|
||||
selection: "blue",
|
||||
headerActiveSurface: "#222",
|
||||
headerBorder: "#333",
|
||||
statusSuccess: "green",
|
||||
statusDanger: "red",
|
||||
statusWarning: "orange",
|
||||
syntax: {},
|
||||
},
|
||||
labels: { binary: "Binary", tooLarge: "Too large" },
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
nativeCanvasSlabsForViewport,
|
||||
nativeCanvasWindowBucket,
|
||||
nativeCanvasWindowTop,
|
||||
nativeStickyHeaderIndices,
|
||||
} from "./native-slabs";
|
||||
import type { DiffDocumentModel } from "./types";
|
||||
|
||||
@@ -34,15 +33,11 @@ function modelWithBodies(
|
||||
layout: "unified",
|
||||
wrapLines: false,
|
||||
viewportWidth: 400,
|
||||
reviewGeometryKey: "",
|
||||
};
|
||||
}
|
||||
|
||||
describe("native canvas slabs", () => {
|
||||
it("identifies each direct file header child for native sticky scrolling", () => {
|
||||
expect(nativeStickyHeaderIndices(0)).toEqual([]);
|
||||
expect(nativeStickyHeaderIndices(3)).toEqual([1, 3, 5]);
|
||||
});
|
||||
|
||||
it("cuts large file bodies into fixed document-positioned slabs", () => {
|
||||
const slabs = buildNativeCanvasSlabs(
|
||||
modelWithBodies([
|
||||
@@ -58,9 +53,11 @@ describe("native canvas slabs", () => {
|
||||
|
||||
expect(slabs.map(({ path, top, height }) => ({ path, top, height }))).toEqual([
|
||||
{ path: "small.ts", top: 30, height: 200 },
|
||||
{ path: "large.ts", top: 260, height: 1200 },
|
||||
{ path: "large.ts", top: 1460, height: 1200 },
|
||||
{ path: "large.ts", top: 2660, height: 800 },
|
||||
{ path: "large.ts", top: 260, height: 768 },
|
||||
{ path: "large.ts", top: 1028, height: 768 },
|
||||
{ path: "large.ts", top: 1796, height: 768 },
|
||||
{ path: "large.ts", top: 2564, height: 768 },
|
||||
{ path: "large.ts", top: 3332, height: 128 },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -73,7 +70,7 @@ describe("native canvas slabs", () => {
|
||||
);
|
||||
|
||||
expect(nativeCanvasSlabsForViewport(slabs, 1700, 600).map((slab) => slab.top)).toEqual([
|
||||
30, 1230, 2430,
|
||||
798, 1566, 2334,
|
||||
]);
|
||||
expect(nativeCanvasWindowBucket(899, 600)).toBe(2);
|
||||
expect(nativeCanvasWindowTop(2, 600)).toBe(600);
|
||||
|
||||
@@ -8,15 +8,11 @@ export interface NativeCanvasSlab {
|
||||
height: number;
|
||||
}
|
||||
|
||||
export function nativeStickyHeaderIndices(fileCount: number): number[] {
|
||||
return Array.from({ length: fileCount }, (_, index) => index * 2 + 1);
|
||||
}
|
||||
|
||||
export function buildNativeCanvasSlabs(
|
||||
model: DiffDocumentModel,
|
||||
viewportHeight: number,
|
||||
): NativeCanvasSlab[] {
|
||||
const slabHeight = Math.max(768, viewportHeight * 2);
|
||||
const slabHeight = Math.max(768, viewportHeight);
|
||||
return model.files.flatMap((file) => {
|
||||
const slabs: NativeCanvasSlab[] = [];
|
||||
let slabIndex = 0;
|
||||
@@ -39,8 +35,8 @@ export function nativeCanvasSlabsForViewport(
|
||||
scrollTop: number,
|
||||
viewportHeight: number,
|
||||
): NativeCanvasSlab[] {
|
||||
const top = Math.max(0, scrollTop - viewportHeight);
|
||||
const bottom = scrollTop + viewportHeight * 2;
|
||||
const top = Math.max(0, scrollTop - viewportHeight / 2);
|
||||
const bottom = scrollTop + viewportHeight * 1.5;
|
||||
return slabs.filter((slab) => slab.top < bottom && slab.top + slab.height > top);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,37 @@
|
||||
import {
|
||||
ClipOp,
|
||||
PaintStyle,
|
||||
Skia,
|
||||
StrokeCap,
|
||||
StrokeJoin,
|
||||
type SkCanvas,
|
||||
type SkPaint,
|
||||
type SkPicture,
|
||||
} from "@shopify/react-native-skia";
|
||||
import {
|
||||
DIFF_FILE_HEADER_CONTENT_HEIGHT,
|
||||
DIFF_FILE_HEADER_HEIGHT,
|
||||
DIFF_FILE_HEADER_ICON_SIZE,
|
||||
DIFF_FILE_HEADER_LEFT,
|
||||
DIFF_FILE_HEADER_RIGHT,
|
||||
DIFF_FILE_HEADER_TEXT_GAP,
|
||||
allocateDiffHeaderTextWidths,
|
||||
diffFileChangeKind,
|
||||
directorySuffix,
|
||||
fileNameForPath,
|
||||
formatDiffCount,
|
||||
} from "@/git/file-header-presentation";
|
||||
import { DIFF_BODY_BORDER_HEIGHT, expandedBodyBorderTop, visibleRowRange } from "./model";
|
||||
import { nativeTextRuns } from "./native-text-runs";
|
||||
import { horizontalOffsetForPath, type DiffHorizontalOffsets } from "./horizontal-offsets";
|
||||
import { codeLineNumberTone } from "./palette";
|
||||
import { reviewBackgroundPaint, reviewDividerHeight, reviewGapTop } from "./review-paint";
|
||||
import type { NativeTextLayout } from "./text.native";
|
||||
import {
|
||||
shapeNativeHeaderText,
|
||||
type NativeHeaderTextLayout,
|
||||
type NativeShapedHeaderText,
|
||||
type NativeTextLayout,
|
||||
} from "./text.native";
|
||||
import type {
|
||||
DiffCell,
|
||||
DiffDocumentModel,
|
||||
@@ -31,6 +52,10 @@ export interface NativePaints {
|
||||
additionBackground: SkPaint;
|
||||
deletionBackground: SkPaint;
|
||||
headerSurface: SkPaint;
|
||||
headerBorder: SkPaint;
|
||||
statusSuccess: SkPaint;
|
||||
statusDanger: SkPaint;
|
||||
statusWarning: SkPaint;
|
||||
emptyBackground: SkPaint;
|
||||
text: Record<string, SkPaint>;
|
||||
}
|
||||
@@ -46,6 +71,10 @@ export function createNativePaints(palette: DiffPalette): NativePaints {
|
||||
additionBackground: paint(palette.additionBackground),
|
||||
deletionBackground: paint(palette.deletionBackground),
|
||||
headerSurface: paint(palette.headerSurface),
|
||||
headerBorder: paint(palette.headerBorder),
|
||||
statusSuccess: paint(palette.statusSuccess),
|
||||
statusDanger: paint(palette.statusDanger),
|
||||
statusWarning: paint(palette.statusWarning),
|
||||
emptyBackground: paint(palette.emptyBackground),
|
||||
text: Object.fromEntries(
|
||||
[
|
||||
@@ -55,6 +84,156 @@ export function createNativePaints(palette: DiffPalette): NativePaints {
|
||||
};
|
||||
}
|
||||
|
||||
export function recordNativeHeaderPicture(input: {
|
||||
file: DiffFileSection;
|
||||
viewportWidth: number;
|
||||
textLayout: NativeHeaderTextLayout;
|
||||
paints: NativePaints;
|
||||
}): SkPicture {
|
||||
const recorder = Skia.PictureRecorder();
|
||||
const canvas = recorder.beginRecording(
|
||||
Skia.XYWHRect(0, 0, input.viewportWidth, DIFF_FILE_HEADER_HEIGHT),
|
||||
);
|
||||
canvas.drawRect(
|
||||
Skia.XYWHRect(0, DIFF_FILE_HEADER_HEIGHT - 1, input.viewportWidth, 1),
|
||||
input.paints.headerBorder,
|
||||
);
|
||||
const iconX = input.viewportWidth - DIFF_FILE_HEADER_RIGHT - DIFF_FILE_HEADER_ICON_SIZE;
|
||||
const additions = `+${formatDiffCount(input.file.file.additions)}`;
|
||||
const deletions = `-${formatDiffCount(input.file.file.deletions)}`;
|
||||
const additionsText = shapeNativeHeaderText({
|
||||
layout: input.textLayout,
|
||||
text: additions,
|
||||
size: "stat",
|
||||
tone: "statusSuccess",
|
||||
});
|
||||
const deletionsText = shapeNativeHeaderText({
|
||||
layout: input.textLayout,
|
||||
text: deletions,
|
||||
size: "stat",
|
||||
tone: "statusDanger",
|
||||
});
|
||||
const statX = iconX - 8 - additionsText.width - 4 - deletionsText.width;
|
||||
paintNativeHeaderText(canvas, additionsText, statX);
|
||||
paintNativeHeaderText(canvas, deletionsText, statX + additionsText.width + 4);
|
||||
paintNativeChangeIcon(
|
||||
canvas,
|
||||
input.file,
|
||||
iconX,
|
||||
(DIFF_FILE_HEADER_CONTENT_HEIGHT - DIFF_FILE_HEADER_ICON_SIZE) / 2,
|
||||
input.paints,
|
||||
);
|
||||
|
||||
const available = Math.max(0, statX - DIFF_FILE_HEADER_LEFT);
|
||||
const name = fileNameForPath(input.file.path);
|
||||
const directory = directorySuffix(input.file.path).trimStart();
|
||||
const fitted = fitNativeHeaderText(input.textLayout, name, directory, available);
|
||||
canvas.save();
|
||||
canvas.clipRect(
|
||||
Skia.XYWHRect(DIFF_FILE_HEADER_LEFT, 0, available, DIFF_FILE_HEADER_CONTENT_HEIGHT),
|
||||
ClipOp.Intersect,
|
||||
false,
|
||||
);
|
||||
paintNativeHeaderText(canvas, fitted.name, DIFF_FILE_HEADER_LEFT);
|
||||
if (fitted.directory.width > 0) {
|
||||
paintNativeHeaderText(
|
||||
canvas,
|
||||
fitted.directory,
|
||||
DIFF_FILE_HEADER_LEFT + fitted.name.width + DIFF_FILE_HEADER_TEXT_GAP,
|
||||
);
|
||||
}
|
||||
canvas.restore();
|
||||
const picture = recorder.finishRecordingAsPicture();
|
||||
additionsText.paragraph.dispose();
|
||||
deletionsText.paragraph.dispose();
|
||||
fitted.name.paragraph.dispose();
|
||||
fitted.directory.paragraph.dispose();
|
||||
return picture;
|
||||
}
|
||||
|
||||
function paintNativeHeaderText(canvas: SkCanvas, text: NativeShapedHeaderText, x: number): void {
|
||||
text.paragraph.paint(canvas, x, (DIFF_FILE_HEADER_CONTENT_HEIGHT - text.height) / 2);
|
||||
}
|
||||
|
||||
function fitNativeHeaderText(
|
||||
layout: NativeHeaderTextLayout,
|
||||
name: string,
|
||||
directory: string,
|
||||
available: number,
|
||||
): { name: NativeShapedHeaderText; directory: NativeShapedHeaderText } {
|
||||
let nameText = shapeNativeHeaderText({ layout, text: name, size: "body", tone: "foreground" });
|
||||
let directoryText = shapeNativeHeaderText({
|
||||
layout,
|
||||
text: directory,
|
||||
size: "body",
|
||||
tone: "foregroundMuted",
|
||||
});
|
||||
if (nameText.width + (directory ? 4 + directoryText.width : 0) <= available) {
|
||||
return { name: nameText, directory: directoryText };
|
||||
}
|
||||
|
||||
const widths = allocateDiffHeaderTextWidths({
|
||||
available,
|
||||
nameWidth: nameText.width,
|
||||
directoryWidth: directoryText.width,
|
||||
});
|
||||
if (widths.name < nameText.width) {
|
||||
nameText.paragraph.dispose();
|
||||
nameText = shapeNativeHeaderText({
|
||||
layout,
|
||||
text: name,
|
||||
size: "body",
|
||||
tone: "foreground",
|
||||
maximumWidth: widths.name,
|
||||
});
|
||||
}
|
||||
directoryText.paragraph.dispose();
|
||||
directoryText = shapeNativeHeaderText({
|
||||
layout,
|
||||
text: widths.directory > 0 ? directory : "",
|
||||
size: "body",
|
||||
tone: "foregroundMuted",
|
||||
maximumWidth: widths.directory,
|
||||
});
|
||||
return { name: nameText, directory: directoryText };
|
||||
}
|
||||
|
||||
function paintNativeChangeIcon(
|
||||
canvas: SkCanvas,
|
||||
file: DiffFileSection,
|
||||
x: number,
|
||||
y: number,
|
||||
paints: NativePaints,
|
||||
): void {
|
||||
const change = diffFileChangeKind(file.file);
|
||||
let source = paints.statusWarning;
|
||||
if (change === "added") source = paints.statusSuccess;
|
||||
else if (change === "deleted") source = paints.statusDanger;
|
||||
const stroke = source.copy();
|
||||
stroke.setStyle(PaintStyle.Stroke);
|
||||
stroke.setStrokeWidth(DIFF_FILE_HEADER_ICON_SIZE / 12);
|
||||
stroke.setStrokeCap(StrokeCap.Round);
|
||||
stroke.setStrokeJoin(StrokeJoin.Round);
|
||||
const scale = DIFF_FILE_HEADER_ICON_SIZE / 24;
|
||||
canvas.drawRRect(
|
||||
Skia.RRectXY(
|
||||
Skia.XYWHRect(x + 3 * scale, y + 3 * scale, 18 * scale, 18 * scale),
|
||||
2 * scale,
|
||||
2 * scale,
|
||||
),
|
||||
stroke,
|
||||
);
|
||||
if (change === "added") {
|
||||
canvas.drawLine(x + 8 * scale, y + 12 * scale, x + 16 * scale, y + 12 * scale, stroke);
|
||||
canvas.drawLine(x + 12 * scale, y + 8 * scale, x + 12 * scale, y + 16 * scale, stroke);
|
||||
} else if (change === "deleted") {
|
||||
canvas.drawLine(x + 8 * scale, y + 12 * scale, x + 16 * scale, y + 12 * scale, stroke);
|
||||
} else {
|
||||
canvas.drawCircle(x + 12 * scale, y + 12 * scale, scale, stroke);
|
||||
}
|
||||
stroke.dispose();
|
||||
}
|
||||
|
||||
function paint(color: string): SkPaint {
|
||||
const result = Skia.Paint();
|
||||
result.setColor(Skia.Color(color));
|
||||
|
||||
@@ -1,8 +1,94 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { paintWebViewport } from "./paint.web";
|
||||
import { paintWebHeaders, paintWebViewport } from "./paint.web";
|
||||
import type { DiffCell, DiffDocumentModel, DiffLineRow, DiffPalette, DiffSelection } from "./types";
|
||||
|
||||
describe("web diff text shaping", () => {
|
||||
it("matches the 30px file-header alignment rails exactly", () => {
|
||||
const fills: Array<{ color: string; x: number; y: number; width: number; height: number }> = [];
|
||||
const labels: Array<{ text: string; x: number; y: number; color: string; font: string }> = [];
|
||||
let fillStyle = "";
|
||||
let font = "";
|
||||
const context = {
|
||||
setTransform() {},
|
||||
clearRect() {},
|
||||
fillRect(x: number, y: number, width: number, height: number) {
|
||||
fills.push({ color: fillStyle, x, y, width, height });
|
||||
},
|
||||
save() {},
|
||||
restore() {},
|
||||
beginPath() {},
|
||||
rect() {},
|
||||
clip() {},
|
||||
translate() {},
|
||||
scale() {},
|
||||
roundRect() {},
|
||||
moveTo() {},
|
||||
lineTo() {},
|
||||
stroke() {},
|
||||
measureText(text: string) {
|
||||
return {
|
||||
width: text.length * 6,
|
||||
actualBoundingBoxAscent: 8,
|
||||
actualBoundingBoxDescent: 2,
|
||||
} as TextMetrics;
|
||||
},
|
||||
fillText(text: string, x: number, y: number) {
|
||||
labels.push({ text, x, y, color: fillStyle, font });
|
||||
},
|
||||
get fillStyle() {
|
||||
return fillStyle;
|
||||
},
|
||||
set fillStyle(value: string | CanvasGradient | CanvasPattern) {
|
||||
fillStyle = String(value);
|
||||
},
|
||||
get font() {
|
||||
return font;
|
||||
},
|
||||
set font(value: string) {
|
||||
font = value;
|
||||
},
|
||||
strokeStyle: "",
|
||||
lineWidth: 1,
|
||||
lineCap: "butt",
|
||||
lineJoin: "miter",
|
||||
} as unknown as CanvasRenderingContext2D;
|
||||
|
||||
paintWebHeaders({
|
||||
context,
|
||||
model: {
|
||||
...model,
|
||||
files: [
|
||||
{
|
||||
...model.files[0]!,
|
||||
headerHeight: 30,
|
||||
bodyTop: 30,
|
||||
bodyHeight: 18,
|
||||
bottom: 48,
|
||||
},
|
||||
],
|
||||
height: 48,
|
||||
},
|
||||
palette,
|
||||
typography: { family: "system-ui", size: 14, statSize: 12 },
|
||||
scrollTop: 0,
|
||||
viewportWidth: 200,
|
||||
viewportHeight: 100,
|
||||
devicePixelRatio: 1,
|
||||
activePath: null,
|
||||
});
|
||||
|
||||
expect(fills.slice(0, 2)).toEqual([
|
||||
{ color: "header", x: 0, y: 0, width: 200, height: 30 },
|
||||
{ color: "header-border", x: 0, y: 29, width: 200, height: 1 },
|
||||
]);
|
||||
expect(labels).toEqual([
|
||||
{ text: "+1", x: 142, y: 18, color: "success", font: "12px system-ui" },
|
||||
{ text: "-0", x: 158, y: 18, color: "danger", font: "12px system-ui" },
|
||||
{ text: "a.ts", x: 12, y: 18, color: "foreground", font: "14px system-ui" },
|
||||
{ text: "src", x: 40, y: 18, color: "muted", font: "14px system-ui" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("paints syntax colors by clipping the complete measured shaped fragment", () => {
|
||||
const paintedText: string[] = [];
|
||||
const context = {
|
||||
@@ -314,6 +400,7 @@ function createSelectionModel(layout: "unified" | "split"): DiffDocumentModel {
|
||||
layout,
|
||||
wrapLines: false,
|
||||
viewportWidth: 200,
|
||||
reviewGeometryKey: "",
|
||||
};
|
||||
}
|
||||
|
||||
@@ -356,6 +443,11 @@ const palette: DiffPalette = {
|
||||
deletionBackground: "red-bg",
|
||||
emptyBackground: "empty",
|
||||
selection: "selection",
|
||||
headerActiveSurface: "active-header",
|
||||
headerBorder: "header-border",
|
||||
statusSuccess: "success",
|
||||
statusDanger: "danger",
|
||||
statusWarning: "warning",
|
||||
syntax: { first: "red", second: "blue" },
|
||||
};
|
||||
|
||||
@@ -427,6 +519,7 @@ const model: DiffDocumentModel = {
|
||||
layout: "unified",
|
||||
wrapLines: false,
|
||||
viewportWidth: 200,
|
||||
reviewGeometryKey: "",
|
||||
};
|
||||
|
||||
const modelWithReview: DiffDocumentModel = {
|
||||
|
||||
@@ -6,10 +6,26 @@ import {
|
||||
visibleRowRange,
|
||||
} from "./model";
|
||||
import { codeLineNumberTone, codeTextColor } from "./palette";
|
||||
import {
|
||||
DIFF_FILE_HEADER_CONTENT_HEIGHT,
|
||||
DIFF_FILE_HEADER_HEIGHT,
|
||||
DIFF_FILE_HEADER_ICON_SIZE,
|
||||
DIFF_FILE_HEADER_LEFT,
|
||||
DIFF_FILE_HEADER_RIGHT,
|
||||
DIFF_FILE_HEADER_TEXT_GAP,
|
||||
allocateDiffHeaderTextWidths,
|
||||
diffFileChangeKind,
|
||||
directorySuffix,
|
||||
fileNameForPath,
|
||||
formatDiffCount,
|
||||
} from "@/git/file-header-presentation";
|
||||
import { resolveVisibleFileSections } from "./header-layout";
|
||||
import { reviewBackgroundPaint, reviewDividerHeight, reviewGapTop } from "./review-paint";
|
||||
import type {
|
||||
DiffCell,
|
||||
DiffDocumentModel,
|
||||
DiffFileSection,
|
||||
DiffHeaderTypography,
|
||||
DiffLineRow,
|
||||
DiffPalette,
|
||||
DiffSelection,
|
||||
@@ -86,6 +102,167 @@ export function paintWebViewport(input: PaintWebViewportInput): void {
|
||||
context.restore();
|
||||
}
|
||||
|
||||
export function paintWebHeaders(input: {
|
||||
context: CanvasRenderingContext2D;
|
||||
model: DiffDocumentModel;
|
||||
palette: DiffPalette;
|
||||
typography: DiffHeaderTypography;
|
||||
scrollTop: number;
|
||||
viewportWidth: number;
|
||||
viewportHeight: number;
|
||||
devicePixelRatio: number;
|
||||
activePath: string | null;
|
||||
}): void {
|
||||
const scale = input.devicePixelRatio;
|
||||
input.context.setTransform(scale, 0, 0, scale, 0, 0);
|
||||
input.context.clearRect(0, 0, input.viewportWidth, input.viewportHeight);
|
||||
const window = resolveVisibleFileSections({
|
||||
files: input.model.files,
|
||||
scrollTop: input.scrollTop,
|
||||
viewportHeight: input.viewportHeight,
|
||||
overscan: 0,
|
||||
});
|
||||
for (const file of window.files) {
|
||||
if (file === window.sticky?.file) continue;
|
||||
const y = file.top - input.scrollTop;
|
||||
if (y + file.headerHeight <= 0 || y >= input.viewportHeight) continue;
|
||||
paintWebHeader({ ...input, file, y });
|
||||
}
|
||||
if (window.sticky) paintWebHeader({ ...input, file: window.sticky.file, y: window.sticky.y });
|
||||
}
|
||||
|
||||
function paintWebHeader(
|
||||
input: Parameters<typeof paintWebHeaders>[0] & { file: DiffFileSection; y: number },
|
||||
): void {
|
||||
const { context, file, palette, typography, viewportWidth, y } = input;
|
||||
context.fillStyle =
|
||||
input.activePath === file.path ? palette.headerActiveSurface : palette.headerSurface;
|
||||
context.fillRect(0, y, viewportWidth, DIFF_FILE_HEADER_HEIGHT);
|
||||
context.fillStyle = palette.headerBorder;
|
||||
context.fillRect(0, y + DIFF_FILE_HEADER_HEIGHT - 1, viewportWidth, 1);
|
||||
|
||||
const iconX = viewportWidth - DIFF_FILE_HEADER_RIGHT - DIFF_FILE_HEADER_ICON_SIZE;
|
||||
const statLabels = [
|
||||
`+${formatDiffCount(file.file.additions)}`,
|
||||
`-${formatDiffCount(file.file.deletions)}`,
|
||||
];
|
||||
context.font = `${typography.statSize}px ${typography.family}`;
|
||||
const statWidths = statLabels.map((label) => context.measureText(label).width);
|
||||
const statWidth = statWidths[0]! + 4 + statWidths[1]!;
|
||||
const statX = iconX - 8 - statWidth;
|
||||
const statBaseline = centeredTextBaseline(context, y + DIFF_FILE_HEADER_CONTENT_HEIGHT / 2);
|
||||
context.fillStyle = palette.statusSuccess;
|
||||
context.fillText(statLabels[0]!, statX, statBaseline);
|
||||
context.fillStyle = palette.statusDanger;
|
||||
context.fillText(statLabels[1]!, statX + statWidths[0]! + 4, statBaseline);
|
||||
paintChangeIcon(
|
||||
context,
|
||||
file,
|
||||
iconX,
|
||||
y + (DIFF_FILE_HEADER_CONTENT_HEIGHT - DIFF_FILE_HEADER_ICON_SIZE) / 2,
|
||||
palette,
|
||||
);
|
||||
|
||||
context.font = `${typography.size}px ${typography.family}`;
|
||||
const textBaseline = centeredTextBaseline(context, y + DIFF_FILE_HEADER_CONTENT_HEIGHT / 2);
|
||||
const available = Math.max(0, statX - DIFF_FILE_HEADER_LEFT);
|
||||
const name = fileNameForPath(file.path);
|
||||
// React Native Web collapses the leading separator space at the start of the
|
||||
// directory Text node. Canvas does not, so paint only the visible glyphs.
|
||||
const directory = directorySuffix(file.path).trimStart();
|
||||
const fitted = fitHeaderText(context, name, directory, available);
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(DIFF_FILE_HEADER_LEFT, y, available, DIFF_FILE_HEADER_CONTENT_HEIGHT);
|
||||
context.clip();
|
||||
context.fillStyle = palette.foreground;
|
||||
context.fillText(fitted.name, DIFF_FILE_HEADER_LEFT, textBaseline);
|
||||
if (fitted.directory) {
|
||||
context.fillStyle = palette.foregroundMuted;
|
||||
context.fillText(
|
||||
fitted.directory,
|
||||
DIFF_FILE_HEADER_LEFT + context.measureText(fitted.name).width + DIFF_FILE_HEADER_TEXT_GAP,
|
||||
textBaseline,
|
||||
);
|
||||
}
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function centeredTextBaseline(context: CanvasRenderingContext2D, centerY: number): number {
|
||||
const metrics = context.measureText("Mg");
|
||||
return centerY + (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2 + 1;
|
||||
}
|
||||
|
||||
function fitHeaderText(
|
||||
context: CanvasRenderingContext2D,
|
||||
name: string,
|
||||
directory: string,
|
||||
available: number,
|
||||
): { name: string; directory: string } {
|
||||
const nameWidth = context.measureText(name).width;
|
||||
const directoryWidth = context.measureText(directory).width;
|
||||
if (nameWidth + (directory ? 4 + directoryWidth : 0) <= available) return { name, directory };
|
||||
const widths = allocateDiffHeaderTextWidths({ available, nameWidth, directoryWidth });
|
||||
return {
|
||||
name: truncateCanvasText(context, name, widths.name),
|
||||
directory: truncateCanvasText(context, directory, widths.directory),
|
||||
};
|
||||
}
|
||||
|
||||
function truncateCanvasText(
|
||||
context: CanvasRenderingContext2D,
|
||||
text: string,
|
||||
maximumWidth: number,
|
||||
): string {
|
||||
if (context.measureText(text).width <= maximumWidth) return text;
|
||||
const ellipsis = "…";
|
||||
if (context.measureText(ellipsis).width > maximumWidth) return "";
|
||||
let low = 0;
|
||||
let high = text.length;
|
||||
while (low < high) {
|
||||
const middle = Math.ceil((low + high) / 2);
|
||||
if (context.measureText(`${text.slice(0, middle)}${ellipsis}`).width <= maximumWidth)
|
||||
low = middle;
|
||||
else high = middle - 1;
|
||||
}
|
||||
return `${text.slice(0, low)}${ellipsis}`;
|
||||
}
|
||||
|
||||
function paintChangeIcon(
|
||||
context: CanvasRenderingContext2D,
|
||||
file: DiffFileSection,
|
||||
x: number,
|
||||
y: number,
|
||||
palette: DiffPalette,
|
||||
): void {
|
||||
const change = diffFileChangeKind(file.file);
|
||||
context.save();
|
||||
context.translate(x, y);
|
||||
context.scale(DIFF_FILE_HEADER_ICON_SIZE / 24, DIFF_FILE_HEADER_ICON_SIZE / 24);
|
||||
if (change === "added") context.strokeStyle = palette.statusSuccess;
|
||||
else if (change === "deleted") context.strokeStyle = palette.statusDanger;
|
||||
else context.strokeStyle = palette.statusWarning;
|
||||
context.lineWidth = 2;
|
||||
context.lineCap = "round";
|
||||
context.lineJoin = "round";
|
||||
context.beginPath();
|
||||
context.roundRect(3, 3, 18, 18, 2);
|
||||
if (change === "added") {
|
||||
context.moveTo(8, 12);
|
||||
context.lineTo(16, 12);
|
||||
context.moveTo(12, 8);
|
||||
context.lineTo(12, 16);
|
||||
} else if (change === "deleted") {
|
||||
context.moveTo(8, 12);
|
||||
context.lineTo(16, 12);
|
||||
} else {
|
||||
context.moveTo(12, 12);
|
||||
context.lineTo(12.01, 12);
|
||||
}
|
||||
context.stroke();
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function paintLine(
|
||||
input: PaintWebViewportInput & {
|
||||
row: DiffLineRow;
|
||||
|
||||
@@ -59,6 +59,11 @@ const palette: DiffPalette = {
|
||||
deletionBackground: "red-bg",
|
||||
emptyBackground: "empty",
|
||||
selection: "selection",
|
||||
headerActiveSurface: "active-header",
|
||||
headerBorder: "header-border",
|
||||
statusSuccess: "success",
|
||||
statusDanger: "danger",
|
||||
statusWarning: "warning",
|
||||
syntax: {},
|
||||
};
|
||||
|
||||
|
||||
@@ -15,6 +15,11 @@ export function createDiffPalette(theme: Theme): DiffPalette {
|
||||
deletionBackground: hexColorWithAlpha(theme.colors.statusDanger, 0.1),
|
||||
emptyBackground: theme.colors.surface0,
|
||||
selection: theme.colors.terminal.blue,
|
||||
headerActiveSurface: theme.colors.surface1,
|
||||
headerBorder: theme.colors.borderAccent,
|
||||
statusSuccess: theme.colors.statusSuccess,
|
||||
statusDanger: theme.colors.statusDanger,
|
||||
statusWarning: theme.colors.statusWarning,
|
||||
syntax: theme.colors.syntax,
|
||||
};
|
||||
}
|
||||
@@ -32,6 +37,11 @@ export function retainDiffPalette(previous: DiffPalette, next: DiffPalette): Dif
|
||||
previous.deletionBackground !== next.deletionBackground ||
|
||||
previous.emptyBackground !== next.emptyBackground ||
|
||||
previous.selection !== next.selection ||
|
||||
previous.headerActiveSurface !== next.headerActiveSurface ||
|
||||
previous.headerBorder !== next.headerBorder ||
|
||||
previous.statusSuccess !== next.statusSuccess ||
|
||||
previous.statusDanger !== next.statusDanger ||
|
||||
previous.statusWarning !== next.statusWarning ||
|
||||
!sameColorMap(previous.syntax, next.syntax)
|
||||
) {
|
||||
return next;
|
||||
|
||||
@@ -23,6 +23,11 @@ import { InlineReviewThread } from "@/review";
|
||||
import { useKeyboardShift } from "@/hooks/keyboard-shift-context";
|
||||
import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
|
||||
import { DocumentFileHeader } from "./document-file-header";
|
||||
import {
|
||||
diffInteractionWindowTop,
|
||||
diffMaterializationWindow,
|
||||
resolveVisibleFileSections,
|
||||
} from "./header-layout";
|
||||
import { hitTestDiffBodyPoint } from "./native-hit-testing";
|
||||
import { retainDiffViewport } from "./viewport";
|
||||
import { HorizontalScroll } from "./horizontal-scroll.native";
|
||||
@@ -42,16 +47,22 @@ import {
|
||||
nativeCanvasSlabsForViewport,
|
||||
nativeCanvasWindowBucket,
|
||||
nativeCanvasWindowTop,
|
||||
nativeStickyHeaderIndices,
|
||||
type NativeCanvasSlab,
|
||||
} from "./native-slabs";
|
||||
import { createNativePaints, recordNativeSlabPictures, type NativePaints } from "./paint.native";
|
||||
import {
|
||||
createNativePaints,
|
||||
recordNativeHeaderPicture,
|
||||
recordNativeSlabPictures,
|
||||
type NativePaints,
|
||||
} from "./paint.native";
|
||||
import {
|
||||
createNativeTextLayoutStore,
|
||||
createNativeHeaderTextLayout,
|
||||
createNativeTextMeasurer,
|
||||
disposeNativeTextLayout,
|
||||
prepareNativeTextLayout,
|
||||
type NativeTextLayout,
|
||||
type NativeHeaderTextLayout,
|
||||
} from "./text.native";
|
||||
import type {
|
||||
DiffDocumentModel,
|
||||
@@ -68,6 +79,7 @@ const CODE_LEFT_PADDING = 8;
|
||||
export function DiffSurface(props: DiffSurfaceProps) {
|
||||
const { t } = useTranslation();
|
||||
const [viewport, setViewport] = useState({ width: 0, height: 0 });
|
||||
const [fileWindowTop, setFileWindowTop] = useState(0);
|
||||
const scrollRef = useRef<ScrollView>(null);
|
||||
const previousModelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
|
||||
const reusableModelRef = useRef<{
|
||||
@@ -126,6 +138,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
binary: t("workspace.git.diff.binaryFile"),
|
||||
tooLarge: t("workspace.git.diff.tooLarge"),
|
||||
},
|
||||
materializationWindow: diffMaterializationWindow(fileWindowTop, viewport.height),
|
||||
reuseFrom,
|
||||
});
|
||||
reusableModelRef.current = {
|
||||
@@ -135,6 +148,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
return next;
|
||||
}, [
|
||||
measurement,
|
||||
fileWindowTop,
|
||||
props.collapsedFilePaths,
|
||||
props.displayPreferences.layout,
|
||||
props.displayPreferences.wrapLines,
|
||||
@@ -144,6 +158,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
t,
|
||||
typography,
|
||||
viewport.width,
|
||||
viewport.height,
|
||||
]);
|
||||
const paints = useMemo(() => createNativePaints(props.palette), [props.palette]);
|
||||
const textLayoutStore = useMemo(
|
||||
@@ -161,6 +176,38 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
[model, textLayoutStore],
|
||||
);
|
||||
useEffect(() => () => disposeNativeTextLayout(textLayoutStore), [textLayoutStore]);
|
||||
const headerTextLayout = useMemo(
|
||||
() =>
|
||||
createNativeHeaderTextLayout({
|
||||
configuredFamily: props.headerTypography.family,
|
||||
fontSize: props.headerTypography.size,
|
||||
statFontSize: props.headerTypography.statSize,
|
||||
palette: props.palette,
|
||||
}),
|
||||
[props.headerTypography, props.palette],
|
||||
);
|
||||
const updateFileWindow = useCallback((nextTop: number) => {
|
||||
setFileWindowTop((current) => (current === nextTop ? current : nextTop));
|
||||
}, []);
|
||||
useAnimatedReaction(
|
||||
() => diffInteractionWindowTop(scrollTop.value, viewport.height),
|
||||
(windowTop, previous) => {
|
||||
if (windowTop !== previous) {
|
||||
scheduleOnRN(updateFileWindow, windowTop);
|
||||
}
|
||||
},
|
||||
[updateFileWindow, viewport.height],
|
||||
);
|
||||
const interactionFiles = useMemo(
|
||||
() =>
|
||||
resolveVisibleFileSections({
|
||||
files: model.files,
|
||||
scrollTop: fileWindowTop,
|
||||
viewportHeight: viewport.height,
|
||||
overscan: viewport.height * 2,
|
||||
}).files,
|
||||
[fileWindowTop, model.files, viewport.height],
|
||||
);
|
||||
|
||||
const scrollHandler = useAnimatedScrollHandler((event) => {
|
||||
scrollTop.value = event.contentOffset.y;
|
||||
@@ -206,12 +253,8 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
}
|
||||
}, [collapsedFilePaths, mode, model.files, onToggleFile, scrollTop]);
|
||||
const contentStyle = useMemo(
|
||||
() => ({ minHeight: viewport.height, backgroundColor: "transparent" }),
|
||||
[viewport.height],
|
||||
);
|
||||
const stickyHeaderIndices = useMemo(
|
||||
() => nativeStickyHeaderIndices(model.files.length),
|
||||
[model.files.length],
|
||||
() => ({ minHeight: Math.max(model.height, viewport.height), backgroundColor: "transparent" }),
|
||||
[model.height, viewport.height],
|
||||
);
|
||||
return (
|
||||
<View style={[styles.root, { backgroundColor: props.palette.surface }]} onLayout={layout}>
|
||||
@@ -222,7 +265,6 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
onScroll={scrollHandler}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator
|
||||
stickyHeaderIndices={stickyHeaderIndices}
|
||||
testID="git-diff-scroll"
|
||||
>
|
||||
<NativeCanvasSlabLayer
|
||||
@@ -233,23 +275,31 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
paints={paints}
|
||||
horizontalOffsets={horizontalOffsets}
|
||||
/>
|
||||
{model.files.flatMap((file) => [
|
||||
<NativeStickyFileHeader
|
||||
{interactionFiles.map((file) => (
|
||||
<NativeCanvasFileHeader
|
||||
key={`${file.path}:header`}
|
||||
file={file}
|
||||
viewportWidth={model.viewportWidth}
|
||||
scrollTop={scrollTop}
|
||||
textLayout={headerTextLayout}
|
||||
paints={paints}
|
||||
headerSurface={props.palette.headerSurface}
|
||||
headerActiveSurface={props.palette.headerActiveSurface}
|
||||
selectedPath={props.selectedPath}
|
||||
mode={props.mode}
|
||||
onToggleFile={props.onToggleFile}
|
||||
onSelectPath={props.onSelectPath}
|
||||
/>,
|
||||
/>
|
||||
))}
|
||||
{interactionFiles.map((file) => (
|
||||
<NativeFileBody
|
||||
key={`${file.path}:body`}
|
||||
file={file}
|
||||
model={model}
|
||||
mode={props.mode}
|
||||
horizontalOffsets={horizontalOffsets}
|
||||
/>,
|
||||
])}
|
||||
/>
|
||||
))}
|
||||
<NativeReviewOverlays model={model} mode={props.mode} />
|
||||
<Animated.View pointerEvents="none" style={keyboardSpacerStyle} />
|
||||
</AnimatedScrollView>
|
||||
@@ -306,29 +356,69 @@ function NativeCanvasSlabLayer({
|
||||
));
|
||||
}
|
||||
|
||||
function NativeStickyFileHeader({
|
||||
function NativeCanvasFileHeader({
|
||||
file,
|
||||
viewportWidth,
|
||||
scrollTop,
|
||||
textLayout,
|
||||
paints,
|
||||
headerSurface,
|
||||
headerActiveSurface,
|
||||
selectedPath,
|
||||
mode,
|
||||
onToggleFile,
|
||||
onSelectPath,
|
||||
}: {
|
||||
file: DiffFileSection;
|
||||
viewportWidth: number;
|
||||
scrollTop: SharedValue<number>;
|
||||
textLayout: NativeHeaderTextLayout;
|
||||
paints: NativePaints;
|
||||
headerSurface: string;
|
||||
headerActiveSurface: string;
|
||||
selectedPath: DiffSurfaceProps["selectedPath"];
|
||||
mode: DiffSurfaceProps["mode"];
|
||||
onToggleFile: DiffSurfaceProps["onToggleFile"];
|
||||
onSelectPath: DiffSurfaceProps["onSelectPath"];
|
||||
}) {
|
||||
const [active, setActive] = useState(false);
|
||||
const picture = useMemo(
|
||||
() => recordNativeHeaderPicture({ file, viewportWidth, textLayout, paints }),
|
||||
[file, paints, textLayout, viewportWidth],
|
||||
);
|
||||
const stickyStyle = useAnimatedStyle(() => {
|
||||
const pinOffset = Math.max(0, scrollTop.value - file.top);
|
||||
const maximumPinOffset = Math.max(0, file.bottom - file.headerHeight - file.top);
|
||||
return { transform: [{ translateY: Math.min(pinOffset, maximumPinOffset) }] };
|
||||
}, [file.bottom, file.headerHeight, file.top, scrollTop]);
|
||||
const style = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
position: "absolute",
|
||||
top: file.top,
|
||||
left: 0,
|
||||
width: viewportWidth,
|
||||
height: file.headerHeight,
|
||||
backgroundColor: active ? headerActiveSurface : headerSurface,
|
||||
zIndex: 5,
|
||||
elevation: 2,
|
||||
}),
|
||||
[active, file.headerHeight, file.top, headerActiveSurface, headerSurface, viewportWidth],
|
||||
);
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
<Animated.View style={[style, stickyStyle]}>
|
||||
<Canvas pointerEvents="none" style={StyleSheet.absoluteFill}>
|
||||
<Picture picture={picture} />
|
||||
</Canvas>
|
||||
<DocumentFileHeader
|
||||
file={file}
|
||||
selectedPath={selectedPath}
|
||||
mode={mode}
|
||||
onToggleFile={onToggleFile}
|
||||
onSelectPath={onSelectPath}
|
||||
canvasRendered
|
||||
onActiveChange={setActive}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -382,7 +472,10 @@ function NativeFileBody({
|
||||
<View
|
||||
testID={`diff-file-${file.fileIndex}-body`}
|
||||
style={inlineUnistylesStyle<ViewStyle>({
|
||||
position: "relative",
|
||||
position: "absolute",
|
||||
top: file.bodyTop,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: file.bodyHeight,
|
||||
zIndex: 2,
|
||||
})}
|
||||
@@ -579,5 +672,4 @@ function NativeSlabCode({
|
||||
const styles = StyleSheet.create({
|
||||
root: { flex: 1, minHeight: 0, position: "relative", overflow: "hidden" },
|
||||
scroll: { backgroundColor: "transparent" },
|
||||
header: { zIndex: 5 },
|
||||
});
|
||||
|
||||
@@ -5,11 +5,17 @@ import { DomOverlayScrollbar } from "@/components/ui/overlay-scrollbar/dom-overl
|
||||
import { InlineReviewAddButton, InlineReviewThread } from "@/review";
|
||||
import type { ReviewableDiffTarget } from "@/utils/diff-layout";
|
||||
import { DocumentFileHeader } from "./document-file-header";
|
||||
import {
|
||||
diffHeaderViewportKey,
|
||||
diffInteractionWindowTop,
|
||||
diffMaterializationWindow,
|
||||
resolveVisibleFileSections,
|
||||
} from "./header-layout";
|
||||
import { hitTestDiffDocument, selectedSourceText } from "./hit-testing";
|
||||
import { retainHorizontalOffsetMapForPaths } from "./horizontal-offsets";
|
||||
import { HorizontalScroll } from "./horizontal-scroll.web";
|
||||
import { buildDiffDocumentModel, FILE_HEADER_HEIGHT, resolveRelayoutScrollTop } from "./model";
|
||||
import { paintWebViewport } from "./paint.web";
|
||||
import { paintWebHeaders, paintWebViewport } from "./paint.web";
|
||||
import { hasPointerDragStarted } from "./pointer-gesture";
|
||||
import { createMeasuredAdvances } from "./text-measurement";
|
||||
import { retainDiffViewport } from "./viewport";
|
||||
@@ -30,6 +36,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
const workspaceCache = useDiffDocumentWorkspaceCache();
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const headerCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const canvasScratchRef = useRef<HTMLCanvasElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const modelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
|
||||
@@ -46,6 +53,17 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
dismissSelectionOnClick: boolean;
|
||||
} | null>(null);
|
||||
const frameRef = useRef<number | null>(null);
|
||||
const headerFrameRef = useRef<number | null>(null);
|
||||
const headerPaintRef = useRef<{
|
||||
key: string;
|
||||
model: ReturnType<typeof buildDiffDocumentModel>;
|
||||
width: number;
|
||||
height: number;
|
||||
ratio: number;
|
||||
palette: DiffSurfaceProps["palette"];
|
||||
typography: DiffSurfaceProps["headerTypography"];
|
||||
} | null>(null);
|
||||
const activeHeaderPathRef = useRef<string | null>(null);
|
||||
const resizeSettleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const resizeReleaseFrameRef = useRef<number | null>(null);
|
||||
const resizePointerActiveRef = useRef(false);
|
||||
@@ -53,6 +71,10 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
const forcePaintRef = useRef(true);
|
||||
const canvasWindowRef = useRef({ top: 0, height: 0 });
|
||||
const [viewport, setViewport] = useState({ width: 0, height: 0 });
|
||||
const [fileWindowTop, setFileWindowTop] = useState(0);
|
||||
const [interactionFiles, setInteractionFiles] = useState<
|
||||
ReturnType<typeof buildDiffDocumentModel>["files"]
|
||||
>([]);
|
||||
const [hoveredAffordance, setHoveredAffordance] = useState<{
|
||||
hit: Extract<DiffHit, { kind: "cell" }>;
|
||||
left: number;
|
||||
@@ -81,12 +103,18 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
await Promise.all([
|
||||
document.fonts.load(`400 ${desiredTypography.size}px ${desiredTypography.family}`),
|
||||
document.fonts.load(`600 ${desiredTypography.size}px ${desiredTypography.family}`),
|
||||
document.fonts.load(
|
||||
`400 ${props.headerTypography.size}px ${props.headerTypography.family}`,
|
||||
),
|
||||
document.fonts.load(
|
||||
`400 ${props.headerTypography.statSize}px ${props.headerTypography.family}`,
|
||||
),
|
||||
]);
|
||||
await document.fonts.ready;
|
||||
},
|
||||
createMeasurer: () => createWebTextMeasurer(desiredTypography),
|
||||
}),
|
||||
[desiredTypography, workspaceCache],
|
||||
[desiredTypography, props.headerTypography, workspaceCache],
|
||||
);
|
||||
const [readyTypographyResource, setReadyTypographyResource] = useState<ReturnType<
|
||||
typeof workspaceCache.typography
|
||||
@@ -105,7 +133,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
lineHeight: desiredTypography.lineHeight,
|
||||
});
|
||||
}
|
||||
return workspaceCache.buildModel({
|
||||
const next = workspaceCache.buildModel({
|
||||
files: props.files,
|
||||
collapsedFilePaths: props.collapsedFilePaths,
|
||||
layout: props.displayPreferences.layout,
|
||||
@@ -119,8 +147,11 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
binary: t("workspace.git.diff.binaryFile"),
|
||||
tooLarge: t("workspace.git.diff.tooLarge"),
|
||||
},
|
||||
materializationWindow: diffMaterializationWindow(fileWindowTop, viewport.height),
|
||||
});
|
||||
return next;
|
||||
}, [
|
||||
fileWindowTop,
|
||||
measurement,
|
||||
props.collapsedFilePaths,
|
||||
props.displayPreferences.layout,
|
||||
@@ -132,6 +163,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
desiredTypography.lineHeight,
|
||||
loadedTypography,
|
||||
viewport.width,
|
||||
viewport.height,
|
||||
workspaceCache,
|
||||
]);
|
||||
modelRef.current = model;
|
||||
@@ -213,6 +245,64 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
},
|
||||
[paint],
|
||||
);
|
||||
const paintHeaders = useCallback(() => {
|
||||
headerFrameRef.current = null;
|
||||
const canvas = headerCanvasRef.current;
|
||||
const currentModel = modelRef.current;
|
||||
if (!canvas || !currentModel || viewport.width <= 0 || viewport.height <= 0) return;
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
const key = diffHeaderViewportKey({
|
||||
files: currentModel.files,
|
||||
scrollTop: scrollTopRef.current,
|
||||
viewportHeight: viewport.height,
|
||||
activePath: activeHeaderPathRef.current,
|
||||
});
|
||||
const previous = headerPaintRef.current;
|
||||
if (
|
||||
previous?.key === key &&
|
||||
previous.model === currentModel &&
|
||||
previous.width === viewport.width &&
|
||||
previous.height === viewport.height &&
|
||||
previous.ratio === ratio &&
|
||||
previous.palette === props.palette &&
|
||||
previous.typography === props.headerTypography
|
||||
) {
|
||||
return;
|
||||
}
|
||||
headerPaintRef.current = {
|
||||
key,
|
||||
model: currentModel,
|
||||
width: viewport.width,
|
||||
height: viewport.height,
|
||||
ratio,
|
||||
palette: props.palette,
|
||||
typography: props.headerTypography,
|
||||
};
|
||||
const pixelWidth = Math.ceil(viewport.width * ratio);
|
||||
const pixelHeight = Math.ceil(viewport.height * ratio);
|
||||
if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
|
||||
if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
|
||||
canvas.style.width = `${viewport.width}px`;
|
||||
canvas.style.height = `${viewport.height}px`;
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) return;
|
||||
paintWebHeaders({
|
||||
context,
|
||||
model: currentModel,
|
||||
palette: props.palette,
|
||||
typography: props.headerTypography,
|
||||
scrollTop: scrollTopRef.current,
|
||||
viewportWidth: viewport.width,
|
||||
viewportHeight: viewport.height,
|
||||
devicePixelRatio: ratio,
|
||||
activePath: activeHeaderPathRef.current,
|
||||
});
|
||||
}, [props.headerTypography, props.palette, viewport.height, viewport.width]);
|
||||
const scheduleHeaderPaint = useCallback(() => {
|
||||
if (headerFrameRef.current === null) {
|
||||
headerFrameRef.current = requestAnimationFrame(paintHeaders);
|
||||
}
|
||||
}, [paintHeaders]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const root = rootRef.current;
|
||||
@@ -300,13 +390,37 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
props.files.map((file) => file.path),
|
||||
);
|
||||
}, [props.files]);
|
||||
useLayoutEffect(schedulePaint, [model, schedulePaint]);
|
||||
const updateInteractionFiles = useCallback(
|
||||
(scrollTop: number) => {
|
||||
const windowTop = diffInteractionWindowTop(scrollTop, viewport.height);
|
||||
setFileWindowTop((current) => (current === windowTop ? current : windowTop));
|
||||
const next = resolveVisibleFileSections({
|
||||
files: model.files,
|
||||
scrollTop: windowTop,
|
||||
viewportHeight: viewport.height,
|
||||
overscan: viewport.height * 2,
|
||||
}).files;
|
||||
setInteractionFiles((current) =>
|
||||
current.length === next.length && current[0] === next[0] && current.at(-1) === next.at(-1)
|
||||
? current
|
||||
: next,
|
||||
);
|
||||
},
|
||||
[model.files, viewport.height],
|
||||
);
|
||||
useLayoutEffect(() => {
|
||||
schedulePaint();
|
||||
scheduleHeaderPaint();
|
||||
updateInteractionFiles(scrollTopRef.current);
|
||||
}, [model, scheduleHeaderPaint, schedulePaint, updateInteractionFiles]);
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
||||
if (headerFrameRef.current !== null) cancelAnimationFrame(headerFrameRef.current);
|
||||
// Fast Refresh preserves refs while rerunning effects. Release ownership of the canceled
|
||||
// request so the refreshed renderer can schedule its first paint.
|
||||
frameRef.current = null;
|
||||
headerFrameRef.current = null;
|
||||
},
|
||||
[],
|
||||
);
|
||||
@@ -331,6 +445,9 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
(scrollElement: HTMLDivElement) => {
|
||||
const scrollTop = scrollElement.scrollTop;
|
||||
scrollTopRef.current = scrollTop;
|
||||
if (activeHeaderPathRef.current !== null) activeHeaderPathRef.current = null;
|
||||
scheduleHeaderPaint();
|
||||
updateInteractionFiles(scrollTop);
|
||||
if (hasHoveredAffordanceRef.current) {
|
||||
hasHoveredAffordanceRef.current = false;
|
||||
setHoveredAffordance(null);
|
||||
@@ -355,7 +472,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
const nextTop = Math.round(requestedTop * ratio) / ratio;
|
||||
if (nextTop !== currentWindow.top) schedulePaint(false);
|
||||
},
|
||||
[schedulePaint, viewport.height],
|
||||
[scheduleHeaderPaint, schedulePaint, updateInteractionFiles, viewport.height],
|
||||
);
|
||||
useEffect(() => {
|
||||
const scroll = scrollRef.current;
|
||||
@@ -420,8 +537,20 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
},
|
||||
[pointHit, schedulePaint],
|
||||
);
|
||||
const updateActiveHeader = useCallback(
|
||||
(target: EventTarget | null) => {
|
||||
const header =
|
||||
target instanceof Element ? target.closest<HTMLElement>("[data-diff-header]") : null;
|
||||
const activeHeaderPath = header?.dataset.diffHeaderPath ?? null;
|
||||
if (activeHeaderPathRef.current === activeHeaderPath) return;
|
||||
activeHeaderPathRef.current = activeHeaderPath;
|
||||
scheduleHeaderPaint();
|
||||
},
|
||||
[scheduleHeaderPaint],
|
||||
);
|
||||
const pointerMove = useCallback(
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
updateActiveHeader(event.target);
|
||||
const drag = dragRef.current;
|
||||
if (drag) {
|
||||
drag.moved = hasPointerDragStarted({
|
||||
@@ -463,7 +592,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
selectionRef.current = { anchor: drag.anchor, focus: hit.position };
|
||||
schedulePaint();
|
||||
},
|
||||
[pointHit, schedulePaint, viewport.width],
|
||||
[pointHit, schedulePaint, updateActiveHeader, viewport.width],
|
||||
);
|
||||
const pointerUp = useCallback(
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
@@ -505,6 +634,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
const cancelPointer = useCallback(() => {
|
||||
dragRef.current = null;
|
||||
}, []);
|
||||
const pointerLeave = useCallback(() => updateActiveHeader(null), [updateActiveHeader]);
|
||||
const copy = useCallback(
|
||||
(event: React.ClipboardEvent<HTMLDivElement>) => {
|
||||
if (!selectionRef.current) return;
|
||||
@@ -554,12 +684,13 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
onPointerUp={pointerUp}
|
||||
onPointerCancel={cancelPointer}
|
||||
onLostPointerCapture={cancelPointer}
|
||||
onPointerLeave={pointerLeave}
|
||||
onCopy={copy}
|
||||
style={SCROLL_STYLE}
|
||||
>
|
||||
<div style={contentStyle} onMouseDown={preventDocumentMouseSelection}>
|
||||
<canvas ref={canvasRef} data-testid="git-diff-canvas" style={canvasStyle} />
|
||||
{model.files.map((file) => (
|
||||
{interactionFiles.map((file) => (
|
||||
<WebFileHeaderSection key={file.path} file={file}>
|
||||
<DocumentFileHeader
|
||||
file={file}
|
||||
@@ -567,10 +698,11 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
mode={props.mode}
|
||||
onToggleFile={props.onToggleFile}
|
||||
onSelectPath={props.onSelectPath}
|
||||
canvasRendered
|
||||
/>
|
||||
</WebFileHeaderSection>
|
||||
))}
|
||||
{model.files
|
||||
{interactionFiles
|
||||
.filter((file) => !file.isCollapsed && !model.wrapLines)
|
||||
.map((file) => (
|
||||
<HorizontalScroll
|
||||
@@ -609,6 +741,11 @@ export function DiffSurface(props: DiffSurfaceProps) {
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<canvas
|
||||
ref={headerCanvasRef}
|
||||
data-testid="git-diff-header-canvas"
|
||||
style={HEADER_CANVAS_STYLE}
|
||||
/>
|
||||
<DomOverlayScrollbar scrollContainerRef={scrollRef} onUserScrollUp={noop} />
|
||||
{hoveredAffordance?.hit.target && reviewActions ? (
|
||||
<InlineReviewAddButton onPress={addHoveredComment} style={affordanceStyle} />
|
||||
@@ -686,6 +823,7 @@ function WebFileHeaderSection({
|
||||
<div style={style}>
|
||||
<div
|
||||
data-diff-header="true"
|
||||
data-diff-header-path={file.path}
|
||||
style={STICKY_HEADER_STYLE}
|
||||
onMouseDown={preventDocumentMouseSelection}
|
||||
>
|
||||
@@ -766,6 +904,7 @@ const FILE_SECTION_STYLE: React.CSSProperties = {
|
||||
right: 0,
|
||||
zIndex: 3,
|
||||
pointerEvents: "none",
|
||||
userSelect: "none",
|
||||
};
|
||||
const STICKY_HEADER_STYLE: React.CSSProperties = {
|
||||
position: "sticky",
|
||||
@@ -789,6 +928,12 @@ const CANVAS_STYLE: React.CSSProperties = {
|
||||
zIndex: 1,
|
||||
pointerEvents: "none",
|
||||
};
|
||||
const HEADER_CANVAS_STYLE: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
zIndex: 3,
|
||||
pointerEvents: "none",
|
||||
};
|
||||
const AFFORDANCE_STYLE: ViewStyle = {
|
||||
position: "absolute",
|
||||
zIndex: 5,
|
||||
@@ -808,6 +953,7 @@ function emptyDiffDocumentModel(input: {
|
||||
layout: input.layout,
|
||||
wrapLines: input.wrapLines,
|
||||
viewportWidth: input.viewportWidth,
|
||||
reviewGeometryKey: "",
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -23,6 +23,66 @@ export interface NativeTextLayout {
|
||||
paragraphs: Array<Array<Array<SkParagraph | null>>>;
|
||||
}
|
||||
|
||||
export interface NativeHeaderTextLayout {
|
||||
families: string[] | undefined;
|
||||
fontSize: number;
|
||||
statFontSize: number;
|
||||
palette: Pick<DiffPalette, "foreground" | "foregroundMuted" | "statusSuccess" | "statusDanger">;
|
||||
}
|
||||
|
||||
export interface NativeShapedHeaderText {
|
||||
paragraph: SkParagraph;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export type NativeHeaderTextTone = keyof NativeHeaderTextLayout["palette"];
|
||||
|
||||
export function createNativeHeaderTextLayout(input: {
|
||||
configuredFamily: string;
|
||||
fontSize: number;
|
||||
statFontSize: number;
|
||||
palette: NativeHeaderTextLayout["palette"];
|
||||
}): NativeHeaderTextLayout {
|
||||
const configured = input.configuredFamily
|
||||
.split(",")
|
||||
.map((family) => family.trim().replace(/^['"]|['"]$/g, ""))
|
||||
// These are React Native's platform-default UI sentinels, not custom faces.
|
||||
// Omitting the family lets Skia resolve the same platform system font.
|
||||
.filter((family) => family && family !== "normal" && family !== "system-ui");
|
||||
const families = configured.length > 0 ? [...new Set(configured)] : undefined;
|
||||
return {
|
||||
families,
|
||||
fontSize: input.fontSize,
|
||||
statFontSize: input.statFontSize,
|
||||
palette: input.palette,
|
||||
};
|
||||
}
|
||||
|
||||
export function shapeNativeHeaderText(input: {
|
||||
layout: NativeHeaderTextLayout;
|
||||
text: string;
|
||||
size: "body" | "stat";
|
||||
tone: NativeHeaderTextTone;
|
||||
maximumWidth?: number;
|
||||
}): NativeShapedHeaderText {
|
||||
const paragraph = Skia.ParagraphBuilder.Make({ maxLines: 1, ellipsis: "…" })
|
||||
.pushStyle({
|
||||
...(input.layout.families ? { fontFamilies: input.layout.families } : {}),
|
||||
fontSize: input.size === "body" ? input.layout.fontSize : input.layout.statFontSize,
|
||||
color: Skia.Color(input.layout.palette[input.tone]),
|
||||
})
|
||||
.addText(input.text)
|
||||
.pop()
|
||||
.build();
|
||||
paragraph.layout(input.maximumWidth ?? PARAGRAPH_WIDTH);
|
||||
return {
|
||||
paragraph,
|
||||
width: paragraph.getLongestLine(),
|
||||
height: paragraph.getHeight(),
|
||||
};
|
||||
}
|
||||
|
||||
export interface NativeTextLayoutStore {
|
||||
font: SkFont;
|
||||
asciiMetrics: CachedAsciiTextMetrics;
|
||||
|
||||
@@ -61,9 +61,20 @@ export interface DiffPalette {
|
||||
deletionBackground: string;
|
||||
emptyBackground: string;
|
||||
selection: string;
|
||||
headerActiveSurface: string;
|
||||
headerBorder: string;
|
||||
statusSuccess: string;
|
||||
statusDanger: string;
|
||||
statusWarning: string;
|
||||
syntax: Record<string, string>;
|
||||
}
|
||||
|
||||
export interface DiffHeaderTypography {
|
||||
family: string;
|
||||
size: number;
|
||||
statSize: number;
|
||||
}
|
||||
|
||||
export interface DiffTokenRun {
|
||||
start: number;
|
||||
end: number;
|
||||
@@ -150,6 +161,7 @@ export interface DiffDocumentModel {
|
||||
layout: "unified" | "split";
|
||||
wrapLines: boolean;
|
||||
viewportWidth: number;
|
||||
reviewGeometryKey: string;
|
||||
}
|
||||
|
||||
export interface TextMeasurer {
|
||||
@@ -168,6 +180,7 @@ export interface BuildDiffDocumentModelInput {
|
||||
palette: DiffPalette;
|
||||
reviewActions?: InlineReviewActions;
|
||||
labels: { binary: string; tooLarge: string };
|
||||
materializationWindow?: { top: number; height: number };
|
||||
/** A geometry-compatible model whose unchanged file measurements may be reused. */
|
||||
reuseFrom?: readonly DiffDocumentModel[];
|
||||
}
|
||||
@@ -206,6 +219,7 @@ export type DiffScrollAnchor =
|
||||
|
||||
export type DiffSurfaceProps = DiffDocumentProps & {
|
||||
palette: DiffPalette;
|
||||
headerTypography: DiffHeaderTypography;
|
||||
collapsedFilePaths: ReadonlySet<string>;
|
||||
onToggleFile: (path: string) => void;
|
||||
selectedPath: string | null;
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import type { ParsedDiffFile } from "@getpaseo/protocol/messages";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { createDiffDocumentWorkspaceCache } from "./workspace-cache";
|
||||
import type { BuildDiffDocumentModelInput, DiffPalette, TextMeasurer } from "./types";
|
||||
import type {
|
||||
BuildDiffDocumentModelInput,
|
||||
DiffDocumentModel,
|
||||
DiffPalette,
|
||||
TextMeasurer,
|
||||
} from "./types";
|
||||
|
||||
const palette: DiffPalette = {
|
||||
surface: "#000",
|
||||
@@ -15,6 +20,11 @@ const palette: DiffPalette = {
|
||||
deletionBackground: "#100",
|
||||
emptyBackground: "#111",
|
||||
selection: "blue",
|
||||
headerActiveSurface: "#222",
|
||||
headerBorder: "#333",
|
||||
statusSuccess: "green",
|
||||
statusDanger: "red",
|
||||
statusWarning: "orange",
|
||||
syntax: { keyword: "purple" },
|
||||
};
|
||||
|
||||
@@ -137,6 +147,33 @@ describe("diff document workspace cache", () => {
|
||||
expect(second.rows[0]).toMatchObject({ kind: "status", label: "Binary blob" });
|
||||
});
|
||||
|
||||
it("materializes successive unwrapped windows without remeasuring retained files", () => {
|
||||
const cache = createDiffDocumentWorkspaceCache();
|
||||
const files = [diffFile(), { ...diffFile(), path: "src/b.ts" }];
|
||||
const { measureText, stats } = countingMeasurer();
|
||||
const first = cache.buildModel(
|
||||
modelInput(files, measureText, { materializationWindow: { top: 0, height: 20 } }),
|
||||
);
|
||||
const firstCalls = stats.calls;
|
||||
const secondFile = first.files[1]!;
|
||||
|
||||
const second = cache.buildModel(
|
||||
modelInput(files, measureText, {
|
||||
materializationWindow: {
|
||||
top: secondFile.top,
|
||||
height: secondFile.bottom - secondFile.top,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
expect(firstCalls).toBeGreaterThan(0);
|
||||
expect(stats.calls).toBeGreaterThan(firstCalls);
|
||||
expect(measuredFragmentCount(first, 0)).toBeGreaterThan(0);
|
||||
expect(measuredFragmentCount(first, 1)).toBe(0);
|
||||
expect(measuredFragmentCount(second, 0)).toBeGreaterThan(0);
|
||||
expect(measuredFragmentCount(second, 1)).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("shares loaded typography and its text measurer across mounts", async () => {
|
||||
const cache = createDiffDocumentWorkspaceCache();
|
||||
const { measureText } = countingMeasurer();
|
||||
@@ -171,3 +208,13 @@ describe("diff document workspace cache", () => {
|
||||
expect(resource.isReady()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
function measuredFragmentCount(model: DiffDocumentModel, fileIndex: number): number {
|
||||
const file = model.files[fileIndex];
|
||||
if (!file) throw new Error(`Expected file ${fileIndex}`);
|
||||
return model.rows
|
||||
.slice(file.rowStart, file.rowEnd)
|
||||
.filter((row) => row.kind === "line")
|
||||
.flatMap((row) => row.cells)
|
||||
.reduce((count, cell) => count + (cell?.fragments.length ?? 0), 0);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createContext, useContext, useState, type ReactNode } from "react";
|
||||
import invariant from "tiny-invariant";
|
||||
import { buildDiffDocumentModel, retainReusableModels } from "./model";
|
||||
import { buildDiffDocumentModel, retainReusableModels, reviewGeometryKey } from "./model";
|
||||
import type {
|
||||
BuildDiffDocumentModelInput,
|
||||
DiffDocumentModel,
|
||||
@@ -117,17 +117,11 @@ function modelVariantKey(input: Omit<BuildDiffDocumentModelInput, "reuseFrom">):
|
||||
|
||||
function exactModelKey(input: Omit<BuildDiffDocumentModelInput, "reuseFrom">): string {
|
||||
const collapsedFilePaths = [...input.collapsedFilePaths].sort();
|
||||
const reviewGeometry = input.reviewActions
|
||||
? {
|
||||
comments: [...input.reviewActions.commentsByTarget.entries()]
|
||||
.map(([target, comments]) => [target, comments.map((comment) => comment.id).sort()])
|
||||
.sort(([left], [right]) => String(left).localeCompare(String(right))),
|
||||
editor: input.reviewActions.editor
|
||||
? [input.reviewActions.editor.target.key, input.reviewActions.editor.commentId]
|
||||
: null,
|
||||
}
|
||||
const reviewGeometry = reviewGeometryKey(input.reviewActions);
|
||||
const materializationWindow = input.materializationWindow
|
||||
? [input.materializationWindow.top, input.materializationWindow.height]
|
||||
: null;
|
||||
return JSON.stringify([collapsedFilePaths, reviewGeometry]);
|
||||
return JSON.stringify([collapsedFilePaths, reviewGeometry, materializationWindow]);
|
||||
}
|
||||
|
||||
function typographyKey(typography: DiffTypography): string {
|
||||
@@ -150,6 +144,11 @@ function paletteKey(palette: DiffPalette): string {
|
||||
palette.deletionBackground,
|
||||
palette.emptyBackground,
|
||||
palette.selection,
|
||||
palette.headerActiveSurface,
|
||||
palette.headerBorder,
|
||||
palette.statusSuccess,
|
||||
palette.statusDanger,
|
||||
palette.statusWarning,
|
||||
syntax,
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -1,51 +1,11 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
reduceFileHeaderPress,
|
||||
shouldActivateStickyHeaderPress,
|
||||
type FileHeaderPressEvent,
|
||||
type FileHeaderPressPhase,
|
||||
} from "./file-header-interaction";
|
||||
|
||||
const pressOrigin = { startedAt: 1_000, pageX: 20, pageY: 30 };
|
||||
|
||||
describe("file header interaction arbitration", () => {
|
||||
it("activates an unhandled native sticky-header tap on press out", () => {
|
||||
expect(
|
||||
shouldActivateStickyHeaderPress({
|
||||
enabled: true,
|
||||
native: true,
|
||||
pressHandled: false,
|
||||
stickyPressFallback: true,
|
||||
pressOrigin,
|
||||
releasedAt: 1_500,
|
||||
pageX: 32,
|
||||
pageY: 30,
|
||||
}),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it.each([
|
||||
["an already handled long press", { pressHandled: true }],
|
||||
["a non-native release", { native: false }],
|
||||
["a non-sticky header", { stickyPressFallback: false }],
|
||||
["a held press", { releasedAt: 1_501 }],
|
||||
["a moved press", { pageX: 33 }],
|
||||
])("does not activate %s", (_label, override) => {
|
||||
expect(
|
||||
shouldActivateStickyHeaderPress({
|
||||
enabled: true,
|
||||
native: true,
|
||||
pressHandled: false,
|
||||
stickyPressFallback: true,
|
||||
pressOrigin,
|
||||
releasedAt: 1_500,
|
||||
pageX: 32,
|
||||
pageY: 30,
|
||||
...override,
|
||||
}),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
function run(events: FileHeaderPressEvent[]) {
|
||||
let phase: FileHeaderPressPhase = "idle";
|
||||
const effects: string[] = [];
|
||||
@@ -57,64 +17,17 @@ describe("file header interaction arbitration", () => {
|
||||
return effects;
|
||||
}
|
||||
|
||||
it("lets a normal press claim a deferred sticky release exactly once", () => {
|
||||
expect(
|
||||
run([
|
||||
{ type: "press-in" },
|
||||
{ type: "press-out", stickyFallbackEligible: true },
|
||||
{ type: "press" },
|
||||
{ type: "fallback" },
|
||||
]),
|
||||
).toEqual(["defer-activate", "activate"]);
|
||||
it("activates an actual press", () => {
|
||||
expect(run([{ type: "press-in" }, { type: "press" }])).toEqual(["activate"]);
|
||||
});
|
||||
|
||||
it("keeps a duplicated wrapper press-out eligible for one fallback", () => {
|
||||
expect(
|
||||
run([
|
||||
{ type: "press-in" },
|
||||
{ type: "press-out", stickyFallbackEligible: true },
|
||||
{ type: "press-out", stickyFallbackEligible: true },
|
||||
{ type: "fallback" },
|
||||
]),
|
||||
).toEqual(["defer-activate", "activate"]);
|
||||
it("does not activate when scrolling cancels the press", () => {
|
||||
expect(run([{ type: "press-in" }])).toEqual([]);
|
||||
});
|
||||
|
||||
it("falls back once for a canceled sticky press", () => {
|
||||
expect(
|
||||
run([
|
||||
{ type: "press-in" },
|
||||
{ type: "press-out", stickyFallbackEligible: true },
|
||||
{ type: "fallback" },
|
||||
]),
|
||||
).toEqual(["defer-activate", "activate"]);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[
|
||||
"canceled non-sticky",
|
||||
[{ type: "press-in" }, { type: "press-out", stickyFallbackEligible: false }],
|
||||
],
|
||||
[
|
||||
"moved",
|
||||
[
|
||||
{ type: "press-in" },
|
||||
{ type: "press-out", stickyFallbackEligible: false },
|
||||
{ type: "fallback" },
|
||||
],
|
||||
],
|
||||
] as const)("does not activate a %s sequence", (_label, events) => {
|
||||
expect(run([...events])).toEqual([]);
|
||||
});
|
||||
|
||||
it("selects a long press without activating when Pressability later emits press-out/press", () => {
|
||||
expect(
|
||||
run([
|
||||
{ type: "press-in" },
|
||||
{ type: "long-press" },
|
||||
{ type: "press-out", stickyFallbackEligible: false },
|
||||
{ type: "press" },
|
||||
{ type: "fallback" },
|
||||
]),
|
||||
).toEqual(["select"]);
|
||||
it("selects a long press without activating when Pressability later emits press", () => {
|
||||
expect(run([{ type: "press-in" }, { type: "long-press" }, { type: "press" }])).toEqual([
|
||||
"select",
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import { useCallback, useRef } from "react";
|
||||
import type { LayoutChangeEvent } from "react-native";
|
||||
import { isNative } from "@/constants/platform";
|
||||
|
||||
const STICKY_PRESS_MAX_DURATION_MS = 500;
|
||||
const STICKY_PRESS_MAX_DISTANCE = 12;
|
||||
|
||||
interface FileHeaderInteractionInput {
|
||||
path: string;
|
||||
@@ -11,47 +7,22 @@ interface FileHeaderInteractionInput {
|
||||
onSelect?: (path: string) => void;
|
||||
onActivate?: (path: string) => void;
|
||||
onLayout?: (height: number) => void;
|
||||
stickyPressFallback?: boolean;
|
||||
}
|
||||
|
||||
interface PressPointEvent {
|
||||
nativeEvent: { pageX: number; pageY: number };
|
||||
}
|
||||
|
||||
interface PressOrigin {
|
||||
startedAt: number;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
}
|
||||
|
||||
interface StickyPressReleaseInput {
|
||||
enabled: boolean;
|
||||
native: boolean;
|
||||
pressHandled: boolean;
|
||||
stickyPressFallback: boolean;
|
||||
pressOrigin: PressOrigin | null;
|
||||
releasedAt: number;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
}
|
||||
|
||||
export interface FileHeaderInteraction {
|
||||
activate: () => void;
|
||||
select: () => void;
|
||||
onLayout: (event: LayoutChangeEvent) => void;
|
||||
onPressIn: (event: PressPointEvent) => void;
|
||||
onPressOut: (event: PressPointEvent) => void;
|
||||
onPressIn: () => void;
|
||||
onLongPress: () => void;
|
||||
}
|
||||
|
||||
export type FileHeaderPressPhase = "idle" | "pressed" | "released" | "handled" | "long";
|
||||
export type FileHeaderPressPhase = "idle" | "pressed" | "long" | "handled";
|
||||
export type FileHeaderPressEvent =
|
||||
| { type: "press-in" }
|
||||
| { type: "press-out"; stickyFallbackEligible: boolean }
|
||||
| { type: "press" }
|
||||
| { type: "long-press" }
|
||||
| { type: "fallback" };
|
||||
export type FileHeaderPressEffect = "none" | "select" | "activate" | "defer-activate";
|
||||
| { type: "long-press" };
|
||||
export type FileHeaderPressEffect = "none" | "select" | "activate";
|
||||
|
||||
export function reduceFileHeaderPress(
|
||||
phase: FileHeaderPressPhase,
|
||||
@@ -59,62 +30,14 @@ export function reduceFileHeaderPress(
|
||||
): { phase: FileHeaderPressPhase; effect: FileHeaderPressEffect } {
|
||||
if (event.type === "press-in") return { phase: "pressed", effect: "none" };
|
||||
if (event.type === "long-press") return { phase: "long", effect: "select" };
|
||||
if (event.type === "press-out") {
|
||||
if (phase === "released" || phase === "handled" || phase === "long") {
|
||||
return { phase, effect: "none" };
|
||||
}
|
||||
return event.stickyFallbackEligible && phase === "pressed"
|
||||
? { phase: "released", effect: "defer-activate" }
|
||||
: { phase: "idle", effect: "none" };
|
||||
}
|
||||
if (event.type === "press") {
|
||||
return phase === "long" || phase === "handled"
|
||||
? { phase: "handled", effect: "none" }
|
||||
: { phase: "handled", effect: "activate" };
|
||||
}
|
||||
return phase === "released"
|
||||
? { phase: "handled", effect: "activate" }
|
||||
: { phase, effect: "none" };
|
||||
}
|
||||
|
||||
export function shouldActivateStickyHeaderPress(input: StickyPressReleaseInput): boolean {
|
||||
if (
|
||||
!input.enabled ||
|
||||
!input.native ||
|
||||
input.pressHandled ||
|
||||
!input.stickyPressFallback ||
|
||||
!input.pressOrigin
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
const durationMs = input.releasedAt - input.pressOrigin.startedAt;
|
||||
const dx = input.pageX - input.pressOrigin.pageX;
|
||||
const dy = input.pageY - input.pressOrigin.pageY;
|
||||
return (
|
||||
durationMs <= STICKY_PRESS_MAX_DURATION_MS && Math.hypot(dx, dy) <= STICKY_PRESS_MAX_DISTANCE
|
||||
);
|
||||
return phase === "long" || phase === "handled"
|
||||
? { phase: "handled", effect: "none" }
|
||||
: { phase: "handled", effect: "activate" };
|
||||
}
|
||||
|
||||
export function useFileHeaderInteraction(input: FileHeaderInteractionInput): FileHeaderInteraction {
|
||||
const {
|
||||
path,
|
||||
enabled,
|
||||
onSelect,
|
||||
onActivate,
|
||||
onLayout: notifyLayout,
|
||||
stickyPressFallback = false,
|
||||
} = input;
|
||||
const pressHandledRef = useRef(false);
|
||||
const pressOriginRef = useRef<PressOrigin | null>(null);
|
||||
const { path, enabled, onSelect, onActivate, onLayout: notifyLayout } = input;
|
||||
const phaseRef = useRef<FileHeaderPressPhase>("idle");
|
||||
const fallbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const clearFallback = useCallback(() => {
|
||||
if (fallbackTimerRef.current !== null) clearTimeout(fallbackTimerRef.current);
|
||||
fallbackTimerRef.current = null;
|
||||
}, []);
|
||||
|
||||
useEffect(() => clearFallback, [clearFallback]);
|
||||
|
||||
const select = useCallback(() => {
|
||||
if (enabled) onSelect?.(path);
|
||||
@@ -122,14 +45,12 @@ export function useFileHeaderInteraction(input: FileHeaderInteractionInput): Fil
|
||||
|
||||
const activate = useCallback(() => {
|
||||
if (!enabled) return;
|
||||
clearFallback();
|
||||
const transition = reduceFileHeaderPress(phaseRef.current, { type: "press" });
|
||||
phaseRef.current = transition.phase;
|
||||
if (transition.effect !== "activate") return;
|
||||
pressHandledRef.current = true;
|
||||
select();
|
||||
onActivate?.(path);
|
||||
}, [clearFallback, enabled, onActivate, path, select]);
|
||||
}, [enabled, onActivate, path, select]);
|
||||
|
||||
const onLayout = useCallback(
|
||||
(event: LayoutChangeEvent) => {
|
||||
@@ -138,61 +59,15 @@ export function useFileHeaderInteraction(input: FileHeaderInteractionInput): Fil
|
||||
[notifyLayout],
|
||||
);
|
||||
|
||||
const onPressIn = useCallback(
|
||||
(event: PressPointEvent) => {
|
||||
clearFallback();
|
||||
phaseRef.current = reduceFileHeaderPress(phaseRef.current, { type: "press-in" }).phase;
|
||||
pressHandledRef.current = false;
|
||||
pressOriginRef.current = {
|
||||
startedAt: Date.now(),
|
||||
pageX: event.nativeEvent.pageX,
|
||||
pageY: event.nativeEvent.pageY,
|
||||
};
|
||||
},
|
||||
[clearFallback],
|
||||
);
|
||||
const onPressIn = useCallback(() => {
|
||||
phaseRef.current = reduceFileHeaderPress(phaseRef.current, { type: "press-in" }).phase;
|
||||
}, []);
|
||||
|
||||
const onLongPress = useCallback(() => {
|
||||
clearFallback();
|
||||
const transition = reduceFileHeaderPress(phaseRef.current, { type: "long-press" });
|
||||
phaseRef.current = transition.phase;
|
||||
pressHandledRef.current = true;
|
||||
if (transition.effect === "select") select();
|
||||
}, [clearFallback, select]);
|
||||
}, [select]);
|
||||
|
||||
const onPressOut = useCallback(
|
||||
(event: PressPointEvent) => {
|
||||
const eligible = shouldActivateStickyHeaderPress({
|
||||
enabled,
|
||||
native: isNative,
|
||||
pressHandled: pressHandledRef.current,
|
||||
stickyPressFallback,
|
||||
pressOrigin: pressOriginRef.current,
|
||||
releasedAt: Date.now(),
|
||||
pageX: event.nativeEvent.pageX,
|
||||
pageY: event.nativeEvent.pageY,
|
||||
});
|
||||
const transition = reduceFileHeaderPress(phaseRef.current, {
|
||||
type: "press-out",
|
||||
stickyFallbackEligible: eligible,
|
||||
});
|
||||
phaseRef.current = transition.phase;
|
||||
if (transition.effect === "defer-activate") {
|
||||
clearFallback();
|
||||
fallbackTimerRef.current = setTimeout(() => {
|
||||
fallbackTimerRef.current = null;
|
||||
const fallback = reduceFileHeaderPress(phaseRef.current, { type: "fallback" });
|
||||
phaseRef.current = fallback.phase;
|
||||
if (fallback.effect === "activate") {
|
||||
pressHandledRef.current = true;
|
||||
select();
|
||||
onActivate?.(path);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
[clearFallback, enabled, onActivate, path, select, stickyPressFallback],
|
||||
);
|
||||
|
||||
return { activate, select, onLayout, onPressIn, onPressOut, onLongPress };
|
||||
return { activate, select, onLayout, onPressIn, onLongPress };
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { allocateDiffHeaderTextWidths } from "./file-header-presentation";
|
||||
|
||||
describe("diff file header text allocation", () => {
|
||||
it("gives the filename its full width before truncating the directory", () => {
|
||||
expect(
|
||||
allocateDiffHeaderTextWidths({ available: 120, nameWidth: 80, directoryWidth: 100 }),
|
||||
).toEqual({ name: 80, directory: 36 });
|
||||
});
|
||||
|
||||
it("uses all available width for a filename that cannot fit", () => {
|
||||
expect(
|
||||
allocateDiffHeaderTextWidths({ available: 60, nameWidth: 80, directoryWidth: 100 }),
|
||||
).toEqual({ name: 60, directory: 0 });
|
||||
});
|
||||
|
||||
it("does not truncate a fitting filename merely to reserve the gap", () => {
|
||||
expect(
|
||||
allocateDiffHeaderTextWidths({ available: 82, nameWidth: 80, directoryWidth: 100 }),
|
||||
).toEqual({ name: 80, directory: 0 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
const compactFormatter = new Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
});
|
||||
|
||||
export const DIFF_FILE_HEADER_HEIGHT = 30;
|
||||
export const DIFF_FILE_HEADER_CONTENT_HEIGHT = 28;
|
||||
export const DIFF_FILE_HEADER_LEFT = 12;
|
||||
export const DIFF_FILE_HEADER_RIGHT = 8;
|
||||
export const DIFF_FILE_HEADER_ICON_SIZE = 14;
|
||||
export const DIFF_FILE_HEADER_TEXT_GAP = 4;
|
||||
|
||||
export function allocateDiffHeaderTextWidths(input: {
|
||||
available: number;
|
||||
nameWidth: number;
|
||||
directoryWidth: number;
|
||||
}): { name: number; directory: number } {
|
||||
const available = Math.max(0, input.available);
|
||||
const nameWidth = Math.max(0, input.nameWidth);
|
||||
const directoryWidth = Math.max(0, input.directoryWidth);
|
||||
if (nameWidth >= available || directoryWidth === 0) {
|
||||
return { name: Math.min(nameWidth, available), directory: 0 };
|
||||
}
|
||||
const directoryAvailable = Math.max(0, available - nameWidth - DIFF_FILE_HEADER_TEXT_GAP);
|
||||
return { name: nameWidth, directory: Math.min(directoryWidth, directoryAvailable) };
|
||||
}
|
||||
|
||||
export function formatDiffCount(value: number): string {
|
||||
return compactFormatter.format(value).toLowerCase();
|
||||
}
|
||||
|
||||
export function fileNameForPath(path: string): string {
|
||||
return path.split("/").pop() ?? path;
|
||||
}
|
||||
|
||||
export function directorySuffix(path: string): string {
|
||||
return path.includes("/") ? ` ${path.slice(0, path.lastIndexOf("/"))}` : "";
|
||||
}
|
||||
|
||||
export function diffFileChangeKind(file: {
|
||||
isNew: boolean;
|
||||
isDeleted: boolean;
|
||||
}): "added" | "deleted" | "modified" {
|
||||
if (file.isNew) return "added";
|
||||
if (file.isDeleted) return "deleted";
|
||||
return "modified";
|
||||
}
|
||||
@@ -1,5 +1,10 @@
|
||||
import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
|
||||
import { Text, View, type PressableStateCallbackType } from "react-native";
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
type GestureResponderEvent,
|
||||
type PressableStateCallbackType,
|
||||
} from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { useWorkspaceFileDragSource } from "@/attachments/use-workspace-file-drag-source";
|
||||
import { DiffStat } from "@/components/diff-stat";
|
||||
@@ -17,6 +22,12 @@ import {
|
||||
import { ContextMenu, ContextMenuTrigger } from "@/components/ui/context-menu";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { useFileHeaderInteraction } from "@/git/file-header-interaction";
|
||||
import {
|
||||
diffFileChangeKind,
|
||||
directorySuffix,
|
||||
fileNameForPath,
|
||||
formatDiffCount,
|
||||
} from "@/git/file-header-presentation";
|
||||
import type { ParsedDiffFile } from "@/git/use-diff-query";
|
||||
import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
|
||||
|
||||
@@ -43,14 +54,8 @@ export interface FileHeaderProps {
|
||||
onRevert?: (path: string, oldPath?: string) => void;
|
||||
onHeaderHeightChange?: (path: string, height: number) => void;
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
function fileNameForPath(path: string): string {
|
||||
return path.split("/").pop() ?? path;
|
||||
}
|
||||
|
||||
function directorySuffix(path: string): string {
|
||||
return path.includes("/") ? ` ${path.slice(0, path.lastIndexOf("/"))}` : "";
|
||||
canvasRendered?: boolean;
|
||||
onActiveChange?: (active: boolean) => void;
|
||||
}
|
||||
|
||||
function fileHeaderAccessibilityState(input: {
|
||||
@@ -68,12 +73,22 @@ function expandedAriaValue(showsBodyState: boolean, bodyVisible: boolean): boole
|
||||
return showsBodyState ? bodyVisible : undefined;
|
||||
}
|
||||
|
||||
function useFileHeaderHover(enabled: boolean) {
|
||||
function fileHeaderAccessibilityLabel(canvasRendered: boolean, file: ParsedDiffFile) {
|
||||
if (!canvasRendered) return undefined;
|
||||
return `${file.path}, +${formatDiffCount(file.additions)}, -${formatDiffCount(file.deletions)}`;
|
||||
}
|
||||
|
||||
function useFileHeaderHover(enabled: boolean, onActiveChange?: (active: boolean) => void) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const handlePointerEnter = useCallback(() => {
|
||||
if (enabled) setIsHovered(true);
|
||||
}, [enabled]);
|
||||
const handlePointerLeave = useCallback(() => setIsHovered(false), []);
|
||||
if (!enabled) return;
|
||||
setIsHovered(true);
|
||||
onActiveChange?.(true);
|
||||
}, [enabled, onActiveChange]);
|
||||
const handlePointerLeave = useCallback(() => {
|
||||
setIsHovered(false);
|
||||
onActiveChange?.(false);
|
||||
}, [onActiveChange]);
|
||||
return { isHovered, handlePointerEnter, handlePointerLeave };
|
||||
}
|
||||
|
||||
@@ -96,7 +111,8 @@ function fileHeaderInteractionStyle(input: {
|
||||
return input.showsBodyState ? styles.documentActive : workspaceTreeRowStyles.active;
|
||||
}
|
||||
|
||||
function fileHeaderPressFeedbackStyle(showsBodyState: boolean) {
|
||||
function fileHeaderPressFeedbackStyle(showsBodyState: boolean, canvasRendered: boolean) {
|
||||
if (canvasRendered) return undefined;
|
||||
return showsBodyState ? styles.documentPressFeedback : workspaceTreeRowStyles.active;
|
||||
}
|
||||
|
||||
@@ -115,9 +131,7 @@ function fileHeaderNameStyle(showsBodyState: boolean, isHovered: boolean) {
|
||||
}
|
||||
|
||||
function fileChange(file: ParsedDiffFile): "added" | "deleted" | "modified" {
|
||||
if (file.isNew) return "added";
|
||||
if (file.isDeleted) return "deleted";
|
||||
return "modified";
|
||||
return diffFileChangeKind(file);
|
||||
}
|
||||
|
||||
function FileHeaderMenu({
|
||||
@@ -181,9 +195,11 @@ export const FileHeader = memo(function FileHeader({
|
||||
onSelect,
|
||||
onHeaderHeightChange,
|
||||
testID,
|
||||
canvasRendered = false,
|
||||
onActiveChange,
|
||||
...actions
|
||||
}: FileHeaderProps) {
|
||||
const hover = useFileHeaderHover(interactive);
|
||||
const hover = useFileHeaderHover(interactive, onActiveChange);
|
||||
const dragSourceRef = useWorkspaceFileDragSource({
|
||||
enabled: interactive,
|
||||
disabled: file.isDeleted,
|
||||
@@ -196,7 +212,6 @@ export const FileHeader = memo(function FileHeader({
|
||||
enabled: interactive,
|
||||
onSelect,
|
||||
onActivate,
|
||||
stickyPressFallback: showsBodyState,
|
||||
onLayout: useCallback(
|
||||
(height: number) => onHeaderHeightChange?.(file.path, height),
|
||||
[file.path, onHeaderHeightChange],
|
||||
@@ -221,6 +236,13 @@ export const FileHeader = memo(function FileHeader({
|
||||
],
|
||||
[depth, hover.isHovered, isSelected, showsBodyState],
|
||||
);
|
||||
const canvasPressableStyle = useCallback(
|
||||
(state: PressableStateCallbackType) => [
|
||||
pressableStyle(state),
|
||||
canvasRendered && styles.canvasInteraction,
|
||||
],
|
||||
[canvasRendered, pressableStyle],
|
||||
);
|
||||
const accessibilityState = useMemo(
|
||||
() => fileHeaderAccessibilityState({ showsBodyState, bodyVisible, isSelected }),
|
||||
[bodyVisible, isSelected, showsBodyState],
|
||||
@@ -260,36 +282,67 @@ export const FileHeader = memo(function FileHeader({
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
const renderedContent = canvasRendered ? (
|
||||
<View ref={dragSourceRef} style={styles.canvasInteractionContent} />
|
||||
) : (
|
||||
content
|
||||
);
|
||||
const accessibilityLabel = fileHeaderAccessibilityLabel(canvasRendered, file);
|
||||
const handlePressIn = useCallback(
|
||||
(_event: GestureResponderEvent) => {
|
||||
onActiveChange?.(true);
|
||||
interaction.onPressIn();
|
||||
},
|
||||
[interaction, onActiveChange],
|
||||
);
|
||||
const handlePressOut = useCallback(
|
||||
(_event: GestureResponderEvent) => {
|
||||
onActiveChange?.(false);
|
||||
},
|
||||
[onActiveChange],
|
||||
);
|
||||
let trigger: ReactElement;
|
||||
if (interactive) {
|
||||
trigger = (
|
||||
<ContextMenuTrigger
|
||||
testID={testID ? `${testID}-toggle` : undefined}
|
||||
style={pressableStyle}
|
||||
highlightStyle={fileHeaderPressFeedbackStyle(showsBodyState)}
|
||||
cancelable={false}
|
||||
onPressIn={interaction.onPressIn}
|
||||
onPressOut={interaction.onPressOut}
|
||||
style={canvasPressableStyle}
|
||||
highlightStyle={fileHeaderPressFeedbackStyle(showsBodyState, canvasRendered)}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
onLongPress={interaction.onLongPress}
|
||||
onContextMenu={interaction.select}
|
||||
onPress={interaction.activate}
|
||||
accessibilityState={accessibilityState}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
aria-expanded={expandedAriaValue(showsBodyState, bodyVisible)}
|
||||
aria-selected={isSelected}
|
||||
>
|
||||
{content}
|
||||
{renderedContent}
|
||||
</ContextMenuTrigger>
|
||||
);
|
||||
} else {
|
||||
trigger = <View style={pressableStyle({ pressed: false })}>{content}</View>;
|
||||
trigger = (
|
||||
<View
|
||||
style={[pressableStyle({ pressed: false }), canvasRendered && styles.canvasInteraction]}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
>
|
||||
{renderedContent}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View
|
||||
style={[styles.container, fileHeaderContainerStyle(showsBodyState)]}
|
||||
style={[
|
||||
styles.container,
|
||||
fileHeaderContainerStyle(showsBodyState),
|
||||
canvasRendered && styles.canvasInteraction,
|
||||
]}
|
||||
onLayout={interaction.onLayout}
|
||||
onPointerEnter={hover.handlePointerEnter}
|
||||
onPointerLeave={hover.handlePointerLeave}
|
||||
testID={testID}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
>
|
||||
<ContextMenu>
|
||||
<Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
|
||||
@@ -347,6 +400,13 @@ const styles = StyleSheet.create((theme) => ({
|
||||
},
|
||||
documentActive: { backgroundColor: theme.colors.surface1 },
|
||||
documentPressFeedback: { backgroundColor: theme.colors.surface1 },
|
||||
canvasInteraction: {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "transparent",
|
||||
elevation: 0,
|
||||
shadowOpacity: 0,
|
||||
},
|
||||
canvasInteractionContent: { flex: 1, minWidth: 0 },
|
||||
left: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
|
||||
Reference in New Issue
Block a user