feat: 3D Resources layering react component

react-components/src/components/RevealToolbar/LayersButton.tsx

@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, useState } from 'react';
+import { Button, Dropdown } from '@cognite/cogs.js';
+import { LayersContainer } from './LayersContainer/LayersContainer';
+
+export const LayersButton = (): ReactElement => {
+  const [layersEnabled, setLayersEnabled] = useState(false);
+  const showLayers = (): void => {
+    setLayersEnabled(!layersEnabled);
+  };
+
+  return (
+    <Dropdown
+      appendTo={document.body}
+      content={<LayersContainer />}
+      visible={layersEnabled}
+      placement="auto">
+      <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
+    </Dropdown>
+  );
+};

react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

@@ -0,0 +1,92 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { type CogniteCadModel } from '@cognite/reveal';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+
+export const CadModelLayersContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const cadModels = viewer.models.filter((model) => model.type === 'cad');
+
+  const [selectedCadModels, setSelectedCadModels] = useState<
+    Array<{ model: CogniteCadModel; isToggled: boolean }>
+  >(
+    cadModels.map((model) => ({
+      model: model as CogniteCadModel,
+      isToggled: (model as CogniteCadModel).visible
+    }))
+  );
+
+  const [allCadModelVisible, setAllCadModelVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
+
+  const handleCadModelVisibility = (model: CogniteCadModel): void => {
+    selectedCadModels.map((data) => {
+      if (data.model === model) {
+        data.isToggled = !data.isToggled;
+      }
+      return data;
+    });
+    model.visible = !model.visible;
+    viewer.requestRedraw();
+    setSelectedCadModels([...selectedCadModels]);
+    setIndeterminate(selectedCadModels.some((data) => !data.isToggled));
+    setAllCadModelVisible(!selectedCadModels.every((data) => !data.isToggled));
+  };
+
+  const handleAllCadModelsVisibility = (visible: boolean): void => {
+    selectedCadModels.forEach((data) => {
+      data.isToggled = visible;
+      data.model.visible = visible;
+    });
+    viewer.requestRedraw();
+    setAllCadModelVisible(visible);
+    setIndeterminate(false);
+    setSelectedCadModels([...selectedCadModels]);
+  };
+
+  const cadModelContent = (): React.JSX.Element => {
+    return (
+      <StyledSubMenu>
+        {selectedCadModels.map((data) => (
+          <Menu.Item
+            key={data.model.modelId}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleCadModelVisibility(data.model);
+              }
+            }}>
+            {data.model.modelId}
+          </Menu.Item>
+        ))}
+      </StyledSubMenu>
+    );
+  };
+
+  return (
+    <>
+      {selectedCadModels.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={allCadModelVisible}
+            indeterminate={indeterminate}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAllCadModelsVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx

@@ -0,0 +1,92 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+import { type Image360Collection } from '@cognite/reveal';
+
+export const Image360CollectionLayerContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const image360Collection = viewer.get360ImageCollections();
+
+  const [selectedImage360Collection, setSelectedImage360Collection] = useState<
+    Array<{ image360: Image360Collection; isToggled: boolean }>
+  >(
+    image360Collection.map((image360Collection) => ({
+      image360: image360Collection,
+      isToggled: true
+    }))
+  );
+
+  const [all360ImagesVisible, setAll360ImagesVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
+
+  const handle360ImagesVisibility = (image360: Image360Collection): void => {
+    selectedImage360Collection.map((data) => {
+      if (data.image360 === image360) {
+        data.isToggled = !data.isToggled;
+        image360.setIconsVisibility(data.isToggled);
+      }
+      return data;
+    });
+    viewer.requestRedraw();
+    setSelectedImage360Collection([...selectedImage360Collection]);
+    setIndeterminate(selectedImage360Collection.some((data) => !data.isToggled));
+    setAll360ImagesVisible(!selectedImage360Collection.every((data) => !data.isToggled));
+  };
+
+  const handleAll360ImagesVisibility = (visible: boolean): void => {
+    selectedImage360Collection.forEach((data) => {
+      data.isToggled = visible;
+      data.image360.setIconsVisibility(data.isToggled);
+    });
+    viewer.requestRedraw();
+    setAll360ImagesVisible(visible);
+    setIndeterminate(false);
+    setSelectedImage360Collection([...selectedImage360Collection]);
+  };
+
+  const image360Content = (): React.JSX.Element => {
+    return (
+      <StyledSubMenu>
+        {selectedImage360Collection.map((data) => (
+          <Menu.Item
+            key={data.image360.id}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handle360ImagesVisibility(data.image360);
+              }
+            }}>
+            {data.image360.label}
+          </Menu.Item>
+        ))}
+      </StyledSubMenu>
+    );
+  };
+
+  return (
+    <>
+      {selectedImage360Collection.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={all360ImagesVisible}
+            indeterminate={indeterminate}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAll360ImagesVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={image360Content()}>360 images</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx

@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement } from 'react';
+
+import { Menu } from '@cognite/cogs.js';
+import styled from 'styled-components';
+
+import { CadModelLayersContainer } from './CadModelLayersContainer';
+import { PointCloudLayersContainer } from './PointCloudLayersContainer';
+import { Image360CollectionLayerContainer } from './Image360LayersContainer';
+
+export const LayersContainer = (): ReactElement => {
+  return (
+    <Container>
+      <StyleMenu>
+        <CadModelLayersContainer />
+        <PointCloudLayersContainer />
+        <Image360CollectionLayerContainer />
+      </StyleMenu>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  left: calc(0%);
+  top: calc(-70%);
+`;
+
+const StyleMenu = styled(Menu)`
+  display: flex;
+  flex-direction: column;
+  padding: 0px 0px 0px 0px;
+`;

react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx

@@ -0,0 +1,92 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+import { type CognitePointCloudModel } from '@cognite/reveal';
+
+export const PointCloudLayersContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
+
+  const [selectedPointCloudModels, setSelectedPointCloudModels] = useState<
+    Array<{ model: CognitePointCloudModel; isToggled: boolean }>
+  >(
+    pointCloudModels.map((model) => ({
+      model: model as CognitePointCloudModel,
+      isToggled: (model as CognitePointCloudModel).getDefaultPointCloudAppearance().visible ?? true
+    }))
+  );
+
+  const [allPointCloudModelVisible, setAllPointCloudModelVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
+
+  const handlePointCloudVisibility = (model: CognitePointCloudModel): void => {
+    selectedPointCloudModels.map((data) => {
+      if (data.model === model) {
+        data.isToggled = !data.isToggled;
+        model.setDefaultPointCloudAppearance({ visible: data.isToggled });
+      }
+      return data;
+    });
+    viewer.requestRedraw();
+    setSelectedPointCloudModels([...selectedPointCloudModels]);
+    setIndeterminate(selectedPointCloudModels.some((data) => !data.isToggled));
+    setAllPointCloudModelVisible(!selectedPointCloudModels.every((data) => !data.isToggled));
+  };
+
+  const handleAllPointCloudModelsVisibility = (visible: boolean): void => {
+    selectedPointCloudModels.forEach((data) => {
+      data.isToggled = visible;
+      data.model.setDefaultPointCloudAppearance({ visible });
+    });
+    viewer.requestRedraw();
+    setAllPointCloudModelVisible(visible);
+    setSelectedPointCloudModels([...selectedPointCloudModels]);
+  };
+
+  const pointCloudModelContent = (): React.JSX.Element => {
+    return (
+      <StyledSubMenu>
+        {selectedPointCloudModels.map((data) => (
+          <Menu.Item
+            key={data.model.modelId}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handlePointCloudVisibility(data.model);
+              }
+            }}>
+            {data.model.modelId}
+          </Menu.Item>
+        ))}
+      </StyledSubMenu>
+    );
+  };
+
+  return (
+    <>
+      {selectedPointCloudModels.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={allPointCloudModelVisible}
+            indeterminate={indeterminate}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAllPointCloudModelsVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={pointCloudModelContent()}>Point clouds</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

react-components/src/components/RevealToolbar/LayersContainer/elements.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { Checkbox, Menu } from '@cognite/cogs.js';
+import styled from 'styled-components';
+
+export const StyledCheckbox = styled(Checkbox)`
+  margin-left: 10px;
+`;
+
+export const StyledMenu = styled(Menu)`
+  display: flex;
+  flex-direction: row;
+  box-shadow: none;
+  padding: 0px;
+`;
+
+export const StyledSubMenu = styled(Menu)`
+  box-shadow: none;
+  padding: 8px;
+`;

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -5,6 +5,7 @@
 import { type ReactElement } from 'react';
 import { Button, ToolBar, type ToolBarProps } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
+import { LayersButton } from './LayersButton';
 
 const defaultStyle: ToolBarProps = {
   style: {
@@ -21,7 +22,7 @@ export const RevealToolbar = (toolBarProps: ToolBarProps): ReactElement => {
   return (
     <ToolBar {...toolBarProps}>
       <>
-        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
+        <LayersButton />
 
         <div className="cogs-toolbar-divider" />
 

react-components/src/index.ts

@@ -29,5 +29,6 @@ export type {
   AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
+export { LayersButton } from './components/RevealToolbar/LayersButton';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
 export { type FdmAssetMappingsConfig } from './hooks/types';