Merge branch 'dev-2.0' into refactor/strands-binary-logical-dedup

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();
   }

src/type/textCore.js

@@ -1587,13 +1587,6 @@ function textCore(p5, fn) {
     if (typeof weight === 'number') {
       this.states.setValue('fontWeight', weight);
       this._applyTextProperties();
-
-      // Safari works without weight set in the canvas style attribute, and actually
-      // has buggy behavior if it is present, using the wrong weight when drawing
-      // multiple times with different weights
-      if (!p5.prototype._isSafari()) {
-        this._setCanvasStyleProperty('font-variation-settings', `"wght" ${weight}`);
-      }
       return;
     }
     // the getter

src/webgl/3d_primitives.js

@@ -1792,33 +1792,38 @@ function primitives3D(p5, fn){
       const prevMode = this.states.textureMode;
       this.states.setValue('textureMode', constants.NORMAL);
       const prevOrder = this.bezierOrder();
-      this.bezierOrder(2);
+      this.bezierOrder(3);
       this.beginShape();
       const addUVs = (x, y) => [x, y, 0, (x - x1)/width, (y - y1)/height];
+      const rr = 0.5523; // kappa: 4*(sqrt(2)-1)/3, handle ratio for cubic bezier circle approximation
       if (tr !== 0) {
         this.vertex(...addUVs(x2 - tr, y1));
-        this.bezierVertex(...addUVs(x2, y1));
+        this.bezierVertex(...addUVs(x2 - tr + tr * rr, y1));
+        this.bezierVertex(...addUVs(x2, y1 + tr - tr * rr));
         this.bezierVertex(...addUVs(x2, y1 + tr));
       } else {
         this.vertex(...addUVs(x2, y1));
       }
       if (br !== 0) {
         this.vertex(...addUVs(x2, y2 - br));
-        this.bezierVertex(...addUVs(x2, y2));
+        this.bezierVertex(...addUVs(x2, y2 - br + br * rr));
+        this.bezierVertex(...addUVs(x2 - br + rr * br, y2));
         this.bezierVertex(...addUVs(x2 - br, y2));
       } else {
         this.vertex(...addUVs(x2, y2));
       }
       if (bl !== 0) {
         this.vertex(...addUVs(x1 + bl, y2));
-        this.bezierVertex(...addUVs(x1, y2));
+        this.bezierVertex(...addUVs(x1 + bl - bl * rr, y2));
+        this.bezierVertex(...addUVs(x1, y2 - bl + bl * rr));
         this.bezierVertex(...addUVs(x1, y2 - bl));
       } else {
         this.vertex(...addUVs(x1, y2));
       }
       if (tl !== 0) {
         this.vertex(...addUVs(x1, y1 + tl));
-        this.bezierVertex(...addUVs(x1, y1));
+        this.bezierVertex(...addUVs(x1, y1 + tl - tl * rr));
+        this.bezierVertex(...addUVs(x1 + tl - tl * rr, y1));
         this.bezierVertex(...addUVs(x1 + tl, y1));
       } else {
         this.vertex(...addUVs(x1, y1));

test/unit/visual/cases/webgl.js

@@ -1506,6 +1506,17 @@ visualSuite('WebGL', function() {
     });
   });
 
+  visualSuite('2D Shapes', function() {
+    visualTest('rect() rounded into a circle', function(p5, screenshot) {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      p5.background(255);
+      p5.noStroke();
+      p5.fill('red');
+      p5.rect(-20, -20, 40, 40, 20);
+      screenshot();
+    });
+  });
+
   visualSuite('3D Primitives', function() {
     visualTest('cylinder() renders correctly', function(p5, screenshot) {
       p5.createCanvas(100, 100, p5.WEBGL);

test/unit/visual/screenshots/WebGL/2D Shapes/rect() rounded into a circle/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGL/2D Shapes/rect() rounded into a circle/metadata.json

@@ -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);
+    });
+  });
 });