298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-01-11 02:15:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make multiline widget work with different canvas dimensions.

Browse Source 
It now scales the textarea positioning using the canvas height/width.
This commit is contained in:
malern 2023-05-19 19:57:15 +01:00
parent 8bbd9815a9
commit 2998e232cb
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/scripts/widgets.js
View File

@ -155,18 +155,24 @@ function addMultilineWidget(node, name, opts, app) {
computeSize(node.size); computeSize(node.size);
} }
const visible = app.canvas.ds.scale > 0.5 && this.type === "customtext"; const visible = app.canvas.ds.scale > 0.5 && this.type === "customtext";
const t = ctx.getTransform();
const margin = 10; 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, { Object.assign(this.inputEl.style, {
left: `${t.a * margin + t.e}px`, transformOrigin: "0 0",
top: `${t.d * (y + widgetHeight - margin - 3) + t.f}px`, transform: transform,
width: `${(widgetWidth - margin * 2 - 3) * t.a}px`, left: "0px",
background: (!node.color)?'':node.color, top: "0px",
height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d}px`, width: `${widgetWidth - (margin * 2)}px`,
height: `${this.parent.inputHeight - (margin * 2)}px`,
position: "absolute", position: "absolute",
background: (!node.color)?'':node.color,
color: (!node.color)?'':'white', color: (!node.color)?'':'white',
zIndex: app.graph._nodes.indexOf(node), zIndex: app.graph._nodes.indexOf(node),
fontSize: `${t.d * 10.0}px`,
}); });
this.inputEl.hidden = !visible; this.inputEl.hidden = !visible;
}, },

2
web/style.css
View File

@ -39,6 +39,8 @@ body {
padding: 2px; padding: 2px;
resize: none; resize: none;
border: none; border: none;
box-sizing: border-box;
font-size: 10px;
} }
.comfy-modal { .comfy-modal {