SyntaxEditor Wrapping and scrolling

2 Answers 188 Views
SyntaxEditor
Simon
Top achievements
Rank 1
Iron
Iron
Simon asked on 14 Apr 2022, 11:42 PM

I'd like to start off by saying that your code editor performs better than any of your major competitors with very large files which is great for my purpose. Really very impressed with how well it works!

That said I have a couple of issues that are really affecting my user experience with using it.

The first is there does not appear to be a word wrap option. Not sure if I am blind, but if so could you please point out how to use it?

The second is the number of lines scrolled when using the mouse wheel is far too many. Is there an option to configure this? Typically in most editors 3 is a good default. Unfortunately with this the number is 15+.

One more to top it off is the Line number margin. How do I increase the size? The number is getting cut off noticeably with anything 20,000 and above. I attached a screenshot to show what I mean for that. I might be blind again but I cannot see how to configure this in the documentation.

2 Answers, 1 is accepted

Sort by
1
Dinko | Tech Support Engineer
Telerik team
answered on 19 Apr 2022, 12:15 PM

Hello Simon,

Thank you for your interest in our RadSyntaxEditor control and for sharing your feedback with us. Let me get straight to your questions.

  • The first is there does not appear to be a word wrap option. Not sure if I am blind, but if so could you please point out how to use it?

Word wrap behavior is not supported by the control. There is logged a Feature Request in our feedback portal where you can track its progress and vote for its implementation. If it gathers more votes our development team could consider adding this for implementation in their future planning.

  • The second is the number of lines scrolled when using the mouse wheel is far too many. Is there an option to configure this? Typically in most editors 3 is a good default. Unfortunately with this the number is 15+.

The control does not provide a way to manipulate the scroll step. I have searched for a way to workaround this and I think I was able to find a suitable solution. What you can do is to create a custom class that derives from RadSyntaxEditor control. Then you could override the OnMouseWheel method. Upon checking the source code you need to set the Value property of the VerticalScrollBarElement and the VerticalScrollOffset of the SyntaxEditorPresenter. The VerticalScrollOffset has a protected set but using a reflection you can set it. I have prepared a sample project to demonstrate this. Please, add your file to test it.

public class MySyntax: RadSyntaxEditor
{
    protected override void CreateChildItems(RadElement parent)
    {
        base.CreateChildItems(parent);
            
    }
    protected override void OnMouseWheel(MouseEventArgs e)
    {
        Console.WriteLine("before: "+this.SyntaxEditorElement.VerticalScrollBar.Value);
        System.Reflection.PropertyInfo pi = typeof(SyntaxEditorPresenter).GetProperty("VerticalScrollOffset", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.Public);
        
        if (e.Delta < 0)
        {
            this.SyntaxEditorElement.VerticalScrollBar.Value += this.SyntaxEditorElement.VerticalScrollBar.SmallChange;
            pi.SetValue(this.SyntaxEditorElement.EditorPresenter, this.SyntaxEditorElement.VerticalScrollBar.Value); 
        }
        else
        {
            this.SyntaxEditorElement.VerticalScrollBar.Value -= this.SyntaxEditorElement.VerticalScrollBar.SmallChange;
            pi.SetValue(this.SyntaxEditorElement.EditorPresenter, this.SyntaxEditorElement.VerticalScrollBar.Value);
        }
        this.SyntaxEditorElement.EditorPresenter.InvalidateLayout(false);

        //  base.OnMouseWheel(e);
    }
}

  • One more to top it off is the Line number margin. How do I increase the size? The number is getting cut off noticeably with anything 20,000 and above. I attached a screenshot to show what I mean for that. I might be blind again but I cannot see how to configure this in the documentation.

I have tested this approach but wasn't able to reproduce this. Can you share which theme are you using? Also, have you applied zoom to the control? Here is a screenshot of how it looks on my side.

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Simon
Top achievements
Rank 1
Iron
Iron
commented on 21 Apr 2022, 05:23 PM

Hi Dinko

Thanks for the solution to the scrolling - it works very well.

For the theme I am using Fluent

Regards

 

Dinko | Tech Support Engineer
Telerik team
commented on 22 Apr 2022, 08:52 AM

Thank you for sharing which theme are you using. I have tested it on my side but wasn't able to observe the described clipping behavior. Can you share if you have customized in any way the RadSyntaxEditor control, except the above approach mentioned in my previous post?
Simon
Top achievements
Rank 1
Iron
Iron
commented on 22 Apr 2022, 08:27 PM

Hi Dinko,

Nope, only the customization you suggested for the wheel scroll. I have my RadSyntaxEditor docked in a LayoutControlGroup.

The editor had a padding of Left=5 which I had forgotten why I did it but after removing it I can see why though it doesn't help.

I've attached a screenshot of the whole left side of the form. With no padding whatsoever the 2 is getting cut off outside of the component. Very strange :|

Regards

Dinko | Tech Support Engineer
Telerik team
commented on 25 Apr 2022, 09:47 AM

I have added the RadSyntaxEditor control inside a LayoutControlGroup by still could not observe the described behavior. Could it be possible to modify the project to mimic your form structure and reproduce this clipping behavior? It seems that I am missing something here from your set-up and I can only guess what it could be.
Simon
Top achievements
Rank 1
Iron
Iron
commented on 10 May 2022, 09:16 PM

Hi Dinko,

Sorry I didn't get back sooner, I had put this aside to work on other things. Revisiting it now as it's becoming a bit annoying :)

There is one thing I realized that I didn't mention earlier but the LayoutControlGroup I'm using is not Telerik's. 

I've managed to track down exactly where it's going wrong via debugging but I'm not sure how to override it, so hoping you might have an idea how.

The Telerik.WinControls.SyntaxEditor library has the namespace Telerik.WinForms.Controls.SyntaxEditor.UI.Margins.

Under there, there is this class:

public class LineNumberMargin : SyntaxEditorMargin
{
	....  lots of stuff...

	protected override void UpdateUIOverride(UIUpdateContext updateContext)
	{
		double num = Math.Max(1.0, base.Editor.ScaleFactor);
		double num2 = this.CalculateWidth();  // Always returns 45.75 for me
		..... and so on.....
	}

	protected internal virtual double CalculateWidth()
	{
		int num = this.GetMaxLineCount().ToString().Length;
		num = Math.Max(num, 5);
		this.measureBlock.Text = new string('0', num);
		return this.measureBlock.GetWidth() + 10.0;
	}

}

The CalculateWidth double is responsible for clipping my text. If I manually edit the return value in memory to 50 (instead of 45.75), it resolves the clipping perfectly. If I could get that CalculateWidth calculation to add 15.0 instead of 10.0 it would be perfect.

As to why this is only an issue for me, I have no idea.

Regards

 

 

Dinko | Tech Support Engineer
Telerik team
commented on 11 May 2022, 08:03 AM

Upon checking the LineNumberMargin class the 10.0 value is a constant name  LineNumberMargin.RightMargin is equal to 10. As I am not able to reproduce it I can't be sure what will be the best approach here. Still what you could try on your side is to create a custom class that derives from LineNumberMargin. Then you could override the CalculateWidth() method and modify the value return from the base method. Now replacing the default LineNumberMargin class will require to use of reflection as the RadSyntaxEditor control does not provide API to do that. Here you could subscribe to the Load method of the Form and replace the default class with the custom one.

private void Form1_Load(object sender, EventArgs e)
{
    BindingFlags bindFlags = BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic
| BindingFlags.Static;
    FieldInfo field = this.radSyntaxEditor1.SyntaxEditorElement.GetType().GetField("defaultLineNumberMargin", bindFlags);
    field.SetValue(this.radSyntaxEditor1.SyntaxEditorElement, new MyLineNumberMargin(this.radSyntaxEditor1.SyntaxEditorElement));
}     

public class MyLineNumberMargin : LineNumberMargin
{
    public MyLineNumberMargin(RadSyntaxEditorElement syntaxEditor) : base(syntaxEditor)
    {

    }
    protected override double CalculateWidth()
    {
        return base.CalculateWidth() +10;
    }
}

You can test it and share how it goes.

Simon
Top achievements
Rank 1
Iron
Iron
commented on 11 May 2022, 10:20 PM | edited

Hi Dinko,

Thanks so much for your example override, really appreciate that. I implemented your suggestion exactly and while I got no errors, it didn't make any change. Even if I hardcode a double to return, same result so i guess the override is not triggering.

Maybe something small to tweak?

Regards

Dinko | Tech Support Engineer
Telerik team
commented on 13 May 2022, 12:59 PM

After debugging the source code it turns out that is not easy to trigger the override method of the CalculateWidth. After searching for a simple solution I think I have found one. What you can do is to use the Margins collection of the control and insert an additional element with Width 5 to offset the line numbers a little bit.

this.radSyntaxEditor1.SyntaxEditorElement.Margins.ScrollableLeft.Insert(0,new Telerik.WinControls.SyntaxEditor.UI.Rectangle() { Fill = Brushes.LightBlue, Width = 5 });
// you can set transparent color

Simon
Top achievements
Rank 1
Iron
Iron
commented on 13 May 2022, 01:52 PM | edited

Hi Dinko,

Thanks very much for that. Unfortunately it didn't work, it has a similar effect to adding padding when I used Brushes.Transparent

I guess I need to specifically address the LineNumberMargin that's getting cropped somehow. I think being able to override CalculateWidth is my only hope.

Regards

Dinko | Tech Support Engineer
Telerik team
commented on 16 May 2022, 09:11 AM

The CalculateWidth() method is very similar to the approach suggested in my previous reply. Adding additional elements will have the same effect as modifying the CalculateWidth() return value. Inserting Rectangle should move the line numbers. This leads me to think there is something else outside of the RadSyntaxEditor that is interfering with the layout. Just for the test can you increase the Width of the Rectangle from 5 to 50. Is there any difference? Can you share the type of the LayoutControlGroup in which the control is placed? I will need to reproduce this behavior so that I could suggest a suitable solution here otherwise I am shooting in the dark. 
Simon
Top achievements
Rank 1
Iron
Iron
commented on 16 May 2022, 09:34 PM | edited

Hi Dinko,

The size of the margin does indeed increase, for example this is the 50 you suggested to test:

And just to test I colored the margin:

While debugging I found the CalculateWidth() was used to measure how much space the lineNumber text actually needs so if CalculateWidth() does not return sufficient space, it's going to clip the text regardless of the margin. This is what I tested when I patched it in memory to return a larger double.

As for the LayoutControlGroup it is the DevExpress version of it I am using. I think it is similar to the Telerik version. There are two sections. The top section is a sort of header that provides limited information, the bottom section is where I have the radsyntaxcontrol inside which presents the entire log. The top section is minimizable  which allows the radsyntaxcontrol to take up almost the entire form.

I guess this screenshot shows exactly what is going on. Top section has two datagrids.

Nothing that special really, which makes it all confusing why the sytax control margin is behaving like this I guess.

Regards

 

EDIT: Just to add, if I can permanently fix the size of the Line number margin that would also be acceptable. The number of lines will never go over 6 digits - because the performance starts becoming  a huge problem at this point. So I would be happy to hard code the size to be 6 digits worth of width.

Dinko | Tech Support Engineer
Telerik team
commented on 17 May 2022, 09:43 AM

Thank you for the additional details.

Modifying the value of the CalculateWidth() method will require numerous reflection methods to get private properties and fields and changed their values. That is why this won't be an option. In the first place, I suggested it but it seems that I haven't tested this approach well. However, in your post, you mentioned "Line number margin". This gives me an idea to test. By default, the Margin property of the LineNumberMargin is 0 on all sides. If I apply 5 px on the left, the line number values are clipped. Can you check the Margin property on your side and set all sides to 0. You could do that in the Load event of the Form.

private void Form1_Load1(object sender, EventArgs e)
{
// the first element in the collection should be LineNumberMargin object
    this.radSyntaxEditor1.SyntaxEditorElement.Margins.ScrollableLeft[0].Margin = new Padding(0, 0, 0, 0);
}

 

Simon
Top achievements
Rank 1
Iron
Iron
commented on 17 May 2022, 05:06 PM | edited

Hi Dinko,

Thanks for that.

I checked the default for me is indeed set to 0

I experimented with adding 5 to the left which is the top part of the screenshot. The bottom part is the default/0.

The 5 pushes the line number across and clips the separator line but other than that the number is always clipped.

Dinko | Tech Support Engineer
Telerik team
commented on 18 May 2022, 12:51 PM

Let's try to somehow isolate this. Can you place the RadSyntaxEditor control only in a new Form? Does this clipping appear again? In the form where it is reproducible can't remove the LayoutControlGroup to see if this control is the reason behind this.
Simon
Top achievements
Rank 1
Iron
Iron
commented on 18 May 2022, 08:06 PM

Hi Dinko,

I tried your suggestions but made no difference however I think I know how you can replicate it now.

I started thinking it might be a font issue. I have a completely unrelated issue (that's extremely low priority) with using custom monospaced fonts but as an experiment I also tried to see how the clipping is:

It's actually worse! This font is size 13. Impossible for me to use this custom font. This is very interesting.. so i did some experimenting.

During initialization of the form I set the EditorFontFamily:


this.logViewer.SyntaxEditorElement.EditorFontFamily = new Telerik.WinControls.SyntaxEditor.UI.FontFamily("Courier New");

But on the designer, it's just the default since I wanted to programmatically handle it and allow users to select a font:

I disabled my EditorFontFamily initialization so it uses the default to test.

BINGO! No more clipping! It's right up against the edge, but that's easily solved by padding.

Next I changed the font on the designer to be the initially desired one:

Then:

No clipping, but it's also not respecting the font I wanted.

So I readded my EditorFontFamily initializer while keeping the font set to Courier New

Back to clipping!

I *think* the issue is with the RadSytaxEditor not handling other font sizes well somehow when it comes to calculating the width required.

If I set the EditorFontSize to be 12 or less there is also no clipping, but the text of course becomes too small at that point. 13 (default) is the sweet spot.

Regards

 

1
Hristo
Telerik team
answered on 20 May 2022, 12:18 PM

Hello Simon,

If I am not mistaken the remaining issue is that the line number margin gets clipped if you are using a custom font set to the EditorFontFamily property of the SyntaxEditorElement. Your last comment suggests this and I am also able to observe it locally. 

You are right and the control does not calculate the correct line number margin width when you specify custom font family and size. This is an issue and I have logged it on our feedback portal, here: RadSyntaxEditor: The line numbers may be clipped when using custom fonts (telerik.com). I've also updated your Telerik points. The issue is that we are using a text block to measure the width of the text and this block is not synced with the custom font. It remains with the default font which is Consolas. Monospaced fonts are generally wider and when you have longer files where you will need 5 digits to display the line numbers the measurement error gets accumulated and at the end the digits may get clipped. 

You can workaround the issue by syncing the font of the text block with that of the editor. It will be necessary to use reflection and set the font of the text block after you set the EditorFontFamily property on the element:

this.radSyntaxEditor1.SyntaxEditorElement.EditorFontFamily = new Telerik.WinControls.SyntaxEditor.UI.FontFamily("Cascadia Code");
this.radSyntaxEditor1.SyntaxEditorElement.EditorFontSize = 13;

var lineNumberMargin = this.radSyntaxEditor1.SyntaxEditorElement.Margins.ScrollableLeft[0];
var textBlock = typeof(LineNumberMargin).
                    GetField("measureBlock", BindingFlags.Instance | BindingFlags.NonPublic).
                    GetValue(lineNumberMargin) as TextBlock;

if (textBlock != null)
{
    textBlock.FontFamily = this.radSyntaxEditor1.SyntaxEditorElement.EditorFontFamily;
    textBlock.FontSize = this.radSyntaxEditor1.SyntaxEditorElement.EditorFontSize;
}
Here is the result after applying the workaround:

We are already investigating the issue and hopefully we will fix it with our service pack release next month.

I hope this will help. Let us know if you need further assistance.

Regards,
Hristo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Simon
Top achievements
Rank 1
Iron
Iron
commented on 20 May 2022, 08:12 PM

Hi Histro,

Yes that's exactly it and thanks so much for the workaround. It works!

This is working great for using Courier New now which was my default intentionally.

It actually also partially solves the issue I was having with a third party custom font - Comic Code.

Since this might be related I'll mention it here. It was a low priority for me as I was more focused on getting the basics working.

I was having massive character spacing issues which was very strange for a monospace font. With this work-around it is significantly better however there are a few odd behaviors that occur in the RadSyntaxEditor but not other standalone editors using the same font.

Here is an example:

Line 9 really shows several weird things going on especially with databasepropertyex.

 

Thanks so much for the workaround though! My apologies for how long it took for me to find that it was a font issue - I was rather focused on it being a line margin issue.

Regards

 

Dinko | Tech Support Engineer
Telerik team
commented on 25 May 2022, 11:49 AM

I can see that the clipping behavior is now fixed which is great. Now for the strange space between the words: From the mentioned link I have downloaded the TTF file free version of the Comic Mono at the bottom link of the article. Upon applying it to the RadSyntaxEditor I could not see any additional space between the words. Could it be possible to share the TTF (custom font) file which is used to be sure that I am testing the same one and share a text file with the sample code like the one from your last reply? 
Simon
Top achievements
Rank 1
Iron
Iron
commented on 25 May 2022, 02:49 PM | edited

Hi Dinko,

The Comic Code does have a free free version you can grab from the same place you purchase it from. I don't think the license permits me to share the commercial version.

However I do have the Comic Mono loaded up as I was also testing that one when I was having the spacing issue.

Different results but also serious spacing issues.

Just to add, these results are similar to what I was previously seeing with the Comic Code font before the line margin fix. So it seems these are linked somehow.

Regards

Dinko | Tech Support Engineer
Telerik team
commented on 26 May 2022, 10:15 AM

I have downloaded the custom font but still, I did not observe such spacing on my side. What I notice is that some of the characters are missing but I am guessing that this comes from the font itself (Comic Code Demo). Could it be an option to share a code snippet of the code shown in the control? Also, do you have custom folding?  If yes, can you share what customization is applied on your side?
Simon
Top achievements
Rank 1
Iron
Iron
commented on 26 May 2022, 02:01 PM

Hi Dinko,

Yeah that sounds like the demo. I can use the freely available Comic mono to test so I have the same settings as you.

I have the following code (just before the work-around code for margin size)


this.logViewer.SyntaxEditorElement.UseMonospacedFontOptimization = true; 
using (Stream stream = Assembly.GetAssembly(this.GetType()).GetManifestResourceStream("Application.Resources.ComicMono.ttf"))
{
	ThemeResolutionService.LoadFont(stream);
}
this.logViewer.SyntaxEditorElement.EditorFontFamily = new Telerik.WinControls.SyntaxEditor.UI.FontFamily("Comic Mono");
this.logViewer.SyntaxEditorElement.EditorFontSize = 13;

I do indeed have custom folding, 3 of them. 

ReportEngineFoldingeTagger foldingTagger = new ReportEngineFoldingeTagger(this.logViewer.SyntaxEditorElement);
foldingTagger.FoldingRegionDefinitions.Add(new FoldingRegionDefinition("START REPORT", "END REPORT"));
foldingTagger.FoldingRegionDefinitions.Add(new FoldingRegionDefinition("Prepare cursor", "Close cursor"));
foldingTagger.FoldingRegionDefinitions.Add(new FoldingRegionDefinition("Open cursor on", "Close cursor on"));
this.logViewer.TaggersRegistry.RegisterTagger(foldingTagger);

I wasn't sure if you were suggesting they might be a problem so I disabled them all to test but same result using Comic Mono:

Regards

 

Dess | Tech Support Engineer, Principal
Telerik team
commented on 30 May 2022, 11:17 AM

Hello, Simon,   

My colleague, Dinko, is out of office today so I will be assisting you with this case. After further testing, I was able to replicate the undesired spacing when the font is NOT installed on the current machine:

After installing the font locally, everything seems to work as expected with the following code snippet:

Please try installing the custom font and let me know what is the observed result then.

            this.radSyntaxEditor1.SyntaxEditorElement.UseMonospacedFontOptimization = true; 
            using (Stream stream = File.OpenRead(@"..\..\Resources\ComicMono.ttf"))
            {
                ThemeResolutionService.LoadFont(stream);
            }
            this.radSyntaxEditor1.SyntaxEditorElement.EditorFontFamily = new Telerik.WinControls.SyntaxEditor.UI.FontFamily("Comic Mono");
            this.radSyntaxEditor1.SyntaxEditorElement.EditorFontSize = 13;

 

Simon
Top achievements
Rank 1
Iron
Iron
commented on 31 May 2022, 03:06 PM

Hi Dess,

Thanks for that. I can confirm the same behavior happens for me. Everything works fine if the font is installed, interesting.

Is there a work-around so the font isn't required to be installed on the target machine?

Regards

 

Dinko | Tech Support Engineer
Telerik team
commented on 01 Jun 2022, 01:26 PM

We have researched for a suitable solution but to no avail. To correctly visualize the custom font, it needs to be installed first. You can consider using the approach suggested by Desislava. 
Simon
Top achievements
Rank 1
Iron
Iron
commented on 01 Jun 2022, 08:44 PM

Hi Dinko,

What is the approach by Desislava?

Dinko | Tech Support Engineer
Telerik team
commented on 02 Jun 2022, 09:58 AM

I am sorry for the misunderstanding. What I was trying to say is to as Desislava mentioned in her post, you need to install the custom font first. Otherwise, the font won't be visualized correctly in the control.

If you have any other questions regarding our controls, please feel free to open a new thread with your questions inside, and will be happy to help.

Tags
SyntaxEditor
Asked by
Simon
Top achievements
Rank 1
Iron
Iron
Answers by
Dinko | Tech Support Engineer
Telerik team
Hristo
Telerik team
Share this question
or