Paper.js: cannot read property transformBounds of null

[simonemazzoni]

Description/Steps to reproduce

Hello, I found a bug on the implementation of the raster. I don't understand exactly why this happens, but it looks like something strange happen in the raster onLoad function.
The error is unhandled and breaks all the paper ecosystem making it unusable.

Does anyone experienced the same?
I'll start tomorrow to have a look at the paper code. I hope to find the reason of the error and submit a pull request.

I'll attach a screen of the error logged in the console.

Link to reproduction test-case

Expected result

Additional information

macOS 10.12.6, Chrome 63.0.3239.132
Windows 10, Chrome 63

[functionalStoic]

@simonemazzoni Unsure if it is helpful or not but I was having not consistent results with the onload method. I switched to the .on('load', function...) and I stopped having issues.

[simonemazzoni]

@JasonSooter thanks for your comment.
What do you mean exactly with

not consistent results?

it gives you errors like mine or simply it doesn't load the image?

Anyway I'll try to have a look at your solution tomorrow in the morning.

[functionalStoic]

I had issues with it not respecting the image actually being loaded which caused various unstable results on the canvas such as it not being loaded and loading at the wrong size. Sorry I can't be of more help. Not a paperJS expert

[simonemazzoni]

I investigated more in deep, checking the paper code.

I found out a strange combo that maybe caused my error.
The error is caused by the invocation of the function _transformBounds on a null object, so I checked the code for a potential unhandled null pointer.
I found that here the _transformBounds() function is invoked on an inverted matrix. Such matrix appears to be created calling the inverted() method on an already existent matrix, but this method calls the clone() and invert() methods itself which implementation is here and shows that it can return null in case this clauses --> (det && !isNaN(det) && isFinite(tx) && isFinite(ty)) are not satisfied. So this basically could lead to my error and break all the paper canvas.

My first questions are:

1. is it an intended behaviour that the invert() function returns null?
2. If that is intended why there is no null check in the getBounds() method?
3. What could have caused the inverted matrix to be null? I wasn't able to reproduce the error on purpose, but it happen sometimes in some code I have in production.

I guess these are questions for @lehni. I have in mind a potential fix, but I prefer to discuss it first.

Thanks

[lehni]

Not every matrix can be inverted. When it's not invertible, then null is returned. The cause is usually that you scale an item with 0 in either dimension. The code shouldn't fail on such items though...

[simonemazzoni]

Hi @lehni,
your answer lead me to the cause of the BUG! 🙂

here a sketch to reproduce the bug.

All seems to be originated by setting a paper.view.zoom = 0;
That zero makes a,b,d and d parameters of the view matrix equal to zero, causing the det to be zero, and hence return null when invert() function is called, causing the _transformBounds() function to be called on a null object.
This as told before breaks all the ecosystem and isn't recoverable at all.

I have two solutions at this point.

The first is to prevent here to set a zoom = 0 to avoid problems, but what to return in case the user invokes paper.view.setZoom(0)? We set the zoom to a limit value? like 0.001? We ignore the setZoom invocation?
I noticed that negatives zoom values are already taken into account (it basically invert the negative value), and that setting a zero value causes the canvas view to "disappear".

The second solution is to add a check on the getBounds() method to prevent the error, but I don't know exactly what to do in case the invert() function returns null.

A workaround for me at the moment is to avoid to set 0 zoom values, but I thing that prevent this in the setZoom function itself is a more solid solution.

I also noticed that the same happens if the passed zoom is infinity (e.g. paper.view.setZoom(1/0))

Please, let me know what do you think so as I can fix it and make a PR.

[logsol]

Any updates here? I have the same issue.

[lehni]

If there are updates, you would see them here. I don't have time to work on paper.js currently, unfortunately. I should find more time again in a couple of months, but until then, don't expect huge bug-fixes from me. I'm happy to review PRs though.

[simonemazzoni]

@lehni could you please have a quick read at my previous comment? I can make a pull request fixing the problem, but I need your opinion on what to do since I thought about two ways to avoid the problem.

@logsol you can always workaround the bug by avoiding to set the view zoom to 0 or infinity.

[logsol]

Thanks, I was actually able to work around the issue. For me it was happening when the paper.js application was initialised inside an iframe - with the iframe initially set to display=none. When I render it in the background with another div overlaying it, everything works for me.

[simonemazzoni]

@logsol oh, I see. I guess you found another edge case for this issue then.

[sasensi]

@simonemazzoni, I made a PR based on your idea #1558

[simonemazzoni]

@sasensi nice!! It looks good to me though.
Let's hear from @lehni if it accept the PR.

[hankchiutw]

@lehni , does the PR look good? I have the same issue too.

[muodov]

Same here, @sasensi @lehni how can we help this fix to get through?

[CodeMacabre]

It seems this happens consistently on Chrome now with any call to _transformBounds (presumably due to a recent Chrome update).

Can we help this PR through @sasensi @lehni?

EDIT: This does indeed seem to be exacerbated by a recent Chrome bug which has been fixed in Canary through Beta versions, so presumably the fix will arrive in Chrome stable shortly.

[iamhosseindhv]

In my case, my view was 0 in width and height.

This was because my canvas was inside a modal which starts from width:0, height:0 and grows to something like width: 500, height: 500.

I just had to wait for the animation to complete before accessing properties on my view. (e.g. raster.view.viewSize)