Fixing imports/exports

react-components/src/components/CadModelContainer/CadModelContainer.tsx

@@ -2,31 +2,15 @@
  * Copyright 2023 Cognite AS
  */
 import { type ReactElement, useEffect, useState } from 'react';
-import {
-  type NodeAppearance,
-  type AddModelOptions,
-  type CogniteCadModel,
-  type Cognite3DViewer
-} from '@cognite/reveal';
+import { type AddModelOptions, type CogniteCadModel } from '@cognite/reveal';
 import { useReveal } from '../RevealContainer/RevealContext';
 import { Matrix4 } from 'three';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
-import { useApplyCadModelStyling } from './useApplyCadModelStyling';
-
-export type NodeStylingGroup = {
-  nodeIds: number[];
-  style?: NodeAppearance;
-};
-
-export type TreeIndexStylingGroup = {
-  treeIndices: number[];
-  style?: NodeAppearance;
-};
-
-export type CadModelStyling = {
-  defaultStyle?: NodeAppearance;
-  groups?: Array<NodeStylingGroup | TreeIndexStylingGroup>;
-};
+import {
+  type CadModelStyling,
+  useApplyCadModelStyling,
+  modelExists
+} from './useApplyCadModelStyling';
 
 export type CogniteCadModelProps = {
   addModelOptions: AddModelOptions;
@@ -47,7 +31,7 @@ export function CadModelContainer({
   const [model, setModel] = useState<CogniteCadModel | undefined>(
     viewer.models.find(
       (m) => m.modelId === addModelOptions.modelId && m.revisionId === addModelOptions.revisionId
-    ) as CogniteCadModel
+    ) as CogniteCadModel | undefined
   );
 
   const { modelId, revisionId, geometryFilter } = addModelOptions;
@@ -107,10 +91,3 @@ export function CadModelContainer({
     setModel(undefined);
   }
 }
-
-export function modelExists(
-  model: CogniteCadModel | undefined,
-  viewer: Cognite3DViewer
-): model is CogniteCadModel {
-  return model !== undefined && viewer.models.includes(model);
-}

react-components/src/components/CadModelContainer/useApplyCadModelStyling.tsx

@@ -7,18 +7,29 @@ import {
   type NodeAppearance,
   type NodeCollection,
   NodeIdNodeCollection,
-  TreeIndexNodeCollection
+  TreeIndexNodeCollection,
+  type Cognite3DViewer
 } from '@cognite/reveal';
 import { useEffect } from 'react';
-import { type CadModelStyling, useReveal } from '../..';
-import {
-  type NodeStylingGroup,
-  type TreeIndexStylingGroup,
-  modelExists
-} from './CadModelContainer';
 import { useSDK } from '../RevealContainer/SDKProvider';
 import { type CogniteClient } from '@cognite/sdk';
 import { isEqual } from 'lodash';
+import { useReveal } from '../RevealContainer/RevealContext';
+
+export type NodeStylingGroup = {
+  nodeIds: number[];
+  style?: NodeAppearance;
+};
+
+export type TreeIndexStylingGroup = {
+  treeIndices: number[];
+  style?: NodeAppearance;
+};
+
+export type CadModelStyling = {
+  defaultStyle?: NodeAppearance;
+  groups?: Array<NodeStylingGroup | TreeIndexStylingGroup>;
+};
 
 export const useApplyCadModelStyling = (
   model?: CogniteCadModel,
@@ -40,14 +51,6 @@ export const useApplyCadModelStyling = (
     if (!modelExists(model, viewer)) return;
 
     model.setDefaultNodeAppearance(defaultStyle);
-
-    return () => {
-      if (!modelExists(model, viewer)) {
-        return;
-      }
-
-      model.setDefaultNodeAppearance(DefaultNodeAppearance.Default);
-    };
   }, [defaultStyle, model]);
 };
 
@@ -129,24 +132,25 @@ function isEqualTreeIndex(
   collectionB: TreeIndexNodeCollection
 ): boolean {
   const isEqualContent =
-    collectionA.getIndexSet().intersectWith(collectionB.getIndexSet()).count ===
-    collectionA.getIndexSet().count;
+    collectionA.getIndexSet().differenceWith(collectionB.getIndexSet()).count === 0;
   return isEqualContent;
 }
 
 function isEqualStyle(styleA: NodeAppearance, styleB: NodeAppearance): boolean {
+  const { color: colorA, ...restA } = styleA;
+  const { color: colorB, ...restB } = styleB;
+
   const color =
-    styleA.color === undefined || styleB.color === undefined
-      ? Boolean(styleA.color ?? styleB.color)
-      : styleA.color.equals(styleB.color);
-  const visible = styleA.visible === styleB.visible;
-  const renderInFront = styleA.renderInFront === styleB.renderInFront;
-  const renderGhosted = styleA.renderGhosted === styleB.renderGhosted;
-  const outlineColor = styleA.outlineColor === styleB.outlineColor;
-  const prioritizedForLoadingHint =
-    styleA.prioritizedForLoadingHint === styleB.prioritizedForLoadingHint;
-
-  return (
-    color && visible && renderInFront && renderGhosted && outlineColor && prioritizedForLoadingHint
-  );
+    colorA === undefined || colorB === undefined
+      ? Boolean(colorA ?? colorB)
+      : colorA.equals(colorB);
+
+  return color && isEqual(restA, restB);
+}
+
+export function modelExists(
+  model: CogniteCadModel | undefined,
+  viewer: Cognite3DViewer
+): model is CogniteCadModel {
+  return model !== undefined && viewer.models.includes(model);
 }

react-components/src/components/Reveal3DResources/Reveal3DResources.tsx

@@ -3,7 +3,8 @@
  */
 import { useRef, type ReactElement, useState, useEffect } from 'react';
 import { type Cognite3DViewer } from '@cognite/reveal';
-import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
+import { CadModelContainer } from '../CadModelContainer/CadModelContainer';
+import { type CadModelStyling } from '../CadModelContainer/useApplyCadModelStyling';
 import {
   PointCloudContainer,
   type PointCloudModelStyling

react-components/src/hooks/useCalculateModelsStyling.tsx

@@ -6,10 +6,7 @@ import {
   type TypedReveal3DModel
 } from '../components/Reveal3DResources/types';
 import { type PointCloudModelStyling } from '../components/PointCloudContainer/PointCloudContainer';
-import {
-  type NodeStylingGroup,
-  type CadModelStyling
-} from '../components/CadModelContainer/CadModelContainer';
+import {} from '../components/CadModelContainer/CadModelContainer';
 import { type InModel3dEdgeProperties } from '../utilities/globalDataModels';
 import { type EdgeItem } from '../utilities/FdmSDK';
 import { type NodeAppearance } from '@cognite/reveal';
@@ -18,6 +15,10 @@ import { type CogniteExternalId, type CogniteInternalId } from '@cognite/sdk';
 import { useFdmAssetMappings } from './useFdmAssetMappings';
 import { useEffect, useMemo } from 'react';
 import { useMappedEdgesForRevisions } from '../components/NodeCacheProvider/NodeCacheProvider';
+import {
+  type CadModelStyling,
+  type NodeStylingGroup
+} from '../components/CadModelContainer/useApplyCadModelStyling';
 
 type ModelStyleGroup = {
   model: TypedReveal3DModel;

react-components/src/index.ts

@@ -31,12 +31,12 @@ export {
   type PointCloudModelStyling,
   type AnnotationIdStylingGroup
 } from './components/PointCloudContainer/PointCloudContainer';
+export { type CogniteCadModelProps } from './components/CadModelContainer/CadModelContainer';
 export {
   type CadModelStyling,
   type TreeIndexStylingGroup,
-  type NodeStylingGroup,
-  type CogniteCadModelProps
-} from './components/CadModelContainer/CadModelContainer';
+  type NodeStylingGroup
+} from './components/CadModelContainer/useApplyCadModelStyling';
 export {
   type Reveal3DResourcesProps,
   type FdmAssetStylingGroup,

react-components/stories/HighlightNode.stories.tsx

@@ -60,29 +60,23 @@ export const Main: Story = {
 const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): ReactElement => {
   const [stylingGroups, setStylingGroups] = useState<FdmAssetStylingGroup[]>([]);
   const cameraNavigation = useCameraNavigation();
-  const [state, setState] = useState(false);
   const nodeData = useClickedNodeData();
 
   useEffect(() => {
     if (nodeData === undefined) return;
 
-      setStylingGroups([
-        {
-          fdmAssetExternalIds: [
-            { externalId: nodeData.fdmNode.externalId, space: 'pdms-mapping' }
-          ],
-          style: { cad: DefaultNodeAppearance.Highlighted }
-        }
-      ]);
+    setStylingGroups([
+      {
+        fdmAssetExternalIds: [{ externalId: nodeData.fdmNode.externalId, space: 'pdms-mapping' }],
+        style: { cad: DefaultNodeAppearance.Highlighted }
+      }
+    ]);
     void cameraNavigation.fitCameraToInstance(nodeData.fdmNode.externalId, 'pdms-mapping');
   }, [nodeData?.fdmNode]);
 
   return (
     <>
-      <RevealResourcesFitCameraOnLoad
-        resources={resources}
-        instanceStyling={stylingGroups}
-      />
+      <RevealResourcesFitCameraOnLoad resources={resources} instanceStyling={stylingGroups} />
       <RevealToolbar />
     </>
   );