svg-pan-zoom-container icon indicating copy to clipboard operation
svg-pan-zoom-container copied to clipboard

Can't manually scale with values < 1

Open paopre opened this issue 4 years ago • 2 comments

Hello,

this shows the uncorrect result:

https://jsfiddle.net/xh295kws/1/

Is there a way to fix this?

In any case, at the current state, min possible scale should be set to 1 (update the doc), in order to avoid undefined behaviors.

Thanks!

paopre avatar Nov 20 '20 18:11 paopre

Ok so I'm not the only one that seems to have this issue either. I've tried both setScale and zoom and for some reason they don't seem to work outside of the wheel event. Any idea why this would be?

knight1219 avatar Feb 10 '21 16:02 knight1219

I think I may have found this issue, but only a partial solution. It seems when using the mouse wheel, the options object gets set and filled and sent to the zoom and setScale methods. When you do this manually, it does NOT go and grab this object from the container, which means the minScale is set to 1 and that means it can only grow. Creating this options object and setting it in setScale seems to allow it to scale as it should... BUT because you don't have mouse coordinates, the client property is set to x & y 0 and it messes with the pan. If i can come up with a solution, I will try and submit a pull request for a fix.

Container

<div id="svg" data-zoom-on-wheel="min-scale:0.1; max-scale:1000;" data-pan-on-drag>

</div>

Manual Set const options = { origin: { clientX: 0, clientY: 0, }, minScale: .1, maxScale: 1000, }; _svgPanZoomContainer.setScale(_svg, +diff/100, options);

knight1219 avatar Feb 10 '21 17:02 knight1219