react-components (feat) Attemt on making a configurative startUp func…

…tion (#4571)

* Initial commit

* Update BaseTool.ts

react-components/src/architecture/base/commands/BaseTool.ts

@@ -121,6 +121,7 @@ export abstract class BaseTool extends RenderTargetCommand {
   ): Promise<AnyIntersection | undefined> {
     const { renderTarget } = this;
     const { viewer } = renderTarget;
+
     const point = viewer.getPixelCoordinatesFromEvent(event);
     const intersection = await viewer.getAnyIntersectionFromPixel(point);
     if (intersection === undefined) {

react-components/src/architecture/base/renderTarget/BaseRevealConfig.ts

@@ -7,6 +7,7 @@ import { type BaseCommand } from '../commands/BaseCommand';
 import { PopupStyle } from '../domainObjectsHelpers/PopupStyle';
 import { NavigationTool } from '../commands/NavigationTool';
 import { type BaseTool } from '../commands/BaseTool';
+import { type RevealRenderTarget } from './RevealRenderTarget';
 
 export abstract class BaseRevealConfig {
   // ==================================================
@@ -28,4 +29,6 @@ export abstract class BaseRevealConfig {
   public createDefaultTool(): BaseTool {
     return new NavigationTool();
   }
+
+  public onStartup(_renderTarget: RevealRenderTarget): void {}
 }

react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts

@@ -148,6 +148,10 @@ export class RevealRenderTarget {
     }
   }
 
+  public onStartup(): void {
+    this._config?.onStartup(this);
+  }
+
   public dispose(): void {
     this._viewer.dispose();
     if (this._ambientLight !== undefined) {

react-components/src/architecture/concrete/config/StoryBookConfig.ts

@@ -14,6 +14,7 @@ import { ExampleTool } from '../exampleDomainObject/ExampleTool';
 import { MeasurementTool } from '../boxDomainObject/MeasurementTool';
 import { AxisGizmoTool } from '@cognite/reveal/tools';
 import { BaseRevealConfig } from '../../base/renderTarget/BaseRevealConfig';
+import { type RevealRenderTarget } from '../../base/renderTarget/RevealRenderTarget';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -43,4 +44,8 @@ export class StoryBookConfig extends BaseRevealConfig {
   public override createAxisGizmoTool(): AxisGizmoTool | undefined {
     return new AxisGizmoTool();
   }
+
+  public override onStartup(renderTarget: RevealRenderTarget): void {
+    renderTarget.fitView();
+  }
 }

react-components/stories/Architecture.stories.tsx

@@ -18,6 +18,8 @@ import { RevealStoryContainer } from './utilities/RevealStoryContainer';
 import { getAddModelOptionsFromUrl } from './utilities/getAddModelOptionsFromUrl';
 import { DomainObjectPanel } from '../src/components/Architecture/DomainObjectPanel';
 import { ActiveToolToolbar, MainToolbar } from '../src/components/Architecture/Toolbar';
+import { useRenderTarget } from '../src/components/RevealCanvas/ViewerContext';
+import { type AddModelOptions, type CogniteCadModel } from '@cognite/reveal';
 
 const meta = {
   title: 'Example/Architecture',
@@ -82,7 +84,7 @@ export const Main: Story = {
     return (
       <RevealStoryContainer color={new Color(0x4a4a4a)} viewerOptions={{}}>
         <FitToUrlCameraState />
-        <CadModelContainer addModelOptions={addModelOptions} />
+        <StoryContent addModelOptions={addModelOptions} />
         <RevealToolbar
           customSettingsContent={exampleCustomSettingElements()}
           lowFidelitySettings={exampleLowQualitySettings}
@@ -96,6 +98,20 @@ export const Main: Story = {
   }
 };
 
+function StoryContent({ addModelOptions }: { addModelOptions: AddModelOptions }): ReactElement {
+  const renderTarget = useRenderTarget();
+  return (
+    <>
+      <CadModelContainer
+        addModelOptions={addModelOptions}
+        onLoad={(_model: CogniteCadModel) => {
+          renderTarget.onStartup();
+        }}
+      />
+    </>
+  );
+}
+
 function FitToUrlCameraState(): ReactElement {
   const getCameraState = useGetCameraStateFromUrlParam();
   const cameraNavigation = useCameraNavigation();