Fit to viewer does not fit all image inside about react-svg-pan-zoom HOT 7 CLOSED

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

from react-svg-pan-zoom.

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.

from react-svg-pan-zoom.

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

from react-svg-pan-zoom.

Could you provide a JSFiddle starting from this https://jsfiddle.net/chrvadala/f67qyfsd/?
Thanks

from react-svg-pan-zoom.

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.

from react-svg-pan-zoom.

Is this fixed by #167 and can be closed?

from react-svg-pan-zoom.

I think yes

from react-svg-pan-zoom.