快捷導(dǎo)航

詳解GoJs節(jié)點的選中高亮實現(xiàn)示例

更新時間：2023年05月05日 10:22:18 作者：沅芷湘蘭

這篇文章主要為大家介紹了GoJs節(jié)點的選中高亮實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

上文中我們說到了，節(jié)點之間的文字描述。在有些時候我們要看兩個節(jié)點之間的關(guān)系，在數(shù)據(jù)量比較大的時候就需要給兩個節(jié)點給一個選中的樣式。在使用的過程中，gojs默認給了一個節(jié)點的選中樣式，就是一個藍色的邊框。

gojs節(jié)點選中高亮的使用

//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);

上圖是沒有經(jīng)過選中樣式的配置，默認顯示的樣式。

只選中節(jié)點內(nèi)部分元素的選中樣式

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"))
);

選中節(jié)點內(nèi)部元素的選中樣式只需要給內(nèi)部的繪圖模板的屬性加上name，然后給go.Node的屬性設(shè)置屬性selectionObjectName，然后保證selectionObjectName的屬性值和節(jié)點內(nèi)部元素的name的值保持一致，就可以在點擊節(jié)點選中的時候只是對部分圖形進行一個選中框選。

定制的選中樣式

如果根據(jù)自己的可視化圖形的顏色風(fēng)格，選中的顏色等樣式和圖形色調(diào)不搭配的話。就需要對圖形的選中樣式進行一個定制的配置，其使用方式和提示信息(toolTip)和右鍵菜單(contextMenu)一樣。都是和go.Node同級進行一個配置，其配置屬性為selectionAdornmentTemplate，代碼示例如下

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

如果需要對不同的集合圖形顯示不同的選中幾何圖形的話，例如上方正方向選中為正方向，圓形選中為圓形。也可以在模板中增加new go.Binding("figure"),進行圖形的動態(tài)配置。

節(jié)點選中時候增加操作按鈕

在節(jié)點的被選中的額時候，有的時候需要對選中的節(jié)點直接進行的操作。所以在選中的模板中增加配置，可以在上下左右的中心位置增加按鈕。其顯示位置可以參考toolTip或者contextMenu中的位置。

{
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, "增加新的子節(jié)點",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "刪除此節(jié)點",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "查看節(jié)點信息詳情",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "修改節(jié)點信息",  
            { font: "bold 6pt sans-serif" })
        )
    ),
    )  
}

由上圖可以知道，在節(jié)點的右面可以配置很多的按鈕，并且可以根據(jù)自己的需求對菜單的寬度進行一個統(tǒng)一，然后給不同的按鈕綁定對應(yīng)的點擊事件的回調(diào)函數(shù)，就可以實現(xiàn)選中時候的右面菜單的交互功能。

修改選中節(jié)點的內(nèi)部樣式

對于節(jié)點的選中,不僅可以給選中的節(jié)點加上不同樣式的框選樣式。并且可以對選中的節(jié)點更改一下節(jié)點內(nèi)部的樣式因為是調(diào)整了節(jié)點的內(nèi)部結(jié)構(gòu)，因此我們可以通過selectionAdorned: false來禁用默認的選中樣式，這樣就不會在選中的節(jié)點有框選元素了。然后根據(jù)節(jié)點選中狀態(tài)變化之后的鉤子函數(shù)selectionChanged綁定回調(diào)函數(shù)進行節(jié)點樣式的修改。我們以修改選中節(jié)點的背景顏色為例，代碼如下

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;
    }
}

由上面代碼和圖形可以知道，onSelectionChanged則是節(jié)點選中變化綁定的回調(diào)函數(shù)。其參數(shù)node則是節(jié)點的對象信息，可以通過node.data來獲取到節(jié)點的數(shù)據(jù)。然后通過節(jié)點的對象信息node.findObject獲取到的是節(jié)點內(nèi)的一個元素對象，其查找規(guī)則是通過節(jié)點元素的name來進行查找，然后通過node.isSelected來判斷節(jié)點是否選中，所以在選中的節(jié)點給修改一個顏色，沒有選中的節(jié)點依然配置之前節(jié)點中的數(shù)據(jù)顏色。