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}
|
elementsSelectable={false}
|
||||||
panOnDrag
|
panOnDrag
|
||||||
zoomOnScroll
|
zoomOnScroll
|
||||||
|
minZoom={0.25}
|
||||||
|
maxZoom={2.5}
|
||||||
colorMode={theme.colors.reactFlowColorMode}
|
colorMode={theme.colors.reactFlowColorMode}
|
||||||
connectionMode={ConnectionMode.Loose}
|
connectionMode={ConnectionMode.Loose}
|
||||||
onNodeClick={onNodeClick}
|
onNodeClick={onNodeClick}
|
||||||
|
|||||||
@@ -5,9 +5,15 @@ import { useThemeStore } from '@/stores/themeStore'
|
|||||||
|
|
||||||
// ── Mock heavy dependencies ────────────────────────────────────────────────
|
// ── Mock heavy dependencies ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// Capture props passed to ReactFlow so we can assert zoom bounds etc.
|
||||||
|
let rfProps: Record<string, unknown> = {}
|
||||||
|
|
||||||
vi.mock('@xyflow/react', () => ({
|
vi.mock('@xyflow/react', () => ({
|
||||||
ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
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,
|
Background: () => null,
|
||||||
Controls: () => null,
|
Controls: () => null,
|
||||||
BackgroundVariant: { Dots: 'dots' },
|
BackgroundVariant: { Dots: 'dots' },
|
||||||
@@ -49,6 +55,7 @@ const canvasPayload = {
|
|||||||
|
|
||||||
describe('LiveView (non-standalone)', () => {
|
describe('LiveView (non-standalone)', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
rfProps = {}
|
||||||
vi.mocked(liveviewApi.load).mockReset()
|
vi.mocked(liveviewApi.load).mockReset()
|
||||||
useCanvasStore.setState({ nodes: [], edges: [] })
|
useCanvasStore.setState({ nodes: [], edges: [] })
|
||||||
})
|
})
|
||||||
@@ -114,6 +121,17 @@ describe('LiveView (non-standalone)', () => {
|
|||||||
expect(liveviewApi.load).toHaveBeenCalledWith('correct-key')
|
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 () => {
|
it('loads nodes into the canvas store on success', async () => {
|
||||||
setSearch('?key=secret')
|
setSearch('?key=secret')
|
||||||
vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
|
vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
|
||||||
|
|||||||
Reference in New Issue
Block a user