用 GoJS 折叠节点展开节点

2023-09-18 02:20:05

简介

在可视化图形中，当数据量较大时，为了保持图形的清晰性和易读性，通常需要对节点内显示的内容进行隐藏。除了使用提示信息显示隐藏内容外，还可以通过折叠展开按钮对内容进行折叠，以便在需要时展开查看详细信息。本文将介绍如何在 GoJS 中为节点添加折叠和展开功能。

实现折叠展开功能

在 GoJS 中，可以通过设置节点模板的“expandable”属性为 true 来启用节点的折叠展开功能。expandable 为一个布尔值，表示节点是否可以折叠或展开。

// 设置节点模板的 expandable 属性为 true
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "white", strokeWidth: 2, stroke: "black" }),
    $(go.Panel, "Vertical",
      { name: "HEADER", },
      $(go.TextBlock,
        { margin: 4,
          font: "bold 12pt Helvetica, Arial, sans-serif",
          textAlign: "center" },
        new go.Binding("text", "text")),
      $(go.TextBlock,
        { font: "bold 12pt Helvetica, Arial, sans-serif",
          margin: 4,
          textAlign: "center",
          name: "collpaseExpandButton",
          cursor: "pointer" },
        new go.Binding("text", "isCollapsed", function(v) {
          return v ? "+" : "-";
        }),
        { click: function(e, obj) {
          var part = obj.part;
          if (part.isCollapsed) {
            part.isCollapsed = false;
          } else {
            part.isCollapsed = true;
          }
        } }),
      ),
    ),
    $(go.Panel, "Vertical",
      { name: "COLLAPSIBLE_PANEL", },
      $(go.TextBlock,
        { margin: 4,
          text: "折叠展开",
          textAlign: "center" },
        new go.Binding("visible", "isCollapsed", function(v) {
          return !v;
        })
        )
      )
  );

在上面的代码中，我们设置了节点模板的 expandable 属性为 true，并添加了一个折叠展开按钮到节点的标题部分。当点击按钮时，它会根据节点当前的状态（已折叠或已展开）切换节点的状态。

折叠展开状态的绑定

当节点被折叠或展开时，我们需要更新节点上显示的文本内容。为此，我们需要绑定节点的“isCollapsed”属性到按钮上的文本内容。

// 绑定节点的 isCollapsed 属性到按钮文本内容
myDiagram.nodeTemplate.findObject("collpaseExpandButton").bind(
  new go.Binding("text", "isCollapsed", function(v) {
    return v ? "+" : "-";
  })
);

隐藏可折叠面板

当节点处于折叠状态时，我们需要隐藏可折叠面板。我们可以通过绑定节点的“isCollapsed”属性到可折叠面板的可见性来实现这一目的。

// 绑定节点的 isCollapsed 属性到可折叠面板的可见性
myDiagram.nodeTemplate.findObject("COLLAPSIBLE_PANEL").bind(
  new go.Binding("visible", "isCollapsed", function(v) {
    return !v;
  })
);

示例

下面是一个使用 GoJS 实现折叠展开功能的示例：

// 创建一个 GoJS 图表
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "animationManager.isEnabled": true, })

// 设置节点模板
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "white", strokeWidth: 2, stroke: "black" }),
    $(go.Panel, "Vertical",
      { name: "HEADER", },
      $(go.TextBlock,
        { margin: 4,
          font: "bold 12pt Helvetica, Arial, sans-serif",
          textAlign: "center" },
        new go.Binding("text", "text")),
      $(go.TextBlock,
        { font: "bold 12pt Helvetica, Arial, sans-serif",
          margin: 4,
          textAlign: "center",
          name: "collpaseExpandButton",
          cursor: "pointer" },
        new go.Binding("text", "isCollapsed", function(v) {
          return v ? "+" : "-";
        }),
        { click: function(e, obj) {
          var part = obj.part;
          if (part.isCollapsed) {
            part.isCollapsed = false;
          } else {
            part.isCollapsed = true;
          }
        } }),
      ),
    ),
    $(go.Panel, "Vertical",
      { name: "COLLAPSIBLE_PANEL", },
      $(go.TextBlock,
        { margin: 4,
          text: "折叠展开",
          textAlign: "center" },
        new go.Binding("visible", "isCollapsed", function(v) {
          return !v;
        })
        )
      )
  );

// 加载数据
myDiagram.model =
  new go.Model({ nodeDataArray: [
    { key: "1", text: "节点 1", isCollapsed: false },
    { key: "2", text: "节点 2", isCollapsed: true },
    { key: "3", text: "节点 3", isCollapsed: false },
  ] });