fix(react-components): simplify viewer anchor and cleanup some stories

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9",
-    "@cognite/reveal": "^4.3.1",
+    "@cognite/reveal": "4.4.0",
     "react": ">=18",
     "styled-components": ">=5"
   },
@@ -27,7 +27,7 @@
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
     "@cognite/cogs.js": "^9.17.0",
-    "@cognite/reveal": "4.3.4",
+    "@cognite/reveal": "4.4.0",
     "@cognite/sdk": "^8.2.0",
     "@storybook/addon-essentials": "7.1.1",
     "@storybook/addon-interactions": "7.1.1",
@@ -57,6 +57,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook": "7.1.1",
+    "style-loader": "^3.3.3",
     "styled-components": "5.3.11",
     "three": "0.154.0",
     "ts-loader": "9.4.3",
@@ -71,7 +72,6 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^4.29.19",
-    "lodash": "^4.17.21",
-    "style-loader": "^3.3.3"
+    "lodash": "^4.17.21"
   }
 }

react-components/src/components/RevealContainer/RevealContainer.tsx

@@ -9,7 +9,6 @@ import { type Color } from 'three';
 import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
 import { SDKProvider } from './SDKProvider';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { AuxillaryDivProvider } from '../ViewerAnchor/AuxillaryDivProvider';
 
 type RevealContainerProps = {
   color?: Color;
@@ -48,11 +47,11 @@ export function RevealContainer({
   return (
     <SDKProvider sdk={sdk}>
       <QueryClientProvider client={queryClient}>
-        <AuxillaryDivProvider>
-          <div style={{ width: '100%', height: '100%' }} ref={revealDomElementRef}>
-            {mountChildren()}
-          </div>
-        </AuxillaryDivProvider>
+        <div
+          style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+          ref={revealDomElementRef}>
+          {mountChildren()}
+        </div>
         {uiElements}
       </QueryClientProvider>
     </SDKProvider>

react-components/src/components/ViewerAnchor/ViewerAnchor.tsx

@@ -2,14 +2,11 @@
  * Copyright 2023 Cognite AS
  */
 
-import { useEffect, useRef, type ReactElement, type RefObject } from 'react';
-import { type Vector3 } from 'three';
+import { useEffect, useRef, type ReactElement, type RefObject, useState } from 'react';
+import { Vector2, type Vector3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
 
-import { HtmlOverlayTool } from '@cognite/reveal/tools';
-import { useAuxillaryDivContext } from './AuxillaryDivProvider';
-
 export type ViewerAnchorElementMapping = {
   ref: RefObject<HTMLElement>;
   position: Vector3;
@@ -27,38 +24,34 @@ export const ViewerAnchor = ({
   uniqueKey
 }: ViewerAnchorProps): ReactElement => {
   const viewer = useReveal();
+  const [vec, setVec] = useState(new Vector2());
 
-  const htmlTool = useRef<HtmlOverlayTool>(new HtmlOverlayTool(viewer));
+  const sceneRendered = (): void => {
+    const screenSpacePosition = viewer.worldToScreen(position);
+    if (screenSpacePosition !== null) {
+      setVec(screenSpacePosition);
+    }
+  };
 
-  const auxContext = useAuxillaryDivContext();
+  useEffect(() => {
+    viewer.on('sceneRendered', sceneRendered);
+    return () => {
+      viewer.off('sceneRendered', sceneRendered);
+    };
+  }, [sceneRendered]);
 
   const htmlRef = useRef<HTMLDivElement>(null);
-  const element = (
-    <div key={uniqueKey} ref={htmlRef} style={{ position: 'absolute' }}>
+  return (
+    <div
+      key={uniqueKey}
+      ref={htmlRef}
+      style={{
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        transform: `translateX(${vec.x}px) translateY(${vec.y}px)`
+      }}>
       {children}
     </div>
   );
-
-  useEffect(() => {
-    auxContext.addElement(element);
-    return () => {
-      auxContext.removeElement(element);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (htmlRef.current === null) {
-      return;
-    }
-
-    const elementRef = htmlRef.current;
-
-    htmlTool.current.add(elementRef, position);
-
-    return () => {
-      htmlTool.current.remove(elementRef);
-    };
-  }, [auxContext, children, htmlRef.current]);
-
-  return <></>;
 };

react-components/stories/Reveal3DResources.stories.tsx

@@ -3,8 +3,8 @@
  */
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
-import { Color, Matrix4, Vector3 } from 'three';
-import { CameraController, ViewerAnchor } from '../src/';
+import { Color, Matrix4 } from 'three';
+import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -105,11 +105,6 @@ export const Main: Story = {
       {
         modelId: 3865289545346058,
         revisionId: 4160448151596909
-      },
-      {
-        modelId: 2551525377383868,
-        revisionId: 2143672450453400,
-        transform: new Matrix4().makeTranslation(-340, -480, 80)
       }
     ],
     styling: {},
@@ -124,9 +119,6 @@ export const Main: Story = {
     }
   },
   render: ({ resources, styling, fdmAssetMappingConfig }) => {
-    const position = new Vector3(50, 30, 50);
-    const position2 = new Vector3(0, 0, 0);
-
     return (
       <RevealContainer
         sdk={sdk}
@@ -143,32 +135,6 @@ export const Main: Story = {
           styling={styling}
           fdmAssetMappingConfig={fdmAssetMappingConfig}
         />
-        <ViewerAnchor position={position} uniqueKey="key2">
-          <p
-            style={{
-              backgroundColor: 'turquoise',
-              borderColor: 'black',
-              borderWidth: '10px',
-              borderStyle: 'solid',
-              maxWidth: '300px',
-              transform: 'translate(-50%, calc(-100% - 50px))'
-            }}>
-            This label is stuck at position {position.toArray().join(',')}
-          </p>
-        </ViewerAnchor>
-        <ViewerAnchor position={position2} uniqueKey="key1">
-          <p
-            style={{
-              backgroundColor: 'red',
-              borderColor: 'black',
-              borderWidth: '10px',
-              borderStyle: 'solid',
-              maxWidth: '300px',
-              transform: 'translate(0px, 0px)'
-            }}>
-            This label is stuck at position {position2.toArray().join(',')}
-          </p>
-        </ViewerAnchor>
         <CameraController
           initialFitCamera={{
             to: 'allModels'

react-components/stories/ViewerAnchor.stories.tsx

@@ -6,7 +6,6 @@ import { Reveal3DResources, RevealContainer } from '../src';
 import { Color, Matrix4, Vector3 } from 'three';
 import { CameraController, ViewerAnchor } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const meta = {
   title: 'Example/ViewerAnchor',
@@ -26,21 +25,11 @@ export const Main: Story = {
   args: {
     resources: [
       {
-        modelId: 2551525377383868,
-        revisionId: 2143672450453400,
-        transform: new Matrix4().makeTranslation(-340, -480, 80)
+        modelId: 1791160622840317,
+        revisionId: 498427137020189,
+        transform: new Matrix4().makeTranslation(0, 0, 0)
       }
-    ],
-    styling: {},
-    fdmAssetMappingConfig: {
-      source: {
-        space: 'hf_3d_schema',
-        version: '1',
-        type: 'view',
-        externalId: 'cdf_3d_connection_data'
-      },
-      assetFdmSpace: 'hf_customer_a'
-    }
+    ]
   },
   render: ({ resources, styling, fdmAssetMappingConfig }) => {
     const position = new Vector3(50, 30, 50);
@@ -50,7 +39,6 @@ export const Main: Story = {
       <RevealContainer
         sdk={sdk}
         color={new Color(0x4a4a4a)}
-        uiElements={<ReactQueryDevtools initialIsOpen={false} />}
         viewerOptions={{
           loadingIndicatorStyle: {
             opacity: 1,