I am writing a small tools for VS Code and the tool will need to draw arrows between symbols in the code.
Something along these lines.
Please forgive my skills with Paint.
What it is the best way to achieve this effect in VS Code?
What you want is not possible. The editor output in vscode is a list of DOM nodes (divs for the lines, spans for the syntactic elements). You cannot draw lines between DOM nodes.
If you had full control over the editor you could add an overlay over the entire text to draw the lines, but then you have to take care not to disturb the normal behavior of the editor and, after all, you don't have that kind of control.
A webview is not a good approach, as it would not only require to duplicate the work the normal editor does, it's also isolated and has no direct access to the main application, which means actions, language server support etc. don't work
yes sure use this Rainbow Brackets
its draw an arrow between the start and the end .
enter image description here
Related
Qt Creator has a really nice feature where based on the cursor location, they change the background color of the rest of the buffer to make it easy to see the block of code one is working in. They have two levels of highlighting - please see picture.
I've been trying to recreate this in VSCode but with no luck.
I tried various VSCode settings and they don't seem to scope down to the block.
Blockman is visually very noisy i.e. I'd really like to have the lines have the background changed.
Blockman is visually very noisy
Hello, author of Blockman here. Blockman has so many configurations that can be used to reduce the noisy visual of default Blockman behavior. You can hide all blocks and show only the focused block. Also you can show +-1 or +-2 or +-3 ..... depth blocks from the focused block, or from the ground block, or both. Also you can hide all backgrounds and show only borders. And there are also many more settings. Please see the GIF instructions and textual instructions on Blockman page:
https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
Also this instruction is useful:
Tutorial - Blockman - How to show only focused block
https://github.com/leodevbro/vscode-blockman/issues/97
If you still have some difficulties, feel free to reach me on GitHub or here or anywhere and I'll try to help you with your specific preferences.
For a half year now, I carry an innovative idea for a modern way of code editing. I just realized what Visual Studio Code extensions are already capable of and made me wonder.
The idea is that a real time code render mode for code editors where code is visualized like rendered documentation (for example Doxygen). Non-commented lines of code are displayed like collapsable codeblocks and documentation comments are displayed as the surrounding markdown/HTML/LaTeX document.
This rendered view still can be edited and navigated in same way as the classic text view so that new graphical elements appear after typing them as text into a comment. Therefore, rich interactive documentation reading (like hiding/showing parts, jumping across locations with hyperlinks) and code editing would be combined into one activity without time needed for switching between both or mapping Documentation with actual code locations. Different from the original literate programming idea, the file's physical content is unchanged and doesn't complicate the process or source code reading.
It's conceptually how Moodle text editors work (HTML code view and render view) or like using a graphical word processor to visualize source code instead of a single monospace text. Of course, the cursor would move along lines in their visually presented order and not in their file's actual order.
Do you know, if such a real time render mode is possible in VSCode?
Did someone had such an idea and made an extension?
btw:
This "render mode" idea is actually quite generic and could be used as general customizable GUI technology that would allow GUI elements to be navigated, edited via an underlying text representation.
I have developed a VS Code Box Drawing extension which works by using selection's start and end positions to work out a level rectangle between the two positions in the text and replaces the edge characters of the rectangle with Unicode box drawing characters.
This works great with a selection start and end positions provided, but it also requires at least white space to already extend all the way to the right edge of where the box is supposed to end, otherwise the selection cannot be made that far.
I would like to achieve two things:
Be able to use mouse events and figure out would-be positions from them even if they extend beyond the length of the lines, so that I can back-fill the missing line length with white-space as I go drawing the box.
Be able to draw arrows (simple enough using the Bresenham's line algorithm).
I have read the Visual Studio Code API Reference and it has only one mention of the mouse pointer in this section underneath the languages header:
The rest, like tracking the mouse, positioning the hover, keeping the hover stable etc. is taken care of by the editor.
I have also read through the Extensibility Reference finding nothing relevant to what I aim to achieve.
This extension only makes sense for monospaced fonts, so additionally, I'd like to find out if there is a way to tell if the editor font is monospaced so I can reject extension activation with an error if that's not the case.
This is something the VS Code team doesn't currently enable (not a part of the extension API) not wants to enable in the near future:
I think that exposing mouse events to the extension API is not something that we'd be likely to add
Source comment on GitHub
Is it possible to make an extension that draw lines on the background? You can decorate a lot of thing but I can't find a way to draw colored lines.
I would like to see the flow of my data (inspired by visual programming).
Something like that (but the like drawn under the text) :
Keep in mind vscode is an add-on to Electron, which is a webbrowser in a desktop raiment. So what you see are webpages and hence everything what's possible on a webpage (with a node.js basement) is also possible in vscode - at least in theory. I say "in theory" because after all vscode is a text editor and limits interaction in a way that supports this goal. So, what you can is either some drawing/graphics or add extensions that work in normal editor pages. You certainly don't want to write your own text editor interface within vscode.
I am developing an Eclipse plug-in, and I want to highlight some points (between two consecutive characters in a file) instead of a region of text.
As an example, suppose that I want to highlight the position where foo has been deleted in a source file.
I know about the Markers(link), and I can set an annotation to a point in file, which can be shown in the side ruler areas.
Would there be any way to make it visible directly within the editor area itself?
It's obvious to highlight an area of text using something like boxes, underlines, but I couldn't find anything for a single point.
It would be nice if I could draw something like a caret, or a text cursor mark to some of the points I want to highlight.
I'm afraid annotations is the only civilized way to do it. You can apply them without markers as markers only simplify annotations management and provide persistence mechanism. All depends on how you get the information on what to highlight. Any more details on that?
If you're looking only for a way to customize annotation painting there's no way to do it via API. See in AnnotationPainter.getDecoration(), this is where the stuff happens. Looks like you can customize it only if you provide your own editor. More here - http://www.eclipse.org/forums/index.php/t/102865/.