From adcb663b3ef681e44bc0e73233427b7ae3adb87c Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Wed, 11 Feb 2026 22:40:17 +0100
Subject: [PATCH] fix: link dragging offset on external monitors in Vue nodes
 mode (#8809)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fix link dragging offset when using Vue nodes mode on external monitors
with different DPI than the primary display.

## Changes

- **What**: Derive overlay canvas scale from actual canvas dimensions
(`canvas.width / canvas.clientWidth`) instead of
`window.devicePixelRatio`, fixing DPR mismatch. Map `LinkDirection.NONE`
to `'none'` in `convertDirection()` instead of falling through to
`'right'`.

## Before


https://github.com/user-attachments/assets/f5d04617-369f-4649-af60-11d31e27a75c



## After


https://github.com/user-attachments/assets/76434d2b-d485-43de-94f6-202a91f73edf


## Review Focus

The overlay canvas copies dimensions from the main canvas (which
includes DPR scaling from `resizeCanvas`). When the page loads on a
monitor whose DPR differs from what `resizeCanvas` used,
`window.devicePixelRatio` no longer matches the canvas's internal-to-CSS
ratio, causing all drawn link positions to be offset. The fix derives
scale directly from the canvas itself.

`LinkDirection.NONE = 0` is falsy, so it was caught by the `default`
case in `convertDirection()`, adding an unwanted directional curve to
moved input links.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8809-fix-link-dragging-offset-on-external-monitors-in-Vue-nodes-mode-3046d73d36508143b600f23f5fe07044)
by [Unito](https://www.unito.io)
---
 src/lib/litegraph/src/LGraphCanvas.ts                      | 2 +-
 src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index e05b3f6a50..72e776644b 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -5060,7 +5060,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
     octx.save()
 
-    const scale = window.devicePixelRatio
+    const scale = overlayCanvas.width / (overlayCanvas.clientWidth || 1)
     octx.setTransform(scale, 0, 0, scale, 0, 0)
 
     this.ds.toCanvasContext(octx)
diff --git a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
index ecae73ae77..af46e84c0b 100644
--- a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
+++ b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
@@ -68,6 +68,7 @@ export class LitegraphLinkAdapter {
       case LinkDirection.DOWN:
         return 'down'
       case LinkDirection.CENTER:
+      case LinkDirection.NONE:
         return 'none'
       default:
         return 'right'