diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js
index e44a0c68..ad243813 100644
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -16,19 +16,23 @@ export default {
"children": [{
"data": {
"text": "子节点",
- "image": "http://aliyuncdn.lxqnsys.com/whbm/enJFNMHnedQTYTESGfDkctCp2",
- "imageTitle": "图片名称",
- "imageSize": {
- "width": 1000,
- "height": 563
- },
- "icon": ['a'],
- "tag": ["标签1", "标签2"],
- "hyperlink": "http://lxqnsys.com/",
- "hyperlinkTitle": "理想青年实验室",
- "note": "理想青年实验室\n一个有意思的角落"
+ // "image": "http://aliyuncdn.lxqnsys.com/whbm/enJFNMHnedQTYTESGfDkctCp2",
+ // "imageTitle": "图片名称",
+ // "imageSize": {
+ // "width": 1000,
+ // "height": 563
+ // },
+ // "icon": ['priority_1'],
+ // "tag": ["标签1", "标签2"],
+ // "hyperlink": "http://lxqnsys.com/",
+ // "hyperlinkTitle": "理想青年实验室",
+ // "note": "理想青年实验室\n一个有意思的角落"
},
"children": []
+ }, {
+ "data": {
+ "text": "子节点",
+ }
}]
}]
},
diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
index c774c823..47f910e4 100644
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -153,6 +153,15 @@ class MindMap {
this.render()
}
+ /**
+ * @Author: 王林
+ * @Date: 2021-06-25 23:52:37
+ * @Desc: 获取当前主题
+ */
+ getTheme() {
+ return this.opt.theme;
+ }
+
/**
* @Author: 王林
* @Date: 2021-05-05 13:50:17
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index d919ee2f..9ccbdf36 100644
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -212,16 +212,13 @@ class Node {
if (!_data.icon || _data.icon.length <= 0) {
return [];
}
- let node = SVG('').size(this.themeConfig.iconSize, this.themeConfig.iconSize)
- return [{
- node,
- width: this.themeConfig.iconSize,
- height: this.themeConfig.iconSize
- }, {
- node: node.clone(),
- width: this.themeConfig.iconSize,
- height: this.themeConfig.iconSize
- }]
+ return _data.icon.map((item) => {
+ return {
+ node: SVG(iconsSvg.getNodeIconListIcon(item)).size(this.themeConfig.iconSize, this.themeConfig.iconSize),
+ width: this.themeConfig.iconSize,
+ height: this.themeConfig.iconSize
+ };
+ });
}
/**
@@ -328,6 +325,7 @@ class Node {
border-radius: 5px;
box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
display: none;
+ background-color: #fff;
`
el.innerText = this.nodeData.data.note
document.body.appendChild(el)
@@ -524,7 +522,6 @@ class Node {
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
expand: !this.nodeData.data.expand
})
- this.mindMap.render()
this.mindMap.emit('expand_btn_click', this)
})
g.add(fillNode)
@@ -571,7 +568,24 @@ class Node {
[prop]: value
})
}
- this.mindMap.render()
+ }
+
+ /**
+ * @Author: 王林
+ * @Date: 2021-06-22 22:04:02
+ * @Desc: 获取数据
+ */
+ getData(key) {
+ return key ? this.nodeData.data[key] || '' : this.nodeData.data;
+ }
+
+ /**
+ * @Author: 王林
+ * @Date: 2021-06-22 22:12:01
+ * @Desc: 设置数据
+ */
+ setData(data = {}) {
+ this.mindMap.execCommand('UPDATE_NODE_DATA', this, data)
}
}
diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js
index d93663bf..b7146b8e 100644
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -125,7 +125,7 @@ class Render {
this.insertChildNode()
} else {
let index = this.getNodeIndex(first)
- first.parent.originData.children.splice(index + 1, 0, {
+ first.parent.nodeData.children.splice(index + 1, 0, {
"data": {
"text": "分支主题",
"expand": true
@@ -146,7 +146,7 @@ class Render {
return;
}
let first = this.activeNodeList[0]
- first.originData.children.push({
+ first.nodeData.children.push({
"data": {
"text": "分支主题",
"expand": true
@@ -168,11 +168,11 @@ class Render {
this.activeNodeList.forEach((item) => {
if (item.isRoot) {
item.children = []
- item.originData.children = []
+ item.nodeData.children = []
} else {
let index = this.getNodeIndex(item)
item.parent.children.splice(index, 1)
- item.parent.originData.children.splice(index, 1)
+ item.parent.nodeData.children.splice(index, 1)
}
})
this.clearActive()
@@ -188,6 +188,7 @@ class Render {
Object.keys(data).forEach((key) => {
node.nodeData.data[key] = data[key]
})
+ this.mindMap.render()
}
}
diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js
index 76c19754..478dc8dd 100644
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -1,25 +1,4 @@
-const tagColorList = [
- {
- color: 'rgb(77, 65, 0)',
- background: 'rgb(255, 244, 179)'
- },
- {
- color: 'rgb(0, 50, 77)',
- background: 'rgb(179, 229, 255)'
- },
- {
- color: 'rgb(77, 0, 73)',
- background: 'rgb(255, 179, 251)'
- },
- {
- color: 'rgb(57, 77, 0)',
- background: 'rgb(236, 255, 179)'
- },
- {
- color: 'rgb(0, 77, 47)',
- background: 'rgb(179, 255, 226)'
- }
-]
+import { tagColorList } from './utils/constant';
const rootProp = ['paddingX', 'paddingY']
/**
@@ -34,11 +13,13 @@ class Style {
* @Desc: 设置背景样式
*/
static setBackgroundStyle(el, themeConfig) {
- let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
+ let { backgroundColor, backgroundImage, backgroundRepeat, backgroundSize, backgroundPosition } = themeConfig
el.style.backgroundColor = backgroundColor
if (backgroundImage) {
el.style.backgroundImage = `url(${backgroundImage})`
el.style.backgroundRepeat = backgroundRepeat
+ el.style.backgroundSize = backgroundSize
+ el.style.backgroundPosition = backgroundPosition
}
}
diff --git a/simple-mind-map/src/assets/blueSky.jpg b/simple-mind-map/src/assets/blueSky.jpg
new file mode 100644
index 00000000..0e4ebc23
Binary files /dev/null and b/simple-mind-map/src/assets/blueSky.jpg differ
diff --git a/simple-mind-map/src/assets/brainImpairedPink.jpg b/simple-mind-map/src/assets/brainImpairedPink.jpg
new file mode 100644
index 00000000..62448d3e
Binary files /dev/null and b/simple-mind-map/src/assets/brainImpairedPink.jpg differ
diff --git a/simple-mind-map/src/assets/classic.jpg b/simple-mind-map/src/assets/classic.jpg
new file mode 100644
index 00000000..bf6f2490
Binary files /dev/null and b/simple-mind-map/src/assets/classic.jpg differ
diff --git a/simple-mind-map/src/assets/classic2.jpg b/simple-mind-map/src/assets/classic2.jpg
new file mode 100644
index 00000000..c28e30c8
Binary files /dev/null and b/simple-mind-map/src/assets/classic2.jpg differ
diff --git a/simple-mind-map/src/assets/classic3.jpg b/simple-mind-map/src/assets/classic3.jpg
new file mode 100644
index 00000000..44b1d017
Binary files /dev/null and b/simple-mind-map/src/assets/classic3.jpg differ
diff --git a/simple-mind-map/src/assets/classicBlue.jpg b/simple-mind-map/src/assets/classicBlue.jpg
new file mode 100644
index 00000000..efbf669a
Binary files /dev/null and b/simple-mind-map/src/assets/classicBlue.jpg differ
diff --git a/simple-mind-map/src/assets/classicGreen.jpg b/simple-mind-map/src/assets/classicGreen.jpg
new file mode 100644
index 00000000..4b092a0b
Binary files /dev/null and b/simple-mind-map/src/assets/classicGreen.jpg differ
diff --git a/simple-mind-map/src/assets/dark.jpg b/simple-mind-map/src/assets/dark.jpg
new file mode 100644
index 00000000..2d8013ac
Binary files /dev/null and b/simple-mind-map/src/assets/dark.jpg differ
diff --git a/simple-mind-map/src/assets/default.jpg b/simple-mind-map/src/assets/default.jpg
new file mode 100644
index 00000000..e90320c3
Binary files /dev/null and b/simple-mind-map/src/assets/default.jpg differ
diff --git a/simple-mind-map/src/assets/earthYellow.jpg b/simple-mind-map/src/assets/earthYellow.jpg
new file mode 100644
index 00000000..7bc65c5e
Binary files /dev/null and b/simple-mind-map/src/assets/earthYellow.jpg differ
diff --git a/simple-mind-map/src/assets/freshGreen.jpg b/simple-mind-map/src/assets/freshGreen.jpg
new file mode 100644
index 00000000..2c48339a
Binary files /dev/null and b/simple-mind-map/src/assets/freshGreen.jpg differ
diff --git a/simple-mind-map/src/assets/freshRed.jpg b/simple-mind-map/src/assets/freshRed.jpg
new file mode 100644
index 00000000..e5192b78
Binary files /dev/null and b/simple-mind-map/src/assets/freshRed.jpg differ
diff --git a/simple-mind-map/src/assets/romanticPurple.jpg b/simple-mind-map/src/assets/romanticPurple.jpg
new file mode 100644
index 00000000..2a358966
Binary files /dev/null and b/simple-mind-map/src/assets/romanticPurple.jpg differ
diff --git a/simple-mind-map/src/svg/icons.js b/simple-mind-map/src/svg/icons.js
index 2454f489..58d4520c 100644
--- a/simple-mind-map/src/svg/icons.js
+++ b/simple-mind-map/src/svg/icons.js
@@ -1,10 +1,299 @@
// 超链接图标
-const hyperlink = ''
+const hyperlink = ''
// 备注图标
-const note = ''
+const note = ''
+
+// 节点icon
+export const nodeIconList = [
+ {
+ name: '优先级图标',
+ type: 'priority',
+ list: [
+ {
+ name: '1',
+ icon: ``
+ },
+ {
+ name: '2',
+ icon: ``
+ },
+ {
+ name: '3',
+ icon: ``
+ },
+ {
+ name: '4',
+ icon: ``
+ },
+ {
+ name: '5',
+ icon: ``
+ },
+ {
+ name: '6',
+ icon: ``
+ },
+ {
+ name: '7',
+ icon: ``
+ },
+ {
+ name: '8',
+ icon: ``
+ },
+ {
+ name: '9',
+ icon: ``
+ },
+ {
+ name: '10',
+ icon: ``
+ }
+ ]
+ },
+ {
+ name: '进度图标',
+ type: 'progress',
+ list: [
+ {
+ name: '1',
+ icon: ``
+ },
+ {
+ name: '2',
+ icon: ``
+ },
+ {
+ name: '3',
+ icon: ``
+ },
+ {
+ name: '4',
+ icon: ``
+ },
+ {
+ name: '5',
+ icon: ``
+ },
+ {
+ name: '6',
+ icon: ``
+ },
+ {
+ name: '7',
+ icon: ``
+ },
+ {
+ name: '8',
+ icon: ``
+ }
+ ]
+ },
+ {
+ name: '表情图标',
+ type: 'expression',
+ list: [
+ {
+ name: '1',
+ icon: ``
+ },
+ {
+ name: '2',
+ icon: ``
+ },
+ {
+ name: '3',
+ icon: ``
+ },
+ {
+ name: '4',
+ icon: ``
+ },
+ {
+ name: '5',
+ icon: ``
+ },
+ {
+ name: '6',
+ icon: ``
+ },
+ {
+ name: '7',
+ icon: ``
+ },
+ {
+ name: '8',
+ icon: ``
+ },
+ {
+ name: '9',
+ icon: ``
+ },
+ {
+ name: '10',
+ icon: ``
+ },
+ {
+ name: '11',
+ icon: ``
+ },
+ {
+ name: '12',
+ icon: ``
+ },
+ {
+ name: '13',
+ icon: ``
+ },
+ {
+ name: '14',
+ icon: ``
+ },
+ {
+ name: '15',
+ icon: ``
+ },
+ {
+ name: '16',
+ icon: ``
+ },
+ {
+ name: '17',
+ icon: ``
+ },
+ {
+ name: '18',
+ icon: ``
+ },
+ {
+ name: '19',
+ icon: ``
+ },
+ {
+ name: '20',
+ icon: ``
+ }
+ ]
+ },
+ {
+ name: '标记图标',
+ type: 'sign',
+ list: [
+ {
+ name: '1',
+ icon: ``
+ },
+ {
+ name: '2',
+ icon: ``
+ },
+ {
+ name: '3',
+ icon: ``
+ },
+ {
+ name: '4',
+ icon: ``
+ },
+ {
+ name: '5',
+ icon: ``
+ },
+ {
+ name: '6',
+ icon: ``
+ },
+ {
+ name: '7',
+ icon: ``
+ },
+ {
+ name: '8',
+ icon: ``
+ },
+ {
+ name: '9',
+ icon: ``
+ },
+ {
+ name: '10',
+ icon: ``
+ },
+ {
+ name: '11',
+ icon: ``
+ },
+ {
+ name: '12',
+ icon: ``
+ },
+ {
+ name: '13',
+ icon: ``
+ },
+ {
+ name: '14',
+ icon: ``
+ },
+ {
+ name: '15',
+ icon: ``
+ },
+ {
+ name: '16',
+ icon: ``
+ },
+ {
+ name: '17',
+ icon: ``
+ },
+ {
+ name: '18',
+ icon: ``
+ },
+ {
+ name: '19',
+ icon: ``
+ },
+ {
+ name: '20',
+ icon: ``
+ },
+ {
+ name: '21',
+ icon: ``
+ },
+ {
+ name: '22',
+ icon: ``
+ },
+ {
+ name: '23',
+ icon: ``
+ }
+ ]
+ }
+]
+
+/**
+ * @Author: 王林
+ * @Date: 2021-06-23 22:36:56
+ * @Desc: 获取nodeIconList icon内容
+ */
+const getNodeIconListIcon = (name) => {
+ let arr = name.split('_')
+ let typeData = nodeIconList.find((item) => {
+ return item.type === arr[0];
+ })
+ return typeData.list.find((item) => {
+ return item.name === arr[1]
+ }).icon;
+}
export default {
hyperlink,
- note
+ note,
+ nodeIconList,
+ getNodeIconListIcon
}
\ No newline at end of file
diff --git a/simple-mind-map/src/themes/classicBlue.js b/simple-mind-map/src/themes/classicBlue.js
new file mode 100644
index 00000000..c84a669f
--- /dev/null
+++ b/simple-mind-map/src/themes/classicBlue.js
@@ -0,0 +1,43 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
+ * @Desc: 经典蓝
+ */
+export default merge(defaultTheme, {
+ // 连线的颜色
+ lineColor: 'rgb(51, 51, 51)',
+ // 连线的粗细
+ lineWidth: 2,
+ // 背景颜色
+ backgroundColor: 'rgb(239, 248, 250)',
+ // 根节点样式
+ root: {
+ fillColor: 'rgb(255, 255, 255)',
+ color: '#222',
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ },
+ // 二级节点样式
+ second: {
+ fillColor: 'rgb(255, 255, 255)',
+ color: '#222',
+ borderColor: 'rgb(255, 255, 255)',
+ borderWidth: 1,
+ fontSize: 14,
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ },
+ // 三级及以下节点样式
+ node: {
+ fontSize: 12,
+ color: '#333',
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ }
+})
\ No newline at end of file
diff --git a/simple-mind-map/src/themes/classicGreen.js b/simple-mind-map/src/themes/classicGreen.js
new file mode 100644
index 00000000..6c412b5c
--- /dev/null
+++ b/simple-mind-map/src/themes/classicGreen.js
@@ -0,0 +1,41 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
+ * @Desc: 经典绿
+ */
+export default merge(defaultTheme, {
+ // 连线的颜色
+ lineColor: 'rgb(123, 199, 120)',
+ // 背景颜色
+ backgroundColor: 'rgb(236, 245, 231)',
+ // 根节点样式
+ root: {
+ fillColor: 'rgb(253, 244, 217)',
+ color: '#222',
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ },
+ // 二级节点样式
+ second: {
+ fillColor: 'rgb(253, 244, 217)',
+ color: '#222',
+ borderColor: 'rgb(242, 200, 104)',
+ borderWidth: 1,
+ fontSize: 14,
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ },
+ // 三级及以下节点样式
+ node: {
+ fontSize: 12,
+ color: '#333',
+ active: {
+ borderColor: 'rgb(94, 199, 248)'
+ }
+ }
+})
\ No newline at end of file
diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js
index 117422cf..81c7997e 100644
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -20,9 +20,13 @@ export default {
// 背景颜色
backgroundColor: '#fafafa',
// 背景图片
- backgroundImage: '',
+ backgroundImage: 'none',
// 背景重复
- backgroundRepeat: 'none',
+ backgroundRepeat: 'no-repeat',
+ // 背景图像大小
+ backgroundSize: 'auto',
+ // 背景图像定位
+ backgroundPosition: '0% 0%',
// 根节点样式
root: {
fillColor: '#549688',
diff --git a/simple-mind-map/src/themes/index.js b/simple-mind-map/src/themes/index.js
index 60fd2042..70f5566e 100644
--- a/simple-mind-map/src/themes/index.js
+++ b/simple-mind-map/src/themes/index.js
@@ -9,6 +9,8 @@ import classic from './classic';
import classic2 from './classic2';
import classic3 from './classic3';
import dark from './dark';
+import classicGreen from './classicGreen';
+import classicBlue from './classicBlue';
export default {
default: defaultTheme,
@@ -21,5 +23,7 @@ export default {
classic,
classic2,
classic3,
- dark
+ dark,
+ classicGreen,
+ classicBlue
}
\ No newline at end of file
diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js
new file mode 100644
index 00000000..69113362
--- /dev/null
+++ b/simple-mind-map/src/utils/constant.js
@@ -0,0 +1,100 @@
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 21:42:07
+ * @Desc: 标签颜色列表
+ */
+export const tagColorList = [
+ {
+ color: 'rgb(77, 65, 0)',
+ background: 'rgb(255, 244, 179)'
+ },
+ {
+ color: 'rgb(0, 50, 77)',
+ background: 'rgb(179, 229, 255)'
+ },
+ {
+ color: 'rgb(77, 0, 73)',
+ background: 'rgb(255, 179, 251)'
+ },
+ {
+ color: 'rgb(57, 77, 0)',
+ background: 'rgb(236, 255, 179)'
+ },
+ {
+ color: 'rgb(0, 77, 47)',
+ background: 'rgb(179, 255, 226)'
+ }
+]
+
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:58:42
+ * @Desc: 主题列表
+ */
+export const themeList = [
+ {
+ name: '默认',
+ value: 'default',
+ img: require('../assets/default.jpg')
+ },
+ {
+ name: '脑图经典',
+ value: 'classic',
+ img: require('../assets/classic.jpg')
+ },
+ {
+ name: '脑图经典2',
+ value: 'classic2',
+ img: require('../assets/classic2.jpg')
+ },
+ {
+ name: '脑图经典3',
+ value: 'classic3',
+ img: require('../assets/classic3.jpg')
+ },
+ {
+ name: '经典绿',
+ value: 'classicGreen',
+ img: require('../assets/classicGreen.jpg')
+ },
+ {
+ name: '经典蓝',
+ value: 'classicBlue',
+ img: require('../assets/classicBlue.jpg')
+ },
+ {
+ name: '天空蓝',
+ value: 'blueSky',
+ img: require('../assets/blueSky.jpg')
+ },
+ {
+ name: '脑残粉',
+ value: 'brainImpairedPink',
+ img: require('../assets/brainImpairedPink.jpg')
+ },
+ {
+ name: '暗色',
+ value: 'dark',
+ img: require('../assets/dark.jpg')
+ },
+ {
+ name: '泥土黄',
+ value: 'earthYellow',
+ img: require('../assets/earthYellow.jpg')
+ },
+ {
+ name: '清新绿',
+ value: 'freshGreen',
+ img: require('../assets/freshGreen.jpg')
+ },
+ {
+ name: '清新红',
+ value: 'freshRed',
+ img: require('../assets/freshRed.jpg')
+ },
+ {
+ name: '浪漫紫',
+ value: 'romanticPurple',
+ img: require('../assets/romanticPurple.jpg')
+ }
+]
\ No newline at end of file
diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index d658f2e2..9588c686 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -125,7 +125,7 @@ export const simpleDeepClone = (data) => {
export const copyRenderTree = (tree, root) => {
tree.data = simpleDeepClone(root.data)
tree.children = []
- if (root.children.length > 0) {
+ if (root.children && root.children.length > 0) {
root.children.forEach((item, index) => {
tree.children[index] = copyRenderTree({}, item)
})