流程图控件GoJS教程：与其他HTML元素一起使用

介绍了如何在Web应用程序中将GoJS图表与其他HTML元素一起使用。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新试用版

与GoJS一起使用HTML

使用HTML Data Inspector编辑零件

通常，GoJS可以通过JavaScript以编程方式移动和修改GoJS对象和图表与该页面的其余部分进行交互。如果您尚未了解与零件和模型进行编程交互的信息，请参阅GraphObject Manipulation教程。

为了帮助程序员开始使用HTML控件，我们实现了一个简单的Data Inspector Extension，它是一个基于HTML的属性编辑器，它显示并允许编辑所选零件的数据。

数据检查器主要通过”ChangedSelection” 图侦听器工作。触发后，它将填充HTML字段。编辑这些字段，然后单击鼠标左键，然后通过调用diagram.model.setDataProperty更新模型来更新所选零件。

jQuery和GoJS

GoJS不依赖jQuery，但是两者可以一起使用。该标签示例展示了如何使用GoJS jQuery的选项卡内。该HTML互动样品放在一个jQuery移动窗口的GoJS调色板里面，数据检查会修改当前选择的节点内的另一个。

jQuery通常设置$变量。如果您要从示例或文档中复制代码，请注意，我们通常会这样做： var $ = go.GraphObject.make;以便$在示例中使用可以构建GraphObject和其他GoJS对象。注意：尝试构建GoJS对象时调用jQuery 会导致异常和神秘的错误。因此，您应该在本地分配$变量或使用其他变量来构建GoJS对象。

HTML专注于图表

当浏览器元素获得焦点时，某些浏览器会尽可能地将该元素滚动到视图中。由于某些Web应用程序可能不欢迎这种行为，因此Diagram.scrollsPageOnFocus属性默认为false。但是，您可能需要将此属性设置为true才能获得标准行为。

您可以在图表聚焦时删除轮廓。这是CSS效果，而不是GoJS效果，可以通过从Diagram div内所有HTML元素中删除CSS轮廓来将其删除：

/* affect all elements inside myDiagramDiv */#myDiagramDiv * {  outline: none;  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */}

HTMLInfo类

使用HTMLInfo类可显示自定义HTML页面元素，例如上下文菜单，工具提示或HTML制成的文本编辑器。

可以设置为的实例的属性HTMLInfo包括：

• TextEditingTool.defaultTextEditor
• TextBlock.textEditor
• GraphObject.contextMenu
• Diagram.contextMenu
• GraphObject.toolTip
• Diagram.toolTip

用法

用自定义功能替换GoJS功能时，主要要考虑的是何时显示和隐藏自定义内容。HTMLInfo通过程序员定义并由GoJS调用的两个可设置函数来执行此操作：

• GoInfo在应显示自定义信息时（例如，在激活ToolTip，ContextMenuTool或TextEditingTool时）调用HTMLInfo.show。
• HTMLInfo.hide，当自定义信息完成时由GoJS调用，并且不应再显示，例如在结束这些工具时。

代替设置HTMLInfo.hide，您可以将HTMLInfo.mainElement属性设置为要显示/隐藏的主要HTML元素，HTMLInfo将通过调用以下方法自动隐藏提供的元素：

mainElement.style.display =“ none”;

HTMLInfo示例

• 文本编辑器：“ 自定义文本编辑器”示例和默认文本编辑器的重新实现
• 上下文菜单：“ 自定义上下文菜单”和“ HTML灯箱上下文菜单”（对默认触摸上下文菜单的重新实现）
• 工具提示：数据可视化工具提示

工具提示

对于工具提示，如果GraphObject.toolTip或Diagram.toolTip设置为实例HTMLInfo，GoJS呼吁HTMLInfo.show在ToolManager.showToolTip。工具提示延迟之后，GoJS将调用HTMLInfo.hide在ToolManager.hideToolTip。

以下是使用HTMLInfo.show和的示例HTMLInfo.hide，但是HTMLInfo.hide足够简单，HTMLInfo.mainElement只需将设置为工具提示div就足够了。

  function showToolTip(obj, diagram, tool) {    var toolTipDIV = document.getElementById('toolTipDIV');    var pt = diagram.lastInput.viewPoint;    toolTipDIV.style.left = (pt.x + 10) + "px";    toolTipDIV.style.top = (pt.y + 10) + "px";    document.getElementById('toolTipParagraph').textContent = "Tooltip for: " + obj.data.key;    toolTipDIV.style.display = "block";  }  function hideToolTip(diagram, tool) {   var toolTipDIV = document.getElementById('toolTipDIV');   toolTipDIV.style.display = "none";  }  var myToolTip = $(go.HTMLInfo, {    show: showToolTip,    hide: hideToolTip    /*      since hideToolTip is very simple,      we could have set mainElement instead of setting hide:    mainElement: document.getElementById('toolTipDIV')    */  });  diagram.nodeTemplate =    $(go.Node, "Auto",      {        toolTip: myToolTip      },      $(go.Shape, "RoundedRectangle", { strokeWidth: 0},        new go.Binding("fill", "color")),      $(go.TextBlock,        { margin: 8 },        new go.Binding("text", "key"))    );  diagram.model = new go.GraphLinksModel(  [    { key: "Alpha", color: "lightblue" },    { key: "Beta", color: "orange" },    { key: "Gamma", color: "lightgreen" },    { key: "Delta", color: "pink" }  ]);

 <!-- this must be added as a sibling of the Diagram -->  <div id="toolTipDIV" style="position: absolute; background: white; z-index: 1000; display: none;">    <p id="toolTipParagraph">Tooltip</p>  </div>

上下文菜单

对于上下文菜单，ContextMenuTool.showContextMenu将调用HTMLInfo.show。ContextMenuTool.hideContextMenu将调用HTMLInfo.hide。

// Assign an HTMLInfo to the Diagram:myDiagram.contextMenu = $(go.HTMLInfo, {  show: showContextMenu,  hide: hideContextMenu});function showContextMenu(obj, diagram, tool) {  // Show the context menu HTML element:  SomeDOMElement.style.display = "block";  // Also show relevant buttons given the current state  // and the GraphObject obj; if null, the context menu is for the whole Diagram}function hideContextMenu() {  SomeDOMElement.style.display = "none";}function buttonClick() {  // do some action when a context menu button is clicked  // then:  myDiagram.currentTool.stopTool();}

文字编辑器

对于自定义文本编辑器，TextEditingTool.doActivate将调用HTMLInfo.show。TextEditingTool.doDeactivate将调用HTMLInfo.hide。

用作文本编辑器的HTMLInfos还必须定义HTMLInfo.valueFunction。当TextEditingTool.acceptText被调用时，GoJS将调用HTMLInfo.valueFunction和使用返回值作为TextEditingTool完成值。

下面的示例构造一个HTMLInfo，该HTMLInfo使用HTMLInfo.show并HTMLInfo.hide动态添加，填充和删除页面中的HTML元素。

// Diagram setup. The HTMLInfo is set at the end of this code block.diagram.nodeTemplate =  $(go.Node, "Auto",    $(go.Shape, "RoundedRectangle", { strokeWidth: 0},      new go.Binding("fill", "color")),    $(go.TextBlock,      { editable: true, margin: 8, choices: ['Alpha', 'Beta', 'Gamma', 'Delta'] },      new go.Binding("text"))  );diagram.model = new go.GraphLinksModel([  { text: "Alpha", color: "lightblue" },  { text: "Beta",  color: "orange" },  { text: "Gamma", color: "lightgreen" },  { text: "Delta", color: "pink" }]);// Create an HTMLInfo and dynamically create some HTML to show/hidevar customEditor = new go.HTMLInfo();var customSelectBox = document.createElement("select");customEditor.show = function(textBlock, diagram, tool) {  if (!(textBlock instanceof go.TextBlock)) return;  // Populate the select box:  customSelectBox.innerHTML = "";  // this sample assumes textBlock.choices is not null  var list = textBlock.choices;  for (var i = 0; i < list.length; i++) { var op = document.createElement("option"); op.text = list[i]; op.value = list[i]; customSelectBox.add(op, null); } // After the list is populated, set the value: customSelectBox.value = textBlock.text; // Do a few different things when a user presses a key customSelectBox.addEventListener("keydown", function(e) { var keynum = e.which; if (keynum == 13) { // Accept on Enter tool.acceptText(go.TextEditingTool.Enter); return; } else if (keynum == 9) { // Accept on Tab tool.acceptText(go.TextEditingTool.Tab); e.preventDefault(); return false; } else if (keynum === 27) { // Cancel on Esc tool.doCancel(); if (tool.diagram) tool.diagram.focus(); } }, false); var loc = textBlock.getDocumentPoint(go.Spot.TopLeft); var pos = diagram.transformDocToView(loc); customSelectBox.style.left = pos.x + "px"; customSelectBox.style.top = pos.y + "px"; customSelectBox.style.position = 'absolute'; customSelectBox.style.zIndex = 100; // place it in front of the Diagram diagram.div.appendChild(customSelectBox); } customEditor.hide = function(diagram, tool) { diagram.div.removeChild(customSelectBox); } // This is necessary for HTMLInfo instances that are used as text editors customEditor.valueFunction = function() { return customSelectBox.value; } // Set the HTMLInfo: diagram.toolManager.textEditingTool.defaultTextEditor = customEditor;

====================================================

想要购买GoJS正版授权的朋友可以咨询官方客服

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号

来源：慧都