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:
@@ -2627,7 +2627,7 @@ function InnerEditor({
|
||||
setSelectedEdgeId(null);
|
||||
}}
|
||||
defaultEdgeOptions={{ interactionWidth: WF_EDGE_INTERACTION_WIDTH }}
|
||||
fitView
|
||||
defaultViewport={{ x: 0, y: 0, zoom: 1 }}
|
||||
>
|
||||
<Background />
|
||||
<Controls />
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user