GoJs中使用HTML方法示例_开发_开发者_运维开发者技术经验分享

前言

在gojs中因为有自己的绘图模板和一些语法限制，实际上都是在canvas标签的特性上进行的封装。但是有些时候其拓展就不能满足需求的时候，可以对其和html结构进行一些交互，达到自己显示上的特殊需求的展示。

使用html的方式

本文将从提示信息、右键菜单、和文本编编程辑三个方面来体现gojs和html之间的交互。而对于html的使用交互过程中，最主要考虑到的就是html信息何时展示，何时隐藏.展示的时候展示到什么位置。而触发的这个在gojs中是HTMLInfo的show和hide属性。给show和hide绑定对应的回调函数。

提示信息的html交互

在前面的文章中提到过提示信息的展示(toolTip)，并且讲到了toolTip内部的不同绘图模板的的自定义类型。但是很多时候还是无法满足一些特殊的展示的样式，因此可以使用html渲染之后动态展示因此就可以了。使用方法如下

//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('too开发者_Go入门lTipDIV');
    let pt = diagram.lastInput.viewpoint;
    toolTipDIV.style.left = (pt.x + 10) + "px";
    toolTipDIV.style.top = (pt.y + 10) + "px";
    document.getElementById('toolTipParagraph').textContent = "此节点的key为" + obj.data.key;
    toolTipDIV.style.display = "block";
},
hideToolTip(diagram) {
    let toolTipDIV = document.getElementById('toolTipDIV');
    toolTipDIV.style.display = "none";
}

GoJs中使用HTML方法示例

show的回调函数showToolTip的两个参数，第一个是obj，通过obj.data可以获取到对应鼠标移入的节点数据。第二个参数为diagram，前面的文章中我们提到过，可以通过diagram.lastInput.viewPoint获取到鼠标触发该回调函数时候的位置对象数据，其内部为x,y属性。然后给该位置一个偏移量显示提示信息，就可以保证在鼠标的旁边展示。

右键菜单的html交互

右键菜单和html的交互和提示信息的相似，都是通过绑定方法来控制位置的显示和隐藏。因此我们把contextMenu也配置成myToolTip。示例如下

{
    toolTip: myToolTip,
    contextMenu:myToolTip
}

GoJs中使用HTML方法示例

由上图可以看出在鼠标移出或者右键点击都可以触发提示信息，但是不同的是提示信息有默认显示的时间，并且会自android动消失。但是右键点击的时候因为没有触发hideToolTip回调函数，因此不会自动消失，需要点击画布才能把提示消息显示消失。

文本编辑的html交互

文本编辑的交互和提示信息略有不同。因为是文本编辑,所以必须是输入框类型的，但是还可以选select选择器进行有选项的编辑。下面以select为例，可以选择所有节点的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);
}
customandroidEditor.valueFunction = function() { return customSelectBox.value; }
this.myDiagram.toolManager.textEditingTool.defaultTextEditor = customEditor;

GoJs中使用HTML方法示例

文本编辑的交互首先需要对new go.HTMLInfo()进行一个实例化，和上面一样也是通过show方法和hide方法进行一个显示隐藏的操作。然后通过go.Spot.TopLeft获取点击文本的左上角的位置。然后js给创建的select定位一个相对的位置。然后通过new go.HTMLInfo()的valueFunction方法把select选中的option的值赋给编辑的文本TextBlock。从而实现一个文本编辑选择的过程。