---
name: syncfusion-diagram-connector-corruption
description: |
  Debug and fix SyncFusion EJ2 diagram connectors that disappear or become invisible after
  page reload. Use when: (1) diagram connectors/walls/lines vanish after save and reload,
  (2) connectors appear to be "deleted" but data exists in storage, (3) elements placed
  near edges (x=0 or y=0) go missing, (4) sourcePoint or targetPoint coordinates are
  unexpectedly at (0,0). Covers Chrome DevTools MCP debugging technique and load-time
  filtering pattern for corrupted connector data.
author: Claude Code
version: 1.1.0
date: 2025-01-25
---

# SyncFusion Diagram Connector Corruption Debugging

## Problem

SyncFusion EJ2 diagram connectors (lines, walls, connections) disappear after page reload
even though they were saved. The diagram appears to "delete" elements, particularly those
placed near the edges of the canvas.

## Context / Trigger Conditions

- Connectors/walls/lines vanish after saving and reloading the page
- Elements placed at MIN edges (x=0 or y=0) may have corrupted coordinates
- Elements placed at MAX edges (x=pageWidth or y=pageHeight) silently fail to load
- The diagram data exists in storage (database/localStorage) but elements don't render
- `diagram.saveDiagram()` was used to serialize the diagram
- No errors appear in the console during load

## Root Causes

### 1. Coordinate Corruption (Zero Coordinates)

Connectors can have their `sourcePoint` and `targetPoint` coordinates corrupted to `(0, 0)`
due to:
- Coordinate calculation bugs during wall/line creation
- Snap-to-grid or boundary constraint interactions
- Race conditions during drag-and-drop operations

When both endpoints are at `(0, 0)`, the connector becomes a zero-length invisible line at
the origin corner.

### 2. Max Boundary Rejection (SyncFusion Bug)

**CRITICAL**: SyncFusion's `boundaryConstraints: 'Page'` silently rejects connectors during
diagram initialization when coordinates are EXACTLY at the maximum boundary:
- `x = pageWidth` (e.g., x=1400 on a 1400px wide canvas)
- `y = pageHeight` (e.g., y=1000 on a 1000px tall canvas)

This is a SyncFusion quirk where:
- Connectors at x=0 or y=0 (min boundary) load correctly
- Connectors at x=pageWidth or y=pageHeight (max boundary) are silently dropped
- The same connectors work fine when added at runtime via `diagram.add()`
- Only fails during initial diagram construction from JSON

## Debugging Technique

### Using Chrome DevTools MCP

Connect to the page via Chrome DevTools MCP and inspect the live diagram state:

```javascript
// Query all connectors in the diagram
diagram.connectors.map(c => ({
  id: c.id,
  sourcePoint: c.sourcePoint,
  targetPoint: c.targetPoint
}))
```

**What to look for:**
- `sourcePoint` or `targetPoint` with `x: 0, y: 0` = corruption
- Both endpoints at `(0, 0)` = completely corrupted
- Coordinates exactly equal to pageWidth or pageHeight = max boundary issue

### Verify Stored Data vs Loaded

Compare connectors in page source vs diagram:

```javascript
// Count connectors passed to diagram constructor (add logging)
console.log(`Starting with ${connectors.length} connectors`);

// After diagram init, check what actually loaded
console.log(`Diagram has ${diagram.connectors.length} connectors`);
```

If counts differ, max boundary rejection is likely the cause.

## Solution: Load-Time Fixes

### Fix 1: Filter Corrupted Connectors

```javascript
connectors = connectors.filter(c => {
    const sp = c.sourcePoint || {};
    const tp = c.targetPoint || {};

    const sourceAtOrigin = sp.x === 0 && sp.y === 0;
    const targetAtOrigin = tp.x === 0 && tp.y === 0;

    // Both points at origin = definitely corrupted
    if (sourceAtOrigin && targetAtOrigin) {
        console.warn(`Removing corrupted connector ${c.id}: both endpoints at origin`);
        return false;
    }

    // Zero-length connectors (same start and end)
    if (sp.x === tp.x && sp.y === tp.y) {
        console.warn(`Removing zero-length connector ${c.id}`);
        return false;
    }

    return true;
});
```

### Fix 2: Nudge Max Boundary Coordinates

```javascript
const pageWidth = CONFIG.floorPlan.canvasWidth || 6000;
const pageHeight = CONFIG.floorPlan.canvasHeight || 5000;
const BOUNDARY_OFFSET = 0.01; // Tiny offset to move inside boundary

connectors = connectors.map(c => {
    const { wrapper, ...rest } = c; // Strip wrapper property

    // Nudge max boundary coordinates slightly inside
    if (rest.sourcePoint) {
        if (rest.sourcePoint.x >= pageWidth) rest.sourcePoint.x = pageWidth - BOUNDARY_OFFSET;
        if (rest.sourcePoint.y >= pageHeight) rest.sourcePoint.y = pageHeight - BOUNDARY_OFFSET;
    }
    if (rest.targetPoint) {
        if (rest.targetPoint.x >= pageWidth) rest.targetPoint.x = pageWidth - BOUNDARY_OFFSET;
        if (rest.targetPoint.y >= pageHeight) rest.targetPoint.y = pageHeight - BOUNDARY_OFFSET;
    }

    return rest;
});
```

**Why strip `wrapper`**: The wrapper contains pre-calculated positioning. SyncFusion may use
`wrapper.offsetX/offsetY` (the connector's center point) to check boundaries. Stripping it
forces SyncFusion to recalculate from sourcePoint/targetPoint.

## Verification

1. Add logging before/after diagram initialization to compare connector counts
2. Reload the page with the fixes in place
3. Verify connectors at all four edges (top, right, bottom, left) load correctly
4. Create new connectors at boundaries and verify they save/load properly

## Key Insights

1. **Historical Data Corruption**: When older code has bugs that corrupt saved data, fix on
   load, not save. The corrupted data already exists—filter invalid data during load.

2. **SyncFusion Boundary Quirk**: Min boundaries (0) work, max boundaries (pageWidth/Height)
   silently fail. Runtime `diagram.add()` works, but initialization from JSON fails.

3. **Wrapper Property Interference**: The `wrapper` property in saved diagram JSON can cause
   positioning issues. Strip it during load to let SyncFusion recalculate.

## Notes

- This pattern applies to any persistent diagram data, not just floor plans
- Consider adding a migration to clean corrupted data from the database
- The same pattern can be applied to nodes if they exhibit similar corruption
- Always fix the underlying coordinate bug in addition to adding load-time fixes
- Test all four edges: left (x=0), top (y=0), right (x=max), bottom (y=max)

## References

- [SyncFusion EJ2 Diagram Connectors Documentation](https://ej2.syncfusion.com/documentation/diagram/connectors/connectors)
- [SyncFusion Connector API](https://ej2.syncfusion.com/documentation/api/diagram/connector)
- [SyncFusion Boundary Constraints](https://ej2.syncfusion.com/documentation/diagram/page-settings/#boundary-constraints)