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
This is the abstract base class for all graphic objects. The classes inherited from GraphObject include: Shape, TextBlock, Picture and Panel. The component class is derived from the panel class, and the node class and link class are derived from the panel class.
It is very common to use the static function graphject. To build a visual tree of graphical objects. You can see many examples of this in the introduction, starting with building objects and starting with the smallest sample.
Since GraphObject is an abstract class, programmers do not create GraphObject itself, but this class defines many properties used by various GraphObjects.
The only visual properties on GraphObject are background and areabbackground. However, you can control whether to draw graphics objects by setting visible, or if you still want graphics objects to take up space, you can set the opacity to zero. In addition, if you want to control whether any mouse or touch events "see" the GraphObject, you can set pickable to false.
To learn more about how to draw, see the properties on the Shape, TextBlock, and Picture classes.
GraphObject classification
GraphObject defines most of the properties that cause the size of the object itself to differ. The most prominent ones include:
The desiredSize, minSize, and maxSize attributes are used to explicitly set or limit the size of visual elements. Width and height are convenience attributes, which set the width and height of desiredSize respectively.
Angle and scale attributes are used to transform visual elements.
The stretch property determines how the graphic object will fill its visual space, and is given to it by its containing panel context. Top-level (partial) graphical objects are not affected by this attribute, because they are always granted unlimited space.
All graphical objects in a graph are measured and then arranged in a tree-like manner according to the panels they contain. After measuring and arranging, a GraphObject will have the valid values of the read-only properties naturalBounds, measuredbbounds and actualBounds.
The natural boundary of GraphObject describes its local size and is not affected by any transformation (zoom, angle).
The measurement range of a graphic object describes its size within the panel it contains.
The actual boundary of the graphic object describes its position in the panel and a given size. This size may be smaller than the measurement range, for example, if a graphical object with a larger desired size is placed in a smaller panel of the desired size. The actual boundary being smaller than the measurement boundary usually means that an object will be cropped.
The size and position of the graphic object in the panel
Some graphhobject properties guide the included panel on how to set the size and position of the object in the panel.
Alignment specifies the position of the object relative to an area on the panel. For example, the alignment value of the spots. bottom-right indicates that the GraphObject should be in the lower right corner of the panel.
alignmentFocus specifies exactly which point of the GraphObject should be aligned at the alignment point.
The column and row attributes are only used in Panel. Surface panel to indicate where the GraphObject should be.
The columnSpan and rowSpan attributes tell the panel. How big the graphic object should be.
The isPanelMain property indicates to certain types of panels that GraphObject is the "main" object that other panel sub-objects should measure or locate.
The margin property tells the panel that contains it the extra space around this graphical object.
The position attribute is used to determine the relative position of the graphic object as a panel element. The position of the panel.
Top-level graphics objects are part
Part is a derived class of GraphObject that represents the top-level object. All top-level graphical objects must be parts, and nodes, links, groups, and decorations all originate from parts. The position of the part determines the position of the upper left corner of the part in the document coordinates. See also the part. location, it supports the method of specifying the location based on the different locations of different elements in the part.
There are several read-only properties to help navigate the visual tree.
Panel returns the panel
part that directly contains the graphic object. Returns the part where the GraphObject is located, possibly through the middle panel; this is usually used to obtain model data. Panel.data
layer returns the layer where the part of this GraphObject is located.
Returns the part layer of this graphhobject. Diagram
View an example of a visual tree for a diagram that shows a simple diagram of a visual tree.
User interaction
The graphic object has several properties and supports dynamic custom interaction. There are several definable functions that can be executed on input events: mouseDragEnter, mouseDragLeave, mouseDrop, mouseEnter, mouseHold, mouseHover, mouseLeave and mouseOver. For example, you can define the mouse enter-leave event handler to modify the appearance of the mouse when it passes the link:
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape,
{strokeWidth: 2, stroke: “gray” }, // default color is “gray”
{// here E is the InputEvent and OBJ is this Shape
mouseEnter : function(e, obj) {obj.strokeWidth = 4; obj.stroke = “dodgerblue”; },
mouseLeave: function(e, obj) {obj.strokeWidth = 2; obj.stroke = “gray”;}
}) );
When the user clicks the graphhobject appropriately, the click, doubleClick, and contextClick functions are executed. When calling these click functions, InputEvent is used as the first parameter, and this GraphObject is used as the second parameter. For example, you can define a click event handler on a node that jumps to another page:
myDiagram.nodeTemplate =
$(go.Node, “Auto”,
$(go.Shape, “RoundedRectangle”,
new go.Binding (“
Fill ”, “color”)), $(go.TextBlock,
{name: “TB”, margin: 3 },
new go.Binding(“text”, “key”)),
{// second arg will be this GraphObject, which in this case is the Node itself:
click: function(e, node) { window.open("https://en.wikipedia.org/Wiki/" + node.data .key); } }); Note: You may prefer to define the DiagramEvent listener on the diagram rather than on a separate graphic object. DiagramEvents also includes more general events, which do not necessarily correspond to input events. The properties actionCancel, actionDown, actionMove and actionUp define the function to be executed when the isActionable property of the GraphObject is set to true (default is false). See ActionTool for more details.
GraphObjects as a port
In GoJS, links can only connect to elements within nodes designated as "ports". By default, the only port is the node itself. Setting the portId of the GraphObject in the node allows the object to act as a port. Note: The only model that can save the port connected to the link, that is, the portIds of the non-empty string, is the GraphLinksModel of the GraphLinksModel. linkFromPortIdProperty GraphLinksModel. linkToPortIdProperty is set to the name property of the link data object.
Graphical objects have several properties, which are only relevant when they are used as ports. These port-related attributes are:
portId, it must be set to a unique string in the node, so that this GraphObject is regarded as a "port" instead of the entire node
fromSpot and toSpot. The link should be connected to this port
fromEndSegmentLength and toEndSegmentLength are the link segments adjacent to the port the length
fromShortLength and toShortLength represents link should be terminated prior to contacting the port distance
fromLinkable and toLinkable, whether the user can draw link connection to the port
fromLinkableDuplicates and toLinkableDuplicates, whether the user can draw a plurality of links between the same ports
fromLinkableSelfNode And toLinkableSelfNode, can the user draw a link
fromMaxLinks and toMaxLinks between the ports on the same node to limit the number of links connected to this port in a specific direction. Graphic objects can also be used as
labels on the
link. Tag of". In addition to the alignmentFocus property, these properties also position the "label" at a specific point on the link path in a specific way in the link panel:
segmentIndex, which segment the label should be on
segmentFraction, the distance of the label on the segment
segmentOffset, where the label should be positioned relative to the segment
segmentOrientation, how the label should be rotated relative to the angle of the line segment
Interactive behavior
There are several properties that specify quite advanced interaction behavior:
Cursor, specify the CSS string of the cursor
Shortcut menu
Tooltip
This article is reproduced from [Huidu Technology] evget welcomes any form of reprinting, but please be sure to indicate the source, do not modify the related links of the original text, and respect the achievements of others' labor.
Original link: https://www.evget.com/article/2021/ 1/5/39988.html