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
Related
There was a plugin for vim that would blur out everything in the current file except for the function your cursor was on or in the body of. I've googled every combo of query that describes that and looked through git commits of my old vimrcs but can't find it anywhere!
If you would scroll down or up into another function/body it will "reveal" that and blur everything else. It would also center with horizontal margin.
Regardless, is there an edit to zen mode or a plugin that could achieve this? And if not the blur effect, then is there a way to limit the characters visible to a number?
Something like the image halfway down in this article.
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 am trying to determine if its possible to provide a "richer" experience when using TreeViews in a VS Code extension. The default explorer view has the ability to do things provide custom text coloring for items (such as red when a file has an error or yellow if its been changed). However, the only highlight I can seem to find in TreeItems is only able to highlight text in an item without control over color but only select when the highlight starts/stops.
I would really like to take advantage of the same tree experience provided by the VS Codes extensions view but it does not seem to be restricted by the same API as other extensions (makes sense).
Any recommendations? I am considering just doing a webview that holds my own "TreeView" but wanted to see if there are other options before going down that rabbit hole.
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
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/.