快捷導(dǎo)航

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

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

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

前言

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

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

//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)過選中樣式的配置，默認(rèn)顯示的樣式。

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

定制的選中樣式

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

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

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

節(jié)點(diǎn)選中時(shí)候增加操作按鈕

在節(jié)點(diǎn)的被選中的額時(shí)候，有的時(shí)候需要對選中的節(jié)點(diǎn)直接進(jìn)行的操作。所以在選中的模板中增加配置，可以在上下左右的中心位置增加按鈕。其顯示位置可以參考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é)點(diǎn)",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "刪除此節(jié)點(diǎn)",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "查看節(jié)點(diǎn)信息詳情",  
            { font: "bold 6pt sans-serif" })
        ),
        $$("Button",
            $$(go.TextBlock, "修改節(jié)點(diǎn)信息",  
            { font: "bold 6pt sans-serif" })
        )
    ),
    )  
}

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

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

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

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ǎn)選中變化綁定的回調(diào)函數(shù)。其參數(shù)node則是節(jié)點(diǎn)的對象信息，可以通過node.data來獲取到節(jié)點(diǎn)的數(shù)據(jù)。然后通過節(jié)點(diǎn)的對象信息node.findObject獲取到的是節(jié)點(diǎn)內(nèi)的一個(gè)元素對象，其查找規(guī)則是通過節(jié)點(diǎn)元素的name來進(jìn)行查找，然后通過node.isSelected來判斷節(jié)點(diǎn)是否選中，所以在選中的節(jié)點(diǎn)給修改一個(gè)顏色，沒有選中的節(jié)點(diǎn)依然配置之前節(jié)點(diǎn)中的數(shù)據(jù)顏色。

總結(jié)

在可視化圖形的使用中.如果節(jié)點(diǎn)數(shù)據(jù)過多，我們就需要著重對研究的節(jié)點(diǎn)一個(gè)突出的樣式來和其他節(jié)點(diǎn)進(jìn)行一個(gè)區(qū)分。因此這個(gè)時(shí)候我們點(diǎn)擊選中修改選中的樣式就顯得比較重要，可以根據(jù)需求進(jìn)行拓展。

以上就是詳解GoJs節(jié)點(diǎn)的選中高亮實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于GoJs節(jié)點(diǎn)選中高亮的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: