feat(react-components): clicked node hook

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

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 import { useRef, type ReactElement, useState, useEffect } from 'react';
-import { type Cognite3DViewer, type PointerEventData } from '@cognite/reveal';
+import { type Cognite3DViewer } from '@cognite/reveal';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
 import {
   PointCloudContainer,
@@ -18,9 +18,8 @@ import {
   type Reveal3DResourcesProps,
   type DefaultResourceStyling
 } from './types';
-import { queryMappedData } from './queryMappedData';
-import { useFdmSdk, useSDK } from '../RevealContainer/SDKProvider';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
+import { useClickedNodeData } from '../..';
 
 export const Reveal3DResources = ({
   resources,
@@ -32,8 +31,6 @@ export const Reveal3DResources = ({
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
 
   const viewer = useReveal();
-  const fdmSdk = useFdmSdk();
-  const client = useSDK();
   const numModelsLoaded = useRef(0);
 
   useEffect(() => {
@@ -49,20 +46,13 @@ export const Reveal3DResources = ({
   }, [resources, viewer]);
 
   const reveal3DModelsStyling = useCalculateModelsStyling(reveal3DModels, instanceStyling ?? []);
+  const clickedNodeData = useClickedNodeData();
 
   useEffect(() => {
-    const callback = (event: PointerEventData): void => {
-      if (onNodeClick === undefined) return;
-      const data = queryMappedData(viewer, client, fdmSdk, event);
-      onNodeClick(data);
-    };
-
-    viewer.on('click', callback);
-
-    return () => {
-      viewer.off('click', callback);
-    };
-  }, [viewer, client, fdmSdk, onNodeClick]);
+    if (clickedNodeData !== undefined) {
+      onNodeClick?.(Promise.resolve(clickedNodeData));
+    }
+  }, [clickedNodeData, onNodeClick]);
 
   const image360CollectionAddOptions = resources.filter(
     (resource): resource is AddImageCollection360Options =>

react-components/src/components/Reveal3DResources/types.ts

@@ -3,11 +3,11 @@
  */
 
 import {
+  type NodeAppearance,
   type AddModelOptions,
-  type SupportedModelTypes,
-  type CadIntersection,
-  type NodeAppearance
+  type SupportedModelTypes
 } from '@cognite/reveal';
+
 import { type Matrix4 } from 'three';
 import { type DmsUniqueIdentifier, type Source } from '../../utilities/FdmSDK';
 import { type Node3D } from '@cognite/sdk/dist/src';
@@ -29,7 +29,6 @@ export type NodeDataResult = {
   nodeExternalId: string;
   view: Source;
   cadNode: Node3D;
-  intersection: CadIntersection;
 };
 
 export type FdmAssetStylingGroup = {

react-components/src/hooks/useClickedNode.tsx

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type CadIntersection, type PointerEventData } from '@cognite/reveal';
+import { useReveal, type NodeDataResult } from '../';
+import { useEffect, useState } from 'react';
+import { useNodeMappedData } from './useNodeMappedData';
+
+export type ClickedNodeData = NodeDataResult & {
+  intersection: CadIntersection;
+};
+
+export const useClickedNodeData = (): ClickedNodeData | undefined => {
+  const viewer = useReveal();
+
+  const [cadIntersection, setCadIntersection] = useState<CadIntersection | undefined>(undefined);
+
+  useEffect(() => {
+    const callback = (event: PointerEventData): void => {
+      void (async () => {
+        const intersection = await viewer.getIntersectionFromPixel(event.offsetX, event.offsetY);
+
+        if (intersection === null || intersection.type !== 'cad') {
+          return;
+        }
+
+        setCadIntersection(intersection);
+      })();
+    };
+
+    viewer.on('click', callback);
+
+    return () => {
+      viewer.off('click', callback);
+    };
+  }, [viewer]);
+
+  const nodeData = useNodeMappedData(cadIntersection?.treeIndex, cadIntersection?.model);
+
+  if (nodeData === undefined || cadIntersection === undefined) {
+    return undefined;
+  }
+  return { intersection: cadIntersection, ...nodeData };
+};