fix(vueNodes): sync node size changes from extensions to Vue components (#7993)

## Summary
When extensions like KJNodes call node.setSize(), the Vue component now
properly updates its CSS variables to reflect the new size.

## Changes:
- LGraphNode pos/size setters now always sync to layoutStore with Canvas
source
- LGraphNode.vue listens to layoutStore changes and updates CSS
variables
- Fixed height calculation to account for NODE_TITLE_HEIGHT difference
- Removed _syncToLayoutStore flag (simplified - layoutStore ignores
non-existent nodes)
- Use setPos() helper method instead of direct pos[0]/pos[1] assignment

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/236a173a-e41d-485b-8c63-5c28ef1c69bf


after

https://github.com/user-attachments/assets/5fc3f7e4-35c7-40e1-81ac-38a35ee0ac1b

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7993-fix-vueNodes-sync-node-size-changes-from-extensions-to-Vue-components-2e76d73d3650815799c5f2d9d8c7dcbf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Terry Jia
2026-02-12 05:38:18 -05:00
committed by GitHub
parent c0c81dba49
commit 6cf0357b3e
6 changed files with 104 additions and 74 deletions

View File

@@ -490,6 +490,17 @@ export class LGraphNode
this._pos[0] = value[0]
this._pos[1] = value[1]
const mutations = useLayoutMutations()
mutations.setSource(LayoutSource.Canvas)
mutations.moveNode(String(this.id), { x: value[0], y: value[1] })
}
/**
* Set the node position to an absolute location.
*/
setPos(x: number, y: number): void {
this.pos = [x, y]
}
public get size() {
@@ -501,6 +512,13 @@ export class LGraphNode
this._size[0] = value[0]
this._size[1] = value[1]
const mutations = useLayoutMutations()
mutations.setSource(LayoutSource.Canvas)
mutations.resizeNode(String(this.id), {
width: value[0],
height: value[1]
})
}
/**
@@ -2032,8 +2050,7 @@ export class LGraphNode
return
}
this.pos[0] += deltaX
this.pos[1] += deltaY
this.pos = [this._pos[0] + deltaX, this._pos[1] + deltaY]
}
/**