feat(react-components): add default resource styling prop to 3DResour…

…ces (#3580) * feat(react-components): add default resource styling prop to 3DResources * fix: type import --------- Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
cognitedata · Aug 14, 2023 · 6b259d9 · 6b259d9
1 parent 231f367
commit 6b259d9
Show file tree

Hide file tree

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

diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 import { useRef, type ReactElement, useContext, useState, useEffect } from 'react';
-import { type NodeAppearance, type Cognite3DViewer, type PointerEventData } from '@cognite/reveal';
+import { type Cognite3DViewer, type PointerEventData } from '@cognite/reveal';
 import { ModelsLoadingStateContext } from './ModelsLoadingContext';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
 import {
@@ -16,26 +16,16 @@ import {
   type AddImageCollection360Options,
   type TypedReveal3DModel,
   type AddResourceOptions,
-  type NodeDataResult
+  type Reveal3DResourcesProps,
+  type DefaultResourceStyling
 } from './types';
 import { queryMappedData } from './queryMappedData';
 import { useFdmSdk, useSDK } from '../RevealContainer/SDKProvider';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
-import { type DmsUniqueIdentifier } from '../../utilities/FdmSDK';
-
-export type FdmAssetStylingGroup = {
-  fdmAssetExternalIds: DmsUniqueIdentifier[];
-  style: { cad: NodeAppearance };
-};
-
-export type Reveal3DResourcesProps = {
-  resources: AddResourceOptions[];
-  instanceStyling?: FdmAssetStylingGroup[];
-  onNodeClick?: (node: Promise<NodeDataResult | undefined>) => void;
-};
 
 export const Reveal3DResources = ({
   resources,
+  defaultResourceStyling,
   instanceStyling,
   onNodeClick
 }: Reveal3DResourcesProps): ReactElement => {
@@ -48,7 +38,15 @@ export const Reveal3DResources = ({
   const numModelsLoaded = useRef(0);
 
   useEffect(() => {
-    getTypedModels(resources, viewer).then(setReveal3DModels).catch(console.error);
+    getTypedModels(resources, viewer)
+      .then((models) => {
+        models.forEach((model) => {
+          setDefaultResourceStyling(model, defaultResourceStyling);
+        });
+        return models;
+      })
+      .then(setReveal3DModels)
+      .catch(console.error);
   }, [resources, viewer]);
 
   const reveal3DModelsStyling = useCalculateModelsStyling(reveal3DModels, instanceStyling ?? []);
@@ -155,3 +153,18 @@ async function getTypedModels(
       })
   );
 }
+
+function setDefaultResourceStyling(
+  model: TypedReveal3DModel,
+  defaultResourceStyling?: DefaultResourceStyling
+): void {
+  if (model.styling !== undefined || defaultResourceStyling === undefined) {
+    return;
+  }
+
+  if (model.type === 'cad') {
+    model.styling = defaultResourceStyling.cad;
+  } else if (model.type === 'pointcloud') {
+    model.styling = defaultResourceStyling.pointcloud;
+  }
+}
diff --git a/react-components/src/components/Reveal3DResources/types.ts b/react-components/src/components/Reveal3DResources/types.ts
@@ -9,7 +9,7 @@ import {
   type NodeAppearance
 } from '@cognite/reveal';
 import { type Matrix4 } from 'three';
-import { type Source } from '../../utilities/FdmSDK';
+import { type DmsUniqueIdentifier, type Source } from '../../utilities/FdmSDK';
 import { type Node3D } from '@cognite/sdk/dist/src';
 
 export type AddImageCollection360Options = {
@@ -21,7 +21,7 @@ export type FdmPropertyType<NodeType> = Record<string, Record<string, NodeType>>
 export type AddResourceOptions = AddReveal3DModelOptions | AddImageCollection360Options;
 
 export type AddReveal3DModelOptions = AddModelOptions & { transform?: Matrix4 } & {
-  styling?: { default: NodeAppearance; mapped: NodeAppearance };
+  styling?: { default?: NodeAppearance; mapped?: NodeAppearance };
 };
 export type TypedReveal3DModel = AddReveal3DModelOptions & { type: SupportedModelTypes };
 
@@ -31,3 +31,20 @@ export type NodeDataResult = {
   cadNode: Node3D;
   intersection: CadIntersection;
 };
+
+export type FdmAssetStylingGroup = {
+  fdmAssetExternalIds: DmsUniqueIdentifier[];
+  style: { cad: NodeAppearance };
+};
+
+export type DefaultResourceStyling = {
+  cad?: { default?: NodeAppearance; mapped?: NodeAppearance };
+  pointcloud?: { default: NodeAppearance };
+};
+
+export type Reveal3DResourcesProps = {
+  resources: AddResourceOptions[];
+  defaultResourceStyling?: DefaultResourceStyling;
+  instanceStyling?: FdmAssetStylingGroup[];
+  onNodeClick?: (node: Promise<NodeDataResult | undefined>) => void;
+};
diff --git a/react-components/src/hooks/useCalculateModelsStyling.tsx b/react-components/src/hooks/useCalculateModelsStyling.tsx
@@ -1,8 +1,10 @@
 /*!
  * Copyright 2023 Cognite AS
  */
-import { type FdmAssetStylingGroup } from '../components/Reveal3DResources/Reveal3DResources';
-import { type TypedReveal3DModel } from '../components/Reveal3DResources/types';
+import {
+  type FdmAssetStylingGroup,
+  type TypedReveal3DModel
+} from '../components/Reveal3DResources/types';
 import { type PointCloudModelStyling } from '../components/PointCloudContainer/PointCloudContainer';
 import {
   type NodeStylingGroup,

diff --git a/react-components/src/index.ts b/react-components/src/index.ts
@@ -35,8 +35,9 @@ export {
 } from './components/CadModelContainer/CadModelContainer';
 export {
   type Reveal3DResourcesProps,
-  type FdmAssetStylingGroup
-} from './components/Reveal3DResources/Reveal3DResources';
+  type FdmAssetStylingGroup,
+  type DefaultResourceStyling
+} from './components/Reveal3DResources/types';
 export type {
   AddImageCollection360Options,
   AddResourceOptions,

diff --git a/react-components/stories/ModelsStyling.stories.tsx b/react-components/stories/ModelsStyling.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
   argTypes: {
     resources: {
       description: 'Styling of all models',
-      options: ['RedDefaultGreenMapped', 'GrayDefaultBlueMapped', 'None'],
+      options: ['RedDefaultGreenMapped', 'GreenDefaultRedMapped', 'None'],
       control: {
         type: 'radio'
       },
@@ -32,12 +32,12 @@ const meta = {
             styling: { default: { color: new Color('red') }, mapped: { color: new Color('green') } }
           }
         ],
-        GrayDefaultBlueMapped: [
+        GreenDefaultRedMapped: [
           {
             ...model,
             styling: {
-              default: { color: new Color('#efefef') },
-              mapped: { color: new Color('#c5cbff') }
+              default: { color: new Color('green') },
+              mapped: { color: new Color('red') }
             }
           }
         ],
@@ -63,9 +63,14 @@ export const Main: Story = {
         ...model
       }
     ],
-    instanceStyling: []
+    defaultResourceStyling: {
+      cad: {
+        default: { color: new Color('#efefef') },
+        mapped: { color: new Color('#c5cbff') }
+      }
+    }
   },
-  render: ({ resources }) => {
+  render: ({ resources, defaultResourceStyling }) => {
     return (
       <RevealContainer
         sdk={sdk}
@@ -76,7 +81,7 @@ export const Main: Story = {
             placement: 'topRight'
           }
         }}>
-        <Reveal3DResources resources={resources} />
+        <Reveal3DResources resources={resources} defaultResourceStyling={defaultResourceStyling} />
         <CameraController
           initialFitCamera={{
             to: 'allModels'