beautiful-skill-tree
beautiful-skill-tree copied to clipboard
andrico1234
Drag 'n' Drop Trees
Working on a drag and drop editor in the skilltree project. I finished being able to drag and drop skilltrees. Now trying to do the same for the skills inside skilltrees.
I am running into an issue with the react-beautiful-dnd library. In order to drag and drop skills, I need to make the node both a droppable target and a draggable. I can only set the tooltip content as a React component, but setting this to be droppable & draggable doesn't work. I guess because the component is hidden unless you hover over it. I really don't want the tooltip to be draggable/droppable anyways. I need the skill itself.
"Invariant failed: Draggable[id: 8dc5d4f7-e46b-4405-a21b-e5584ed5beff]: Unable to find drag handle"
Can there be a way for me to set the (always) visible node contents (now showing the title) to a custom React component? Any hacks you can suggest? Then around the node title, I can wrap it in a droppable/draggable and try if it works.
One way to handle this is by jumping into the BST code and finding the uses of Tippy the package I use to handle the popups. One example is here
there is a setting where you can keep it visible at all times.
As a side note: if I ever get around to doing a refactor of this package, one thing I'd like to do is split up the skill tree logic with the UI. That we way we'd be able to pass easily pass through custom UI.
A plugin system similar to that of DX's React Scheduler is how I invision it
Hi thanks for comments Andrico, unfortunately showing the pop-ups didn't work for me. I decided to go with a package 'react-sortable-tree' to handle editing (and re-arranging) the skills in the skilltree editor. I was able to insert a custom React component into each skill, so I could make it a drop target and also insert buttons to edit and delete. If you would refactor the package at some point, I might be able to also redo the editor so it looks more like the final skilltree. For the moment, it's going to look more or less like this, where you can rearrange the skilltrees/skills and drop stuff from the left menu.
