mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-04 07:33:18 +00:00
fa1f01ebbc
* feat(app): add fullscreen viewer for Mermaid diagrams on web Add a fullscreen action to the diagram toolbar that opens the diagram in a modal ZoomableViewport with free zoom/pan, closable via the close button, Escape, or clicking outside the diagram. The sandboxed iframe runtime moves into a shared MermaidIframeRuntime so the inline host and the fullscreen viewer drive the same renderer. Fixes uncovered while verifying the feature end to end: - The runtime measured the rendered SVG with getBoundingClientRect(), which depends on the iframe size the host derives from that very measurement. Each streaming re-render shrank the reported size by the diagram box padding, ratcheting diagrams down to a few pixels. Measure the viewBox instead, which is the diagram's own size, and let the SVG fill whatever frame the host provides. - ZoomableViewport's root is flex: 1, so as a flex item its 0% basis overrode the inline diagram box height and the box collapsed, scaling the diagram tiny and clipping the toolbar unclickable. Size the box from its height and keep a minimum tall enough for the toolbar. - react-native-web's Modal focus trap focuses the first descendant that takes focus, which was the diagram iframe; every keystroke then landed in the sandboxed frame and Escape never reached the window listener. Mark the presentational iframe inert and focus the viewer's content layer on mount. Closes #4106 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * test(app): exercise Mermaid fullscreen interactions Cover zoom, pan, outside-click dismissal, and streaming layout through the real browser path. Remove the mocked DOM test that duplicated those behaviors without exercising the viewport or iframe runtime. --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { test } from "../support/fixtures";
|
|
import {
|
|
closeDiagramFullscreen,
|
|
closeDiagramFullscreenFromOutside,
|
|
expectCompletedDiagram,
|
|
expectFullscreenDiagram,
|
|
expectFullscreenDiagramClosed,
|
|
openDiagramFullscreen,
|
|
requestDiagram,
|
|
waitForDiagramTurnToComplete,
|
|
zoomAndPanFullscreenDiagram,
|
|
} from "../support/helpers/diagram";
|
|
import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
|
|
|
|
const MERMAID_DIAGRAM = [
|
|
"```mermaid",
|
|
"flowchart LR",
|
|
" Start --> Middle",
|
|
" Middle --> Review",
|
|
" Review --> Ship",
|
|
"```",
|
|
].join("\n");
|
|
|
|
test("opens a Mermaid diagram fullscreen and closes it again", async ({ page }) => {
|
|
test.setTimeout(120_000);
|
|
|
|
const agent = await seedMockAgentWorkspace({
|
|
repoPrefix: "mermaid-fullscreen-",
|
|
title: "Fullscreen Mermaid",
|
|
featureValues: {
|
|
mockStreamingAssistantResponse: MERMAID_DIAGRAM,
|
|
mockStreamingAssistantIntervalMs: 10,
|
|
},
|
|
});
|
|
try {
|
|
await test.step("Open the conversation and wait for the rendered diagram", async () => {
|
|
await openAgentRoute(page, agent);
|
|
await requestDiagram(agent);
|
|
await waitForDiagramTurnToComplete(agent);
|
|
await expectCompletedDiagram(page, ["Start", "Ship"]);
|
|
});
|
|
|
|
await test.step("The toolbar opens the diagram fullscreen", async () => {
|
|
await openDiagramFullscreen(page);
|
|
await expectFullscreenDiagram(page, ["Start", "Review", "Ship"]);
|
|
});
|
|
|
|
await test.step("The fullscreen diagram zooms with the wheel and pans by dragging", async () => {
|
|
await zoomAndPanFullscreenDiagram(page);
|
|
});
|
|
|
|
await test.step("The close action returns to the conversation", async () => {
|
|
await closeDiagramFullscreen(page);
|
|
await expectFullscreenDiagramClosed(page);
|
|
await expectCompletedDiagram(page, ["Start", "Ship"]);
|
|
});
|
|
|
|
await test.step("Escape closes the fullscreen diagram", async () => {
|
|
await openDiagramFullscreen(page);
|
|
await expectFullscreenDiagram(page, ["Start", "Ship"]);
|
|
await page.keyboard.press("Escape");
|
|
await expectFullscreenDiagramClosed(page);
|
|
});
|
|
|
|
await test.step("Clicking outside the diagram closes the fullscreen viewer", async () => {
|
|
await openDiagramFullscreen(page);
|
|
await expectFullscreenDiagram(page, ["Start", "Ship"]);
|
|
await closeDiagramFullscreenFromOutside(page);
|
|
await expectFullscreenDiagramClosed(page);
|
|
});
|
|
} finally {
|
|
await agent.cleanup();
|
|
}
|
|
});
|