Fit to viewer does not fit all image inside

[adolli]

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.

[chrvadala]

Hi, at this moment the fit function arrange the image to obtain all image inside the viewer.
What you are asking is a good feature that I will introduce as soon as possible.

Thank you for your feedback

[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();
}

[chrvadala]

Could you provide a JSFiddle starting from this https://jsfiddle.net/chrvadala/f67qyfsd/?
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.

[wolasss]

Bump. It would be super nice to have a way to fit an image to the viewer, working just like object-fit: cover or background-size: cover.

[krnlde]

Is this fixed by #167 and can be closed?

[wolasss]

I think yes