@eraserlabs/放电

导言

@eraserlabs/layout 是用于 eraser-diagrams。它也可以作为连接路由器独立使用,用于其实体已经大小和定位的图表 @eraserlabs/utils 作为它唯一的依赖.

它的主要惯例是 routeConnections。每个连接都有风格. elbow 连接(默认)去走廊路由器:它产生正交路由,理解被嵌入的容器,避免障碍,并且可以在图中行走部分或全部连接,尊重已经行走的行的当前坐标. straight 财务报告和审定财务报表 arc 连接是实体所绘制边界之间的一个直接段;弧会添加一个 bend从和弦中间到顶端的签名距离。 当一个实体移动时,一直线的受约束端沿轮廓滑动而一弧的受约束端保持其在实体上的位置.

为什么

我们找不到一个独立的路由器,用于任意嵌入图,它们也支持部分路由。 现有的选项往往会与一个完整的图放出引擎或编辑器结合,假设一个平面图,或者要求每个连接都一起再生成.

@eraserlabs/layout 将实体放置作为输入。 它沿着已存在的几何线进行连接,同时允许未受影响的路由保持固定,这使得它既适合初始渲染,也适合增量编辑,也可以在图形用户界面编辑器中进行完全交互的拖动编辑.

使用量

import {
  COMMIT_REPAIR,
  LayoutManager,
  routeConnections,
  type LayoutEntity,
  type NewConnection,
} from '@eraserlabs/layout';

const entities: LayoutEntity[] = [
  { id: 'client', x: 0, y: 70, width: 120, height: 60 },
  {
    id: 'services',
    x: 220,
    y: 0,
    width: 320,
    height: 200,
    isContainer: true,
  },
  {
    id: 'api',
    containerId: 'services',
    x: 270,
    y: 70,
    width: 100,
    height: 60,
  },
];

const connections: NewConnection[] = [
  { id: 'client-api', from: 'client', to: 'api' },
  {
    id: 'client-services',
    from: 'client',
    to: 'services',
    connectorStyle: 'arc',
    bend: 40,
  },
];

const layoutManager = new LayoutManager({ entities, connections: [] });

const { updates, fallbacks } = routeConnections({
  layoutManager,
  connectionsToRoute: connections,
  repair: COMMIT_REPAIR,
});

const route = layoutManager.getConnectionById('client-api');

layoutManager 包含位置实体和任何已存在的连接。 实体坐标是绝对的; containerId 确定巢穴和 isContainer 识别容器. connectionsToRoute 选择新建或已有的路由连接;或者, updates 选择在管理器的已设置更改中触及所移动的实体的连接. repair 限制路由器花费改进路线的时间 : false 没有, { timeBudgetMs } 时限COMMIT_REPAIR a. 为100毫秒; Infinity 使结果独立于机器速度.

未选中的连接保留其点, 从而允许部分路由 。 当附件和清除仍然有效时,选定的连接会保留其已有路径( )allowShift,默认情况下). updates 持有每个路由连接的更改,以及 fallbacks 连接的ID 直接的回落几何 而不是走廊路线。 每个多线是绝对的 x 编号 : y 来源为相对 [x, y] 点.