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

翻译|使用教程|编辑:杨鹏连|2021-06-08 10:07:12.567|阅读 23 次

概述:GoJS是一款功能强大,快速且轻量级的流程图控件。本文介绍了GoJS API参考手册中GoJS类别索引-类装饰的具体内容。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

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

点击下载GoJS最新版

相关内容推荐

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

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

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

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

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

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

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

isVisibleObject

isVisibleObject(): boolean
如果此对象可见 并且它的每个包含视觉的面板也是可见的,则此谓词为真。这将忽略此对象所属面板的实际位置或外观(可见性除外),并忽略Layer或Diagram 的所有属性。

对于Part s,您可以调用Part.isVisible谓词来确定不仅 Part 可见,而且任何包含的Group或Link或Layer都可见。

Static make

  • make<T>(cls: "ToolTip" | "ContextMenu", ...initializers: (string | EnumValue | AnimationTrigger | (Partial<GraphObject> & {}) | Binding | RowColumnDefinition | PanelLayout | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
  • make<T>(cls: "Button" | "TreeExpanderButton" | "SubGraphExpanderButton" | "ContextMenuButton" | "PanelExpanderButton" | "CheckBoxButton" | "CheckBox", ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
  • make<T>(cls: string, ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]): T
  • make<CT>(cls: CT, ...initializers: (string | EnumValue | HTMLDivElement | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (string | EnumValue | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})))[])[]): InstanceType<CT>
这个静态函数根据它的类和附加参数构建一个对象,提供初始属性或成为Panel元素的GraphObject s 。

第一个参数必须是类类型或类的名称或预定义类型的面板的名称。此函数将构造该类型的新实例并使用其余参数来初始化对象。第一个参数不能是您尝试初始化的常规对象(例如 GraphObject);为此,您可以调用setProperties或Diagram.setProperties,尽管这比直接设置属性效率低。

如果初始化参数是一个枚举值,它会尝试设置看起来最合适的属性。

如果初始化参数是一个字符串,这将根据正在构建的对象的类型设置一个特定的属性。

  • 如果对象是TextBlock,则设置TextBlock.text。
  • 如果对象是Shape,则设置Shape.figure。
  • 如果对象是Picture,则设置Picture.source。
  • 如果对象是Panel(包括Part、Node或Group),则设置Panel.type。
如果初始化参数是一种特定类型的对象,则可以将该对象添加到正在构建的对象中。
  • GraphObject和RowColumnDefinition只能作为Panel的元素添加。
  • Binding s 只能应用于GraphObject s 和RowColumnDefinition s。
  • PathFigure s 只能添加到Geometry对象。
  • PathSegment只能添加到PathFigure对象。
  • 常规 JavaScript 数组提供了一系列初始化参数。
  • 常规 JavaScript 对象提供在正在构建的对象上设置的属性/值对。
当初始化参数是一个普通的 JavaScript 对象时,有几种方法可以应用该对象的属性。如果属性名称是一个带有句点的字符串,如果对象是Panel或Diagram,则这具有特殊含义。目前只有一个句点分隔符是属性字符串的有效语法,并且它只对面板和图表有效。

对于面板,句点之前的子字符串用作传递给Panel.findObject的名称, 以获取设置属性的实际对象,即句点之后的子字符串。这通常仅在预定义的面板上有用:

  • 一个“Button”有一个形状命名为“ButtonBorder”周围的面板的内容。
  • 一个“TreeExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形状,加或减的迹象。
  • 一个“SubGraphExpanderButton”具有“ButtonBorder”形和“ButtonIcon”形状,加或减的迹象。
  • 一个“ContextMenuButton”有一个名为“ButtonBorder”周围的面板的内容形态。
但是您可以通过调用静态函数GraphObject.defineBuilder来定义 GraphObject.make 可以构建的自己的名称。

对于图表,句点之前的子字符串用作图表本身的属性名称,以获取要在其上设置属性的实际对象。作为一种特殊情况,如果图表上不存在这样的属性值,它会在Diagram.toolManager上查找。请参阅下面的一些示例。

另外的图表,只为图,如果属性名称是名DiagramEvent,属性值必须是一个DiagramEvent监听功能,并Diagram.addDiagramListener是使用DiagramEvent名和函数调用。请注意,所有 DiagramEvent 名称均大写且不包含任何句点,因此不会与Diagram或ToolManager上的任何属性发生任何名称冲突。尽管您可以为相同的 DiagramEvent 名称注册多个侦听器,但由于 JavaScript 的限制,这些侦听器需要使用单独的 JavaScript 对象进行声明,因为 JavaScript 不允许在对象文字中出现重复的属性名称。

此外,对于图表,如果属性名称是"Changed"或"ModelChanged",则属性值必须是一个 ChangedEvent 侦听器函数,该函数通过ChangedEvent参数调用。当属性名称为 时"Changed",它调用Diagram.addChangedListener,通知有关图表或其层或 GraphObjects 的更改。当属性名称"ModelChanged",它调用Model.addChangedListener在Diagram.model,导致约更改型号或它的数据的通知。这是非常方便,因为Diagram.model属性setter会自动调用 Model.removeChangedListener在旧模型上,从而避免对旧模型进行更多更改时的任何开销,并避免对可能导致垃圾收集保留的侦听器的引用。它还将在新模型上调用Model.addChangedListener,帮助实现与新模型相同的行为。

如果属性名称是数字并且正在构造的对象是Brush,则通过调用Brush.addColorStop将数字和值添加到 Brush 。

否则,属性名称将用作正在构建的对象上的常规属性名称。这会尝试进行一些属性名称和值检查:当正在构建的对象上未定义属性时,它将发出错误信号。可以通过这种方式发现许多 JavaScript 代码会忽略的拼写错误。

如果属性名称以下划线开头,则不会抱怨该属性未定义。不仅在正在构建的对象上设置了下划线属性,而且对copy 的调用 也会将此类命名属性的值复制到新对象中。

在示例和介绍页面中,使用别名调用此函数$。如果您想保留$对另一个 JavaScript 库的使用,您可以使用不同的短名称。

 var $ = go.GraphObject.make;

 var diagram =
   $(go.Diagram, "myDiagramDiv",
     {
        // don't initialize some properties until after a new model has been loaded
        "InitialLayoutCompleted": loadDiagramProperties,
       allowZoom: false,  // don't allow the user to change the diagram's scale
       "grid.visible": true,  // display a background grid for the whole diagram
       "grid.gridCellSize": new go.Size(20, 20),
       // allow double-click in background to create a new node
       "clickCreatingTool.archetypeNodeData": { text: "Node" },
       // allow Ctrl-G to call the groupSelection command
       "commandHandler.archetypeGroupData":
           { text: "Group", isGroup: true, color: "blue" },
       "toolManager.hoverDelay": 100,  // how quickly tooltips are shown
       // mouse wheel zooms instead of scrolls
       "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
       "commandHandler.copiesTree": true,  // for the copy command
       "commandHandler.deletesTree": true, // for the delete command
       "draggingTool.dragsTree": true,  // dragging for both move and copy
       "draggingTool.isGridSnapEnabled": true,
       layout: $(go.TreeLayout,
                 { angle: 90, sorting: go.TreeLayout.SortingAscending })
     });

 diagram.nodeTemplate =
   $(go.Node, "Auto",  // or go.Panel.Auto
     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
     $(go.Shape, "RoundedRectangle",
       {
         fill: $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" }),
         stroke: "gray",
         strokeWidth: 2,
         strokeDashArray: [3, 3]
       }),
     $(go.TextBlock,
       { margin: 5, font: "bold 12pt sans-serif" },
       new go.Binding("text", "key"))
   );
有关 GraphObject.make 的使用信息和示例,请参阅有关构建对象的介绍页面。

类型参数
参数

  • cls: "ToolTip" | "ContextMenu"
  • Rest ...initializers: (string | EnumValue | AnimationTrigger | (Partial<GraphObject> & {}) | Binding | RowColumnDefinition | PanelLayout | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]
零个或更多个值即初始化新对象,典型地具有其值的新的对象,或JavaScript阵列与附加的初始化参数,或一对设置属性的对象GraphObject被添加到一个面板,或结合对的一个新对象的属性,或作为新对象的单个属性的初始值的常量值,该值被识别为采用该值,或用作常用设置属性值的字符串。

Returns T
Type parameters
T: Panel<T>

参数

  • cls: "Button" | "TreeExpanderButton" | "SubGraphExpanderButton" | "ContextMenuButton" | "PanelExpanderButton" | "CheckBoxButton" | "CheckBox"
  • Rest ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]

Returns T
类型参数
T : GraphObject < T >

参数

  • cls: string
  • Rest ...initializers: (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}) | (string | EnumValue | AnimationTrigger | Binding | RowColumnDefinition | PanelLayout | (Partial<GraphObject> & {}))[])[]

Returns T
类型参数
CT : ConstructorType < CT >

参数

  • cls: CT
  • Rest ...initializers: (string | EnumValue | HTMLDivElement | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (string | EnumValue | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | (Partial<InstanceType<CT>> & {} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & { Changed?: ChangedEventHandler; ModelChanged?: ChangedEventHandler } : {})))[])[]


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:Northwoods

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat