From 783e1913ce6c698c6e0f2403be2cc14eef9a3a97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <hakon.flatval@cognite.com>
Date: Fri, 30 Jun 2023 14:23:34 +0200
Subject: [PATCH 1/7] feat: initial work on React Toolbar

---
 .../components/Toolbar/FitModelsButton.tsx    | 32 ++++++++++++
 .../src/components/Toolbar/SliceButton.tsx    | 19 +++++++
 .../src/components/Toolbar/Toolbar.tsx        | 50 +++++++++++++++++++
 .../src/components/Toolbar/ToolbarButton.tsx  | 10 ++++
 react-components/src/components/index.ts      |  2 +
 react-components/stories/Toolbar.stories.tsx  | 40 +++++++++++++++
 6 files changed, 153 insertions(+)
 create mode 100644 react-components/src/components/Toolbar/FitModelsButton.tsx
 create mode 100644 react-components/src/components/Toolbar/SliceButton.tsx
 create mode 100644 react-components/src/components/Toolbar/Toolbar.tsx
 create mode 100644 react-components/src/components/Toolbar/ToolbarButton.tsx
 create mode 100644 react-components/stories/Toolbar.stories.tsx

diff --git a/react-components/src/components/Toolbar/FitModelsButton.tsx b/react-components/src/components/Toolbar/FitModelsButton.tsx
new file mode 100644
index 00000000000..b9837278ab0
--- /dev/null
+++ b/react-components/src/components/Toolbar/FitModelsButton.tsx
@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Box3 } from 'three';
+
+import { useReveal } from '../RevealContainer/RevealContext';
+import { ToolbarButton } from './ToolbarButton';
+
+export const FitModelsButton = () => {
+  const viewer = useReveal();
+
+  const modelList = viewer.models;
+
+  const updateCamera = useCallback(() => {
+    const box = new Box3();
+
+    viewer.models.forEach((model) => box.union(model.getModelBoundingBox()));
+
+    viewer.cameraManager.fitCameraToBoundingBox(box);
+  }, [viewer, ...modelList]);
+
+  return (
+    <ToolbarButton
+      icon="ExpandAlternative"
+      aria-label="Fit camera to models"
+      onClick={updateCamera}
+    />
+  );
+};
diff --git a/react-components/src/components/Toolbar/SliceButton.tsx b/react-components/src/components/Toolbar/SliceButton.tsx
new file mode 100644
index 00000000000..f3a93029e4e
--- /dev/null
+++ b/react-components/src/components/Toolbar/SliceButton.tsx
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { ToolbarButton } from './ToolbarButton';
+
+import { useReveal } from '../RevealContainer/RevealContext';
+
+export const SliceButton = () => {
+  const viewer = useReveal();
+
+  const [yClip, setYClip] = useState<number | undefined>(undefined);
+
+  useEffect(() => {}, []);
+
+  return <ToolbarButton icon="Slice" aria-label="Slice models" />;
+};
diff --git a/react-components/src/components/Toolbar/Toolbar.tsx b/react-components/src/components/Toolbar/Toolbar.tsx
new file mode 100644
index 00000000000..2166e11649b
--- /dev/null
+++ b/react-components/src/components/Toolbar/Toolbar.tsx
@@ -0,0 +1,50 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { Divider, ToolBar } from '@cognite/cogs.js';
+import { SliceButton } from './SliceButton';
+import { FitModelsButton } from './FitModelsButton';
+
+import { ToolbarButton } from './ToolbarButton';
+
+export type ToolbarProps = {
+  children?: JSX.Element;
+};
+
+const defaultButtons = (
+  <>
+    <ToolbarButton icon="Layers" aria-label="Show layer options" />
+
+    <Divider />
+
+    <FitModelsButton />
+    <ToolbarButton icon="Collapse" aria-label="Focus asset" />
+
+    <Divider />
+
+    <SliceButton />
+    <ToolbarButton icon="Ruler" aria-label="Make measurements" />
+
+    <Divider />
+
+    <ToolbarButton icon="Settings" aria-label="Show settings" />
+    <ToolbarButton icon="Help" aria-label="Display help" />
+  </>
+);
+
+const Toolbar = (props: ToolbarProps) => {
+  const hasCustomChildren = props.children !== undefined;
+
+  return <FloatingToolbar>{hasCustomChildren ? props.children : defaultButtons}</FloatingToolbar>;
+};
+
+const FloatingToolbar = styled(ToolBar)`
+  position: absolute;
+  left: 30px;
+  bottom: 30px;
+`;
+
+export default Toolbar;
diff --git a/react-components/src/components/Toolbar/ToolbarButton.tsx b/react-components/src/components/Toolbar/ToolbarButton.tsx
new file mode 100644
index 00000000000..770055822b5
--- /dev/null
+++ b/react-components/src/components/Toolbar/ToolbarButton.tsx
@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React from 'react';
+import { Button, ButtonProps } from '@cognite/cogs.js';
+
+export const ToolbarButton = (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => (
+  <Button type="ghost" {...props} />
+);
diff --git a/react-components/src/components/index.ts b/react-components/src/components/index.ts
index eb0f43bf4b0..c2d7eea6913 100644
--- a/react-components/src/components/index.ts
+++ b/react-components/src/components/index.ts
@@ -5,3 +5,5 @@ import '@cognite/cogs.js/dist/cogs.css';
 export { default as RevealContainer } from './RevealContainer/RevealContainer';
 export { default as CogniteCadModelContainer } from './CogniteCadModelContainer/CogniteCadModelContainer';
 export { Image360HistoricalDetails } from './Image360HistoricalDetails/Image360HistoricalDetails';
+export { default as Toolbar } from './Toolbar/Toolbar';
+export { ToolbarButton } from './Toolbar/ToolbarButton';
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
new file mode 100644
index 00000000000..30a6e0ff24a
--- /dev/null
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CogniteCadModelContainer, RevealContainer, Toolbar, ToolbarButton } from '../src';
+import { CogniteClient } from '@cognite/sdk';
+import { Color } from 'three';
+
+const meta = {
+  title: 'Example/Toolbar',
+  component: CogniteCadModelContainer,
+  tags: ['autodocs']
+} satisfies Meta<typeof CogniteCadModelContainer>;
+
+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)
+});
+
+export const Main: Story = {
+  args: {
+    addModelOptions: {
+      modelId: 1791160622840317,
+      revisionId: 498427137020189
+    }
+  },
+  render: ({ addModelOptions }) => (
+    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+      <CogniteCadModelContainer addModelOptions={addModelOptions} />
+      <Toolbar />
+    </RevealContainer>
+  )
+};

From 0abb20dcf66ad0199f35cfc82a6094f7648d6e94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <hakon.flatval@cognite.com>
Date: Fri, 30 Jun 2023 16:15:58 +0200
Subject: [PATCH 2/7] chore: cleanup to prepare for review

---
 .../src/components/Toolbar/SliceButton.tsx    | 19 -------------------
 .../src/components/Toolbar/Toolbar.tsx        | 12 +++---------
 .../src/components/Toolbar/ToolbarButton.tsx  |  2 +-
 3 files changed, 4 insertions(+), 29 deletions(-)
 delete mode 100644 react-components/src/components/Toolbar/SliceButton.tsx

diff --git a/react-components/src/components/Toolbar/SliceButton.tsx b/react-components/src/components/Toolbar/SliceButton.tsx
deleted file mode 100644
index f3a93029e4e..00000000000
--- a/react-components/src/components/Toolbar/SliceButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import React, { useEffect, useState } from 'react';
-
-import { ToolbarButton } from './ToolbarButton';
-
-import { useReveal } from '../RevealContainer/RevealContext';
-
-export const SliceButton = () => {
-  const viewer = useReveal();
-
-  const [yClip, setYClip] = useState<number | undefined>(undefined);
-
-  useEffect(() => {}, []);
-
-  return <ToolbarButton icon="Slice" aria-label="Slice models" />;
-};
diff --git a/react-components/src/components/Toolbar/Toolbar.tsx b/react-components/src/components/Toolbar/Toolbar.tsx
index 2166e11649b..a3f48dfc26e 100644
--- a/react-components/src/components/Toolbar/Toolbar.tsx
+++ b/react-components/src/components/Toolbar/Toolbar.tsx
@@ -5,7 +5,6 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Divider, ToolBar } from '@cognite/cogs.js';
-import { SliceButton } from './SliceButton';
 import { FitModelsButton } from './FitModelsButton';
 
 import { ToolbarButton } from './ToolbarButton';
@@ -16,16 +15,13 @@ export type ToolbarProps = {
 
 const defaultButtons = (
   <>
-    <ToolbarButton icon="Layers" aria-label="Show layer options" />
-
-    <Divider />
-
     <FitModelsButton />
+
     <ToolbarButton icon="Collapse" aria-label="Focus asset" />
 
     <Divider />
 
-    <SliceButton />
+    <ToolbarButton icon="Slice" aria-label="Slice models" />
     <ToolbarButton icon="Ruler" aria-label="Make measurements" />
 
     <Divider />
@@ -36,9 +32,7 @@ const defaultButtons = (
 );
 
 const Toolbar = (props: ToolbarProps) => {
-  const hasCustomChildren = props.children !== undefined;
-
-  return <FloatingToolbar>{hasCustomChildren ? props.children : defaultButtons}</FloatingToolbar>;
+  return <FloatingToolbar>{props.children ?? defaultButtons}</FloatingToolbar>;
 };
 
 const FloatingToolbar = styled(ToolBar)`
diff --git a/react-components/src/components/Toolbar/ToolbarButton.tsx b/react-components/src/components/Toolbar/ToolbarButton.tsx
index 770055822b5..8eb10fffab5 100644
--- a/react-components/src/components/Toolbar/ToolbarButton.tsx
+++ b/react-components/src/components/Toolbar/ToolbarButton.tsx
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ButtonProps } from '@cognite/cogs.js';
+import { Button, type ButtonProps } from '@cognite/cogs.js';
 
 export const ToolbarButton = (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => (
   <Button type="ghost" {...props} />

From f1a03fb281035046520d9b94263150a929d3099c Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Tue, 4 Jul 2023 14:31:06 +0200
Subject: [PATCH 3/7] fix: linting and expose styling capabilities

---
 .../components/Toolbar/FitModelsButton.tsx    |  4 +--
 .../src/components/Toolbar/Toolbar.tsx        | 35 +++++++++++--------
 .../src/components/Toolbar/ToolbarButton.tsx  |  8 ++---
 react-components/src/components/index.ts      |  2 +-
 react-components/stories/Toolbar.stories.tsx  | 11 ++++--
 5 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/react-components/src/components/Toolbar/FitModelsButton.tsx b/react-components/src/components/Toolbar/FitModelsButton.tsx
index b9837278ab0..c5a21c0a0ad 100644
--- a/react-components/src/components/Toolbar/FitModelsButton.tsx
+++ b/react-components/src/components/Toolbar/FitModelsButton.tsx
@@ -2,14 +2,14 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import { type ReactElement, useCallback } from 'react';
 
 import { Box3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
 import { ToolbarButton } from './ToolbarButton';
 
-export const FitModelsButton = () => {
+export const FitModelsButton = (): ReactElement => {
   const viewer = useReveal();
 
   const modelList = viewer.models;
diff --git a/react-components/src/components/Toolbar/Toolbar.tsx b/react-components/src/components/Toolbar/Toolbar.tsx
index a3f48dfc26e..c259a7d2078 100644
--- a/react-components/src/components/Toolbar/Toolbar.tsx
+++ b/react-components/src/components/Toolbar/Toolbar.tsx
@@ -2,21 +2,25 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import { type CSSProperties, type ReactElement } from 'react';
 import { Divider, ToolBar } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
 
 import { ToolbarButton } from './ToolbarButton';
 
-export type ToolbarProps = {
-  children?: JSX.Element;
+export type RevealToolbarProps = {
+  children?: ReactElement;
+  className?: string;
+  style?: CSSProperties;
 };
 
 const defaultButtons = (
   <>
-    <FitModelsButton />
+    <ToolbarButton icon="Layers" aria-label="3D Resource layers" />
+
+    <Divider />
 
+    <FitModelsButton />
     <ToolbarButton icon="Collapse" aria-label="Focus asset" />
 
     <Divider />
@@ -31,14 +35,17 @@ const defaultButtons = (
   </>
 );
 
-const Toolbar = (props: ToolbarProps) => {
-  return <FloatingToolbar>{props.children ?? defaultButtons}</FloatingToolbar>;
+const defaultStyle: CSSProperties = { position: 'absolute', bottom: '30px', left: '100px' };
+
+const RevealToolbar = ({ children, className, style }: RevealToolbarProps): ReactElement => {
+  if (className === undefined && style === undefined) {
+    style = { ...defaultStyle };
+  }
+  return (
+    <ToolBar className={className} style={style}>
+      {children ?? defaultButtons}
+    </ToolBar>
+  );
 };
 
-const FloatingToolbar = styled(ToolBar)`
-  position: absolute;
-  left: 30px;
-  bottom: 30px;
-`;
-
-export default Toolbar;
+export default RevealToolbar;
diff --git a/react-components/src/components/Toolbar/ToolbarButton.tsx b/react-components/src/components/Toolbar/ToolbarButton.tsx
index 8eb10fffab5..2129d989bed 100644
--- a/react-components/src/components/Toolbar/ToolbarButton.tsx
+++ b/react-components/src/components/Toolbar/ToolbarButton.tsx
@@ -2,9 +2,9 @@
  * Copyright 2023 Cognite AS
  */
 
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import { Button, type ButtonProps } from '@cognite/cogs.js';
 
-export const ToolbarButton = (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => (
-  <Button type="ghost" {...props} />
-);
+export const ToolbarButton = (
+  props: ButtonProps & React.RefAttributes<HTMLButtonElement>
+): ReactElement => <Button type="ghost" {...props} />;
diff --git a/react-components/src/components/index.ts b/react-components/src/components/index.ts
index c2d7eea6913..bb2afb5adad 100644
--- a/react-components/src/components/index.ts
+++ b/react-components/src/components/index.ts
@@ -5,5 +5,5 @@ import '@cognite/cogs.js/dist/cogs.css';
 export { default as RevealContainer } from './RevealContainer/RevealContainer';
 export { default as CogniteCadModelContainer } from './CogniteCadModelContainer/CogniteCadModelContainer';
 export { Image360HistoricalDetails } from './Image360HistoricalDetails/Image360HistoricalDetails';
-export { default as Toolbar } from './Toolbar/Toolbar';
+export { default as RevealToolbar } from './Toolbar/Toolbar';
 export { ToolbarButton } from './Toolbar/ToolbarButton';
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index 30a6e0ff24a..fcc89d7a645 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -3,9 +3,10 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { CogniteCadModelContainer, RevealContainer, Toolbar, ToolbarButton } from '../src';
+import { CogniteCadModelContainer, RevealContainer, RevealToolbar } from '../src';
 import { CogniteClient } from '@cognite/sdk';
 import { Color } from 'three';
+import styled from 'styled-components';
 
 const meta = {
   title: 'Example/Toolbar',
@@ -24,6 +25,12 @@ const sdk = new CogniteClient({
   getToken: async () => await Promise.resolve(token)
 });
 
+const FloatingToolbar = styled(RevealToolbar)`
+  position: absolute;
+  left: 20px;
+  top: 70px;
+`;
+
 export const Main: Story = {
   args: {
     addModelOptions: {
@@ -34,7 +41,7 @@ export const Main: Story = {
   render: ({ addModelOptions }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CogniteCadModelContainer addModelOptions={addModelOptions} />
-      <Toolbar />
+      <FloatingToolbar />
     </RevealContainer>
   )
 };

From aeee0b4a64c3eab061d1a661fa248fe1749fcd9d Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Wed, 5 Jul 2023 13:35:25 +0200
Subject: [PATCH 4/7] chore: rename components

---
 .../{Toolbar => RevealToolbar}/FitModelsButton.tsx |  4 ++--
 .../RevealToolbar.tsx}                             | 14 +++++++-------
 .../RevealToolbarButton.tsx}                       |  2 +-
 react-components/src/index.ts                      |  4 ++--
 react-components/stories/Toolbar.stories.tsx       |  8 ++++----
 5 files changed, 16 insertions(+), 16 deletions(-)
 rename react-components/src/components/{Toolbar => RevealToolbar}/FitModelsButton.tsx (88%)
 rename react-components/src/components/{Toolbar/Toolbar.tsx => RevealToolbar/RevealToolbar.tsx} (63%)
 rename react-components/src/components/{Toolbar/ToolbarButton.tsx => RevealToolbar/RevealToolbarButton.tsx} (87%)

diff --git a/react-components/src/components/Toolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
similarity index 88%
rename from react-components/src/components/Toolbar/FitModelsButton.tsx
rename to react-components/src/components/RevealToolbar/FitModelsButton.tsx
index c5a21c0a0ad..18690de76f6 100644
--- a/react-components/src/components/Toolbar/FitModelsButton.tsx
+++ b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -7,7 +7,7 @@ import { type ReactElement, useCallback } from 'react';
 import { Box3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
-import { ToolbarButton } from './ToolbarButton';
+import { RevealToolbarButton } from './RevealToolbarButton';
 
 export const FitModelsButton = (): ReactElement => {
   const viewer = useReveal();
@@ -23,7 +23,7 @@ export const FitModelsButton = (): ReactElement => {
   }, [viewer, ...modelList]);
 
   return (
-    <ToolbarButton
+    <RevealToolbarButton
       icon="ExpandAlternative"
       aria-label="Fit camera to models"
       onClick={updateCamera}
diff --git a/react-components/src/components/Toolbar/Toolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
similarity index 63%
rename from react-components/src/components/Toolbar/Toolbar.tsx
rename to react-components/src/components/RevealToolbar/RevealToolbar.tsx
index 30bbaba1625..33dd5f7df3b 100644
--- a/react-components/src/components/Toolbar/Toolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -6,7 +6,7 @@ import { type CSSProperties, type ReactElement } from 'react';
 import { Divider, ToolBar } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
 
-import { ToolbarButton } from './ToolbarButton';
+import { RevealToolbarButton } from './RevealToolbarButton';
 
 export type RevealToolbarProps = {
   children?: ReactElement;
@@ -16,22 +16,22 @@ export type RevealToolbarProps = {
 
 const defaultButtons = (
   <>
-    <ToolbarButton icon="Layers" aria-label="3D Resource layers" />
+    <RevealToolbarButton icon="Layers" aria-label="3D Resource layers" />
 
     <Divider />
 
     <FitModelsButton />
-    <ToolbarButton icon="Collapse" aria-label="Focus asset" />
+    <RevealToolbarButton icon="Collapse" aria-label="Focus asset" />
 
     <Divider />
 
-    <ToolbarButton icon="Slice" aria-label="Slice models" />
-    <ToolbarButton icon="Ruler" aria-label="Make measurements" />
+    <RevealToolbarButton icon="Slice" aria-label="Slice models" />
+    <RevealToolbarButton icon="Ruler" aria-label="Make measurements" />
 
     <Divider />
 
-    <ToolbarButton icon="Settings" aria-label="Show settings" />
-    <ToolbarButton icon="Help" aria-label="Display help" />
+    <RevealToolbarButton icon="Settings" aria-label="Show settings" />
+    <RevealToolbarButton icon="Help" aria-label="Display help" />
   </>
 );
 
diff --git a/react-components/src/components/Toolbar/ToolbarButton.tsx b/react-components/src/components/RevealToolbar/RevealToolbarButton.tsx
similarity index 87%
rename from react-components/src/components/Toolbar/ToolbarButton.tsx
rename to react-components/src/components/RevealToolbar/RevealToolbarButton.tsx
index 2129d989bed..87e01c469eb 100644
--- a/react-components/src/components/Toolbar/ToolbarButton.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbarButton.tsx
@@ -5,6 +5,6 @@
 import React, { type ReactElement } from 'react';
 import { Button, type ButtonProps } from '@cognite/cogs.js';
 
-export const ToolbarButton = (
+export const RevealToolbarButton = (
   props: ButtonProps & React.RefAttributes<HTMLButtonElement>
 ): ReactElement => <Button type="ghost" {...props} />;
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index 1d6ae91a4b4..e3ec683197f 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -17,5 +17,5 @@ export type {
   AddResourceOptions,
   AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
-export { RevealToolbar } from './components/Toolbar/Toolbar';
-export { ToolbarButton } from './components/Toolbar/ToolbarButton';
+export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
+export { RevealToolbarButton } from './components/RevealToolbar/RevealToolbarButton';
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index fcc89d7a645..8ba01791b39 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -3,16 +3,16 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { CogniteCadModelContainer, RevealContainer, RevealToolbar } from '../src';
+import { CadModelContainer, RevealContainer, RevealToolbar } from '../src';
 import { CogniteClient } from '@cognite/sdk';
 import { Color } from 'three';
 import styled from 'styled-components';
 
 const meta = {
   title: 'Example/Toolbar',
-  component: CogniteCadModelContainer,
+  component: CadModelContainer,
   tags: ['autodocs']
-} satisfies Meta<typeof CogniteCadModelContainer>;
+} satisfies Meta<typeof CadModelContainer>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -40,7 +40,7 @@ export const Main: Story = {
   },
   render: ({ addModelOptions }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
-      <CogniteCadModelContainer addModelOptions={addModelOptions} />
+      <CadModelContainer addModelOptions={addModelOptions} />
       <FloatingToolbar />
     </RevealContainer>
   )

From fc0355a7b62244d1d7c52f104ca925df37bf6f9a Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Wed, 5 Jul 2023 14:29:40 +0200
Subject: [PATCH 5/7] chore: restructure component, expose fit models button as
 child component

---
 .../RevealToolbar/FitModelsButton.tsx         |  5 +-
 .../RevealToolbar/RevealToolbar.tsx           | 48 +++++++++----------
 .../RevealToolbar/RevealToolbarButton.tsx     | 10 ----
 react-components/src/index.ts                 |  1 -
 react-components/stories/Toolbar.stories.tsx  | 24 +++++++++-
 5 files changed, 47 insertions(+), 41 deletions(-)
 delete mode 100644 react-components/src/components/RevealToolbar/RevealToolbarButton.tsx

diff --git a/react-components/src/components/RevealToolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
index 18690de76f6..a7cde83aace 100644
--- a/react-components/src/components/RevealToolbar/FitModelsButton.tsx
+++ b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -7,7 +7,7 @@ import { type ReactElement, useCallback } from 'react';
 import { Box3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
-import { RevealToolbarButton } from './RevealToolbarButton';
+import { Button } from '@cognite/cogs.js';
 
 export const FitModelsButton = (): ReactElement => {
   const viewer = useReveal();
@@ -23,7 +23,8 @@ export const FitModelsButton = (): ReactElement => {
   }, [viewer, ...modelList]);
 
   return (
-    <RevealToolbarButton
+    <Button
+      type="ghost"
       icon="ExpandAlternative"
       aria-label="Fit camera to models"
       onClick={updateCamera}
diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
index 33dd5f7df3b..a57b4d15934 100644
--- a/react-components/src/components/RevealToolbar/RevealToolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -3,47 +3,43 @@
  */
 
 import { type CSSProperties, type ReactElement } from 'react';
-import { Divider, ToolBar } from '@cognite/cogs.js';
+import { Button, ToolBar } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
 
-import { RevealToolbarButton } from './RevealToolbarButton';
-
 export type RevealToolbarProps = {
   children?: ReactElement;
   className?: string;
   style?: CSSProperties;
 };
 
-const defaultButtons = (
-  <>
-    <RevealToolbarButton icon="Layers" aria-label="3D Resource layers" />
-
-    <Divider />
-
-    <FitModelsButton />
-    <RevealToolbarButton icon="Collapse" aria-label="Focus asset" />
-
-    <Divider />
-
-    <RevealToolbarButton icon="Slice" aria-label="Slice models" />
-    <RevealToolbarButton icon="Ruler" aria-label="Make measurements" />
-
-    <Divider />
-
-    <RevealToolbarButton icon="Settings" aria-label="Show settings" />
-    <RevealToolbarButton icon="Help" aria-label="Display help" />
-  </>
-);
-
 const defaultStyle: CSSProperties = { position: 'absolute', bottom: '30px', left: '100px' };
 
-export const RevealToolbar = ({ children, className, style }: RevealToolbarProps): ReactElement => {
+export const RevealToolbar = ({ className, style }: RevealToolbarProps): ReactElement => {
   if (className === undefined && style === undefined) {
     style = { ...defaultStyle };
   }
   return (
     <ToolBar className={className} style={style}>
-      {children ?? defaultButtons}
+      <>
+        <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;
diff --git a/react-components/src/components/RevealToolbar/RevealToolbarButton.tsx b/react-components/src/components/RevealToolbar/RevealToolbarButton.tsx
deleted file mode 100644
index 87e01c469eb..00000000000
--- a/react-components/src/components/RevealToolbar/RevealToolbarButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import React, { type ReactElement } from 'react';
-import { Button, type ButtonProps } from '@cognite/cogs.js';
-
-export const RevealToolbarButton = (
-  props: ButtonProps & React.RefAttributes<HTMLButtonElement>
-): ReactElement => <Button type="ghost" {...props} />;
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index e3ec683197f..5e90ed3340a 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -18,4 +18,3 @@ export type {
   AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
-export { RevealToolbarButton } from './components/RevealToolbar/RevealToolbarButton';
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index 8ba01791b39..ab0c753cb74 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -7,6 +7,7 @@ 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',
@@ -25,12 +26,27 @@ const sdk = new CogniteClient({
   getToken: async () => await Promise.resolve(token)
 });
 
-const FloatingToolbar = styled(RevealToolbar)`
+const StyledRevealToolBar = styled(RevealToolbar)`
   position: absolute;
   left: 20px;
   top: 70px;
 `;
 
+const RightStyledToolbar = styled(ToolBar)`
+  position: absolute;
+  left: 80px;
+  top: 70px;
+`;
+
+const exampleToolBarButtons: ToolBarButton[] = [
+  {
+    icon: 'Edit'
+  },
+  {
+    icon: 'World'
+  }
+];
+
 export const Main: Story = {
   args: {
     addModelOptions: {
@@ -41,7 +57,11 @@ export const Main: Story = {
   render: ({ addModelOptions }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
-      <FloatingToolbar />
+      <StyledRevealToolBar />
+      <RightStyledToolbar>
+        <RevealToolbar.FitModelsButton />
+        <ToolBar.ButtonGroup buttonGroup={exampleToolBarButtons} />
+      </RightStyledToolbar>
     </RevealContainer>
   )
 };

From 7611bc4de8d8726af2dc1750e58823429f5679a4 Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Wed, 5 Jul 2023 14:51:49 +0200
Subject: [PATCH 6/7] fix: let reveal toolbar consume props as cogs toolbar

---
 .../RevealToolbar/RevealToolbar.tsx           | 24 +++++++++----------
 react-components/stories/Toolbar.stories.tsx  | 16 ++++---------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
index a57b4d15934..74777b0d1dd 100644
--- a/react-components/src/components/RevealToolbar/RevealToolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -2,24 +2,24 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type CSSProperties, type ReactElement } from 'react';
-import { Button, ToolBar } from '@cognite/cogs.js';
+import { type ReactElement } from 'react';
+import { Button, ToolBar, type ToolBarProps } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
 
-export type RevealToolbarProps = {
-  children?: ReactElement;
-  className?: string;
-  style?: CSSProperties;
+const defaultStyle: ToolBarProps = {
+  style: {
+    position: 'absolute',
+    left: '20px',
+    top: '70px'
+  }
 };
 
-const defaultStyle: CSSProperties = { position: 'absolute', bottom: '30px', left: '100px' };
-
-export const RevealToolbar = ({ className, style }: RevealToolbarProps): ReactElement => {
-  if (className === undefined && style === undefined) {
-    style = { ...defaultStyle };
+export const RevealToolbar = (toolBarProps: ToolBarProps): ReactElement => {
+  if (toolBarProps.className === undefined && toolBarProps.style === undefined) {
+    toolBarProps = { ...toolBarProps, ...defaultStyle };
   }
   return (
-    <ToolBar className={className} style={style}>
+    <ToolBar {...toolBarProps}>
       <>
         <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
 
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index ab0c753cb74..635f659dda1 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -26,15 +26,9 @@ const sdk = new CogniteClient({
   getToken: async () => await Promise.resolve(token)
 });
 
-const StyledRevealToolBar = styled(RevealToolbar)`
+const MyCustomToolbar = styled(ToolBar)`
   position: absolute;
-  left: 20px;
-  top: 70px;
-`;
-
-const RightStyledToolbar = styled(ToolBar)`
-  position: absolute;
-  left: 80px;
+  right: 20px;
   top: 70px;
 `;
 
@@ -57,11 +51,11 @@ export const Main: Story = {
   render: ({ addModelOptions }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
-      <StyledRevealToolBar />
-      <RightStyledToolbar>
+      <RevealToolbar />
+      <MyCustomToolbar>
         <RevealToolbar.FitModelsButton />
         <ToolBar.ButtonGroup buttonGroup={exampleToolBarButtons} />
-      </RightStyledToolbar>
+      </MyCustomToolbar>
     </RevealContainer>
   )
 };

From edf63130792bd930256dc954c7a5736040dfc64a Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Wed, 5 Jul 2023 15:12:57 +0200
Subject: [PATCH 7/7] fix: user viewer.models directly

---
 .../src/components/RevealToolbar/FitModelsButton.tsx          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
index a7cde83aace..242b4e2c662 100644
--- a/react-components/src/components/RevealToolbar/FitModelsButton.tsx
+++ b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -12,15 +12,13 @@ import { Button } from '@cognite/cogs.js';
 export const FitModelsButton = (): ReactElement => {
   const viewer = useReveal();
 
-  const modelList = viewer.models;
-
   const updateCamera = useCallback(() => {
     const box = new Box3();
 
     viewer.models.forEach((model) => box.union(model.getModelBoundingBox()));
 
     viewer.cameraManager.fitCameraToBoundingBox(box);
-  }, [viewer, ...modelList]);
+  }, [viewer, ...viewer.models]);
 
   return (
     <Button