Deleted elements persist in PNG exports

[jjkavalam]

Description

When deleting elements from an Excalidraw diagram and saving, the deleted elements sometimes still appear in the exported PNG file.

Steps to Reproduce

1. Open or create a .excalidraw.png file in VS Code
2. Add multiple elements to the diagram (rectangles, circles, etc.)
3. Save the file (Cmd+S / Ctrl+S)
4. Select and delete one or more elements using Delete or Backspace key
5. Save the file again
6. Open the PNG file in an image viewer

Expected Behavior

The PNG file should only show the remaining (non-deleted) elements.

Actual Behavior

The PNG file sometimes contains the deleted elements, making them appear as if they were never deleted.

Environment

• VS Code version: 1.104.1
• Extension version: 3.9.0
• OS: macOS (arm64)

Additional Notes

During investigation, it appears this may be related to how the core Excalidraw library handles element deletion. Elements seem to be marked as isDeleted: true rather than being completely removed from the elements array, but the PNG export process may not be filtering these deleted elements properly.

The issue is intermittent, suggesting it might be timing-related or dependent on specific user interaction patterns.

Potential Fix

A workaround that appears to resolve this issue is filtering out deleted elements before they are processed for export. In webview/src/App.tsx, the onChange handler can be modified to filter elements:

onChange={(elements, appState, files) =>
  props.onChange(
    elements.filter((el: any) => !el.isDeleted),
    { ...appState, ...imageParams, exportEmbedScene: true },
    files
  )
}

This change ensures that elements marked as deleted by Excalidraw are excluded from the export process, preventing them from appearing in the generated PNG files. Initial testing suggests this fixes the issue completely.

[NBodenmannSFA]

Probably related to #167