# Canvas 元素继承关系

业务类定义在 `src/lib/canvas-elements.ts`。存储和传输的是普通 JSON 节点，恢复时依据 kind 选择组件；不会把类实例或 React 组件写入数据库。

```text
CanvasElement（基础：位置、尺寸、旋转；默认无连线、无分支）
├── CardElement（增加连线、四向连接点、分支）
│   ├── TextCardElement     文本卡片
│   ├── ScriptCardElement   脚本卡片
│   └── ImageCardElement    图片卡片
├── PlainTextElement       纯文本
├── PlainImageElement      纯图片
├── IconElement            Lucide 图标
└── FrameElement           分区框（关闭旋转，无连线、无分支）
```

| 业务类 | data.kind | React Flow type / 渲染组件 | 操作 |
| --- | --- | --- | --- |
| TextCardElement | text | material / MaterialNode | 自由宽高、旋转、连线、添加分支；双击编辑正文与名称 |
| ScriptCardElement | script | material / MaterialNode | 同文本卡片 |
| ImageCardElement | image | material / MaterialNode | 带卡片的图片，自由宽高、旋转、连线、分支、双击改名 |
| PlainTextElement | plain-text | plainText / PlainTextNode | 选中后整块拖动，双击编辑；自由宽高，字号单独控制；无卡片、连接点和分支 |
| PlainImageElement | plain-image | plainImage / PlainImageNode | 按原图比例插入与缩放，整图拖动、旋转；无卡片标题、连接点和分支 |
| IconElement | icon | icon / IconNode | 整块拖动、等比缩放、旋转、颜色设置；库内 2313 个去重图标，按需加载 |
| FrameElement | frame | frame / FrameNode | 调整大小、改名、三种标签模式；带动已有成员；不旋转、不嵌套、不连线 |

所有非分区内容均可通过 `data.frameId` 加入分区。成员关系只在内容拖放时更新，不根据框的移动或缩放自动重算。

## React 组件共享关系

React 视图通过组合复用，不使用组件类继承：

- `TransformableNode`：选中外框、常驻右下角缩放符号、旋转模式、共享操作上下文。
- `MaterialNode`：三种卡片共用的框、外部标题及连接点；`NodeTitle` 处理改名。
- `CanvasTextEditor`：文本卡片、脚本、纯文本共用的「单击选中 / 双击编辑 / 非编辑时拖动」交互。
- `NodeStyleToolbar`：文字与视觉样式；`FrameNode` 使用独立分区设置栏。
- 工具栏显式设在画布交互层上方，避免负层级分区的弹出栏看得见却点不到。

右下角缩放符号未选中时也显示，拖动会先选中元素；四边连接点仍仅选中时显示。抓手模式下缩放符号可见但不响应拖动。

## Core 配套

分区格式已随 Core 022086b 部署。纯图片 `plain-image / plainImage` 的配套 [Core PR #11](https://gitea.entroia.com/Zayden-Jung/foundry-core/pulls/11)（工作分支 `codex/plain-images`，提交 `460b05f`）已合并，并随主线 7847167 的部署 #889 成功上线。全部元素沿用现有快照 API，不需要为纯图片新建表或接口。