How to create a collapsable Figure in Graphiti?

Question

The Figure is made of multiple figures (all SVGFigure). I want the parent figure to have a button that change its state so it is rendered simplified (hiding most sub-figures and connectors)

What's the best way to achieve this?

Answer 1

I am not 100% sure if this is what you are looking for, but in my interpretation of the question:

I think you could add classnames to the figures that should not display in a certain state. With for example this pseudo HTML:

<input id="toggleButton" type="button">Toggle</input>
<svg>
    <shape1 class="complexOnly">
    <shape2 class="complexOnly">
    <shape3>
</svg>

And with the following JavaScript, appending an eventlistener for the button to toggle the state:

document.getElementById( "toggleButton" ).addEventListener("click", toggleSVGstate, false );
function toggleSVGstate() {
    this.classList.toggle( "simpleState" );
}

And with the CSS, that only applies to a certain state:

#toggleButton.simpleState>.complexOnly {
    display: none; /* Or visibility: hidden */
}

This means that the elements with the complexOnly class only show when the toggleButton is not in the simple-state (they hide in simple state). Note that the classList.toggle() is not fully crossbrowser, but you could find a crossbrowser one, as I'm simply offering the way to go/think.