Pixi.js: Angular Zone.js tapping into Pixi.js pointermove event

[lukeinthecloud]

In my current work environment we are addressing performance issues within our codebase.

One such issue that we have come across is Angulars change detection. We have a Pixijs canvas that utilizes pointermove as an event. As a result this is causing Angular change detection to go crazy and increases the amount of garbage collection to double essentially.

Ideally we would want to disable Zone.js and run outside Angular for this sort of event. However I am struggling to find a way that we can register these events (in our interactive container), that are created and force them to run out of Angular change detection.

I am not sure if Pixi or anyone has any experience relating to this and just thought it would be best to see if there was some sort of clean way to do this.

[lTyl]

We use Angular and PIXI for a large web application. We solved this problem by using Zone.js BLACK_LISTED_EVENTS, which effectively disabled Zone.js for specific gesture events.

The code we are using in production is a variation of this Gist: https://gist.github.com/JiaLiPassion/45664f6a28c8b522fca30c841610c6b4

[lukeinthecloud]

This looks very promising. Will investigate your solution on our side. Thanks for the feedback, will get back to you!

[lukeinthecloud]

Sorry for long wait on this response.

I have tried to implement the above before the bootstrapModule of angular.

However get hit with __Zone_ignore_on_properties is not defined

Is this something that was ever encountered?

[ivanpopelyshev]

This variable is not defined, look in the code. Strict mode ruins it.

[lukeinthecloud]

Granted. However adding it to the window object i guess would not be an option as this didn't seem to help either. So not sure on what would be a more preferable approach.

[mralbobo]

var props = ['scroll', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mousewheel', 'pointermove'];
// black list scroll event handler for onProp
const targets = [window, Document.prototype, HTMLBodyElement.prototype, HTMLElement.prototype];
 window.__Zone_ignore_on_properties = [];
targets.forEach(function(target) {
  window.__Zone_ignore_on_properties.push({
    target: target,
    ignoreProperties: props
  });
});

// disable requestAnimationFrame
window.__Zone_disable_requestAnimationFrame = true;
window.__Zone_disable_on_property = true; // Zone will not patch onProperty such as button.onclick, not sure if this should be left disabled...
window.__zone_symbol__BLACK_LISTED_EVENTS = props;

The updated (possibly too aggressive?) version of what was posted earlier. It's expected that these are undefined because you're defining them. Zone looks for these special properties when it initializes and seemingly _only_ when it initializes.

The final trick here, this code needs to run before zone.js is loaded at all. In our case this ended up being dumped into the index.html file because another library we were using was loading node before our explicit require.

[lukeinthecloud]

Perfect. Issue resolved. Appreciate the extra info @mralbobo

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.