SynEdit and gutter — tight in there

[furious programming]

Gutter currently has virtually no options to change the spacing in its columns, so the data contained in it is crammed tightly. This makes the data hard to read, especially if the lines have been modified, and there are modification tags in addition to line numbering and code folding frames. Sometimes it's hard for me to clear the line number — I have to look harder (see first attachment). I checked what can be configured and the only thing I found was Gutter separator index, but this option is so poor that it is practically useless.

I would like to be able to set my own offsets/margins for gutter columns. Mainly, I mean moving its components apart, i.e. moving the modification markers away from the line numbers and the modification markers from the code folding frames, but also moving the code itself away from the gutter. You can see the appearance of the gutter that I would be interested in in the second attachment — the gutter is much more readable.

Is there any chance that more sensible margin settings for gutter content will be added to the IDE?

[Martin_fr]

Which options exactly are you looking for?

There are 2 ways of "spacing"
- increase the width of each/some gutter parts, and allow the content to use the new width.
- add padding (and thereby also increase the size, but the content does not use it.

Without padding, some elements can grow.
- line numbers likely still are glued to the right. (which indeed is a bit crammed)
- fold markers will maybe change.  They change according to the available height and width, so if the line height is bigger than the width, increasing the width allows them to grow. (not sure if they have a max size)
- yellow/green line changed markers: imho they should not have padding. But they can benefit from padding of their neighbours.

....

So which ones are you looking for?

[furious programming]

I'm looking for a way to add extra spacing between gutter parts. Additionaly, to add extra spacing between the gutter and the code, so the space between the folding markers and the code lines (without indentation) is bigger.

[Martin_fr]

I'm looking for a way to add extra spacing between gutter parts. Additionaly, to add extra spacing between the gutter and the code, so the space between the folding markers and the code lines (without indentation) is bigger.

For now, you can already move the gutter-seperator. Tools > Options > editor display
The gutter separator is by default between the "line change" and "fold".
Though that is only 2 pixels.

I don't think, that padding/spacing for each gutter part should be added to the IDE options.

I guess, the following would be sensible
- line number padding. (same amount on the left and right of each line number)
  clicks on that padding, count as click on the line number.
- distance between gutter and text.
   The critical question is, if (or how much of it) that distance should be sensitive to mouse clicks. E.g should clicking there
    -- allow selecting text, so you have a less narrow space in front of the first char of each line
    -- do nothing
    -- be a click on the right-most gutter part (fold, unless replaced with separator)
- maybe, but not that sure padding for the fold gutter (one value for both sides)
   more likely allow setting the width of the gutter-separator (which by default is on the left of the folds)

Alternatively: A single padding value, that is added as padding to the right side of each gutter part (effectively space between gutter parts, but again belongs to a gutter part => mouse click wise)
That would also include the space to the text area as the padding on the right most gutter part.

Not yet sure what might make the most sense...


It may be possible to do (or do more) via plugin.

The synedits can be retrived via the source-editor interface.  And then settings on the SynEdit can be modified.
All that may be needed, is an event when the editor config changed.

[furious programming]

Ok, I've prepared an example to illustrate what spacing I mean — where I would like to have more space.

The screenshots are zoomed so that you can clearly see the changes. The first screenshot shows the current appearance of gutter, which I have set in the IDE settings. The second screenshot shows the gutter with added spacing, marked with yellow braces. Of course, these spaces are only for visualization — I need smaller, but still.

I don't think, that padding/spacing for each gutter part should be added to the IDE options.

Why? Gutter is an element whose appearance configuration is important. It should be as configurable as the contents of the code editor.

No matter what the gutter configuration will look like and how many options there will be. Ultimately, the point is to make it possible to move the gutter elements apart at all, according to your own preferences.

[Martin_fr]

I see, but not each needs it individual space setting. Some can be grouped.

Anyway, please create a feature request on the issue tracker.

[furious programming]

Ok, I checked the TSynEdit component and that's what it currently offers, in the context of my suggestion to add more gutter configuration options. And it looks like most of the spacing is already available, because the component supports it, and the only problem is that you can't set it in the IDE settings window (there are no controls for that). So it turns out that adding the spacing configuration doesn't require much work.


The first thing is the spacing on the sides of the gutter. There are currently two properties for this — SynEdit.Gutter.LeftOffset and SynEdit.Gutter.RightOffset. In practice, they do exactly what I suggested, so you just need to add two SpinEdit to the IDE settings window, used to specify the size of these offsets. These two properties work seamlessly with the automatic width of the gutter — very nice.


The second thing is the offsets of the gutter parts. It's also nice here, because most of it is already implemented. Each part has a Width and AutoSize property that allows you to set an auto width (in terms of content) or a custom width (in pixels). The exception here is the TSynGutterSeparator, which already has an offset implemented (the LineOffset, LineOnRight and LineWidth properties), which now give you the ability to fully configure this part.

Here, the only thing that would fit is to simply add LeftOffset and RightOffset properties to the class of each part and respect them when rendering. However, each part should have two offsets, not just one, because the order of gutter parts (from left to right) can be freely changed and this will and this will always ensure the correct gutter appearance (and by the way will be in line with the properties of the gutter itself). Additional offsets in gutter part classes are also necessary because, for example, TSynGutterChanges always renders the rectangle to its entire area, regardless of its width.


After extending gutter and its parts with offset properties and changing the rendering code, the component will be ready for customization. Then the only thing you need to do is add to the IDE settings window a controls with data that will be assigned to the gutter properties. These settings can be so many (the more the better) that it would be worth to separate them into a new branch. Currently, the visibility and gutter separator settings are in the Editor/Display branch, and it would be better to create a Editor/Gutter branch and put all the gutter-related options there.

PS: it would be nice to give users the ability to change the order of gutter parts. SynEdit already supports this, so it would be nice to be able to customize it.

[Martin_fr]

There is a different between on offset and padding  (for the gutter parts).
Well, there are 2 ways of doing it => those are the 2 names I use.

1) Offset
A gutter part has its width. And then there are n pixels offset to the next part.
In that case:
- the main gutter must paint the gaps
- only one offset is needed per part, as it will define the gap.
  Unless you want the comfort of "gap := max(LeftPart.RightOffset, RightPart.LeftOffest)"
- With different colored parts, the gaps will all have the main gutter background color.
  That would be bad, if each gutter part has it's own color, as then the gaps have yet an alternate color....

2) padding.
There is some space where the gutter-part does not draw content. Only its background color is painted.
This is part of the gutter part. So the GutterPart.Width is increased.
The padding is the offset inside the GutterPart at which content is drawn.
Mouseclicks may or may not react in the padded area.


I personally prefer the 2nd "padding" method.

In SynEdit each gutter could implement a padding for the left and right.

In the IDE, ....
we have gutterparts: icon, line, change, separator, fold
both with left and right => 10 spin-edits  (even if only one, and a selector, still 10 setting)
IMHO that is confusing.

- And for example the text, if you want to give it space, you pad it on both sides. So that would be just one IDE setting.
  (same for fold and icon => the only question is, if all of those 3 need individual padding settings...)
- The change indicator probably doesn't need padding. It should paint full width. Any distance is to be hold by the other parts.
  (It might be that the change indicator wants a configurable width.... not sure

So then there would at most be the following spins
- padding line number
- padding icon => here the padding could be the space between 2 icons, and the padding on the outside defaults to half the value.
- maybe padding fold
- if needs must: width of change indicator.

[furious programming]

Yes, padding would be a better fit, but offset is compatible with SynEdit properties. Unfortunately, the SynEdit component already has the LeftOffset and RightOffset properties, which should be paddings, not offsets. So here you can choose either a word that correctly describes the part's behavior or one that is compatible with existing properties.


As for part configuration, IMO the best solution would be to create a separate branch in the IDE settings tree that would contain all the gutter-related options. There should be two ListBoxes to configure which parts are visible and which are not. The ListBox on the left would show the ones that we don't want to see in the right ListBox (as in the case of project settings and forms that are to be created automatically). The ListBox on the left would not only show which parts are visible, but would also determine the order of the parts in the gutter. A simple thing, and it will allow you to freely configure the contents of the gutter (parts and order).

Instead of two ListBoxes, there can be one, because instead of moving parts between two ListBoxes, just add a CheckBox called Visible, thanks to which you will be able to turn the visibility of specific parts on and off. After all, there are only a few gutter parts, so one ListBox will be more convenient to use and will take up less space. Perhaps instead of a ListBox, a simple TreeView will be better, because the item icons can inform you whether a part is visible or disabled.

However, in order for the gutter configuration to be convenient, there should also be SynEdit on the page (with some sample content), so that it shows live how the current user settings affect the gutter. So the gutter settings page should look similar to the page for the Editor/Display/Colors branch — on the left a list of gutter parts, on the right SynEdit showing what the gutter will look like, and below the controls for configuring the gutter and its parts. Or vice versa — at the top, the main settings of the gutter (its visibility, left and right offsets, etc., which is what we have now), below the controls for configuring the gutter part, and at the very bottom ListBox (left) and SynEdit (right). I like this order better.


When it comes to spacing configuration, you only need a few controls whose data will be set after selecting a part in the left ListBox. Two SpinEdits are enough for left and right padding. There must be two, because it must be possible to set the paddings separately - the user may want, for example, a large left padding for a line number, but a small (or no) padding on the right. If you give only one SpinEdit to the configuration (the same for both paddings), you will reduce the configuration possibilities, and the gutter parts may look bad if their order changes. Two SpinEdits instead of one doesn't make any difference, because there will still be plenty of space in the IDE settings window, and it will give the user freedom.

In the gutter settings window, there should also be a button to reset its settings, i.e. to restore the default settings (visibility, width and order of all parts). This is in case the user messed up the settings and couldn't get them back. In fact, such a restore button should be in every IDE settings branch — click the Restore button, confirm dialog and all configuration in the active IDE options page will be set to default.

[Martin_fr]

Yes, padding would be a better fit, but offset is compatible with SynEdit properties. Unfortunately, the SynEdit component already has the LeftOffset and RightOffset properties, which should be paddings, not offsets. So here you can choose either a word that correctly describes the part's behavior or one that is compatible with existing properties.

Those offsets are only for the overall gutter, and afaik act as padding (since they are part of the gutter). The gutter parts don't have any, yet.




IMHO that is way to much to be there as default (build in).  I can see that as an add on package.

I am not against having options... I have added more than my fair share. Yet that one to me looks like way to much.
And why so much detail on the gutter? Then the same options could be needed for the grid in the object inspector; placing of the main menu; component palette, ...

In any case:

1) Changes to SynEdit.

I am fine with a "padding functionality (separate left/right" to be added to gutter parts.
- I prefer them named padding, even if that is out of line with the naming on the main gutter.
- If needs must, they can go as Offset (by name, but function as padding)

IMHO they should react to mouse events. But I'll accept it either way.

The gutter part for the icons can have an additional "ColumnSpacing".

I will apply a patch/merge-request for such changes

2) Changes to the IDE

2a) Small...
I do not see options for re-ordering.

- We have already visibility for "line numbers" / "separator" (negative index)
+ "fold" part depends on folding enabled. But can have an additional checkbox, as folding can and does work without the gutter part.
+ "changes" can have a checkbox *OR* width-spin (allowing 0 to hide)
+ "icons" can have a checkbox *OR* column count (allowing 0 to hide)

+ "fold", "line", "icons" can each have one "spacing" (i.e. all together 3 value, one for each).
   For the "icons" the spacing also applies between the icons (same spacing as for left/right)

That is more than I was prepared for earlier.

Ideally they get added on the "Editor > Display" page. That is where the existing options are.

They can either be all visible at the same time (that may fill up the page), or have one "selector" (drop-down / combo - though combo may be to much height), and then show the controls  for that gutter-part (controls as specified above / including existing controls).

I will apply a patch/merge-request for such changes (including subset)
For the graphics layout, a mockup may be good for discussion.
For the EditorOptions this should be new *published* properties.



2b) Big...

Anything more than the above... (yet based on the SynEdit changes from point 1)

Either
- A plug-in in a package of its own, via OPM
- Any other team member things its worth while and wants to apply it.

[furious programming]

IMHO that is way to much to be there as default (build in).

I don't know if you understood me correctly. The SynEdit component already allows you to configure most of what I would need — it has properties for setting side gutter paddings and supports reordering parts. You put so much effort into creating a great, functional and customizable gutter, but you hide the possibility of configuring it only because ”it will be too much”?

Sorry, but that sounds ridiculous. Not only do you throw your work down the drain, but you also take away the ability of Lazarus users to customize the appearance of the IDE to their own needs. There are plenty of options for setting the appearance of the code in the editor, and practically nothing for the gutter.

I asked for the ability to change the order of the gutter parts, because I would like to have a change marker on the far left. On the other hand, I am asking for paddings because for me the parts of the gutter are too close to each other, which makes the gutter difficult to read. That's it, normal and need configuration, nothing extraterrestrial.

[furious programming]

Ok, for now I manually changed the look of the gutter by modifying the code responsible for creating SynEdit — file Lazarus\ide\sourceeditor.pp, method TSourceEditor.CreateEditor:

Code: Pascal  [Select][+][-]

1. procedure TSourceEditor.CreateEditor(AOwner: TComponent; AParent: TWinControl);
2. {...}
3. Begin
4.   {...}
5.  
6.     with FEditor do begin
7.       Name:=NewName;
8.       Text:='';
9.       Align := alClient;
10.       Visible := False;
11.       BookMarkOptions.EnableKeys := false;
12.       BookMarkOptions.LeftMargin:=1;
13.       BookMarkOptions.BookmarkImages := SourceEditorMarks.ImgList;
14.       Gutter.MarksPart.DebugMarksImageIndex := SourceEditorMarks.SourceLineImg;
15.       WantTabs := true;
16.       ScrollBars := ssAutoBoth;
17.  
18.       Gutter.LeftOffset  := 4; // 4px left padding.
19.       Gutter.RightOffset := 8; // 8px right padding.
20.       Gutter.Parts.Move(2, 0); // moves the "changes" marker to the far left.
21.  
22.       // IMPORTANT: when you change below, don't forget updating UnbindEditor
23.       OnStatusChange := @EditorStatusChanged;
24.       {...}
25.  

Paddings are not yet implemented by the gutter part class, so I won't do anything about it. Anyway, now the gutter looks more or less what I want, it's more readable. Please implement paddings for the gutter part and let us freely configure gutter from the IDE options window.

[Martin_fr]

I do understand you.

And as I stated:

- I have no problem if this is added via OPM package. That should be possible (it would be stored in its own config)
- I have no problem if another team member, thinks it should be in the core IDE; and if they add it.

If I put it into the core, then I have to take responsibility for it => I wont.


As for "patch or merge request".

At this time, I wont be able to fit any of it into my schedule.
If at a later time I will be able to do some of it myself, I might do (a subset of) what I described.

[furious programming]

Issue created — https://gitlab.com/freepascal.org/lazarus/lazarus/-/issues/40170