coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-23 03:17:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'feature' into main

Browse Source
This commit is contained in:
wanglin2 2023-06-21 15:56:20 +08:00
commit 25243e2053
23 changed files with 551 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

File diff suppressed because one or more lines are too long

122
simple-mind-map/index.js
View File

@ -11,127 +11,7 @@ import { layoutValueList, CONSTANTS } from './src/constants/constant'
import { SVG } from '@svgdotjs/svg.js'
import { simpleDeepClone } from './src/utils'
import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'
// 默认选项配置
const defaultOpt = {
// 是否只读
readonly: false,
// 布局
layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
// 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
fishboneDeg: 45,
// 主题
theme: 'default', // 内置主题：default（默认主题）
// 主题配置，会和所选择的主题进行合并
themeConfig: {},
// 放大缩小的增量比例
scaleRatio: 0.1,
// 最多显示几个标签
maxTag: 5,
// 导出图片时的内边距
exportPadding: 20,
// 展开收缩按钮尺寸
expandBtnSize: 20,
// 节点里图片和文字的间距
imgTextMargin: 5,
// 节点里各种文字信息的间距，如图标和文字的间距
textContentMargin: 2,
// 多选节点时鼠标移动到边缘时的画布移动偏移量
selectTranslateStep: 3,
// 多选节点时鼠标移动距边缘多少距离时开始偏移
selectTranslateLimit: 20,
// 自定义节点备注内容显示
customNoteContentShow: null,
/*
{
show(){},
hide(){}
}
*/
// 是否开启节点自由拖拽
enableFreeDrag: false,
// 水印配置
watermarkConfig: {
text: '',
lineSpacing: 100,
textSpacing: 100,
angle: 30,
textStyle: {
color: '#999',
opacity: 0.5,
fontSize: 14
}
},
// 达到该宽度文本自动换行
textAutoWrapWidth: 500,
// 自定义鼠标滚轮事件处理
// 可以传一个函数，回调参数为事件对象
customHandleMousewheel: null,
// 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
mousewheelMoveStep: 100,
// 默认插入的二级节点的文字
defaultInsertSecondLevelNodeText: '二级节点',
// 默认插入的二级以下节点的文字
defaultInsertBelowSecondLevelNodeText: '分支主题',
// 展开收起按钮的颜色
expandBtnStyle: {
color: '#808080',
fill: '#fff'
},
// 自定义展开收起按钮的图标
expandBtnIcon: {
open: '',// svg字符串
close: ''
},
// 是否只有当鼠标在画布内才响应快捷键事件
enableShortcutOnlyWhenMouseInSvg: true,
// 是否开启节点动画过渡
enableNodeTransitionMove: true,
// 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
nodeTransitionMoveDuration: 300,
// 初始根节点的位置
initRootNodePosition: null,
// 导出png、svg、pdf时的图形内边距
exportPaddingX: 10,
exportPaddingY: 10,
// 节点文本编辑框的z-index
nodeTextEditZIndex: 3000,
// 节点备注浮层的z-index
nodeNoteTooltipZIndex: 3000,
// 是否在点击了画布外的区域时结束节点文本的编辑状态
isEndNodeTextEditOnClickOuter: true,
// 最大历史记录数
maxHistoryCount: 1000,
// 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
alwaysShowExpandBtn: false,
// 扩展节点可插入的图标
iconList: [
// {
// name: '',// 分组名称
// type: '',// 分组的值
// list: [// 分组下的图标列表
// {
// name: '',// 图标名称
// icon:''// 图标，可以传svg或图片
// }
// ]
// }
],
// 节点最大缓存数量
maxNodeCacheCount: 1000,
// 关联线默认文字
defaultAssociativeLineText: '关联',
// 思维导图适应画布大小时的内边距
fitPadding: 50,
// 是否开启按住ctrl键多选节点功能
enableCtrlKeyNodeSelection: true,
// 设置为左键多选节点，右键拖动画布
useLeftKeySelectionRightKeyDrag: false,
// 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
beforeTextEdit: null
}
import { defaultOpt } from './src/constants/defaultOptions'
// 思维导图
class MindMap {

2
simple-mind-map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
"version": "0.6.2",
"version": "0.6.3",
"description": "一个简单的web在线思维导图",
"authors": [
{

126
simple-mind-map/src/constants/defaultOptions.js Normal file
View File

@ -0,0 +1,126 @@
import { CONSTANTS } from './constant'
// 默认选项配置
export const defaultOpt = {
// 是否只读
readonly: false,
// 布局
layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
// 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
fishboneDeg: 45,
// 主题
theme: 'default', // 内置主题：default（默认主题）
// 主题配置，会和所选择的主题进行合并
themeConfig: {},
// 放大缩小的增量比例
scaleRatio: 0.1,
// 最多显示几个标签
maxTag: 5,
// 导出图片时的内边距
exportPadding: 20,
// 展开收缩按钮尺寸
expandBtnSize: 20,
// 节点里图片和文字的间距
imgTextMargin: 5,
// 节点里各种文字信息的间距，如图标和文字的间距
textContentMargin: 2,
// 多选节点时鼠标移动到边缘时的画布移动偏移量
selectTranslateStep: 3,
// 多选节点时鼠标移动距边缘多少距离时开始偏移
selectTranslateLimit: 20,
// 自定义节点备注内容显示
customNoteContentShow: null,
/*
{
show(){},
hide(){}
}
*/
// 是否开启节点自由拖拽
enableFreeDrag: false,
// 水印配置
watermarkConfig: {
text: '',
lineSpacing: 100,
textSpacing: 100,
angle: 30,
textStyle: {
color: '#999',
opacity: 0.5,
fontSize: 14
}
},
// 达到该宽度文本自动换行
textAutoWrapWidth: 500,
// 自定义鼠标滚轮事件处理
// 可以传一个函数，回调参数为事件对象
customHandleMousewheel: null,
// 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM, // zoom（放大缩小）、move（上下移动）
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
mousewheelMoveStep: 100,
// 默认插入的二级节点的文字
defaultInsertSecondLevelNodeText: '二级节点',
// 默认插入的二级以下节点的文字
defaultInsertBelowSecondLevelNodeText: '分支主题',
// 展开收起按钮的颜色
expandBtnStyle: {
color: '#808080',
fill: '#fff'
},
// 自定义展开收起按钮的图标
expandBtnIcon: {
open: '', // svg字符串
close: ''
},
// 是否只有当鼠标在画布内才响应快捷键事件
enableShortcutOnlyWhenMouseInSvg: true,
// 是否开启节点动画过渡
enableNodeTransitionMove: true,
// 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
nodeTransitionMoveDuration: 300,
// 初始根节点的位置
initRootNodePosition: null,
// 导出png、svg、pdf时的图形内边距
exportPaddingX: 10,
exportPaddingY: 10,
// 节点文本编辑框的z-index
nodeTextEditZIndex: 3000,
// 节点备注浮层的z-index
nodeNoteTooltipZIndex: 3000,
// 是否在点击了画布外的区域时结束节点文本的编辑状态
isEndNodeTextEditOnClickOuter: true,
// 最大历史记录数
maxHistoryCount: 1000,
// 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
alwaysShowExpandBtn: false,
// 扩展节点可插入的图标
iconList: [
// {
// name: '',// 分组名称
// type: '',// 分组的值
// list: [// 分组下的图标列表
// {
// name: '',// 图标名称
// icon:''// 图标，可以传svg或图片
// }
// ]
// }
],
// 节点最大缓存数量
maxNodeCacheCount: 1000,
// 关联线默认文字
defaultAssociativeLineText: '关联',
// 思维导图适应画布大小时的内边距
fitPadding: 50,
// 是否开启按住ctrl键多选节点功能
enableCtrlKeyNodeSelection: true,
// 设置为左键多选节点，右键拖动画布
useLeftKeySelectionRightKeyDrag: false,
// 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
beforeTextEdit: null,
// 是否开启自定义节点内容
isUseCustomNodeContent: false,
// 自定义返回节点内容的方法
customCreateNodeContent: null
}

6
simple-mind-map/src/core/render/Render.js
View File

@ -425,6 +425,9 @@ class Render {
let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
let first = list[0]
if (first.isGeneralization) {
return
}
if (first.isRoot) {
this.insertChildNode(openEdit, appointNodes, appointData)
} else {
@ -455,6 +458,9 @@ class Render {
let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
list.forEach(node => {
if (node.isGeneralization) {
return
}
if (!node.nodeData.children) {
node.nodeData.children = []
}

9
simple-mind-map/src/core/render/TextEdit.js
View File

@ -66,10 +66,15 @@ export default class TextEdit {
// 显示文本编辑框
async show(node) {
if (typeof this.mindMap.opt.beforeTextEdit === 'function') {
// 使用了自定义节点内容那么不响应编辑事件
if (node.isUseCustomNodeContent()) {
return
}
let { beforeTextEdit } = this.mindMap.opt
if (typeof beforeTextEdit === 'function') {
let isShow = false
try {
isShow = await this.mindMap.opt.beforeTextEdit(node)
isShow = await beforeTextEdit(node)
} catch (error) {
isShow = false
}

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

@ -1,7 +1,7 @@
import Style from './Style'
import Shape from './Shape'
import { asyncRun } from '../../../utils'
import { G, Rect } from '@svgdotjs/svg.js'
import { asyncRun, nodeToHTML } from '../../../utils'
import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js'
import nodeGeneralizationMethods from './nodeGeneralization'
import nodeExpandBtnMethods from './nodeExpandBtn'
import nodeCommandWrapsMethods from './nodeCommandWraps'
@ -59,6 +59,7 @@ class Node {
this.group = null
this.shapeNode = null // 节点形状节点
// 节点内容对象
this._customNodeContent = null
this._imgData = null
this._iconData = null
this._textData = null
@ -154,6 +155,13 @@ class Node {
// 创建节点的各个内容对象数据
createNodeData() {
// 自定义节点内容
let { isUseCustomNodeContent, customCreateNodeContent } = this.mindMap.opt
if (isUseCustomNodeContent && customCreateNodeContent) {
this._customNodeContent = customCreateNodeContent(this)
}
// 如果没有返回内容，那么还是使用内置的节点内容
if (this._customNodeContent) return
this._imgData = this.createImgNode()
this._iconData = this.createIconNode()
this._textData = this.createTextNode()
@ -176,6 +184,14 @@ class Node {
// 计算节点尺寸信息
getNodeRect() {
// 自定义节点内容
if (this.isUseCustomNodeContent()) {
let rect = this.measureCustomNodeContentSize(this._customNodeContent)
return {
width: rect.width,
height: rect.height
}
}
// 宽高
let imgContentWidth = 0
let imgContentHeight = 0
@ -266,6 +282,15 @@ class Node {
if (this.isGeneralization && this.generalizationBelongNode) {
this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
}
// 如果存在自定义节点内容，那么使用自定义节点内容
if (this.isUseCustomNodeContent()) {
let foreignObject = new ForeignObject()
foreignObject.width(width)
foreignObject.height(height)
foreignObject.add(SVG(this._customNodeContent))
this.group.add(foreignObject)
return
}
// 图片节点
let imgHeight = 0
if (this._imgData) {

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

@ -280,6 +280,32 @@ function createNoteNode() {
}
}
// 测量自定义节点内容元素的宽高
let warpEl = null
function measureCustomNodeContentSize (content) {
if (!warpEl) {
warpEl = document.createElement('div')
warpEl.style.cssText = `
position: fixed;
left: -99999px;
top: -99999px;
`
this.mindMap.el.appendChild(warpEl)
}
warpEl.innerHTML = ''
warpEl.appendChild(content)
let rect = warpEl.getBoundingClientRect()
return {
width: rect.width,
height: rect.height
}
}
// 是否使用的是自定义节点内容
function isUseCustomNodeContent() {
return !!this._customNodeContent
}
export default {
createImgNode,
getImgShowSize,
@ -288,5 +314,7 @@ export default {
createTextNode,
createHyperlinkNode,
createTagNode,
createNoteNode
createNoteNode,
measureCustomNodeContentSize,
isUseCustomNodeContent
}

11
simple-mind-map/src/utils/index.js
View File

@ -356,4 +356,15 @@ export const readBlob = (blob) => {
}
reader.readAsDataURL(blob)
})
}
// 将dom节点转换成html字符串
let nodeToHTMLWrapEl = null
export const nodeToHTML = (node) => {
if (!nodeToHTMLWrapEl) {
nodeToHTMLWrapEl = document.createElement('div')
}
nodeToHTMLWrapEl.innerHTML = ''
nodeToHTMLWrapEl.appendChild(node)
return nodeToHTMLWrapEl.innerHTML
}

2
web/src/pages/Doc/catalogList.js
View File

@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
let CourseList = new Array(19).fill(0).map((_, index) => {
let CourseList = new Array(20).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [

6
web/src/pages/Doc/en/changelog/index.md
View File

@ -1,5 +1,11 @@
# Changelog
## 0.6.3
Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.
New: 1.Support custom node content.
## 0.6.2
Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.

3
web/src/pages/Doc/en/changelog/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.3</h2>
<p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
<p>New: 1.Support custom node content.</p>
<h2>0.6.2</h2>
<p>Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.</p>
<h2>0.6.1</h2>

2
web/src/pages/Doc/en/constructor/index.md
View File

@ -67,6 +67,8 @@ const mindMap = new MindMap({
| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | Whether to enable the function of holding down the Ctrl key to select multiple nodes | |
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | Setting to left click to select multiple nodes and right click to drag the canvas. | |
| beforeTextEdit（v0.6.0+） | Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance | |
| isUseCustomNodeContent（v0.6.3+） | Boolean | false | Whether to customize node content | |
| customCreateNodeContent（v0.6.3+） | Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` | |
### Watermark config

14
web/src/pages/Doc/en/constructor/index.vue
View File

@ -329,6 +329,20 @@
<td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
<td></td>
</tr>
<tr>
<td>isUseCustomNodeContent（v0.6.3+）</td>
<td>Boolean</td>
<td>false</td>
<td>Whether to customize node content</td>
<td></td>
</tr>
<tr>
<td>customCreateNodeContent（v0.6.3+）</td>
<td>Function/null</td>
<td>null</td>
<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Watermark config</h3>

1
web/src/pages/Doc/routerList.js
View File

@ -26,6 +26,7 @@ export default [
{ path: 'course17', title: '导入和导出' },
{ path: 'course18', title: '如何持久化数据' },
{ path: 'course19', title: '插入和扩展节点图标' },
{ path: 'course20', title: '如何自定义节点内容' },
{ path: 'doExport', title: 'Export 插件' },
{ path: 'drag', title: 'Drag插件' },
{ path: 'introduction', title: '简介' },

6
web/src/pages/Doc/zh/changelog/index.md
View File

@ -1,5 +1,11 @@
# Changelog
## 0.6.3
修复：1.修复概要节点会响应插入节点快捷键的问题。
新增：1.支持自定义节点内容。
## 0.6.2
修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。

3
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.3</h2>
<p>修复：1.修复概要节点会响应插入节点快捷键的问题。</p>
<p>新增：1.支持自定义节点内容。</p>
<h2>0.6.2</h2>
<p>修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。</p>
<h2>0.6.1</h2>

2
web/src/pages/Doc/zh/constructor/index.md
View File

@ -67,6 +67,8 @@ const mindMap = new MindMap({
| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | 是否开启按住ctrl键多选节点的功能 | |
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | 设置为左键多选节点，右键拖动画布 | |
| beforeTextEdit（v0.6.0+） | Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 | |
| isUseCustomNodeContent（v0.6.3+） | Boolean | false | 是否自定义节点内容 | |
| customCreateNodeContent（v0.6.3+） | Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 | |
### 水印配置

14
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -329,6 +329,20 @@
<td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
<td></td>
</tr>
<tr>
<td>isUseCustomNodeContent（v0.6.3+）</td>
<td>Boolean</td>
<td>false</td>
<td>是否自定义节点内容</td>
<td></td>
</tr>
<tr>
<td>customCreateNodeContent（v0.6.3+）</td>
<td>Function/null</td>
<td>null</td>
<td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
<td></td>
</tr>
</tbody>
</table>
<h3>水印配置</h3>

114
web/src/pages/Doc/zh/course20/index.md Normal file
View File

@ -0,0 +1,114 @@
# 如何自定义节点内容
> 该特性v0.6.3+版本支持
如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
```js
new MindMap({
isUseCustomNodeContent: true,
customCreateNodeContent: (node) => {
// return你的自定义DOM节点
}
})
```
`customCreateNodeContent`方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
```js
node.nodeData.data
```
其他节点实例属性你可以自行打印出来看看。
`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
## 示例1：渲染自定义DOM节点
```js
{
customCreateNodeContent: (node) => {
let div = document.createElement('div')
div.className = 'xxx'
div.style.cssText = `xxx`
div.innerHTML = `
<h1>我是自定义节点</h1>
${ node.nodeData.text }
`
return div
}
}
```
## 示例2：渲染Vue2组件
如果想要使用一个相对简单的`Vue`组件，那么可以通过如下方式：
```js
import CustomNodeContent from 'CustomNodeContent.vue'
import Vue from 'vue'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
let Comp = Vue.extend(CustomNodeContent)
let comp = new Comp({
// props
propsData: {
html: node.nodeData.data.text
}
})
comp.$mount(el)
return comp.$el
}
}
```
如果你的`Vue`组件比较复杂，里面用到了`vueRouter`、`vuex`、`i18n`等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
```js
import CustomNodeContent from 'CustomNodeContent.vue'
import Vue from 'vue'
import router from './router'
import store from './store'
import i18n from './i18n'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
let Comp = Vue.extend(CustomNodeContent)
let comp = new Comp({
// props
propsData: {
html: node.nodeData.data.text
},
router,
store,
i18n
})
comp.$mount(el)
return comp.$el
}
}
```
## 示例3：渲染Vue3组件
```js
import { createApp } from "vue"
import CustomNodeContent from './CustomNodeContent.vue'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
const app = createApp(CustomNodeContent, {// props
html: node.nodeData.data.text
})
app.mount(el)
return el
}
}
```

107
web/src/pages/Doc/zh/course20/index.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div>
<h1>如何自定义节点内容</h1>
<blockquote>
<p>该特性v0.6.3+版本支持</p>
</blockquote>
<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入一下选项：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
<span class="hljs-comment">// return你的自定义DOM节点</span>
}
})
</code></pre>
<p><code>customCreateNodeContent</code>方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：</p>
<pre class="hljs"><code>node.nodeData.data
</code></pre>
<p>其他节点实例属性你可以自行打印出来看看。</p>
<p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
<p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
<h2>示例1：渲染自定义DOM节点</h2>
<pre class="hljs"><code>{
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
<span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
div.className = <span class="hljs-string">&#x27;xxx&#x27;</span>
div.style.cssText = <span class="hljs-string">`xxx`</span>
div.innerHTML = <span class="hljs-string">`
&lt;h1&gt;我是自定义节点&lt;/h1&gt;
<span class="hljs-subst">${ node.nodeData.text }</span>
`</span>
<span class="hljs-keyword">return</span> div
}
}
</code></pre>
<h2>示例2：渲染Vue2组件</h2>
<p>如果想要使用一个相对简单的<code>Vue</code>组件，那么可以通过如下方式：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
{
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
<span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
<span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
<span class="hljs-comment">// props</span>
<span class="hljs-attr">propsData</span>: {
<span class="hljs-attr">html</span>: node.nodeData.data.text
}
})
comp.$mount(el)
<span class="hljs-keyword">return</span> comp.$el
}
}
</code></pre>
<p>如果你的<code>Vue</code>组件比较复杂，里面用到了<code>vueRouter</code>、<code>vuex</code>、<code>i18n</code>等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router&#x27;</span>
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./store&#x27;</span>
<span class="hljs-keyword">import</span> i18n <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./i18n&#x27;</span>
{
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
<span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
<span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
<span class="hljs-comment">// props</span>
<span class="hljs-attr">propsData</span>: {
<span class="hljs-attr">html</span>: node.nodeData.data.text
},
router,
store,
i18n
})
comp.$mount(el)
<span class="hljs-keyword">return</span> comp.$el
}
}
</code></pre>
<h2>示例3：渲染Vue3组件</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>
<span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./CustomNodeContent.vue&#x27;</span>
{
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
<span class="hljs-keyword">const</span> app = createApp(CustomNodeContent, {<span class="hljs-comment">// props</span>
<span class="hljs-attr">html</span>: node.nodeData.data.text
})
app.mount(el)
<span class="hljs-keyword">return</span> el
}
}
</code></pre>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

36
web/src/pages/Edit/components/CustomNodeContent.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="customNodeContent">
<p>{{ title }}</p>
<p v-html="html"></p>
<p :style="{ backgroundColor: color }" @click="onClick">点击我会变色</p>
</div>
</template>
<script>
export default {
props: {
html: {
type: String,
default: ''
}
},
data() {
return {
title: '我是自定义节点',
color: ''
}
},
methods: {
onClick() {
this.color = 'red'
}
}
}
</script>
<style lang="less" scoped>
.customNodeContent {
padding: 10px;
cursor: pointer;
}
</style>

35
web/src/pages/Edit/components/Edit.vue
View File

@ -48,8 +48,14 @@ import Navigator from './Navigator.vue'
import NodeImgPreview from './NodeImgPreview.vue'
import SidebarTrigger from './SidebarTrigger.vue'
import { mapState } from 'vuex'
import customThemeList from '@/customThemes'
import icon from '@/config/icon'
import customThemeList from '@/customThemes'
import CustomNodeContent from './CustomNodeContent.vue'
import Color from './Color.vue'
import Vue from 'vue'
import router from '../../../router'
import store from '../../../store'
import i18n from '../../../i18n'
// 注册插件
MindMap
@ -293,7 +299,32 @@ export default {
},
...(config || {}),
iconList: icon,
useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag
useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
// isUseCustomNodeContent: true,
// 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
// customCreateNodeContent: (node) => {
// let el = document.createElement('div')
// let Comp = Vue.extend(Color)
// let comp = new Comp({
// router,
// store,
// i18n
// })
// comp.$mount(el)
// return comp.$el
// },
// 示例2：组件里没有用到示例1的东西
// customCreateNodeContent: (node) => {
// let el = document.createElement('div')
// let Comp = Vue.extend(CustomNodeContent)
// let comp = new Comp({
// propsData: {
// html: node.nodeData.data.text
// }
// })
// comp.$mount(el)
// return comp.$el
// }
})
if (this.openNodeRichText) this.addRichTextPlugin()
this.mindMap.keyCommand.addShortcut('Control+s', () => {