[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:pcb-component-wiring-editor":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 构建一个具有引脚级目标的 PCB 风格元件布线工作区\n\n## 这个示例构建了什么\n\n这个示例构建的是一个轻量级、PCB 风格的布线工作区，而不是一个通用的关系查看器。界面展示了一个固定的电路板画布、一个浮动的说明与设置窗口、左侧元件面板、自定义渲染的芯片与无源器件，以及让整个表面更像制图工具的标尺覆盖层。\n\n用户可以将元件从面板拖入画布，选择一个或多个节点，删除当前选中的节点，在暴露出来的引脚或焊盘之间绘制连线，并编辑选中连线的路径。这个示例最值得关注的点，是在一个紧凑的 relation-graph 画布上同时结合了高密度的自定义连接目标和编辑器行为。\n\n## 数据如何组织\n\n初始图数据来自 `my-data-api.ts`，它是一个普通的 `RGJsonData` 对象，包含 `nodes`、`lines` 和 `fakeLines`。这些节点是扁平记录，带有 `id`、`text`、`type`、`x` 和 `y`，因此固定布局可以直接使用保存好的坐标放置每个元件，而不需要在运行时计算布局。\n\n最关键的预处理选择是结构性的，而不是算法性的。面板模板只定义 `type` 和 `",true,500,1782615403261]