流程圖控件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/hide
var 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正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號