Java FX SplitPane

Question

I have two Canvas instances in my SplitPane. When I drag the divider bar, one Canvas grows. When I drag the divider back, the Canvas doesn't really shrink. It holds the same maximum dimension as it was ever given by the resize. So I only see a part of that Canvas, however much space the SplitPane can show. Similar behavior occurs for the other Canvas. I need them to shrink back to fit into their respective sections when the divider is dragged, not just have them clipped.

The Canvases are wrapped in a one-element GridPane subclass before being added to the SplitPane. This wrapper class resizes the Canvas whenever the wrapper resizes.

The problem is that the SplitPane is giving the wrong sizes: whatever the maximum size ever was for that Canvas. Why would the SplitPane think this is the right thing to do?

Answer 1

package experimental;

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class SplitPaneProblem extends Application {

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

    public SplitPaneProblem() { }

    @Override
    public void start(Stage primaryStage) throws Exception {
        SplitPane splitPane = new SplitPane();
        splitPane.setOrientation(Orientation.VERTICAL);
        splitPane.getItems().add(new TestPane("0",new Canvas()));
        splitPane.getItems().add(new TestPane("1",new Canvas()));
        primaryStage.setScene(new Scene(splitPane));
        primaryStage.setHeight(400);
        primaryStage.setWidth(400);
        primaryStage.show();
    }

    public class TestPane extends AnchorPane {

        String name;
        Canvas canvas;

        public TestPane(String name,Canvas canvas) {
            super();
            this.canvas = canvas;
            getChildren().add(canvas);
//1         canvas.setManaged(false);
            this.name = name;
        }

        @Override
        public void resize(double width,double height) {
            System.out.println(name+" input  "+width+' '+height);
            super.resize(width, height);
            System.out.println(name+" panel  "+getWidth()+' '+getHeight());
//0         canvas.setWidth (width);
//0         canvas.setHeight(height);
            System.out.println(name+" canvas "+canvas.getWidth()+' '+canvas.getHeight());
        }
    }
}

Canvas doesn't resize by itself. Run the code as shown, and drag the divider up and down. Read the console output. The size of the Canvas instances never changes from (0,0).

Uncomment the lines beginning with //0 and run it again. Now the Canvas instances are forcibly resized to the size of their containing panes. Drag the divider up and down. Note that the Canvas instances grow vertically, but they never shrink, even though the code tells them to. Imagine we were drawing an X across the corners of the Canvases. These X drawings would grow with the divider. But when you drag the divider the other direction, the image is clipped, but it never shrinks.

Uncomment the line beginning with //1 and run it again. Now it works.

I don't know about you, but I think this is bizarre.

Answer 2

Based on this post from Jasper Potts, you can create a resizable canvas, and use it in your split pane.

class ResizableCanvas extends Pane {

    private final int id;
    private final Canvas canvas = new Canvas();

    public ResizableCanvas(int id) {
        this.id=id;
        getChildren().add(canvas);
    }

    @Override
    protected void layoutChildren() {
        final int top = (int)snappedTopInset();
        final int right = (int)snappedRightInset();
        final int bottom = (int)snappedBottomInset();
        final int left = (int)snappedLeftInset();
        final int w = (int)getWidth() - left - right;
        final int h = (int)getHeight() - top - bottom;
        canvas.setLayoutX(left);
        canvas.setLayoutY(top);
        if (w != canvas.getWidth() || h != canvas.getHeight()) {
            canvas.setWidth(w);
            canvas.setHeight(h);
            GraphicsContext gc = canvas.getGraphicsContext2D();
            gc.clearRect(0, 0, w, h);
            if(id==1){
                gc.setFill(Color.BLUE);                
                gc.fillOval(5, 5, w-10, h-10);
            } else {
                gc.setFill(Color.RED);
                gc.fillRect(10, 10, w-20, h-20);
            } 
        }
    }
}

@Override
public void start(Stage stage) throws Exception {
    ResizableCanvas canvas1 = new ResizableCanvas(1);
    ResizableCanvas canvas2 = new ResizableCanvas(2);

    SplitPane split = new SplitPane();
    split.getItems().addAll(canvas1,canvas2);

    stage.setScene(new Scene(split, 600, 400));
    stage.show();
}

Note that everytime the scene is resized or the split content divider is moved, both canvases will be redrawn, but always with the exact size of their respective panes. As he also suggests, you may consider snapshot your canvas contents, and use an image to improve performance.