打包0.8.0-fix.1

feat: 修改tag颜色，可以自定义tag颜色，没有自定义的tag颜色，那么就根据内容生成

LICENSE

@@ -0,0 +1,21 @@
+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

@@ -7,26 +7,39 @@
 [![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思维导图库
+> 一个简单&强大的Web思维导图
 
-Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
+本项目包含两部分：
 
-文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
+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`，支持从`json`、`xmind`导入
-- [x] 支持小地图
-- [x] 支持关联线
+- [x] 节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式
+- [x] 节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容
+- [x] 支持画布拖动、缩放
+- [x] 支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式
+- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`、`xmind`，支持从`json`、`xmind`、`markdown`导入
+- [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条
+- [x] 提供丰富的配置，满足各种场景各种使用习惯
+- [x] 支持协同编辑
 
 # 安装
 
@@ -36,10 +49,23 @@ npm i simple-mind-map
 
 # 使用
 
+提供一个宽高不为0的容器元素：
+
 ```html
 <div id="mindMapContainer"></div>
 ```
 
+另外再设置一下`css`样式：
+
+```css
+#mindMapContainer * {
+  margin: 0;
+  padding: 0;
+}
+```
+
+然后创建一个实例：
+
 ```js
 import MindMap from "simple-mind-map";
 
@@ -54,10 +80,134 @@ const mindMap = new MindMap({
 });
 ```
 
+即可得到一个思维导图。
+
+想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。
+
 # License
 
-MIT
+[MIT](./LICENSE)
 
 # 微信交流群
 
-![](./qrcode.jpg)
+群聊人数较多，无法通过二维码入群，可以微信添加`wanglinguanfang`拉你入群。
+
+# 请作者喝杯咖啡
+
+开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~
+
+> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
+
+> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
+
+<p>
+  <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
+  <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
+</p>
+
+<p>
+    <span>
+        <img src="./web/src/assets/avatar/Think.jpg" style="width: 50px;height: 50px;" />
+        <span>Think</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/志斌.jpg" style="width: 50px;height: 50px;" />
+        <span>志斌</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
+        <span>小土渣的宇宙</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/qp.jpg" style="width: 50px;height: 50px;" />
+        <span>qp</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/ZXR.jpg" style="width: 50px;height: 50px;" />
+        <span>ZXR</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/花儿朵朵.jpg" style="width: 50px;height: 50px;" />
+        <span>花儿朵朵</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/suka.jpg" style="width: 50px;height: 50px;" />
+        <span>suka</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
+        <span>Chris</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/水车.jpg" style="width: 50px;height: 50px;" />
+        <span>水车</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
+        <span>仓鼠</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/千帆.jpg" style="width: 50px;height: 50px;" />
+        <span>千帆</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/才镇.jpg" style="width: 50px;height: 50px;" />
+        <span>才镇</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/小米.jpg" style="width: 50px;height: 50px;" />
+        <span>小米bbᯤ²ᴳ</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/棐.jpg" style="width: 50px;height: 50px;" />
+        <span>*棐</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>Luke</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
+        <span>布林</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
+        <span>南风</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/蜉蝣撼大叔.jpg" style="width: 50px;height: 50px;" />
+        <span>蜉蝣撼大叔</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/乙.jpg" style="width: 50px;height: 50px;" />
+        <span>乙</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/敏.jpg" style="width: 50px;height: 50px;" />
+        <span>敏</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
+        <span>沐风牧草</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/有希.jpg" style="width: 50px;height: 50px;" />
+        <span>有希</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/樊笼.jpg" style="width: 50px;height: 50px;" />
+        <span>樊笼</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
+        <span>达仁科技</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/小逗比.png" style="width: 50px;height: 50px;" />
+        <span>小逗比</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/天清如愿.jpg" style="width: 50px;height: 50px;" />
+        <span>天清如愿</span>
+    </span>
+</p>

index.html

@@ -1 +1,69 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.3b27bed0.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.64cc7822.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.61afd8c1.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.84fc06da.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d405645.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a9abff6a.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.b8417307.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.d657e190.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.433fdc5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.9d7f8382.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.a3915823.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.906e86ec.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.0cf53d60.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.0f9ebf1b.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.7163274e.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.2e6ddc70.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.cd5e6df3.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.2e73bf0a.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.dab092ff.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.2e73ab77.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.4800807d.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.80759043.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.f670c26a.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.b5ce4946.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.c4647d07.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.3eea98de.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d960b122.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.a2a047cf.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5072607c.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.ed75c510.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.10135360.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9abceada.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.4757f6bb.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.f52387a2.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.766e8fa6.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.6c1b14e1.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.6a4911c4.js" rel="prefetch"><link href="dist/js/chunk-2d216004.704073c5.js" rel="prefetch"><link href="dist/js/chunk-2d217907.32a00939.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.6b1238d2.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.8f3151dd.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.9f7bbd4c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.2797f6b4.js" rel="prefetch"><link href="dist/js/chunk-2d238428.7c9ae7c7.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.3b1827be.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.e9e06d36.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.49b07a77.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.3b1827be.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.49b07a77.js"></script><script src="dist/js/app.e9e06d36.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
+      window.externalPublicPath = './dist/'
+      // 接管应用
+      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?8082e15354ee539c1308" rel="stylesheet"><link href="dist/css/app.css?8082e15354ee539c1308" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve({
+              mindMapData: {
+                root:{
+                  "data": {
+                      "text": "根节点"
+                  },
+                  "children": []
+                },
+                theme:{
+                  "template":"avocado",
+                  "config":{}
+                },
+                layout:"logicalStructure",
+                config: {},
+                view: null,
+              },
+              lang: 'zh',
+              localConfig: null
+            })
+          }, 200)
+        })
+      }
+      const setTakeOverAppMethods = (data) => {
+        window.takeOverAppMethods = {}
+        // 获取思维导图数据的函数
+        window.takeOverAppMethods.getMindMapData = () => {
+          return data.mindMapData
+        } 
+        // 保存思维导图数据的函数
+        window.takeOverAppMethods.saveMindMapData = (data) => {
+          console.log(data)
+        }
+        // 获取语言的函数
+        window.takeOverAppMethods.getLanguage = () => {
+          return data.lang
+        }
+        // 保存语言的函数
+        window.takeOverAppMethods.saveLanguage = (lang) => {
+          console.log(lang)
+        }
+        // 获取本地配置的函数
+        window.takeOverAppMethods.getLocalConfig = () => {
+          return data.localConfig
+        }
+        // 保存本地配置的函数
+        window.takeOverAppMethods.saveLocalConfig = (config) => {
+          console.log(config)
+        }
+      }
+      window.onload = async () => {
+        if (!window.takeOverApp) return
+        // 请求数据
+        const data = await getDataFromBackend()
+        // 设置全局的方法
+        setTakeOverAppMethods(data)
+        // 思维导图实例创建完成事件
+        window.$bus.$on('app_inited', (mindMap) => {
+          console.log(mindMap)
+        })
+        // 可以通过window.$bus.$on()来监听应用的一些事件
+        // 实例化页面
+        window.initApp()
+      }</script><script src="dist/js/chunk-vendors.js?8082e15354ee539c1308"></script><script src="dist/js/app.js?8082e15354ee539c1308"></script></body></html>

simple-mind-map/bin/wsServer.mjs

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+
+import ws from 'ws'
+import http from 'http'
+import * as map from 'lib0/map'
+
+const wsReadyStateConnecting = 0
+const wsReadyStateOpen = 1
+const wsReadyStateClosing = 2 // eslint-disable-line
+const wsReadyStateClosed = 3 // eslint-disable-line
+
+const pingTimeout = 30000
+
+const port = process.env.PORT || 4444
+// @ts-ignore
+const wss = new ws.Server({ noServer: true })
+
+const server = http.createServer((request, response) => {
+  response.writeHead(200, { 'Content-Type': 'text/plain' })
+  response.end('okay')
+})
+
+/**
+ * Map froms topic-name to set of subscribed clients.
+ * @type {Map<string, Set<any>>}
+ */
+const topics = new Map()
+
+/**
+ * @param {any} conn
+ * @param {object} message
+ */
+const send = (conn, message) => {
+  if (
+    conn.readyState !== wsReadyStateConnecting &&
+    conn.readyState !== wsReadyStateOpen
+  ) {
+    conn.close()
+  }
+  try {
+    conn.send(JSON.stringify(message))
+  } catch (e) {
+    conn.close()
+  }
+}
+
+/**
+ * Setup a new client
+ * @param {any} conn
+ */
+const onconnection = conn => {
+  /**
+   * @type {Set<string>}
+   */
+  const subscribedTopics = new Set()
+  let closed = false
+  // Check if connection is still alive
+  let pongReceived = true
+  const pingInterval = setInterval(() => {
+    if (!pongReceived) {
+      conn.close()
+      clearInterval(pingInterval)
+    } else {
+      pongReceived = false
+      try {
+        conn.ping()
+      } catch (e) {
+        conn.close()
+      }
+    }
+  }, pingTimeout)
+  conn.on('pong', () => {
+    pongReceived = true
+  })
+  conn.on('close', () => {
+    subscribedTopics.forEach(topicName => {
+      const subs = topics.get(topicName) || new Set()
+      subs.delete(conn)
+      if (subs.size === 0) {
+        topics.delete(topicName)
+      }
+    })
+    subscribedTopics.clear()
+    closed = true
+  })
+  conn.on(
+    'message',
+    /** @param {object} message */ message => {
+      if (typeof message === 'string') {
+        message = JSON.parse(message)
+      }
+      if (message && message.type && !closed) {
+        switch (message.type) {
+          case 'subscribe':
+            /** @type {Array<string>} */ ;(message.topics || []).forEach(
+              topicName => {
+                if (typeof topicName === 'string') {
+                  // add conn to topic
+                  const topic = map.setIfUndefined(
+                    topics,
+                    topicName,
+                    () => new Set()
+                  )
+                  topic.add(conn)
+                  // add topic to conn
+                  subscribedTopics.add(topicName)
+                }
+              }
+            )
+            break
+          case 'unsubscribe':
+            /** @type {Array<string>} */ ;(message.topics || []).forEach(
+              topicName => {
+                const subs = topics.get(topicName)
+                if (subs) {
+                  subs.delete(conn)
+                }
+              }
+            )
+            break
+          case 'publish':
+            if (message.topic) {
+              const receivers = topics.get(message.topic)
+              if (receivers) {
+                message.clients = receivers.size
+                receivers.forEach(receiver => send(receiver, message))
+              }
+            }
+            break
+          case 'ping':
+            send(conn, { type: 'pong' })
+        }
+      }
+    }
+  )
+}
+wss.on('connection', onconnection)
+
+server.on('upgrade', (request, socket, head) => {
+  // You may check auth of request here..
+  /**
+   * @param {any} ws
+   */
+  const handleAuth = ws => {
+    wss.emit('connection', ws, request)
+  }
+  wss.handleUpgrade(request, socket, head, handleAuth)
+})
+
+server.listen(port)
+
+console.log('Signaling server running on localhost:', port)

simple-mind-map/full.js

@@ -1,26 +1,49 @@
 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 MiniMap from './src/plugins/MiniMap.js'
+import Watermark from './src/plugins/Watermark.js'
+import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
+import ExportXMind from './src/plugins/ExportXMind.js'
+import ExportPDF from './src/plugins/ExportPDF.js'
+import Export from './src/plugins/Export.js'
+import Drag from './src/plugins/Drag.js'
+import Select from './src/plugins/Select.js'
+import AssociativeLine from './src/plugins/AssociativeLine'
+import RichText from './src/plugins/RichText'
+import NodeImgAdjust from './src/plugins/NodeImgAdjust.js'
+import TouchEvent from './src/plugins/TouchEvent.js'
+import Search from './src/plugins/Search.js'
+import Painter from './src/plugins/Painter.js'
+import Scrollbar from './src/plugins/Scrollbar.js'
+import Formula from './src/plugins/Formula.js'
 import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
+import icons from './src/svg/icons.js'
+import * as constants from './src/constants/constant.js'
+import themes from './src/themes/index.js'
+import * as defaultTheme from './src/themes/default.js'
 
 MindMap.xmind = xmind
 MindMap.markdown = markdown
+MindMap.iconList = icons.nodeIconList
+MindMap.constants = constants
+MindMap.themes = themes
+MindMap.defaultTheme = defaultTheme
 
-MindMap
-  .usePlugin(MiniMap)
+MindMap.usePlugin(MiniMap)
   .usePlugin(Watermark)
   .usePlugin(Drag)
   .usePlugin(KeyboardNavigation)
+  .usePlugin(ExportXMind)
+  .usePlugin(ExportPDF)
   .usePlugin(Export)
   .usePlugin(Select)
   .usePlugin(AssociativeLine)
   .usePlugin(RichText)
+  .usePlugin(TouchEvent)
+  .usePlugin(NodeImgAdjust)
+  .usePlugin(Search)
+  .usePlugin(Painter)
+  .usePlugin(Scrollbar)
+  .usePlugin(Formula)
 
-export default MindMap
+export default MindMap

simple-mind-map/index.js

@@ -1,105 +1,57 @@
-import View from './src/View'
-import Event from './src/Event'
-import Render from './src/Render'
+import View from './src/core/view/View'
+import Event from './src/core/event/Event'
+import Render from './src/core/render/Render'
 import merge from 'deepmerge'
 import theme from './src/themes'
-import Style from './src/Style'
-import KeyCommand from './src/KeyCommand'
-import Command from './src/Command'
-import BatchExecution from './src/BatchExecution'
-import { layoutValueList } from './src/utils/constant'
+import Style from './src/core/render/node/Style'
+import KeyCommand from './src/core/command/KeyCommand'
+import Command from './src/core/command/Command'
+import BatchExecution from './src/utils/BatchExecution'
+import {
+  layoutValueList,
+  CONSTANTS,
+  commonCaches,
+  ERROR_TYPES,
+  cssContent
+} from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import { simpleDeepClone } from './src/utils'
-import defaultTheme from './src/themes/default'
-
-// 默认选项配置
-const defaultOpt = {
-  // 是否只读
-  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: 'zoom',// zoom（放大缩小）、move（上下移动）
-  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
-  mousewheelMoveStep: 100,
-  // 默认插入的二级节点的文字
-  defaultInsertSecondLevelNodeText: '二级节点',
-  // 默认插入的二级以下节点的文字
-  defaultInsertBelowSecondLevelNodeText: '分支主题'
-}
+import { simpleDeepClone, getType, getObjectChangedProps } from './src/utils'
+import defaultTheme, {
+  checkIsNodeSizeIndependenceConfig
+} from './src/themes/default'
+import { defaultOpt } from './src/constants/defaultOptions'
 
 //  思维导图
 class MindMap {
   //  构造函数
+  /**
+   *
+   * @param {defaultOpt} opt
+   */
   constructor(opt = {}) {
     // 合并选项
     this.opt = this.handleOpt(merge(defaultOpt, opt))
 
     // 容器元素
     this.el = this.opt.el
-    this.elRect = this.el.getBoundingClientRect()
+    if (!this.el) throw new Error('缺少容器元素el')
 
-    // 画布宽高
-    this.width = this.elRect.width
-    this.height = this.elRect.height
+    // 获取容器尺寸位置信息
+    this.getElRectInfo()
+
+    // 添加css
+    this.cssEl = null
+    this.addCss()
 
     // 画布
-    this.svg = SVG().addTo(this.el).size(this.width, this.height)
-    this.draw = this.svg.group()
-
-    // 节点id
-    this.uid = 0
+    this.initContainer()
 
     // 初始化主题
     this.initTheme()
 
+    // 初始化缓存数据
+    this.initCache()
+
     // 事件类
     this.event = new Event({
       mindMap: this
@@ -122,20 +74,19 @@ class MindMap {
 
     // 视图操作类
     this.view = new View({
-      mindMap: this,
-      draw: this.draw
+      mindMap: this
     })
 
     // 批量执行类
     this.batchExecution = new BatchExecution()
 
     // 注册插件
-    MindMap.pluginList.forEach((plugin) => {
+    MindMap.pluginList.forEach(plugin => {
       this.initPlugin(plugin)
     })
 
     // 初始渲染
-    this.reRender()
+    this.render(this.opt.fit ? () => this.view.fit() : () => {})
     setTimeout(() => {
       this.command.addHistory()
     }, 0)
@@ -143,40 +94,103 @@ class MindMap {
 
   //  配置参数处理
   handleOpt(opt) {
+    // 深拷贝一份节点数据
+    opt.data = simpleDeepClone(opt.data || {})
     // 检查布局配置
     if (!layoutValueList.includes(opt.layout)) {
-      opt.layout = 'logicalStructure'
+      opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
     }
     // 检查主题配置
     opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
     return opt
   }
 
+  // 创建容器元素
+  initContainer() {
+    const { associativeLineIsAlwaysAboveNode } = this.opt
+    // 节点关联线容器
+    const createAssociativeLineDraw = () => {
+      this.associativeLineDraw = this.draw.group()
+      this.associativeLineDraw.addClass('smm-associative-line-container')
+    }
+    // 画布
+    this.svg = SVG().addTo(this.el).size(this.width, this.height)
+    // 容器
+    this.draw = this.svg.group()
+    this.draw.addClass('smm-container')
+    // 节点连线容器
+    this.lineDraw = this.draw.group()
+    this.lineDraw.addClass('smm-line-container')
+    // 默认处于节点下方
+    if (!associativeLineIsAlwaysAboveNode) {
+      createAssociativeLineDraw()
+    }
+    // 节点容器
+    this.nodeDraw = this.draw.group()
+    this.nodeDraw.addClass('smm-node-container')
+    // 关联线始终处于节点上方
+    if (associativeLineIsAlwaysAboveNode) {
+      createAssociativeLineDraw()
+    }
+    // 其他内容的容器
+    this.otherDraw = this.draw.group()
+    this.otherDraw.addClass('smm-other-container')
+  }
+
+  // 清空各容器
+  clearDraw() {
+    this.lineDraw.clear()
+    this.associativeLineDraw.clear()
+    this.nodeDraw.clear()
+    this.otherDraw.clear()
+  }
+
+  // 添加必要的css样式到页面
+  addCss() {
+    this.cssEl = document.createElement('style')
+    this.cssEl.type = 'text/css'
+    this.cssEl.innerHTML = cssContent
+    document.head.appendChild(this.cssEl)
+  }
+
+  // 移除css
+  removeCss() {
+    document.head.removeChild(this.cssEl)
+  }
+
   //  渲染，部分渲染
-  render(callback) {
+  render(callback, source = '') {
     this.batchExecution.push('render', () => {
       this.initTheme()
       this.renderer.reRender = false
-      this.renderer.render(callback)
+      this.renderer.render(callback, source)
     })
   }
 
   //  重新渲染
-  reRender(callback) {
+  reRender(callback, source = '') {
     this.batchExecution.push('render', () => {
-      this.draw.clear()
+      this.clearDraw()
       this.initTheme()
       this.renderer.reRender = true
-      this.renderer.render(callback)
+      this.renderer.render(callback, source)
     })
   }
 
+  // 获取或更新容器尺寸位置信息
+  getElRectInfo() {
+    this.elRect = this.el.getBoundingClientRect()
+    this.width = this.elRect.width
+    this.height = this.elRect.height
+    if (this.width <= 0 || this.height <= 0)
+      throw new Error('容器元素el的宽高不能为0')
+  }
+
   //  容器尺寸变化，调整尺寸
   resize() {
-    this.elRect = this.el.getBoundingClientRect()
-    this.width = this.elRect.width
-    this.height = this.elRect.height
+    this.getElRectInfo()
     this.svg.size(this.width, this.height)
+    this.emit('resize')
   }
 
   //  监听事件
@@ -194,6 +208,23 @@ class MindMap {
     this.event.off(event, fn)
   }
 
+  // 初始化缓存数据
+  initCache() {
+    Object.keys(commonCaches).forEach(key => {
+      let type = getType(commonCaches[key])
+      let value = ''
+      switch (type) {
+        case 'Boolean':
+          value = false
+          break
+        default:
+          value = null
+          break
+      }
+      commonCaches[key] = value
+    })
+  }
+
   //  设置主题
   initTheme() {
     // 合并主题配置
@@ -203,10 +234,13 @@ class MindMap {
   }
 
   //  设置主题
-  setTheme(theme) {
-    this.renderer.clearAllActive()
+  setTheme(theme, notRender = false) {
+    this.execCommand('CLEAR_ACTIVE_NODE')
     this.opt.theme = theme
-    this.reRender()
+    if (!notRender) {
+      this.render(null, CONSTANTS.CHANGE_THEME)
+    }
+    this.emit('view_theme_change', theme)
   }
 
   //  获取当前主题
@@ -215,9 +249,15 @@ class MindMap {
   }
 
   //  设置主题配置
-  setThemeConfig(config) {
+  setThemeConfig(config, notRender = false) {
+    // 计算改变了的配置
+    const changedConfig = getObjectChangedProps(this.themeConfig, config)
     this.opt.themeConfig = config
-    this.reRender()
+    if (!notRender) {
+      // 检查改变的是否是节点大小无关的主题属性
+      let res = checkIsNodeSizeIndependenceConfig(changedConfig)
+      this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
+    }
   }
 
   //  获取自定义主题配置
@@ -246,14 +286,17 @@ class MindMap {
   }
 
   //  设置布局结构
-  setLayout(layout) {
+  setLayout(layout, notRender = false) {
     // 检查布局配置
     if (!layoutValueList.includes(layout)) {
-      layout = 'logicalStructure'
+      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
     }
     this.opt.layout = layout
+    this.view.reset()
     this.renderer.setLayout()
-    this.render()
+    if (!notRender) {
+      this.render(null, CONSTANTS.CHANGE_LAYOUT)
+    }
   }
 
   //  执行命令
@@ -263,10 +306,13 @@ class MindMap {
 
   //  动态设置思维导图数据，纯节点数据
   setData(data) {
+    data = simpleDeepClone(data || {})
     this.execCommand('CLEAR_ACTIVE_NODE')
     this.command.clearHistory()
-    this.renderer.renderTree = data
-    this.reRender()
+    this.command.addHistory()
+    this.renderer.setData(data)
+    this.reRender(() => {}, CONSTANTS.SET_DATA)
+    this.emit('set_data', data)
   }
 
   //  动态设置思维导图数据，包括节点数据、布局、主题、视图
@@ -312,8 +358,12 @@ class MindMap {
 
   //  导出
   async export(...args) {
-    let result = await this.doExport.export(...args)
-    return result
+    try {
+      let result = await this.doExport.export(...args)
+      return result
+    } catch (error) {
+      this.opt.errorHandler(ERROR_TYPES.EXPORT_ERROR, error)
+    }
   }
 
   //  转换位置
@@ -326,30 +376,34 @@ class MindMap {
 
   //  设置只读模式、编辑模式
   setMode(mode) {
-    if (!['readonly', 'edit'].includes(mode)) {
+    if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
       return
     }
-    this.opt.readonly = mode === 'readonly'
+    this.opt.readonly = mode === CONSTANTS.MODE.READONLY
     if (this.opt.readonly) {
       // 取消当前激活的元素
-      this.renderer.clearAllActive()
+      this.execCommand('CLEAR_ACTIVE_NODE')
     }
     this.emit('mode_change', mode)
   }
 
   // 获取svg数据
-  getSvgData() {
+  getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false } = {}) {
     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()
+    const elRect = this.elRect
     // 去除放大缩小的变换效果
     draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
     // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
     const rect = draw.rbox()
+    // 内边距
+    rect.width += paddingX * 2
+    rect.height += paddingY * 2
+    draw.translate(paddingX, paddingY)
     // 将svg设置为实际内容的宽高
     svg.size(rect.width, rect.height)
     // 把实际内容变换
@@ -357,7 +411,12 @@ class MindMap {
     // 克隆一份数据
     let clone = svg.clone()
     // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
-    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
+    if (
+      !ignoreWatermark &&
+      (rect.width > origWidth || rect.height > origHeight) &&
+      this.watermark &&
+      this.watermark.hasWatermark()
+    ) {
       this.width = rect.width
       this.height = rect.height
       this.watermark.draw()
@@ -366,6 +425,16 @@ class MindMap {
       this.height = origHeight
       this.watermark.draw()
     }
+    // 添加必要的样式
+    clone.add(SVG(`<style>${cssContent}</style>`))
+    // 修正关联线箭头marker的id
+    const markerList = svg.find('marker')
+    if (markerList && markerList.length > 0) {
+      const id = markerList[0].attr('id')
+      clone.find('marker').forEach(item => {
+        item.attr('id', id)
+      })
+    }
     // 恢复原先的大小和变换信息
     svg.size(origWidth, origHeight)
     draw.transform(origTransform)
@@ -414,17 +483,38 @@ class MindMap {
       pluginOpt: plugin.pluginOpt
     })
   }
+
+  // 销毁
+  destroy() {
+    // 移除插件
+    ;[...MindMap.pluginList].forEach(plugin => {
+      if (this[plugin.instanceName].beforePluginDestroy) {
+        this[plugin.instanceName].beforePluginDestroy()
+      }
+      this[plugin.instanceName] = null
+    })
+    // 解绑事件
+    this.event.unbind()
+    // 移除画布节点
+    this.svg.remove()
+    // 去除给容器元素设置的背景样式
+    Style.removeBackgroundStyle(this.el)
+    this.el.innerHTML = ''
+    this.el = null
+    this.removeCss()
+  }
 }
 
 // 插件列表
 MindMap.pluginList = []
 MindMap.usePlugin = (plugin, opt = {}) => {
+  if (MindMap.hasPlugin(plugin) !== -1) return MindMap
   plugin.pluginOpt = opt
   MindMap.pluginList.push(plugin)
   return MindMap
 }
-MindMap.hasPlugin = (plugin) => {
-  return MindMap.pluginList.findIndex((item) => {
+MindMap.hasPlugin = plugin => {
+  return MindMap.pluginList.findIndex(item => {
     return item === plugin
   })
 }

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.4.7",
+  "version": "0.8.0-fix.1",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
@@ -12,6 +12,8 @@
       "url": "http://lxqnsys.com/"
     }
   ],
+  "types": "./types/index.d.ts",
+  "typings": "./types/index.d.ts",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -19,22 +21,26 @@
   },
   "scripts": {
     "lint": "eslint src/",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "types": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types --target es2017 --skipLibCheck",
+    "wsServe": "node ./bin/wsServer.mjs"
   },
   "module": "index.js",
-  "__main": "./dist/simpleMindMap.umd.min.js",
+  "main": "./dist/simpleMindMap.umd.min.js",
   "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",
+    "katex": "^0.16.8",
     "mdast-util-from-markdown": "^1.3.0",
     "quill": "^1.3.6",
+    "tern": "^0.24.3",
     "uuid": "^9.0.0",
-    "xml-js": "^1.6.11"
+    "xml-js": "^1.6.11",
+    "y-webrtc": "^10.2.5",
+    "yjs": "^13.6.8"
   },
   "keywords": [
     "javascript",

simple-mind-map/scripts/walkJsFiles.js

@@ -17,7 +17,7 @@ const transform = dir => {
 }
 
 const transformFile = file => {
-  console.log(file);
+  console.log(file)
   let content = fs.readFileSync(file, 'utf-8')
   countCodeLines(content)
   // transformComments(file, content)
@@ -25,7 +25,7 @@ const transformFile = file => {
 
 // 统计代码行数
 let totalLines = 0
-const countCodeLines = (content) => {
+const countCodeLines = content => {
   totalLines += content.split(/\n/).length
 }
 
@@ -43,4 +43,4 @@ const transformComments = (file, content) => {
 
 transform(entryPath)
 transformFile(path.join(__dirname, '../index.js'))
-console.log(totalLines);
+console.log(totalLines)

simple-mind-map/src/Drag.js

@@ -1,267 +0,0 @@
-import { bfsWalk, throttle } from './utils'
-import Base from './layouts/Base'
-
-//  节点拖动类
-
-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
-  }
-
-  //  绑定事件
-
-  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) <= 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)
-  }
-
-  //  鼠标松开事件
-
-  onMouseup(e) {
-    if (!this.isMousedown) {
-      return
-    }
-    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)
-    }
-  }
-
-  //  移除克隆节点
-
-  removeCloneNode() {
-    if (!this.clone) {
-      return
-    }
-    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 { 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 && !node.isRoot) {
-        // && 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

simple-mind-map/src/Export.js

@@ -1,254 +0,0 @@
-import { imgToDataUrl, downloadFile } from './utils'
-import JsPDF from 'jspdf'
-import { SVG } from '@svgdotjs/svg.js'
-import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
-import { transformToMarkdown } from './parse/toMarkdown'
-const URL = window.URL || window.webkitURL || window
-
-//  导出类
-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
-    }
-  }
-
-  //  获取svg数据
-  async getSvgData(domToImage) {
-    let { svg, svgHTML } = this.mindMap.getSvgData()
-    // 把图片的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)
-    // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
-    let nodeWithDomToImg = null
-    if (domToImage && this.mindMap.richText) {
-      let res = await this.mindMap.richText.handleSvgDomElements(svg)
-      if (res) {
-        nodeWithDomToImg = res.svg
-        svgHTML = res.svgHTML
-      }
-    }
-    return {
-      node: svg,
-      str: svgHTML,
-      nodeWithDomToImg
-    }
-  }
-
-  //   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
-    })
-  }
-
-  //  在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()
-        })
-      } else {
-        resolve()
-      }
-    })
-  }
-
-  //  导出为png
-  /**
-   * 方法1.把svg的图片都转化成data:url格式，再转换
-   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
-   */
-  async png() {
-    let { str } = await this.getSvgData(true)
-    // 转换成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
-  }
-
-  //  导出为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上绘制思维导图背景
-  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()
-      }
-    })
-  }
-
-  //  导出为svg
-  // domToImage：是否将svg中的dom节点转换成图片的形式
-  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
-  async svg(name, domToImage = false, plusCssText) {
-    let { node, nodeWithDomToImg } = await this.getSvgData(domToImage)
-    // 开启了节点富文本编辑
-    if (this.mindMap.richText) {
-      if (domToImage) {
-        node = nodeWithDomToImg
-      } else if (plusCssText) {
-        let foreignObjectList = node.find('foreignObject')
-        if (foreignObjectList.length > 0) {
-          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
-        }
-      }
-    }
-    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'
-    })
-    return URL.createObjectURL(blob)
-  }
-
-  //  导出为json
-  json(name, withConfig = true) {
-    let data = this.mindMap.getData(withConfig)
-    let str = JSON.stringify(data)
-    let blob = new Blob([str])
-    return URL.createObjectURL(blob)
-  }
-
-  //  专有文件，其实就是json文件
-  smm(name, withConfig) {
-    return this.json(name, withConfig)
-  }
-
-  // markdown文件
-  md() {
-    let data = this.mindMap.getData()
-    let content = transformToMarkdown(data)
-    let blob = new Blob([content])
-    return URL.createObjectURL(blob)
-  }
-}
-
-Export.instanceName = 'doExport'
-
-export default Export

simple-mind-map/src/Render.js

@@ -1,996 +0,0 @@
-import merge from 'deepmerge'
-import LogicalStructure from './layouts/LogicalStructure'
-import MindMap from './layouts/MindMap'
-import CatalogOrganization from './layouts/CatalogOrganization'
-import OrganizationStructure from './layouts/OrganizationStructure'
-import TextEdit from './TextEdit'
-import { copyNodeTree, simpleDeepClone, walk } from './utils'
-import { shapeList } from './Shape'
-import { lineStyleProps } from './themes/default'
-
-// 布局列表
-const layouts = {
-  // 逻辑结构图
-  logicalStructure: LogicalStructure,
-  // 思维导图
-  mindMap: MindMap,
-  // 目录组织图
-  catalogOrganization: CatalogOrganization,
-  // 组织结构图
-  organizationStructure: OrganizationStructure
-}
-
-//  渲染
-
-class Render {
-  //  构造函数
-
-  constructor(opt = {}) {
-    this.opt = opt
-    this.mindMap = opt.mindMap
-    this.themeConfig = this.mindMap.themeConfig
-    this.draw = this.mindMap.draw
-    // 渲染树，操作过程中修改的都是这里的数据
-    this.renderTree = merge({}, this.mindMap.opt.data || {})
-    // 是否重新渲染
-    this.reRender = false
-    // 当前激活的节点列表
-    this.activeNodeList = []
-    // 根节点
-    this.root = null
-    // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
-    this.textEdit = new TextEdit(this)
-    // 布局
-    this.setLayout()
-    // 绑定事件
-    this.bindEvent()
-    // 注册命令
-    this.registerCommands()
-    // 注册快捷键
-    this.registerShortcutKeys()
-  }
-
-  //  设置布局结构
-
-  setLayout() {
-    this.layout = new (
-      layouts[this.mindMap.opt.layout]
-        ? layouts[this.mindMap.opt.layout]
-        : layouts.logicalStructure
-    )(this)
-  }
-
-  //   绑定事件
-
-  bindEvent() {
-    // 点击事件
-    this.mindMap.on('draw_click', () => {
-      // 清除激活状态
-      if (this.activeNodeList.length > 0) {
-        this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-      }
-    })
-  }
-
-  //  注册命令
-
-  registerCommands() {
-    // 全选
-    this.selectAll = this.selectAll.bind(this)
-    this.mindMap.command.add('SELECT_ALL', this.selectAll)
-    // 回退
-    this.back = this.back.bind(this)
-    this.mindMap.command.add('BACK', this.back)
-    // 前进
-    this.forward = this.forward.bind(this)
-    this.mindMap.command.add('FORWARD', this.forward)
-    // 插入同级节点
-    this.insertNode = this.insertNode.bind(this)
-    this.mindMap.command.add('INSERT_NODE', this.insertNode)
-    // 插入子节点
-    this.insertChildNode = this.insertChildNode.bind(this)
-    this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
-    // 上移节点
-    this.upNode = this.upNode.bind(this)
-    this.mindMap.command.add('UP_NODE', this.upNode)
-    // 下移节点
-    this.downNode = this.downNode.bind(this)
-    this.mindMap.command.add('DOWN_NODE', this.downNode)
-    // 移动节点
-    this.insertAfter = this.insertAfter.bind(this)
-    this.mindMap.command.add('INSERT_AFTER', this.insertAfter)
-    this.insertBefore = this.insertBefore.bind(this)
-    this.mindMap.command.add('INSERT_BEFORE', this.insertBefore)
-    this.moveNodeTo = this.moveNodeTo.bind(this)
-    this.mindMap.command.add('MOVE_NODE_TO', this.moveNodeTo)
-    // 删除节点
-    this.removeNode = this.removeNode.bind(this)
-    this.mindMap.command.add('REMOVE_NODE', this.removeNode)
-    // 粘贴节点
-    this.pasteNode = this.pasteNode.bind(this)
-    this.mindMap.command.add('PASTE_NODE', this.pasteNode)
-    // 剪切节点
-    this.cutNode = this.cutNode.bind(this)
-    this.mindMap.command.add('CUT_NODE', this.cutNode)
-    // 修改节点样式
-    this.setNodeStyle = this.setNodeStyle.bind(this)
-    this.mindMap.command.add('SET_NODE_STYLE', this.setNodeStyle)
-    // 切换节点是否激活
-    this.setNodeActive = this.setNodeActive.bind(this)
-    this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive)
-    // 清除所有激活节点
-    this.clearAllActive = this.clearAllActive.bind(this)
-    this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearAllActive)
-    // 切换节点是否展开
-    this.setNodeExpand = this.setNodeExpand.bind(this)
-    this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand)
-    // 展开所有节点
-    this.expandAllNode = this.expandAllNode.bind(this)
-    this.mindMap.command.add('EXPAND_ALL', this.expandAllNode)
-    // 收起所有节点
-    this.unexpandAllNode = this.unexpandAllNode.bind(this)
-    this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
-    // 展开到指定层级
-    this.expandToLevel = this.expandToLevel.bind(this)
-    this.mindMap.command.add('UNEXPAND_TO_LEVEL', this.expandToLevel)
-    // 设置节点数据
-    this.setNodeData = this.setNodeData.bind(this)
-    this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
-    // 设置节点文本
-    this.setNodeText = this.setNodeText.bind(this)
-    this.mindMap.command.add('SET_NODE_TEXT', this.setNodeText)
-    // 设置节点图片
-    this.setNodeImage = this.setNodeImage.bind(this)
-    this.mindMap.command.add('SET_NODE_IMAGE', this.setNodeImage)
-    // 设置节点图标
-    this.setNodeIcon = this.setNodeIcon.bind(this)
-    this.mindMap.command.add('SET_NODE_ICON', this.setNodeIcon)
-    // 设置节点超链接
-    this.setNodeHyperlink = this.setNodeHyperlink.bind(this)
-    this.mindMap.command.add('SET_NODE_HYPERLINK', this.setNodeHyperlink)
-    // 设置节点备注
-    this.setNodeNote = this.setNodeNote.bind(this)
-    this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
-    // 设置节点标签
-    this.setNodeTag = this.setNodeTag.bind(this)
-    this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
-    // 添加节点概要
-    this.addGeneralization = this.addGeneralization.bind(this)
-    this.mindMap.command.add('ADD_GENERALIZATION', this.addGeneralization)
-    // 删除节点概要
-    this.removeGeneralization = this.removeGeneralization.bind(this)
-    this.mindMap.command.add('REMOVE_GENERALIZATION', this.removeGeneralization)
-    // 设置节点自定义位置
-    this.setNodeCustomPosition = this.setNodeCustomPosition.bind(this)
-    this.mindMap.command.add(
-      'SET_NODE_CUSTOM_POSITION',
-      this.setNodeCustomPosition
-    )
-    // 一键整理布局
-    this.resetLayout = this.resetLayout.bind(this)
-    this.mindMap.command.add('RESET_LAYOUT', this.resetLayout)
-    // 设置节点形状
-    this.setNodeShape = this.setNodeShape.bind(this)
-    this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
-  }
-
-  //  注册快捷键
-
-  registerShortcutKeys() {
-    // 插入下级节点
-    this.mindMap.keyCommand.addShortcut('Tab', () => {
-      this.mindMap.execCommand('INSERT_CHILD_NODE')
-    })
-    // 插入同级节点
-    this.insertNodeWrap = () => {
-      if (this.textEdit.showTextEdit) {
-        return
-      }
-      this.mindMap.execCommand('INSERT_NODE')
-    }
-    this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
-    // 插入概要
-    this.mindMap.keyCommand.addShortcut('Control+s', this.addGeneralization)
-    // 展开/收起节点
-    this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
-    this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
-    // 删除节点
-    this.removeNodeWrap = () => {
-      this.mindMap.execCommand('REMOVE_NODE')
-    }
-    this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-    // 节点编辑时某些快捷键会存在冲突，需要暂时去除
-    this.mindMap.on('before_show_text_edit', () => {
-      this.startTextEdit()
-    })
-    this.mindMap.on('hide_text_edit', () => {
-      this.endTextEdit()
-    })
-    // 全选
-    this.mindMap.keyCommand.addShortcut('Control+a', () => {
-      this.mindMap.execCommand('SELECT_ALL')
-    })
-    // 一键整理布局
-    this.mindMap.keyCommand.addShortcut('Control+l', this.resetLayout)
-    // 上移节点
-    this.mindMap.keyCommand.addShortcut('Control+Up', this.upNode)
-    // 下移节点
-    this.mindMap.keyCommand.addShortcut('Control+Down', this.downNode)
-    // 复制节点、剪切节点、粘贴节点的快捷键需开发者自行注册实现，可参考demo
-  }
-
-  //  开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
-
-  startTextEdit() {
-    this.mindMap.keyCommand.save()
-    // this.mindMap.keyCommand.removeShortcut('Del|Backspace')
-    // this.mindMap.keyCommand.removeShortcut('/')
-    // this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
-  }
-
-  //  结束文字编辑，会恢复回车键和删除键相关快捷键
-
-  endTextEdit() {
-    this.mindMap.keyCommand.restore()
-    // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-    // this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
-    // this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
-  }
-
-  //   渲染
-
-  render(callback = () => {}) {
-    if (this.reRender) {
-      this.clearActive()
-    }
-    this.layout.doLayout(root => {
-      this.root = root
-      this.root.render(() => {
-        this.mindMap.emit('node_tree_render_end')
-        callback()
-      })
-    })
-    this.mindMap.emit('node_active', null, this.activeNodeList)
-  }
-
-  //  清除当前激活的节点
-
-  clearActive() {
-    this.activeNodeList.forEach(item => {
-      this.setNodeActive(item, false)
-    })
-    this.activeNodeList = []
-  }
-
-  //  清除当前所有激活节点，并会触发事件
-
-  clearAllActive() {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    this.clearActive()
-    this.mindMap.emit('node_active', null, [])
-  }
-
-  //   添加节点到激活列表里
-
-  addActiveNode(node) {
-    let index = this.findActiveNodeIndex(node)
-    if (index === -1) {
-      this.activeNodeList.push(node)
-    }
-  }
-
-  //  在激活列表里移除某个节点
-
-  removeActiveNode(node) {
-    let index = this.findActiveNodeIndex(node)
-    if (index === -1) {
-      return
-    }
-    this.activeNodeList.splice(index, 1)
-  }
-
-  //  检索某个节点在激活列表里的索引
-
-  findActiveNodeIndex(node) {
-    return this.activeNodeList.findIndex(item => {
-      return item === node
-    })
-  }
-
-  //  获取节点在同级里的索引位置
-
-  getNodeIndex(node) {
-    return node.parent
-      ? node.parent.children.findIndex(item => {
-          return item === node
-        })
-      : 0
-  }
-
-  //  全选
-
-  selectAll() {
-    walk(
-      this.root,
-      null,
-      node => {
-        if (!node.nodeData.data.isActive) {
-          node.nodeData.data.isActive = true
-          this.addActiveNode(node)
-          setTimeout(() => {
-            node.renderNode()
-          }, 0)
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
-  }
-
-  //  回退
-
-  back(step) {
-    this.clearAllActive()
-    let data = this.mindMap.command.back(step)
-    if (data) {
-      this.renderTree = data
-      this.mindMap.reRender()
-    }
-  }
-
-  //  前进
-
-  forward(step) {
-    this.clearAllActive()
-    let data = this.mindMap.command.forward(step)
-    if (data) {
-      this.renderTree = data
-      this.mindMap.reRender()
-    }
-  }
-
-  // 规范指定节点数据
-  formatAppointNodes(appointNodes) {
-    if (!appointNodes) return []
-    return Array.isArray(appointNodes) ? appointNodes: [appointNodes]
-  }
-
-  //  插入同级节点，多个节点只会操作第一个节点
-
-  insertNode(openEdit = true, appointNodes = [], appointData = null) {
-    appointNodes = this.formatAppointNodes(appointNodes)
-    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
-      return
-    }
-    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
-    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
-    let first = list[0]
-    if (first.isRoot) {
-      this.insertChildNode(openEdit, appointNodes, appointData)
-    } else {
-      let text = first.layerIndex === 1 ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
-      if (first.layerIndex === 1) {
-        first.parent.initRender = true
-      }
-      let index = this.getNodeIndex(first)
-      first.parent.nodeData.children.splice(index + 1, 0, {
-        inserting: openEdit,
-        data: {
-          text: text,
-          expand: true,
-          ...(appointData || {})
-        },
-        children: []
-      })
-      this.mindMap.render()
-    }
-  }
-
-  //  插入子节点
-
-  insertChildNode(openEdit = true, appointNodes = [], appointData = null) {
-    appointNodes = this.formatAppointNodes(appointNodes)
-    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
-      return
-    }
-    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
-    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
-    list.forEach(node => {
-      if (!node.nodeData.children) {
-        node.nodeData.children = []
-      }
-      let text = node.isRoot ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
-      node.nodeData.children.push({
-        inserting: openEdit,
-        data: {
-          text: text,
-          expand: true,
-          ...(appointData || {})
-        },
-        children: []
-      })
-      // 插入子节点时自动展开子节点
-      node.nodeData.data.expand = true
-      if (node.isRoot) {
-        node.initRender = true
-        // this.mindMap.batchExecution.push('renderNode' + index, () => {
-        //     node.renderNode()
-        // })
-      }
-    })
-    this.mindMap.render()
-  }
-
-  //  上移节点，多个节点只会操作第一个节点
-
-  upNode() {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    let node = this.activeNodeList[0]
-    if (node.isRoot) {
-      return
-    }
-    let parent = node.parent
-    let childList = parent.children
-    let index = childList.findIndex(item => {
-      return item === node
-    })
-    if (index === -1 || index === 0) {
-      return
-    }
-    let insertIndex = index - 1
-    // 节点实例
-    childList.splice(index, 1)
-    childList.splice(insertIndex, 0, node)
-    // 节点数据
-    parent.nodeData.children.splice(index, 1)
-    parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
-    this.mindMap.render()
-  }
-
-  //  下移节点，多个节点只会操作第一个节点
-
-  downNode() {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    let node = this.activeNodeList[0]
-    if (node.isRoot) {
-      return
-    }
-    let parent = node.parent
-    let childList = parent.children
-    let index = childList.findIndex(item => {
-      return item === node
-    })
-    if (index === -1 || index === childList.length - 1) {
-      return
-    }
-    let insertIndex = index + 1
-    // 节点实例
-    childList.splice(index, 1)
-    childList.splice(insertIndex, 0, node)
-    // 节点数据
-    parent.nodeData.children.splice(index, 1)
-    parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
-    this.mindMap.render()
-  }
-
-  //  将节点移动到另一个节点的前面
-
-  insertBefore(node, exist) {
-    if (node.isRoot) {
-      return
-    }
-    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
-    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
-    // 移动节点
-    let nodeParent = node.parent
-    let nodeBorthers = nodeParent.children
-    let nodeIndex = nodeBorthers.findIndex(item => {
-      return item === node
-    })
-    if (nodeIndex === -1) {
-      return
-    }
-    nodeBorthers.splice(nodeIndex, 1)
-    nodeParent.nodeData.children.splice(nodeIndex, 1)
-
-    // 目标节点
-    let existParent = exist.parent
-    let existBorthers = existParent.children
-    let existIndex = existBorthers.findIndex(item => {
-      return item === exist
-    })
-    if (existIndex === -1) {
-      return
-    }
-    existBorthers.splice(existIndex, 0, node)
-    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render(() => {
-      if (nodeLayerChanged) {
-        node.getSize()
-        node.renderNode()
-      }
-    })
-  }
-
-  //  将节点移动到另一个节点的后面
-
-  insertAfter(node, exist) {
-    if (node.isRoot) {
-      return
-    }
-    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
-    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
-    // 移动节点
-    let nodeParent = node.parent
-    let nodeBorthers = nodeParent.children
-    let nodeIndex = nodeBorthers.findIndex(item => {
-      return item === node
-    })
-    if (nodeIndex === -1) {
-      return
-    }
-    nodeBorthers.splice(nodeIndex, 1)
-    nodeParent.nodeData.children.splice(nodeIndex, 1)
-
-    // 目标节点
-    let existParent = exist.parent
-    let existBorthers = existParent.children
-    let existIndex = existBorthers.findIndex(item => {
-      return item === exist
-    })
-    if (existIndex === -1) {
-      return
-    }
-    existIndex++
-    existBorthers.splice(existIndex, 0, node)
-    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render(() => {
-      if (nodeLayerChanged) {
-        node.getSize()
-        node.renderNode()
-      }
-    })
-  }
-
-  //  移除节点
-
-  removeNode(appointNodes = []) {
-    appointNodes = this.formatAppointNodes(appointNodes)
-    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
-      return
-    }
-    let isAppointNodes = appointNodes.length > 0
-    let list = isAppointNodes ? appointNodes : this.activeNodeList
-    let root = list.find((node) => {
-      return node.isRoot
-    })
-    if (root) {
-      this.clearActive()
-      root.children.forEach(child => {
-        child.remove()
-      })
-      root.children = []
-      root.nodeData.children = []
-    } else {
-      for (let i = 0; i < list.length; i++) {
-        let node = list[i]
-        if (isAppointNodes) list.splice(i, 1)
-        if (node.isGeneralization) {
-          // 删除概要节点
-          this.setNodeData(node.generalizationBelongNode, {
-            generalization: null
-          })
-          node.generalizationBelongNode.update()
-          this.removeActiveNode(node)
-          i--
-        } else {
-          this.removeActiveNode(node)
-          this.removeOneNode(node)
-          i--
-        }
-      }
-    }
-    this.mindMap.emit('node_active', null, this.activeNodeList)
-    this.mindMap.render()
-  }
-
-  //  移除某个指定节点
-
-  removeOneNode(node) {
-    let index = this.getNodeIndex(node)
-    node.remove()
-    node.parent.children.splice(index, 1)
-    node.parent.nodeData.children.splice(index, 1)
-  }
-
-  //  复制节点，多个节点只会操作第一个节点
-
-  copyNode() {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    return copyNodeTree({}, this.activeNodeList[0], true)
-  }
-
-  //  剪切节点，多个节点只会操作第一个节点
-
-  cutNode(callback) {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    let node = this.activeNodeList[0]
-    if (node.isRoot) {
-      return null
-    }
-    let copyData = copyNodeTree({}, node, true)
-    this.removeActiveNode(node)
-    this.removeOneNode(node)
-    this.mindMap.emit('node_active', null, this.activeNodeList)
-    this.mindMap.render()
-    if (callback && typeof callback === 'function') {
-      callback(copyData)
-    }
-  }
-
-  //  移动一个节点作为另一个节点的子节点
-
-  moveNodeTo(node, toNode) {
-    if (node.isRoot) {
-      return
-    }
-    let copyData = copyNodeTree({}, node, false, true)
-    this.removeActiveNode(node)
-    this.removeOneNode(node)
-    this.mindMap.emit('node_active', null, this.activeNodeList)
-    toNode.nodeData.children.push(copyData)
-    this.mindMap.render()
-    if (toNode.isRoot) {
-      toNode.renderNode()
-    }
-  }
-
-  //   粘贴节点到节点
-
-  pasteNode(data) {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    this.activeNodeList.forEach(item => {
-      item.nodeData.children.push(simpleDeepClone(data))
-    })
-    this.mindMap.render()
-  }
-
-  //  设置节点样式
-
-  setNodeStyle(node, prop, value, isActive) {
-    let data = {}
-    if (isActive) {
-      data = {
-        activeStyle: {
-          ...(node.nodeData.data.activeStyle || {}),
-          [prop]: value
-        }
-      }
-    } else {
-      data = {
-        [prop]: value
-      }
-    }
-    // 如果开启了富文本，则需要应用到富文本上
-    if (this.mindMap.richText) {
-      this.mindMap.richText.showEditText(node)
-      let config = this.mindMap.richText.normalStyleToRichTextStyle({
-        [prop]: value
-      })
-      this.mindMap.richText.formatAllText(config)
-      this.mindMap.richText.hideEditText()
-    }
-    this.setNodeDataRender(node, data)
-    // 更新了连线的样式
-    if (lineStyleProps.includes(prop)) {
-      ;(node.parent || node).renderLine(true)
-    }
-  }
-
-  //  设置节点是否激活
-
-  setNodeActive(node, active) {
-    this.setNodeData(node, {
-      isActive: active
-    })
-    node.renderNode()
-  }
-
-  //  设置节点是否展开
-
-  setNodeExpand(node, expand) {
-    this.setNodeData(node, {
-      expand
-    })
-    if (expand) {
-      // 展开
-      node.children.forEach(item => {
-        item.render()
-      })
-      node.renderLine()
-      node.updateExpandBtnNode()
-    } else {
-      // 收缩
-      node.children.forEach(item => {
-        item.remove()
-      })
-      node.removeLine()
-      node.updateExpandBtnNode()
-    }
-    this.mindMap.render()
-  }
-
-  //  展开所有
-
-  expandAllNode() {
-    walk(
-      this.renderTree,
-      null,
-      node => {
-        if (!node.data.expand) {
-          node.data.expand = true
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
-    this.mindMap.reRender()
-  }
-
-  //  收起所有
-
-  unexpandAllNode() {
-    walk(
-      this.renderTree,
-      null,
-      (node, parent, isRoot) => {
-        node._node = null
-        if (!isRoot) {
-          node.data.expand = false
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
-    this.mindMap.reRender()
-  }
-
-  //  展开到指定层级
-
-  expandToLevel(level) {
-    walk(
-      this.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        node._node = null
-        node.data.expand = layerIndex < level
-      },
-      null,
-      true,
-      0,
-      0
-    )
-    this.mindMap.reRender()
-  }
-
-  //  切换激活节点的展开状态
-
-  toggleActiveExpand() {
-    this.activeNodeList.forEach(node => {
-      if (node.nodeData.children.length <= 0) {
-        return
-      }
-      this.toggleNodeExpand(node)
-    })
-  }
-
-  //  切换节点展开状态
-
-  toggleNodeExpand(node) {
-    this.mindMap.execCommand(
-      'SET_NODE_EXPAND',
-      node,
-      !node.nodeData.data.expand
-    )
-  }
-
-  //  设置节点文本
-
-  setNodeText(node, text, richText) {
-    this.setNodeDataRender(node, {
-      text,
-      richText
-    })
-  }
-
-  //  设置节点图片
-
-  setNodeImage(node, { url, title, width, height }) {
-    this.setNodeDataRender(node, {
-      image: url,
-      imageTitle: title || '',
-      imageSize: {
-        width,
-        height
-      }
-    })
-  }
-
-  //  设置节点图标
-
-  setNodeIcon(node, icons) {
-    this.setNodeDataRender(node, {
-      icon: icons
-    })
-  }
-
-  //  设置节点超链接
-
-  setNodeHyperlink(node, link, title = '') {
-    this.setNodeDataRender(node, {
-      hyperlink: link,
-      hyperlinkTitle: title
-    })
-  }
-
-  //  设置节点备注
-
-  setNodeNote(node, note) {
-    this.setNodeDataRender(node, {
-      note
-    })
-  }
-
-  //  设置节点标签
-
-  setNodeTag(node, tag) {
-    this.setNodeDataRender(node, {
-      tag
-    })
-  }
-
-  //  添加节点概要
-
-  addGeneralization(data) {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    this.activeNodeList.forEach(node => {
-      if (node.nodeData.data.generalization || node.isRoot) {
-        return
-      }
-      this.setNodeData(node, {
-        generalization: data || {
-          text: '概要'
-        }
-      })
-      node.update()
-    })
-    this.mindMap.render()
-  }
-
-  //  删除节点概要
-
-  removeGeneralization() {
-    if (this.activeNodeList.length <= 0) {
-      return
-    }
-    this.activeNodeList.forEach(node => {
-      if (!node.nodeData.data.generalization) {
-        return
-      }
-      this.setNodeData(node, {
-        generalization: null
-      })
-      node.update()
-    })
-    this.mindMap.render()
-  }
-
-  //  设置节点自定义位置
-
-  setNodeCustomPosition(node, left = undefined, top = undefined) {
-    let nodeList = [node] || this.activeNodeList
-    nodeList.forEach(item => {
-      this.setNodeData(item, {
-        customLeft: left,
-        customTop: top
-      })
-    })
-  }
-
-  //  一键整理布局，即去除自定义位置
-
-  resetLayout() {
-    walk(
-      this.root,
-      null,
-      node => {
-        node.customLeft = undefined
-        node.customTop = undefined
-        this.setNodeData(node, {
-          customLeft: undefined,
-          customTop: undefined
-        })
-        this.mindMap.render()
-      },
-      null,
-      true,
-      0,
-      0
-    )
-  }
-
-  //  设置节点形状
-
-  setNodeShape(node, shape) {
-    if (!shape || !shapeList.includes(shape)) {
-      return
-    }
-    let nodeList = [node] || this.activeNodeList
-    nodeList.forEach(item => {
-      this.setNodeStyle(item, 'shape', shape)
-    })
-  }
-
-  //  更新节点数据
-
-  setNodeData(node, data) {
-    Object.keys(data).forEach(key => {
-      node.nodeData.data[key] = data[key]
-    })
-  }
-
-  //  设置节点数据，并判断是否渲染
-
-  setNodeDataRender(node, data) {
-    this.setNodeData(node, data)
-    let changed = node.getSize()
-    node.renderNode()
-    if (changed) {
-      if (node.isGeneralization) {
-        // 概要节点
-        node.generalizationBelongNode.updateGeneralization()
-      }
-      this.mindMap.render()
-    }
-  }
-
-  //  移动节点到画布中心
-
-  moveNodeToCenter(node) {
-    let halfWidth = this.mindMap.width / 2
-    let halfHeight = this.mindMap.height / 2
-    let { left, top, width, height } = node
-    let nodeCenterX = left + width / 2
-    let nodeCenterY = top + height / 2
-    let { state } = this.mindMap.view.getTransformData()
-    let targetX = halfWidth - state.x
-    let targetY = halfHeight - state.y
-    let offsetX = targetX - nodeCenterX
-    let offsetY = targetY - nodeCenterY
-    this.mindMap.view.translateX(offsetX)
-    this.mindMap.view.translateY(offsetY)
-    this.mindMap.view.setScale(1)
-  }
-}
-
-export default Render

simple-mind-map/src/RichText.js

@@ -1,459 +0,0 @@
-import Quill from 'quill'
-import 'quill/dist/quill.snow.css'
-import './css/quill.css'
-import html2canvas from 'html2canvas'
-import { Image as SvgImage } from '@svgdotjs/svg.js'
-import { walk } from './utils'
-
-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.initOpt()
-    this.extendQuill()
-  }
-
-  // 处理选项参数
-  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()
-    if (!this.textEditNode) {
-      this.textEditNode = document.createElement('div')
-      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;`
-      document.body.appendChild(this.textEditNode)
-    }
-    // 原始宽高
-    let g = node._textData.node
-    let originWidth = g.attr('data-width')
-    let originHeight = g.attr('data-height')
-    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
-    let bgColor = node.style.merge('fillColor')
-    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
-    this.textEditNode.style.minWidth = originWidth + 'px'
-    this.textEditNode.style.minHeight = originHeight + 'px'
-    this.textEditNode.style.left =
-      rect.left + (rect.width - originWidth) / 2 + 'px'
-    this.textEditNode.style.top =
-      rect.top + (rect.height - originHeight) / 2 + 'px'
-    this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
-    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
-      rect.height / originHeight
-    })`
-    if (!node.nodeData.data.richText) {
-      // 还不是富文本的情况
-      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
-      let html = `<p>${text}</p>`
-      this.textEditNode.innerHTML = html
-    } else {
-      this.textEditNode.innerHTML = 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)
-    }
-  }
-
-  // 如果是非富文本的情况，需要手动应用文本样式
-  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.formatText(style)
-  }
-
-  // 隐藏文本编辑控件，即完成编辑
-  hideEditText() {
-    if (!this.showTextEdit) {
-      return
-    }
-    let html = this.quill.container.firstChild.innerHTML
-    // 去除最后的空行
-    html = html.replace(/<p><br><\/p>$/, '')
-    this.mindMap.renderer.activeNodeList.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,
-      this.mindMap.renderer.activeNodeList
-    )
-    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
-  }
-
-  // 将svg中嵌入的dom元素转换成图片
-  async _handleSvgDomElements(svg) {
-    svg = svg.clone()
-    let foreignObjectList = svg.find('foreignObject')
-    let task = foreignObjectList.map(async item => {
-      let clone = item.first().node.cloneNode(true)
-      let div = document.createElement('div')
-      div.style.cssText = `position: fixed; left: -999999px;`
-      div.appendChild(clone)
-      this.mindMap.el.appendChild(div)
-      let canvas = await html2canvas(clone, {
-        backgroundColor: null
-      })
-      this.mindMap.el.removeChild(div)
-      let imgNode = new SvgImage()
-        .load(canvas.toDataURL())
-        .size(canvas.width, canvas.height)
-      item.replace(imgNode)
-    })
-    await Promise.all(task)
-    return {
-      svg: svg,
-      svgHTML: svg.svg()
-    }
-  }
-
-  // 将svg中嵌入的dom元素转换成图片
-  handleSvgDomElements(svg) {
-    return new Promise((resolve, reject) => {
-      svg = svg.clone()
-      let foreignObjectList = svg.find('foreignObject')
-      let index = 0
-      let len = foreignObjectList.length
-      let transform = async () => {
-        this.mindMap.emit('transforming-dom-to-images', index, len)
-        try {
-          let item = foreignObjectList[index++]
-          let parent = item.parent()
-          let clone = item.first().node.cloneNode(true)
-          let div = document.createElement('div')
-          div.style.cssText = `position: fixed; left: -999999px;`
-          div.appendChild(clone)
-          this.mindMap.el.appendChild(div)
-          let canvas = await html2canvas(clone, {
-            backgroundColor: null
-          })
-          // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
-          let imgNodeWidth = parent.attr('data-width') || canvas.width
-          let imgNodeHeight = parent.attr('data-height') || canvas.height
-          this.mindMap.el.removeChild(div)
-          let imgNode = new SvgImage()
-            .load(canvas.toDataURL())
-            .size(imgNodeWidth, imgNodeHeight)
-            .x((parent ? parent.attr('data-offsetx') : 0) || 0)
-          item.replace(imgNode)
-          if (index <= len - 1) {
-            setTimeout(() => {
-              transform()
-            }, 0)
-          } else {
-            resolve({
-              svg: svg,
-              svgHTML: svg.svg()
-            })
-          }
-        } catch (error) {
-          reject(error)
-        }
-      }
-      if (len > 0) {
-        transform()
-      } else {
-        resolve(null)
-      }
-    })
-  }
-
-  // 将所有节点转换成非富文本节点
-  transformAllNodesToNormalNode() {
-    let div = document.createElement('div')
-    walk(
-      this.mindMap.renderer.renderTree,
-      null,
-      node => {
-        if (node.data.richText) {
-          node.data.richText = false
-          div.innerHTML = node.data.text
-          node.data.text = div.textContent
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
-    // 清空历史数据，并且触发数据变化
-    this.mindMap.command.clearHistory()
-    this.mindMap.command.addHistory()
-    this.mindMap.reRender()
-  }
-
-  // 插件被移除前做的事情
-  beforePluginRemove() {
-    this.transformAllNodesToNormalNode()
-  }
-}
-
-RichText.instanceName = 'richText'
-
-export default RichText

simple-mind-map/src/Select.js

@@ -1,172 +0,0 @@
-import { bfsWalk, throttle } from './utils'
-
-//  选择节点类
-
-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, 500, 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++
-    }
-    // 右边缘
-    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)
-  }
-
-  //  创建矩形
-  createRect(x, y) {
-    this.rect = this.mindMap.svg
-      .polygon()
-      .stroke({
-        color: '#0984e3'
-      })
-      .fill({
-        color: 'rgba(9,132,227,0.3)'
-      })
-      .plot([[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 && 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

simple-mind-map/src/Shape.js

@@ -1,226 +0,0 @@
-//  节点形状类
-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 'roundedRectangle':
-        return {
-          paddingX: height > width ? (height - width) / 2 : 0,
-          paddingY: 0
-        }
-      case 'diamond':
-        return {
-          paddingX: width / 2,
-          paddingY: height / 2
-        }
-      case 'parallelogram':
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case 'outerTriangularRectangle':
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case 'innerTriangularRectangle':
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: 0
-        }
-      case 'ellipse':
-        return {
-          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-          paddingY: paddingY <= 0 ? defaultPaddingY : 0
-        }
-      case '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 === 'rectangle') {
-      node = this.node.group.rect(width, height)
-    } else if (shape === 'diamond') {
-      // 菱形
-      node = this.createDiamond()
-    } else if (shape === 'parallelogram') {
-      // 平行四边形
-      node = this.createParallelogram()
-    } else if (shape === 'roundedRectangle') {
-      // 圆角矩形
-      node = this.createRoundedRectangle()
-    } else if (shape === 'octagonalRectangle') {
-      // 八角矩形
-      node = this.createOctagonalRectangle()
-    } else if (shape === 'outerTriangularRectangle') {
-      // 外三角矩形
-      node = this.createOuterTriangularRectangle()
-    } else if (shape === 'innerTriangularRectangle') {
-      // 内三角矩形
-      node = this.createInnerTriangularRectangle()
-    } else if (shape === 'ellipse') {
-      // 椭圆
-      node = this.createEllipse()
-    } else if (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 this.node.group.polygon(`
-            ${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 this.node.group.polygon(`
-            ${paddingX}, ${0}
-            ${width}, ${0}
-            ${width - paddingX}, ${height}
-            ${0}, ${height}
-        `)
-  }
-
-  //  创建圆角矩形
-  createRoundedRectangle() {
-    let { width, height } = this.node
-    let halfHeight = height / 2
-    return this.node.group.path(`
-            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 this.node.group.polygon(`
-            ${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 this.node.group.polygon(`
-            ${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 this.node.group.polygon(`
-            ${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 this.node.group.path(`
-            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 this.node.group.path(`
-            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 = [
-  'rectangle',
-  'diamond',
-  'parallelogram',
-  'roundedRectangle',
-  'octagonalRectangle',
-  'outerTriangularRectangle',
-  'innerTriangularRectangle',
-  'ellipse',
-  'circle'
-]

simple-mind-map/src/Style.js

@@ -1,200 +0,0 @@
-import { tagColorList } from './utils/constant'
-const rootProp = ['paddingX', 'paddingY']
-
-//  样式类
-
-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'
-    }
-  }
-
-  //  构造函数
-
-  constructor(ctx, themeConfig) {
-    this.ctx = ctx
-    this.themeConfig = themeConfig
-  }
-
-  //  更新主题配置
-
-  updateThemeConfig(themeConfig) {
-    this.themeConfig = themeConfig
-  }
-
-  //  合并样式
-
-  merge(prop, root, isActive) {
-    // 三级及以下节点
-    let defaultConfig = this.themeConfig.node
-    if (root || rootProp.includes(prop)) {
-      // 直接使用最外层样式
-      defaultConfig = this.themeConfig
-    } else if (this.ctx.isGeneralization) {
-      // 概要节点
-      defaultConfig = this.themeConfig.generalization
-    } 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.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.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')
-      })
-  }
-
-  // 获取文本样式
-  getTextFontStyle() {
-    return { 
-      italic: this.merge('fontStyle') === 'italic', 
-      bold: this.merge('fontWeight'), 
-      fontSize: this.merge('fontSize'), 
-      fontFamily: this.merge('fontFamily')
-    }
-  }
-
-  //  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'
-    node.style.lineHeight = 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, fillNode) {
-    node.fill({ color: '#808080' })
-    fillNode.fill({ color: '#fff' })
-  }
-}
-
-export default Style

simple-mind-map/src/TextEdit.js

@@ -1,131 +0,0 @@
-import { getStrWithBrFromHtml } from './utils'
-
-//  节点文字编辑类
-export default class TextEdit {
-  //  构造函数
-  constructor(renderer) {
-    this.renderer = renderer
-    this.mindMap = renderer.mindMap
-    // 文本编辑框
-    this.textEditNode = null
-    // 文本编辑框是否显示
-    this.showTextEdit = false
-    this.bindEvent()
-  }
-
-  //  事件
-  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('F2', () => {
-      if (this.renderer.activeNodeList.length <= 0) {
-        return
-      }
-      this.show(this.renderer.activeNodeList[0])
-    })
-  }
-
-  //  注册临时快捷键
-  registerTmpShortcut() {
-    // 注册回车快捷键
-    this.mindMap.keyCommand.addShortcut('Enter', () => {
-      this.hideEditTextBox()
-    })
-  }
-
-  //  显示文本编辑框
-  show(node) {
-    let rect = node._textData.node.node.getBoundingClientRect()
-    if (this.mindMap.richText) {
-      this.mindMap.richText.showEditText(node, rect)
-      return
-    }
-    this.showEditTextBox(node, rect)
-  }
-
-  //  显示文本编辑框
-  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()
-      })
-      document.body.appendChild(this.textEditNode)
-    }
-    let scale = this.mindMap.view.scale
-    let lineHeight = node.style.merge('lineHeight')
-    let fontSize = node.style.merge('fontSize')
-    node.style.domText(this.textEditNode, scale)
-    this.textEditNode.innerHTML = node.nodeData.data.text
-      .split(/\n/gim)
-      .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'
-    this.textEditNode.style.transform = `translateY(${-(lineHeight * fontSize - fontSize) / 2 * scale}px)`
-    this.showTextEdit = true
-    // 选中文本
-    this.selectNodeText()
-  }
-
-  //  选中文本
-  selectNodeText() {
-    let selection = window.getSelection()
-    let range = document.createRange()
-    range.selectNodeContents(this.textEditNode)
-    selection.removeAllRanges()
-    selection.addRange(range)
-  }
-
-  //  隐藏文本编辑框
-  hideEditTextBox() {
-    if (this.mindMap.richText) {
-      return this.mindMap.richText.hideEditText()
-    }
-    if (!this.showTextEdit) {
-      return
-    }
-    this.renderer.activeNodeList.forEach(node => {
-      let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
-      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.showTextEdit = false
-  }
-}

simple-mind-map/src/View.js

@@ -1,193 +0,0 @@
-//  视图操作类
-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()
-  }
-
-  //  绑定
-  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 === 'zoom') {
-        switch (dir) {
-          // 鼠标滚轮，向上和向左，都是缩小
-          case 'up':
-          case 'left':
-            this.narrow()
-            break
-          // 鼠标滚轮，向下和向右，都是放大
-          case 'down':
-          case 'right':
-            this.enlarge()
-            break
-        }
-      } else {
-        switch (dir){
-          // 上移
-          case 'down':
-            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 下移
-          case 'up':
-            this.translateY(this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 右移
-          case 'left':
-            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 左移
-          case 'right':
-            this.translateX(this.mindMap.opt.mousewheelMoveStep)
-            break
-        }
-      }
-    })
-  }
-
-  //  获取当前变换状态数据
-  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)
-    }
-  }
-
-  //  平移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() {
-    this.scale = 1
-    this.x = 0
-    this.y = 0
-    this.transform()
-  }
-
-  //  缩小
-  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)
-  }
-
-  //  放大
-  enlarge() {
-    this.scale += this.mindMap.opt.scaleRatio
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
-
-  //  设置缩放
-  setScale(scale) {
-    this.scale = scale
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
-}
-
-export default View

simple-mind-map/src/constants/constant.js

@@ -0,0 +1,353 @@
+//  主题列表
+export const themeList = [
+  {
+    name: '默认',
+    value: 'default',
+    dark: false
+  },
+  {
+    name: '暗色2',
+    value: 'dark2',
+    dark: true
+  },
+  {
+    name: '天清绿',
+    value: 'skyGreen',
+    dark: false
+  },
+  {
+    name: '脑图经典2',
+    value: 'classic2',
+    dark: false
+  },
+  {
+    name: '脑图经典3',
+    value: 'classic3',
+    dark: false
+  },
+  {
+    name: '经典绿',
+    value: 'classicGreen',
+    dark: false
+  },
+  {
+    name: '经典蓝',
+    value: 'classicBlue',
+    dark: false
+  },
+  {
+    name: '天空蓝',
+    value: 'blueSky',
+    dark: false
+  },
+  {
+    name: '脑残粉',
+    value: 'brainImpairedPink',
+    dark: false
+  },
+  {
+    name: '暗色',
+    value: 'dark',
+    dark: true
+  },
+  {
+    name: '泥土黄',
+    value: 'earthYellow',
+    dark: false
+  },
+  {
+    name: '清新绿',
+    value: 'freshGreen',
+    dark: false
+  },
+  {
+    name: '清新红',
+    value: 'freshRed',
+    dark: false
+  },
+  {
+    name: '浪漫紫',
+    value: 'romanticPurple',
+    dark: false
+  },
+  {
+    name: '粉红葡萄',
+    value: 'pinkGrape',
+    dark: false
+  },
+  {
+    name: '薄荷',
+    value: 'mint',
+    dark: false
+  },
+  {
+    name: '金色vip',
+    value: 'gold',
+    dark: false
+  },
+  {
+    name: '活力橙',
+    value: 'vitalityOrange',
+    dark: false
+  },
+  {
+    name: '绿叶',
+    value: 'greenLeaf',
+    dark: false
+  },
+  {
+    name: '脑图经典',
+    value: 'classic',
+    dark: true
+  },
+  {
+    name: '脑图经典4',
+    value: 'classic4',
+    dark: false
+  },
+  {
+    name: '小黄人',
+    value: 'minions',
+    dark: false
+  },
+  {
+    name: '简约黑',
+    value: 'simpleBlack',
+    dark: false
+  },
+  {
+    name: '课程绿',
+    value: 'courseGreen',
+    dark: false
+  },
+  {
+    name: '咖啡',
+    value: 'coffee',
+    dark: false
+  },
+  {
+    name: '红色精神',
+    value: 'redSpirit',
+    dark: false
+  },
+  {
+    name: '黑色幽默',
+    value: 'blackHumour',
+    dark: true
+  },
+  {
+    name: '深夜办公室',
+    value: 'lateNightOffice',
+    dark: true
+  },
+  {
+    name: '黑金',
+    value: 'blackGold',
+    dark: true
+  },
+  {
+    name: '牛油果',
+    value: 'avocado',
+    dark: false
+  },
+  {
+    name: '秋天',
+    value: 'autumn',
+    dark: false
+  },
+  {
+    name: '橙汁',
+    value: 'orangeJuice',
+    dark: true
+  }
+]
+
+// 常量
+export const CONSTANTS = {
+  CHANGE_THEME: 'changeTheme',
+  CHANGE_LAYOUT: 'changeLayout',
+  SET_DATA: 'setData',
+  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
+  MODE: {
+    READONLY: 'readonly',
+    EDIT: 'edit'
+  },
+  LAYOUT: {
+    LOGICAL_STRUCTURE: 'logicalStructure',
+    MIND_MAP: 'mindMap',
+    ORGANIZATION_STRUCTURE: 'organizationStructure',
+    CATALOG_ORGANIZATION: 'catalogOrganization',
+    TIMELINE: 'timeline',
+    TIMELINE2: 'timeline2',
+    FISHBONE: 'fishbone',
+    VERTICAL_TIMELINE: 'verticalTimeline'
+  },
+  DIR: {
+    UP: 'up',
+    LEFT: 'left',
+    DOWN: 'down',
+    RIGHT: 'right'
+  },
+  KEY_DIR: {
+    LEFT: 'Left',
+    UP: 'Up',
+    RIGHT: 'Right',
+    DOWN: 'Down'
+  },
+  SHAPE: {
+    RECTANGLE: 'rectangle',
+    DIAMOND: 'diamond',
+    PARALLELOGRAM: 'parallelogram',
+    ROUNDED_RECTANGLE: 'roundedRectangle',
+    OCTAGONAL_RECTANGLE: 'octagonalRectangle',
+    OUTER_TRIANGULAR_RECTANGLE: 'outerTriangularRectangle',
+    INNER_TRIANGULAR_RECTANGLE: 'innerTriangularRectangle',
+    ELLIPSE: 'ellipse',
+    CIRCLE: 'circle'
+  },
+  MOUSE_WHEEL_ACTION: {
+    ZOOM: 'zoom',
+    MOVE: 'move'
+  },
+  INIT_ROOT_NODE_POSITION: {
+    LEFT: 'left',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    CENTER: 'center'
+  },
+  LAYOUT_GROW_DIR: {
+    LEFT: 'left',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom'
+  },
+  PASTE_TYPE: {
+    CLIP_BOARD: 'clipBoard',
+    CANVAS: 'canvas'
+  },
+  SCROLL_BAR_DIR: {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal'
+  }
+}
+
+export const initRootNodePositionMap = {
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.LEFT]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.TOP]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.RIGHT]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.BOTTOM]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5
+}
+
+//  布局结构列表
+export const layoutList = [
+  {
+    name: '逻辑结构图',
+    value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
+  },
+  {
+    name: '思维导图',
+    value: CONSTANTS.LAYOUT.MIND_MAP
+  },
+  {
+    name: '组织结构图',
+    value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE
+  },
+  {
+    name: '目录组织图',
+    value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION
+  },
+  {
+    name: '时间轴',
+    value: CONSTANTS.LAYOUT.TIMELINE
+  },
+  {
+    name: '时间轴2',
+    value: CONSTANTS.LAYOUT.TIMELINE2
+  },
+  {
+    name: '竖向时间轴',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE
+  },
+  {
+    name: '鱼骨图',
+    value: CONSTANTS.LAYOUT.FISHBONE
+  }
+]
+export const layoutValueList = [
+  CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  CONSTANTS.LAYOUT.MIND_MAP,
+  CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
+  CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
+  CONSTANTS.LAYOUT.TIMELINE,
+  CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
+  CONSTANTS.LAYOUT.FISHBONE
+]
+
+// 节点数据中非样式的字段
+export const nodeDataNoStylePropList = [
+  'text',
+  'image',
+  'imageTitle',
+  'imageSize',
+  'icon',
+  'tag',
+  'hyperlink',
+  'hyperlinkTitle',
+  'note',
+  'expand',
+  'isActive',
+  'generalization',
+  'richText',
+  'resetRichText',
+  'uid',
+  'activeStyle',
+  'associativeLineTargets',
+  'associativeLineTargetControlOffsets',
+  'associativeLinePoint',
+  'associativeLineText'
+]
+
+// 数据缓存
+export const commonCaches = {
+  measureCustomNodeContentSizeEl: null,
+  measureRichtextNodeTextSizeEl: null
+}
+
+// 错误类型
+export const ERROR_TYPES = {
+  READ_CLIPBOARD_ERROR: 'read_clipboard_error',
+  PARSE_PASTE_DATA_ERROR: 'parse_paste_data_error',
+  CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR: 'custom_handle_clipboard_text_error',
+  LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error',
+  BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error',
+  EXPORT_ERROR: 'export_error'
+}
+
+// a4纸的宽高
+export const a4Size = {
+  width: 592.28,
+  height: 841.89
+}
+
+// css
+export const cssContent = `
+  /* 鼠标hover和激活时渲染的矩形 */
+  .smm-hover-node{
+    display: none;
+    opacity: 0.6;
+    stroke-width: 1;
+  }
+
+  .smm-node:not(.smm-node-dragging):hover .smm-hover-node{
+    display: block;
+  }
+
+  .smm-node.active .smm-hover-node{
+    display: block;
+    opacity: 1;
+    stroke-width: 2;
+  }
+`

simple-mind-map/src/constants/defaultOptions.js

@@ -0,0 +1,223 @@
+import { CONSTANTS } from './constant'
+
+// 默认选项配置
+export const defaultOpt = {
+  // 是否只读
+  readonly: false,
+  // 布局
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
+  // 主题
+  theme: 'default', // 内置主题：default（默认主题）
+  // 主题配置，会和所选择的主题进行合并
+  themeConfig: {},
+  // 放大缩小的增量比例
+  scaleRatio: 0.2,
+  // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
+  mouseScaleCenterUseMousePosition: true,
+  // 最多显示几个标签
+  maxTag: 5,
+  // 展开收缩按钮尺寸
+  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,
+  // 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
+  mousewheelZoomActionReverse: false,
+  // 默认插入的二级节点的文字
+  defaultInsertSecondLevelNodeText: '二级节点',
+  // 默认插入的二级以下节点的文字
+  defaultInsertBelowSecondLevelNodeText: '分支主题',
+  // 展开收起按钮的颜色
+  expandBtnStyle: {
+    color: '#808080',
+    fill: '#fff',
+    fontSize: 13,
+    strokeColor: '#333333'
+  },
+  // 自定义展开收起按钮的图标
+  expandBtnIcon: {
+    open: '', // svg字符串
+    close: ''
+  },
+  // 处理收起节点数量
+  expandBtnNumHandler: num => {
+    return num
+  },
+  // 是否显示带数量的收起按钮
+  isShowExpandNum: true,
+  // 是否只有当鼠标在画布内才响应快捷键事件
+  enableShortcutOnlyWhenMouseInSvg: true,
+  // 初始根节点的位置
+  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: '关联',
+  // 思维导图适应画布大小时的内边距
+  fitPadding: 50,
+  // 是否开启按住ctrl键多选节点功能
+  enableCtrlKeyNodeSelection: true,
+  // 设置为左键多选节点，右键拖动画布
+  useLeftKeySelectionRightKeyDrag: false,
+  // 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
+  beforeTextEdit: null,
+  // 是否开启自定义节点内容
+  isUseCustomNodeContent: false,
+  // 自定义返回节点内容的方法
+  customCreateNodeContent: null,
+  // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
+  customInnerElsAppendTo: null,
+  // 拖拽元素时，指示元素新位置的块的最大高度
+  nodeDragPlaceholderMaxSize: 20,
+  // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
+  // 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
+  enableAutoEnterTextEditWhenKeydown: false,
+  // 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果
+  // 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果
+  richTextEditFakeInPlace: false,
+  // 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：
+  /*
+    1.返回一个纯文本，那么会直接以该文本创建一个子节点
+
+    2.返回一个节点对象，格式如下：
+      {
+        // 代表是simple-mind-map格式的数据
+        simpleMindMap: true,
+        // 节点数据，同simple-mind-map节点数据格式
+        data: {
+          data: {
+            text: ''
+          },
+          children: []
+        }
+      }
+  */
+  // 如果你的处理逻辑存在异步逻辑，也可以返回一个promise
+  customHandleClipboardText: null,
+  // 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放
+  disableMouseWheelZoom: false,
+  // 错误处理函数
+  errorHandler: (code, error) => {
+    console.error(code, error)
+  },
+  // 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖
+  // 如果不覆盖，会发生偏移问题
+  resetCss: `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+  `,
+  // 是否在鼠标双击时回到根节点，也就是让根节点居中显示
+  enableDblclickBackToRootNode: false,
+  // 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
+  minExportImgCanvasScale: 2,
+  // 节点鼠标hover和激活时显示的矩形边框的颜色
+  hoverRectColor: 'rgb(94, 200, 248)',
+  // 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
+  hoverRectPadding: 2,
+  // 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中
+  selectTextOnEnterEditText: false,
+  // 删除节点后激活相邻节点
+  deleteNodeActive: true,
+  // 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
+  autoMoveWhenMouseInEdgeOnDrag: true,
+  // 是否首次加载fit view
+  fit: false,
+  // 拖拽多个节点时随鼠标移动的示意矩形的样式配置
+  dragMultiNodeRectConfig: {
+    width: 40,
+    height: 20,
+    fill: '' // 填充颜色，如果不传默认使用连线的颜色
+  },
+  // 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色
+  dragPlaceholderRectFill: '',
+  // 节点拖拽时的透明度配置
+  dragOpacityConfig: {
+    cloneNodeOpacity: 0.5, // 跟随鼠标移动的克隆节点或矩形的透明度
+    beingDragNodeOpacity: 0.3 // 被拖拽节点的透明度
+  },
+  // 自定义标签的颜色
+  // {pass: 'green, unpass: 'red'}
+  tagsColorMap: {},
+  // 节点协作样式配置
+  cooperateStyle: {
+    avatarSize: 22,// 头像大小
+    fontSize: 12,// 如果是文字头像，那么文字的大小
+  },
+  // 关联线是否始终显示在节点上层
+  // false：即创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方
+  associativeLineIsAlwaysAboveNode: true,
+  // 插入概要的默认文本
+  defaultGeneralizationText: '概要',
+  // 粘贴文本的方式创建新节点时，控制是否按换行自动分割节点，即如果存在换行，那么会根据换行创建多个节点，否则只会创建一个节点
+  // 可以传递一个函数，返回promise，resolve代表根据换行分割，reject代表忽略换行
+  handleIsSplitByWrapOnPasteCreateNewNode: null,
+  // 多少时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms
+  addHistoryTime: 100
+}

simple-mind-map/src/core/command/Command.js

@@ -1,4 +1,4 @@
-import { copyRenderTree, simpleDeepClone, nextTick } from './utils'
+import { copyRenderTree, simpleDeepClone, throttle } from '../../utils'
 
 //  命令类
 class Command {
@@ -11,7 +11,11 @@ class Command {
     this.activeHistoryIndex = 0
     // 注册快捷键
     this.registerShortcutKeys()
-    this.addHistory = nextTick(this.addHistory, this)
+    this.addHistory = throttle(
+      this.addHistory,
+      this.mindMap.opt.addHistoryTime,
+      this
+    )
   }
 
   //  清空历史数据
@@ -37,7 +41,11 @@ class Command {
       this.commands[name].forEach(fn => {
         fn(...args)
       })
-      if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
+      if (
+        ['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(
+          name
+        )
+      ) {
         return
       }
       this.addHistory()
@@ -78,12 +86,20 @@ class Command {
     }
     let data = this.getCopyData()
     // 此次数据和上次一样则不重复添加
-    if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
+    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', data)
     this.mindMap.emit(
@@ -119,7 +135,11 @@ class Command {
     let len = this.history.length
     if (this.activeHistoryIndex + step <= len - 1) {
       this.activeHistoryIndex += step
-      this.mindMap.emit('back_forward', this.activeHistoryIndex)
+      this.mindMap.emit(
+        'back_forward',
+        this.activeHistoryIndex,
+        this.history.length
+      )
       let data = simpleDeepClone(this.history[this.activeHistoryIndex])
       this.mindMap.emit('data_change', data)
       return data
@@ -130,6 +150,21 @@ class Command {
   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)
+        })
+      }
+    }
+    walk(data)
+    return data
+  }
 }
 
 export default Command

simple-mind-map/src/core/command/KeyCommand.js

@@ -1,4 +1,4 @@
-import { keyMap } from './utils/keyMap'
+import { keyMap } from './keyMap'
 //  快捷按键、命令处理类
 export default class KeyCommand {
   //  构造函数
@@ -10,6 +10,7 @@ export default class KeyCommand {
     }
     this.shortcutMapCache = {}
     this.isPause = false
+    this.isInSvg = false
     this.bindEvent()
   }
 
@@ -37,14 +38,37 @@ export default class KeyCommand {
 
   //  绑定事件
   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) {
+      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()
+          // 粘贴事件不组织，因为要监听paste事件
+          if (!this.checkKey(e, 'Control+v')) {
+            e.stopPropagation()
+            e.preventDefault()
+          }
           this.shortcutMap[key].forEach(fn => {
             fn()
           })
@@ -91,6 +115,11 @@ export default class KeyCommand {
     return arr
   }
 
+  // 判断是否按下了组合键
+  hasCombinationKey(e) {
+    return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey
+  }
+
   //  获取快捷键对应的键值数组
   getKeyCodeArr(key) {
     let keyArr = key.split(/\s*\+\s*/)

simple-mind-map/src/core/event/Event.js

@@ -1,4 +1,5 @@
 import EventEmitter from 'eventemitter3'
+import { CONSTANTS } from '../../constants/constant'
 
 //  事件类
 class Event extends EventEmitter {
@@ -8,6 +9,8 @@ class Event extends EventEmitter {
     this.opt = opt
     this.mindMap = opt.mindMap
     this.isLeftMousedown = false
+    this.isRightMousedown = false
+    this.isMiddleMousedown = false
     this.mousedownPos = {
       x: 0,
       y: 0
@@ -26,6 +29,7 @@ class Event extends EventEmitter {
 
   //  绑定函数上下文
   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)
@@ -34,10 +38,13 @@ class Event extends EventEmitter {
     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)
@@ -45,17 +52,22 @@ class Event extends EventEmitter {
     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)
   }
 
@@ -64,6 +76,11 @@ class Event extends EventEmitter {
     this.emit('draw_click', e)
   }
 
+  // 页面的单击事件
+  onBodyClick(e) {
+    this.emit('body_click', e)
+  }
+
   //   svg画布的鼠标按下事件
   onSvgMousedown(e) {
     this.emit('svg_mousedown', e)
@@ -71,10 +88,13 @@ class Event extends EventEmitter {
 
   //  鼠标按下事件
   onMousedown(e) {
-    // e.preventDefault()
     // 鼠标左键
     if (e.which === 1) {
       this.isLeftMousedown = true
+    } else if (e.which === 3) {
+      this.isRightMousedown = true
+    } else if (e.which === 2) {
+      this.isMiddleMousedown = true
     }
     this.mousedownPos.x = e.clientX
     this.mousedownPos.y = e.clientY
@@ -83,13 +103,19 @@ class Event extends EventEmitter {
 
   //  鼠标移动事件
   onMousemove(e) {
-    // e.preventDefault()
+    let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
     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) {
+    if (
+      this.isMiddleMousedown ||
+      (useLeftKeySelectionRightKeyDrag
+        ? this.isRightMousedown
+        : this.isLeftMousedown)
+    ) {
+      e.preventDefault()
       this.emit('drag', e, this)
     }
   }
@@ -97,6 +123,8 @@ class Event extends EventEmitter {
   //  鼠标松开事件
   onMouseup(e) {
     this.isLeftMousedown = false
+    this.isRightMousedown = false
+    this.isMiddleMousedown = false
     this.emit('mouseup', e, this)
   }
 
@@ -107,17 +135,23 @@ class Event extends EventEmitter {
     let dir
     // 解决mac触控板双指缩放方向相反的问题
     if (e.ctrlKey) {
-      if (e.deltaY > 0) dir = 'up'
-      if (e.deltaY < 0) dir = 'down'
-      if (e.deltaX > 0) dir = 'left'
-      if (e.deltaX < 0) dir = 'right'
+      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 = 'up'
-      if ((e.wheelDeltaY || e.detail) < 0) dir = 'down'
-      if ((e.wheelDeltaX || e.detail) > 0) dir = 'left'
-      if ((e.wheelDeltaX || e.detail) < 0) dir = 'right'
+      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
     }
-    this.emit('mousewheel', e, dir, this)
+    // 判断是否是触控板
+    let isTouchPad = false
+    // mac、windows
+    if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+      isTouchPad = true
+    }
+    this.emit('mousewheel', e, dir, this, isTouchPad)
   }
 
   //  鼠标右键菜单事件
@@ -130,6 +164,16 @@ class Event extends EventEmitter {
   onKeyup(e) {
     this.emit('keyup', e)
   }
+
+  // 进入
+  onMouseenter(e) {
+    this.emit('svg_mouseenter', e)
+  }
+
+  // 离开
+  onMouseleave(e) {
+    this.emit('svg_mouseleave', e)
+  }
 }
 
 export default Event

simple-mind-map/src/core/render/TextEdit.js

@@ -0,0 +1,245 @@
+import {
+  getStrWithBrFromHtml,
+  checkNodeOuter,
+  focusInput,
+  selectAllInput,
+  htmlEscape
+} from '../../utils'
+import { ERROR_TYPES } from '../../constants/constant'
+
+//  节点文字编辑类
+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)
+    // // 监听按键事件，判断是否自动进入文本编辑模式
+    if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown) {
+      window.addEventListener('keydown', e => {
+        const activeNodeList = this.mindMap.renderer.activeNodeList
+        if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
+        const node = activeNodeList[0]
+        // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
+        if (node && this.checkIsAutoEnterTextEditKey(e)) {
+          this.show(node, e, false, true)
+        }
+      })
+    }
+  }
+
+  // 判断是否是自动进入文本编模式的按钮
+  checkIsAutoEnterTextEditKey(e) {
+    const keyCode = e.keyCode
+    return (
+      (keyCode === 229 ||
+        (keyCode >= 65 && keyCode <= 90) ||
+        (keyCode >= 48 && keyCode <= 57)) &&
+      !this.mindMap.keyCommand.hasCombinationKey(e)
+    )
+  }
+
+  //  注册临时快捷键
+  registerTmpShortcut() {
+    // 注册回车快捷键
+    this.mindMap.keyCommand.addShortcut('Enter', () => {
+      this.hideEditTextBox()
+    })
+    this.mindMap.keyCommand.addShortcut('Tab', () => {
+      this.hideEditTextBox()
+    })
+  }
+
+  //  显示文本编辑框
+  // isInserting：是否是刚创建的节点
+  // isFromKeyDown：是否是在按键事件进入的编辑
+  async show(node, e, isInserting = false, isFromKeyDown = false) {
+    // 使用了自定义节点内容那么不响应编辑事件
+    if (node.isUseCustomNodeContent()) {
+      return
+    }
+    let { beforeTextEdit } = this.mindMap.opt
+    if (typeof beforeTextEdit === 'function') {
+      let isShow = false
+      try {
+        isShow = await beforeTextEdit(node, isInserting)
+      } catch (error) {
+        isShow = false
+        this.mindMap.opt.errorHandler(ERROR_TYPES.BEFORE_TEXT_EDIT_ERROR, error)
+      }
+      if (!isShow) return
+    }
+    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, isInserting, isFromKeyDown)
+      return
+    }
+    this.showEditTextBox(node, rect, isInserting, isFromKeyDown)
+  }
+
+  // 处理画布缩放
+  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
+    }
+    this.show(this.currentNode)
+  }
+
+  //  显示文本编辑框
+  showEditTextBox(node, rect, isInserting, isFromKeyDown) {
+    if (this.showTextEdit) return
+    const { nodeTextEditZIndex, textAutoWrapWidth, selectTextOnEnterEditText } =
+      this.mindMap.opt
+    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()
+      })
+      this.textEditNode.addEventListener('mousedown', e => {
+        e.stopPropagation()
+      })
+      this.textEditNode.addEventListener('keydown', e => {
+        if (this.checkIsAutoEnterTextEditKey(e)) {
+          e.stopPropagation()
+        }
+      })
+      const targetNode =
+        this.mindMap.opt.customInnerElsAppendTo || document.body
+      targetNode.appendChild(this.textEditNode)
+    }
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    let textLines = (this.cacheEditingText || node.getData('text'))
+      .split(/\n/gim)
+      .map(item => {
+        return htmlEscape(item)
+      })
+    let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
+    node.style.domText(this.textEditNode, scale, isMultiLine)
+    this.textEditNode.style.zIndex = 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 = textAutoWrapWidth * scale + 'px'
+    if (isMultiLine && lineHeight !== 1) {
+      this.textEditNode.style.transform = `translateY(${
+        -((lineHeight * fontSize - fontSize) / 2) * scale
+      }px)`
+    }
+    this.showTextEdit = true
+    // 选中文本
+    // if (!this.cacheEditingText) {
+    //   selectAllInput(this.textEditNode)
+    // }
+    if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) {
+      selectAllInput(this.textEditNode)
+    } else {
+      focusInput(this.textEditNode)
+    }
+    this.cacheEditingText = ''
+  }
+
+  // 获取当前正在编辑的内容
+  getEditText() {
+    return getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  }
+
+  //  隐藏文本编辑框
+  hideEditTextBox() {
+    this.currentNode = null
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
+    if (!this.showTextEdit) {
+      return
+    }
+    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
+  }
+}

simple-mind-map/src/core/render/node/Node.js

@@ -0,0 +1,970 @@
+import Style from './Style'
+import Shape from './Shape'
+import { G, ForeignObject, SVG, Rect } from '@svgdotjs/svg.js'
+import nodeGeneralizationMethods from './nodeGeneralization'
+import nodeExpandBtnMethods from './nodeExpandBtn'
+import nodeCommandWrapsMethods from './nodeCommandWraps'
+import nodeCreateContentsMethods from './nodeCreateContents'
+import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect'
+import nodeCooperateMethods from './nodeCooperate'
+import { CONSTANTS } from '../../../constants/constant'
+
+//  节点类
+class Node {
+  //  构造函数
+  constructor(opt = {}) {
+    // 节点数据
+    this.nodeData = this.handleData(opt.data || {})
+    // uid
+    this.uid = opt.uid
+    // 控制实例
+    this.mindMap = opt.mindMap
+    // 渲染实例
+    this.renderer = opt.renderer
+    // 渲染器
+    this.draw = this.mindMap.draw
+    this.nodeDraw = this.mindMap.nodeDraw
+    this.lineDraw = this.mindMap.lineDraw
+    // 样式实例
+    this.style = new Style(this)
+    // 形状实例
+    this.shapeInstance = new Shape(this)
+    this.shapePadding = {
+      paddingX: 0,
+      paddingY: 0
+    }
+    // 是否是根节点
+    this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
+    // 是否是概要节点
+    this.isGeneralization =
+      opt.isGeneralization === undefined ? false : opt.isGeneralization
+    this.generalizationBelongNode = null
+    // 节点层级
+    this.layerIndex = opt.layerIndex === undefined ? 0 : opt.layerIndex
+    // 节点宽
+    this.width = opt.width || 0
+    // 节点高
+    this.height = opt.height || 0
+    // left
+    this._left = opt.left || 0
+    // top
+    this._top = opt.top || 0
+    // 自定义位置
+    this.customLeft = opt.data.data.customLeft || undefined
+    this.customTop = opt.data.data.customTop || undefined
+    // 是否正在拖拽中
+    this.isDrag = false
+    // 父节点
+    this.parent = opt.parent || null
+    // 子节点
+    this.children = opt.children || []
+    // 当前同时操作该节点的用户列表
+    this.userList = []
+    // 节点内容的容器
+    this.group = null
+    this.shapeNode = null // 节点形状节点
+    this.hoverNode = null // 节点hover和激活的节点
+    // 节点内容对象
+    this._customNodeContent = null
+    this._imgData = null
+    this._iconData = null
+    this._textData = null
+    this._hyperlinkData = null
+    this._tagData = null
+    this._noteData = null
+    this.noteEl = null
+    this._expandBtn = null
+    this._lastExpandBtnType = null
+    this._showExpandBtn = false
+    this._openExpandNode = null
+    this._closeExpandNode = null
+    this._fillExpandNode = null
+    this._userListGroup = null
+    this._lines = []
+    this._generalizationLine = null
+    this._generalizationNode = null
+    this._unVisibleRectRegionNode = null
+    this._isMouseenter = false
+    // 尺寸信息
+    this._rectInfo = {
+      imgContentWidth: 0,
+      imgContentHeight: 0,
+      textContentWidth: 0,
+      textContentHeight: 0
+    }
+    // 概要节点的宽高
+    this._generalizationNodeWidth = 0
+    this._generalizationNodeHeight = 0
+    // 各种文字信息的间距
+    this.textContentItemMargin = this.mindMap.opt.textContentMargin
+    // 图片和文字节点的间距
+    this.blockContentMargin = this.mindMap.opt.imgTextMargin
+    // 展开收缩按钮尺寸
+    this.expandBtnSize = this.mindMap.opt.expandBtnSize
+    // 是否是多选节点
+    this.isMultipleChoice = false
+    // 是否需要重新layout
+    this.needLayout = false
+    // 当前是否是隐藏状态
+    this.isHide = false
+    // 概要相关方法
+    Object.keys(nodeGeneralizationMethods).forEach(item => {
+      this[item] = nodeGeneralizationMethods[item].bind(this)
+    })
+    // 展开收起按钮相关方法
+    Object.keys(nodeExpandBtnMethods).forEach(item => {
+      this[item] = nodeExpandBtnMethods[item].bind(this)
+    })
+    // 展开收起按钮占位元素相关方法
+    Object.keys(nodeExpandBtnPlaceholderRectMethods).forEach(item => {
+      this[item] = nodeExpandBtnPlaceholderRectMethods[item].bind(this)
+    })
+    // 命令的相关方法
+    Object.keys(nodeCommandWrapsMethods).forEach(item => {
+      this[item] = nodeCommandWrapsMethods[item].bind(this)
+    })
+    // 创建节点内容的相关方法
+    Object.keys(nodeCreateContentsMethods).forEach(item => {
+      this[item] = nodeCreateContentsMethods[item].bind(this)
+    })
+    // 协同相关
+    if (this.mindMap.cooperate) {
+      Object.keys(nodeCooperateMethods).forEach(item => {
+        this[item] = nodeCooperateMethods[item].bind(this)
+      })
+    }
+    // 初始化
+    this.getSize()
+  }
+
+  // 支持自定义位置
+  get left() {
+    return this.customLeft || this._left
+  }
+
+  set left(val) {
+    this._left = val
+  }
+
+  get top() {
+    return this.customTop || this._top
+  }
+
+  set top(val) {
+    this._top = val
+  }
+
+  //  复位部分布局时会重新设置的数据
+  reset() {
+    this.children = []
+    this.parent = null
+    this.isRoot = false
+    this.layerIndex = 0
+    this.left = 0
+    this.top = 0
+  }
+
+  //  处理数据
+  handleData(data) {
+    data.data.expand = data.data.expand === false ? false : true
+    data.data.isActive = data.data.isActive === true ? true : false
+    data.children = data.children || []
+    return data
+  }
+
+  //  创建节点的各个内容对象数据
+  createNodeData() {
+    // 自定义节点内容
+    let { isUseCustomNodeContent, customCreateNodeContent } = this.mindMap.opt
+    if (isUseCustomNodeContent && customCreateNodeContent) {
+      this._customNodeContent = customCreateNodeContent(this)
+    }
+    // 如果没有返回内容，那么还是使用内置的节点内容
+    if (this._customNodeContent) return
+    this._imgData = this.createImgNode()
+    this._iconData = this.createIconNode()
+    this._textData = this.createTextNode()
+    this._hyperlinkData = this.createHyperlinkNode()
+    this._tagData = this.createTagNode()
+    this._noteData = this.createNoteNode()
+  }
+
+  //  计算节点的宽高
+  getSize() {
+    this.updateGeneralization()
+    this.createNodeData()
+    let { width, height } = this.getNodeRect()
+    // 判断节点尺寸是否有变化
+    let changed = this.width !== width || this.height !== height
+    this.width = width
+    this.height = height
+    return changed
+  }
+
+  //  计算节点尺寸信息
+  getNodeRect() {
+    // 自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let rect = this.measureCustomNodeContentSize(this._customNodeContent)
+      return {
+        width: rect.width,
+        height: rect.height
+      }
+    }
+    // 宽高
+    let imgContentWidth = 0
+    let imgContentHeight = 0
+    let textContentWidth = 0
+    let textContentHeight = 0
+    // 存在图片
+    if (this._imgData) {
+      this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width
+      this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height
+    }
+    // 图标
+    if (this._iconData.length > 0) {
+      textContentWidth += this._iconData.reduce((sum, cur) => {
+        textContentHeight = Math.max(textContentHeight, cur.height)
+        return (sum += cur.width + this.textContentItemMargin)
+      }, 0)
+    }
+    // 文字
+    if (this._textData) {
+      textContentWidth += this._textData.width
+      textContentHeight = Math.max(textContentHeight, this._textData.height)
+    }
+    // 超链接
+    if (this._hyperlinkData) {
+      textContentWidth += this._hyperlinkData.width
+      textContentHeight = Math.max(
+        textContentHeight,
+        this._hyperlinkData.height
+      )
+    }
+    // 标签
+    if (this._tagData.length > 0) {
+      textContentWidth += this._tagData.reduce((sum, cur) => {
+        textContentHeight = Math.max(textContentHeight, cur.height)
+        return (sum += cur.width + this.textContentItemMargin)
+      }, 0)
+    }
+    // 备注
+    if (this._noteData) {
+      textContentWidth += this._noteData.width
+      textContentHeight = Math.max(textContentHeight, this._noteData.height)
+    }
+    // 文字内容部分的尺寸
+    this._rectInfo.textContentWidth = textContentWidth
+    this._rectInfo.textContentHeight = textContentHeight
+    // 间距
+    let margin =
+      imgContentHeight > 0 && textContentHeight > 0
+        ? this.blockContentMargin
+        : 0
+    let { paddingX, paddingY } = this.getPaddingVale()
+    // 纯内容宽高
+    let _width = Math.max(imgContentWidth, textContentWidth)
+    let _height = imgContentHeight + textContentHeight
+    // 计算节点形状需要的附加内边距
+    let { paddingX: shapePaddingX, paddingY: shapePaddingY } =
+      this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
+    this.shapePadding.paddingX = shapePaddingX
+    this.shapePadding.paddingY = shapePaddingY
+    // 边框宽度，因为边框是以中线向两端发散，所以边框会超出节点
+    const borderWidth = this.getBorderWidth()
+    return {
+      width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth,
+      height: _height + paddingY * 2 + margin + shapePaddingY * 2 + borderWidth
+    }
+  }
+
+  //  定位节点内容
+  layout() {
+    // 清除之前的内容
+    this.group.clear()
+    const { hoverRectPadding } = this.mindMap.opt
+    let { width, height, textContentItemMargin } = this
+    let { paddingY } = this.getPaddingVale()
+    const halfBorderWidth = this.getBorderWidth() / 2
+    paddingY += this.shapePadding.paddingY + halfBorderWidth
+    // 节点形状
+    this.shapeNode = this.shapeInstance.createShape()
+    this.shapeNode.addClass('smm-node-shape')
+    this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
+    this.style.shape(this.shapeNode)
+    this.group.add(this.shapeNode)
+    // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
+    this.renderExpandBtnPlaceholderRect()
+    // 创建协同头像节点
+    if (this.createUserListNode) this.createUserListNode()
+    // 概要节点添加一个带所属节点id的类名
+    if (this.isGeneralization && this.generalizationBelongNode) {
+      this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
+    }
+    // 激活hover和激活边框
+    const addHoverNode = () => {
+      this.hoverNode = new Rect()
+        .size(width + hoverRectPadding * 2, height + hoverRectPadding * 2)
+        .x(-hoverRectPadding)
+        .y(-hoverRectPadding)
+      this.hoverNode.addClass('smm-hover-node')
+      this.style.hoverNode(this.hoverNode, width, height)
+      this.group.add(this.hoverNode)
+    }
+    // 如果存在自定义节点内容，那么使用自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let foreignObject = new ForeignObject()
+      foreignObject.width(width)
+      foreignObject.height(height)
+      foreignObject.add(this._customNodeContent)
+      this.group.add(foreignObject)
+      addHoverNode()
+      return
+    }
+    // 图片节点
+    let imgHeight = 0
+    if (this._imgData) {
+      imgHeight = this._imgData.height
+      this.group.add(this._imgData.node)
+      this._imgData.node.cx(width / 2).y(paddingY)
+    }
+    // 内容节点
+    let textContentNested = new G()
+    let textContentOffsetX = 0
+    // icon
+    let iconNested = new G()
+    if (this._iconData && this._iconData.length > 0) {
+      let iconLeft = 0
+      this._iconData.forEach(item => {
+        item.node
+          .x(textContentOffsetX + iconLeft)
+          .y((this._rectInfo.textContentHeight - item.height) / 2)
+        iconNested.add(item.node)
+        iconLeft += item.width + textContentItemMargin
+      })
+      textContentNested.add(iconNested)
+      textContentOffsetX += iconLeft
+    }
+    // 文字
+    if (this._textData) {
+      this._textData.node.attr('data-offsetx', textContentOffsetX)
+      this._textData.node.x(textContentOffsetX).y(0)
+      textContentNested.add(this._textData.node)
+      textContentOffsetX += this._textData.width + textContentItemMargin
+    }
+    // 超链接
+    if (this._hyperlinkData) {
+      this._hyperlinkData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._hyperlinkData.height) / 2)
+      textContentNested.add(this._hyperlinkData.node)
+      textContentOffsetX += this._hyperlinkData.width + textContentItemMargin
+    }
+    // 标签
+    let tagNested = new G()
+    if (this._tagData && this._tagData.length > 0) {
+      let tagLeft = 0
+      this._tagData.forEach(item => {
+        item.node
+          .x(textContentOffsetX + tagLeft)
+          .y((this._rectInfo.textContentHeight - item.height) / 2)
+        tagNested.add(item.node)
+        tagLeft += item.width + textContentItemMargin
+      })
+      textContentNested.add(tagNested)
+      textContentOffsetX += tagLeft
+    }
+    // 备注
+    if (this._noteData) {
+      this._noteData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._noteData.height) / 2)
+      textContentNested.add(this._noteData.node)
+      textContentOffsetX += this._noteData.width
+    }
+    // 文字内容整体
+    textContentNested.translate(
+      width / 2 - textContentNested.bbox().width / 2,
+      imgHeight +
+        paddingY +
+        (imgHeight > 0 && this._rectInfo.textContentHeight > 0
+          ? this.blockContentMargin
+          : 0)
+    )
+    this.group.add(textContentNested)
+    addHoverNode()
+  }
+
+  // 给节点绑定事件
+  bindGroupEvent() {
+    // 单击事件，选中节点
+    this.group.on('click', e => {
+      this.mindMap.emit('node_click', this, e)
+      if (this.isMultipleChoice) {
+        e.stopPropagation()
+        this.isMultipleChoice = false
+        return
+      }
+      this.active(e)
+    })
+    this.group.on('mousedown', e => {
+      const {
+        readonly,
+        enableCtrlKeyNodeSelection,
+        useLeftKeySelectionRightKeyDrag
+      } = this.mindMap.opt
+      // 只读模式不需要阻止冒泡
+      if (!readonly) {
+        if (this.isRoot) {
+          // 根节点，右键拖拽画布模式下不需要阻止冒泡
+          if (e.which === 3 && !useLeftKeySelectionRightKeyDrag) {
+            e.stopPropagation()
+          }
+        } else {
+          // 非根节点，且按下的是非鼠标中键，需要阻止事件冒泡
+          if (e.which !== 2) {
+            e.stopPropagation()
+          }
+        }
+      }
+      // 多选和取消多选
+      if (e.ctrlKey && enableCtrlKeyNodeSelection) {
+        this.isMultipleChoice = true
+        let isActive = this.getData('isActive')
+        if (!isActive)
+          this.mindMap.emit(
+            'before_node_active',
+            this,
+            this.renderer.activeNodeList
+          )
+        this.mindMap.renderer[
+          isActive ? 'removeNodeFromActiveList' : 'addNodeToActiveList'
+        ](this)
+        this.mindMap.emit('node_active', isActive ? null : this, [
+          ...this.mindMap.renderer.activeNodeList
+        ])
+      }
+      this.mindMap.emit('node_mousedown', this, e)
+    })
+    this.group.on('mouseup', e => {
+      if (!this.isRoot && e.which !== 2 && !this.mindMap.opt.readonly) {
+        e.stopPropagation()
+      }
+      this.mindMap.emit('node_mouseup', this, e)
+    })
+    this.group.on('mouseenter', e => {
+      if (this.isDrag) return
+      this._isMouseenter = true
+      // 显示展开收起按钮
+      this.showExpandBtn()
+      this.mindMap.emit('node_mouseenter', this, e)
+    })
+    this.group.on('mouseleave', e => {
+      if (!this._isMouseenter) return
+      this._isMouseenter = false
+      this.hideExpandBtn()
+      this.mindMap.emit('node_mouseleave', this, e)
+    })
+    // 双击事件
+    this.group.on('dblclick', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      e.stopPropagation()
+      this.mindMap.emit('node_dblclick', this, e)
+    })
+    // 右键菜单事件
+    this.group.on('contextmenu', e => {
+      const { readonly, useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      // 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
+      if (readonly || e.ctrlKey) {
+        return
+      }
+      e.stopPropagation()
+      e.preventDefault()
+      // 如果是多选节点结束，那么不要触发右键菜单事件
+      if (
+        this.mindMap.select &&
+        !useLeftKeySelectionRightKeyDrag &&
+        this.mindMap.select.hasSelectRange()
+      ) {
+        return
+      }
+      // 如果有且只有当前节点激活了，那么不需要重新激活
+      if (
+        !(this.getData('isActive') && this.renderer.activeNodeList.length === 1)
+      ) {
+        this.renderer.clearActiveNodeList()
+        this.active(e)
+      }
+      this.mindMap.emit('node_contextmenu', e, this)
+    })
+  }
+
+  //  激活节点
+  active(e) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    e && e.stopPropagation()
+    if (this.getData('isActive')) {
+      return
+    }
+    this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
+    this.renderer.clearActiveNodeList()
+    this.renderer.addNodeToActiveList(this)
+    this.mindMap.emit('node_active', this, [...this.renderer.activeNodeList])
+  }
+
+  //  更新节点
+  update() {
+    if (!this.group) {
+      return
+    }
+    this.updateNodeActiveClass()
+    let { alwaysShowExpandBtn } = this.mindMap.opt
+    if (alwaysShowExpandBtn) {
+      // 需要移除展开收缩按钮
+      if (this._expandBtn && this.nodeData.children.length <= 0) {
+        this.removeExpandBtn()
+      } else {
+        // 更新展开收起按钮
+        this.renderExpandBtn()
+      }
+    } else {
+      let { isActive, expand } = this.getData()
+      // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏
+      if (expand && !isActive && !this._isMouseenter) {
+        this.hideExpandBtn()
+      } else {
+        this.showExpandBtn()
+      }
+    }
+    // 更新概要
+    this.renderGeneralization()
+    // 更新协同头像
+    if (this.updateUserListNode) this.updateUserListNode()
+    // 更新节点位置
+    let t = this.group.transform()
+    // // 如果上次不在可视区内，且本次也不在，那么直接返回
+    // let { left: ox, top: oy } = this.getNodePosInClient(
+    //   t.translateX,
+    //   t.translateY
+    // )
+    // let oldIsInClient =
+    //   ox > 0 && oy > 0 && ox < this.mindMap.width && oy < this.mindMap.height
+    // let { left: nx, top: ny } = this.getNodePosInClient(this.left, this.top)
+    // let newIsNotInClient =
+    //   nx + this.width < 0 ||
+    //   ny + this.height < 0 ||
+    //   nx > this.mindMap.width ||
+    //   ny > this.mindMap.height
+    // if (!oldIsInClient && newIsNotInClient) {
+    //   if (!this.isHide) {
+    //     this.isHide = true
+    //     this.group.hide()
+    //   }
+    //   return
+    // }
+    // // 如果当前是隐藏状态，那么先显示
+    // if (this.isHide) {
+    //   this.isHide = false
+    //   this.group.show()
+    // }
+    // 如果节点位置没有变化，则返回
+    if (this.left === t.translateX && this.top === t.translateY) return
+    this.group.translate(this.left - t.translateX, this.top - t.translateY)
+  }
+
+  // 获取节点相当于画布的位置
+  getNodePosInClient(_left, _top) {
+    let drawTransform = this.mindMap.draw.transform()
+    let { scaleX, scaleY, translateX, translateY } = drawTransform
+    let left = _left * scaleX + translateX
+    let top = _top * scaleY + translateY
+    return {
+      left,
+      top
+    }
+  }
+
+  // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
+  reRender() {
+    let sizeChange = this.getSize()
+    this.layout()
+    this.update()
+    return sizeChange
+  }
+
+  // 更新节点激活状态
+  updateNodeActiveClass() {
+    if (!this.group) return
+    const isActive = this.getData('isActive')
+    this.group[isActive ? 'addClass' : 'removeClass']('active')
+  }
+
+  // 根据是否激活更新节点
+  updateNodeByActive(active) {
+    if (this.group) {
+      // 切换激活状态，需要切换展开收起按钮的显隐
+      if (active) {
+        this.showExpandBtn()
+      } else {
+        this.hideExpandBtn()
+      }
+      this.updateNodeActiveClass()
+    }
+  }
+
+  //  递归渲染
+  render(callback = () => {}) {
+    // 节点
+    // 重新渲染连线
+    this.renderLine()
+    if (!this.group) {
+      // 创建组
+      this.group = new G()
+      this.group.addClass('smm-node')
+      this.group.css({
+        cursor: 'default'
+      })
+      this.bindGroupEvent()
+      this.nodeDraw.add(this.group)
+      this.layout()
+      this.update()
+    } else {
+      this.nodeDraw.add(this.group)
+      if (this.needLayout) {
+        this.needLayout = false
+        this.layout()
+      }
+      this.updateExpandBtnPlaceholderRect()
+      this.update()
+    }
+    // 子节点
+    if (
+      this.children &&
+      this.children.length &&
+      this.getData('expand') !== false
+    ) {
+      let index = 0
+      this.children.forEach(item => {
+        item.render(() => {
+          index++
+          if (index >= this.children.length) {
+            callback()
+          }
+        })
+      })
+    } else {
+      callback()
+    }
+    // 手动插入的节点立即获得焦点并且开启编辑模式
+    if (this.nodeData.inserting) {
+      delete this.nodeData.inserting
+      this.active()
+      setTimeout(() => {
+        this.mindMap.emit('node_dblclick', this, null, true)
+      }, 0)
+    }
+  }
+
+  //  递归删除，只是从画布删除，节点容器还在，后续还可以重新插回画布
+  remove() {
+    if (!this.group) return
+    this.group.remove()
+    this.removeGeneralization()
+    this.removeLine()
+    // 子节点
+    if (this.children && this.children.length) {
+      this.children.forEach(item => {
+        item.remove()
+      })
+    }
+  }
+
+  // 销毁节点，不但会从画布删除，而且原节点直接置空，后续无法再插回画布
+  destroy() {
+    if (!this.group) return
+    this.group.remove()
+    this.removeGeneralization()
+    this.removeLine()
+    this.group = null
+    if (this.parent) {
+      this.parent.removeLine()
+    }
+  }
+
+  //  隐藏节点
+  hide() {
+    this.group.hide()
+    this.hideGeneralization()
+    if (this.parent) {
+      let index = this.parent.children.indexOf(this)
+      this.parent._lines[index] && this.parent._lines[index].hide()
+      this._lines.forEach(item => {
+        item.hide()
+      })
+    }
+    // 子节点
+    if (this.children && this.children.length) {
+      this.children.forEach(item => {
+        item.hide()
+      })
+    }
+  }
+
+  //  显示节点
+  show() {
+    if (!this.group) {
+      return
+    }
+    this.group.show()
+    this.showGeneralization()
+    if (this.parent) {
+      let index = this.parent.children.indexOf(this)
+      this.parent._lines[index] && this.parent._lines[index].show()
+      this._lines.forEach(item => {
+        item.show()
+      })
+    }
+    // 子节点
+    if (this.children && this.children.length) {
+      this.children.forEach(item => {
+        item.show()
+      })
+    }
+  }
+
+  // 设置节点透明度
+  // 包括连接线和下级节点
+  setOpacity(val) {
+    // 自身及连线
+    this.group.opacity(val)
+    this._lines.forEach(line => {
+      line.opacity(val)
+    })
+    // 子节点
+    this.children.forEach(item => {
+      item.setOpacity(val)
+    })
+    // 概要节点
+    if (this._generalizationNode) {
+      this._generalizationLine.opacity(val)
+      this._generalizationNode.group.opacity(val)
+    }
+  }
+
+  // 隐藏子节点
+  hideChildren() {
+    this._lines.forEach(item => {
+      item.hide()
+    })
+    if (this.children && this.children.length) {
+      this.children.forEach(item => {
+        item.hide()
+      })
+    }
+  }
+
+  // 显示子节点
+  showChildren() {
+    this._lines.forEach(item => {
+      item.show()
+    })
+    if (this.children && this.children.length) {
+      this.children.forEach(item => {
+        item.show()
+      })
+    }
+  }
+
+  // 被拖拽中
+  startDrag() {
+    this.isDrag = true
+    this.group.addClass('smm-node-dragging')
+  }
+
+  // 拖拽结束
+  endDrag() {
+    this.isDrag = false
+    this.group.removeClass('smm-node-dragging')
+  }
+
+  //  连线
+  renderLine(deep = false) {
+    if (this.getData('expand') === false) {
+      return
+    }
+    let childrenLen = this.nodeData.children.length
+    // 切换为鱼骨结构时，清空根节点和二级节点的连线
+    if (
+      this.mindMap.opt.layout === CONSTANTS.LAYOUT.FISHBONE &&
+      (this.isRoot || this.layerIndex === 1)
+    ) {
+      childrenLen = 0
+    }
+    if (childrenLen > this._lines.length) {
+      // 创建缺少的线
+      new Array(childrenLen - this._lines.length).fill(0).forEach(() => {
+        this._lines.push(this.lineDraw.path())
+      })
+    } else if (childrenLen < this._lines.length) {
+      // 删除多余的线
+      this._lines.slice(childrenLen).forEach(line => {
+        line.remove()
+      })
+      this._lines = this._lines.slice(0, childrenLen)
+    }
+    // 画线
+    this.renderer.layout.renderLine(
+      this,
+      this._lines,
+      (line, node) => {
+        // 添加样式
+        this.styleLine(line, node)
+      },
+      this.style.getStyle('lineStyle', true)
+    )
+    // 子级的连线也需要更新
+    if (deep && this.children && this.children.length > 0) {
+      this.children.forEach(item => {
+        item.renderLine(deep)
+      })
+    }
+  }
+
+  //  获取节点形状
+  getShape() {
+    // 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
+    return this.mindMap.themeConfig.nodeUseLineStyle
+      ? CONSTANTS.SHAPE.RECTANGLE
+      : this.style.getStyle('shape', false, false)
+  }
+
+  //  检查节点是否存在自定义数据
+  hasCustomPosition() {
+    return this.customLeft !== undefined && this.customTop !== undefined
+  }
+
+  //  检查节点是否存在自定义位置的祖先节点
+  ancestorHasCustomPosition() {
+    let node = this
+    while (node) {
+      if (node.hasCustomPosition()) {
+        return true
+      }
+      node = node.parent
+    }
+    return false
+  }
+
+  //  添加子节点
+  addChildren(node) {
+    this.children.push(node)
+  }
+
+  //  设置连线样式
+  styleLine(line, node) {
+    let width =
+      node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
+    let color =
+      node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
+    let dasharray =
+      node.getSelfInhertStyle('lineDasharray') ||
+      node.getStyle('lineDasharray', true)
+    this.style.line(line, {
+      width,
+      color,
+      dasharray
+    })
+  }
+
+  //  移除连线
+  removeLine() {
+    this._lines.forEach(line => {
+      line.remove()
+    })
+    this._lines = []
+  }
+
+  //  检测当前节点是否是某个节点的祖先节点
+  isParent(node) {
+    if (this.uid === node.uid) {
+      return false
+    }
+    let parent = node.parent
+    while (parent) {
+      if (this.uid === parent.uid) {
+        return true
+      }
+      parent = parent.parent
+    }
+    return false
+  }
+
+  //  检测当前节点是否是某个节点的兄弟节点
+  isBrother(node) {
+    if (!this.parent || this.uid === node.uid) {
+      return false
+    }
+    return this.parent.children.find(item => {
+      return item.uid === node.uid
+    })
+  }
+
+  //  获取padding值
+  getPaddingVale() {
+    let { isActive } = this.getData()
+    return {
+      paddingX: this.getStyle('paddingX', true, isActive),
+      paddingY: this.getStyle('paddingY', true, isActive)
+    }
+  }
+
+  //  获取某个样式
+  getStyle(prop, root) {
+    let v = this.style.merge(prop, root)
+    return v === undefined ? '' : v
+  }
+
+  //  获取自定义样式
+  getSelfStyle(prop) {
+    return this.style.getSelfStyle(prop)
+  }
+
+  //   获取最近一个存在自身自定义样式的祖先节点的自定义样式
+  getParentSelfStyle(prop) {
+    if (this.parent) {
+      return (
+        this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop)
+      )
+    }
+    return null
+  }
+
+  //  获取自身可继承的自定义样式
+  getSelfInhertStyle(prop) {
+    return (
+      this.getSelfStyle(prop) || // 自身
+      this.getParentSelfStyle(prop)
+    ) // 父级
+  }
+
+  // 获取节点非节点状态的边框大小
+  getBorderWidth() {
+    return this.style.merge('borderWidth', false) || 0
+  }
+
+  //  获取数据
+  getData(key) {
+    return key ? this.nodeData.data[key] : this.nodeData.data
+  }
+
+  // 是否存在自定义样式
+  hasCustomStyle() {
+    return this.style.hasCustomStyle()
+  }
+}
+
+export default Node

simple-mind-map/src/core/render/node/Shape.js

@@ -0,0 +1,260 @@
+import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
+import { CONSTANTS } from '../../../constants/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 node = null
+    // 矩形
+    if (shape === CONSTANTS.SHAPE.RECTANGLE) {
+      node = this.createRect()
+    } 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
+  }
+
+  // 获取节点减去节点边框宽度、hover节点边框宽度后的尺寸
+  getNodeSize() {
+    const borderWidth = this.node.getBorderWidth()
+    let { width, height } = this.node
+    width -= borderWidth
+    height -= borderWidth
+    return {
+      width,
+      height
+    }
+  }
+
+  // 创建矩形
+  createRect() {
+    let { width, height } = this.getNodeSize()
+    let borderRadius = this.node.style.merge('borderRadius')
+    return new Path().plot(`
+      M${borderRadius},0
+      L${width - borderRadius},0
+      C${width - borderRadius},0 ${width},${0} ${width},${borderRadius}
+      L${width},${height - borderRadius}
+      C${width},${height - borderRadius} ${width},${height} ${
+      width - borderRadius
+    },${height}
+      L${borderRadius},${height}
+      C${borderRadius},${height} ${0},${height} ${0},${height - borderRadius}
+      L${0},${borderRadius}
+      C${0},${borderRadius} ${0},${0} ${borderRadius},${0}
+      Z
+    `)
+  }
+
+  //  创建菱形
+  createDiamond() {
+    let { width, height } = this.getNodeSize()
+    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.getNodeSize()
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width, 0],
+      [width - paddingX, height],
+      [0, height]
+    ])
+  }
+
+  //  创建圆角矩形
+  createRoundedRectangle() {
+    let { width, height } = this.getNodeSize()
+    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.getNodeSize()
+    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.getNodeSize()
+    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.getNodeSize()
+    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.getNodeSize()
+    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.getNodeSize()
+    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/core/render/node/Style.js

@@ -0,0 +1,247 @@
+import {
+  checkIsNodeStyleDataKey,
+  generateColorByContent
+} from '../../../utils/index'
+
+const rootProp = ['paddingX', 'paddingY']
+const backgroundStyleProps = [
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundRepeat',
+  'backgroundPosition',
+  'backgroundSize'
+]
+
+//  样式类
+class Style {
+  //   设置背景样式
+  static setBackgroundStyle(el, themeConfig) {
+    // 缓存容器元素原本的样式
+    if (!Style.cacheStyle) {
+      Style.cacheStyle = {}
+      let style = window.getComputedStyle(el)
+      backgroundStyleProps.forEach(prop => {
+        Style.cacheStyle[prop] = style[prop]
+      })
+    }
+    // 设置新样式
+    let {
+      backgroundColor,
+      backgroundImage,
+      backgroundRepeat,
+      backgroundPosition,
+      backgroundSize
+    } = themeConfig
+    el.style.backgroundColor = backgroundColor
+    if (backgroundImage && backgroundImage !== 'none') {
+      el.style.backgroundImage = `url(${backgroundImage})`
+      el.style.backgroundRepeat = backgroundRepeat
+      el.style.backgroundPosition = backgroundPosition
+      el.style.backgroundSize = backgroundSize
+    } else {
+      el.style.backgroundImage = 'none'
+    }
+  }
+
+  // 移除背景样式
+  static removeBackgroundStyle(el) {
+    if (!Style.cacheStyle) return
+    backgroundStyleProps.forEach(prop => {
+      el.style[prop] = Style.cacheStyle[prop]
+    })
+    Style.cacheStyle = null
+  }
+
+  //  构造函数
+  constructor(ctx) {
+    this.ctx = ctx
+  }
+
+  //  合并样式
+  merge(prop, root) {
+    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
+    }
+    // 优先使用节点本身的样式
+    return this.getSelfStyle(prop) !== undefined
+      ? this.getSelfStyle(prop)
+      : defaultConfig[prop]
+  }
+
+  //  获取某个样式值
+  getStyle(prop, root) {
+    return this.merge(prop, root)
+  }
+
+  //  获取自身自定义样式
+  getSelfStyle(prop) {
+    return this.ctx.getData(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.getData('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')
+    }
+  }
+
+  //  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) {
+    node
+      .fill({
+        color: '#fff'
+      })
+      .css({
+        'font-size': '12px'
+      })
+  }
+
+  //  标签矩形
+  tagRect(node, text, color) {
+    node.fill({
+      color: color || generateColorByContent(text.node.textContent)
+    })
+  }
+
+  //  内置图标
+  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, fontSize, fontColor } = this.ctx.mindMap.opt
+      .expandBtnStyle || {
+      color: '#808080',
+      fill: '#fff',
+      fontSize: 12,
+      strokeColor: '#333333',
+      fontColor: '#333333'
+    }
+    node.fill({ color: color })
+    node2.fill({ color: color })
+    fillNode.fill({ color: fill })
+    if (this.ctx.mindMap.opt.isShowExpandNum) {
+      node.attr({ 'font-size': fontSize, 'font-color': fontColor })
+    }
+  }
+
+  // 是否设置了自定义的样式
+  hasCustomStyle() {
+    let res = false
+    Object.keys(this.ctx.getData()).forEach(item => {
+      if (checkIsNodeStyleDataKey(item)) {
+        res = true
+      }
+    })
+    return res
+  }
+
+  // hover和激活节点
+  hoverNode(node) {
+    const { hoverRectColor } = this.ctx.mindMap.opt
+    node.radius(5).fill('none').stroke({
+      color: hoverRectColor
+    })
+  }
+}
+
+Style.cacheStyle = null
+
+export default Style

simple-mind-map/src/core/render/node/nodeCommandWraps.js

@@ -0,0 +1,62 @@
+//  设置数据
+function setData(data = {}) {
+  this.mindMap.execCommand('SET_NODE_DATA', this, data)
+}
+
+//  设置文本
+function setText(text, richText, resetRichText) {
+  this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText, resetRichText)
+}
+
+//  设置图片
+function setImage(imgData) {
+  this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
+}
+
+//  设置图标
+function setIcon(icons) {
+  this.mindMap.execCommand('SET_NODE_ICON', this, icons)
+}
+
+//  设置超链接
+function setHyperlink(link, title) {
+  this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
+}
+
+//  设置备注
+function setNote(note) {
+  this.mindMap.execCommand('SET_NODE_NOTE', this, note)
+}
+
+//  设置标签
+function setTag(tag) {
+  this.mindMap.execCommand('SET_NODE_TAG', this, tag)
+}
+
+//  设置形状
+function setShape(shape) {
+  this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
+}
+
+//  修改某个样式
+function setStyle(prop, value) {
+  this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value)
+}
+
+//  修改多个样式
+function setStyles(style) {
+  this.mindMap.execCommand('SET_NODE_STYLES', this, style)
+}
+
+export default {
+  setData,
+  setText,
+  setImage,
+  setIcon,
+  setHyperlink,
+  setNote,
+  setTag,
+  setShape,
+  setStyle,
+  setStyles
+}

simple-mind-map/src/core/render/node/nodeCooperate.js

@@ -0,0 +1,104 @@
+import { Circle, G, Text, Image } from '@svgdotjs/svg.js'
+import { generateColorByContent } from '../../../utils/index'
+
+// 协同相关功能
+
+// 创建容器
+function createUserListNode() {
+  // 如果没有注册协作插件，那么需要创建
+  if (!this.mindMap.cooperate) return
+  this._userListGroup = new G()
+  this.group.add(this._userListGroup)
+}
+
+// 创建文本头像
+function createTextAvatar(item) {
+  const { avatarSize, fontSize } = this.mindMap.opt.cooperateStyle
+  const g = new G()
+  const str = item.isMore ? item.name : String(item.name)[0]
+  // 圆
+  const circle = new Circle().size(avatarSize, avatarSize)
+  circle.fill({
+    color: item.color || generateColorByContent(str)
+  })
+  // 文本
+  const text = new Text()
+    .text(str)
+    .fill({
+      color: '#fff'
+    })
+    .css({
+      'font-size': fontSize
+    })
+    .dx(-fontSize / 2)
+    .dy((avatarSize - fontSize) / 2)
+  g.add(circle).add(text)
+  return g
+}
+
+// 创建图片头像
+function createImageAvatar(item) {
+  const { avatarSize } = this.mindMap.opt.cooperateStyle
+  return new Image().load(item.avatar).size(avatarSize, avatarSize)
+}
+
+// 更新渲染
+function updateUserListNode() {
+  if (!this._userListGroup) return
+  const { avatarSize } = this.mindMap.opt.cooperateStyle
+  this._userListGroup.clear()
+  // 根据当前节点长度计算最多能显示几个
+  const length = this.userList.length
+  const maxShowCount = Math.floor(this.width / avatarSize)
+  const list = []
+  if (length > maxShowCount) {
+    // 如果当前用户数量比最多能显示的多，最后需要显示一个提示信息
+    list.push(...this.userList.slice(0, maxShowCount - 1), {
+      isMore: true,
+      name: '+' + (length - maxShowCount + 1)
+    })
+  } else {
+    list.push(...this.userList)
+  }
+  list.forEach((item, index) => {
+    let node = null
+    if (item.avatar) {
+      node = this.createImageAvatar(item)
+    } else {
+      node = this.createTextAvatar(item)
+    }
+    node.x(index * avatarSize).cy(-avatarSize / 2)
+    this._userListGroup.add(node)
+  })
+}
+
+// 添加用户
+function addUser(userInfo) {
+  if (
+    this.userList.find(item => {
+      return item.id == userInfo.id
+    })
+  )
+    return
+  this.userList.push(userInfo)
+  this.updateUserListNode()
+}
+
+// 移除用户
+function removeUser(userInfo) {
+  const index = this.userList.findIndex(item => {
+    return item.id == userInfo.id
+  })
+  if (index === -1) return
+  this.userList.splice(index, 1)
+  this.updateUserListNode()
+}
+
+export default {
+  createUserListNode,
+  updateUserListNode,
+  createTextAvatar,
+  createImageAvatar,
+  addUser,
+  removeUser
+}

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -0,0 +1,373 @@
+import {
+  measureText,
+  resizeImgSize,
+  removeHtmlStyle,
+  addHtmlStyle,
+  checkIsRichText,
+  isUndef
+} from '../../../utils'
+import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
+import iconsSvg from '../../../svg/icons'
+import { CONSTANTS, commonCaches } from '../../../constants/constant'
+
+//  创建图片节点
+function createImgNode() {
+  let img = this.getData('image')
+  if (!img) {
+    return
+  }
+  let imgSize = this.getImgShowSize()
+  let node = new Image().load(img).size(...imgSize)
+  if (this.getData('imageTitle')) {
+    node.attr('title', this.getData('imageTitle'))
+  }
+  node.on('dblclick', e => {
+    this.mindMap.emit('node_img_dblclick', this, e)
+  })
+  node.on('mouseenter', e => {
+    this.mindMap.emit('node_img_mouseenter', this, node, e)
+  })
+  node.on('mouseleave', e => {
+    this.mindMap.emit('node_img_mouseleave', this, node, e)
+  })
+  node.on('mousemove', e => {
+    this.mindMap.emit('node_img_mousemove', this, node, e)
+  })
+  return {
+    node,
+    width: imgSize[0],
+    height: imgSize[1]
+  }
+}
+
+//  获取图片显示宽高
+function getImgShowSize() {
+  const { custom, width, height } = this.getData('imageSize')
+  // 如果是自定义了图片的宽高，那么不受最大宽高限制
+  if (custom) return [width, height]
+  return resizeImgSize(
+    width,
+    height,
+    this.mindMap.themeConfig.imgMaxWidth,
+    this.mindMap.themeConfig.imgMaxHeight
+  )
+}
+
+//  创建icon节点
+function createIconNode() {
+  let _data = this.getData()
+  if (!_data.icon || _data.icon.length <= 0) {
+    return []
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  return _data.icon.map(item => {
+    let src = iconsSvg.getNodeIconListIcon(
+      item,
+      this.mindMap.opt.iconList || []
+    )
+    let node = null
+    // svg图标
+    if (/^<svg/.test(src)) {
+      node = SVG(src)
+    } else {
+      // 图片图标
+      node = new Image().load(src)
+    }
+    node.size(iconSize, iconSize)
+    node.on('click', e => {
+      this.mindMap.emit('node_icon_click', this, item, e)
+    })
+    return {
+      node,
+      width: iconSize,
+      height: iconSize
+    }
+  })
+}
+
+// 创建富文本节点
+function createRichTextNode() {
+  const { textAutoWrapWidth } = this.mindMap.opt
+  let g = new G()
+  // 重新设置富文本节点内容
+  let recoverText = false
+  if (this.getData('resetRichText')) {
+    delete this.nodeData.data.resetRichText
+    recoverText = true
+  }
+  if ([CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
+    // 如果自定义过样式则不允许覆盖
+    if (!this.hasCustomStyle()) {
+      recoverText = true
+    }
+  }
+  if (recoverText) {
+    let text = this.getData('text')
+    // 判断节点内容是否是富文本
+    let isRichText = checkIsRichText(text)
+    // 样式字符串
+    let style = this.style.createStyleText()
+    if (isRichText) {
+      // 如果是富文本那么线移除内联样式
+      text = removeHtmlStyle(text)
+      // 再添加新的内联样式
+      text = addHtmlStyle(text, 'span', style)
+    } else {
+      // 非富文本
+      text = `<p><span style="${style}">${text}</span></p>`
+    }
+    this.setData({
+      text: text
+    })
+  }
+  let html = `<div>${this.getData('text')}</div>`
+  if (!commonCaches.measureRichtextNodeTextSizeEl) {
+    commonCaches.measureRichtextNodeTextSizeEl = document.createElement('div')
+    commonCaches.measureRichtextNodeTextSizeEl.style.position = 'fixed'
+    commonCaches.measureRichtextNodeTextSizeEl.style.left = '-999999px'
+    this.mindMap.el.appendChild(commonCaches.measureRichtextNodeTextSizeEl)
+  }
+  let div = commonCaches.measureRichtextNodeTextSizeEl
+  div.innerHTML = html
+  let el = div.children[0]
+  el.classList.add('smm-richtext-node-wrap')
+  el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
+  el.style.maxWidth = textAutoWrapWidth + 'px'
+  let { width, height } = el.getBoundingClientRect()
+  // 如果文本为空，那么需要计算一个默认高度
+  if (height <= 0) {
+    div.innerHTML = '<p>abc123我和你</p>'
+    let elTmp = div.children[0]
+    elTmp.classList.add('smm-richtext-node-wrap')
+    height = elTmp.getBoundingClientRect().height
+  }
+  width = Math.ceil(width) + 1 // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
+  height = Math.ceil(height)
+  g.attr('data-width', width)
+  g.attr('data-height', height)
+  let foreignObject = new ForeignObject()
+  foreignObject.width(width)
+  foreignObject.height(height)
+  foreignObject.add(div.children[0])
+  g.add(foreignObject)
+  return {
+    node: g,
+    width,
+    height
+  }
+}
+
+//  创建文本节点
+function createTextNode() {
+  if (this.getData('richText')) {
+    return this.createRichTextNode()
+  }
+  let g = new G()
+  let fontSize = this.getStyle('fontSize', false)
+  let lineHeight = this.getStyle('lineHeight', false)
+  // 文本超长自动换行
+  let textStyle = this.style.getTextFontStyle()
+  let textArr = []
+  if (!isUndef(this.getData('text'))) {
+    textArr = String(this.getData('text')).split(/\n/gim)
+  }
+  let maxWidth = this.mindMap.opt.textAutoWrapWidth
+  let isMultiLine = false
+  textArr.forEach((item, index) => {
+    let arr = item.split('')
+    let lines = []
+    let line = []
+    while (arr.length) {
+      let str = arr.shift()
+      let text = [...line, str].join('')
+      if (measureText(text, textStyle).width <= maxWidth) {
+        line.push(str)
+      } else {
+        lines.push(line.join(''))
+        line = [str]
+      }
+    }
+    if (line.length > 0) {
+      lines.push(line.join(''))
+    }
+    if (lines.length > 1) {
+      isMultiLine = true
+    }
+    textArr[index] = lines.join('\n')
+  })
+  textArr = textArr.join('\n').split(/\n/gim)
+  textArr.forEach((item, index) => {
+    let node = new Text().text(item)
+    this.style.text(node)
+    node.y(fontSize * lineHeight * index)
+    g.add(node)
+  })
+  let { width, height } = g.bbox()
+  width = Math.ceil(width)
+  height = Math.ceil(height)
+  g.attr('data-width', width)
+  g.attr('data-height', height)
+  g.attr('data-ismultiLine', isMultiLine || textArr.length > 1)
+  return {
+    node: g,
+    width,
+    height
+  }
+}
+
+//  创建超链接节点
+function createHyperlinkNode() {
+  let { hyperlink, hyperlinkTitle } = this.getData()
+  if (!hyperlink) {
+    return
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  let node = new SVG()
+  // 超链接节点
+  let a = new A().to(hyperlink).target('_blank')
+  a.node.addEventListener('click', e => {
+    e.stopPropagation()
+  })
+  if (hyperlinkTitle) {
+    a.attr('title', hyperlinkTitle)
+  }
+  // 添加一个透明的层，作为鼠标区域
+  a.rect(iconSize, iconSize).fill({ color: 'transparent' })
+  // 超链接图标
+  let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  a.add(iconNode)
+  node.add(a)
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
+//  创建标签节点
+function createTagNode() {
+  let tagData = this.getData('tag')
+  if (!tagData || tagData.length <= 0) {
+    return []
+  }
+  let nodes = []
+  tagData.slice(0, this.mindMap.opt.maxTag).forEach((item, index) => {
+    let tag = new G()
+    // 标签文本
+    let text = new Text().text(item).x(8).cy(8)
+    this.style.tagText(text, index)
+    let { width } = text.bbox()
+    // 标签矩形
+    let rect = new Rect().size(width + 16, 20)
+    // 先从自定义的颜色中获取颜色，没有的话就按照内容生成
+    const tagsColorList = this.mindMap.opt.tagsColorMap || {}
+    const color = tagsColorList[text.node.textContent]
+    this.style.tagRect(rect, text, color)
+    tag.add(rect).add(text)
+    nodes.push({
+      node: tag,
+      width: width + 16,
+      height: 20
+    })
+  })
+  return nodes
+}
+
+//  创建备注节点
+function createNoteNode() {
+  if (!this.getData('note')) {
+    return null
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  let node = new SVG().attr('cursor', 'pointer')
+  // 透明的层，用来作为鼠标区域
+  node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
+  // 备注图标
+  let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  node.add(iconNode)
+  // 备注tooltip
+  if (!this.mindMap.opt.customNoteContentShow) {
+    if (!this.noteEl) {
+      this.noteEl = document.createElement('div')
+      this.noteEl.style.cssText = `
+          position: fixed;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+          display: none;
+          background-color: #fff;
+          z-index: ${this.mindMap.opt.nodeNoteTooltipZIndex}
+      `
+      const targetNode =
+        this.mindMap.opt.customInnerElsAppendTo || document.body
+      targetNode.appendChild(this.noteEl)
+    }
+    this.noteEl.innerText = this.getData('note')
+  }
+  node.on('mouseover', () => {
+    let { left, top } = node.node.getBoundingClientRect()
+    if (!this.mindMap.opt.customNoteContentShow) {
+      this.noteEl.style.left = left + 'px'
+      this.noteEl.style.top = top + iconSize + 'px'
+      this.noteEl.style.display = 'block'
+    } else {
+      this.mindMap.opt.customNoteContentShow.show(
+        this.getData('note'),
+        left,
+        top + iconSize
+      )
+    }
+  })
+  node.on('mouseout', () => {
+    if (!this.mindMap.opt.customNoteContentShow) {
+      this.noteEl.style.display = 'none'
+    } else {
+      this.mindMap.opt.customNoteContentShow.hide()
+    }
+  })
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
+// 测量自定义节点内容元素的宽高
+function measureCustomNodeContentSize(content) {
+  if (!commonCaches.measureCustomNodeContentSizeEl) {
+    commonCaches.measureCustomNodeContentSizeEl = document.createElement('div')
+    commonCaches.measureCustomNodeContentSizeEl.style.cssText = `
+      position: fixed;
+      left: -99999px;
+      top: -99999px;
+    `
+    this.mindMap.el.appendChild(commonCaches.measureCustomNodeContentSizeEl)
+  }
+  commonCaches.measureCustomNodeContentSizeEl.innerHTML = ''
+  commonCaches.measureCustomNodeContentSizeEl.appendChild(content)
+  let rect = commonCaches.measureCustomNodeContentSizeEl.getBoundingClientRect()
+  return {
+    width: rect.width,
+    height: rect.height
+  }
+}
+
+// 是否使用的是自定义节点内容
+function isUseCustomNodeContent() {
+  return !!this._customNodeContent
+}
+
+export default {
+  createImgNode,
+  getImgShowSize,
+  createIconNode,
+  createRichTextNode,
+  createTextNode,
+  createHyperlinkNode,
+  createTagNode,
+  createNoteNode,
+  measureCustomNodeContentSize,
+  isUseCustomNodeContent
+}

simple-mind-map/src/core/render/node/nodeExpandBtn.js

@@ -0,0 +1,184 @@
+import btnsSvg from '../../../svg/btns'
+import { SVG, Circle, G } from '@svgdotjs/svg.js'
+
+// 创建展开收起按钮的内容节点
+function createExpandNodeContent() {
+  if (this._openExpandNode) {
+    return
+  }
+  let { close, open } = this.mindMap.opt.expandBtnIcon || {}
+  // 根据配置判断是否显示数量按钮
+  if (this.mindMap.opt.isShowExpandNum) {
+    // 展开的节点
+    this._openExpandNode = SVG()
+      .text()
+      .size(this.expandBtnSize, this.expandBtnSize)
+    // 文本垂直居中
+    this._openExpandNode.attr({
+      'text-anchor': 'middle',
+      'dominant-baseline': 'middle',
+      x: this.expandBtnSize / 2,
+      y: 2
+    })
+  } else {
+    this._openExpandNode = SVG(open || btnsSvg.open).size(
+      this.expandBtnSize,
+      this.expandBtnSize
+    )
+    this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
+  }
+  // 收起的节点
+  this._closeExpandNode = SVG(close || btnsSvg.close).size(
+    this.expandBtnSize,
+    this.expandBtnSize
+  )
+  this._closeExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 填充节点
+  this._fillExpandNode = new Circle().size(this.expandBtnSize)
+  this._fillExpandNode.x(0).y(-this.expandBtnSize / 2)
+
+  // 设置样式
+  this.style.iconBtn(
+    this._openExpandNode,
+    this._closeExpandNode,
+    this._fillExpandNode
+  )
+}
+function sumNode(data = []) {
+  return data.reduce(
+    (total, cur) => total + this.sumNode(cur.children || []),
+    data.length
+  )
+}
+//  创建或更新展开收缩按钮内容
+function updateExpandBtnNode() {
+  let { expand } = this.getData()
+  // 如果本次和上次的展开状态一样则返回
+  if (expand === this._lastExpandBtnType) return
+  if (this._expandBtn) {
+    this._expandBtn.clear()
+  }
+  this.createExpandNodeContent()
+  let node
+  if (expand === false) {
+    node = this._openExpandNode
+    this._lastExpandBtnType = false
+  } else {
+    node = this._closeExpandNode
+    this._lastExpandBtnType = true
+  }
+
+  if (this._expandBtn) {
+    // 如果是收起按钮加上边框
+    let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } =
+      this.mindMap.opt
+    if (isShowExpandNum) {
+      if (!expand) {
+        // 数字按钮添加边框
+        this._fillExpandNode.stroke({
+          color: expandBtnStyle.strokeColor
+        })
+        // 计算子节点数量
+        let count = this.sumNode(this.nodeData.children)
+        count = expandBtnNumHandler(count)
+        node.text(count)
+      } else {
+        this._fillExpandNode.stroke('none')
+      }
+    }
+    this._expandBtn.add(this._fillExpandNode).add(node)
+  }
+}
+
+//  更新展开收缩按钮位置
+function updateExpandBtnPos() {
+  if (!this._expandBtn) {
+    return
+  }
+  this.renderer.layout.renderExpandBtn(this, this._expandBtn)
+}
+
+//  创建展开收缩按钮
+function renderExpandBtn() {
+  if (
+    !this.nodeData.children ||
+    this.nodeData.children.length <= 0 ||
+    this.isRoot
+  ) {
+    return
+  }
+  if (this._expandBtn) {
+    this.group.add(this._expandBtn)
+  } else {
+    this._expandBtn = new G()
+    this._expandBtn.on('mouseover', e => {
+      e.stopPropagation()
+      this._expandBtn.css({
+        cursor: 'pointer'
+      })
+    })
+    this._expandBtn.on('mouseout', e => {
+      e.stopPropagation()
+      this._expandBtn.css({
+        cursor: 'auto'
+      })
+    })
+    this._expandBtn.on('click', e => {
+      e.stopPropagation()
+      // 展开收缩
+      this.mindMap.execCommand(
+        'SET_NODE_EXPAND',
+        this,
+        !this.getData('expand')
+      )
+      this.mindMap.emit('expand_btn_click', this)
+    })
+    this._expandBtn.on('dblclick', e => {
+      e.stopPropagation()
+    })
+    this._expandBtn.addClass('smm-expand-btn')
+    this.group.add(this._expandBtn)
+  }
+  this._showExpandBtn = true
+  this.updateExpandBtnNode()
+  this.updateExpandBtnPos()
+}
+
+//  移除展开收缩按钮
+function removeExpandBtn() {
+  if (this._expandBtn && this._showExpandBtn) {
+    this._expandBtn.remove()
+    this._showExpandBtn = false
+  }
+}
+
+// 显示展开收起按钮
+function showExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn) return
+  setTimeout(() => {
+    this.renderExpandBtn()
+  }, 0)
+}
+
+// 隐藏展开收起按钮
+function hideExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return
+  // 非激活状态且展开状态鼠标移出才隐藏按钮
+  let { isActive, expand } = this.getData()
+  if (!isActive && expand) {
+    setTimeout(() => {
+      this.removeExpandBtn()
+    }, 0)
+  }
+}
+
+export default {
+  createExpandNodeContent,
+  updateExpandBtnNode,
+  updateExpandBtnPos,
+  renderExpandBtn,
+  removeExpandBtn,
+  showExpandBtn,
+  hideExpandBtn,
+  sumNode
+}

simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js

@@ -0,0 +1,66 @@
+import { Rect } from '@svgdotjs/svg.js'
+
+// 渲染展开收起按钮的隐藏占位元素
+function renderExpandBtnPlaceholderRect() {
+  // 根节点或没有子节点不需要渲染
+  if (
+    !this.nodeData.children ||
+    this.nodeData.children.length <= 0 ||
+    this.isRoot
+  ) {
+    return
+  }
+  // 默认显示展开按钮的情况下也不需要渲染
+  if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    let { width, height } = this
+    if (!this._unVisibleRectRegionNode) {
+      this._unVisibleRectRegionNode = new Rect()
+      this._unVisibleRectRegionNode.fill({
+        color: 'transparent'
+      })
+    }
+    this.group.add(this._unVisibleRectRegionNode)
+    this.renderer.layout.renderExpandBtnRect(
+      this._unVisibleRectRegionNode,
+      this.expandBtnSize,
+      width,
+      height,
+      this
+    )
+  }
+}
+
+// 删除展开收起按钮的隐藏占位元素
+function clearExpandBtnPlaceholderRect() {
+  if (!this._unVisibleRectRegionNode) {
+    return
+  }
+  this._unVisibleRectRegionNode.remove()
+  this._unVisibleRectRegionNode = null
+}
+
+// 更新展开收起按钮的隐藏占位元素
+function updateExpandBtnPlaceholderRect() {
+  // 布局改变需要重新渲染
+  if (this.needRerenderExpandBtnPlaceholderRect) {
+    this.needRerenderExpandBtnPlaceholderRect = false
+    this.renderExpandBtnPlaceholderRect()
+  }
+  // 没有子节点到有子节点需要渲染
+  if (this.nodeData.children && this.nodeData.children.length > 0) {
+    if (!this._unVisibleRectRegionNode) {
+      this.renderExpandBtnPlaceholderRect()
+    }
+  } else {
+    // 有子节点到没子节点，需要删除
+    if (this._unVisibleRectRegionNode) {
+      this.clearExpandBtnPlaceholderRect()
+    }
+  }
+}
+
+export default {
+  renderExpandBtnPlaceholderRect,
+  clearExpandBtnPlaceholderRect,
+  updateExpandBtnPlaceholderRect
+}

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -0,0 +1,117 @@
+import Node from './Node'
+import { createUid } from '../../../utils/index'
+
+//  检查是否存在概要
+function checkHasGeneralization() {
+  return !!this.getData('generalization')
+}
+
+//  创建概要节点
+function createGeneralizationNode() {
+  if (this.isGeneralization || !this.checkHasGeneralization()) {
+    return
+  }
+  if (!this._generalizationLine) {
+    this._generalizationLine = this.lineDraw.path()
+  }
+  if (!this._generalizationNode) {
+    this._generalizationNode = new Node({
+      data: {
+        data: this.getData('generalization')
+      },
+      uid: createUid(),
+      renderer: this.renderer,
+      mindMap: this.mindMap,
+      isGeneralization: true
+    })
+    this._generalizationNodeWidth = this._generalizationNode.width
+    this._generalizationNodeHeight = this._generalizationNode.height
+    this._generalizationNode.generalizationBelongNode = this
+    if (this.getData('generalization').isActive) {
+      this.renderer.addNodeToActiveList(this._generalizationNode)
+    }
+  }
+}
+
+//  更新概要节点
+function updateGeneralization() {
+  if (this.isGeneralization) return
+  this.removeGeneralization()
+  this.createGeneralizationNode()
+}
+
+//  渲染概要节点
+function renderGeneralization() {
+  if (this.isGeneralization) return
+  if (!this.checkHasGeneralization()) {
+    this.removeGeneralization()
+    this._generalizationNodeWidth = 0
+    this._generalizationNodeHeight = 0
+    return
+  }
+  if (this.getData('expand') === false) {
+    this.removeGeneralization()
+    return
+  }
+  this.createGeneralizationNode()
+  this.renderer.layout.renderGeneralization(
+    this,
+    this._generalizationLine,
+    this._generalizationNode
+  )
+  this.style.generalizationLine(this._generalizationLine)
+  this._generalizationNode.render()
+}
+
+//  删除概要节点
+function removeGeneralization() {
+  if (this.isGeneralization) return
+  if (this._generalizationLine) {
+    this._generalizationLine.remove()
+    this._generalizationLine = null
+  }
+  if (this._generalizationNode) {
+    // 删除概要节点时要同步从激活节点里删除
+    this.renderer.removeNodeFromActiveList(this._generalizationNode)
+    this._generalizationNode.remove()
+    this._generalizationNode = null
+  }
+  // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题
+  if (this.generalizationBelongNode) {
+    this.nodeDraw
+      .find('.generalization_' + this.generalizationBelongNode.uid)
+      .remove()
+  }
+}
+
+//  隐藏概要节点
+function hideGeneralization() {
+  if (this.isGeneralization) return
+  if (this._generalizationLine) {
+    this._generalizationLine.hide()
+  }
+  if (this._generalizationNode) {
+    this._generalizationNode.hide()
+  }
+}
+
+//  显示概要节点
+function showGeneralization() {
+  if (this.isGeneralization) return
+  if (this._generalizationLine) {
+    this._generalizationLine.show()
+  }
+  if (this._generalizationNode) {
+    this._generalizationNode.show()
+  }
+}
+
+export default {
+  checkHasGeneralization,
+  createGeneralizationNode,
+  updateGeneralization,
+  renderGeneralization,
+  removeGeneralization,
+  hideGeneralization,
+  showGeneralization
+}

simple-mind-map/src/core/view/View.js

@@ -0,0 +1,304 @@
+import { CONSTANTS } from '../../constants/constant'
+
+//  视图操作类
+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()
+  }
+
+  //  绑定
+  bind() {
+    // 快捷键
+    this.mindMap.keyCommand.addShortcut('Control+=', () => {
+      this.enlarge()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+-', () => {
+      this.narrow()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+i', () => {
+      this.fit()
+    })
+    // 拖动视图
+    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, event, isTouchPad) => {
+      let {
+        customHandleMousewheel,
+        mousewheelAction,
+        mouseScaleCenterUseMousePosition,
+        mousewheelMoveStep,
+        mousewheelZoomActionReverse,
+        disableMouseWheelZoom
+      } = this.mindMap.opt
+      // 是否自定义鼠标滚轮事件
+      if (
+        customHandleMousewheel &&
+        typeof customHandleMousewheel === 'function'
+      ) {
+        return customHandleMousewheel(e)
+      }
+      // 鼠标滚轮事件控制缩放
+      if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
+        if (disableMouseWheelZoom) return
+        const { x: clientX, y: clientY } = this.mindMap.toPos(
+          e.clientX,
+          e.clientY
+        )
+        let cx = mouseScaleCenterUseMousePosition ? clientX : undefined
+        let cy = mouseScaleCenterUseMousePosition ? clientY : undefined
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case CONSTANTS.DIR.UP:
+          case CONSTANTS.DIR.LEFT:
+            mousewheelZoomActionReverse
+              ? this.enlarge(cx, cy, isTouchPad)
+              : this.narrow(cx, cy, isTouchPad)
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case CONSTANTS.DIR.DOWN:
+          case CONSTANTS.DIR.RIGHT:
+            mousewheelZoomActionReverse
+              ? this.narrow(cx, cy, isTouchPad)
+              : this.enlarge(cx, cy, isTouchPad)
+            break
+        }
+      } else {
+        // 鼠标滚轮事件控制画布移动
+        let step = mousewheelMoveStep
+        if (isTouchPad) {
+          step = 5
+        }
+        switch (dir) {
+          // 上移
+          case CONSTANTS.DIR.DOWN:
+            this.translateY(-step)
+            break
+          // 下移
+          case CONSTANTS.DIR.UP:
+            this.translateY(step)
+            break
+          // 右移
+          case CONSTANTS.DIR.LEFT:
+            this.translateX(-step)
+            break
+          // 左移
+          case CONSTANTS.DIR.RIGHT:
+            this.translateX(step)
+            break
+        }
+      }
+    })
+  }
+
+  //  获取当前变换状态数据
+  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)
+    }
+  }
+
+  //  平移x,y方向
+  translateXY(x, y) {
+    if (x === 0 && y === 0) return
+    this.x += x
+    this.y += y
+    this.transform()
+  }
+
+  //  平移x方向
+  translateX(step) {
+    if (step === 0) return
+    this.x += step
+    this.transform()
+  }
+
+  //  平移x方式到
+  translateXTo(x) {
+    this.x = x
+    this.transform()
+  }
+
+  //  平移y方向
+  translateY(step) {
+    if (step === 0) return
+    this.y += step
+    this.transform()
+  }
+
+  //  平移y方向到
+  translateYTo(y) {
+    this.y = y
+    this.transform()
+  }
+
+  //   应用变换
+  transform() {
+    this.mindMap.draw.transform({
+      origin: [0, 0],
+      scale: this.scale,
+      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)
+    }
+  }
+
+  //  缩小
+  narrow(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = Math.max(this.scale - scaleRatio, 0.1)
+    this.scaleInCenter(scale, cx, cy)
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  //  放大
+  enlarge(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = this.scale + scaleRatio
+    this.scaleInCenter(scale, cx, cy)
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
+  scaleInCenter(scale, cx, cy) {
+    if (cx === undefined || cy === undefined) {
+      cx = this.mindMap.width / 2
+      cy = this.mindMap.height / 2
+    }
+    const prevScale = this.scale
+    const ratio = 1 - scale / prevScale
+    const dx = (cx - this.x) * ratio
+    const dy = (cy - this.y) * ratio
+    this.x += dx
+    this.y += dy
+    this.scale = scale
+  }
+
+  //  设置缩放
+  setScale(scale, cx, cy) {
+    if (cx !== undefined && cy !== undefined) {
+      this.scaleInCenter(scale, cx, cy)
+    } else {
+      this.scale = scale
+    }
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  // 适应画布大小
+  fit() {
+    let { fitPadding } = this.mindMap.opt
+    let draw = this.mindMap.draw
+    let origTransform = draw.transform()
+    let rect = draw.rbox()
+    let drawWidth = rect.width / origTransform.scaleX
+    let drawHeight = rect.height / origTransform.scaleY
+    let drawRatio = drawWidth / drawHeight
+    let { width: elWidth, height: elHeight } =
+      this.mindMap.elRect
+    elWidth = elWidth - fitPadding * 2
+    elHeight = elHeight - fitPadding * 2
+    let elRatio = elWidth / elHeight
+    let newScale = 0
+    let flag = ''
+    if (drawWidth <= elWidth && drawHeight <= elHeight) {
+      newScale = 1
+      flag = 1
+    } else {
+      let newWidth = 0
+      let newHeight = 0
+      if (drawRatio > elRatio) {
+        newWidth = elWidth
+        newHeight = elWidth / drawRatio
+        flag = 2
+      } else {
+        newHeight = elHeight
+        newWidth = elHeight * drawRatio
+        flag = 3
+      }
+      newScale = newWidth / drawWidth
+    }
+    this.setScale(newScale)
+    let newRect = draw.rbox()
+    let newX = 0
+    let newY = 0
+    if (flag === 1) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 2) {
+      newX = -newRect.x + fitPadding
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 3) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding
+    }
+    this.translateXY(newX, newY)
+  }
+}
+
+export default View

simple-mind-map/src/css/quill.css

@@ -1,10 +0,0 @@
-.ql-editor {
-    overflow: hidden;
-    padding: 0;
-    height: auto;
-}
-
-.ql-container {
-    height: auto;
-    font-size: inherit;
-}

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

@@ -1,4 +1,7 @@
-import Node from '../Node'
+import Node from '../core/render/node/Node'
+import { CONSTANTS, initRootNodePositionMap } from '../constants/constant'
+import Lru from '../utils/Lru'
+import { createUid } from '../utils/index'
 
 //  布局基类
 class Base {
@@ -10,8 +13,10 @@ class Base {
     this.mindMap = renderer.mindMap
     // 绘图对象
     this.draw = this.mindMap.draw
+    this.lineDraw = this.mindMap.lineDraw
     // 根节点
     this.root = null
+    this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
   }
 
   //  计算节点位置
@@ -32,32 +37,105 @@ class Base {
   //  概要节点
   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)
+  }
+
+  // 层级类型改变
+  checkIsLayerTypeChange(oldIndex, newIndex) {
+    if (oldIndex >= 2 && newIndex >= 2) return false
+    if (oldIndex >= 2 && newIndex < 2) return true
+    if (oldIndex < 2 && newIndex >= 2) return true
+  }
+
+  // 检查是否是结构布局改变重新渲染展开收起按钮占位元素
+  checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) {
+    if (this.renderer.renderSource === CONSTANTS.CHANGE_LAYOUT) {
+      node.needRerenderExpandBtnPlaceholderRect = true
+    }
+  }
+
   //  创建节点实例
   createNode(data, parent, isRoot, layerIndex) {
     // 创建节点
     let newNode = null
-    // 复用节点
+    // 数据上保存了节点引用，那么直接复用节点
     if (data && data._node && !this.renderer.reRender) {
       newNode = data._node
+      let isLayerTypeChange = this.checkIsLayerTypeChange(
+        newNode.layerIndex,
+        layerIndex
+      )
       newNode.reset()
       newNode.layerIndex = layerIndex
+      this.cacheNode(data._node.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      if (this.checkIsNeedResizeSources() || isLayerTypeChange) {
+        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.getData())
+      let isLayerTypeChange = this.checkIsLayerTypeChange(
+        newNode.layerIndex,
+        layerIndex
+      )
+      newNode.reset()
+      newNode.nodeData = newNode.handleData(data || {})
+      newNode.layerIndex = layerIndex
+      this.cacheNode(data.data.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
+      data._node = newNode
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      let isResizeSource = this.checkIsNeedResizeSources()
+      // 节点数据改变了需要重新计算节点大小和布局
+      let isNodeDataChange = lastData !== JSON.stringify(data.data)
+      if (isResizeSource || isNodeDataChange || isLayerTypeChange) {
+        newNode.getSize()
+        newNode.needLayout = true
+      }
     } else {
       // 创建新节点
+      let uid = data.data.uid || createUid()
       newNode = new Node({
         data,
-        uid: this.mindMap.uid++,
+        uid,
         renderer: this.renderer,
         mindMap: this.mindMap,
         draw: this.draw,
         layerIndex
       })
-      newNode.getSize()
+      // uid保存到数据上，为了节点复用
+      data.data.uid = uid
+      this.cacheNode(uid, newNode)
       // 数据关联实际节点
       data._node = newNode
       if (data.data.isActive) {
-        this.renderer.addActiveNode(newNode)
+        this.renderer.addNodeToActiveList(newNode)
       }
     }
+    // 如果当前节点在激活节点列表里，那么添加上激活的状态
+    if (this.mindMap.renderer.findActiveNodeIndex(newNode) !== -1) {
+      newNode.setData({
+        isActive: true
+      })
+    }
     // 根节点
     if (isRoot) {
       newNode.isRoot = true
@@ -70,10 +148,40 @@ class Base {
     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
+    }
+  }
+
   //  定位节点到画布中间
   setNodeCenter(node) {
-    node.left = (this.mindMap.width - node.width) / 2
-    node.top = (this.mindMap.height - node.height) / 2
+    let { initRootNodePosition } = this.mindMap.opt
+    let { CENTER } = CONSTANTS.INIT_ROOT_NODE_POSITION
+    if (
+      !initRootNodePosition ||
+      !Array.isArray(initRootNodePosition) ||
+      initRootNodePosition.length < 2
+    ) {
+      initRootNodePosition = [CENTER, CENTER]
+    }
+    node.left = this.formatPosition(
+      initRootNodePosition[0],
+      this.mindMap.width,
+      node.width
+    )
+    node.top = this.formatPosition(
+      initRootNodePosition[1],
+      this.mindMap.height,
+      node.height
+    )
   }
 
   //  更新子节点属性
@@ -87,6 +195,41 @@ class Base {
     })
   }
 
+  //  更新子节点多个属性
+  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)
+      }
+    })
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaWidth(node, withGeneralization = false) {
+    let widthArr = []
+    let totalGeneralizationNodeWidth = 0
+    let loop = (node, width) => {
+      if (withGeneralization && node.checkHasGeneralization()) {
+        totalGeneralizationNodeWidth += node._generalizationNodeWidth
+      }
+      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) + totalGeneralizationNodeWidth
+  }
+
   //  二次贝塞尔曲线
   quadraticCurvePath(x1, y1, x2, y2) {
     let cx = x1 + (x2 - x1) * 0.2
@@ -105,16 +248,22 @@ class Base {
 
   //   获取节点的marginX
   getMarginX(layerIndex) {
+    const { themeConfig, opt } = this.mindMap
+    const { second, node } = themeConfig
+    const hoverRectPadding = opt.hoverRectPadding * 2
     return layerIndex === 1
-      ? this.mindMap.themeConfig.second.marginX
-      : this.mindMap.themeConfig.node.marginX
+      ? second.marginX + hoverRectPadding
+      : node.marginX + hoverRectPadding
   }
 
   //  获取节点的marginY
   getMarginY(layerIndex) {
+    const { themeConfig, opt } = this.mindMap
+    const { second, node } = themeConfig
+    const hoverRectPadding = opt.hoverRectPadding * 2
     return layerIndex === 1
-      ? this.mindMap.themeConfig.second.marginY
-      : this.mindMap.themeConfig.node.marginY
+      ? second.marginY + hoverRectPadding
+      : node.marginY + hoverRectPadding
   }
 
   //  获取节点包括概要在内的宽度
@@ -151,12 +300,12 @@ class Base {
           let { left, right, top, bottom } = walk(child)
           // 概要内容的宽度
           let generalizationWidth =
-            child.checkHasGeneralization() && child.nodeData.data.expand
+            child.checkHasGeneralization() && child.getData('expand')
               ? child._generalizationNodeWidth + generalizationNodeMargin
               : 0
           // 概要内容的高度
           let generalizationHeight =
-            child.checkHasGeneralization() && child.nodeData.data.expand
+            child.checkHasGeneralization() && child.getData('expand')
               ? child._generalizationNodeHeight + generalizationNodeMargin
               : 0
           if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
@@ -196,6 +345,11 @@ class Base {
       generalizationNodeMargin
     }
   }
+
+  // 获取节点实际存在几个子节点
+  getNodeActChildrenLength(node) {
+    return node.nodeData.children && node.nodeData.children.length
+  }
 }
 
 export default Base

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

@@ -1,386 +1,368 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-
-//  目录组织图
-
-class CatalogOrganization extends Base {
-  //  构造函数
-
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-
-  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
-    )
-  }
-
-  //  遍历节点树计算节点的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
-    )
-  }
-
-  //  调整节点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
-    )
-  }
-
-  //  递归计算节点的宽度
-
-  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)
-  }
-
-  //  调整兄弟节点的left
-
-  updateBrothersLeft(node, addWidth) {
-    if (node.parent) {
-      let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
-      // 存在大于一个节点时，第一个或最后一个节点自身也需要移动，否则两边不对称
-      if (
-        (index === 0 || index === childrenList.length - 1) &&
-        childrenList.length > 1
-      ) {
-        let _offset = index === 0 ? -addWidth : addWidth
-        node.left += _offset
-        if (
-          node.children &&
-          node.children.length &&
-          !node.hasCustomPosition()
-        ) {
-          this.updateChildren(node.children, 'left', _offset)
-        }
-      }
-      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.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
-    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}`
-        } else {
-          if (_isXCenter) {
-            _left = x2
-          }
-          path = `M ${x2},${y2} L ${_left},${y2}`
-        }
-        // 节点使用横线风格，需要额外渲染横线
-        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()
-        }
-        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
+import Base from './Base'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
+
+//  目录组织图
+class CatalogOrganization extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+  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
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.getData('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 +
+              this.getNodeHeightWithGeneralization(node) +
+              marginY +
+              (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+            node.children.forEach(cur => {
+              cur.left = node.left + node.width * 0.5
+              cur.top = totalTop
+              totalTop +=
+                this.getNodeHeightWithGeneralization(cur) +
+                marginY +
+                (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.getData('expand')) {
+          return
+        }
+        // 调整left
+        if (parent && parent.isRoot) {
+          let areaWidth = this.getNodeAreaWidth(node, true)
+          let difference = areaWidth - node.width
+          if (difference > 0) {
+            this.updateBrothersLeft(node, difference)
+          }
+        }
+        // 调整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 +
+                this.getNodeHeightWithGeneralization(item) +
+                (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 = getNodeIndexInNodeList(node, childrenList)
+      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 = getNodeIndexInNodeList(node, childrenList)
+      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.lineDraw.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.lineDraw.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}`
+        } else {
+          if (_isXCenter) {
+            _left = x2
+          }
+          path = `M ${x2},${y2} L ${_left},${y2}`
+        }
+        // 节点使用横线风格，需要额外渲染横线
+        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.lineDraw.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()
+        }
+        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
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
+}
+
+export default CatalogOrganization

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

@@ -0,0 +1,402 @@
+import Base from './Base'
+import { walk, asyncRun, degToRad, getNodeIndexInNodeList } from '../utils'
+import { CONSTANTS } from '../constants/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.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+          }
+          // 计算二级节点的top值
+          if (parent._node.isRoot) {
+            let marginY = this.getMarginY(layerIndex)
+            if (this.checkIsTop(newNode)) {
+              newNode.top = parent._node.top - newNode.height - marginY
+            } else {
+              newNode.top = parent._node.top + parent._node.height + marginY
+            }
+          }
+        }
+        if (!node.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (node.isRoot) {
+          let marginX = this.getMarginX(layerIndex + 1)
+          let topTotalLeft = node.left + node.width + node.height + marginX
+          let bottomTotalLeft = node.left + node.width + node.height + marginX
+          node.children.forEach(item => {
+            if (this.checkIsTop(item)) {
+              item.left = topTotalLeft
+              topTotalLeft += item.width + marginX
+            } else {
+              item.left = bottomTotalLeft + 20
+              bottomTotalLeft += item.width + marginX
+            }
+          })
+        }
+        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.getData('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 => {
+      let marginY = this.getMarginY(node.layerIndex)
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+        marginY
+      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 = getNodeIndexInNodeList(node, childrenList)
+      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.LAYOUT_GROW_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 marginY = this.getMarginY(item.layerIndex)
+        let nodeLineX = item.left
+        let offset = node.height / 2 + marginY
+        let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
+        let line = this.lineDraw.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 + this.getMarginY(node.layerIndex + 1)
+      let line = this.lineDraw.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.lineDraw.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
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    let dir = ''
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+          : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+    } else {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+          : CONSTANTS.LAYOUT_GROW_DIR.TOP
+    }
+    if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+    } else {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    }
+  }
+}
+
+export default Fishbone

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

@@ -0,0 +1,370 @@
+import Base from './Base'
+import { walk, asyncRun, getNodeIndexInNodeList } 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.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_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.getData('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 = getNodeIndexInNodeList(node, childrenList)
+      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.lineDraw.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

@@ -0,0 +1,351 @@
+import Base from './Base'
+import { walk, asyncRun, getNodeIndexInNodeList } 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.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_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.getData('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 = getNodeIndexInNodeList(node, childrenList)
+      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.lineDraw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        let lineLength = maxx - node.left - node.width * 0.3
+        if (
+          node.parent &&
+          node.parent.isRoot &&
+          node.dir === CONSTANTS.LAYOUT_GROW_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,17 +1,14 @@
 import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
 
 //  逻辑结构图
-
 class LogicalStructure extends Base {
   //  构造函数
-
   constructor(opt = {}) {
     super(opt)
   }
 
   //  布局
-
   doLayout(callback) {
     let task = [
       () => {
@@ -31,7 +28,6 @@ class LogicalStructure extends Base {
   }
 
   //  遍历数据计算节点的left、width、height
-
   computedBaseValue() {
     walk(
       this.renderer.renderTree,
@@ -60,6 +56,15 @@ class LogicalStructure extends Base {
             }, 0) +
             (len + 1) * this.getMarginY(layerIndex + 1)
           : 0
+        // 如果存在概要，则和概要的高度取最大值
+        let generalizationNodeHeight = cur._node.checkHasGeneralization()
+          ? cur._node._generalizationNodeHeight +
+            this.getMarginY(layerIndex + 1)
+          : 0
+        cur._node.childrenAreaHeight2 = Math.max(
+          cur._node.childrenAreaHeight,
+          generalizationNodeHeight
+        )
       },
       true,
       0
@@ -67,14 +72,13 @@ class LogicalStructure extends Base {
   }
 
   //  遍历节点树计算节点的top
-
   computedTopValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
         if (
-          node.nodeData.data.expand &&
+          node.getData('expand') &&
           node.children &&
           node.children.length
         ) {
@@ -94,18 +98,17 @@ class LogicalStructure extends Base {
   }
 
   //  调整节点top
-
   adjustTopValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
+        if (!node.getData('expand')) {
           return
         }
         // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
         let difference =
-          node.childrenAreaHeight -
+          node.childrenAreaHeight2 -
           this.getMarginY(layerIndex + 1) * 2 -
           node.height
         if (difference > 0) {
@@ -118,15 +121,12 @@ class LogicalStructure extends Base {
   }
 
   //  更新兄弟节点的top
-
   updateBrothers(node, addHeight) {
     if (node.parent) {
       let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
+      let index = getNodeIndexInNodeList(node, childrenList)
       childrenList.forEach((item, _index) => {
-        if (item === node || item.hasCustomPosition()) {
+        if (item.uid === node.uid || item.hasCustomPosition()) {
           // 适配自定义位置
           return
         }
@@ -150,7 +150,6 @@ class LogicalStructure extends Base {
   }
 
   //  绘制连线，连接该节点到其子节点
-
   renderLine(node, lines, style, lineStyle) {
     if (lineStyle === 'curve') {
       this.renderLineCurve(node, lines, style)
@@ -162,12 +161,14 @@ class LogicalStructure extends Base {
   }
 
   //  直线风格连线
-
   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
@@ -178,9 +179,7 @@ class LogicalStructure extends Base {
       let x2 = item.left
       let y2 = item.top + item.height / 2
       // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
+      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 ${
@@ -192,12 +191,14 @@ class LogicalStructure extends Base {
   }
 
   //  直连风格
-
   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 =
@@ -218,12 +219,14 @@ class LogicalStructure extends Base {
   }
 
   //  曲线风格连线
-
   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 =
@@ -238,7 +241,7 @@ class LogicalStructure extends Base {
       let nodeUseLineStylePath = nodeUseLineStyle
         ? ` L ${item.left + item.width},${y2}`
         : ''
-      if (node.isRoot) {
+      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
         path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
       } else {
         path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
@@ -249,7 +252,6 @@ class LogicalStructure extends Base {
   }
 
   //  渲染按钮
-
   renderExpandBtn(node, btn) {
     let { width, height } = node
     let { translateX, translateY } = btn.transform()
@@ -257,14 +259,16 @@ class LogicalStructure extends Base {
     let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
       ? height / 2
       : 0
-    btn.translate(
-      width - translateX,
-      height / 2 - translateY + nodeUseLineStyleOffset
-    )
+    // 位置没有变化则返回
+    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,
@@ -284,6 +288,11 @@ class LogicalStructure extends Base {
     gNode.left = right + generalizationNodeMargin
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(expandBtnSize, height).x(width).y(0)
+  }
 }
 
 export default LogicalStructure

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

@@ -1,8 +1,8 @@
 import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
+import { CONSTANTS } from '../constants/constant'
 
 //  思维导图
-
 class MindMap extends Base {
   //  构造函数
   // 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
@@ -11,7 +11,6 @@ class MindMap extends Base {
   }
 
   //  布局
-
   doLayout(callback) {
     let task = [
       () => {
@@ -31,7 +30,6 @@ class MindMap extends Base {
   }
 
   //  遍历数据计算节点的left、width、height
-
   computedBaseValue() {
     walk(
       this.renderer.renderTree,
@@ -48,11 +46,14 @@ class MindMap extends Base {
             newNode.dir = parent._node.dir
           } else {
             // 节点生长方向
-            newNode.dir = index % 2 === 0 ? 'right' : 'left'
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
           }
           // 根据生长方向定位到父节点的左侧或右侧
           newNode.left =
-            newNode.dir === 'right'
+            newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
               ? parent._node.left +
                 parent._node.width +
                 this.getMarginX(layerIndex)
@@ -75,7 +76,7 @@ class MindMap extends Base {
         let leftChildrenAreaHeight = 0
         let rightChildrenAreaHeight = 0
         cur._node.children.forEach(item => {
-          if (item.dir === 'left') {
+          if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
             leftLen++
             leftChildrenAreaHeight += item.height
           } else {
@@ -89,6 +90,20 @@ class MindMap extends Base {
         cur._node.rightChildrenAreaHeight =
           rightChildrenAreaHeight +
           (rightLen + 1) * this.getMarginY(layerIndex + 1)
+
+        // 如果存在概要，则和概要的高度取最大值
+        let generalizationNodeHeight = cur._node.checkHasGeneralization()
+          ? cur._node._generalizationNodeHeight +
+            this.getMarginY(layerIndex + 1)
+          : 0
+        cur._node.leftChildrenAreaHeight2 = Math.max(
+          cur._node.leftChildrenAreaHeight,
+          generalizationNodeHeight
+        )
+        cur._node.rightChildrenAreaHeight2 = Math.max(
+          cur._node.rightChildrenAreaHeight,
+          generalizationNodeHeight
+        )
       },
       true,
       0
@@ -96,14 +111,13 @@ class MindMap extends Base {
   }
 
   //  遍历节点树计算节点的top
-
   computedTopValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
         if (
-          node.nodeData.data.expand &&
+          node.getData('expand') &&
           node.children &&
           node.children.length
         ) {
@@ -113,7 +127,7 @@ class MindMap extends Base {
           let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
           let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
           node.children.forEach(cur => {
-            if (cur.dir === 'left') {
+            if (cur.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
               cur.top = leftTotalTop
               leftTotalTop += cur.height + marginY
             } else {
@@ -129,19 +143,18 @@ class MindMap extends Base {
   }
 
   //  调整节点top
-
   adjustTopValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
+        if (!node.getData('expand')) {
           return
         }
         // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
         let base = this.getMarginY(layerIndex + 1) * 2 + node.height
-        let leftDifference = node.leftChildrenAreaHeight - base
-        let rightDifference = node.rightChildrenAreaHeight - base
+        let leftDifference = node.leftChildrenAreaHeight2 - base
+        let rightDifference = node.rightChildrenAreaHeight2 - base
         if (leftDifference > 0 || rightDifference > 0) {
           this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
         }
@@ -152,23 +165,23 @@ class MindMap extends Base {
   }
 
   //  更新兄弟节点的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
-      })
+      let index = getNodeIndexInNodeList(node, childrenList)
       childrenList.forEach((item, _index) => {
         if (item.hasCustomPosition()) {
           // 适配自定义位置
           return
         }
         let _offset = 0
-        let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+        let addHeight =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? leftAddHeight
+            : rightAddHeight
         // 上面的节点往上移
         if (_index < index) {
           _offset = -addHeight
@@ -188,7 +201,6 @@ class MindMap extends Base {
   }
 
   //  绘制连线，连接该节点到其子节点
-
   renderLine(node, lines, style, lineStyle) {
     if (lineStyle === 'curve') {
       this.renderLineCurve(node, lines, style)
@@ -200,12 +212,14 @@ class MindMap extends Base {
   }
 
   //  直线风格连线
-
   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
@@ -213,10 +227,8 @@ class MindMap extends Base {
       let x1 = 0
       let _s = 0
       // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
-      if (item.dir === 'left') {
+      let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
+      if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
         _s = -s1
         x1 = node.layerIndex === 0 ? left : left - expandBtnSize
         nodeUseLineStyleOffset = -nodeUseLineStyleOffset
@@ -225,7 +237,10 @@ class MindMap extends Base {
         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 x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_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
@@ -238,29 +253,34 @@ class MindMap extends Base {
   }
 
   //  直连风格
-
   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'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
           ? left - expandBtnSize
           : left + width + expandBtnSize
       let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_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') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
           nodeUseLineStylePath = ` L ${item.left},${y2}`
         } else {
           nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@@ -273,22 +293,27 @@ class MindMap extends Base {
   }
 
   //  曲线风格连线
-
   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'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
           ? left - expandBtnSize
-          : left + width + 20
+          : left + width + expandBtnSize
       let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_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
@@ -296,13 +321,13 @@ class MindMap extends Base {
       // 节点使用横线风格，需要额外渲染横线
       let nodeUseLineStylePath = ''
       if (this.mindMap.themeConfig.nodeUseLineStyle) {
-        if (item.dir === 'left') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
           nodeUseLineStylePath = ` L ${item.left},${y2}`
         } else {
           nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
         }
       }
-      if (node.isRoot) {
+      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
         path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
       } else {
         path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
@@ -313,7 +338,6 @@ class MindMap extends Base {
   }
 
   //  渲染按钮
-
   renderExpandBtn(node, btn) {
     let { width, height, expandBtnSize } = node
     let { translateX, translateY } = btn.transform()
@@ -321,15 +345,21 @@ class MindMap extends Base {
     let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
       ? height / 2
       : 0
-    let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
-    let y = height / 2 - translateY + nodeUseLineStyleOffset
+    // 位置没有变化则返回
+    let _x =
+      node.dir === CONSTANTS.LAYOUT_GROW_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 isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
     let {
       top,
       bottom,
@@ -355,6 +385,15 @@ class MindMap extends Base {
       (isLeft ? gNode.width : 0)
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
 }
 
 export default MindMap

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

@@ -1,17 +1,15 @@
 import Base from './Base'
-import { walk, asyncRun } from '../utils'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
 
 //  组织结构图
 // 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
 class OrganizationStructure extends Base {
   //  构造函数
-
   constructor(opt = {}) {
     super(opt)
   }
 
   //  布局
-
   doLayout(callback) {
     let task = [
       () => {
@@ -31,7 +29,6 @@ class OrganizationStructure extends Base {
   }
 
   //  遍历数据计算节点的left、width、height
-
   computedBaseValue() {
     walk(
       this.renderer.renderTree,
@@ -60,6 +57,15 @@ class OrganizationStructure extends Base {
             }, 0) +
             (len + 1) * this.getMarginY(layerIndex + 1)
           : 0
+
+        // 如果存在概要，则和概要的高度取最大值
+        let generalizationNodeWidth = cur._node.checkHasGeneralization()
+          ? cur._node._generalizationNodeWidth + this.getMarginY(layerIndex + 1)
+          : 0
+        cur._node.childrenAreaWidth2 = Math.max(
+          cur._node.childrenAreaWidth,
+          generalizationNodeWidth
+        )
       },
       true,
       0
@@ -67,14 +73,13 @@ class OrganizationStructure extends Base {
   }
 
   //  遍历节点树计算节点的left
-
   computedLeftValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
         if (
-          node.nodeData.data.expand &&
+          node.getData('expand') &&
           node.children &&
           node.children.length
         ) {
@@ -94,18 +99,17 @@ class OrganizationStructure extends Base {
   }
 
   //  调整节点left
-
   adjustLeftValue() {
     walk(
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
-        if (!node.nodeData.data.expand) {
+        if (!node.getData('expand')) {
           return
         }
         // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
         let difference =
-          node.childrenAreaWidth -
+          node.childrenAreaWidth2 -
           this.getMarginY(layerIndex + 1) * 2 -
           node.width
         if (difference > 0) {
@@ -118,13 +122,10 @@ class OrganizationStructure extends Base {
   }
 
   //  更新兄弟节点的left
-
   updateBrothers(node, addWidth) {
     if (node.parent) {
       let childrenList = node.parent.children
-      let index = childrenList.findIndex(item => {
-        return item === node
-      })
+      let index = getNodeIndexInNodeList(node, childrenList)
       childrenList.forEach((item, _index) => {
         if (item.hasCustomPosition()) {
           // 适配自定义位置
@@ -150,7 +151,6 @@ class OrganizationStructure extends Base {
   }
 
   //  绘制连线，连接该节点到其子节点
-
   renderLine(node, lines, style, lineStyle) {
     if (lineStyle === 'direct') {
       this.renderLineDirect(node, lines, style)
@@ -160,7 +160,6 @@ class OrganizationStructure extends Base {
   }
 
   //  直连风格
-
   renderLineDirect(node, lines, style) {
     if (node.children.length <= 0) {
       return []
@@ -182,12 +181,14 @@ class OrganizationStructure extends Base {
   }
 
   //  直线风格连线
-
   renderLineStraight(node, lines, style) {
     if (node.children.length <= 0) {
       return []
     }
     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)
@@ -215,7 +216,7 @@ class OrganizationStructure extends Base {
     minx = Math.min(x1, minx)
     maxx = Math.max(x1, maxx)
     // 父节点的竖线
-    let line1 = this.draw.path()
+    let line1 = this.lineDraw.path()
     node.style.line(line1)
     expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
     line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
@@ -223,7 +224,7 @@ class OrganizationStructure extends Base {
     style && style(line1, node)
     // 水平线
     if (len > 0) {
-      let lin2 = this.draw.path()
+      let lin2 = this.lineDraw.path()
       node.style.line(lin2)
       lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
       node._lines.push(lin2)
@@ -232,7 +233,6 @@ class OrganizationStructure extends Base {
   }
 
   //  渲染按钮
-
   renderExpandBtn(node, btn) {
     let { width, height, expandBtnSize } = node
     let { translateX, translateY } = btn.transform()
@@ -243,7 +243,6 @@ class OrganizationStructure extends Base {
   }
 
   //  创建概要节点
-
   renderGeneralization(node, gLine, gNode) {
     let {
       bottom,
@@ -263,6 +262,11 @@ class OrganizationStructure extends Base {
     gNode.top = bottom + generalizationNodeMargin
     gNode.left = left + (right - left - gNode.width) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
 }
 
 export default OrganizationStructure

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

@@ -0,0 +1,361 @@
+import Base from './Base'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  时间轴
+class Timeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  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 {
+          // 非根节点
+          // 时间轴2类型需要交替显示
+          if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) {
+            // 三级及以下节点以上级为准
+            if (parent._node.dir) {
+              newNode.dir = parent._node.dir
+            } else {
+              // 节点生长方向
+              newNode.dir =
+                index % 2 === 0
+                  ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+                  : CONSTANTS.LAYOUT_GROW_DIR.TOP
+            }
+          } else {
+            newNode.dir = ''
+          }
+          if (parent._node.isRoot) {
+            newNode.top =
+              parent._node.top +
+              (cur._node.height > parent._node.height
+                ? -(cur._node.height - parent._node.height) / 2
+                : (parent._node.height - cur._node.height) / 2)
+          }
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (
+          node.getData('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
+            let totalLeft = left + marginX
+            node.children.forEach(cur => {
+              cur.left = totalLeft
+              totalLeft += cur.width + marginX
+            })
+          } 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)
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.getData('expand')) {
+          return
+        }
+        // 调整left
+        if (node.isRoot) {
+          this.updateBrothersLeft(node)
+        }
+        // 调整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 +
+                (this.getNodeActChildrenLength(item) > 0
+                  ? item.expandBtnSize
+                  : 0)
+              )
+            }, 0) +
+            len * marginY
+          this.updateBrothersTop(node, totalHeight)
+        }
+      },
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          parent &&
+          parent.isRoot &&
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
+        ) {
+          // 遍历二级节点的子节点
+          node.children.forEach(item => {
+            let totalHeight = this.getNodeAreaHeight(item)
+            let _top = item.top
+            item.top =
+              node.top - (item.top - node.top) - totalHeight + node.height
+            this.updateChildren(item.children, 'top', item.top - _top)
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+        this.getMarginY(node.layerIndex)
+      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 = getNodeIndexInNodeList(node, childrenList)
+      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
+    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 x = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        let path = `M ${x},${y} L ${item.left},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      // 竖线
+      if (len > 0) {
+        let line = this.lineDraw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        if (
+          node.parent &&
+          node.parent.isRoot &&
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
+        ) {
+          line.plot(`M ${x},${top} L ${x},${miny}`)
+        } 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 &&
+        node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
+      ) {
+        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
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (this.layout === CONSTANTS.LAYOUT.TIMELINE) {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    } else {
+      let dir = ''
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        dir =
+          node.layerIndex === 1
+            ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+            : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      } else {
+        dir = CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      }
+      if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+      } else {
+        rect.size(width, expandBtnSize).x(0).y(height)
+      }
+    }
+  }
+}
+
+export default Timeline

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

@@ -0,0 +1,427 @@
+import Base from './Base'
+import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  竖向时间轴
+class VerticalTimeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  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
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          }
+          // 定位二级节点的left
+          if (parent._node.isRoot) {
+            newNode.left =
+              parent._node.left +
+              (cur._node.width > parent._node.width
+                ? -(cur._node.width - parent._node.width) / 2
+                : (parent._node.width - cur._node.width) / 2)
+          } else {
+            newNode.left =
+              newNode.dir === CONSTANTS.LAYOUT_GROW_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) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        if (isRoot) {
+          return
+        }
+        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, index) => {
+        if (
+          node.getData('expand') &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          // 定位二级节点的top
+          if (isRoot) {
+            let top = node.top + node.height
+            let totalTop = top + marginY
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          } else {
+            // 定位三级及以下节点的top
+            let marginY = this.getMarginY(layerIndex + 1)
+            let baseTop = node.top + node.height / 2 + marginY
+            // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+            let totalTop = baseTop - node.childrenAreaHeight / 2
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.getData('expand')) {
+          return
+        }
+        if (isRoot) return
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+        let difference = node.childrenAreaHeight - base
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的top
+  updateBrothers(node, addHeight) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = getNodeIndexInNodeList(node, childrenList)
+      childrenList.forEach((item, _index) => {
+        // 自定义节点位置
+        if (item.hasCustomPosition()) return
+        // 三级或三级以下节点自身位置不需要动
+        if (!node.parent.isRoot && item.uid === node.uid) return
+        let _offset = 0
+        // 二级节点上面的兄弟节点不需要移动，自身需要往下移动
+        if (node.parent.isRoot) {
+          // 上面的节点不用移
+          if (_index < index) {
+            _offset = 0
+          } else if (_index > index) {
+            // 下面的节点往下移
+            _offset = addHeight * 2
+          } else {
+            // 自身也要移动
+            _offset = addHeight
+          }
+        } else {
+          // 三级或三级以下节点两侧的兄弟节点向两侧移动
+          // 上面的节点往上移
+          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)
+    }
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = getNodeIndexInNodeList(node, childrenList)
+      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, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  // 直线连接
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let y1 = prevBother.top + prevBother.height
+        let y2 = item.top
+        let x = node.left + node.width / 2
+        let path = `M ${x},${y1} L ${x},${y2}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        let nodeRight = node.left + node.width
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemLeft = item.left
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeRight},${nodeYCenter} 
+            L ${nodeRight + offset},${nodeYCenter} 
+            L ${nodeRight + offset},${itemYCenter} 
+            L ${itemLeft},${itemYCenter}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        })
+      } else {
+        let nodeLeft = node.left
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemRight = item.left + item.width
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeLeft},${nodeYCenter} 
+            L ${nodeLeft - offset},${nodeYCenter} 
+            L ${nodeLeft - offset},${itemYCenter} 
+            L ${itemRight},${itemYCenter}`
+          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
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = `M ${x1},${y1} L ${x2},${y2}`
+        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
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = this.cubicBezierPath(x1, y1, x2, y2)
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      }
+    })
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        btn.translate(width - translateX, height / 2 - translateY)
+      } else {
+        btn.translate(-expandBtnSize - translateX, height / 2 - translateY)
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_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
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
+}
+
+export default VerticalTimeline

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

@@ -0,0 +1,240 @@
+import { degToRad } from '../utils/'
+
+export default {
+  top: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      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
+        )
+      }
+    },
+    renderLine({
+      node,
+      line,
+      top,
+      x,
+      lineLength,
+      height,
+      expandBtnSize,
+      maxy,
+      ctx
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top} L ${x + lineLength},${
+            top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      if (layerIndex >= 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let marginY = ctx.getMarginY(layerIndex + 1)
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+          marginY
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top += totalTop
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
+            marginY
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }) {
+      // 调整top
+      let len = node.children.length
+      let marginY = ctx.getMarginY(layerIndex + 1)
+      // 调整三级及以下节点的top
+      if (parent && !parent.isRoot && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
+            marginY
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let marginY = ctx.getMarginY(node.layerIndex + 1)
+        let totalHeight = node.expandBtnSize + marginY
+        node.children.forEach(item => {
+          // 调整top
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let _top = item.top
+          let _left = item.left
+          item.top =
+            node.top - (item.top - node.top) - nodeTotalHeight + node.height
+          // 调整left
+          item.left =
+            node.left +
+            node.width * ctx.indent +
+            (nodeTotalHeight + totalHeight) /
+              Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: item.top - _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  },
+  bottom: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      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
+        )
+      }
+    },
+    renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top + height} L ${x + lineLength},${
+            top +
+            height +
+            Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top} L ${x},${miny}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      let marginY = ctx.getMarginY(layerIndex + 1)
+      if (layerIndex === 1 && node.children) {
+        // 遍历二级节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+          marginY
+
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top =
+            totalTop +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
+            marginY
+        })
+      }
+      if (layerIndex > 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top -
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) -
+          marginY
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top = totalTop - item.height
+          totalTop -=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
+            marginY
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
+      // 调整top
+      let marginY = ctx.getMarginY(layerIndex + 1)
+      let len = node.children.length
+      if (layerIndex > 2 && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
+            marginY
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, -totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let marginY = ctx.getMarginY(node.layerIndex + 1)
+        let totalHeight = 0
+        let totalHeight2 = node.expandBtnSize
+        node.children.forEach(item => {
+          // 调整top
+          let hasChildren = ctx.getNodeActChildrenLength(item) > 0
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let offset = hasChildren
+            ? nodeTotalHeight -
+              item.height -
+              (hasChildren ? item.expandBtnSize : 0)
+            : 0
+          offset -= hasChildren ? marginY : 0
+          let _top = totalHeight + offset
+          let _left = item.left
+          item.top += _top
+          // 调整left
+          item.left =
+            node.left +
+            node.width * ctx.indent +
+            (nodeTotalHeight + totalHeight2) /
+              Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += offset
+          totalHeight2 += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  }
+}

simple-mind-map/src/parse/markdownTo.js

@@ -28,7 +28,7 @@ const handleList = node => {
 }
 
 // 将markdown转换成节点树
-export const transformMarkdownTo = async md => {
+export const transformMarkdownTo = md => {
   const tree = fromMarkdown(md)
   let root = {
     children: []

simple-mind-map/src/parse/toMarkdown.js

@@ -50,4 +50,4 @@ export const transformToMarkdown = root => {
     true
   )
   return content
-}
+}

simple-mind-map/src/parse/xmind.js

@@ -1,5 +1,12 @@
 import JSZip from 'jszip'
 import xmlConvert from 'xml-js'
+import {
+  getTextFromHtml,
+  imgToDataUrl,
+  parseDataUrl,
+  getImageSize,
+  isUndef
+} from '../utils/index'
 
 //  解析.xmind文件
 const parseXmindFile = file => {
@@ -8,11 +15,13 @@ const parseXmindFile = file => {
       async zip => {
         try {
           let content = ''
-          if (zip.files['content.json']) {
-            let json = await zip.files['content.json'].async('string')
-            content = transformXmind(json)
-          } else if (zip.files['content.xml']) {
-            let xml = await zip.files['content.xml'].async('string')
+          let jsonFile = zip.files['content.json']
+          let xmlFile = zip.files['content.xml'] || zip.files['/content.xml']
+          if (jsonFile) {
+            let json = await jsonFile.async('string')
+            content = await transformXmind(json, zip.files)
+          } else if (xmlFile) {
+            let xml = await xmlFile.async('string')
             let json = xmlConvert.xml2json(xml)
             content = transformOldXmind(json)
           }
@@ -33,18 +42,20 @@ const parseXmindFile = file => {
 }
 
 //  转换xmind数据
-const transformXmind = content => {
+const transformXmind = async (content, files) => {
   let data = JSON.parse(content)[0]
   let nodeTree = data.rootTopic
   let newTree = {}
-  let walk = (node, newNode) => {
+  let waitLoadImageList = []
+  let walk = async (node, newNode) => {
     newNode.data = {
       // 节点内容
-      text: node.title
+      text: isUndef(node.title) ? '' : node.title
     }
     // 节点备注
     if (node.notes) {
-      newNode.data.note = (node.notes.realHTML || node.notes.plain).content
+      let notesData = node.notes.realHTML || node.notes.plain
+      newNode.data.note = notesData ? notesData.content || '' : ''
     }
     // 超链接
     if (node.href && /^https?:\/\//.test(node.href)) {
@@ -54,6 +65,42 @@ const transformXmind = content => {
     if (node.labels && node.labels.length > 0) {
       newNode.data.tag = node.labels
     }
+    // 图片
+    if (node.image && /\.(jpg|jpeg|png|gif|webp)$/.test(node.image.src)) {
+      // 处理异步逻辑
+      let resolve = null
+      let promise = new Promise(_resolve => {
+        resolve = _resolve
+      })
+      waitLoadImageList.push(promise)
+      try {
+        // 读取图片
+        let imageType = /\.([^.]+)$/.exec(node.image.src)[1]
+        let imageBase64 =
+          `data:image/${imageType};base64,` +
+          (await files['resources/' + node.image.src.split('/')[1]].async(
+            'base64'
+          ))
+        newNode.data.image = imageBase64
+        // 如果图片尺寸不存在
+        if (!node.image.width && !node.image.height) {
+          let imageSize = await getImageSize(imageBase64)
+          newNode.data.imageSize = {
+            width: imageSize.width,
+            height: imageSize.height
+          }
+        } else {
+          newNode.data.imageSize = {
+            width: node.image.width,
+            height: node.image.height
+          }
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
     // 子节点
     newNode.children = []
     if (
@@ -69,6 +116,7 @@ const transformXmind = content => {
     }
   }
   walk(nodeTree, newTree)
+  await Promise.all(waitLoadImageList)
   return newTree
 }
 
@@ -78,6 +126,7 @@ const transformOldXmind = content => {
   let elements = data.elements
   let root = null
   let getRoot = arr => {
+    if (!arr) return
     for (let i = 0; i < arr.length; i++) {
       if (!root && arr[i].name === 'topic') {
         root = arr[i]
@@ -97,9 +146,11 @@ const transformOldXmind = content => {
   }
   let walk = (node, newNode) => {
     let nodeElements = node.elements
+    let nodeTitle = getItemByName(nodeElements, 'title')
+    nodeTitle = nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
     newNode.data = {
       // 节点内容
-      text: getItemByName(nodeElements, 'title').elements[0].text
+      text: isUndef(nodeTitle) ? '' : nodeTitle
     }
     try {
       // 节点备注
@@ -140,7 +191,7 @@ const transformOldXmind = content => {
     if (_children && _children.elements && _children.elements.length > 0) {
       _children.elements.forEach(item => {
         if (item.name === 'topics') {
-          item.elements.forEach(item2 => {
+          ;(item.elements || []).forEach(item2 => {
             let newChild = {}
             newNode.children.push(newChild)
             walk(item2, newChild)
@@ -157,8 +208,128 @@ const transformOldXmind = content => {
   return newTree
 }
 
+// 数据转换为xmind文件
+const transformToXmind = async (data, name) => {
+  const id = 'simpleMindMap_' + Date.now()
+  const imageList = []
+  // 转换核心数据
+  let newTree = {}
+  let waitLoadImageList = []
+  let walk = async (node, newNode, isRoot) => {
+    let newData = {
+      id: node.data.uid,
+      structureClass: 'org.xmind.ui.logic.right',
+      title: getTextFromHtml(node.data.text), // 节点文本
+      children: {
+        attached: []
+      }
+    }
+    // 备注
+    if (node.data.note !== undefined) {
+      newData.notes = {
+        realHTML: {
+          content: node.data.note
+        },
+        plain: {
+          content: node.data.note
+        }
+      }
+    }
+    // 超链接
+    if (node.data.hyperlink !== undefined) {
+      newData.href = node.data.hyperlink
+    }
+    // 标签
+    if (node.data.tag !== undefined) {
+      newData.labels = node.data.tag || []
+    }
+    // 图片
+    if (node.data.image) {
+      // 处理异步逻辑
+      let resolve = null
+      let promise = new Promise(_resolve => {
+        resolve = _resolve
+      })
+      waitLoadImageList.push(promise)
+      try {
+        let imgName = ''
+        let imgData = node.data.image
+        // base64之外的其他图片要先转换成data:url
+        if (!/^data:/.test(node.data.image)) {
+          imgData = await imgToDataUrl(node.data.image)
+        }
+        // 从data:url中解析出图片类型和ase64
+        let dataUrlRes = parseDataUrl(imgData)
+        imgName = 'image_' + imageList.length + '.' + dataUrlRes.type
+        imageList.push({
+          name: imgName,
+          data: dataUrlRes.base64
+        })
+        newData.image = {
+          src: 'xap:resources/' + imgName,
+          width: node.data.imageSize.width,
+          height: node.data.imageSize.height
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
+    // 样式
+    // 暂时不考虑样式
+    if (isRoot) {
+      newData.class = 'topic'
+      newNode.id = id
+      newNode.class = 'sheet'
+      newNode.title = name
+      newNode.extensions = []
+      newNode.topicPositioning = 'fixed'
+      newNode.topicOverlapping = 'overlap'
+      newNode.coreVersion = '2.100.0'
+      newNode.rootTopic = newData
+    } else {
+      Object.keys(newData).forEach(key => {
+        newNode[key] = newData[key]
+      })
+    }
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(child => {
+        let newChild = {}
+        walk(child, newChild)
+        newData.children.attached.push(newChild)
+      })
+    }
+  }
+  walk(data, newTree, true)
+  await Promise.all(waitLoadImageList)
+  const contentData = [newTree]
+  // 创建压缩包
+  const zip = new JSZip()
+  zip.file('content.json', JSON.stringify(contentData))
+  zip.file(
+    'metadata.json',
+    `{"modifier":"","dataStructureVersion":"1","layoutEngineVersion":"2","activeSheetId":"${id}"}`
+  )
+  const manifestData = {
+    'file-entries': { 'content.json': {}, 'metadata.json': {} }
+  }
+  // 图片
+  if (imageList.length > 0) {
+    imageList.forEach(item => {
+      manifestData['file-entries']['resources/' + item.name] = {}
+      const img = zip.folder('resources')
+      img.file(item.name, item.data, { base64: true })
+    })
+  }
+  zip.file('manifest.json', JSON.stringify(manifestData))
+  const zipData = await zip.generateAsync({ type: 'blob' })
+  return zipData
+}
+
 export default {
   parseXmindFile,
   transformXmind,
-  transformOldXmind
+  transformOldXmind,
+  transformToXmind
 }

simple-mind-map/src/plugins/AssociativeLine.js

@@ -1,21 +1,21 @@
-import { walk, bfsWalk, throttle } from './utils/'
+import { walk, bfsWalk, throttle } from '../utils'
 import { v4 as uuid } from 'uuid'
 import {
   getAssociativeLineTargetIndex,
   computeCubicBezierPathPoints,
-  joinCubicBezierPath,
   cubicBezierPath,
   getNodePoint,
   computeNodePoints,
-  getNodeLinePath,
-  getDefaultControlPointOffsets
-} from './utils/associativeLineUtils'
+  getNodeLinePath
+} from './associativeLine/associativeLineUtils'
+import associativeLineControlsMethods from './associativeLine/associativeLineControls'
+import associativeLineTextMethods from './associativeLine/associativeLineText'
 
-// 关联线类
+// 关联线插件
 class AssociativeLine {
   constructor(opt = {}) {
     this.mindMap = opt.mindMap
-    this.draw = this.mindMap.draw
+    this.associativeLineDraw = this.mindMap.associativeLineDraw
     // 当前所有连接线
     this.lineList = []
     // 当前激活的连接线
@@ -46,6 +46,14 @@ class AssociativeLine {
     }
     // 节流一下，不然很卡
     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()
   }
 
@@ -83,24 +91,42 @@ class AssociativeLine {
     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('mouseup', this.onControlPointMouseup.bind(this))
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
   }
 
   // 创建箭头
   createMarker() {
-    return this.draw.marker(20, 20, add => {
-      add.ref(2, 5)
+    return this.associativeLineDraw.marker(20, 20, add => {
+      add.ref(12, 5)
       add.size(10, 10)
       add.attr('orient', 'auto-start-reverse')
       this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
     })
   }
 
+  // 判断关联线坐标是否变更，有变更则使用变化后的坐标，无则默认坐标
+  updateAllLinesPos(node, toNode, associativeLinePoint) {
+    associativeLinePoint = associativeLinePoint || {}
+    let [startPoint, endPoint] = computeNodePoints(node, toNode)
+    let nodeRange = 0
+    let nodeDir = ''
+    let toNodeRange = 0
+    let toNodeDir = ''
+    if (associativeLinePoint.startPoint) {
+      nodeRange = associativeLinePoint.startPoint.range || 0
+      nodeDir = associativeLinePoint.startPoint.dir || 'right'
+      startPoint = getNodePoint(node, nodeDir, nodeRange)
+    }
+    if (associativeLinePoint.endPoint) {
+      toNodeRange = associativeLinePoint.endPoint.range || 0
+      toNodeDir = associativeLinePoint.endPoint.dir || 'right'
+      endPoint = getNodePoint(toNode, toNodeDir, toNodeRange)
+    }
+    return [startPoint, endPoint]
+  }
+
   // 渲染所有连线
   renderAllLines() {
     // 先移除
@@ -116,15 +142,15 @@ class AssociativeLine {
       null,
       cur => {
         if (!cur) return
-        let data = cur.nodeData.data
+        let data = cur.getData()
         if (
           data.associativeLineTargets &&
           data.associativeLineTargets.length > 0
         ) {
           nodeToIds.set(cur, data.associativeLineTargets)
         }
-        if (data.id) {
-          idToNode.set(data.id, cur)
+        if (data.uid) {
+          idToNode.set(data.uid, cur)
         }
       },
       () => {},
@@ -132,10 +158,17 @@ class AssociativeLine {
       0
     )
     nodeToIds.forEach((ids, node) => {
-      ids.forEach(id => {
-        let toNode = idToNode.get(id)
+      ids.forEach((uid, index) => {
+        let toNode = idToNode.get(uid)
         if (!node || !toNode) return
-        let [startPoint, endPoint] = computeNodePoints(node, toNode)
+        const associativeLinePoint = (node.getData('associativeLinePoint') ||
+          [])[index]
+        // 切换结构和布局，都会更新坐标
+        const [startPoint, endPoint] = this.updateAllLinesPos(
+          node,
+          toNode,
+          associativeLinePoint
+        )
         this.drawLine(startPoint, endPoint, node, toNode)
       })
     })
@@ -161,7 +194,7 @@ class AssociativeLine {
       toNode
     )
     // 虚线
-    let path = this.draw.path()
+    let path = this.associativeLineDraw.path()
     path
       .stroke({
         width: associativeLineWidth,
@@ -172,41 +205,78 @@ class AssociativeLine {
     path.plot(pathStr)
     path.marker('end', this.marker)
     // 不可见的点击线
-    let clickPath = this.draw.path()
+    let clickPath = this.associativeLineDraw.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()
-      // 如果当前存在激活节点，那么取消激活节点
-      if (this.mindMap.renderer.activeNodeList.length > 0) {
-        this.clearActiveNodes()
-      } else {
-        // 否则清除当前的关联线的激活状态，如果有的话
-        this.clearActiveLine()
-        // 保存当前激活的关联线信息
-        this.activeLine = [path, clickPath, node, toNode]
-        // 让不可见的点击线显示
-        clickPath.stroke({ color: associativeLineActiveColor })
-        // 渲染控制点和连线
-        this.renderControls(
-          startPoint,
-          endPoint,
-          controlPoints[0],
-          controlPoints[1]
-        )
-        this.mindMap.emit(
-          'associative_line_click',
-          path,
-          clickPath,
-          node,
-          toNode
-        )
-      }
+      this.setActiveLine({
+        path,
+        clickPath,
+        text,
+        node,
+        toNode,
+        startPoint,
+        endPoint,
+        controlPoints
+      })
     })
-    this.lineList.push([path, clickPath, node, toNode])
+    // 双击进入关联线文本编辑状态
+    clickPath.dblclick(() => {
+      if (!this.activeLine) return
+      this.showEditTextBox(text)
+    })
+    // 渲染关联线文字
+    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
+    // 如果当前存在激活节点，那么取消激活节点
+    this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    // 否则清除当前的关联线的激活状态，如果有的话
+    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)
+    this.front()
   }
 
   // 移除所有连接线
@@ -214,6 +284,7 @@ class AssociativeLine {
     this.lineList.forEach(line => {
       line[0].remove()
       line[1].remove()
+      line[2].remove()
     })
     this.lineList = []
   }
@@ -230,9 +301,10 @@ class AssociativeLine {
     let { associativeLineWidth, associativeLineColor } =
       this.mindMap.themeConfig
     if (this.isCreatingLine || !fromNode) return
+    this.front()
     this.isCreatingLine = true
     this.creatingStartNode = fromNode
-    this.creatingLine = this.draw.path()
+    this.creatingLine = this.associativeLineDraw.path()
     this.creatingLine
       .stroke({
         width: associativeLineWidth,
@@ -245,15 +317,17 @@ class AssociativeLine {
 
   // 鼠标移动事件
   onMousemove(e) {
-    if (!this.isCreatingLine) return
+    this.onControlPointMousemove(e)
     this.updateCreatingLine(e)
   }
 
   // 更新创建过程中的连接线
   updateCreatingLine(e) {
+    if (!this.isCreatingLine) return
     let { x, y } = this.getTransformedEventPos(e)
     let startPoint = getNodePoint(this.creatingStartNode)
-    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x, y)
+    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)
   }
@@ -269,14 +343,31 @@ class AssociativeLine {
     }
   }
 
+  // 计算节点偏移位置
+  getNodePos(node) {
+    const { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    const { left, top, width, height } = node
+    let translateLeft = left * scaleX + translateX
+    let translateTop = top * scaleY + translateY
+    return {
+      left,
+      top,
+      translateLeft,
+      translateTop,
+      width,
+      height
+    }
+  }
+
   // 检测当前移动到的目标节点
   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.getData('isActive')) {
+        this.mindMap.execCommand('SET_NODE_ACTIVE', node, false)
       }
-      if (node === this.creatingStartNode || this.overlapNode) {
+      if (node.uid === this.creatingStartNode.uid || this.overlapNode) {
         return
       }
       let { left, top, width, height } = node
@@ -286,39 +377,45 @@ class AssociativeLine {
         this.overlapNode = node
       }
     })
-    if (this.overlapNode && !this.overlapNode.nodeData.data.isActive) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    if (this.overlapNode && !this.overlapNode.getData('isActive')) {
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
     }
   }
 
   // 完成创建连接线
   completeCreateLine(node) {
-    if (this.creatingStartNode === node) return
+    if (this.creatingStartNode.uid === node.uid) return
     this.addLine(this.creatingStartNode, node)
-    if (this.overlapNode && this.overlapNode.nodeData.data.isActive) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+    if (this.overlapNode && this.overlapNode.getData('isActive')) {
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false)
     }
     this.isCreatingLine = false
     this.creatingStartNode = null
     this.creatingLine.remove()
     this.creatingLine = null
     this.overlapNode = null
+    this.back()
   }
 
   // 添加连接线
   addLine(fromNode, toNode) {
     if (!fromNode || !toNode) return
     // 目标节点如果没有id，则生成一个id
-    let id = toNode.nodeData.data.id
-    if (!id) {
-      id = uuid()
+    let uid = toNode.getData('uid')
+    if (!uid) {
+      uid = uuid()
       this.mindMap.execCommand('SET_NODE_DATA', toNode, {
-        id
+        uid
       })
     }
     // 将目标节点id保存起来
-    let list = fromNode.nodeData.data.associativeLineTargets || []
-    list.push(id)
+    let list = fromNode.getData('associativeLineTargets') || []
+    // 连线节点是否存在相同的id,存在则阻止添加关联线
+    const sameLine = list.some(item => item === uid)
+    if (sameLine) {
+      return
+    }
+    list.push(uid)
     // 保存控制点
     let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
     let controlPoints = computeCubicBezierPathPoints(
@@ -328,7 +425,7 @@ class AssociativeLine {
       endPoint.y
     )
     let offsetList =
-      fromNode.nodeData.data.associativeLineTargetControlOffsets || []
+      fromNode.getData('associativeLineTargetControlOffsets') || []
     // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
     offsetList[list.length - 1] = [
       {
@@ -340,47 +437,74 @@ class AssociativeLine {
         y: controlPoints[1].y - endPoint.y
       }
     ]
+    let associativeLinePoint = fromNode.getData('associativeLinePoint') || []
+    // 记录关联的起始|结束坐标
+    associativeLinePoint[list.length - 1] = { startPoint, endPoint }
     this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
       associativeLineTargets: list,
-      associativeLineTargetControlOffsets: offsetList
+      associativeLineTargetControlOffsets: offsetList,
+      associativeLinePoint
     })
   }
 
   // 删除连接线
   removeLine() {
     if (!this.activeLine) return
-    let [, , node, toNode] = this.activeLine
+    let [, , , node, toNode] = this.activeLine
     this.removeControls()
-    let { associativeLineTargets, associativeLineTargetControlOffsets } =
-      node.nodeData.data
+    let {
+      associativeLineTargets,
+      associativeLinePoint,
+      associativeLineTargetControlOffsets,
+      associativeLineText
+    } = node.getData()
+    associativeLinePoint = associativeLinePoint || []
     let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    // 更新关联线文本数据
+    let newAssociativeLineText = {}
+    if (associativeLineText) {
+      Object.keys(associativeLineText).forEach(item => {
+        if (item !== toNode.getData('uid')) {
+          newAssociativeLineText[item] = associativeLineText[item]
+        }
+      })
+    }
     this.mindMap.execCommand('SET_NODE_DATA', node, {
+      // 目标
       associativeLineTargets: associativeLineTargets.filter((_, index) => {
         return index !== targetIndex
       }),
+      // 连接线坐标
+      associativeLinePoint: associativeLinePoint.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) {
-      this.activeLine[1].stroke({
+      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()
+      this.back()
     }
   }
 
@@ -391,6 +515,7 @@ class AssociativeLine {
     this.lineList.forEach(line => {
       line[0].hide()
       line[1].hide()
+      line[2].hide()
     })
     this.hideControls()
   }
@@ -401,224 +526,23 @@ class AssociativeLine {
     this.lineList.forEach(line => {
       line[0].show()
       line[1].show()
+      line[2].show()
     })
     this.showControls()
     this.isNodeDragging = false
   }
 
-  // 创建控制点、连线节点
-  createControlNodes() {
-    let { associativeLineActiveColor } = this.mindMap.themeConfig
-    // 连线
-    this.controlLine1 = this.draw
-      .line()
-      .stroke({ color: associativeLineActiveColor, width: 2 })
-    this.controlLine2 = this.draw
-      .line()
-      .stroke({ color: associativeLineActiveColor, width: 2 })
-    // 控制点
-    this.controlPoint1 = this.createOneControlNode('controlPoint1')
-    this.controlPoint2 = this.createOneControlNode('controlPoint2')
+  // 关联线顶层显示
+  front() {
+    if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return
+    this.associativeLineDraw.front()
   }
 
-  // 创建控制点
-  createOneControlNode(pointKey) {
-    let { associativeLineActiveColor } = this.mindMap.themeConfig
-    return this.draw
-      .circle(this.controlPointDiameter)
-      .stroke({ color: associativeLineActiveColor })
-      .fill({ color: '#fff' })
-      .click(e => {
-        e.stopPropagation()
-      })
-      .mousedown(e => {
-        this.onControlPointMousedown(e, pointKey)
-      })
-  }
-
-  // 控制点的鼠标按下事件
-  onControlPointMousedown(e, pointKey) {
-    e.stopPropagation()
-    this.isControlPointMousedown = true
-    this.mousedownControlPointKey = pointKey
-  }
-
-  // 控制点的鼠标移动事件
-  onControlPointMousemove(e) {
-    if (
-      !this.isControlPointMousedown ||
-      !this.mousedownControlPointKey ||
-      !this[this.mousedownControlPointKey]
-    )
-      return
-    e.stopPropagation()
-    e.preventDefault()
-    let radius = this.controlPointDiameter / 2
-    // 转换鼠标当前的位置
-    let { x, y } = this.getTransformedEventPos(e)
-    this.controlPointMousemoveState.pos = {
-      x,
-      y
-    }
-    // 更新当前拖拽的控制点的位置
-    this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
-    let [path, clickPath, node, toNode] = this.activeLine
-    let [startPoint, endPoint] = computeNodePoints(node, toNode)
-    this.controlPointMousemoveState.startPoint = startPoint
-    this.controlPointMousemoveState.endPoint = endPoint
-    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
-    this.controlPointMousemoveState.targetIndex = targetIndex
-    let offsets = []
-    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
-    if (!associativeLineTargetControlOffsets) {
-      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
-      offsets = getDefaultControlPointOffsets(startPoint, endPoint)
-    } else {
-      offsets = associativeLineTargetControlOffsets[targetIndex]
-    }
-    let point1 = null
-    let point2 = null
-    // 拖拽的是控制点1
-    if (this.mousedownControlPointKey === 'controlPoint1') {
-      point1 = {
-        x,
-        y
-      }
-      point2 = {
-        x: endPoint.x + offsets[1].x,
-        y: endPoint.y + offsets[1].y
-      }
-      // 更新控制点1的连线
-      this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
-    } else {
-      // 拖拽的是控制点2
-      point1 = {
-        x: startPoint.x + offsets[0].x,
-        y: startPoint.y + offsets[0].y
-      }
-      point2 = {
-        x,
-        y
-      }
-      // 更新控制点2的连线
-      this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
-    }
-    // 更新关联线
-    let pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
-    path.plot(pathStr)
-    clickPath.plot(pathStr)
-  }
-
-  // 控制点的鼠标移动事件
-  onControlPointMouseup(e) {
-    if (!this.isControlPointMousedown) return
-    e.stopPropagation()
-    e.preventDefault()
-    let { pos, startPoint, endPoint, targetIndex } =
-      this.controlPointMousemoveState
-    let [, , node] = this.activeLine
-    let offsetList = []
-    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
-    if (!associativeLineTargetControlOffsets) {
-      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
-      offsetList[targetIndex] = getDefaultControlPointOffsets(startPoint, endPoint)
-    } else {  
-      offsetList = associativeLineTargetControlOffsets
-    }
-    let offset1 = null
-    let offset2 = null
-    if (this.mousedownControlPointKey === 'controlPoint1') {
-      // 更新控制点1数据
-      offset1 = {
-        x: pos.x - startPoint.x,
-        y: pos.y - startPoint.y
-      }
-      offset2 = offsetList[targetIndex][1]
-    } else {
-      // 更新控制点2数据
-      offset1 = offsetList[targetIndex][0]
-      offset2 = {
-        x: pos.x - endPoint.x,
-        y: pos.y - endPoint.y
-      }
-    }
-    offsetList[targetIndex] = [offset1, offset2]
-    this.mindMap.execCommand('SET_NODE_DATA', node, {
-      associativeLineTargetControlOffsets: offsetList
-    })
-    // 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
-    setTimeout(() => {
-      this.resetControlPoint()
-    }, 0)
-  }
-
-  // 复位控制点移动
-  resetControlPoint() {
-    this.isControlPointMousedown = false
-    this.mousedownControlPointKey = ''
-    this.controlPointMousemoveState = {
-      pos: null,
-      startPoint: null,
-      endPoint: null,
-      targetIndex: ''
-    }
-  }
-
-  // 渲染控制点
-  renderControls(startPoint, endPoint, point1, point2) {
-    if (!this.controlLine1) {
-      this.createControlNodes()
-    }
-    let radius = this.controlPointDiameter / 2
-    // 控制点和起终点的连线
-    this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
-    this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
-    // 控制点
-    this.controlPoint1.x(point1.x - radius).y(point1.y - radius)
-    this.controlPoint2.x(point2.x - radius).y(point2.y - radius)
-  }
-
-  // 删除控制点
-  removeControls() {
-    if (!this.controlLine1) return
-    ;[
-      this.controlLine1,
-      this.controlLine2,
-      this.controlPoint1,
-      this.controlPoint2
-    ].forEach(item => {
-      item.remove()
-    })
-    this.controlLine1 = null
-    this.controlLine2 = null
-    this.controlPoint1 = null
-    this.controlPoint2 = null
-  }
-
-  // 隐藏控制点
-  hideControls() {
-    if (!this.controlLine1) return
-    ;[
-      this.controlLine1,
-      this.controlLine2,
-      this.controlPoint1,
-      this.controlPoint2
-    ].forEach(item => {
-      item.hide()
-    })
-  }
-
-  // 显示控制点
-  showControls() {
-    if (!this.controlLine1) return
-    ;[
-      this.controlLine1,
-      this.controlLine2,
-      this.controlPoint1,
-      this.controlPoint2
-    ].forEach(item => {
-      item.show()
-    })
+  // 关联线回到原有层级
+  back() {
+    if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return
+    this.associativeLineDraw.back() // 最底层
+    this.associativeLineDraw.forward() // 连线层上面
   }
 }
 

simple-mind-map/src/plugins/Cooperate.js

@@ -0,0 +1,345 @@
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+import { isSameObject, simpleDeepClone, getType, isUndef } from '../utils/index'
+
+// 协同插件
+class Cooperate {
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    // yjs文档
+    this.ydoc = new Y.Doc()
+    // 共享数据
+    this.ymap = null
+    // 连接提供者
+    this.provider = null
+    // 感知数据
+    this.awareness = null
+    this.currentAwarenessData = []
+    this.waitNodeUidMap = {} // 该列表中的uid对应的节点还未渲染完毕
+    // 当前的平级对象类型的思维导图数据
+    this.currentData = null
+    // 用户信息
+    this.userInfo = null
+    // 绑定事件
+    this.bindEvent()
+    // 处理实例化时传入的思维导图数据
+    if (this.mindMap.opt.data) {
+      this.initData(this.mindMap.opt.data)
+    }
+  }
+
+  // 初始化数据
+  initData(data) {
+    data = simpleDeepClone(data)
+    // 解绑原来的数据
+    if (this.ymap) {
+      this.ymap.unobserve(this.onObserve)
+    }
+    // 创建共享数据
+    this.ymap = this.ydoc.getMap()
+    // 思维导图树结构转平级对象结构
+    this.currentData = this.transformTreeDataToObject(data)
+    // 将思维导图数据添加到共享数据中
+    Object.keys(this.currentData).forEach(uid => {
+      this.ymap.set(uid, this.currentData[uid])
+    })
+    // 监听数据同步
+    this.onObserve = this.onObserve.bind(this)
+    this.ymap.observe(this.onObserve)
+  }
+
+  // 获取yjs doc实例
+  getDoc() {
+    return this.ydoc
+  }
+
+  // 设置连接提供者
+  setProvider(provider, webrtcProviderConfig = {}) {
+    const { roomName, signalingList, ...otherConfig } = webrtcProviderConfig
+    this.provider =
+      provider ||
+      new WebrtcProvider(roomName, this.ydoc, {
+        signaling: signalingList,
+        ...otherConfig
+      })
+    this.awareness = this.provider.awareness
+
+    // 监听状态同步事件
+    this.onAwareness = this.onAwareness.bind(this)
+    this.awareness.on('change', this.onAwareness)
+  }
+
+  // 绑定事件
+  bindEvent() {
+    // 监听思维导图改变
+    this.onDataChange = this.onDataChange.bind(this)
+    this.mindMap.on('data_change', this.onDataChange)
+
+    // 监听思维导图节点激活事件
+    this.onNodeActive = this.onNodeActive.bind(this)
+    this.mindMap.on('node_active', this.onNodeActive)
+
+    // 监听思维导图渲染完毕事件
+    this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this)
+    this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd)
+
+    // 监听设置思维导图数据事件
+    this.initData = this.initData.bind(this)
+    this.mindMap.on('set_data', this.initData)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    if (this.ymap) {
+      this.ymap.unobserve(this.onObserve)
+    }
+    this.mindMap.off('data_change', this.onDataChange)
+    this.mindMap.off('node_active', this.onNodeActive)
+    this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd)
+    this.mindMap.off('set_data', this.initData)
+    this.ydoc.destroy()
+  }
+
+  // 数据同步时的处理，更新当前思维导图
+  onObserve(event) {
+    const data = event.target.toJSON()
+    // 如果数据没有改变直接返回
+    if (isSameObject(data, this.currentData)) return
+    this.currentData = data
+    // 平级对象转树结构
+    const res = this.transformObjectToTreeData(data)
+    if (!res) return
+    // 更新思维导图画布
+    this.mindMap.renderer.setData(res)
+    this.mindMap.render()
+    this.mindMap.command.addHistory()
+  }
+
+  // 当前思维导图改变后的处理，触发同步
+  onDataChange(data) {
+    const res = this.transformTreeDataToObject(data)
+    this.updateChanges(res)
+  }
+
+  // 找出更新点
+  updateChanges(data) {
+    const oldData = this.currentData
+    this.currentData = data
+    this.ydoc.transact(() => {
+      // 找出新增的或修改的
+      Object.keys(data).forEach(uid => {
+        // 新增的或已经存在的，如果数据发生了改变
+        if (!oldData[uid] || !isSameObject(oldData[uid], data[uid])) {
+          this.ymap.set(uid, data[uid])
+        }
+      })
+      // 找出删除的
+      Object.keys(oldData).forEach(uid => {
+        if (!data[uid]) {
+          this.ymap.delete(uid)
+        }
+      })
+    })
+  }
+
+  // 节点激活状态改变后触发感知数据同步
+  onNodeActive(node, nodeList) {
+    if (this.userInfo) {
+      this.awareness.setLocalStateField(this.userInfo.name, {
+        // 用户信息
+        userInfo: {
+          ...this.userInfo
+        },
+        // 当前激活的节点id列表
+        nodeIdList: nodeList.map(item => {
+          return item.uid
+        })
+      })
+    }
+  }
+
+  // 节点树渲染完毕事件
+  onNodeTreeRenderEnd() {
+    Object.keys(this.waitNodeUidMap).forEach(uid => {
+      const node = this.mindMap.renderer.findNodeByUid(uid)
+      if (node) {
+        node.addUser(this.waitNodeUidMap[uid])
+      }
+    })
+    this.waitNodeUidMap = {}
+  }
+
+  // 设置用户信息
+  /**
+   * {
+   *    id: '',     // 必传，用户唯一的id
+   *    name: '',   // 用户名称。name和avatar两个只传一个即可，如果都传了，会显示avatar
+   *    avatar: '', // 用户头像
+   *    color: ''   // 如果没有传头像，那么会以一个圆形来显示名称的第一个字，文字的颜色为白色，圆的颜色可以通过该字段设置
+   * }
+   **/
+  setUserInfo(userInfo) {
+    if (
+      getType(userInfo) !== 'Object' ||
+      isUndef(userInfo.id) ||
+      (isUndef(userInfo.name) && isUndef(userInfo.avatar))
+    )
+      return
+    this.userInfo = userInfo || null
+  }
+
+  // 监听感知数据同步事件
+  onAwareness() {
+    const walk = (list, callback) => {
+      list.forEach(value => {
+        const userName = Object.keys(value)[0]
+        if (!userName) return
+        const data = value[userName]
+        const userInfo = data.userInfo
+        const nodeIdList = data.nodeIdList
+        nodeIdList.forEach(uid => {
+          const node = this.mindMap.renderer.findNodeByUid(uid)
+          callback(uid, node, userInfo)
+        })
+      })
+    }
+    // 清除之前的数据
+    walk(this.currentAwarenessData, (uid, node, userInfo) => {
+      if (node) {
+        node.removeUser(userInfo)
+      }
+    })
+    // 设置当前数据
+    const data = Array.from(this.awareness.getStates().values())
+    this.currentAwarenessData = data
+    walk(data, (uid, node, userInfo) => {
+      // 不显示自己
+      if (userInfo.id === this.userInfo.id) return
+      if (node) {
+        node.addUser(userInfo)
+      } else {
+        this.waitNodeUidMap[uid] = userInfo
+      }
+    })
+  }
+
+  // 将树结构转平级对象
+  /*
+    {
+        data: {
+            uid: 'xxx'
+        },
+        children: [
+            {
+                data: {
+                    uid: 'xxx'
+                },
+                children: []
+            }
+        ]
+    }
+    转为：
+    {
+        uid: {
+            children: [uid1, uid2],
+            data: {}
+        }
+    }
+  */
+  transformTreeDataToObject(data) {
+    const res = {}
+    const walk = (root, parent) => {
+      const uid = root.data.uid
+      if (parent) {
+        parent.children.push(uid)
+      }
+      res[uid] = {
+        isRoot: !parent,
+        data: {
+          ...root.data
+        },
+        children: []
+      }
+      if (root.children && root.children.length > 0) {
+        root.children.forEach(item => {
+          walk(item, res[uid])
+        })
+      }
+    }
+    walk(data, null)
+    return res
+  }
+
+  // 找到父节点的uid
+  findParentUid(data, targetUid) {
+    const uids = Object.keys(data)
+    let res = ''
+    uids.forEach(uid => {
+      const children = data[uid].children
+      const isParent =
+        children.findIndex(childUid => {
+          return childUid === targetUid
+        }) !== -1
+      if (isParent) {
+        res = uid
+      }
+    })
+    return res
+  }
+
+  // 将平级对象转树结构
+  transformObjectToTreeData(data) {
+    const uids = Object.keys(data)
+    if (uids.length <= 0) return null
+    const rootKey = uids.find(uid => {
+      return data[uid].isRoot
+    })
+    if (!rootKey || !data[rootKey]) return null
+    // 根节点
+    const res = {
+      data: simpleDeepClone(data[rootKey].data),
+      children: []
+    }
+    const map = {}
+    map[rootKey] = res
+    uids.forEach(uid => {
+      const parentUid = this.findParentUid(data, uid)
+      const cur = data[uid]
+      const node = map[uid] || {
+        data: simpleDeepClone(cur.data),
+        children: []
+      }
+      if (!map[uid]) {
+        map[uid] = node
+      }
+      if (parentUid) {
+        const index = data[parentUid].children.findIndex(item => {
+          return item === uid
+        })
+        if (!map[parentUid]) {
+          map[parentUid] = {
+            data: simpleDeepClone(data[parentUid].data),
+            children: []
+          }
+        }
+        map[parentUid].children[index] = node
+      }
+    })
+    return res
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+Cooperate.instanceName = 'cooperate'
+
+export default Cooperate

simple-mind-map/src/plugins/Drag.js

@@ -0,0 +1,687 @@
+import { bfsWalk, throttle, getTopAncestorsFomNodeList, getNodeIndexInNodeList } from '../utils'
+import Base from '../layouts/Base'
+
+// 节点拖动插件
+class Drag extends Base {
+  //  构造函数
+  constructor({ mindMap }) {
+    super(mindMap.renderer)
+    this.mindMap = mindMap
+    this.reset()
+    this.bindEvent()
+  }
+
+  //  复位
+  reset() {
+    // 是否正在跳转中
+    this.isDragging = false
+    // 鼠标按下的节点
+    this.mousedownNode = null
+    // 被拖拽中的节点列表
+    this.beingDragNodeList = []
+    // 当前画布节点列表
+    this.nodeList = []
+    // 当前重叠节点
+    this.overlapNode = null
+    // 当前上一个同级节点
+    this.prevNode = null
+    // 当前下一个同级节点
+    this.nextNode = null
+    // 画布的变换数据
+    this.drawTransform = null
+    // 克隆节点
+    this.clone = null
+    // 同级位置占位符
+    this.placeholder = null
+    // 鼠标按下位置和节点左上角的偏移量
+    this.offsetX = 0
+    this.offsetY = 0
+    // 当前鼠标是否按下
+    this.isMousedown = false
+    // 拖拽的鼠标位置变量
+    this.mouseDownX = 0
+    this.mouseDownY = 0
+    this.mouseMoveX = 0
+    this.mouseMoveY = 0
+    // 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件
+    this.checkDragOffset = 10
+    this.minOffset = 10
+  }
+
+  //  绑定事件
+  bindEvent() {
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+    this.mindMap.on('node_mousedown', (node, e) => {
+      // 只读模式、不是鼠标左键按下、按下的是概要节点或根节点直接返回
+      if (
+        this.mindMap.opt.readonly ||
+        e.which !== 1 ||
+        node.isGeneralization ||
+        node.isRoot
+      ) {
+        return
+      }
+      e.preventDefault()
+      this.isMousedown = true
+      // 记录鼠标按下时的节点
+      this.mousedownNode = node
+      // 记录鼠标按下的坐标
+      const { 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 || !this.isMousedown) {
+        return
+      }
+      e.preventDefault()
+      const { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseMoveX = x
+      this.mouseMoveY = y
+      // 还没开始移动时鼠标位移过小不认为是拖拽
+      if (
+        !this.isDragging &&
+        Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
+        Math.abs(y - this.mouseDownY) <= this.checkDragOffset
+      ) {
+        return
+      }
+      this.mindMap.emit('node_dragging')
+      this.handleStartMove()
+      this.onMove(x, y, e)
+    })
+    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
+    }
+    this.isMousedown = false
+    // 恢复被拖拽节点的临时设置
+    this.beingDragNodeList.forEach(node => {
+      node.setOpacity(1)
+      node.showChildren()
+      node.endDrag()
+    })
+    this.removeCloneNode()
+    let overlapNodeUid = this.overlapNode
+      ? this.overlapNode.getData('uid')
+      : ''
+    let prevNodeUid = this.prevNode ? this.prevNode.getData('uid') : ''
+    let nextNodeUid = this.nextNode ? this.nextNode.getData('uid') : ''
+    // 存在重叠子节点，则移动作为其子节点
+    if (this.overlapNode) {
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false)
+      this.mindMap.execCommand(
+        'MOVE_NODE_TO',
+        this.beingDragNodeList,
+        this.overlapNode
+      )
+    } else if (this.prevNode) {
+      // 存在前一个相邻节点，作为其下一个兄弟节点
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.prevNode, false)
+      this.mindMap.execCommand(
+        'INSERT_AFTER',
+        this.beingDragNodeList,
+        this.prevNode
+      )
+    } else if (this.nextNode) {
+      // 存在下一个相邻节点，作为其前一个兄弟节点
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.nextNode, false)
+      this.mindMap.execCommand(
+        'INSERT_BEFORE',
+        this.beingDragNodeList,
+        this.nextNode
+      )
+    } else if (
+      this.clone &&
+      this.mindMap.opt.enableFreeDrag &&
+      this.beingDragNodeList.length === 1
+    ) {
+      // 如果只拖拽了一个节点，那么设置自定义位置
+      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.mousedownNode.left = x
+      this.mousedownNode.top = y
+      this.mousedownNode.customLeft = x
+      this.mousedownNode.customTop = y
+      this.mindMap.execCommand(
+        'SET_NODE_CUSTOM_POSITION',
+        this.mousedownNode,
+        x,
+        y
+      )
+      this.mindMap.render()
+    }
+    this.reset()
+    this.mindMap.emit('node_dragend', {
+      overlapNodeUid,
+      prevNodeUid,
+      nextNodeUid
+    })
+  }
+
+  //  拖动中
+  onMove(x, y, e) {
+    if (!this.isMousedown) {
+      return
+    }
+    // 更新克隆节点的位置
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    let cloneNodeLeft = x - this.offsetX
+    let cloneNodeTop = y - this.offsetY
+    x = (cloneNodeLeft - translateX) / scaleX
+    y = (cloneNodeTop - translateY) / scaleY
+    let t = this.clone.transform()
+    this.clone.translate(x - t.translateX, y - t.translateY)
+    // 检测新位置
+    this.checkOverlapNode()
+    // 如果注册了多选节点插件，那么复用它的边缘自动移动画布功能
+    if (this.mindMap.opt.autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) {
+      this.drawTransform = this.mindMap.draw.transform()
+      this.mindMap.select.clearAutoMoveTimer()
+      this.mindMap.select.onMove(e.clientX, e.clientY)
+    }
+  }
+
+  // 开始拖拽时初始化一些数据
+  handleStartMove() {
+    if (!this.isDragging) {
+      this.isDragging = true
+      // 鼠标按下的节点
+      let node = this.mousedownNode
+      // 计算鼠标按下的位置距离节点左上角的距离
+      this.drawTransform = this.mindMap.draw.transform()
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      this.offsetX = this.mouseDownX - (node.left * scaleX + translateX)
+      this.offsetY = this.mouseDownY - (node.top * scaleY + translateY)
+      // 如果鼠标按下的节点是激活节点，那么保存当前所有激活的节点
+      if (node.getData('isActive')) {
+        // 找出这些激活节点中的最顶层节点
+        this.beingDragNodeList = getTopAncestorsFomNodeList(
+          // 过滤掉根节点和概要节点
+          this.mindMap.renderer.activeNodeList.filter(item => {
+            return !item.isRoot && !item.isGeneralization
+          })
+        )
+      } else {
+        // 否则只拖拽按下的节点
+        this.beingDragNodeList = [node]
+      }
+      // 将节点树转为节点数组
+      this.nodeTreeToList()
+      // 创建克隆节点
+      this.createCloneNode()
+      // 清除当前所有激活的节点
+      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    }
+  }
+
+  // 节点由树转换成数组，从子节点到根节点
+  nodeTreeToList() {
+    const list = []
+    bfsWalk(this.mindMap.renderer.root, node => {
+      // 过滤掉当前被拖拽的节点
+      if (this.checkIsInBeingDragNodeList(node)) {
+        return
+      }
+      if (!list[node.layerIndex]) {
+        list[node.layerIndex] = []
+      }
+      list[node.layerIndex].push(node)
+    })
+    this.nodeList = list.reduceRight((res, cur) => {
+      return [...res, ...cur]
+    }, [])
+  }
+
+  //  创建克隆节点
+  createCloneNode() {
+    if (!this.clone) {
+      const {
+        dragMultiNodeRectConfig,
+        dragPlaceholderRectFill,
+        dragOpacityConfig
+      } = this.mindMap.opt
+      const {
+        width: rectWidth,
+        height: rectHeight,
+        fill: rectFill
+      } = dragMultiNodeRectConfig
+      const node = this.beingDragNodeList[0]
+      const lineColor = node.style.merge('lineColor', true)
+      // 如果当前被拖拽的节点数量大于1，那么创建一个矩形示意
+      if (this.beingDragNodeList.length > 1) {
+        this.clone = this.mindMap.otherDraw
+          .rect()
+          .size(rectWidth, rectHeight)
+          .radius(rectHeight / 2)
+          .fill({
+            color: rectFill || lineColor
+          })
+        this.offsetX = rectWidth / 2
+        this.offsetY = rectHeight / 2
+      } else {
+        // 否则克隆当前的节点
+        this.clone = node.group.clone()
+        // 删除展开收起按钮元素
+        const expandEl = this.clone.findOne('.smm-expand-btn')
+        if (expandEl) {
+          expandEl.remove()
+        }
+        this.mindMap.otherDraw.add(this.clone)
+      }
+      this.clone.opacity(dragOpacityConfig.cloneNodeOpacity)
+      this.clone.css('z-index', 99999)
+      // 同级位置提示元素
+      this.placeholder = this.mindMap.otherDraw.rect().fill({
+        color: dragPlaceholderRectFill || lineColor
+      })
+      // 当前被拖拽的节点的临时设置
+      this.beingDragNodeList.forEach(node => {
+        // 降低透明度
+        node.setOpacity(dragOpacityConfig.beingDragNodeOpacity)
+        // 隐藏连线及下级节点
+        node.hideChildren()
+        // 设置拖拽状态
+        node.startDrag()
+      })
+    }
+  }
+
+  //  移除克隆节点
+  removeCloneNode() {
+    if (!this.clone) {
+      return
+    }
+    this.clone.remove()
+    this.placeholder.remove()
+  }
+
+  //  检测重叠节点
+  checkOverlapNode() {
+    if (!this.drawTransform || !this.placeholder) {
+      return
+    }
+    this.overlapNode = null
+    this.prevNode = null
+    this.nextNode = null
+    this.placeholder.size(0, 0)
+    this.nodeList.forEach(node => {
+      if (node.getData('isActive')) {
+        this.mindMap.execCommand('SET_NODE_ACTIVE', node, false)
+      }
+      if (this.overlapNode || (this.prevNode && this.nextNode)) {
+        return
+      }
+      switch (this.mindMap.opt.layout) {
+        case 'logicalStructure':
+          this.handleLogicalStructure(node)
+          break
+        case 'mindMap':
+          this.handleMindMap(node)
+          break
+        case 'organizationStructure':
+          this.handleOrganizationStructure(node)
+          break
+        case 'catalogOrganization':
+          this.handleCatalogOrganization(node)
+          break
+        case 'timeline':
+          this.handleTimeLine(node)
+          break
+        case 'timeline2':
+          this.handleTimeLine2(node)
+          break
+        case 'verticalTimeline':
+          this.handleLogicalStructure(node)
+          break
+        case 'fishbone':
+          this.handleFishbone(node)
+          break
+        default:
+          this.handleLogicalStructure(node)
+      }
+    })
+    if (this.overlapNode) {
+      this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
+    }
+  }
+
+  // 垂直方向比较
+  // isReverse：是否反向
+  handleVerticalCheck(node, checkList, isReverse = false) {
+    let x = this.mouseMoveX
+    let y = this.mouseMoveY
+    let nodeRect = this.getNodeRect(node)
+    if (isReverse) {
+      checkList = checkList.reverse()
+    }
+    let oneFourthHeight = nodeRect.height / 4
+    let { prevBrotherOffset, nextBrotherOffset } =
+      this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'v')
+    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) {
+          if (isReverse) {
+            this.nextNode = node
+          } else {
+            this.prevNode = node
+          }
+          let size = this.formatPlaceholderSize(nextBrotherOffset)
+          this.setPlaceholderRect(
+            node.width,
+            size,
+            nodeRect.originLeft,
+            nodeRect.originBottom
+          )
+        } else if (checkIsNextNode) {
+          if (isReverse) {
+            this.prevNode = node
+          } else {
+            this.nextNode = node
+          }
+          let size = this.formatPlaceholderSize(prevBrotherOffset)
+          this.setPlaceholderRect(
+            node.width,
+            size,
+            nodeRect.originLeft,
+            nodeRect.originTop - size
+          )
+        }
+      }
+      // 检测是否重叠
+      this.checkIsOverlap({
+        node,
+        dir: 'v',
+        prevBrotherOffset,
+        nextBrotherOffset,
+        size: oneFourthHeight,
+        pos: y,
+        nodeRect
+      })
+    }
+  }
+
+  // 水平方向比较
+  handleHorizontalCheck(node, checkList) {
+    let x = this.mouseMoveX
+    let y = this.mouseMoveY
+    let nodeRect = this.getNodeRect(node)
+    let oneFourthWidth = nodeRect.width / 4
+    let { prevBrotherOffset, nextBrotherOffset } =
+      this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'h')
+    if (nodeRect.top <= y && nodeRect.bottom >= y) {
+      // 检测兄弟节点位置
+      if (
+        !this.overlapNode &&
+        !this.prevNode &&
+        !this.nextNode &&
+        !node.isRoot
+      ) {
+        let checkIsPrevNode =
+          nextBrotherOffset > 0 // 距离下一个兄弟节点的距离大于0
+            ? x < nodeRect.right + nextBrotherOffset && x >= nodeRect.right // 那么在当前节点外底部判断
+            : x <= nodeRect.right && x >= nodeRect.right - oneFourthWidth // 否则在当前节点内底部1/4区间判断
+        let checkIsNextNode =
+          prevBrotherOffset > 0 // 距离上一个兄弟节点的距离大于0
+            ? x > nodeRect.left - prevBrotherOffset && x <= nodeRect.left // 那么在当前节点外底部判断
+            : x <= nodeRect.left + oneFourthWidth && x >= nodeRect.left
+        if (checkIsPrevNode) {
+          this.prevNode = node
+          let size = this.formatPlaceholderSize(nextBrotherOffset)
+          this.setPlaceholderRect(
+            size,
+            node.height,
+            nodeRect.originRight,
+            nodeRect.originTop
+          )
+        } else if (checkIsNextNode) {
+          this.nextNode = node
+          let size = this.formatPlaceholderSize(prevBrotherOffset)
+          this.setPlaceholderRect(
+            size,
+            node.height,
+            nodeRect.originLeft - size,
+            nodeRect.originTop
+          )
+        }
+      }
+      // 检测是否重叠
+      this.checkIsOverlap({
+        node,
+        dir: 'h',
+        prevBrotherOffset,
+        nextBrotherOffset,
+        size: oneFourthWidth,
+        pos: x,
+        nodeRect
+      })
+    }
+  }
+
+  // 获取节点距前一个和后一个节点的距离
+  getNodeDistanceToSiblingNode(checkList, node, nodeRect, dir) {
+    let dir1 = dir === 'v' ? 'top' : 'left'
+    let dir2 = dir === 'v' ? 'bottom' : 'right'
+    let index = getNodeIndexInNodeList(node, checkList)
+    let prevBrother = null
+    let nextBrother = null
+    if (index !== -1) {
+      if (index - 1 >= 0) {
+        prevBrother = checkList[index - 1]
+      }
+      if (index + 1 <= checkList.length - 1) {
+        nextBrother = checkList[index + 1]
+      }
+    }
+    // 和前一个兄弟节点的距离
+    let prevBrotherOffset = 0
+    if (prevBrother) {
+      let prevNodeRect = this.getNodeRect(prevBrother)
+      prevBrotherOffset = nodeRect[dir1] - prevNodeRect[dir2]
+      // 间距小于10就当它不存在
+      prevBrotherOffset =
+        prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
+    } else {
+      // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
+      prevBrotherOffset = this.minOffset
+    }
+    // 和后一个兄弟节点的距离
+    let nextBrotherOffset = 0
+    if (nextBrother) {
+      let nextNodeRect = this.getNodeRect(nextBrother)
+      nextBrotherOffset = nextNodeRect[dir1] - nodeRect[dir2]
+      nextBrotherOffset =
+        nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
+    } else {
+      nextBrotherOffset = this.minOffset
+    }
+    return {
+      prevBrotherOffset,
+      nextBrotherOffset
+    }
+  }
+
+  // 处理提示元素的大小
+  formatPlaceholderSize(size) {
+    const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
+    return size > 0 ? Math.min(size, nodeDragPlaceholderMaxSize) : 5
+  }
+
+  // 设置提示元素的大小和位置
+  setPlaceholderRect(w, h, x, y) {
+    this.placeholder.size(w, h).move(x, y)
+  }
+
+  // 检测是否重叠
+  checkIsOverlap({
+    node,
+    dir,
+    prevBrotherOffset,
+    nextBrotherOffset,
+    size,
+    pos,
+    nodeRect
+  }) {
+    let dir1 = dir === 'v' ? 'top' : 'left'
+    let dir2 = dir === 'v' ? 'bottom' : 'right'
+    if (!this.overlapNode && !this.prevNode && !this.nextNode) {
+      if (
+        nodeRect[dir1] + (prevBrotherOffset > 0 ? 0 : size) <= pos &&
+        nodeRect[dir2] - (nextBrotherOffset > 0 ? 0 : size) >= pos
+      ) {
+        this.overlapNode = node
+      }
+    }
+  }
+
+  // 处理逻辑结构图
+  handleLogicalStructure(node) {
+    const checkList = this.commonGetNodeCheckList(node)
+    this.handleVerticalCheck(node, checkList)
+  }
+
+  // 处理思维导图
+  handleMindMap(node) {
+    const checkList = node.parent
+      ? node.parent.children.filter(item => {
+          let sameDir = true
+          if (node.layerIndex === 1) {
+            sameDir = item.dir === node.dir
+          }
+          return sameDir && !this.checkIsInBeingDragNodeList(item)
+        })
+      : []
+    this.handleVerticalCheck(node, checkList)
+  }
+
+  // 处理组织结构图
+  handleOrganizationStructure(node) {
+    const checkList = this.commonGetNodeCheckList(node)
+    this.handleHorizontalCheck(node, checkList)
+  }
+
+  // 处理目录组织图
+  handleCatalogOrganization(node) {
+    const checkList = this.commonGetNodeCheckList(node)
+    if (node.layerIndex === 1) {
+      this.handleHorizontalCheck(node, checkList)
+    } else {
+      this.handleVerticalCheck(node, checkList)
+    }
+  }
+
+  // 处理时间轴
+  handleTimeLine(node) {
+    let checkList = this.commonGetNodeCheckList(node)
+    if (node.layerIndex === 1) {
+      this.handleHorizontalCheck(node, checkList)
+    } else {
+      this.handleVerticalCheck(node, checkList)
+    }
+  }
+
+  // 处理时间轴2
+  handleTimeLine2(node) {
+    let checkList = this.commonGetNodeCheckList(node)
+    if (node.layerIndex === 1) {
+      this.handleHorizontalCheck(node, checkList)
+    } else {
+      // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了
+      if (node.dir === 'top' && node.layerIndex === 2) {
+        this.handleVerticalCheck(node, checkList, true)
+      } else {
+        this.handleVerticalCheck(node, checkList)
+      }
+    }
+  }
+
+  // 处理鱼骨图
+  handleFishbone(node) {
+    let checkList = node.parent
+      ? node.parent.children.filter(item => {
+          return item.layerIndex > 1 && !this.checkIsInBeingDragNodeList(item)
+        })
+      : []
+    if (node.layerIndex === 1) {
+      this.handleHorizontalCheck(node, checkList)
+    } else {
+      // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了
+      if (node.dir === 'top' && node.layerIndex === 2) {
+        this.handleVerticalCheck(node, checkList, true)
+      } else {
+        this.handleVerticalCheck(node, checkList)
+      }
+    }
+  }
+
+  // 获取节点的兄弟节点列表通用方法
+  commonGetNodeCheckList(node) {
+    return node.parent
+      ? [...node.parent.children].filter(item => {
+          return !this.checkIsInBeingDragNodeList(item)
+        })
+      : []
+  }
+
+  // 计算节点的位置尺寸信息
+  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 originRight = left + width
+    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,
+      originRight
+    }
+  }
+
+  // 检查某个节点是否在被拖拽节点内
+  checkIsInBeingDragNodeList(node) {
+    return !!this.beingDragNodeList.find(item => {
+      return item.uid === node.uid || item.isParent(node)
+    })
+  }
+}
+
+Drag.instanceName = 'drag'
+
+export default Drag

simple-mind-map/src/plugins/Export.js

@@ -0,0 +1,297 @@
+import {
+  imgToDataUrl,
+  downloadFile,
+  readBlob,
+  removeHTMLEntities
+} from '../utils'
+import { SVG } from '@svgdotjs/svg.js'
+import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
+import { transformToMarkdown } from '../parse/toMarkdown'
+import { a4Size } from '../constants/constant'
+
+//  导出插件
+class Export {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  //  导出
+  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
+    }
+  }
+
+  //  获取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')
+      // 已经是data:URL形式不用转换
+      if (/^data:/.test(imgUlr) || imgUlr === 'none') {
+        return
+      }
+      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,
+    checkRotate = () => {
+      return false
+    }
+  ) {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
+      img.setAttribute('crossOrigin', 'anonymous')
+      img.onload = async () => {
+        try {
+          const canvas = document.createElement('canvas')
+          const dpr = Math.max(
+            window.devicePixelRatio,
+            this.mindMap.opt.minExportImgCanvasScale
+          )
+          const imgWidth = img.width
+          const imgHeight = img.height
+          // 如果宽比高长，那么旋转90度
+          const needRotate = checkRotate(imgWidth, imgHeight)
+          if (needRotate) {
+            canvas.width = imgHeight * dpr
+            canvas.height = imgWidth * dpr
+            canvas.style.width = imgHeight + 'px'
+            canvas.style.height = imgWidth + 'px'
+          } else {
+            canvas.width = imgWidth * dpr
+            canvas.height = imgHeight * dpr
+            canvas.style.width = imgWidth + 'px'
+            canvas.style.height = imgHeight + 'px'
+          }
+          const ctx = canvas.getContext('2d')
+          ctx.scale(dpr, dpr)
+          if (needRotate) {
+            ctx.rotate(0.5 * Math.PI)
+            ctx.translate(0, -imgHeight)
+          }
+          // 绘制背景
+          if (!transparent) {
+            await this.drawBackgroundToCanvas(ctx, imgWidth, imgHeight)
+          }
+          // 图片绘制到canvas里
+          ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
+          resolve(canvas.toDataURL())
+        } catch (error) {
+          reject(error)
+        }
+      }
+      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()
+          }
+        )
+      } 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, checkRotate) {
+    let { node, str } = await this.getSvgData()
+    str = removeHTMLEntities(str)
+    // 如果开启了富文本，则使用htmltocanvas转换为图片
+    if (this.mindMap.richText) {
+      // 覆盖html默认的样式
+      let foreignObjectList = node.find('foreignObject')
+      if (foreignObjectList.length > 0) {
+        foreignObjectList[0].add(
+          SVG(`<style>${this.mindMap.opt.resetCss}</style>`)
+        )
+      }
+      str = node.svg()
+      // 使用其他库（html2canvas、dom-to-image-more等）来完成导出
+      // let res = await this.mindMap.richText.handleExportPng(node.node)
+      // let imgDataUrl = await this.svgToPng(
+      //   res,
+      //   transparent,
+      //   checkRotate
+      // )
+      // 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, checkRotate)
+    return res
+  }
+
+  //  导出为pdf
+  async pdf(name, useMultiPageExport) {
+    if (!this.mindMap.doExportPDF) {
+      throw new Error('请注册ExportPDF插件')
+    }
+    let img = await this.png('', false, (width, height) => {
+      if (width <= a4Size.width && height && a4Size.height) return false
+      return width / height > 1
+    })
+    this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport)
+  }
+
+  // 导出为xmind
+  async xmind(name) {
+    if (!this.mindMap.doExportXMind) {
+      throw new Error('请注册ExportXMind插件')
+    }
+    const data = this.mindMap.getData()
+    const blob = await this.mindMap.doExportXMind.xmind(data, name)
+    const res = await readBlob(blob)
+    return res
+  }
+
+  //  导出为svg
+  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
+  async svg(name) {
+    let { node } = await this.getSvgData()
+    // 开启了节点富文本编辑
+    if (this.mindMap.richText) {
+      let foreignObjectList = node.find('foreignObject')
+      if (foreignObjectList.length > 0) {
+        foreignObjectList[0].add(
+          SVG(`<style>${this.mindMap.opt.resetCss}</style>`)
+        )
+      }
+    }
+    node.first().before(SVG(`<title>${name}</title>`))
+    await this.drawBackgroundToSvg(node)
+    let str = node.svg()
+    str = removeHTMLEntities(str)
+    // 转换成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
+  }
+
+  //  专有文件，其实就是json文件
+  async smm(name, withConfig) {
+    let res = await this.json(name, withConfig)
+    return res
+  }
+
+  // markdown文件
+  async md() {
+    let data = this.mindMap.getData()
+    let content = transformToMarkdown(data)
+    let blob = new Blob([content])
+    let res = await readBlob(blob)
+    return res
+  }
+}
+
+Export.instanceName = 'doExport'
+
+export default Export

simple-mind-map/src/plugins/ExportPDF.js

@@ -0,0 +1,103 @@
+import JsPDF from 'jspdf'
+import { a4Size } from '../constants/constant'
+
+//  导出PDF插件，需要通过Export插件使用
+class ExportPDF {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  //  导出为pdf
+  pdf(name, img, useMultiPageExport = false) {
+    if (useMultiPageExport) {
+      this.multiPageExport(name, img)
+    } else {
+      this.onePageExport(name, img)
+    }
+  }
+
+  // 单页导出
+  onePageExport(name, img) {
+    let pdf = new JsPDF('', 'pt', 'a4')
+    let a4Ratio = a4Size.width / a4Size.height
+    let image = new Image()
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      let imageRatio = imageWidth / imageHeight
+      let w, h
+      if (imageWidth <= a4Size.width && imageHeight <= a4Size.height) {
+        // 使用图片原始宽高
+        w = imageWidth
+        h = imageHeight
+      } else if (a4Ratio > imageRatio) {
+        // 以a4Height为高度，缩放图片宽度
+        w = imageRatio * a4Size.height
+        h = a4Size.height
+      } else {
+        // 以a4Width为宽度，缩放图片高度
+        w = a4Size.width
+        h = a4Size.width / imageRatio
+      }
+      pdf.addImage(
+        img,
+        'PNG',
+        (a4Size.width - w) / 2,
+        (a4Size.height - h) / 2,
+        w,
+        h
+      )
+      pdf.save(name)
+    }
+    image.src = img
+  }
+
+  // 多页导出
+  multiPageExport(name, img) {
+    let image = new Image()
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      // 一页pdf显示高度
+      let pageHeight = (imageWidth / a4Size.width) * a4Size.height
+      // 未生成pdf的高度
+      let leftHeight = imageHeight
+      // 偏移
+      let position = 0
+      // a4纸的尺寸[595.28,841.89]，图片在pdf中图片的宽高
+      let imgWidth = a4Size.width
+      let imgHeight = (a4Size.width / imageWidth) * imageHeight
+      let pdf = new JsPDF('', 'pt', 'a4')
+      // 有两个高度需要区分，一个是图片的实际高度，和生成pdf的页面高度(841.89)
+      // 当内容未超过pdf一页显示的范围，无需分页
+      if (leftHeight < pageHeight) {
+        pdf.addImage(
+          img,
+          'PNG',
+          (a4Size.width - imgWidth) / 2,
+          (a4Size.height - imgHeight) / 2,
+          imgWidth,
+          imgHeight
+        )
+      } else {
+        // 分页
+        while (leftHeight > 0) {
+          pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight)
+          leftHeight -= pageHeight
+          position -= a4Size.height
+          // 避免添加空白页
+          if (leftHeight > 0) {
+            pdf.addPage()
+          }
+        }
+      }
+      pdf.save(name)
+    }
+    image.src = img
+  }
+}
+
+ExportPDF.instanceName = 'doExportPDF'
+
+export default ExportPDF

simple-mind-map/src/plugins/ExportXMind.js

@@ -0,0 +1,24 @@
+import xmind from '../parse/xmind'
+
+//  导出XMind插件，需要通过Export插件使用
+class ExportXMind {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  // 导出xmind
+  async xmind(data, name) {
+    const zipData = await xmind.transformToXmind(data, name)
+    return zipData
+  }
+
+  // 获取解析器
+  getXmind() {
+    return xmind
+  }
+}
+
+ExportXMind.instanceName = 'doExportXMind'
+
+export default ExportXMind

simple-mind-map/src/plugins/Formula.js

@@ -0,0 +1,53 @@
+import katex from 'katex'
+import Quill from 'quill'
+
+// 数学公式支持插件
+// 该插件在富文本模式下可用
+class Formula {
+  //  构造函数
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    window.katex = katex
+    this.extendQuill()
+  }
+
+  // 修改formula格式工具
+  extendQuill() {
+    const QuillFormula = Quill.import('formats/formula')
+
+    class CustomFormulaBlot extends QuillFormula {
+      static create(value) {
+        let node = super.create(value)
+        if (typeof value === 'string') {
+          katex.render(value, node, {
+            throwOnError: false,
+            errorColor: '#f00',
+            output: 'mathml' // 增加该配置，默认只输出公式
+          })
+          node.setAttribute('data-value', value)
+        }
+        return node
+      }
+    }
+
+    Quill.register('formats/formula', CustomFormulaBlot, true)
+  }
+
+  // 给指定的节点插入指定公式
+  insertFormulaToNode(node, formula) {
+    let richTextPlugin = this.mindMap.richText
+    richTextPlugin.showEditText(node)
+    richTextPlugin.quill.insertEmbed(
+      richTextPlugin.quill.getLength() - 1,
+      'formula',
+      formula
+    )
+    richTextPlugin.setTextStyleIfNotRichText(richTextPlugin.node)
+    richTextPlugin.hideEditText([node])
+  }
+}
+
+Formula.instanceName = 'formula'
+
+export default Formula

simple-mind-map/src/plugins/KeyboardNavigation.js

@@ -1,23 +1,24 @@
-import { bfsWalk } from './utils'
+import { bfsWalk } from '../utils'
+import { CONSTANTS } from '../constants/constant'
 
-//  键盘导航类
+//  键盘导航插件
 class KeyboardNavigation {
   //  构造函数
   constructor(opt) {
     this.opt = opt
     this.mindMap = opt.mindMap
     this.onKeyup = this.onKeyup.bind(this)
-    this.mindMap.keyCommand.addShortcut('Left', () => {
-      this.onKeyup('Left')
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
     })
-    this.mindMap.keyCommand.addShortcut('Up', () => {
-      this.onKeyup('Up')
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.UP)
     })
-    this.mindMap.keyCommand.addShortcut('Right', () => {
-      this.onKeyup('Right')
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
     })
-    this.mindMap.keyCommand.addShortcut('Down', () => {
-      this.onKeyup('Down')
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
     })
   }
 
@@ -27,8 +28,7 @@ class KeyboardNavigation {
       this.focus(dir)
     } else {
       let root = this.mindMap.renderer.root
-      this.mindMap.renderer.moveNodeToCenter(root)
-      root.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', root)
     }
   }
 
@@ -80,8 +80,7 @@ class KeyboardNavigation {
 
     // 找到了则让目标节点聚焦
     if (targetNode) {
-      this.mindMap.renderer.moveNodeToCenter(targetNode)
-      targetNode.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', targetNode)
     }
   }
 
@@ -95,25 +94,25 @@ class KeyboardNavigation {
     // 遍历节点树
     bfsWalk(this.mindMap.renderer.root, node => {
       // 跳过当前聚焦的节点
-      if (node === currentActiveNode) return
+      if (node.uid === currentActiveNode.uid) return
       // 当前遍历到的节点的位置信息
       let rect = this.getNodeRect(node)
       let { left, top, right, bottom } = rect
       let match = false
       // 按下了左方向键
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
         // 判断节点是否在当前节点的左侧
         match = right <= currentActiveNodeRect.left
         // 按下了右方向键
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
         // 判断节点是否在当前节点的右侧
         match = left >= currentActiveNodeRect.right
         // 按下了上方向键
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
         // 判断节点是否在当前节点的上面
         match = bottom <= currentActiveNodeRect.top
         // 按下了下方向键
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
         // 判断节点是否在当前节点的下面
         match = top >= currentActiveNodeRect.bottom
       }
@@ -132,26 +131,26 @@ class KeyboardNavigation {
     checkNodeDis
   }) {
     bfsWalk(this.mindMap.renderer.root, node => {
-      if (node === currentActiveNode) return
+      if (node.uid === currentActiveNode.uid) return
       let rect = this.getNodeRect(node)
       let { left, top, right, bottom } = rect
       let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
         match =
           left < currentActiveNodeRect.left &&
           top < currentActiveNodeRect.bottom &&
           bottom > currentActiveNodeRect.top
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
         match =
           right > currentActiveNodeRect.right &&
           top < currentActiveNodeRect.bottom &&
           bottom > currentActiveNodeRect.top
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
         match =
           top < currentActiveNodeRect.top &&
           left < currentActiveNodeRect.right &&
           right > currentActiveNodeRect.left
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
         match =
           bottom > currentActiveNodeRect.bottom &&
           left < currentActiveNodeRect.right &&
@@ -174,7 +173,7 @@ class KeyboardNavigation {
     let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
     let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
     bfsWalk(this.mindMap.renderer.root, node => {
-      if (node === currentActiveNode) return
+      if (node.uid === currentActiveNode.uid) return
       let rect = this.getNodeRect(node)
       let { left, top, right, bottom } = rect
       // 遍历到的节点的中心点
@@ -185,13 +184,13 @@ class KeyboardNavigation {
       let offsetY = ccY - cY
       if (offsetX === 0 && offsetY === 0) return
       let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
         match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
         match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
         match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
         match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
       }
       if (match) {
@@ -233,4 +232,4 @@ class KeyboardNavigation {
 
 KeyboardNavigation.instanceName = 'keyboardNavigation'
 
-export default KeyboardNavigation
+export default KeyboardNavigation

simple-mind-map/src/plugins/MiniMap.js

@@ -1,4 +1,11 @@
-// 小地图类
+import {
+  isWhite,
+  isTransparent,
+  getVisibleColorFromTheme,
+  readBlob
+} from '../utils/index'
+
+// 小地图插件
 class MiniMap {
   //  构造函数
   constructor(opt) {
@@ -20,9 +27,16 @@ class MiniMap {
    * boxHeight：小地图容器的高度
    */
   calculationMiniMap(boxWidth, boxHeight) {
-    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
-      this.mindMap.getSvgData()
+    let { svg, rect, origWidth, origHeight, scaleX, scaleY } =
+      this.mindMap.getSvgData({
+        ignoreWatermark: true
+      })
     // 计算数据
+    const elRect = this.mindMap.elRect
+    rect.x -= elRect.left
+    rect.x2 -= elRect.left
+    rect.y -= elRect.top
+    rect.y2 -= elRect.top
     let boxRatio = boxWidth / boxHeight
     let actWidth = 0
     let actHeight = 0
@@ -53,20 +67,39 @@ class MiniMap {
       bottom: 0
     }
     viewBoxStyle.left =
-      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + 'px'
+      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft
     viewBoxStyle.right =
       Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
-      miniMapBoxLeft +
-      'px'
+      miniMapBoxLeft
 
     viewBoxStyle.top =
-      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + 'px'
+      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop
     viewBoxStyle.bottom =
       Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
-      miniMapBoxTop +
-      'px'
+      miniMapBoxTop
+
+    if (viewBoxStyle.top > miniMapBoxTop + actHeight) {
+      viewBoxStyle.top = miniMapBoxTop + actHeight
+    }
+    if (viewBoxStyle.left > miniMapBoxLeft + actWidth) {
+      viewBoxStyle.left = miniMapBoxLeft + actWidth
+    }
+
+    Object.keys(viewBoxStyle).forEach(key => {
+      viewBoxStyle[key] = viewBoxStyle[key] + 'px'
+    })
+    this.removeNodeContent(svg)
+    const svgStr = svg.svg()
+
     return {
-      svgHTML, // 小地图html
+      getImgUrl: async callback => {
+        const blob = new Blob([svgStr], {
+          type: 'image/svg+xml'
+        })
+        const res = await readBlob(blob)
+        callback(res)
+      },
+      svgHTML: svgStr, // 小地图html
       viewBoxStyle, // 视图框的位置信息
       miniMapBoxScale, // 视图框的缩放值
       miniMapBoxLeft, // 视图框的left值
@@ -74,6 +107,26 @@ class MiniMap {
     }
   }
 
+  // 移除节点的内容
+  removeNodeContent(svg) {
+    if (svg.hasClass('smm-node')) {
+      let shape = svg.findOne('.smm-node-shape')
+      let fill = shape.attr('fill')
+      if (isWhite(fill) || isTransparent(fill)) {
+        shape.attr('fill', getVisibleColorFromTheme(this.mindMap.themeConfig))
+      }
+      svg.clear()
+      svg.add(shape)
+      return
+    }
+    let children = svg.children()
+    if (children && children.length > 0) {
+      children.forEach(node => {
+        this.removeNodeContent(node)
+      })
+    }
+  }
+
   //  小地图鼠标按下事件
   onMousedown(e) {
     this.isMousedown = true

simple-mind-map/src/plugins/NodeImgAdjust.js

@@ -0,0 +1,275 @@
+// 节点图片大小调整插件
+import { resizeImgSizeByOriginRatio } from '../utils/index'
+import btnsSvg from '../svg/btns'
+
+class NodeImgAdjust {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.resizeBtnSize = 26 // 调整按钮的大小
+    this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
+    this.isShowHandleEl = false // 自定义元素是否在显示中
+    this.node = null // 当前节点实例
+    this.img = null // 当前节点的图片节点
+    this.rect = null // 当前图片节点的尺寸信息
+    this.isMousedown = false // 当前是否是按住调整按钮状态
+    this.currentImgWidth = 0 // 当前拖拽实时图片的大小
+    this.currentImgHeight = 0
+    this.isAdjusted = false // 是否是拖拽结束后的渲染期间
+    this.bindEvent()
+  }
+
+  // 监听事件
+  bindEvent() {
+    this.onNodeImgMouseleave = this.onNodeImgMouseleave.bind(this)
+    this.onNodeImgMousemove = this.onNodeImgMousemove.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
+    this.onRenderEnd = this.onRenderEnd.bind(this)
+    this.mindMap.on('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.on('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.off('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('mouseup', this.onMouseup)
+    this.mindMap.off('node_mouseup', this.onMouseup)
+    this.mindMap.off('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 节点图片鼠标移动事件
+  onNodeImgMousemove(node, img) {
+    // 如果当前正在拖动调整中那么直接返回
+    if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
+    // 如果在当前节点内移动，以及自定义元素已经是显示状态，那么直接返回
+    if (this.node && this.node.uid === node.uid && this.isShowHandleEl) return
+    // 更新当前节点信息
+    this.node = node
+    this.img = img
+    this.rect = this.img.rbox()
+    // 显示自定义元素
+    this.showHandleEl()
+  }
+
+  // 节点图片鼠标移出事件
+  onNodeImgMouseleave() {
+    if (this.isMousedown) return
+    this.hideHandleEl()
+  }
+
+  // 隐藏节点实际的图片
+  hideNodeImage() {
+    if (!this.img) return
+    this.img.hide()
+  }
+
+  // 显示节点实际的图片
+  showNodeImage() {
+    if (!this.img) return
+    this.img.show()
+  }
+
+  // 显示自定义元素
+  showHandleEl() {
+    if (!this.handleEl) {
+      this.createResizeBtnEl()
+    }
+    this.setHandleElRect()
+    this.handleEl.style.display = 'block'
+    this.isShowHandleEl = true
+  }
+
+  // 隐藏自定义元素
+  hideHandleEl() {
+    if (!this.isShowHandleEl) return
+    this.isShowHandleEl = false
+    this.handleEl.style.display = 'none'
+    this.handleEl.style.backgroundImage = ``
+    this.handleEl.style.width = 0
+    this.handleEl.style.height = 0
+    this.handleEl.style.left = 0
+    this.handleEl.style.top = 0
+  }
+
+  // 设置自定义元素尺寸位置信息
+  setHandleElRect() {
+    let { width, height, x, y } = this.rect
+    this.handleEl.style.left = `${x}px`
+    this.handleEl.style.top = `${y}px`
+    this.currentImgWidth = width
+    this.currentImgHeight = height
+    this.updateHandleElSize()
+  }
+
+  // 更新自定义元素宽高
+  updateHandleElSize() {
+    this.handleEl.style.width = `${this.currentImgWidth}px`
+    this.handleEl.style.height = `${this.currentImgHeight}px`
+  }
+
+  // 创建调整按钮元素
+  createResizeBtnEl() {
+    // 容器元素
+    this.handleEl = document.createElement('div')
+    this.handleEl.style.cssText = `
+      pointer-events: none;
+      position: fixed;
+	    display:none;
+      background-size: cover;
+    `
+    this.handleEl.className = 'node-img-handle'
+    // 调整按钮元素
+    const btnEl = document.createElement('div')
+    btnEl.innerHTML = btnsSvg.imgAdjust
+    btnEl.style.cssText = `
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0.3);
+      width: ${this.resizeBtnSize}px;
+      height: ${this.resizeBtnSize}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: nwse-resize;
+    `
+    btnEl.className = 'node-image-resize'
+    // 给按钮元素绑定事件
+    btnEl.addEventListener('mouseenter', () => {
+      // 移入按钮，会触发节点图片的移出事件，所以需要再次显示按钮
+      this.showHandleEl()
+    })
+    btnEl.addEventListener('mouseleave', () => {
+      // 移除按钮，需要隐藏按钮
+      if (this.isMousedown) return
+      this.hideHandleEl()
+    })
+    btnEl.addEventListener('mousedown', e => {
+      e.stopPropagation()
+      this.onMousedown(e)
+    })
+    btnEl.addEventListener('mouseup', e => {
+      setTimeout(() => {
+        //点击后直接松开异常处理; 其他事件响应之后处理
+        this.hideHandleEl()
+        this.isAdjusted = false
+      }, 0)
+    })
+    btnEl.addEventListener('click', e => {
+      e.stopPropagation()
+    })
+    this.handleEl.appendChild(btnEl)
+    // 删除按钮
+    const btnRemove = document.createElement('div')
+    this.handleEl.prepend(btnRemove)
+    btnRemove.className = 'node-image-remove'
+    btnRemove.innerHTML = btnsSvg.remove
+    btnRemove.style.cssText = `
+      position: absolute;
+      right: 0;top:0;color:#fff;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0.3);
+      width: ${this.resizeBtnSize}px;
+      height: ${this.resizeBtnSize}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    `
+    btnRemove.addEventListener('mouseenter', e => {
+      this.showHandleEl()
+    })
+    btnRemove.addEventListener('mouseleave', e => {
+      if (this.isMousedown) return
+      this.hideHandleEl()
+    })
+    btnRemove.addEventListener('click', e => {
+      this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: null })
+    })
+    // 添加元素到页面
+    const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+    targetNode.appendChild(this.handleEl)
+  }
+
+  // 鼠标按钮按下事件
+  onMousedown() {
+    this.isMousedown = true
+    // 隐藏节点实际图片
+    this.hideNodeImage()
+    // 将节点图片渲染到自定义元素上
+    this.handleEl.style.backgroundImage = `url(${this.node.getData('image')})`
+  }
+
+  // 鼠标移动
+  onMousemove(e) {
+    if (!this.isMousedown) return
+    e.preventDefault()
+    // 计算当前拖拽位置对应的图片的实时大小
+    let { width: imageOriginWidth, height: imageOriginHeight } =
+      this.node.getData('imageSize')
+    let newWidth = e.clientX - this.rect.x
+    let newHeight = e.clientY - this.rect.y
+    if (newWidth <= 0 || newHeight <= 0) return
+    let [actWidth, actHeight] = resizeImgSizeByOriginRatio(
+      imageOriginWidth,
+      imageOriginHeight,
+      newWidth,
+      newHeight
+    )
+    this.currentImgWidth = actWidth
+    this.currentImgHeight = actHeight
+    this.updateHandleElSize()
+  }
+
+  // 鼠标松开
+  onMouseup() {
+    if (!this.isMousedown) return
+    // 显示节点实际图片
+    this.showNodeImage()
+    // 隐藏自定义元素
+    this.hideHandleEl()
+    // 更新节点图片为新的大小
+    let { image, imageTitle } = this.node.getData()
+    let { scaleX, scaleY } = this.mindMap.draw.transform()
+    this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
+      url: image,
+      title: imageTitle,
+      width: this.currentImgWidth / scaleX,
+      height: this.currentImgHeight / scaleY,
+      custom: true // 代表自定义了图片大小
+    })
+    this.isAdjusted = true
+    this.isMousedown = false
+  }
+
+  // 渲染完成事件
+  onRenderEnd() {
+    if (!this.isAdjusted) {
+      this.hideHandleEl()
+      return
+    }
+    this.isAdjusted = false
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+NodeImgAdjust.instanceName = 'nodeImgAdjust'
+
+export default NodeImgAdjust

simple-mind-map/src/plugins/Painter.js

@@ -0,0 +1,81 @@
+import { checkIsNodeStyleDataKey } from '../utils/index'
+
+// 格式刷插件
+class Painter {
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.isInPainter = false
+    this.painterNode = null
+    this.bindEvent()
+  }
+
+  bindEvent() {
+    this.painterOneNode = this.painterOneNode.bind(this)
+    this.onEndPainter = this.onEndPainter.bind(this)
+    this.mindMap.on('node_click', this.painterOneNode)
+    this.mindMap.on('draw_click', this.onEndPainter)
+  }
+
+  unBindEvent() {
+    this.mindMap.off('node_click', this.painterOneNode)
+    this.mindMap.off('draw_click', this.onEndPainter)
+  }
+
+  // 开始格式刷
+  startPainter() {
+    if (this.mindMap.opt.readonly) return
+    let activeNodeList = this.mindMap.renderer.activeNodeList
+    if (activeNodeList.length <= 0) return
+    this.painterNode = activeNodeList[0]
+    this.isInPainter = true
+    this.mindMap.emit('painter_start')
+  }
+
+  // 结束格式刷
+  endPainter() {
+    this.painterNode = null
+    this.isInPainter = false
+  }
+
+  onEndPainter() {
+    this.endPainter()
+    this.mindMap.emit('painter_end')
+  }
+
+  // 格式刷某个节点
+  painterOneNode(node) {
+    if (
+      !node ||
+      !this.isInPainter ||
+      !this.painterNode ||
+      !node ||
+      node.uid === this.painterNode.uid
+    )
+      return
+    const style = {}
+    const painterNodeData = this.painterNode.getData()
+    Object.keys(painterNodeData).forEach(key => {
+      if (checkIsNodeStyleDataKey(key)) {
+        style[key] = painterNodeData[key]
+      }
+    })
+    node.setStyles(style)
+    if (painterNodeData.activeStyle) {
+      node.setStyles(painterNodeData.activeStyle, true)
+    }
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+Painter.instanceName = 'painter'
+
+export default Painter

simple-mind-map/src/plugins/RichText.js

@@ -0,0 +1,661 @@
+import Quill from 'quill'
+import Delta from 'quill-delta'
+import 'quill/dist/quill.snow.css'
+import {
+  walk,
+  getTextFromHtml,
+  isWhite,
+  getVisibleColorFromTheme,
+  isUndef
+} from '../utils'
+import { CONSTANTS } from '../constants/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.pasteUseRange = null
+    this.node = null
+    this.isInserting = false
+    this.styleEl = null
+    this.cacheEditingText = ''
+    this.lostStyle = false
+    this.isCompositing = false
+    this.initOpt()
+    this.extendQuill()
+    this.appendCss()
+    this.bindEvent()
+
+    // 处理数据，转成富文本格式
+    if (this.mindMap.opt.data) {
+      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
+    }
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onCompositionStart = this.onCompositionStart.bind(this)
+    this.onCompositionEnd = this.onCompositionEnd.bind(this)
+    window.addEventListener('compositionstart', this.onCompositionStart)
+    window.addEventListener('compositionend', this.onCompositionEnd)
+  }
+
+  // 解绑事件
+  unbindEvent() {
+    window.removeEventListener('compositionstart', this.onCompositionStart)
+    window.removeEventListener('compositionend', this.onCompositionEnd)
+  }
+
+  // 插入样式
+  appendCss() {
+    let cssText = `
+      .ql-editor {
+        overflow: hidden;
+        padding: 0;
+        height: auto;
+        line-height: normal;
+        -webkit-user-select: text;
+      }
+      
+      .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, isInserting, isFromKeyDown) {
+    if (this.showTextEdit) {
+      return
+    }
+    const {
+      richTextEditFakeInPlace,
+      customInnerElsAppendTo,
+      nodeTextEditZIndex,
+      textAutoWrapWidth,
+      selectTextOnEnterEditText
+    } = this.mindMap.opt
+    this.node = node
+    this.isInserting = isInserting
+    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
+    // 内边距
+    let paddingX = 6
+    let paddingY = 4
+    if (richTextEditFakeInPlace) {
+      let paddingValue = node.getPaddingVale()
+      paddingX = paddingValue.paddingX
+      paddingY = paddingValue.paddingY
+    }
+    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()
+      })
+      this.textEditNode.addEventListener('mousedown', e => {
+        e.stopPropagation()
+      })
+      this.textEditNode.addEventListener('keydown', e => {
+        if (this.mindMap.renderer.textEdit.checkIsAutoEnterTextEditKey(e)) {
+          e.stopPropagation()
+        }
+      })
+      const targetNode = customInnerElsAppendTo || document.body
+      targetNode.appendChild(this.textEditNode)
+    }
+    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
+    let bgColor = node.style.merge('fillColor')
+    let color = node.style.merge('color')
+    this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
+    this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
+    this.textEditNode.style.zIndex = nodeTextEditZIndex
+    this.textEditNode.style.backgroundColor =
+      bgColor === 'transparent'
+        ? isWhite(color)
+          ? getVisibleColorFromTheme(this.mindMap.themeConfig)
+          : '#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 = textAutoWrapWidth + paddingX * 2 + 'px'
+    this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
+    this.textEditNode.style.transformOrigin = 'left top'
+    if (richTextEditFakeInPlace) {
+      this.textEditNode.style.borderRadius =
+        (node.style.merge('borderRadius') || 5) + 'px'
+      if (node.style.merge('shape') == 'roundedRectangle') {
+        this.textEditNode.style.borderRadius = (node.height || 50) + 'px'
+      }
+    }
+    if (!node.getData('richText')) {
+      // 还不是富文本的情况
+      let text = ''
+      if (!isUndef(node.getData('text'))) {
+        text = String(node.getData('text')).split(/\n/gim).join('<br>')
+      }
+      let html = `<p>${text}</p>`
+      this.textEditNode.innerHTML = this.cacheEditingText || html
+    } else {
+      this.textEditNode.innerHTML =
+        this.cacheEditingText || node.getData('text')
+    }
+    this.initQuillEditor()
+    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
+    this.showTextEdit = true
+    // 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true
+    // 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选
+    this.focus(
+      isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null
+    )
+    if (!node.getData('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.pureFormatAllText(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
+    this.isInserting = false
+  }
+
+  // 初始化Quill富文本编辑器
+  initQuillEditor() {
+    this.quill = new Quill(this.textEditNode, {
+      modules: {
+        toolbar: false,
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 13,
+              handler: function () {
+                // 覆盖默认的回车键换行
+              }
+            },
+            tab: {
+              key: 9,
+              handler: function () {
+                // 覆盖默认的tab键
+              }
+            }
+          }
+        }
+      },
+      theme: 'snow'
+    })
+    this.quill.on('selection-change', range => {
+      // 刚创建的节点全选不需要显示操作条
+      if (this.isInserting) return
+      this.lastRange = this.range
+      this.range = null
+      if (range) {
+        this.pasteUseRange = 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
+        )
+      }
+    })
+    this.quill.on('text-change', () => {
+      let contents = this.quill.getContents()
+      let len = contents.ops.length
+      // 如果编辑过程中删除所有字符，那么会丢失主题的样式
+      if (len <= 0 || (len === 1 && contents.ops[0].insert === '\n')) {
+        this.lostStyle = true
+        // 需要删除节点的样式数据
+        this.syncFormatToNodeConfig(null, true)
+      } else if (this.lostStyle && !this.isCompositing) {
+        // 如果处于样式丢失状态，那么需要进行格式化加回样式
+        this.setTextStyleIfNotRichText(this.node)
+        this.lostStyle = false
+      }
+    })
+    // 拦截粘贴，只允许粘贴纯文本
+    this.quill.clipboard.addMatcher(Node.TEXT_NODE, node => {
+      let style = this.getPasteTextStyle()
+      return new Delta().insert(node.data, style)
+    })
+    this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+      let ops = []
+      let style = this.getPasteTextStyle()
+      delta.ops.forEach(op => {
+        // 过滤出文本内容，过滤掉换行
+        if (op.insert && typeof op.insert === 'string' && op.insert !== '\n') {
+          ops.push({
+            attributes: { ...style },
+            insert: op.insert
+          })
+        }
+      })
+      delta.ops = ops
+      return delta
+    })
+  }
+
+  // 获取粘贴的文本的样式
+  getPasteTextStyle() {
+    // 粘贴的数据使用当前光标位置处的文本样式
+    if (this.pasteUseRange) {
+      return this.quill.getFormat(
+        this.pasteUseRange.index,
+        this.pasteUseRange.length
+      )
+    }
+    return {}
+  }
+
+  // 正则输入中文
+  onCompositionStart() {
+    if (!this.showTextEdit) {
+      return
+    }
+    this.isCompositing = true
+  }
+
+  // 中文输入结束
+  onCompositionEnd() {
+    if (!this.showTextEdit || !this.lostStyle) {
+      return
+    }
+    this.isCompositing = false
+    this.setTextStyleIfNotRichText(this.node)
+  }
+
+  // 选中全部
+  selectAll() {
+    this.quill.setSelection(0, this.quill.getLength())
+  }
+
+  // 聚焦
+  focus(start) {
+    let len = this.quill.getLength()
+    this.quill.setSelection(typeof start === 'number' ? start : 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.pureFormatAllText(config)
+  }
+
+  // 纯粹的格式化所有文本
+  pureFormatAllText(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.execCommand('SET_NODE_DATA', 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
+  }
+
+  // 给未激活的节点设置富文本样式
+  setNotActiveNodeStyle(node, style) {
+    const config = this.normalStyleToRichTextStyle(style)
+    if (Object.keys(config).length > 0) {
+      this.showEditText(node)
+      this.formatAllText(config)
+      this.hideEditText([node])
+    }
+  }
+
+  // 处理导出为图片
+  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)
+
+    // 如果使用html2canvas
+    // let canvas = await html2canvas(el, {
+    //   backgroundColor: null
+    // })
+    // return canvas.toDataURL()
+
+    const res = await domtoimage.toPng(el)
+    this.mindMap.el.removeChild(el)
+    return res
+  }
+
+  // 将所有节点转换成非富文本节点
+  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 && !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)
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    document.head.removeChild(this.styleEl)
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText

simple-mind-map/src/plugins/Scrollbar.js

@@ -0,0 +1,258 @@
+import { throttle } from '../utils/index'
+import { CONSTANTS } from '../constants/constant'
+
+// 滚动条插件
+class Scrollbar {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+    this.scrollbarWrapSize = {
+      width: 0, // 水平滚动条的容器宽度
+      height: 0 // 垂直滚动条的容器高度
+    }
+    // 思维导图实际高度
+    this.chartHeight = 0
+    this.chartWidth = 0
+    this.reset()
+    this.bindEvent()
+  }
+
+  // 复位数据
+  reset() {
+    // 当前拖拽的滚动条类型
+    this.currentScrollType = ''
+    this.isMousedown = false
+    this.mousedownPos = {
+      x: 0,
+      y: 0
+    }
+    // 鼠标按下时，滚动条位置
+    this.mousedownScrollbarPos = 0
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
+    this.updateScrollbar = this.updateScrollbar.bind(this)
+    this.updateScrollbar = throttle(this.updateScrollbar, 16, this) // 加个节流
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_tree_render_end', this.updateScrollbar)
+    this.mindMap.on('view_data_change', this.updateScrollbar)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('mouseup', this.onMouseup)
+    this.mindMap.off('node_tree_render_end', this.updateScrollbar)
+    this.mindMap.off('view_data_change', this.updateScrollbar)
+  }
+
+  // 渲染后、数据改变需要更新滚动条
+  updateScrollbar() {
+    // 当前正在拖拽滚动条时不需要更新
+    if (this.isMousedown) return
+    const res = this.calculationScrollbar()
+    this.emitEvent(res)
+  }
+
+  // 发送滚动条改变事件
+  emitEvent(data) {
+    this.mindMap.emit('scrollbar_change', data)
+  }
+
+  // 设置滚动条容器的大小，指滚动条容器的大小，对于水平滚动条，即宽度，对于垂直滚动条，即高度
+  setScrollBarWrapSize(width, height) {
+    this.scrollbarWrapSize.width = width
+    this.scrollbarWrapSize.height = height
+  }
+
+  // 计算滚动条大小和位置
+  calculationScrollbar() {
+    const rect = this.mindMap.draw.rbox()
+    // 减去画布距离浏览器窗口左上角的距离
+    const elRect = this.mindMap.elRect
+    rect.x -= elRect.left
+    rect.y -= elRect.top
+
+    // 垂直滚动条
+    const canvasHeight = this.mindMap.height // 画布高度
+    const paddingY = canvasHeight / 2 // 首尾允许超出的距离，默认为高度的一半
+    const chartHeight = rect.height + paddingY * 2 // 思维导图高度
+    this.chartHeight = chartHeight
+    const chartTop = rect.y - paddingY // 思维导图顶部距画布顶部的距离
+    const height = Math.min((canvasHeight / chartHeight) * 100, 100) // 滚动条高度 = 画布高度 / 思维导图高度
+    let top = (-chartTop / chartHeight) * 100 // 滚动条距离 = 思维导图顶部距画布顶部的距离 / 思维导图高度
+    // 判断是否到达边界
+    if (top < 0) {
+      top = 0
+    }
+    if (top > 100 - height) {
+      top = 100 - height
+    }
+
+    // 水平滚动条
+    const canvasWidth = this.mindMap.width
+    const paddingX = canvasWidth / 2
+    const chartWidth = rect.width + paddingX * 2
+    this.chartWidth = chartWidth
+    const chartLeft = rect.x - paddingX
+    const width = Math.min((canvasWidth / chartWidth) * 100, 100)
+    let left = (-chartLeft / chartWidth) * 100
+    if (left < 0) {
+      left = 0
+    }
+    if (left > 100 - width) {
+      left = 100 - width
+    }
+
+    const res = {
+      // 垂直滚动条
+      vertical: {
+        top,
+        height
+      },
+      // 水平滚动条
+      horizontal: {
+        left,
+        width
+      }
+    }
+
+    return res
+  }
+
+  // 滚动条鼠标按下事件处理函数
+  onMousedown(e, type) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.currentScrollType = type
+    this.isMousedown = true
+    this.mousedownPos = {
+      x: e.clientX,
+      y: e.clientY
+    }
+    // 保存滚动条当前的位置
+    const styles = window.getComputedStyle(e.target)
+    if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+      this.mousedownScrollbarPos = Number.parseFloat(styles.top)
+    } else {
+      this.mousedownScrollbarPos = Number.parseFloat(styles.left)
+    }
+  }
+
+  // 鼠标移动事件处理函数
+  onMousemove(e) {
+    if (!this.isMousedown) {
+      return
+    }
+    e.preventDefault()
+    e.stopPropagation()
+    if (this.currentScrollType === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+      const oy = e.clientY - this.mousedownPos.y + this.mousedownScrollbarPos
+      this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.VERTICAL, oy)
+    } else {
+      const ox = e.clientX - this.mousedownPos.x + this.mousedownScrollbarPos
+      this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.HORIZONTAL, ox)
+    }
+  }
+
+  // 鼠标松开事件处理函数
+  onMouseup() {
+    this.isMousedown = false
+    this.reset()
+  }
+
+  // 更新视图
+  updateMindMapView(type, offset) {
+    const scrollbarData = this.calculationScrollbar()
+    const t = this.mindMap.draw.transform()
+    const drawRect = this.mindMap.draw.rbox()
+    const rootRect = this.mindMap.renderer.root.group.rbox()
+    if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+      // 滚动条新位置
+      let oy = offset
+      // 判断是否达到首尾
+      if (oy <= 0) {
+        oy = 0
+      }
+      let max =
+        ((100 - scrollbarData.vertical.height) / 100) *
+        this.scrollbarWrapSize.height
+      if (oy >= max) {
+        oy = max
+      }
+      // 转换成百分比
+      const oyPercentage = (oy / this.scrollbarWrapSize.height) * 100
+      // 转换成相对于图形高度的距离
+      const oyPx = (-oyPercentage / 100) * this.chartHeight
+      // 节点中心点到图形最上方的距离
+      const yOffset = rootRect.y - drawRect.y
+      // 内边距
+      const paddingY = this.mindMap.height / 2
+      // 图形新位置
+      let chartTop = oyPx + yOffset - paddingY * t.scaleY + paddingY
+      this.mindMap.view.translateYTo(chartTop)
+      this.emitEvent({
+        horizontal: scrollbarData.horizontal,
+        vertical: {
+          top: oyPercentage,
+          height: scrollbarData.vertical.height
+        }
+      })
+    } else {
+      // 滚动条新位置
+      let ox = offset
+      // 判断是否达到首尾
+      if (ox <= 0) {
+        ox = 0
+      }
+      let max =
+        ((100 - scrollbarData.horizontal.width) / 100) *
+        this.scrollbarWrapSize.width
+      if (ox >= max) {
+        ox = max
+      }
+      // 转换成百分比
+      const oxPercentage = (ox / this.scrollbarWrapSize.width) * 100
+      // 转换成相对于图形高度的距离
+      const oxPx = (-oxPercentage / 100) * this.chartWidth
+      // 节点中心点到图形最左边的距离
+      const xOffset = rootRect.x - drawRect.x
+      // 内边距
+      const paddingX = this.mindMap.width / 2
+      // 图形新位置
+      let chartLeft = oxPx + xOffset - paddingX * t.scaleX + paddingX
+      this.mindMap.view.translateXTo(chartLeft)
+      this.emitEvent({
+        vertical: scrollbarData.vertical,
+        horizontal: {
+          left: oxPercentage,
+          width: scrollbarData.horizontal.width
+        }
+      })
+    }
+  }
+
+  // 滚动条的点击事件
+  onClick(e, type) {
+    let offset = 0
+    if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+      offset = e.clientY - e.currentTarget.getBoundingClientRect().top
+    } else {
+      offset = e.clientX - e.currentTarget.getBoundingClientRect().left
+    }
+    this.updateMindMapView(type, offset)
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+Scrollbar.instanceName = 'scrollbar'
+
+export default Scrollbar

simple-mind-map/src/plugins/Search.js

@@ -0,0 +1,177 @@
+import {
+  bfsWalk,
+  getTextFromHtml,
+  isUndef,
+  replaceHtmlText
+} from '../utils/index'
+
+// 搜索插件
+class Search {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    // 是否正在搜索
+    this.isSearching = false
+    // 搜索文本
+    this.searchText = ''
+    // 匹配的节点列表
+    this.matchNodeList = []
+    // 当前所在的节点列表索引
+    this.currentIndex = -1
+    // 不要复位搜索文本
+    this.notResetSearchText = false
+    // 是否自动跳转下一个匹配节点
+    this.isJumpNext = false
+    this.onDataChange = this.onDataChange.bind(this)
+    this.mindMap.on('data_change', this.onDataChange)
+  }
+
+  // 节点数据改变了，需要重新搜索
+  onDataChange() {
+    if (this.isJumpNext) {
+      this.isJumpNext = false
+      this.search(this.searchText)
+      return
+    }
+    if (this.notResetSearchText) {
+      this.notResetSearchText = false
+      return
+    }
+    this.searchText = ''
+  }
+
+  // 搜索
+  search(text, callback = () => {}) {
+    if (isUndef(text)) return this.endSearch()
+    text = String(text)
+    this.isSearching = true
+    if (this.searchText === text) {
+      // 和上一次搜索文本一样，那么搜索下一个
+      this.searchNext(callback)
+    } else {
+      // 和上次搜索文本不一样，那么重新开始
+      this.searchText = text
+      this.doSearch()
+      this.searchNext(callback)
+    }
+    this.emitEvent()
+  }
+
+  // 结束搜索
+  endSearch() {
+    if (!this.isSearching) return
+    this.searchText = ''
+    this.matchNodeList = []
+    this.currentIndex = -1
+    this.notResetSearchText = false
+    this.isSearching = false
+    this.emitEvent()
+  }
+
+  // 搜索匹配的节点
+  doSearch() {
+    this.matchNodeList = []
+    this.currentIndex = -1
+    bfsWalk(this.mindMap.renderer.root, node => {
+      let { richText, text } = node.getData()
+      if (richText) {
+        text = getTextFromHtml(text)
+      }
+      if (text.includes(this.searchText)) {
+        this.matchNodeList.push(node)
+      }
+    })
+  }
+
+  // 搜索下一个，定位到下一个匹配节点
+  searchNext(callback) {
+    if (!this.isSearching || this.matchNodeList.length <= 0) return
+    if (this.currentIndex < this.matchNodeList.length - 1) {
+      this.currentIndex++
+    } else {
+      this.currentIndex = 0
+    }
+    let currentNode = this.matchNodeList[this.currentIndex]
+    this.notResetSearchText = true
+    this.mindMap.execCommand('GO_TARGET_NODE', currentNode, () => {
+      this.notResetSearchText = false
+      callback()
+    })
+  }
+
+  // 替换当前节点
+  replace(replaceText, jumpNext = false) {
+    if (
+      replaceText === null ||
+      replaceText === undefined ||
+      !this.isSearching ||
+      this.matchNodeList.length <= 0
+    )
+      return
+    // 自动跳转下一个匹配节点
+    this.isJumpNext = jumpNext
+    replaceText = String(replaceText)
+    let currentNode = this.matchNodeList[this.currentIndex]
+    if (!currentNode) return
+    let text = this.getReplacedText(currentNode, this.searchText, replaceText)
+    this.notResetSearchText = true
+    currentNode.setText(text, currentNode.getData('richText'), true)
+    this.matchNodeList = this.matchNodeList.filter(node => {
+      return currentNode !== node
+    })
+    if (this.currentIndex > this.matchNodeList.length - 1) {
+      this.currentIndex = -1
+    } else {
+      this.currentIndex--
+    }
+    this.emitEvent()
+  }
+
+  // 替换所有
+  replaceAll(replaceText) {
+    if (
+      replaceText === null ||
+      replaceText === undefined ||
+      !this.isSearching ||
+      this.matchNodeList.length <= 0
+    )
+      return
+    replaceText = String(replaceText)
+    this.matchNodeList.forEach(node => {
+      let text = this.getReplacedText(node, this.searchText, replaceText)
+      this.mindMap.renderer.setNodeDataRender(
+        node,
+        {
+          text,
+          resetRichText: !!node.getData('richText')
+        },
+        true
+      )
+    })
+    this.mindMap.render()
+    this.mindMap.command.addHistory()
+    this.endSearch()
+  }
+
+  // 获取某个节点替换后的文本
+  getReplacedText(node, searchText, replaceText) {
+    let { richText, text } = node.getData()
+    if (richText) {
+      return replaceHtmlText(text, searchText, replaceText)
+    } else {
+      return text.replaceAll(searchText, replaceText)
+    }
+  }
+
+  // 发送事件
+  emitEvent() {
+    this.mindMap.emit('search_info_change', {
+      currentIndex: this.currentIndex,
+      total: this.matchNodeList.length
+    })
+  }
+}
+
+Search.instanceName = 'search'
+
+export default Search

simple-mind-map/src/plugins/Select.js

@@ -0,0 +1,242 @@
+import { bfsWalk, throttle, checkTwoRectIsOverlap } from '../utils'
+
+// 节点选择插件
+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.isSelecting = false
+    this.cacheActiveList = []
+    this.bindEvent()
+  }
+
+  //  绑定事件
+  bindEvent() {
+    this.checkInNodes = throttle(this.checkInNodes, 300, this)
+    this.mindMap.on('mousedown', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      if (
+        !e.ctrlKey &&
+        (useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3)
+      ) {
+        return
+      }
+      e.preventDefault()
+      this.isMousedown = true
+      this.cacheActiveList = [...this.mindMap.renderer.activeNodeList]
+      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
+      }
+      this.clearAutoMoveTimer()
+      this.onMove(
+        e.clientX,
+        e.clientY,
+        () => {
+          this.isSelecting = true
+          // 绘制矩形
+          this.rect.plot([
+            [this.mouseDownX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseMoveY],
+            [this.mouseDownX, this.mouseMoveY]
+          ])
+          this.checkInNodes()
+        },
+        (dir, step) => {
+          switch (dir) {
+            case 'left':
+              this.mouseDownX += step
+              break
+            case 'top':
+              this.mouseDownY += step
+              break
+            case 'right':
+              this.mouseDownX -= step
+              break
+            case 'bottom':
+              this.mouseDownY -= step
+              break
+            default:
+              break
+          }
+        }
+      )
+    })
+    this.onMouseup = this.onMouseup.bind(this)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+  }
+
+  // 结束框选
+  onMouseup() {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    if (!this.isMousedown) {
+      return
+    }
+    this.checkTriggerNodeActiveEvent()
+    clearTimeout(this.autoMoveTimer)
+    this.isMousedown = false
+    this.cacheActiveList = []
+    if (this.rect) this.rect.remove()
+    this.rect = null
+    setTimeout(() => {
+      this.isSelecting = false
+    }, 0)
+  }
+
+  // 如果激活节点改变了，那么触发事件
+  checkTriggerNodeActiveEvent() {
+    let isNumChange =
+      this.cacheActiveList.length !==
+      this.mindMap.renderer.activeNodeList.length
+    let isNodeChange = false
+    if (!isNumChange) {
+      for (let i = 0; i < this.cacheActiveList.length; i++) {
+        let cur = this.cacheActiveList[i]
+        if (
+          !this.mindMap.renderer.activeNodeList.find(item => {
+            return item.getData('uid') === cur.getData('uid')
+          })
+        ) {
+          isNodeChange = true
+          break
+        }
+      }
+    }
+    if (isNumChange || isNodeChange) {
+      this.mindMap.emit('node_active', null, [
+        ...this.mindMap.renderer.activeNodeList
+      ])
+    }
+  }
+
+  //  鼠标移动事件
+  onMove(x, y, callback = () => {}, handle = () => {}) {
+    callback()
+    // 检测边缘移动
+    let step = this.mindMap.opt.selectTranslateStep
+    let limit = this.mindMap.opt.selectTranslateLimit
+    let count = 0
+    // 左边缘
+    if (x <= this.mindMap.elRect.left + limit) {
+      handle('left', step)
+      this.mindMap.view.translateX(step)
+      count++
+    }
+    // 右边缘
+    if (x >= this.mindMap.elRect.right - limit) {
+      handle('right', step)
+      this.mindMap.view.translateX(-step)
+      count++
+    }
+    // 上边缘
+    if (y <= this.mindMap.elRect.top + limit) {
+      handle('top', step)
+      this.mindMap.view.translateY(step)
+      count++
+    }
+    // 下边缘
+    if (y >= this.mindMap.elRect.bottom - limit) {
+      handle('bottom', step)
+      this.mindMap.view.translateY(-step)
+      count++
+    }
+    if (count > 0) {
+      this.startAutoMove(x, y, callback, handle)
+    }
+  }
+
+  //  开启自动移动
+  startAutoMove(x, y, callback, handle) {
+    this.autoMoveTimer = setTimeout(() => {
+      this.onMove(x, y, callback, handle)
+    }, 20)
+  }
+
+  // 清除自动移动定时器
+  clearAutoMoveTimer() {
+    clearTimeout(this.autoMoveTimer)
+  }
+
+  //  创建矩形
+  createRect(x, y) {
+    if (this.rect) this.rect.remove()
+    this.rect = this.mindMap.svg
+      .polygon()
+      .stroke({
+        color: '#0984e3'
+      })
+      .fill({
+        color: 'rgba(9,132,227,0.3)'
+      })
+      .plot([[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 (
+        checkTwoRectIsOverlap(minx, maxx, miny, maxy, left, right, top, bottom)
+      ) {
+        if (node.getData('isActive')) {
+          return
+        }
+        this.mindMap.renderer.addNodeToActiveList(node)
+      } else if (node.getData('isActive')) {
+        if (!node.getData('isActive')) {
+          return
+        }
+        this.mindMap.renderer.removeNodeFromActiveList(node)
+      }
+    })
+  }
+
+  // 是否存在选区
+  hasSelectRange() {
+    return this.isSelecting
+  }
+}
+
+Select.instanceName = 'select'
+
+export default Select

simple-mind-map/src/plugins/TouchEvent.js

@@ -0,0 +1,160 @@
+// 手势事件支持插件
+class TouchEvent {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.clickNum = 0
+    this.touchStartScaleView = null
+    this.bindEvent()
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onTouchstart = this.onTouchstart.bind(this)
+    this.onTouchmove = this.onTouchmove.bind(this)
+    this.onTouchcancel = this.onTouchcancel.bind(this)
+    this.onTouchend = this.onTouchend.bind(this)
+    window.addEventListener('touchstart', this.onTouchstart)
+    window.addEventListener('touchmove', this.onTouchmove)
+    window.addEventListener('touchcancel', this.onTouchcancel)
+    window.addEventListener('touchend', this.onTouchend)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    window.removeEventListener('touchstart', this.onTouchstart)
+    window.removeEventListener('touchmove', this.onTouchmove)
+    window.removeEventListener('touchcancel', this.onTouchcancel)
+    window.removeEventListener('touchend', this.onTouchend)
+  }
+
+  // 手指按下事件
+  onTouchstart(e) {
+    this.touchesNum = e.touches.length
+    this.touchStartScaleView = null
+    if (this.touchesNum === 1) {
+      let touch = e.touches[0]
+      this.singleTouchstartEvent = touch
+      this.dispatchMouseEvent('mousedown', touch.target, touch)
+    }
+  }
+
+  // 手指移动事件
+  onTouchmove(e) {
+    let len = e.touches.length
+    if (len === 1) {
+      let touch = e.touches[0]
+      this.dispatchMouseEvent('mousemove', touch.target, touch)
+    } else if (len === 2) {
+      let touch1 = e.touches[0]
+      let touch2 = e.touches[1]
+      let ox = touch1.clientX - touch2.clientX
+      let oy = touch1.clientY - touch2.clientY
+      let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
+      // 以两指中心点进行缩放
+      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(
+        touch1.clientX,
+        touch1.clientY
+      )
+      let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(
+        touch2.clientX,
+        touch2.clientY
+      )
+      let cx = (touch1ClientX + touch2ClientX) / 2
+      let cy = (touch1ClientY + touch2ClientY) / 2
+      // 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动
+      const view = this.mindMap.view
+      if (!this.touchStartScaleView) {
+        this.touchStartScaleView = {
+          distance: distance,
+          scale: view.scale,
+          x: view.x,
+          y: view.y,
+          cx: cx,
+          cy: cy
+        }
+        return
+      }
+      const viewBefore = this.touchStartScaleView
+      let scale = viewBefore.scale * (distance / viewBefore.distance)
+      if (Math.abs(distance - viewBefore.distance) <= 10) {
+        scale = viewBefore.scale
+      }
+      const ratio = 1 - scale / viewBefore.scale
+      view.scale = scale < 0.1 ? 0.1 : scale
+      view.x =
+        viewBefore.x +
+        (cx - viewBefore.x) * ratio +
+        (cx - viewBefore.cx) * scale
+      view.y =
+        viewBefore.y +
+        (cy - viewBefore.y) * ratio +
+        (cy - viewBefore.cy) * scale
+      view.transform()
+      this.mindMap.emit('scale', scale)
+    }
+  }
+
+  // 手指取消事件
+  onTouchcancel(e) {}
+
+  // 手指松开事件
+  onTouchend(e) {
+    this.dispatchMouseEvent('mouseup', e.target)
+    if (this.touchesNum === 1) {
+      // 模拟双击事件
+      this.clickNum++
+      setTimeout(() => {
+        this.clickNum = 0
+      }, 300)
+      let ev = this.singleTouchstartEvent
+      if (this.clickNum > 1) {
+        this.clickNum = 0
+        this.dispatchMouseEvent('dblclick', ev.target, ev)
+      } else {
+        // 点击事件应该不用模拟
+        // this.dispatchMouseEvent('click', ev.target, ev)
+      }
+    }
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.touchStartScaleView = null
+  }
+
+  // 发送鼠标事件
+  dispatchMouseEvent(eventName, target, e) {
+    let opt = {}
+    if (e) {
+      opt = {
+        screenX: e.screenX,
+        screenY: e.screenY,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        which: 1
+      }
+    }
+    let event = new MouseEvent(eventName, {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+      ...opt
+    })
+    target.dispatchEvent(event)
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+TouchEvent.instanceName = 'touchEvent'
+
+export default TouchEvent

simple-mind-map/src/plugins/Watermark.js

@@ -1,8 +1,8 @@
 import { Text, G } from '@svgdotjs/svg.js'
-import { degToRad, camelCaseToHyphen } from './utils'
+import { degToRad, camelCaseToHyphen } from '../utils'
 import merge from 'deepmerge'
 
-// 水印类
+// 水印插件
 class Watermark {
   constructor(opt = {}) {
     this.mindMap = opt.mindMap
@@ -11,13 +11,48 @@ class Watermark {
     this.angle = 0 // 旋转角度
     this.text = '' // 水印文字
     this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = null // 容器
+    this.maxLong = this.getMaxLong()
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+    this.bindEvent()
+  }
+
+  getMaxLong() {
+    return Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+  }
+
+  bindEvent() {
+    this.onResize = this.onResize.bind(this)
+    this.mindMap.on('resize', this.onResize)
+  }
+
+  unBindEvent() {
+    this.mindMap.off('resize', this.onResize)
+  }
+
+  onResize() {
+    this.maxLong = this.getMaxLong()
+    this.draw()
+  }
+
+  // 创建水印容器
+  createContainer() {
+    if (this.watermarkDraw) return
     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 || {})
+      .addClass('smm-water-mark-container')
+  }
+
+  // 删除水印容器
+  removeContainer() {
+    if (!this.watermarkDraw) {
+      return
+    }
+    this.watermarkDraw.remove()
+    this.watermarkDraw = null
   }
 
   // 获取是否存在水印
@@ -40,10 +75,14 @@ class Watermark {
   // 绘制水印
   // 非精确绘制，会绘制一些超出可视区域的水印
   draw() {
-    this.watermarkDraw.clear()
+    // 清空之前的水印
+    if (this.watermarkDraw) this.watermarkDraw.clear()
+    // 如果没有水印数据，那么水印容器也删除掉
     if (!this.hasWatermark()) {
+      this.removeContainer()
       return
     }
+    this.createContainer()
     let x = 0
     while (x < this.mindMap.width) {
       this.drawText(x)
@@ -109,12 +148,25 @@ class Watermark {
 
   // 更新水印
   updateWatermark(config) {
-    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.mindMap.opt.watermarkConfig = merge(
+      this.mindMap.opt.watermarkConfig,
+      config
+    )
     this.handleConfig(config)
     this.draw()
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
 }
 
 Watermark.instanceName = 'watermark'
 
-export default Watermark
+export default Watermark

simple-mind-map/src/plugins/associativeLine/associativeLineControls.js

@@ -0,0 +1,291 @@
+import {
+  getAssociativeLineTargetIndex,
+  joinCubicBezierPath,
+  getNodePoint,
+  getDefaultControlPointOffsets
+} from './associativeLineUtils'
+
+// 创建控制点、连线节点
+function createControlNodes() {
+  let { associativeLineActiveColor } = this.mindMap.themeConfig
+  // 连线
+  this.controlLine1 = this.associativeLineDraw
+    .line()
+    .stroke({ color: associativeLineActiveColor, width: 2 })
+  this.controlLine2 = this.associativeLineDraw
+    .line()
+    .stroke({ color: associativeLineActiveColor, width: 2 })
+  // 控制点
+  this.controlPoint1 = this.createOneControlNode('controlPoint1')
+  this.controlPoint2 = this.createOneControlNode('controlPoint2')
+}
+
+// 创建控制点
+function createOneControlNode(pointKey) {
+  let { associativeLineActiveColor } = this.mindMap.themeConfig
+  return this.associativeLineDraw
+    .circle(this.controlPointDiameter)
+    .stroke({ color: associativeLineActiveColor })
+    .fill({ color: '#fff' })
+    .click(e => {
+      e.stopPropagation()
+    })
+    .mousedown(e => {
+      this.onControlPointMousedown(e, pointKey)
+    })
+}
+
+// 控制点的鼠标按下事件
+function onControlPointMousedown(e, pointKey) {
+  e.stopPropagation()
+  this.isControlPointMousedown = true
+  this.mousedownControlPointKey = pointKey
+}
+
+// 控制点的鼠标移动事件
+function onControlPointMousemove(e) {
+  if (
+    !this.isControlPointMousedown ||
+    !this.mousedownControlPointKey ||
+    !this[this.mousedownControlPointKey]
+  )
+    return
+  e.stopPropagation()
+  e.preventDefault()
+  let radius = this.controlPointDiameter / 2
+  // 转换鼠标当前的位置
+  let { x, y } = this.getTransformedEventPos(e)
+  this.controlPointMousemoveState.pos = {
+    x,
+    y
+  }
+  // 更新当前拖拽的控制点的位置
+  this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
+  let [, , , node, toNode] = this.activeLine
+  let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+  let { associativeLinePoint, associativeLineTargetControlOffsets } =
+    node.getData()
+  associativeLinePoint = associativeLinePoint || []
+  const nodePos = this.getNodePos(node)
+  const toNodePos = this.getNodePos(toNode)
+  let [startPoint, endPoint] = this.updateAllLinesPos(
+    node,
+    toNode,
+    associativeLinePoint[targetIndex]
+  )
+  this.controlPointMousemoveState.startPoint = startPoint
+  this.controlPointMousemoveState.endPoint = endPoint
+  this.controlPointMousemoveState.targetIndex = targetIndex
+  let offsets = []
+  if (!associativeLineTargetControlOffsets) {
+    // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+    offsets = getDefaultControlPointOffsets(startPoint, endPoint)
+  } else {
+    offsets = associativeLineTargetControlOffsets[targetIndex]
+  }
+  let point1 = null
+  let point2 = null
+  const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY)
+  const _e = {
+    clientX,
+    clientY
+  }
+  // 拖拽的是控制点1
+  if (this.mousedownControlPointKey === 'controlPoint1') {
+    startPoint = getNodePoint(nodePos, '', 0, _e)
+    point1 = {
+      x,
+      y
+    }
+    point2 = {
+      x: endPoint.x + offsets[1].x,
+      y: endPoint.y + offsets[1].y
+    }
+    if (startPoint) {
+      // 保存更新后的坐标
+      this.controlPointMousemoveState.startPoint = startPoint
+      // 更新控制点1的连线
+      this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+    }
+  } else {
+    // 拖拽的是控制点2
+    endPoint = getNodePoint(toNodePos, '', 0, _e)
+    point1 = {
+      x: startPoint.x + offsets[0].x,
+      y: startPoint.y + offsets[0].y
+    }
+    point2 = {
+      x,
+      y
+    }
+    if (endPoint) {
+      // 保存更新后结束节点的坐标
+      this.controlPointMousemoveState.endPoint = endPoint
+      // 更新控制点2的连线
+      this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+    }
+  }
+  this.updataAassociativeLine(
+    startPoint,
+    endPoint,
+    point1,
+    point2,
+    this.activeLine
+  )
+}
+
+function updataAassociativeLine(
+  startPoint,
+  endPoint,
+  point1,
+  point2,
+  activeLine
+) {
+  const [path, clickPath, text] = activeLine
+  // 更新关联线
+  const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
+  path.plot(pathStr)
+  clickPath.plot(pathStr)
+  this.updateTextPos(path, text)
+  this.updateTextEditBoxPos(text)
+}
+
+// 控制点的鼠标松开事件
+function onControlPointMouseup(e) {
+  if (!this.isControlPointMousedown) return
+  e.stopPropagation()
+  e.preventDefault()
+  let { pos, startPoint, endPoint, targetIndex } =
+    this.controlPointMousemoveState
+  let [, , , node] = this.activeLine
+  let offsetList = []
+  let { associativeLinePoint, associativeLineTargetControlOffsets } =
+    node.getData()
+  if (!associativeLinePoint) {
+    associativeLinePoint = []
+  }
+  associativeLinePoint[targetIndex] = associativeLinePoint[targetIndex] || {
+    startPoint,
+    endPoint
+  }
+  if (!associativeLineTargetControlOffsets) {
+    // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+    offsetList[targetIndex] = getDefaultControlPointOffsets(
+      startPoint,
+      endPoint
+    )
+  } else {
+    offsetList = associativeLineTargetControlOffsets
+  }
+  let offset1 = null
+  let offset2 = null
+  if (this.mousedownControlPointKey === 'controlPoint1') {
+    // 更新控制点1数据
+    offset1 = {
+      x: pos.x - startPoint.x,
+      y: pos.y - startPoint.y
+    }
+    offset2 = offsetList[targetIndex][1]
+    associativeLinePoint[targetIndex].startPoint = startPoint
+  } else {
+    // 更新控制点2数据
+    offset1 = offsetList[targetIndex][0]
+    offset2 = {
+      x: pos.x - endPoint.x,
+      y: pos.y - endPoint.y
+    }
+    associativeLinePoint[targetIndex].endPoint = endPoint
+  }
+  offsetList[targetIndex] = [offset1, offset2]
+  this.mindMap.execCommand('SET_NODE_DATA', node, {
+    associativeLineTargetControlOffsets: offsetList,
+    associativeLinePoint
+  })
+  // 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
+  setTimeout(() => {
+    this.resetControlPoint()
+  }, 0)
+}
+
+// 复位控制点移动
+function resetControlPoint() {
+  this.isControlPointMousedown = false
+  this.mousedownControlPointKey = ''
+  this.controlPointMousemoveState = {
+    pos: null,
+    startPoint: null,
+    endPoint: null,
+    targetIndex: ''
+  }
+}
+
+// 渲染控制点
+function renderControls(startPoint, endPoint, point1, point2) {
+  if (!this.controlLine1) {
+    this.createControlNodes()
+  }
+  let radius = this.controlPointDiameter / 2
+  // 控制点和起终点的连线
+  this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+  this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+  // 控制点
+  this.controlPoint1.x(point1.x - radius).y(point1.y - radius)
+  this.controlPoint2.x(point2.x - radius).y(point2.y - radius)
+}
+
+// 删除控制点
+function removeControls() {
+  if (!this.controlLine1) return
+  ;[
+    this.controlLine1,
+    this.controlLine2,
+    this.controlPoint1,
+    this.controlPoint2
+  ].forEach(item => {
+    item.remove()
+  })
+  this.controlLine1 = null
+  this.controlLine2 = null
+  this.controlPoint1 = null
+  this.controlPoint2 = null
+}
+
+// 隐藏控制点
+function hideControls() {
+  if (!this.controlLine1) return
+  ;[
+    this.controlLine1,
+    this.controlLine2,
+    this.controlPoint1,
+    this.controlPoint2
+  ].forEach(item => {
+    item.hide()
+  })
+}
+
+// 显示控制点
+function showControls() {
+  if (!this.controlLine1) return
+  ;[
+    this.controlLine1,
+    this.controlLine2,
+    this.controlPoint1,
+    this.controlPoint2
+  ].forEach(item => {
+    item.show()
+  })
+}
+
+export default {
+  createControlNodes,
+  createOneControlNode,
+  onControlPointMousedown,
+  onControlPointMousemove,
+  onControlPointMouseup,
+  resetControlPoint,
+  renderControls,
+  removeControls,
+  hideControls,
+  showControls,
+  updataAassociativeLine
+}

simple-mind-map/src/plugins/associativeLine/associativeLineText.js

@@ -0,0 +1,185 @@
+import { Text } from '@svgdotjs/svg.js'
+import {
+  getStrWithBrFromHtml,
+  focusInput,
+  selectAllInput
+} from '../../utils/index'
+
+// 创建文字节点
+function createText(data) {
+  let g = this.associativeLineDraw.group()
+  const setActive = () => {
+    if (
+      !this.activeLine ||
+      this.activeLine[3] !== data.node ||
+      this.activeLine[4] !== data.toNode
+    ) {
+      this.setActiveLine({
+        ...data,
+        text: g
+      })
+    }
+  }
+  g.click(e => {
+    e.stopPropagation()
+    setActive()
+  })
+  g.on('dblclick', e => {
+    e.stopPropagation()
+    setActive()
+    if (!this.activeLine) return
+    this.showEditTextBox(g)
+  })
+  return g
+}
+
+//  显示文本编辑框
+function showEditTextBox(g) {
+  this.mindMap.emit('before_show_text_edit')
+  // 注册回车快捷键
+  this.mindMap.keyCommand.addShortcut('Enter', () => {
+    this.hideEditTextBox()
+  })
+  // 输入框元素没有创建过，则先创建
+  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()
+    })
+    const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+    targetNode.appendChild(this.textEditNode)
+  }
+  let {
+    associativeLineTextFontSize,
+    associativeLineTextFontFamily,
+    associativeLineTextLineHeight
+  } = this.mindMap.themeConfig
+  let { defaultAssociativeLineText, nodeTextEditZIndex } = this.mindMap.opt
+  let scale = this.mindMap.view.scale
+  let [, , , node, toNode] = this.activeLine
+  let text = this.getText(node, toNode)
+  let textLines = (text || defaultAssociativeLineText).split(/\n/gim)
+  this.textEditNode.style.fontFamily = associativeLineTextFontFamily
+  this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
+  this.textEditNode.style.lineHeight =
+    textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
+  this.textEditNode.style.zIndex = nodeTextEditZIndex
+  this.textEditNode.innerHTML = textLines.join('<br>')
+  this.textEditNode.style.display = 'block'
+  this.updateTextEditBoxPos(g)
+  this.showTextEdit = true
+  // 如果是默认文本要全选输入框
+  if (text === '' || text === defaultAssociativeLineText) {
+    selectAllInput(this.textEditNode)
+  } else {
+    // 否则聚焦即可
+    focusInput(this.textEditNode)
+  }
+}
+
+// 处理画布缩放
+function onScale() {
+  this.hideEditTextBox()
+}
+
+// 更新文本编辑框位置
+function updateTextEditBoxPos(g) {
+  let rect = g.node.getBoundingClientRect()
+  if (this.textEditNode) {
+    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`
+  }
+}
+
+//  隐藏文本编辑框
+function hideEditTextBox() {
+  if (!this.showTextEdit) {
+    return
+  }
+  let [path, , text, node, toNode] = this.activeLine
+  let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  // 如果是默认文本，那么不保存
+  let isDefaultText = str === this.mindMap.opt.defaultAssociativeLineText
+  str = isDefaultText ? '' : str
+  this.mindMap.execCommand('SET_NODE_DATA', node, {
+    associativeLineText: {
+      ...(node.getData('associativeLineText') || {}),
+      [toNode.getData('uid')]: str
+    }
+  })
+  this.textEditNode.style.display = 'none'
+  this.textEditNode.innerHTML = ''
+  this.showTextEdit = false
+  this.renderText(str, path, text)
+  this.mindMap.emit('hide_text_edit')
+}
+
+// 获取某根关联线的文字
+function getText(node, toNode) {
+  let obj = node.getData('associativeLineText')
+  if (!obj) {
+    return ''
+  }
+  return obj[toNode.getData('uid')] || ''
+}
+
+// 渲染关联线文字
+function renderText(str, path, text) {
+  if (!str) return
+  let { associativeLineTextFontSize, associativeLineTextLineHeight } =
+    this.mindMap.themeConfig
+  text.clear()
+  let textArr = str.split(/\n/gim)
+  textArr.forEach((item, index) => {
+    let node = new Text().text(item)
+    node.y(associativeLineTextFontSize * associativeLineTextLineHeight * index)
+    this.styleText(node)
+    text.add(node)
+  })
+  updateTextPos(path, text)
+}
+
+// 给文本设置样式
+function styleText(node) {
+  let {
+    associativeLineTextColor,
+    associativeLineTextFontSize,
+    associativeLineTextFontFamily
+  } = this.mindMap.themeConfig
+  node
+    .fill({
+      color: associativeLineTextColor
+    })
+    .css({
+      'font-family': associativeLineTextFontFamily,
+      'font-size': associativeLineTextFontSize
+    })
+}
+
+// 更新关联线文字位置
+function updateTextPos(path, text) {
+  let pathLength = path.length()
+  let centerPoint = path.pointAt(pathLength / 2)
+  let { width: textWidth, height: textHeight } = text.bbox()
+  text.x(centerPoint.x - textWidth / 2)
+  text.y(centerPoint.y - textHeight / 2)
+}
+
+export default {
+  getText,
+  createText,
+  styleText,
+  onScale,
+  showEditTextBox,
+  hideEditTextBox,
+  updateTextEditBoxPos,
+  renderText,
+  updateTextPos
+}

simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js

@@ -1,7 +1,7 @@
 // 获取目标节点在起始节点的目标数组中的索引
 export const getAssociativeLineTargetIndex = (node, toNode) => {
-  return node.nodeData.data.associativeLineTargets.findIndex(item => {
-    return item === toNode.nodeData.data.id
+  return node.getData('associativeLineTargets').findIndex(item => {
+    return item === toNode.getData('uid')
   })
 }
 
@@ -54,28 +54,136 @@ export const cubicBezierPath = (x1, y1, x2, y2) => {
   )
 }
 
+export const calcPoint = (node, e) => {
+  const { left, top, translateLeft, translateTop, width, height } = node
+  const clientX = e.clientX
+  const clientY = e.clientY
+  // 中心点的坐标
+  const centerX = translateLeft + width / 2
+  const centerY = translateTop + height / 2
+  const translateCenterX = left + width / 2
+  const translateCenterY = top + height / 2
+  const theta = Math.atan(height / width)
+  // 矩形左上角坐标
+  const deltaX = clientX - centerX
+  const deltaY = centerY - clientY
+  // 方向值
+  const direction = Math.atan2(deltaY, deltaX)
+  // 默认坐标
+  let x = left + width
+  let y = top + height
+  if (direction < theta && direction >= -theta) {
+    // 右边
+    // 正切值 = 对边/邻边，对边 = 正切值*邻边
+    const range = direction * (width / 2)
+    if (direction < theta && direction >= 0) {
+      // 中心点上边
+      y = translateCenterY - range
+    } else if (direction >= -theta && direction < 0) {
+      //  中心点下方
+      y = translateCenterY - range
+    }
+    return {
+      x,
+      y,
+      dir: 'right',
+      range
+    }
+  } else if (direction >= theta && direction < Math.PI - theta) {
+    // 上边
+    y = top
+    let range = 0
+    if (direction < Math.PI / 2 - theta && direction >= theta) {
+      // 正切值 = 对边/邻边，邻边 = 对边/正切值
+      const side = height / 2 / direction
+      range = -side
+      // 中心点右侧
+      x = translateCenterX + side
+    } else if (
+      direction >= Math.PI / 2 - theta &&
+      direction < Math.PI - theta
+    ) {
+      // 中心点左侧
+      const tanValue = (centerX - clientX) / (centerY - clientY)
+      const side = (height / 2) * tanValue
+      range = side
+      x = translateCenterX - side
+    }
+    return {
+      x,
+      y,
+      dir: 'top',
+      range
+    }
+  } else if (direction < -theta && direction >= theta - Math.PI) {
+    // 下边
+    let range = 0
+    if (direction >= theta - Math.PI / 2 && direction < -theta) {
+      // 中心点右侧
+      // 正切值 = 对边/邻边，邻边 = 对边/正切值
+      const side = height / 2 / direction
+      range = side
+      x = translateCenterX - side
+    } else if (
+      direction < theta - Math.PI / 2 &&
+      direction >= theta - Math.PI
+    ) {
+      // 中心点左侧
+      const tanValue = (centerX - clientX) / (centerY - clientY)
+      const side = (height / 2) * tanValue
+      range = -side
+      x = translateCenterX + side
+    }
+    return {
+      x,
+      y,
+      dir: 'bottom',
+      range
+    }
+  }
+  // 左边
+  x = left
+  const tanValue = (centerY - clientY) / (centerX - clientX)
+  const range = tanValue * (width / 2)
+  if (direction >= -Math.PI && direction < theta - Math.PI) {
+    // 中心点右侧
+    y = translateCenterY - range
+  } else if (direction < Math.PI && direction >= Math.PI - theta) {
+    //  中心点左侧
+    y = translateCenterY - range
+  }
+  return {
+    x,
+    y,
+    dir: 'left',
+    range
+  }
+}
 // 获取节点的连接点
-export const getNodePoint = (node, dir = 'right') => {
+export const getNodePoint = (node, dir = 'right', range = 0, e = null) => {
   let { left, top, width, height } = node
+  if (e) {
+    return calcPoint(node, e)
+  }
   switch (dir) {
     case 'left':
       return {
         x: left,
-        y: top + height / 2
+        y: top + height / 2 - range
       }
     case 'right':
       return {
         x: left + width,
-        y: top + height / 2
+        y: top + height / 2 - range
       }
     case 'top':
       return {
-        x: left + width / 2,
+        x: left + width / 2 - range,
         y: top
       }
     case 'bottom':
       return {
-        x: left + width / 2,
+        x: left + width / 2 - range,
         y: top + height
       }
     default:
@@ -94,7 +202,7 @@ export const computeNodePoints = (fromNode, toNode) => {
   // 中心点坐标的差值
   let offsetX = toCx - fromCx
   let offsetY = toCy - fromCy
-  if (offsetX === 0 && offsetY === 0) return
+  if (offsetX === 0 && offsetY === 0) return []
   let fromDir = ''
   let toDir = ''
   if (offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY) {
@@ -111,8 +219,8 @@ export const computeNodePoints = (fromNode, toNode) => {
     toDir = 'bottom'
   } else if (offsetY > 0 && -offsetY < offsetX && offsetY > offsetX) {
     // down
-    fromDir = 'bottom'
-    toDir = 'top'
+    fromDir = 'right'
+    toDir = 'right'
   }
   return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)]
 }
@@ -123,7 +231,7 @@ export const getNodeLinePath = (startPoint, endPoint, node, toNode) => {
   // 控制点
   let controlPoints = []
   let associativeLineTargetControlOffsets =
-    node.nodeData.data.associativeLineTargetControlOffsets
+    node.getData('associativeLineTargetControlOffsets')
   if (
     associativeLineTargetControlOffsets &&
     associativeLineTargetControlOffsets[targetIndex]
@@ -179,4 +287,4 @@ export const getDefaultControlPointOffsets = (startPoint, endPoint) => {
       y: controlPoints[1].y - endPoint.y
     }
   ]
-}
+}

simple-mind-map/src/svg/btns.js

@@ -4,7 +4,15 @@ const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" versio
 //  收缩按钮
 const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
 
+// 删除按钮
+const remove = `<svg width="14px" height="14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path fill="#ffffff" d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path fill="#ffffff" d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
+
+// 图片调整按钮
+const imgAdjust = `<svg width="12px" height="12px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z"  /></svg>`
+
 export default {
   open,
-  close
+  close,
+  remove,
+  imgAdjust
 }

simple-mind-map/src/svg/icons.js

@@ -1,3 +1,5 @@
+import { mergerIconList } from '../utils'
+
 // 超链接图标
 const hyperlink =
   '<svg t="1624174958075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7982" ><path d="M435.484444 251.733333v68.892445L295.822222 320.682667a168.504889 168.504889 0 0 0-2.844444 336.952889h142.506666v68.892444H295.822222a237.397333 237.397333 0 0 1 0-474.794667h139.662222z m248.945778 0a237.397333 237.397333 0 0 1 0 474.851556H544.654222v-69.006222l139.776 0.056889a168.504889 168.504889 0 0 0 2.844445-336.952889H544.597333V251.676444h139.776z m-25.827555 203.946667a34.474667 34.474667 0 0 1 0 68.892444H321.649778a34.474667 34.474667 0 0 1 0-68.892444h336.952889z" p-id="7983"></path></svg>'
@@ -279,14 +281,23 @@ export const nodeIconList = [
 ]
 
 //  获取nodeIconList icon内容
-const getNodeIconListIcon = name => {
+const getNodeIconListIcon = (name, extendIconList = []) => {
   let arr = name.split('_')
-  let typeData = nodeIconList.find(item => {
+  const iconList = mergerIconList([...nodeIconList, ...extendIconList])
+  let typeData = iconList.find(item => {
     return item.type === arr[0]
   })
-  return typeData.list.find(item => {
-    return item.name === arr[1]
-  }).icon
+  if (typeData) {
+    let typeName = typeData.list.find(item => {
+      return item.name === arr[1]
+    })
+    if (typeName) {
+      return typeName.icon
+    }
+    return ''
+  } else {
+    return ''
+  }
 }
 
 export default {

simple-mind-map/src/themes/autumn.js

@@ -0,0 +1,44 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 秋天
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: '#fff2df',
+  // 连线的颜色
+  lineColor: '#b0bc47',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#b0bc47',
+  // 根节点样式
+  root: {
+    fillColor: '#e68112',
+    color: '#fff',
+    borderColor: '#e68112',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#ffd683',
+    color: '#8c5416',
+    borderColor: '#b0bc47',
+    borderWidth: 2,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#8c5416'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '#ffd683',
+    borderColor: '#b0bc47',
+    borderWidth: 2,
+    color: '#8c5416'
+  }
+})

simple-mind-map/src/themes/avocado.js

@@ -0,0 +1,44 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 牛油果
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: '#e6f1de',
+  // 连线的颜色
+  lineColor: '#f5ffad',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#749336',
+  // 根节点样式
+  root: {
+    fillColor: '#94c143',
+    color: '#fff',
+    borderColor: '#94c143',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#cee498',
+    color: '#749336',
+    borderColor: '#aec668',
+    borderWidth: 2,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#749336'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '#cee498',
+    borderColor: '#aec668',
+    borderWidth: 2,
+    color: '#749336'
+  }
+})

simple-mind-map/src/themes/blackGold.js

@@ -0,0 +1,44 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 黑金
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(18, 20, 20)',
+  // 连线的颜色
+  lineColor: 'rgb(205, 186, 156)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(245, 224, 191)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(255, 208, 124)',
+    color: 'rgb(111, 61, 6)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(66, 57, 46)',
+    color: 'rgb(225, 201, 158)',
+    borderColor: 'rgb(245, 224, 191)',
+    borderWidth: 2,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(231, 203, 155)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(56, 45, 34)',
+    borderColor: 'rgb(104, 84, 61)',
+    borderWidth: 2,
+    color: 'rgb(242, 216, 176)'
+  }
+})

simple-mind-map/src/themes/blackHumour.js

@@ -0,0 +1,44 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 黑色幽默
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(27, 31, 34)',
+  // 连线的颜色
+  lineColor: 'rgb(75, 81, 78)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 119, 34)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(36, 179, 96)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(254, 199, 13)',
+    color: 'rgb(0, 0, 0)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(204, 204, 204)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(27, 31, 34)',
+    borderColor: 'rgb(255, 119, 34)',
+    borderWidth: 2,
+    color: 'rgb(204, 204, 204)'
+  }
+})

simple-mind-map/src/themes/blueSky.js

@@ -13,10 +13,7 @@ export default merge(defaultTheme, {
   generalizationLineColor: '#333',
   // 根节点样式
   root: {
-    fillColor: 'rgb(115, 161, 191)',
-    active: {
-      borderColor: 'rgb(57, 80, 96)'
-    }
+    fillColor: 'rgb(115, 161, 191)'
   },
   // 二级节点样式
   second: {
@@ -24,26 +21,17 @@ export default merge(defaultTheme, {
     color: '#333',
     borderColor: 'rgb(115, 161, 191)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(57, 80, 96)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(57, 80, 96)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: '#333',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(57, 80, 96)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/brainImpairedPink.js

@@ -13,10 +13,7 @@ export default merge(defaultTheme, {
   generalizationLineColor: '#333',
   // 根节点样式
   root: {
-    fillColor: 'rgb(191, 115, 148)',
-    active: {
-      borderColor: 'rgb(96, 57, 74)'
-    }
+    fillColor: 'rgb(191, 115, 148)'
   },
   // 二级节点样式
   second: {
@@ -24,26 +21,17 @@ export default merge(defaultTheme, {
     color: '#333',
     borderColor: 'rgb(191, 115, 148)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(96, 57, 74)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 57, 74)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: '#333',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 57, 74)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/classic.js

@@ -18,16 +18,13 @@ export default merge(defaultTheme, {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
   // 背景重复
   backgroundRepeat: 'repeat',
+  backgroundSize: 'auto',
   // 根节点样式
   root: {
     fillColor: 'rgb(233, 223, 152)',
     color: '#333',
     fontSize: 24,
-    borderRadius: 21,
-    active: {
-      fillColor: 'rgb(254, 219, 0)',
-      borderColor: 'transparent'
-    }
+    borderRadius: 21
   },
   // 二级节点样式
   second: {
@@ -35,30 +32,18 @@ export default merge(defaultTheme, {
     borderColor: 'transparent',
     color: '#333',
     fontSize: 16,
-    borderRadius: 10,
-    active: {
-      fillColor: 'rgb(254, 219, 0)',
-      borderColor: 'transparent'
-    }
+    borderRadius: 10
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
     color: '#fff',
-    fontWeight: 'bold',
-    active: {
-      fillColor: 'rgb(254, 219, 0)',
-      borderColor: 'transparent'
-    }
+    fontWeight: 'bold'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: 'transparent',
-    color: '#333',
-    active: {
-      fillColor: 'rgb(254, 219, 0)',
-      borderColor: 'transparent'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/classic2.js

@@ -18,10 +18,7 @@ export default merge(defaultTheme, {
     fillColor: 'rgb(18, 187, 55)',
     color: '#fff',
     fontSize: 24,
-    borderRadius: 10,
-    active: {
-      borderColor: 'rgb(51, 51, 51)'
-    }
+    borderRadius: 10
   },
   // 二级节点样式
   second: {
@@ -29,27 +26,18 @@ export default merge(defaultTheme, {
     borderColor: 'transparent',
     color: '#1a1a1a',
     fontSize: 18,
-    borderRadius: 10,
-    active: {
-      borderColor: 'rgb(51, 51, 51)'
-    }
+    borderRadius: 10
   },
   // 三级及以下节点样式
   node: {
     fontSize: 14,
-    color: '#1a1a1a',
-    active: {
-      borderColor: 'rgb(51, 51, 51)'
-    }
+    color: '#1a1a1a'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: 'rgb(51, 51, 51)',
     borderWidth: 2,
-    color: '#1a1a1a',
-    active: {
-      borderColor: 'rgb(18, 187, 55)'
-    }
+    color: '#1a1a1a'
   }
 })

simple-mind-map/src/themes/classic3.js

@@ -20,10 +20,7 @@ export default merge(defaultTheme, {
     fontSize: 24,
     borderRadius: 10,
     borderColor: 'rgb(249, 199, 84)',
-    borderWidth: 1,
-    active: {
-      borderColor: 'rgb(94, 202, 110)'
-    }
+    borderWidth: 1
   },
   // 二级节点样式
   second: {
@@ -32,27 +29,18 @@ export default merge(defaultTheme, {
     borderWidth: 1,
     color: '#1a1a1a',
     fontSize: 18,
-    borderRadius: 10,
-    active: {
-      borderColor: 'rgb(94, 202, 110)'
-    }
+    borderRadius: 10
   },
   // 三级及以下节点样式
   node: {
     fontSize: 14,
-    color: '#1a1a1a',
-    active: {
-      borderColor: 'rgb(94, 202, 110)'
-    }
+    color: '#1a1a1a'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: '#1a1a1a',
     color: '#1a1a1a',
-    borderWidth: 2,
-    active: {
-      borderColor: 'rgb(94, 202, 110)'
-    }
+    borderWidth: 2
   }
 })

simple-mind-map/src/themes/classic4.js

@@ -20,10 +20,7 @@ export default merge(defaultTheme, {
     fontSize: 24,
     borderRadius: 10,
     borderColor: 'rgb(189, 197, 201)',
-    borderWidth: 2,
-    active: {
-      borderColor: 'rgb(169, 218, 218)'
-    }
+    borderWidth: 2
   },
   // 二级节点样式
   second: {
@@ -32,10 +29,7 @@ export default merge(defaultTheme, {
     borderWidth: 2,
     color: '#fff',
     fontSize: 18,
-    borderRadius: 10,
-    active: {
-      borderColor: 'rgb(56, 123, 233)'
-    }
+    borderRadius: 10
   },
   // 三级及以下节点样式
   node: {
@@ -43,19 +37,13 @@ export default merge(defaultTheme, {
     color: 'rgb(30, 53, 86)',
     borderColor: 'rgb(30, 53, 86)',
     borderWidth: 1,
-    marginY: 20,
-    active: {
-      borderColor: 'rgb(169, 218, 218)'
-    }
+    marginY: 20
   },
   // 概要节点样式
   generalization: {
     fillColor: 'rgb(56, 123, 233)',
     borderColor: 'rgb(56, 123, 233)',
     color: '#fff',
-    borderWidth: 0,
-    active: {
-      borderColor: 'rgb(169, 218, 218)'
-    }
+    borderWidth: 0
   }
 })

simple-mind-map/src/themes/classicBlue.js

@@ -16,10 +16,7 @@ export default merge(defaultTheme, {
   // 根节点样式
   root: {
     fillColor: 'rgb(255, 255, 255)',
-    color: '#222',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#222'
   },
   // 二级节点样式
   second: {
@@ -27,26 +24,17 @@ export default merge(defaultTheme, {
     color: '#222',
     borderColor: 'rgb(255, 255, 255)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: 'rgb(51, 51, 51)',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/classicGreen.js

@@ -14,10 +14,7 @@ export default merge(defaultTheme, {
   // 根节点样式
   root: {
     fillColor: 'rgb(253, 244, 217)',
-    color: '#222',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#222'
   },
   // 二级节点样式
   second: {
@@ -25,27 +22,18 @@ export default merge(defaultTheme, {
     color: '#222',
     borderColor: 'rgb(242, 200, 104)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: 'rgb(123, 199, 120)',
     borderColor: 'transparent',
     borderWidth: 2,
-    color: '#fff',
-    active: {
-      borderColor: 'rgb(94, 199, 248)'
-    }
+    color: '#fff'
   }
 })

simple-mind-map/src/themes/coffee.js

@@ -0,0 +1,42 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 咖啡
+export default merge(defaultTheme, {
+  // 连线的颜色
+  lineColor: 'rgb(173, 123, 91)',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 4,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(173, 123, 91)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(202, 117, 79)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(245, 231, 216)',
+    color: 'rgb(125, 86, 42)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(96, 71, 47)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(255, 249, 239)',
+    borderColor: 'rgb(173, 123, 91)',
+    borderWidth: 2,
+    color: 'rgb(122, 83, 44)'
+  }
+})

simple-mind-map/src/themes/courseGreen.js

@@ -0,0 +1,42 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 课程绿
+export default merge(defaultTheme, {
+  // 连线的颜色
+  lineColor: 'rgb(113, 195, 169)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(113, 195, 169)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(16, 160, 121)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(240, 252, 249)',
+    color: 'rgb(50, 113, 96)',
+    borderColor: 'rgb(113, 195, 169)',
+    borderWidth: 2,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(10, 59, 43)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(246, 238, 211)',
+    borderColor: '',
+    borderWidth: 0,
+    color: 'rgb(173, 91, 12)'
+  }
+})

simple-mind-map/src/themes/dark.js

@@ -18,10 +18,7 @@ export default merge(defaultTheme, {
     fillColor: 'rgb(28, 178, 43)',
     color: '#fff',
     fontSize: 24,
-    borderRadius: 10,
-    active: {
-      borderColor: 'rgb(17, 68, 23)'
-    }
+    borderRadius: 10
   },
   // 二级节点样式
   second: {
@@ -29,26 +26,17 @@ export default merge(defaultTheme, {
     color: 'rgb(147,148,149)',
     fontSize: 18,
     borderRadius: 10,
-    borderWidth: 0,
-    active: {
-      borderColor: 'rgb(17, 68, 23)'
-    }
+    borderWidth: 0
   },
   // 三级及以下节点样式
   node: {
     fontSize: 14,
-    color: 'rgb(147, 148, 149)',
-    active: {
-      borderColor: 'rgb(17, 68, 23)'
-    }
+    color: 'rgb(147, 148, 149)'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: 'transparent',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(17, 68, 23)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/dark2.js

@@ -17,11 +17,7 @@ export default merge(defaultTheme, {
     fillColor: 'rgb(36, 179, 96)',
     color: '#fff',
     borderColor: '',
-    borderWidth: 0,
-    active: {
-      borderColor: 'rgb(254, 199, 13)',
-      borderWidth: 3
-    }
+    borderWidth: 0
   },
   // 二级节点样式
   second: {
@@ -29,28 +25,18 @@ export default merge(defaultTheme, {
     color: 'rgb(0, 0, 0)',
     borderColor: '',
     borderWidth: 0,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(36, 179, 96)',
-      borderWidth: 2
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: 'rgb(204, 204, 204)',
-    active: {
-      borderColor: 'rgb(254, 199, 13)'
-    }
+    color: 'rgb(204, 204, 204)'
   },
   // 概要节点样式
   generalization: {
     fillColor: 'transparent',
     borderColor: 'rgb(255, 119, 34)',
     borderWidth: 2,
-    color: 'rgb(204, 204, 204)',
-    active: {
-      borderColor: 'rgb(254, 199, 13)'
-    }
+    color: 'rgb(204, 204, 204)'
   }
 })

simple-mind-map/src/themes/default.js

@@ -18,6 +18,8 @@ export default {
   lineDasharray: 'none',
   // 连线风格
   lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
+  // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型
+  rootLineKeepSameInCurve: true,
   // 概要连线的粗细
   generalizationLineWidth: 1,
   // 概要连线的颜色
@@ -34,6 +36,14 @@ export default {
   associativeLineActiveWidth: 8,
   // 关联线激活状态的颜色
   associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
+  // 关联线文字颜色
+  associativeLineTextColor: 'rgb(51, 51, 51)',
+  // 关联线文字大小
+  associativeLineTextFontSize: 14,
+  // 关联线文字行高
+  associativeLineTextLineHeight: 1.2,
+  // 关联线文字字体
+  associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
   // 背景颜色
   backgroundColor: '#fafafa',
   // 背景图片
@@ -60,12 +70,7 @@ export default {
     borderWidth: 0,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
+    textDecoration: 'none'
   },
   // 二级节点样式
   second: {
@@ -83,12 +88,7 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
+    textDecoration: 'none'
   },
   // 三级及以下节点样式
   node: {
@@ -106,12 +106,7 @@ export default {
     borderWidth: 0,
     borderRadius: 5,
     borderDasharray: 'none',
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
+    textDecoration: 'none'
   },
   // 概要节点样式
   generalization: {
@@ -129,12 +124,7 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
+    textDecoration: 'none'
   }
 }
 
@@ -142,14 +132,47 @@ export default {
 // 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
 export const supportActiveStyle = [
   'fillColor',
-  'color',
-  'fontWeight',
-  'fontStyle',
   'borderColor',
   'borderWidth',
   'borderDasharray',
-  'borderRadius',
-  'textDecoration'
+  'borderRadius'
 ]
 
+// 检测主题配置是否是节点大小无关的
+const nodeSizeIndependenceList = [
+  'lineWidth',
+  'lineColor',
+  'lineDasharray',
+  'lineStyle',
+  'generalizationLineWidth',
+  'generalizationLineColor',
+  'associativeLineWidth',
+  'associativeLineColor',
+  'associativeLineActiveWidth',
+  'associativeLineActiveColor',
+  'associativeLineTextColor',
+  'associativeLineTextFontSize',
+  'associativeLineTextLineHeight',
+  'associativeLineTextFontFamily',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundRepeat',
+  'backgroundPosition',
+  'backgroundSize',
+  'rootLineKeepSameInCurve'
+]
+export const checkIsNodeSizeIndependenceConfig = config => {
+  let keys = Object.keys(config)
+  for (let i = 0; i < keys.length; i++) {
+    if (
+      !nodeSizeIndependenceList.find(item => {
+        return item === keys[i]
+      })
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
 export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']

simple-mind-map/src/themes/earthYellow.js

@@ -13,10 +13,7 @@ export default merge(defaultTheme, {
   generalizationLineColor: '#333',
   // 根节点样式
   root: {
-    fillColor: 'rgb(191, 147, 115)',
-    active: {
-      borderColor: 'rgb(96, 73, 57)'
-    }
+    fillColor: 'rgb(191, 147, 115)'
   },
   // 二级节点样式
   second: {
@@ -24,26 +21,17 @@ export default merge(defaultTheme, {
     color: '#333',
     borderColor: 'rgb(191, 147, 115)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(96, 73, 57)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 73, 57)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: '#333',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 73, 57)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/freshGreen.js

@@ -26,11 +26,6 @@ export default merge(defaultTheme, {
   generalization: {
     fillColor: '#fff',
     borderColor: '#333',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/freshRed.js

@@ -13,10 +13,7 @@ export default merge(defaultTheme, {
   generalizationLineColor: '#333',
   // 根节点样式
   root: {
-    fillColor: 'rgb(191, 115, 115)',
-    active: {
-      borderColor: 'rgb(96, 57, 57)'
-    }
+    fillColor: 'rgb(191, 115, 115)'
   },
   // 二级节点样式
   second: {
@@ -24,26 +21,17 @@ export default merge(defaultTheme, {
     color: '#333',
     borderColor: 'rgb(191, 115, 115)',
     borderWidth: 1,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(96, 57, 57)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 57, 57)'
-    }
+    color: '#333'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: '#333',
-    color: '#333',
-    active: {
-      borderColor: 'rgb(96, 57, 57)'
-    }
+    color: '#333'
   }
 })

simple-mind-map/src/themes/gold.js

@@ -17,11 +17,7 @@ export default merge(defaultTheme, {
     fillColor: 'rgb(51, 56, 62)',
     color: 'rgb(247, 208, 160)',
     borderColor: '',
-    borderWidth: 0,
-    active: {
-      borderColor: 'rgb(247, 208, 160)',
-      borderWidth: 3
-    }
+    borderWidth: 0
   },
   // 二级节点样式
   second: {
@@ -29,27 +25,17 @@ export default merge(defaultTheme, {
     color: 'rgb(81, 58, 42)',
     borderColor: '',
     borderWidth: 0,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(51, 56, 62)',
-      borderWidth: 2
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#222',
-    active: {
-      borderColor: 'rgb(0, 192, 184)'
-    }
+    color: '#222'
   },
   // 概要节点样式
   generalization: {
     fillColor: 'rgb(127, 93, 64)',
     borderColor: 'transparent',
-    color: 'rgb(255, 214, 175)',
-    active: {
-      borderColor: 'rgb(51, 56, 62)'
-    }
+    color: 'rgb(255, 214, 175)'
   }
 })

simple-mind-map/src/themes/greenLeaf.js

@@ -17,11 +17,7 @@ export default merge(defaultTheme, {
     fillColor: 'rgb(25, 193, 73)',
     color: '#fff',
     borderColor: '',
-    borderWidth: 0,
-    active: {
-      borderColor: '#222',
-      borderWidth: 3
-    }
+    borderWidth: 0
   },
   // 二级节点样式
   second: {
@@ -29,28 +25,18 @@ export default merge(defaultTheme, {
     color: 'rgb(69, 149, 96)',
     borderColor: '',
     borderWidth: 0,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(25, 193, 73)',
-      borderWidth: 2
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#222',
-    active: {
-      borderColor: 'rgb(25, 193, 73)'
-    }
+    color: '#222'
   },
   // 概要节点样式
   generalization: {
     fillColor: '#fff',
     borderColor: 'rgb(251, 158, 0)',
     borderWidth: 2,
-    color: 'rgb(51, 51, 51)',
-    active: {
-      borderColor: 'rgb(25, 193, 73)'
-    }
+    color: 'rgb(51, 51, 51)'
   }
 })

simple-mind-map/src/themes/index.js

@@ -20,6 +20,16 @@ import vitalityOrange from './vitalityOrange'
 import greenLeaf from './greenLeaf'
 import dark2 from './dark2'
 import skyGreen from './skyGreen'
+import simpleBlack from './simpleBlack'
+import courseGreen from './courseGreen'
+import coffee from './coffee'
+import redSpirit from './redSpirit'
+import blackHumour from './blackHumour'
+import lateNightOffice from './lateNightOffice'
+import blackGold from './blackGold'
+import avocado from './avocado'
+import autumn from './autumn'
+import orangeJuice from './orangeJuice'
 
 export default {
   default: defaultTheme,
@@ -43,5 +53,15 @@ export default {
   vitalityOrange,
   greenLeaf,
   dark2,
-  skyGreen
+  skyGreen,
+  simpleBlack,
+  courseGreen,
+  coffee,
+  redSpirit,
+  blackHumour,
+  lateNightOffice,
+  blackGold,
+  avocado,
+  autumn,
+  orangeJuice
 }

simple-mind-map/src/themes/lateNightOffice.js

@@ -0,0 +1,44 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 深夜办公室
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: 'rgb(32, 37, 49)',
+  // 连线的颜色
+  lineColor: 'rgb(137, 167, 196)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 119, 34)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(23, 153, 243)',
+    color: 'rgb(255, 255, 255)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(70, 78, 94)',
+    color: 'rgb(209, 210, 210)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(204, 204, 204)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'rgb(255, 119, 34)',
+    borderColor: '',
+    borderWidth: 2,
+    color: '#fff'
+  }
+})

simple-mind-map/src/themes/minions.js

@@ -16,10 +16,7 @@ export default merge(defaultTheme, {
   root: {
     fillColor: 'rgb(55, 165, 255)',
     borderColor: 'rgb(51, 51, 51)',
-    borderWidth: 3,
-    active: {
-      borderColor: 'rgb(255, 160, 36)'
-    }
+    borderWidth: 3
   },
   // 二级节点样式
   second: {
@@ -27,26 +24,17 @@ export default merge(defaultTheme, {
     color: '#222',
     borderColor: 'rgb(51, 51, 51)',
     borderWidth: 3,
-    fontSize: 14,
-    active: {
-      borderColor: 'rgb(55, 165, 255)'
-    }
+    fontSize: 14
   },
   // 三级及以下节点样式
   node: {
     fontSize: 12,
-    color: '#222',
-    active: {
-      borderColor: 'rgb(55, 165, 255)'
-    }
+    color: '#222'
   },
   // 概要节点样式
   generalization: {
     borderColor: '#222',
     borderWidth: 3,
-    color: '#222',
-    active: {
-      borderColor: 'rgb(55, 165, 255)'
-    }
+    color: '#222'
   }
 })