feat: add drag-drop

[joelcoxokc]

How to use.

chart = new d3.OrgChart()
     .container(".chart-container")
     .enableDragDrop(() => true) // enable drag and drop on the chart
     .onDragFilter((node, dragEvent) => true) // whether or not to allow the drag to start
     .onDragStart((node, dragEvent) => /* do something to the drag node*/)
     .onDrag((node, dragEvent) => /* do something to the drag node*/)
     .onDrop((dragNode, targetNode, dragEvent) => /* do with the dragNode and targetNode*/)
     .onDragTarget((dragNode, targetNode, dragEvent) => {
        /* Do something with the dragging node and the target node on node-enter drop range */
     }),
     .outDragTarget((dragNode, targetNode, dragEvent) => {
        /* Do something with the dragging node and the target node on node-exit drop range */
     }),
     .nodeEnter(function() {
        d3.select(this).classed('draggable', true); // this must be set to allow the node to be draggable
        d3.select(this).classed('droppable', true); // this must be set to allow the node to be droppable
     })
     .draggingClass(() => 'dragging') // class name for the node being dragged
     .draggableClass(() => 'draggable') // class name for the node if it is draggable
     .droppableClass(() => 'droppable') // class name for the node if it is droppable
     .data(dataFlattened)

Potential improvements:

• Don't depend on classes for draggable and droppable
• Don't use callbacks fro draggingClass, draggableClass, droppableClass
• Expose overrides to the drag and drop handlers

[joelcoxokc]

@bumbeishvili Feel free to make any changes necessary

[cthacker-udel]

Trying to dynamically set the enableDragDrop via React state is running into some weird bugs, would love your opinion on the cause. Going to investigate myself, will post if I find anything.

Like for example I have the chart constructed in a massive useEffect like so (just to trim down the re-renders):

React.useEffect(() => {
chartReference.current = new OrgChart.... all the  other code
}, [])

Then I have one for when data is fetched:

React.useEffect(() => {
 chartReference.current.data(data).render().fit();
}, [data])

Then I have one for enabling drag and drop:

React.useEffect(() => {
   chartReference.current.enableDragAndDrop(() => enabledDragAndDrop).render();
}, [enabledDragAndDrop])

But for some reason it isn't applying it, and the nodes still aren't draggable or droppable, I can't find a way to get it to dynamically set, besides in the vanilla js example, which uses a bit different approach then this PR (sets classes and such).

Something weird too, it seems to work when hardcoded to true when I change the second useEffect to this:

React.useEffect(() => {
 chartReference.current.data(data).enableDragDrop(() => true).render().fit();
}, [data])

but fails when I do:

React.useEffect(() => {
 chartReference.current.data(data).render().enableDragDrop(() => true).fit();
}, [data])

I understand it's been A WHILE since you worked on this thing, but just wanted to see if you still had this library in your radar.