search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.38k stars 1.32k forks source link

Drag and Drop Files into Folder #1417

Open alexapostolu opened 4 years ago

alexapostolu commented 4 years ago

Nature of issue?

New feature details:

So I noticed how when you create a folder in p5.js, you can't drag and drop existing files into that folder. Instead you have to manually import files into that specific folder. So I'm wondering, could it be a possibility that you could drag and drop existing files into a folder? Thanks

welcome[bot] commented 4 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

catarak commented 4 years ago

Thanks for the feature suggestion! Related to #704. This would be super, super useful. Another related suggestion is allowing file renaming with slashes (#765). All slightly different features though!

I think this is a great idea. I also wonder how this would work, from a UI/UX perspective, to also support #375.

SundeepChand commented 4 years ago

@catarak I would like to look give it a try. Can you please tell me the files, that I need to look at to get started?

catarak commented 4 years ago

@SundeepChand sure! I would take a look at FileUploader.jsx and also Sidebar.jsx.

ron-debajyoti commented 3 years ago

@SundeepChand if u aren't working on it I would like to give it a try.

SundeepChand commented 3 years ago

Sure @ron-debajyoti, you can work on this.

ron-debajyoti commented 3 years ago

@catarak Hi ! Sorry for being late, I was having some difficulties going through the code. A feature suggestion from me would be a proper documentation for developers (esp for newbies like me), and perhaps using Docusaurus.

Regarding the drag and drop utility in the Sketch files area of the web editor, I think it's becoming a bit complicated because the current implementation of adding new files under a folder relies on using buttons that have the hooks to the state update for example here. So it becomes easy for dropzone to complete all the callbacks required (like it's used in FileUploader like here. If we extend the dropzone to sketch area for the drag and drop feature, then maintaining the parentId without using the hooks is a bit difficult to implement. Also, in case we have multiple empty folders, maintaining the parent folder for a bunch of files uploaded is difficult too..

@catarak I would appreciate your views and suggestions regarding this problem.

ron-debajyoti commented 3 years ago

@catarak I did a temporary fix to the issue for now. I added a dropzone to the bottom of Sketch Files list and added the feature of directly uploading one or multiple files to the project. If we want to add multiple files to a particular folder to the project, then selecting the folder first and then uploading the files in the dropzone automatically uploads the files in the correct place.

Although this fix technically doesn't allow us to rearrange the files within the Sketch Files list, we don't have to manually create and upload files to the project. Please provide some feedback regarding this.

I'll try to add a PR and try to solve related issues like #765 in this PR itself.

Demo video:

https://user-images.githubusercontent.com/22571664/109852359-b3d70680-7c7a-11eb-913a-544686a383e5.mp4

mhsh312 commented 8 months ago

The way I understand this is that the currently the Sidebar.jsx component has a bunch of FileNode.jsx components that reflect the current file-and-folder hierarchy of the project. To implement this feature, we need to make the FileNode.jsx components draggable and then reflect the changes to the project instance in the database.

For the drag and drop, React DnD seems like the way to go.

I would like to work on this issue so please assign it to me if it is still active. @lindapaiste @raclim

lindapaiste commented 8 months ago

The way I understand this is that the currently the Sidebar.jsx component has a bunch of FileNode.jsx components that reflect the current file-and-folder hierarchy of the project. To implement this feature, we need to make the FileNode.jsx components draggable and then reflect the changes to the project instance in the database.

For the drag and drop, React DnD seems like the way to go.

I would like to work on this issue so please assign it to me if it is still active. @lindapaiste @raclim

Yes that sounds good. There is the UI portion, which is handling the drag action and using it to initiate moving the file. Then there's the Redux portion where we need to move the file to have a different parent. We actually don't have support for that right now. I can help you with the Redux part because the files reducer is a mess. You should focus on the UI, and triggering the right action at the right time.

mhsh312 commented 8 months ago

There is the UI portion, which is handling the drag action and using it to initiate moving the file.

Alright, I will start creating the UI using React DnD.

I can help you with the Redux part because the files reducer is a mess.

After I'm done with the UI, I'll look into the files reducer and see if I can work on it. If I can't, I will submit the UI section in a PR and leave Redux to you.