用户通常通过单击来手动选择Part，然后通过在后台单击或按Esc键取消选择它们。您可以通过设置Part.isSelected来以编程方式选择零件。
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正版授权的朋友可以咨询官方客服
有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！