start

There are some interactive details that need to be dealt with in the manual connection process, such as automatic adsorption near the connection post and highlighting of joinable elements. Fortunately, these don’t need to be implemented by ourselves, but X6 provides a convenient configuration to help us solve these problems.

implementation

Connection configuration

When the connection is near the connecting pile, we hope that the connection will automatically adsorb to the connecting pile, so that the interactive experience will be better:

const graph = new Graph({
  connecting: {
    snap: {
      radius: 20.// Automatically adsorb when 20px away from the target}}})Copy the code

Now drag the line to the blank and release it, it will generate a line whose end point is in the blank. This line is invalid in the flowchart, so we hope that if the end point is in the blank, the line will disappear automatically:

const graph = new Graph({
  connecting: {
    allowBlank: false}})Copy the code

In actual business, users need to define connection validity according to business logic. X6 provides three methods according to the order of judgment:

methods trigger
validateMagnet Click on the Magnet element to determine whether to add an edge based on the value returned by validateMagnet
validateConnection Drag and drop a connection based on the validateConnection return value
validateEdge When you stop dragging an edge, check whether the edge is valid based on the validateEdge return value. If false is returned, the edge is cleared 
const graph = new Graph({
  connecting: {
    validateConnection({ targetMagnet }) {
      if (targetMagnet) {
        // Connect only to piles whose group is TOP
        returntargetMagnet! .getAttribute('port-group') = = ='top'
      }
      return false}}})Copy the code

Highlight the configuration

As we can see from the above picture, when the connection pile can be connected, when the connection reaches it, it will be highlighted, which is also customizable:

const graph = new Graph({
  highlighting: {
    magnetAdsorbed: {
      name: 'stroke'.args: {
        attrs: {
          fill: '#D06269'.stroke: '#D06269',},},}}})Copy the code

The last

Many functions of X6 are precipitation from actual business scenarios. Some interactive details have been polished smooth enough, but there are still some areas that are not good enough. I hope to get your feedback.

  1. Source: portal
  2. Remember to star X6 warehouse