Fix autoSized for framebuffers

Author: davepagurek

src/webgl/p5.Framebuffer.js

@@ -139,7 +139,7 @@ class Framebuffer {
         target._renderer._adjustDimensions(settings.width, settings.height);
       this.width = dimensions.adjustedWidth;
       this.height = dimensions.adjustedHeight;
-      this.autoSized = false;
+      this._autoSized = false;
     } else {
       if ((settings.width === undefined) !== (settings.height === undefined)) {
         console.warn(
@@ -150,7 +150,7 @@ class Framebuffer {
       }
       this.width = target.width;
       this.height = target.height;
-      this.autoSized = true;
+      this._autoSized = true;
     }
     this._checkIfFormatsAvailable();
 
@@ -226,7 +226,7 @@ class Framebuffer {
    * the user's mouse
    */
   resize(width, height) {
-    this.autoSized = false;
+    this._autoSized = false;
     const dimensions =
       this.target._renderer._adjustDimensions(width, height);
     width = dimensions.adjustedWidth;
@@ -250,7 +250,7 @@ class Framebuffer {
    */
   pixelDensity(density) {
     if (density) {
-      this.autoSized = false;
+      this._autoSized = false;
       this.density = density;
       this._handleResize();
     } else {
@@ -271,9 +271,9 @@ class Framebuffer {
    */
   autoSized(autoSized) {
     if (autoSized === undefined) {
-      return this.autoSized;
+      return this._autoSized;
     } else {
-      this.autoSized = autoSized;
+      this._autoSized = autoSized;
       this._handleResize();
     }
   }
@@ -655,7 +655,7 @@ class Framebuffer {
    * @private
    */
   _updateSize() {
-    if (this.autoSized) {
+    if (this._autoSized) {
       this.width = this.target.width;
       this.height = this.target.height;
       this.density = this.target.pixelDensity();
@@ -670,7 +670,7 @@ class Framebuffer {
    * @private
    */
   _canvasSizeChanged() {
-    if (this.autoSized) {
+    if (this._autoSized) {
       this._handleResize();
     }
   }

test/unit/webgl/p5.Framebuffer.js

@@ -103,6 +103,7 @@ suite('p5.Framebuffer', function() {
       myp5.pixelDensity(1);
       const fbo = myp5.createFramebuffer();
       const oldTexture = fbo.color.rawTexture();
+      expect(fbo.autoSized()).to.equal(true);
       expect(fbo.width).to.equal(10);
       expect(fbo.height).to.equal(10);
       expect(fbo.density).to.equal(1);
@@ -122,6 +123,7 @@ suite('p5.Framebuffer', function() {
       myp5.pixelDensity(3);
       const fbo = myp5.createFramebuffer({ width: 20, height: 20, density: 1 });
       const oldTexture = fbo.color.rawTexture();
+      expect(fbo.autoSized()).to.equal(false);
       expect(fbo.width).to.equal(20);
       expect(fbo.height).to.equal(20);
       expect(fbo.density).to.equal(1);
@@ -136,6 +138,30 @@ suite('p5.Framebuffer', function() {
       expect(fbo.color.rawTexture()).to.equal(oldTexture);
     });
 
+    test('manually-sized framebuffers can be made auto-sized', function() {
+      myp5.createCanvas(10, 10, myp5.WEBGL);
+      myp5.pixelDensity(3);
+      const fbo = myp5.createFramebuffer({ width: 20, height: 20, density: 1 });
+      const oldTexture = fbo.color.rawTexture();
+      expect(fbo.autoSized()).to.equal(false);
+      expect(fbo.width).to.equal(20);
+      expect(fbo.height).to.equal(20);
+      expect(fbo.density).to.equal(1);
+
+      // Make it auto-sized
+      fbo.autoSized(true);
+      expect(fbo.autoSized()).to.equal(true);
+
+      myp5.resizeCanvas(5, 15);
+      myp5.pixelDensity(2);
+      expect(fbo.width).to.equal(5);
+      expect(fbo.height).to.equal(15);
+      expect(fbo.density).to.equal(2);
+
+      // The texture should be recreated
+      expect(fbo.color.rawTexture()).not.to.equal(oldTexture);
+    });
+
     suite('resizing', function() {
       let fbo;
       let oldTexture;