feat(react-components): expose viewer options (#3468)

* feat: expose viewer options in RevealContainer * chore: bump package version
cognitedata · Jul 5, 2023 · 15a4389 · 15a4389
1 parent cb946e0
commit 15a4389
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",

diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/react-components/src/components/RevealContainer/RevealContainer.tsx
@@ -3,7 +3,7 @@
  */
 import { type CogniteClient } from '@cognite/sdk';
 import { useEffect, useRef, type ReactNode, useState, type ReactElement } from 'react';
-import { Cognite3DViewer } from '@cognite/reveal';
+import { Cognite3DViewer, type Cognite3DViewerOptions } from '@cognite/reveal';
 import { RevealContext } from './RevealContext';
 import { type Color } from 'three';
 import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
@@ -12,9 +12,24 @@ type RevealContainerProps = {
   color?: Color;
   sdk: CogniteClient;
   children?: ReactNode;
+  viewerOptions?: Pick<
+    Cognite3DViewerOptions,
+    | 'antiAliasingHint'
+    | 'loadingIndicatorStyle'
+    | 'rendererResolutionThreshold'
+    | 'antiAliasingHint'
+    | 'ssaoQualityHint'
+    | 'pointCloudEffects'
+    | 'enableEdges'
+  >;
 };
 
-export function RevealContainer({ children, sdk, color }: RevealContainerProps): ReactElement {
+export function RevealContainer({
+  children,
+  sdk,
+  color,
+  viewerOptions
+}: RevealContainerProps): ReactElement {
   const [viewer, setViewer] = useState<Cognite3DViewer>();
   const revealDomElementRef = useRef<HTMLDivElement>(null);
 
@@ -45,7 +60,7 @@ export function RevealContainer({ children, sdk, color }: RevealContainerProps):
     if (domElement === null) {
       throw new Error('Failure in mounting RevealContainer to DOM.');
     }
-    const viewer = new Cognite3DViewer({ sdk, domElement });
+    const viewer = new Cognite3DViewer({ ...viewerOptions, sdk, domElement });
     viewer.setBackgroundColor({ color, alpha: 1 });
     setViewer(viewer);
   }

diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
@@ -40,7 +40,15 @@ export const Main: Story = {
     ]
   },
   render: ({ resources }) => (
-    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+    <RevealContainer
+      sdk={sdk}
+      color={new Color(0x4a4a4a)}
+      viewerOptions={{
+        loadingIndicatorStyle: {
+          opacity: 1,
+          placement: 'topRight'
+        }
+      }}>
       <Reveal3DResources resources={resources} />
       <CameraController
         initialFitCamera={{