From 83b2aa62801921350cb3645f3b5d35755ec5f2af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 5 Sep 2024 16:54:07 +0200 Subject: [PATCH 01/10] feat(react-components): remove all URL-mutations --- .../RevealToolbar/MeasurementButton.tsx | 89 ------------------- .../RevealToolbar/RevealToolbar.tsx | 6 +- .../components/RevealToolbar/SlicerButton.tsx | 20 +---- .../hooks/measurementUrlStateHooks.ts | 83 ----------------- .../RevealToolbar/hooks/useUrlStateParam.tsx | 51 ----------- .../withCameraStateUrlParam.tsx | 60 ++++--------- react-components/src/index.ts | 5 +- react-components/stories/Toolbar.stories.tsx | 4 +- 8 files changed, 23 insertions(+), 295 deletions(-) delete mode 100644 react-components/src/components/RevealToolbar/MeasurementButton.tsx delete mode 100644 react-components/src/components/RevealToolbar/hooks/measurementUrlStateHooks.ts delete mode 100644 react-components/src/components/RevealToolbar/hooks/useUrlStateParam.tsx diff --git a/react-components/src/components/RevealToolbar/MeasurementButton.tsx b/react-components/src/components/RevealToolbar/MeasurementButton.tsx deleted file mode 100644 index 652ef1cca96..00000000000 --- a/react-components/src/components/RevealToolbar/MeasurementButton.tsx +++ /dev/null @@ -1,89 +0,0 @@ -/*! - * Copyright 2023 Cognite AS - */ - -import { type ReactElement, useState, useEffect, useCallback } from 'react'; -import { useReveal } from '../RevealCanvas/ViewerContext'; -import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js'; -import { type Measurement } from '@cognite/reveal/tools'; -import { FEET_TO_INCHES, METERS_TO_FEET } from '../../utilities/constants'; -import { useTranslation } from '../i18n/I18n'; -import { - useAddMeasurementsToUrl, - useInitializedMeasurementTool -} from './hooks/measurementUrlStateHooks'; - -export const distancesInFeetAndMeters = (distanceInMeters: number): string => { - const distanceInFeet = distanceInMeters * METERS_TO_FEET; - const distanceInFeetInt = Math.floor(distanceInFeet); - const distanceInches = Math.round(FEET_TO_INCHES * (distanceInFeet - distanceInFeetInt)); - return `${distanceInMeters.toFixed(2)} m\n ${distanceInFeetInt}' ${distanceInches}''`; -}; - -export type MeasurementButtonProps = { - storeStateInUrl?: boolean; - onMeasurementsUpdate?: (measurements: Measurement[]) => void; -}; - -export const MeasurementButton = ({ - storeStateInUrl = true, - onMeasurementsUpdate -}: MeasurementButtonProps): ReactElement => { - const viewer = useReveal(); - const { t } = useTranslation(); - const [measurementEnabled, setMeasurementEnabled] = useState(false); - - const measurementTool = useInitializedMeasurementTool(storeStateInUrl); - const persistMeasurementsToUrl = useAddMeasurementsToUrl(storeStateInUrl); - - const measurementAddedCallback = useCallback(() => { - const measurements = measurementTool.getAllMeasurements(); - onMeasurementsUpdate?.(measurements); - persistMeasurementsToUrl(measurements); - }, [measurementTool, onMeasurementsUpdate, persistMeasurementsToUrl]); - - const enterMeasurement = (): void => { - viewer.domElement.style.cursor = 'crosshair'; - measurementTool.enterMeasurementMode(); - measurementTool.visible(true); - measurementTool.on('added', measurementAddedCallback); - }; - - const exitMeasurement = (): void => { - viewer.domElement.style.cursor = 'default'; - measurementTool.visible(false); - measurementTool.exitMeasurementMode(); - measurementTool.off('added', measurementAddedCallback); - }; - - const toggleMeasurementEnabled = (): void => { - if (viewer.models.length <= 0) { - return; - } - setMeasurementEnabled((prevState) => !prevState); - }; - - useEffect(() => { - if (measurementEnabled) { - enterMeasurement(); - return () => { - exitMeasurement(); - }; - } - }, [measurementEnabled]); - - return ( - -