From 05e6eac7b347655916302bb5a210b9aacd7a598e Mon Sep 17 00:00:00 2001 From: Huang-Huang Bao Date: Sat, 8 Jul 2023 11:27:56 +0800 Subject: [PATCH] Scale graph canvas based on DPI factor Similar to fixes in litegraph.js editor demo: https://github.com/ernestp/litegraph.js/blob/3ef215cf11b5d38cc4f7062d6f78b478e2f02b39/editor/js/code.js#L19-L28 Also workarounds to address viewpoint problem of lightgrapgh.js in DPI scaling scenario. Fixes #161 --- web/scripts/app.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/web/scripts/app.js b/web/scripts/app.js index bf424058..d3a05c27 100644 --- a/web/scripts/app.js +++ b/web/scripts/app.js @@ -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); }