qnloft
/
ComfyUI
mirror of https://github.com/comfyanonymous/ComfyUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Scale graph canvas based on DPI factor 

Similar to fixes in litegraph.js editor demo:
3ef215cf11/editor/js/code.js (L19-L28)

Also workarounds to address viewpoint problem of lightgrapgh.js in DPI scaling scenario.

Fixes #161
This commit is contained in:
Huang-Huang Bao 2023-07-08 11:27:56 +08:00
parent 99abcbef41
commit 05e6eac7b3
No known key found for this signature in database
GPG Key ID: 33C3271387A13D1B
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/scripts/app.js
View File

@ -4,7 +4,19 @@ import { api } from "./api.js";
import { defaultGraph } from "./defaultGraph.js";
import { getPngMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
/**
// DPI scaling fix, see https://github.com/comfyanonymous/ComfyUI/pull/845
(function() {
const originalRenderInfo = LGraphCanvas.prototype.renderInfo
LGraphCanvas.prototype.renderInfo = function(ctx, x, y) {
// Patch renderInfo() to use canvas.offsetHeight instead of canvas.height as bottom viewpoint bound
if (!y) {
y = this.canvas.offsetHeight - 80
}
return originalRenderInfo.call(this, ctx, x, y)
}
})()
/**
* @typedef {import("types/comfy").ComfyExtension} ComfyExtension
*/
@ -1038,8 +1050,12 @@ export class ComfyApp {
this.graph.start();
function resizeCanvas() {
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;
// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
const scale = Math.max(window.devicePixelRatio, 1);
const { width, height } = canvasEl.getBoundingClientRect();
canvasEl.width = Math.round(width * scale);
canvasEl.height = Math.round(height * scale);
canvasEl.getContext("2d").scale(scale, scale);
canvas.draw(true, true);
}