javafx - How to add child node without affecting layout of GridPane parent -

i want create app using javafx. looks this:

i want add zoom function chart. when click button "zoom in", app become fig2. however, have no idea achieve it. when change size of pane included chart, change grid pane size, looks this:

you not want zoom considered gridpane layout. in can achieved applying transforms child of gridpane want modify.

the following example demonstrates how zoom node while mouse hovering on it:

private static region createregion(string background) {     region region = new region();     region.setstyle("-fx-background-color:"+background);     region.setprefsize(300, 100);     return region; }  @override public void start(stage primarystage) {     gridpane gp = new gridpane();      // create background     gp.add(createregion("green"), 0, 0);     gp.add(createregion("dodgerblue"), 0, 1);      // create region zoomed     region zoomregion = createregion("red");     gridpane.setfillwidth(zoomregion, boolean.false);     gridpane.setfillheight(zoomregion, boolean.false);     zoomregion.setprefwidth(100);     scale scale = new scale();     zoomregion.gettransforms().add(scale);      // keep pivot @ bottom left corner     scale.pivotyproperty().bind(zoomregion.heightproperty());      zoomregion.hoverproperty().addlistener((observable, oldvalue, newvalue) -> {         // adjust scale when hover state changed         double scalefactor = newvalue ? 1.5 : 1;         scale.setx(scalefactor);         scale.sety(scalefactor);     });      gp.add(zoomregion, 0, 1);      scene scene = new scene(gp);      primarystage.setscene(scene);     primarystage.show(); }