流程圖控件GoJS教程：調(diào)色板圖

---

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

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

調(diào)色板是的一個(gè)子類圖，用于顯示多個(gè)零件表示可以被拖動(dòng)到正在由用戶修改的示圖。一個(gè)的初始化調(diào)色板就像任何的初始化圖。像圖表一樣，您可以在頁(yè)面上同時(shí)擁有多個(gè)調(diào)色板。

以下代碼在下面的右側(cè)初始化了一個(gè)空的Diagram。請(qǐng)注意，Diagram.allowDrop必須為true，現(xiàn)在默認(rèn)情況下為true。在此示例中，我們無(wú)需費(fèi)心用任何節(jié)點(diǎn)數(shù)據(jù)初始化模型。

該代碼還以與任何Diagram相同的方式創(chuàng)建了兩個(gè)Palette。您初始化組件面板的模型以顯示該組件面板中的節(jié)點(diǎn)。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color"),
        { portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key"))
    );

  diagram.undoManager.isEnabled = true;

  // create the Palette
  var myPalette =
    $(go.Palette, "myPaletteDiv");

  // the Palette's node template is different from the main Diagram's
  myPalette.nodeTemplate =
    $(go.Node, "Horizontal",
      $(go.Shape,
        { width: 14, height: 14, fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text", "color"))
    );

  // the list of data to show in the Palette
  myPalette.model.nodeDataArray = [
    { key: "C", color: "cyan" },
    { key: "LC", color: "lightcyan" },
    { key: "A", color: "aquamarine" },
    { key: "T", color: "turquoise" },
    { key: "PB", color: "powderblue" },
    { key: "LB", color: "lightblue" },
    { key: "LSB", color: "lightskyblue" },
    { key: "DSB", color: "deepskyblue" }
  ];

  // create the Palette
  var myPalette2 =
    $(go.Palette, "myPaletteDiv2",
      { // customize the GridLayout to align the centers of the locationObjects
        layout: $(go.GridLayout, { alignment: go.GridLayout.Location })
      });

  // the Palette's node template is different from the main Diagram's
  myPalette2.nodeTemplate =
    $(go.Node, "Vertical",
      { locationObjectName: "TB", locationSpot: go.Spot.Center },
      $(go.Shape,
        { width: 20, height: 20, fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { name: "TB" },
        new go.Binding("text", "color"))
    );

  // the list of data to show in the Palette
  myPalette2.model.nodeDataArray = [
    { key: "IR", color: "indianred" },
    { key: "LC", color: "lightcoral" },
    { key: "S", color: "salmon" },
    { key: "DS", color: "darksalmon" },
    { key: "LS", color: "lightsalmon" }
  ];

首先，請(qǐng)注意，盡管兩個(gè)調(diào)色板都已使用相同類型的模型數(shù)據(jù)初始化，但是調(diào)色板中的項(xiàng)目外觀不同，因?yàn)閮烧呤褂玫墓?jié)點(diǎn)模板不同。

此外，當(dāng)您從任一側(cè)的面板中將零件拖動(dòng)到中間的圖表中時(shí)，外觀會(huì)發(fā)生變化，因?yàn)閳D表使用了第三個(gè)節(jié)點(diǎn)模板。 被拖動(dòng)的只是模型數(shù)據(jù)，而不是實(shí)際的Node。 因?yàn)槊總€(gè)圖都可以使用其自己的模板，所以可以完全不同地表示相同的數(shù)據(jù)對(duì)象。

如果您希望組件面板顯示與主圖表完全相同的相同節(jié)點(diǎn)的相同數(shù)據(jù)，則可以讓它共享主圖表的模板：

  myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;

因?yàn)镻alette繼承自Diagram，所以您可以按常規(guī)方式自定義它。如果希望其零件小于或大于正常，則可以決定設(shè)置其Diagram.initialScale。

自定義調(diào)色板中零件的順序也很普遍。調(diào)色板的layout屬性是GridLayout，因此您可以將其GridLayout.sorting屬性以及需要時(shí)將其GridLayout.comparer屬性設(shè)置為自定義排序功能。例如，如果您希望組件面板以完全相同的順序顯示它們?cè)诹慵谐霈F(xiàn)的順序myPalette.model.nodeDataArray：

  myPalette.layout.sorting = go.GridLayout.Forward;

如果要根據(jù)模型數(shù)據(jù)上的某些屬性對(duì)組件面板中的零件進(jìn)行排序：

  myPalette.layout.comparer = function(a, b) {
      // A and B are Parts
      var av = a.data.someProp;
      var bv = b.data.someProp;
      if (av < bv) return -1;
      if (av > bv) return 1;
      return 0;
    };

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

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

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