Calculate sizes when drawing if required

web/scripts/widgets.js

@@ -32,6 +32,53 @@ const MultilineSymbol = Symbol();
 function addMultilineWidget(node, name, opts, app) {
 	const MIN_SIZE = 50;
 
+	function computeSize(size) {
+		if (node.widgets[0].last_y == null) return;
+
+		let y = node.widgets[0].last_y;
+		let freeSpace = size[1] - y;
+
+		// Compute the height of all non customtext widgets
+		let widgetHeight = 0;
+		const multi = [];
+		for (let i = 0; i < node.widgets.length; i++) {
+			const w = node.widgets[i];
+			if (w.type === "customtext") {
+				multi.push(w);
+			} else {
+				if (w.computeSize) {
+					widgetHeight += w.computeSize()[1] + 4;
+				} else {
+					widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+				}
+			}
+		}
+
+		// See how large each text input can be
+		freeSpace -= widgetHeight;
+		freeSpace /= multi.length;
+
+		if (freeSpace < MIN_SIZE) {
+			// There isnt enough space for all the widgets, increase the size of the node
+			freeSpace = MIN_SIZE;
+			node.size[1] = y + widgetHeight + freeSpace * multi.length;
+		}
+
+		// Position each of the widgets
+		for (const w of node.widgets) {
+			w.y = y;
+			if (w.type === "customtext") {
+				y += freeSpace;
+			} else if (w.computeSize) {
+				y += w.computeSize()[1] + 4;
+			} else {
+				y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+			}
+		}
+
+		node.inputHeight = freeSpace;
+	}
+
 	const widget = {
 		type: "customtext",
 		name,
@@ -42,6 +89,11 @@ function addMultilineWidget(node, name, opts, app) {
 			this.inputEl.value = x;
 		},
 		draw: function (ctx, _, widgetWidth, y, widgetHeight) {
+			if (!this.parent.inputHeight) {
+				// If we are initially offscreen when created we wont have received a resize event
+				// Calculate it here instead
+				computeSize(node.size);
+			}
 			const visible = app.canvas.ds.scale > 0.5;
 			const t = ctx.getTransform();
 			const margin = 10;
@@ -101,50 +153,7 @@ function addMultilineWidget(node, name, opts, app) {
 		const onResize = node.onResize;
 
 		node.onResize = function (size) {
-			if (node.widgets[0].last_y == null) return;
-
-			let y = node.widgets[0].last_y;
-			let freeSpace = size[1] - y;
-
-			// Compute the height of all non customtext widgets
-			let widgetHeight = 0;
-			const multi = [];
-			for (let i = 0; i < node.widgets.length; i++) {
-				const w = node.widgets[i];
-				if (w.type === "customtext") {
-					multi.push(w);
-				} else {
-					if (w.computeSize) {
-						widgetHeight += w.computeSize()[1] + 4;
-					} else {
-						widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
-					}
-				}
-			}
-
-			// See how large each text input can be
-			freeSpace -= widgetHeight;
-			freeSpace /= multi.length;
-
-			if (freeSpace < MIN_SIZE) {
-				// There isnt enough space for all the widgets, increase the size of the node
-				freeSpace = MIN_SIZE;
-				node.size[1] = y + widgetHeight + freeSpace * multi.length;
-			}
-
-			// Position each of the widgets
-			for (const w of node.widgets) {
-				w.y = y;
-				if (w.type === "customtext") {
-					y += freeSpace;
-				} else if (w.computeSize) {
-					y += w.computeSize()[1] + 4;
-				} else {
-					y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
-				}
-			}
-
-			this.inputHeight = freeSpace;
+			computeSize(size);
 
 			// Call original resizer handler
 			if (onResize) {
@@ -153,7 +162,7 @@ function addMultilineWidget(node, name, opts, app) {
 		};
 
 		requestAnimationFrame(() => {
-			node.onResize(node.size);
+			computeSize(node.size);
 			app.graph.setDirtyCanvas(true);
 		});
 	}