[shaders] Fix editing of uniforms.

Calculate the number of predefined uniform controls
on the fly instead of hardcoding some
error prone math.

Fixed: skia:11272
Change-Id: I1c9ace50aaa95c33f9a52facd6be602ca9ddc0e0
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/376744
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
diff --git a/shaders/modules/shadernode/index.ts b/shaders/modules/shadernode/index.ts
index 7f39dff..ef2eb45 100644
--- a/shaders/modules/shadernode/index.ts
+++ b/shaders/modules/shadernode/index.ts
@@ -35,13 +35,6 @@
 export const numPredefinedUniforms = predefinedUniforms.match(/^uniform/gm)!.length - numPredefinedShaderUniforms;
 
 /**
- * Counts the number of controls that handle pre-defined uniforms.
- *
- * Takes into account the uniform-fps-sk which doesn't correspond to a uniform.
- */
-export const numPredefinedUniformControls = numPredefinedUniforms + 1;
-
-/**
  * The number of lines prefixed to every shader for predefined uniforms. Needed
  * to properly adjust error line numbers.
  */
diff --git a/shaders/modules/shaders-app-sk/shaders-app-sk.ts b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
index 77235f0..e3045a1 100644
--- a/shaders/modules/shaders-app-sk/shaders-app-sk.ts
+++ b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
@@ -37,7 +37,7 @@
 import { UniformControl } from '../../../infra-sk/modules/uniform/uniform';
 import { DimensionsChangedEventDetail } from '../../../infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk';
 import {
-  defaultShader, numPredefinedUniformControls, numPredefinedUniformLines, predefinedUniforms, ShaderNode,
+  defaultShader, numPredefinedUniformLines, predefinedUniforms, ShaderNode,
 } from '../shadernode';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -162,6 +162,12 @@
 
   private uniformControlsNeedingRAF: UniformControl[] = [];
 
+  /**
+   * Calculated when we render, it count the number of controls that are for
+   * predefined uniforms, as opposed to user uniform controls.
+   */
+  private numPredefinedUniformControls: number = 0;
+
   constructor() {
     super(ShadersAppSk.template);
   }
@@ -170,6 +176,7 @@
     const ret: TemplateResult[] = [
       html`<uniform-fps-sk></uniform-fps-sk>`, // Always start with the fps control.
     ];
+    ele.numPredefinedUniformControls = 1;
     const node = ele.shaderNode;
     if (!node) {
       return ret;
@@ -181,12 +188,15 @@
       }
       switch (uniform.name) {
         case 'iTime':
+          ele.numPredefinedUniformControls++;
           ret.push(html`<uniform-time-sk .uniform=${uniform}></uniform-time-sk>`);
           break;
         case 'iMouse':
+          ele.numPredefinedUniformControls++;
           ret.push(html`<uniform-mouse-sk .uniform=${uniform} .elementToMonitor=${ele.canvasEle}></uniform-mouse-sk>`);
           break;
         case 'iResolution':
+          ele.numPredefinedUniformControls++;
           ret.push(html`
             <uniform-dimensions-sk
               .uniform=${uniform}
@@ -444,7 +454,7 @@
   /** Populate the uniforms values from the controls. */
   private getUserUniformValuesFromControls(): number[] {
     const uniforms: number[] = new Array(this.shaderNode!.getUniformFloatCount()).fill(0);
-    $('#uniformControls > *').slice(numPredefinedUniformControls).forEach((control) => {
+    $('#uniformControls > *').slice(this.numPredefinedUniformControls).forEach((control) => {
       (control as unknown as UniformControl).applyUniformValues(uniforms);
     });
     return uniforms.slice(this.shaderNode?.numPredefinedUniformValues || 0);
@@ -452,7 +462,7 @@
 
   private getPredefinedUniformValuesFromControls(): number[] {
     const uniforms: number[] = new Array(this.shaderNode!.getUniformFloatCount()).fill(0);
-    $('#uniformControls > *').slice(0, numPredefinedUniformControls).forEach((control) => {
+    $('#uniformControls > *').slice(0, this.numPredefinedUniformControls).forEach((control) => {
       (control as unknown as UniformControl).applyUniformValues(uniforms);
     });
     return uniforms;