wangbo/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2026-03-10 03:37:33 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Simple patch for high-DPR devices

Browse Source
This commit is contained in:
kali-linex 2023-04-23 09:53:13 +02:00
parent 6908f9c949
commit 2641c07295
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/scripts/app.js
View File

@ -755,11 +755,18 @@ export class ComfyApp {
this.graph.start(); this.graph.start();
function resizeCanvas() { const resizeCanvas = () => {
canvasEl.width = canvasEl.offsetWidth; const sc = window.devicePixelRatio;
canvasEl.height = canvasEl.offsetHeight; const w = canvasEl.offsetWidth;
const h = canvasEl.offsetHeight;
canvasEl.width = Math.floor(sc * w);
canvasEl.height = Math.floor(sc * h);
canvasEl.style.width = `${w}px`;
canvasEl.style.height = `${h}px`;
this.scale = window.devicePixelRatio;
this.ctx.scale(this.scale, this.scale);
canvas.draw(true, true); canvas.draw(true, true);
} };
// Ensure the canvas fills the window // Ensure the canvas fills the window
resizeCanvas(); resizeCanvas();

10
web/scripts/widgets.js
View File

@ -133,13 +133,13 @@ function addMultilineWidget(node, name, opts, app) {
const t = ctx.getTransform(); const t = ctx.getTransform();
const margin = 10; const margin = 10;
Object.assign(this.inputEl.style, { Object.assign(this.inputEl.style, {
left: `${t.a * margin + t.e}px`, left: `${(t.a * margin + t.e) / window.devicePixelRatio}px`,
top: `${t.d * (y + widgetHeight - margin - 3) + t.f}px`, top: `${(t.d * (y + widgetHeight - margin - 3) + t.f) / window.devicePixelRatio}px`,
width: `${(widgetWidth - margin * 2 - 3) * t.a}px`, width: `${(widgetWidth - margin * 2 - 3) * t.a / window.devicePixelRatio}px`,
height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d}px`, height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d / window.devicePixelRatio}px`,
position: "absolute", position: "absolute",
zIndex: 1, zIndex: 1,
fontSize: `${t.d * 10.0}px`, fontSize: `${t.d * 10.0 / window.devicePixelRatio}px`,
}); });
this.inputEl.hidden = !visible; this.inputEl.hidden = !visible;
}, },

12
web/style.css
View File

@ -217,14 +217,6 @@ button.comfy-queue-btn {
z-index: 99; z-index: 99;
} }
.comfy-modal.comfy-settings input[type="range"] {
vertical-align: middle;
}
.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
width: 3.5em;
}
.comfy-modal input, .comfy-modal input,
.comfy-modal select { .comfy-modal select {
color: var(--input-text); color: var(--input-text);
@ -237,9 +229,9 @@ button.comfy-queue-btn {
@media only screen and (max-height: 850px) { @media only screen and (max-height: 850px) {
.comfy-menu { .comfy-menu {
top: 0 !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
left: auto !important; left: 0 !important;
right: 0 !important; right: 0 !important;
border-radius: 0px; border-radius: 0px;
} }