Drag n drop
Fixes #1417
Changes:
- Added Drap and Drop functionality to transfer files among folders in the Sidebar
- Also supports transferring one folder into another folder
Ui Changes:
- Used
HTML Drag and Drop API - Could not use
React DnDas initially planned because it does not support class components (FileNode.jsx)
Redux Changes:
- Made a new reducer
changeParent - Added actions and constants to facilitate said reducer
- Made it so that the changes done in the UI reflects in the
file state
Saving the sketch reflects the state changes in the database as well.
https://github.com/processing/p5.js-web-editor/assets/135870090/e25e6779-a484-457e-a00a-d25bb924bdd1
I have verified that this pull request:
- [x] has no linting errors (
npm run lint) - [x] has no test errors (
npm run test) - [x] is from a uniquely-named feature branch and is up to date with the
developbranch. - [x] is descriptively named and links to an issue number, i.e.
Fixes #123
- Could not use
React DnDas initially planned because it does not support class components (FileNode.jsx)
This is a bummer and I wonder if we want to convert the FileNode first? There’s definitely an open PR for that, though I recall that it had a minor issue with the dropdown.
I have adjustments that I would want to make here but I’m on vacation this weekend so I’ll get back to you with more details later.
I wonder if we want to convert the FileNode first?
That is definitely the way to go. This way we can take advantage of all the little developer experience features of react dnd as well. This will also fix the issue you talked about in the commit comment as well, since all the styling will be handled differently in react-dnd. It'll also make it eaiser for everyone if in the future the dnd implementation has to be improved upon or modified.
And I'd be down to work on this feature with react-dnd and other modifications after the FileNode has been updated. Till then enjoy your vacation :)
@lindapaiste can i take the issue of converting to functional components(covert to FileNode)
- Could not use
React DnDas initially planned because it does not support class components (FileNode.jsx)This is a bummer and I wonder if we want to convert the FileNode first? There’s definitely an open PR for that, though I recall that it had a minor issue with the dropdown.
I have adjustments that I would want to make here but I’m on vacation this weekend so I’ll get back to you with more details later.
Since it's been a while since this PR has been last active, I'm going to close this for now. I'm sorry that we couldn't get this in, but please feel free to revisit this issue!