-
-
Notifications
You must be signed in to change notification settings - Fork 202
Implement Surgical DOM Move for Component Columns in Drag Proxy #8977
Copy link
Copy link
Closed
Labels
aienhancementNew feature or requestNew feature or requestperformancePerformance improvements and optimizationsPerformance improvements and optimizations
Description
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:
-
Drag Start (
createDragProxy):- Identify component-based cells.
- Find the ID of the first child (Content Wrapper) of the cell.
- Use
Neo.applyDeltastomoveNodethis 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).
-
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.
-
Drag End (
onDrop):- Use
Neo.applyDeltastomoveNodethe Content Wrapper back to its original Cell Container (neo-grid-body-1__row-0__activity). - Ensure correct order if needed (appendChild).
- Use
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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
aienhancementNew feature or requestNew feature or requestperformancePerformance improvements and optimizationsPerformance improvements and optimizations