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正版授权,或了解更多产品信息请点击
标签:
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自: