Skip to main content

Toolbar

Renders a floating toolbar anchored to the bottom center of the viewport. The toolbar displays different tool sets depending on which viewer is active (map, BIM, or point cloud). Each tool is rendered as a ToolbarButton within a Menubar container.

Usage​

import { Toolbar } from '@collabdt/core/components/Toolbar';
import { ViewerNames } from '@collabdt/core/types';

<Toolbar viewer={ViewerNames.map} />

Props​

PropTypeRequiredDefaultDescription
viewerViewerNamesYes—Determines which set of tools to display (map, bim, or pointcloud).

Behaviour​

  • Renders nothing if the viewer value doesn't match a known viewer type or if the corresponding tool set is empty.
  • Tools are loaded dynamically based on the viewer:
    • ViewerNames.map → mapToolbarTools()
    • ViewerNames.bim → bimToolbarTools()
    • ViewerNames.pointcloud → pointcloudToolbarTools()
  • The toolbar is positioned fixed at the bottom center of the screen with pointer-events-none on the container (individual buttons handle their own pointer events).
  • Wraps all toolbar buttons in a SubmenuProvider to support tools with nested submenus.

Design Decisions​

Toolbar is intentionally a thin, stateless component — it receives the active viewer and renders the appropriate tool set, nothing more. All tool definitions and their behaviour live in viewer-specific files (mapTools, bimToolbar, pointcloudToolbarTools) rather than in Toolbar itself, so adding or changing tools for a viewer never requires touching this component.

The toolbar only renders for viewers that have tools (map, bim, pointcloud). Data viewers like Buildings, Sites, and Files return null — their actions live in HeaderButtons and DetailActions instead. This is a deliberate separation: spatial viewers need persistent, floating tool access; data viewers do not.

The toolbar is positioned fixed at the bottom-center of the screen and sits above the viewer content via z-10. pointer-events-none is set on the container so the toolbar doesn't block map interaction in the areas between buttons — pointer-events-auto is restored on individual buttons inside ToolbarButton.

Permissions​

No CASL permission checks in this component.