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

#3538) * refactor(react-components): simplify viewer anchor * fix: cleanup stories * fix: use camera move event instead of scene rendered, also unmount component when behind camera * fix: remove unused code --------- Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
cognitedata · Aug 1, 2023 · 0a9e11f · 0a9e11f
1 parent bc0d4a7
commit 0a9e11f
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 160 deletions.
diff --git a/react-components/package.json b/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"
   }
 }
diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/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>

diff --git a/react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx b/react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx
diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/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,43 @@ export const ViewerAnchor = ({
   uniqueKey
 }: ViewerAnchorProps): ReactElement => {
   const viewer = useReveal();
+  const [divTranslation, setDivTranslation] = useState(new Vector2());
+  const [visible, setVisible] = useState(false);
 
-  const htmlTool = useRef<HtmlOverlayTool>(new HtmlOverlayTool(viewer));
+  const cameraChanged = (cameraPosition: Vector3, cameraTarget: Vector3): void => {
+    const cameraDirection = cameraTarget.clone().sub(cameraPosition).normalize();
+    const elementDirection = position.clone().sub(cameraPosition).normalize();
 
-  const auxContext = useAuxillaryDivContext();
+    setVisible(elementDirection.dot(cameraDirection) > 0);
 
-  const htmlRef = useRef<HTMLDivElement>(null);
-  const element = (
-    <div key={uniqueKey} ref={htmlRef} style={{ position: 'absolute' }}>
-      {children}
-    </div>
-  );
+    const screenSpacePosition = viewer.worldToScreen(position.clone());
+    if (screenSpacePosition !== null) {
+      setDivTranslation(screenSpacePosition);
+    }
+  };
 
   useEffect(() => {
-    auxContext.addElement(element);
+    viewer.cameraManager.on('cameraChange', cameraChanged);
     return () => {
-      auxContext.removeElement(element);
+      viewer.cameraManager.off('cameraChange', cameraChanged);
     };
-  }, []);
-
-  useEffect(() => {
-    if (htmlRef.current === null) {
-      return;
-    }
+  }, [cameraChanged]);
 
-    const elementRef = htmlRef.current;
-
-    htmlTool.current.add(elementRef, position);
-
-    return () => {
-      htmlTool.current.remove(elementRef);
-    };
-  }, [auxContext, children, htmlRef.current]);
+  const htmlRef = useRef<HTMLDivElement>(null);
 
-  return <></>;
+  return visible ? (
+    <div
+      key={uniqueKey}
+      ref={htmlRef}
+      style={{
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        transform: `translateX(${divTranslation.x}px) translateY(${divTranslation.y}px)`
+      }}>
+      {children}
+    </div>
+  ) : (
+    <></>
+  );
 };
diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/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: {},
@@ -125,9 +120,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}
@@ -144,32 +136,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'

diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx
@@ -3,10 +3,9 @@
  */
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
-import { Color, Matrix4, Vector3 } from 'three';
+import { Color, 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,31 +25,19 @@ export const Main: Story = {
   args: {
     resources: [
       {
-        modelId: 2551525377383868,
-        revisionId: 2143672450453400,
-        transform: new Matrix4().makeTranslation(-340, -480, 80)
+        modelId: 1791160622840317,
+        revisionId: 498427137020189
       }
-    ],
-    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);
-    const position2 = new Vector3(0, 0, 0);
+    const position2 = new Vector3();
 
     return (
       <RevealContainer
         sdk={sdk}
         color={new Color(0x4a4a4a)}
-        uiElements={<ReactQueryDevtools initialIsOpen={false} />}
         viewerOptions={{
           loadingIndicatorStyle: {
             opacity: 1,

diff --git a/react-components/yarn.lock b/react-components/yarn.lock