LearnNewsExamplesServices
Frontmatter
id8044
title[Draggable] Implement DragProxyContainer for live component dragging
stateClosed
labels
enhancementai
assigneestobiu
createdAtDec 7, 2025, 1:12 PM
updatedAtDec 7, 2025, 1:23 PM
githubUrlhttps://github.com/neomjs/neo/issues/8044
authortobiu
commentsCount0
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtDec 7, 2025, 1:23 PM

[Draggable] Implement DragProxyContainer for live component dragging

Closed v11.17.0 enhancementai
tobiu
tobiu commented on Dec 7, 2025, 1:12 PM

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:

  1. 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.
  2. 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).
  3. 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.

tobiu added the enhancement label on Dec 7, 2025, 1:12 PM
tobiu added the ai label on Dec 7, 2025, 1:12 PM
tobiu assigned to @tobiu on Dec 7, 2025, 1:12 PM
tobiu referenced in commit 497c8e7 - "feat(Draggable): Implement DragProxyContainer for live component dragging #8044 on Dec 7, 2025, 1:14 PM
tobiu closed this issue on Dec 7, 2025, 1:23 PM