Endoleap/docs/CANVAS_ELEMENTS.md

Canvas 元素继承关系

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

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（工作分支 codex/plain-images，提交 460b05f）已合并，并随主线 7847167 的部署 #889 成功上线。全部元素沿用现有快照 API，不需要为纯图片新建表或接口。