getScreenCTM / Zoom bug with svgs that are not positioned at the left top of the document

[felixwahner]

I had a problem with zooming to the mouse position when an svg isn't rendered at the top left corner of the browser but somewhere else in the document.
(See also #132, which contains an example of the current behavior)

I traced it down to the transformToScreen method, where getScreenCTM is used. getScreenCTM returns the offset of the svg to the top and left corner of the document and from there on calculates all positions using this offset.
But the "zero point" of the svg is still at 0/0 - the offset isn't necessary and shouldn't be used at all.
When replacing the value of the following lines with 0, everything works as expected:

panzoom/index.js

Line 181 in 3c5734f

var parentOffsetX = parentCTM.e;

panzoom/index.js

Line 182 in 3c5734f

var parentOffsetY = parentCTM.f;

[matsp]

Having the same issue in my application when I try to display a SVG viewport besides other content.

[matsp]

@felixwahner Do you found a workaround till this issue is fixed?

@anvaka Do you have an idea?

[anvaka]

I'll take a look later tonight (pacific time). If I recall correctly, that was done to make sure svgs with viewbox work correctly, which is obviously incorrect for the reasons you guys have mentioned.

[anvaka]

Please check now: https://anvaka.github.io/panzoom/demo/view-box-support.html

This change should fix the issue: 49be4a1

Available starting from v8.7.3. Please let me know if this is still happening

[felixwahner]

This works like a charm. Thanks for the quick fix!

[gg4u]

Hi @anvaka, @felixwahner,

I tested your solution Andrei, I still had an issue until fixing lines below.

Please have a look if necessary to commit.

Bug only reported on Firefox when applying panzoom to graph, displayed beside elements.

I spent an afternoon on it to figure out, step to reproduce:
create a graph svg object in a container, like:

<div id="graphContainer></div>

and the svg object should be like:

<svg><g id="scene">...</svg>

once initialized, call:

var scene = document.getElementById('scene')
i = panzoom(scene)

TypeError: parentCTM is nulldebugger eval code:180:26
    transformToScreen ../js/panzoom.js:180
    showRectangle ../js/panzoom.js:161
    <anonymous> debugger eval code:1

I fixed the issue like this:

 function transformToScreen(x, y) {
    if (panController.getCTM) { //it was getScreenCTM
      var parentCTM = panController.getCTM(); // it was getScreenCTM
..

P.s. could you please tell if panZoom works with IE browser ? I cannot test it.
But on browser compatibility I m worried for I read getScreenCTM is not supported.

[gg4u]

P.s. have a good 2020!!

[jonathanlurie]

Up! There is still an issue with getCTM() on Firefox, returning null.
I made PR 197 to fix it.