How to make the connecting line magnetize when trying to connect two nodes on the canvas and when approaching the port in G6 5.x

[verron16]

How to make the connecting line magnetize when trying to connect two nodes on the canvas and when approaching the port in G6 5.x

[petercat-assistant[bot]]

To achieve the effect of a connecting line magnetizing when trying to connect two nodes on the canvas and when approaching the port in G6 5.x, you can utilize the built-in features of G6 to handle this interaction. Here's a general approach to implement this functionality:

1. Enable Ports on Nodes: Ensure that your nodes have ports defined. Ports are the points on the nodes where edges can connect.

2. Use the edge:add Event: Listen for the edge:add event, which is triggered when a new edge is being created. This event can be used to handle the logic for snapping the edge to the nearest port.

3. Calculate the Nearest Port: When the edge is being drawn, calculate the nearest port on the target node. You can do this by comparing the distance between the current mouse position and each port's position.

4. Snap the Edge to the Port: Once the nearest port is identified, update the edge's target to snap to this port.

Here's a basic example of how you might implement this:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: ['drag-node', 'create-edge'],
  },
  defaultNode: {
    type: 'circle',
    size: [50],
    style: {
      fill: '#9FD4FF',
      stroke: '#5B8FF9',
    },
    ports: {
      items: [
        { id: 'port1', x: 0, y: -25 },
        { id: 'port2', x: 25, y: 0 },
        { id: 'port3', x: 0, y: 25 },
        { id: 'port4', x: -25, y: 0 },
      ],
    },
  },
  defaultEdge: {
    style: {
      stroke: '#F6BD16',
    },
  },
});

graph.on('edge:add', (evt) => {
  const { edge } = evt;
  const targetNode = graph.findById(edge.getTarget().getID());
  const targetPorts = targetNode.getPorts();
  const mousePos = graph.getPointByClient(evt.clientX, evt.clientY);

  let minDistance = Infinity;
  let closestPort = null;

  targetPorts.forEach((port) => {
    const portPos = port.getModel();
    const distance = Math.sqrt(
      Math.pow(portPos.x - mousePos.x, 2) + Math.pow(portPos.y - mousePos.y, 2)
    );

    if (distance < minDistance) {
      minDistance = distance;
      closestPort = port;
    }
  });

  if (closestPort) {
    edge.update({
      target: closestPort.getID(),
    });
  }
});

Explanation:

• Ports: Define ports on your nodes where edges can connect.
• Event Handling: Use the edge:add event to detect when an edge is being created.
• Distance Calculation: Calculate the distance from the mouse position to each port to find the nearest one.
• Edge Update: Update the edge's target to snap to the nearest port.

This example provides a basic framework. You may need to adjust the logic to fit your specific requirements, such as handling different node shapes or customizing the snapping behavior.

If you have any further questions or need more detailed guidance, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.