SyntaxEditor vNext Vector and Metro Images

by Avatar Bill Henning (Actipro)
Friday, November 9, 2018 at 5:29pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort (codenamed vNext) is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

We've been plowing through remaining SyntaxEditor feature areas that need to be ported to our vNext codebase, and there are only a few left.  One that we just completed is updating images used in the product, which appear in IntelliPrompt popups and the NavigableSymbolSelector.

Vector Metro Images (WPF/UWP)

The WPF and UWP versions of SyntaxEditor have had Metro Light and Metro Dark image set options for quite a while now.  But they've always been raster (bitmap) graphics that don't appear crisp on high DPI monitors.  This is something we're addressing in vNext.

For vNext, all of the Metro images will be vector images.  They will look crisp and clear at 16x16 100% DPI, but will look just as good (if not better) when used on high DPI monitors.

Here's the images at 200%:

SyntaxEditorVectorImages

Metro Images for WinForms

The WinForms SyntaxEditor has only had the Classic image set in the past.  The Classic image set is similar to the full color gradient images found in earlier versions of Visual Studio.

In vNext, we're bringing the Metro Light and Metro Dark image sets as options to the WinForms SyntaxEditor, with the Metro Light set as the default.

What's Next

We are continuing to work through remaining feature areas that need porting to the vNext codebase.  The last big one to tackle is IntelliPrompt.  Some of the UI pieces involved in IntelliPrompt need to be updated a bit for compatibility between the three platforms.  Once we get that going, these new vector images will look amazing in the IntelliPrompt UI.

WPF, UWP, and Silverlight v2018.1 Maintenance Releases

by Avatar Bill Henning (Actipro)
Wednesday, October 17, 2018 at 12:22pm

SyntaxEditor vNext Performance Tuning and Printing

by Avatar Bill Henning (Actipro) - 2 comments
Monday, October 15, 2018 at 4:48pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort (codenamed vNext) is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

For the last three weeks or so of SyntaxEditor vNext development, we've been working on performance profiling and printing support.

Performance Profiling

As part of vNext, we are doing our best to speed up the editor even more than before. 

The Universal Windows version of SyntaxEditor is many times faster than the current UWP SyntaxEditor.  A large part of that is due to the newer way we measure and render the control in vNext, which is significantly faster than what we were able to do in the past.  Other tunings also help.  Let's examine some performance results.

Using page-down to scroll through a large document, we're seeing a 3.5x speed increase in the vNext UWP SyntaxEditor!  UWP SyntaxEditor speed increases when dragging the scrollbar thumb are even more evident.  There is a bit of a lag in the current UWP SyntaxEditor, whereas in the vNext UWP SyntaxEditor, the display is instant and tracks with the dragged thumb perfectly.

Running the same page-down scrolling test in WinForms, we're seeing a 20% improvement in speed over the older version.  The WPF version is seeing a slight improvement in scrolling speed over before as well, although it has always scrolled extremely fast.

We are continuing to work on tuning the API to maximize performance when scrolling and editing.

Printing

Printing support has been added back into vNext for the WPF and WinForms versions.  We are currently working on the UWP version's printing support.  These features allow you to easily print out a document to paper, or a PDF file using the "Microsoft Print to PDF" virtual printer found in Windows 10.

What's Next

We are going to wrap up UWP printing support next, and then will move onto a few other areas left to port over to the API.  Large remaining areas include searching and IntelliPrompt feature APIs.

SyntaxEditor vNext Multiple Selection Pasting

by Avatar Bill Henning (Actipro) - 2 comments
Thursday, August 2, 2018 at 3:34pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort (codenamed vNext) is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

As described in recent blog posts, we've been working on adding multiple caret/selection support to SyntaxEditor in vNext.  In this post, I'd like to show off a neat new feature related to copying/pasting text when there are multiple selections.

Pasting Demo

At the start of this animation, I do a line copy, which occurs when there is no selection and you press Ctrl+C.  Then I paste that line in three times.

Next I select the text "Actipro," then Ctrl+select the text "SyntaxEditor," and finally Ctrl+select the text "vNext."  The Ctrl+selections have allowed me to create three selections.  At this point I could type and it would replace each of those selections with what I typed.  Instead, I'm going to press Ctrl+C again to copy the selected text.

2018-08-02_11-15-36

When I copy multiple selections, each selection's text is appended together and delimited by a line terminator.  So if you would paste what I copied into Notepad, it would paste as:

Actipro
SyntaxEditor
vNext

In the animation, the next thing I do is put a caret in each of the three empty strings by Ctrl+clicking in them.  We just added some new vNext logic that will compare the number of selections with the number of lines in the pasted text.  When they are equal, as they are in this demo, each line in the pasted text will get pasted into the related selection.  The end result is you can see how each of the three selections I originally copied end up in a separate target selection.

Summary

Multiple caret/selection support touches many portions of the editor and we are continuing to work through updating all feature areas to support it.

Let us know what you think in the comments.

SyntaxEditor vNext Multiple Caret/Selection Progress

by Avatar Bill Henning (Actipro) - 3 comments
Wednesday, July 18, 2018 at 3:56pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

We are continuing development on our SyntaxEditor control, adding many modern features under a unified API design.  One enormous feature area getting added is multiple carets/selections.  We briefly proposed adding this feature several months ago in this blog post to gather feedback.

Now that we've had time to iterate on development of it, I wanted to share a demo so you can see how it works.

Multiple Carets/Selections Demo

In this screen capture animation, we show how SyntaxEditor vNext will support multiple carets/selections.

2018-07-18_11-41-52

I first select a word using my mouse and click/dragging like normal.  Then I select text under it while holding the Ctrl key and click/dragging.  Afterward I notice I accidentally selected too many characters.  I hold Ctrl and click the second selection to collapse it.  Then I hold Ctrl and click/drag to make the correct selection.

Next I hold Ctrl and click in another word to add a third caret.  I remove that same third caret by Ctrl+clicking on it again.  This is a nice feature for when you accidentally add a caret/selection you didn't mean to add.

Finally, edit actions like typing will affect all selections.  You can see in the animation how typing "Foo" affects the two selections.  Pressing Ctrl+Z for undo applies to all the selections.

Summary

Adding multiple caret/selection support is a massive feature area that touches many portions of the product.  While it's taken a while to implement, we're very pleased with the progress thus far and think it will really be exciting for end users.

Let us know what you think of this feature area in the comments.