javascript - 如何在 Graphiti 中创建可折叠图形？

Question

Figure 由多个图形组成（都是 SVGFigure）。我希望父图形有一个更改其状态的按钮，因此它被简化（隐藏大多数子图形和连接器）

实现这一目标的最佳方法是什么？

Answer 1

我不是 100% 确定这是否是您正在寻找的，但在我对问题的解释中：

我认为您可以将类名添加到不应在某种状态下显示的图形中。例如这个伪 HTML：

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

并使用以下 JavaScript，为按钮附加一个事件侦听器以切换状态：

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

而对于 CSS，这仅适用于特定状态：

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

这意味着具有 complexOnly 类的元素仅在切换按钮不处于简单状态时显示（它们隐藏在简单状态）。请注意，classList.toggle() 并非完全跨浏览器，但您可以找到一个跨浏览器，因为我只是提供了一种去/思考的方式。