0%

思维导图组件开发

本文主要描述思维导图实现的要素

偏向于概要设计

定义

元素定义

  1. 中心节点

    处于主树干,唯一,不可删除

  2. 主树干

    以中心节点为根节点构成的树

  3. 游离树

    非主树干的树,其根节点由拖动、粘贴、空白处创建 生成

  4. 普通节点

    包括主树干节点和游离树节点
    含一个缩放按钮,控制子孙节点的展示

  5. 连接线

    父子节点之间的连线,无箭头,无标题

  6. 关联线

    任意两节点之间的连线,带箭头,带标题

状态定义

  1. 选择状态
  2. 编辑状态

两个状态互斥

创建

普通节点创建方式

  1. 节点选择状态,按回车键,创建同级节点
  2. 节点选择状态,鼠标右键,可以创建同级节点或子节点
  3. 在空白处鼠标右键,选择创建节点选项,将创建游离的普通节点
  4. 界面左侧预设一些节点,可以将其拖动过来。这些节点主要是带一些通用图标
  5. 节点粘贴:已进行节点复制操作,在节点选择状态或者空白处鼠标右键,进行元素粘贴

连接线创建方式

  1. 自动创建:当节点创建时不是游离树根节点时,自动进行连接线创建
  2. 手动创建:鼠标右键处于主树干的普通节点,选择创建连接线,拖动至游离树根节点

关联线创建方式

鼠标右键普通节点,选择创建关联线,拉动并连上其他普通节点,将创建连接并进入节点标题编辑状态

删除

  1. 父节点删除,子节点自动删除
  2. 节点选择状态:按Delete键,进行元素删除

选择

按住CTRL键,点击节点,可进行多节点的选择。

同时选择父节点和子节点,对于后续各种操作,都只操作父节点。

例如,

1
2
A—A1
|—A2

选择A和A2节点,拖动至B节点,此时A节点为B节点的子节点,A1,A2仍是A的子节点。即只操作了父节点

拖动

拖动中心节点,则主树干进行移动,游离树不动

拖动普通节点至空白处,则位置进行调整;其子节点视情况调整(制定策略,有一定工作量),连接线和关联线自动调整。

支持多个节点同时拖动

拖动普通节点至节点处,当前节点会变为该节点的子节点

同时选择中心节点和游离树节点,则这些树一起拖动,且不能拖动至普通节点

连接线无法拖动

关联线可拖动,利用左右两个拉杆(参考processon

复制与粘贴

复制

选择节点后,CTRL+C或者鼠标右键点复制,可进行节点的复制。

会同时复制这些节点的子孙节点

粘贴

  • 鼠标右键普通节点,选择粘贴,会将复制的节点作为该节点的子节点
  • 鼠标右键空白处,选择粘贴。若复制的父节点超过一个,自动创建一个游离树根节点,并将这些节点作为根节点的子节点,否则直接粘贴。

保存,撤销,重做

一次操作定义:

  • 组件创建
  • 组件拖动至鼠标松开
  • 组件属性修改:标题、样式

缩放操作仅针对本地显示,不涉及一次操作

历史记录:操作步骤的记录,index记录当前处于历史记录的哪个操作

保存

每次操作结束,通过websocket发送当前操作到服务端,进行自动保存(autosave)。

可用于多人操作及防止意外关闭

点击保存按钮或按CTRL+S进行文件保存,会将当前整个文件结构上传(save),并清空历史记录

撤销

撤销(undo)一次操作,并进行自动保存(autosave)

历史记录回退,若进行新的操作,index其后的历史记录会被舍弃

重做

在处于撤销情况下进行还原操作(redo),并进行自动保存

展开与缩略

普通节点旁显示一个展开按钮+或缩略按钮-

点击展开按钮,展开当前节点的下一级节点

点击缩略按钮,缩略当前节点的所有子孙节点

快捷操作

  1. 节点选择状态:按回车键,自动创建同级节点并处于节点编辑状态;显示删除按钮
  2. 节点选择状态:按Tap键,自动创建子节点并处于节点编辑状态
  3. 节点选择状态:按Delete键,进行元素删除
  4. 节点编辑状态:按回车键,保存节点标题并处于节点选择状态
  5. 双击节点,进入节点标题编辑状态
  6. 按住CTRL,可以选择多个节点
  7. CTRL+A 进行所有节点的选择

样式

  • 画布初始化一定大小,中心节点处于中心。画布可无限拉伸
  • 普通节点支持
您的支持将鼓励我继续创作!