文檔首頁(yè)>>GoJS教程2020>>流程圖控件GoJS教程：與其他HTML元素一起使用

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

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新試用版

與GoJS一起使用HTML

使用HTML Data Inspector編輯零件

通常，GoJS可以通過(guò)JavaScript以編程方式移動(dòng)和修改GoJS對(duì)象和圖表與該頁(yè)面的其余部分進(jìn)行交互。如果您尚未了解與零件和模型進(jìn)行編程交互的信息，請(qǐng)參閱GraphObject Manipulation教程。

為了幫助程序員開(kāi)始使用HTML控件，我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的Data Inspector Extension，它是一個(gè)基于HTML的屬性編輯器，它顯示并允許編輯所選零件的數(shù)據(jù)。

數(shù)據(jù)檢查器主要通過(guò)"ChangedSelection" 圖偵聽(tīng)器工作。觸發(fā)后，它將填充HTML字段。編輯這些字段，然后單擊鼠標(biāo)左鍵，然后通過(guò)調(diào)用diagram.model.setDataProperty更新模型來(lái)更新所選零件。

jQuery和GoJS

GoJS不依賴jQuery，但是兩者可以一起使用。該標(biāo)簽示例展示了如何使用GoJS jQuery的選項(xiàng)卡內(nèi)。該HTML互動(dòng)樣品放在一個(gè)jQuery移動(dòng)窗口的GoJS調(diào)色板里面，數(shù)據(jù)檢查會(huì)修改當(dāng)前選擇的節(jié)點(diǎn)內(nèi)的另一個(gè)。

jQuery通常設(shè)置$變量。如果您要從示例或文檔中復(fù)制代碼，請(qǐng)注意，我們通常會(huì)這樣做： var $ = go.GraphObject.make;以便$在示例中使用可以構(gòu)建GraphObject和其他GoJS對(duì)象。注意：嘗試構(gòu)建GoJS對(duì)象時(shí)調(diào)用jQuery 會(huì)導(dǎo)致異常和神秘的錯(cuò)誤。因此，您應(yīng)該在本地分配$變量或使用其他變量來(lái)構(gòu)建GoJS對(duì)象。

HTML專(zhuān)注于圖表

當(dāng)瀏覽器元素獲得焦點(diǎn)時(shí)，某些瀏覽器會(huì)盡可能地將該元素滾動(dòng)到視圖中。由于某些Web應(yīng)用程序可能不歡迎這種行為，因此Diagram.scrollsPageOnFocus屬性默認(rèn)為false。但是，您可能需要將此屬性設(shè)置為true才能獲得標(biāo)準(zhǔn)行為。

您可以在圖表聚焦時(shí)刪除輪廓。這是CSS效果，而不是GoJS效果，可以通過(guò)從Diagram div內(nèi)所有HTML元素中刪除CSS輪廓來(lái)將其刪除：

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

HTMLInfo類(lèi)

使用HTMLInfo類(lèi)可顯示自定義HTML頁(yè)面元素，例如上下文菜單，工具提示或HTML制成的文本編輯器。

可以設(shè)置為的實(shí)例的屬性HTMLInfo包括：

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

用法

用自定義功能替換GoJS功能時(shí)，主要要考慮的是何時(shí)顯示和隱藏自定義內(nèi)容。HTMLInfo通過(guò)程序員定義并由GoJS調(diào)用的兩個(gè)可設(shè)置函數(shù)來(lái)執(zhí)行此操作：

GoInfo在應(yīng)顯示自定義信息時(shí)（例如，在激活ToolTip，ContextMenuTool或TextEditingTool時(shí)）調(diào)用HTMLInfo.show。
HTMLInfo.hide，當(dāng)自定義信息完成時(shí)由GoJS調(diào)用，并且不應(yīng)再顯示，例如在結(jié)束這些工具時(shí)。

代替設(shè)置HTMLInfo.hide，您可以將HTMLInfo.mainElement屬性設(shè)置為要顯示/隱藏的主要HTML元素，HTMLInfo將通過(guò)調(diào)用以下方法自動(dòng)隱藏提供的元素：

mainElement.style.display =“ none”;

HTMLInfo示例

文本編輯器：“ 自定義文本編輯器”示例和默認(rèn)文本編輯器的重新實(shí)現(xiàn)
上下文菜單：“ 自定義上下文菜單”和“ HTML燈箱上下文菜單”（對(duì)默認(rèn)觸摸上下文菜單的重新實(shí)現(xiàn)）
工具提示：數(shù)據(jù)可視化工具提示

工具提示

對(duì)于工具提示，如果GraphObject.toolTip或Diagram.toolTip設(shè)置為實(shí)例HTMLInfo，GoJS呼吁HTMLInfo.show在ToolManager.showToolTip。工具提示延遲之后，GoJS將調(diào)用HTMLInfo.hide在ToolManager.hideToolTip。

以下是使用HTMLInfo.show和的示例HTMLInfo.hide，但是HTMLInfo.hide足夠簡(jiǎn)單，HTMLInfo.mainElement只需將設(shè)置為工具提示div就足夠了。

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

  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>

上下文菜單

對(duì)于上下文菜單，ContextMenuTool.showContextMenu將調(diào)用HTMLInfo.show。ContextMenuTool.hideContextMenu將調(diào)用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();
}

文字編輯器

對(duì)于自定義文本編輯器，TextEditingTool.doActivate將調(diào)用HTMLInfo.show。TextEditingTool.doDeactivate將調(diào)用HTMLInfo.hide。

用作文本編輯器的HTMLInfos還必須定義HTMLInfo.valueFunction。當(dāng)TextEditingTool.acceptText被調(diào)用時(shí)，GoJS將調(diào)用HTMLInfo.valueFunction和使用返回值作為T(mén)extEditingTool完成值。

下面的示例構(gòu)造一個(gè)HTMLInfo，該HTMLInfo使用HTMLInfo.show并HTMLInfo.hide動(dòng)態(tài)添加，填充和刪除頁(yè)面中的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;

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

想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以咨詢慧都官方客服

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)

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

用科技創(chuàng)就卓越

Create excellence with technology