Merge pull request 'Fixed resizing problem for 2d canvas' (#24) from bugfix/resize2dCanvas into main

Reviewed-on: #24

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

@@ -1,2 +1,25 @@
-.canvas-container { width: 100%; height: 1000px; }
+.canvas-container {
-canvas { width: 100%; height: 100%; touch-action: none; border-width: 0; border-color: transparent; border-style: hidden; }
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #1a1a1a;
+}
+
+canvas {
+  aspect-ratio: 1 / 1;
+
+  width: 100%;
+  height: auto;
+
+  min-width: 200px;
+  min-height: 200px;
+  max-width: 1000px;
+  max-height: 1000px;
+
+  touch-action: none;
+  display: block;
+
+  border: none;
+  outline: none;
+}

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

@@ -32,21 +32,24 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
   private shaderMaterial!: ShaderMaterial;
   private camera!: Camera;
 
+  //Listener
+  private resizeHandler = () => this.handleResize();
+  private wheelHandler = (evt: WheelEvent) => evt.preventDefault();
+
   ngAfterViewInit(): void {
     this.ngZone.runOutsideAngular(() => {
       this.initBabylon();
     });
   }
 
-  /*ngOnChanges(changes: SimpleChanges): void {
-    //if something changes during runtime, new materials are necessary ans needs maybe build here
-  }*/
-
   ngOnDestroy(): void {
+    window.removeEventListener('resize', this.resizeHandler);
+
     const canvas = this.canvasRef?.nativeElement;
     if (canvas) {
-      //remove listener if needed
+      canvas.removeEventListener('wheel', this.wheelHandler);
     }
+
     if (this.engine) {
       this.engine.dispose();
     }
@@ -57,12 +60,16 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     this.engine = new Engine(canvas, true);
     this.scene = new Scene(this.engine);
     this.setupCamera(canvas);
-    canvas.addEventListener('wheel', (evt: WheelEvent) => evt.preventDefault(), { passive: false });
+    this.addListener(canvas);
     this.createShaderMaterial();
     this.createFullScreenRect();
     this.sceneReady.emit(this.scene);
     this.addRenderLoop(canvas);
-    this.addResizeHandler();
+  }
+
+  private addListener(canvas: HTMLCanvasElement) {
+    canvas.addEventListener('wheel', this.wheelHandler, {passive: false});
+    window.addEventListener('resize', this.resizeHandler);
   }
 
   private setupCamera(canvas: HTMLCanvasElement) {
@@ -148,12 +155,17 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     });
   }
 
-  private addResizeHandler() {
+  private handleResize(): void {
-    window.addEventListener('resize', () => {
+    if (this.engine) {
       this.engine.resize();
-      if (this.config.mode === '2D' && this.camera instanceof ArcRotateCamera && this.camera.mode === Camera.ORTHOGRAPHIC_CAMERA) {
-        //maybe update the aspect ratio here
     }
-    });
+
+    if (this.config.mode === '2D' && this.camera instanceof ArcRotateCamera) {
+      const viewSize = this.config?.initialViewSize ?? 10;
+      this.camera.orthoLeft = -viewSize / 2;
+      this.camera.orthoRight = viewSize / 2;
+      this.camera.orthoTop = viewSize / 2;
+      this.camera.orthoBottom = -viewSize / 2;
+    }
   }
 }