feat: add Image360Details component (#3589)

* feat: add Image360Details wrapper component

* fix: initialize 360 images without pre-multiplied rotations

* feat: add exit button when entered 360 image

* fix: update type of exit button

* fix: background for exit button being transparent

---------

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx

@@ -38,7 +38,11 @@ export function Image360CollectionContainer({
         return collection;
       }
 
-      return await viewer.add360ImageSet('events', { site_id: siteId });
+      return await viewer.add360ImageSet(
+        'events',
+        { site_id: siteId },
+        { preMultipliedRotation: false }
+      );
     }
   }
 

react-components/src/components/Image360Details/Image360Details.tsx

@@ -0,0 +1,89 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useState, type ReactElement, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { Image360HistoricalDetails } from '../Image360HistoricalDetails/Image360HistoricalDetails';
+import { useReveal } from '../..';
+import { type Image360 } from '@cognite/reveal';
+import { Button } from '@cognite/cogs.js';
+
+export function Image360Details(): ReactElement {
+  const viewer = useReveal();
+  const [enteredEntity, setEnteredEntity] = useState<Image360 | undefined>();
+  const [is360HistoricalPanelExpanded, setIs360HistoricalPanelExpanded] = useState<boolean>(false);
+  const handleExpand = useCallback((isExpanded: boolean) => {
+    setIs360HistoricalPanelExpanded(isExpanded);
+  }, []);
+
+  const clearEnteredImage360 = (): void => {
+    setEnteredEntity(undefined);
+  };
+
+  const exitImage360Image = (): void => {
+    viewer.exit360Image();
+  };
+
+  const collections = viewer.get360ImageCollections();
+
+  useEffect(() => {
+    collections.forEach((collection) => {
+      collection.on('image360Entered', setEnteredEntity);
+      collection.on('image360Exited', clearEnteredImage360);
+    });
+    return () => {
+      collections.forEach((collection) => {
+        collection.off('image360Entered', setEnteredEntity);
+        collection.off('image360Exited', clearEnteredImage360);
+      });
+    };
+  }, [viewer, collections]);
+
+  return (
+    <>
+      {enteredEntity !== undefined && (
+        <>
+          <Image360HistoricalPanel isExpanded={is360HistoricalPanelExpanded}>
+            <Image360HistoricalDetails
+              viewer={viewer}
+              image360Entity={enteredEntity}
+              onExpand={handleExpand}
+            />
+          </Image360HistoricalPanel>
+          <ExitButtonContainer>
+            <StyledExitButton icon="CloseLarge" type="tertiary" onClick={exitImage360Image} />
+          </ExitButtonContainer>
+        </>
+      )}
+    </>
+  );
+}
+
+const StyledExitButton = styled(Button)`
+  border-radius: 8px;
+`;
+
+const ExitButtonContainer = styled.div`
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  background-color: #ffffff;
+  height: 36px;
+  width: 36px;
+  border-radius: 8px;
+  outline: none;
+`;
+
+const Image360HistoricalPanel = styled.div<{ isExpanded: boolean }>`
+  position: absolute;
+  bottom: ${({ isExpanded }) => (isExpanded ? '0px' : '40px')};
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  width: fit-content;
+  max-width: 100%;
+  min-width: fill-available;
+  transition: transform 0.25s ease-in-out;
+  transform: ${({ isExpanded }) => (isExpanded ? 'translateY(0)' : 'translateY(100%)')};
+`;

react-components/src/index.ts

@@ -10,6 +10,7 @@ export { PointCloudContainer } from './components/PointCloudContainer/PointCloud
 export { CadModelContainer } from './components/CadModelContainer/CadModelContainer';
 export { Image360CollectionContainer } from './components/Image360CollectionContainer/Image360CollectionContainer';
 export { Image360HistoricalDetails } from './components/Image360HistoricalDetails/Image360HistoricalDetails';
+export { Image360Details } from './components/Image360Details/Image360Details';
 export { ViewerAnchor } from './components/ViewerAnchor/ViewerAnchor';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
 export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';

react-components/stories/Image360Details.stories.tsx

@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Image360CollectionContainer, Image360Details, RevealContainer } from '../src';
+import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
+import { Color } from 'three';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Example/Image360Details',
+  component: Image360Details,
+  tags: ['autodocs']
+} satisfies Meta<typeof Image360Details>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sdk = createSdkByUrlToken();
+
+export const Main: Story = {
+  render: () => {
+    const [loading, setLoading] = useState(true);
+    return (
+      <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+        <Image360CollectionContainer
+          siteId={'c_RC_2'}
+          onLoad={() => {
+            setLoading(false);
+          }}
+        />
+        {!loading && <Image360Details />}
+      </RevealContainer>
+    );
+  }
+};