Fabric.js: Stop Render on Mouse Events

[DylanPaulusSEL]

While using a canvas with a lot of shapes, we'd like to disable the rendering the occurs when clicking on an object -- while still being able to click on a shape and get it's information (ie. staticCanvas won't work). Tried turning off selection and AddOrRemoveShape, but the mouse events seem to still fire a render. Is there a way to capture the mouse event, but prevent fabric from performing a rerender? Or can turning off selection for the whole canvas stop the rerender?

Version

2.3.5

Steps to reproduce

n/a

Expected Behavior

Add ability to turn off mouse down/up rendering if selection + AddOrRemoveShape is disabled

Actual Behavior

[asturur]

The code shown is for the spraybrush, that is active just on the spray brush usage.

For general mouse events you get render generally when they are needed. So selecting a shape requires drawing controls and you need a render ( moving controls somewherelse is a future thing to do )

Not having selection active should not render indeed.

[DylanPaulusSEL]

@asturur Whoops, followed the wrong code. 😄

So for the canvas I'm setting renderOnAddRemove: false & selection: false,. For each object I apply

selectable = false,
hasBorders = false,
lockMovementX = true;
lockMovementY = true;
lockScalingX = true;
lockScalingY = true;
lockUniScaling = true;
lockRotation = true;
editable = false;
hasRotatingPoint = false;
hasControls = false;

And I still see a render when I select an object/group. Added a gif below where I added a console.log every time renderAll is called in Fabric (The selection being shown is done in the DOM, outside of Fabric). Is something missing?

[asturur]

if only mousedown and mouse events are fired, no it should not render. If you can reproduce in a fiddle we can mark it as a bug

[DylanPaulusSEL]

http://jsfiddle.net/Da7SP/3045/

Here is a fiddle reproducing. Every time a click happens in the canvas, it'll show a render, clicking the group shows two renders.

[asturur]

Definitely a bug. There is code in fabricjs to render just when necessary, we broke it somehow.

We need some sort of interaction tests that can catch those things, i tried to build a lib but is not really easy to have something that will work in node and browsers under qunit.

[asturur]

FIY if you want to check the PR
https://github.com/fabricjs/fabric.js/pull/5256

The logic was very old and untouched, i had no way to figure out when it broke, i hope this logic is more clear and more easy to read and check what it should do.

Another thing, a quick and easy way to see if the canvas is rendering is to use:

canvas.on('after:render', console.trace) so you know what is calling which kind of render ( top or down )

[ganderzz]

FIY if you want to check the PR

5256

The logic was very old and untouched, i had no way to figure out when it broke, i hope this logic is more clear and more easy to read and check what it should do.

Another thing, a quick and easy way to see if the canvas is rendering is to use:

canvas.on('after:render', console.trace) so you know what is calling which kind of render ( top or down )

👏 That was fast! Thanks for the tip, this is awesome!