Merge pull request #8747 from processing/fix/webgl-text-measurement

Save + restore 2D text canvas context when font is applied in WebGL mode

Author: davepagurek

src/core/p5.Renderer3D.js

@@ -160,6 +160,7 @@ export class Renderer3D extends Renderer {
 
     // clipping
     this._clipDepths = [];
+    this._textContextSavedStack = [];
     this._isClipApplied = false;
     this._stencilTestOn = false;
 
@@ -1327,13 +1328,25 @@ export class Renderer3D extends Renderer {
     return this;
   }
 
+  push() {
+    super.push()
+    const saved = !!(this.states.textFont?.font);
+    if (saved) {
+      this.textDrawingContext().save()
+    }
+    this._textContextSavedStack.push(saved);
+  }
+
   pop(...args) {
     if (
       this._clipDepths.length > 0 &&
       this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]
     ) {
       this._clearClip();
     }
+    if (this._textContextSavedStack.pop()) {
+      this.textDrawingContext().restore()
+    }
     super.pop(...args);
     this._applyStencilTestIfClipping();
   }

test/unit/webgl/p5.RendererGL.js

@@ -2998,4 +2998,38 @@ suite('p5.RendererGL', function() {
       expect(myp5.get(5, 5)).toEqual([255, 0, 0, 255]);
     });
   });
+
+  suite('fontWidth', function() {
+    test('respects textSize changes across push/pop', async function() {
+      myp5.createCanvas(100, 100, myp5.WEBGL);
+      const font = await myp5.loadFont('test/unit/assets/acmesa.ttf');
+
+      myp5.push();
+      myp5.textFont(font);
+      myp5.textSize(12);
+      myp5.push();
+      myp5.textSize(20);
+      const widthAt20 = myp5.fontWidth('X');
+      myp5.pop();
+      const widthAt12 = myp5.fontWidth('X');
+      myp5.pop();
+
+      expect(widthAt20).toBeGreaterThan(widthAt12);
+    });
+
+    test('fontWidth restores correctly when font is unset inside push/pop', async function() {
+      myp5.createCanvas(100, 100, myp5.WEBGL);
+      const font = await myp5.loadFont('test/unit/assets/acmesa.ttf');
+      myp5.textFont(font);
+      myp5.textSize(12);
+      myp5.push();
+      myp5.textFont('sans-serif'); // unset loaded font
+      myp5.pop();
+      // After pop, should be back to size 12 with loaded font
+      const widthAfterPop = myp5.fontWidth('X');
+      myp5.textSize(20);
+      const widthAt20 = myp5.fontWidth('X');
+      expect(widthAfterPop).toBeLessThan(widthAt20);
+    });
+  });
 });