1

Could someone tell me how to implement RichTextFX CodeArea with line numbers section extended till the end of the area? This is how it looks like now:

textareafx sample

I don't need line numbers after line 12 but I would like to see this grey bar to fill the entire text area.
Something like here:

expected ui

P.S. I'm not sure if this is even possible.

dferenc
  • 7,918
  • 12
  • 41
  • 49
sew
  • 11
  • 1
  • 1
    What have you tried so far? What was the problem with it? – Dragonthoughts Dec 03 '18 at 12:12
  • 1
    Welcome, to improve your experience on Stack Overflow please read [how to ask](https://stackoverflow.com/help/how-to-ask) an [On Topic question](https://stackoverflow.com/help/on-topic), and the [Question Check list](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) and [the perfect question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and if not already done, [take the tour](https://stackoverflow.com/tour). – Bsquare ℬℬ Dec 03 '18 at 13:51
  • @Dragonthoughts well, the problem is that I don't know where to start because I don't know if something like that is even supported by RichTextFX. I could just create new javafx element outside RichTextFX but thats plan b. – sew Dec 03 '18 at 22:10

1 Answers1

3

I know this is a rather old question, but since I had the same problem, let me share the solution I came up with.

What I did is to smuggle in a rectangle and make sure it is the bottom-most element (i.e. basically part of the background). However, there are a few gotchas when doing this, because the underlying CodeArea is not aware of our new node. If you just insert the rectangle, it might get removed when the CodeArea decides to rebuild the nodes. And getting the right width is a bit tricky because the width of line numbers can basically change at any time and the line-number labels themselves fade in and out of existence whenever you scroll.

So, in order to address these issues, my code sits in the layoutChildren() method and is thus called whenever the nodes in the editor have changed. First we check that the rectangle is actually there as the bottom-most node or insert it if missing. Second, we set the width of the rectangle to the width of the first visible line-number label (which might fail if there are no paragraphs at the moment).

The code itself here is in Scala, but probably easy enough to be quickly adapted to Java.

class MyCodeArea extends CodeArea {

  protected val gutterRect = new Rectangle()
  gutterRect.heightProperty.bind(this.heightProperty)
  gutterRect.getStyleClass.add("lineno")

  override protected def layoutChildren(): Unit = {
    try {
      val children = getChildren
      if (!(children.get(0) eq gutterRect))
        children.add(0, gutterRect)
      val index = visibleParToAllParIndex(0)
      val wd = getParagraphGraphic(index).prefWidth(-1)
      gutterRect.setWidth(wd)
    } catch {
      case _: Throwable =>
    }
    super.layoutChildren()
  }
}

Unfortunately, the colour of the rectangle must be assimilated manually. The reason is that the Labels used for line numbers use -fx-background-color, whereas the Rectangle uses -fx-fill. Hence, just setting the same CSS class "lineno" (as I did in my code above) does little to get the colour right. But it allowed me to put both into the same CSS class and therefore have one place where I can change it:

.lineno {
    -fx-fill: ivory;  // or whatever colour you like
    -fx-background-color: -fx-fill;
}
Tobias
  • 1,321
  • 6
  • 11
  • I wasn't able to solve my problem but I eventually replaced RichTextFX with WebView + Ace editor (mainly for performance reasons). – sew May 16 '20 at 22:59