gojs Node 中文文档

11 篇文章 2 订阅
2 篇文章 0 订阅

PS:其中大部分API都一个个自己使用测试一遍了解其实现效果,再根据描述编写,如果有不正确的请在评论区指出。

Hierarchy

节点是可以通过线连接到其他节点的零部件,也可以是的成员.

 继承自节点,允许节点在逻辑上包含其他节点和线.

有关如何定义节点的详细讨论,请参阅节点介绍.

通过Diagram.add可以创建节点将其添加到图表中,且不更新模型.
更常见的用法是通过Model.addNodeData将节点数据对象添加到模型中来创建节点,例如:

  myDiagram.startTransaction("make new node");
  myDiagram.model.addNodeData({ key: "Omega" });
  myDiagram.commitTransaction("make new node");

这将创建一个节点或简单的零部件(复制从Diagram.nodeTemplateMap中找到的模板 ), 在某个Layer 层中添加到图表(基于Part.layerName),并绑定到节点数据(生成 Panel.data作为该节点数据对象的数据. 如果您没有保留对该JavaScript对象的引用,您可以通过调用Model.findNodeDataForKey来查询节点数据.

一般都是通过包含模型中所需属性的JavaScript数组来设置Model.nodeDataArray初始化图表,几乎所有的示例都执行这种初始化.

你可以通过调用 Diagram.remove或者 Model.removeNodeData来删除节点. removeNodeData会修改模型; 如果节点是从模型数据创建的,Diagram.remove也会这么处理. 例如 CommandHandler.deleteSelection(删除选中)的命令会在事务中调用这些方法.

通过调用 findLinksConnected,可以找到与节点连接的所有线. 因为链接线通常有一个方向,所以您可以通过调用findLinksInto将其Link.toNode作为方向,查出该节点这个方向的所有线. 同样的, 你也可以通过 findLinksOutOf 来查找来自某个节点的所有链接线; 这些链接的Link.fromNode就是这个节点. 对于树结构图,则使用 findTreeChildrenLinks or findTreeParentLink.

如果您想知道节点连接的的另一端的节点,则可以调用findNodesConnected返回与给定节点连接的线另一端的所有节点。findNodesIntofindNodesOutOf返回这些节点的子集,只考虑那些进入或离开给定节点的链接线。对于树结构图,则使用findTreeChildrenNodes or findTreeParentNode.

例如,对所有目标节点的数据进行操作:

var it = somenode.findNodesOutOf();
while (it.next()) {
  var child = it.value;
  if (child.data.text.indexOf("special") >= 0) { ... }
}

您可以通过创建一个新链接,设置它的Link.toNode 和Link.fromNode(按任意顺序)并通过Diagram.add添加到图表中。
但是更为常见的方式是通过调用GraphLinksModel.addLinkData将线数据对象添加到图表模型中.仅仅创建和添加链接不会更新模型. 因此,要在使用GraphLinksModel时添加线,应该这样做:

  myDiagram.startTransaction("make new link");
  myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
  myDiagram.commitTransaction("make new link");

在这里,您可以用线替换要连接的实际节点的key. 如果使用的是TreeModel,则不存在任何链接线数据对象,TreeModel.setParentKeyForNodeData 来为"child"子节点数据指定"parent"父节点的key。

GraphLinksModel中通过线数据对象查找线,请调用Diagram.findLinkForData。当使用TreeModel时,调用Diagram.findNodeForData 或 Diagram.findNodeForKey来获取节点,然后调用findTreeParentLink来获取链接线(如果存在线的话).

要找到连接两个节点的线,请调用findLinksTo 或 findLinksBetween。对于前一种方法,方向很重要;使用后一种方法,它在任何方向返回链接。

如果你想在线与节点连接或断开连接时,改变节点的外观。可以将linkConnected 和 linkDisconnected属性设置为被调用的函数,在回调函数中改变节点外观。注意在回调函数中不能修改任何链接线关系——属性的存在只是为了更新节点的外观。一个典型的用法是改变形状的颜色或形状。

可以通过LinkingBaseTool.isValidLink的结果来控制用户是绘制一个新链接线还是重新连接两个节点之间的线。您可以在LinkingTool 和 RelinkingTool上重写该逻辑,但是设置linkValidation or LinkingBaseTool.linkValidation 函数属性更容易。

有关验证的更一般讨论,请参阅验证介绍 Introduction to Validation。 验证介绍.

节点还支持在节点上使用的“线端口(port)”作为线的接入点,并提供逻辑和物理特性(拖动创建线等). 默认情况下,线端口对象是整个节点. 但是,你可以在节点任何一个可视的图形对象上定义GraphObject.portId 属性,使得这个图形对象被视为端口. "线端口ID(portId)"只是一个字符串,并且在节点的所有端口元素中必须是唯一的.

对于只有一个线端口的节点,应该设置图形对象的portId=""。当没有这样的元素被声明为默认端口时,它将使用整个节点作为端口。您可以使用port属性来获得唯一的port元素。

当一个节点应该有多个端口,即多个图形对象作为链接线的单独连接点时,你应该为每一个图形对象设置一个唯一的端口Id(portId 相对于节点)。可以使用ports属性获得端口的元素集合。也可以使用findPort方法按名称查找特定的端口元素.

注意:GraphLinksModel是唯一一种可以保存端口信息的模型,当portIds不为空字符串时,需要设置GraphLinksModel.linkFromPortIdProperty 和 GraphLinksModel.linkToPortIdProperty属性来使用端口。

有关端口的详情,请参阅端口介绍.

上面提到的所有“findLinks…”和“findNodes…”方法都带有一个可选的端口id参数。当没有传递任何参数时,这些方法将获取与节点连接的所有线。当提供线端口id参数时,这些方法只获取与给定节点中的端口连接的线。因此,在浏览图表时,您可以很容易地查看来自给定节点的对线所指向的所有节点。或者您可以只查看来自特定端口的链接线末端的那些节点。.

您还可以控制每个端口上线的默认连接行为。因为一个端口可以是任何的 图形对象,所以它们都是图形对象上的属性。这些属性是重复的,因此您可以将线的“from”端与链接的“to”端区别开来。属性包括:

The "...Spot" and "...Length" and "...Direction" 属性控制端口上线连接的位置和路由.
The "...Linkable..." and "...MaxLinks" 属性控制用户是否可以绘制新链接线或将现有线从端口重新连接到端口. (The "...Spot" and "...Length" and "...Direction" 属性也存在于链接线上,以覆盖来自端口元素的特定链接线的默认值.)

更多有关线端口的使用,请参阅线连接点介绍.

当图形是树状结构时,你可以使用几个函数来遍历树::

确定树是通过指向子节点的链接线从根节点开始生长,还是相反,整个图由Diagram.isTreePathToChildren属性控制.但是如果 Link.isTreeLink 为false,则上述函数将忽略单个链接线.

 

Node类还支持扩展和折叠节点和线的子树的概念,从而显示或隐藏这些节点和线。通过设置Node.isTreeExpanded来实现。当然,如果图表的图不是树结构的,那么这些概念和属性可能就不适用了。

如果你想在折叠和展开时改变父节点的外观,可以在定义 treeExpandedChanged 属性,在它的回调函数中处理,需要注意的是此函数不能修改任何链接关系或展开或折叠任何子树——该属性仅用于更新节点的外观.

有一个线路由定义可以避免线经过节点:Link.routing = Link.AvoidsNodes. 您可以通过设置avoidable属性来控制此类链接线应该避免还是忽略某个节点. 设置avoidableMargin 来控制超出 GraphObject.actualBounds 的区域,在那里AvoidsNodes链接线将绕开不经过

有关更示例,请参见 节点端口, and 链接点.

有关树的更多信息,请参见 Trees, and SubTrees.

要自定义用户调整大小的行为,请阅读调整大小工具的介绍 Introduction to the ResizingTool. 要自定义用户旋转行为,请阅读RotatingTool的介绍 Introduction to the RotatingTool.

只有图中的节点才能通过线进行连接。 模板不应该与线连接,不应该是线的标签,不应该是组的成员,也不应该有任何装饰.

构造函数

constructor

属性

可回避的 avoidable : boolean

可回避的边距 avoidableMargin : MarginLike

  • 获取或设置此节点周围链接线避开节点的距离.

    可能需要增加设置fromEndSegmentLength and toEndSegmentLength,以防止链接线路径在节点周围的回避区域内转向.

    值类型为 Margin. 默认值为 go.Margin(2,2,2,2)

只读 isLinkLabel : boolean

  • 当节点作为线的标签节点时,该只读属性为true.

    如果值为true,那么n.labeledLink将是一个链接线,n.labeledLink.isLabeledLink将为true.

    see labeledLink

是否展开子节点 isTreeExpanded : boolean

  • 获取或设置从此节点开始的子节点是否展开. 改变这个属性值将调collapseTree 或 expandTree来展开或收缩树, treeExpandedChanged 为isTreeExpanded改变时触发的事件.

    初始值为true——显示了“树-子”节点及其链接线.

    对于展开/折叠,也有一个类似的属性: Group.isSubGraphExpanded.

是否没有子节点 isTreeLeaf : boolean

  • 获取此节点是否没有子节点.

    初始值为true,这意味着在Diagram.isTreePathToChildren给出的方向上没有与子节点连接的线。当向该节点添加或删除线连接时,会自动更改此值。对于Link.isTreeLink为false的链接线将被忽略。

labeledLink : Link | null

  • 获取或设置此节点用作为线的标签。大多数节点不充当线的标签,因此此属性为null。

    模板不应该是链接线的标签节点。

    see isLinkLabel

线连接节点事件 linkConnected : function(thisNode: Node, newLink: Link, thisPort: GraphObject): void | null

  • 获取或设置线连接到此节点后调用的函数。 它通常用于修改节点的外观。
    第一个参数是当前节点。
    第二个参数是现在连接到当前节点的线(刚连接的线)。
    第三个参数是一个GraphObject端口,它指示链接连接到哪个端口。

    PS:不要在回调函数中修改或者删除线
    如果值是函数,则该函数不能修改此节点所连接的内容。已经添加了线——试图删除它或其他线可能会产生未定义的行为。然而,线的另一端可能尚未连接到节点(也可能永远不会连接到节点),因此,您不能依赖于查看线所连接的内容

    默认值为null -- 不调用任何函数.

线断节点开事件 linkDisconnected : function(thisNode: Node, oldLink: Link, thisPort: GraphObject): void | null

  • 获取或设置链接与此节点断开连接后调用的函数。它通常用于修改节点的外观。
    第一个参数是当前节点。
    第二个参数是与当前节点连接的线(刚断开的线)。
    第三个参数是一个GraphObject端口,它指示链接已连接到哪个端口。

    PS:不要在回调函数中修改或者添加线
    如果值是函数,则该函数不能修改此节点所连接的内容。线已经被删除——试图添加它或其他线可能会产生未定义的行为。线的另一端可能尚未与节点断开连接(也可能永远不会断开),因此不能依赖于查看线连接的内容。

    默认值为null -- 不调用任何函数.

节点连接线验证 linkValidation : function(fromNode: Node, fromPort: GraphObject, toNode: Node, toPort: GraphObject, link: Link): boolean | null

  • 获取或设置一个验证逻辑,该验证逻辑确定链接线是否可以与此节点连接. 如果该值不为空,则除了在 LinkingToolRelinkingTool上调用LinkingBaseTool.linkValidation验证逻辑外,还会调用该验证逻辑。 . 有关验证的更多信息,请参考 LinkingBaseTool.isValidLink.

    默认的验证逻辑为 null, 这相当于简单的返回true.
    第一个参数是 "from" 的节点对象 (可能为null).
    第二个参数是 "from" 的端口port的图形对象 (可能为null).
    第三个参数是 "to" 的节点对象(可能为null).
    第四个参数是 "to" 的端口port的图形对象 (可能为null).
    第五个参数可能为 null ,在创建新的链接线时为null,如果是重新连接的线那么它可能为这个线的对象.

    如果设置该函数,则不能有任何副作用().

    since 1.3

只读 节点线集合 linksConnected : Iterator<Link>

  • 此只读属性获取该节点连接的所有线,返回一个迭代器。这包括来自这个节点的线和进入这个节点的线。Link.fromNode或 Link.toNode 设置为指向此节点的线将会添加到此集合。

    使用findLinksConnectedfindLinksOutOffindLinksInto方法来获取链接线的不同子集,这取决于连接到特定端口的方向或方法。

    模板不应该有任何链接线与之连接.

只读 port : GraphObject

  • 这个只读属性返回代表这个节点线端口的一个图形对象。如果有一个图形对象,它的GraphObject.portId是空字符串,那么返回它。如果没有这样的元素,就返回整个节点.

portSpreading : EnumValue

  • 获取或设置当线端口点为“side”点时如何计算连接点.默认值是Node.SpreadingEvenly .

    since 1.5

只读 获取所有线端口 ports : Iterator<GraphObject>

  • 此只读属性返回一个包含在此节点中所有线端口的图形对象的迭代器。

树节点展开收缩事件 treeExpandedChanged : function(thisNode: Node): void | null

  • 获取或设置当isTreeExpanded更改值时调用的函数。这个函数的参数是这个节点。

    如果该值是一个函数,则在该函数不能再次设置展开或折叠任何节点和连接树。节点已经被扩展或折叠——再次尝试更改它可能会产生未定义的行为

    默认值为null -- 不调用任何函数.

被父节点折叠 wasTreeExpanded : boolean

  • 获取或设置从该节点开始的子树图是否被父节点上的expandTree调用折叠 初始值为false.

    see isTreeExpanded

方法

折叠树 collapseTree

  • collapseTree(level?: number): void
  • 隐藏该节点的每个子节点和连接线,并递归折叠每个子节点。collapseTree改变了零部件的Part.isVisible属性值

    隐藏父节点的子节点和线, 除非Diagram.isTreePathToChildren为false。忽略Link.isTreeLink为false的链接线。

    在这个节点和所有子节点上,会将isTreeExpanded设置为false。对于折叠时需要展开的子节点,将wasTreeExpanded 设置为true。

    您还可以传入树的层级以隐藏从该节点开始的某个层级以外的节点。如果要确保所有节点都展开到特定层级,请调用expandTree 。如果要同时执行这两个操作,请在调用collapseTree折叠树之前调用expandTree,来折叠由于wasTreeExpanded标志而展开的节点。

    此方法不执行事务。您可能需要调用CommandHandler.collapseTree命令,该命令执行事务并会触发 图表事件

    如果要折叠子图中的节点和线,请使用 Group.collapseSubGraph.

    see expandTreefindTreeParts

    参数

    • 可选 level: number

      树的层级数,从这个节点开始,保持展开如果已经展开;默认值为1,隐藏此节点的所有树子节点。小于1的值被视为1.

    Returns void

展开树 expandTree

  • expandTree(level?: number): void
  • 展开显示每个子节点和连接链接,并可能递归地展开它们的子节点。这可能会更改Part.isVisible属性的值,使整个子树以及这些节点和链接所拥有的部分都可见。但是,此根节点的可见性保持不变。

    假设链接线从父节点出发连入子节点,在这个节点和所有子节点上,会将isTreeExpanded设置为true。除非Diagram.isTreePathToChildren为false。忽略Link.isTreeLink为false的链接线。

    wasTreeExpanded属性为true时,调用expandTree才会展开树子节点。

    你还可以传入树的层级,以确保从该节点开始并一直到该层级的所有节点都可见。如果要确保在特定层级之后没有展开的节点,请调用collapseTree.如果要同时执行这两个操作,请在调用collapseTree折叠树之前调用expandTree,来折叠由于 wasTreeExpanded标志而展开的节点。

    此方法不执行事务。您可能需要调用CommandHandler.collapseTree命令,该命令执行事务并会触发 图表事件

    如果要展开子图中的节点和线,请使用Group.expandSubGraph.

    see collapseTreefindTreeParts

    参数

    • 可选 level: number

      树的层级数,从这个节点开始,保持展开如果已经展开;默认值为1,隐藏此节点的所有树子节点。小于1的值被视为1.

    Returns void

findCommonTreeParent

  • findCommonTreeParent(other: Node): Node | null
  • 找到可能是这个节点和另一个节点的间接树的父节点,或者这个节点是另一个节点的祖先,反之亦然

    如果想找到包含两个零部件的,请调用Part.findCommonContainingGroup

    see findTreeRootfindTreeParentChain

    since 1.5

    参数

    返回 Node | null

    如果在不同的树中,可能是null;如果另一个参数是这个节点,可能是自身;如果另一个节点是这个节点的后代,可能是自身;如果这个节点在另一个节点的树中,可能是其他节点

获取两个节点之间的线 findLinksBetween

  • findLinksBetween(othernode: Node, pid?: string | null, otherpid?: string | null): Iterator<Link>
  • 获取从这个节点到另一个节点的所有连接线,返回的是一个线集合的迭代器,反之亦然,可以限制只获取给定端口id和另一个节点上的端口id的线.

    如果你想获取两个节点之间指定方向的所有线请使用 findLinksTo.

    since 1.2

    参数

    • othernode: Node

    • Optional pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    • Optional otherpid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Link>

获取连接节点的所有线 findLinksConnected

  • 返回一个包含所有与此节点以任意方向连接的线集合的迭代器,可以限制只获取指定端口id的线.

    参数

    • Optional pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Link>

获取进入节点的线 findLinksInto

  • 返回包含所有进入这个节点的链接线集合的迭代器,可以限制只获取连接指定端口id的线

    参数

    • 可选 pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Link>

获取从节点出发的线 findLinksOutOf

  • 返回来从该节点出发的所有链接线集合的迭代器.可以限制只获取连接指定端口id的线.

    参数

    • 可选 pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Link>

获取节点之间to方向的线 findLinksTo

  • findLinksTo(othernode: Node, pid?: string | null, otherpid?: string | null): Iterator<Link>
  • 返回来从该节点出发to另一个节点的链接线集合的迭代器.可以限制只获取连接指定端口id的线.

    如果需要两个节点之间的所有链接,请使用findLinksBetween.

    since 1.2

    参数

    • othernode: Node

    • 可选 pid: string | null

      A如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    • 可选 otherpid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Link>

获取与该节点连接的节点 findNodesConnected

  • 返回在任意方向上与此节点连接的节点集合的迭代器,可以限制只获取连接指定线端口id的节点.

    如果该节点的线有自己连自己,则结果可能包括该节点本身。.

    参数

    • 可选 pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Node>

获取以to方向连接该节点的节点 findNodesInto

  • 返回以to方向连接该节点的节点集合的迭代器, 可以限制只获取连接指定线端口id的节点.
    举例,假设有节点 A→B→C 通过执行该方法 B节点对象.findNodesInto() 就能获取到A节点

    参数

    • 可选 pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线.

    Returns Iterator<Node>

获取以from方向连接节点的节点 findNodesOutOf

  • 返回以from方向连接该节点的节点集合的迭代器, 可以限制只获取连接指定线端口id的节点.
    举例,假设有节点 A→B→C 通过执行该方法 B节点对象.findNodesOutOf() 就能获取到C节点

    参数

    • 可选 pid: string | null

      如果端口标识符字符串为空,则忽略线的portId,搜索所有的连接线

    Returns Iterator<Node>

查找端口 findPort

  • 通过图形对象的线端口ID查询端口的图形对象,如果没有找到,则搜索一个以空字符串作为端口ID的图形对象。最后,当无法找到具有给定名称或空字符串的端口时,此方法将返回整个节点的图形对象。

    Parameters

    • pid: string

    Returns GraphObject

查找节点和子节点的链接线 findTreeChildrenLinks

查找节点的子节点 findTreeChildrenNodes

查询节点在树中的层级 findTreeLevel

  • findTreeLevel(): number

获取节点的父亲及祖宗节点和线 findTreeParentChain

获取节点与父节点之间的线 findTreeParentLink

  • findTreeParentLink(): Link | null

获取节点的父节点 findTreeParentNode

  • findTreeParentNode(): Node | null

findTreeParts

  • findTreeParts(level?: number): Set<Part>
  • 返回节点的子孙零部件集合,包括这个节点、所有指向子节点的线以及它们的所有树状子节点和线。 忽略Link.isTreeLink为false的链接线。.

    子节点是通过跟随父节点出发的链接线找到的,还是通过进入父节点的链接线找到的,这取决于Diagram.isTreePathToChildren的值。

    结果将包括这个“根”节点。如果任何节点是,则不包含其成员部分。

    如果您想查找某个所包含的零部件集合,请使用Group.findSubGraphParts.

    see findTreeChildrenNodesfindTreeChildrenLinksfindTreeParentChain

    参数

    • 可选 level: number

      树的层数,从这个节点开始,包括自己;默认值为无穷大,包括此节点的所有树子节点。小于1的值被视为1.

    返回 Set<Part>

    一组节点和线.

查询节点的根节点 findTreeRoot

  • findTreeRoot(): Node

判断节点是否是传入节点的子孙节点 isInTreeOf

  • isInTreeOf(node: Node): boolean
  • 如果此节事传入节点的子节点或者子孙节点,则返回true.

    如果此节点是给定节点的一个子节点,取决于Diagram.isTreePathToChildren的值,则返回true。否则,它将递归地搜索此节点的树父链,忽略Link.isTreeLink为false的链接线。节点不能在自己的子树中。

    如果您想知道这个节点是否(可能是间接地)包含在一个组中,那么使用 Part.isMemberOf.

    see findTreeRootfindTreeParentChain

    参数

    • node: Node

      可能是此节点的父节点或祖先节点.

    Returns boolean

    如果给定节点是该节点的祖先,则为true,否则为false,如果是同一节点,则为false.

常量

Static 均匀扩散 SpreadingEvenly : EnumValue

SpreadingEvenly作为Node.portSpreading 的默认值, 表示与端口连接的线路径应均匀地分布在由Spot.isSide指定的一侧.

Static 没有扩散 SpreadingNone : EnumValue

这个值属于Node.portSpreading 指示与端口连接的先路径应全部连接在由Spot.isSide指定的一侧的单个点上。

Static 填充扩散 SpreadingPacked : EnumValue

这个值属于Node.portSpreading 表示与端口连接的先路径应根据线路径形状的宽度,在由Spot.isSide指定的一侧进行填充。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值