How to display Pane with non-rectangle shape in JavaFX?

I've met a problem in JavaFX.

This is what show in Jasperserver (A server), Adhoc-Model (One of a model of server).

As you can see, the pink area, is a type of HTML < li > Tag. It can display UI with a non-rectangle shape. Like Tetris?

However, I'am trying to do the same thing in JavaFX but failed.

I used a FlowPane as Pane A, and put some Label into Pane A. Then I used a little FlowPane as Pane B, also put some Label into Pane B. At last, I put Pane B into Pane A.

It's shown as following image.

Image: Shown in JavaFX

As you can see, I failed to display the Pane B with a non-rectangle shape. And I think it is not very easy to do that.

Can anybody help me ? Your answer will be appreciated. Thank you very much.

If anyone need my code, please tell me. I will rewrite some simple code and put on here.

Solution

Thanks @James_D Very Much.

I've written a custom pane which extends FlowPane, and overridden layoutChildren() function.

It works !

Following is my code:

import java.util.ArrayList;
import java.util.List;

import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;

public class LayoutFlowPane extends FlowPane {

    private class Child {
        Node node;
        double x, y, w, h;
        double blft, midy;
        public Child(Node node,
                double x, double y, double w, double h,
                double blft, double midy) {
            super();
            this.node = node;
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            this.blft = blft;
            this.midy = midy;
        }
    }

    private List<Child> children = new ArrayList<>();
    private List<Double> midys = new ArrayList<>();

    public LayoutFlowPane() {
        super();
    }

    @Override protected void layoutChildren() {

        super.layoutChildren();

        Insets insets = getInsets();
        double width = getWidth();
        double height = getHeight();
        double top = insets.getTop();
        double left = insets.getLeft();
        double bottom = insets.getBottom();
        double right = insets.getRight();
        double maxw = width - left - right;
        double maxh = height - top - bottom;
        double hgap = snapSpace(this.getHgap());
        double vgap = snapSpace(this.getVgap());

        storeChildren();

        adjustChildren(maxw, maxh, hgap, vgap);

        children.forEach(child -> {
            layoutInArea(
                    child.node, child.x, child.y, 
                    child.w, child.h, child.blft, getMargin(child.node),
                    getColumnHalignmentInternal(), getRowValignmentInternal()
            );
        });
    }

    private void storeChildren() {
        children = new ArrayList<>();
        for (int i = 0; i < getChildren().size(); i ++) {
            Node child = getChildren().get(i);
            double x = child.getLayoutX();
            double y = child.getLayoutY();
            double w = 0;
            double h = 0;
            if (child instanceof Region) {
                Region region = (Region) child;
                w = region.getWidth();
                h = region.getHeight();
            } else {
                throw new UnknowTypeException("Unknow type found.");
            }
            double blft = child.getBaselineOffset();
            double midy = (y + y + h) / 2;
            Child newChild = new Child(child, x, y, w, h, blft, midy);
            children.add(newChild);
        }
        midys = new ArrayList<>();
        for (int i = 0; i < children.size(); i ++) {
            Child child = children.get(i);
            if (midys.isEmpty() || midys.get(midys.size()-1) != child.midy) {
                midys.add(child.midy);
            }
        }
    }

    private void adjustChildren(double maxw, double maxh, double hgap, double vgap) {
        for (int i = 1; i < children.size(); i ++) { // begin with 1
            Child pc = children.get(i-1);
            Child ch = children.get(i);
            boolean bothGridPane = (pc.node instanceof GridPane) && (ch.node instanceof GridPane); 
            double x = pc.x + pc.w + (bothGridPane ? 0 : hgap);
            double midy;
            if (x + ch.w <= maxw) { // ThisLine
                midy = pc.midy;
                ch.x = x;
                ch.y = gety(ch.y, ch.midy, midy);
                ch.midy = midy;
            } else { // NextLine
                midy = getNextMidy(pc.midy);
                ch.x = children.get(0).x;
                ch.y = gety(ch.y, ch.midy, midy);
                ch.midy = midy;
            }
        }
    }

    private double getNextMidy(double midy) {
        for (int i = 0; i < midys.size(); i ++) {
            if (i + 1 < midys.size() && midys.get(i) == midy && midys.get(i+1) != midy) {
                return midys.get(i+1);
            } else if (i + 1 == midys.size() && midys.get(i) == midy) {
                return midys.get(i);
            }
        }
        throw new NotFoundException("Next midy not found.");
    }

    private double gety(double oldy, double oldMidy, double newMidy) {
        return oldy + (newMidy - oldMidy);
    }

    private HPos getColumnHalignmentInternal() {
        HPos localPos = getColumnHalignment();
        return null == localPos ? HPos.LEFT : localPos;
    }

    private VPos getRowValignmentInternal() {
        VPos localPos =  getRowValignment();
        return null == localPos ? VPos.CENTER : localPos;
    }

    private class UnknowTypeException extends RuntimeException {
        private static final long serialVersionUID = 1L;
        public UnknowTypeException(String message) {
            super(message);
        }
    }

    private class NotFoundException extends RuntimeException {
        private static final long serialVersionUID = 1L;
        public NotFoundException(String message) {
            super(message);
        }
    }

}