[BUG] - Center Content, doesn't actually center the content based on the content dimensions.

[davidmarogy]

Hello I am trying to implement zoom and pan for a single picture in Angular.
The picture is much bigger than the the parent container. Therefore i wanted to center the picture to match the dimensions of the container. But currently center content is only centering so that the content top and left are 0. Also panning only work for the given container dimensions. It would be nice to pan till reaching the contents dimension. I also tried setting the initial pan x and y but on centering the piccture it jumped back the the left corner.

My container is about: height: 150 px width: 100px,
Image is without setting these parameters about: (but picture can have different dimension)height:500px, width: 750px

[TimUnderhay]

@davidmarogy Thanks for the report. Please provide a reduced test case using the Stackblitz link I’ve provided in the issue template, including the other information it asks for.

[TimUnderhay]

Also @davidmarogy, please see #34.

[davidmarogy]

@KensingtonTech Thanks for the reference to the other issue :D, and sorry for taking so long. Here are the reduced test case and the other informations you wanted.

Describe the bug
Container of the image has a fixed size which is much smaller than the image size itself. If keepInBounds: true, and keepInBoundsDragPullback is set, it is not possible to drag within the size of the image. It is also not possible to zoom so that the whole image could be sen.

Reduced Test Case
https://stackblitz.com/edit/ng2-panzoom-test-100-qugkqz?file=src%2Fapp%2Fapp.component.ts

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/ng2-panzoom-test-100-qugkqz?file=src%2Fapp%2Fapp.component.ts
2. Click on the image
3. Try to drag the image
4. Try to zoom out
5. Try to click center
6. See error

Expected behavior
It should be possible to drag and zoom within the contents width & height.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 20.04.1 LTS
• Browser: chrome
• Version: Version 84.0.4147.125 (Offizieller Build) (64-Bit)

Additional context
I forked the solution from #34 , and reproduced the error there. Hopefully this will help to understand what i mean :)
Also i found my solution for updating the initial pan ;D so thats not an issue anymore.

[TimUnderhay]

@davidmarogy I'm looking into this.

[davidmarogy]

@KensingtonTech Thanks :)

[TimUnderhay]

@davidmarogy So that you're not waiting around for me, I'll be straight with you -- I've rather a lot on at the moment and I don't see myself having the time to support your use case in the near future. I shall leave this open for now. When time allows, I do plan to come back to it. Apologies.

[philipsens]

Like issue #47 this problem seems related to the keepInBounds: true option. Which is buggy with dragging, zooming and centering. I'm guessing that the calculation for the view are off.

[byronbthompson]

Try this

const point = new fabric.Point(canvasWidth / 2, canvasHeight / 2);
this.panZoomAPI.panToPoint(point);