快捷導(dǎo)航

GoJs中使用HTML方法示例

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

這篇文章主要為大家介紹了GoJs中使用HTML方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在gojs中因?yàn)橛凶约旱睦L圖模板和一些語法限制，實(shí)際上都是在canvas標(biāo)簽的特性上進(jìn)行的封裝。但是有些時(shí)候其拓展就不能滿足需求的時(shí)候，可以對(duì)其和html結(jié)構(gòu)進(jìn)行一些交互，達(dá)到自己顯示上的特殊需求的展示。

使用html的方式

本文將從提示信息、右鍵菜單、和文本編輯三個(gè)方面來體現(xiàn)gojs和html之間的交互。而對(duì)于html的使用交互過程中，最主要考慮到的就是html信息何時(shí)展示，何時(shí)隱藏.展示的時(shí)候展示到什么位置。而觸發(fā)的這個(gè)在gojs中是HTMLInfo的show和hide屬性。給show和hide綁定對(duì)應(yīng)的回調(diào)函數(shù)。

提示信息的html交互

在前面的文章中提到過提示信息的展示(toolTip)，并且講到了toolTip內(nèi)部的不同繪圖模板的的自定義類型。但是很多時(shí)候還是無法滿足一些特殊的展示的樣式，因此可以使用html渲染之后動(dòng)態(tài)展示因此就可以了。使用方法如下

//data
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.nodeTemplate = $$(
go.Node,
"Vertical",
{
    toolTip: myToolTip
},
$$(
  go.Shape,
  "Circle",
  { width: 30, height: 30, name: "ICON" },
  // new go.AnimationTrigger('stroke'),
  new go.Binding("fill", "color"),
  new go.Binding("figure", "figure")
),
$$(go.TextBlock, new go.Binding("text", "text"))
);
showToolTip(obj, diagram) {
    let toolTipDIV = document.getElementById('toolTipDIV');
    let pt = diagram.lastInput.viewPoint;
    toolTipDIV.style.left = (pt.x + 10) + "px";
    toolTipDIV.style.top = (pt.y + 10) + "px";
    document.getElementById('toolTipParagraph').textContent = "此節(jié)點(diǎn)的key為" + obj.data.key;
    toolTipDIV.style.display = "block";
},
hideToolTip(diagram) {
    let toolTipDIV = document.getElementById('toolTipDIV');
    toolTipDIV.style.display = "none";
}

show的回調(diào)函數(shù)showToolTip的兩個(gè)參數(shù)，第一個(gè)是obj，通過obj.data可以獲取到對(duì)應(yīng)鼠標(biāo)移入的節(jié)點(diǎn)數(shù)據(jù)。第二個(gè)參數(shù)為diagram，前面的文章中我們提到過，可以通過diagram.lastInput.viewPoint獲取到鼠標(biāo)觸發(fā)該回調(diào)函數(shù)時(shí)候的位置對(duì)象數(shù)據(jù)，其內(nèi)部為x,y屬性。然后給該位置一個(gè)偏移量顯示提示信息，就可以保證在鼠標(biāo)的旁邊展示。

右鍵菜單的html交互

右鍵菜單和html的交互和提示信息的相似，都是通過綁定方法來控制位置的顯示和隱藏。因此我們把contextMenu也配置成myToolTip。示例如下

{
    toolTip: myToolTip,
    contextMenu:myToolTip
}

由上圖可以看出在鼠標(biāo)移出或者右鍵點(diǎn)擊都可以觸發(fā)提示信息，但是不同的是提示信息有默認(rèn)顯示的時(shí)間，并且會(huì)自動(dòng)消失。但是右鍵點(diǎn)擊的時(shí)候因?yàn)闆]有觸發(fā)hideToolTip回調(diào)函數(shù)，因此不會(huì)自動(dòng)消失，需要點(diǎn)擊畫布才能把提示消息顯示消失。

文本編輯的html交互

文本編輯的交互和提示信息略有不同。因?yàn)槭俏谋揪庉?所以必須是輸入框類型的，但是還可以選select選擇器進(jìn)行有選項(xiàng)的編輯。下面以select為例，可以選擇所有節(jié)點(diǎn)的text信息。其示例代碼如下

let customEditor = new go.HTMLInfo();
let customSelectBox = document.createElement("select");
customEditor.show = function(textBlock, diagram, tool) {
if (!(textBlock instanceof go.TextBlock)) return;
customSelectBox.innerHTML = "";
let list = ['三國','魏','蜀','吳'];
for (let i = 0; i < list.length; i++) {
    let op = document.createElement("option");
    op.text = list[i];
    op.value = list[i];
    customSelectBox.add(op, null);
}
customSelectBox.value = textBlock.text;
customSelectBox.addEventListener("keydown", function(e) {
    var keynum = e.which;
    if (keynum == 13) { 
    tool.acceptText(go.TextEditingTool.Enter);
    return;
    } else if (keynum == 9) { 
    tool.acceptText(go.TextEditingTool.Tab);
    e.preventDefault();
    return false;
    } else if (keynum === 27) { 
    tool.doCancel();
    if (tool.diagram) tool.diagram.focus();
    }
}, false);
let loc = textBlock.getDocumentPoint(go.Spot.TopLeft);
let pos = _this.myDiagram.transformDocToView(loc);
customSelectBox.style.left = pos.x + "px";
customSelectBox.style.top  = pos.y+ 30 + "px";
customSelectBox.style.position = 'absolute';
customSelectBox.style.zIndex = 100; 
_this.myDiagram.div.appendChild(customSelectBox);
}
customEditor.hide = function(diagram, tool) {
    diagram.div.removeChild(customSelectBox);
}
customEditor.valueFunction = function() { return customSelectBox.value; }
this.myDiagram.toolManager.textEditingTool.defaultTextEditor = customEditor;

文本編輯的交互首先需要對(duì)new go.HTMLInfo()進(jìn)行一個(gè)實(shí)例化，和上面一樣也是通過show方法和hide方法進(jìn)行一個(gè)顯示隱藏的操作。然后通過go.Spot.TopLeft獲取點(diǎn)擊文本的左上角的位置。然后給創(chuàng)建的select定位一個(gè)相對(duì)的位置。然后通過new go.HTMLInfo()的valueFunction方法把select選中的option的值賦給編輯的文本TextBlock。從而實(shí)現(xiàn)一個(gè)文本編輯選擇的過程。