重构

.gitignore

@@ -1,2 +1,2 @@
 node_modules
-oss.js
+package-lock.json

README.md

@@ -1 +1,36 @@
+# web思维导图的简单实现
+
 开发中...
+
+## 目录介绍
+
+1.simple-mind-map
+
+思维导图工具包。
+
+2.web
+
+使用`simple-mind-map`工具包搭建的在线思维导图。
+
+## 开发
+
+本地开发
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run serve
+```
+
+打包
+
+```bash
+cd web
+npm run build
+```

docs/web思维导图实现的技术点分析.md

@@ -0,0 +1,93 @@
+![](./assets/swdt.jpg)
+
+# 简介
+
+思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，百度一下，整页都是广告可供选择，此外也有一些可以用来帮助快速实现的`JavaScript`类库，如：[jsMind](https://github.com/hizzgdev/jsmind)、[KityMinder](https://github.com/fex-team/kityminder)。
+
+本文会介绍如何从头实现一个简易的思维导图。
+
+
+
+# 技术选型
+
+这种图形类的绘制一般有两种选择，`svg`与`canvas`，因为思维导图主要是节点与线的连接，使用与`html`比较接近的`svg`比较好操作，`svg`类库也有挺多，在试用了[svgjs](https://svgjs.dev/docs/3.0/)和[snap](http://snapsvg.io/)后，有些需求在`snap`里没有找到对应的方法，所以最终选择了`svgjs`，视图库使用的是`vue2.x`全家桶。
+
+
+
+# 数据结构
+
+这里主要指每个节点的数据结构，大概需要包含是否是根节点、节点层级、节点内容（包括文本、图片、图标等固定格式）、节点展开状态、子节点、父节点等等，此外还包括该节点的特定样式，用来覆盖主题的默认样式：
+
+```js
+
+```
+
+每次操作都会修改这份配置数据，然后整体刷新，有点数据驱动的意思，好处很明显，只用维护数据就行了，不用陷入对视图的操作。
+
+
+
+# 逻辑结构图
+
+思维导图常见的有几种变种，我们先看最基础的【逻辑结构图】如何布局，其他的可以在末尾小节查看。
+
+
+
+## 节点定位
+
+
+
+## 节点连线
+
+
+
+# 支持图片、图标
+
+
+
+# 展开收缩
+
+
+
+# 文字编辑
+
+# 拖动、放大缩小
+
+# 主题
+
+# 节点样式编辑
+
+# 快捷键
+
+快捷键就是监听了到特定的按键来执行特定的操作，包含单个按键和组合键，我们可以使用一个对象来保存快捷键和对应的命令，`key`代表按键，`value`代表要执行的命令，比如：
+
+```js
+const shortcutKeys = {
+	'enter': 'addSiblingNode',
+    'ctrl+b': 'bold'
+}
+```
+
+包含两种类型，单个按键、以`+`拼接的组合键，接下来只要监听`keydown`事件来检查即可，首先要说明的是组合键一般指的是`ctrl`、`alt`、`shift`
+
+
+
+# 实现过渡效果
+
+# 回退
+
+# 导入导出、其他格式
+
+https://github.com/canvg/canvg
+
+https://github.com/fex-team/kityminder/tree/dev/src/protocol
+
+https://github.com/fex-team/kityminder/tree/dev/native-support
+
+json、freemind、xmind
+
+png、svg
+
+# 其他几种变种结构
+
+逻辑结构图、鱼骨图、思维导图、组织结构图、目录组织图
+

simple-mind-map/index.js

@@ -6,17 +6,20 @@ import theme from './src/themes'
 import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command';
-import { SVG } from '@svgdotjs/svg.js'
+import {
+    SVG
+} from '@svgdotjs/svg.js'
 
+// 默认选项
 const defaultOpt = {
     // 布局
     layout: 'logicalStructure',
-    // 放大缩小的增量比例，即step = scaleRatio * width|height
-    scaleRatio: 0.1,
     // 主题
     theme: 'default', // 内置主题：default（默认主题）
     // 主题配置，会和所选择的主题进行合并
-    themeConfig: {}
+    themeConfig: {},
+    // 放大缩小的增量比例，即step = scaleRatio * width|height
+    scaleRatio: 0.1
 }
 
 /** 
@@ -33,22 +36,27 @@ class MindMap {
      * @Desc: 构造函数 
      */
     constructor(opt = {}) {
+        // 合并选项
         this.opt = merge(defaultOpt, opt)
+
         // 容器元素
         this.el = this.opt.el
         let {
             width,
             height
         } = this.el.getBoundingClientRect()
+
         // 画布宽高
         this.width = width
         this.height = height
+
         // 画笔
         this.draw = SVG().addTo(this.el).size(width, height)
+        
         // 节点id
         this.uid = 0
 
-        // 主题
+        // 初始化主题
         this.initTheme()
 
         // 事件类
@@ -77,12 +85,25 @@ class MindMap {
             draw: this.draw
         })
 
-        this.render()
+        // 初始渲染
+        this.renderer.render()
         setTimeout(() => {
             this.command.addHistory()
         }, 0);
     }
 
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 18:47:29 
+     * @Desc: 渲染 
+     */
+    render() {
+        this.draw.clear()
+        this.initTheme()
+        this.renderer.render()
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-04-24 13:25:50 
@@ -116,7 +137,9 @@ class MindMap {
      * @Desc: 设置主题
      */
     initTheme() {
+        // 合并主题配置
         this.themeConfig = merge(this.opt.theme && theme[this.opt.theme] ? theme[this.opt.theme] : theme.default, this.opt.themeConfig)
+        // 设置背景样式
         Style.setBackgroundStyle(this.el, this.themeConfig)
     }
 
@@ -149,18 +172,6 @@ class MindMap {
         return prop === undefined ? this.themeConfig : this.themeConfig[prop]
     }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 18:47:29 
-     * @Desc: 渲染节点 
-     */
-    render() {
-        this.draw.clear()
-        this.initTheme()
-        this.renderer.render()
-    }
-
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 13:01:00 

simple-mind-map/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "simple-mind-map",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {},
+  "dependencies": {
+    "@svgdotjs/svg.js": "^3.0.16",
+    "deepmerge": "^1.5.2",
+    "eventemitter3": "^4.0.7"
+  }
+}

simple-mind-map/src/Command.js

@@ -1,4 +1,4 @@
-import { copyRenderTree, simpleDeepClone } from './Utils';
+import { copyRenderTree, simpleDeepClone } from './utils';
 
 /** 
  * @Author: 王林 

simple-mind-map/src/Node.js

@@ -1,7 +1,7 @@
-import Style from './Style';
+import Style from './Style'
 import {
     resizeImgSize
-} from './Utils'
+} from './utils'
 import {
     Image,
     Text,
@@ -9,7 +9,7 @@ import {
     Circle,
     Element
 } from '@svgdotjs/svg.js'
-import btnsSvg from './svg/btns';
+import btnsSvg from './svg/btns'
 
 /** 
  * javascript comment 
@@ -25,22 +25,20 @@ class Node {
      * @Desc: 构造函数 
      */
     constructor(opt = {}) {
-        // 原始数据
-        this.originData = opt.originData
-        // 原始数据里的数据部分
-        this.data = opt.data
+        // 节点数据
+        this.data = opt.data || {}
         // id
         this.uid = opt.uid
         // 控制实例
         this.mindMap = opt.mindMap
         // 渲染实例
         this.renderer = opt.renderer
+        // 渲染器
+        this.draw = opt.draw || null
         // 主题配置
         this.themeConfig = this.mindMap.themeConfig
         // 样式实例
         this.style = new Style(this, this.themeConfig)
-        // 渲染器
-        this.draw = opt.draw || null
         // 是否是根节点
         this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
         // 是否激活
@@ -61,14 +59,8 @@ class Node {
         this.parent = opt.parent || null
         // 子节点
         this.children = opt.children || []
-        // 全部子节点所占的高度之和
-        this.childrenAreaHeight = opt.childrenAreaHeight || 0
         // 文本节点
         this.textNode = null
-        // 其他数据
-        Object.keys(opt.data).forEach((key) => {
-            this[key] = opt.data[key]
-        })
     }
 
     /** 
@@ -258,23 +250,11 @@ class Node {
         })
         // 双击事件
         group.dblclick(() => {
-            this.showTextEditBox()
+            this.mindMap.emit('node_dblclick', this)
         })
         return group
     }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 22:15:56 
-     * @Desc: 显示文本编辑框 
-     */
-    showTextEditBox() {
-        if (!this.text) {
-            return;
-        }
-        this.renderer.showEditTextBox(this, this.textNode.node.node.getBoundingClientRect())
-    }
-
     /** 
      * javascript comment 
      * @Author: 王林25 
@@ -334,10 +314,14 @@ class Node {
         fillNode.dx(0).dy(-10)
         this.style.iconBtn(node, fillNode)
         g.mouseover(() => {
-            g.css({ cursor: 'pointer' })
+            g.css({
+                cursor: 'pointer'
+            })
         })
         g.mouseout(() => {
-            g.css({ cursor: 'auto' })
+            g.css({
+                cursor: 'auto'
+            })
         })
         g.click(() => {
             this.expand = !this.expand

simple-mind-map/src/Render.js

@@ -1,9 +1,10 @@
 import merge from 'deepmerge'
 import LogicalStructure from './layouts/LogicalStructure'
-import { getStrWithBrFromHtml } from './Utils'
+import TextEdit from './TextEdit'
 
 // 布局列表
 const layouts = {
+    // 思维导图
     logicalStructure: LogicalStructure
 }
 
@@ -32,50 +33,13 @@ class Render {
         // 根节点
         this.root = null
         // 文本编辑框
-        this.textEditNode = null
-        // 文本编辑框是否显示
-        this.showTextEdit = false
+        this.textEdit = new TextEdit(this)
         // 布局
-        this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)({
-            mindMap: this.mindMap,
-            renderer: this,
-            renderTree: this.renderTree,
-            themeConfig: this.mindMap.themeConfig,
-            draw: this.mindMap.draw
-        })
-        // 绑定事件
-        this.bindEvent()
+        this.layout = new(layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this)
         // 注册命令
         this.registerCommands()
     }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:27:04 
-     * @Desc: 事件 
-     */
-    bindEvent() {
-        this.mindMap.on('draw_click', () => {
-            // 隐藏文本编辑框
-            this.hideEditTextBox()
-            // 清除激活状态
-            if (this.activeNodeList.length > 0) {
-                this.clearActive()
-                this.mindMap.render()
-                this.mindMap.emit('node_active', null, [])
-            }
-        })
-        this.mindMap.on('expand_btn_click', () => {
-            this.hideEditTextBox()
-        })
-        this.mindMap.on('before_node_active', () => {
-            this.hideEditTextBox()
-        })
-        this.mindMap.keyCommand.addShortcut('Enter', () => {
-            this.hideEditTextBox()
-        })
-    }
-
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 13:19:06 
@@ -206,51 +170,6 @@ class Render {
             node.data[key] = data[key]
         })
     }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 22:13:02 
-     * @Desc: 显示文本编辑框 
-     */
-    showEditTextBox(node, rect) {
-        if (!this.textEditNode) {
-            this.textEditNode = document.createElement('div')
-            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
-            this.textEditNode.setAttribute('contenteditable', true)
-            document.body.appendChild(this.textEditNode)
-        }
-        node.style.domText(this.textEditNode)
-        this.textEditNode.innerHTML = node.data.text.split(/\n/img).join('<br>')
-        this.textEditNode.style.minWidth = rect.width + 10 + 'px'
-        this.textEditNode.style.minHeight = rect.height + 6 + 'px'
-        this.textEditNode.style.left = rect.left + 'px'
-        this.textEditNode.style.top = rect.top + 'px'
-        this.textEditNode.style.display = 'block'
-        this.showTextEdit = true
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:48:16 
-     * @Desc: 隐藏文本编辑框 
-     */
-    hideEditTextBox() {
-        if (!this.showTextEdit) {
-            return
-        }
-        this.activeNodeList.forEach((node) => {
-            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
-            node.data.text = str
-            this.mindMap.render()
-        })
-        this.mindMap.emit('hide_text_edit', this.textEditNode, this.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
-    }
 }
 
 export default Render

simple-mind-map/src/TextEdit.js

@@ -0,0 +1,117 @@
+import {
+    getStrWithBrFromHtml
+} from './utils'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-06-19 11:11:28 
+ * @Desc: 节点文字编辑类 
+ */
+export default class TextEdit {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-06-19 11:22:57 
+     * @Desc: 构造函数 
+     */
+    constructor(renderer) {
+        this.mindMap = renderer.mindMap
+        // 文本编辑框
+        this.textEditNode = null
+        // 文本编辑框是否显示
+        this.showTextEdit = false
+        this.bindEvent()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:27:04 
+     * @Desc: 事件 
+     */
+    bindEvent() {
+        this.show = this.show.bind(this)
+        // 节点双击事件
+        this.mindMap.on('node_dblclick', this.show)
+        // 点击事件
+        this.mindMap.on('draw_click', () => {
+            // 隐藏文本编辑框
+            this.hideEditTextBox()
+            // 清除激活状态
+            if (this.activeNodeList.length > 0) {
+                this.clearActive()
+                this.mindMap.render()
+                this.mindMap.emit('node_active', null, [])
+            }
+        })
+        // 展开收缩按钮点击事件
+        this.mindMap.on('expand_btn_click', () => {
+            this.hideEditTextBox()
+        })
+        // 节点激活前事件
+        this.mindMap.on('before_node_active', () => {
+            this.hideEditTextBox()
+        })
+        // 注册回车快捷键
+        this.mindMap.keyCommand.addShortcut('Enter', () => {
+            this.hideEditTextBox()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:15:56 
+     * @Desc: 显示文本编辑框 
+     */
+    show(node) {
+        if (!node.text) {
+            return;
+        }
+        this.showEditTextBox(this, this.textNode.node.node.getBoundingClientRect())
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:13:02 
+     * @Desc: 显示文本编辑框 
+     */
+    showEditTextBox(node, rect) {
+        if (!this.textEditNode) {
+            this.textEditNode = document.createElement('div')
+            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
+            this.textEditNode.setAttribute('contenteditable', true)
+            document.body.appendChild(this.textEditNode)
+        }
+        node.style.domText(this.textEditNode)
+        this.textEditNode.innerHTML = node.data.text.split(/\n/img).join('<br>')
+        this.textEditNode.style.minWidth = rect.width + 10 + 'px'
+        this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+        this.textEditNode.style.left = rect.left + 'px'
+        this.textEditNode.style.top = rect.top + 'px'
+        this.textEditNode.style.display = 'block'
+        this.showTextEdit = true
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:48:16 
+     * @Desc: 隐藏文本编辑框 
+     */
+    hideEditTextBox() {
+        if (!this.showTextEdit) {
+            return
+        }
+        this.activeNodeList.forEach((node) => {
+            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+            node.data.text = str
+            this.mindMap.render()
+        })
+        this.mindMap.emit('hide_text_edit', this.textEditNode, this.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/layouts/Base.js

@@ -9,17 +9,17 @@ class Base {
      * @Date: 2021-04-12 22:25:16 
      * @Desc: 构造函数 
      */
-    constructor(opt) {
-        // 控制实例
-        this.mindMap = opt.mindMap
+    constructor(renderer) {
         // 渲染实例
-        this.renderer = opt.renderer
+        this.renderer = renderer
+        // 控制实例
+        this.mindMap = renderer.mindMap
         // 渲染树
-        this.renderTree = opt.renderTree
+        this.renderTree = renderer.renderTree
         // 主题配置
-        this.themeConfig = opt.themeConfig
+        this.themeConfig = this.mindMap.themeConfig
         // 绘图对象
-        this.draw = opt.draw
+        this.draw = this.mindMap.draw
         // 根节点
         this.root = null
     }

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

@@ -0,0 +1,186 @@
+import {
+    walk
+} from '../Utils'
+import Node from '../Node'
+import merge from 'deepmerge'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 鱼骨图
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.draw = this.mindMap.draw
+        // 渲染树
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        this.computed()
+        this.root.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 计算位置数据 
+     */
+    computed() {
+        // 计算节点的width、height
+        this.computedBaseValue()
+        // 计算节点的left、top
+        this.computedLeftTopValue()
+        // 调整节点top
+        // this.adjustTopValue()
+        // 调整节点left
+        // this.adjustLeftValue()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 计算节点的width、height 
+     */
+    computedBaseValue() {
+        walk(this.renderTree, null, (node, parent, isRoot, index, layerIndex) => {
+            // 设置width、height
+            let {
+                children,
+                ...props
+            } = node
+            let newNode = new Node({
+                ...props,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                layerIndex
+            })
+            // 计算节点的宽高
+            newNode.refreshSize()
+            // 计算节点的top
+            if (isRoot) {
+                newNode.isRoot = true
+                newNode.left = this.mindMap.width / 2
+                newNode.top = this.mindMap.height / 2
+                this.root = newNode
+            } else {
+                newNode.parent = parent._node
+                parent._node.addChildren(newNode)
+            }
+            node._node = newNode
+        }, (node) => {
+            // 遍历完子节点返回时
+        }, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 计算节点的left、top
+     */
+    computedLeftTopValue() {
+        let margin = Math.max(this.mindMap.opt.marginX, this.mindMap.opt.marginY)
+        walk(this.root, null, (node) => {
+            if (node.children && node.children.length) {
+                let rad = (360 / node.children.length) * (Math.PI / 180)
+                let totalRad = 0
+                node.children.forEach((item) => {
+                    let r = node.width / 2 + margin + item.width / 2
+                    item.left = node.left + r * Math.cos(totalRad)
+                    item.top = node.top + r * Math.sin(totalRad)
+                    totalRad += rad
+                })
+            }
+        }, null, true)
+        // return
+        walk(this.root, null, null, (node) => {
+            if (node.children && node.children.length) {
+                let minLeft = Infinity,
+                    minTop = Infinity,
+                    maxRight = -Infinity,
+                    maxBottom = -Infinity
+                node.children.concat([node]).forEach((item) => {
+                    if ((item.left - item.width / 2) < minLeft) {
+                        minLeft = item.left - item.width / 2
+                    }
+                    if ((item.top - item.width / 2) < minTop) {
+                        minTop = item.top - item.width / 2
+                    }
+                    if ((item.left + item.width / 2) > maxRight) {
+                        maxRight = item.left + item.width / 2
+                    }
+                    if ((item.top + item.width / 2) < maxBottom) {
+                        maxBottom = item.top + item.width / 2
+                    }
+                })
+                let width = Math.max(maxRight - minLeft, maxBottom - minTop)
+                let difference = width - node.width
+                this.update(node, difference)
+            }
+        }, true)
+    }
+    
+    update(node, difference) {
+        if (node.parent) {
+            // console.log(node.text, difference)
+            let rad = (360 / node.parent.children.length) * (Math.PI / 180)
+            let totalRad = 0
+            node.parent.children.forEach((item) => {
+                if (item === node) {
+                    item.left += difference * Math.cos(totalRad)
+                    item.top += difference * Math.sin(totalRad)
+                    if (node.children && node.children.length) {
+                        // this.updateChildren(node)
+                    }
+                }
+                totalRad += rad
+            })
+            
+            this.update(node.parent, difference)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点
+     */
+    updateChildren(node, difference) {
+        let margin = Math.max(this.mindMap.opt.marginX, this.mindMap.opt.marginY)
+        walk(node, null, (node) => {
+            if (node.children && node.children.length) {
+                let rad = (360 / node.children.length) * (Math.PI / 180)
+                let totalRad = 0
+                node.children.forEach((item) => {
+                    let r = node.width / 2 + margin + item.width / 2
+                    item.left = node.left + r * Math.cos(totalRad)
+                    item.top = node.top + r * Math.sin(totalRad)
+                    totalRad += rad
+                })
+            }
+        }, null, true)
+    }
+}
+
+export default Render

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

@@ -0,0 +1,270 @@
+import {
+    walk
+} from '../Utils'
+import Node from '../Node'
+import merge from 'deepmerge'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 目录组织图
+ * 思路：第一轮只计算节点的宽高，以及某个节点的所有子节点所占的高度之和，以及该节点里所有子节点中宽度最宽是多少、第二轮计算节点的left和top，需要区分二级节点和其他节点，二级节点top相同，一行依次从做向右排开，其他节点的left相同，一列从上往下依次排开
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.draw = this.mindMap.draw
+        // 渲染树
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        this.computed()
+        this.root.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 计算位置数据 
+     */
+    computed() {
+        // 计算节点的width、height
+        this.computedBaseValue()
+        // 计算节点的left、top
+        this.computedLeftTopValue()
+        // 调整节点top
+        this.adjustTopValue()
+        // 调整节点left
+        this.adjustLeftValue()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 计算节点的width、height 
+     */
+    computedBaseValue() {
+        walk(this.renderTree, null, (node, parent, isRoot, index) => {
+            // 设置width、height
+            let {
+                children,
+                ...props
+            } = node
+            let newNode = new Node({
+                ...props,
+                mindMap: this.mindMap,
+                draw: this.draw
+            })
+            // 计算节点的宽高
+            newNode.refreshSize()
+            // 计算节点的top
+            if (isRoot) {
+                newNode.isRoot = true
+                newNode.left = (this.mindMap.width - newNode.width) / 2
+                newNode.top = (this.mindMap.height - newNode.height) / 2
+                this.root = newNode
+            } else {
+                newNode.parent = parent._node
+                parent._node.addChildren(newNode)
+            }
+            node._node = newNode
+        }, (node) => {
+            // 遍历完子节点返回时
+            // 计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+            let len = node._node.children.length
+            if (node._node.isRoot) {
+                node._node.childrenAreaWidth = len ? node._node.children.reduce((h, cur) => {
+                    return h + cur.width
+                }, 0) + (len + 1) * this.mindMap.opt.marginX : 0
+            }
+            node._node.childrenAreaHeight = len ? node._node.children.reduce((h, cur) => {
+                return h + cur.height
+            }, 0) + (len + 1) * this.mindMap.opt.marginY : 0
+        }, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 计算节点的left、top
+     */
+    computedLeftTopValue() {
+        walk(this.root, null, (node) => {
+            if (node.children && node.children.length) {
+                if (node.isRoot) {
+                    let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                    let totalLeft = left + this.mindMap.opt.marginX
+                    node.children.forEach((cur) => {
+                        // left
+                        cur.left = totalLeft
+                        totalLeft += cur.width + this.mindMap.opt.marginX
+                        // top
+                        cur.top = node.top + node.height + this.mindMap.opt.marginY
+                    })
+                } else {
+                    let totalTop = node.top + node.height + this.mindMap.opt.marginY
+                    node.children.forEach((cur) => {
+                        cur.left = node.left + node.width / 5 + this.mindMap.opt.marginX
+                        cur.top = totalTop
+                        totalTop += cur.height + this.mindMap.opt.marginY
+                    })
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 17:07:29 
+     * @Desc: 调整节点left 
+     */
+    adjustLeftValue() {
+        walk(this.root, null, (node) => {
+            if (node.parent && node.parent.isRoot) {
+                let childrenAreaWidth = this.getNodeWidth(node)
+                let difference = childrenAreaWidth - node.width
+                if (difference > 0) {
+                    this.updateBrothersLeftValue(node, difference / 2)
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:55:03 
+     * @Desc: 计算节点的宽度，包括子节点
+     */
+    getNodeWidth(node) {
+        let widthArr = []
+        let loop = (node, width) => {
+            if (node.children.length) {
+                width += node.width / 5 + this.mindMap.opt.marginX
+                node.children.forEach((item) => {
+                    loop(item, width)
+                })
+            } else {
+                width += node.width
+                widthArr.push(width)
+            }
+        }
+        loop(node, 0)
+        return Math.max(...widthArr)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:21:46 
+     * @Desc: 调整兄弟节点的left 
+     */
+    updateBrothersLeftValue(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index > index) {
+                    _offset = addWidth
+                } else {
+                    _offset = -addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersLeftValue(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top，该节点之后的节点都往下进行偏移
+     */
+    adjustTopValue() {
+        let marginY = this.mindMap.opt.marginY
+        walk(this.root, null, (node) => {
+            if (!node.isRoot && !node.parent.isRoot) {
+                // 判断子节点的areaHeight是否大于该节点自身，大于则需要调整位置
+                if (node.children && node.children.length > 0) {
+                    let difference = node.childrenAreaHeight - marginY
+                    this.updateBrothersTopValue(node, difference)
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothersTopValue(node, addHeight) {
+        if (node.parent && !node.parent.isRoot) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index > index) {
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersTopValue(node.parent, addHeight)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
+        })
+    }
+}
+
+export default Render

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

@@ -0,0 +1,376 @@
+import {
+    walk
+} from '../Utils'
+import Node from '../Node'
+import merge from 'deepmerge'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 鱼骨图
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.draw = this.mindMap.draw
+        // 渲染树
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        this.computed()
+        this.root.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 计算位置数据 
+     */
+    computed() {
+        // 计算节点的width、height
+        this.computedBaseValue()
+        // 计算节点的left、top
+        this.computedLeftTopValue()
+        // 调整节点top
+        // this.adjustTopValue()
+        // 调整节点left
+        // this.adjustLeftValue()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 计算节点的width、height 
+     */
+    computedBaseValue() {
+        walk(this.renderTree, null, (node, parent, isRoot, index, layerIndex) => {
+            // 生长方向
+            let dir = ''
+            if (isRoot) {
+                dir = ''
+            } else if (parent._node.isRoot) {
+                dir = index % 2 === 0 ? 'up' : 'down'
+            } else {
+                dir = parent._node.dir
+            }
+            // 设置width、height
+            let {
+                children,
+                ...props
+            } = node
+            let newNode = new Node({
+                ...props,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                dir,
+                layerIndex
+            })
+            // 计算节点的宽高
+            newNode.refreshSize()
+            // 计算节点的top
+            if (isRoot) {
+                newNode.isRoot = true
+                newNode.left = (this.mindMap.width - newNode.width) / 2
+                newNode.top = (this.mindMap.height - newNode.height) / 2
+                this.root = newNode
+            } else {
+                newNode.parent = parent._node
+                parent._node.addChildren(newNode)
+            }
+            node._node = newNode
+        }, (node) => {
+            // 遍历完子节点返回时
+            let len = node._node.children.length
+            node._node.childrenAreaHeight = len ? node._node.children.reduce((h, cur) => {
+                return h + cur.height
+            }, 0) + (len + 1) * this.mindMap.opt.marginY : 0
+        }, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 计算节点的left、top
+     */
+    computedLeftTopValue() {
+        walk(this.root, null, (node) => {
+            // 二级节点
+            if (node.isRoot && node.children && node.children.length) {
+                let totalLeft = node.left + node.width + this.mindMap.opt.marginX
+                node.children.forEach((item) => {
+                    item.left = totalLeft
+                    item.top = node.top + node.height / 2 - this.mindMap.opt.marginY - item.height
+                    totalLeft += item.width + this.mindMap.opt.marginX
+                    this.computedThirdLevelLeftTopValue(item)
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-13 09:33:04 
+     * @Desc: 计算三级节点 
+     */
+    computedThirdLevelLeftTopValue(node) {
+        if (node.children && node.children.length > 0) {
+            let totalLeft = node.left
+            let totalTop = node.top - this.mindMap.opt.marginY
+            node.children.forEach((item) => {
+                let h = node.height + this.mindMap.opt.marginY
+                let w = h / Math.tan(70)
+                item.left = totalLeft + w
+                totalLeft += w
+                item.top = totalTop - item.height
+                totalTop -= this.mindMap.opt.marginY + item.height
+                this.computedThirdAfterLevelLeftTopValue(item)
+            })
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-13 09:55:54 
+     * @Desc: 计算三级以后的节点 
+     */
+    computedThirdAfterLevelLeftTopValue(root) {
+        let marginY = this.mindMap.opt.marginY
+        let marginX = this.mindMap.opt.marginX
+        // 计算left、top
+        walk(root, null, (node) => {
+            if (node.children && node.children.length) {
+                let totalTop = node.top + node.height + marginY
+                node.children.forEach((cur) => {
+                    cur.left = node.left + node.width / 5 + marginX
+                    cur.top = totalTop
+                    totalTop += cur.height + marginY
+                })
+            }
+        }, null, true)
+        // 调整top
+        const updateBrothersTopValue = (node, addHeight) => {
+            if (node.parent) {
+                let childrenList = node.parent.children
+                let index = childrenList.findIndex((item) => {
+                    return item === node
+                })
+                childrenList.forEach((item, _index) => {
+                    let _offset = 0
+                    if (_index > index) {
+                        _offset = addHeight
+                    }
+                    item.top += _offset
+                    // 同步更新子节点的位置
+                    if (item.children && item.children.length) {
+                        this.updateChildren(item.children, 'top', _offset)
+                    }
+                })
+                // 更新父节点的位置
+                updateBrothersTopValue(node.parent, addHeight)
+            }
+        }
+        walk(root, null, (node) => {
+            // 判断子节点的areaHeight是否大于该节点自身，大于则需要调整位置
+            if (node.children && node.children.length > 0) {
+                let difference = node.childrenAreaHeight - marginY
+                updateBrothersTopValue(node, difference)
+            }
+        }, null, true)
+        // 调整left
+        const updateBrothersLeftValue = (node, w, h) => {
+            if (node.parent && node.parent.layerIndex > 0) {
+                let childrenList = node.parent.children
+                let index = childrenList.findIndex((item) => {
+                    return item === node
+                })
+                childrenList.forEach((item, _index) => {
+                    let _w = 0
+                    let _h = 0
+                    if (_index >= index) {
+                        _w = w
+                        _h = -h
+                    }
+                    console.log(item.text, _w, _h)
+                    item.left += _w
+                    item.top += _h
+                    // 同步更新子节点的位置
+                    if (item.children && item.children.length) {
+                        this.updateChildren(item.children, 'left', _w)
+                        this.updateChildren(item.children, 'left', _h)
+                    }
+                })
+                // 更新父节点的位置
+                updateBrothersLeftValue(node.parent, w, h)
+            }
+        }
+        walk(root, null, (node) => {
+            if (node.layerIndex > 1) {
+                let h = node.childrenAreaHeight - marginY
+                if (h > 0) {
+                    let w = h / Math.tan(70)
+                    console.log(node.text, w, h)
+                    // let childrenAreaWidth = getNodeWidth(node)
+                    // let differenceX = childrenAreaWidth - node.width
+                    // updateBrothersLeftValue(node, w, h)
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 17:07:29 
+     * @Desc: 调整节点left 
+     */
+    adjustLeftValue() {
+        walk(this.root, null, (node) => {
+            if (node.parent && node.parent.isRoot) {
+                let childrenAreaWidth = this.getNodeWidth(node)
+                let difference = childrenAreaWidth - node.width
+                if (difference > 0) {
+                    this.updateBrothersLeftValue(node, difference / 2)
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:55:03 
+     * @Desc: 计算节点的宽度，包括子节点
+     */
+    getNodeWidth(node) {
+        let widthArr = []
+        let loop = (node, width) => {
+            if (node.children.length) {
+                width += node.width / 5 + this.mindMap.opt.marginX
+                node.children.forEach((item) => {
+                    loop(item, width)
+                })
+            } else {
+                width += node.width
+                widthArr.push(width)
+            }
+        }
+        loop(node, 0)
+        return Math.max(...widthArr)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:21:46 
+     * @Desc: 调整兄弟节点的left 
+     */
+    updateBrothersLeftValue(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index > index) {
+                    _offset = addWidth
+                } else {
+                    _offset = -addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersLeftValue(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top，该节点之后的节点都往下进行偏移
+     */
+    adjustTopValue() {
+        let marginY = this.mindMap.opt.marginY
+        walk(this.root, null, (node) => {
+            if (!node.isRoot && !node.parent.isRoot) {
+                // 判断子节点的areaHeight是否大于该节点自身，大于则需要调整位置
+                if (node.children && node.children.length > 0) {
+                    let difference = node.childrenAreaHeight - marginY
+                    this.updateBrothersTopValue(node, difference)
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothersTopValue(node, addHeight) {
+        if (node.parent && !node.parent.isRoot) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index > index) {
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersTopValue(node.parent, addHeight)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
+        })
+    }
+}
+
+export default Render

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

@@ -1,7 +1,7 @@
 import Base from './Base';
 import {
     walk
-} from '../Utils'
+} from '../utils'
 import Node from '../Node'
 
 /** 
@@ -45,14 +45,10 @@ class LogicalStructure extends Base {
     computedBaseValue() {
         walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
             // 遍历子节点前设置left、width、height
-            if (!node.data) {
-                node.data = {}
-            }
             // 创建节点
             let newNode = new Node({
                 uid: this.mindMap.uid++,
-                originData: node,
-                data: node.data,
+                data: node,
                 renderer: this.renderer,
                 mindMap: this.mindMap,
                 draw: this.draw,

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

@@ -0,0 +1,195 @@
+import {
+    walk
+} from '../Utils'
+import Node from '../Node'
+import merge from 'deepmerge'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 思维导图
+ * 思路：在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.draw = this.mindMap.draw
+        // 渲染树
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        this.computed()
+        this.root.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 计算位置数据 
+     */
+    computed() {
+        // 计算节点的left、width、height
+        this.computedBaseValue()
+        // 计算节点的top
+        this.computedTopValue()
+        // 调整节点top
+        this.adjustTopValue()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 计算节点的left、width、height 
+     */
+    computedBaseValue() {
+        walk(this.renderTree, null, (node, parent, isRoot, index) => {
+            // 生长方向
+            let dir = ''
+            if (isRoot) {
+                dir = ''
+            } else if (parent._node.isRoot) {
+                dir = index % 2 === 0 ? 'right' : 'left'
+            } else {
+                dir = parent._node.dir
+            }
+            // 设置left、width、height
+            let {
+                children,
+                ...props
+            } = node
+            let newNode = new Node({
+                ...props,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                dir
+            })
+            // 计算节点的宽高
+            newNode.refreshSize()
+            // 计算节点的left
+            if (isRoot) {
+                newNode.isRoot = true
+                newNode.left = (this.mindMap.width - newNode.width) / 2
+                newNode.top = (this.mindMap.height - newNode.height) / 2
+                this.root = newNode
+            } else {
+                newNode.left = dir === 'right' ? parent._node.left + parent._node.width + this.mindMap.opt.marginX : parent._node.left - this.mindMap.opt.marginX - newNode.width
+                newNode.parent = parent._node
+                parent._node.addChildren(newNode)
+            }
+            node._node = newNode
+        }, (node) => {
+            // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+            let len = node._node.children.length
+            node._node.childrenAreaHeight = len ? node._node.children.reduce((h, cur) => {
+                return h + cur.height
+            }, 0) + (len + 1) * this.mindMap.opt.marginY : 0
+        }, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 计算节点的top 
+     */
+    computedTopValue() {
+        walk(this.root, null, (node) => {
+            if (node.children && node.children.length) {
+                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+                let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
+                let totalTop = top + this.mindMap.opt.marginY
+                node.children.forEach((cur) => {
+                    cur.top = totalTop
+                    totalTop += cur.height + this.mindMap.opt.marginY
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top 
+     */
+    adjustTopValue() {
+        let margin = this.mindMap.opt.marginY * 2
+        walk(this.root, null, (node) => {
+            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+            let difference = node.childrenAreaHeight - margin - node.height
+            if (difference > 0) {
+                this.updateBrothers(node, difference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothers(node, addHeight) {
+        if (node.parent) {
+            let childrenList = node.parent.children.filter((item) => {
+                return item.dir === node.dir
+            })
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index < index) {
+                    _offset = -addHeight
+                } else if (_index > index) {
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, addHeight)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
+        })
+    }
+
+
+}
+
+export default Render

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

@@ -0,0 +1,183 @@
+import {
+    walk
+} from '../Utils'
+import Node from '../Node'
+import merge from 'deepmerge'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 组织结构图
+ * 思路：和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.draw = this.mindMap.draw
+        // 渲染树
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        this.computed()
+        this.root.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 计算位置数据 
+     */
+    computed() {
+        // 计算节点的top、width、height
+        this.computedBaseValue()
+        // 计算节点的left
+        this.computedLeftValue()
+        // 调整节点left
+        this.adjustLeftValue()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 计算节点的top、width、height 
+     */
+    computedBaseValue() {
+        walk(this.renderTree, null, (node, parent, isRoot, index) => {
+            // 设置top、width、height
+            let {
+                children,
+                ...props
+            } = node
+            let newNode = new Node({
+                ...props,
+                mindMap: this.mindMap,
+                draw: this.draw
+            })
+            // 计算节点的宽高
+            newNode.refreshSize()
+            // 计算节点的top
+            if (isRoot) {
+                newNode.isRoot = true
+                newNode.left = (this.mindMap.width - newNode.width) / 2
+                newNode.top = (this.mindMap.height - newNode.height) / 2
+                this.root = newNode
+            } else {
+                newNode.top = parent._node.top + parent._node.height + this.mindMap.opt.marginY
+                newNode.parent = parent._node
+                parent._node.addChildren(newNode)
+            }
+            node._node = newNode
+        }, (node) => {
+            // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
+            let len = node._node.children.length
+            node._node.childrenAreaWidth = len ? node._node.children.reduce((h, cur) => {
+                return h + cur.width
+            }, 0) + (len + 1) * this.mindMap.opt.marginX : 0
+        }, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 计算节点的left
+     */
+    computedLeftValue() {
+        walk(this.root, null, (node) => {
+            if (node.children && node.children.length) {
+                // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
+                let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                let totalLeft = left + this.mindMap.opt.marginX
+                node.children.forEach((cur) => {
+                    cur.left = totalLeft
+                    totalLeft += cur.width + this.mindMap.opt.marginX
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点left
+     */
+    adjustLeftValue() {
+        let margin = this.mindMap.opt.marginX * 2
+        walk(this.root, null, (node) => {
+            // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
+            let difference = node.childrenAreaWidth - margin - node.width
+            if (difference > 0) {
+                this.updateBrothers(node, difference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的left
+     */
+    updateBrothers(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index < index) {
+                    _offset = -addWidth
+                } else if (_index > index) {
+                    _offset = addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
+        })
+    }
+
+
+}
+
+export default Render

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

@@ -0,0 +1,11 @@
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-12 17:21:04 
+ * @Desc: 基类 
+ */
+class Structure {
+
+}
+
+export default Structure

src/pages/Index/Index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="container"></div>
-</template>
-
-<script>
-export default {
-  name: "Index"
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="less" scoped>
-</style>

src/store.js

@@ -1,68 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import exampleData from './package/mind-map/example/exampleData';
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-    state: {
-        userInfo: null,// 用户信息
-        mindMapData: null// 思维导图数据
-    },
-    mutations: {
-        /** 
-         * @Author: 王林 
-         * @Date: 2020-11-28 15:32:32 
-         * @Desc: 设置用户信息 
-         */
-        setUserInfo(state, userInfo) {
-            state.userInfo = userInfo
-        },
-
-        /** 
-         * @Author: 王林 
-         * @Date: 2021-04-10 14:50:01 
-         * @Desc: 设置思维导图数据 
-         */
-        setMindMapData(state, data) {
-            state.mindMapData = data
-        }
-    },
-    actions: {
-        /** 
-         * @Author: 王林 
-         * @Date: 2020-11-28 15:28:03 
-         * @Desc: 获取用户信息 
-         */
-        async getUserInfo(ctx) {
-            try {
-                let { data } = await api.getUserInfo()
-                ctx.commit('setUserInfo', data.data)
-            } catch (error) {
-                console.log(error)
-            }
-        },
-
-        /** 
-         * @Author: 王林 
-         * @Date: 2021-04-10 14:50:40 
-         * @Desc: 获取思维导图数据 
-         */
-        async getUserMindMapData(ctx) {
-            try {
-                let { data } = {
-                    data: {
-                        data: {
-                            mindMapData: exampleData
-                        }
-                    }
-                }
-                ctx.commit('setMindMapData', data.data)
-            } catch (error) {
-                console.log(error)
-            }
-        }
-    }
-})
-
-export default store

web/package.json

@@ -8,9 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@svgdotjs/svg.js": "^3.0.16",
     "core-js": "^3.6.5",
-    "deepmerge": "^1.5.2",
     "element-ui": "^2.15.1",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1",

web/public/index.html

@@ -10,8 +10,6 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <script src="http://lxqnsys.com/js/polyfillB.js"></script>
-    <script src="http://lxqnsys.com/js/aliyun-oss-sdk-6.0.1.min.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

web/src/components/ImgUpload/index.vue

@@ -31,8 +31,6 @@
 </template>
 
 <script>
-import ossUpLoader from "@/utils/oss";
-
 export default {
   name: "ImgUpload",
   data() {
@@ -85,23 +83,7 @@ export default {
      */
     async uploadImg(file) {
       this.loading = true;
-      ossUpLoader.uploadFile(
-        file,
-        () => {},
-        (e) => {
-          this.previewSrc = e[0].res.requestUrls[0]
-          this.loading = false;
-        },
-        (e) => {
-          if (e.length > 0) {
-            this.loading = false;
-            this.$message({
-              message: "上传失败",
-              type: "warning",
-            });
-          }
-        }
-      );
+    
     },
 
     /**

web/src/pages/Edit/components/Edit.vue

@@ -3,19 +3,23 @@
     <div class="mindMapContainer" ref="mindMapContainer"></div>
     <Outline></Outline>
     <Style></Style>
-    <BaseStyle :data="mindMapData" :mindMap="mindMap" @change="changeThemeConfig"></BaseStyle>
+    <BaseStyle
+      :data="mindMapData"
+      :mindMap="mindMap"
+      @change="changeThemeConfig"
+    ></BaseStyle>
   </div>
 </template>
 
 <script>
-import MindMap from "@/package/mind-map";
-import Outline from "./Outline";
-import Style from "./Style";
-import BaseStyle from "./BaseStyle";
-import exampleData from '@/package/mind-map/example/exampleData';
+import MindMap from 'simple-mind-map'
+import Outline from './Outline'
+import Style from './Style'
+import BaseStyle from './BaseStyle'
+import exampleData from 'simple-mind-map/example/exampleData'
 
 export default {
-  name: "Edit",
+  name: 'Edit',
   components: {
     Outline,
     Style,
@@ -24,13 +28,13 @@ export default {
   data() {
     return {
       mindMap: null,
-      mindMapData: exampleData
-    };
+      mindMapData: exampleData,
+    }
   },
   created() {},
   mounted() {
-    this.init();
-    this.$bus.$on("execCommand", this.execCommand);
+    this.init()
+    this.$bus.$on('execCommand', this.execCommand)
   },
   methods: {
     /**
@@ -39,20 +43,20 @@ export default {
      * @Desc: 初始化
      */
     init() {
-      let { root, layout, theme } = this.mindMapData;
+      let { root, layout, theme } = this.mindMapData
       this.mindMap = new MindMap({
         el: this.$refs.mindMapContainer,
         data: root,
         layout: layout,
         theme: theme.template,
         themeConfig: theme.config,
-      });
-      this.mindMap.on("node_active", (...args) => {
-        this.$bus.$emit("node_active", ...args);
-      });
-      this.mindMap.on("data_change", (...args) => {
-        this.$bus.$emit("data_change", ...args);
-      });
+      })
+      this.mindMap.on('node_active', (...args) => {
+        this.$bus.$emit('node_active', ...args)
+      })
+      this.mindMap.on('data_change', (...args) => {
+        this.$bus.$emit('data_change', ...args)
+      })
     },
 
     /**
@@ -79,10 +83,10 @@ export default {
      * @Desc: 执行命令
      */
     execCommand(...args) {
-      this.mindMap.execCommand(...args);
+      this.mindMap.execCommand(...args)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

web/src/router.js

@@ -1,14 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-
-import IndexPage from '@/pages/Index/Index'
 import EditPage from '@/pages/Edit/Index'
 
 Vue.use(VueRouter)
 
 const routes = [
-    { path: '/', name: 'Index', component: IndexPage },
-    { path: '/edit/:id', name: 'Edit', component: EditPage }
+    { path: '/', name: 'Edit', component: EditPage }
 ]
 
 const router = new VueRouter({

web/src/store.js

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import exampleData from 'simple-mind-map/example/exampleData';
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+    state: {
+        mindMapData: null // 思维导图数据
+    },
+    mutations: {
+        /** 
+         * @Author: 王林 
+         * @Date: 2021-04-10 14:50:01 
+         * @Desc: 设置思维导图数据 
+         */
+        setMindMapData(state, data) {
+            state.mindMapData = data
+        }
+    },
+    actions: {
+        /** 
+         * @Author: 王林 
+         * @Date: 2021-04-10 14:50:40 
+         * @Desc: 设置初始思维导图数据 
+         */
+        getUserMindMapData(ctx) {
+            try {
+                let {
+                    data
+                } = {
+                    data: {
+                        data: {
+                            mindMapData: exampleData
+                        }
+                    }
+                }
+                ctx.commit('setMindMapData', data.data)
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+})
+
+export default store