Fabric 2.0.2 can't read property 'x' of undefined ( vptCoords)

[lucasayat]

Hi I've been using fabric library for a while, but switching to version 2, I got an error (meanwhile uncaught) into the function of Fabric (line 14198) checking for the point being inside the frame I assume. I'm using fabric@2.0.2 loaded with npm. Here a snapshot of the issue: I don't understand why, because when I checked the related objects, vptCoords are present (as shown in the snapshot) but my browser (Chromium) consider it as undefined ( vptCoords ) Thanks for checking this issue and the good job you are doing. Jean-Luc REUILLON

[asturur]

can you reproduce the issue in some testable way by us?

[lucasayat]

Sorry I'm stuck. None idea where to look for. When I console.log(canvas.vptCoords) it results undefined. In my app I initialize 9 canvas like this; var can1 = { a: new fabric.Canvas('can1a'), b: new fabric.Canvas('can1b'), c: new fabric.Canvas('can1c') }; var can2 = { a: new fabric.Canvas('can2a'), b: new fabric.Canvas('can2b'), c: new fabric.Canvas('can2c') }; var can3 = { a: new fabric.Canvas('can3a'), b: new fabric.Canvas('can3b'), c: new fabric.Canvas('can3c') }; can1.a.selection = false; can1.c.selection = false; can2.a.selection = false; can2.c.selection = false; can3.a.selection = false; can3.c.selection = false;

I'll keep on with the 1.7.22, without this issue till I find something. If find from where it comes I"ll tell you. Thanks JLR

[lucasayat]

I forgot this in the initialization fabric.Object.prototype.objectCaching = false;

[asturur]

May it be you have one object with the reference to the wrong canvas?

[lucasayat]

I don't think so, It's more an issue with canvas.vptCoords. When I console.log it whith the former version I get an object. Since the 2.0.2 I changed only the canvas.renderAll() to canvas.requestRenderAll(); and canvas.discardActiveObject().renderAll(); to canvas.discardActiveObject(); as recommended in docs, and now for console.log(canvas.vptCoords) of same canvases I got {}; that fire my issue.

[lucasayat]

It's an async issue, because when I put setTimeout(function(){console.log(canvas.vptCoords);},1000); I get back the objects. {tl: Point, br: Point, tr: Point, bl: Point}bl: Point {x: 0, y: 943}br: Point {x: 861, y: 943}tl: Point {x: 0, y: 0}tr: My app is in node envir and I use socket.io regards

[asturur]

so vptCoords are created by renderAll if you call requestRenderAll you use requestAnimationFrame. If your app is in node, you should keep using renderAll.

[asturur]

or alternatively you can calculate the vptCoords immediately before calling requestRenderAll. But if the app is in node, i do not think you want to render asyncronously i think you want just render.

[lucasayat]

OK thank you It works. Just renderAll() after setting dimensions and after I can use requestRenderAll.

[asturur]

you should not use requestRenderAll after node. The render gets delayed of 16ms. if you are waiting for some file to be created, it can led you to wrong result. Render syncronously if no one is looking at a screen during execution.

[lucasayat]

It's exactly the case. So Ok I'll do this. . By the way, I just got the 2.0.3 version. Works fine and looks like very reactive. Thanks for everything and keep on this great work.