Padding for whole text area or line number area

[AlexP11223]

I tried to add border via CSS, based on this https://stackoverflow.com/questions/37808715/how-to-make-look-and-feel-of-richtextfx-similar-to-textarea and issue #394.

It works, but line numbers cover part of the border, which doesn't look very nice.

I tried to add padding for .virtualized-scroll-pane, .styled-text-area, .virtual-flow and .virtualized-scroll-pane .styled-text-area .paragraph-box but it didn't work.

With the last one there is also a strange issue, see #508

CSS:

/* Border for RichTextFX, similar to normal JavaFX text area: focused color, etc.
*/

.virtualized-scroll-pane {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
}

.virtualized-scroll-pane:focused {
    -fx-background-color:
            -fx-focus-color,
            -fx-control-inner-background,
            -fx-faint-focus-color,
            linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
}

.virtualized-scroll-pane .styled-text-area {
    -fx-background-insets: 0px;
}

.virtualized-scroll-pane .styled-text-area .paragraph-box:first-paragraph .paragraph-text {
    -fx-padding: 5px 2px 0 2px;
}

.virtualized-scroll-pane .styled-text-area .paragraph-box:first-paragraph .lineno {
    -fx-padding: 5px 5px 0 5px;
}

.virtualized-scroll-pane .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;

    -fx-padding: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-border-insets: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-background-insets: 0 0.08333325em 0.08333325em 0.08333325em;
}

.virtualized-scroll-pane .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;

    -fx-padding: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-border-insets: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-background-insets: 0.08333325em 0.08333325em 0.08333325em 0;
}

import javafx.scene.Node;
import org.fxmisc.flowless.Virtualized;
import org.fxmisc.flowless.VirtualizedScrollPane;

public class VirtualizedScrollPaneExt<T extends Node & Virtualized> extends VirtualizedScrollPane<T> {
    private PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");

    public VirtualizedScrollPaneExt(T content) {
        super(content);

        content.focusedProperty().addListener((obs, oldVal, newVal) -> {
            pseudoClassStateChanged(FOCUSED, newVal);
        });
    }
}

[JordanMartinez]

It seems there are multiple issues that you're asking for help on:

1. ParagraphGraphicFactory is drawn over VirtualizedScrollPane's border color
2. Padding is only added to the bottom, and not also the top, of the paragraph

Are there any others I'm missing?

[AlexP11223]

Yeah, the second issue probably should have been created as a separate issue.

[JordanMartinez]

Yeah, the second issue probably should have been created as a separate issue.

Please do so next time.
Correct me if I'm wrong but.... doesn't this line mean that padding should only be added to the bottom?

.virtualized-scroll-pane .styled-text-area .paragraph-box {
    -fx-padding: 15px 0 0 0;
}

Shouldn't it be -fx-padding: 15px 0 15px 0; ?

[AlexP11223]

Created separate issue about that with more information. 15px 0 0 0 is top padding.

[AlexP11223]

About border issue, I am not sure if everything is ok with my CSS, but I think it would work fine if it was possible to add padding for .virtual-flow (or .paragraph-box).

Wiki says that .virtual-flow padding should work, but it is not.

.virtual-flow {
    -fx-padding: 15px;
}

Scenic View shows padding values, but nothing is affected.

[JordanMartinez]

See Tomas' comment's comment section. I'd guess VirtualFlow doesn't handle padding in its layoutChildren() method. Since you're already have a VirtualizedScrollPaneExt, could you handle the padding there?

[AlexP11223]

Yeah, looks like this works. :)

public class VirtualizedScrollPaneExt<T extends Node & Virtualized> extends VirtualizedScrollPane<T> {
    private PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");

    public VirtualizedScrollPaneExt(T content) {
        super(content);

        content.focusedProperty().addListener((obs, oldVal, newVal) -> {
            pseudoClassStateChanged(FOCUSED, newVal);
        });
    }

    @Override
    protected void layoutChildren() {
        super.layoutChildren();

        Insets ins = getInsets();
        getContent().resizeRelocate(ins.getLeft(), ins.getTop(), getWidth() - ins.getLeft() - ins.getRight(), getHeight() - ins.getTop() - ins.getBottom());
    }
}

.virtualized-scroll-pane {
    -fx-padding: 0.08333325em;
}

[AlexP11223]

btw why the virtual-flow fix mentioned in that comment was not applied?

[JordanMartinez]

Great!

why was the virtual-flow fix mentioned in that comment not applied?

I'm not sure. Perhaps we forgot to do so? Maybe @TomasMikula could explain.

[JordanMartinez]

#510 may have revealed a bug in Flowless where VirtualFlow#hit does not account for insets. One can see this with the following code:

import javafx.geometry.Bounds;
import javafx.geometry.Insets;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
import org.junit.Test;

import java.util.function.Consumer;

import static javafx.scene.input.MouseButton.PRIMARY;
import static org.junit.Assert.assertEquals;

public class TestGUI extends InlineCssTextAreaAppTest {

    @Override
    public void start(Stage stage) throws Exception {
        super.start(stage);
        stage.show();

        String text = "abcdefghijklmnopqrstuvwxyz";
        String fullText;

        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 19; i++) {
            sb.append(text).append("\n");
        }
        sb.append(text);
        fullText = sb.toString();
        area.replaceText(fullText);
        area.setPadding(new Insets(20));
        area.setStyle("-fx-font-family: monospace; -fx-font-size: 12pt;");
    }

    @Test
    public void test() {
        interact(() -> {
            int start = area.getAbsolutePosition(3, 8);
            area.selectRange(start, start + 1);
            Bounds b = area.getCharacterBoundsOnScreen(start, start + 1).get();

            StringBuilder sb = new StringBuilder();
            sb.append("Bounds: ").append(b).append("\n");
            Consumer<MouseEvent> press = area.getOnOutsideSelectionMousePress();
            area.setOnOutsideSelectionMousePress(e -> {
                sb.append("Mouse screen x/y: ").append(e.getScreenX()).append(" / ").append(e.getScreenY());
                press.accept(e);
            });
            moveTo(b).clickOn(PRIMARY);
            
            sleep(2000); // Here, one sees that the caret is moved a few chars to the right and one line under the mouse
            System.out.println(sb.toString());
            assertEquals(start, area.getCaretPosition());
        });
    }

}