Application and Renderer resize improvements

[bigtimebuddy]

I've been meaning to tackle this one for awhile, since no one seemed keen on adding the PR for it.

Fixes #6081

Added

• Introduces resize event to the Renderer. Called immediate after view is resized can be used for responsive layouts, or other resizing events.
• Adds throttle resizing on the Application when using resizeTo, this will prevent unnecessary extra event calls triggered by the window 'resize'.

Example

https://jsfiddle.net/bigtimebuddy/u05c1s28/

[themoonrat]

Had a play with a slight modified version of your fiddle: https://jsfiddle.net/w63ahoqd/

Can confirm that no matter how crazy I went on the window resizing, it occurs just ones per render

[codecov-io]

Codecov Report

Merging #6415 into dev will increase coverage by 0.21%.
The diff coverage is 93.93%.

@@            Coverage Diff             @@
##              dev    #6415      +/-   ##
==========================================
+ Coverage   78.33%   78.54%   +0.21%     
==========================================
  Files          57       57              
  Lines        2820     2825       +5     
==========================================
+ Hits         2209     2219      +10     
+ Misses        611      606       -5

Impacted Files	Coverage Δ
...kages/canvas/canvas-mesh/src/CanvasMeshRenderer.js	8.49% <0%> (+0.3%)	⬆️
...vas/canvas-renderer/src/utils/CanvasMaskManager.js	48.31% <100%> (ø)	⬆️
...s/canvas/canvas-sprite/src/CanvasSpriteRenderer.js	66.66% <100%> (+1.14%)	⬆️
...ages/canvas/canvas-renderer/test/CanvasRenderer.js	100% <100%> (ø)	⬆️
packages/canvas/canvas-mesh/src/NineSlicePlane.js	90.9% <100%> (+1.54%)	⬆️
packages/mixin-cache-as-bitmap/src/index.js	53.29% <100%> (+0.56%)	⬆️
...nvas/canvas-graphics/src/CanvasGraphicsRenderer.js	35.16% <100%> (-0.36%)	⬇️
...kages/canvas/canvas-renderer/src/CanvasRenderer.js	85.96% <93.75%> (+0.25%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6078468...b9162c2. Read the comment docs.

[bigtimebuddy]

Added a feature based on feedback from @GoodBoyDigital to set the amount of time to throttle instead of just using RAF. I agree this is more useful for producing more stable results, especially if you're doing something expensive on resize.

const app = new Application({ resizeTo: window, resizeThrottle: 250 });

[bigtimebuddy]

Uncertain if we should set a default for resizeThrottle, since 100 seems more reasonable than 0, but wonder what other folks think?

Just kidding, changed to 100ms

[ivanpopelyshev]

Usually, people use setInterval. Of course your solution is better, but it involves many lines of code.

[themoonrat]

The issue I have with this latest change is that if the screen keeps resizing, then nothing is ever updated.
https://jsfiddle.net/opxhkytg/1/

This has a 1 second resizeThrottle setting. Keep slowly resizing the window, and you'll notice that the resize event never kicks in, since a new window resize keeps resetting the timeout.

This setting should be a throttle rather than a debounce, imo.

[eXponenta]

But there not really cases when animated resize is required, if so, then app architecture apriory wrong.

[bigtimebuddy]

I think you're right @themoonrat. If I do this as only a throttle like I had before, users can still implement their own debounce with the resize event. That's probably the most minimal implementation.

[cursedcoder]

This plugin is hard to understand with all its static/this context mixed.

[bigtimebuddy]

yeah these are static methods where the context is the Application instance. Loader plugins are similar.

I think the conversion to typescript actually made it less clear.

[cursedcoder]

Not sure if it's the right thing for the plugin to be singleton-ish.
Was there a reason?

[bigtimebuddy]

It’s not really a singleton. No one calls this class directly. And it comes preinstalled, it’s mostly a code organization thing to keep from overloading Application. Could’ve been done a bunch of ways, but this is how it evolved

[ivanpopelyshev]

I approve it but with mark "burn it with fire as soon as we have special component dedicated to html part of renderer". Do not allow this code to become legacy stuff that goes from one version to another, this is piece belongs to a framework or animation widget or something like that.