g6/packages/site/docs/apis/data/ComboDisplayModel.en.md

title	order
ComboDisplayModel	12

ComboDisplayModel（Combo Display/Rendering Data） is the result of mapping the ComboModel (inner model) through the mapper configuration specified on the graph instance (specification.combo), and is only consumed for internal rendering. You won't consume it anywhere else. The data type inherits the ComboModel data type ComboModel from the internal data flow and is extended as follows:

interface ComboDisplayModel {
  id: string | number;
  data: ComboDisplayModelData; // extends ComboModelData
}

id

The unique ID of the Combo. The ID cannot be modified once the Combo is created.

• Required: True;
• Type: string|number

data

The data in ComboDisplayModelData is the result of mapping the ComboModel data through the mapper configuration specified on the graph instance (specification.combo). It should contain all the contents of ComboModel along with additional graphic style configurations.

• Required: True;
• Type: ComboDisplayModelData, extended from ComboModel, with additional properties as described below:

ComboDisplayModelData.lodLevels

Specifies the zoom level divisions for the Combo. It is an array of zoom level range coefficients, representing the division of zoom levels. One of the levels should have primary: true, indicating that it has a level index of 0. The level indices decrease for levels with zoomRange less than the current level, and increase for levels with zoomRange greater than the current level. The level index corresponds to the lod value in the graphics configuration below.

• Required: False;
• Type: LodLevel[], where LodLevel is defined as follows:

Name	Type	Description
zoomRange	[number, number]	The zoom level range defined for this level. When the graph zoom level zoom >= zoomRange[0] && zoom < zoomRange[1], it indicates that the node is in this level
primary	boolean	Whether it is the primary level. If true, it means that the level number is 0. Levels with smaller this zoomRange values have decreasing level numbers, while levels with larger this zoomRange values have increasing level numbers. In the NodeDisplayModelData.lodLevels array, there should be only one level with primary: true. And the level number corresponds to the lod value in the shape style configurations below

ComboDisplayModelData.animates

Configuration of graphic animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). Animation Demo.

• Required: False;
• Type: IAnimates, defined as follows:

interface IAnimates {
  buildIn?: IAnimate[]; // Animations when certain graphics are created in the combo
  buildOut?: IAnimate[]; // Animations when certain graphics are destroyed in the combo
  show?: IAnimate[]; // Animations when certain graphics transition from hidden to visible in the combo
  hide?: IAnimate[]; // Animations when certain graphics transition from visible to hidden in the combo
  update?: (IAnimate | IStateAnimate)[]; // Animations when certain graphics undergo data or state updates in the combo
}

In this, IAnimate is defined as follows:

Name	Type	Default	Description
IAnimate.fields	string[]	undefined	The names of the graphic style properties related to this animation, for example ['fill', 'lineWidth']
IAnimate.shapeId	string	group	The ID of the graphic on which the animation needs to be performed. If not specified, it represents the animation on the entire graphic group
IAnimate.order?	number	0	The order in which this animation is executed among IAnimate[], allowing for sequential playback of multiple animations during one update
IAnimate.duration?	number	500	The duration of this animation, the smaller the value, the faster the animation speed
IAnimate.iterations?	number	1	The number of times this animation is executed, -1 represents looping execution
IAnimate.easing?	string	'cubic-bezier(0.250, 0.460, 0.450, 0.940)'	The easing function of this animation, the possible values can be referred to MDN easing definition

IStateAnimate is defined as follows, which adds a field states specifying the states in which this animation is executed to IAnimate:

interface IStateAnimate extends IAnimate {
  states: string[];
}

ComboDisplayModelData.keyShape

The style configuration of the key shape of the Combo. The key shape of the Combo represents its primary form and is also used to calculate the incoming position of edges.

• Required: False;
• Type: ShapeStyle, and the configuration options for different key shapes are different. For example, the key shape of 'circle-combo' is 'circle' (refer to Circle Shape Style), and the key shape of 'rect-combo' is 'rect' (refer to Rect Shape Style).

ComboDisplayModelData.haloShape

In the built-in Combo and themes, haloShape refers to the halo effect displayed around the key shape (keyShape) of the Combo in the active state (usually triggered when the mouse hovers) and selected state (usually triggered when selected). In the logic of the built-in Combo, the type and color of the haloShape follow the key shape (keyShape).

• Required: False;
• Type: ShapeStyle, where the type of haloShape follows the key shape (keyShape). The configuration options for different key shapes are different. For example, the key shape of 'circle-combo' is 'circle' (refer to Circle Shape Style), and the key shape of 'rect-combo' is 'rect' (refer to Rect Shape Style).

ComboDisplayModelData.labelShape

The text shape of the Combo, supported by built-in Combo or custom Combo that inherits the built-in Combo (without overriding related content).

• Required: False;
• Type:

  TextStyleProps & {
    /**
     * The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo.
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom';
    /**
     * The offset of the text shape from the key shape (keyShape) in the x-direction.
     */
    offsetX?: number;
    /**
     * The offset of the text shape from the key shape (keyShape) in the y-direction.
     */
    offsetY?: number;
    /**
     * The offset of the text shape from the key shape (keyShape) in the z-direction.
     */
    offsetZ?: number;
    /**
     * The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end.
     */
    maxWidth?: string | number;
    /**
     * The rotation angle of the text (in radians).
     */
    angle?: number;
  };

The related shape style can be referred to as TextStyleProps Text Shape Style。

ComboDisplayModelData.labelBackgroundShape

The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as {} will use the default style in the theme to display the text background shape.

• Required: False;
• Type:

ShapeStyle & {
  padding?: number | number[]; // The padding distance between the text and the background rectangle in all directions
};

The related shape style can be referred to as RectStyleProps RectStyleProps.

ComboDisplayModelData.badgeShapes

The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. badgeShapes configures multiple badges.

• Required: False;
• Type:

  {
    /**
     * The background color of the badge (applies to all badges, lower priority than the color setting of individual badges below)
     */
    color?: string;
    /**
     * The color palette of the badge background, which means that the badges below will automatically take colors from this palette.
     * Lower priority than the color setting of individual badges below.
     */
    palette?: string[];
    /**
     * The text color of the badge (applies to all badges, lower priority than the textColor setting of individual badges below)
     */
    textColor?: string;
    /**
     * The style configuration of individual badges, which overrides the above configurations.
     */
    [key: number]: ShapeStyle & {
      /**
       * The position of the badge, supported values are described below
       */
      position?: IBadgePosition;
      /**
       * The background color of the badge
       */
      color?: string;
      /**
       * The text color of the badge
       */
      textColor?: string;
    };
  }

BadgePosition can have the following values:

Value	Description
'rightTop'	Top right corner, recommended
'right'	Middle right, recommended
'rightBottom'	Bottom right corner, recommended
'leftTop'	Top left corner
'left'	Middle left
'leftBottom'	Bottom left corner
'bottom'	Middle bottom
'top'	Middle top
'bottomRight'	Bottom right corner, same as 'rightBottom'
'bottomLeft'	Bottom left corner, same as 'leftBottom'
'topRight'	Top right corner, same as 'rightTop'
'topLeft'	Top left corner, same as 'leftTop'

ComboDisplayModelData.anchorShapes

The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes.

• Required: False;
• Type:

// The outer layer configures the style of all anchor shapes (circles), with lower priority than the individual anchor shape configurations.
CircleStyleProps & {
  // Individual anchor shape configurations, with higher priority than the outer CircleStyleProps.
  [key: number]: CircleStyleProps & {
    // The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape.
    position?: 'top' | 'left' | 'bottom' | 'right' | [number, number];
  };
};

The style of the anchor shapes can be referred to as CircleStyleProps.

ComboDisplayModelData.otherShapes

The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in otherShapes.

• Required: False;
• Type:

{
  // The key is the shape id, in the format of xxShape
  // The value is the shape style configuration (which varies depending on the shape, see the relevant documentation for each shape), as well as the animation of the shape
  [shapeId: string]: ShapeStyleProps;
}

The style configurations for different shapes can be referred to in the corresponding documentation under the Shape Style directory.