# @eraserlabs/layout 中文文档

规范地址：https://npmcn.com/package/%40eraserlabs/layout/

版本：0\.5\.2
npm 元数据更新时间：2026-11-11T18:26:03.364Z
中文译文更新时间：2026-11-13T20:24:16.263Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eraserlabs/layout
原文对照：https://npmcn.com/package/%40eraserlabs/layout/?lang=original
项目主页：https://github.com/eraserlabs/eraser-diagrams
源码仓库：https://github.com/eraserlabs/eraser-diagrams

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：879 kB，176 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^22\.23\.4 \|\| ^24\.22\.1 \|\| \>=26\.12\.1
- 运行依赖：1 个
- 首次发布：2026-08-19T03:41:56.575Z
- 最新版本发布：2026-11-11T18:26:02.917Z
- 近 30 天下载量：12860（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

Eraser的布局几何和走廊连接路由器.

## 安装

```sh
npm install @eraserlabs/layout
```

也可以使用：`pnpm add @eraserlabs/layout`、`yarn add @eraserlabs/layout`、`bun add @eraserlabs/layout`

## README

# @eraserlabs/放电

## 导言

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

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

## 为什么

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

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

## 使用量

```ts
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]` 点.

## 常见问题

### @eraserlabs/layout 是什么？

Eraser的布局几何和走廊连接路由器\.

### 如何安装 @eraserlabs/layout？

在项目目录运行 npm install @eraserlabs/layout，或使用 pnpm add / yarn add / bun add。

### @eraserlabs/layout 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eraserlabs/layout 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @eraserlabs/layout 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^22\.23\.4 \|\| ^24\.22\.1 \|\| \>=26\.12\.1。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @eraserlabs/layout 可以商用吗？

@eraserlabs/layout 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @eraserlabs/layout 的下载量有多少？

根据 npm 官方下载统计，@eraserlabs/layout 在 2026/10/14 – 2026/11/12 这 30 天内被下载 12,860 次，日均约 429 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eraserlabs/layout 还在维护吗？

最新版本 0\.5\.2 发布于 2026/11/12（2 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/08/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。