更新版本

fix typo

.gitignore

@@ -1,3 +1,3 @@
 node_modules
 .DS_Store
-dist_electron
+package-lock.json

LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2021-2023 The MindMap Team
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,45 +1,68 @@
-<h1 align="center">Simple mind map</h1>
+# web思维导图的简单实现
 
-[![npm-version](https://img.shields.io/npm/v/simple-mind-map)](https://www.npmjs.com/package/simple-mind-map)
-![npm download](https://img.shields.io/npm/dm/simple-mind-map)
-[![GitHub stars](https://img.shields.io/github/stars/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/stargazers)
-[![GitHub issues](https://img.shields.io/github/issues/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/issues)
-[![GitHub forks](https://img.shields.io/github/forks/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/network/members)
-![license](https://img.shields.io/npm/l/express.svg)
+## 特性
 
-> 一个简单&强大的Web思维导图
+- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
 
-本项目包含两部分：
+- [x] 内置多种主题，允许高度自定义样式
 
-1.一个js思维导图库，不依赖任何框架，你可以使用它来快速完成Web思维导图产品的开发。
-
-开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
-
-2.一个Web思维导图，基于思维导图库、Vue2.x、ElementUI开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得github的响应速度慢，你也可以部署到你的服务器上。
-
-在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
-
-另外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址：
-
-Github：[releases](https://github.com/wanglin2/mind-map/releases)。
-
-百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
-
-# 特性
-
-- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
-- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构
-- [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
-- [x] 节点内容支持图片、图标、超链接、备注、标签、概要
+
+- [x] 节点内容支持图片、图标、超链接、备注、标签
+
 - [x] 支持前进后退
+
 - [x] 支持拖动、缩放
-- [x] 支持右键和Ctrl+左键两种多选方式
-- [x] 支持节点自由拖拽、拖拽调整
-- [x] 支持多种节点形状
-- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`，支持从`json`、`xmind`、`markdown`导入
-- [x] 支持小地图、支持水印
-- [x] 支持关联线
+
+- [x] 支持右键多选
+
+- [x] 支持节点拖拽
+
+## 目录介绍
+
+1.simple-mind-map
+
+思维导图工具库。
+
+2.web
+
+使用`simple-mind-map`工具库，基于vue2.x、ElementUI搭建的在线思维导图。
+
+3.dist
+
+打包后的资源文件夹。
+
+4.docs
+
+文档等。
+
+## 开发
+
+本地开发
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run serve
+```
+
+打包
+
+```bash
+cd web
+npm run build
+```
+会自动把`index.html`移动到根目录。
+
+## 相关文章
+
+[Web思维导图实现的技术点分析](https://juejin.cn/post/6987711560521089061)
 
 # 安装
 
@@ -47,56 +70,863 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。
 npm i simple-mind-map
 ```
 
-# 使用
+注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
 
-提供一个宽高不为0的容器元素：
+```js
+module.exports = {
+  transpileDependencies: ['simple-mind-map']
+}
+```
+
+其他项目请自行修改打包配置。
+
+# API
+
+## 实例化
 
 ```html
 <div id="mindMapContainer"></div>
 ```
 
-另外再设置一下`css`样式：
-
-```css
-#mindMapContainer * {
-  margin: 0;
-  padding: 0;
-}
-```
-
-然后创建一个实例：
-
 ```js
 import MindMap from "simple-mind-map";
 
 const mindMap = new MindMap({
   el: document.getElementById('mindMapContainer'),
-  data: {
-    "data": {
-        "text": "根节点"
-    },
-    "children": []
-  }
+  data: data
 });
 ```
 
-即可得到一个思维导图。
 
-想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。
 
-# License
+### 实例化选项：
 
-MIT
+| 字段名称             | 类型    | 默认值           | 描述                                                         | 是否必填 |
+| -------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
+| el                   | Element |                  | 容器元素，必须为DOM元素                                      | 是       |
+| data                 | Object  | {}               | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) |          |
+| layout               | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） |          |
+| theme                | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） |          |
+| themeConfig          | Object  | {}               | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |          |
+| scaleRatio           | Number  | 0.1              | 放大缩小的增量比例                                           |          |
+| maxTag               | Number  | 5                | 节点里最多显示的标签数量，多余的会被丢弃                     |          |
+| exportPadding        | Number  | 20               | 导出图片时的内边距                                           |          |
+| imgTextMargin        | Number  | 5                | 节点里图片和文字的间距                                       |          |
+| textContentMargin    | Number  | 2                | 节点里各种文字信息的间距，如图标和文字的间距                 |          |
+| selectTranslateStep  | Number  | 3                | 多选节点时鼠标移动到边缘时的画布移动偏移量                   |          |
+| selectTranslateLimit | Number  | 20               | 多选节点时鼠标移动距边缘多少距离时开始偏移                   |          |
+| customNoteContentShow（v0.1.6+） | Object  | null               | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}                   |          |
+| readonly（v0.1.7+） | Boolean  | false               |  是否是只读模式                  |          |
 
-# 微信交流群
 
-<img src="./qrcode.jpg" style="width: 300px" />
+### 实例方法：
 
-# 请作者喝杯咖啡
+#### render()
 
-> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
+触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
+
+
+
+#### reRender()
+
+整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用
+
+
+
+#### resize()
+
+容器尺寸变化后，需要调用该方法进行适应
+
+#### setMode(mode)
+
+v0.1.7+。切换模式为只读或编辑。
+
+`mode`：readonly、edit
+
+#### on(event, fn)
+
+监听事件，事件列表：
+
+| 事件名称                    | 描述                                       | 回调参数                                                     |
+| --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
+| data_change                 | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据）                                       |
+| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发       | data（当前视图状态数据）                                     |
+| back_forward                | 前进或回退                                 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
+| draw_click                  | *画布的单击事件*                           | e（事件对象）                                                |
+| svg_mousedown               | svg画布的鼠标按下事件                      | e（事件对象）                                                |
+| mousedown                   | el元素的鼠标按下事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousemove                   | el元素的鼠标移动事件                       | e（事件对象）、this（Event事件类实例）                       |
+| drag                        | 如果是按住左键拖动的话会触发拖动事件       | e（事件对象）、this（Event事件类实例）                       |
+| mouseup                     | el元素的鼠标松开事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousewheel                  | 鼠标滚动事件                               | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
+| contextmenu                 | svg画布的鼠标右键菜单事件                  | e（事件对象）                                                |
+| node_click                  | 节点的单击事件                             | this（节点实例）、e（事件对象）                              |
+| node_mousedown              | 节点的鼠标按下事件                         | this（节点实例）、e（事件对象）                              |
+| node_mouseup                | 节点的鼠标松开事件                         | this（节点实例）、e（事件对象）                              |
+| node_dblclick               | 节点的双击事件                             | this（节点实例）、e（事件对象）                              |
+| node_contextmenu            | 节点的右键菜单事件                         | e（事件对象）、this（节点实例）                              |
+| before_node_active          | 节点激活前事件                             | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| node_active                 | 节点激活事件                               | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| expand_btn_click            | 节点展开或收缩事件                         | this（节点实例）                                             |
+| before_show_text_edit       | 节点文本编辑框即将打开事件                 |                                                              |
+| hide_text_edit              | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
+| scale                       | 放大缩小事件                               | scale（缩放比例）                                            |
+
+
+
+#### emit(event, ...args)
+
+触发事件，可以是上面表格里的事件，也可以是自定义事件
+
+
+
+#### off(event, fn)
+
+解绑事件
+
+
+
+#### setTheme(theme)
+
+切换主题，可选主题见上面的选项表格
+
+
+
+#### getTheme()
+
+获取当前主题
+
+
+
+#### setThemeConfig(config)
+
+设置主题配置，`config`同上面选项表格里的选项`themeConfig`
+
+#### getCustomThemeConfig()
+
+获取自定义主题配置
+
+#### getThemeConfig(prop)
+
+获取某个主题配置属性值
+
+
+
+#### getLayout()
+
+获取当前的布局结构
+
+
+
+#### setLayout(layout)
+
+设置布局结构，可选值见上面选项表格的`layout`字段
+
+
+
+#### execCommand(name, ...args)
+
+执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：
+
+| 命令名称                 | 描述                                                         | 参数                                                         |
+| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| SELECT_ALL               | 全选                                                         |                                                              |
+| BACK                     | 回退指定的步数                                               | step（要回退的步数，默认为1）                                |
+| FORWARD                  | 前进指定的步数                                               | step（要前进的步数，默认为1）                                |
+| INSERT_NODE              | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 |                                                              |
+| INSERT_CHILD_NODE        | 插入子节点，操作节点为当前激活的节点                         |                                                              |
+| UP_NODE                  | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 |                                                              |
+| DOWN_NODE                | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 |                                                              |
+| REMOVE_NODE              | 删除节点，操作节点为当前激活的节点                           |                                                              |
+| PASTE_NODE               | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
+| CUT_NODE                 | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
+| SET_NODE_STYLE           | 修改节点样式                                                 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_ACTIVE          | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
+| CLEAR_ACTIVE_NODE        | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
+| SET_NODE_EXPAND          | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
+| EXPAND_ALL               | 展开所有节点                                                 |                                                              |
+| UNEXPAND_ALL             | 收起所有节点                                                 |                                                              |
+| SET_NODE_DATA            | 更新节点数据，即更新节点数据对象里`data`对象的数据           | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
+| SET_NODE_TEXT            | 设置节点文本                                                 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`） |
+| SET_NODE_IMAGE           | 设置节点图片                                                 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
+| SET_NODE_ICON            | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
+| SET_NODE_HYPERLINK       | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
+| SET_NODE_NOTE            | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
+| SET_NODE_TAG             | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） |
+| INSERT_AFTER（v0.1.5+）  | 将节点移动到另一个节点的后面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| MOVE_NODE_TO（v0.1.5+）  | 移动一个节点作为另一个节点的子节点                           | node（要移动的节点）、 toNode（目标节点）                    |
+
+
+#### setData(data)
+
+动态设置思维导图数据
+
+`data`：思维导图结构数据
+
+
+#### export(type, isDownload, fileName)
+
+导出
+
+`type`：要导出的类型，可选值：png、svg
+
+`isDownload`：是否需要直接触发下载，布尔值，默认为`false`
+
+`fileName`：（v0.1.6+）导出文件的名称，默认为`思维导图`
+
+#### toPos(x, y)
+
+v0.1.5+
+
+将浏览器可视窗口的坐标转换成相对于画布的坐标
+
+## render实例
+
+`render`实例负载整个渲染过程，可通过`mindMap.renderer`获取到
+
+
+
+### 属性
+
+#### activeNodeList
+
+获取当前激活的节点列表
+
+
+
+#### root
+
+获取节点树的根节点
+
+
+
+### 方法
+
+#### clearActive()
+
+清除当前激活的节点
+
+#### clearAllActive()
+
+清除当前所有激活节点，并会触发`node_active`事件 
+
+#### startTextEdit()
+
+（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突 
+
+#### endTextEdit()
+
+（v0.1.6+）结束文字编辑，会恢复回车键和删除键相关快捷键
+
+#### addActiveNode(node)
+
+添加节点到激活列表里
+
+
+
+#### removeActiveNode(node)
+
+在激活列表里移除某个节点
+
+
+
+#### findActiveNodeIndex(node)
+
+检索某个节点在激活列表里的索引
+
+
+
+#### getNodeIndex(node)
+
+获取节点在同级里的位置索引
+
+
+
+#### removeOneNode(node)
+
+删除某个指定节点
+
+
+
+#### copyNode()
+
+复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点
+
+
+
+#### setNodeDataRender(node, data)
+
+设置节点数据，即`data`字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，`data`为对象，如：`{text: '我是新文本'}`
+
+
+
+#### moveNodeTo(node, toNode)
+
+v0.1.5+
+
+移动一个节点作为另一个节点的子节点
+
+
+
+#### insertBefore(node, exist)
+
+v0.1.5+
+
+将节点移动到另一个节点的前面
+
+
+
+#### insertAfter(node, exist)
+
+v0.1.5+
+
+将节点移动到另一个节点的后面
+
+
+
+## keyCommand实例
+
+`keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
+
+
+
+### 方法
+
+#### keyCommand(key, fn)
+
+添加快捷键
+
+`key`：快捷键按键，按键值可以通过[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)查看。示例：
+
+```js
+// 单个按键
+mindMap.keyCommand..addShortcut('Enter', () => {})
+// 或
+mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
+// 组合键
+mindMap.keyCommand.addShortcut('Control+Enter', () => {})
+```
+
+`fn`：要执行的方法
+
+
+
+## command实例
+
+`command`实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过`mindMap.command`获取到该实例
+
+
+
+### 方法
+
+#### add(name, fn)
+
+添加命令。
+
+`name`：命令名称
+
+`fn`：命令要执行的方法
+
+
+
+#### remove(name, fn)
+
+移除命令。
+
+`name`：要移除的命令名称
+
+`fn`：要移除的方法，不传的话移除该命令所有的方法
+
+
+
+#### getCopyData()
+
+获取渲染树数据副本
+
+#### clearHistory()
+
+清空历史堆栈数据
+
+
+## view实例
+
+`view`实例负责视图操作，可通过`mindMap.view`获取到该实例
+
+
+
+### 方法
+
+#### translateX(step)
+
+`x`方向进行平移，`step`：要平移的像素
+
+
+
+#### translateY(step)
+
+`y`方向进行平移，`step`：要平移的像素
+
+
+
+#### reset()
+
+恢复到默认的变换
+
+
+
+#### narrow()
+
+缩小
+
+
+
+#### enlarge()
+
+放大
+
+
+
+#### getTransformData()
+
+v0.1.1+
+
+获取当前变换数据，可用于回显
+
+
+
+#### setTransformData(data)
+
+v0.1.1+
+
+动态设置变换数据，可以通过getTransformData方法获取变换数据
+
+
+
+## doExport实例
+
+`doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例
+
+
+
+### 方法
+
+#### png()
+
+导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
+
+
+
+#### svg()
+
+导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
+
+
+
+#### getSvgData()
+
+获取`svg`数据，异步方法，返回一个对象：
+
+```js
+{
+  node// svg对象
+  str// svg字符串
+}
+```
+
+
+
+## select实例
+
+`select`实例负责鼠标右键多选节点操作，可通过`mindMap.select`获取到该实例
+
+
+
+### 方法
+
+#### toPos(x, y)
+
+转换鼠标位置为相对于容器`el`的位置
+
+
+
+## batchExecution实例
+
+`batchExecution`用来批量异步的执行一些操作，如果某个操作同时多次调用，那么只会在下一个事件循环里执行一次。可以通过`mindMap.batchExecution`获取到该实例
+
+
+
+### 方法
+
+#### push(name, fn)
+
+添加任务。
+
+`name`：任务名称
+
+`fn`：任务
+
+
+
+## node实例
+
+每个节点都会实例化一个`node`实例
+
+
+
+### 属性
+
+#### nodeData
+
+该节点对应的真实数据
+
+
+
+#### uid
+
+该节点唯一的标识
+
+
+
+#### isRoot
+
+是否是根节点
+
+
+
+#### layerIndex
+
+节点层级
+
+
+
+#### width
+
+节点的宽
+
+
+
+#### height
+
+节点的高
+
+
+
+#### left
+
+节点的`left`位置
+
+
+
+#### top
+
+节点的`top`位置
+
+
+
+#### parent
+
+节点的父节点
+
+
+
+#### children
+
+节点的子节点列表
+
+
+
+#### group
+
+节点是内容容器，`svg`对象
+
+
+
+#### isDrag
+
+v0.1.5+
+
+节点是否正在拖拽中
+
+
+
+### 方法
+
+#### addChildren(node)
+
+添加子节点
+
+
+
+#### getSize()
+
+计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化
+
+
+
+#### renderNode()
+
+渲染节点到画布，会移除旧的内容节点，创建新的
+
+
+
+#### render()
+
+递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
+
+
+
+#### remove()
+
+递归删除该节点及其所有子节点
+
+
+
+#### renderLine()
+
+重新渲染该节点到其子节点之间的连线
+
+
+
+#### removeLine()
+
+移除该节点到其子节点之间的连线
+
+
+
+#### renderExpandBtn()
+
+渲染展开收缩按钮的内容
+
+
+
+#### removeExpandBtn()
+
+移除展开收缩按钮
+
+
+
+#### getStyle(prop, root, isActive)
+
+获取某个最终应用到该节点的样式值
+
+`prop`：要获取的样式属性
+
+`root`：是否是根节点，默认`false`
+
+`isActive`：获取的是否是激活状态的样式值，默认`false`
+
+
+
+#### setStyle(prop, value, isActive)
+
+修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法
+
+
+
+#### getData(key)
+
+获取该节点真实数据`nodeData`的`data`对象里的指定值，`key`不传返回这个`data`对象
+
+
+
+#### setData(data)
+
+设置节点数据，`SET_NODE_DATA`命令的快捷方法
+
+
+
+#### setText(text)
+
+设置节点文本，`SET_NODE_TEXT`命令的快捷方法
+
+
+
+#### setImage(imgData)
+
+设置节点图片，`SET_NODE_IMAGE`命令的快捷方法
+
+
+
+#### setIcon(icons)
+
+设置节点图标，`SET_NODE_ICON`命令的快捷方法
+
+
+
+#### setHyperlink(link, title)
+
+设置节点超链接，`SET_NODE_HYPERLINK`命令的快捷方法
+
+
+
+#### setNote(note)
+
+设置节点备注，`SET_NODE_NOTE`命令的快捷方法
+
+
+
+#### setTag(tag)
+
+设置节点标签，`SET_NODE_TAG`的快捷方法
+
+
+
+#### hide()
+
+v0.1.5+
+
+隐藏节点及其下级节点
+
+
+
+#### show()
+
+v0.1.5+
+
+显示节点及其下级节点
+
+
+
+#### isParent(node)
+
+v0.1.5+
+
+检测当前节点是否是某个节点的祖先节点
+
+
+
+#### isBrother(node)
+
+v0.1.5+
+
+检测当前节点是否是某个节点的兄弟节点
+
+
+
+## 内置工具方法
+
+引用：
+
+```js
+import {walk, ...} from 'simple-mind-map/src/utils'
+```
+
+
+
+### 方法
+
+#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
+
+深度优先遍历树
+
+`root`：要遍历的树的根节点
+
+`parent`：父节点
+
+`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
+
+`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
+
+`isRoot`：是否是根节点
+
+`layerIndex`：节点层级
+
+`index`：节点在同级节点里的索引
+
+示例：
+
+```js
+walk(tree, null, () => {}, () => {}, false, 0, 0)
+```
+
+
+
+#### bfsWalk(root, callback)
+
+广度优先遍历树
+
+
+
+#### resizeImgSize(width, height, maxWidth, maxHeight)
+
+缩放图片的尺寸
+
+`width`：图片原本的宽
+
+`height`：图片原本的高
+
+`maxWidth`：要缩放到的宽
+
+`maxHeight`：要缩放到的高
+
+`maxWidth`和`maxHeight`可以同时都传，也可以只传一个
+
+
+
+#### resizeImg(imgUrl, maxWidth, maxHeight)
+
+缩放图片，内部先加载图片，然后调用`resizeImgSize`方法，返回一个`promise`
+
+
+
+#### simpleDeepClone(data)
+
+极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错
+
+
+
+#### copyRenderTree(tree, root)
+
+复制渲染树数据，示例：
+
+```js
+copyRenderTree({}, this.mindMap.renderer.renderTree)
+```
+
+
+
+#### copyNodeTree(tree, root)
+
+复制节点树数据，主要是剔除其中的引用`node`实例的`_node`，然后复制`data`对象的数据，示例：
+
+```js
+copyNodeTree({}, node)
+```
+
+
+
+#### imgToDataUrl(src)
+
+图片转成dataURL
+
+
+
+#### downloadFile(file, fileName)
+
+下载文件
+
+
+
+#### throttle(fn, time = 300, ctx)
+
+节流函数
+
+
+
+#### asyncRun(taskList, callback = () => {})
+
+异步执行任务队列，多个任务是同步执行的，没有先后顺序
+
+
+
+# 特别说明
+
+本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。
+
+项目内置的主题和图标来自于：
+
+[百度脑图](https://naotu.baidu.com/)
+
+[知犀思维导图](https://www.zhixi.com/)
 
-<p>
-  <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
-  <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
-</p>

simple-mind-map/.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": "eslint:recommended",
-    "overrides": [
-    ],
-    "parserOptions": {
-        "parser": 'babel-eslint',
-        "ecmaVersion": 12,
-        "sourceType": "module",
-        "allowImportExportEverywhere": true
-    },
-    "rules": {
-    }
-}

simple-mind-map/.prettierignore

@@ -1,10 +0,0 @@
-src/assets
-*/.DS_Store
-dist
-example
-node_modules
-*.json
-*.md
-.eslintrc.js
-.prettierignore
-.prettierrc

simple-mind-map/.prettierrc

@@ -1,5 +0,0 @@
-semi: false
-singleQuote: true
-printWidth: 80
-trailingComma: 'none'
-arrowParens: 'avoid'

simple-mind-map/example/exampleData.js

@@ -10,10 +10,7 @@ const createFullData = () => {
         "tag": ["标签1", "标签2"],
         "hyperlink": "http://lxqnsys.com/",
         "hyperlinkTitle": "理想青年实验室",
-        "note": "理想青年实验室\n一个有意思的角落",
-        // 自定义位置
-        // "customLeft": 1318,
-        // "customTop": 374.5
+        "note": "理想青年实验室\n一个有意思的角落"
     };
 }
 
@@ -35,110 +32,110 @@ const data1 = {
                 },
                 "children": [{
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                         ...createFullData()
                     },
                     "children": [{
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                         "children": [{
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                                 ...createFullData()
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                                 "children": [{
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                     "children": [{
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                         "children": [{
                                             "data": {
-                                                "text": "分支主题",
+                                                "text": "子节点",
                                             },
                                         }, {
                                             "data": {
-                                                "text": "分支主题",
+                                                "text": "子节点",
                                             },
                                         }, {
                                             "data": {
-                                                "text": "分支主题",
+                                                "text": "子节点",
                                             },
                                         }, {
                                             "data": {
-                                                "text": "分支主题",
+                                                "text": "子节点",
                                             },
                                         }]
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }]
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }]
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }]
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }]
                 }]
@@ -150,36 +147,36 @@ const data1 = {
                 },
                 "children": [{
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                 }, {
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                     "children": [{
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }]
                 }, {
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                 }, {
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                 }]
             },
@@ -190,40 +187,40 @@ const data1 = {
                 },
                 "children": [{
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                     "children": [{
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                         "children": [{
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }]
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }]
                 }]
@@ -235,225 +232,225 @@ const data1 = {
                 },
                 "children": [{
                     "data": {
-                        "text": "分支主题",
+                        "text": "子节点",
                     },
                     "children": [{
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                         "children": [{
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }]
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                         "children": [{
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                                 "children": [{
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }]
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                                 "children": [{
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                     "children": [{
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }, {
                                         "data": {
-                                            "text": "分支主题",
+                                            "text": "子节点",
                                         },
                                     }]
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }]
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }]
                     }, {
                         "data": {
-                            "text": "分支主题",
+                            "text": "子节点",
                         },
                         "children": [{
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                                 "children": [{
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }, {
                                     "data": {
-                                        "text": "分支主题",
+                                        "text": "子节点",
                                     },
                                 }]
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }, {
                             "data": {
-                                "text": "分支主题",
+                                "text": "子节点",
                             },
                             "children": [{
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }, {
                                 "data": {
-                                    "text": "分支主题",
+                                    "text": "子节点",
                                 },
                             }]
                         }]
@@ -770,13 +767,13 @@ const data3 = {
                 "children": [
                     {
                         "data": {
-                            "text": "分支主题"
+                            "text": "子节点"
                         },
                         "children": []
                     },
                     {
                         "data": {
-                            "text": "分支主题"
+                            "text": "子节点"
                         },
                         "children": []
                     }
@@ -867,50 +864,6 @@ const data4 = {
     }
 }
 
-// 带概要
-const data5 = {
-    "root": {
-        "data": {
-            "text": "根节点"
-        },
-        "children": [
-            {
-                "data": {
-                    "text": "二级节点",
-                    "generalization": {
-                        "text": "概要",
-                    }
-                },
-                "children": [
-                    {
-                        "data": {
-                            "text": "分支主题"
-                        },
-                        "children": []
-                    },
-                    {
-                        "data": {
-                            "text": "分支主题"
-                        },
-                        "children": []
-                    }
-                ]
-            },
-        ]
-    }
-}
-
-// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
-const richTextData = {
-    "root": {
-        "data": {
-            "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
-            "richText": true
-        },
-        "children": []
-    }
-}
-
 const rootData = {
     "root": {
         "data": {
@@ -923,12 +876,11 @@ const rootData = {
 export default {
     // ...data1,
     // ...data2,
-    // ...data3,
+    ...data3,
     // ...data4,
-    ...data5,
     // ...rootData,
     "theme": {
-        "template": "classic4",
+        "template": "minions",
         "config": {
             // 自定义配置...
         }
@@ -936,6 +888,5 @@ export default {
     "layout": "logicalStructure",
     // "layout": "mindMap",
     // "layout": "catalogOrganization"
-    // "layout": "organizationStructure",
-    "config": {}
+    // "layout": "organizationStructure"
 }

simple-mind-map/example/exportFullData.json

@@ -1,73 +0,0 @@
-{
-    "layout": "logicalStructure",
-    "root": {
-        "data": {
-            "text": "根节点",
-            "expand": true,
-            "isActive": false
-        },
-        "children": [{
-            "data": {
-                "text": "二级节点",
-                "generalization": {
-                    "text": "概要",
-                    "expand": true,
-                    "isActive": false
-                },
-                "expand": true,
-                "isActive": false
-            },
-            "children": [{
-                "data": {
-                    "text": "分支主题",
-                    "expand": true,
-                    "isActive": false
-                },
-                "children": []
-            }, {
-                "data": {
-                    "text": "分支主题",
-                    "expand": true,
-                    "isActive": false
-                },
-                "children": []
-            }, {
-                "data": {
-                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
-                    "richText": true
-                },
-                "children": []
-            }]
-        }]
-    },
-    "theme": {
-        "template": "classic4",
-        "config": {}
-    },
-    "view": {
-        "transform": {
-            "scaleX": 1,
-            "scaleY": 1,
-            "shear": 0,
-            "rotate": 0,
-            "translateX": 0,
-            "translateY": 0,
-            "originX": 0,
-            "originY": 0,
-            "a": 1,
-            "b": 0,
-            "c": 0,
-            "d": 1,
-            "e": 0,
-            "f": 0
-        },
-        "state": {
-            "scale": 1,
-            "x": 0,
-            "y": 0,
-            "sx": 0,
-            "sy": 0
-        }
-    },
-    "config": {}
-}

simple-mind-map/full.js

@@ -1,28 +0,0 @@
-import MindMap from './index'
-import MiniMap from './src/MiniMap.js'
-import Watermark from './src/Watermark.js'
-import KeyboardNavigation from './src/KeyboardNavigation.js'
-import Export from './src/Export.js'
-import Drag from './src/Drag.js'
-import Select from './src/Select.js'
-import AssociativeLine from './src/AssociativeLine'
-import RichText from './src/RichText'
-import xmind from './src/parse/xmind.js'
-import markdown from './src/parse/markdown.js'
-import icons from './src/svg/icons.js'
-
-MindMap.xmind = xmind
-MindMap.markdown = markdown
-MindMap.iconList = icons.nodeIconList
-
-MindMap
-  .usePlugin(MiniMap)
-  .usePlugin(Watermark)
-  .usePlugin(Drag)
-  .usePlugin(KeyboardNavigation)
-  .usePlugin(Export)
-  .usePlugin(Select)
-  .usePlugin(AssociativeLine)
-  .usePlugin(RichText)
-
-export default MindMap

simple-mind-map/index.js

@@ -7,496 +7,366 @@ import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command'
 import BatchExecution from './src/BatchExecution'
-import { layoutValueList, CONSTANTS } from './src/utils/constant'
-import { SVG } from '@svgdotjs/svg.js'
-import { simpleDeepClone } from './src/utils'
-import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'
+import Export from './src/Export'
+import Select from './src/Select'
+import Drag from './src/Drag'
+import {
+    layoutValueList
+} from './src/utils/constant'
+import {
+    SVG
+} from '@svgdotjs/svg.js'
 
 // 默认选项配置
 const defaultOpt = {
-  // 是否只读
-  readonly: false,
-  // 布局
-  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
-  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
-  fishboneDeg: 45,
-  // 主题
-  theme: 'default', // 内置主题：default（默认主题）
-  // 主题配置，会和所选择的主题进行合并
-  themeConfig: {},
-  // 放大缩小的增量比例
-  scaleRatio: 0.1,
-  // 最多显示几个标签
-  maxTag: 5,
-  // 导出图片时的内边距
-  exportPadding: 20,
-  // 展开收缩按钮尺寸
-  expandBtnSize: 20,
-  // 节点里图片和文字的间距
-  imgTextMargin: 5,
-  // 节点里各种文字信息的间距，如图标和文字的间距
-  textContentMargin: 2,
-  // 多选节点时鼠标移动到边缘时的画布移动偏移量
-  selectTranslateStep: 3,
-  // 多选节点时鼠标移动距边缘多少距离时开始偏移
-  selectTranslateLimit: 20,
-  // 自定义节点备注内容显示
-  customNoteContentShow: null,
-  /*
+    // 是否只读
+    readonly: false,
+    // 布局
+    layout: 'logicalStructure',
+    // 主题
+    theme: 'default', // 内置主题：default（默认主题）
+    // 主题配置，会和所选择的主题进行合并
+    themeConfig: {},
+    // 放大缩小的增量比例
+    scaleRatio: 0.1,
+    // 最多显示几个标签
+    maxTag: 5,
+    // 导出图片时的内边距
+    exportPadding: 20,
+    // 展开收缩按钮尺寸
+    expandBtnSize: 20,
+    // 节点里图片和文字的间距
+    imgTextMargin: 5,
+    // 节点里各种文字信息的间距，如图标和文字的间距
+    textContentMargin: 2,
+    // 多选节点时鼠标移动到边缘时的画布移动偏移量
+    selectTranslateStep: 3,
+    // 多选节点时鼠标移动距边缘多少距离时开始偏移
+    selectTranslateLimit: 20,
+    // 自定义节点备注内容显示
+    customNoteContentShow: null
+    /*
         {
             show(){},
             hide(){}
         }
     */
-  // 是否开启节点自由拖拽
-  enableFreeDrag: false,
-  // 水印配置
-  watermarkConfig: {
-    text: '',
-    lineSpacing: 100,
-    textSpacing: 100,
-    angle: 30,
-    textStyle: {
-      color: '#999',
-      opacity: 0.5,
-      fontSize: 14
-    }
-  },
-  // 达到该宽度文本自动换行
-  textAutoWrapWidth: 500,
-  // 自定义鼠标滚轮事件处理
-  // 可以传一个函数，回调参数为事件对象
-  customHandleMousewheel: null,
-  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
-  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
-  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
-  mousewheelMoveStep: 100,
-  // 默认插入的二级节点的文字
-  defaultInsertSecondLevelNodeText: '二级节点',
-  // 默认插入的二级以下节点的文字
-  defaultInsertBelowSecondLevelNodeText: '分支主题',
-  // 展开收起按钮的颜色
-  expandBtnStyle: {
-    color: '#808080',
-    fill: '#fff'
-  },
-  // 自定义展开收起按钮的图标
-  expandBtnIcon: {
-    open: '',// svg字符串
-    close: ''
-  },
-  // 是否只有当鼠标在画布内才响应快捷键事件
-  enableShortcutOnlyWhenMouseInSvg: true,
-  // 是否开启节点动画过渡
-  enableNodeTransitionMove: true,
-  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
-  nodeTransitionMoveDuration: 300,
-  // 初始根节点的位置
-  initRootNodePosition: null,
-  // 导出png、svg、pdf时的图形内边距
-  exportPaddingX: 10,
-  exportPaddingY: 10,
-  // 节点文本编辑框的z-index
-  nodeTextEditZIndex: 3000,
-  // 节点备注浮层的z-index
-  nodeNoteTooltipZIndex: 3000,
-  // 是否在点击了画布外的区域时结束节点文本的编辑状态
-  isEndNodeTextEditOnClickOuter: true,
-  // 最大历史记录数
-  maxHistoryCount: 1000,
-  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
-  alwaysShowExpandBtn: false,
-  // 扩展节点可插入的图标
-  iconList: [
-    // {
-    //   name: '',// 分组名称
-    //   type: '',// 分组的值
-    //   list: [// 分组下的图标列表
-    //     {
-    //       name: '',// 图标名称
-    //       icon:''// 图标，可以传svg或图片
-    //     }
-    //   ]
-    // }
-  ],
-  // 节点最大缓存数量
-  maxNodeCacheCount: 1000,
-  // 关联线默认文字
-  defaultAssociativeLineText: '关联'
 }
 
-//  思维导图
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-06 11:18:47 
+ * @Desc: 思维导图 
+ */
 class MindMap {
-  //  构造函数
-  constructor(opt = {}) {
-    // 合并选项
-    this.opt = this.handleOpt(merge(defaultOpt, opt))
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 11:19:01 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        // 合并选项
+        this.opt = this.handleOpt(merge(defaultOpt, opt))
 
-    // 容器元素
-    this.el = this.opt.el
-    this.elRect = this.el.getBoundingClientRect()
+        // 容器元素
+        this.el = this.opt.el
+        this.elRect = this.el.getBoundingClientRect()
 
-    // 画布宽高
-    this.width = this.elRect.width
-    this.height = this.elRect.height
+        // 画布宽高
+        this.width = this.elRect.width
+        this.height = this.elRect.height
 
-    // 画布
-    this.svg = SVG().addTo(this.el).size(this.width, this.height)
-    this.draw = this.svg.group()
+        // 画布
+        this.svg = SVG().addTo(this.el).size(this.width, this.height)
+        this.draw = this.svg.group()
 
-    // 节点id
-    this.uid = 1
+        // 节点id
+        this.uid = 0
 
-    // 初始化主题
-    this.initTheme()
+        // 初始化主题
+        this.initTheme()
 
-    // 事件类
-    this.event = new Event({
-      mindMap: this
-    })
+        // 事件类
+        this.event = new Event({
+            mindMap: this
+        })
 
-    // 按键类
-    this.keyCommand = new KeyCommand({
-      mindMap: this
-    })
+        // 按键类
+        this.keyCommand = new KeyCommand({
+            mindMap: this
+        })
 
-    // 命令类
-    this.command = new Command({
-      mindMap: this
-    })
+        // 命令类
+        this.command = new Command({
+            mindMap: this
+        })
 
-    // 渲染类
-    this.renderer = new Render({
-      mindMap: this
-    })
+        // 渲染类
+        this.renderer = new Render({
+            mindMap: this
+        })
 
-    // 视图操作类
-    this.view = new View({
-      mindMap: this,
-      draw: this.draw
-    })
+        // 视图操作类
+        this.view = new View({
+            mindMap: this,
+            draw: this.draw
+        })
 
-    // 批量执行类
-    this.batchExecution = new BatchExecution()
+        // 导出类
+        this.doExport = new Export({
+            mindMap: this
+        })
 
-    // 注册插件
-    MindMap.pluginList.forEach((plugin) => {
-      this.initPlugin(plugin)
-    })
+        // 选择类
+        this.select = new Select({
+            mindMap: this
+        })
 
-    // 初始渲染
-    this.render()
-    setTimeout(() => {
-      this.command.addHistory()
-    }, 0)
-  }
+        // 拖动类
+        this.drag = new Drag({
+            mindMap: this
+        })
 
-  //  配置参数处理
-  handleOpt(opt) {
-    // 检查布局配置
-    if (!layoutValueList.includes(opt.layout)) {
-      opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
+        // 批量执行类
+        this.batchExecution = new BatchExecution()
+
+        // 初始渲染
+        this.reRender()
+        setTimeout(() => {
+            this.command.addHistory()
+        }, 0)
     }
-    // 检查主题配置
-    opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
-    return opt
-  }
 
-  //  渲染，部分渲染
-  render(callback, source = '') {
-    this.batchExecution.push('render', () => {
-      this.initTheme()
-      this.renderer.reRender = false
-      this.renderer.render(callback, source)
-    })
-  }
-
-  //  重新渲染
-  reRender(callback, source = '') {
-    this.batchExecution.push('render', () => {
-      this.draw.clear()
-      this.initTheme()
-      this.renderer.reRender = true
-      this.renderer.render(callback, source)
-    })
-  }
-
-  //  容器尺寸变化，调整尺寸
-  resize() {
-    this.elRect = this.el.getBoundingClientRect()
-    this.width = this.elRect.width
-    this.height = this.elRect.height
-    this.svg.size(this.width, this.height)
-  }
-
-  //  监听事件
-  on(event, fn) {
-    this.event.on(event, fn)
-  }
-
-  //  触发事件
-  emit(event, ...args) {
-    this.event.emit(event, ...args)
-  }
-
-  //  解绑事件
-  off(event, fn) {
-    this.event.off(event, fn)
-  }
-
-  //  设置主题
-  initTheme() {
-    // 合并主题配置
-    this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
-    // 设置背景样式
-    Style.setBackgroundStyle(this.el, this.themeConfig)
-  }
-
-  //  设置主题
-  setTheme(theme) {
-    this.renderer.clearAllActive()
-    this.opt.theme = theme
-    this.render(null, CONSTANTS.CHANGE_THEME)
-  }
-
-  //  获取当前主题
-  getTheme() {
-    return this.opt.theme
-  }
-
-  //  设置主题配置
-  setThemeConfig(config) {
-    this.opt.themeConfig = config
-    // 检查改变的是否是节点大小无关的主题属性
-    let res = checkIsNodeSizeIndependenceConfig(config)
-    this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
-  }
-
-  //  获取自定义主题配置
-  getCustomThemeConfig() {
-    return this.opt.themeConfig
-  }
-
-  //  获取某个主题配置值
-  getThemeConfig(prop) {
-    return prop === undefined ? this.themeConfig : this.themeConfig[prop]
-  }
-
-  // 获取配置
-  getConfig(prop) {
-    return prop === undefined ? this.opt : this.opt[prop]
-  }
-
-  // 更新配置
-  updateConfig(opt = {}) {
-    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
-  }
-
-  //  获取当前布局结构
-  getLayout() {
-    return this.opt.layout
-  }
-
-  //  设置布局结构
-  setLayout(layout) {
-    // 检查布局配置
-    if (!layoutValueList.includes(layout)) {
-      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
-    }
-    this.opt.layout = layout
-    this.view.reset()
-    this.renderer.setLayout()
-    this.render()
-  }
-
-  //  执行命令
-  execCommand(...args) {
-    this.command.exec(...args)
-  }
-
-  //  动态设置思维导图数据，纯节点数据
-  setData(data) {
-    this.execCommand('CLEAR_ACTIVE_NODE')
-    this.command.clearHistory()
-    this.command.addHistory()
-    if (this.richText) {
-      this.renderer.renderTree = this.richText.handleSetData(data)
-    } else {
-      this.renderer.renderTree = data
-    }
-    this.reRender(() => {}, CONSTANTS.SET_DATA)
-  }
-
-  //  动态设置思维导图数据，包括节点数据、布局、主题、视图
-  setFullData(data) {
-    if (data.root) {
-      this.setData(data.root)
-    }
-    if (data.layout) {
-      this.setLayout(data.layout)
-    }
-    if (data.theme) {
-      if (data.theme.template) {
-        this.setTheme(data.theme.template)
-      }
-      if (data.theme.config) {
-        this.setThemeConfig(data.theme.config)
-      }
-    }
-    if (data.view) {
-      this.view.setTransformData(data.view)
-    }
-  }
-
-  //  获取思维导图数据，节点树、主题、布局等
-  getData(withConfig) {
-    let nodeData = this.command.removeDataUid(this.command.getCopyData())
-    let data = {}
-    if (withConfig) {
-      data = {
-        layout: this.getLayout(),
-        root: nodeData,
-        theme: {
-          template: this.getTheme(),
-          config: this.getCustomThemeConfig()
-        },
-        view: this.view.getTransformData()
-      }
-    } else {
-      data = nodeData
-    }
-    return simpleDeepClone(data)
-  }
-
-  //  导出
-  async export(...args) {
-    let result = await this.doExport.export(...args)
-    return result
-  }
-
-  //  转换位置
-  toPos(x, y) {
-    return {
-      x: x - this.elRect.left,
-      y: y - this.elRect.top
-    }
-  }
-
-  //  设置只读模式、编辑模式
-  setMode(mode) {
-    if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
-      return
-    }
-    this.opt.readonly = mode === CONSTANTS.MODE.READONLY
-    if (this.opt.readonly) {
-      // 取消当前激活的元素
-      this.renderer.clearAllActive()
-    }
-    this.emit('mode_change', mode)
-  }
-
-  // 获取svg数据
-  getSvgData({ paddingX = 0, paddingY = 0 } = {}) {
-    const svg = this.svg
-    const draw = this.draw
-    // 保存原始信息
-    const origWidth = svg.width()
-    const origHeight = svg.height()
-    const origTransform = draw.transform()
-    const elRect = this.el.getBoundingClientRect()
-    // 去除放大缩小的变换效果
-    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-    const rect = draw.rbox()
-    // 内边距
-    rect.width += paddingX
-    rect.height += paddingY
-    draw.translate(paddingX / 2, paddingY / 2)
-    // 将svg设置为实际内容的宽高
-    svg.size(rect.width, rect.height)
-    // 把实际内容变换
-    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-    // 克隆一份数据
-    let clone = svg.clone()
-    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
-    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
-      this.width = rect.width
-      this.height = rect.height
-      this.watermark.draw()
-      clone = svg.clone()
-      this.width = origWidth
-      this.height = origHeight
-      this.watermark.draw()
-    }
-    // 恢复原先的大小和变换信息
-    svg.size(origWidth, origHeight)
-    draw.transform(origTransform)
-
-    return {
-      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
-      svgHTML: clone.svg(), // svg字符串
-      rect: {
-        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
-        ratio: rect.width / rect.height // 思维导图图形的宽高比
-      },
-      origWidth, // 画布宽度
-      origHeight, // 画布高度
-      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
-      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
-    }
-  }
-
-  // 添加插件
-  addPlugin(plugin, opt) {
-    let index = MindMap.hasPlugin(plugin)
-    if (index === -1) {
-      MindMap.usePlugin(plugin, opt)
-      this.initPlugin(plugin)
-    }
-  }
-
-  // 移除插件
-  removePlugin(plugin) {
-    let index = MindMap.hasPlugin(plugin)
-    if (index !== -1) {
-      MindMap.pluginList.splice(index, 1)
-      if (this[plugin.instanceName]) {
-        if (this[plugin.instanceName].beforePluginRemove) {
-          this[plugin.instanceName].beforePluginRemove()
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:15:22 
+     * @Desc: 配置参数处理 
+     */
+    handleOpt(opt) {
+        // 检查布局配置
+        if (!layoutValueList.includes(opt.layout)) {
+            opt.layout = 'logicalStructure'
         }
-        delete this[plugin.instanceName]
-      }
+        // 检查主题配置
+        opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
+        return opt
     }
-  }
 
-  // 实例化插件
-  initPlugin(plugin) {
-    this[plugin.instanceName] = new plugin({
-      mindMap: this,
-      pluginOpt: plugin.pluginOpt
-    })
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 18:47:29 
+     * @Desc: 渲染，部分渲染
+     */
+    render() {
+        this.batchExecution.push('render', () => {
+            this.initTheme()
+            this.renderer.reRender = false
+            this.renderer.render()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-08 22:05:11 
+     * @Desc: 重新渲染 
+     */
+    reRender() {
+        this.batchExecution.push('render', () => {
+            this.draw.clear()
+            this.initTheme()
+            this.renderer.reRender = true
+            this.renderer.render()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 21:16:52 
+     * @Desc: 容器尺寸变化，调整尺寸 
+     */
+    resize() {
+        this.elRect = this.el.getBoundingClientRect()
+        this.width = this.elRect.width
+        this.height = this.elRect.height
+        this.svg.size(this.width, this.height)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:25:50 
+     * @Desc: 监听事件 
+     */
+    on(event, fn) {
+        this.event.on(event, fn)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:51:35 
+     * @Desc: 触发事件 
+     */
+    emit(event, ...args) {
+        this.event.emit(event, ...args)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:53:54 
+     * @Desc: 解绑事件 
+     */
+    off(event, fn) {
+        this.event.off(event, fn)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:32:43 
+     * @Desc: 设置主题
+     */
+    initTheme() {
+        // 合并主题配置
+        this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
+        // 设置背景样式
+        Style.setBackgroundStyle(this.el, this.themeConfig)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:52:08 
+     * @Desc: 设置主题 
+     */
+    setTheme(theme) {
+        this.renderer.clearAllActive()
+        this.opt.theme = theme
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-25 23:52:37 
+     * @Desc: 获取当前主题 
+     */
+    getTheme() {
+        return this.opt.theme
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:50:17 
+     * @Desc: 设置主题配置 
+     */
+    setThemeConfig(config) {
+        this.opt.themeConfig = config
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-01 10:38:34 
+     * @Desc: 获取自定义主题配置 
+     */
+    getCustomThemeConfig() {
+        return this.opt.themeConfig
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 14:01:29 
+     * @Desc: 获取某个主题配置值 
+     */
+    getThemeConfig(prop) {
+        return prop === undefined ? this.themeConfig : this.themeConfig[prop]
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 16:17:06 
+     * @Desc: 获取当前布局结构 
+     */
+    getLayout() {
+        return this.opt.layout
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 16:17:33 
+     * @Desc: 设置布局结构 
+     */
+    setLayout(layout) {
+        // 检查布局配置
+        if (!layoutValueList.includes(layout)) {
+            layout = 'logicalStructure'
+        }
+        this.opt.layout = layout
+        this.renderer.setLayout()
+        this.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:01:00 
+     * @Desc: 执行命令 
+     */
+    execCommand(...args) {
+        this.command.exec(...args)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:58:12 
+     * @Desc: 动态设置思维导图数据 
+     */
+    setData(data) {
+        this.execCommand('CLEAR_ACTIVE_NODE')
+        this.command.clearHistory()
+        this.renderer.renderTree = data
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:06:38 
+     * @Desc: 导出 
+     */
+    async export(...args) {
+        let result = await this.doExport.export(...args)
+        return result
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 09:20:03 
+     * @Desc: 转换位置 
+     */
+    toPos(x, y) {
+        return {
+            x: x - this.elRect.left,
+            y: y - this.elRect.top
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-06-08 14:12:38 
+     * @Desc: 设置只读模式、编辑模式 
+     */
+    setMode(mode) {
+        if (!['readonly', 'edit'].includes(mode)) {
+            return
+        }
+        this.opt.readonly = mode === 'readonly'
+        if (this.opt.readonly) {
+            // 取消当前激活的元素
+            this.renderer.clearAllActive()
+        }
+        this.emit('mode_change', mode)
+    }
 }
 
-// 插件列表
-MindMap.pluginList = []
-MindMap.usePlugin = (plugin, opt = {}) => {
-  plugin.pluginOpt = opt
-  MindMap.pluginList.push(plugin)
-  return MindMap
-}
-MindMap.hasPlugin = (plugin) => {
-  return MindMap.pluginList.findIndex((item) => {
-    return item === plugin
-  })
-}
-
-// 定义新主题
-MindMap.defineTheme = (name, config = {}) => {
-  if (theme[name]) {
-    return new Error('该主题名称已存在')
-  }
-  theme[name] = merge(defaultTheme, config)
-}
-
-export default MindMap
+export default MindMap

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.5.11",
+  "version": "0.1.8",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
@@ -17,24 +17,14 @@
     "type": "git",
     "url": "https://github.com/wanglin2/mind-map"
   },
-  "scripts": {
-    "lint": "eslint src/",
-    "format": "prettier --write ."
-  },
-  "module": "index.js",
-  "__main": "./dist/simpleMindMap.umd.min.js",
+  "scripts": {},
+  "main": "index.js",
+  "type": "module",
   "dependencies": {
     "@svgdotjs/svg.js": "^3.0.16",
     "canvg": "^3.0.7",
     "deepmerge": "^1.5.2",
-    "eventemitter3": "^4.0.7",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^2.5.1",
-    "jszip": "^3.10.1",
-    "mdast-util-from-markdown": "^1.3.0",
-    "quill": "^1.3.6",
-    "uuid": "^9.0.0",
-    "xml-js": "^1.6.11"
+    "eventemitter3": "^4.0.7"
   },
   "keywords": [
     "javascript",
@@ -42,9 +32,5 @@
     "mind-map",
     "mindMap",
     "MindMap"
-  ],
-  "devDependencies": {
-    "eslint": "^8.25.0",
-    "prettier": "^2.7.1"
-  }
+  ]
 }

simple-mind-map/scripts/walkJsFiles.js

@@ -1,46 +0,0 @@
-// 遍历所有js文件
-const path = require('path')
-const fs = require('fs')
-
-const entryPath = path.resolve(__dirname, '../src')
-
-const transform = dir => {
-  let dirs = fs.readdirSync(dir)
-  dirs.forEach(item => {
-    let file = path.join(dir, item)
-    if (fs.statSync(file).isDirectory()) {
-      transform(file)
-    } else if (/\.js$/.test(file)) {
-      transformFile(file)
-    }
-  })
-}
-
-const transformFile = file => {
-  console.log(file);
-  let content = fs.readFileSync(file, 'utf-8')
-  countCodeLines(content)
-  // transformComments(file, content)
-}
-
-// 统计代码行数
-let totalLines = 0
-const countCodeLines = (content) => {
-  totalLines += content.split(/\n/).length
-}
-
-// 转换注释类型
-const transformComments = (file, content) => {
-  console.log('当前转换文件：', file)
-  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
-    let res = /@Desc:([^\n]+)\n/g.exec(str)
-    if (res.length > 0) {
-      return '// ' + res[1]
-    }
-  })
-  fs.writeFileSync(file, content)
-}
-
-transform(entryPath)
-transformFile(path.join(__dirname, '../index.js'))
-console.log(totalLines);

simple-mind-map/src/AssociativeLine.js

@@ -1,456 +0,0 @@
-import { walk, bfsWalk, throttle } from './utils/'
-import { v4 as uuid } from 'uuid'
-import {
-  getAssociativeLineTargetIndex,
-  computeCubicBezierPathPoints,
-  cubicBezierPath,
-  getNodePoint,
-  computeNodePoints,
-  getNodeLinePath
-} from './utils/associativeLineUtils'
-import associativeLineControlsMethods from './utils/associativeLineControls'
-import associativeLineTextMethods from './utils/associativeLineText'
-
-// 关联线类
-class AssociativeLine {
-  constructor(opt = {}) {
-    this.mindMap = opt.mindMap
-    this.draw = this.mindMap.draw
-    // 当前所有连接线
-    this.lineList = []
-    // 当前激活的连接线
-    this.activeLine = null
-    // 当前正在创建连接线
-    this.isCreatingLine = false // 是否正在创建连接线中
-    this.creatingStartNode = null // 起始节点
-    this.creatingLine = null // 创建过程中的连接线
-    this.overlapNode = null // 创建过程中的目标节点
-    // 是否有节点正在被拖拽
-    this.isNodeDragging = false
-    // 箭头图标
-    this.markerPath = null
-    this.marker = this.createMarker()
-    // 控制点
-    this.controlLine1 = null
-    this.controlLine2 = null
-    this.controlPoint1 = null
-    this.controlPoint2 = null
-    this.controlPointDiameter = 10
-    this.isControlPointMousedown = false
-    this.mousedownControlPointKey = ''
-    this.controlPointMousemoveState = {
-      pos: null,
-      startPoint: null,
-      endPoint: null,
-      targetIndex: ''
-    }
-    // 节流一下，不然很卡
-    this.checkOverlapNode = throttle(this.checkOverlapNode, 100, this)
-    // 控制点相关方法
-    Object.keys(associativeLineControlsMethods).forEach(item => {
-      this[item] = associativeLineControlsMethods[item].bind(this)
-    })
-    // 关联线文字相关方法
-    Object.keys(associativeLineTextMethods).forEach(item => {
-      this[item] = associativeLineTextMethods[item].bind(this)
-    })
-    this.bindEvent()
-  }
-
-  // 监听事件
-  bindEvent() {
-    // 节点树渲染完毕后渲染连接线
-    this.renderAllLines = this.renderAllLines.bind(this)
-    this.mindMap.on('node_tree_render_end', this.renderAllLines)
-    // 状态改变后重新渲染连接线
-    this.mindMap.on('data_change', this.renderAllLines)
-    // 监听画布和节点点击事件，用于清除当前激活的连接线
-    this.mindMap.on('draw_click', () => {
-      if (this.isControlPointMousedown) {
-        return
-      }
-      this.clearActiveLine()
-    })
-    this.mindMap.on('node_click', node => {
-      if (this.isCreatingLine) {
-        this.completeCreateLine(node)
-      } else {
-        this.clearActiveLine()
-      }
-    })
-    // 注册删除快捷键
-    this.mindMap.keyCommand.addShortcut(
-      'Del|Backspace',
-      this.removeLine.bind(this)
-    )
-    // 注册添加连接线的命令
-    this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine.bind(this))
-    // 监听鼠标移动事件
-    this.mindMap.on('mousemove', this.onMousemove.bind(this))
-    // 节点拖拽事件
-    this.mindMap.on('node_dragging', this.onNodeDragging.bind(this))
-    this.mindMap.on('node_dragend', this.onNodeDragend.bind(this))
-    // 拖拽控制点
-    window.addEventListener('mousemove', e => {
-      this.onControlPointMousemove(e)
-    })
-    window.addEventListener('mouseup', e => {
-      this.onControlPointMouseup(e)
-    })
-    // 缩放事件
-    this.mindMap.on('scale', this.onScale)
-  }
-
-  // 创建箭头
-  createMarker() {
-    return this.draw.marker(20, 20, add => {
-      add.ref(2, 5)
-      add.size(10, 10)
-      add.attr('orient', 'auto-start-reverse')
-      this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
-    })
-  }
-
-  // 渲染所有连线
-  renderAllLines() {
-    // 先移除
-    this.removeAllLines()
-    this.removeControls()
-    this.clearActiveLine()
-    let tree = this.mindMap.renderer.root
-    if (!tree) return
-    let idToNode = new Map()
-    let nodeToIds = new Map()
-    walk(
-      tree,
-      null,
-      cur => {
-        if (!cur) return
-        let data = cur.nodeData.data
-        if (
-          data.associativeLineTargets &&
-          data.associativeLineTargets.length > 0
-        ) {
-          nodeToIds.set(cur, data.associativeLineTargets)
-        }
-        if (data.id) {
-          idToNode.set(data.id, cur)
-        }
-      },
-      () => {},
-      true,
-      0
-    )
-    nodeToIds.forEach((ids, node) => {
-      ids.forEach(id => {
-        let toNode = idToNode.get(id)
-        if (!node || !toNode) return
-        let [startPoint, endPoint] = computeNodePoints(node, toNode)
-        this.drawLine(startPoint, endPoint, node, toNode)
-      })
-    })
-  }
-
-  // 绘制连接线
-  drawLine(startPoint, endPoint, node, toNode) {
-    let {
-      associativeLineWidth,
-      associativeLineColor,
-      associativeLineActiveWidth,
-      associativeLineActiveColor
-    } = this.mindMap.themeConfig
-    // 箭头
-    this.markerPath
-      .stroke({ color: associativeLineColor })
-      .fill({ color: associativeLineColor })
-    // 路径
-    let { path: pathStr, controlPoints } = getNodeLinePath(
-      startPoint,
-      endPoint,
-      node,
-      toNode
-    )
-    // 虚线
-    let path = this.draw.path()
-    path
-      .stroke({
-        width: associativeLineWidth,
-        color: associativeLineColor,
-        dasharray: [6, 4]
-      })
-      .fill({ color: 'none' })
-    path.plot(pathStr)
-    path.marker('end', this.marker)
-    // 不可见的点击线
-    let clickPath = this.draw.path()
-    clickPath
-      .stroke({ width: associativeLineActiveWidth, color: 'transparent' })
-      .fill({ color: 'none' })
-    clickPath.plot(pathStr)
-    // 文字
-    let text = this.createText({ path, clickPath, node, toNode, startPoint, endPoint, controlPoints })
-    // 点击事件
-    clickPath.click(e => {
-      e.stopPropagation()
-      this.setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints })
-    })
-    // 渲染关联线文字
-    this.renderText(this.getText(node, toNode), path, text)
-    this.lineList.push([path, clickPath, text, node, toNode])
-  }
-
-  // 激活某根关联线
-  setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints }) {
-    let {
-      associativeLineActiveColor
-    } = this.mindMap.themeConfig
-    // 如果当前存在激活节点，那么取消激活节点
-    if (this.mindMap.renderer.activeNodeList.length > 0) {
-      this.clearActiveNodes()
-    } else {
-      // 否则清除当前的关联线的激活状态，如果有的话
-      this.clearActiveLine()
-      // 保存当前激活的关联线信息
-      this.activeLine = [path, clickPath, text, node, toNode]
-      // 让不可见的点击线显示
-      clickPath.stroke({ color: associativeLineActiveColor })
-      // 如果没有输入过关联线文字，那么显示默认文字
-      if (!this.getText(node, toNode)) {
-        this.renderText(this.mindMap.opt.defaultAssociativeLineText, path, text)
-      }
-      // 渲染控制点和连线
-      this.renderControls(
-        startPoint,
-        endPoint,
-        controlPoints[0],
-        controlPoints[1]
-      )
-      this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
-    }
-  }
-
-  // 移除所有连接线
-  removeAllLines() {
-    this.lineList.forEach(line => {
-      line[0].remove()
-      line[1].remove()
-      line[2].remove()
-    })
-    this.lineList = []
-  }
-
-  // 从当前激活节点开始创建连接线
-  createLineFromActiveNode() {
-    if (this.mindMap.renderer.activeNodeList.length <= 0) return
-    let node = this.mindMap.renderer.activeNodeList[0]
-    this.createLine(node)
-  }
-
-  // 创建连接线
-  createLine(fromNode) {
-    let { associativeLineWidth, associativeLineColor } =
-      this.mindMap.themeConfig
-    if (this.isCreatingLine || !fromNode) return
-    this.isCreatingLine = true
-    this.creatingStartNode = fromNode
-    this.creatingLine = this.draw.path()
-    this.creatingLine
-      .stroke({
-        width: associativeLineWidth,
-        color: associativeLineColor,
-        dasharray: [6, 4]
-      })
-      .fill({ color: 'none' })
-    this.creatingLine.marker('end', this.marker)
-  }
-
-  // 鼠标移动事件
-  onMousemove(e) {
-    if (!this.isCreatingLine) return
-    this.updateCreatingLine(e)
-  }
-
-  // 更新创建过程中的连接线
-  updateCreatingLine(e) {
-    let { x, y } = this.getTransformedEventPos(e)
-    let startPoint = getNodePoint(this.creatingStartNode)
-    let offsetX = x > startPoint.x ? -10 : 10
-    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x + offsetX, y)
-    this.creatingLine.plot(pathStr)
-    this.checkOverlapNode(x, y)
-  }
-
-  // 获取转换后的鼠标事件对象的坐标
-  getTransformedEventPos(e) {
-    let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-    let { scaleX, scaleY, translateX, translateY } =
-      this.mindMap.draw.transform()
-    return {
-      x: (x - translateX) / scaleX,
-      y: (y - translateY) / scaleY
-    }
-  }
-
-  // 检测当前移动到的目标节点
-  checkOverlapNode(x, y) {
-    this.overlapNode = null
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node.nodeData.data.isActive) {
-        this.mindMap.renderer.setNodeActive(node, false)
-      }
-      if (node === this.creatingStartNode || this.overlapNode) {
-        return
-      }
-      let { left, top, width, height } = node
-      let right = left + width
-      let bottom = top + height
-      if (x >= left && x <= right && y >= top && y <= bottom) {
-        this.overlapNode = node
-      }
-    })
-    if (this.overlapNode && !this.overlapNode.nodeData.data.isActive) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
-    }
-  }
-
-  // 完成创建连接线
-  completeCreateLine(node) {
-    if (this.creatingStartNode === node) return
-    this.addLine(this.creatingStartNode, node)
-    if (this.overlapNode && this.overlapNode.nodeData.data.isActive) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
-    }
-    this.isCreatingLine = false
-    this.creatingStartNode = null
-    this.creatingLine.remove()
-    this.creatingLine = null
-    this.overlapNode = null
-  }
-
-  // 添加连接线
-  addLine(fromNode, toNode) {
-    if (!fromNode || !toNode) return
-    // 目标节点如果没有id，则生成一个id
-    let id = toNode.nodeData.data.id
-    if (!id) {
-      id = uuid()
-      this.mindMap.execCommand('SET_NODE_DATA', toNode, {
-        id
-      })
-    }
-    // 将目标节点id保存起来
-    let list = fromNode.nodeData.data.associativeLineTargets || []
-    list.push(id)
-    // 保存控制点
-    let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
-    let controlPoints = computeCubicBezierPathPoints(
-      startPoint.x,
-      startPoint.y,
-      endPoint.x,
-      endPoint.y
-    )
-    let offsetList =
-      fromNode.nodeData.data.associativeLineTargetControlOffsets || []
-    // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
-    offsetList[list.length - 1] = [
-      {
-        x: controlPoints[0].x - startPoint.x,
-        y: controlPoints[0].y - startPoint.y
-      },
-      {
-        x: controlPoints[1].x - endPoint.x,
-        y: controlPoints[1].y - endPoint.y
-      }
-    ]
-    this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
-      associativeLineTargets: list,
-      associativeLineTargetControlOffsets: offsetList
-    })
-  }
-
-  // 删除连接线
-  removeLine() {
-    if (!this.activeLine) return
-    let [, , , node, toNode] = this.activeLine
-    this.removeControls()
-    let { associativeLineTargets, associativeLineTargetControlOffsets, associativeLineText } =
-      node.nodeData.data
-    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
-    // 更新关联线文本数据
-    let newAssociativeLineText = {}
-    if (associativeLineText) {
-      Object.keys(associativeLineText).forEach((item) => {
-        if (item !== toNode.nodeData.data.id) {
-          newAssociativeLineText[item] = associativeLineText[item]
-        }
-      })
-    }
-    this.mindMap.execCommand('SET_NODE_DATA', node, {
-      // 目标
-      associativeLineTargets: associativeLineTargets.filter((_, index) => {
-        return index !== targetIndex
-      }),
-      // 偏移量
-      associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
-        ? associativeLineTargetControlOffsets.filter((_, index) => {
-            return index !== targetIndex
-          })
-        : [],
-      // 文本
-      associativeLineText: newAssociativeLineText
-    })
-  }
-
-  // 清除当前激活的节点
-  clearActiveNodes() {
-    if (this.mindMap.renderer.activeNodeList.length > 0) {
-      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-    }
-  }
-
-  // 清除激活的线
-  clearActiveLine() {
-    if (this.activeLine) {
-      let [, clickPath, text, node, toNode] = this.activeLine
-      clickPath.stroke({
-        color: 'transparent'
-      })
-      // 隐藏关联线文本编辑框
-      this.hideEditTextBox()
-      // 如果当前关联线没有文字，则清空文字节点
-      if (!this.getText(node, toNode)) {
-        text.clear()
-      }
-      this.activeLine = null
-      this.removeControls()
-    }
-  }
-
-  // 处理节点正在拖拽事件
-  onNodeDragging() {
-    if (this.isNodeDragging) return
-    this.isNodeDragging = true
-    this.lineList.forEach(line => {
-      line[0].hide()
-      line[1].hide()
-      line[2].hide()
-    })
-    this.hideControls()
-  }
-
-  // 处理节点拖拽完成事件
-  onNodeDragend() {
-    if (!this.isNodeDragging) return
-    this.lineList.forEach(line => {
-      line[0].show()
-      line[1].show()
-      line[2].show()
-    })
-    this.showControls()
-    this.isNodeDragging = false
-  }
-}
-
-AssociativeLine.instanceName = 'associativeLine'
-
-export default AssociativeLine

simple-mind-map/src/BatchExecution.js

@@ -1,36 +1,85 @@
-import { nextTick } from './utils'
-
-//  批量执行
-class BatchExecution {
-  //  构造函数
-  constructor() {
-    this.has = {}
-    this.queue = []
-    this.nextTick = nextTick(this.flush, this)
-  }
-
-  //  添加任务
-  push(name, fn) {
-    if (this.has[name]) {
-      return
+/** 
+ * @Author: 王林 
+ * @Date: 2021-06-27 13:16:23 
+ * @Desc: 在下一个事件循环里执行任务 
+ */
+const nextTick = function (fn, ctx) {
+    let pending = false
+    let timerFunc = null
+    let handle = () => {
+        pending = false
+        ctx ? fn.call(ctx) : fn()
+    }
+    // 支持MutationObserver接口的话使用MutationObserver
+    if (typeof MutationObserver !== 'undefined') {
+        let counter = 1
+        let observer = new MutationObserver(handle)
+        let textNode = document.createTextNode(counter)
+        observer.observe(textNode, {
+            characterData: true// 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化
+        })
+        timerFunc = function () {
+            counter = (counter + 1) % 2// counter会在0和1两者循环变化
+            textNode.data = counter// 节点变化会触发回调handle，
+        }
+    } else {// 否则使用定时器
+        timerFunc = setTimeout
+    }
+    return function (cb, ctx) {
+        if (pending) return
+        pending = true
+        timerFunc(handle, 0)
     }
-    this.has[name] = true
-    this.queue.push({
-      name,
-      fn
-    })
-    this.nextTick()
-  }
-
-  //   执行队列
-  flush() {
-    let fns = this.queue.slice(0)
-    this.queue = []
-    fns.forEach(({ name, fn }) => {
-      this.has[name] = false
-      fn()
-    })
-  }
 }
 
-export default BatchExecution
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-06-26 22:40:52 
+ * @Desc: 批量执行 
+ */
+class BatchExecution {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-26 22:41:41 
+     * @Desc: 构造函数 
+     */
+    constructor() {
+        this.has = {}
+        this.queue = []
+        this.nextTick = nextTick(this.flush, this)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 12:54:04 
+     * @Desc: 添加任务 
+     */
+    push(name, fn) {
+        if (this.has[name]) {
+            return;
+        }
+        this.has[name] = true
+        this.queue.push({
+            name,
+            fn
+        })
+        this.nextTick()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 13:09:24 
+     * @Desc:  执行队列
+     */
+    flush() {
+        let fns = this.queue.slice(0)
+        this.queue = []
+        fns.forEach(({ name, fn }) => {
+            this.has[name] = false
+            fn()
+        })
+    }
+}
+
+export default BatchExecution

simple-mind-map/src/Command.js

@@ -1,154 +1,152 @@
-import { copyRenderTree, simpleDeepClone, nextTick } from './utils'
+import { copyRenderTree, simpleDeepClone } from './utils';
 
-//  命令类
+/** 
+ * @Author: 王林 
+ * @Date: 2021-05-04 13:10:06 
+ * @Desc: 命令类 
+ */
 class Command {
-  //  构造函数
-  constructor(opt = {}) {
-    this.opt = opt
-    this.mindMap = opt.mindMap
-    this.commands = {}
-    this.history = []
-    this.activeHistoryIndex = 0
-    // 注册快捷键
-    this.registerShortcutKeys()
-    this.addHistory = nextTick(this.addHistory, this)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:10:24 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.commands = {}
+        this.history = []
+        this.activeHistoryIndex = 0
+        // 注册快捷键
+        this.registerShortcutKeys()
+    }
 
-  //  清空历史数据
-  clearHistory() {
-    this.history = []
-    this.activeHistoryIndex = 0
-    this.mindMap.emit('back_forward', 0, 0)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 23:06:55 
+     * @Desc: 清空历史数据 
+     */
+    clearHistory() {
+        this.history = []
+        this.activeHistoryIndex = 0
+        this.mindMap.emit('back_forward', 0, 0)
+    }
 
-  //  注册快捷键
-  registerShortcutKeys() {
-    this.mindMap.keyCommand.addShortcut('Control+z', () => {
-      this.mindMap.execCommand('BACK')
-    })
-    this.mindMap.keyCommand.addShortcut('Control+y', () => {
-      this.mindMap.execCommand('FORWARD')
-    })
-  }
-
-  //  执行命令
-  exec(name, ...args) {
-    if (this.commands[name]) {
-      this.commands[name].forEach(fn => {
-        fn(...args)
-      })
-      if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
-        return
-      }
-      this.addHistory()
-    }
-  }
-
-  //  添加命令
-  add(name, fn) {
-    if (this.commands[name]) {
-      this.commands[name].push(fn)
-    } else {
-      this.commands[name] = [fn]
-    }
-  }
-
-  //  移除命令
-  remove(name, fn) {
-    if (!this.commands[name]) {
-      return
-    }
-    if (!fn) {
-      this.commands[name] = []
-      delete this.commands[name]
-    } else {
-      let index = this.commands[name].find(item => {
-        return item === fn
-      })
-      if (index !== -1) {
-        this.commands[name].splice(index, 1)
-      }
-    }
-  }
-
-  //  添加回退数据
-  addHistory() {
-    if (this.mindMap.opt.readonly) {
-      return
-    }
-    let data = this.getCopyData()
-    // 此次数据和上次一样则不重复添加
-    if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
-      return
-    }
-    // 删除当前历史指针后面的数据
-    this.history = this.history.slice(0, this.activeHistoryIndex + 1)
-    this.history.push(simpleDeepClone(data))
-    // 历史记录数超过最大数量
-    if (this.history.length > this.mindMap.opt.maxHistoryCount) {
-      this.history.shift()
-    }
-    this.activeHistoryIndex = this.history.length - 1
-    this.mindMap.emit('data_change', this.removeDataUid(data))
-    this.mindMap.emit(
-      'back_forward',
-      this.activeHistoryIndex,
-      this.history.length
-    )
-  }
-
-  //  回退
-  back(step = 1) {
-    if (this.mindMap.opt.readonly) {
-      return
-    }
-    if (this.activeHistoryIndex - step >= 0) {
-      this.activeHistoryIndex -= step
-      this.mindMap.emit(
-        'back_forward',
-        this.activeHistoryIndex,
-        this.history.length
-      )
-      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
-      return data
-    }
-  }
-
-  //  前进
-  forward(step = 1) {
-    if (this.mindMap.opt.readonly) {
-      return
-    }
-    let len = this.history.length
-    if (this.activeHistoryIndex + step <= len - 1) {
-      this.activeHistoryIndex += step
-      this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
-      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
-      return data
-    }
-  }
-
-  //  获取渲染树数据副本
-  getCopyData() {
-    return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
-  }
-
-  // 移除节点数据中的uid
-  removeDataUid(data) {
-    data = simpleDeepClone(data)
-    let walk = (root) => {
-      delete root.data.uid
-      if (root.children && root.children.length > 0) {
-        root.children.forEach((item) => {
-          walk(item)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-02 23:23:19 
+     * @Desc: 注册快捷键 
+     */
+    registerShortcutKeys() {
+        this.mindMap.keyCommand.addShortcut('Control+z', () => {
+            this.mindMap.execCommand('BACK')
+        })
+        this.mindMap.keyCommand.addShortcut('Control+y', () => {
+            this.mindMap.execCommand('FORWARD')
         })
-      }
     }
-    walk(data)
-    return data
-  }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:12:30 
+     * @Desc: 执行命令 
+     */
+    exec(name, ...args) {
+        if (this.commands[name]) {
+            this.commands[name].forEach((fn) => {
+                fn(...args)
+            })
+            if (name === 'BACK' || name === 'FORWARD') {
+                return;
+            }
+            this.addHistory()
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:13:01 
+     * @Desc: 添加命令 
+     */
+    add(name, fn) {
+        if (this.commands[name]) {
+            this.commands[name].push(fn)
+        } else {
+            this.commands[name] = [fn]
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 23:02:41 
+     * @Desc: 移除命令 
+     */
+    remove(name, fn) {
+        if (!this.commands[name]) {
+            return
+        }
+        if (!fn) {
+            this.commands[name] = []
+            delete this.commands[name]
+        } else {
+            let index = this.commands[name].find((item) => {
+                return item === fn;
+            })
+            if (index !== -1) {
+                this.commands[name].splice(index, 1)
+            }
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 14:35:43 
+     * @Desc: 添加回退数据 
+     */
+    addHistory() {
+        let data = this.getCopyData()
+        this.history.push(simpleDeepClone(data))
+        this.activeHistoryIndex = this.history.length - 1
+        this.mindMap.emit('data_change', data)
+        this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 22:34:53 
+     * @Desc: 回退 
+     */
+    back(step = 1) {
+        if (this.activeHistoryIndex - step >= 0) {
+            this.activeHistoryIndex -= step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-12 10:45:31 
+     * @Desc: 前进 
+     */
+    forward(step = 1) {
+        let len = this.history.length
+        if (this.activeHistoryIndex + step <= len - 1) {
+            this.activeHistoryIndex += step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex,)
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 15:02:58 
+     * @Desc: 获取渲染树数据副本 
+     */
+    getCopyData() {
+        return copyRenderTree({}, this.mindMap.renderer.renderTree)
+    }
 }
 
-export default Command
+export default Command

simple-mind-map/src/Drag.js

@@ -1,320 +1,296 @@
-import { bfsWalk, throttle } from './utils'
+import {
+    bfsWalk,
+    throttle
+} from './utils'
 import Base from './layouts/Base'
 
-//  节点拖动类
-
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-11-23 17:38:55 
+ * @Desc: 节点拖动类 
+ */
 class Drag extends Base {
-  //  构造函数
-  constructor({ mindMap }) {
-    super(mindMap.renderer)
-    this.mindMap = mindMap
-    this.reset()
-    this.bindEvent()
-  }
-
-  //  复位
-  reset() {
-    // 当前拖拽节点
-    this.node = null
-    // 当前重叠节点
-    this.overlapNode = null
-    // 当前上一个同级节点
-    this.prevNode = null
-    // 当前下一个同级节点
-    this.nextNode = null
-    // 画布的变换数据
-    this.drawTransform = null
-    // 克隆节点
-    this.clone = null
-    // 连接线
-    this.line = null
-    // 同级位置占位符
-    this.placeholder = null
-    // 鼠标按下位置和节点左上角的偏移量
-    this.offsetX = 0
-    this.offsetY = 0
-    // 克隆节点左上角的坐标
-    this.cloneNodeLeft = 0
-    this.cloneNodeTop = 0
-    // 当前鼠标是否按下
-    this.isMousedown = false
-    // 拖拽的鼠标位置变量
-    this.mouseDownX = 0
-    this.mouseDownY = 0
-    this.mouseMoveX = 0
-    this.mouseMoveY = 0
-    // 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件
-    this.checkDragOffset = 10
-  }
-
-  //  绑定事件
-  bindEvent() {
-    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
-    this.mindMap.on('node_mousedown', (node, e) => {
-      if (this.mindMap.opt.readonly || node.isGeneralization) {
-        return
-      }
-      if (e.which !== 1 || node.isRoot) {
-        return
-      }
-      e.preventDefault()
-      // 计算鼠标按下的位置距离节点左上角的距离
-      this.drawTransform = this.mindMap.draw.transform()
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.offsetX = x - (node.left * scaleX + translateX)
-      this.offsetY = y - (node.top * scaleY + translateY)
-      this.node = node
-      this.isMousedown = true
-      this.mouseDownX = x
-      this.mouseDownY = y
-    })
-    this.mindMap.on('mousemove', e => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!this.isMousedown) {
-        return
-      }
-      this.mindMap.emit('node_dragging', this.node)
-      e.preventDefault()
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.mouseMoveX = x
-      this.mouseMoveY = y
-      if (
-        Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
-        Math.abs(y - this.mouseDownY) <= this.checkDragOffset &&
-        !this.node.isDrag
-      ) {
-        return
-      }
-      this.mindMap.renderer.clearAllActive()
-      this.onMove(x, y)
-    })
-    this.onMouseup = this.onMouseup.bind(this)
-    this.mindMap.on('node_mouseup', this.onMouseup)
-    this.mindMap.on('mouseup', this.onMouseup)
-  }
-
-  //  鼠标松开事件
-  onMouseup(e) {
-    if (!this.isMousedown) {
-      return
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:35:16 
+     * @Desc: 构造函数 
+     */
+    constructor({
+        mindMap
+    }) {
+        super(mindMap.renderer)
+        this.mindMap = mindMap
+        this.reset()
+        this.bindEvent()
     }
-    this.isMousedown = false
-    let _nodeIsDrag = this.node.isDrag
-    this.node.isDrag = false
-    this.node.show()
-    this.removeCloneNode()
-    // 存在重叠子节点，则移动作为其子节点
-    if (this.overlapNode) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
-      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
-    } else if (this.prevNode) {
-      // 存在前一个相邻节点，作为其下一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.prevNode, false)
-      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
-    } else if (this.nextNode) {
-      // 存在下一个相邻节点，作为其前一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.nextNode, false)
-      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
-      // 自定义位置
-      let { x, y } = this.mindMap.toPos(
-        e.clientX - this.offsetX,
-        e.clientY - this.offsetY
-      )
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      x = (x - translateX) / scaleX
-      y = (y - translateY) / scaleY
-      this.node.left = x
-      this.node.top = y
-      this.node.customLeft = x
-      this.node.customTop = y
-      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
-      this.mindMap.render()
-    }
-    this.reset()
-    this.mindMap.emit('node_dragend')
-  }
 
-  //  创建克隆节点
-  createCloneNode() {
-    if (!this.clone) {
-      // 节点
-      this.clone = this.node.group.clone()
-      this.clone.opacity(0.5)
-      this.clone.css('z-index', 99999)
-      this.node.isDrag = true
-      this.node.hide()
-      // 连接线
-      this.line = this.draw.path()
-      this.line.opacity(0.5)
-      this.node.styleLine(this.line, this.node)
-      // 同级位置占位符
-      this.placeholder = this.draw.rect().fill({
-        color: this.node.style.merge('lineColor', true)
-      })
-      this.mindMap.draw.add(this.clone)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:33:56 
+     * @Desc: 复位 
+     */
+    reset() {
+        // 当前拖拽节点
+        this.node = null
+        // 当前重叠节点
+        this.overlapNode = null
+        // 当前上一个同级节点
+        this.prevNode = null
+        // 当前下一个同级节点
+        this.nextNode = null
+        // 画布的变换数据
+        this.drawTransform = null
+        // 克隆节点
+        this.clone = null
+        // 连接线
+        this.line = null
+        // 同级位置占位符
+        this.placeholder = null
+        // 鼠标按下位置和节点左上角的偏移量
+        this.offsetX = 0
+        this.offsetY = 0
+        // 克隆节点左上角的坐标
+        this.cloneNodeLeft = 0
+        this.cloneNodeTop = 0
+        // 当前鼠标是否按下
+        this.isMousedown = false
+        // 拖拽的鼠标位置变量
+        this.mouseDownX = 0
+        this.mouseDownY = 0
+        this.mouseMoveX = 0
+        this.mouseMoveY = 0
     }
-  }
 
-  //  移除克隆节点
-  removeCloneNode() {
-    if (!this.clone) {
-      return
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:36:36 
+     * @Desc: 绑定事件 
+     */
+    bindEvent() {
+        this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+        this.mindMap.on('node_mousedown', (node, e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (e.which !== 1 || node.isRoot) {
+                return
+            }
+            e.preventDefault()
+            // 计算鼠标按下的位置距离节点左上角的距离
+            this.drawTransform = this.mindMap.draw.transform()
+            let {
+                scaleX,
+                scaleY,
+                translateX,
+                translateY
+            } = this.drawTransform
+            this.offsetX = e.clientX - (node.left * scaleX + translateX)
+            this.offsetY = e.clientY - (node.top * scaleY + translateY)
+            // 
+            this.node = node
+            this.isMousedown = true
+            let {
+                x,
+                y
+            } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseDownX = x
+            this.mouseDownY = y
+        })
+        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return
+            }
+            e.preventDefault()
+            let {
+                x,
+                y
+            } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseMoveX = x
+            this.mouseMoveY = y
+            if ((Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) && !this.node.isDrag) {
+                return
+            }
+            this.mindMap.renderer.clearAllActive()
+            this.onMove(x, y)
+        })
+        this.onMouseup = this.onMouseup.bind(this)
+        this.mindMap.on('node_mouseup', this.onMouseup)
+        this.mindMap.on('mouseup', this.onMouseup)
     }
-    this.clone.remove()
-    this.line.remove()
-    this.placeholder.remove()
-  }
 
-  //  拖动中
-  onMove(x, y) {
-    if (!this.isMousedown) {
-      return
-    }
-    this.createCloneNode()
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    this.cloneNodeLeft = x - this.offsetX
-    this.cloneNodeTop = y - this.offsetY
-    x = (this.cloneNodeLeft - translateX) / scaleX
-    y = (this.cloneNodeTop - translateY) / scaleY
-    let t = this.clone.transform()
-    this.clone.translate(x - t.translateX, y - t.translateY)
-    // 连接线
-    let parent = this.node.parent
-    this.line.plot(
-      this.quadraticCurvePath(
-        parent.left + parent.width / 2,
-        parent.top + parent.height / 2,
-        x + this.node.width / 2,
-        y + this.node.height / 2
-      )
-    )
-    this.checkOverlapNode()
-  }
-
-  //  检测重叠节点
-  checkOverlapNode() {
-    if (!this.drawTransform) {
-      return
-    }
-    let x = this.mouseMoveX
-    let y = this.mouseMoveY
-    this.overlapNode = null
-    this.prevNode = null
-    this.nextNode = null
-    this.placeholder.size(0, 0)
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node.nodeData.data.isActive) {
-        this.mindMap.renderer.setNodeActive(node, false)
-      }
-      if (node === this.node || this.node.isParent(node)) {
-        return
-      }
-      if (this.overlapNode || (this.prevNode && this.nextNode)) {
-        return
-      }
-      let nodeRect = this.getNodeRect(node)
-      let oneFourthHeight = nodeRect.height / 4
-      // 前一个和后一个节点
-      let checkList = node.parent ? node.parent.children.filter((item) => {
-        return item !== this.node
-      }) : []
-      let index = checkList.findIndex((item) => {
-        return item === node
-      })
-      let prevBrother = null
-      let nextBrother = null
-      if (index !== -1) {
-        if (index - 1 >= 0) {
-          prevBrother = checkList[index - 1]
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:38:02 
+     * @Desc: 鼠标松开事件 
+     */
+    onMouseup() {
+        if (!this.isMousedown) {
+            return;
         }
-        if (index + 1 <= checkList.length - 1) {
-          nextBrother = checkList[index + 1]
+        this.isMousedown = false
+        this.node.isDrag = false
+        this.node.show()
+        this.removeCloneNode()
+        // 存在重叠子节点，则移动作为其子节点
+        if (this.overlapNode) {
+            this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+            this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
+        } else if (this.prevNode) { // 存在前一个相邻节点，作为其下一个兄弟节点
+            this.mindMap.renderer.setNodeActive(this.prevNode, false)
+            this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
+        } else if (this.nextNode) { // 存在下一个相邻节点，作为其前一个兄弟节点
+            this.mindMap.renderer.setNodeActive(this.nextNode, false)
+            this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
         }
-      }
-      // 和前一个兄弟节点的距离
-      let prevBrotherOffset = 0
-      if (prevBrother) {
-        let prevNodeRect = this.getNodeRect(prevBrother)  
-        prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
-        // 间距小于10就当它不存在
-        prevBrotherOffset = prevBrotherOffset >= 10 ? prevBrotherOffset / 2 : 0
-      } else {
-        // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
-        prevBrotherOffset = 10
-      }
-      // 和后一个兄弟节点的距离
-      let nextBrotherOffset = 0
-      if (nextBrother) {
-        let nextNodeRect = this.getNodeRect(nextBrother)
-        nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
-        nextBrotherOffset = nextBrotherOffset >= 10 ? nextBrotherOffset / 2 : 0
-      } else {
-        nextBrotherOffset = 10
-      }
-      if (nodeRect.left <= x && nodeRect.right >= x) {
-        // 检测兄弟节点位置
-        if (!this.overlapNode && !this.prevNode && !this.nextNode && !node.isRoot) {
-          let checkIsPrevNode = nextBrotherOffset > 0 ? // 距离下一个兄弟节点的距离大于0
-            y > nodeRect.bottom && y <= (nodeRect.bottom + nextBrotherOffset) : // 那么在当前节点外底部判断
-            y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
-          let checkIsNextNode = prevBrotherOffset > 0 ? // 距离上一个兄弟节点的距离大于0
-            y < nodeRect.top && y >= (nodeRect.top - prevBrotherOffset) : // 那么在当前节点外底部判断
-            y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
-          if (checkIsPrevNode) {
-            this.prevNode = node
-            let size = nextBrotherOffset > 0 ? nextBrotherOffset : 5
-            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
-          } else if (checkIsNextNode) {
-            this.nextNode = node
-            let size = prevBrotherOffset > 0 ? prevBrotherOffset : 5
-            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
-          }
-        }
-        // 检测是否重叠
-        if (!this.overlapNode && !this.prevNode && !this.nextNode) {
-          if (
-            nodeRect.top + (prevBrotherOffset > 0 ? 0 : oneFourthHeight) <= y &&
-            nodeRect.bottom - (nextBrotherOffset > 0 ? 0 : oneFourthHeight) >= y
-          ) {
-            this.overlapNode = node
-          }
-        }
-      }
-    })
-    if (this.overlapNode) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+        this.reset()
     }
-  }
 
-  // 计算节点的位置尺寸信息
-  getNodeRect(node) {
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    let { left, top, width, height } = node
-    let originLeft = left
-    let originTop = top
-    let originBottom = top + height
-    let right = (left + width) * scaleX + translateX
-    let bottom = (top + height) * scaleY + translateY
-    left = left * scaleX + translateX
-    top = top * scaleY + translateY
-    return {
-      width,
-      height,
-      left,
-      top,
-      right,
-      bottom,
-      originLeft,
-      originTop,
-      originBottom
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:34:53 
+     * @Desc: 创建克隆节点 
+     */
+    createCloneNode() {
+        if (!this.clone) {
+            // 节点
+            this.clone = this.node.group.clone()
+            this.clone.opacity(0.5)
+            this.clone.css('z-index', 99999)
+            this.node.isDrag = true
+            this.node.hide()
+            // 连接线
+            this.line = this.draw.path()
+            this.line.opacity(0.5)
+            this.node.style.line(this.line)
+            // 同级位置占位符
+            this.placeholder = this.draw.rect().fill({
+                color: this.node.style.merge('lineColor', true)
+            })
+            this.mindMap.draw.add(this.clone)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:35:16 
+     * @Desc: 移除克隆节点 
+     */
+    removeCloneNode() {
+        if (!this.clone) {
+            return
+        }
+        this.clone.remove()
+        this.line.remove()
+        this.placeholder.remove()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 18:53:47 
+     * @Desc: 拖动中 
+     */
+    onMove(x, y) {
+        if (!this.isMousedown) {
+            return;
+        }
+        this.createCloneNode()
+        let {
+            scaleX,
+            scaleY,
+            translateX,
+            translateY
+        } = this.drawTransform
+        this.cloneNodeLeft = x - this.offsetX
+        this.cloneNodeTop = y - this.offsetY
+        x = (this.cloneNodeLeft - translateX) / scaleX
+        y = (this.cloneNodeTop - translateY) / scaleY
+        let t = this.clone.transform()
+        this.clone.translate(x - t.translateX, y - t.translateY)
+        // 连接线
+        let parent = this.node.parent
+        this.line.plot(this.quadraticCurvePath(parent.left + parent.width / 2, parent.top + parent.height / 2, x + this.node.width / 2, y + this.node.height / 2))
+        this.checkOverlapNode()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:20:43 
+     * @Desc: 检测重叠节点 
+     */
+    checkOverlapNode() {
+        if (!this.drawTransform) {
+            return
+        }
+        let {
+            scaleX,
+            scaleY,
+            translateX,
+            translateY
+        } = this.drawTransform
+        let checkRight = this.cloneNodeLeft + this.node.width * scaleX
+        let checkBottom = this.cloneNodeTop + this.node.height * scaleX
+        this.overlapNode = null
+        this.prevNode = null
+        this.nextNode = null
+        this.placeholder.size(0, 0)
+        bfsWalk(this.mindMap.renderer.root, (node) => {
+            if (node.nodeData.data.isActive) {
+                this.mindMap.renderer.setNodeActive(node, false)
+            }
+            if (node === this.node || this.node.isParent(node)) {
+                return
+            }
+            if (this.overlapNode || this.prevNode && this.nextNode) {
+                return
+            }
+            let {
+                left,
+                top,
+                width,
+                height
+            } = node
+            let _left = left
+            let _top = top
+            let _bottom = top + height
+            let right = (left + width) * scaleX + translateX
+            let bottom = (top + height) * scaleY + translateY
+            left = left * scaleX + translateX
+            top = top * scaleY + translateY
+            // 检测是否重叠
+            if (!this.overlapNode) {
+                if (
+                    left <= checkRight && right >= this.cloneNodeLeft &&
+                    top <= checkBottom && bottom >= this.cloneNodeTop
+                ) {
+                    this.overlapNode = node
+                }
+            }
+            // 检测兄弟节点位置
+            if (!this.prevNode && !this.nextNode && this.node.isBrother(node)) {
+                if (left <= checkRight && right >= this.cloneNodeLeft) {
+                    if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+                        this.prevNode = node
+                        this.placeholder.size(node.width, 10).move(_left, _bottom)
+                    } else if (checkBottom < top && checkBottom >= top - 10) {
+                        this.nextNode = node
+                        this.placeholder.size(node.width, 10).move(_left, _top - 10)
+                    }
+                }
+            }
+        })
+        if (this.overlapNode) {
+            this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+        }
     }
-  }
 }
 
-Drag.instanceName = 'drag'
-
-export default Drag
+export default Drag

simple-mind-map/src/Event.js

@@ -1,159 +1,182 @@
 import EventEmitter from 'eventemitter3'
-import { CONSTANTS } from './utils/constant'
 
-//  事件类
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-07 14:53:09 
+ * @Desc: 事件类 
+ */
 class Event extends EventEmitter {
-  //  构造函数
-  constructor(opt = {}) {
-    super()
-    this.opt = opt
-    this.mindMap = opt.mindMap
-    this.isLeftMousedown = false
-    this.mousedownPos = {
-      x: 0,
-      y: 0
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:53:25 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super()
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.isLeftMousedown = false
+        this.mousedownPos = {
+            x: 0,
+            y: 0
+        }
+        this.mousemovePos = {
+            x: 0,
+            y: 0
+        }
+        this.mousemoveOffset = {
+            x: 0,
+            y: 0
+        }
+        this.bindFn()
+        this.bind()
     }
-    this.mousemovePos = {
-      x: 0,
-      y: 0
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:52:24 
+     * @Desc: 绑定函数上下文 
+     */
+    bindFn() {
+        this.onDrawClick = this.onDrawClick.bind(this)
+        this.onMousedown = this.onMousedown.bind(this)
+        this.onMousemove = this.onMousemove.bind(this)
+        this.onMouseup = this.onMouseup.bind(this)
+        this.onMousewheel = this.onMousewheel.bind(this)
+        this.onContextmenu = this.onContextmenu.bind(this)
+        this.onSvgMousedown = this.onSvgMousedown.bind(this)
     }
-    this.mousemoveOffset = {
-      x: 0,
-      y: 0
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:53:43 
+     * @Desc: 绑定事件 
+     */
+    bind() {
+        this.mindMap.svg.on('click', this.onDrawClick)
+        this.mindMap.el.addEventListener('mousedown', this.onMousedown)
+        this.mindMap.svg.on('mousedown', this.onSvgMousedown)
+        window.addEventListener('mousemove', this.onMousemove)
+        window.addEventListener('mouseup', this.onMouseup)
+        // 兼容火狐浏览器
+        if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
+            this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
+        } else {
+            this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
+        }
+        this.mindMap.svg.on('contextmenu', this.onContextmenu)
     }
-    this.bindFn()
-    this.bind()
-  }
 
-  //  绑定函数上下文
-  bindFn() {
-    this.onBodyClick = this.onBodyClick.bind(this)
-    this.onDrawClick = this.onDrawClick.bind(this)
-    this.onMousedown = this.onMousedown.bind(this)
-    this.onMousemove = this.onMousemove.bind(this)
-    this.onMouseup = this.onMouseup.bind(this)
-    this.onMousewheel = this.onMousewheel.bind(this)
-    this.onContextmenu = this.onContextmenu.bind(this)
-    this.onSvgMousedown = this.onSvgMousedown.bind(this)
-    this.onKeyup = this.onKeyup.bind(this)
-    this.onMouseenter = this.onMouseenter.bind(this)
-    this.onMouseleave = this.onMouseleave.bind(this)
-  }
-
-  //  绑定事件
-  bind() {
-    document.body.addEventListener('click', this.onBodyClick)
-    this.mindMap.svg.on('click', this.onDrawClick)
-    this.mindMap.el.addEventListener('mousedown', this.onMousedown)
-    this.mindMap.svg.on('mousedown', this.onSvgMousedown)
-    window.addEventListener('mousemove', this.onMousemove)
-    window.addEventListener('mouseup', this.onMouseup)
-    this.mindMap.el.addEventListener('wheel', this.onMousewheel)
-    this.mindMap.svg.on('contextmenu', this.onContextmenu)
-    this.mindMap.svg.on('mouseenter', this.onMouseenter)
-    this.mindMap.svg.on('mouseleave', this.onMouseleave)
-    window.addEventListener('keyup', this.onKeyup)
-  }
-
-  //  解绑事件
-  unbind() {
-    document.body.removeEventListener('click', this.onBodyClick)
-    this.mindMap.svg.off('click', this.onDrawClick)
-    this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
-    window.removeEventListener('mousemove', this.onMousemove)
-    window.removeEventListener('mouseup', this.onMouseup)
-    this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
-    this.mindMap.svg.off('contextmenu', this.onContextmenu)
-    this.mindMap.svg.off('mouseenter', this.onMouseenter)
-    this.mindMap.svg.off('mouseleave', this.onMouseleave)
-    window.removeEventListener('keyup', this.onKeyup)
-  }
-
-  //   画布的单击事件
-  onDrawClick(e) {
-    this.emit('draw_click', e)
-  }
-
-  // 页面的单击事件
-  onBodyClick(e) {
-    this.emit('body_click', e)
-  }
-
-  //   svg画布的鼠标按下事件
-  onSvgMousedown(e) {
-    this.emit('svg_mousedown', e)
-  }
-
-  //  鼠标按下事件
-  onMousedown(e) {
-    // 鼠标左键
-    if (e.which === 1) {
-      this.isLeftMousedown = true
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:40:51 
+     * @Desc: 解绑事件 
+     */
+    unbind() {
+        this.mindMap.svg.off('click', this.onDrawClick)
+        this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
+        window.removeEventListener('mousemove', this.onMousemove)
+        window.removeEventListener('mouseup', this.onMouseup)
+        this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
+        this.mindMap.svg.off('contextmenu', this.onContextmenu)
     }
-    this.mousedownPos.x = e.clientX
-    this.mousedownPos.y = e.clientY
-    this.emit('mousedown', e, this)
-  }
 
-  //  鼠标移动事件
-  onMousemove(e) {
-    this.mousemovePos.x = e.clientX
-    this.mousemovePos.y = e.clientY
-    this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
-    this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
-    this.emit('mousemove', e, this)
-    if (this.isLeftMousedown) {
-      e.preventDefault()
-      this.emit('drag', e, this)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:19:39 
+     * @Desc:  画布的单击事件
+     */
+    onDrawClick(e) {
+        this.emit('draw_click', e)
     }
-  }
 
-  //  鼠标松开事件
-  onMouseup(e) {
-    this.isLeftMousedown = false
-    this.emit('mouseup', e, this)
-  }
-
-  //  鼠标滚动
-  onMousewheel(e) {
-    e.stopPropagation()
-    e.preventDefault()
-    let dir
-    // 解决mac触控板双指缩放方向相反的问题
-    if (e.ctrlKey) {
-      if (e.deltaY > 0) dir = CONSTANTS.DIR.UP
-      if (e.deltaY < 0) dir = CONSTANTS.DIR.DOWN
-      if (e.deltaX > 0) dir = CONSTANTS.DIR.LEFT
-      if (e.deltaX < 0) dir = CONSTANTS.DIR.RIGHT
-    } else {
-      if ((e.wheelDeltaY || e.detail) > 0) dir = CONSTANTS.DIR.UP
-      if ((e.wheelDeltaY || e.detail) < 0) dir = CONSTANTS.DIR.DOWN
-      if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
-      if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-16 13:37:30 
+     * @Desc:  svg画布的鼠标按下事件
+     */
+    onSvgMousedown(e) {
+        this.emit('svg_mousedown', e)
     }
-    this.emit('mousewheel', e, dir, this)
-  }
 
-  //  鼠标右键菜单事件
-  onContextmenu(e) {
-    e.preventDefault()
-    this.emit('contextmenu', e)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:17:35 
+     * @Desc: 鼠标按下事件 
+     */
+    onMousedown(e) {
+        // e.preventDefault()
+        // 鼠标左键
+        if (e.which === 1) {
+            this.isLeftMousedown = true
+        }
+        this.mousedownPos.x = e.clientX
+        this.mousedownPos.y = e.clientY
+        this.emit('mousedown', e, this)
+    }
 
-  //  按键松开事件
-  onKeyup(e) {
-    this.emit('keyup', e)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:18:32 
+     * @Desc: 鼠标移动事件 
+     */
+    onMousemove(e) {
+        // e.preventDefault()
+        this.mousemovePos.x = e.clientX
+        this.mousemovePos.y = e.clientY
+        this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
+        this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
+        this.emit('mousemove', e, this)
+        if (this.isLeftMousedown) {
+            this.emit('drag', e, this)
+        }
+    }
 
-  // 进入
-  onMouseenter(e) {
-    this.emit('svg_mouseenter', e)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:18:57 
+     * @Desc: 鼠标松开事件 
+     */
+    onMouseup(e) {
+        this.isLeftMousedown = false
+        this.emit('mouseup', e, this)
+    }
 
-  // 离开
-  onMouseleave(e) {
-    this.emit('svg_mouseleave', e)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:46:27 
+     * @Desc: 鼠标滚动 
+     */
+    onMousewheel(e) {
+        e.stopPropagation()
+        e.preventDefault()
+        let dir
+        if ((e.wheelDeltaY || e.detail) > 0) {
+            dir = 'up'
+        } else {
+            dir = 'down'
+        }
+        this.emit('mousewheel', e, dir, this)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:34:13 
+     * @Desc: 鼠标右键菜单事件 
+     */
+    onContextmenu(e) {
+        e.preventDefault()
+        this.emit('contextmenu', e)
+    }
 }
 
-export default Event
+export default Event

simple-mind-map/src/Export.js

@@ -1,259 +1,226 @@
-import { imgToDataUrl, downloadFile, readBlob } from './utils'
-import JsPDF from 'jspdf'
-import { SVG } from '@svgdotjs/svg.js'
-import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
-import { transformToMarkdown } from './parse/toMarkdown'
+import { imgToDataUrl, downloadFile } from './utils'
 const URL = window.URL || window.webkitURL || window
 
-//  导出类
+/** 
+ * @Author: 王林 
+ * @Date: 2021-07-01 22:05:16 
+ * @Desc: 导出类 
+ */
 class Export {
-  //  构造函数
-  constructor(opt) {
-    this.mindMap = opt.mindMap
-    this.exportPadding = this.mindMap.opt.exportPadding
-  }
-
-  //  导出
-  async export(type, isDownload = true, name = '思维导图', ...args) {
-    if (this[type]) {
-      let result = await this[type](name, ...args)
-      if (isDownload && type !== 'pdf') {
-        downloadFile(result, name + '.' + type)
-      }
-      return result
-    } else {
-      return null
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:05:42 
+     * @Desc: 构造函数 
+     */
+    constructor(opt) {
+        this.mindMap = opt.mindMap
+        this.exportPadding = this.mindMap.opt.exportPadding
     }
-  }
 
-  //  获取svg数据
-  async getSvgData() {
-    let { exportPaddingX, exportPaddingY } = this.mindMap.opt
-    let { svg, svgHTML } = this.mindMap.getSvgData({
-      paddingX: exportPaddingX,
-      paddingY: exportPaddingY
-    })
-    // 把图片的url转换成data:url类型，否则导出会丢失图片
-    let imageList = svg.find('image')
-    let task = imageList.map(async item => {
-      let imgUlr = item.attr('href') || item.attr('xlink:href')
-      let imgData = await imgToDataUrl(imgUlr)
-      item.attr('href', imgData)
-    })
-    await Promise.all(task)
-    if (imageList.length > 0) {
-      svgHTML = svg.svg()
-    }
-    return {
-      node: svg,
-      str: svgHTML
-    }
-  }
-
-  //   svg转png
-  svgToPng(svgSrc, transparent) {
-    return new Promise((resolve, reject) => {
-      const img = new Image()
-      // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
-      img.setAttribute('crossOrigin', 'anonymous')
-      img.onload = async () => {
-        try {
-          let canvas = document.createElement('canvas')
-          canvas.width = img.width + this.exportPadding * 2
-          canvas.height = img.height + this.exportPadding * 2
-          let ctx = canvas.getContext('2d')
-          // 绘制背景
-          if (!transparent) {
-            await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
-          }
-          // 图片绘制到canvas里
-          ctx.drawImage(
-            img,
-            0,
-            0,
-            img.width,
-            img.height,
-            this.exportPadding,
-            this.exportPadding,
-            img.width,
-            img.height
-          )
-          resolve(canvas.toDataURL())
-        } catch (error) {
-          reject(error)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-02 07:44:06 
+     * @Desc: 导出 
+     */
+    async export(type, isDownload = true, name = '思维导图') {
+        if (this[type]) {
+            let result = await this[type]()
+            if (isDownload) {
+                downloadFile(result, name + '.' + type)
+            }
+            return result
+        } else {
+            return null
         }
-      }
-      img.onerror = e => {
-        reject(e)
-      }
-      img.src = svgSrc
-    })
-  }
+    }
 
-  //  在canvas上绘制思维导图背景
-  drawBackgroundToCanvas(ctx, width, height) {
-    return new Promise((resolve, reject) => {
-      let {
-        backgroundColor = '#fff',
-        backgroundImage,
-        backgroundRepeat = 'no-repeat',
-        backgroundPosition = 'center center',
-        backgroundSize = 'cover',
-      } = this.mindMap.themeConfig
-      // 背景颜色
-      ctx.save()
-      ctx.rect(0, 0, width, height)
-      ctx.fillStyle = backgroundColor
-      ctx.fill()
-      ctx.restore()
-      // 背景图片
-      if (backgroundImage && backgroundImage !== 'none') {
-        ctx.save()
-        drawBackgroundImageToCanvas(ctx, width, height, backgroundImage, {
-          backgroundRepeat,
-          backgroundPosition,
-          backgroundSize
-        }, (err) => {
-          if (err) {
-            reject(err)
-          } else {
-            resolve()
-          }
-          ctx.restore()
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 14:57:40 
+     * @Desc: 获取svg数据 
+     */
+    async getSvgData() {
+        const svg = this.mindMap.svg
+        const draw = this.mindMap.draw
+        // 保存原始信息
+        const origWidth = svg.width()
+        const origHeight = svg.height()
+        const origTransform = draw.transform()
+        const elRect = this.mindMap.el.getBoundingClientRect()
+        // 去除放大缩小的变换效果
+        draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+        // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+        const rect = draw.rbox()
+        // 将svg设置为实际内容的宽高
+        svg.size(rect.width, rect.height)
+        // 把实际内容变换
+        draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+        // 克隆一份数据
+        const clone = svg.clone()
+        // 恢复原先的大小和变换信息
+        svg.size(origWidth, origHeight)
+        draw.transform(origTransform)
+        // 把图片的url转换成data:url类型，否则导出会丢失图片
+        let imageList = clone.find('image')
+        let task = imageList.map(async (item) => {
+            let imgUlr = item.attr('href') || item.attr('xlink:href')
+            let imgData = await imgToDataUrl(imgUlr)
+            item.attr('href', imgData)
         })
-      } else {
-        resolve()
-      }
-    })
-  }
-
-  //  在svg上绘制思维导图背景
-  drawBackgroundToSvg(svg) {
-    return new Promise(async resolve => {
-      let {
-        backgroundColor = '#fff',
-        backgroundImage,
-        backgroundRepeat = 'repeat'
-      } = this.mindMap.themeConfig
-      // 背景颜色
-      svg.css('background-color', backgroundColor)
-      // 背景图片
-      if (backgroundImage && backgroundImage !== 'none') {
-        let imgDataUrl = await imgToDataUrl(backgroundImage)
-        svg.css('background-image', `url(${imgDataUrl})`)
-        svg.css('background-repeat', backgroundRepeat)
-        resolve()
-      } else {
-        resolve()
-      }
-    })
-  }
-
-  //  导出为png
-  /**
-   * 方法1.把svg的图片都转化成data:url格式，再转换
-   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
-   */
-  async png(name, transparent = false) {
-    let { node, str } = await this.getSvgData()
-    // 如果开启了富文本，则使用htmltocanvas转换为图片
-    if (this.mindMap.richText) {
-      let res =  await this.mindMap.richText.handleExportPng(node.node)
-      let imgDataUrl = await this.svgToPng(res, transparent)
-      return imgDataUrl
-    }
-    // 转换成blob数据
-    let blob = new Blob([str], {
-      type: 'image/svg+xml'
-    })
-    // 转换成data:url数据
-    let svgUrl = await readBlob(blob)
-    // 绘制到canvas上
-    let res = await this.svgToPng(svgUrl, transparent)
-    return res
-  }
-
-  //  导出为pdf
-  async pdf(name) {
-    let img = await this.png()
-    let pdf = new JsPDF('', 'pt', 'a4')
-    let a4Width = 595
-    let a4Height = 841
-    let a4Ratio = a4Width / a4Height
-    let image = new Image()
-    image.onload = () => {
-      let imageWidth = image.width
-      let imageHeight = image.height
-      let imageRatio = imageWidth / imageHeight
-      let w, h
-      if (imageWidth <= a4Width && imageHeight <= a4Height) {
-        // 使用图片原始宽高
-        w = imageWidth
-        h = imageHeight
-      } else if (a4Ratio > imageRatio) {
-        // 以a4Height为高度，缩放图片宽度
-        w = imageRatio * a4Height
-        h = a4Height
-      } else {
-        // 以a4Width为宽度，缩放图片高度
-        w = a4Width
-        h = a4Width / imageRatio
-      }
-      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
-      pdf.save(name)
-    }
-    image.src = img
-  }
-
-  //  导出为svg
-  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
-  async svg(name, plusCssText) {
-    let { node } = await this.getSvgData()
-    // 开启了节点富文本编辑
-    if (this.mindMap.richText) {
-      if (plusCssText) {
-        let foreignObjectList = node.find('foreignObject')
-        if (foreignObjectList.length > 0) {
-          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
+        await Promise.all(task)
+        return {
+            node: clone,
+            str: clone.svg()
         }
-      }
     }
-    node.first().before(SVG(`<title>${name}</title>`))
-    await this.drawBackgroundToSvg(node)
-    let str = node.svg()
-    // 转换成blob数据
-    let blob = new Blob([str], {
-      type: 'image/svg+xml'
-    })
-    let res = await readBlob(blob)
-    return res
-  }
 
-  //  导出为json
-  async json(name, withConfig = true) {
-    let data = this.mindMap.getData(withConfig)
-    let str = JSON.stringify(data)
-    let blob = new Blob([str])
-    let res = await readBlob(blob)
-    return res
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:25:19 
+     * @Desc:  svg转png
+     */
+    svgToPng(svgSrc) {
+        return new Promise((resolve, reject) => {
+            const img = new Image()
+            // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
+            img.setAttribute('crossOrigin', 'anonymous')
+            img.onload = async () => {
+                try {
+                    let canvas = document.createElement('canvas')
+                    canvas.width = img.width + this.exportPadding * 2
+                    canvas.height = img.height + this.exportPadding * 2
+                    let ctx = canvas.getContext('2d')
+                    // 绘制背景
+                    await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
+                    // 图片绘制到canvas里
+                    ctx.drawImage(img, 0, 0, img.width, img.height, this.exportPadding, this.exportPadding, img.width, img.height)
+                    resolve(canvas.toDataURL())
+                } catch (error) {
+                    reject(error)
+                }
+            }
+            img.onerror = (e) => {
+                reject(e)
+            }
+            img.src = svgSrc
+        })
+    }
 
-  //  专有文件，其实就是json文件
-  async smm(name, withConfig) {
-    let res = await this.json(name, withConfig)
-    return res
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:32:07 
+     * @Desc: 在canvas上绘制思维导图背景
+     */
+    drawBackgroundToCanvas(ctx, width, height) {
+        return new Promise((resolve, rejct) => {
+            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
+            // 背景颜色
+            ctx.save()
+            ctx.rect(0, 0, width, height)
+            ctx.fillStyle = backgroundColor
+            ctx.fill()
+            ctx.restore()
+            // 背景图片
+            if (backgroundImage && backgroundImage !== 'none') {
+                ctx.save()
+                let img = new Image()
+                img.src = backgroundImage
+                img.onload = () => {
+                    let pat = ctx.createPattern(img, backgroundRepeat)
+                    ctx.rect(0, 0, width, height)
+                    ctx.fillStyle = pat
+                    ctx.fill()
+                    ctx.restore()
+                    resolve()
+                }
+                img.onerror = (e) => {
+                    rejct(e)
+                }
+            } else {
+                resolve()
+            }
+        })
+    }
 
-  // markdown文件
-  async md() {
-    let data = this.mindMap.getData()
-    let content = transformToMarkdown(data)
-    let blob = new Blob([content])
-    let res = await readBlob(blob)
-    return res
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:09:51 
+     * @Desc: 导出为png 
+     * 方法1.把svg的图片都转化成data:url格式，再转换
+     * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
+     */
+    async png() {
+        let { str } = await this.getSvgData()
+        // 转换成blob数据
+        let blob = new Blob([str], {
+            type: 'image/svg+xml'
+        })
+        // 转换成data:url数据
+        let svgUrl = URL.createObjectURL(blob)
+        // 绘制到canvas上
+        let imgDataUrl = await this.svgToPng(svgUrl)
+        URL.revokeObjectURL(svgUrl)
+        return imgDataUrl
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:32:07 
+     * @Desc: 在svg上绘制思维导图背景
+     */
+    drawBackgroundToSvg(svg) {
+        return new Promise(async (resolve, rejct) => {
+            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
+            // 背景颜色
+            svg.css('background-color', backgroundColor)
+            // 背景图片
+            if (backgroundImage && backgroundImage !== 'none') {
+                let imgDataUrl = await imgToDataUrl(backgroundImage)
+                svg.css('background-image', `url(${imgDataUrl})`)
+                svg.css('background-repeat', backgroundRepeat)
+                resolve()
+            } else {
+                resolve()
+            }
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 14:54:07 
+     * @Desc: 导出为svg 
+     */
+    async svg() {
+        let { node } = await this.getSvgData()
+        await this.drawBackgroundToSvg(node)
+        let str = node.svg()
+        // 转换成blob数据
+        let blob = new Blob([str], {
+            type: 'image/svg+xml'
+        })
+        return URL.createObjectURL(blob)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:19:17 
+     * @Desc: 导出为json 
+     */
+    json () {
+        let data = this.mindMap.command.getCopyData()
+        let str = JSON.stringify(data)
+        let blob = new Blob([str])
+        return URL.createObjectURL(blob)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:24:24 
+     * @Desc: 专有文件，其实就是json文件 
+     */
+    smm () {
+        return this.json();
+    }
 }
 
-Export.instanceName = 'doExport'
-
 export default Export

simple-mind-map/src/KeyCommand.js

@@ -1,161 +1,142 @@
-import { keyMap } from './utils/keyMap'
-//  快捷按键、命令处理类
+import { keyMap } from './utils/keyMap';
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-24 15:20:46 
+ * @Desc: 快捷按键、命令处理类 
+ */
 export default class KeyCommand {
-  //  构造函数
-  constructor(opt) {
-    this.opt = opt
-    this.mindMap = opt.mindMap
-    this.shortcutMap = {
-      //Enter: [fn]
-    }
-    this.shortcutMapCache = {}
-    this.isPause = false
-    this.isInSvg = false
-    this.bindEvent()
-  }
-
-  //  暂停快捷键响应
-  pause() {
-    this.isPause = true
-  }
-
-  //  恢复快捷键响应
-  recovery() {
-    this.isPause = false
-  }
-
-  //  保存当前注册的快捷键数据，然后清空快捷键数据
-  save() {
-    this.shortcutMapCache = this.shortcutMap
-    this.shortcutMap = {}
-  }
-
-  //  恢复保存的快捷键数据，然后清空缓存数据
-  restore() {
-    this.shortcutMap = this.shortcutMapCache
-    this.shortcutMapCache = {}
-  }
-
-  //  绑定事件
-  bindEvent() {
-    // 只有当鼠标在画布内才响应快捷键
-    this.mindMap.on('svg_mouseenter', () => {
-      this.isInSvg = true
-    })
-    this.mindMap.on('svg_mouseleave', () => {
-      if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
-        return
-      }
-      if (this.mindMap.renderer.textEdit.showTextEdit || (this.mindMap.associativeLine && this.mindMap.associativeLine.showTextEdit)) {
-        return
-      }
-      this.isInSvg = false
-    })
-    window.addEventListener('keydown', e => {
-      if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
-        return
-      }
-      Object.keys(this.shortcutMap).forEach(key => {
-        if (this.checkKey(e, key)) {
-          e.stopPropagation()
-          e.preventDefault()
-          this.shortcutMap[key].forEach(fn => {
-            fn()
-          })
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 15:21:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.shortcutMap = {
+            //Enter: [fn]
         }
-      })
-    })
-  }
+        this.bindEvent()
+    }
 
-  //  检查键值是否符合
-  checkKey(e, key) {
-    let o = this.getOriginEventCodeArr(e)
-    let k = this.getKeyCodeArr(key)
-    if (o.length !== k.length) {
-      return false
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 15:23:22 
+     * @Desc: 绑定事件 
+     */
+    bindEvent() {
+        window.addEventListener('keydown', (e) => {
+            Object.keys(this.shortcutMap).forEach((key) => {
+                if (this.checkKey(e, key)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    this.shortcutMap[key].forEach((fn) => {
+                        fn()
+                    })
+                }
+            })
+        })
     }
-    for (let i = 0; i < o.length; i++) {
-      let index = k.findIndex(item => {
-        return item === o[i]
-      })
-      if (index === -1) {
-        return false
-      } else {
-        k.splice(index, 1)
-      }
-    }
-    return true
-  }
 
-  //  获取事件对象里的键值数组
-  getOriginEventCodeArr(e) {
-    let arr = []
-    if (e.ctrlKey || e.metaKey) {
-      arr.push(keyMap['Control'])
-    }
-    if (e.altKey) {
-      arr.push(keyMap['Alt'])
-    }
-    if (e.shiftKey) {
-      arr.push(keyMap['Shift'])
-    }
-    if (!arr.includes(e.keyCode)) {
-      arr.push(e.keyCode)
-    }
-    return arr
-  }
-
-  //  获取快捷键对应的键值数组
-  getKeyCodeArr(key) {
-    let keyArr = key.split(/\s*\+\s*/)
-    let arr = []
-    keyArr.forEach(item => {
-      arr.push(keyMap[item])
-    })
-    return arr
-  }
-
-  //  添加快捷键命令
-  /**
-   * Enter
-   * Tab | Insert
-   * Shift + a
-   */
-  addShortcut(key, fn) {
-    key.split(/\s*\|\s*/).forEach(item => {
-      if (this.shortcutMap[item]) {
-        this.shortcutMap[item].push(fn)
-      } else {
-        this.shortcutMap[item] = [fn]
-      }
-    })
-  }
-
-  //  移除快捷键命令
-  removeShortcut(key, fn) {
-    key.split(/\s*\|\s*/).forEach(item => {
-      if (this.shortcutMap[item]) {
-        if (fn) {
-          let index = this.shortcutMap[item].findIndex(f => {
-            return f === fn
-          })
-          if (index !== -1) {
-            this.shortcutMap[item].splice(index, 1)
-          }
-        } else {
-          this.shortcutMap[item] = []
-          delete this.shortcutMap[item]
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 19:24:53 
+     * @Desc: 检查键值是否符合 
+     */
+    checkKey(e, key) {
+        let o = this.getOriginEventCodeArr(e)
+        let k = this.getKeyCodeArr(key)
+        if (o.length !== k.length) {
+            return false
         }
-      }
-    })
-  }
+        for (let i = 0; i < o.length; i++) {
+            let index = k.findIndex((item) => {
+                return item === o[i];
+            })
+            if (index === -1) {
+                return false
+            } else {
+                k.splice(index, 1)
+            }
+        }
+        return true
+    }
 
-  //  获取指定快捷键的处理函数
-  getShortcutFn(key) {
-    let res = []
-    key.split(/\s*\|\s*/).forEach(item => {
-      res = this.shortcutMap[item] || []
-    })
-    return res
-  }
-}
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 19:15:19 
+     * @Desc: 获取事件对象里的键值数组 
+     */
+    getOriginEventCodeArr(e) {
+        let arr = []
+        if (e.ctrlKey || e.metaKey) {
+            arr.push(keyMap['Control'])
+        }
+        if (e.altKey) {
+            arr.push(keyMap['Alt'])
+        }
+        if (e.shiftKey) {
+            arr.push(keyMap['Shift'])
+        }
+        if (!arr.includes(e.keyCode)) {
+            arr.push(e.keyCode)
+        }
+        return arr
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 19:40:11 
+     * @Desc: 获取快捷键对应的键值数组 
+     */
+    getKeyCodeArr(key) {
+        let keyArr = key.split(/\s*\+\s*/)
+        let arr = []
+        keyArr.forEach((item) => {
+            arr.push(keyMap[item])
+        })
+        return arr
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 15:23:00 
+     * @Desc: 添加快捷键命令 
+     * Enter
+     * Tab | Insert
+     * Shift + a
+     */
+    addShortcut(key, fn) {
+        key.split(/\s*\|\s*/).forEach((item) => {
+            if (this.shortcutMap[item]) {
+                this.shortcutMap[item].push(fn)
+            } else {
+                this.shortcutMap[item] = [fn]
+            }
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-27 14:06:16 
+     * @Desc: 移除快捷键命令 
+     */
+    removeShortcut(key, fn) {
+        key.split(/\s*\|\s*/).forEach((item) => {
+            if (this.shortcutMap[item]) {
+                if (fn) {
+                    let index = this.shortcutMap[item].findIndex((f) => {
+                        return f === fn
+                    })
+                    if (index !== -1) {
+                        this.shortcutMap[item].splice(index, 1)
+                    }
+                } else {
+                    this.shortcutMap[item] = []
+                    delete this.shortcutMap[item]
+                }
+            }
+        })
+    }
+}

simple-mind-map/src/KeyboardNavigation.js

@@ -1,237 +0,0 @@
-import { bfsWalk } from './utils'
-import { CONSTANTS } from './utils/constant'
-
-//  键盘导航类
-class KeyboardNavigation {
-  //  构造函数
-  constructor(opt) {
-    this.opt = opt
-    this.mindMap = opt.mindMap
-    this.onKeyup = this.onKeyup.bind(this)
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
-      this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
-    })
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
-      this.onKeyup(CONSTANTS.KEY_DIR.UP)
-    })
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
-      this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
-    })
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
-      this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
-    })
-  }
-
-  //  处理按键事件
-  onKeyup(dir) {
-    if (this.mindMap.renderer.activeNodeList.length > 0) {
-      this.focus(dir)
-    } else {
-      let root = this.mindMap.renderer.root
-      this.mindMap.renderer.moveNodeToCenter(root)
-      root.active()
-    }
-  }
-
-  //  聚焦到下一个节点
-  focus(dir) {
-    // 当前聚焦的节点
-    let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
-    // 当前聚焦节点的位置信息
-    let currentActiveNodeRect = this.getNodeRect(currentActiveNode)
-    // 寻找的下一个聚焦节点
-    let targetNode = null
-    let targetDis = Infinity
-    // 保存并维护距离最近的节点
-    let checkNodeDis = (rect, node) => {
-      let dis = this.getDistance(currentActiveNodeRect, rect)
-      if (dis < targetDis) {
-        targetNode = node
-        targetDis = dis
-      }
-    }
-
-    // 第一优先级：阴影算法
-    this.getFocusNodeByShadowAlgorithm({
-      currentActiveNode,
-      currentActiveNodeRect,
-      dir,
-      checkNodeDis
-    })
-
-    // 第二优先级：区域算法
-    if (!targetNode) {
-      this.getFocusNodeByAreaAlgorithm({
-        currentActiveNode,
-        currentActiveNodeRect,
-        dir,
-        checkNodeDis
-      })
-    }
-
-    // 第三优先级：简单算法
-    if (!targetNode) {
-      this.getFocusNodeBySimpleAlgorithm({
-        currentActiveNode,
-        currentActiveNodeRect,
-        dir,
-        checkNodeDis
-      })
-    }
-
-    // 找到了则让目标节点聚焦
-    if (targetNode) {
-      this.mindMap.renderer.moveNodeToCenter(targetNode)
-      targetNode.active()
-    }
-  }
-
-  //  1.简单算法
-  getFocusNodeBySimpleAlgorithm({
-    currentActiveNode,
-    currentActiveNodeRect,
-    dir,
-    checkNodeDis
-  }) {
-    // 遍历节点树
-    bfsWalk(this.mindMap.renderer.root, node => {
-      // 跳过当前聚焦的节点
-      if (node === currentActiveNode) return
-      // 当前遍历到的节点的位置信息
-      let rect = this.getNodeRect(node)
-      let { left, top, right, bottom } = rect
-      let match = false
-      // 按下了左方向键
-      if (dir === CONSTANTS.KEY_DIR.LEFT) {
-        // 判断节点是否在当前节点的左侧
-        match = right <= currentActiveNodeRect.left
-        // 按下了右方向键
-      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
-        // 判断节点是否在当前节点的右侧
-        match = left >= currentActiveNodeRect.right
-        // 按下了上方向键
-      } else if (dir === CONSTANTS.KEY_DIR.UP) {
-        // 判断节点是否在当前节点的上面
-        match = bottom <= currentActiveNodeRect.top
-        // 按下了下方向键
-      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
-        // 判断节点是否在当前节点的下面
-        match = top >= currentActiveNodeRect.bottom
-      }
-      // 符合要求，判断是否是最近的节点
-      if (match) {
-        checkNodeDis(rect, node)
-      }
-    })
-  }
-
-  //  2.阴影算法
-  getFocusNodeByShadowAlgorithm({
-    currentActiveNode,
-    currentActiveNodeRect,
-    dir,
-    checkNodeDis
-  }) {
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node === currentActiveNode) return
-      let rect = this.getNodeRect(node)
-      let { left, top, right, bottom } = rect
-      let match = false
-      if (dir === CONSTANTS.KEY_DIR.LEFT) {
-        match =
-          left < currentActiveNodeRect.left &&
-          top < currentActiveNodeRect.bottom &&
-          bottom > currentActiveNodeRect.top
-      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
-        match =
-          right > currentActiveNodeRect.right &&
-          top < currentActiveNodeRect.bottom &&
-          bottom > currentActiveNodeRect.top
-      } else if (dir === CONSTANTS.KEY_DIR.UP) {
-        match =
-          top < currentActiveNodeRect.top &&
-          left < currentActiveNodeRect.right &&
-          right > currentActiveNodeRect.left
-      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
-        match =
-          bottom > currentActiveNodeRect.bottom &&
-          left < currentActiveNodeRect.right &&
-          right > currentActiveNodeRect.left
-      }
-      if (match) {
-        checkNodeDis(rect, node)
-      }
-    })
-  }
-
-  //  3.区域算法
-  getFocusNodeByAreaAlgorithm({
-    currentActiveNode,
-    currentActiveNodeRect,
-    dir,
-    checkNodeDis
-  }) {
-    // 当前聚焦节点的中心点
-    let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
-    let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node === currentActiveNode) return
-      let rect = this.getNodeRect(node)
-      let { left, top, right, bottom } = rect
-      // 遍历到的节点的中心点
-      let ccX = (right + left) / 2
-      let ccY = (bottom + top) / 2
-      // 节点的中心点坐标和当前聚焦节点的中心点坐标的差值
-      let offsetX = ccX - cX
-      let offsetY = ccY - cY
-      if (offsetX === 0 && offsetY === 0) return
-      let match = false
-      if (dir === CONSTANTS.KEY_DIR.LEFT) {
-        match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
-      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
-        match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
-      } else if (dir === CONSTANTS.KEY_DIR.UP) {
-        match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
-      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
-        match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
-      }
-      if (match) {
-        checkNodeDis(rect, node)
-      }
-    })
-  }
-
-  //  获取节点的位置信息
-  getNodeRect(node) {
-    let { scaleX, scaleY, translateX, translateY } =
-      this.mindMap.draw.transform()
-    let { left, top, width, height } = node
-    return {
-      right: (left + width) * scaleX + translateX,
-      bottom: (top + height) * scaleY + translateY,
-      left: left * scaleX + translateX,
-      top: top * scaleY + translateY
-    }
-  }
-
-  //  获取两个节点的距离
-  getDistance(node1Rect, node2Rect) {
-    let center1 = this.getCenter(node1Rect)
-    let center2 = this.getCenter(node2Rect)
-    return Math.sqrt(
-      Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2)
-    )
-  }
-
-  //  获取节点的中心点
-  getCenter({ left, right, top, bottom }) {
-    return {
-      x: (left + right) / 2,
-      y: (top + bottom) / 2
-    }
-  }
-}
-
-KeyboardNavigation.instanceName = 'keyboardNavigation'
-
-export default KeyboardNavigation

simple-mind-map/src/MiniMap.js

@@ -1,112 +0,0 @@
-// 小地图类
-class MiniMap {
-  //  构造函数
-  constructor(opt) {
-    this.mindMap = opt.mindMap
-    this.isMousedown = false
-    this.mousedownPos = {
-      x: 0,
-      y: 0
-    }
-    this.startViewPos = {
-      x: 0,
-      y: 0
-    }
-  }
-
-  //  计算小地图的渲染数据
-  /**
-   * boxWidth：小地图容器的宽度
-   * boxHeight：小地图容器的高度
-   */
-  calculationMiniMap(boxWidth, boxHeight) {
-    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
-      this.mindMap.getSvgData()
-    // 计算数据
-    let boxRatio = boxWidth / boxHeight
-    let actWidth = 0
-    let actHeight = 0
-    if (boxRatio > rect.ratio) {
-      // 高度以box为准，缩放宽度
-      actHeight = boxHeight
-      actWidth = rect.ratio * actHeight
-    } else {
-      // 宽度以box为准，缩放高度
-      actWidth = boxWidth
-      actHeight = actWidth / rect.ratio
-    }
-    // svg图形的缩放及位置
-    let miniMapBoxScale = actWidth / rect.width
-    let miniMapBoxLeft = (boxWidth - actWidth) / 2
-    let miniMapBoxTop = (boxHeight - actHeight) / 2
-    // 视口框大小及位置
-    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2
-    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2
-    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2
-    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2
-    let _rectWidth = rect.width * scaleX
-    let _rectHeight = rect.height * scaleY
-    let viewBoxStyle = {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0
-    }
-    viewBoxStyle.left =
-      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + 'px'
-    viewBoxStyle.right =
-      Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
-      miniMapBoxLeft +
-      'px'
-
-    viewBoxStyle.top =
-      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + 'px'
-    viewBoxStyle.bottom =
-      Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
-      miniMapBoxTop +
-      'px'
-    return {
-      svgHTML, // 小地图html
-      viewBoxStyle, // 视图框的位置信息
-      miniMapBoxScale, // 视图框的缩放值
-      miniMapBoxLeft, // 视图框的left值
-      miniMapBoxTop // 视图框的top值
-    }
-  }
-
-  //  小地图鼠标按下事件
-  onMousedown(e) {
-    this.isMousedown = true
-    this.mousedownPos = {
-      x: e.clientX,
-      y: e.clientY
-    }
-    // 保存视图当前的偏移量
-    let transformData = this.mindMap.view.getTransformData()
-    this.startViewPos = {
-      x: transformData.state.x,
-      y: transformData.state.y
-    }
-  }
-
-  //  小地图鼠标移动事件
-  onMousemove(e, sensitivityNum = 5) {
-    if (!this.isMousedown) {
-      return
-    }
-    let ox = e.clientX - this.mousedownPos.x
-    let oy = e.clientY - this.mousedownPos.y
-    // 在视图最初偏移量上累加更新量
-    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x)
-    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y)
-  }
-
-  //  小地图鼠标松开事件
-  onMouseup() {
-    this.isMousedown = false
-  }
-}
-
-MiniMap.instanceName = 'miniMap'
-
-export default MiniMap

simple-mind-map/src/RichText.js

@@ -1,481 +0,0 @@
-import Quill from 'quill'
-import 'quill/dist/quill.snow.css'
-import html2canvas from 'html2canvas'
-import { walk, getTextFromHtml } from './utils'
-import { CONSTANTS } from './utils/constant'
-
-let extended = false
-
-// 扩展quill的字体列表
-let fontFamilyList = [
-  '宋体, SimSun, Songti SC',
-  '微软雅黑, Microsoft YaHei',
-  '楷体, 楷体_GB2312, SimKai, STKaiti',
-  '黑体, SimHei, Heiti SC',
-  '隶书, SimLi',
-  'andale mono',
-  'arial, helvetica, sans-serif',
-  'arial black, avant garde',
-  'comic sans ms',
-  'impact, chicago',
-  'times new roman',
-  'sans-serif',
-  'serif'
-]
-
-// 扩展quill的字号列表
-let fontSizeList = new Array(100).fill(0).map((_, index) => {
-  return index + 'px'
-})
-
-// 节点支持富文本编辑功能
-class RichText {
-  constructor({ mindMap, pluginOpt }) {
-    this.mindMap = mindMap
-    this.pluginOpt = pluginOpt
-    this.textEditNode = null
-    this.showTextEdit = false
-    this.quill = null
-    this.range = null
-    this.lastRange = null
-    this.node = null
-    this.styleEl = null
-    this.cacheEditingText = ''
-    this.initOpt()
-    this.extendQuill()
-    this.appendCss()
-
-    // 处理数据，转成富文本格式
-    if (this.mindMap.opt.data) {
-      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
-    }
-  }
-
-  // 插入样式
-  appendCss() {
-    let cssText = `
-      .ql-editor {
-        overflow: hidden;
-        padding: 0;
-        height: auto;
-        line-height: normal;
-      }
-      
-      .ql-container {
-        height: auto;
-        font-size: inherit;
-      }
-
-      .ql-container.ql-snow {
-        border: none;
-      }
-
-      .smm-richtext-node-wrap p {
-        font-family: auto;
-      }
-
-      .smm-richtext-node-edit-wrap p {
-        font-family: auto;
-      }
-    `
-    this.styleEl = document.createElement('style')
-    this.styleEl.type = 'text/css'
-    this.styleEl.innerHTML = cssText
-    document.head.appendChild(this.styleEl)
-  }
-
-  // 处理选项参数
-  initOpt() {
-    if (
-      this.pluginOpt.fontFamilyList &&
-      Array.isArray(this.pluginOpt.fontFamilyList)
-    ) {
-      fontFamilyList = this.pluginOpt.fontFamilyList
-    }
-    if (
-      this.pluginOpt.fontSizeList &&
-      Array.isArray(this.pluginOpt.fontSizeList)
-    ) {
-      fontSizeList = this.pluginOpt.fontSizeList
-    }
-  }
-
-  // 扩展quill编辑器
-  extendQuill() {
-    if (extended) {
-      return
-    }
-    extended = true
-
-    // 扩展quill的字体列表
-    const FontAttributor = Quill.import('attributors/class/font')
-    FontAttributor.whitelist = fontFamilyList
-    Quill.register(FontAttributor, true)
-
-    const FontStyle = Quill.import('attributors/style/font')
-    FontStyle.whitelist = fontFamilyList
-    Quill.register(FontStyle, true)
-
-    // 扩展quill的字号列表
-    const SizeAttributor = Quill.import('attributors/class/size')
-    SizeAttributor.whitelist = fontSizeList
-    Quill.register(SizeAttributor, true)
-
-    const SizeStyle = Quill.import('attributors/style/size')
-    SizeStyle.whitelist = fontSizeList
-    Quill.register(SizeStyle, true)
-  }
-
-  // 显示文本编辑控件
-  showEditText(node, rect) {
-    if (this.showTextEdit) {
-      return
-    }
-    this.node = node
-    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
-    this.mindMap.emit('before_show_text_edit')
-    this.mindMap.renderer.textEdit.registerTmpShortcut()
-    // 原始宽高
-    let g = node._textData.node
-    let originWidth = g.attr('data-width')
-    let originHeight = g.attr('data-height')
-    // 缩放值
-    let scaleX = rect.width / originWidth
-    let scaleY = rect.height / originHeight
-    // 内边距
-    const paddingX = 6
-    const paddingY = 4
-    if (!this.textEditNode) {
-      this.textEditNode = document.createElement('div')
-      this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;`
-      this.textEditNode.addEventListener('click', e => {
-        e.stopPropagation()
-      })
-      document.body.appendChild(this.textEditNode)
-    }
-    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
-    let bgColor = node.style.merge('fillColor')
-    this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
-    this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
-    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
-    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
-    this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
-    this.textEditNode.style.minHeight = originHeight + 'px'
-    this.textEditNode.style.left = rect.left + 'px'
-    this.textEditNode.style.top = rect.top + 'px'
-    this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
-    this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
-    this.textEditNode.style.transformOrigin = 'left top'
-    if (!node.nodeData.data.richText) {
-      // 还不是富文本的情况
-      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
-      let html = `<p>${text}</p>`
-      this.textEditNode.innerHTML = this.cacheEditingText || html
-    } else {
-      this.textEditNode.innerHTML = this.cacheEditingText || node.nodeData.data.text
-    }
-    this.initQuillEditor()
-    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
-    this.showTextEdit = true
-    this.focus()
-    if (!node.nodeData.data.richText) {
-      // 如果是非富文本的情况，需要手动应用文本样式
-      this.setTextStyleIfNotRichText(node)
-    }
-    this.cacheEditingText = ''
-  }
-
-  // 如果是非富文本的情况，需要手动应用文本样式
-  setTextStyleIfNotRichText(node) {
-    let style = {
-      font: node.style.merge('fontFamily'),
-      color: node.style.merge('color'),
-      italic: node.style.merge('fontStyle') === 'italic',
-      bold: node.style.merge('fontWeight') === 'bold',
-      size: node.style.merge('fontSize') + 'px',
-      underline: node.style.merge('textDecoration') === 'underline',
-      strike: node.style.merge('textDecoration') === 'line-through'
-    }
-    this.formatAllText(style)
-  }
-
-  // 获取当前正在编辑的内容
-  getEditText() {
-    let html = this.quill.container.firstChild.innerHTML
-    // 去除最后的空行
-    return html.replace(/<p><br><\/p>$/, '')
-  }
-
-  // 隐藏文本编辑控件，即完成编辑
-  hideEditText(nodes) {
-    if (!this.showTextEdit) {
-      return
-    }
-    let html = this.getEditText()
-    let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
-    list.forEach(node => {
-      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
-      if (node.isGeneralization) {
-        // 概要节点
-        node.generalizationBelongNode.updateGeneralization()
-      }
-      this.mindMap.render()
-    })
-    this.mindMap.emit(
-      'hide_text_edit',
-      this.textEditNode,
-      list
-    )
-    this.textEditNode.style.display = 'none'
-    this.showTextEdit = false
-    this.mindMap.emit('rich_text_selection_change', false)
-    this.node = null
-  }
-
-  // 初始化Quill富文本编辑器
-  initQuillEditor() {
-    this.quill = new Quill(this.textEditNode, {
-      modules: {
-        toolbar: false,
-        keyboard: {
-          bindings: {
-            enter: {
-              key: 13,
-              handler: function () {
-                // 覆盖默认的回车键换行
-              }
-            }
-          }
-        }
-      },
-      theme: 'snow'
-    })
-    this.quill.on('selection-change', range => {
-      this.lastRange = this.range
-      this.range = null
-      if (range) {
-        let bounds = this.quill.getBounds(range.index, range.length)
-        let rect = this.textEditNode.getBoundingClientRect()
-        let rectInfo = {
-          left: bounds.left + rect.left,
-          top: bounds.top + rect.top,
-          right: bounds.right + rect.left,
-          bottom: bounds.bottom + rect.top,
-          width: bounds.width
-        }
-        let formatInfo = this.quill.getFormat(range.index, range.length)
-        let hasRange = false
-        if (range.length == 0) {
-          hasRange = false
-        } else {
-          this.range = range
-          hasRange = true
-        }
-        this.mindMap.emit(
-          'rich_text_selection_change',
-          hasRange,
-          rectInfo,
-          formatInfo
-        )
-      }
-    })
-  }
-
-  // 选中全部
-  selectAll() {
-    this.quill.setSelection(0, this.quill.getLength())
-  }
-
-  // 聚焦
-  focus() {
-    let len = this.quill.getLength()
-    this.quill.setSelection(len, len)
-  }
-
-  // 格式化当前选中的文本
-  formatText(config = {}, clear = false) {
-    if (!this.range && !this.lastRange) return
-    this.syncFormatToNodeConfig(config, clear)
-    let rangeLost = !this.range
-    let range = rangeLost ? this.lastRange : this.range
-    clear ? this.quill.removeFormat(range.index, range.length) : this.quill.formatText(range.index, range.length, config)
-    if (rangeLost) {
-      this.quill.setSelection(this.lastRange.index, this.lastRange.length)
-    }
-  }
-
-  // 清除当前选中文本的样式
-  removeFormat() {
-    this.formatText({}, true)
-  }
-
-  // 格式化指定范围的文本
-  formatRangeText(range, config = {}) {
-    if (!range) return
-    this.syncFormatToNodeConfig(config)
-    this.quill.formatText(range.index, range.length, config)
-  }
-
-  // 格式化所有文本
-  formatAllText(config = {}) {
-    this.syncFormatToNodeConfig(config)
-    this.quill.formatText(0, this.quill.getLength(), config)
-  }
-
-  // 同步格式化到节点样式配置
-  syncFormatToNodeConfig(config, clear) {
-    if (!this.node) return
-    if (clear) {
-      // 清除文本样式
-      ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => {
-        delete this.node.nodeData.data[prop]
-      })
-    } else {
-      let data = this.richTextStyleToNormalStyle(config)
-      this.mindMap.renderer.setNodeData(this.node, data)
-    }
-  }
-
-  // 将普通节点样式对象转换成富文本样式对象
-  normalStyleToRichTextStyle(style) {
-    let config = {}
-    Object.keys(style).forEach(prop => {
-      let value = style[prop]
-      switch (prop) {
-        case 'fontFamily':
-          config.font = value
-          break
-        case 'fontSize':
-          config.size = value + 'px'
-          break
-        case 'fontWeight':
-          config.bold = value === 'bold'
-          break
-        case 'fontStyle':
-          config.italic = value === 'italic'
-          break
-        case 'textDecoration':
-          config.underline = value === 'underline'
-          config.strike = value === 'line-through'
-          break
-        case 'color':
-          config.color = value
-          break
-        default:
-          break
-      }
-    })
-    return config
-  }
-
-  // 将富文本样式对象转换成普通节点样式对象
-  richTextStyleToNormalStyle(config) {
-    let data = {}
-    Object.keys(config).forEach(prop => {
-      let value = config[prop]
-      switch (prop) {
-        case 'font':
-          data.fontFamily = value
-          break
-        case 'size':
-          data.fontSize = parseFloat(value)
-          break
-        case 'bold':
-          data.fontWeight = value ? 'bold' : 'normal'
-          break
-        case 'italic':
-          data.fontStyle = value ? 'italic' : 'normal'
-          break
-        case 'underline':
-          data.textDecoration = value ? 'underline' : 'none'
-          break
-        case 'strike':
-          data.textDecoration = value ? 'line-through' : 'none'
-          break
-        case 'color':
-          data.color = value
-          break
-        default:
-          break
-      }
-    })
-    return data
-  }
-
-  // 处理导出为图片
-  async handleExportPng(node) {
-    let el = document.createElement('div')
-    el.style.position = 'absolute'
-    el.style.left = '-9999999px'
-    el.appendChild(node)
-    this.mindMap.el.appendChild(el)
-    // 遍历所有节点，将它们的margin和padding设为0
-    let walk = (root) => {
-      root.style.margin = 0
-      root.style.padding = 0
-      if (root.hasChildNodes()) {
-        Array.from(root.children).forEach((item) => {
-          walk(item)
-        })
-      }
-    }
-    walk(node)
-    let canvas = await html2canvas(el, {
-      backgroundColor: null
-    })
-    this.mindMap.el.removeChild(el)
-    return canvas.toDataURL()
-  }
-
-  // 将所有节点转换成非富文本节点
-  transformAllNodesToNormalNode() {
-    walk(
-      this.mindMap.renderer.renderTree,
-      null,
-      node => {
-        if (node.data.richText) {
-          node.data.richText = false
-          node.data.text = getTextFromHtml(node.data.text)
-          // delete node.data.uid
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
-    // 清空历史数据，并且触发数据变化
-    this.mindMap.command.clearHistory()
-    this.mindMap.command.addHistory()
-    this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
-  }
-
-  // 处理导入数据
-  handleSetData(data) {
-    let walk = (root) => {
-      if (!root.data.richText) {
-        root.data.richText = true
-        root.data.resetRichText = true
-      }
-      if (root.children && root.children.length > 0) {
-        Array.from(root.children).forEach((item) => {
-          walk(item)
-        })
-      }
-    }
-    walk(data)
-    return data
-  }
-
-  // 插件被移除前做的事情
-  beforePluginRemove() {
-    this.transformAllNodesToNormalNode()
-    document.head.removeChild(this.styleEl)
-  }
-}
-
-RichText.instanceName = 'richText'
-
-export default RichText

simple-mind-map/src/Select.js

@@ -1,176 +1,191 @@
 import { bfsWalk, throttle } from './utils'
 
-//  选择节点类
+/** 
+ * @Author: 王林 
+ * @Date: 2021-07-10 22:34:51 
+ * @Desc: 选择节点类 
+ */
 
 class Select {
-  //  构造函数
-  constructor({ mindMap }) {
-    this.mindMap = mindMap
-    this.rect = null
-    this.isMousedown = false
-    this.mouseDownX = 0
-    this.mouseDownY = 0
-    this.mouseMoveX = 0
-    this.mouseMoveY = 0
-    this.bindEvent()
-  }
-
-  //  绑定事件
-  bindEvent() {
-    this.checkInNodes = throttle(this.checkInNodes, 300, this)
-    this.mindMap.on('mousedown', e => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!e.ctrlKey && e.which !== 3) {
-        return
-      }
-      this.isMousedown = true
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.mouseDownX = x
-      this.mouseDownY = y
-      this.createRect(x, y)
-    })
-    this.mindMap.on('mousemove', e => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!this.isMousedown) {
-        return
-      }
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.mouseMoveX = x
-      this.mouseMoveY = y
-      if (
-        Math.abs(x - this.mouseDownX) <= 10 &&
-        Math.abs(y - this.mouseDownY) <= 10
-      ) {
-        return
-      }
-      clearTimeout(this.autoMoveTimer)
-      this.onMove(x, y)
-    })
-    this.mindMap.on('mouseup', () => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!this.isMousedown) {
-        return
-      }
-      this.mindMap.emit(
-        'node_active',
-        null,
-        this.mindMap.renderer.activeNodeList
-      )
-      clearTimeout(this.autoMoveTimer)
-      this.isMousedown = false
-      if (this.rect) this.rect.remove()
-      this.rect = null
-    })
-  }
-
-  //  鼠标移动事件
-  onMove(x, y) {
-    // 绘制矩形
-    this.rect.plot([
-      [this.mouseDownX, this.mouseDownY],
-      [this.mouseMoveX, this.mouseDownY],
-      [this.mouseMoveX, this.mouseMoveY],
-      [this.mouseDownX, this.mouseMoveY]
-    ])
-    this.checkInNodes()
-    // 检测边缘移动
-    let step = this.mindMap.opt.selectTranslateStep
-    let limit = this.mindMap.opt.selectTranslateLimit
-    let count = 0
-    // 左边缘
-    if (x <= this.mindMap.elRect.left + limit) {
-      this.mouseDownX += step
-      this.mindMap.view.translateX(step)
-      count++
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:35:16 
+     * @Desc: 构造函数 
+     */
+    constructor({ mindMap }) {
+        this.mindMap = mindMap
+        this.rect = null
+        this.isMousedown = false
+        this.mouseDownX = 0
+        this.mouseDownY = 0
+        this.mouseMoveX = 0
+        this.mouseMoveY = 0
+        this.bindEvent()
     }
-    // 右边缘
-    if (x >= this.mindMap.elRect.right - limit) {
-      this.mouseDownX -= step
-      this.mindMap.view.translateX(-step)
-      count++
-    }
-    // 上边缘
-    if (y <= this.mindMap.elRect.top + limit) {
-      this.mouseDownY += step
-      this.mindMap.view.translateY(step)
-      count++
-    }
-    // 下边缘
-    if (y >= this.mindMap.elRect.bottom - limit) {
-      this.mouseDownY -= step
-      this.mindMap.view.translateY(-step)
-      count++
-    }
-    if (count > 0) {
-      this.startAutoMove(x, y)
-    }
-  }
 
-  //  开启自动移动
-  startAutoMove(x, y) {
-    this.autoMoveTimer = setTimeout(() => {
-      this.onMove(x, y)
-    }, 20)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:36:36 
+     * @Desc: 绑定事件 
+     */
+    bindEvent() {
+        this.checkInNodes = throttle(this.checkInNodes, 500, this)
+        this.mindMap.on('mousedown', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (e.which !== 3) {
+                return
+            }
+            this.isMousedown = true
+            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseDownX = x
+            this.mouseDownY = y
+            this.createRect(x, y)
+        })
+        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return
+            }
+            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseMoveX = x
+            this.mouseMoveY = y
+            if (Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) {
+                return
+            }
+            clearTimeout(this.autoMoveTimer)
+            this.onMove(x, y)
+        })
+        this.mindMap.on('mouseup', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return;
+            }
+            this.mindMap.emit('node_active', null, this.mindMap.renderer.activeNodeList)
+            clearTimeout(this.autoMoveTimer)
+            this.isMousedown = false
+            if (this.rect) this.rect.remove()
+            this.rect = null
+        })
+    }
 
-  //  创建矩形
-  createRect(x, y) {
-    this.rect = this.mindMap.svg
-      .polygon()
-      .stroke({
-        color: '#0984e3'
-      })
-      .fill({
-        color: 'rgba(9,132,227,0.3)'
-      })
-      .plot([[x, y]])
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-13 07:55:49 
+     * @Desc: 鼠标移动事件
+     */
+    onMove (x, y) {
+        // 绘制矩形
+        this.rect.plot([
+            [this.mouseDownX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseMoveY],
+            [this.mouseDownX, this.mouseMoveY]
+        ])
+        this.checkInNodes()
+        // 检测边缘移动
+        let step = this.mindMap.opt.selectTranslateStep
+        let limit = this.mindMap.opt.selectTranslateLimit
+        let count = 0
+        // 左边缘
+        if (x <= this.mindMap.elRect.left + limit) {
+            this.mouseDownX += step
+            this.mindMap.view.translateX(step)
+            count++
+        }
+        // 右边缘
+        if (x >= this.mindMap.elRect.right - limit) {
+            this.mouseDownX -= step
+            this.mindMap.view.translateX(-step)
+            count++
+        }
+        // 上边缘
+        if (y <= this.mindMap.elRect.top + limit) {
+            this.mouseDownY += step
+            this.mindMap.view.translateY(step)
+            count++
+        }
+        // 下边缘
+        if (y >= this.mindMap.elRect.bottom - limit) {
+            this.mouseDownY -= step
+            this.mindMap.view.translateY(-step)
+            count++
+        }
+        if (count > 0) {
+            this.startAutoMove(x, y)
+        }
+    }
 
-  //  检测在选区里的节点
-  checkInNodes() {
-    let { scaleX, scaleY, translateX, translateY } =
-      this.mindMap.draw.transform()
-    let minx = Math.min(this.mouseDownX, this.mouseMoveX)
-    let miny = Math.min(this.mouseDownY, this.mouseMoveY)
-    let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
-    let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
-    bfsWalk(this.mindMap.renderer.root, node => {
-      let { left, top, width, height } = node
-      let right = (left + width) * scaleX + translateX
-      let bottom = (top + height) * scaleY + translateY
-      left = left * scaleX + translateX
-      top = top * scaleY + translateY
-      if ((left >= minx && left <= maxx ||
-          right >= minx && right <= maxx) && 
-          (top >= miny && top <= maxy ||
-          bottom >= miny && bottom <= maxy)
-        ) {
-        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, true)
-          this.mindMap.renderer.addActiveNode(node)
-        // })
-      } else if (node.nodeData.data.isActive) {
-        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (!node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, false)
-          this.mindMap.renderer.removeActiveNode(node)
-        // })
-      }
-    })
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-22 08:02:23 
+     * @Desc: 开启自动移动 
+     */
+    startAutoMove(x, y) {
+        this.autoMoveTimer = setTimeout(() => {
+            this.onMove(x, y)
+        }, 20);
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:19:37 
+     * @Desc: 创建矩形 
+     */
+    createRect(x, y) {
+        this.rect = this.mindMap.svg.polygon().stroke({
+            color: '#0984e3'
+        }).fill({
+            color: 'rgba(9,132,227,0.3)'
+        }).plot([[x, y]])
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:20:43 
+     * @Desc: 检测在选区里的节点 
+     */
+    checkInNodes() {
+        let { scaleX, scaleY, translateX, translateY } = this.mindMap.draw.transform()
+        let minx = Math.min(this.mouseDownX, this.mouseMoveX)
+        let miny = Math.min(this.mouseDownY, this.mouseMoveY)
+        let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
+        let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
+        bfsWalk(this.mindMap.renderer.root, (node) => {
+            let { left, top, width, height } = node
+            let right = (left + width) * scaleX + translateX
+            let bottom = (top + height) * scaleY + translateY
+            left = left * scaleX + translateX
+            top = top * scaleY + translateY
+            if (
+                left >= minx &&
+                right <= maxx &&
+                top >= miny &&
+                bottom <= maxy
+            ) {
+                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+                    if (node.nodeData.data.isActive) {
+                        return ;
+                    }
+                    this.mindMap.renderer.setNodeActive(node, true)
+                    this.mindMap.renderer.addActiveNode(node)
+                })
+            } else if (node.nodeData.data.isActive) {
+                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+                    if (!node.nodeData.data.isActive) {
+                        return ;
+                    }
+                    this.mindMap.renderer.setNodeActive(node, false)
+                    this.mindMap.renderer.removeActiveNode(node)
+                })
+            }
+        })
+    }
 }
 
-Select.instanceName = 'select'
-
-export default Select
+export default Select

simple-mind-map/src/Shape.js

@@ -1,229 +0,0 @@
-import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
-import { CONSTANTS } from './utils/constant'
-
-//  节点形状类
-export default class Shape {
-  constructor(node) {
-    this.node = node
-  }
-
-  //  形状需要的padding
-  getShapePadding(width, height, paddingX, paddingY) {
-    const shape = this.node.getShape()
-    const defaultPaddingX = 15
-    const defaultPaddingY = 5
-    const actWidth = width + paddingX * 2
-    const actHeight = height + paddingY * 2
-    const actOffset = Math.abs(actWidth - actHeight)
-    switch (shape) {
-      case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
-        return {
-          paddingX: height > width ? (height - width) / 2 : 0,
-          paddingY: 0
-        }
-      case CONSTANTS.SHAPE.DIAMOND:
-        return {
-          paddingX: width / 2,
-          paddingY: height / 2
-        }
-      case CONSTANTS.SHAPE.PARALLELOGRAM:
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case CONSTANTS.SHAPE.ELLIPSE:
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: paddingY <= 0 ? defaultPaddingY : 0
-        }
-      case CONSTANTS.SHAPE.CIRCLE:
-        return {
-          paddingX: actHeight > actWidth ? actOffset / 2 : 0,
-          paddingY: actHeight < actWidth ? actOffset / 2 : 0
-        }
-      default:
-        return {
-          paddingX: 0,
-          paddingY: 0
-        }
-    }
-  }
-
-  //  创建形状节点
-  createShape() {
-    const shape = this.node.getShape()
-    let { width, height } = this.node
-    let node = null
-    // 矩形
-    if (shape === CONSTANTS.SHAPE.RECTANGLE) {
-      node = new Rect().size(width, height)
-    } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
-      // 菱形
-      node = this.createDiamond()
-    } else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
-      // 平行四边形
-      node = this.createParallelogram()
-    } else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
-      // 圆角矩形
-      node = this.createRoundedRectangle()
-    } else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
-      // 八角矩形
-      node = this.createOctagonalRectangle()
-    } else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
-      // 外三角矩形
-      node = this.createOuterTriangularRectangle()
-    } else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
-      // 内三角矩形
-      node = this.createInnerTriangularRectangle()
-    } else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
-      // 椭圆
-      node = this.createEllipse()
-    } else if (shape === CONSTANTS.SHAPE.CIRCLE) {
-      // 圆
-      node = this.createCircle()
-    }
-    return node
-  }
-
-  //  创建菱形
-  createDiamond() {
-    let { width, height } = this.node
-    let halfWidth = width / 2
-    let halfHeight = height / 2
-    let topX = halfWidth
-    let topY = 0
-    let rightX = width
-    let rightY = halfHeight
-    let bottomX = halfWidth
-    let bottomY = height
-    let leftX = 0
-    let leftY = halfHeight
-    return new Polygon().plot([
-      [topX, topY],
-      [rightX, rightY],
-      [bottomX, bottomY],
-      [leftX, leftY]
-    ])
-  }
-
-  //  创建平行四边形
-  createParallelogram() {
-    let { paddingX } = this.node.getPaddingVale()
-    paddingX = paddingX || this.node.shapePadding.paddingX
-    let { width, height } = this.node
-    return new Polygon().plot([
-      [paddingX, 0],
-      [width, 0],
-      [width - paddingX, height],
-      [0, height]
-    ])
-  }
-
-  //  创建圆角矩形
-  createRoundedRectangle() {
-    let { width, height } = this.node
-    let halfHeight = height / 2
-    return new Path().plot(`
-      M${halfHeight},0
-      L${width - halfHeight},0
-      A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
-      L${halfHeight},${height}
-      A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
-    `)
-  }
-
-  //  创建八角矩形
-  createOctagonalRectangle() {
-    let w = 5
-    let { width, height } = this.node
-    return new Polygon().plot([
-      [0, w],
-      [w, 0],
-      [width - w, 0],
-      [width, w],
-      [width, height - w],
-      [width - w, height],
-      [w, height],
-      [0, height - w]
-    ])
-  }
-
-  //  创建外三角矩形
-  createOuterTriangularRectangle() {
-    let { paddingX } = this.node.getPaddingVale()
-    paddingX = paddingX || this.node.shapePadding.paddingX
-    let { width, height } = this.node
-    return new Polygon().plot([
-      [paddingX, 0],
-      [width - paddingX, 0],
-      [width, height / 2],
-      [width - paddingX, height],
-      [paddingX, height],
-      [0, height / 2]
-    ])
-  }
-
-  //  创建内三角矩形
-  createInnerTriangularRectangle() {
-    let { paddingX } = this.node.getPaddingVale()
-    paddingX = paddingX || this.node.shapePadding.paddingX
-    let { width, height } = this.node
-    return new Polygon().plot([
-      [0, 0],
-      [width, 0],
-      [width - paddingX / 2, height / 2],
-      [width, height],
-      [0, height],
-      [paddingX / 2, height / 2]
-    ])
-  }
-
-  //  创建椭圆
-  createEllipse() {
-    let { width, height } = this.node
-    let halfWidth = width / 2
-    let halfHeight = height / 2
-    return new Path().plot(`
-      M${halfWidth},0
-      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-      M${halfWidth},${height} 
-      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-    `)
-  }
-
-  //  创建圆
-  createCircle() {
-    let { width, height } = this.node
-    let halfWidth = width / 2
-    let halfHeight = height / 2
-    return new Path().plot(`
-      M${halfWidth},0
-      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-      M${halfWidth},${height} 
-      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-    `)
-  }
-}
-
-// 形状列表
-export const shapeList = [
-  CONSTANTS.SHAPE.RECTANGLE,
-  CONSTANTS.SHAPE.DIAMOND,
-  CONSTANTS.SHAPE.PARALLELOGRAM,
-  CONSTANTS.SHAPE.ROUNDED_RECTANGLE,
-  CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE,
-  CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE,
-  CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE,
-  CONSTANTS.SHAPE.ELLIPSE,
-  CONSTANTS.SHAPE.CIRCLE
-]

simple-mind-map/src/Style.js

@@ -1,195 +1,168 @@
-import { tagColorList } from './utils/constant'
+import { tagColorList } from './utils/constant';
 const rootProp = ['paddingX', 'paddingY']
 
-//  样式类
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 10:09:08 
+ * @Desc: 样式类 
+ */
 class Style {
-  //   设置背景样式
-  static setBackgroundStyle(el, themeConfig) {
-    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
-    el.style.backgroundColor = backgroundColor
-    if (backgroundImage) {
-      el.style.backgroundImage = `url(${backgroundImage})`
-      el.style.backgroundRepeat = backgroundRepeat
-      el.style.backgroundPosition = backgroundPosition
-      el.style.backgroundSize = backgroundSize
-    } else {
-      el.style.backgroundImage = 'none'
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 16:01:53 
+     * @Desc:  设置背景样式
+     */
+    static setBackgroundStyle(el, themeConfig) {
+        let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
+        el.style.backgroundColor = backgroundColor
+        if (backgroundImage) {
+            el.style.backgroundImage = `url(${backgroundImage})`
+            el.style.backgroundRepeat = backgroundRepeat
+        }
     }
-  }
 
-  //  构造函数
-  constructor(ctx) {
-    this.ctx = ctx
-  }
-
-  //  合并样式
-  merge(prop, root, isActive) {
-    let themeConfig = this.ctx.mindMap.themeConfig
-    // 三级及以下节点
-    let defaultConfig = themeConfig.node
-    if (root || rootProp.includes(prop)) {
-      // 直接使用最外层样式
-      defaultConfig = themeConfig
-    } else if (this.ctx.isGeneralization) {
-      // 概要节点
-      defaultConfig = themeConfig.generalization
-    } else if (this.ctx.layerIndex === 0) {
-      // 根节点
-      defaultConfig = themeConfig.root
-    } else if (this.ctx.layerIndex === 1) {
-      // 二级节点
-      defaultConfig = themeConfig.second
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 10:10:11 
+     * @Desc: 构造函数 
+     */
+    constructor(ctx, themeConfig) {
+        this.ctx = ctx
+        this.themeConfig = themeConfig
     }
-    // 激活状态
-    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
-      if (
-        this.ctx.nodeData.data.activeStyle &&
-        this.ctx.nodeData.data.activeStyle[prop] !== undefined
-      ) {
-        return this.ctx.nodeData.data.activeStyle[prop]
-      } else if (defaultConfig.active && defaultConfig.active[prop]) {
-        return defaultConfig.active[prop]
-      }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-12 07:40:14 
+     * @Desc: 更新主题配置 
+     */
+    updateThemeConfig(themeConfig) {
+        this.themeConfig = themeConfig
     }
-    // 优先使用节点本身的样式
-    return this.getSelfStyle(prop) !== undefined
-      ? this.getSelfStyle(prop)
-      : defaultConfig[prop]
-  }
 
-  //  获取某个样式值
-  getStyle(prop, root, isActive) {
-    return this.merge(prop, root, isActive)
-  }
-
-  //  获取自身自定义样式
-  getSelfStyle(prop) {
-    return this.ctx.nodeData.data[prop]
-  }
-
-  //  矩形
-  rect(node) {
-    this.shape(node)
-    node.radius(this.merge('borderRadius'))
-  }
-
-  //   矩形外的其他形状
-  shape(node) {
-    node.fill({
-      color: this.merge('fillColor')
-    })
-    // 节点使用横线样式，不需要渲染非激活状态的边框样式
-    // if (
-    //   !this.ctx.isRoot &&
-    //   !this.ctx.isGeneralization &&
-    //   this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
-    //   !this.ctx.nodeData.data.isActive
-    // ) {
-    //   return
-    // }
-    node.stroke({
-      color: this.merge('borderColor'),
-      width: this.merge('borderWidth'),
-      dasharray: this.merge('borderDasharray')
-    })
-  }
-
-  //  文字
-  text(node) {
-    node
-      .fill({
-        color: this.merge('color')
-      })
-      .css({
-        'font-family': this.merge('fontFamily'),
-        'font-size': this.merge('fontSize'),
-        'font-weight': this.merge('fontWeight'),
-        'font-style': this.merge('fontStyle'),
-        'text-decoration': this.merge('textDecoration')
-      })
-  }
-
-  // 生成内联样式
-  createStyleText() {
-    return `
-      color: ${this.merge('color')};
-      font-family: ${this.merge('fontFamily')};
-      font-size: ${this.merge('fontSize') + 'px'};
-      font-weight: ${this.merge('fontWeight')};
-      font-style: ${this.merge('fontStyle')};
-      text-decoration: ${this.merge('textDecoration')}
-    `
-  }
-
-  // 获取文本样式
-  getTextFontStyle() {
-    return { 
-      italic: this.merge('fontStyle') === 'italic', 
-      bold: this.merge('fontWeight'), 
-      fontSize: this.merge('fontSize'), 
-      fontFamily: this.merge('fontFamily')
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 12:02:55 
+     * @Desc: 合并样式 
+     */
+    merge(prop, root, isActive) {
+        // 三级及以下节点
+        let defaultConfig = this.themeConfig.node
+        if (root || rootProp.includes(prop)) {// 直接使用最外层样式
+            defaultConfig = this.themeConfig
+        } else if (this.ctx.layerIndex === 0) {// 根节点
+            defaultConfig = this.themeConfig.root
+        } else if (this.ctx.layerIndex === 1) {// 二级节点
+            defaultConfig = this.themeConfig.second
+        }
+        // 激活状态
+        if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
+            if (this.ctx.nodeData.data.activeStyle && this.ctx.nodeData.data.activeStyle[prop] !== undefined) {
+                return this.ctx.nodeData.data.activeStyle[prop];
+            } else if (defaultConfig.active && defaultConfig.active[prop]) {
+                return defaultConfig.active[prop]
+            }
+        }
+        // 优先使用节点本身的样式
+        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
     }
-  }
 
-  //  html文字节点
-  domText(node, fontSizeScale = 1, isMultiLine) {
-    node.style.fontFamily = this.merge('fontFamily')
-    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-    node.style.fontWeight = this.merge('fontWeight') || 'normal'
-    node.style.lineHeight = !isMultiLine ? 'normal' : this.merge('lineHeight')
-    node.style.fontStyle = this.merge('fontStyle')
-  }
-
-  //  标签文字
-  tagText(node, index) {
-    node
-      .fill({
-        color: tagColorList[index].color
-      })
-      .css({
-        'font-size': '12px'
-      })
-  }
-
-  //  标签矩形
-  tagRect(node, index) {
-    node.fill({
-      color: tagColorList[index].background
-    })
-  }
-
-  //  内置图标
-  iconNode(node) {
-    node.attr({
-      fill: this.merge('color')
-    })
-  }
-
-  //  连线
-  line(node, { width, color, dasharray } = {}) {
-    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
-  }
-
-  //  概要连线
-  generalizationLine(node) {
-    node
-      .stroke({
-        width: this.merge('generalizationLineWidth', true),
-        color: this.merge('generalizationLineColor', true)
-      })
-      .fill({ color: 'none' })
-  }
-
-  //  展开收起按钮
-  iconBtn(node, node2, fillNode) {
-    let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || {
-      color: '#808080',
-      fill: '#fff'
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 10:12:56 
+     * @Desc: 矩形 
+     */
+    rect(node) {
+        node.fill({
+            color: this.merge('fillColor')
+        }).stroke({
+            color: this.merge('borderColor'),
+            width: this.merge('borderWidth'),
+            dasharray: this.merge('borderDasharray')
+        }).radius(this.merge('borderRadius'))
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 12:07:59 
+     * @Desc: 文字 
+     */
+    text(node) {
+        node.fill({
+            color: this.merge('color')
+        }).css({
+            'font-family': this.merge('fontFamily'),
+            'font-size': this.merge('fontSize'),
+            'font-weight': this.merge('fontWeight'),
+            'font-style': this.merge('fontStyle'),
+            'text-decoration': this.merge('textDecoration')
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 08:14:34 
+     * @Desc: html文字节点 
+     */
+    domText(node, fontSizeScale = 1) {
+        node.style.fontFamily = this.merge('fontFamily')
+        node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
+        node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-20 20:02:18 
+     * @Desc: 标签文字 
+     */
+    tagText(node, index) {
+        node.fill({
+            color: tagColorList[index].color
+        }).css({
+            'font-size': '12px'
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-20 21:04:11 
+     * @Desc: 标签矩形 
+     */
+    tagRect(node, index) {
+        node.fill({
+            color: tagColorList[index].background
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-03 22:37:19 
+     * @Desc: 内置图标 
+     */
+    iconNode(node) {
+        node.attr({
+            fill: this.merge('color')
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:50:49 
+     * @Desc: 连线 
+     */
+    line(node) {
+        node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 20:03:59 
+     * @Desc: 按钮 
+     */
+    iconBtn(node, fillNode) {
+        node.fill({ color: '#808080' })
+        fillNode.fill({ color: '#fff' })
     }
-    node.fill({ color: color })
-    node2.fill({ color: color })
-    fillNode.fill({ color: fill })
-  }
 }
 
-export default Style
+export default Style

simple-mind-map/src/TextEdit.js

@@ -1,179 +1,132 @@
-import { getStrWithBrFromHtml, checkNodeOuter } from './utils'
+import {
+    getStrWithBrFromHtml
+} from './utils'
 
-//  节点文字编辑类
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-06-19 11:11:28 
+ * @Desc: 节点文字编辑类 
+ */
 export default class TextEdit {
-  //  构造函数
-  constructor(renderer) {
-    this.renderer = renderer
-    this.mindMap = renderer.mindMap
-    // 当前编辑的节点
-    this.currentNode = null
-    // 文本编辑框
-    this.textEditNode = null
-    // 文本编辑框是否显示
-    this.showTextEdit = false
-    // 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
-    this.cacheEditingText = ''
-    this.bindEvent()
-  }
-
-  //  事件
-  bindEvent() {
-    this.show = this.show.bind(this)
-    this.onScale = this.onScale.bind(this)
-    // 节点双击事件
-    this.mindMap.on('node_dblclick', this.show)
-    // 点击事件
-    this.mindMap.on('draw_click', () => {
-      // 隐藏文本编辑框
-      this.hideEditTextBox()
-    })
-    this.mindMap.on('body_click', () => {
-      // 隐藏文本编辑框
-      if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
-        this.hideEditTextBox()
-      }
-    })
-    this.mindMap.on('svg_mousedown', () => {
-      // 隐藏文本编辑框
-      this.hideEditTextBox()
-    })
-    // 展开收缩按钮点击事件
-    this.mindMap.on('expand_btn_click', () => {
-      this.hideEditTextBox()
-    })
-    // 节点激活前事件
-    this.mindMap.on('before_node_active', () => {
-      this.hideEditTextBox()
-    })
-    // 注册编辑快捷键
-    this.mindMap.keyCommand.addShortcut('F2', () => {
-      if (this.renderer.activeNodeList.length <= 0) {
-        return
-      }
-      this.show(this.renderer.activeNodeList[0])
-    })
-    this.mindMap.on('scale', this.onScale)
-  }
-
-  //  注册临时快捷键
-  registerTmpShortcut() {
-    // 注册回车快捷键
-    this.mindMap.keyCommand.addShortcut('Enter', () => {
-      this.hideEditTextBox()
-    })
-  }
-
-  //  显示文本编辑框
-  show(node) {
-    this.currentNode = node
-    let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
-    this.mindMap.view.translateXY(offsetLeft, offsetTop)
-    let rect = node._textData.node.node.getBoundingClientRect()
-    if (this.mindMap.richText) {
-      this.mindMap.richText.showEditText(node, rect)
-      return
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-06-19 11:22:57 
+     * @Desc: 构造函数 
+     */
+    constructor(renderer) {
+        this.renderer = renderer
+        this.mindMap = renderer.mindMap
+        // 文本编辑框
+        this.textEditNode = null
+        // 文本编辑框是否显示
+        this.showTextEdit = false
+        this.bindEvent()
     }
-    this.showEditTextBox(node, rect)
-  }
 
-  // 处理画布缩放
-  onScale() {
-    if (!this.currentNode) return
-    if (this.mindMap.richText) {
-      this.mindMap.richText.cacheEditingText = this.mindMap.richText.getEditText()
-      this.mindMap.richText.showTextEdit = false
-    } else {
-      this.cacheEditingText = this.getEditText()
-      this.showTextEdit = false
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:27:04 
+     * @Desc: 事件 
+     */
+    bindEvent() {
+        this.show = this.show.bind(this)
+        // 节点双击事件
+        this.mindMap.on('node_dblclick', this.show)
+        // 点击事件
+        this.mindMap.on('draw_click', () => {
+            // 隐藏文本编辑框
+            this.hideEditTextBox()
+        })
+        // 展开收缩按钮点击事件
+        this.mindMap.on('expand_btn_click', () => {
+            this.hideEditTextBox()
+        })
+        // 节点激活前事件
+        this.mindMap.on('before_node_active', () => {
+            this.hideEditTextBox()
+        })
+        // 注册回车快捷键
+        this.mindMap.keyCommand.addShortcut('Enter', () => {
+            this.hideEditTextBox()
+        })
+        // 注册编辑快捷键
+        this.mindMap.keyCommand.addShortcut('F2', () => {
+            if (this.renderer.activeNodeList.length <= 0) {
+                return
+            }
+            this.show(this.renderer.activeNodeList[0])
+        })
     }
-    this.show(this.currentNode)
-  }
 
-  //  显示文本编辑框
-  showEditTextBox(node, rect) {
-    this.mindMap.emit('before_show_text_edit')
-    this.registerTmpShortcut()
-    if (!this.textEditNode) {
-      this.textEditNode = document.createElement('div')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
-      this.textEditNode.setAttribute('contenteditable', true)
-      this.textEditNode.addEventListener('keyup', e => {
-        e.stopPropagation()
-      })
-      this.textEditNode.addEventListener('click', e => {
-        e.stopPropagation()
-      })
-      document.body.appendChild(this.textEditNode)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:15:56 
+     * @Desc: 显示文本编辑框 
+     */
+    show(node) {
+        this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
     }
-    let scale = this.mindMap.view.scale
-    let lineHeight = node.style.merge('lineHeight')
-    let fontSize = node.style.merge('fontSize')
-    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim)
-    let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
-    node.style.domText(this.textEditNode, scale, isMultiLine)
-    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
-    this.textEditNode.innerHTML = textLines.join('<br>')
-    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
-    this.textEditNode.style.minHeight = rect.height + 6 + 'px'
-    this.textEditNode.style.left = rect.left + 'px'
-    this.textEditNode.style.top = rect.top + 'px'
-    this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
-    if (isMultiLine && lineHeight !== 1) {
-      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2) * scale}px)`
-    }
-    this.showTextEdit = true
-    // 选中文本
-    if (!this.cacheEditingText) {
-      this.selectNodeText()
-    }
-    this.cacheEditingText = ''
-  }
 
-  //  选中文本
-  selectNodeText() {
-    let selection = window.getSelection()
-    let range = document.createRange()
-    range.selectNodeContents(this.textEditNode)
-    selection.removeAllRanges()
-    selection.addRange(range)
-  }
-
-  // 获取当前正在编辑的内容
-  getEditText() {
-    return getStrWithBrFromHtml(this.textEditNode.innerHTML)
-  }
-
-  //  隐藏文本编辑框
-  hideEditTextBox() {
-    this.currentNode = null
-    if (this.mindMap.richText) {
-      return this.mindMap.richText.hideEditText()
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:13:02 
+     * @Desc: 显示文本编辑框 
+     */
+    showEditTextBox(node, rect) {
+        this.mindMap.emit('before_show_text_edit')
+        if (!this.textEditNode) {
+            this.textEditNode = document.createElement('div')
+            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
+            this.textEditNode.setAttribute('contenteditable', true)
+            document.body.appendChild(this.textEditNode)
+        }
+        node.style.domText(this.textEditNode, this.mindMap.view.scale)
+        this.textEditNode.innerHTML = node.nodeData.data.text.split(/\n/img).join('<br>')
+        this.textEditNode.style.minWidth = rect.width + 10 + 'px'
+        this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+        this.textEditNode.style.left = rect.left + 'px'
+        this.textEditNode.style.top = rect.top + 'px'
+        this.textEditNode.style.display = 'block'
+        this.showTextEdit = true
+        // 选中文本
+        this.selectNodeText()
     }
-    if (!this.showTextEdit) {
-      return
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-02 23:13:50 
+     * @Desc: 选中文本 
+     */
+    selectNodeText() {
+        let selection = window.getSelection()
+        let range = document.createRange()
+        range.selectNodeContents(this.textEditNode)
+        selection.removeAllRanges()
+        selection.addRange(range)
     }
-    this.renderer.activeNodeList.forEach(node => {
-      let str = this.getEditText()
-      this.mindMap.execCommand('SET_NODE_TEXT', node, str)
-      if (node.isGeneralization) {
-        // 概要节点
-        node.generalizationBelongNode.updateGeneralization()
-      }
-      this.mindMap.render()
-    })
-    this.mindMap.emit(
-      'hide_text_edit',
-      this.textEditNode,
-      this.renderer.activeNodeList
-    )
-    this.textEditNode.style.display = 'none'
-    this.textEditNode.innerHTML = ''
-    this.textEditNode.style.fontFamily = 'inherit'
-    this.textEditNode.style.fontSize = 'inherit'
-    this.textEditNode.style.fontWeight = 'normal'
-    this.textEditNode.style.transform = 'translateY(0)'
-    this.showTextEdit = false
-  }
-}
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:48:16 
+     * @Desc: 隐藏文本编辑框 
+     */
+    hideEditTextBox() {
+        if (!this.showTextEdit) {
+            return
+        }
+        this.renderer.activeNodeList.forEach((node) => {
+            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+            this.mindMap.execCommand('SET_NODE_TEXT', node, str)
+            this.mindMap.render()
+        })
+        this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)
+        this.textEditNode.style.display = 'none'
+        this.textEditNode.innerHTML = ''
+        this.textEditNode.style.fontFamily = 'inherit'
+        this.textEditNode.style.fontSize = 'inherit'
+        this.textEditNode.style.fontWeight = 'normal'
+        this.showTextEdit = false
+    }
+}

simple-mind-map/src/View.js

@@ -1,206 +1,189 @@
-import { CONSTANTS } from './utils/constant'
-
-//  视图操作类
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-07 14:45:24 
+ * @Desc: 视图操作类 
+ */
 class View {
-  //  构造函数
-  constructor(opt = {}) {
-    this.opt = opt
-    this.mindMap = this.opt.mindMap
-    this.scale = 1
-    this.sx = 0
-    this.sy = 0
-    this.x = 0
-    this.y = 0
-    this.firstDrag = true
-    this.setTransformData(this.mindMap.opt.viewData)
-    this.bind()
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:45:40 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = this.opt.mindMap
+        this.scale = 1
+        this.sx = 0
+        this.sy = 0
+        this.x = 0
+        this.y = 0
+        this.firstDrag = true
+        this.setTransformData(this.mindMap.opt.viewData)
+        this.bind()
+    }
 
-  //  绑定
-  bind() {
-    // 快捷键
-    this.mindMap.keyCommand.addShortcut('Control+=', () => {
-      this.enlarge()
-    })
-    this.mindMap.keyCommand.addShortcut('Control+-', () => {
-      this.narrow()
-    })
-    this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
-      this.reset()
-    })
-    this.mindMap.svg.on('dblclick', () => {
-      this.reset()
-    })
-    // 拖动视图
-    this.mindMap.event.on('mousedown', () => {
-      this.sx = this.x
-      this.sy = this.y
-    })
-    this.mindMap.event.on('drag', (e, event) => {
-      if (e.ctrlKey) {
-        // 按住ctrl键拖动为多选
-        return
-      }
-      if (this.firstDrag) {
-        this.firstDrag = false
-        // 清除激活节点
-        if (this.mindMap.renderer.activeNodeList.length > 0) {
-          this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-        }
-      }
-      this.x = this.sx + event.mousemoveOffset.x
-      this.y = this.sy + event.mousemoveOffset.y
-      this.transform()
-    })
-    this.mindMap.event.on('mouseup', () => {
-      this.firstDrag = true
-    })
-    // 放大缩小视图
-    this.mindMap.event.on('mousewheel', (e, dir) => {
-      if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') {
-        return this.mindMap.opt.customHandleMousewheel(e)
-      }
-      if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
-        switch (dir) {
-          // 鼠标滚轮，向上和向左，都是缩小
-          case CONSTANTS.DIR.UP:
-          case CONSTANTS.DIR.LEFT:
-            this.narrow()
-            break
-          // 鼠标滚轮，向下和向右，都是放大
-          case CONSTANTS.DIR.DOWN:
-          case CONSTANTS.DIR.RIGHT:
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:38:51 
+     * @Desc: 绑定 
+     */
+    bind() {
+        // 快捷键
+        this.mindMap.keyCommand.addShortcut('Control+=', () => {
             this.enlarge()
-            break
+        })
+        this.mindMap.keyCommand.addShortcut('Control+-', () => {
+            this.narrow()
+        })
+        this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
+            this.reset()
+        })
+        this.mindMap.svg.on('dblclick', () => {
+            this.reset()
+        })
+        // 拖动视图
+        this.mindMap.event.on('mousedown', () => {
+            this.sx = this.x
+            this.sy = this.y
+        })
+        this.mindMap.event.on('drag', (e, event) => {
+            if (this.firstDrag) {
+                this.firstDrag = false
+                // 清除激活节点
+                this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+            }
+            this.x = this.sx + event.mousemoveOffset.x
+            this.y = this.sy + event.mousemoveOffset.y
+            this.transform()
+        })
+        this.mindMap.event.on('mouseup', () => {
+            this.firstDrag = true
+        })
+        // 放大缩小视图
+        this.mindMap.event.on('mousewheel', (e, dir) => {
+            // // 放大
+            if (dir === 'down') {
+                this.enlarge()
+            } else { // 缩小
+                this.narrow()
+            }
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 18:30:24 
+     * @Desc: 获取当前变换状态数据 
+     */
+    getTransformData() {
+        return {
+            transform: this.mindMap.draw.transform(),
+            state: {
+                scale: this.scale,
+                x: this.x,
+                y: this.y,
+                sx: this.sx,
+                sy: this.sy
+            }
         }
-      } else {
-        switch (dir){
-          // 上移
-          case CONSTANTS.DIR.DOWN:
-            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 下移
-          case CONSTANTS.DIR.UP:
-            this.translateY(this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 右移
-          case CONSTANTS.DIR.LEFT:
-            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 左移
-          case CONSTANTS.DIR.RIGHT:
-            this.translateX(this.mindMap.opt.mousewheelMoveStep)
-            break
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 19:54:17 
+     * @Desc: 动态设置变换状态数据 
+     */
+    setTransformData(viewData) {
+        if (viewData) {
+            Object.keys(viewData.state).forEach((prop) => {
+                this[prop] = viewData.state[prop]
+            })
+            this.mindMap.draw.transform({
+                ...viewData.transform
+            })
+            this.mindMap.emit('view_data_change', this.getTransformData())
+            this.mindMap.emit('scale', this.scale)
         }
-      }
-    })
-  }
-
-  //  获取当前变换状态数据
-  getTransformData() {
-    return {
-      transform: this.mindMap.draw.transform(),
-      state: {
-        scale: this.scale,
-        x: this.x,
-        y: this.y,
-        sx: this.sx,
-        sy: this.sy
-      }
     }
-  }
 
-  //  动态设置变换状态数据
-  setTransformData(viewData) {
-    if (viewData) {
-      Object.keys(viewData.state).forEach(prop => {
-        this[prop] = viewData.state[prop]
-      })
-      this.mindMap.draw.transform({
-        ...viewData.transform
-      })
-      this.mindMap.emit('view_data_change', this.getTransformData())
-      this.mindMap.emit('scale', this.scale)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 15:49:06 
+     * @Desc: 平移x方向 
+     */
+    translateX(step) {
+        this.x += step
+        this.transform()
     }
-  }
 
-  //  平移x,y方向
-  translateXY(x, y) {
-    this.x += x
-    this.y += y
-    this.transform()
-  }
-
-  //  平移x方向
-  translateX(step) {
-    this.x += step
-    this.transform()
-  }
-
-  //  平移x方式到
-  translateXTo(x) {
-    this.x = x
-    this.transform()
-  }
-
-  //  平移y方向
-  translateY(step) {
-    this.y += step
-    this.transform()
-  }
-
-  //  平移y方向到
-  translateYTo(y) {
-    this.y = y
-    this.transform()
-  }
-
-  //   应用变换
-  transform() {
-    this.mindMap.draw.transform({
-      scale: this.scale,
-      // origin: 'center center',
-      translate: [this.x, this.y]
-    })
-    this.mindMap.emit('view_data_change', this.getTransformData())
-  }
-
-  //  恢复
-  reset() {
-    let scaleChange = this.scale !== 1
-    this.scale = 1
-    this.x = 0
-    this.y = 0
-    this.transform()
-    if (scaleChange) {
-      this.mindMap.emit('scale', this.scale)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 15:48:52 
+     * @Desc: 平移y方向 
+     */
+    translateY(step) {
+        this.y += step
+        this.transform()
     }
-  }
 
-  //  缩小
-  narrow() {
-    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
-      this.scale -= this.mindMap.opt.scaleRatio
-    } else {
-      this.scale = 0.1
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:13:14 
+     * @Desc:  应用变换
+     */
+    transform() {
+        this.mindMap.draw.transform({
+            scale: this.scale,
+            // origin: 'center center',
+            translate: [this.x, this.y],
+        })
+        this.mindMap.emit('view_data_change', this.getTransformData())
     }
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
 
-  //  放大
-  enlarge() {
-    this.scale += this.mindMap.opt.scaleRatio
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 17:41:35 
+     * @Desc: 恢复
+     */
+    reset() {
+        this.scale = 1
+        this.x = 0
+        this.y = 0
+        this.transform()
+    }
 
-  //  设置缩放
-  setScale(scale) {
-    this.scale = scale
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:10:34 
+     * @Desc: 缩小 
+     */
+    narrow() {
+        if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
+            this.scale -= this.mindMap.opt.scaleRatio
+        } else {
+            this.scale = 0.1
+        }
+        this.transform()
+        this.mindMap.emit('scale', this.scale)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:10:41 
+     * @Desc: 放大 
+     */
+    enlarge() {
+        this.scale += this.mindMap.opt.scaleRatio
+        this.transform()
+        this.mindMap.emit('scale', this.scale)
+    }
 }
 
-export default View
+export default View

simple-mind-map/src/Watermark.js

@@ -1,120 +0,0 @@
-import { Text, G } from '@svgdotjs/svg.js'
-import { degToRad, camelCaseToHyphen } from './utils'
-import merge from 'deepmerge'
-
-// 水印类
-class Watermark {
-  constructor(opt = {}) {
-    this.mindMap = opt.mindMap
-    this.lineSpacing = 0 // 水印行间距
-    this.textSpacing = 0 // 行内水印间距
-    this.angle = 0 // 旋转角度
-    this.text = '' // 水印文字
-    this.textStyle = {} // 水印文字样式
-    this.watermarkDraw = this.mindMap.svg
-      .group()
-      .css({ 'pointer-events': 'none', 'user-select': 'none' })
-    this.maxLong = Math.sqrt(
-      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
-    )
-    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
-  }
-
-  // 获取是否存在水印
-  hasWatermark() {
-    return !!this.text.trim()
-  }
-
-  // 处理水印配置
-  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
-    this.text = text === undefined ? '' : String(text).trim()
-    this.lineSpacing =
-      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
-    this.textSpacing =
-      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
-    this.angle =
-      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
-    this.textStyle = Object.assign(this.textStyle, textStyle || {})
-  }
-
-  // 绘制水印
-  // 非精确绘制，会绘制一些超出可视区域的水印
-  draw() {
-    this.watermarkDraw.clear()
-    if (!this.hasWatermark()) {
-      return
-    }
-    let x = 0
-    while (x < this.mindMap.width) {
-      this.drawText(x)
-      x += this.lineSpacing / Math.sin(degToRad(this.angle))
-    }
-
-    let yOffset =
-      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
-    let y = yOffset
-    while (y < this.mindMap.height) {
-      this.drawText(0, y)
-      y += yOffset
-    }
-  }
-
-  // 绘制文字
-  drawText(x, y) {
-    let long = Math.min(
-      this.maxLong,
-      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
-    )
-    let g = new G()
-    let bbox = null
-    let bboxWidth = 0
-    let textHeight = -1
-    while (bboxWidth < long) {
-      let text = new Text().text(this.text)
-      g.add(text)
-      text.transform({
-        translateX: bboxWidth
-      })
-      this.setTextStyle(text)
-      bbox = g.bbox()
-      if (textHeight === -1) {
-        textHeight = bbox.height
-      }
-      bboxWidth = bbox.width + this.textSpacing
-    }
-    let params = {
-      rotate: this.angle,
-      origin: 'top left',
-      translateX: x,
-      translateY: textHeight
-    }
-    if (y !== undefined) {
-      params.translateY = y + textHeight
-    }
-    g.transform(params)
-    this.watermarkDraw.add(g)
-  }
-
-  // 给文字设置样式
-  setTextStyle(text) {
-    Object.keys(this.textStyle).forEach(item => {
-      let value = this.textStyle[item]
-      if (item === 'color') {
-        text.fill(value)
-      } else {
-        text.css(camelCaseToHyphen(item), value)
-      }
-    })
-  }
-
-  // 更新水印
-  updateWatermark(config) {
-    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
-    this.handleConfig(config)
-    this.draw()
-  }
-}
-
-Watermark.instanceName = 'watermark'
-
-export default Watermark

simple-mind-map/src/layouts/Base.js

@@ -1,298 +1,161 @@
 import Node from '../Node'
-import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'
-import Lru from '../utils/Lru'
 
-//  布局基类
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:24:30 
+ * @Desc: 布局基类 
+ */
 class Base {
-  //  构造函数
-  constructor(renderer) {
-    // 渲染实例
-    this.renderer = renderer
-    // 控制实例
-    this.mindMap = renderer.mindMap
-    // 绘图对象
-    this.draw = this.mindMap.draw
-    // 根节点
-    this.root = null
-    this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
-  }
-
-  //  计算节点位置
-  doLayout() {
-    throw new Error('【computed】方法为必要方法，需要子类进行重写！')
-  }
-
-  //  连线
-  renderLine() {
-    throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
-  }
-
-  //  定位展开收缩按钮
-  renderExpandBtn() {
-    throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
-  }
-
-  //  概要节点
-  renderGeneralization() {}
-
-  // 通过uid缓存节点
-  cacheNode(uid, node) {
-    // 记录本次渲染时的节点
-    this.renderer.nodeCache[uid] = node
-    // 记录所有渲染时的节点
-    this.lru.add(uid, node)
-  }
-
-  // 检查当前来源是否需要重新计算节点大小
-  checkIsNeedResizeSources() {
-    return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
-  }
-
-  //  创建节点实例
-  createNode(data, parent, isRoot, layerIndex) {
-    // 创建节点
-    let newNode = null
-    // 数据上保存了节点引用，那么直接复用节点
-    if (data && data._node && !this.renderer.reRender) {
-      newNode = data._node
-      newNode.reset()
-      newNode.layerIndex = layerIndex
-      this.cacheNode(data._node.uid, newNode)
-      // 主题或主题配置改变了需要重新计算节点大小和布局
-      if (this.checkIsNeedResizeSources()) {
-        newNode.getSize()
-        newNode.needLayout = true
-      }
-    } else if (this.lru.has(data.data.uid) && !this.renderer.reRender) {
-      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
-      newNode = this.lru.get(data.data.uid)
-      // 保存该节点上一次的数据
-      let lastData = JSON.stringify(newNode.nodeData.data)
-      newNode.reset()
-      newNode.nodeData = newNode.handleData(data || {})
-      newNode.layerIndex = layerIndex
-      this.cacheNode(data.data.uid, newNode)
-      data._node = newNode
-      // 主题或主题配置改变了需要重新计算节点大小和布局
-      let isResizeSource = this.checkIsNeedResizeSources()
-      // 节点数据改变了需要重新计算节点大小和布局
-      let isNodeDataChange = lastData !== JSON.stringify(data.data)
-      if (isResizeSource || isNodeDataChange) {
-        newNode.getSize()
-        newNode.needLayout = true
-      }
-    } else {
-      // 创建新节点
-      let uid = this.mindMap.uid++
-      newNode = new Node({
-        data,
-        uid,
-        renderer: this.renderer,
-        mindMap: this.mindMap,
-        draw: this.draw,
-        layerIndex
-      })
-      // uid保存到数据上，为了节点复用
-      data.data.uid = uid
-      this.cacheNode(uid, newNode)
-      // 数据关联实际节点
-      data._node = newNode
-      if (data.data.isActive) {
-        this.renderer.addActiveNode(newNode)
-      }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:25:16 
+     * @Desc: 构造函数 
+     */
+    constructor(renderer) {
+        // 渲染实例
+        this.renderer = renderer
+        // 控制实例
+        this.mindMap = renderer.mindMap
+        // 绘图对象
+        this.draw = this.mindMap.draw
+        // 根节点
+        this.root = null
     }
-    // 根节点
-    if (isRoot) {
-      newNode.isRoot = true
-      this.root = newNode
-    } else {
-      // 互相收集
-      newNode.parent = parent._node
-      parent._node.addChildren(newNode)
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:39:50 
+     * @Desc: 计算节点位置 
+     */
+    doLayout() {
+        throw new Error('【computed】方法为必要方法，需要子类进行重写！')
     }
-    return newNode
-  }
 
-  // 格式化节点位置
-  formatPosition(value, size, nodeSize) {
-    if (typeof value === 'number') {
-      return value
-    } else if (initRootNodePositionMap[value] !== undefined) {
-      return size * initRootNodePositionMap[value]
-    } else if (/^\d\d*%$/.test(value)) {
-      return Number.parseFloat(value) / 100 * size
-    } else {
-      return (size - nodeSize) / 2
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:41:04 
+     * @Desc: 连线 
+     */
+    renderLine() {
+        throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
     }
-  }
 
-  //  定位节点到画布中间
-  setNodeCenter(node) {
-    let { initRootNodePosition } = this.mindMap.opt
-    let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
-    if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
-      initRootNodePosition = [CENTER, CENTER]
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:42:08 
+     * @Desc: 定位展开收缩按钮 
+     */
+    renderExpandBtn() {
+        throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
     }
-    node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
-    node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
-  }
 
-  //  更新子节点属性
-  updateChildren(children, prop, offset) {
-    children.forEach(item => {
-      item[prop] += offset
-      if (item.children && item.children.length && !item.hasCustomPosition()) {
-        // 适配自定义位置
-        this.updateChildren(item.children, prop, offset)
-      }
-    })
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 21:30:54 
+     * @Desc: 创建节点实例 
+     */
+    createNode(data, parent, isRoot, layerIndex) {
+        // 创建节点
+        let newNode = null
+        // 复用节点
+        if (data && data._node && !this.renderer.reRender) {
+            newNode = data._node
+            newNode.reset()
+            newNode.layerIndex = layerIndex
+        } else {// 创建新节点
+            newNode = new Node({
+                data,
+                uid: this.mindMap.uid++,
+                renderer: this.renderer,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                layerIndex
+            })
+            newNode.getSize()
+            // 数据关联实际节点
+            data._node = newNode
+            if (data.data.isActive) {
+                this.renderer.addActiveNode(newNode)
+            }
+        }
+        // 根节点
+        if (isRoot) {
+            newNode.isRoot = true
+            this.root = newNode
+        } else {
+            // 互相收集
+            newNode.parent = parent._node
+            parent._node.addChildren(newNode)
+        }
+        return newNode;
+    }
 
-  //  更新子节点多个属性
-  updateChildrenPro(children, props) {
-    children.forEach(item => {
-      Object.keys(props).forEach((prop) => {
-        item[prop] += props[prop]
-      })
-      if (item.children && item.children.length && !item.hasCustomPosition()) {
-        // 适配自定义位置
-        this.updateChildrenPro(item.children, props)
-      }
-    })
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-16 13:48:43 
+     * @Desc: 定位节点到画布中间 
+     */
+    setNodeCenter(node) {
+        node.left = (this.mindMap.width - node.width) / 2
+        node.top = (this.mindMap.height - node.height) / 2
+    }
 
-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
         })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
     }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
 
-  //  二次贝塞尔曲线
-  quadraticCurvePath(x1, y1, x2, y2) {
-    let cx = x1 + (x2 - x1) * 0.2
-    let cy = y1 + (y2 - y1) * 0.8
-    return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-  }
-
-  //  三次贝塞尔曲线
-  cubicBezierPath(x1, y1, x2, y2) {
-    let cx1 = x1 + (x2 - x1) / 2
-    let cy1 = y1
-    let cx2 = cx1
-    let cy2 = y2
-    return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
-  }
-
-  //   获取节点的marginX
-  getMarginX(layerIndex) {
-    return layerIndex === 1
-      ? this.mindMap.themeConfig.second.marginX
-      : this.mindMap.themeConfig.node.marginX
-  }
-
-  //  获取节点的marginY
-  getMarginY(layerIndex) {
-    return layerIndex === 1
-      ? this.mindMap.themeConfig.second.marginY
-      : this.mindMap.themeConfig.node.marginY
-  }
-
-  //  获取节点包括概要在内的宽度
-  getNodeWidthWithGeneralization(node) {
-    return Math.max(
-      node.width,
-      node.checkHasGeneralization() ? node._generalizationNodeWidth : 0
-    )
-  }
-
-  //  获取节点包括概要在内的高度
-  getNodeHeightWithGeneralization(node) {
-    return Math.max(
-      node.height,
-      node.checkHasGeneralization() ? node._generalizationNodeHeight : 0
-    )
-  }
-
-  //  获取节点的边界值
-  /**
-   * dir：生长方向，h（水平）、v（垂直）
-   * isLeft：是否向左生长
-   */
-  getNodeBoundaries(node, dir) {
-    let { generalizationLineMargin, generalizationNodeMargin } =
-      this.mindMap.themeConfig
-    let walk = root => {
-      let _left = Infinity
-      let _right = -Infinity
-      let _top = Infinity
-      let _bottom = -Infinity
-      if (root.children && root.children.length > 0) {
-        root.children.forEach(child => {
-          let { left, right, top, bottom } = walk(child)
-          // 概要内容的宽度
-          let generalizationWidth =
-            child.checkHasGeneralization() && child.nodeData.data.expand
-              ? child._generalizationNodeWidth + generalizationNodeMargin
-              : 0
-          // 概要内容的高度
-          let generalizationHeight =
-            child.checkHasGeneralization() && child.nodeData.data.expand
-              ? child._generalizationNodeHeight + generalizationNodeMargin
-              : 0
-          if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
-            _left = left - (dir === 'h' ? generalizationWidth : 0)
-          }
-          if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
-            _right = right + (dir === 'h' ? generalizationWidth : 0)
-          }
-          if (top < _top) {
-            _top = top
-          }
-          if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
-            _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
-          }
-        })
-      }
-      let cur = {
-        left: root.left,
-        right: root.left + root.width,
-        top: root.top,
-        bottom: root.top + root.height
-      }
-      return {
-        left: cur.left < _left ? cur.left : _left,
-        right: cur.right > _right ? cur.right : _right,
-        top: cur.top < _top ? cur.top : _top,
-        bottom: cur.bottom > _bottom ? cur.bottom : _bottom
-      }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:05:01 
+     * @Desc: 二次贝塞尔曲线 
+     */
+    quadraticCurvePath(x1, y1, x2, y2) {
+        let cx = x1 + (x2 - x1) * 0.2
+        let cy = y1 + (y2 - y1) * 0.8
+        return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
     }
-    let { left, right, top, bottom } = walk(node)
-    return {
-      left,
-      right,
-      top,
-      bottom,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    }
-  }
 
-  // 获取节点实际存在几个子节点
-  getNodeActChildrenLength(node) {
-    return node.nodeData.children && node.nodeData.children.length
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:05:18 
+     * @Desc: 三次贝塞尔曲线 
+     */
+    cubicBezierPath(x1, y1, x2, y2) {
+        let cx1 = x1 + (x2 - x1) / 2
+        let cy1 = y1
+        let cx2 = cx1
+        let cy2 = y2
+        return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 19:00:07 
+     * @Desc:  获取节点的marginX
+     */
+    getMarginX(layerIndex) {
+        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginX : this.mindMap.themeConfig.node.marginX;
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:34:20 
+     * @Desc: 获取节点的marginY
+     */
+    getMarginY(layerIndex) {
+        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginY : this.mindMap.themeConfig.node.marginY;
+    }
 }
 
-export default Base
+export default Base

simple-mind-map/src/layouts/CatalogOrganization.js

@@ -1,354 +1,315 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
 
-//  目录组织图
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 目录组织图 
+ */
 class CatalogOrganization extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
 
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedLeftTopValue()
+        }, () => {
+            this.adjustLeftTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
 
-  //  遍历数据计算节点的left、width、height
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (cur, parent, isRoot, layerIndex) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          if (parent._node.isRoot) {
-            newNode.top =
-              parent._node.top +
-              parent._node.height +
-              this.getMarginX(layerIndex)
-          }
-        }
-        if (!cur.data.expand) {
-          return true
-        }
-      },
-      (cur, parent, isRoot, layerIndex) => {
-        if (isRoot) {
-          let len = cur.data.expand === false ? 0 : cur._node.children.length
-          cur._node.childrenAreaWidth = len
-            ? cur._node.children.reduce((h, item) => {
-                return h + item.width
-              }, 0) +
-              (len + 1) * this.getMarginX(layerIndex + 1)
-            : 0
-        }
-      },
-      true,
-      0
-    )
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                if (parent._node.isRoot) {
+                    newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
+                }
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            if (isRoot) {
+                let len = cur.data.expand === false ? 0 : cur._node.children.length
+                cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
+                    return h + item.width
+                }, 0) + (len + 1) * this.getMarginX(layerIndex + 1) : 0
+            }
+        }, true, 0)
+    }
 
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (
-          node.nodeData.data.expand &&
-          node.children &&
-          node.children.length
-        ) {
-          let marginX = this.getMarginX(layerIndex + 1)
-          let marginY = this.getMarginY(layerIndex + 1)
-          if (isRoot) {
-            let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
-            let totalLeft = left + marginX
-            node.children.forEach(cur => {
-              cur.left = totalLeft
-              totalLeft += cur.width + marginX
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的left、top
+     */
+    computedLeftTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginX = this.getMarginX(layerIndex + 1)
+                let marginY = this.getMarginY(layerIndex + 1)
+                if (isRoot) {
+                    let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                    let totalLeft = left + marginX
+                    node.children.forEach((cur) => {
+                        cur.left = totalLeft
+                        totalLeft += cur.width + marginX
+                    })
+                } else {
+                    let totalTop = node.top + node.height + marginY + node.expandBtnSize
+                    node.children.forEach((cur) => {
+                        cur.left = node.left + node.width * 0.5
+                        cur.top = totalTop
+                        totalTop += cur.height + marginY + node.expandBtnSize
+                    })
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点left、top
+     */
+    adjustLeftTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 调整left
+            if (parent && parent.isRoot) {
+                let areaWidth = this.getNodeAreaWidth(node)
+                let difference = areaWidth - node.width
+                if (difference > 0) {
+                    this.updateBrothersLeft(node, difference / 2)
+                }
+            }
+            // 调整top
+            let len = node.children.length
+            if (parent && !parent.isRoot && len > 0) {
+                let marginY = this.getMarginY(layerIndex + 1)
+                let totalHeight = node.children.reduce((h, item) => {
+                    return h + item.height
+                }, 0) + (len + 1) * marginY + len * node.expandBtnSize
+                this.updateBrothersTop(node, totalHeight)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:55:03 
+     * @Desc: 递归计算节点的宽度
+     */
+    getNodeAreaWidth(node) {
+        let widthArr = []
+        let loop = (node, width) => {
+            if (node.children.length) {
+                width += node.width / 2
+                node.children.forEach((item) => {
+                    loop(item, width)
+                })
+            } else {
+                width += node.width
+                widthArr.push(width)
+            }
+        }
+        loop(node, 0)
+        return Math.max(...widthArr)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 11:12:51 
+     * @Desc: 调整兄弟节点的left 
+     */
+    updateBrothersLeft(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
             })
-          } else {
-            let totalTop = node.top + node.height + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-            node.children.forEach(cur => {
-              cur.left = node.left + node.width * 0.5
-              cur.top = totalTop
-              totalTop += cur.height + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+            // 第一个或最后一个节点自身也需要移动，否则两边不对称
+            if (index === 0 || index === childrenList.length - 1) {
+                let _offset = index === 0 ? -addWidth : addWidth
+                node.left += _offset
+                if (node.children && node.children.length) {
+                    this.updateChildren(node.children, 'left', _offset)
+                }
+            }
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index < index) { // 左边的节点往左移
+                    _offset = -addWidth
+                } else if (_index > index) { // 右边的节点往右移
+                    _offset = addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
             })
-          }
+            // 更新父节点的位置
+            this.updateBrothersLeft(node.parent, addWidth)
         }
-      },
-      null,
-      true
-    )
-  }
+    }
 
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 调整兄弟节点的top
+     */
+    updateBrothersTop(node, addHeight) {
+        if (node.parent && !node.parent.isRoot) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                // 下面的节点往下移
+                if (_index > index) {
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersTop(node.parent, addHeight)
         }
-        // 调整left
-        if (parent && parent.isRoot) {
-          let areaWidth = this.getNodeAreaWidth(node)
-          let difference = areaWidth - node.width
-          if (difference > 0) {
-            this.updateBrothersLeft(node, difference)
-          }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
         }
-        // 调整top
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
         let len = node.children.length
-        if (parent && !parent.isRoot && len > 0) {
-          let marginY = this.getMarginY(layerIndex + 1)
-          let totalHeight =
-            node.children.reduce((h, item) => {
-              return h + item.height + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            }, 0) +
-            len * marginY
-          this.updateBrothersTop(node, totalHeight)
-        }
-      },
-      (node, parent, isRoot) => {
-        if (isRoot) {
-          let { right, left } = this.getNodeBoundaries(node, 'h')
-          let childrenWidth = right - left
-          let offset = (node.left - left) - (childrenWidth - node.width) / 2
-          this.updateChildren(node.children, 'left', offset)
-        }
-      },
-      true
-    )
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node, addWidth) {
-    if (node.parent) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition() || _index <= index) {
-          // 适配自定义位置
-          return
-        }
-        item.left += addWidth
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'left', addWidth)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersLeft(node.parent, addWidth)
-    }
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersTop(node.parent, addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let len = node.children.length
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    if (node.isRoot) {
-      // 根节点
-      let x1 = left + width / 2
-      let y1 = top + height
-      let s1 = marginX * 0.7
-      let minx = Infinity
-      let maxx = -Infinity
-      node.children.forEach((item, index) => {
-        let x2 = item.left + item.width / 2
-        let y2 = item.top
-        if (x2 < minx) {
-          minx = x2
-        }
-        if (x2 > maxx) {
-          maxx = x2
-        }
-        // 节点使用横线风格，需要额外渲染横线
-        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-          ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
-          : ''
-        let path =
-          `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
-          nodeUseLineStylePath
-        // 竖线
-        lines[index].plot(path)
-        style && style(lines[index], item)
-      })
-      minx = Math.min(minx, x1)
-      maxx = Math.max(maxx, x1)
-      // 父节点的竖线
-      let line1 = this.draw.path()
-      node.style.line(line1)
-      line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
-      node._lines.push(line1)
-      style && style(line1, node)
-      // 水平线
-      if (len > 0) {
-        let lin2 = this.draw.path()
-        node.style.line(lin2)
-        lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-        node._lines.push(lin2)
-        style && style(lin2, node)
-      }
-    } else {
-      // 非根节点
-      let y1 = top + height
-      let maxy = -Infinity
-      let x2 = node.left + node.width * 0.3
-      node.children.forEach((item, index) => {
-        // 为了适配自定义位置，下面做了各种位置的兼容
-        let y2 = item.top + item.height / 2
-        if (y2 > maxy) {
-          maxy = y2
-        }
-        // 水平线
-        let path = ''
-        let _left = item.left
-        let _isLeft = item.left + item.width < x2
-        let _isXCenter = false
-        if (_isLeft) {
-          // 水平位置在父节点左边
-          _left = item.left + item.width
-        } else if (item.left < x2 && item.left + item.width > x2) {
-          // 水平位置在父节点之间
-          _isXCenter = true
-          y2 = item.top
-          maxy = y2
-        }
-        if (y2 > top && y2 < y1) {
-          // 自定义位置的情况：垂直位置节点在父节点之间
-          path = `M ${
-            _isLeft ? node.left : node.left + node.width
-          },${y2} L ${_left},${y2}`
-        } else if (y2 < y1) {
-          // 自定义位置的情况：垂直位置节点在父节点上面
-          if (_isXCenter) {
-            y2 = item.top + item.height
-            _left = x2
-          }
-          path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        if (node.isRoot) {
+            let x1 = left + width / 2
+            let y1 = top + height
+            let s1 = marginX * 0.7
+            let minx = 0
+            let maxx = 0
+            node.children.forEach((item, index) => {
+                let x2 = item.left +item.width / 2
+                let y2 = item.top
+                if (index === 0) {
+                    minx = x2
+                } else if (index >= len - 1) {
+                    maxx = x2
+                }
+                let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+                lines[index].plot(path)
+            })
+            // 父节点的竖线
+            let line1 = this.draw.path()
+            node.style.line(line1)
+            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
+            node._lines.push(line1)
+            // 水平线
+            if (len > 1) {
+                let lin2 = this.draw.path()
+                node.style.line(lin2)
+                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+                node._lines.push(lin2)
+            }
         } else {
-          if (_isXCenter) {
-            _left = x2
-          }
-          path = `M ${x2},${y2} L ${_left},${y2}`
+            let y1 = top + height
+            let maxy = 0
+            let x2 = node.left + node.width * 0.3
+            node.children.forEach((item, index) => {
+                let y2 = item.top + item.height / 2
+                if (index >= len - 1) {
+                    maxy = y2
+                }
+                let path = `M ${x2},${y2} L ${x2 + node.width * 0.2},${y2}`
+                lines[index].plot(path)
+            })
+            // 竖线
+            if (len > 0) {
+                let lin2 = this.draw.path()
+                expandBtnSize = len > 0 ? expandBtnSize : 0
+                node.style.line(lin2)
+                lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+                node._lines.push(lin2)
+            }
         }
-        // 节点使用横线风格，需要额外渲染横线
-        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-          ? ` L ${_left},${y2 - item.height / 2} L ${_left},${
-              y2 + item.height / 2
-            }`
-          : ''
-        path += nodeUseLineStylePath
-        lines[index].plot(path)
-        style && style(lines[index], item)
-      })
-      // 竖线
-      if (len > 0) {
-        let lin2 = this.draw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        node.style.line(lin2)
-        if (maxy < y1 + expandBtnSize) {
-          lin2.hide()
-        } else {
-          lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
-          lin2.show()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize,
+            isRoot
+        } = node
+        if (!isRoot) {
+            let {
+                translateX,
+                translateY
+            } = btn.transform()
+            btn.translate(width * 0.3 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
         }
-        node._lines.push(lin2)
-        style && style(lin2, node)
-      }
     }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      btn.translate(
-        width * 0.3 - expandBtnSize / 2 - translateX,
-        height + expandBtnSize / 2 - translateY
-      )
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
 }
 
-export default CatalogOrganization
+export default CatalogOrganization

simple-mind-map/src/layouts/Fishbone.js

@@ -1,378 +0,0 @@
-import Base from './Base'
-import { walk, asyncRun, degToRad } from '../utils'
-import { CONSTANTS } from '../utils/constant'
-import utils from './fishboneUtils'
-
-//  鱼骨图
-class Fishbone extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-    this.indent = 0.3
-    this.childIndent = 0.5
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级方向为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
-          }
-          // 计算二级节点的top值
-          if (parent._node.isRoot) {
-            if (this.checkIsTop(newNode)) {
-              newNode.top = parent._node.top - newNode.height
-            } else {
-              newNode.top = parent._node.top + parent._node.height
-            }
-          }
-        }
-        if (!node.data.expand) {
-          return true
-        }
-      },
-      null,
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (node.isRoot) {
-          let topTotalLeft = node.left + node.width + node.height
-          let bottomTotalLeft = node.left + node.width + node.height
-          node.children.forEach(item => {
-            if (this.checkIsTop(item)) {
-              item.left = topTotalLeft
-              topTotalLeft += item.width
-            } else {
-              item.left = bottomTotalLeft + 20
-              bottomTotalLeft += item.width
-            }
-          })
-        }
-        let params = { layerIndex, node, ctx: this }
-        if (this.checkIsTop(node)) {
-          utils.top.computedLeftTopValue(params)
-        } else {
-          utils.bottom.computedLeftTopValue(params)
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        let params = { node, parent, layerIndex, ctx: this }
-        if (this.checkIsTop(node)) {
-          utils.top.adjustLeftTopValueBefore(params)
-        } else {
-          utils.bottom.adjustLeftTopValueBefore(params)
-        }
-      },
-      (node, parent) => {
-        let params = { parent, node, ctx: this }
-        if (this.checkIsTop(node)) {
-          utils.top.adjustLeftTopValueAfter(params)
-        } else {
-          utils.bottom.adjustLeftTopValueAfter(params)
-        }
-        // 调整二级节点的子节点的left值
-        if (node.isRoot) {
-          let topTotalLeft = 0
-          let bottomTotalLeft = 0
-          node.children.forEach(item => {
-            if (this.checkIsTop(item)) {
-              item.left += topTotalLeft
-              this.updateChildren(item.children, 'left', topTotalLeft)
-              let { left, right } = this.getNodeBoundaries(item, 'h')
-              topTotalLeft += right - left
-            } else {
-              item.left += bottomTotalLeft
-              this.updateChildren(item.children, 'left', bottomTotalLeft)
-              let { left, right } = this.getNodeBoundaries(item, 'h')
-              bottomTotalLeft += right - left
-            }
-          })
-        }
-      },
-      true
-    )
-  }
-
-  //  递归计算节点的宽度
-  getNodeAreaHeight(node) {
-    let totalHeight = 0
-    let loop = node => {
-      totalHeight +=
-        node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-      if (node.children.length) {
-        node.children.forEach(item => {
-          loop(item)
-        })
-      }
-    }
-    loop(node)
-    return totalHeight
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node) {
-    let childrenList = node.children
-    let totalAddWidth = 0
-    childrenList.forEach(item => {
-      item.left += totalAddWidth
-      if (item.children && item.children.length) {
-        this.updateChildren(item.children, 'left', totalAddWidth)
-      }
-      let { left, right } = this.getNodeBoundaries(item, 'h')
-      let areaWidth = right - left
-      let difference = areaWidth - item.width
-      if (difference > 0) {
-        totalAddWidth += difference
-      }
-    })
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      if (this.checkIsTop(node)) {
-        this.updateBrothersTop(node.parent, addHeight)
-      } else {
-        this.updateBrothersTop(
-          node.parent,
-          node.layerIndex === 3 ? 0 : addHeight
-        )
-      }
-    }
-  }
-
-  // 检查节点是否是上方节点
-  checkIsTop(node) {
-    return node.dir === CONSTANTS.TIMELINE_DIR.TOP
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.layerIndex !== 1 && node.children.length <= 0) {
-      return []
-    }
-    let { top, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let len = node.children.length
-    if (node.isRoot) {
-      // 当前节点是根节点
-      // 根节点的子节点是和根节点同一水平线排列
-      let maxx = -Infinity
-      node.children.forEach((item) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        // 水平线段到二级节点的连线
-        let nodeLineX = item.left
-        let offset = node.height / 2
-        let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-        let line = this.draw.path()
-        if (this.checkIsTop(item)) {
-          line.plot(
-            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
-              item.top + item.height
-            }`
-          )
-        } else {
-          line.plot(
-            `M ${nodeLineX - offsetX},${
-              item.top - offset
-            } L ${nodeLineX},${item.top}`
-          )
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      })
-      // 从根节点出发的水平线
-      let nodeHalfTop = node.top + node.height / 2
-      let offset = node.height / 2
-      let line = this.draw.path()
-      line.plot(
-        `M ${node.left + node.width},${nodeHalfTop} L ${
-          maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-        },${nodeHalfTop}`
-      )
-      node.style.line(line)
-      node._lines.push(line)
-      style && style(line, node)
-    } else {
-      // 当前节点为非根节点
-      let maxy = -Infinity
-      let miny = Infinity
-      let maxx = -Infinity
-      let x = node.left + node.width * this.indent
-      node.children.forEach((item, index) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        let y = item.top + item.height / 2
-        if (y > maxy) {
-          maxy = y
-        }
-        if (y < miny) {
-          miny = y
-        }
-        // 水平线
-        if (node.layerIndex > 1) {
-          let path = `M ${x},${y} L ${item.left},${y}`
-          lines[index].plot(path)
-          style && style(lines[index], item)
-        }
-      })
-      // 斜线
-      if (len >= 0) {
-        let line = this.draw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        let lineLength = maxx - node.left - node.width * this.indent
-        lineLength = Math.max(lineLength, 0)
-        let params = {
-          node,
-          line,
-          top,
-          x,
-          lineLength,
-          height,
-          expandBtnSize,
-          maxy,
-          miny,
-          ctx: this
-        }
-        if (this.checkIsTop(node)) {
-          utils.top.renderLine(params)
-        } else {
-          utils.bottom.renderLine(params)
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      }
-    }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      let params = {
-        node,
-        btn,
-        expandBtnSize,
-        translateX,
-        translateY,
-        width,
-        height
-      }
-      if (this.checkIsTop(node)) {
-        utils.top.renderExpandBtn(params)
-      } else {
-        utils.bottom.renderExpandBtn(params)
-      }
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
-}
-
-export default Fishbone

simple-mind-map/src/layouts/FishboneBottom.js

@@ -1,369 +0,0 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-import { CONSTANTS } from '../utils/constant'
-
-const degToRad = deg => {
-  return (Math.PI / 180) * deg
-}
-
-//  下方鱼骨图
-class Fishbone extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级方向为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
-          }
-          // 计算二级节点的top值
-          if (parent._node.isRoot) {
-            newNode.top = parent._node.top + parent._node.height
-          }
-        }
-        if (!node.data.expand) {
-          return true
-        }
-      },
-      null,
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        if (node.isRoot) {
-          let totalLeft = node.left + node.width
-          node.children.forEach(item => {
-            item.left = totalLeft
-            totalLeft += item.width
-          })
-        }
-        if (layerIndex === 1 && node.children) {
-          // 遍历二级节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top +
-            node.height +
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top =
-              totalTop +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            totalTop +=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-        if (layerIndex > 1 && node.children) {
-          // 遍历三级及以下节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top -
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top = totalTop - item.height
-            totalTop -=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 调整top
-        let len = node.children.length
-        // 调整三级节点的top
-        // if (layerIndex === 2 && len > 0) {
-        //   let totalHeight = node.children.reduce((h, item) => {
-        //     return h + item.height
-        //   }, 0)
-        //   this.updateBrothersTop(node, totalHeight)
-        // }
-        if (layerIndex > 2 && len > 0) {
-          let totalHeight = node.children.reduce((h, item) => {
-            return (
-              h +
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            )
-          }, 0)
-          this.updateBrothersTop(node, -totalHeight)
-        }
-      },
-      (node, parent) => {
-        // 将二级节点的子节点移到上方
-        if (parent && parent.isRoot) {
-          // 遍历二级节点的子节点
-          let totalHeight = 0
-          let totalHeight2 = 0
-          node.children.forEach(item => {
-            // 调整top
-            let hasChildren = this.getNodeActChildrenLength(item) > 0
-            let nodeTotalHeight = this.getNodeAreaHeight(item)
-            let offset =
-              hasChildren > 0
-                ? nodeTotalHeight -
-                  item.height -
-                  (hasChildren ? item.expandBtnSize : 0)
-                : 0
-            let _top = totalHeight + offset
-            item.top += _top
-            // 调整left
-            let offsetLeft =
-              (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-            item.left += offsetLeft
-            totalHeight += offset
-            totalHeight2 += nodeTotalHeight
-            // 同步更新后代节点
-            this.updateChildrenPro(item.children, {
-              top: _top,
-              left: offsetLeft
-            })
-          })
-        }
-        // 调整二级节点的子节点的left值
-        if (node.isRoot) {
-          let totalLeft = 0
-          node.children.forEach(item => {
-            item.left += totalLeft
-            this.updateChildren(item.children, 'left', totalLeft)
-            let { left, right } = this.getNodeBoundaries(item, 'h')
-            totalLeft += right - left
-          })
-        }
-      },
-      true
-    )
-  }
-
-  //  递归计算节点的宽度
-  getNodeAreaHeight(node) {
-    let totalHeight = 0
-    let loop = node => {
-      totalHeight +=
-        node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-      if (node.children.length) {
-        node.children.forEach(item => {
-          loop(item)
-        })
-      }
-    }
-    loop(node)
-    return totalHeight
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node) {
-    let childrenList = node.children
-    let totalAddWidth = 0
-    childrenList.forEach(item => {
-      item.left += totalAddWidth
-      if (item.children && item.children.length) {
-        this.updateChildren(item.children, 'left', totalAddWidth)
-      }
-      // let areaWidth = this.getNodeAreaWidth(item)
-      let { left, right } = this.getNodeBoundaries(item, 'h')
-      let areaWidth = right - left
-      let difference = areaWidth - item.width
-      if (difference > 0) {
-        totalAddWidth += difference
-      }
-    })
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersTop(node.parent, node.layerIndex === 3 ? 0 : addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    let len = node.children.length
-    if (node.isRoot) {
-      // 当前节点是根节点
-      let prevBother = node
-      // 根节点的子节点是和根节点同一水平线排列
-      node.children.forEach((item, index) => {
-        let x1 = prevBother.left + prevBother.width
-        let x2 = item.left
-        let y = node.top + node.height / 2
-        let path = `M ${x1},${y} L ${x2},${y}`
-        lines[index].plot(path)
-        style && style(lines[index], item)
-        prevBother = item
-      })
-    } else {
-      // 当前节点为非根节点
-      let maxy = -Infinity
-      let miny = Infinity
-      let maxx = -Infinity
-      let x = node.left + node.width * 0.3
-      node.children.forEach((item, index) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        let y = item.top + item.height / 2
-        if (y > maxy) {
-          maxy = y
-        }
-        if (y < miny) {
-          miny = y
-        }
-        // 水平线
-        if (node.layerIndex > 1) {
-          let path = `M ${x},${y} L ${item.left},${y}`
-          lines[index].plot(path)
-          style && style(lines[index], item)
-        }
-      })
-      // 竖线
-      if (len > 0) {
-        let line = this.draw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        let lineLength = maxx - node.left - node.width * 0.3
-        if (node.parent && node.parent.isRoot) {
-          line.plot(
-            `M ${x},${top + height} L ${x + lineLength},${
-              top + height + Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-            }`
-          )
-        } else {
-          line.plot(`M ${x},${top} L ${x},${miny}`)
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      }
-    }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      if (node.parent && node.parent.isRoot) {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          height + expandBtnSize / 2 - translateY
-        )
-      } else {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          -expandBtnSize / 2 - translateY
-        )
-      }
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
-}
-
-export default Fishbone

simple-mind-map/src/layouts/FishboneTop.js

@@ -1,350 +0,0 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-import { CONSTANTS } from '../utils/constant'
-
-const degToRad = deg => {
-  return (Math.PI / 180) * deg
-}
-
-//  上方鱼骨图
-class Fishbone extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级方向为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
-          }
-          // 计算二级节点的top值
-          if (parent._node.isRoot) {
-            newNode.top = parent._node.top - newNode.height
-          }
-        }
-        if (!node.data.expand) {
-          return true
-        }
-      },
-      null,
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        if (node.isRoot) {
-          let totalLeft = node.left + node.width
-          node.children.forEach(item => {
-            item.left = totalLeft
-            totalLeft += item.width
-          })
-        }
-        if (layerIndex >= 1 && node.children) {
-          // 遍历三级及以下节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top +
-            node.height +
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top += totalTop
-            totalTop +=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 调整top
-        let len = node.children.length
-        // 调整三级及以下节点的top
-        if (parent && !parent.isRoot && len > 0) {
-          let totalHeight = node.children.reduce((h, item) => {
-            return (
-              h +
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            )
-          }, 0)
-          this.updateBrothersTop(node, totalHeight)
-        }
-      },
-      (node, parent) => {
-        // 将二级节点的子节点移到上方
-        if (parent && parent.isRoot) {
-          // 遍历二级节点的子节点
-          let totalHeight = 0
-          node.children.forEach(item => {
-            // 调整top
-            let nodeTotalHeight = this.getNodeAreaHeight(item)
-            let _top = item.top
-            item.top =
-              node.top - (item.top - node.top) - nodeTotalHeight + node.height
-            // 调整left
-            let offsetLeft =
-              (nodeTotalHeight + totalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-            item.left += offsetLeft
-            totalHeight += nodeTotalHeight
-            // 同步更新后代节点
-            this.updateChildrenPro(item.children, {
-              top: item.top - _top,
-              left: offsetLeft
-            })
-          })
-        }
-        // 调整二级节点的子节点的left值
-        if (node.isRoot) {
-          let totalLeft = 0
-          node.children.forEach(item => {
-            item.left += totalLeft
-            this.updateChildren(item.children, 'left', totalLeft)
-            let { left, right } = this.getNodeBoundaries(item, 'h')
-            totalLeft += right - left
-          })
-        }
-      },
-      true
-    )
-  }
-
-  //  递归计算节点的宽度
-  getNodeAreaHeight(node) {
-    let totalHeight = 0
-    let loop = node => {
-      totalHeight +=
-        node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-      if (node.children.length) {
-        node.children.forEach(item => {
-          loop(item)
-        })
-      }
-    }
-    loop(node)
-    return totalHeight
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node) {
-    let childrenList = node.children
-    let totalAddWidth = 0
-    childrenList.forEach(item => {
-      item.left += totalAddWidth
-      if (item.children && item.children.length) {
-        this.updateChildren(item.children, 'left', totalAddWidth)
-      }
-      // let areaWidth = this.getNodeAreaWidth(item)
-      let { left, right } = this.getNodeBoundaries(item, 'h')
-      let areaWidth = right - left
-      let difference = areaWidth - item.width
-      if (difference > 0) {
-        totalAddWidth += difference
-      }
-    })
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersTop(node.parent, addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    let len = node.children.length
-    if (node.isRoot) {
-      // 当前节点是根节点
-      let prevBother = node
-      // 根节点的子节点是和根节点同一水平线排列
-      node.children.forEach((item, index) => {
-        let x1 = prevBother.left + prevBother.width
-        let x2 = item.left
-        let y = node.top + node.height / 2
-        let path = `M ${x1},${y} L ${x2},${y}`
-        lines[index].plot(path)
-        style && style(lines[index], item)
-        prevBother = item
-      })
-    } else {
-      // 当前节点为非根节点
-      let maxy = -Infinity
-      let miny = Infinity
-      let maxx = -Infinity
-      let x = node.left + node.width * 0.3
-      node.children.forEach((item, index) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        let y = item.top + item.height / 2
-        if (y > maxy) {
-          maxy = y
-        }
-        if (y < miny) {
-          miny = y
-        }
-        // 水平线
-        if (node.layerIndex > 1) {
-          let path = `M ${x},${y} L ${item.left},${y}`
-          lines[index].plot(path)
-          style && style(lines[index], item)
-        }
-      })
-      // 竖线
-      if (len > 0) {
-        let line = this.draw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        let lineLength = maxx - node.left - node.width * 0.3
-        if (
-          node.parent &&
-          node.parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
-        ) {
-          line.plot(
-            `M ${x},${top} L ${x + lineLength},${
-              top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-            }`
-          )
-        } else {
-          if (node.parent && node.parent.isRoot) {
-            line.plot(
-              `M ${x},${top} L ${x + lineLength},${
-                top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-              }`
-            )
-          } else {
-            line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
-          }
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      }
-    }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      if (node.parent && node.parent.isRoot) {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          -expandBtnSize / 2 - translateY
-        )
-      } else {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          height + expandBtnSize / 2 - translateY
-        )
-      }
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
-}
-
-export default Fishbone

simple-mind-map/src/layouts/LogicalStructure.js

@@ -1,291 +1,193 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
 
-//  逻辑结构图
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 逻辑结构图 
+ */
 class LogicalStructure extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
 
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedTopValue()
-      },
-      () => {
-        this.adjustTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedTopValue()
+        }, () => {
+            this.adjustTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
 
-  //  遍历数据计算节点的left、width、height
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (cur, parent, isRoot, layerIndex) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 定位到父节点右侧
-          newNode.left =
-            parent._node.left + parent._node.width + this.getMarginX(layerIndex)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                // 定位到父节点右侧
+                newNode.left = parent._node.left + parent._node.width + this.getMarginX(layerIndex)
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+            let len = cur.data.expand === false ? 0 : cur._node.children.length
+            cur._node.childrenAreaHeight = len ? cur._node.children.reduce((h, item) => {
+                return h + item.height
+            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
+        }, true, 0)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的top 
+     */
+    computedTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginY = this.getMarginY(layerIndex + 1)
+                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+                let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
+                let totalTop = top + marginY
+                node.children.forEach((cur) => {
+                    cur.top = totalTop
+                    totalTop += cur.height + marginY
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top 
+     */
+    adjustTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+            let difference = node.childrenAreaHeight - this.getMarginY(layerIndex + 1) * 2 - node.height
+            if (difference > 0) {
+                this.updateBrothers(node, difference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothers(node, addHeight) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                if (item === node) {
+                    return
+                }
+                let _offset = 0
+                // 上面的节点往上移
+                if (_index < index) {
+                    _offset = -addHeight
+                } else if (_index > index) { // 下面的节点往下移
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, addHeight)
         }
-        if (!cur.data.expand) {
-          return true
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
         }
-      },
-      (cur, parent, isRoot, layerIndex) => {
-        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
-        let len = cur.data.expand === false ? 0 : cur._node.children.length
-        cur._node.childrenAreaHeight = len
-          ? cur._node.children.reduce((h, item) => {
-              return h + item.height
-            }, 0) +
-            (len + 1) * this.getMarginY(layerIndex + 1)
-          : 0
-      },
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的top
-  computedTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (
-          node.nodeData.data.expand &&
-          node.children &&
-          node.children.length
-        ) {
-          let marginY = this.getMarginY(layerIndex + 1)
-          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-          let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
-          let totalTop = top + marginY
-          node.children.forEach(cur => {
-            cur.top = totalTop
-            totalTop += cur.height + marginY
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点top
-  adjustTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-        let difference =
-          node.childrenAreaHeight -
-          this.getMarginY(layerIndex + 1) * 2 -
-          node.height
-        if (difference > 0) {
-          this.updateBrothers(node, difference / 2)
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  更新兄弟节点的top
-  updateBrothers(node, addHeight) {
-    if (node.parent) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item === node || item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 上面的节点往上移
-        if (_index < index) {
-          _offset = -addHeight
-        } else if (_index > index) {
-          // 下面的节点往下移
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothers(node.parent, addHeight)
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = ''
+            if (node.isRoot) {
+                path = this.quadraticCurvePath(x1, y1, x2, y2)
+            } else {
+                path = this.cubicBezierPath(x1, y1, x2, y2)
+            }
+            lines[index].plot(path)
+        })
     }
-  }
 
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style, lineStyle) {
-    if (lineStyle === 'curve') {
-      this.renderLineCurve(node, lines, style)
-    } else if (lineStyle === 'direct') {
-      this.renderLineDirect(node, lines, style)
-    } else {
-      this.renderLineStraight(node, lines, style)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height
+        } = node
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        btn.translate(width - translateX, height / 2 - translateY)
     }
-  }
-
-  //  直线风格连线
-  renderLineStraight(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    let s1 = (marginX - expandBtnSize) * 0.6
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
-        x2 + nodeUseLineStyleOffset
-      },${y2}`
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  直连风格
-  renderLineDirect(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = nodeUseLineStyle
-        ? ` L ${item.left + item.width},${y2}`
-        : ''
-      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  曲线风格连线
-  renderLineCurve(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.left
-      let y2 = item.top + item.height / 2
-      let path = ''
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = nodeUseLineStyle
-        ? ` L ${item.left + item.width},${y2}`
-        : ''
-      if (node.isRoot) {
-        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
-      } else {
-        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
-      }
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height } = node
-    let { translateX, translateY } = btn.transform()
-    // 节点使用横线风格，需要调整展开收起按钮位置
-    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
-      ? height / 2
-      : 0
-    // 位置没有变化则返回
-    let _x = width
-    let _y = height / 2 + nodeUseLineStyleOffset
-    if (_x === translateX && _y === translateY) {
-      return
-    }
-    btn.translate(
-      _x - translateX,
-      _y - translateY
-    )
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
 }
 
-export default LogicalStructure
+export default LogicalStructure

simple-mind-map/src/layouts/MindMap.js

@@ -1,363 +1,229 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
 
-//  思维导图
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 思维导图 
+ * 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
+ */
 class MindMap extends Base {
-  //  构造函数
-  // 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
-  constructor(opt = {}) {
-    super(opt)
-  }
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
 
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedTopValue()
-      },
-      () => {
-        this.adjustTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedTopValue()
+        }, () => {
+            this.adjustTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
 
-  //  遍历数据计算节点的left、width、height
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (cur, parent, isRoot, layerIndex, index) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir = index % 2 === 0 ? 'right' : 'left'
-          }
-          // 根据生长方向定位到父节点的左侧或右侧
-          newNode.left =
-            newNode.dir === 'right'
-              ? parent._node.left +
-                parent._node.width +
-                this.getMarginX(layerIndex)
-              : parent._node.left - this.getMarginX(layerIndex) - newNode.width
-        }
-        if (!cur.data.expand) {
-          return true
-        }
-      },
-      (cur, parent, isRoot, layerIndex) => {
-        // 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
-        if (!cur.data.expand) {
-          cur._node.leftChildrenAreaHeight = 0
-          cur._node.rightChildrenAreaHeight = 0
-          return
-        }
-        // 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
-        let leftLen = 0
-        let rightLen = 0
-        let leftChildrenAreaHeight = 0
-        let rightChildrenAreaHeight = 0
-        cur._node.children.forEach(item => {
-          if (item.dir === 'left') {
-            leftLen++
-            leftChildrenAreaHeight += item.height
-          } else {
-            rightLen++
-            rightChildrenAreaHeight += item.height
-          }
-        })
-        cur._node.leftChildrenAreaHeight =
-          leftChildrenAreaHeight +
-          (leftLen + 1) * this.getMarginY(layerIndex + 1)
-        cur._node.rightChildrenAreaHeight =
-          rightChildrenAreaHeight +
-          (rightLen + 1) * this.getMarginY(layerIndex + 1)
-      },
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的top
-  computedTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (
-          node.nodeData.data.expand &&
-          node.children &&
-          node.children.length
-        ) {
-          let marginY = this.getMarginY(layerIndex + 1)
-          let baseTop = node.top + node.height / 2 + marginY
-          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-          let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
-          let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
-          node.children.forEach(cur => {
-            if (cur.dir === 'left') {
-              cur.top = leftTotalTop
-              leftTotalTop += cur.height + marginY
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex, index) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
             } else {
-              cur.top = rightTotalTop
-              rightTotalTop += cur.height + marginY
+                // 非根节点
+                // 三级及以下节点以上级为准
+                if (parent._node.dir) {
+                    newNode.dir = parent._node.dir
+                } else { // 节点生长方向
+                    newNode.dir = index % 2 === 0 ? 'right' : 'left'
+                }
+                // 根据生长方向定位到父节点的左侧或右侧
+                newNode.left = newNode.dir === 'right' ? parent._node.left + parent._node.width + this.getMarginX(layerIndex) : parent._node.left - this.getMarginX(layerIndex) - newNode.width
             }
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            // 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
+            if (!cur.data.expand) {
+                cur._node.leftChildrenAreaHeight = 0
+                cur._node.rightChildrenAreaHeight = 0
+                return
+            }
+            // 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
+            let leftLen = 0
+            let rightLen = 0
+            let leftChildrenAreaHeight = 0
+            let rightChildrenAreaHeight = 0
+            cur._node.children.forEach((item) => {
+                if (item.dir === 'left') {
+                    leftLen++
+                    leftChildrenAreaHeight += item.height
+                } else {
+                    rightLen++
+                    rightChildrenAreaHeight += item.height
+                }
+            })
+            cur._node.leftChildrenAreaHeight = leftChildrenAreaHeight + (leftLen + 1) * this.getMarginY(layerIndex + 1)
+            cur._node.rightChildrenAreaHeight = rightChildrenAreaHeight + (rightLen + 1) * this.getMarginY(layerIndex + 1)
+        }, true, 0)
+    }
 
-  //  调整节点top
-  adjustTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-        let base = this.getMarginY(layerIndex + 1) * 2 + node.height
-        let leftDifference = node.leftChildrenAreaHeight - base
-        let rightDifference = node.rightChildrenAreaHeight - base
-        if (leftDifference > 0 || rightDifference > 0) {
-          this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
-        }
-      },
-      null,
-      true
-    )
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的top 
+     */
+    computedTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginY = this.getMarginY(layerIndex + 1)
+                let baseTop = node.top + node.height / 2 + marginY
+                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+                let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
+                let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
+                node.children.forEach((cur) => {
+                    if (cur.dir === 'left') {
+                        cur.top = leftTotalTop
+                        leftTotalTop += cur.height + marginY
+                    } else {
+                        cur.top = rightTotalTop
+                        rightTotalTop += cur.height + marginY
+                    }
+                })
+            }
+        }, null, true)
+    }
 
-  //  更新兄弟节点的top
-  updateBrothers(node, leftAddHeight, rightAddHeight) {
-    if (node.parent) {
-      // 过滤出和自己同方向的节点
-      let childrenList = node.parent.children.filter(item => {
-        return item.dir === node.dir
-      })
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top 
+     */
+    adjustTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+            let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+            let leftDifference = node.leftChildrenAreaHeight - base
+            let rightDifference = node.rightChildrenAreaHeight - base
+            if (leftDifference > 0 || rightDifference > 0) {
+                this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothers(node, leftAddHeight, rightAddHeight) {
+        if (node.parent) {
+            // 过滤出和自己同方向的节点
+            let childrenList = node.parent.children.filter((item) => {
+                return item.dir === node.dir
+            })
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+                // 上面的节点往上移
+                if (_index < index) {
+                    _offset = -addHeight
+                } else if (_index > index) { // 下面的节点往下移
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
         }
-        let _offset = 0
-        let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
-        // 上面的节点往上移
-        if (_index < index) {
-          _offset = -addHeight
-        } else if (_index > index) {
-          // 下面的节点往下移
-          _offset = addHeight
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
         }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + 20
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = ''
+            if (node.isRoot) {
+                path = this.quadraticCurvePath(x1, y1, x2, y2)
+            } else {
+                path = this.cubicBezierPath(x1, y1, x2, y2)
+            }
+            lines[index].plot(path)
+        })
     }
-  }
 
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style, lineStyle) {
-    if (lineStyle === 'curve') {
-      this.renderLineCurve(node, lines, style)
-    } else if (lineStyle === 'direct') {
-      this.renderLineDirect(node, lines, style)
-    } else {
-      this.renderLineStraight(node, lines, style)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
+        let y = height / 2 - translateY
+        btn.translate(x, y)
     }
-  }
-
-  //  直线风格连线
-  renderLineStraight(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    let s1 = (marginX - expandBtnSize) * 0.6
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 = 0
-      let _s = 0
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
-      if (item.dir === 'left') {
-        _s = -s1
-        x1 = node.layerIndex === 0 ? left : left - expandBtnSize
-        nodeUseLineStyleOffset = -nodeUseLineStyleOffset
-      } else {
-        _s = s1
-        x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
-      }
-      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
-      let y2 = item.top + item.height / 2
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
-        x2 + nodeUseLineStyleOffset
-      },${y2}`
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  直连风格
-  renderLineDirect(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0
-          ? left + width / 2
-          : item.dir === 'left'
-          ? left - expandBtnSize
-          : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
-      let y2 = item.top + item.height / 2
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = ''
-      if (nodeUseLineStyle) {
-        if (item.dir === 'left') {
-          nodeUseLineStylePath = ` L ${item.left},${y2}`
-        } else {
-          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
-        }
-      }
-      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  曲线风格连线
-  renderLineCurve(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
-    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0
-          ? left + width / 2
-          : item.dir === 'left'
-          ? left - expandBtnSize
-          : left + width + expandBtnSize
-      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
-      let y2 = item.top + item.height / 2
-      let path = ''
-      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
-      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = ''
-      if (this.mindMap.themeConfig.nodeUseLineStyle) {
-        if (item.dir === 'left') {
-          nodeUseLineStylePath = ` L ${item.left},${y2}`
-        } else {
-          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
-        }
-      }
-      if (node.isRoot) {
-        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
-      } else {
-        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
-      }
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize } = node
-    let { translateX, translateY } = btn.transform()
-    // 节点使用横线风格，需要调整展开收起按钮位置
-    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
-      ? height / 2
-      : 0
-    // 位置没有变化则返回
-    let _x = (node.dir === 'left' ? 0 - expandBtnSize : width)
-    let _y = height / 2 + nodeUseLineStyleOffset
-    if (_x === translateX && _y === translateY) {
-      return
-    }
-    let x = _x - translateX
-    let y = _y - translateY
-    btn.translate(x, y)
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let isLeft = node.dir === 'left'
-    let {
-      top,
-      bottom,
-      left,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h', isLeft)
-    let x = isLeft
-      ? left - generalizationLineMargin
-      : right + generalizationLineMargin
-    let x1 = x
-    let y1 = top
-    let x2 = x
-    let y2 = bottom
-    let cx = x1 + (isLeft ? -20 : 20)
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left =
-      x +
-      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
-      (isLeft ? gNode.width : 0)
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
 }
 
-export default MindMap
+export default MindMap

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -1,260 +1,211 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
 
-//  组织结构图
-// 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 组织结构图
+ * 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
+ */
 class OrganizationStructure extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftValue()
-      },
-      () => {
-        this.adjustLeftValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据计算节点的left、width、height
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (cur, parent, isRoot, layerIndex) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 定位到父节点下方
-          newNode.top =
-            parent._node.top + parent._node.height + this.getMarginX(layerIndex)
-        }
-        if (!cur.data.expand) {
-          return true
-        }
-      },
-      (cur, parent, isRoot, layerIndex) => {
-        // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
-        let len = cur.data.expand === false ? 0 : cur._node.children.length
-        cur._node.childrenAreaWidth = len
-          ? cur._node.children.reduce((h, item) => {
-              return h + item.width
-            }, 0) +
-            (len + 1) * this.getMarginY(layerIndex + 1)
-          : 0
-      },
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left
-  computedLeftValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (
-          node.nodeData.data.expand &&
-          node.children &&
-          node.children.length
-        ) {
-          let marginX = this.getMarginY(layerIndex + 1)
-          // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
-          let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
-          let totalLeft = left + marginX
-          node.children.forEach(cur => {
-            cur.left = totalLeft
-            totalLeft += cur.width + marginX
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left
-  adjustLeftValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
-          return
-        }
-        // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
-        let difference =
-          node.childrenAreaWidth -
-          this.getMarginY(layerIndex + 1) * 2 -
-          node.width
-        if (difference > 0) {
-          this.updateBrothers(node, difference / 2)
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  更新兄弟节点的left
-  updateBrothers(node, addWidth) {
-    if (node.parent) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 上面的节点往上移
-        if (_index < index) {
-          _offset = -addWidth
-        } else if (_index > index) {
-          // 下面的节点往下移
-          _offset = addWidth
-        }
-        item.left += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'left', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothers(node.parent, addWidth)
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
     }
-  }
 
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style, lineStyle) {
-    if (lineStyle === 'direct') {
-      this.renderLineDirect(node, lines, style)
-    } else {
-      this.renderLineStraight(node, lines, style)
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedLeftValue()
+        }, () => {
+            this.adjustLeftValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
     }
-  }
 
-  //  直连风格
-  renderLineDirect(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                // 定位到父节点下方
+                newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
+            let len = cur.data.expand === false ? 0 : cur._node.children.length
+            cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
+                return h + item.width
+            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
+        }, true, 0)
     }
-    let { left, top, width, height } = node
-    let x1 = left + width / 2
-    let y1 = top + height
-    node.children.forEach((item, index) => {
-      let x2 = item.left + item.width / 2
-      let y2 = item.top
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
-        : ''
-      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-  }
 
-  //  直线风格连线
-  renderLineStraight(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的left
+     */
+    computedLeftValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginX = this.getMarginY(layerIndex + 1)
+                // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
+                let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                let totalLeft = left + marginX
+                node.children.forEach((cur) => {
+                    cur.left = totalLeft
+                    totalLeft += cur.width + marginX
+                })
+            }
+        }, null, true)
     }
-    let { left, top, width, height, expandBtnSize, isRoot } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      expandBtnSize = 0
-    }
-    let x1 = left + width / 2
-    let y1 = top + height
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    let s1 = marginX * 0.7
-    let minx = Infinity
-    let maxx = -Infinity
-    let len = node.children.length
-    node.children.forEach((item, index) => {
-      let x2 = item.left + item.width / 2
-      let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
-      if (x2 < minx) {
-        minx = x2
-      }
-      if (x2 > maxx) {
-        maxx = x2
-      }
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
-        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
-        : ''
-      let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
-      lines[index].plot(path)
-      style && style(lines[index], item)
-    })
-    minx = Math.min(x1, minx)
-    maxx = Math.max(x1, maxx)
-    // 父节点的竖线
-    let line1 = this.draw.path()
-    node.style.line(line1)
-    expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
-    line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
-    node._lines.push(line1)
-    style && style(line1, node)
-    // 水平线
-    if (len > 0) {
-      let lin2 = this.draw.path()
-      node.style.line(lin2)
-      lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-      node._lines.push(lin2)
-      style && style(lin2, node)
-    }
-  }
 
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize } = node
-    let { translateX, translateY } = btn.transform()
-    btn.translate(
-      width / 2 - expandBtnSize / 2 - translateX,
-      height + expandBtnSize / 2 - translateY
-    )
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点left
+     */
+    adjustLeftValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
+            let difference = node.childrenAreaWidth - this.getMarginY(layerIndex + 1) * 2 - node.width
+            if (difference > 0) {
+                this.updateBrothers(node, difference / 2)
+            }
+        }, null, true)
+    }
 
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      bottom,
-      left,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'v')
-    let x1 = left
-    let y1 = bottom + generalizationLineMargin
-    let x2 = right
-    let y2 = bottom + generalizationLineMargin
-    let cx = x1 + (x2 - x1) / 2
-    let cy = y1 + 20
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.top = bottom + generalizationNodeMargin
-    gNode.left = left + (right - left - gNode.width) / 2
-  }
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的left
+     */
+    updateBrothers(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                // 上面的节点往上移
+                if (_index < index) {
+                    _offset = -addWidth
+                } else if (_index > index) { // 下面的节点往下移
+                    _offset = addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize,
+            isRoot
+        } = node
+        let x1 = left + width / 2
+        let y1 = top + height
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = marginX * 0.7
+        let minx = 0
+        let maxx = 0
+        let len = node.children.length
+        node.children.forEach((item, index) => {
+            let x2 = item.left + item.width / 2
+            let y2 = item.top
+            if (index === 0) {
+                minx = x2
+            } else if (index >= len - 1) {
+                maxx = x2
+            }
+            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+            lines[index].plot(path)
+        })
+        // 父节点的竖线
+        let line1 = this.draw.path()
+        node.style.line(line1)
+        expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
+        line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
+        node._lines.push(line1)
+        // 水平线
+        if (len > 1) {
+            let lin2 = this.draw.path()
+            node.style.line(lin2)
+            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+            node._lines.push(lin2)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        btn.translate(width / 2 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
+    }
 }
 
-export default OrganizationStructure
+export default OrganizationStructure