Goal
Add drag and drop support to the tree editor. Drag and drop should allow to move tree nodes to other suitable positions in the tree.
Initial investigation
There is no Theia API for drag and drop in tree widgets. This means D&D needs to be implemented from scratch using the HTML5 API or any react dnd framework. For instance, Theia's FileTreeWidget uses native HTML5 D&D.
With this come all kinds of cases that we'd need to handle:
Tree nodes can can be draggables, containers for dropped nodes and siblings of dropped nodes at the same time
How to differentiate whether we want to drop a node A next to a node B (sibling) or inside B (container) if both is possible?
How to handle a target container having two properties which can take the dropped node? Open dialog?
Need to determine whether a node can be dropped into a target node -> With the model service we shoud have all required information to determine this.
How to handle re-ordering nodes in a parent if there are multiple properties containing children?
Need to implement the actual move of the node and its data in the tree or tree model. This is not provided by Theia's default TreeWidget or TreeModel. The file tree implements this in FileTreeModel.
In conclusion, implementing full fledged drag and drop for moving nodes (and the associated data) in the tree, is not a trivial endeavor. My rough estimation is this will take around 3 to 5 days to implement.
If using react-dnd, first starting points for an implementation can be gotten from https://github.com/eclipsesource/jsonforms-react-material-tree-renderer/blob/master/src/tree/ObjectListItem.tsx.
However, this likely still needs significant adaption to be properly integrated into Theia and fix potential short comings of the past implementation.
Goal
Add drag and drop support to the tree editor. Drag and drop should allow to move tree nodes to other suitable positions in the tree.
Initial investigation
There is no Theia API for drag and drop in tree widgets. This means D&D needs to be implemented from scratch using the HTML5 API or any react dnd framework. For instance, Theia's FileTreeWidget uses native HTML5 D&D.
With this come all kinds of cases that we'd need to handle:
Tree nodes can can be draggables, containers for dropped nodes and siblings of dropped nodes at the same time
How to differentiate whether we want to drop a node A next to a node B (sibling) or inside B (container) if both is possible?
How to handle a target container having two properties which can take the dropped node? Open dialog?
Need to determine whether a node can be dropped into a target node -> With the model service we shoud have all required information to determine this.
How to handle re-ordering nodes in a parent if there are multiple properties containing children?
Need to implement the actual move of the node and its data in the tree or tree model. This is not provided by Theia's default TreeWidget or TreeModel. The file tree implements this in FileTreeModel.
In conclusion, implementing full fledged drag and drop for moving nodes (and the associated data) in the tree, is not a trivial endeavor. My rough estimation is this will take around 3 to 5 days to implement.
If using react-dnd, first starting points for an implementation can be gotten from https://github.com/eclipsesource/jsonforms-react-material-tree-renderer/blob/master/src/tree/ObjectListItem.tsx.
However, this likely still needs significant adaption to be properly integrated into Theia and fix potential short comings of the past implementation.