We are introducing Neo.draggable.DragProxyContainer to enable dragging "live" components (like OffscreenCanvas based charts) without losing their state or worker connection.
Context:
Currently, DragZone creates a DragProxyComponent which is populated with a clone of the dragged element's VDOM. This works well for static content but fails for components that rely on specific DOM node instances or worker connections (e.g., Canvas), as the clone is a new, disconnected DOM element.
The Solution:
New Class: Neo.draggable.DragProxyContainer
- Extends
Neo.container.Base.
- Reuses the
.neo-dragproxy styling from DragProxyComponent via manual theme injection (overriding afterSetWindowId).
- Designed to host the actual component instance during the drag.
Updated DragZone:
createDragProxy now supports a "live move" mode. If the dragProxyConfig.module is set to DragProxyContainer:
- The dragged component is moved from its source container into the proxy container.
- A hidden placeholder component (
Neo.component.Base) is inserted into the source container to preserve the visual gap and layout flow.
dragEnd restores the component to its original location (replacing the placeholder).
Updated SortZone:
- Updated
onDragStart to be aware of the placeholder swap. It now sorts the placeholder (the gap) instead of the moved component, ensuring the sorting logic works correctly with the background layout.
Affected Files:
src/draggable/DragProxyContainer.mjs (New)
src/draggable/DragZone.mjs
src/draggable/container/SortZone.mjs
Next Steps:
This implementation provides the architectural capability. A follow-up task is required to integrate this into the AgentOS app (specifically for the Swarm View / Blackboard) to verify that the OffscreenCanvas connection persists during the drag.
We are introducing
Neo.draggable.DragProxyContainerto enable dragging "live" components (likeOffscreenCanvasbased charts) without losing their state or worker connection.Context: Currently,
DragZonecreates aDragProxyComponentwhich is populated with a clone of the dragged element's VDOM. This works well for static content but fails for components that rely on specific DOM node instances or worker connections (e.g.,Canvas), as the clone is a new, disconnected DOM element.The Solution:
New Class:
Neo.draggable.DragProxyContainerNeo.container.Base..neo-dragproxystyling fromDragProxyComponentvia manual theme injection (overridingafterSetWindowId).Updated
DragZone:createDragProxynow supports a "live move" mode. If thedragProxyConfig.moduleis set toDragProxyContainer:Neo.component.Base) is inserted into the source container to preserve the visual gap and layout flow.dragEndrestores the component to its original location (replacing the placeholder).Updated
SortZone:onDragStartto be aware of the placeholder swap. It now sorts the placeholder (the gap) instead of the moved component, ensuring the sorting logic works correctly with the background layout.Affected Files:
src/draggable/DragProxyContainer.mjs(New)src/draggable/DragZone.mjssrc/draggable/container/SortZone.mjsNext Steps: This implementation provides the architectural capability. A follow-up task is required to integrate this into the AgentOS app (specifically for the Swarm View / Blackboard) to verify that the
OffscreenCanvasconnection persists during the drag.