流程圖控件GoJS教程：調色板圖

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

調色板是的一個子類圖，用于顯示多個零件表示可以被拖動到正在由用戶修改的示圖。一個的初始化調色板就像任何的初始化圖。像圖表一樣，您可以在頁面上同時擁有多個調色板。

以下代碼在下面的右側初始化了一個空的Diagram。請注意，Diagram.allowDrop必須為true，現在默認情況下為true。在此示例中，我們無需費心用任何節點數據初始化模型。

該代碼還以與任何Diagram相同的方式創建了兩個Palette。您初始化組件面板的模型以顯示該組件面板中的節點。

  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" }
  ];

首先，請注意，盡管兩個調色板都已使用相同類型的模型數據初始化，但是調色板中的項目外觀不同，因為兩者使用的節點模板不同。

此外，當您從任一側的面板中將零件拖動到中間的圖表中時，外觀會發生變化，因為圖表使用了第三個節點模板。 被拖動的只是模型數據，而不是實際的Node。 因為每個圖都可以使用其自己的模板，所以可以完全不同地表示相同的數據對象。

如果您希望組件面板顯示與主圖表完全相同的相同節點的相同數據，則可以讓它共享主圖表的模板：

  myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;

因為Palette繼承自Diagram，所以您可以按常規方式自定義它。如果希望其零件小于或大于正常，則可以決定設置其Diagram.initialScale。

自定義調色板中零件的順序也很普遍。調色板的layout屬性是GridLayout，因此您可以將其GridLayout.sorting屬性以及需要時將其GridLayout.comparer屬性設置為自定義排序功能。例如，如果您希望組件面板以完全相同的順序顯示它們在零件中出現的順序myPalette.model.nodeDataArray：

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

如果要根據模型數據上的某些屬性對組件面板中的零件進行排序：

  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;
    };

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

想要購買GoJS正版授權的朋友可以

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