Selected color with alpha add extra colors

[PavelTurk]

This is my java code:

public class JavaFxTest8 extends Application {

   @Override
    public void start(Stage primaryStage) {
        var text = """
                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                   cccccccccccccccccccccccccccccccccccccccccccc
                   dddddddddddddddddddddddddddddddddddddddddddd
                   eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                   """;
        var codeArea = new CodeArea(text);
        VBox.setVgrow(codeArea, Priority.ALWAYS);
        Scene scene = new Scene(new VBox(codeArea), 500, 200);
        var css= this.getClass().getResource("test8.css").toExternalForm();
        scene.getStylesheets().add(css);
        primaryStage.setScene(scene);
        primaryStage.show();
        codeArea.selectRange(30, 200);
    }

    public static void main(String[] args) {
        launch(args);
    }
}

This is CSS code:

.root {
    -fx-font-size: 16;
}
.styled-text-area {
    -fx-background-color: #666666;
}

.styled-text-area .main-selection {
    -fx-fill: rgba(255, 0, 0, 0.4);
}

And this is result:

As you see selected text is "underlined". Is this a bug or I do something wrong?

[Jugen]

It looks like there's a single pixel space between each line, and that pixel is being colored red without the alpha being applied ???
Or maybe it's an overlap of one pixel with the alpha's being combined ???

[PavelTurk]

@Jugen I checked the color if this one pixel line, it is #c32828 . If it were color without alpha it would be #FF0000

[Jugen]

So I've figured it out and it's coming from the overlap of the top highlight line with the one underneath it.
I've tried various ways of trying to get it perfectly aligned but there's always either a slight overlap or a slight gap ?
This problem is only noticeable when using a highlight color using an alpha component.
The relevant code section is in ParagraphText.getRangeShapeSafely

RichTextFX/richtextfx/src/main/java/org/fxmisc/richtext/ParagraphText.java

Lines 353 to 410 in 9695091

	private PathElement[] getRangeShapeSafely(int start, int end) {
	PathElement[] shape;
	if (end <= paragraph.length()) {
	// selection w/o newline char
	shape = getRangeShape(start, end);
	} else {
	// Selection includes a newline character.
	double width = getWidth() - getInsets().getRight() - getInsets().getLeft();
	if (paragraph.length() == 0) {
	// empty paragraph
	shape = createRectangle(0, 0, width, getHeight());
	} else if (start == paragraph.length()) {
	// selecting only the newline char
	// calculate the bounds of the last character
	shape = getRangeShape(start - 1, start);
	LineTo lineToTopRight = (LineTo) shape[shape.length - 4];
	shape = createRectangle(lineToTopRight.getX(), lineToTopRight.getY(), width, getHeight());
	} else {
	shape = getRangeShape(start, paragraph.length());
	// Since this might be a wrapped multi-line paragraph,
	// there may be multiple groups of (1 MoveTo, 4 LineTo objects) for each line:
	// MoveTo(topLeft), LineTo(topRight), LineTo(bottomRight), LineTo(bottomLeft)
	// Adjust the top right, and bottom left & right corners to extend to the
	// correct width and height of the line, simulating a full line selection.
	int length = shape.length;
	if ( length > 3 ) // Prevent IndexOutOfBoundsException accessing shape[] issue #689
	{
	int bottomRightIndex = length - 3;
	int topRightIndex = bottomRightIndex - 1;
	int bottomLeftIndex = bottomRightIndex + 1;
	LineTo lineToTopRight = (LineTo) shape[topRightIndex];
	LineTo lineToBottomLeft = (LineTo) shape[bottomLeftIndex];
	shape[topRightIndex] = new LineTo(width, lineToTopRight.getY());
	shape[bottomLeftIndex] = new LineTo(lineToBottomLeft.getX(), getHeight());
	shape[bottomRightIndex] = new LineTo(width, getHeight());
	}
	}
	}
	if ( getLineSpacing() > 0 ) {
	double half = getLineSpacing() / 2.0;
	for ( int g = 0; g < shape.length; g += 5 ) {
	MoveTo tl = (MoveTo) shape[g];
	tl.setY( tl.getY()-half );
	LineTo tr = (LineTo) shape[g+1];
	tr.setY( tl.getY() );
	LineTo br = (LineTo) shape[g+2];
	br.setY( br.getY()+half );
	LineTo bl = (LineTo) shape[g+3];
	bl.setY( br.getY() );
	LineTo t2 = (LineTo) shape[g+4];
	t2.setY( tl.getY() );
	}
	}