How to force a container to updates it's size when the size of it's children changes*

JuxxecJuxxec Posts: 5Member

Greetings,

I have the following setup:

A GraphNode with a Button and a ViewportContainer. I want the Button to toggle the visibility of the ViewportContainer. I also want the GraphNode to shrink in size when the ViewportContainer is not visible.

This is how it looks when the ViewportContainer is visible:

This is how it looks when the ViewportContainer is not visible:

This is how I want it to look:

I attached a demo project:
https://drive.google.com/file/d/1PPpW91TUx3abXqBrUSbvsHaan04n7fkd/view?usp=sharing

Ideally I want to use a container that would update it's size when it's children change. I could not get the ViewportContainer to expand to fit all of the available space (using anchors, margins and the size flags) so I opted to use a min rect size y. I noticed that when I do that the GraphNode does not want to shrink below the min size of the ViewportContainer, even though the container is not visible. In code I tried:

  • Set the min rect size of the ViewportContainer to 0 from the ViewportContainer script
  • Set the visibility of the container to false from the ViewportContainer script
  • set_anchor_and_margins to manually to make the GraphNode and ViewportContainer to update from the ViewportContainer script
  • queue_sort() from the ViewportContainer script
  • get_parent_control().queue_sort() from the ViewportContainer script
  • emit "resized" signal from the ViewportContainer script

Does anybody know how I can achieve the effect described above?


Tags :

Best Answer

  • JuxxecJuxxec Posts: 5
    Accepted Answer

    Okay, so I managed to figure it out in my case. What I did is to adjust the rect_size of the GraphNode when the ViewportContainer is visible/ invisible like so:

    extends CenterContainer
    
    var preview_visible = true
    
    func _on_Button_pressed():
        var preview_container = get_node("../PreviewContainer")
        if (self.preview_visible):
            $Button.set_text("Show Preview")
            preview_container.visible = false
            preview_container.rect_min_size = Vector2()
            get_parent_control().rect_size -= Vector2(0, 150)
        else:
            $Button.set_text("Hide Preview")
            preview_container.visible = true
            preview_container.rect_min_size = Vector2(0, 150)
            get_parent_control().rect_size += Vector2(0, 150)
    
        self.preview_visible = !self.preview_visible
    

    I had to reduce the min size of the CenterContainer when it is invisible and restore it when it is visible. The key here is adjusting the parent rect size with

    get_parent_control().rect_size
    

Answers

  • JuxxecJuxxec Posts: 5Member
    Accepted Answer

    Okay, so I managed to figure it out in my case. What I did is to adjust the rect_size of the GraphNode when the ViewportContainer is visible/ invisible like so:

    extends CenterContainer
    
    var preview_visible = true
    
    func _on_Button_pressed():
        var preview_container = get_node("../PreviewContainer")
        if (self.preview_visible):
            $Button.set_text("Show Preview")
            preview_container.visible = false
            preview_container.rect_min_size = Vector2()
            get_parent_control().rect_size -= Vector2(0, 150)
        else:
            $Button.set_text("Hide Preview")
            preview_container.visible = true
            preview_container.rect_min_size = Vector2(0, 150)
            get_parent_control().rect_size += Vector2(0, 150)
    
        self.preview_visible = !self.preview_visible
    

    I had to reduce the min size of the CenterContainer when it is invisible and restore it when it is visible. The key here is adjusting the parent rect size with

    get_parent_control().rect_size
    

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file