6/25/2023 0 Comments Keyshape top![]() 'Destroy' can be controlled by the Graph. For the users who have the requirements to Custom Node, Custom Edge, you'd better know the life cycle of Shape, and Custom Combo, you'd better know the life cycle of Shape. You can skip this part if you are going to use the built-in items. When the keyShape of the node is the rect:.When the keyShape of the node is the circle:.There is a node with a rect Shape and a circle Shape in transparent filling and grey stroke. Different keyShape will lead to different result link points. KeyShape is used for defining the Bounding Box - bbox(x, y, width, height) of the node / combo to do some transformations and calculate the link points. Styles for linkPoints can be assigned here }, // labelCfg: ) Bounding Box We also listen to the mouse enter and mouse leave events to activate/inactivate the hover state, the responsing styles defined in nodeStateStyles only takes effect on keyShape as well. The styles for other Shapes need to be configured by other properties such as linkPoints and labelCfg. The code below assigns the style for the node. There are other shapes including four small circle Shapes around and a text Shape for the label. The keyShape of the node is the rect Shape. We use the built-in rect node in this example. To break the rules above and achieve free definations, you can register a type of Custom Node, Custom Edge, or Custom Combo. And the way to define the styles for different states ( nodeStateStyles / edgeStateStyles / comboStateStyles on graph or stateStyles of itself) on keyShape and other shapes are different, refer to Configure Styles for State. The property style in built-in nodes / edges / combos of G6 is only reponsed by keyShape. It has two main effcts: Response the Style keyShape is returned by draw() of each type of item. KeyShapeĪs stated above, there is only one keyShape for each type of item. Refer to Custom Node, Custom Edge, and Custom Combo. (Refer to Built-in Edges) Built-in combos includes 'circle', 'rect' (Refer to Built-in Combos).īesides, G6 allows users to define their own types of item by register a custom node / edge / combo. (Refer to Built-in Nodes) Built-in edges includes 'line', 'polyline', 'cubic'. Built-in nodes includes 'circle', 'rect', 'ellipse'. G6 designs abundant built-in nodes / edges / combos by combing different Shapes. (Right) A node with a text Shape and five circle Shapes including the main circle and four anchors, the keyShape is the green circle. (Center) A node with a text Shape and the circle Shape, the keyShape is the circle. (Left) A node with one circle Shape, the keyShape is the circle. ![]() keyShape is the Shape that responses interactions and State changing. The keyShape of each nodes in the figure below is the green circle. In the figure(Left) below, there is a node with a circle Shape (Center) a node with a circle Shape and a text Shape (right) a node with a text Shape and 5 circle Shapes including the main circle and four anchor points. The configurations on a node, an edge, or a label will be writed onto corresponding graphics Shape. A node / edge / combo is made up of one or several Shapes. Graphics Shape (hereinafter referred to as Shape) in G6 is the shape of items (nodes/edges/combos), it can be a circle, a rect, path, and so on.
0 Comments
Leave a Reply. |