流程圖控件GoJS教程：Selection設(shè)置（上）

---

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

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

Selection

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

用戶還可以通過DragSelectingTool在背景中拖動(dòng)以選擇矩形區(qū)域內(nèi)的零件。在DragSelectingTool的《工具簡(jiǎn)介》中了解有關(guān)此內(nèi)容的更多信息。

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

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

選擇Selection

通常會(huì)通過在選擇零件時(shí)顯示選擇裝飾來顯示已選擇的零件。對(duì)于節(jié)點(diǎn)，通常是圍繞整個(gè)節(jié)點(diǎn)的藍(lán)色矩形。這是默認(rèn)行為。如果您不希望這樣的裝飾，可以將Part.selectionAdorned設(shè)置為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();

默認(rèn)情況下，裝飾將應(yīng)用于整個(gè)Node。如果您只想將注意力吸引到節(jié)點(diǎn)的主體上怎么辦？您可以通過命名該對(duì)象并將Part.selectionObjectName設(shè)置為該名稱來實(shí)現(xiàn)。

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

請(qǐng)注意，Part.selectionObjectName屬性與Part.locationObjectName的相似之處 在于，它有助于將節(jié)點(diǎn)視為僅真正重要的一部分。

定制選擇Selection

如果您確實(shí)想要選擇裝飾，但想要與標(biāo)準(zhǔn)裝飾不同的東西，則可以對(duì)其進(jìn)行自定義。可以通過設(shè)置Part.selectionAdornmentTemplate來完成這種自定義。在此示例中，節(jié)點(diǎn)獲得圍繞所選節(jié)點(diǎn)的藍(lán)色粗圓角矩形，并且鏈接沿選定鏈接的路徑獲得粗藍(lán)線。

  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();

請(qǐng)注意，裝飾只是一部分。節(jié)點(diǎn)的裝飾物必須在其可視樹中包含一個(gè)占位符。占位符將定位到所選對(duì)象的位置。

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

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以

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