feat: working, but shifty, info card

cognitedata · Jul 28, 2023 · 5c7c129 · 5c7c129
1 parent b4ff1f4
commit 5c7c129
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 51 deletions.
diff --git a/react-components/src/components/InfoCard/InfoCard.tsx b/react-components/src/components/InfoCard/InfoCard.tsx
@@ -3,42 +3,50 @@
  */
 
 import React, { JSX, useState, useEffect, useRef } from 'react';
-
 import { Vector3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
 
 import { HtmlOverlayTool } from '@cognite/reveal/tools';
+import { useAuxillaryDivContext } from '../RevealContainer/AuxillaryDivProvider';
 
-import styled from 'styled-components';
+export type InfoCardElementMapping = {
+  ref: React.RefObject<HTMLElement>;
+  position: Vector3;
+};
 
 export type InfoCardProps = {
-  card: JSX.Element;
   position: Vector3;
+  children: React.ReactNode;
 };
 
-export const InfoCard = ({
-  card,
-  position
-}: InfoCardProps): JSX.Element => {
+export const InfoCard = ({ position, children }: InfoCardProps): JSX.Element => {
   const viewer = useReveal();
 
-  const divReference = useRef<HTMLDivElement>(null);
+  const mods = useAuxillaryDivContext();
+
+  const htmlRef = useRef<HTMLDivElement>(null);
+  const element = (
+    <div id={'infoCardContent'} key={'info'} ref={htmlRef} style={{ position: 'absolute' }}>
+      {children}
+    </div>
+  );
+
   const [htmlTool, _setHtmlTool] = useState<HtmlOverlayTool>(new HtmlOverlayTool(viewer));
-  const htmlElement = (<div ref={divReference}> {card} </div>);
 
   useEffect(() => {
-    if (divReference.current === null) return;
-    const innerElement = divReference.current;
-
-    htmlTool.add(innerElement, position);
+    mods.addElement(element);
+    return () => mods.removeElement(element);
+  }, []);
 
-    return () => htmlTool.remove(innerElement);
-  }, [card, htmlTool, divReference.current]);
+  useEffect(() => {
+    if (htmlRef.current === null) {
+      return;
+    }
 
-  return htmlElement;
-}
+    htmlTool.clear();
+    htmlTool.add(htmlRef.current, position);
+  }, [htmlTool, children, htmlRef.current]);
 
-export const FloatingDiv = styled.div`
-  position: absolute;
-`
+  return <></>;
+};
diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/react-components/src/components/RevealContainer/RevealContainer.tsx
@@ -9,6 +9,7 @@ import { type Color } from 'three';
 import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
 import { SDKProvider } from './SDKProvider';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { AuxillaryDivContext, AuxillaryDivProvider } from './AuxillaryDivProvider';
 
 type RevealContainerProps = {
   color?: Color;
@@ -47,9 +48,11 @@ export function RevealContainer({
   return (
     <SDKProvider sdk={sdk}>
       <QueryClientProvider client={queryClient}>
-        <div style={{ width: '100%', height: '100%' }} ref={revealDomElementRef}>
-          {mountChildren()}
-        </div>
+        <AuxillaryDivProvider>
+          <div style={{ width: '100%', height: '100%' }} ref={revealDomElementRef}>
+            {mountChildren()}
+          </div>
+        </AuxillaryDivProvider>
         {uiElements}
       </QueryClientProvider>
     </SDKProvider>

diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
@@ -3,10 +3,11 @@
  */
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
-import { Color, Matrix4 } from 'three';
+import { Color, Matrix4, Vector3 } from 'three';
 import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { InfoCard } from '../src/components/InfoCard/InfoCard';
 
 const meta = {
   title: 'Example/Reveal3DResources',
@@ -123,31 +124,48 @@ export const Main: Story = {
       assetFdmSpace: 'bark-corporation'
     }
   },
-  render: ({ resources, styling, fdmAssetMappingConfig }) => (
-    <RevealContainer
-      sdk={sdk}
-      color={new Color(0x4a4a4a)}
-      uiElements={<ReactQueryDevtools initialIsOpen={false} />}
-      viewerOptions={{
-        loadingIndicatorStyle: {
-          opacity: 1,
-          placement: 'topRight'
-        }
-      }}>
-      <Reveal3DResources
-        resources={resources}
-        styling={styling}
-        fdmAssetMappingConfig={fdmAssetMappingConfig}
-      />
-      <CameraController
-        initialFitCamera={{
-          to: 'allModels'
-        }}
-        cameraControlsOptions={{
-          changeCameraTargetOnClick: true,
-          mouseWheelAction: 'zoomToCursor'
-        }}
-      />
-    </RevealContainer>
-  )
+  render: ({ resources, styling, fdmAssetMappingConfig }) => {
+    const position = new Vector3(50, 30, 50);
+
+    return (
+      <RevealContainer
+        sdk={sdk}
+        color={new Color(0x4a4a4a)}
+        uiElements={<ReactQueryDevtools initialIsOpen={false} />}
+        viewerOptions={{
+          loadingIndicatorStyle: {
+            opacity: 1,
+            placement: 'topRight'
+          }
+        }}>
+        <Reveal3DResources
+          resources={resources}
+          styling={styling}
+          fdmAssetMappingConfig={fdmAssetMappingConfig}
+        />
+        <InfoCard position={position}>
+          <p
+            style={{
+              backgroundColor: 'turquoise',
+              borderColor: 'black',
+              borderWidth: '10px',
+              borderStyle: 'solid',
+              maxWidth: '300px',
+              transform: 'translate(0px, calc(-100% - 50px))'
+            }}>
+            This label is stuck at position {position.toArray().join(',')}
+          </p>
+        </InfoCard>
+        <CameraController
+          initialFitCamera={{
+            to: 'allModels'
+          }}
+          cameraControlsOptions={{
+            changeCameraTargetOnClick: true,
+            mouseWheelAction: 'zoomToCursor'
+          }}
+        />
+      </RevealContainer>
+    );
+  }
 };