fix: build fix

cognitedata · Aug 9, 2023 · 291ad0e · 291ad0e
1 parent e461cab
commit 291ad0e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 39 deletions.
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -5,8 +5,7 @@ import { useRef, type ReactElement, useContext, useState, useEffect } from 'reac
 import {
   type NodeAppearance,
   type Cognite3DViewer,
-  type PointCloudAppearance,
-  type PointerEventData
+  type PointCloudAppearance
 } from '@cognite/reveal';
 import { ModelsLoadingStateContext } from './ModelsLoadingContext';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
@@ -26,7 +25,7 @@ import {
 import { type CogniteExternalId } from '@cognite/sdk';
 import { type FdmAssetMappingsConfig } from '../../hooks/types';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
-import { useNodeMappedData } from '../../hooks/useNodeMappedData';
+import { useClickedNode } from '../..';
 
 export type FdmAssetStylingGroup = {
   fdmAssetExternalIds: CogniteExternalId[];
@@ -60,14 +59,12 @@ export const Reveal3DResources = ({
   const viewer = useReveal();
   const numModelsLoaded = useRef(0);
 
-  const [lastClickEvent, setLastClickEvent] = useState<PointerEventData | undefined>(undefined);
-
   useEffect(() => {
     getTypedModels(resources, viewer).then(setReveal3DModels).catch(console.error);
   }, [resources, viewer]);
 
   const modelsStyling = useCalculateModelsStyling(reveal3DModels, styling, fdmAssetMappingConfig);
-  const clickedNodeData = useNodeMappedData(lastClickEvent, fdmAssetMappingConfig);
+  const clickedNodeData = useClickedNode(fdmAssetMappingConfig);
 
   useEffect(() => {
     setReveal3DModelsStyling(modelsStyling);
@@ -77,19 +74,7 @@ export const Reveal3DResources = ({
     if (clickedNodeData !== undefined) {
       onNodeClick?.(Promise.resolve(clickedNodeData));
     }
-  }, [lastClickEvent, clickedNodeData]);
-
-  useEffect(() => {
-    const callback = (event: PointerEventData): void => {
-      setLastClickEvent(event);
-    };
-
-    viewer.on('click', callback);
-
-    return () => {
-      viewer.off('click', callback);
-    };
-  }, [viewer, onNodeClick]);
+  }, [clickedNodeData, onNodeClick]);
 
   const image360CollectionAddOptions = resources.filter(
     (resource): resource is AddImageCollection360Options =>

diff --git a/react-components/stories/HighlightNode.stories.tsx b/react-components/stories/HighlightNode.stories.tsx
@@ -8,12 +8,12 @@ import {
   RevealContainer,
   RevealToolbar,
   Reveal3DResources,
-  type NodeDataResult,
-  type AddResourceOptions
+  type AddResourceOptions,
+  useClickedNode
 } from '../src';
 import { Color, Matrix4 } from 'three';
-import { type ReactElement, useState } from 'react';
-import { DefaultNodeAppearance, TreeIndexNodeCollection } from '@cognite/reveal';
+import { type ReactElement, useState, useEffect } from 'react';
+import { DefaultNodeAppearance } from '@cognite/reveal';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { DefaultFdmConfig } from './utilities/fdmConfig';
 
@@ -56,22 +56,13 @@ const StoryContent = ({
   resources: AddResourceOptions[];
   fdmAssetMappingConfig?: FdmAssetMappingsConfig;
 }): ReactElement => {
-  const [nodeData, setNodeData] = useState<any>(undefined);
-
   const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
 
-  const callback = async (nodeData: Promise<NodeDataResult | undefined>): Promise<void> => {
-    const nodeDataResult = await nodeData;
-    setNodeData(nodeDataResult);
-    setHighlightedId(nodeDataResult?.nodeExternalId);
-
-    if (nodeDataResult === undefined) return;
+  const nodeData = useClickedNode(fdmAssetMappingConfig);
 
-    nodeDataResult.intersection.model.assignStyledNodeCollection(
-      new TreeIndexNodeCollection([nodeDataResult.cadNode.treeIndex]),
-      DefaultNodeAppearance.Highlighted
-    );
-  };
+  useEffect(() => {
+    setHighlightedId(nodeData?.nodeExternalId);
+  }, [nodeData?.nodeExternalId]);
 
   return (
     <>
@@ -89,9 +80,6 @@ const StoryContent = ({
                 ]
         }}
         fdmAssetMappingConfig={fdmAssetMappingConfig}
-        onNodeClick={(nodeData) => {
-          void callback(nodeData);
-        }}
       />
       <RevealToolbar />
       NodeData is: {JSON.stringify(nodeData)}