思维导图组件开发
本文主要描述思维导图实现的要素
偏向于概要设计
# 定义
# 元素定义
- 中心节点
处于主树干，唯一，不可删除
- 主树干
以中心节点为根节点构成的树
- 游离树
非主树干的树，其根节点由拖动、粘贴、空白处创建 生成
- 普通节点
包括主树干节点和游离树节点
含一个缩放按钮，控制子孙节点的展示 - 连接线
父子节点之间的连线，无箭头，无标题
- 关联线
任意两节点之间的连线，带箭头，带标题
# 状态定义
- 选择状态
- 编辑状态
两个状态互斥
# 创建
# 普通节点创建方式
- 节点选择状态，按回车键，创建同级节点
- 节点选择状态，鼠标右键，可以创建同级节点或子节点
- 在空白处鼠标右键，选择创建节点选项，将创建游离的普通节点
- 界面左侧预设一些节点，可以将其拖动过来。这些节点主要是带一些通用图标
- 节点粘贴：已进行节点复制操作，在节点选择状态或者空白处鼠标右键，进行元素粘贴
# 连接线创建方式
- 自动创建：当节点创建时不是游离树根节点时，自动进行连接线创建
- 手动创建：鼠标右键处于主树干的普通节点，选择创建连接线，拖动至游离树根节点
# 关联线创建方式
鼠标右键普通节点，选择创建关联线，拉动并连上其他普通节点，将创建连接并进入节点标题编辑状态
# 删除
- 父节点删除，子节点自动删除
- 节点选择状态：按Delete键，进行元素删除
# 选择
按住CTRL键，点击节点，可进行多节点的选择。
同时选择父节点和子节点，对于后续各种操作，都只操作父节点。
例如，
A—A1
|—A2
2
选择A和A2节点，拖动至B节点，此时A节点为B节点的子节点，A1,A2仍是A的子节点。即只操作了父节点。
# 拖动
拖动中心节点，则主树干进行移动，游离树不动
拖动普通节点至空白处，则位置进行调整；其子节点视情况调整（制定策略，有一定工作量），连接线和关联线自动调整。
支持多个节点同时拖动
拖动普通节点至节点处，当前节点会变为该节点的子节点
同时选择中心节点和游离树节点，则这些树一起拖动,且不能拖动至普通节点
连接线无法拖动
关联线可拖动，利用左右两个拉杆（参考processon
# 复制与粘贴
# 复制
选择节点后，CTRL+C或者鼠标右键点复制，可进行节点的复制。
会同时复制这些节点的子孙节点
# 粘贴
- 鼠标右键普通节点，选择粘贴，会将复制的节点作为该节点的子节点
- 鼠标右键空白处，选择粘贴。若复制的父节点超过一个，自动创建一个游离树根节点，并将这些节点作为根节点的子节点，否则直接粘贴。
# 保存，撤销，重做
一次操作定义：
- 组件创建
- 组件拖动至鼠标松开
- 组件属性修改：标题、样式
缩放操作仅针对本地显示，不涉及一次操作
历史记录：操作步骤的记录，index记录当前处于历史记录的哪个操作
# 保存
每次操作结束，通过websocket发送当前操作到服务端，进行自动保存（autosave）。
可用于多人操作及防止意外关闭
点击保存按钮或按CTRL+S进行文件保存，会将当前整个文件结构上传（save），并清空历史记录
# 撤销
撤销（undo）一次操作，并进行自动保存（autosave）
历史记录回退，若进行新的操作，index其后的历史记录会被舍弃
# 重做
在处于撤销情况下进行还原操作（redo），并进行自动保存
# 展开与缩略
普通节点旁显示一个展开按钮+或缩略按钮-
点击展开按钮，展开当前节点的下一级节点
点击缩略按钮，缩略当前节点的所有子孙节点
# 快捷操作
- 节点选择状态：按回车键，自动创建同级节点并处于节点编辑状态；显示删除按钮
- 节点选择状态：按Tap键，自动创建子节点并处于节点编辑状态
- 节点选择状态：按Delete键，进行元素删除
- 节点编辑状态：按回车键，保存节点标题并处于节点选择状态
- 双击节点，进入节点标题编辑状态
- 按住CTRL，可以选择多个节点
- CTRL+A 进行所有节点的选择
# 样式
- 画布初始化一定大小，中心节点处于中心。画布可无限拉伸
- 普通节点支持