fix(liveview): allow zoom-out to 0.25 so large infra fits
View-only mode set no minZoom, so React Flow defaulted to 0.5 and big canvases couldn't zoom out far enough to fit. Match the editor's bounds (minZoom 0.25, maxZoom 2.5). Add a regression test asserting the props. ha-relevant: maybe
This commit is contained in:
@@ -158,6 +158,8 @@ function LiveViewCanvas() {
|
||||
elementsSelectable={false}
|
||||
panOnDrag
|
||||
zoomOnScroll
|
||||
minZoom={0.25}
|
||||
maxZoom={2.5}
|
||||
colorMode={theme.colors.reactFlowColorMode}
|
||||
connectionMode={ConnectionMode.Loose}
|
||||
onNodeClick={onNodeClick}
|
||||
|
||||
@@ -5,9 +5,15 @@ import { useThemeStore } from '@/stores/themeStore'
|
||||
|
||||
// ── Mock heavy dependencies ────────────────────────────────────────────────
|
||||
|
||||
// Capture props passed to ReactFlow so we can assert zoom bounds etc.
|
||||
let rfProps: Record<string, unknown> = {}
|
||||
|
||||
vi.mock('@xyflow/react', () => ({
|
||||
ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
ReactFlow: () => <div data-testid="react-flow" />,
|
||||
ReactFlow: (props: Record<string, unknown>) => {
|
||||
rfProps = props
|
||||
return <div data-testid="react-flow" />
|
||||
},
|
||||
Background: () => null,
|
||||
Controls: () => null,
|
||||
BackgroundVariant: { Dots: 'dots' },
|
||||
@@ -49,6 +55,7 @@ const canvasPayload = {
|
||||
|
||||
describe('LiveView (non-standalone)', () => {
|
||||
beforeEach(() => {
|
||||
rfProps = {}
|
||||
vi.mocked(liveviewApi.load).mockReset()
|
||||
useCanvasStore.setState({ nodes: [], edges: [] })
|
||||
})
|
||||
@@ -114,6 +121,17 @@ describe('LiveView (non-standalone)', () => {
|
||||
expect(liveviewApi.load).toHaveBeenCalledWith('correct-key')
|
||||
})
|
||||
|
||||
it('allows zooming out to 0.25 so large infra fits (matches the editor)', async () => {
|
||||
setSearch('?key=correct-key')
|
||||
vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
|
||||
render(<LiveView />)
|
||||
await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
|
||||
// Without an explicit minZoom, React Flow defaults to 0.5 and big canvases
|
||||
// can't zoom out far enough to fit.
|
||||
expect(rfProps.minZoom).toBe(0.25)
|
||||
expect(rfProps.maxZoom).toBe(2.5)
|
||||
})
|
||||
|
||||
it('loads nodes into the canvas store on success', async () => {
|
||||
setSearch('?key=secret')
|
||||
vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
|
||||
|
||||
Reference in New Issue
Block a user