Outsource scrollpane

[Sylordis]

Hi all,

Code and screenshots are provided at the end of this post.

I'm trying to do a software to comment on text and though it would be a nice idea to have it like nowadays text editors, with the text, the comments on the right on a bar and then a global scroll bar on the right for both, this way I don't have to bind both scrolling for comments and text.

What I have right now is an HBox in a ScrollPane, with a Region and a VBox for the comments, then I'm adding a StyleClassedTextArea at index 0 since I didn't find a way to integrate the component from the Scene Builder.

My problem is that the ScrollPane doesn't seem to pick up when it needs to scroll, because the StyleClassedTextArea still has its own scrolling mechanics even though I didn't add it to a VirtualizedScrollPane.

Is there a way to display the full text area and remove its scrolling possibilities? Or do I have to start fiddling with GenericStyledArea?

Here's my FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.text.TextFlow?>


<fx:root stylesheets="@../styles/main.css" type="BorderPane" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <HBox fx:id="chapterHeader" prefHeight="56.0" prefWidth="200.0" styleClass="header" BorderPane.alignment="CENTER">
         <children>
            <VBox>
               <children>
                    <Text fx:id="chapterTitle" styleClass="main-title" text="Chapter title" />
                  <TextFlow styleClass="sub-title">
                     <children>
                        <Text styleClass="small-intro" text="From " />
                        <Text text="“" />
                          <Text fx:id="bookTitle" styleClass="quoted" text="Book title" />
                          <Text text="”" />
                     </children>
                  </TextFlow>
               </children>
            </VBox>
            <Region HBox.hgrow="ALWAYS" />
            <VBox alignment="CENTER" styleClass="button-toolbar">
               <children>
                  <Button fx:id="toolbarCreateComment" contentDisplay="GRAPHIC_ONLY" disable="true" mnemonicParsing="false" onAction="#createCommentAction" styleClass="buttonicon" text="New Comment">
                     <graphic>
                        <ImageView fitHeight="20.0" fitWidth="20.0" pickOnBounds="true" preserveRatio="true" styleClass="icon">
                           <image>
                              <Image url="@../img/comment.png" />
                           </image>
                        </ImageView>
                     </graphic>
                     <tooltip>
                        <Tooltip text="Create a new comment" />
                     </tooltip>
                  </Button>
               </children>
            </VBox>
         </children>
      </HBox>
   </top>
   <center>
        <ScrollPane fx:id="mainScrollPane" fitToHeight="true" fitToWidth="true" hbarPolicy="NEVER" BorderPane.alignment="CENTER">
           <content>
            <HBox fx:id="chapterContentContainer">
               <children>
                  <Region fx:id="chapterContentSeparator" prefWidth="50.0" styleClass="text-comments-separator" />
                    <VBox fx:id="commentBoxContainer" prefWidth="200.0" />
               </children>
            </HBox>
           </content>
         <opaqueInsets>
            <Insets />
         </opaqueInsets>
        </ScrollPane>
   </center>
   <styleClass>
      <String fx:value="binocles-pane" />
      <String fx:value="chapter-pane" />
   </styleClass>
</fx:root>

Here's my code:

package com.github.sylordis.binocles.ui.views;

import java.io.IOException;
import java.net.URL;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;
import java.util.Optional;
import java.util.ResourceBundle;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.fxmisc.richtext.StyleClassedTextArea;

import com.github.sylordis.binocles.model.review.Comment;
import com.github.sylordis.binocles.model.text.Book;
import com.github.sylordis.binocles.model.text.Chapter;
import com.github.sylordis.binocles.ui.BinoclesController;
import com.github.sylordis.binocles.ui.components.CommentBox;
import com.github.sylordis.binocles.ui.dialogs.CommentDetailsDialog;
import com.github.sylordis.binocles.ui.functional.CommentBoxComparator;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.IndexRange;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;

/**
 * Pane component for a chapter.
 */
public class ChapterView extends BorderPane implements Initializable, BinoclesTabPane {

	private Chapter chapter;
	private Book book;
	private BinoclesController mainController;
	private List<CommentBox> commentBoxes;
	private final Logger logger = LogManager.getLogger();

	/**
	 * Text area for chapter content.
	 */
	private StyleClassedTextArea chapterContent;

	private Comparator<Node> commentBoxComparator;

	@FXML
	private Button toolbarCreateComment;
	@FXML
	private HBox chapterHeader;
	@FXML
	private Text chapterTitle;
	@FXML
	private Text bookTitle;
	@FXML
	private ScrollPane mainScrollPane;
	@FXML
	private HBox chapterContentContainer;
	@FXML
	private Region chapterContentSeparator;
	@FXML
	private VBox commentBoxContainer;


	public ChapterView(BinoclesController mainController, Book book, Chapter chapter) {
		super();
		this.mainController = mainController;
		this.book = book;
		this.chapter = chapter;
		this.commentBoxComparator = new CommentBoxComparator();
		commentBoxes = new ArrayList<>();
		FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("chapter_view.fxml"));
		fxmlLoader.setRoot(this);
		fxmlLoader.setController(this);
		try {
			fxmlLoader.load();
		} catch (IOException exception) {
			throw new RuntimeException(exception);
		}

	}

	@Override
	public void initialize(URL location, ResourceBundle resources) {
		// Titles
		chapterTitle.setText(chapter.getTitle());
		bookTitle.setText(book.getTitle());
		// Chapter content
		chapterContent = new StyleClassedTextArea();
		chapterContent.setEditable(false);
		chapterContent.setStyle(null);
		chapterContent.setWrapText(true);
		chapterContent.replaceText(chapter.getText());
		chapterContentContainer.getChildren().add(0, chapterContent);
		HBox.setHgrow(chapterContent, Priority.ALWAYS);
		// Comment boxes
		chapter.getComments().forEach(this::createCommentBox);
		sortCommentBoxes();
		// Listeners
		chapterContent.selectionProperty()
		        .addListener((s, o, n) -> toolbarCreateComment.setDisable(n == null || n.getLength() == 0));
	}

	@FXML
	public void createCommentAction(ActionEvent event) {
		IndexRange selectRange = chapterContent.getSelection();
		CommentDetailsDialog dialog = new CommentDetailsDialog(mainController.getModel(), book, chapter,
		        selectRange.getStart(), selectRange.getEnd());
		Optional<Comment> answer = dialog.display();
		if (answer.isPresent()) {
			chapter.addComment(answer.get());
			logger.info("New comment on {}: {}", chapter, answer.get());
			createCommentBox(answer.get());
			sortCommentBoxes();
			logger.debug("Comment boxes: {}", commentBoxContainer.getChildren().size());
		}
	}

	/**
	 * @param comment
	 */
	private void createCommentBox(Comment comment) {
		CommentBox cbox = new CommentBox(comment);
		commentBoxes.add(cbox);
		commentBoxContainer.getChildren().add(cbox);
	}

	private void sortCommentBoxes() {
		ObservableList<Node> boxes = FXCollections.observableArrayList(commentBoxContainer.getChildren());
		FXCollections.sort(boxes, commentBoxComparator);
		commentBoxContainer.getChildren().clear();
		commentBoxContainer.getChildren().addAll(boxes);
	}
	
	@Override
	public Object getItem() {
		return chapter;
	}

}

Full text:

Text is partially hidden, there should already be a need for a scrollbar:

The scrollbar only appears for the comments:

[Jugen]

To address the "Text is partially hidden, there should already be a need for a scrollbar" issue (2nd image above), try wrapping the StyleClassedTextArea in a Group.

For the actual scrolling part, try the following:

chapterContent.addEventFilter( ScrollEvent.ANY, SE ->
{
    ScrollEvent.fireEvent( chapterContentContainer, SE );
    SE.consume();
} );

[Sylordis]

The scrolling part works like a charm, smart move. After wrapping the area in the Group though, it's of the size of a tiny square now... Aren't groups supposed to size to their children?

[Jugen]

The scrolling part works like a charm

That's great.

Group is unique in that it doesn't auto size it's children. The idea was to isolate the sizing of the text area from its parent containers so that the scrollbar can work properly. So, in order for this to work you'd need to manually specify the text area's dimensions.

However I've had another look and think I've found a better way than using Group.
Instead I suggest trying chapterContent.setAutoHeight( true );.

[Sylordis]

Unfortunately this doesn't change much things. The text area has indeed a bigger height if the comments' size reaches below it, but stops at the window's current height without affecting the scrollbar (screenshots provided below).

Regarding the group and the size, it seems that setting a preferred size for the text area prevents it from resizing (according to HBox hgrow always policy) when making the window bigger.

Screenshots

[Sylordis]

Alright, I seem to have solved the issue, thanks to @Jugen .

Indeed from #1240 (comment) using setAutoHeight(true) was what mostly solved the problem.

Somehow the rest of the problem came from the ScrollPane, which was set to fitToHeight="true" in the FXML. Removing this setting is resulting in the proper layout now, with the text area who is always fully expanded and scrollable with the external scrollbar.