44 lines
3.0 KiB
Markdown
44 lines
3.0 KiB
Markdown
# 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，不需要为纯图片新建表或接口。
|