Controls

FluxFlowControls is the button bar of an interactive canvas: zoom out, the current zoom level, zoom in, and take the flow fullscreen. Write it anywhere inside a Flow and it pins itself to a corner of the viewport, so it stays put while the flow pans and zooms behind it.

It renders nothing on a flow without interactive, since there is nothing there to zoom.

The zoom level sits between the two zoom buttons and is a button of its own: it opens a flyout holding 200%, 150%, 100%, 75%, 50% and fit view. A level zooms about the middle of the viewport, so what is being looked at stays where it is, and a level the flow cannot reach is left out of the list: a canvas capped with max-zoom never offers one.

Fullscreen hands the whole screen to the flow, panels and all, and leaves the zoom and the position alone: the flow only gains room. The button sits apart from the zoom buttons, and it is left out entirely on a browser that does not allow fullscreen.

Payment received

Amount over €1,000?

TIP

The buttons carry an icon and no text of their own, so every name the bar holds is a prop rather than a fixed string: set fit-label, fullscreen-label, exit-fullscreen-label, zoom-in-label, zoom-label and zoom-out-label to the language of your application. The zoom levels are percentages, which need no translating.

Required icons

arrows-to-dot

circle-check

compress

expand

minus

plus

Props

position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
The corner of the viewport the controls hang in.
Default: bottom-right

offset?: number
The distance, in pixels, the controls keep from the two edges of their corner.
Default: 15

fitLabel?: string
The name of the fit view item in the zoom flyout.
Default: Fit view

fullscreenLabel?: string
The accessible name of the fullscreen button.
Default: Fullscreen

exitFullscreenLabel?: string
The accessible name the fullscreen button carries while the flow fills the screen.
Default: Exit fullscreen

zoomInLabel?: string
The accessible name of the zoom in button.
Default: Zoom in

zoomLabel?: string
The accessible name of the flyout the zoom level opens.
Default: Zoom

zoomOutLabel?: string
The accessible name of the zoom out button.
Default: Zoom out

Examples

Corner

Point position at the corner the bar belongs in. It is the same prop a Panel takes, so controls and a panel of your own line up on the same grid.

Preview

Start

Run the import

Code

<template>
    <div style="height: 390px">
        <FluxFlow :padding="21" interactive background="grid">
            <FluxFlowNode id="start" :x="0" :y="0">
                <FluxFlowTerminal color="info" icon="play" label="Start"/>
            </FluxFlowNode>

            <FluxFlowNode id="run" :x="0" :y="150">
                <FluxFlowActionCard title="Run the import" icon="server"/>
            </FluxFlowNode>

            <FluxFlowConnection from="start" to="run"/>

            <FluxFlowControls position="top-right"/>
        </FluxFlow>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxFlow, FluxFlowActionCard, FluxFlowConnection, FluxFlowControls, FluxFlowNode, FluxFlowTerminal } from '@flux-ui/flow';
</script>

Used components

• Flow
• Panel