Skip to content

Implement Surgical DOM Move for Component Columns in Drag Proxy #8977

@tobiu

Description

@tobiu

For component-based columns (specifically heavy ones like Sparkline using OffscreenCanvas), cloning instances for the Drag Proxy is resource-intensive and complex.

Optimization Strategy: Surgical Content Move
Instead of creating new component instances, we will "borrow" the DOM content from the grid cells and temporarily move it into the drag proxy using Neo.applyDeltas (bypassing VDOM logic).

The DOM Structure:

<!-- Grid Cell Container (Stays in Grid) -->
<div id="neo-grid-body-1__row-0__activity" ... class="neo-grid-cell" ...>
    <!-- Content Wrapper (Moves to Proxy) -->
    <div id="neo-sparkline-1__wrapper" class="neo-sparkline-wrapper">
        <canvas id="neo-sparkline-1" ...></canvas>
    </div>
</div>

Implementation Plan:

  1. Drag Start (createDragProxy):

    • Identify component-based cells.
    • Find the ID of the first child (Content Wrapper) of the cell.
    • Use Neo.applyDeltas to moveNode this Content Wrapper into the corresponding cell container within the Drag Proxy.
    • Result: The Grid Cell becomes empty (transparent placeholder), and the Proxy displays the live component (preserving state/canvas context).
  2. During Drag:

    • Grid updates (e.g. column reordering animations) target the Cell Container. Since this container remains in the grid DOM, animations work normally.
    • Component updates (e.g. data changes) target the Content Wrapper or Canvas. Since these IDs exist (in the proxy), updates still apply correctly.
  3. Drag End (onDrop):

    • Use Neo.applyDeltas to moveNode the Content Wrapper back to its original Cell Container (neo-grid-body-1__row-0__activity).
    • Ensure correct order if needed (appendChild).

Benefits:

  • Zero instantiation cost: No new contexts, no worker overhead.
  • Perfect Fidelity: Live canvas state is preserved.
  • Robustness: Decouples layout (Grid Cell) from content (Component), preventing VDOM interference with drag animations.

Metadata

Metadata

Assignees

Labels

aienhancementNew feature or requestperformancePerformance improvements and optimizations

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions