@inweb/viewer-three/src/Viewer/components/ResizeCanvasComponent.ts

JavaScript library for rendering CAD and BIM files in a browser using Three.js

///////////////////////////////////////////////////////////////////////////////
// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
// All rights reserved.
//
// This software and its documentation and related materials are owned by
// the Alliance. The software may only be incorporated into application
// programs owned by members of the Alliance, subject to a signed
// Membership Agreement and Supplemental Software License Agreement with the
// Alliance. The structure and organization of this software are the valuable
// trade secrets of the Alliance and its suppliers. The software is also
// protected by copyright law and international treaty provisions. Application
// programs incorporating this software must include the following statement
// with their copyright notices:
//
//   This application incorporates Open Design Alliance software pursuant to a
//   license agreement with Open Design Alliance.
//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
//   All rights reserved.
//
// By use of this software, its documentation or related materials, you
// acknowledge and accept the above terms.
///////////////////////////////////////////////////////////////////////////////

import { IComponent } from "@inweb/viewer-core";
import type { Viewer } from "../Viewer";

export class ResizeCanvasComponent implements IComponent {
  protected viewer: Viewer;
  protected resizeObserver: ResizeObserver;

  constructor(viewer: Viewer) {
    this.viewer = viewer;
    this.resizeObserver = new ResizeObserver(this.resizeViewer);
    this.resizeObserver.observe(viewer.canvas.parentElement);
  }

  dispose() {
    this.resizeObserver.disconnect();
  }

  resizeViewer = (entries: ResizeObserverEntry[]) => {
    const { width, height } = entries[0].contentRect;

    if (!width || !height) return; // <- invisible viewer, or viewer with parent removed

    const camera = this.viewer.camera as any;
    const aspect = width / height;

    if (camera.isPerspectiveCamera) {
      camera.aspect = aspect;
      camera.updateProjectionMatrix();
    }
    if (camera.isOrthographicCamera) {
      camera.left = camera.bottom * aspect;
      camera.right = camera.top * aspect;
      camera.updateProjectionMatrix();
    }

    this.viewer.renderer.setSize(width, height, true);
    this.viewer.composer.setSize(width, height);

    this.viewer.update(true);
    this.viewer.emitEvent({ type: "resize", width, height });
  };
}