refactor: optimize animation loops in Portal canvases (#8790)

Author: tobiu

apps/portal/canvas/HeaderCanvas.mjs

@@ -73,10 +73,6 @@ class HeaderCanvas extends Base {
          * @protected
          */
         className: 'Portal.canvas.HeaderCanvas',
-        /**
-         * @member {Number|null} animationId_=null
-         */
-        animationId_: null,
         /**
          * Remote method access
          * @member {Object} remote
@@ -110,6 +106,10 @@ class HeaderCanvas extends Base {
      * @member {String|null} activeId=null
      */
     activeId = null
+    /**
+     * @member {Number|null} animationId=null
+     */
+    animationId = null
     /**
      * @member {String|null} canvasId=null
      */
@@ -157,21 +157,6 @@ class HeaderCanvas extends Base {
      */
     waveBuffers = {bgA: null, bgB: null, fgA: null, fgB: null}
 
-    /**
-     * Triggered after the animationId config got changed
-     * @param {Number|null} value
-     * @param {Number|null} oldValue
-     */
-    afterSetAnimationId(value, oldValue) {
-        if (oldValue) {
-            if (hasRaf) {
-                cancelAnimationFrame(oldValue)
-            } else {
-                clearTimeout(oldValue)
-            }
-        }
-    }
-
     /**
      * Clears the graph state and stops the render loop.
      */
@@ -226,7 +211,9 @@ class HeaderCanvas extends Base {
                 me.context = canvas.getContext('2d');
                 me.initParticles(canvas.width, canvas.height); // Init particles
                 me.updateResources(canvas.width, canvas.height); // Init buffers/gradients
-                hasChange && me.renderLoop()
+                if (hasChange && !me.animationId) {
+                    me.renderLoop()
+                }
             } else {
                 setTimeout(checkCanvas, 50)
             }

apps/portal/canvas/HomeCanvas.mjs

@@ -107,10 +107,6 @@ class HomeCanvas extends Base {
          * @protected
          */
         className: 'Portal.canvas.HomeCanvas',
-        /**
-         * @member {Number|null} animationId_=null
-         */
-        animationId_: null,
         /**
          * Remote method access for the App Worker.
          * Allows the UI to control the simulation state and input.
@@ -144,6 +140,10 @@ class HomeCanvas extends Base {
      * @member {Float32Array|null} agentBuffer=null
      */
     agentBuffer = null
+    /**
+     * @member {Number|null} animationId=null
+     */
+    animationId = null
     /**
      * ID of the canvas element in the DOM.
      * @member {String|null} canvasId=null
@@ -207,21 +207,6 @@ class HomeCanvas extends Base {
      */
     time = 0
 
-    /**
-     * Triggered after the animationId config got changed
-     * @param {Number|null} value
-     * @param {Number|null} oldValue
-     */
-    afterSetAnimationId(value, oldValue) {
-        if (oldValue) {
-            if (hasRaf) {
-                cancelAnimationFrame(oldValue)
-            } else {
-                clearTimeout(oldValue)
-            }
-        }
-    }
-
     /**
      * Clears the graph state and stops the render loop.
      * Used when the component is destroyed or the route changes.
@@ -688,7 +673,9 @@ class HomeCanvas extends Base {
             if (canvas) {
                 me.context = canvas.getContext('2d');
                 me.updateSize({width: canvas.width, height: canvas.height});
-                hasChange && me.renderLoop()
+                if (hasChange && !me.animationId) {
+                    me.renderLoop()
+                }
             } else {
                 setTimeout(checkCanvas, 50)
             }

apps/portal/canvas/ServicesCanvas.mjs

@@ -103,17 +103,13 @@ class ServicesCanvas extends Base {
     }
 
     static config = {
-        /**
-         * @member {String} className='Portal.canvas.ServicesCanvas'
-         * @protected
-         */
-        className: 'Portal.canvas.ServicesCanvas',
-        /**
-         * @member {Number|null} animationId_=null
-         */
-        animationId_: null,
-        /**
-         * Remote method access for the App Worker.
+            /**
+             * @member {String} className='Portal.canvas.ServicesCanvas'
+             * @protected
+             */
+            className: 'Portal.canvas.ServicesCanvas',
+            /**
+             * Remote method access for the App Worker.
          * Allows the UI (Controller) to control the simulation state and input.
          * @member {Object} remote
          * @protected
@@ -143,6 +139,10 @@ class ServicesCanvas extends Base {
         theme_: 'light'
     }
 
+    /**
+     * @member {Number|null} animationId=null
+     */
+    animationId = null
     /**
      * ID of the canvas element in the DOM.
      * @member {String|null} canvasId=null
@@ -238,21 +238,6 @@ class ServicesCanvas extends Base {
      */
     rotation = {x: -0.4, y: 0} // Base tilt (radians) - Floor Perspective
 
-    /**
-     * Triggered after the animationId config got changed
-     * @param {Number|null} value
-     * @param {Number|null} oldValue
-     */
-    afterSetAnimationId(value, oldValue) {
-        if (oldValue) {
-            if (hasRaf) {
-                cancelAnimationFrame(oldValue)
-            } else {
-                clearTimeout(oldValue)
-            }
-        }
-    }
-
     /**
      * Clears the graph state and stops the render loop.
      * Used when the component is destroyed or the route changes to release memory.
@@ -707,7 +692,9 @@ class ServicesCanvas extends Base {
             if (canvas) {
                 me.context = canvas.getContext('2d');
                 me.updateSize({width: canvas.width, height: canvas.height});
-                hasChange && me.renderLoop()
+                if (hasChange && !me.animationId) {
+                    me.renderLoop()
+                }
             } else {
                 setTimeout(checkCanvas, 50)
             }