Panning with rotated X-AXIS SVG

bumbu / svg-pan-zoom

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks

https://github.com/ariutta/svg-pan-zoom#demos

BSD 2-Clause "Simplified" License

1.76k stars 389 forks source link

Panning with rotated X-AXIS SVG #329

Open tmeghe opened 5 years ago

tmeghe commented 5 years ago

Hi, Just a quick question which I didn't found any answer. I'm using the library with Angular 7 and it works well. However, for my need, the SVG I'm working on has a scale(1,-1) transform (equivalent to a rotateX(180deg)) When panning, everything is good on the X-AXIS but the panning behavior is inverted on the Y-AXIS. Is there a way to make it pan the right way ? (maybe intercepting the mouse coordinates and inverting them ?) Any help appreciated, thanks a lot Thomas

bumbu commented 5 years ago

You should be able to do that by using beforePan callback. You can read more about it on homepage https://github.com/ariutta/svg-pan-zoom .

tmeghe commented 5 years ago

Edit (previous answer was wrong) : Thanks for the answer, indeed I can access to pan values but panning is done through mouse so if I modify them I will loose the smooth panning translation ?

bumbu commented 5 years ago

Using this callback should not degrade performance of the panning (unless there CPU heavy computations in it, which I suppose there're not). If you can paste a jsfiddle - it may help understand the issue better. Few other alternatives I can think of:

Before loading your SVG, modify it so to have scale(1, 1). Maybe an easy solution is to wrap everything in another element with scale(1, -1).
Use customEventsHandler (there're 2 demos on home page) - you'll have to write the behaviour of panning by yourself, but this way you'll have full control
Fork the library, add an option to it to support inverse axis, and compile.

Hopefully it helps

shadowjustice commented 4 years ago

I have a pull request #370 which is correct to add the rotate option to svg pan zoom. Then you can set the rotation. And as far as I know no effect on panning.