Synchronized scrolling of 2 text areas

[WPCleaner]

I'm trying to create a classical side-by-side difference viewer with 2 InlineCssTextArea on the same horizontal alignment. I want line wrapping in text areas to avoid horizontal scrolling. I'm only interested in non-editable text areas, so no subject on handling modifications.

I've implemented the main feature (displaying the original text with red background on deleted text, the new text with green background on added text), but I'm struggling to synchronize the scrolling between the 2 areas. I don't see how to achieve a clean synchronization with the current API, but I may be missing a few things...

Here are the problems I encounter :

Dual way synchronization

I want that whatever text area is scrolled, the other one follows nicely.
For the moment, I have implemented a listener on each estimatedScrollYProperty() that scrolls the other one.
Problem is that I can't distinguish events coming from an actual user action on the text area, or from the other text area being scrolled.

Is there a way to distinguish the events?

    final ObservableValue<Double> oldScrollY = this.oldContentArea.estimatedScrollYProperty();
    oldScrollY.addListener((_, _, _) -> syncScroll(oldContentArea, newContentArea, true));

    final ObservableValue<Double> newScrollY = this.newContentArea.estimatedScrollYProperty();
    newScrollY.addListener((_, _, _) -> syncScroll(newContentArea, oldContentArea, false));

Determining what is actually displayed on the text area

For the moment, I'm using lastVisibleParToAllParIndex() and firstVisibleParToAllParIndex(), but with line wrapping it's really inaccurate to know what is actually displayed (in a paragraph takes 5 lines, I don't know how many lines are actually displayed).

Is there a way to know what is the text actually displayed on the text area?

      final int lastSourcePar = sourceArea.lastVisibleParToAllParIndex();
      final int lastTargetPosition = computeTargetPosition(sourceArea, lastSourcePar, newer);
      final int firstSourcePar = sourceArea.firstVisibleParToAllParIndex();
      final int firstTargetPosition = computeTargetPosition(sourceArea, firstSourcePar, newer);

Scrolling to the computed line

With the restriction on the precision of what is actually displayed, I can still compute what is the matching part in the other text area. I'm currently using the methods selectRange() and requestFollowCaret() to scroll the text area, but they're not working as I need:

• requestFollowCaret() seems to do nothing is the range is already visible : I'd like to be able to force the move to display the beginning of the range at the top of the text area
• requestFollowCaret() seems to favor the end of the range if the range is too big to fit on screen : I'd like the other way for my use case. So I can't select a huge range to force the beginning at the top of the displayed area.
• requestFollowCaret() seems to be working asynchronously, so I can't use hacks like calling selectRange() with a big range, requestFollowCaret() to force the end of the big range on screen (beginning not visible), selectRange() with only the beginning, requestFollowCaret() to force the beginning on screen (at top since it wasn't visible).
• If I do selectRange() for only the beginning, the synchronization only works once every two page downs. At the first page down, the paragraph that was last visible becomes the first visible paragraph, so it's still visible in the other text area, so nothing happens with requestFollowCaret()
• If I do selectRange() with an actual range, text is displayed as selected which is not what I want.

Is there another way to scroll the text area to a given point without using the selection and caret mechanisms?

For the moment, I've implemented an in-between solution, which is not perfect

      targetArea.moveTo((firstTargetPosition + lastTargetPosition) / 2);
      targetArea.requestFollowCaret();

[Symeon94]

Hello,

I know little about the way scrolling is done in RichTextFX, but have you tried binding bidirectionally the VirtualizedScrollPane? Because it seems that your description tries to reimplement the calculation of the scroll.

I managed to have the scroll follow doing this:

CodeArea codeArea1 = new CodeArea();
CodeArea codeArea2 = new CodeArea();
VirtualizedScrollPane<CodeArea> scrollPane1 = new VirtualizedScrollPane<>(codeArea1);
VirtualizedScrollPane<CodeArea> scrollPane2 = new VirtualizedScrollPane<>(codeArea2);
scrollPane1.estimatedScrollYProperty().bindBidirectional(scrollPane2.estimatedScrollYProperty());

Now, there is still a little bug with this implementation when using the mouse scroll when reaching the top it automatically goes down for some reason.

[WPCleaner]

Thanks @Symeon94 for the suggestion, but I have a few problems with estimatedScrollYProperty.

Its documentation says :

The estimated scrollY value. This can be set in order to scroll the content. Value is only accurate when area does not wrap lines and uses the same font size throughout the entire area.

So my problems are :

• I want to wrap lines, so the value can be quite inaccurate in my use case
• I want to keep identical lines displayed at the same level, so I don't want that both scrolls have the same scrollY property event if it was 100% accurate

Let's explain my need with an example :

• The original revision consists of the following long paragraphs : A, B, C, D, F
• The new revision consists of the following long paragraphs : A, C, D, E, F (B removed, E added)

If I scroll the original revision :

• When I have A at the beginning, I want A also at the beginning in the new revision. If I scroll one line at a time on A, A should scroll at the same speed on the new revision
• When I have B at the beginning, I want C at the beginning in the new revision (no move after I reached end of A in the original revision). If I scroll one line at a time on B, there should be no scroll on the new revision
• When I have C at the beginning, I want C at the beginning. Both scroll at the same speed.
• Idem for D
• Idem for F (but that means that when I pass from D to F, a bigger scroll will happen in the new revision to scroll directly from the end of D to the beginning of F, bypassing E)

I really want that, if the first line of what I'm viewing in the area I am scrolling has no differences with the other area), the other area should display that same first line at the beginning.

[Symeon94]

Ok, I see what you mean.

I'm using lastVisibleParToAllParIndex() and firstVisibleParToAllParIndex(), but with line wrapping it's really inaccurate

For that accuracy, I think the Bug #1317 which was raised by @Col-E which is suppose to modify the way wrapped paragraph are listed. With this you should be able to get the count of visible paragraphs (the PR was in review and we were close to finish the change).
It all depend on what "inaccurate" meant in your sentence. Normally you should be able to get the visible paragraph anyway when the visible paragraph changes with something like:

getVisibleParagraphs().changes().subscribe(event -> {
	//...
});

For the other items, I have used this in the past to scroll at the top:

this.selectRange(0, 0);
this.scrollYToPixel(0.0);

It could maybe be adapted to scroll to the line you want to scroll to.

Now, again, your request is very specific, I can only propose a few solutions based on my limited experience. If you see something you would actually need to be changed in the library for this, we can check if feasible.

[WPCleaner]

Thanks @Symeon94 for the ideas.

I will think about what I can do, and attempt a few things. If you're interested, my current version with RichTextFX is available here, and I have an IA generated port with RichTextArea available here (I haven't started to modify the scrolling yet).

What general features I find missing for the moment :

• Being able to know more precisely what part of the text is displayed : not just at the paragraph level, but more the first and last character displayed.
• Being able to scroll more precisely to a given point in the text : not just a percentage, not just ensuring something is in the screen, but rather being able to say that I want this character to be on the first visible line. And it should work without needing to select something, because selection can be used at the same time for other thing (in my use case, going from one difference to the next).

I will report my progress here.