ModelRect

8 min read

A built-in node modelRect has the default style as below, the label is drawed on the center of it.

img img


Tips: There will be no description when there is no description in the data.

Usage

As stated in Built-in Nodes , there are three methods to configure nodes: Configure nodes globally when instantiating a Graph; Configure nodes in their data; Configure nodes by graph.node(nodeFn). Their priorities are:

graph.node(nodeFn) > Configure in data > Configure globally

⚠️ Attention: Expect for id, and label which should be assigned to every single node data, the other configurations in The Common Property and in each node type (refer to doc of each node type) support to be assigned by the three ways.

1 Global Configure When Instantiating a Graph

Assign type to 'modelRect' in the defaultNode object when instantiating a Graph:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    type: 'modelRect',
    // Other configuraltions
  },
});

2 Configure in the Data

To configure different nodes with different properties, you can write the properties into the node data.

const data = {
  nodes: [{
	  id: 'node0',
    type: 'modelRect',
    ... // Other configurations
    },
    ... // Other nodes
  ],
  edges: [
    ... // edges
  ]
}

Property

The Node Common Properties are available for ModelRect node, some special properties are shown below. The property with Object type will be described after the table:

NameDescriptionTypeRemark
sizeThe size of the modelRect nodeNumberArray
styleThe default style of modelRect nodeObjectCorrespond to the styles in Canvas
labelThe text of the labelString
labelCfgThe configurations of the labelObject
stateStylesThe styles in different statesObjectRefer to Configure Styles for State
linkPointsThe link points in visualObjectThey are invisible by default. It is usually used with the anchorPoints. The differences are described in linkPoints
preRectLeft rect of the nodeObjectSpecial property for modelRect
logoIconThe left logo iconObjectSpecial property for modelRect
stateIconThe right state iconObjectSpecial property for modelRect
descriptionThe description text below the labelStringSpecial property for modelRect
descriptionCfg
It is supported after V3.3
The configuration for description textObjectSpecial property for modelRect
    // The configuration of the logo icon in the node
    logoIcon: {
      // Whether to show the icon. false means hide the icon
      show: true,
      x: 0,
      y: 0,
      // the image url of icon
      img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
      width: 16,
      height: 16,
      // Adjust the left/right offset of the icon
      offset: 0
    },
    // The configuration of the state icon in the node
    stateIcon: {
      // Whether to show the icon. false means hide the icon
      show: true,
      x: 0,
      y: 0,
      // the image url of icon
      img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
      width: 16,
      height: 16,
      // Adjust the left/right offset of the icon
      offset: -5
    }

style

The Node Common Styles are available for Circle node.style is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the style globally when instantiating a Graph.
img

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      type: 'modelRect',
      label: 'modelRect',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // type: 'modelRect',  // The type has been assigned in the data, we do not have to define it any more
    size: [200, 80],
    style: {
      fill: '#f0f5ff',
      stroke: '#adc6ff',
      lineWidth: 2,
    },
  },
});
graph.data(data);
graph.render();

labelCfg

labelCfg is an object to configure the label of the node. The Node Common Label Configurations are available. Base on the code in style section, we add labelCfg to defaultNode.
img

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  defaultNode: {
    // ... Other properties for node
    labelCfg: {
      style: {
        fill: '#9254de',
        fontSize: 18,
      },
    },
  },
});
// ...

descriptionCfg

⚠️Attension: It will be supported after V3.3.

descriptionCfg is an object to configure the label of the node. The Node Common Label Configurations are available. Besides, descriptionCfg has special attribute:

NameDescriptionTypeRemark
paddingTopThe padding from the description to the label textNumber0 by default

Base on the code in style section, we add descriptionCfg to defaultNode

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  defaultNode: {
    // ... Other properties for node
    descriptionCfg: {
      style: {
        fill: '#f00',
      },
    },
  },
});
// ...

linkPoints

linkPoints is an object to configure the small circles on the 「top, bottom, left, and right」.

⚠️Attention: It is different from anchorPoints: anchorPoints is an 「array」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to anchorPoints); linkPoints is an object that indicates whether 「render」the four small circles, which do not connect the relevant edges. These two properties are often used together.
NameDescriptionTypeRemark
topWhether to show the top small circleBooleanfalse by default
bottomWhether to show the bototm small circleBooleanfalse by default
leftWhether to show the left small circleBooleanfalse by default
rightWhether to show the right small circleBooleanfalse by default
sizeThe size of the small circlesNumber3 by default
fillThe filling color of the small circlesString'#72CC4A' by default
strokeThe stroke color of the small circlesString'#72CC4A' by default
lineWidthThe line width of the small circlesNumber1 by default

Base on the code in style section, we add linkPoints to defaultNode.
img

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  defaultNode: {
    // ... Other configurations for nodes
    linkPoints: {
      top: true,
      bottom: true,
      left: true,
      right: true,
      size: 5,
      fill: '#fff',
    },
  },
});
// ...

preRect

preRect configures the left rect of the rectModel node.

NameDescriptionTypeRemark
showWhether to show the left rectBooleantrue by default
widthThe width of the left rectNumber4 by default
fillThe filling color of the left rectString'#40a9ff' by default
radiusThe border radius of the left rectNumber2 by default

Base on the code in style section, we add icon to defaultNode.
img

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for the graph
  defaultNode: {
    // ... Other configurations for nodes
    preRect: {
      // false means hiding it
      show: true,
      fill: '#f759ab',
      width: 8,
    },
  },
});
// ...

logoIcon / stateIcon

logoIcon and stateIcon configure the left and right logo of the modelRect node. The configurations of them are the same.

NameDescriptionTypeRemark
showWhether to show the iconBooleantrue by default
imgThe url of the icon imageString
- The default image for logoIcon is img
- The default image for stateIcon is img
widthThe width of the iconNumber16 by default
heightThe height of the iconNumber16 by default
offsetAdjust the left/right offset of the iconNumber
- The dfualt offset of the left logoIcon is 0
- The dfualt offset of the right stateIcon is -5

Base on the code in style section, we add logoIcon and stateIcon to defaultNode to hide the left icon and change the image for right icon.
img

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for the graph
  defaultNode: {
    // ... Other configurations for nodes
    logoIcon: {
      show: false,
    },
    stateIcon: {
      show: true,
      img:
        'https://gw.alipayobjects.com/zos/basement_prod/c781088a-c635-452a-940c-0173663456d4.svg',
    },
  },
});
// ...