@blocksuite/connector

@blocksuite/connector

How to use

import { route, Rectangle } from '@blocksuite/connector';

const rects = [
  new Rectangle(30, 30, 200, 200),
  new Rectangle(160, 160, 300, 300),
];

const points = [
  { x: 50, y: 30 },
  { x: 160, y: 200 },
];

const path = route(rects, points);
console.log('path', path);

Example

See packages/playground/examples/canvas/connector.html

Info

The main idea comes from https://medium.com/swlh/routing-orthogonal-diagram-connectors-in-javascript-191dc2c5ff70 . The final implementation is based on the idea of the blog and modifies the following parts:

• When generating graph, do not rely on the binding of rectangle and point
• When generating graphs, do not limit the number of rectangles and points
• When the path is finally calculated, select any two points from the graph
• When there are only two points or only one rectangle, manually generate the points of the graph

Problems caused by modifications:

• The Graph becomes larger, and more points.length lines are added, causing the final path point to increase points.length * 2n

References

Blog：

• Orthogonal connector: https://medium.com/swlh/routing-orthogonal-diagram-connectors-in-javascript-191dc2c5ff70
• A-star: https://www.redblobgames.com/pathfinding/a-star/introduction.html

Code:

• Orthogonal connector: https://gist.github.com/jose-mdz/4a8894c152383b9d7a870c24a04447e4
• A-star: https://github.com/bgrins/javascript-astar

Visualized path finding:

• https://qiao.github.io/PathFinding.js/visual/