流程图控件GoJS教程:内置GraphObject类各指数介绍(三)

旧城冷巷雨未停 提交于 2021-02-18 15:35:22

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

相关内容推荐

流程图控件GoJS教程:内置GraphObject类各指数介绍(一)

流程图控件GoJS教程:内置GraphObject类各指数介绍(二)

fromMaxLinks : number

获取或设置此端口可能发出的最大链接数。LinkingBaseTool.isValidFrom使用此属性。
该值必须为非负数。默认值为无穷大。

除非整个Node都充当单个端口,否则必须在portId不为null的GraphObject上设置此属性,在这种情况下,应在Node上设置此属性。

fromShortLength : number

获取或设置来自该端口的链接的末段停止到实际端口的距离。正值受fromEndSegmentLength或Link.fromEndSegmentLength限制。负值会导致链接扩展到端口。默认值为零。

当您具有粗链接和尖的箭头时,此属性很有用。通常,链接Shape一直延伸到箭头的末端。如果链接“形状”较宽,则会在箭头后面看到其边缘。通过将此属性设置为较小的正值,链接形状可以在箭头的主体内结束,而仅箭头的点在链接的末端可见。

当您希望链接形状继续进入端口时,此属性的负值也很有用,这可能是因为端口的一部分是透明的,并且您希望链接看起来与节点上的其他点在视觉上相连。

在确定链接的路由时,Link.fromShortLength的值(如果不是NaN)优先于此端口的值。

有关如何使用此属性的示例,请参见链接连接点。

除非整个Node都充当单个端口,否则必须在portId不为null的GraphObject上设置此属性,在这种情况下,应在Node上设置此属性。

fromSpot : Spot

获取或设置链接应从此端口连接的位置。默认值为Spot.None,这意味着链接路由必须考虑端口的形状并在最近的点进行连接。

值Link.fromSpot,如果不是Spot.Default,判断链接的路线时,在该端口的优先级高于该值。许多预定义的Layout会自动设置Link.fromSpot和Link.toSpot,从而导致端口元素上的此属性和toSpot被忽略。根据布局,您可能能够禁用该行为,例如通过将ForceDirectedLayout.setsPortSpots, TreeLayout.setsPortSpot,TreeLayout.setsChildPortSpot或LayeredDigraphLayout.setsPortSpots设置为false。

有关如何使用此属性的示例,请参见链接连接点。

除非整个Node都充当单个端口,否则必须在portId不为null的GraphObject上设置此属性,在这种情况下,应在Node上设置此属性。

height : number

获取或设置此GraphObject在本地坐标中的所需高度。这只是获取或设置了所需Size的高度分量。默认值为NaN。

大小也可以通过设置minSize和maxSize来约束。

高度不包括由于比例或角度引起的任何变换,也不包括由于Shape.strokeWidth而引起的笔粗(如果为Shape)。如果有一个包含面板的面板,面板将确定实际尺寸。

isActionable : boolean

此属性确定此GraphObject的事件是否在所有其他事件(包括选择)之前发生。这将启用actionDown, actionMove,actionUp和actionCancel事件,这些事件均由ActionTool处理。

如果该对象不可见 或无法拾取,则不会获得任何鼠标/触摸事件。

该属性很少使用-通常仅在实现用作按钮,旋钮或滑块的对象时才使用。默认值为false。

Panel Main :布尔值

获取或设置GraphObject是否为某些Panel类型的“主要”对象。使用“主”对象的面板包括Panel.Auto,Panel.Spot和Panel.Link。

使用“主”对象的面板将使用第一个将其属性设置为true的对象,否则将仅使用第一个对象(如果没有设置该属性)。

一旦该对象是面板的元素,请勿修改此属性。

Read-only layer : Layer | null

此只读属性返回GraphObject包含的Layer(如果存在)。普通的GraphObject不能直接属于图层-只有零件可以直接属于图层。

此属性不可设置。通常,通过设置Part.layerName可以更改GraphObject所在的图层。将零件添加到关系图将基于layerName自动将该零件添加到该关系图中的图层。

margin :MarginLike

获取或设置此GraphObject周围空白区域的大小(以Margin形式),包含在其Panel坐标中。

允许使用负值,但可能会导致与Panel中的相邻对象重叠。您无法修改此属性值的顶部,左侧,右侧或底部-如果要更改边距,则必须将此属性设置为其他边距。默认边距为Margin(0,0,0,0)。

属性设置器接受数字而不是Margin对象:提供数字N将导致使用Margin(N,N,N,N)。属性获取器将始终返回保证金。

maxSize : Size

获取或设置此GraphObject在容器坐标(Panel或文档)中的最大大小。任何新值都必须是Size类型;NaN值视为无穷大。如果不需要最大宽度或高度,请使用NaN或Infinity。

您不能修改此属性值的宽度或高度-如果要更改maxSize,必须将此属性设置为其他Size。默认值为“无穷大乘无穷大”。包含面板的面板将确定该对象的实际大小。

Read-only measuredBounds : Rect

此只读属性以容器坐标(Panel或文档)返回GraphObject的measuredBounds 。这描述了已排除边界的转换边界。

您不得修改Rect的任何属性,即此属性的值。

与所有只读属性一样,使用此属性作为绑定源不太可能有用。

minSize : Size

获取或设置此GraphObject在容器坐标(Panel或文档)中的最小大小。任何新值都必须是Size类型;NaN值视为0。

您不能修改此属性值的宽度或高度-如果要更改minSize,必须将此属性设置为其他Size。默认值为零乘零。包含面板的面板将确定该对象的实际大小。

mouseDragEnter : function(e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | null

获取或设置在DraggingTool拖动期间用户将鼠标移到该固定对象中时执行的函数;这使您可以根据拖动的位置在拖动过程中提供反馈。

如果此属性值是一个函数,则使用InputEvent,此GraphObject和任何先前的GraphObject进行调用。该InputEvent.targetObject规定,在鼠标点仰视的可视化树之前发现GraphObject GraphObject.panel s到获得此对象。默认情况下,此属性为null。

请注意,对于源自不同图的拖放,目标图的选择集合将不是要拖动的部分。相反,可以在源图的DraggingTool.copiedParts中找到要拖动的临时零件。

该函数用Diagram.skipsUndoManager调用 temporarily set to true, so that any changes to GraphObjects are not recorded in the UndoManager. You do not need to start and commit any transaction in this function, because the DraggingTool will be conducting one already. After calling this function the diagram will be updated immediately.

有关mouseDragEnter事件处理程序的示例,请参见组织结构图编辑器样本中的节点模板 。

mouseDragLeave : function(e: InputEvent, thisObj: GraphObject, nextObj: GraphObject): void | null

获取或设置在DraggingTool拖动期间用户将鼠标移出该固定对象时执行的函数;这使您可以根据拖动的位置在拖动过程中提供反馈。

如果此属性值是一个函数,则使用InputEvent,此GraphObject以及鼠标所在的任何新GraphObject进行调用。InputEvent.targetObject提供在查找GraphObject的可视树之前在鼠标点找到的GraphObject。 .panel到达此对象。默认情况下,此属性为null。

请注意,对于源自不同图的拖放,目标图的选择集合将不是要拖动的部分。相反,可以在源图的DraggingTool.copiedParts中找到要拖动的临时零件。

将此函数与Diagram.skipsUndoManager临时设置为true一起调用,这样对GraphObject的任何更改都不会记录在UndoManager中。您无需在该函数中启动和提交任何事务,因为DraggingTool将已经在执行一个事务。调用此函数后,该图将立即更新。

有关mouseDragLeave事件处理程序的示例,请参见组织结构图编辑器样本中的节点模板 。

mouseDrop : function(e: InputEvent, thisObj: GraphObject): void | null

获取或设置函数,当用户在DraggingTool拖动结束时将选择放在该对象上时执行该函数;这使您可以自定义对象上掉落时的行为。

如果此属性值是一个函数,则使用InputEvent(此GraphObject)调用它。该InputEvent.targetObject规定,在鼠标点仰视的可视化树之前发现GraphObject GraphObject.panel s到获得此对象。该函数在DraggingTool执行的事务中被调用,因此您不需要执行一个。默认情况下,此属性为null。

有关mouseDrop事件处理程序的示例,请参见组织结构图编辑器样本中的节点模板 。

mouseEnter : function(e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | null

获取或设置当用户将鼠标移到该对象而不按住任何按钮时要执行的函数。此属性由ToolManager使用。

如果此属性值是一个函数,则使用InputEvent,鼠标现在所在的此GraphObject以及鼠标所在的任何先前的GraphObject进行调用。InputEvent.targetObject提供在查找之前在鼠标点找到的GraphObject绘制GraphObject.panel的可视树以到达该对象。默认情况下,此属性为null。

将此函数与Diagram.skipsUndoManager临时设置为true一起调用,这样对GraphObject的任何更改都不会记录在UndoManager中。您无需在此函数中启动和提交任何事务。调用此函数后,该图将立即更新。

例如,考虑一种情况,当用户将鼠标移到某个节点上时,希望显示用户可以单击的按钮,而当鼠标离开该节点时,这些按钮会自动消失。这可以通过显示装饰物按住按钮来实现。

 

var nodeContextMenu =
  $(go.Adornment, "Spot",
    { background: "transparent" },  // to help detect when the mouse leaves the area
    $(go.Placeholder),
    $(go.Panel, "Vertical",
      { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
      $("Button",
        $(go.TextBlock, "Command 1"),
        {
          click: function(e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 1 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        }),
      $("Button",
        $(go.TextBlock, "Command 2"),
        {
          click: function(e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        })
      ));

然后,在Node的定义中,我们可以实现mouseEnter事件处理程序:

myDiagram.nodeTemplate =
  $(go.Node,
    . . .
    {
      mouseEnter: function(e, node) {
        nodeContextMenu.adornedObject = node;
        nodeContextMenu.mouseLeave = function(ev, cm) {
          node.removeAdornment("ContextMenuOver");
        }
        node.addAdornment("ContextMenuOver", nodeContextMenu);
      }
    });


注意它也是如何自动定义mouseLeave事件处理程序的。当鼠标离开装饰物区域或用户执行按钮单击事件处理程序时,将删除上下文菜单装饰物。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!