Comfy-Org / Comfy-Org/ComfyUI_frontend

Try the Wan2.2 S2V template, then zoom in/out. You will find this link issue.

Open
#5,690 0 comments 0 reactions 0 assignees View on GitHub
area:links area:vue-migration
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Problem

Link positions become severely misaligned after loading the Wan2.2 S2V template and zooming in/out. This indicates a coordinate system desynchronization between stored template data and runtime link position calculations.

https://github.com/user-attachments/assets/e628a218-4375-4e68-8f75-a5d26e55944a

Link misalignment after template load and zoom

## Root Cause

Links don't store position data directly - they're calculated at runtime from:
1. **Node positions** (`pos` array in serialization)
2. **Reroute positions** (`extra.reroutes[].pos` array)
3. **Canvas transform** (`extra.ds.scale` and `extra.ds.offset`)

The issue occurs when these coordinate systems become desynchronized during template loading and zoom operations.

## Technical Analysis

**Template Loading**: [useTemplateWorkflows.ts:147](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/platform/workflow/templates/composables/useTemplateWorkflows.ts#L147)
```typescript
await app.loadGraphData(json, true, true, workflowName)
// ^ ^
// clean restore_view
```

**Canvas Transform Restoration**: [app.ts:1209-1223](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/scripts/app.ts#L1209-L1223)
```typescript
if (graphData.extra?.ds) {
this.canvas.ds.offset = graphData.extra.ds.offset // May be incorrect
this.canvas.ds.scale = graphData.extra.ds.scale // May be stale
}
```

**Link Position Calculation**: [slotCalculations.ts:136-189](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/core/canvas/litegraph/slotCalculations.ts#L136-L189)
```typescript
// Runtime calculation based on node layout + canvas transform
const context: SlotPositionContext = {
nodeX: nodeLayout.position.x, // From layout store
nodeY: nodeLayout.position.y, // May be desynchronized
}
```

## Reproduction

1. Load Wan2.2 S2V template
2. Zoom in/out on canvas
3. Observe severe link misalignment
4. Links appear disconnected from their actual connection points

## Likely Causes

### Option 1: Template Canvas Transform Data
Template's `extra.ds` data may be missing/incorrect, causing wrong canvas positioning when `restore_view: true`

### Option 2: Layout Store Desynchronization
The layout store used for slot calculations isn't properly updated when canvas transform changes during zoom

### Option 3: Reroute Transform Issues
Reroute positions may not be correctly transformed between coordinate systems during zoom operations

## Solution Approaches

**Investigation Steps:**
1. **Check template JSON**: Verify `extra.ds` transform data in Wan2.2 S2V template
2. **Layout store sync**: Ensure layout store updates when canvas transform changes
3. **Coordinate conversion**: Verify graph-to-canvas coordinate transformation during zoom

**Potential Fixes:**
1. **Template preprocessing**: Normalize/validate template transform data before loading
2. **Layout store invalidation**: Force layout recalculation after canvas transform changes
3. **Coordinate system unification**: Use consistent coordinate space for all link calculations

## Files to Investigate

- Template JSON files (missing `extra.ds` data)
- [layoutStore.ts](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/stores/layoutStore.ts) - Layout synchronization
- [Reroute.ts:414-426](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/lib/litegraph/src/Reroute.ts#L414-L426) - Reroute positioning
- Canvas transform/zoom handling in graph components

## Related
- #5705 - Subgraph link misalignment (similar coordinate system issue)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.