js-mind

Development

• Install npm packages

npm install

• Launch dev server

npm run start

• Build

npm run build

演示

• 树图
• 流程图

Install js-mind

npm install js-mind --save

部分功能实现思路

Mind

Mind 类提供对外接口，维护节点树，并调用其它类完成相关工作

Stage

Stage 类主要功能：

• 画布管理：维护画布的宽高、缩放比例、偏移位置等信息
• 事件管理：添加不同类型的事件，储存回调函数

Scene

Scene 类主要功能：

• 绘制管理
• 画笔状态管理

Node

Node 和其派生类主要功能：

• 节点绘制
• 事件检测：检测鼠标事件的坐标是否在自身宽高以内，如果是，调用 Stage 中对应的事件回调函数
• 动画管理：主要是节点属性的动态更新

Liner

• 线条管理
• 不同类型的线条绘制
• 缓存线条，线条绘制比较耗费性能，解决思路如下
  • 当没有缓存的时候，绘制所有线条到 CanvasA, 并缓存 CanvasA
  • 当有缓存的时候，将缓存的 CanvasA 绘制到主 Canvas
  • 节点树发生变化时清除 CanvasA 缓存

Undo 类

实现撤销重做功能

• 用户更新节点树时，通过 diff 算出前后节点树对应的 data 差异，并保存为 Step
• 用户撤销重做，根据当前节点树和 Step 做对比，还原出前一步或后一步的 data
• 更新 data 并重绘