重构
This commit is contained in:
wanglin2
parent
2a47fd0375
commit
a06cb2e031
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +1,2 @@
|
|||||||
node_modules
|
node_modules
|
||||||
oss.js
|
package-lock.json
|
||||||
37
README.md
37
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
|
||||||
|
```
|
||||||
BIN
docs/assets/swdt.jpg
Normal file
BIN
docs/assets/swdt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
93
docs/web思维导图实现的技术点分析.md
Normal file
93
docs/web思维导图实现的技术点分析.md
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
|
||||||
|
|
||||||
|
# 简介
|
||||||
|
|
||||||
|
思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，百度一下，整页都是广告可供选择，此外也有一些可以用来帮助快速实现的`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
|
||||||
|
|
||||||
|
# 其他几种变种结构
|
||||||
|
|
||||||
|
逻辑结构图、鱼骨图、思维导图、组织结构图、目录组织图
|
||||||
|
|
||||||
@ -1,174 +1,185 @@
|
|||||||
import View from './src/View'
|
import View from './src/View'
|
||||||
import Event from './src/Event'
|
import Event from './src/Event'
|
||||||
import Render from './src/Render'
|
import Render from './src/Render'
|
||||||
import merge from 'deepmerge'
|
import merge from 'deepmerge'
|
||||||
import theme from './src/themes'
|
import theme from './src/themes'
|
||||||
import Style from './src/Style'
|
import Style from './src/Style'
|
||||||
import KeyCommand from './src/KeyCommand'
|
import KeyCommand from './src/KeyCommand'
|
||||||
import Command from './src/Command';
|
import Command from './src/Command';
|
||||||
import { SVG } from '@svgdotjs/svg.js'
|
import {
|
||||||
|
SVG
|
||||||
const defaultOpt = {
|
} from '@svgdotjs/svg.js'
|
||||||
// 布局
|
|
||||||
layout: 'logicalStructure',
|
// 默认选项
|
||||||
// 放大缩小的增量比例，即step = scaleRatio * width|height
|
const defaultOpt = {
|
||||||
scaleRatio: 0.1,
|
// 布局
|
||||||
// 主题
|
layout: 'logicalStructure',
|
||||||
theme: 'default',// 内置主题：default（默认主题）
|
// 主题
|
||||||
// 主题配置，会和所选择的主题进行合并
|
theme: 'default', // 内置主题：default（默认主题）
|
||||||
themeConfig: {}
|
// 主题配置，会和所选择的主题进行合并
|
||||||
}
|
themeConfig: {},
|
||||||
|
// 放大缩小的增量比例，即step = scaleRatio * width|height
|
||||||
/**
|
scaleRatio: 0.1
|
||||||
* javascript comment
|
}
|
||||||
* @Author: 王林25
|
|
||||||
* @Date: 2021-04-06 11:18:47
|
/**
|
||||||
* @Desc: 思维导图
|
* javascript comment
|
||||||
*/
|
* @Author: 王林25
|
||||||
class MindMap {
|
* @Date: 2021-04-06 11:18:47
|
||||||
/**
|
* @Desc: 思维导图
|
||||||
* javascript comment
|
*/
|
||||||
* @Author: 王林25
|
class MindMap {
|
||||||
* @Date: 2021-04-06 11:19:01
|
/**
|
||||||
* @Desc: 构造函数
|
* javascript comment
|
||||||
*/
|
* @Author: 王林25
|
||||||
constructor(opt = {}) {
|
* @Date: 2021-04-06 11:19:01
|
||||||
this.opt = merge(defaultOpt, opt)
|
* @Desc: 构造函数
|
||||||
// 容器元素
|
*/
|
||||||
this.el = this.opt.el
|
constructor(opt = {}) {
|
||||||
let {
|
// 合并选项
|
||||||
width,
|
this.opt = merge(defaultOpt, opt)
|
||||||
height
|
|
||||||
} = this.el.getBoundingClientRect()
|
// 容器元素
|
||||||
// 画布宽高
|
this.el = this.opt.el
|
||||||
this.width = width
|
let {
|
||||||
this.height = height
|
width,
|
||||||
// 画笔
|
height
|
||||||
this.draw = SVG().addTo(this.el).size(width, height)
|
} = this.el.getBoundingClientRect()
|
||||||
// 节点id
|
|
||||||
this.uid = 0
|
// 画布宽高
|
||||||
|
this.width = width
|
||||||
// 主题
|
this.height = height
|
||||||
this.initTheme()
|
|
||||||
|
// 画笔
|
||||||
// 事件类
|
this.draw = SVG().addTo(this.el).size(width, height)
|
||||||
this.event = new Event({
|
|
||||||
mindMap: this
|
// 节点id
|
||||||
})
|
this.uid = 0
|
||||||
|
|
||||||
// 按键类
|
// 初始化主题
|
||||||
this.keyCommand = new KeyCommand({
|
this.initTheme()
|
||||||
mindMap: this
|
|
||||||
})
|
// 事件类
|
||||||
|
this.event = new Event({
|
||||||
// 命令类
|
mindMap: this
|
||||||
this.command = new Command({
|
})
|
||||||
mindMap: this
|
|
||||||
})
|
// 按键类
|
||||||
|
this.keyCommand = new KeyCommand({
|
||||||
// 渲染类
|
mindMap: this
|
||||||
this.renderer = new Render({
|
})
|
||||||
mindMap: this
|
|
||||||
})
|
// 命令类
|
||||||
|
this.command = new Command({
|
||||||
// 视图操作类
|
mindMap: this
|
||||||
this.view = new View({
|
})
|
||||||
mindMap: this,
|
|
||||||
draw: this.draw
|
// 渲染类
|
||||||
})
|
this.renderer = new Render({
|
||||||
|
mindMap: this
|
||||||
this.render()
|
})
|
||||||
setTimeout(() => {
|
|
||||||
this.command.addHistory()
|
// 视图操作类
|
||||||
}, 0);
|
this.view = new View({
|
||||||
}
|
mindMap: this,
|
||||||
|
draw: this.draw
|
||||||
/**
|
})
|
||||||
* @Author: 王林
|
|
||||||
* @Date: 2021-04-24 13:25:50
|
// 初始渲染
|
||||||
* @Desc: 监听事件
|
this.renderer.render()
|
||||||
*/
|
setTimeout(() => {
|
||||||
on(event, fn) {
|
this.command.addHistory()
|
||||||
this.event.on(event, fn)
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* javascript comment
|
||||||
* @Date: 2021-04-24 13:51:35
|
* @Author: 王林25
|
||||||
* @Desc: 触发事件
|
* @Date: 2021-04-06 18:47:29
|
||||||
*/
|
* @Desc: 渲染
|
||||||
emit(event, ...args) {
|
*/
|
||||||
this.event.emit(event, ...args)
|
render() {
|
||||||
}
|
this.draw.clear()
|
||||||
|
this.initTheme()
|
||||||
/**
|
this.renderer.render()
|
||||||
* @Author: 王林
|
}
|
||||||
* @Date: 2021-04-24 13:53:54
|
|
||||||
* @Desc: 解绑事件
|
/**
|
||||||
*/
|
* @Author: 王林
|
||||||
off(event, fn) {
|
* @Date: 2021-04-24 13:25:50
|
||||||
this.event.off(event, fn)
|
* @Desc: 监听事件
|
||||||
}
|
*/
|
||||||
|
on(event, fn) {
|
||||||
/**
|
this.event.on(event, fn)
|
||||||
* @Author: 王林
|
}
|
||||||
* @Date: 2021-05-05 13:32:43
|
|
||||||
* @Desc: 设置主题
|
/**
|
||||||
*/
|
* @Author: 王林
|
||||||
initTheme() {
|
* @Date: 2021-04-24 13:51:35
|
||||||
this.themeConfig = merge(this.opt.theme && theme[this.opt.theme] ? theme[this.opt.theme] : theme.default, this.opt.themeConfig)
|
* @Desc: 触发事件
|
||||||
Style.setBackgroundStyle(this.el, this.themeConfig)
|
*/
|
||||||
}
|
emit(event, ...args) {
|
||||||
|
this.event.emit(event, ...args)
|
||||||
/**
|
}
|
||||||
* @Author: 王林
|
|
||||||
* @Date: 2021-05-05 13:52:08
|
/**
|
||||||
* @Desc: 设置主题
|
* @Author: 王林
|
||||||
*/
|
* @Date: 2021-04-24 13:53:54
|
||||||
setTheme(theme) {
|
* @Desc: 解绑事件
|
||||||
this.opt.theme = theme
|
*/
|
||||||
this.render()
|
off(event, fn) {
|
||||||
}
|
this.event.off(event, fn)
|
||||||
|
}
|
||||||
/**
|
|
||||||
* @Author: 王林
|
/**
|
||||||
* @Date: 2021-05-05 13:50:17
|
* @Author: 王林
|
||||||
* @Desc: 设置主题配置
|
* @Date: 2021-05-05 13:32:43
|
||||||
*/
|
* @Desc: 设置主题
|
||||||
setThemeConfig(config) {
|
*/
|
||||||
this.opt.themeConfig = config
|
initTheme() {
|
||||||
this.render()
|
// 合并主题配置
|
||||||
}
|
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)
|
||||||
* @Author: 王林
|
}
|
||||||
* @Date: 2021-05-05 14:01:29
|
|
||||||
* @Desc: 获取某个主题配置值
|
/**
|
||||||
*/
|
* @Author: 王林
|
||||||
getThemeConfig(prop) {
|
* @Date: 2021-05-05 13:52:08
|
||||||
return prop === undefined ? this.themeConfig : this.themeConfig[prop]
|
* @Desc: 设置主题
|
||||||
}
|
*/
|
||||||
|
setTheme(theme) {
|
||||||
/**
|
this.opt.theme = theme
|
||||||
* javascript comment
|
this.render()
|
||||||
* @Author: 王林25
|
}
|
||||||
* @Date: 2021-04-06 18:47:29
|
|
||||||
* @Desc: 渲染节点
|
/**
|
||||||
*/
|
* @Author: 王林
|
||||||
render() {
|
* @Date: 2021-05-05 13:50:17
|
||||||
this.draw.clear()
|
* @Desc: 设置主题配置
|
||||||
this.initTheme()
|
*/
|
||||||
this.renderer.render()
|
setThemeConfig(config) {
|
||||||
}
|
this.opt.themeConfig = config
|
||||||
|
this.render()
|
||||||
/**
|
}
|
||||||
* @Author: 王林
|
|
||||||
* @Date: 2021-05-04 13:01:00
|
/**
|
||||||
* @Desc: 执行命令
|
* @Author: 王林
|
||||||
*/
|
* @Date: 2021-05-05 14:01:29
|
||||||
execCommand(...args) {
|
* @Desc: 获取某个主题配置值
|
||||||
this.command.exec(...args)
|
*/
|
||||||
}
|
getThemeConfig(prop) {
|
||||||
}
|
return prop === undefined ? this.themeConfig : this.themeConfig[prop]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Author: 王林
|
||||||
|
* @Date: 2021-05-04 13:01:00
|
||||||
|
* @Desc: 执行命令
|
||||||
|
*/
|
||||||
|
execCommand(...args) {
|
||||||
|
this.command.exec(...args)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default MindMap
|
export default MindMap
|
||||||
11
simple-mind-map/package.json
Normal file
11
simple-mind-map/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { copyRenderTree, simpleDeepClone } from './Utils';
|
import { copyRenderTree, simpleDeepClone } from './utils';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
@ -1,149 +1,149 @@
|
|||||||
import EventEmitter from 'eventemitter3'
|
import EventEmitter from 'eventemitter3'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 14:53:09
|
* @Date: 2021-04-07 14:53:09
|
||||||
* @Desc: 事件类
|
* @Desc: 事件类
|
||||||
*/
|
*/
|
||||||
class Event extends EventEmitter {
|
class Event extends EventEmitter {
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 14:53:25
|
* @Date: 2021-04-07 14:53:25
|
||||||
* @Desc: 构造函数
|
* @Desc: 构造函数
|
||||||
*/
|
*/
|
||||||
constructor(opt = {}) {
|
constructor(opt = {}) {
|
||||||
super()
|
super()
|
||||||
this.opt = opt
|
this.opt = opt
|
||||||
this.mindMap = opt.mindMap
|
this.mindMap = opt.mindMap
|
||||||
this.isMousedown = false
|
this.isMousedown = false
|
||||||
this.mousedownPos = {
|
this.mousedownPos = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
}
|
}
|
||||||
this.mousemovePos = {
|
this.mousemovePos = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
}
|
}
|
||||||
this.mousemoveOffset = {
|
this.mousemoveOffset = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
}
|
}
|
||||||
this.bindFn()
|
this.bindFn()
|
||||||
this.bind()
|
this.bind()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:52:24
|
* @Date: 2021-04-07 15:52:24
|
||||||
* @Desc: 绑定函数上下文
|
* @Desc: 绑定函数上下文
|
||||||
*/
|
*/
|
||||||
bindFn() {
|
bindFn() {
|
||||||
this.onDrawClick = this.onDrawClick.bind(this)
|
this.onDrawClick = this.onDrawClick.bind(this)
|
||||||
this.onMousedown = this.onMousedown.bind(this)
|
this.onMousedown = this.onMousedown.bind(this)
|
||||||
this.onMousemove = this.onMousemove.bind(this)
|
this.onMousemove = this.onMousemove.bind(this)
|
||||||
this.onMouseup = this.onMouseup.bind(this)
|
this.onMouseup = this.onMouseup.bind(this)
|
||||||
this.onMousewheel = this.onMousewheel.bind(this)
|
this.onMousewheel = this.onMousewheel.bind(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 14:53:43
|
* @Date: 2021-04-07 14:53:43
|
||||||
* @Desc: 绑定事件
|
* @Desc: 绑定事件
|
||||||
*/
|
*/
|
||||||
bind() {
|
bind() {
|
||||||
this.mindMap.draw.on('click', this.onDrawClick)
|
this.mindMap.draw.on('click', this.onDrawClick)
|
||||||
this.mindMap.el.addEventListener('mousedown', this.onMousedown)
|
this.mindMap.el.addEventListener('mousedown', this.onMousedown)
|
||||||
window.addEventListener('mousemove', this.onMousemove)
|
window.addEventListener('mousemove', this.onMousemove)
|
||||||
window.addEventListener('mouseup', this.onMouseup)
|
window.addEventListener('mouseup', this.onMouseup)
|
||||||
this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
|
this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:40:51
|
* @Date: 2021-04-07 15:40:51
|
||||||
* @Desc: 解绑事件
|
* @Desc: 解绑事件
|
||||||
*/
|
*/
|
||||||
unbind() {
|
unbind() {
|
||||||
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
|
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
|
||||||
window.removeEventListener('mousemove', this.onMousemove)
|
window.removeEventListener('mousemove', this.onMousemove)
|
||||||
window.removeEventListener('mouseup', this.onMouseup)
|
window.removeEventListener('mouseup', this.onMouseup)
|
||||||
this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
|
this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-04-24 13:19:39
|
* @Date: 2021-04-24 13:19:39
|
||||||
* @Desc: 画布的单击事件
|
* @Desc: 画布的单击事件
|
||||||
*/
|
*/
|
||||||
onDrawClick(e) {
|
onDrawClick(e) {
|
||||||
this.emit('draw_click', e)
|
this.emit('draw_click', e)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:17:35
|
* @Date: 2021-04-07 15:17:35
|
||||||
* @Desc: 鼠标按下事件
|
* @Desc: 鼠标按下事件
|
||||||
*/
|
*/
|
||||||
onMousedown(e) {
|
onMousedown(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
this.isMousedown = true
|
this.isMousedown = true
|
||||||
this.mousedownPos.x = e.clientX
|
this.mousedownPos.x = e.clientX
|
||||||
this.mousedownPos.y = e.clientY
|
this.mousedownPos.y = e.clientY
|
||||||
this.emit('mousedown', e, this)
|
this.emit('mousedown', e, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:18:32
|
* @Date: 2021-04-07 15:18:32
|
||||||
* @Desc: 鼠标移动事件
|
* @Desc: 鼠标移动事件
|
||||||
*/
|
*/
|
||||||
onMousemove(e) {
|
onMousemove(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
this.mousemovePos.x = e.clientX
|
this.mousemovePos.x = e.clientX
|
||||||
this.mousemovePos.y = e.clientY
|
this.mousemovePos.y = e.clientY
|
||||||
this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
|
this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
|
||||||
this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
|
this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
|
||||||
this.emit('mousemove', e, this)
|
this.emit('mousemove', e, this)
|
||||||
if (this.isMousedown) {
|
if (this.isMousedown) {
|
||||||
this.emit('drag', e, this)
|
this.emit('drag', e, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:18:57
|
* @Date: 2021-04-07 15:18:57
|
||||||
* @Desc: 鼠标松开事件
|
* @Desc: 鼠标松开事件
|
||||||
*/
|
*/
|
||||||
onMouseup(e) {
|
onMouseup(e) {
|
||||||
this.isMousedown = false
|
this.isMousedown = false
|
||||||
this.emit('mouseup', e, this)
|
this.emit('mouseup', e, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:46:27
|
* @Date: 2021-04-07 15:46:27
|
||||||
* @Desc: 鼠标滚动
|
* @Desc: 鼠标滚动
|
||||||
*/
|
*/
|
||||||
onMousewheel(e) {
|
onMousewheel(e) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
let dir
|
let dir
|
||||||
if (e.wheelDeltaY > 0) {
|
if (e.wheelDeltaY > 0) {
|
||||||
dir = 'up'
|
dir = 'up'
|
||||||
} else {
|
} else {
|
||||||
dir = 'down'
|
dir = 'down'
|
||||||
}
|
}
|
||||||
this.emit('mousewheel', e, dir, this)
|
this.emit('mousewheel', e, dir, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Event
|
export default Event
|
||||||
@ -1,397 +1,381 @@
|
|||||||
import Style from './Style';
|
import Style from './Style'
|
||||||
import {
|
import {
|
||||||
resizeImgSize
|
resizeImgSize
|
||||||
} from './Utils'
|
} from './utils'
|
||||||
import {
|
import {
|
||||||
Image,
|
Image,
|
||||||
Text,
|
Text,
|
||||||
SVG,
|
SVG,
|
||||||
Circle,
|
Circle,
|
||||||
Element
|
Element
|
||||||
} from '@svgdotjs/svg.js'
|
} from '@svgdotjs/svg.js'
|
||||||
import btnsSvg from './svg/btns';
|
import btnsSvg from './svg/btns'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-06 11:26:00
|
* @Date: 2021-04-06 11:26:00
|
||||||
* @Desc: 节点类
|
* @Desc: 节点类
|
||||||
*/
|
*/
|
||||||
class Node {
|
class Node {
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-06 11:26:17
|
* @Date: 2021-04-06 11:26:17
|
||||||
* @Desc: 构造函数
|
* @Desc: 构造函数
|
||||||
*/
|
*/
|
||||||
constructor(opt = {}) {
|
constructor(opt = {}) {
|
||||||
// 原始数据
|
// 节点数据
|
||||||
this.originData = opt.originData
|
this.data = opt.data || {}
|
||||||
// 原始数据里的数据部分
|
// id
|
||||||
this.data = opt.data
|
this.uid = opt.uid
|
||||||
// id
|
// 控制实例
|
||||||
this.uid = opt.uid
|
this.mindMap = opt.mindMap
|
||||||
// 控制实例
|
// 渲染实例
|
||||||
this.mindMap = opt.mindMap
|
this.renderer = opt.renderer
|
||||||
// 渲染实例
|
// 渲染器
|
||||||
this.renderer = opt.renderer
|
this.draw = opt.draw || null
|
||||||
// 主题配置
|
// 主题配置
|
||||||
this.themeConfig = this.mindMap.themeConfig
|
this.themeConfig = this.mindMap.themeConfig
|
||||||
// 样式实例
|
// 样式实例
|
||||||
this.style = new Style(this, this.themeConfig)
|
this.style = new Style(this, this.themeConfig)
|
||||||
// 渲染器
|
// 是否是根节点
|
||||||
this.draw = opt.draw || null
|
this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
|
||||||
// 是否是根节点
|
// 是否激活
|
||||||
this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
|
this.isActive = opt.isActive === undefined ? false : opt.isActive
|
||||||
// 是否激活
|
// 是否展开
|
||||||
this.isActive = opt.isActive === undefined ? false : opt.isActive
|
this.expand = opt.expand === undefined ? true : opt.expand
|
||||||
// 是否展开
|
// 节点层级
|
||||||
this.expand = opt.expand === undefined ? true : opt.expand
|
this.layerIndex = opt.layerIndex === undefined ? 0 : opt.layerIndex
|
||||||
// 节点层级
|
// 节点宽
|
||||||
this.layerIndex = opt.layerIndex === undefined ? 0 : opt.layerIndex
|
this.width = opt.width || 0
|
||||||
// 节点宽
|
// 节点高
|
||||||
this.width = opt.width || 0
|
this.height = opt.height || 0
|
||||||
// 节点高
|
// left
|
||||||
this.height = opt.height || 0
|
this.left = opt.left || 0
|
||||||
// left
|
// top
|
||||||
this.left = opt.left || 0
|
this.top = opt.top || 0
|
||||||
// top
|
// 父节点
|
||||||
this.top = opt.top || 0
|
this.parent = opt.parent || null
|
||||||
// 父节点
|
// 子节点
|
||||||
this.parent = opt.parent || null
|
this.children = opt.children || []
|
||||||
// 子节点
|
// 文本节点
|
||||||
this.children = opt.children || []
|
this.textNode = null
|
||||||
// 全部子节点所占的高度之和
|
}
|
||||||
this.childrenAreaHeight = opt.childrenAreaHeight || 0
|
|
||||||
// 文本节点
|
/**
|
||||||
this.textNode = null
|
* javascript comment
|
||||||
// 其他数据
|
* @Author: 王林25
|
||||||
Object.keys(opt.data).forEach((key) => {
|
* @Date: 2021-04-06 15:55:04
|
||||||
this[key] = opt.data[key]
|
* @Desc: 添加子节点
|
||||||
})
|
*/
|
||||||
}
|
addChildren(node) {
|
||||||
|
this.children.push(node)
|
||||||
/**
|
}
|
||||||
* javascript comment
|
|
||||||
* @Author: 王林25
|
/**
|
||||||
* @Date: 2021-04-06 15:55:04
|
* javascript comment
|
||||||
* @Desc: 添加子节点
|
* @Author: 王林25
|
||||||
*/
|
* @Date: 2021-04-09 09:46:23
|
||||||
addChildren(node) {
|
* @Desc: 刷新节点的宽高
|
||||||
this.children.push(node)
|
*/
|
||||||
}
|
refreshSize() {
|
||||||
|
let {
|
||||||
/**
|
width,
|
||||||
* javascript comment
|
height
|
||||||
* @Author: 王林25
|
} = this.getNodeRect()
|
||||||
* @Date: 2021-04-09 09:46:23
|
this.width = width
|
||||||
* @Desc: 刷新节点的宽高
|
this.height = height
|
||||||
*/
|
}
|
||||||
refreshSize() {
|
|
||||||
let {
|
/**
|
||||||
width,
|
* javascript comment
|
||||||
height
|
* @Author: 王林25
|
||||||
} = this.getNodeRect()
|
* @Date: 2021-04-06 14:52:17
|
||||||
this.width = width
|
* @Desc: 计算节点尺寸信息
|
||||||
this.height = height
|
*/
|
||||||
}
|
getNodeRect() {
|
||||||
|
let width = this.themeConfig.paddingX * 2
|
||||||
/**
|
let height = this.themeConfig.paddingY * 2
|
||||||
* javascript comment
|
let maxWidth = 0
|
||||||
* @Author: 王林25
|
if (this.img) {
|
||||||
* @Date: 2021-04-06 14:52:17
|
let img = this.createImgNode()
|
||||||
* @Desc: 计算节点尺寸信息
|
if (img.width > maxWidth) {
|
||||||
*/
|
maxWidth = img.width
|
||||||
getNodeRect() {
|
}
|
||||||
let width = this.themeConfig.paddingX * 2
|
height += img.height
|
||||||
let height = this.themeConfig.paddingY * 2
|
}
|
||||||
let maxWidth = 0
|
if (this.icon && this.text) {
|
||||||
if (this.img) {
|
let icon = this.createIconNode()
|
||||||
let img = this.createImgNode()
|
let text = this.createTextNode()
|
||||||
if (img.width > maxWidth) {
|
if (icon.width + text.width > maxWidth) {
|
||||||
maxWidth = img.width
|
maxWidth = icon.width + text.width
|
||||||
}
|
}
|
||||||
height += img.height
|
height += Math.max(text.height, icon.height)
|
||||||
}
|
} else if (this.text) {
|
||||||
if (this.icon && this.text) {
|
let text = this.createTextNode()
|
||||||
let icon = this.createIconNode()
|
if (text.width > maxWidth) {
|
||||||
let text = this.createTextNode()
|
maxWidth = text.width
|
||||||
if (icon.width + text.width > maxWidth) {
|
}
|
||||||
maxWidth = icon.width + text.width
|
height += text.height
|
||||||
}
|
} else if (this.icon) {
|
||||||
height += Math.max(text.height, icon.height)
|
let icon = this.createIconNode()
|
||||||
} else if (this.text) {
|
if (icon.width > maxWidth) {
|
||||||
let text = this.createTextNode()
|
maxWidth = icon.width
|
||||||
if (text.width > maxWidth) {
|
}
|
||||||
maxWidth = text.width
|
height += icon.height
|
||||||
}
|
}
|
||||||
height += text.height
|
return {
|
||||||
} else if (this.icon) {
|
width: width + maxWidth,
|
||||||
let icon = this.createIconNode()
|
height
|
||||||
if (icon.width > maxWidth) {
|
}
|
||||||
maxWidth = icon.width
|
}
|
||||||
}
|
|
||||||
height += icon.height
|
/**
|
||||||
}
|
* javascript comment
|
||||||
return {
|
* @Author: 王林25
|
||||||
width: width + maxWidth,
|
* @Date: 2021-04-09 14:06:17
|
||||||
height
|
* @Desc: 创建图片节点
|
||||||
}
|
*/
|
||||||
}
|
createImgNode() {
|
||||||
|
if (!this.img) {
|
||||||
/**
|
return
|
||||||
* javascript comment
|
}
|
||||||
* @Author: 王林25
|
let imgSize = this.getImgShowSize()
|
||||||
* @Date: 2021-04-09 14:06:17
|
return {
|
||||||
* @Desc: 创建图片节点
|
node: new Image().load(this.img).size(...imgSize),
|
||||||
*/
|
width: imgSize[0],
|
||||||
createImgNode() {
|
height: imgSize[1]
|
||||||
if (!this.img) {
|
}
|
||||||
return
|
}
|
||||||
}
|
|
||||||
let imgSize = this.getImgShowSize()
|
/**
|
||||||
return {
|
* javascript comment
|
||||||
node: new Image().load(this.img).size(...imgSize),
|
* @Author: 王林25
|
||||||
width: imgSize[0],
|
* @Date: 2021-04-09 14:08:56
|
||||||
height: imgSize[1]
|
* @Desc: 创建文本节点
|
||||||
}
|
*/
|
||||||
}
|
createTextNode() {
|
||||||
|
if (!this.text) {
|
||||||
/**
|
return
|
||||||
* javascript comment
|
}
|
||||||
* @Author: 王林25
|
let node = this.draw.text(this.text)
|
||||||
* @Date: 2021-04-09 14:08:56
|
this.style.text(node)
|
||||||
* @Desc: 创建文本节点
|
let {
|
||||||
*/
|
width,
|
||||||
createTextNode() {
|
height
|
||||||
if (!this.text) {
|
} = node.bbox()
|
||||||
return
|
let cloneNode = node.clone()
|
||||||
}
|
node.remove()
|
||||||
let node = this.draw.text(this.text)
|
return {
|
||||||
this.style.text(node)
|
node: cloneNode,
|
||||||
let {
|
width,
|
||||||
width,
|
height
|
||||||
height
|
}
|
||||||
} = node.bbox()
|
}
|
||||||
let cloneNode = node.clone()
|
|
||||||
node.remove()
|
/**
|
||||||
return {
|
* javascript comment
|
||||||
node: cloneNode,
|
* @Author: 王林25
|
||||||
width,
|
* @Date: 2021-04-09 14:10:48
|
||||||
height
|
* @Desc: 创建icon节点
|
||||||
}
|
*/
|
||||||
}
|
createIconNode() {
|
||||||
|
if (!this.icon) {
|
||||||
/**
|
return
|
||||||
* javascript comment
|
}
|
||||||
* @Author: 王林25
|
let node = SVG('<svg t="1617947697619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="999" width="200" height="200"><path d="M512 899.5c-213.668 0-387.5-173.832-387.5-387.5S298.332 124.5 512 124.5 899.5 298.332 899.5 512 725.668 899.5 512 899.5z" fill="#4472C4" p-id="1000"></path><path d="M512 137c-206.776 0-375 168.224-375 375s168.224 375 375 375 375-168.224 375-375-168.224-375-375-375m0-25c220.914 0 400 179.086 400 400S732.914 912 512 912 112 732.914 112 512s179.086-400 400-400z" fill="#4472C4" p-id="1001"></path><path d="M597.681 335.009c0-7.67-2.36-13.569-7.08-17.109a35.115 35.115 0 0 0-20.061-5.9c-3.54 0-6.49 1.77-10.029 4.13-3.54 2.95-6.49 5.31-8.26 7.08a75.758 75.758 0 0 0-11.211 13.569c-3.54 4.72-7.67 9.44-11.209 13.569-11.209 12.979-23.009 27.139-35.988 41.3-13.569 14.749-26.549 27.729-38.938 39.528-1.18 1.18-2.95 2.36-4.13 3.54l-4.72 2.36c-1.77 1.18-3.54 1.77-4.72 2.95l-5.31 3.54c-2.95 2.36-5.31 4.13-7.08 5.9-2.36 2.36-2.95 4.13-2.95 5.9 0 7.08 2.95 12.389 10.03 16.519 5.9 4.72 12.979 6.49 20.059 6.49a31.985 31.985 0 0 0 14.756-3.543c4.13-2.36 8.26-5.9 12.979-10.619 2.95-3.54 6.49-7.67 11.209-12.979l11.8-12.979c2.95-2.95 7.67-7.67 13.569-14.159s12.389-14.159 20.649-23.009c-1.77 9.44-3.54 20.649-4.72 33.628-2.36 12.979-4.13 25.959-5.9 40.118l-4.72 41.888c-1.18 14.159-2.36 27.729-2.95 39.528-1.18 22.419-2.36 44.838-2.95 67.257q-1.77 33.628-1.77 58.407c0 9.44 2.36 16.519 7.67 21.829 5.31 5.9 12.389 8.26 21.829 8.26a43.479 43.479 0 0 0 15.929-3.54c4.72-2.36 7.67-5.31 7.67-8.85 0-1.77-0.59-5.31-0.59-11.209a149.392 149.392 0 0 1-2.36-18.879 116.91 116.91 0 0 1-2.36-21.239 132.008 132.008 0 0 1-1.18-20.649c0-41.3 1.18-82.6 4.72-124.484 3.54-41.3 10.03-82.6 20.649-123.3a106.366 106.366 0 0 1 2.95-11.209l2.36-11.209 1.77-11.209c-0.002-3.547 0.588-7.086 0.588-11.216z" fill="#FFFFFF" p-id="1002"></path></svg>').size(this.themeConfig.iconSize, this.themeConfig.iconSize)
|
||||||
* @Date: 2021-04-09 14:10:48
|
return {
|
||||||
* @Desc: 创建icon节点
|
node,
|
||||||
*/
|
width: this.themeConfig.iconSize,
|
||||||
createIconNode() {
|
height: this.themeConfig.iconSize
|
||||||
if (!this.icon) {
|
}
|
||||||
return
|
}
|
||||||
}
|
|
||||||
let node = SVG('<svg t="1617947697619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="999" width="200" height="200"><path d="M512 899.5c-213.668 0-387.5-173.832-387.5-387.5S298.332 124.5 512 124.5 899.5 298.332 899.5 512 725.668 899.5 512 899.5z" fill="#4472C4" p-id="1000"></path><path d="M512 137c-206.776 0-375 168.224-375 375s168.224 375 375 375 375-168.224 375-375-168.224-375-375-375m0-25c220.914 0 400 179.086 400 400S732.914 912 512 912 112 732.914 112 512s179.086-400 400-400z" fill="#4472C4" p-id="1001"></path><path d="M597.681 335.009c0-7.67-2.36-13.569-7.08-17.109a35.115 35.115 0 0 0-20.061-5.9c-3.54 0-6.49 1.77-10.029 4.13-3.54 2.95-6.49 5.31-8.26 7.08a75.758 75.758 0 0 0-11.211 13.569c-3.54 4.72-7.67 9.44-11.209 13.569-11.209 12.979-23.009 27.139-35.988 41.3-13.569 14.749-26.549 27.729-38.938 39.528-1.18 1.18-2.95 2.36-4.13 3.54l-4.72 2.36c-1.77 1.18-3.54 1.77-4.72 2.95l-5.31 3.54c-2.95 2.36-5.31 4.13-7.08 5.9-2.36 2.36-2.95 4.13-2.95 5.9 0 7.08 2.95 12.389 10.03 16.519 5.9 4.72 12.979 6.49 20.059 6.49a31.985 31.985 0 0 0 14.756-3.543c4.13-2.36 8.26-5.9 12.979-10.619 2.95-3.54 6.49-7.67 11.209-12.979l11.8-12.979c2.95-2.95 7.67-7.67 13.569-14.159s12.389-14.159 20.649-23.009c-1.77 9.44-3.54 20.649-4.72 33.628-2.36 12.979-4.13 25.959-5.9 40.118l-4.72 41.888c-1.18 14.159-2.36 27.729-2.95 39.528-1.18 22.419-2.36 44.838-2.95 67.257q-1.77 33.628-1.77 58.407c0 9.44 2.36 16.519 7.67 21.829 5.31 5.9 12.389 8.26 21.829 8.26a43.479 43.479 0 0 0 15.929-3.54c4.72-2.36 7.67-5.31 7.67-8.85 0-1.77-0.59-5.31-0.59-11.209a149.392 149.392 0 0 1-2.36-18.879 116.91 116.91 0 0 1-2.36-21.239 132.008 132.008 0 0 1-1.18-20.649c0-41.3 1.18-82.6 4.72-124.484 3.54-41.3 10.03-82.6 20.649-123.3a106.366 106.366 0 0 1 2.95-11.209l2.36-11.209 1.77-11.209c-0.002-3.547 0.588-7.086 0.588-11.216z" fill="#FFFFFF" p-id="1002"></path></svg>').size(this.themeConfig.iconSize, this.themeConfig.iconSize)
|
/**
|
||||||
return {
|
* javascript comment
|
||||||
node,
|
* @Author: 王林25
|
||||||
width: this.themeConfig.iconSize,
|
* @Date: 2021-04-09 11:10:11
|
||||||
height: this.themeConfig.iconSize
|
* @Desc: 创建内容节点
|
||||||
}
|
*/
|
||||||
}
|
createNode() {
|
||||||
|
let {
|
||||||
/**
|
left,
|
||||||
* javascript comment
|
top,
|
||||||
* @Author: 王林25
|
width,
|
||||||
* @Date: 2021-04-09 11:10:11
|
height
|
||||||
* @Desc: 创建内容节点
|
} = this
|
||||||
*/
|
let paddingY = this.themeConfig.paddingY
|
||||||
createNode() {
|
// 创建组
|
||||||
let {
|
let group = this.draw.group()
|
||||||
left,
|
// 节点矩形
|
||||||
top,
|
let _rectNode = group.rect(width, height).x(left).y(top)
|
||||||
width,
|
this.style.rect(_rectNode)
|
||||||
height
|
// 内容节点
|
||||||
} = this
|
let imgNode = this.createImgNode()
|
||||||
let paddingY = this.themeConfig.paddingY
|
let iconNode = this.createIconNode()
|
||||||
// 创建组
|
let textNode = this.createTextNode()
|
||||||
let group = this.draw.group()
|
let imgHeight = imgNode ? imgNode.height : 0
|
||||||
// 节点矩形
|
// 图片
|
||||||
let _rectNode = group.rect(width, height).x(left).y(top)
|
if (imgNode) {
|
||||||
this.style.rect(_rectNode)
|
group.add(imgNode.node)
|
||||||
// 内容节点
|
imgNode.node.cx(left + width / 2).y(top + paddingY)
|
||||||
let imgNode = this.createImgNode()
|
}
|
||||||
let iconNode = this.createIconNode()
|
// icon
|
||||||
let textNode = this.createTextNode()
|
if (iconNode) {
|
||||||
let imgHeight = imgNode ? imgNode.height : 0
|
group.add(iconNode.node)
|
||||||
// 图片
|
iconNode.node.x(left + width / 2).y(top + paddingY + imgHeight + (textNode && textNode.height > iconNode.height ? (textNode.height - iconNode.height) / 2 : 0)).dx(textNode ? -textNode.width / 2 - iconNode.width / 2 : 0)
|
||||||
if (imgNode) {
|
}
|
||||||
group.add(imgNode.node)
|
// 文字
|
||||||
imgNode.node.cx(left + width / 2).y(top + paddingY)
|
if (textNode) {
|
||||||
}
|
this.textNode = textNode
|
||||||
// icon
|
group.add(textNode.node)
|
||||||
if (iconNode) {
|
textNode.node.cx(left + width / 2).y(top + paddingY + imgHeight).dx(iconNode ? iconNode.width / 2 : 0)
|
||||||
group.add(iconNode.node)
|
}
|
||||||
iconNode.node.x(left + width / 2).y(top + paddingY + imgHeight + (textNode && textNode.height > iconNode.height ? (textNode.height - iconNode.height) / 2 : 0)).dx(textNode ? -textNode.width / 2 - iconNode.width / 2 : 0)
|
// 单击事件
|
||||||
}
|
group.click((e) => {
|
||||||
// 文字
|
e.stopPropagation()
|
||||||
if (textNode) {
|
if (this.isActive) {
|
||||||
this.textNode = textNode
|
return;
|
||||||
group.add(textNode.node)
|
}
|
||||||
textNode.node.cx(left + width / 2).y(top + paddingY + imgHeight).dx(iconNode ? iconNode.width / 2 : 0)
|
this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
|
||||||
}
|
this.renderer.clearActive()
|
||||||
// 单击事件
|
this.isActive = true
|
||||||
group.click((e) => {
|
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||||
e.stopPropagation()
|
isActive: this.isActive
|
||||||
if (this.isActive) {
|
})
|
||||||
return;
|
this.renderer.activeNodeList.push(this)
|
||||||
}
|
this.mindMap.render()
|
||||||
this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
|
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
|
||||||
this.renderer.clearActive()
|
})
|
||||||
this.isActive = true
|
// 双击事件
|
||||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
group.dblclick(() => {
|
||||||
isActive: this.isActive
|
this.mindMap.emit('node_dblclick', this)
|
||||||
})
|
})
|
||||||
this.renderer.activeNodeList.push(this)
|
return group
|
||||||
this.mindMap.render()
|
}
|
||||||
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
|
|
||||||
})
|
/**
|
||||||
// 双击事件
|
* javascript comment
|
||||||
group.dblclick(() => {
|
* @Author: 王林25
|
||||||
this.showTextEditBox()
|
* @Date: 2021-04-07 13:55:58
|
||||||
})
|
* @Desc: 渲染
|
||||||
return group
|
*/
|
||||||
}
|
render() {
|
||||||
|
// 连线
|
||||||
/**
|
this.drawLine()
|
||||||
* @Author: 王林
|
// 按钮
|
||||||
* @Date: 2021-04-13 22:15:56
|
this.drawBtn()
|
||||||
* @Desc: 显示文本编辑框
|
// 节点
|
||||||
*/
|
this.draw.add(this.createNode())
|
||||||
showTextEditBox() {
|
// 子节点
|
||||||
if (!this.text) {
|
if (this.children && this.children.length && this.expand) {
|
||||||
return;
|
this.children.forEach((child) => {
|
||||||
}
|
child.render()
|
||||||
this.renderer.showEditTextBox(this, this.textNode.node.node.getBoundingClientRect())
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/**
|
|
||||||
* javascript comment
|
/**
|
||||||
* @Author: 王林25
|
* @Author: 王林
|
||||||
* @Date: 2021-04-07 13:55:58
|
* @Date: 2021-04-10 22:01:53
|
||||||
* @Desc: 渲染
|
* @Desc: 连线
|
||||||
*/
|
*/
|
||||||
render() {
|
drawLine() {
|
||||||
// 连线
|
if (!this.expand) {
|
||||||
this.drawLine()
|
return;
|
||||||
// 按钮
|
}
|
||||||
this.drawBtn()
|
let lines = this.renderer.layout.drawLine(this)
|
||||||
// 节点
|
lines.forEach((line) => {
|
||||||
this.draw.add(this.createNode())
|
this.style.line(line)
|
||||||
// 子节点
|
})
|
||||||
if (this.children && this.children.length && this.expand) {
|
}
|
||||||
this.children.forEach((child) => {
|
|
||||||
child.render()
|
/**
|
||||||
})
|
* @Author: 王林
|
||||||
}
|
* @Date: 2021-04-11 19:47:01
|
||||||
}
|
* @Desc: 展开收缩按钮
|
||||||
|
*/
|
||||||
/**
|
drawBtn() {
|
||||||
* @Author: 王林
|
if (this.children.length <= 0 || this.isRoot) {
|
||||||
* @Date: 2021-04-10 22:01:53
|
return;
|
||||||
* @Desc: 连线
|
}
|
||||||
*/
|
let g = this.draw.group()
|
||||||
drawLine() {
|
let iconSvg
|
||||||
if (!this.expand) {
|
if (this.expand) {
|
||||||
return;
|
iconSvg = btnsSvg.close
|
||||||
}
|
} else {
|
||||||
let lines = this.renderer.layout.drawLine(this)
|
iconSvg = btnsSvg.open
|
||||||
lines.forEach((line) => {
|
}
|
||||||
this.style.line(line)
|
let node = SVG(iconSvg).size(20, 20)
|
||||||
})
|
let fillNode = new Circle().size(20)
|
||||||
}
|
this.renderer.layout.drawIcon(this, [node, fillNode])
|
||||||
|
node.dx(0).dy(-10)
|
||||||
/**
|
fillNode.dx(0).dy(-10)
|
||||||
* @Author: 王林
|
this.style.iconBtn(node, fillNode)
|
||||||
* @Date: 2021-04-11 19:47:01
|
g.mouseover(() => {
|
||||||
* @Desc: 展开收缩按钮
|
g.css({
|
||||||
*/
|
cursor: 'pointer'
|
||||||
drawBtn() {
|
})
|
||||||
if (this.children.length <= 0 || this.isRoot) {
|
})
|
||||||
return;
|
g.mouseout(() => {
|
||||||
}
|
g.css({
|
||||||
let g = this.draw.group()
|
cursor: 'auto'
|
||||||
let iconSvg
|
})
|
||||||
if (this.expand) {
|
})
|
||||||
iconSvg = btnsSvg.close
|
g.click(() => {
|
||||||
} else {
|
this.expand = !this.expand
|
||||||
iconSvg = btnsSvg.open
|
// 需要反映到实际数据上
|
||||||
}
|
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||||
let node = SVG(iconSvg).size(20, 20)
|
expand: this.expand
|
||||||
let fillNode = new Circle().size(20)
|
})
|
||||||
this.renderer.layout.drawIcon(this, [node, fillNode])
|
this.mindMap.render()
|
||||||
node.dx(0).dy(-10)
|
this.mindMap.emit('expand_btn_click', this)
|
||||||
fillNode.dx(0).dy(-10)
|
})
|
||||||
this.style.iconBtn(node, fillNode)
|
g.add(fillNode)
|
||||||
g.mouseover(() => {
|
g.add(node)
|
||||||
g.css({ cursor: 'pointer' })
|
}
|
||||||
})
|
|
||||||
g.mouseout(() => {
|
/**
|
||||||
g.css({ cursor: 'auto' })
|
* javascript comment
|
||||||
})
|
* @Author: 王林25
|
||||||
g.click(() => {
|
* @Date: 2021-04-09 10:12:51
|
||||||
this.expand = !this.expand
|
* @Desc: 获取图片显示宽高
|
||||||
// 需要反映到实际数据上
|
*/
|
||||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
getImgShowSize() {
|
||||||
expand: this.expand
|
return resizeImgSize(this.imgWidth, this.imgHeight, this.themeConfig.imgMaxWidth, this.themeConfig.imgMaxHeight)
|
||||||
})
|
}
|
||||||
this.mindMap.render()
|
|
||||||
this.mindMap.emit('expand_btn_click', this)
|
/**
|
||||||
})
|
* @Author: 王林
|
||||||
g.add(fillNode)
|
* @Date: 2021-05-04 21:48:49
|
||||||
g.add(node)
|
* @Desc: 获取某个样式
|
||||||
}
|
*/
|
||||||
|
getStyle(prop, root, isActive) {
|
||||||
/**
|
let v = this.style.merge(prop, root, isActive)
|
||||||
* javascript comment
|
return v === undefined ? '' : v
|
||||||
* @Author: 王林25
|
}
|
||||||
* @Date: 2021-04-09 10:12:51
|
|
||||||
* @Desc: 获取图片显示宽高
|
/**
|
||||||
*/
|
* @Author: 王林
|
||||||
getImgShowSize() {
|
* @Date: 2021-05-04 22:18:07
|
||||||
return resizeImgSize(this.imgWidth, this.imgHeight, this.themeConfig.imgMaxWidth, this.themeConfig.imgMaxHeight)
|
* @Desc: 修改某个样式
|
||||||
}
|
*/
|
||||||
|
setStyle(prop, value, isActive) {
|
||||||
/**
|
if (isActive) {
|
||||||
* @Author: 王林
|
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||||
* @Date: 2021-05-04 21:48:49
|
activeStyle: {
|
||||||
* @Desc: 获取某个样式
|
...(this.data.activeStyle || {}),
|
||||||
*/
|
[prop]: value
|
||||||
getStyle(prop, root, isActive) {
|
}
|
||||||
let v = this.style.merge(prop, root, isActive)
|
})
|
||||||
return v === undefined ? '' : v
|
} else {
|
||||||
}
|
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||||
|
[prop]: value
|
||||||
/**
|
})
|
||||||
* @Author: 王林
|
}
|
||||||
* @Date: 2021-05-04 22:18:07
|
this.mindMap.render()
|
||||||
* @Desc: 修改某个样式
|
}
|
||||||
*/
|
}
|
||||||
setStyle(prop, value, isActive) {
|
|
||||||
if (isActive) {
|
|
||||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
|
||||||
activeStyle: {
|
|
||||||
...(this.data.activeStyle || {}),
|
|
||||||
[prop]: value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
|
||||||
[prop]: value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.mindMap.render()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Node
|
export default Node
|
||||||
@ -1,256 +1,175 @@
|
|||||||
import merge from 'deepmerge'
|
import merge from 'deepmerge'
|
||||||
import LogicalStructure from './layouts/LogicalStructure'
|
import LogicalStructure from './layouts/LogicalStructure'
|
||||||
import { getStrWithBrFromHtml } from './Utils'
|
import TextEdit from './TextEdit'
|
||||||
|
|
||||||
// 布局列表
|
// 布局列表
|
||||||
const layouts = {
|
const layouts = {
|
||||||
logicalStructure: LogicalStructure
|
// 思维导图
|
||||||
}
|
logicalStructure: LogicalStructure
|
||||||
|
}
|
||||||
/**
|
|
||||||
* javascript comment
|
/**
|
||||||
* @Author: 王林25
|
* javascript comment
|
||||||
* @Date: 2021-04-08 16:25:07
|
* @Author: 王林25
|
||||||
* @Desc: 渲染
|
* @Date: 2021-04-08 16:25:07
|
||||||
*/
|
* @Desc: 渲染
|
||||||
class Render {
|
*/
|
||||||
/**
|
class Render {
|
||||||
* javascript comment
|
/**
|
||||||
* @Author: 王林25
|
* javascript comment
|
||||||
* @Date: 2021-04-08 16:25:32
|
* @Author: 王林25
|
||||||
* @Desc: 构造函数
|
* @Date: 2021-04-08 16:25:32
|
||||||
*/
|
* @Desc: 构造函数
|
||||||
constructor(opt = {}) {
|
*/
|
||||||
this.opt = opt
|
constructor(opt = {}) {
|
||||||
this.mindMap = opt.mindMap
|
this.opt = opt
|
||||||
this.themeConfig = this.mindMap.themeConfig
|
this.mindMap = opt.mindMap
|
||||||
this.draw = this.mindMap.draw
|
this.themeConfig = this.mindMap.themeConfig
|
||||||
// 渲染树，操作过程中修改的都是这里的数据
|
this.draw = this.mindMap.draw
|
||||||
this.renderTree = merge({}, this.mindMap.opt.data || {})
|
// 渲染树，操作过程中修改的都是这里的数据
|
||||||
// 当前激活的节点列表
|
this.renderTree = merge({}, this.mindMap.opt.data || {})
|
||||||
this.activeNodeList = []
|
// 当前激活的节点列表
|
||||||
// 根节点
|
this.activeNodeList = []
|
||||||
this.root = null
|
// 根节点
|
||||||
// 文本编辑框
|
this.root = null
|
||||||
this.textEditNode = null
|
// 文本编辑框
|
||||||
// 文本编辑框是否显示
|
this.textEdit = new TextEdit(this)
|
||||||
this.showTextEdit = false
|
// 布局
|
||||||
// 布局
|
this.layout = new(layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this)
|
||||||
this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)({
|
// 注册命令
|
||||||
mindMap: this.mindMap,
|
this.registerCommands()
|
||||||
renderer: this,
|
}
|
||||||
renderTree: this.renderTree,
|
|
||||||
themeConfig: this.mindMap.themeConfig,
|
/**
|
||||||
draw: this.mindMap.draw
|
* @Author: 王林
|
||||||
})
|
* @Date: 2021-05-04 13:19:06
|
||||||
// 绑定事件
|
* @Desc: 注册命令
|
||||||
this.bindEvent()
|
*/
|
||||||
// 注册命令
|
registerCommands() {
|
||||||
this.registerCommands()
|
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)
|
||||||
* @Author: 王林
|
this.removeNode = this.removeNode.bind(this)
|
||||||
* @Date: 2021-04-24 13:27:04
|
this.mindMap.command.add('REMOVE_NODE', this.removeNode)
|
||||||
* @Desc: 事件
|
this.updateNodeData = this.updateNodeData.bind(this)
|
||||||
*/
|
this.mindMap.command.add('UPDATE_NODE_DATA', this.updateNodeData)
|
||||||
bindEvent() {
|
}
|
||||||
this.mindMap.on('draw_click', () => {
|
|
||||||
// 隐藏文本编辑框
|
/**
|
||||||
this.hideEditTextBox()
|
* javascript comment
|
||||||
// 清除激活状态
|
* @Author: 王林25
|
||||||
if (this.activeNodeList.length > 0) {
|
* @Date: 2021-04-08 16:27:55
|
||||||
this.clearActive()
|
* @Desc: 渲染
|
||||||
this.mindMap.render()
|
*/
|
||||||
this.mindMap.emit('node_active', null, [])
|
render() {
|
||||||
}
|
this.root = this.layout.doLayout()
|
||||||
})
|
this.root.render()
|
||||||
this.mindMap.on('expand_btn_click', () => {
|
}
|
||||||
this.hideEditTextBox()
|
|
||||||
})
|
/**
|
||||||
this.mindMap.on('before_node_active', () => {
|
* @Author: 王林
|
||||||
this.hideEditTextBox()
|
* @Date: 2021-04-12 22:45:01
|
||||||
})
|
* @Desc: 清楚当前激活的节点
|
||||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
*/
|
||||||
this.hideEditTextBox()
|
clearActive() {
|
||||||
})
|
this.activeNodeList.forEach((item) => {
|
||||||
}
|
this.mindMap.execCommand('UPDATE_NODE_DATA', item, {
|
||||||
|
isActive: false
|
||||||
/**
|
})
|
||||||
* @Author: 王林
|
})
|
||||||
* @Date: 2021-05-04 13:19:06
|
this.activeNodeList = []
|
||||||
* @Desc: 注册命令
|
}
|
||||||
*/
|
|
||||||
registerCommands() {
|
/**
|
||||||
this.insertNode = this.insertNode.bind(this)
|
* @Author: 王林
|
||||||
this.mindMap.command.add('INSERT_NODE', this.insertNode)
|
* @Date: 2021-05-04 13:46:08
|
||||||
this.insertChildNode = this.insertChildNode.bind(this)
|
* @Desc: 获取节点在同级里的索引位置
|
||||||
this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
|
*/
|
||||||
this.removeNode = this.removeNode.bind(this)
|
getNodeIndex(node) {
|
||||||
this.mindMap.command.add('REMOVE_NODE', this.removeNode)
|
return node.parent ? node.parent.children.findIndex((item) => {
|
||||||
this.updateNodeData = this.updateNodeData.bind(this)
|
return item === node
|
||||||
this.mindMap.command.add('UPDATE_NODE_DATA', this.updateNodeData)
|
}) : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* @Author: 王林
|
||||||
* @Author: 王林25
|
* @Date: 2021-05-04 13:19:54
|
||||||
* @Date: 2021-04-08 16:27:55
|
* @Desc: 插入同级节点
|
||||||
* @Desc: 渲染
|
*/
|
||||||
*/
|
insertNode() {
|
||||||
render() {
|
if (this.activeNodeList.length <= 0) {
|
||||||
this.root = this.layout.doLayout()
|
return;
|
||||||
this.root.render()
|
}
|
||||||
}
|
let first = this.activeNodeList[0]
|
||||||
|
if (first.isRoot) {
|
||||||
/**
|
this.insertChildNode()
|
||||||
* @Author: 王林
|
} else {
|
||||||
* @Date: 2021-04-12 22:45:01
|
let index = this.getNodeIndex(first)
|
||||||
* @Desc: 清楚当前激活的节点
|
first.parent.originData.children.splice(index + 1, 0, {
|
||||||
*/
|
"data": {
|
||||||
clearActive() {
|
"text": "分支主题",
|
||||||
this.activeNodeList.forEach((item) => {
|
"expand": true
|
||||||
this.mindMap.execCommand('UPDATE_NODE_DATA', item, {
|
},
|
||||||
isActive: false
|
"children": []
|
||||||
})
|
})
|
||||||
})
|
this.mindMap.render()
|
||||||
this.activeNodeList = []
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-04 13:46:08
|
* @Date: 2021-05-04 13:31:02
|
||||||
* @Desc: 获取节点在同级里的索引位置
|
* @Desc: 插入子节点
|
||||||
*/
|
*/
|
||||||
getNodeIndex(node) {
|
insertChildNode() {
|
||||||
return node.parent ? node.parent.children.findIndex((item) => {
|
if (this.activeNodeList.length <= 0) {
|
||||||
return item === node
|
return;
|
||||||
}) : 0
|
}
|
||||||
}
|
let first = this.activeNodeList[0]
|
||||||
|
first.originData.children.push({
|
||||||
/**
|
"data": {
|
||||||
* @Author: 王林
|
"text": "分支主题",
|
||||||
* @Date: 2021-05-04 13:19:54
|
"expand": true
|
||||||
* @Desc: 插入同级节点
|
},
|
||||||
*/
|
"children": []
|
||||||
insertNode() {
|
})
|
||||||
if (this.activeNodeList.length <= 0) {
|
this.mindMap.render()
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
let first = this.activeNodeList[0]
|
/**
|
||||||
if (first.isRoot) {
|
* @Author: 王林
|
||||||
this.insertChildNode()
|
* @Date: 2021-05-04 13:40:39
|
||||||
} else {
|
* @Desc: 移除节点
|
||||||
let index = this.getNodeIndex(first)
|
*/
|
||||||
first.parent.originData.children.splice(index + 1, 0, {
|
removeNode() {
|
||||||
"data": {
|
if (this.activeNodeList.length <= 0) {
|
||||||
"text": "分支主题",
|
return;
|
||||||
"expand": true
|
}
|
||||||
},
|
this.activeNodeList.forEach((item) => {
|
||||||
"children": []
|
if (item.isRoot) {
|
||||||
})
|
item.children = []
|
||||||
this.mindMap.render()
|
item.originData.children = []
|
||||||
}
|
} else {
|
||||||
}
|
let index = this.getNodeIndex(item)
|
||||||
|
item.parent.children.splice(index, 1)
|
||||||
/**
|
item.parent.originData.children.splice(index, 1)
|
||||||
* @Author: 王林
|
}
|
||||||
* @Date: 2021-05-04 13:31:02
|
})
|
||||||
* @Desc: 插入子节点
|
this.clearActive()
|
||||||
*/
|
this.mindMap.render()
|
||||||
insertChildNode() {
|
}
|
||||||
if (this.activeNodeList.length <= 0) {
|
|
||||||
return;
|
/**
|
||||||
}
|
* @Author: 王林
|
||||||
let first = this.activeNodeList[0]
|
* @Date: 2021-05-04 14:19:48
|
||||||
first.originData.children.push({
|
* @Desc: 更新节点数据
|
||||||
"data": {
|
*/
|
||||||
"text": "分支主题",
|
updateNodeData(node, data) {
|
||||||
"expand": true
|
Object.keys(data).forEach((key) => {
|
||||||
},
|
node.data[key] = data[key]
|
||||||
"children": []
|
})
|
||||||
})
|
}
|
||||||
this.mindMap.render()
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @Author: 王林
|
|
||||||
* @Date: 2021-05-04 13:40:39
|
|
||||||
* @Desc: 移除节点
|
|
||||||
*/
|
|
||||||
removeNode() {
|
|
||||||
if (this.activeNodeList.length <= 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.activeNodeList.forEach((item) => {
|
|
||||||
if (item.isRoot) {
|
|
||||||
item.children = []
|
|
||||||
item.originData.children = []
|
|
||||||
} else {
|
|
||||||
let index = this.getNodeIndex(item)
|
|
||||||
item.parent.children.splice(index, 1)
|
|
||||||
item.parent.originData.children.splice(index, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.clearActive()
|
|
||||||
this.mindMap.render()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @Author: 王林
|
|
||||||
* @Date: 2021-05-04 14:19:48
|
|
||||||
* @Desc: 更新节点数据
|
|
||||||
*/
|
|
||||||
updateNodeData(node, data) {
|
|
||||||
Object.keys(data).forEach((key) => {
|
|
||||||
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
|
export default Render
|
||||||
117
simple-mind-map/src/TextEdit.js
Normal file
117
simple-mind-map/src/TextEdit.js
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,87 +1,87 @@
|
|||||||
import merge from 'deepmerge'
|
import merge from 'deepmerge'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 14:45:24
|
* @Date: 2021-04-07 14:45:24
|
||||||
* @Desc: 视图操作类
|
* @Desc: 视图操作类
|
||||||
*/
|
*/
|
||||||
class View {
|
class View {
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 14:45:40
|
* @Date: 2021-04-07 14:45:40
|
||||||
* @Desc: 构造函数
|
* @Desc: 构造函数
|
||||||
*/
|
*/
|
||||||
constructor(opt = {}) {
|
constructor(opt = {}) {
|
||||||
this.opt = opt
|
this.opt = opt
|
||||||
this.mindMap = this.opt.mindMap
|
this.mindMap = this.opt.mindMap
|
||||||
this.viewBox = {
|
this.viewBox = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: this.mindMap.width,
|
width: this.mindMap.width,
|
||||||
height: this.mindMap.height
|
height: this.mindMap.height
|
||||||
}
|
}
|
||||||
this.cacheViewBox = {
|
this.cacheViewBox = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: this.mindMap.width,
|
width: this.mindMap.width,
|
||||||
height: this.mindMap.height
|
height: this.mindMap.height
|
||||||
}
|
}
|
||||||
this.scale = 1
|
this.scale = 1
|
||||||
this.bind()
|
this.bind()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:38:51
|
* @Date: 2021-04-07 15:38:51
|
||||||
* @Desc: 绑定
|
* @Desc: 绑定
|
||||||
*/
|
*/
|
||||||
bind() {
|
bind() {
|
||||||
// 拖动视图
|
// 拖动视图
|
||||||
this.mindMap.event.on('mousedown', () => {
|
this.mindMap.event.on('mousedown', () => {
|
||||||
this.cacheViewBox = merge({}, this.viewBox)
|
this.cacheViewBox = merge({}, this.viewBox)
|
||||||
})
|
})
|
||||||
this.mindMap.event.on('drag', (e, event) => {
|
this.mindMap.event.on('drag', (e, event) => {
|
||||||
// 视图放大缩小后拖动的距离也要相应变化
|
// 视图放大缩小后拖动的距离也要相应变化
|
||||||
this.viewBox.x = this.cacheViewBox.x - event.mousemoveOffset.x * this.scale
|
this.viewBox.x = this.cacheViewBox.x - event.mousemoveOffset.x * this.scale
|
||||||
this.viewBox.y = this.cacheViewBox.y - event.mousemoveOffset.y * this.scale
|
this.viewBox.y = this.cacheViewBox.y - event.mousemoveOffset.y * this.scale
|
||||||
this.setViewBox()
|
this.setViewBox()
|
||||||
})
|
})
|
||||||
// 放大缩小视图
|
// 放大缩小视图
|
||||||
this.mindMap.event.on('mousewheel', (e, dir) => {
|
this.mindMap.event.on('mousewheel', (e, dir) => {
|
||||||
let stepWidth = this.viewBox.width * this.mindMap.opt.scaleRatio
|
let stepWidth = this.viewBox.width * this.mindMap.opt.scaleRatio
|
||||||
let stepHeight = this.viewBox.height * this.mindMap.opt.scaleRatio
|
let stepHeight = this.viewBox.height * this.mindMap.opt.scaleRatio
|
||||||
// 放大
|
// 放大
|
||||||
if (dir === 'down') {
|
if (dir === 'down') {
|
||||||
this.scale += this.mindMap.opt.scaleRatio
|
this.scale += this.mindMap.opt.scaleRatio
|
||||||
this.viewBox.width += stepWidth
|
this.viewBox.width += stepWidth
|
||||||
this.viewBox.height += stepHeight
|
this.viewBox.height += stepHeight
|
||||||
} else { // 缩小
|
} else { // 缩小
|
||||||
this.scale -= this.mindMap.opt.scaleRatio
|
this.scale -= this.mindMap.opt.scaleRatio
|
||||||
this.viewBox.width -= stepWidth
|
this.viewBox.width -= stepWidth
|
||||||
this.viewBox.height -= stepHeight
|
this.viewBox.height -= stepHeight
|
||||||
}
|
}
|
||||||
this.setViewBox()
|
this.setViewBox()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 15:43:26
|
* @Date: 2021-04-07 15:43:26
|
||||||
* @Desc: 设置视图
|
* @Desc: 设置视图
|
||||||
*/
|
*/
|
||||||
setViewBox() {
|
setViewBox() {
|
||||||
let {
|
let {
|
||||||
x,
|
x,
|
||||||
y,
|
y,
|
||||||
width,
|
width,
|
||||||
height
|
height
|
||||||
} = this.viewBox
|
} = this.viewBox
|
||||||
this.opt.draw.viewbox(x, y, width, height)
|
this.opt.draw.viewbox(x, y, width, height)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default View
|
export default View
|
||||||
@ -9,17 +9,17 @@ class Base {
|
|||||||
* @Date: 2021-04-12 22:25:16
|
* @Date: 2021-04-12 22:25:16
|
||||||
* @Desc: 构造函数
|
* @Desc: 构造函数
|
||||||
*/
|
*/
|
||||||
constructor(opt) {
|
constructor(renderer) {
|
||||||
// 控制实例
|
|
||||||
this.mindMap = opt.mindMap
|
|
||||||
// 渲染实例
|
// 渲染实例
|
||||||
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
|
this.root = null
|
||||||
}
|
}
|
||||||
186
simple-mind-map/src/layouts/BubbleChart.js
Normal file
186
simple-mind-map/src/layouts/BubbleChart.js
Normal file
@ -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
|
||||||
270
simple-mind-map/src/layouts/CatalogOrganization.js
Normal file
270
simple-mind-map/src/layouts/CatalogOrganization.js
Normal file
@ -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
|
||||||
376
simple-mind-map/src/layouts/Fishbone.js
Normal file
376
simple-mind-map/src/layouts/Fishbone.js
Normal file
@ -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
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import Base from './Base';
|
import Base from './Base';
|
||||||
import {
|
import {
|
||||||
walk
|
walk
|
||||||
} from '../Utils'
|
} from '../utils'
|
||||||
import Node from '../Node'
|
import Node from '../Node'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -45,14 +45,10 @@ class LogicalStructure extends Base {
|
|||||||
computedBaseValue() {
|
computedBaseValue() {
|
||||||
walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
|
walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
|
||||||
// 遍历子节点前设置left、width、height
|
// 遍历子节点前设置left、width、height
|
||||||
if (!node.data) {
|
|
||||||
node.data = {}
|
|
||||||
}
|
|
||||||
// 创建节点
|
// 创建节点
|
||||||
let newNode = new Node({
|
let newNode = new Node({
|
||||||
uid: this.mindMap.uid++,
|
uid: this.mindMap.uid++,
|
||||||
originData: node,
|
data: node,
|
||||||
data: node.data,
|
|
||||||
renderer: this.renderer,
|
renderer: this.renderer,
|
||||||
mindMap: this.mindMap,
|
mindMap: this.mindMap,
|
||||||
draw: this.draw,
|
draw: this.draw,
|
||||||
195
simple-mind-map/src/layouts/MindMap.js
Normal file
195
simple-mind-map/src/layouts/MindMap.js
Normal file
@ -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
|
||||||
183
simple-mind-map/src/layouts/OrganizationStructure.js
Normal file
183
simple-mind-map/src/layouts/OrganizationStructure.js
Normal file
@ -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
|
||||||
11
simple-mind-map/src/layouts/Structure.js
Normal file
11
simple-mind-map/src/layouts/Structure.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* javascript comment
|
||||||
|
* @Author: 王林25
|
||||||
|
* @Date: 2021-04-12 17:21:04
|
||||||
|
* @Desc: 基类
|
||||||
|
*/
|
||||||
|
class Structure {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Structure
|
||||||
@ -1,134 +1,134 @@
|
|||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-06 14:13:17
|
* @Date: 2021-04-06 14:13:17
|
||||||
* @Desc: 深度优先遍历树
|
* @Desc: 深度优先遍历树
|
||||||
*/
|
*/
|
||||||
export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0) => {
|
export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0) => {
|
||||||
beforeCallback && beforeCallback(root, parent, isRoot, layerIndex)
|
beforeCallback && beforeCallback(root, parent, isRoot, layerIndex)
|
||||||
if (root.children && root.children.length > 0) {
|
if (root.children && root.children.length > 0) {
|
||||||
let _layerIndex = layerIndex + 1
|
let _layerIndex = layerIndex + 1
|
||||||
root.children.forEach((node) => {
|
root.children.forEach((node) => {
|
||||||
walk(node, root, beforeCallback, afterCallback, false, _layerIndex)
|
walk(node, root, beforeCallback, afterCallback, false, _layerIndex)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
afterCallback && afterCallback(root, parent, isRoot, layerIndex)
|
afterCallback && afterCallback(root, parent, isRoot, layerIndex)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-07 18:47:20
|
* @Date: 2021-04-07 18:47:20
|
||||||
* @Desc: 广度优先遍历树
|
* @Desc: 广度优先遍历树
|
||||||
*/
|
*/
|
||||||
export const bfsWalk = (root, callback) => {
|
export const bfsWalk = (root, callback) => {
|
||||||
callback(root)
|
callback(root)
|
||||||
let stack = [root]
|
let stack = [root]
|
||||||
while (stack.length) {
|
while (stack.length) {
|
||||||
let cur = stack.shift()
|
let cur = stack.shift()
|
||||||
if (cur.children && cur.children.length) {
|
if (cur.children && cur.children.length) {
|
||||||
cur.children.forEach((item) => {
|
cur.children.forEach((item) => {
|
||||||
stack.push(item)
|
stack.push(item)
|
||||||
callback(item)
|
callback(item)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-09 10:44:54
|
* @Date: 2021-04-09 10:44:54
|
||||||
* @Desc: 缩放图片尺寸
|
* @Desc: 缩放图片尺寸
|
||||||
*/
|
*/
|
||||||
export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
|
export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
|
||||||
let nRatio = width / height
|
let nRatio = width / height
|
||||||
let arr = []
|
let arr = []
|
||||||
if (maxWidth && maxHeight) {
|
if (maxWidth && maxHeight) {
|
||||||
if (width <= maxWidth && height <= maxHeight) {
|
if (width <= maxWidth && height <= maxHeight) {
|
||||||
arr = [width, height]
|
arr = [width, height]
|
||||||
} else {
|
} else {
|
||||||
let mRatio = maxWidth / maxHeight
|
let mRatio = maxWidth / maxHeight
|
||||||
if (nRatio > mRatio) { // 固定高度
|
if (nRatio > mRatio) { // 固定高度
|
||||||
arr = [nRatio * maxHeight, maxHeight]
|
arr = [nRatio * maxHeight, maxHeight]
|
||||||
} else { // 固定宽度
|
} else { // 固定宽度
|
||||||
arr = [maxWidth, maxWidth / nRatio]
|
arr = [maxWidth, maxWidth / nRatio]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (maxWidth) {
|
} else if (maxWidth) {
|
||||||
if (width <= maxWidth) {
|
if (width <= maxWidth) {
|
||||||
arr = [width, height]
|
arr = [width, height]
|
||||||
} else {
|
} else {
|
||||||
arr = [maxWidth, maxWidth / nRatio]
|
arr = [maxWidth, maxWidth / nRatio]
|
||||||
}
|
}
|
||||||
} else if (maxHeight) {
|
} else if (maxHeight) {
|
||||||
if (height <= maxHeight) {
|
if (height <= maxHeight) {
|
||||||
arr = [width, height]
|
arr = [width, height]
|
||||||
} else {
|
} else {
|
||||||
arr = [nRatio * maxHeight, maxHeight]
|
arr = [nRatio * maxHeight, maxHeight]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* javascript comment
|
* javascript comment
|
||||||
* @Author: 王林25
|
* @Author: 王林25
|
||||||
* @Date: 2021-04-09 10:18:42
|
* @Date: 2021-04-09 10:18:42
|
||||||
* @Desc: 缩放图片
|
* @Desc: 缩放图片
|
||||||
*/
|
*/
|
||||||
export const resizeImg = (imgUrl, maxWidth, maxHeight) => {
|
export const resizeImg = (imgUrl, maxWidth, maxHeight) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let img = new Image()
|
let img = new Image()
|
||||||
img.src = imgUrl
|
img.src = imgUrl
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
let arr = resizeImgSize(img.naturalWidth, img.naturalHeight, maxWidth, maxHeight)
|
let arr = resizeImgSize(img.naturalWidth, img.naturalHeight, maxWidth, maxHeight)
|
||||||
resolve(arr)
|
resolve(arr)
|
||||||
}
|
}
|
||||||
img.onerror = (e) => {
|
img.onerror = (e) => {
|
||||||
reject(e)
|
reject(e)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-04 12:26:56
|
* @Date: 2021-05-04 12:26:56
|
||||||
* @Desc: 从头html结构字符串里获取带换行符的字符串
|
* @Desc: 从头html结构字符串里获取带换行符的字符串
|
||||||
*/
|
*/
|
||||||
export const getStrWithBrFromHtml = (str) => {
|
export const getStrWithBrFromHtml = (str) => {
|
||||||
str = str.replace(/<br>/img, '\n')
|
str = str.replace(/<br>/img, '\n')
|
||||||
let el = document.createElement('div')
|
let el = document.createElement('div')
|
||||||
el.innerHTML = str
|
el.innerHTML = str
|
||||||
str = el.textContent
|
str = el.textContent
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-04 14:45:39
|
* @Date: 2021-05-04 14:45:39
|
||||||
* @Desc: 极简的深拷贝
|
* @Desc: 极简的深拷贝
|
||||||
*/
|
*/
|
||||||
export const simpleDeepClone = (data) => {
|
export const simpleDeepClone = (data) => {
|
||||||
try {
|
try {
|
||||||
return JSON.parse(JSON.stringify(data))
|
return JSON.parse(JSON.stringify(data))
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-04 14:40:11
|
* @Date: 2021-05-04 14:40:11
|
||||||
* @Desc: 复制渲染树数据
|
* @Desc: 复制渲染树数据
|
||||||
*/
|
*/
|
||||||
export const copyRenderTree = (tree, root) => {
|
export const copyRenderTree = (tree, root) => {
|
||||||
tree.data = simpleDeepClone(root.data)
|
tree.data = simpleDeepClone(root.data)
|
||||||
tree.children = []
|
tree.children = []
|
||||||
if (root.children.length > 0) {
|
if (root.children.length > 0) {
|
||||||
root.children.forEach((item, index) => {
|
root.children.forEach((item, index) => {
|
||||||
tree.children[index] = copyRenderTree({}, item)
|
tree.children[index] = copyRenderTree({}, item)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return tree;
|
return tree;
|
||||||
}
|
}
|
||||||
BIN
src/package/.DS_Store
vendored
BIN
src/package/.DS_Store
vendored
Binary file not shown.
@ -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>
|
|
||||||
68
src/store.js
68
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
|
|
||||||
0
.DS_Store → web/.DS_Store
vendored
0
.DS_Store → web/.DS_Store
vendored
@ -8,9 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@svgdotjs/svg.js": "^3.0.16",
|
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"deepmerge": "^1.5.2",
|
|
||||||
"element-ui": "^2.15.1",
|
"element-ui": "^2.15.1",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-router": "^3.5.1",
|
"vue-router": "^3.5.1",
|
||||||
@ -10,8 +10,6 @@
|
|||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</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>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
0
src/.DS_Store → web/src/.DS_Store
vendored
0
src/.DS_Store → web/src/.DS_Store
vendored
@ -31,8 +31,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ossUpLoader from "@/utils/oss";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ImgUpload",
|
name: "ImgUpload",
|
||||||
data() {
|
data() {
|
||||||
@ -85,23 +83,7 @@ export default {
|
|||||||
*/
|
*/
|
||||||
async uploadImg(file) {
|
async uploadImg(file) {
|
||||||
this.loading = true;
|
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",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -3,19 +3,23 @@
|
|||||||
<div class="mindMapContainer" ref="mindMapContainer"></div>
|
<div class="mindMapContainer" ref="mindMapContainer"></div>
|
||||||
<Outline></Outline>
|
<Outline></Outline>
|
||||||
<Style></Style>
|
<Style></Style>
|
||||||
<BaseStyle :data="mindMapData" :mindMap="mindMap" @change="changeThemeConfig"></BaseStyle>
|
<BaseStyle
|
||||||
|
:data="mindMapData"
|
||||||
|
:mindMap="mindMap"
|
||||||
|
@change="changeThemeConfig"
|
||||||
|
></BaseStyle>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MindMap from "@/package/mind-map";
|
import MindMap from 'simple-mind-map'
|
||||||
import Outline from "./Outline";
|
import Outline from './Outline'
|
||||||
import Style from "./Style";
|
import Style from './Style'
|
||||||
import BaseStyle from "./BaseStyle";
|
import BaseStyle from './BaseStyle'
|
||||||
import exampleData from '@/package/mind-map/example/exampleData';
|
import exampleData from 'simple-mind-map/example/exampleData'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Edit",
|
name: 'Edit',
|
||||||
components: {
|
components: {
|
||||||
Outline,
|
Outline,
|
||||||
Style,
|
Style,
|
||||||
@ -24,13 +28,13 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mindMap: null,
|
mindMap: null,
|
||||||
mindMapData: exampleData
|
mindMapData: exampleData,
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
this.init()
|
||||||
this.$bus.$on("execCommand", this.execCommand);
|
this.$bus.$on('execCommand', this.execCommand)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
@ -39,35 +43,35 @@ export default {
|
|||||||
* @Desc: 初始化
|
* @Desc: 初始化
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
let { root, layout, theme } = this.mindMapData;
|
let { root, layout, theme } = this.mindMapData
|
||||||
this.mindMap = new MindMap({
|
this.mindMap = new MindMap({
|
||||||
el: this.$refs.mindMapContainer,
|
el: this.$refs.mindMapContainer,
|
||||||
data: root,
|
data: root,
|
||||||
layout: layout,
|
layout: layout,
|
||||||
theme: theme.template,
|
theme: theme.template,
|
||||||
themeConfig: theme.config,
|
themeConfig: theme.config,
|
||||||
});
|
})
|
||||||
this.mindMap.on("node_active", (...args) => {
|
this.mindMap.on('node_active', (...args) => {
|
||||||
this.$bus.$emit("node_active", ...args);
|
this.$bus.$emit('node_active', ...args)
|
||||||
});
|
})
|
||||||
this.mindMap.on("data_change", (...args) => {
|
this.mindMap.on('data_change', (...args) => {
|
||||||
this.$bus.$emit("data_change", ...args);
|
this.$bus.$emit('data_change', ...args)
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-05 13:49:25
|
* @Date: 2021-05-05 13:49:25
|
||||||
* @Desc: 修改主题配置
|
* @Desc: 修改主题配置
|
||||||
*/
|
*/
|
||||||
changeThemeConfig() {
|
changeThemeConfig() {
|
||||||
this.mindMap.setThemeConfig(this.mindMapData.theme.config)
|
this.mindMap.setThemeConfig(this.mindMapData.theme.config)
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Author: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-05-05 13:32:11
|
* @Date: 2021-05-05 13:32:11
|
||||||
* @Desc: 重新渲染
|
* @Desc: 重新渲染
|
||||||
*/
|
*/
|
||||||
reRender() {
|
reRender() {
|
||||||
this.mindMap.render()
|
this.mindMap.render()
|
||||||
@ -79,10 +83,10 @@ export default {
|
|||||||
* @Desc: 执行命令
|
* @Desc: 执行命令
|
||||||
*/
|
*/
|
||||||
execCommand(...args) {
|
execCommand(...args) {
|
||||||
this.mindMap.execCommand(...args);
|
this.mindMap.execCommand(...args)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@ -1,14 +1,11 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
import IndexPage from '@/pages/Index/Index'
|
|
||||||
import EditPage from '@/pages/Edit/Index'
|
import EditPage from '@/pages/Edit/Index'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', name: 'Index', component: IndexPage },
|
{ path: '/', name: 'Edit', component: EditPage }
|
||||||
{ path: '/edit/:id', name: 'Edit', component: EditPage }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
46
web/src/store.js
Normal file
46
web/src/store.js
Normal file
@ -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
|
||||||
Loading…
x
Reference in New Issue
Block a user