I have set Zoomin and zoomout functionality which is working perfectly individually, but When i have rendered diagram and set it to zoomToFit(); and it is fitting to screen which is perfect, but my zoom buttons are not responding accordingly, how to set my zoom levels as per zoomToFit(); is rendered?
Here is my code:
HTML:
<canvas id="diagram" width="2100" height="2100" style="border: 1px solid black;">
          This page requires a browser that supports HTML 5 Canvas element.
        </canvas>

JS:
initializeZoomControls() {
    const zoomOutButton = document.getElementById('zoomOutButton') as HTMLButtonElement;
    const zoomInButton = document.getElementById('zoomInButton') as HTMLButtonElement;
    const zoomLabel = document.getElementById('zoomLabel') as HTMLLabelElement;

    if (!zoomOutButton || !zoomInButton || !zoomLabel) {
      console.error("Zoom controls not found.");
      return;
    }

    // Set initial zoom level
    let currentZoom = this.diagramView.zoomFactor * 100; // Convert to percentage

    // Define zoom change step
    const zoomStep = 500; // 5% zoom increments
    const minZoom = 1000; // Minimum zoom percentage
    const maxZoom = 10000; // Maximum zoom percentage

    // Zoom out functionality
    zoomOutButton.addEventListener('click', () => {
      if (currentZoom > minZoom) {
        currentZoom -= zoomStep;
        this.diagramView.zoomFactor = currentZoom / 100;
      }
    });

    // Zoom in functionality
    zoomInButton.addEventListener('click', () => {
      if (currentZoom < maxZoom) {
        currentZoom += zoomStep;
        this.diagramView.zoomFactor = currentZoom / 100;
      }
    });
  }

Help me to set zoom levels according to zoomToFit() diagram is rendered.

Thanks Slavcho, It's working.