流程圖控件GoJS教程：Selection設置（上）

---

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

點擊下載GoJS最新試用版

Selection

用戶通常通過單擊來手動選擇Part，然后通過在后臺單擊或按Esc鍵取消選擇它們。您可以通過設置Part.isSelected來以編程方式選擇零件。

用戶還可以通過DragSelectingTool在背景中拖動以選擇矩形區域內的零件。在DragSelectingTool的《工具簡介》中了解有關此內容的更多信息。

該圖保留了所選零件的集合Diagram.selection。該集合是只讀的-選擇或取消選擇Part的唯一方法是設置其Part.isSelected屬性。您可以通過設置Diagram.maxSelectionCount限制選擇的零件數量。通過將Diagram.allowSelect設置為false，可以防止用戶進行所有選擇。或通過將Part.selectable設置為false來防止選擇特定的零件。

您可以顯示通過兩種常規技術之一或全部選擇了一個零件：添加裝飾或更改所選零件的可視樹中某些元素的外觀。

選擇Selection

通常會通過在選擇零件時顯示選擇裝飾來顯示已選擇的零件。對于節點，通常是圍繞整個節點的藍色矩形。這是默認行為。如果您不希望這樣的裝飾，可以將Part.selectionAdorned設置為false。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      // the location is the center of the Shape, not the center of the whole Node
      { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape,
        {
          name: "ICON",
          width: 40, height: 40,
          fill: "gray",
          portId: ""  // the port is this Shape, not the whole Node
        },
        new go.Binding("figure")),
      $(go.TextBlock,
        { margin: new go.Margin(5, 0, 0, 0) },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", figure: "Club", loc: "0 0" },
    { key: "Beta", figure: "Spade", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.commandHandler.selectAll();

默認情況下，裝飾將應用于整個Node。如果您只想將注意力吸引到節點的主體上怎么辦？您可以通過命名該對象并將Part.selectionObjectName設置為該名稱來實現。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      { selectionObjectName: "ICON" },  // added this property!
        // the location is the center of the Shape, not the center of the whole Node
      { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape,
        {
          name: "ICON",
          width: 40, height: 40,
          fill: "gray",
          portId: ""  // the port is this Shape, not the whole Node
        },
        new go.Binding("figure")),
      $(go.TextBlock,
        { margin: new go.Margin(5, 0, 0, 0) },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", figure: "Club", loc: "0 0" },
    { key: "Beta", figure: "Spade", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.selectCollection(diagram.nodes);

請注意，Part.selectionObjectName屬性與Part.locationObjectName的相似之處 在于，它有助于將節點視為僅真正重要的一部分。

定制選擇Selection

如果您確實想要選擇裝飾，但想要與標準裝飾不同的東西，則可以對其進行自定義。可以通過設置Part.selectionAdornmentTemplate來完成這種自定義。在此示例中，節點獲得圍繞所選節點的藍色粗圓角矩形，并且鏈接沿選定鏈接的路徑獲得粗藍線。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key")),
      {
        selectionAdornmentTemplate:
          $(go.Adornment, "Auto",
            $(go.Shape, "RoundedRectangle",
            { fill: null, stroke: "dodgerblue", strokeWidth: 8 }),
            $(go.Placeholder)
          )  // end Adornment
      }
    );

  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape, { strokeWidth: 2 }),
      $(go.Shape, { toArrow: "Standard" }),
      {
        selectionAdornmentTemplate:
          $(go.Adornment,
            $(go.Shape,
              { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 8 }),
            $(go.Shape,
              { toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 2.5 })
          )  // end Adornment
      }
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.commandHandler.selectAll();

請注意，裝飾只是一部分。節點的裝飾物必須在其可視樹中包含一個占位符。占位符將定位到所選對象的位置。

鏈接的裝飾被假定為Panel.type的面板，即Panel.Link。因此，主要元素可以是Shape（形狀），該形狀可以獲取所選Link的路徑形狀的幾何形狀，而裝飾的其他元素可以像常規Link一樣位于鏈接路線的路段上或附近。

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

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

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