FN-5990: start workflow editor viewport at top-left

Ensure the workflow node editor opens at the origin instead of auto-fitting away from the top-left.

- replace React Flow's fitView startup behavior with an explicit default viewport at x=0, y=0, zoom=1
- add a regression test that asserts the initial viewport transform starts at the top-left with scale 1

Files changed:
 packages/dashboard/app/components/WorkflowNodeEditor.tsx |  2 +-
 .../app/components/__tests__/WorkflowNodeEditor.test.tsx | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-5990

Fusion-Task-Lineage: 682ca8f8-a698-4234-a2d6-31c8efa657db
This commit is contained in:
gsxdsm
2026-06-07 20:27:56 -07:00
parent ffce26ab1d
commit 312bec674d
2 changed files with 17 additions and 1 deletions

View File

@@ -2627,7 +2627,7 @@ function InnerEditor({
setSelectedEdgeId(null);
}}
defaultEdgeOptions={{ interactionWidth: WF_EDGE_INTERACTION_WIDTH }}
fitView
defaultViewport={{ x: 0, y: 0, zoom: 1 }}
>
<Background />
<Controls />

View File

@@ -443,6 +443,22 @@ describe("WorkflowNodeEditor — U5 auto-layout", () => {
});
});
it("starts the canvas viewport at the top-left on first open", async () => {
vi.mocked(fetchWorkflows).mockResolvedValue([v2Def()]);
const { container } = render(
<WorkflowNodeEditor isOpen onClose={() => {}} addToast={() => {}} />,
);
await screen.findByTestId("wf-node-start");
await waitFor(() => {
const viewport = container.querySelector<HTMLElement>(".react-flow__viewport");
expect(viewport).not.toBeNull();
expect(viewport?.style.transform).toMatch(/translate\(0px,\s*0px\)/);
expect(viewport?.style.transform).toContain("scale(1)");
});
});
it("clicking auto-layout still works after initial load", async () => {
vi.mocked(fetchWorkflows).mockResolvedValue([v2Def()]);
render(