From 6b259d911138a890a293bc662b4a3888826871ba Mon Sep 17 00:00:00 2001 From: "Christopher J. Tannum" Date: Mon, 14 Aug 2023 15:45:32 +0200 Subject: [PATCH] feat(react-components): add default resource styling prop to 3DResources (#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> --- react-components/package.json | 2 +- .../Reveal3DResources/Reveal3DResources.tsx | 43 ++++++++++++------- .../src/components/Reveal3DResources/types.ts | 21 ++++++++- .../src/hooks/useCalculateModelsStyling.tsx | 6 ++- react-components/src/index.ts | 5 ++- .../stories/ModelsStyling.stories.tsx | 19 +++++--- 6 files changed, 67 insertions(+), 29 deletions(-) diff --git a/react-components/package.json b/react-components/package.json index d9deb7fa545..2afb4b393f5 100644 --- 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 index 88456c6b4d7..88eba782bde 100644 --- 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) => 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 index 8878b231dd7..d6c06ff69f0 100644 --- 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 = Record> 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) => void; +}; diff --git a/react-components/src/hooks/useCalculateModelsStyling.tsx b/react-components/src/hooks/useCalculateModelsStyling.tsx index 094526e238c..153fb453ead 100644 --- 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 index 729ffd16d56..9487a68d40f 100644 --- 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 index f4fd12cddfa..33661c5f01d 100644 --- 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 ( - +