Fix lifecycle in watch

This commit is contained in:
Benjamin Lu
2025-09-05 11:58:46 -07:00
parent 1e5f7e7574
commit ed4627ad59
3 changed files with 24 additions and 14 deletions

View File

@@ -181,10 +181,12 @@ const isVueNodesEnabled = computed(() => shouldRenderVueNodes.value)
let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
let cleanupNodeManager: (() => void) | null = null
// Slot layout sync management
let slotSync: ReturnType<typeof useSlotLayoutSync> | null = null
// Slot/link layout sync management
const slotSync = useSlotLayoutSync()
let slotSyncStarted = false
let linkSync: ReturnType<typeof useLinkLayoutSync> | null = null
const linkSync = useLinkLayoutSync()
let linkSyncStarted = false
const layoutSync = useLayoutSync()
const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
@@ -238,13 +240,12 @@ const initializeNodeManager = () => {
}
// Initialize layout sync (one-way: Layout Store → LiteGraph)
const { startSync } = useLayoutSync()
startSync(canvasStore.canvas)
layoutSync.startSync(canvasStore.canvas)
// Initialize link layout sync for event-driven updates
linkSync = useLinkLayoutSync()
if (canvasStore.canvas) {
linkSync.start(canvasStore.canvas as LGraphCanvas)
linkSyncStarted = true
}
// Force computed properties to re-evaluate
@@ -262,11 +263,14 @@ const disposeNodeManagerAndSyncs = () => {
cleanupNodeManager = null
// Clean up link layout sync
if (linkSync) {
if (linkSyncStarted) {
linkSync.stop()
linkSync = null
linkSyncStarted = false
}
// Stop layout sync when leaving Vue nodes mode
layoutSync.stopSync()
// Reset reactive maps to inert defaults
vueNodeData.value = new Map()
nodeState.value = new Map()
@@ -309,7 +313,6 @@ watch(
}
// Start sync if not in Vue mode and not already started
if (!slotSync) slotSync = useSlotLayoutSync()
if (!slotSyncStarted && !isVueNodesEnabled.value) {
const started = slotSync.attemptStart(canvas as LGraphCanvas)
slotSyncStarted = started
@@ -339,7 +342,6 @@ watch(
if (!canvasStore.canvas || !comfyApp.graph) return
// Ensure slot sync is active
if (!slotSync) slotSync = useSlotLayoutSync()
if (!slotSyncStarted) {
const started = slotSync.attemptStart(canvasStore.canvas as LGraphCanvas)
slotSyncStarted = started
@@ -773,14 +775,15 @@ onUnmounted(() => {
nodeManager.cleanup()
nodeManager = null
}
if (slotSync) {
if (slotSyncStarted) {
slotSync.stop()
slotSync = null
slotSyncStarted = false
}
if (linkSync) {
if (linkSyncStarted) {
linkSync.stop()
linkSync = null
linkSyncStarted = false
}
// Ensure layout sync stops
layoutSync.stopSync()
})
</script>

View File

@@ -20,6 +20,11 @@ export function useLayoutSync() {
* This is one-way: Layout → LiteGraph only
*/
function startSync(canvas: any) {
// Ensure previous subscription is cleared before starting a new one
if (unsubscribe) {
unsubscribe()
unsubscribe = null
}
if (!canvas?.graph) return
// Subscribe to layout changes

View File

@@ -258,6 +258,8 @@ export function useLinkLayoutSync() {
* Start link layout sync with event-driven functionality
*/
function start(canvasInstance: LGraphCanvas): void {
// Avoid duplicate subscriptions/handlers if start is called again
stop()
canvas = canvasInstance
graph = canvas.graph
if (!graph) return