Introduction to each index of the built-in GraphObject class of the flowchart control

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

fromMaxLinks : number

Gets or sets the maximum number of links that may be issued by this port. LinkingBaseTool.isValidFrom uses this property.
The value must be non-negative. The default value is infinity.

Unless the entire Node acts as a single port, this attribute must be set on the GraphObject whose portId is not null. In this case, this attribute should be set on the Node.

fromShortLength : number

Gets or sets the distance from the end of the link from the port to the actual port. Positive values are restricted by fromEndSegmentLength or Link.fromEndSegmentLength. Negative values will cause the link to expand to the port. The default value is zero.

This property is useful when you have thick links and sharp arrows. Usually, the link Shape extends to the end of the arrow. If the link "shape" is wider, you will see its edge behind the arrow. By setting this property to a small positive value, the link shape can end within the body of the arrow, and only the point of the arrow is visible at the end of the link.

A negative value for this property is also useful when you want the link shape to continue entering the port, possibly because part of the port is transparent and you want the link to appear to be visually connected to other points on the node.

When determining the route of the link, the value of Link.fromShortLength (if not NaN) takes precedence over the value of this port.

For an example of how to use this attribute, see Link connection point.

Unless the entire Node acts as a single port, this attribute must be set on the GraphObject whose portId is not null. In this case, this attribute should be set on the Node.

fromSpot : Spot

Get or set the location where the link should connect from this port. The default value is Spot.None, which means that the link routing must consider the shape of the port and connect at the closest point.

The value Link.fromSpot, if it is not Spot.Default, when judging the route of the link, the priority of the port is higher than this value. Many predefined Layouts will automatically set Link.fromSpot and Link.toSpot, causing this attribute and toSpot on the port element to be ignored. Depending on the layout, you may be able to disable this behavior, for example by setting ForceDirectedLayout.setsPortSpots, TreeLayout.setsPortSpot, TreeLayout.setsChildPortSpot or LayeredDigraphLayout.setsPortSpots to false.

For an example of how to use this attribute, see Link connection point.

Unless the entire Node acts as a single port, this attribute must be set on the GraphObject whose portId is not null. In this case, this attribute should be set on the Node.

height : number

Gets or sets the desired height of this GraphObject in local coordinates. This just gets or sets the height component of the required Size. The default value is NaN.

The size can also be constrained by setting minSize and maxSize.

The height does not include any transformation due to scale or angle, nor does it include the thickness of the pen due to Shape.strokeWidth (if it is Shape). If there is a panel containing a panel, the panel will determine the actual size.

isActionable : boolean

This property determines whether this GraphObject's event occurs before all other events (including selection). This will enable actionDown, actionMove, actionUp and actionCancel events, which are all handled by ActionTool.

If the object is not visible or cannot be picked up, it will not get any mouse/touch events.

This attribute is rarely used-usually only when implementing objects that are used as buttons, knobs, or sliders. The default value is false.

Panel Main: Boolean

Gets or sets whether GraphObject is the "main" object of certain Panel types. Panels that use "main" objects include Panel.Auto, Panel.Spot, and Panel.Link.

The panel that uses the "main" object will use the first object whose property is set to true, otherwise it will only use the first object (if the property is not set).

Once the object is an element of the panel, do not modify this attribute.

Read-only layer : Layer | null

This read-only property returns the Layer contained in the GraphObject (if it exists). Ordinary GraphObject cannot directly belong to the layer-only parts can directly belong to the layer.

This attribute cannot be set. Generally, the layer where the GraphObject is located can be changed by setting Part.layerName. Adding a part to the relationship diagram will automatically add the part to the layer in the relationship diagram based on the layerName.

margin ：MarginLike

Gets or sets the size (in the form of Margin) of the blank area around this GraphObject, which is included in its Panel coordinates.

Negative values are allowed, but may cause overlap with adjacent objects in the Panel. You cannot modify the top, left, right, or bottom of this property value-if you want to change the margin, you must set this property to another margin. The default margin is Margin (0,0,0,0).

The property setter accepts numbers instead of Margin objects: providing the number N will result in the use of Margin(N, N, N, N). The property getter will always return the margin.

maxSize : Size

Gets or sets the maximum size of this GraphObject in container coordinates (Panel or document). Any new value must be of type Size; NaN values are treated as infinity. If you don't need the maximum width or height, use NaN or Infinity.

You cannot modify the width or height of this attribute value-if you want to change maxSize, you must set this attribute to another Size. The default value is "infinity times infinity". The panel containing the panel will determine the actual size of the object.

Read-only measuredBounds : Rect

This read-only property returns the measuredBounds of the GraphObject in container coordinates (Panel or document). This describes the transition boundary where the boundary has been excluded.

You must not modify any attribute of Rect, that is, the value of this attribute.

As with all read-only properties, using this property as a binding source is unlikely to be useful.

minSize : Size

Gets or sets the minimum size of this GraphObject in container coordinates (Panel or document). Any new value must be of type Size; NaN values are treated as 0.

You cannot modify the width or height of this attribute value-if you want to change the minSize, you must set this attribute to another size. The default value is zero times zero. The panel containing the panel will determine the actual size of the object.

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

Gets or sets the function to be executed when the user moves the mouse to the fixed object during dragging of the DraggingTool; this allows you to provide feedback during the drag process according to the position of the drag.

If this property value is a function, InputEvent is used, this GraphObject and any previous GraphObject are called. The InputEvent.targetObject stipulates that GraphObject GraphObject.panel s is found before the mouse clicks on the visual tree to obtain this object. By default, this attribute is null.

Please note that for drag and drop originating from different graphs, the selection set of the target graph will not be the part to be dragged. Instead, the temporary parts to be dragged can be found in DraggingTool.copiedParts in the source image.

该函数用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.

For an example of the mouseDragEnter event handler, see the node template in the sample organization chart editor.

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

Gets or sets the function to be executed when the user moves the mouse out of the fixed object during the DraggingTool drag; this allows you to provide feedback during the drag process according to the position of the drag.

If this attribute value is a function, use InputEvent, this GraphObject and any new GraphObject where the mouse is located. InputEvent.targetObject provides the GraphObject found at the mouse point before searching the visual tree of the GraphObject. .panel reaches this object. By default, this attribute is null.

Call this function with Diagram.skipsUndoManager temporarily set to true, so that any changes to GraphObject will not be recorded in UndoManager. You don't need to start and commit any transaction in this function, because DraggingTool will already be executing a transaction. After calling this function, the graph will be updated immediately.

For an example of the mouseDragLeave event handler, see the node template in the sample organization chart editor.

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

Gets or sets the function, which is executed when the user drops the selection on the object when the DraggingTool is dragged; this allows you to customize the behavior when the object is dropped.

If this property value is a function, use InputEvent (this GraphObject) to call it. The InputEvent.targetObject stipulates that GraphObject GraphObject.panel s is found before the mouse clicks on the visual tree to obtain this object. This function is called in the transaction executed by DraggingTool, so you don't need to execute one. By default, this attribute is null.

For an example of the mouseDrop event handler, see the node template in the sample organization chart editor.

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

Gets or sets the function to be executed when the user moves the mouse to the object without holding down any buttons. This attribute is used by ToolManager.

If this property value is a function, InputEvent is used to call the GraphObject where the mouse is now and any previous GraphObject where the mouse is. InputEvent.targetObject provides a visual tree of GraphObject.panel drawn by the GraphObject found at the mouse point before the search to reach the object. By default, this attribute is null.

Call this function with Diagram.skipsUndoManager temporarily set to true, so that any changes to GraphObject will not be recorded in UndoManager. You don't need to start and commit any transactions in this function. After calling this function, the graph will be updated immediately.

For example, consider a situation where when the user moves the mouse over a node, it is desired to display the buttons that the user can click, and when the mouse leaves the node, these buttons will automatically disappear. This can be achieved by pressing the button to display the decoration.

Note how it also automatically defines the mouseLeave event handler. When the mouse leaves the decoration area or the user executes the button click event handler, the context menu decoration will be deleted.