feat: React Toolbar scaffolding

react-components/src/components/RevealToolbar/FitModelsButton.tsx

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, useCallback } from 'react';
+
+import { Box3 } from 'three';
+
+import { useReveal } from '../RevealContainer/RevealContext';
+import { Button } from '@cognite/cogs.js';
+
+export const FitModelsButton = (): ReactElement => {
+  const viewer = useReveal();
+
+  const updateCamera = useCallback(() => {
+    const box = new Box3();
+
+    viewer.models.forEach((model) => box.union(model.getModelBoundingBox()));
+
+    viewer.cameraManager.fitCameraToBoundingBox(box);
+  }, [viewer, ...viewer.models]);
+
+  return (
+    <Button
+      type="ghost"
+      icon="ExpandAlternative"
+      aria-label="Fit camera to models"
+      onClick={updateCamera}
+    />
+  );
+};

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement } from 'react';
+import { Button, ToolBar, type ToolBarProps } from '@cognite/cogs.js';
+import { FitModelsButton } from './FitModelsButton';
+
+const defaultStyle: ToolBarProps = {
+  style: {
+    position: 'absolute',
+    left: '20px',
+    top: '70px'
+  }
+};
+
+export const RevealToolbar = (toolBarProps: ToolBarProps): ReactElement => {
+  if (toolBarProps.className === undefined && toolBarProps.style === undefined) {
+    toolBarProps = { ...toolBarProps, ...defaultStyle };
+  }
+  return (
+    <ToolBar {...toolBarProps}>
+      <>
+        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
+
+        <div className="cogs-toolbar-divider" />
+
+        <FitModelsButton />
+        <Button type="ghost" icon="Collapse" aria-label="Focus asset" />
+
+        <div className="cogs-toolbar-divider" />
+
+        <Button type="ghost" icon="Slice" aria-label="Slice models" />
+        <Button type="ghost" icon="Ruler" aria-label="Make measurements" />
+
+        <div className="cogs-toolbar-divider" />
+
+        <Button type="ghost" icon="Settings" aria-label="Show settings" />
+        <Button type="ghost" icon="Help" aria-label="Display help" />
+      </>
+    </ToolBar>
+  );
+};
+
+RevealToolbar.FitModelsButton = FitModelsButton;

react-components/src/index.ts

@@ -17,3 +17,4 @@ export type {
   AddResourceOptions,
   AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
+export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';

react-components/stories/Toolbar.stories.tsx

@@ -0,0 +1,61 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CadModelContainer, RevealContainer, RevealToolbar } from '../src';
+import { CogniteClient } from '@cognite/sdk';
+import { Color } from 'three';
+import styled from 'styled-components';
+import { ToolBar, type ToolBarButton } from '@cognite/cogs.js';
+
+const meta = {
+  title: 'Example/Toolbar',
+  component: CadModelContainer,
+  tags: ['autodocs']
+} satisfies Meta<typeof CadModelContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const token = new URLSearchParams(window.location.search).get('token') ?? '';
+const sdk = new CogniteClient({
+  appId: 'reveal.example',
+  baseUrl: 'https://greenfield.cognitedata.com',
+  project: '3d-test',
+  getToken: async () => await Promise.resolve(token)
+});
+
+const MyCustomToolbar = styled(ToolBar)`
+  position: absolute;
+  right: 20px;
+  top: 70px;
+`;
+
+const exampleToolBarButtons: ToolBarButton[] = [
+  {
+    icon: 'Edit'
+  },
+  {
+    icon: 'World'
+  }
+];
+
+export const Main: Story = {
+  args: {
+    addModelOptions: {
+      modelId: 1791160622840317,
+      revisionId: 498427137020189
+    }
+  },
+  render: ({ addModelOptions }) => (
+    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+      <CadModelContainer addModelOptions={addModelOptions} />
+      <RevealToolbar />
+      <MyCustomToolbar>
+        <RevealToolbar.FitModelsButton />
+        <ToolBar.ButtonGroup buttonGroup={exampleToolBarButtons} />
+      </MyCustomToolbar>
+    </RevealContainer>
+  )
+};