Change shape of component dynamically


I am trying to build a flow diagram where my nodes can be in 2 different states.

State 1 - Expanded. Will look like this: expanded

State 2 - Collapsed. Will look like this: collapsed

The bottom right corner where the chevron icon for expand/collapse operation is present has a sharp corner in Shape1(when it is expanded) and has a rounded edge in Shape 2(when it is collapsed).

How do I change the shape like this dynamically based on the click event on the chevron?

How are you defining the main body’s shape? Presumably you are using an “Auto” Panel. Its main element could be either a Shape with a particular Shape.geometry or Shape.geometryString, or it could be a Picture with a particular Picture.source. A Shape is generally better than a Picture. The “Auto” Panel’s other element (the contents) would probably be a “Table” Panel with the rest of the non-optional information. The “Auto” Panel can be either fixed size by setting its width and height, or it can vary in size based on the contents.

So you just need to replace the value of a Shape or Picture property when the value of your details Panel changes visibility. Something like:

      geometryString: ...,
      . . . other Shape properties
    new go.Binding("geometryString", "visible",
        function(v) { return v ? ... : ...; }).ofObject("Details"))

Where “Details” is the of your details Panel that is also referred to by the “PanelExpanderButton”, And where “…” are suitable geometry path strings: