Oni: Drag and Drop Files and Folders - Explorer

[akinsho]

@bryphe I think it would be a very handy/ the norm in most editors to be able to resize a sidebar view by clicking and dragging, I've had a look at what is available and there are a few React components which provide this functionality.

An example is react-rnd, re-resizable etc. which provide wrapper components with this functionality looking at react-rnd it doesn't look too difficult to implement this and potentially the values of the explorer can also be persisted when the editor is re-opened.

As a Bonus Feature there are also libraries for creating draggeable components, which potentially could be used to allow interactions like moving folders 😮 , not sure how much more complicated that functionality might be but can look into the resizing and then dragging for bonus points if reasonably straight forward

EDIT: PS I'm __V. likely__ underestimating the complexity of this task 🤣

[akinsho]

Having started to have a little look at this seems clear now that these are definitely two non-trivial 😆 features here

• Adding drag and drop functionality to the explorer by which I explicitly mean moving file items into different folders. For this i've found the amazing react-dnd library which is perfect and really nice
• Second is the resizing of the splits for which I've looked at the above. This one seems a lot harder to implement given the styles and layout of Oni

[bryphe]

Adding drag and drop functionality to the explorer by which I explicitly mean moving file items into different folders. For this i've found the amazing react-dnd library which is perfect and really nice

This would be awesome! 👍 We'd really have the best of both GUI and Vim worlds!

Second is the resizing of the splits for which I've looked at the above. This one seems a lot harder to imlement given the styles and layout of Oni

Yes, I think we'd want to split this up into two tasks:

• API - Add an API on the WindowManager for resizing splits. I'm thinking that the split method could remove some sort of WindowHandle that lets you specify a size, like:

const splitHandle = windowManager.split("horizontal", newEditor)
splitHandle.setSize(250)

(It would also be a natural place to show and hide, which would be great for toggling sidebars / terminals / etc).

• Drag-to-resize UI gesture - once we have the API set, we could hook up a drag handle somewhere. #1405 adds a <div className="split-spacer"> next to each window, so that would be a natural place to add it - we could turn that into something like a ResizeHandle. It's close to the WindowManager so it seems like we could plumb through the API call from above in a fairly straightforward way.

[akinsho]

Yes definitely think I overshot the mark trying to bundle these together especially given my proposed implementation of the resizing is much more naive that what you've laid out, I think it would better to have this issue to track the file and folder dragging and dropping since that task is quite well contained and another to tackle an addition to the WindowManager which I can open if you'd like them tracked separately .

[akinsho]

Still working on this have drag events working but not drop events which aren't registering 😕 . Side note to self or anyone else vscode just implemented multi-select which i'm very envious of, might be interesting to see if react-dnd supports this 😮

[badosu]

Thanks @Akin909, seems like the File Explorer is finally maturing!