Simple patch for high-DPR devices

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

View File

@ -755,11 +755,18 @@ export class ComfyApp {
this.graph.start();
function resizeCanvas() {
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;
const resizeCanvas = () => {
const sc = window.devicePixelRatio;
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);
}
};
// Ensure the canvas fills the window
resizeCanvas();

View File

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

View File

@ -217,14 +217,6 @@ button.comfy-queue-btn {
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 select {
color: var(--input-text);
@ -237,9 +229,9 @@ button.comfy-queue-btn {
@media only screen and (max-height: 850px) {
.comfy-menu {
top: 0 !important;
top: auto !important;
bottom: 0 !important;
left: auto !important;
left: 0 !important;
right: 0 !important;
border-radius: 0px;
}