Drag between nodes

[sverhoeven]

Fixes #31 and fixes #94

TODO

• [x] drag catalog node,
  • [x] now when dropped anywhere will append to wf
  • [x] no clear dropzone where to drop
  • ~[ ] when drag is started the catalog node is removed from list~ I can live with it because after drop it reappears.
• [x] dragging wf node sometime generates random new node
• [x] only show drag and x when hover over node
• [x] when moving wf node the selected node is not moved with it
• [x] drag start removes catalog node from list, it should make copy
• [x] no animation where catalog node is dropped

[netlify[bot]]

✅ Deploy Preview for wonderful-noether-53a9e8 ready!

Name	Link
🔨 Latest commit	2f6163ba5ba4deb946ff0bf1f5244078fec03659
🔍 Latest deploy log	https://app.netlify.com/sites/wonderful-noether-53a9e8/deploys/62c57d70e8ae4600099a26e8
😎 Deploy Preview	https://deploy-preview-92--wonderful-noether-53a9e8.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[bvreede]

Each node now takes up more space. Is it possible to reduce this, make them smaller?

main:	dnd:

[sverhoeven]

Spin off https://github.com/i-VRESSE/workflow-builder/issues/94 from pair reviewing session.

[sverhoeven]

Each node now takes up more space. Is it possible to reduce this, make them smaller?

I have reduced the space between nodes from 10px to 4px.

[sverhoeven]

VS Code was really helpful doing #94 so I merged the fix for #94 into this PR.

[bvreede]

A question, while reviewing:

In the current implementation, when picking an element, dragging it slightly, then moving it back to its original position, it is seen as 'dropped' and the element is appended to the list. This to me is confusing: once an item is dragged, there is no limits on the page where it needs to be dropped, and the user can't decide to "put it back".

In the TODO above, you write that there need be 'no clear dropzone where to drop'. I'm not sure if this implementation is therefore intentionally designed as such?

[sverhoeven]

A question, while reviewing:

In the current implementation, when picking an element, dragging it slightly, then moving it back to its original position, it is seen as 'dropped' and the element is appended to the list. This to me is confusing: once an item is dragged, there is no limits on the page where it needs to be dropped, and the user can't decide to "put it back".

In the TODO above, you write that there need be 'no clear dropzone where to drop'. I'm not sure if this implementation is therefore intentionally designed as such?

Dropping a catalog node outside the drop zone now does not add it anymore. While dragging a node I show the enlarged dropzone.

@bvreede is this better?

[sverhoeven]

Thanks for reviewing and making it even nicer.