feat(react-components): axis gizmo component (#4287)

* feat: Axis Gizmo component

react-components/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9",
-    "@cognite/reveal": "^4.10.3",
+    "@cognite/reveal": "^4.10.4",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.5.0",
     "@cognite/cogs.js": "^9.17.0",
-    "@cognite/reveal": "^4.10.3",
+    "@cognite/reveal": "^4.10.4",
     "@cognite/sdk": "^8.2.0",
     "@playwright/test": "^1.39.0",
     "@storybook/addon-essentials": "7.6.17",

react-components/src/components/AxisGizmo.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { useEffect, type ReactElement } from 'react';
+
+import { AxisGizmoOptions, AxisGizmoTool } from '@cognite/reveal/tools';
+import { useReveal } from '..';
+
+export { AxisGizmoOptions };
+
+/**
+ * A React wrapper around the AxisGizmoTool from Reveal
+ */
+export const AxisGizmo = ({ options }: { options?: AxisGizmoOptions }): ReactElement => {
+  const viewer = useReveal();
+
+  useEffect(() => {
+    const axisGizmoTool = new AxisGizmoTool(options);
+    axisGizmoTool.connect(viewer);
+
+    return () => {
+      axisGizmoTool.dispose();
+    };
+  }, [viewer, options]);
+
+  return <></>;
+};

react-components/src/index.ts

@@ -14,9 +14,11 @@ export { Image360CollectionContainer } from './components/Image360CollectionCont
 export { Image360HistoricalDetails } from './components/Image360HistoricalDetails/Image360HistoricalDetails';
 export { Image360Details } from './components/Image360Details/Image360Details';
 export { ViewerAnchor } from './components/ViewerAnchor/ViewerAnchor';
+export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';
+
 export { RevealToolbar, type RevealToolbarProps } from './components/RevealToolbar/RevealToolbar';
 export { RevealTopbar } from './components/RevealTopbar/RevealTopbar';
-export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';
+export { AxisGizmo, AxisGizmoOptions } from './components/AxisGizmo';
 
 // Hooks
 export { useReveal } from './components/RevealCanvas/ViewerContext';

react-components/stories/HighlightNode.stories.tsx

@@ -23,7 +23,7 @@ import {
   type Image360AssetStylingGroup,
   type AssetStylingGroup
 } from '../src/components/Reveal3DResources/types';
-import { type AnnotationsCogniteAnnotationTypesImagesAssetLink } from '@cognite/sdk/dist/src';
+import { type AnnotationsCogniteAnnotationTypesImagesAssetLink } from '@cognite/sdk';
 
 const meta = {
   title: 'Example/HighlightNode',