Create a VSCode Demo

[jameskerr]

Add the following methods to the tree api.

get dragNode() {
return this.get(this.state.nodes.drag.id);
}

get dragDestinationParent() {
return this.get(this.state.nodes.drag.destinationParentId);
}

get dragDestinationIndex() {
return this.state.nodes.drag.destinationIndex;
}

The demo is not finished yet, but these three new methods should unblock people from doing VSCode style dragging and dropping.

[jameskerr]

Ok, I've got it working with this branch. I now need to think about the names of these methods, and what to make public API.

I am considering exposing what will be the new parent for the dragging node on the tree. This would give users more flexibility for when to highlight nodes and when not to.

Maybe these methods would help:

tree.dragDestinationParent => node
tree.dragDestinationIndex => number
tree.dragNode => node

Then the highlight logic in the node renderer would be:

const dest = tree.dragDestinationParent
if (
  (dest.ancestorOf(node) && dest.isNot(tree.dragNode.parent)
) {
  // add className to indicate highlighting
}

Demo Working Now In this Branch

CleanShot.2023-09-01.at.09.41.05.mp4

[GeorgeGkas]

Hello @jameskerr,

I've been closely monitoring this PR for the past couple of weeks and would like to kindly inquire about its current status. The feature it introduces is truly fantastic! If this PR has been deprioritised, please don't hesitate to reach out if you require any external assistance to expedite its progress.

[jameskerr]

@GeorgeGkas thank you for reaching out. Other things came up, but now that you've commented here, I can push this over the finish line soon.

[haines]

Hi @jameskerr, we're using react-arborist for exactly this purpose, so this looks really useful. Thanks!

One VS Code behaviour we'd like to mimic is that for leaf nodes, ⌘+↓ and double-clicking should open the file and focus the editor.

We have the onActivate callback to change the file displayed in the editor, but we can't easily tell whether it was triggered by one of the the events we're interested in or by e.g. Space or a single-click.

Do you think react-arborist could potentially support this use case? Perhaps this would be possible by adding an optional second argument to the activate method and onActivate callback?

[jameskerr]

@haines yes we should be able to support that with a custom keyboard shortcut solution. Everyone want's different keyboard shortcuts for the tree, so there is a plan to make these configurable.

[mycvvn]

Absolutely, this PR is truly outstanding and essential for both myself and many others. I personally struggled with this issue for a few days until I came across this PR. The demo video is fantastic, and I'm looking forward to its completion.

My project:

I'm really looking forward to this PR being completed. Because my FileManager section is missing just that :(.

Wishing you the very best!

Update: You made my day, friend <3

[jameskerr]

@haines
@GeorgeGkas
@mycvvn

Hey you all, give this version a try and tell me if there are any problems.

https://www.npmjs.com/package/react-arborist/v/3.3.0-rc.1

[GeorgeGkas]

Thank you so much for this @jameskerr . Will try and report back soon.

[GeorgeGkas]

Hello @jameskerr. I have reviewed the introduced functionality, and it seems good to me. However, there is one more requirement to be met. Currently there is no way to find out if an element completed the drop. willReceiveDrop works only on hover. The issue is that in one of my projects I need to listen for drop completion events. I propose to add a drop handler that will accept two parameters: dragElem, dropElem. The interface of the handler will look something like the following:

type DropHandler<T> = (dragElem: NodeApi<T>, dropElem: NodeApi<T>) => void

Then we can register the handler on mouseup events only if willReceiveDrop is true, or something similar. Let me know if I need to create a new ticket to track this.

[haines]

This works well for us, although it was slightly awkward to detect the case when the drag destination is the root.

We ended up with this as our function to determine if the node should be highlighted:

function highlightDragDestination(
  tree: TreeApi<NodeData>,
  node: NodeApi<NodeData>,
): boolean {
  if (
    tree.dragDestinationParent === null &&
    tree.dragDestinationIndex === null
  ) {
    return false;
  }

  const parent = tree.dragDestinationParent ?? tree.root;

  return (
    parent.isAncestorOf(node) &&
    tree.dragNodes.some((dragNode) => dragNode.parent?.id !== parent.id)
  );
}```