sortable-list
sortable-list copied to clipboard
sharedlabs
Add scrolling support and other meaningful changes
Fixes #9
And other changes:
- Improves element reordering (eliminates flickering of siblings while dragging a sortable element)
- Prevents dragging while elements are animating back to normal position
👋 @Nezteb I see that you're offline til April 29th so no rush to respond to this.
I've just created this issue to gather thoughts on the scope of the extension and, when rebuilding, what we'd want to aim for functionality-wise. Also a good chance to figure out what the smallest amount of functionality is for this extension to be useful so that we have a base to build on top of.
I saw your tweet and think we're on the same wavelength but it would be great if you could expand a bit on what you want out of an extension like this here (I will also do the same in a separate comment)
Just for reference I've also created another issue (https://github.com/Pjaerr/Code-Flow-Extension/issues/44) that's mainly for myself to get back into the flow of things and explore Sprotty, hopefully I'll have more to say about the extension from a technical pov after doing a bit of exploration 👍
So the way I always envisaged the extension was that you'd highlight a section of code and then right click to bring up the context menu which would contain an option "Add to diagram". This would then store a node with a reference to the file and the range you highlighted.
In the webview I imagined something looking like:
where the code block you highlighted (ideally a live preview that reads from the file) lives alongside an optional note and some sort of link to the file itself. (note that it would use the editor theme for everything and in my example screenshot I've got scrollbars for the code and notes, but these could potentially just take up all the space they need)
I initially thought of the connection between nodes as being derived from the order you added them to the diagram but this very linear and wouldn't really work for times where you want to connect to a node that has already been added to the diagram. So it would need some mechanism for connecting nodes together in the webview itself, but I think for all my use-cases I would be fine with this being a simple option, it wouldn't necessarily need to be a fully fledged experience where you drag connections between nodes yourself, although I can see the value in that.
Going further it would be nice to have these "nodes" be highlighted in the sidebar when looking at the code (like a breakpoint is) so you can quickly jump to the diagram and see any surrounding context.
In terms of saving the diagram, it would be nice to have them as a json file or something along those lines so you can store them alongside your project, but also having some form of export as an image would be nice too.
I saw https://github.com/anas-araid/vscode-infinite-workspace too and love the idea of it, but I think the minimum functionality of this extension wouldn't need an infinite canvas to be useful, you might disagree though 😄
I forgot about this for a while, oops. I just found AppMap and it reminded me about this issue, though they focus on actual runtime behavior of a workspace instead of user-generated graphs (and they only support Ruby, Java, Python, and Node).
I like your vision/ideas for the extension.
Regarding JSON files for the graphs/diagrams:
- AppMap does have JSON graph spec we could borrow pieces from, but that sounds like a lot of work.
- There is a popular spec called JSON-LD for network/graph JSON data.
- Some example JSON-LD extensions that work with JSON-LD.
- If we wanted to support complex queries/mutations of that JSON-LD data, we could look into integrating RDF into the extension.
- Some example RDF extensions.
- That's definitely overkill for now though.
I think the minimum functionality of this extension wouldn't need an infinite canvas to be useful
100% agreed! It was just a cool extension that gave me similar vibes.
Another (potentially simpler) idea: Use Obsidian/wiki-style markdown links (and backlinks) in code comments. Here are some references to what I'm talking about:
- https://www.notion.so/help/guides/creating-links-and-backlinks
- https://help.obsidian.md/Plugins/Backlinks
There is an extension called "Markdown Notes" that does this but it only builds graphs of markdown files, so I created an issue inquiring about potentially supporting any text filetype.
EDIT: I'll be gathering my experiments and thoughts in this extension repo I'm playing with: https://github.com/Nezteb/vscode-mind-map-wiki-backlinks 😅
For lack of a better place. I've seen this extension in the wild: https://marketplace.visualstudio.com/items?itemName=Charkoal.charkoal
Don't have time to try it out but maybe it is essentially what code flow wants to be.