<@U4487KCH1> Try this out. Use Clipping to restri...

# tornadofx

[carlw]

@thlinde Try this out. Use Clipping to restrict the viewport of your content. This will prevent the transition from rolling over the navigation controls. I have some EventBus stuff that I use for navigation that isn't important for the demo.

For anyone who wants to see what thomas' problem was, comment out the onDock() in my code sample. You'll see that when Content 1 and Content 2 are replaced, the view slides over the nav button and under the user's mouse.

Clipping_to_Prevent_Slide_Over_Nav_Controls.kt

[ValV]

There's some trouble with clipping - it clips the right side as well as the left one for some initial size. Perhaps then content.clip will need to be updated on every resize event

[ValV]

But clipping works

[ValV]

content = vbox {
  add(content1Fragment)
  widthProperty().addListener { _ -> clip = Rectangle(width, height) }
  heightProperty().addListener { _ -> clip = Rectangle(width, height) }
}

I've found no better way to do it

[carlw]

I think it's the right abstraction too. We don't always think of a z-order since popular containers like VBox snap their contents into place. However, if you put an offset in with translateX and translateY, the child will overflow its layout boundary. Clipping reinforces the child position by refusing to translate outside of the layout boundary

[ValV]

I think, it's a good idea to add clipping to a component by default. I think in most cases developers will think of animation component-wise, not stage-wise

[carlw]

no, the default is to let the contents translate over other components. we'd want to keep that

[ValV]

Backward compatibility?