流程图控件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来防止选择特定的零件。

您可以显示通过两种常规技术之一或全部选择了一个零件：添加装饰或更改所选零件的可视树中某些元素的外观。

通常会通过在选择零件时显示选择装饰来显示已选择的零件。对于节点，通常是围绕整个节点的蓝色矩形。这是默认行为。如果您不希望这样的装饰，可以将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正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号