From fb40d25db8591e8fba586ba686420621124c2f6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <hakon.flatval@cognite.com>
Date: Mon, 31 Jul 2023 15:32:33 +0200
Subject: [PATCH] chore: rename, change types, add story

---
 .../RevealContainer/RevealContainer.tsx       |   2 +-
 .../AuxillaryDivProvider.tsx                  |  14 +--
 .../ViewerAnchor.tsx}                         |  14 +--
 react-components/src/index.ts                 |   1 +
 .../stories/Reveal3DResources.stories.tsx     |  11 +-
 .../stories/ViewerAnchor.stories.tsx          | 104 ++++++++++++++++++
 6 files changed, 125 insertions(+), 21 deletions(-)
 rename react-components/src/components/{RevealContainer => ViewerAnchor}/AuxillaryDivProvider.tsx (78%)
 rename react-components/src/components/{InfoCard/InfoCard.tsx => ViewerAnchor/ViewerAnchor.tsx} (70%)
 create mode 100644 react-components/stories/ViewerAnchor.stories.tsx

diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/react-components/src/components/RevealContainer/RevealContainer.tsx
index 13be3e612a3..fd45ab5bc9c 100644
--- a/react-components/src/components/RevealContainer/RevealContainer.tsx
+++ b/react-components/src/components/RevealContainer/RevealContainer.tsx
@@ -9,7 +9,7 @@ import { type Color } from 'three';
 import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
 import { SDKProvider } from './SDKProvider';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { AuxillaryDivProvider } from './AuxillaryDivProvider';
+import { AuxillaryDivProvider } from '../ViewerAnchor/AuxillaryDivProvider';
 
 type RevealContainerProps = {
   color?: Color;
diff --git a/react-components/src/components/RevealContainer/AuxillaryDivProvider.tsx b/react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx
similarity index 78%
rename from react-components/src/components/RevealContainer/AuxillaryDivProvider.tsx
rename to react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx
index e21c0c92808..1d5a05a0834 100644
--- a/react-components/src/components/RevealContainer/AuxillaryDivProvider.tsx
+++ b/react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx
@@ -2,17 +2,17 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { createContext, useContext, useState, useCallback, type JSX } from 'react';
+import { createContext, useContext, useState, useCallback, ReactElement } from 'react';
 
-export const AuxillaryDivProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
-  const [elements, setElements] = useState<JSX.Element[]>([]);
+export const AuxillaryDivProvider = ({ children }: { children: ReactElement }): ReactElement => {
+  const [elements, setElements] = useState<ReactElement[]>([]);
 
   // Maintain a local copy of the elements, needed for properly supporting multiple
   // `addElement` calls between rerenders
   let cachedElements = elements;
 
   const addElement = useCallback(
-    (element: JSX.Element) => {
+    (element: ReactElement) => {
       const newElementList = [...cachedElements, element];
 
       setElements(newElementList);
@@ -22,7 +22,7 @@ export const AuxillaryDivProvider = ({ children }: { children: React.ReactNode }
   );
 
   const removeElement = useCallback(
-    (element: JSX.Element) => {
+    (element: ReactElement) => {
       const newElementList = cachedElements.filter((e) => e !== element);
 
       setElements(newElementList);
@@ -42,8 +42,8 @@ export const AuxillaryDivProvider = ({ children }: { children: React.ReactNode }
 };
 
 type AuxillaryContextData = {
-  addElement: (element: JSX.Element) => void;
-  removeElement: (element: JSX.Element) => void;
+  addElement: (element: ReactElement) => void;
+  removeElement: (element: ReactElement) => void;
 };
 
 const AuxillaryDivContext = createContext<AuxillaryContextData | null>(null);
diff --git a/react-components/src/components/InfoCard/InfoCard.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
similarity index 70%
rename from react-components/src/components/InfoCard/InfoCard.tsx
rename to react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
index ba008200742..15a50df4dc8 100644
--- a/react-components/src/components/InfoCard/InfoCard.tsx
+++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
@@ -2,26 +2,26 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { type JSX, useEffect, useRef } from 'react';
+import { useEffect, useRef, ReactElement } from 'react';
 import { type Vector3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
 
 import { HtmlOverlayTool } from '@cognite/reveal/tools';
-import { useAuxillaryDivContext } from '../RevealContainer/AuxillaryDivProvider';
+import { useAuxillaryDivContext } from './AuxillaryDivProvider';
 
-export type InfoCardElementMapping = {
+export type ViewerAnchorElementMapping = {
   ref: React.RefObject<HTMLElement>;
   position: Vector3;
 };
 
-export type InfoCardProps = {
+export type ViewerAnchorProps = {
   position: Vector3;
-  children: React.ReactNode;
+  children: ReactElement;
   uniqueKey: string;
 };
 
-export const InfoCard = ({ position, children, uniqueKey }: InfoCardProps): JSX.Element => {
+export const ViewerAnchor = ({ position, children, uniqueKey }: ViewerAnchorProps): ReactElement => {
   const viewer = useReveal();
 
   const htmlTool = useRef<HtmlOverlayTool>(new HtmlOverlayTool(viewer));
@@ -30,7 +30,7 @@ export const InfoCard = ({ position, children, uniqueKey }: InfoCardProps): JSX.
 
   const htmlRef = useRef<HTMLDivElement>(null);
   const element = (
-    <div className="infocard" key={uniqueKey} ref={htmlRef} style={{ position: 'absolute' }}>
+    <div key={uniqueKey} ref={htmlRef} style={{ position: 'absolute' }}>
       {children}
     </div>
   );
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index dff60b68e4d..fd7653b1d20 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -23,6 +23,7 @@ export {
   type Reveal3DResourcesStyling,
   type FdmAssetStylingGroup
 } from './components/Reveal3DResources/Reveal3DResources';
+export { ViewerAnchor } from './components/ViewerAnchor/ViewerAnchor';
 export { CameraController } from './components/CameraController/CameraController';
 export type {
   AddImageCollection360Options,
diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
index b1494b7f4d9..2710bcb5b4e 100644
--- a/react-components/stories/Reveal3DResources.stories.tsx
+++ b/react-components/stories/Reveal3DResources.stories.tsx
@@ -4,10 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
 import { Color, Matrix4, Vector3 } from 'three';
-import { CameraController } from '../src/';
+import { CameraController, ViewerAnchor } 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',
@@ -144,7 +143,7 @@ export const Main: Story = {
           styling={styling}
           fdmAssetMappingConfig={fdmAssetMappingConfig}
         />
-        <InfoCard position={position} uniqueKey="key2">
+        <ViewerAnchor position={position} uniqueKey="key2">
           <p
             style={{
               backgroundColor: 'turquoise',
@@ -156,8 +155,8 @@ export const Main: Story = {
             }}>
             This label is stuck at position {position.toArray().join(',')}
           </p>
-        </InfoCard>
-        <InfoCard position={position2} uniqueKey="key1">
+        </ViewerAnchor>
+        <ViewerAnchor position={position2} uniqueKey="key1">
           <p
             style={{
               backgroundColor: 'red',
@@ -169,7 +168,7 @@ export const Main: Story = {
             }}>
             This label is stuck at position {position2.toArray().join(',')}
           </p>
-        </InfoCard>
+        </ViewerAnchor>
         <CameraController
           initialFitCamera={{
             to: 'allModels'
diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx
new file mode 100644
index 00000000000..e519b4bc7c2
--- /dev/null
+++ b/react-components/stories/ViewerAnchor.stories.tsx
@@ -0,0 +1,104 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+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',
+  component: Reveal3DResources,
+  tags: ['autodocs'],
+  argTypes: {
+    styling: {
+    }
+  }
+} satisfies Meta<typeof Reveal3DResources>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sdk = createSdkByUrlToken();
+
+export const Main: Story = {
+  args: {
+    resources: [
+      {
+        modelId: 2551525377383868,
+        revisionId: 2143672450453400,
+        transform: new Matrix4().makeTranslation(-340, -480, 80)
+      }
+    ],
+    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);
+
+    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}
+        />
+        <ViewerAnchor position={position} uniqueKey="key2">
+          <p
+            style={{
+              backgroundColor: 'turquoise',
+              padding: '10px',
+              borderRadius: '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',
+              padding: '10px',
+              borderRadius: '10px',
+              borderStyle: 'solid',
+              maxWidth: '300px',
+              transform: 'translate(0px, 0px)'
+            }}>
+            This label is stuck at position {position2.toArray().join(',')}
+          </p>
+        </ViewerAnchor>
+        <CameraController
+          initialFitCamera={{
+            to: 'allModels'
+          }}
+          cameraControlsOptions={{
+            changeCameraTargetOnClick: true,
+            mouseWheelAction: 'zoomToCursor'
+          }}
+        />
+      </RevealContainer>
+    );
+  }
+};