JavaFX resize rotated object to GridPane cell - javafx-8

Question

I have a problem with the orientation of a node (GridPane) after rotating it with setRotate() in JavaFX. When i rotate the node and put it in a cell of the GridPane, I would like the rotated node to fit inside the cell and also resize with the cell. I added some sample code to show you what I would like the result to be.
public class MonopolyApp extends Application {
#Override
public void start(Stage primaryStage) {
//Construction of the grid
GridPane square = new GridPane();
square.setGridLinesVisible(true);
final int heightPercent = 14;
final int widthPercent = 8;
RowConstraints rowsEdge = new RowConstraints();
rowsEdge.setPercentHeight(heightPercent);
RowConstraints rowsMid = new RowConstraints();
rowsMid.setPercentHeight(widthPercent);
ColumnConstraints colEdge = new ColumnConstraints();
colEdge.setPercentWidth(heightPercent);
ColumnConstraints colMid = new ColumnConstraints();
colMid.setPercentWidth(widthPercent);
square.getColumnConstraints().addAll(colEdge, colMid,
colMid, colMid, colMid, colMid, colMid, colMid, colMid, colMid, colEdge);
square.getRowConstraints().addAll(rowsEdge, rowsMid,
rowsMid,rowsMid,rowsMid,rowsMid,rowsMid,rowsMid, rowsMid,rowsMid, rowsEdge);
GridPane wrongSuare = makeMonopolySquare();
square.add(wrongSuare, 0, 4);
wrongSuare.setRotate(90);
GridPane rightSquare = makeMonopolySquare();
square.add(rightSquare, 1, 10);
Scene s = new Scene(square);
primaryStage.setHeight(500);
primaryStage.setWidth(500);
primaryStage.setScene(s);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
private GridPane makeMonopolySquare(){
GridPane monopolySquare = new GridPane();
RowConstraints top = new RowConstraints();
top.setPercentHeight(20);
RowConstraints bottom = new RowConstraints();
bottom.setPercentHeight(80);
ColumnConstraints c = new ColumnConstraints();
c.setPercentWidth(100);
monopolySquare.getRowConstraints().addAll(top,bottom);
monopolySquare.getColumnConstraints().addAll(c);
bottom.setValignment(VPos.CENTER);
monopolySquare.setGridLinesVisible(true);
Label name = new Label("name");
Pane colorPane = new Pane();
colorPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
colorPane.setBackground(new Background( new BackgroundFill(Color.BLUE, null, null)));
GridPane.setMargin(colorPane, new Insets(1));
monopolySquare.add(colorPane,0,0);
monopolySquare.add(name, 0, 1);
return monopolySquare;
}
}
If you run the code you will see that the GridPane at the bottom of the stage perfectly fits it's cell. But the rotated GridPane does not. I will also add a picture to show you what my problem is:
Does anyone know how to solve this? I know that I could put it in a group, but the problem with putting it in a group is that the group would not resize to the cell of the GridPane.

Answer 1

Well, that is a tough one. No optimal solution comes to mind, but if I was in your position, I would try to stay within the confinements of the layout (not use low-level operations like rotation).
For example, build a differently layout cell for each row/column:
private static Node makeMonopolySquare( final Layout layout )
{
final GridPane monopolySquare = new GridPane();
monopolySquare.setGridLinesVisible( true );
final Label label = new Label( "name" );
final StackPane name = new StackPane( label );
final Pane colorPane = new Pane();
GridPane.setMargin( colorPane, new Insets( 1 ) );
colorPane.setMaxSize( Double.MAX_VALUE, Double.MAX_VALUE );
colorPane.setBackground( new Background( new BackgroundFill( Color.BLUE, null, null ) ) );
final RowConstraints top = new RowConstraints();
final RowConstraints bottom = new RowConstraints();
// bottom.setValignment( VPos.CENTER );
// top.setValignment( VPos.CENTER );
final ColumnConstraints c = new ColumnConstraints();
c.setPercentWidth( 100 );
final ColumnConstraints right = new ColumnConstraints();
// right.setHalignment( HPos.CENTER );
final ColumnConstraints left = new ColumnConstraints();
// left.setHalignment( HPos.CENTER );
final RowConstraints r = new RowConstraints();
r.setPercentHeight( 100 );
switch ( layout )
{
case BOTTOM:
top.setPercentHeight( 20 );
bottom.setPercentHeight( 80 );
monopolySquare.getRowConstraints().addAll( top, bottom );
monopolySquare.getColumnConstraints().addAll( c );
monopolySquare.add( colorPane, 0, 0 );
monopolySquare.add( name, 0, 1 );
break;
case LEFT:
right.setPercentWidth( 20 );
left.setPercentWidth( 80 );
monopolySquare.getColumnConstraints().addAll( left, right );
monopolySquare.getRowConstraints().addAll( r );
monopolySquare.add( name, 0, 0 );
monopolySquare.add( colorPane, 1, 0 );
break;
case RIGHT:
right.setPercentWidth( 80 );
left.setPercentWidth( 20 );
monopolySquare.getColumnConstraints().addAll( left, right );
monopolySquare.getRowConstraints().addAll( r );
monopolySquare.add( colorPane, 0, 0 );
monopolySquare.add( name, 1, 0 );
break;
case TOP:
top.setPercentHeight( 80 );
bottom.setPercentHeight( 20 );
monopolySquare.getRowConstraints().addAll( top, bottom );
monopolySquare.getColumnConstraints().addAll( c );
bottom.setValignment( VPos.CENTER );
monopolySquare.add( colorPane, 0, 1 );
monopolySquare.add( name, 0, 0 );
break;
}
This however, will not rotate the label (which, I would argue is better anyways for a digital monopoly board ;) ). As soon as you rotate the label, you get the same problem you had with the cell, only smaller.
The full code example.