Add data-forced-height/width

Author: nathanvogel

src/sd-node.js

@@ -71,6 +71,32 @@ class SDNodeElement extends SDBaseElement {
     this.setAttribute('vertices', JSON.stringify(v));
   }
 
+  get forcedHeight() {
+    let h = this.getAttribute('data-forced-height');
+    if (!h) return -1;
+    return parseInt(h);
+  }
+
+  set forcedHeight(h) {
+    let height = parseInt(h);
+    if (!h || !Number.isInteger(height)) return;
+
+    this.setAttribute('data-forced-height', h);
+  }
+
+  get forcedWidth() {
+    let h = this.getAttribute('data-forced-width');
+    if (!h) return -1;
+    return parseInt(h);
+  }
+
+  set forcedWidth(h) {
+    let width = parseInt(h);
+    if (!h || !Number.isInteger(width)) return;
+
+    this.setAttribute('data-forced-width', h);
+  }
+
   async init(parentProgram) {
     if (parentProgram && !this.name) {
       this.name = `${UNNAMED_NODE_PREFIX}${unnamedNodeIndex++}`;

src/shader-doodle.js

@@ -34,7 +34,7 @@ class ShaderDoodleElement extends SDNodeElement {
 
     await super.init();
 
-    this.surface = Surface(canvas, this.program);
+    this.surface = Surface(canvas, this.program, this);
     this.renderer.addSurface(this.surface);
   }
 }

src/webgl/Surface.js

@@ -5,7 +5,7 @@ import getMouseOrTouch from '../utils/getMouseOrTouch.js';
 
 import { MOUSE, MOUSEDRAG, RESOLUTION, SURFACE_UNIFORMS } from './constants.js';
 
-function Surface(element, program) {
+function Surface(element, program, sdNode) {
   const canvas =
     element instanceof HTMLCanvasElement
       ? element
@@ -74,15 +74,24 @@ function Surface(element, program) {
       newRect.right - newRect.width <=
         (window.innerWidth || document.documentElement.clientWidth);
 
-    if (newRect.width !== rect.width) {
-      canvas.width = ustate[RESOLUTION].value[0] = newRect.width;
+    const h =
+      sdNode.forcedHeight && sdNode.forcedHeight > 0
+        ? sdNode.forcedHeight
+        : newRect.height;
+    const w =
+      sdNode.forcedWidth && sdNode.forcedWidth > 0
+        ? sdNode.forcedWidth
+        : newRect.width;
+
+    if (w !== rect.width) {
+      canvas.width = ustate[RESOLUTION].value[0] = w;
     }
 
-    if (newRect.height !== rect.height) {
-      canvas.height = ustate[RESOLUTION].value[1] = newRect.height;
+    if (h !== rect.height) {
+      canvas.height = ustate[RESOLUTION].value[1] = h;
     }
 
-    rect = newRect;
+    rect = { width: canvas.width, height: canvas.height };
   }
 
   function render(