详解GoJs节点的选中高亮实现示例

//data
myDiagram: null,
  nodes:[
    { key: "1", color: "#99FFFF",text:"三国",figure:"Rectangle" },
    { key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
    { key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
    { key: "1-3", color: "#0000FF",text:"吴",figure:"Circle" },
  ],
  links:[
    {
      from:"1",
      to:"1-1"
    },
    {
      from:"1",
      to:"1-2"
    },
    {
      from:"1",
      to:"1-3"
    },
  ]
  //methods
 this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
    layout: $$(go.TreeLayout),
  });
  this.myDiagram.nodeTemplate =
    $$(go.Node, "Vertical",
    $$(go.Shape, "Circle",
        { width: 30, height: 30 },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
      ),
    $$(go.TextBlock, 
        new go.Binding("text", "text"))
   );
   this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

this.myDiagram.nodeTemplate =
    $$(go.Node, "Vertical",
    { selectionObjectName: "ICON" },
    $$(go.Shape, "Circle",
        { width: 30, height: 30,name:"ICON" },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
      ),
    $$(go.TextBlock, 
        new go.Binding("text", "text"))
);

{
    selectionAdornmentTemplate:
    $$(go.Adornment, "Auto",
        $$(go.Shape, "Rectangle",
        { fill: null, stroke: "#67B73C", strokeWidth: 8 }),
        $$(go.Placeholder)
    )  
}

{
selectionAdornmentTemplate:
    $$(go.Adornment, "Spot",
    $$(go.Panel, "Auto",
        $$(go.Shape, { fill: null, stroke: "#67B73C", strokeWidth: 5 }),
        $$(go.Placeholder)
    ),
    $$(go.Panel, "Vertical",{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, },  
         $$("Button",
            $$(go.TextBlock, "增加新的子节点",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "删除此节点",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "查看节点信息详情",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "修改节点信息",  
            { font: "bold 6pt sans-serif" })
        )
    ),
    )  
}

this.myDiagram.nodeTemplate =
    $$(go.Node, "Vertical",
    { selectionAdorned: false,selectionChanged: this.onSelectionChanged }, 
    $$(go.Shape, "Circle",
        { width: 30, height: 30,name:"ICON" },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
      ),
    $$(go.TextBlock, 
        new go.Binding("text", "text")),
)
onSelectionChanged(node){
    let icon = node.findObject("ICON");
    if (icon !== null) {
    if (node.isSelected)
        icon.fill = "#67B73C";
    else
        icon.fill = node.data.color;
    }
}