From 2998e232cb26b66e7ba42a53ada3a8285fcb2c15 Mon Sep 17 00:00:00 2001
From: malern <701073+malern@users.noreply.github.com>
Date: Fri, 19 May 2023 19:57:15 +0100
Subject: [PATCH] Make multiline widget work with different canvas dimensions.

It now scales the textarea positioning using the canvas height/width.
---
 web/scripts/widgets.js | 20 +++++++++++++-------
 web/style.css          |  2 ++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
index 94988d0f..82168b08 100644
--- a/web/scripts/widgets.js
+++ b/web/scripts/widgets.js
@@ -155,18 +155,24 @@ function addMultilineWidget(node, name, opts, app) {
 				computeSize(node.size);
 			}
 			const visible = app.canvas.ds.scale > 0.5 && this.type === "customtext";
-			const t = ctx.getTransform();
 			const margin = 10;
+			const elRect = ctx.canvas.getBoundingClientRect();
+			const transform = new DOMMatrix()
+				.scaleSelf(elRect.width / ctx.canvas.width, elRect.height / ctx.canvas.height)
+				.multiplySelf(ctx.getTransform())
+				.translateSelf(margin, margin + y);
+
 			Object.assign(this.inputEl.style, {
-				left: `${t.a * margin + t.e}px`,
-				top: `${t.d * (y + widgetHeight - margin - 3) + t.f}px`,
-				width: `${(widgetWidth - margin * 2 - 3) * t.a}px`,
-				background: (!node.color)?'':node.color,
-				height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d}px`,
+				transformOrigin: "0 0",
+				transform: transform,
+				left: "0px",
+				top: "0px",
+				width: `${widgetWidth - (margin * 2)}px`,
+				height: `${this.parent.inputHeight - (margin * 2)}px`,
 				position: "absolute",
+				background: (!node.color)?'':node.color,
 				color: (!node.color)?'':'white',
 				zIndex: app.graph._nodes.indexOf(node),
-				fontSize: `${t.d * 10.0}px`,
 			});
 			this.inputEl.hidden = !visible;
 		},
diff --git a/web/style.css b/web/style.css
index df220cc0..87f096e1 100644
--- a/web/style.css
+++ b/web/style.css
@@ -39,6 +39,8 @@ body {
 	padding: 2px;
 	resize: none;
 	border: none;
+	box-sizing: border-box;
+	font-size: 10px;
 }
 
 .comfy-modal {