Canvas

CanvasControls

Floating zoom toolbar: zoom out, percentage, zoom in, Fit map to view — plus any extra icon buttons.

• Provide zoom (1 = fitted) and the handlers; pass extra for host-specific buttons.
• Fit map to view (corner-frame icon) resets zoom and pan so the whole current layer is in view. It is not full screen — never use maximize arrows here; those mean expand (e.g. the MCP card's Expand). Pass fitted while nothing has moved and it disables itself — VisualMap does this for you.
• onResetLayout adds Reset layout (↶). Pass it only while the current layer has moved ideas — VisualMap does this for you.
• Keyboard: ⌘+ / ⌘− zoom; ⌘0 fits the map to view.

Props

export interface CanvasControlsProps {
  zoom?: number;
  onZoomIn?: () => void;
  onZoomOut?: () => void;
  /** Fit map to view: reset zoom and pan so the whole layer shows (corner-frame icon — not full screen). */ onFit?: () => void;
  /** Already fitted: Fit is disabled. */ fitted?: boolean;
  /** Shown only when passed — e.g. after ideas were moved. */ onResetLayout?: () => void;
  extra?: ReactNode
}

Use

import { CanvasControls } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/CanvasControls/README.md