GoJS is a powerful, fast and lightweight flowchart control that can help you create flowcharts in JavaScript and HTML5 Canvas programs, and greatly simplify your JavaScript / Canvas programs.
Click to download the latest version of GoJS
constructor
new Graph Object (): GraphObject
is an abstract class, so you should not use this constructor.
Properties
actionCancel : function(e: InputEvent, thisObj: GraphObject): void | null
Gets or sets the function to be executed when the ActionTool is cancelled and the isActionable of this GraphObject is set to true. This property is rarely set. By default, this attribute is null.
Only set this function property in combination with ActionTool on the objects (such as buttons, knobs or sliders) that need to handle all events, thus replacing the conventional tool mechanism.
The ActionTool does not perform any transactions, therefore, if the value of this attribute, the function will not be called in the transaction.
actionDown: function(e: InputEvent, thisObj: GraphObject): void | null
Gets or sets the function to be executed on the mouse down event when the isActionable of this GraphObject is set to true. This property is rarely set. By default, this attribute is null.
仅在要处理所有事件的对象（例如按钮，旋钮或滑块）上结合ActionTool设置此功能属性，从而取代了常规工具机制。
该ActionTool不进行任何交易，因此，如果这个属性的值，该功能将不会被事务中调用。
actionMove: function(e: InputEvent, thisObj: GraphObject): void | null
Gets or sets the function to be executed on the mouse movement event when the isActionable of this GraphObject is set to true. This property is rarely set. By default, this attribute is null.
Only set this function property in combination with ActionTool on the objects (such as buttons, knobs or sliders) that need to handle all events, thus replacing the conventional tool mechanism.
The ActionTool does not perform any transactions, therefore, if the value of this attribute, the function will not be called in the transaction.
actionUp : function(e: InputEvent, thisObj: GraphObject): void | null
Gets or sets the function to be executed on the mouse up event when the isActionable of this GraphObject is set to true. This property is rarely set. By default, this attribute is null.
Only set this function property in combination with ActionTool on the objects (such as buttons, knobs or sliders) that need to handle all events, thus replacing the conventional tool mechanism.
The ActionTool does not perform any transactions, therefore, if the value of this attribute, the function will not be called in the transaction. If it does provide a function that can change the diagram or its model, this should be done within a transaction-call Diagram.startTransaction and Diagram.commitTransaction.
actualBounds: rectangle
This read-only property returns the boundary of this GraphObject in container coordinates. This means that unless it is a Part, the realBounds are in the coordinate space of the GraphObject panel, in this case, they are in the coordinate system of the graph.
You must not modify any property of Rect, that is, the value of this property.
If this GraphObject is a part, the x and y values of actualBounds are the same, the position of the second part, and the width and height of actualBounds represent the rectangular space occupied by the coordinates in the part Diagram.documentBounds.
If this GraphObject is not a top-level object (not a Part), the ActualBounds x and y values indicate the position of the GraphObject in the panel. In Panel.Position type Panel, this is the same position as GraphObject, but in other cases, it depends on the unique working method of each Panel type. The actualBounds width and height of the GraphObject are the final size after applying the scale and angle.
A GraphObject (which may be a GraphObject or a Panel containing multiple GraphObjects) may not contain Part. In this case, these GraphObjects may not appear in the graph. These GraphObjects are unlikely to have the real value of their realBounds, because they may never have the opportunity to be measured and arranged.
As with all read-only properties, using this property as a binding source is unlikely to be useful.
Positioning: Spot
Gets or sets the alignment point of this GraphObject used in the panel layout to determine where this object should be placed in the area allocated by the panel.
The default value is Spot.Default, which allows Panel to use Panel.defaultAlignment to determine Spot. If the attribute is also Spot.Default, the alignment point will be different according to the panel type.
The alignmentFocus is usually used along with this attribute to specify that the object should be positioned on the panel in.
A Spot.Default is equivalent to Spot.Center in the scene, car, horizontal and vertical panels. For examples of alignment in different panels, see the "Introduction" page on "Panels".
Focus: Sopt
Gets or sets the point on this GraphObject to be used as the alignment point in Spot and Fixed Panel. The value must be spot.
The default value is Spot.Default, which means that the Panel type can determine the effective alignment point.
The alignment is often used along with this attribute to specify that the object should be positioned on the panel.
For Panel.Graduated, the alignmentFocus point determines the point on the child element that aligns with a point on the main element.
If you want the link label Node to be located by its anchor point instead of the alignmentFocus point, you can set this property to Spot.None, only on the Node.
For examples of alignment in different panels, see the "Introduction" page on "Panels".
Warning: Starting from 2.0, for Spot Panels, the offsetX/offsetY of alignmentFocus has been reversed. Now, offsetX/Y describes the offset distance from the alignmentFocus point to the alignment point, not the other way around. This is what will always be described when alignmentFocus is used with link tags.
Angle: Number
Gets or sets the angle transformation (in degrees) of this GraphObject. The value must be a number. If the value is not between (0 <= value <360), it will be standardized to be within this range. Zero along the positive X axis (to the right); 90 along the positive Y axis (down). The default value is 0.
When setting on the TextBlock label of the scale panel, if segmentOrientation is not Link.None, Link.OrientAlong or Link.OrientUpright, this value will be ignored. OrientAlong and OrientUpright will use this angle relative to the slope of the main path.
When setting on the Link tag, if segmentOrientation is not Link.None, this value will be ignored.
Regional background: BrushLike
Gets or sets the areaBackground brush of this GraphObject. The areaBackground fills the rectangle described by the coordinates of this GraphObject containing the panel. If you rotate the object, the background area will expand to fill the entire measurement range of the object without rotating the brush.
The value can be a Brush object or a string of CSS colors. The default value is null-the area background is not drawn. For more information on the syntax of CSS color strings, see: CSS colors (mozilla.org).
Background: BrushLike
gets or sets the background Brush of this GraphObject to fill the rectangle of the object's local coordinate space. If you rotate the object, the background will also rotate with it.
The value can be a Brush object or a string of CSS colors. The default value is null-no background is drawn. For more information on the syntax of CSS color strings, see: CSS colors (mozilla.org).
click : function(e: InputEvent, thisObj: GraphObject): void | null
Gets or sets the function to be executed when the user clicks the object. Usually, this requires moving the mouse down, and then using the left mouse button (main) to move the mouse up quickly at approximately the same position. When the user clicks the GraphObject, ClickSelectingTool uses this property. In addition to the DiagramEvent triggered by name, this function is also called. "ObjectSingleClicked"
If this attribute value is a function, use InputEvent and this GraphObject to call. The InputEvent.targetObject stipulates that GraphObject GraphObject.panel s is found before the mouse clicks on the visual tree to obtain this object.
From the second parameter obj, you can reach Node or Link through the part attribute. From there, you can access the bound data through the Panel.data property. Therefore, you can obtain the binding data obj.part.data from the event handler.
By default, this attribute is null.
The objects in the Layer of Layer.isTemporary do not receive click events. If you really want such objects to respond to clicks, please set isActionable to true.
If it does provide a function that can change the diagram or its model, this should be done within a transaction-call Diagram.startTransaction and Diagram.commitTransaction.
An example of a click event handler is shown in the "arrow" example.
Column: Number
Gets or sets the column of this GraphObject (if it is in the "table panel"). The value must be a small non-negative integer. The default value is 0.
Column span: number
Gets or sets the number of columns spanned by this GraphObject (if in the table panel). The value must be a small positive integer. The default value is 1.
If you want to buy a genuine GoJS license, or for more product information, please click [ Consult online customer service ]