Add Drag-and-Drop for steps reordering

[IgorWilbert]

Please describe the problem (or idea)

I have not found any open issue covering this. It would be interesting if, with the modules collapsed, one could drag and drop the modules to change the sequence order, instead of having to delete modules and create others for reordering.

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[IgorWilbert]

@jywarren @Divy123 any thoughts on how to do this? If it is not too complicated, I'd like to work on it. Thanks!

[Divy123]

This is actually nice but can be a big implementation . You may work on it but it may take a long time as it is not so easy . Lets see what @jywarren says.

[harshkhandeparkar]

@IgorWilbert maybe for testing you can try up and down arrows? Later on you can use some library(maybe popper.js) for drag animation. But let's wait to hear @jywarren' s thoughts

[harshkhandeparkar]

A few libs if you want:

• draggable by shopify
• sortableJS
• magnetJS

[Divy123]

@HarshKhandeparkar the problem is not of handling the UI, it's more of the inner details like running the sequencer again updating the steps array.

@IgorWilbert I am working on a getSteps() function which can make your work much easier. You can explore the codebase till then for your issue and meanwhile I will implement the getSteps function which will make it easier to implement.

[Divy123]

Also I can tell you the steps that can be followed to get this done if you want to do in the current code-base as well.

[harshkhandeparkar]

@Divy123 those were just some helpful js libs (if needed). I don't think the sequencer part will be very difficult since we can already insert and delete steps. We can first delete the step that is being dragged and insert a new identical step wherever it is being dragged. I don't think getSteps will be necessary.(not sure though)

Actually I think the UI will be the more difficult since we need to know where it is being dragged and also whatever will be dragged will still have the old image, so the step container itself will have to be updated as adding a new step there will create two redundant step containers. Thoughts??

@IgorWilbert if you are comfortable with the sequencer actions then it is awesome. If not then we are ready to help. You can develop the UI and we can help you with the sequencer.

---

Thanks!!

[harshkhandeparkar]

@jywarren

[Divy123]

Well I thought of a different way to do so, using url but this one is also nice way. Also @IgorWilbert we are always ready for your help. Suggestions by @HarshKhandeparkar are good to go but before that I suggest you to go through these files: https://github.com/publiclab/image-sequencer/blob/main/examples/index.html https://github.com/publiclab/image-sequencer/blob/main/examples/demo.js https://github.com/publiclab/image-sequencer/blob/main/examples/lib/defaultHtmlSequencerUi.js https://github.com/publiclab/image-sequencer/blob/main/examples/lib/intermediateHtmlStepUi.js https://github.com/publiclab/image-sequencer/blob/main/examples/lib/defaultHtmlStepUi.js https://github.com/publiclab/image-sequencer/blob/main/src/ImageSequencer.js I think they might help you. Thanks.

[harshkhandeparkar]

@Divy123 the file links do not work for me. Maybe try using [text](link) MD syntax?

[Divy123]

@Divy123 the file links do not work for me. Maybe try using [text](link) MD syntax?

Fixed it.

[IgorWilbert]

Thank you for the support @Divy123 and @HarshKhandeparkar , this is awesome! I will investigate the current code base, thinking especially about how to solve the UI problems, then depending on our timing, your work with the getSteps() function will be very useful @Divy123 , thank you for the suggestion! @HarshKhandeparkar perhaps a trigger to reload the page after every reordering could solve the old image problem?

[harshkhandeparkar]

@IgorWilbert reloading the page will be very inefficient and irritating. Any other idea?

[Divy123]

@IgorWilbert always happy to help! :smile: Feel free to discuss here whatever comes to your thoughts.

[jywarren]

Hi! this is complex but multiple things should make it easier -- like simpler functions such as sequencer.getSteps(), and we might think about using/improving removeStep() and insertStep() to achieve this in the back-end. But the UI may also present a parallel set of issues.

Still, we have both delete and add for many steps, and the drag/drop process would be like a simplified way to essentially press the delete button and then the add button, while being sure to preserve the settings. So I think we can imagine a way forward here as long as we do good testing!

I've noticed that occasionally changing a step causes more steps than necessary to re-calculate, but haven't isolated this behavior. Similarly here, though, to be efficient, if we delete a step, and insert it, we shouldn't have to re-run anything before the earliest change in the sequence.

Thanks, this is cool! For UI dragging, perhaps we should complete #673 first, and we could add a "grabby" icon to the upper right corner, or next to the name or something? Then each panel will look "draggable"?

[harshithpabbati]

Hello Lets have a button to sort. when we pressed it let it to display a popup which will just have the steps sort it over there and when we are done in the popup then we it can be sorted using add and delete steps. We can sort it using draggable js in the popup similar to this https://shopify.github.io/draggable/examples/simple-list.html

[rishabhshuklax]

This is interesting, I'd like to work on it!

[rishabhshuklax]

I believe we could break this out into two seperate issue, firstly we need a API method to reorder the steps in sequencer object then we can work on UI implementation, I'll open the issue for the same