-
Notifications
You must be signed in to change notification settings - Fork 764
Tree View Drag and Drop (design spec) #1821
Comments
Great work! Any ideas for a milestone? |
@adestis-ds |
See comment in #1825 |
See comment here |
Any update regarding the new roadmap for version 1.0? I have checked the milestones at https://github.com/vmware/clarity/milestones but could not find this issue there. Would be nice if you could provide the new release timeframe. |
This is a really useful feature for us as well. Will you schedule this in near future? |
Any updates on this feature? we could definitely use this in a few of our NSX projects. |
We have the DnD primitives in our project, but haven't prioritized the work currently to enable this specific feature. When asking for the feature, it helps to include more details about your use cases for us to understand priority and impact. |
Hi @gnomeontherun, @mathisscott we're planning to use the drag and drop in one of our projects - therefore we'll implement the component as described in the design spec here, and would look forward to contribute! Do you have some advice for us prior to start development? |
Hey @d-m-s glad to hear it and if you're interested in contributing we should align on a few things before you get too far. We also need to double check the design aligns with our current understanding since its almost 2 years old now. @Shijir is the mastermind behind our DnD utilities, and I have many thoughts and questions before we'd dig into a technical solution. Things we need to review
Overall, this is likely a huge implementation to build to get it fully into Clarity. We need to ensure it is sufficiently tested, generalized, and bulletproof, which might go above and beyond what your application is doing. If you're able/willing to dig into this with us, we can talk about how to address some of the questions above to give us direction. Ultimately, the best first step in my mind is to setup an isolated demo (using Stackblitz probably) that approximates some of the basics. That helps to identify some of the foundational pieces and direction we want to go before major investment. If you can help in this first step, then we can see where to go next? |
Hi @gnomeontherun, thanks for your quick answer - we already started and have a first demo at stackblitz. Stackblitz Demo Feature set: 1st implementation in scope:
not in focus:
For the
Contribution |
One thought about the Contribution:
As mentioned we're really willed to deep dive into contribution here! |
Thanks for the demo @d-m-s, and we're going to discuss tomorrow. The complexity is quite high, and I want to ensure we can all be successful to see it through. We'll need to think about how to break it down into smaller chunks as well, and let me get back to you shortly. |
@d-m-s Alright, so here is what we can do to get started.
We're stretched thin and will be able to act in an advisory and review capacity. We can adjust as we go, but this seems like the best path forward and gives us a chance. Let me know and we can proceed! |
@gracesnoh is this on the roadmap? Your design looks AMAZING!! |
@robntracts |
@derkoe can you give us a brief status-reminder, where we currently standing/left with the dnd-topic? |
We have just used the Code looks like this: <clr-tree>
<div
clrDroppable
(clrDrop)="onDrop($event.dragDataTransfer)"
[ngClass]="currentDraggedItem !== null && currentDraggedItem.parentId ? 'not-visible' : ''"
></div>
<clr-tree-node
*clrRecursiveFor="let item of sortingItem.items; getChildren: getItemChildren"
[clrDraggable]="item"
tabIndex="1"
[id]="item.id"
[(clrExpanded)]="expandedStates[item.id]"
(clrDragStart)="dragStart(item)"
(clrDragEnd)="dragEnd()"
>
<div class="treenode-inner">
<clr-icon class="treenode-icon" [attr.shape]="getIcon(item)"></clr-icon>
<div class="treenode-text">{{ item.description }}</div>
</div>
<div
[id]="item.id"
tabIndex="-1"
[ngClass]="
currentDraggedItem === null ||
currentDraggedItem.id === item.id ||
(currentDraggedItem.parentId !== item.parentId && currentDraggedItem.parentId !== item.id)
? 'not-visible'
: ''
"
clrDroppable
(clrDrop)="onDrop($event.dragDataTransfer, item)"
></div>
</clr-tree-node>
</clr-tree> Here's the style (some stuff is hardcoded there, but this works for us): clr-tree .droppable {
position: relative;
height: 10px;
display: block;
flex-grow: 1;
flex-basis: 100%;
margin-top: -5px;
pointer-events: none;
&.draggable-match {
border: none;
display: inherit;
}
&.draggable-over {
border: none;
}
&.draggable-over:before {
content: '';
position: absolute;
width: 6px;
height: 6px;
margin-top: 2px;
background: #8939ad;
border-radius: 50%;
}
&.draggable-over:after {
content: '';
position: absolute;
border-bottom: 2px #8939ad solid;
height: 100%;
width: 100%;
margin-top: 2px;
transform: translateY(-50%);
}
}
clr-tree .clr-treenode-content {
.treenode-inner {
display: flex;
flex-direction: row;
align-items: center;
}
}
clr-tree .draggable-ghost {
background: white;
border: 1px solid #bbbbbb;
border-left: 2px solid #8939ad;
border-radius: 3px 0 0 3px;
box-shadow: 0 3px 4px rgba(116, 116, 116, 0.3);
max-width: 500px;
} |
Hi, I'd like to thank Clarity Team for their work. I was following this issue for a very long time, more than 2 years. This design is amazing. I don't want to raise expectations of other followers but I tinkered with implementing this design. Code is here: https://github.com/myukselen/clarity/tree/development2 . It is an update of my first attempt from April 2020. Sample declarative and recursive eager tree demos live here:
I first coded keyboard interaction and then added mouse interaction. |
@myukselen dragging not working properly from mobile chrome, but love to see your implementation! (I'm not from clarity team, but also subscribe this issue few years ago) |
The feature request here has been captured into our list and we’re going to take it into consideration as we develop Clarity Core capabilities. In an effort to clean up our backlog and focus our attention, I’m going to close this as captured in our feature requests. Please follow our development and releases to see when we release relevant components to make this possible. Future feature requests can be made in our GitHub Discussions. |
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary. |
Description
Items in tree view can be rearranged using drag and drop
Usage
To reorder and rearrange nodes in a tree view, resulting in a change in arrangement or nesting
Behavior
When a tree node is dragged, a “copy” of the tree node will be dragged with the cursor. The original node will be greyed out, indicating its previous position.
A tree node is draggable from anywhere inside of its container. If the tree node can be expanded/collapsed, selected or checked, those elements remain clickable but are also draggable.
There are two types of drop targets: position and parent targets. When the midpoint of the dragged node enters the bottom or top half of a node, a position drop target will be triggered in between. However, when the midpoint enters the middle 18px of a parent node, a parent drop target will be triggered.
result is a change in the order of nodes.
The result is a node is nested in another node.
Nesting nodes
When a tree node is dropped inside of a parent node, the node is automatically the last child node inside of the parent node.
When users hover a dragged node over a closed parent node for at least 2 seconds, the parent node will open automatically to reveal its child nodes. This allows the user to specify the position of the dragged node among the child nodes.
If lazy loading is enabled on a tree node, the loading indicator will appear when users hover a dragged node over the lazy loading parent node. The same behavior will occur for asynchronous calls. When complete, the child nodes will expand or update to reflect the additional child node.
Heavily nested tree example
If there are multiple levels of nesting in a tree view, dragging a node to different node levels can be accomplished by dragging left or right on a position target. This will trigger a horizontal shift of the node length to denote which node level the user wishes to drop the dragged node into.
Checkbox tree example
In a checkbox tree, the checkbox will drag along with the tree node. The parent node changes according to the child node. For example, if “Cover Letter.doc” (a checked node) is dropped into “Images” (an unchecked parent node), “Images” check would change to indeterminate to reflect mixed checked and unchecked child nodes.
Scrolling
When the tree view is scrollable, dragging a tree node over the edge of the window will automatically scroll the tree view to reveal nodes. The farther away from the tree view the object is dragged, the faster it will scroll. Using a scroll wheel will also scroll the view and maintain the drag action.
Invalid drop
When a node is dragged out of range (ex: outside of the tree view), the cursor will become disabled. If a node is dropped out of range or anywhere without a drop target, the dragged node “copy” will return to the node’s original position and fade to opacity: 0.
The original node that was greyed out will change back to opacity: 1 once the dragged node “copy” returns to its original position.
Keyboard accessibility
Users can drag and drop nodes in a tree view using keyboard controls. Tabbing to a node and pressing space bar will activate drag and drop mode.
Users can then use the arrow keys to move the drop target up and down. Pressing space bar again will confirm the action and drop the node in its new position or destination.
Related Issues: #406 and #620
The text was updated successfully, but these errors were encountered: