Setting "drawGrid: false" on paper generates svg-pan-zoom errors

[dmb0058]

Introduction

Seems to be a problem between JointJS and svg-pan-zoom @bumbu, could be either/both but I thought I'd start by reporting it here.

I have a jsfiddle at https://jsfiddle.net/dmb0058/vt5xL4jg/58/ that shows the problem. Setting "drawGrid: false" on the paper generates fatal errors, but with "drawGrid: true" everything works fine.

I suspect it might have something to do with some kind of race between initialising the panZoom and JointJS loading up the svg but I'd appreciate any insights.

Thanks,

David

Steps to reproduce

Go to https://jsfiddle.net/dmb0058/vt5xL4jg/58/
Set line 21 of the javascript from "drawGrid: true"
Everything works fine.

Setting line 21 to "drawGrid: false" generates "Script error" in the console.

Running this code locally gives this error at startup:

svg-pan-zoom.min.js:3 Error: attribute transform: Expected number, "matrix(Infinity,0,0,Inf…".
setCTM @ svg-pan-zoom.min.js:3
n.updateCTM @ svg-pan-zoom.min.js:3
n.init @ svg-pan-zoom.min.js:3
n @ svg-pan-zoom.min.js:3
e.exports @ svg-pan-zoom.min.js:3
i.init @ svg-pan-zoom.min.js:3
i @ svg-pan-zoom.min.js:3
e.exports @ svg-pan-zoom.min.js:3
(anonymous) @ diagram_fiddle.js:100

And left-clicking the background gives the error:

svg-pan-zoom.min.js:3 Uncaught DOMException: Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible.
at i.handleMouseDown (https://unpkg.com/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js:3:17446)
at SVGSVGElement.mousedown (https://unpkg.com/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js:3:12850)
i.handleMouseDown @ svg-pan-zoom.min.js:3
mousedown @ svg-pan-zoom.min.js:3

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

Related to this?

[kumilingus]

Your onUpdatedCTM() callback does not look like the one I suggest in #2550 (comment).

[dmb0058]

Aargh, sorry ... didn't realise the jsfiddle link updates with each save.

Updated now at https://jsfiddle.net/dmb0058/vt5xL4jg/107/, and the problem can be seen with "drawGrid: false". Changing "drawGrid: true" works.

[kumilingus]

Now it says "script error".

[dmb0058]

That's right. That's the problem - if you change drawGrid:false to drawGrid:true the 'Script error' goes away.
The console on jsfiddle is not very verbose, but the actual error in Chrome devtools is "svg-pan-zoom.min.js:3 Error: attribute transform: Expected number, "matrix(Infinity,0,0,Inf…".
setCTM @ svg-pan-zoom.min.js:3"

[kumilingus]

It seems like the problem occurs if you instantiate the SVGPanZoom with empty SVG.

• It happens in paper async mode (the cells are not created and added to the DOM immediately)
• and when you don't use the grid (the grid is an SVGRectangle appended to the viewport).

Not sure how to fix that yet though.