diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index 4b827188d51..fca8f049347 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -10,6 +10,7 @@ import { type CadModelStyling, useApplyCadModelStyling } from './useApplyCadMode import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext'; import { isEqual } from 'lodash'; import { modelExists } from '../../utilities/modelExists'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; export type CogniteCadModelProps = { addModelOptions: AddModelOptions; @@ -44,7 +45,7 @@ export function CadModelContainer({ addModel(addModelOptions, transform) .then((model) => { onLoad?.(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -98,7 +99,7 @@ export function CadModelContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(getViewerResourceCount(viewer)); setModel(undefined); } } diff --git a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx index c9771d1fbad..3543f975581 100644 --- a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx +++ b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx @@ -15,6 +15,8 @@ import { DEFAULT_IMAGE360_ICON_COUNT_LIMIT, DEFAULT_IMAGE360_ICON_CULLING_RADIUS } from './constants'; +import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; type Image360CollectionContainerProps = { addImage360CollectionOptions: AddImage360CollectionOptions; @@ -32,6 +34,7 @@ export function Image360CollectionContainer({ const cachedViewerRef = useRevealKeepAlive(); const modelRef = useRef(); const viewer = useReveal(); + const { setRevealResourcesCount } = useReveal3DResourcesCount(); const initializingSiteId = useRef<{ siteId: string } | { externalId: string } | undefined>( undefined @@ -82,6 +85,7 @@ export function Image360CollectionContainer({ modelRef.current = image360Collection; onLoad?.(image360Collection); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error: any) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -121,6 +125,7 @@ export function Image360CollectionContainer({ return; viewer.remove360ImageSet(modelRef.current); + setRevealResourcesCount(getViewerResourceCount(viewer)); modelRef.current = undefined; } } diff --git a/react-components/src/components/Image360Details/Image360Details.tsx b/react-components/src/components/Image360Details/Image360Details.tsx index 2c13bcfb48c..6bdcce9cc22 100644 --- a/react-components/src/components/Image360Details/Image360Details.tsx +++ b/react-components/src/components/Image360Details/Image360Details.tsx @@ -8,6 +8,7 @@ import { Image360HistoricalDetails } from '../Image360HistoricalDetails/Image360 import { type Image360 } from '@cognite/reveal'; import { Button } from '@cognite/cogs.js'; import { useReveal } from '../RevealCanvas/ViewerContext'; +import { useImage360Collections } from '../../hooks/useImage360Collections'; type Image360DetailsProps = { appLanguage?: string; @@ -21,15 +22,15 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle setIs360HistoricalPanelExpanded(isExpanded); }, []); - const clearEnteredImage360 = (): void => { + const clearEnteredImage360 = useCallback((): void => { setEnteredEntity(undefined); - }; + }, [setEnteredEntity]); - const exitImage360Image = (): void => { + const exitImage360Image = useCallback((): void => { viewer.exit360Image(); - }; + }, [viewer]); - const collections = viewer.get360ImageCollections(); + const collections = useImage360Collections(); useEffect(() => { collections.forEach((collection) => { @@ -42,7 +43,7 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle collection.off('image360Exited', clearEnteredImage360); }); }; - }, [viewer, collections]); + }, [viewer, collections, setEnteredEntity, clearEnteredImage360]); return ( <> diff --git a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx index f24a847d40a..cc5a69f0224 100644 --- a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx +++ b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx @@ -33,7 +33,7 @@ export const Image360HistoricalPanel = ({ {!revisionDetailsExpanded && ( {t('IMAGES_360_DETAILS', '360 Details')} - + )} {revisionDetailsExpanded && ( @@ -69,16 +69,6 @@ const StyledToolBar = styled.div<{ isExpanded: boolean }>` background: #ffffff; `; -const StyledChipCount = styled(CounterChip)` - && { - width: fit-content; - height: 20px; - max-height: 20px; - min-height: 20px; - min-width: 20px; - } -`; - const Container = styled.div<{ isExpanded: boolean }>` position: relative; left: calc(100% - 200px); diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx index 805c0f0faf6..d563aa4707b 100644 --- a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx +++ b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx @@ -14,6 +14,7 @@ import { type PointCloudModelStyling } from './useApplyPointCloudStyling'; import { modelExists } from '../../utilities/modelExists'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; export type CognitePointCloudModelProps = { addModelOptions: AddModelOptions; @@ -47,7 +48,7 @@ export function PointCloudContainer({ addModel(modelId, revisionId, transform) .then((pointCloudModel) => { onLoad?.(pointCloudModel); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error) => { const errorHandler = onLoadError ?? defaultLoadErrorHandler; @@ -101,7 +102,7 @@ export function PointCloudContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(getViewerResourceCount(viewer)); setModel(undefined); } } diff --git a/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx b/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx index d79dd261ed4..e1b67cf88e9 100644 --- a/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx +++ b/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx @@ -1,10 +1,10 @@ /*! * Copyright 2024 Cognite AS */ -import { Checkbox, Flex } from '@cognite/cogs.js'; +import { Checkbox, CounterChip, Flex } from '@cognite/cogs.js'; import { type ModelHandler } from './ModelHandler'; import { type ChangeEvent, useCallback, useMemo, type ReactElement, type MouseEvent } from 'react'; -import { StyledChipCount, StyledLabel } from './elements'; +import { StyledLabel } from './elements'; import { type UpdateModelHandlersCallback } from './useModelHandlers'; import { useReveal } from '../../RevealCanvas/ViewerContext'; @@ -50,7 +50,7 @@ export const WholeLayerVisibilityToggle = ({ onChange={handleToggleAllClick} /> {label} - + ); }; diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts index 7452db13047..cbd1e1c1156 100644 --- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts +++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts @@ -2,21 +2,8 @@ * Copyright 2023 Cognite AS */ -import { Chip } from '@cognite/cogs.js'; import styled from 'styled-components'; -export const StyledChipCount = styled(Chip)` - && { - border-radius: 2px; - width: fit-content; - height: 20px; - max-height: 20px; - min-height: 20px; - min-width: 20px; - padding: 4px; - } -`; - export const StyledLabel = styled.div` /* Font */ font-family: 'Inter'; diff --git a/react-components/src/hooks/useImage360Collections.ts b/react-components/src/hooks/useImage360Collections.ts new file mode 100644 index 00000000000..bc2e9e55095 --- /dev/null +++ b/react-components/src/hooks/useImage360Collections.ts @@ -0,0 +1,16 @@ +/*! + * Copyright 2024 Cognite AS + */ +import { useMemo } from 'react'; +import { useReveal } from '../components/RevealCanvas/ViewerContext'; +import { type Image360Collection } from '@cognite/reveal'; +import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext'; + +export const useImage360Collections = (): Image360Collection[] => { + const viewer = useReveal(); + const { reveal3DResourcesCount: resourceCount } = useReveal3DResourcesCount(); + + return useMemo(() => { + return viewer.get360ImageCollections(); + }, [viewer, resourceCount]); +}; diff --git a/react-components/src/utilities/getViewerResourceCount.ts b/react-components/src/utilities/getViewerResourceCount.ts new file mode 100644 index 00000000000..49831a4804b --- /dev/null +++ b/react-components/src/utilities/getViewerResourceCount.ts @@ -0,0 +1,8 @@ +/*! + * Copyright 2024 Cognite AS + */ +import { type Cognite3DViewer } from '@cognite/reveal'; + +export function getViewerResourceCount(viewer: Cognite3DViewer): number { + return viewer.models.length + viewer.get360ImageCollections().length; +} diff --git a/react-components/stories/Image360Details.stories.tsx b/react-components/stories/Image360Details.stories.tsx index b67da69dc81..da7bb25e79b 100644 --- a/react-components/stories/Image360Details.stories.tsx +++ b/react-components/stories/Image360Details.stories.tsx @@ -2,10 +2,10 @@ * Copyright 2023 Cognite AS */ import type { Meta, StoryObj } from '@storybook/react'; -import { Image360CollectionContainer, Image360Details, RevealCanvas, RevealContext } from '../src'; -import { createSdkByUrlToken } from './utilities/createSdkByUrlToken'; +import { Image360CollectionContainer, Image360Details, RevealCanvas } from '../src'; import { Color } from 'three'; import { useState } from 'react'; +import { RevealStoryContext } from './utilities/RevealStoryContainer'; const meta = { title: 'Example/Image360Details', @@ -16,13 +16,11 @@ const meta = { export default meta; type Story = StoryObj; -const sdk = createSdkByUrlToken(); - export const Main: Story = { render: () => { const [loading, setLoading] = useState(true); return ( - + {!loading && } - + ); } };