feat(react-components): add Reveal container and container for CogniteCadModel

react-components/src/components/CogniteCadModelContainer/CogniteCadModelContainer.tsx

@@ -1,39 +1,51 @@
 import { useEffect, useRef } from "react";
-import { AddModelOptions, CogniteCadModel } from '@cognite/reveal';
+import { AddModelOptions, CogniteCadModel } from "@cognite/reveal";
 import { useReveal } from "../RevealContainer/RevealContext";
 import { Matrix4 } from "three";
 
 type Cognite3dModelProps = {
   addModelOptions: AddModelOptions;
   transform?: THREE.Matrix4;
-}
+};
 
-export default function CogniteCadModelContainer({ addModelOptions, transform }: Cognite3dModelProps) {
+export default function CogniteCadModelContainer({
+  addModelOptions,
+  transform,
+}: Cognite3dModelProps) {
   const modelRef = useRef<CogniteCadModel>();
   const viewer = useReveal();
   const { modelId, revisionId } = addModelOptions;
 
   useEffect(() => {
-    addModel(modelId, revisionId, transform)
-      .catch(console.error);
+    addModel(modelId, revisionId, transform).catch(console.error);
     return () => {
-      if (modelRef.current === undefined || !viewer.models.includes(modelRef.current)) return;
+      if (
+        modelRef.current === undefined ||
+        !viewer.models.includes(modelRef.current)
+      ) {
+        return;
+      }
       viewer.removeModel(modelRef.current);
       modelRef.current = undefined;
-    }
+    };
   }, [addModelOptions]);
 
-  if (modelRef.current !== undefined && transform !== undefined) {
+  useEffect(() => {
+    if (modelRef.current === undefined || transform === undefined) return;
     modelRef.current.setModelTransformation(transform);
-  }
+  }, [transform]);
+
   return <></>;
 
-  async function addModel(modelId: number, revisionId: number, transform?: Matrix4) {
+  async function addModel(
+    modelId: number,
+    revisionId: number,
+    transform?: Matrix4
+  ) {
     const cadModel = await viewer.addCadModel({ modelId, revisionId });
     if (transform !== undefined) {
       cadModel.setModelTransformation(transform);
     }
-    viewer.fitCameraToModel(cadModel);
     modelRef.current = cadModel;
   }
-}
+}

react-components/src/stories/CogniteCadModelContainer.stories.tsx

@@ -1,31 +1,41 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CogniteCadModelContainer, RevealContainer } from '..';
-import { CogniteClient } from '@cognite/sdk';
-import { Color, Matrix4 } from 'three';
+import type { Meta, StoryObj } from "@storybook/react";
+import { CogniteCadModelContainer, RevealContainer } from "..";
+import { CogniteClient } from "@cognite/sdk";
+import { Color, Matrix4 } from "three";
 
 const meta = {
-  title: 'Example/CogniteCadModelContainer',
+  title: "Example/CogniteCadModelContainer",
   component: CogniteCadModelContainer,
-  tags: ['autodocs']
+  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: () => Promise.resolve(token) });
+// TODO: See if we can improve this with some proper authentication
+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: () => Promise.resolve(token),
+});
 
 export const Main: Story = {
   args: {
     addModelOptions: {
       modelId: 1791160622840317,
-      revisionId: 498427137020189
+      revisionId: 498427137020189,
     },
-    transform: new Matrix4().makeTranslation(0, 10, 0)
+    transform: new Matrix4().makeTranslation(0, 10, 0),
   },
-  render: ({ addModelOptions, transform }) =>
-    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)} >
+  render: ({ addModelOptions, transform }) => (
+    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CogniteCadModelContainer addModelOptions={addModelOptions} />
-      <CogniteCadModelContainer addModelOptions={addModelOptions} transform={transform} />
+      <CogniteCadModelContainer
+        addModelOptions={addModelOptions}
+        transform={transform}
+      />
     </RevealContainer>
+  ),
 };