详解GoJs节点的折叠展开实现

2023-05-18 20:07

短信预约 -IT技能 免费直播动态提醒

前言

前面的文章中提到了提示信息(toolTip)在节点信息内容过多的时候，需要节点信息的内容进行隐藏，在鼠标移入的时候进行未显示信息的提示框形式的选中，本文讲从另外的角度处理在画布上的可视化图形的内容过多的时候的处理情况，一种是把节点的内部的折叠和展开，另外一种就是对部分节点进行折叠和展开。

节点折叠展开的不同情况

对于节点的折叠展开分几种情况。第一种是对于树形布局的特有属性可以对树形布局后代的节点进行一个折叠展开，第二种是前面文章提到的go.Group(组)和go.Panel(面板)内部的内容也就是节点内部信息的折叠和展开。

树形布局特有的属性后代节点的折叠展开

this.myDiagram.nodeTemplate =
$$(go.Node, "Spot",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",
            { width: 30, height: 30},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.TextBlock, 
            new go.Binding("text", "text")),
    ),
    $$("TreeExpanderButton",
    { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
    )
);

因为属性布局的特殊性，有明确的父子关系。因此gojs内部给内置了名字为TreeExpanderButton的树图折叠展开按钮，在使用的时候只需要根据自己的脑图朝向把图形折叠展开按钮的按钮根据Spot(点布局)给放置到和后代节点解除的位置就可以了。默认可以实现树形结构的折叠展开。

go.Group(组)的内部元素的展开折叠

前文中提到，可以给节点中的属性isGroup设置true。将此节点设置为组的父级显示内容。然后通过其他节点内部的属性group为组的父级节点的key值，来渲染组的上下级关系。代码示例如下

this.myDiagram.groupTemplate  =
$$(go.Group, "Horizontal",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",{width:200,height:200},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.Panel,"Horizontal",
            $$("SubGraphExpanderButton",{ margin: new go.Margin(0, 3, 5, 0)}),
            $$(go.TextBlock, 
                new go.Binding("text", "text")),
        ),
    ),
);
this.myDiagram.nodeTemplate  =
$$(go.Node, "Auto",
    $$(go.Shape, "Circle",{width:50,height:50},
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
    ),
    $$(go.TextBlock, 
        new go.Binding("text", "text")),
);

组布局有自己的布局模板为groupTemplate，可以根据组布局模板对组的整体样式进行调整。当然在组内的其他节点仍然可以通过nodeTemplate来设置自己的样式。组的展开折叠的属性是SubGraphExpanderButton，可以把组的展开折叠按钮作为一个普通的绘图节点调整想要现实的额位置，其功能为gojs内置，可以直接使用其功能。

go.Panel(面板)的内部元素的展开折叠

在节点图形的模板配置中，如果我们想调整其他的绘图模板的位置，需要两个绘图模板当成一个整体进行布局展示，例如go.Shape(几何图形)和go.TextBlock(文本信息)在节点内相对位置不变的需求下，是不能直接把go.TextBlock(文本信息)放到go.Shape(几何图形)内部的，如果想要两个位置相对绑定，就需要把两个绘图模板放到同一个go.Panel(面板之下)。因此对于面板内的元素也可以实现一个展开折叠。

//data
nodes: [
    {
      key: 1,
      text:"三国",
      list1: ["魏", "蜀", "吴"],
    },
],
//methods
this.myDiagram.nodeTemplate = $$(
go.Node,
"Auto",
$$(go.Shape, "Rectangle", { fill: "#67B73C",width:100,height:100 }),
$$(
  go.Panel,
  "Table",
  { column: 0 },
  $$(go.TextBlock, {
    column: 0,
    margin: new go.Margin(3, 3, 0, 3),
    font: "bold 12pt sans-serif",
  },new go.Binding("text", "text")),
  $$("PanelExpanderButton", "LIST1", { column: 1 }),
  $$(
    go.Panel,
    "Vertical",
    { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
    new go.Binding("itemArray", "list1")
  )
)
);