From 5466ca5566d02f9047c15d2e05a766c39a58cfe5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 12 Sep 2024 15:29:21 +0200 Subject: [PATCH 1/5] fix(react-components): update model when geometry filter changed --- .../CadModelContainer/CadModelContainer.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index d36323f2fd8..115ecee5ea8 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -70,7 +70,7 @@ export function CadModelContainer({ addModelOptions: AddModelOptions, transform?: Matrix4 ): Promise { - const cadModel = await getOrAddModel(); + const cadModel = await viewer.addCadModel(addModelOptions); if (transform !== undefined) { cadModel.setModelTransformation(transform); @@ -78,19 +78,6 @@ export function CadModelContainer({ setModel(cadModel); return cadModel; - - async function getOrAddModel(): Promise { - const viewerModel = viewer.models.find( - (model) => - model.modelId === modelId && - model.revisionId === revisionId && - model.getModelTransformation().equals(transform ?? new Matrix4()) - ); - if (viewerModel !== undefined) { - return await Promise.resolve(viewerModel as CogniteCadModel); - } - return await viewer.addCadModel(addModelOptions); - } } function removeModel(): void { From ed9b4acc31a951a3df0816bc492c332701f4dc20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 12 Sep 2024 15:39:05 +0200 Subject: [PATCH 2/5] Revert "fix(react-components): update model when geometry filter changed" This reverts commit 5466ca5566d02f9047c15d2e05a766c39a58cfe5. --- .../CadModelContainer/CadModelContainer.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index 115ecee5ea8..d36323f2fd8 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -70,7 +70,7 @@ export function CadModelContainer({ addModelOptions: AddModelOptions, transform?: Matrix4 ): Promise { - const cadModel = await viewer.addCadModel(addModelOptions); + const cadModel = await getOrAddModel(); if (transform !== undefined) { cadModel.setModelTransformation(transform); @@ -78,6 +78,19 @@ export function CadModelContainer({ setModel(cadModel); return cadModel; + + async function getOrAddModel(): Promise { + const viewerModel = viewer.models.find( + (model) => + model.modelId === modelId && + model.revisionId === revisionId && + model.getModelTransformation().equals(transform ?? new Matrix4()) + ); + if (viewerModel !== undefined) { + return await Promise.resolve(viewerModel as CogniteCadModel); + } + return await viewer.addCadModel(addModelOptions); + } } function removeModel(): void { From 06c687b11318ae74d7d87ed5b9e4ebfbbe967223 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 12 Sep 2024 15:57:27 +0200 Subject: [PATCH 3/5] fix: do the check otherwise, to avoid too much add/remove --- .../CadModelContainer/CadModelContainer.tsx | 11 +++++++---- react-components/src/utilities/isSameModel.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index d36323f2fd8..d34d436e32f 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -2,7 +2,7 @@ * Copyright 2023 Cognite AS */ import { type ReactElement, useEffect, useState, useRef } from 'react'; -import { type AddModelOptions, type CogniteCadModel } from '@cognite/reveal'; +import { GeometryFilter, type AddModelOptions, type CogniteCadModel } from '@cognite/reveal'; import { useReveal } from '../RevealCanvas/ViewerContext'; import { Matrix4 } from 'three'; import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext'; @@ -12,6 +12,7 @@ import { modelExists } from '../../utilities/modelExists'; import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; import { type CadModelStyling } from './types'; import { useApplyCadModelStyling } from './useApplyCadModelStyling'; +import { isSameCadModel, isSameGeometryFilter, isSameModel } from '../../utilities/isSameModel'; export type CogniteCadModelProps = { addModelOptions: AddModelOptions; @@ -32,6 +33,7 @@ export function CadModelContainer({ const viewer = useReveal(); const { setRevealResourcesCount } = useReveal3DResourcesCount(); const initializingModel = useRef(undefined); + const initializingModelsGeometryFilter = useRef(undefined); const [model, setModel] = useState(undefined); @@ -82,13 +84,14 @@ export function CadModelContainer({ async function getOrAddModel(): Promise { const viewerModel = viewer.models.find( (model) => - model.modelId === modelId && - model.revisionId === revisionId && - model.getModelTransformation().equals(transform ?? new Matrix4()) + isSameModel(model, addModelOptions) && + isSameGeometryFilter(geometryFilter, initializingModelsGeometryFilter.current) ); + if (viewerModel !== undefined) { return await Promise.resolve(viewerModel as CogniteCadModel); } + initializingModelsGeometryFilter.current = geometryFilter; return await viewer.addCadModel(addModelOptions); } } diff --git a/react-components/src/utilities/isSameModel.ts b/react-components/src/utilities/isSameModel.ts index b260d218141..895436ee665 100644 --- a/react-components/src/utilities/isSameModel.ts +++ b/react-components/src/utilities/isSameModel.ts @@ -22,7 +22,7 @@ export function isSameCadModel(model0: CadModelOptions, model1: CadModelOptions) ); } -function isSameGeometryFilter( +export function isSameGeometryFilter( filter0: GeometryFilter | undefined, filter1: GeometryFilter | undefined ): boolean { From e56a84478933667c164b91cf2eba3bdafbf65a97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 12 Sep 2024 16:17:02 +0200 Subject: [PATCH 4/5] chore: be more strict in the add/remove-logic It's a miracle this worked before --- .../src/components/CadModelContainer/CadModelContainer.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index d34d436e32f..f490da6ed93 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -64,7 +64,7 @@ export function CadModelContainer({ useApplyCadModelStyling(model, styling); - useEffect(() => removeModel, [model]); + useEffect(() => () => removeModel(model), [model]); return <>; @@ -96,7 +96,7 @@ export function CadModelContainer({ } } - function removeModel(): void { + function removeModel(model: CogniteCadModel | undefined): void { if (!modelExists(model, viewer)) return; if (cachedViewerRef !== undefined && !cachedViewerRef.isRevealContainerMountedRef.current) @@ -104,7 +104,6 @@ export function CadModelContainer({ viewer.removeModel(model); setRevealResourcesCount(getViewerResourceCount(viewer)); - setModel(undefined); } } From dd37da82a1d92d076e3ef6f73a5a03c67f3affd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 12 Sep 2024 16:21:01 +0200 Subject: [PATCH 5/5] chore: lint fix --- .../CadModelContainer/CadModelContainer.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index f490da6ed93..154f54b812b 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -2,9 +2,9 @@ * Copyright 2023 Cognite AS */ import { type ReactElement, useEffect, useState, useRef } from 'react'; -import { GeometryFilter, type AddModelOptions, type CogniteCadModel } from '@cognite/reveal'; +import { type GeometryFilter, type AddModelOptions, type CogniteCadModel } from '@cognite/reveal'; import { useReveal } from '../RevealCanvas/ViewerContext'; -import { Matrix4 } from 'three'; +import { type Matrix4 } from 'three'; import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext'; import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesInfoContext'; import { isEqual } from 'lodash'; @@ -12,7 +12,7 @@ import { modelExists } from '../../utilities/modelExists'; import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; import { type CadModelStyling } from './types'; import { useApplyCadModelStyling } from './useApplyCadModelStyling'; -import { isSameCadModel, isSameGeometryFilter, isSameModel } from '../../utilities/isSameModel'; +import { isSameGeometryFilter, isSameModel } from '../../utilities/isSameModel'; export type CogniteCadModelProps = { addModelOptions: AddModelOptions; @@ -64,7 +64,12 @@ export function CadModelContainer({ useApplyCadModelStyling(model, styling); - useEffect(() => () => removeModel(model), [model]); + useEffect( + () => () => { + removeModel(model); + }, + [model] + ); return <>;