Added resize callback to restart simulation new if canvas is resized

src/app/pages/algorithms/fractal/fractal.component.ts

@@ -8,7 +8,7 @@ import {MatSelect} from '@angular/material/select';
 import {AlgorithmInformation} from '../information/information.models';
 import {UrlConstants} from '../../../constants/UrlConstants';
 import {FormsModule} from '@angular/forms';
-import {BabylonCanvas, RenderCallback, RenderConfig, SceneReadyEvent} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
 import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader';
 import {PointerEventTypes, PointerInfo, Scene, ShaderMaterial, Vector2} from '@babylonjs/core';
 import {MatButton} from '@angular/material/button';
@@ -155,7 +155,7 @@ export class FractalComponent implements OnInit {
     }
   }
 
-  onSceneReady(event: SceneReadyEvent): void {
+  onSceneReady(event: SceneEventData): void {
     event.scene.onPointerObservable.add((pointerInfo) => {
       switch (pointerInfo.type) {
 

src/app/pages/algorithms/pendulum/pendulum.component.html

@@ -6,6 +6,7 @@
     <app-babylon-canvas
       [config]="renderConfig"
       (sceneReady)="onSceneReady($event)"
+      (sceneResized)="onSceneReady($event)"
     />
   </mat-card-content>
 </mat-card>

src/app/pages/algorithms/pendulum/pendulum.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {BabylonCanvas, RenderConfig, SceneReadyEvent} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core';
 import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader';
@@ -42,7 +42,7 @@ export class PendulumComponent {
     trailDecay: 0.98
   };
 
-  onSceneReady(event: SceneReadyEvent) {
+  onSceneReady(event: SceneEventData) {
     const { engine, scene } = event;
     engine.resize();
 
@@ -113,4 +113,5 @@ export class PendulumComponent {
       csRender.dispatch(dispatchCount, 1, 1);
     });
   }
+
 }

src/app/shared/rendering/canvas/babylon-canvas.component.ts

@@ -13,7 +13,7 @@ export interface RenderConfig {
 
 export type RenderCallback = (material: ShaderMaterial, camera: Camera, canvas: HTMLCanvasElement, scene: Scene) => void;
 
-export interface SceneReadyEvent {
+export interface SceneEventData {
   scene: Scene;
   engine: WebGPUEngine;
 }
@@ -32,7 +32,8 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
   @Input({ required: true }) config!: RenderConfig;
   @Input() renderCallback?: RenderCallback;
 
-  @Output() sceneReady = new EventEmitter<SceneReadyEvent>();
+  @Output() sceneReady = new EventEmitter<SceneEventData>();
+  @Output() sceneResized = new EventEmitter<SceneEventData>();
 
   private engine!: WebGPUEngine;
   private scene!: Scene;
@@ -179,5 +180,10 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
       this.camera.orthoTop = viewSize / 2;
       this.camera.orthoBottom = -viewSize / 2;
     }
+
+    this.sceneResized?.emit({
+      scene: this.scene,
+      engine: this.engine
+    });
   }
 }