Fit to viewer does not fit all image inside

Hi: I’ve met this case when the viewer is square and a portait svg such as 500px * 800px, I invoke fitToViewer but only got its width fitted. Could I fit entire svg inside the viewer? Thanks.

[otake]

https://jsfiddle.net/f67qyfsd/10/

I moved the <rect> x property over to 500 because my situation was more about the elements inside the SVG being cut off and not the SVG tag itself. In other cases your default fitToViewer() seems to work well.

[otake]

I also needed this feature. I wrote some “hacky” code using this.Viewer.fitSelection(). Its not pretty but it gets the job done. Run this after the component is mounted (you need a reference to the Viewer).

// Find the inner container that wraps all the diagram components
let innerContainer = this.Viewer.ViewerDOM.querySelector('g > g');
let bbox = innerContainer.getBBox();

// only resize if it runs outside the main viewport
if (bbox.height > this.height || bbox.width > this.width || bbox.x < 0 || bbox.y < 0) {
    // give it some padding on the left and top
    const padding = 20;
    const topPadding = (this.height / 2) - (bbox.height / 2);
    let pointX = bbox.x - padding;
    let pointY = bbox.y - topPadding;
    let width = bbox.width + (padding * 2);
    let height = bbox.height + topPadding + padding;

    this.Viewer.fitSelection(pointX, pointY, width, height);
} else {
    this.Viewer.fitToViewer();
}