openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/kalcaddle/mind-map

Browse Source 
* 'main' of https://github.com/kalcaddle/mind-map:
  打包
  Demo：组件卸载时解除绑定的事件
  打包
  Demo：一些耗时的操作添加loading
  Feat：去掉异步渲染节点的逻辑
This commit is contained in:
warlee 2023-08-09 18:14:46 +08:00
commit 5cde3b76fe
18 changed files with 506 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
window.externalPublicPath = './dist/' window.externalPublicPath = './dist/'
// 接管应用 // 接管应用
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?d6b6276145145848dabd" rel="stylesheet"><link href="dist/css/app.css?d6b6276145145848dabd" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => { window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?64f576a35c31bceb26d8" rel="stylesheet"><link href="dist/css/app.css?64f576a35c31bceb26d8" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve({ resolve({
@ -66,4 +66,4 @@
// 可以通过window.$bus.$on()来监听应用的一些事件 // 可以通过window.$bus.$on()来监听应用的一些事件
// 实例化页面 // 实例化页面
window.initApp() window.initApp()
}</script><script src="dist/js/chunk-vendors.js?d6b6276145145848dabd"></script><script src="dist/js/app.js?d6b6276145145848dabd"></script></body></html> }</script><script src="dist/js/chunk-vendors.js?64f576a35c31bceb26d8"></script><script src="dist/js/app.js?64f576a35c31bceb26d8"></script></body></html>

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

@ -1,6 +1,5 @@
import Style from './Style' import Style from './Style'
import Shape from './Shape' import Shape from './Shape'
import { asyncRun, nodeToHTML } from '../../../utils'
import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js' import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js'
import nodeGeneralizationMethods from './nodeGeneralization' import nodeGeneralizationMethods from './nodeGeneralization'
import nodeExpandBtnMethods from './nodeExpandBtn' import nodeExpandBtnMethods from './nodeExpandBtn'
@ -559,18 +558,14 @@ class Node {
this.nodeData.data.expand !== false this.nodeData.data.expand !== false
) { ) {
let index = 0 let index = 0
asyncRun( this.children.forEach(item => {
this.children.map(item => {
return () => {
item.render(() => { item.render(() => {
index++ index++
if (index >= this.children.length) { if (index >= this.children.length) {
callback() callback()
} }
}) })
}
}) })
)
} else { } else {
callback() callback()
} }
@ -592,13 +587,9 @@ class Node {
this.removeLine() this.removeLine()
// 子节点 // 子节点
if (this.children && this.children.length) { if (this.children && this.children.length) {
asyncRun( this.children.forEach(item => {
this.children.map(item => {
return () => {
item.remove() item.remove()
}
}) })
)
} }
} }
@ -624,13 +615,9 @@ class Node {
} }
// 子节点 // 子节点
if (this.children && this.children.length) { if (this.children && this.children.length) {
asyncRun( this.children.forEach(item => {
this.children.map(item => {
return () => {
item.hide() item.hide()
}
}) })
)
} }
} }
@ -650,13 +637,9 @@ class Node {
} }
// 子节点 // 子节点
if (this.children && this.children.length) { if (this.children && this.children.length) {
asyncRun( this.children.forEach(item => {
this.children.map(item => {
return () => {
item.show() item.show()
}
}) })
)
} }
} }

1
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -857,6 +857,7 @@ export default {
this.style[key] = value this.style[key] = value
} }
this.data.theme.config[key] = value this.data.theme.config[key] = value
this.$bus.$emit('showLoading')
this.mindMap.setThemeConfig(this.data.theme.config) this.mindMap.setThemeConfig(this.data.theme.config)
storeConfig({ storeConfig({
theme: { theme: {

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

@ -69,10 +69,10 @@ import Search from './Search.vue'
import NodeIconSidebar from './NodeIconSidebar.vue' import NodeIconSidebar from './NodeIconSidebar.vue'
import NodeIconToolbar from './NodeIconToolbar.vue' import NodeIconToolbar from './NodeIconToolbar.vue'
import OutlineEdit from './OutlineEdit.vue' import OutlineEdit from './OutlineEdit.vue'
import { showLoading, hideLoading } from '@/utils/loading'
// 注册插件 // 注册插件
MindMap MindMap.usePlugin(MiniMap)
.usePlugin(MiniMap)
.usePlugin(Watermark) .usePlugin(Watermark)
.usePlugin(Drag) .usePlugin(Drag)
.usePlugin(KeyboardNavigation) .usePlugin(KeyboardNavigation)
@ -87,7 +87,7 @@ MindMap
.usePlugin(Painter) .usePlugin(Painter)
// 注册自定义主题 // 注册自定义主题
customThemeList.forEach((item) => { customThemeList.forEach(item => {
MindMap.defineTheme(item.value, item.theme) MindMap.defineTheme(item.value, item.theme)
}) })
@ -120,6 +120,7 @@ export default {
}, },
data() { data() {
return { return {
enableShowLoading: true,
mindMap: null, mindMap: null,
mindMapData: null, mindMapData: null,
prevImg: '', prevImg: '',
@ -130,7 +131,8 @@ export default {
...mapState({ ...mapState({
isZenMode: state => state.localConfig.isZenMode, isZenMode: state => state.localConfig.isZenMode,
openNodeRichText: state => state.localConfig.openNodeRichText, openNodeRichText: state => state.localConfig.openNodeRichText,
useLeftKeySelectionRightKeyDrag: state => state.localConfig.useLeftKeySelectionRightKeyDrag, useLeftKeySelectionRightKeyDrag: state =>
state.localConfig.useLeftKeySelectionRightKeyDrag
}) })
}, },
watch: { watch: {
@ -143,6 +145,7 @@ export default {
} }
}, },
mounted() { mounted() {
showLoading()
// this.showNewFeatureInfo() // this.showNewFeatureInfo()
this.getData() this.getData()
this.init() this.init()
@ -150,23 +153,62 @@ export default {
this.$bus.$on('paddingChange', this.onPaddingChange) this.$bus.$on('paddingChange', this.onPaddingChange)
this.$bus.$on('export', this.export) this.$bus.$on('export', this.export)
this.$bus.$on('setData', this.setData) this.$bus.$on('setData', this.setData)
this.$bus.$on('startTextEdit', () => { this.$bus.$on('startTextEdit', this.handleStartTextEdit)
this.mindMap.renderer.startTextEdit() this.$bus.$on('endTextEdit', this.handleEndTextEdit)
}) this.$bus.$on('createAssociativeLine', this.handleCreateLineFromActiveNode)
this.$bus.$on('endTextEdit', () => { this.$bus.$on('startPainter', this.handleStartPainter)
this.mindMap.renderer.endTextEdit() this.$bus.$on('node_tree_render_end', this.handleHideLoading)
}) this.$bus.$on('showLoading', this.handleShowLoading)
this.$bus.$on('createAssociativeLine', () => { window.addEventListener('resize', this.handleResize)
this.mindMap.associativeLine.createLineFromActiveNode() },
}) beforeDestroy() {
this.$bus.$on('startPainter', () => { this.$bus.$off('execCommand', this.execCommand)
this.mindMap.painter.startPainter() this.$bus.$off('paddingChange', this.onPaddingChange)
}) this.$bus.$off('export', this.export)
window.addEventListener('resize', () => { this.$bus.$off('setData', this.setData)
this.mindMap.resize() this.$bus.$off('startTextEdit', this.handleStartTextEdit)
}) this.$bus.$off('endTextEdit', this.handleEndTextEdit)
this.$bus.$off('createAssociativeLine', this.handleCreateLineFromActiveNode)
this.$bus.$off('startPainter', this.handleStartPainter)
this.$bus.$off('node_tree_render_end', this.handleHideLoading)
this.$bus.$off('showLoading', this.handleShowLoading)
window.removeEventListener('resize', this.handleResize)
}, },
methods: { methods: {
handleStartTextEdit() {
this.mindMap.renderer.startTextEdit()
},
handleEndTextEdit() {
this.mindMap.renderer.endTextEdit()
},
handleCreateLineFromActiveNode() {
this.mindMap.associativeLine.createLineFromActiveNode()
},
handleStartPainter() {
this.mindMap.painter.startPainter()
},
handleResize() {
this.mindMap.resize()
},
// 显示loading
handleShowLoading() {
this.enableShowLoading = true
showLoading()
},
// 渲染结束后关闭loading
handleHideLoading() {
if (this.enableShowLoading) {
this.enableShowLoading = false
hideLoading()
}
},
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-03 22:11:37 * @Date: 2021-07-03 22:11:37
@ -233,7 +275,7 @@ export default {
...(config || {}), ...(config || {}),
iconList: icon, iconList: icon,
useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag, useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
customInnerElsAppendTo: null, customInnerElsAppendTo: null
// isUseCustomNodeContent: true, // isUseCustomNodeContent: true,
// 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
// customCreateNodeContent: (node) => { // customCreateNodeContent: (node) => {
@ -315,6 +357,7 @@ export default {
* @Desc: 动态设置思维导图数据 * @Desc: 动态设置思维导图数据
*/ */
setData(data) { setData(data) {
this.handleShowLoading()
if (data.root) { if (data.root) {
this.mindMap.setFullData(data) this.mindMap.setFullData(data)
} else { } else {

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

@ -24,7 +24,10 @@
>{{ $t('export.include') }}</el-checkbox >{{ $t('export.include') }}</el-checkbox
> >
</div> </div>
<div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)"> <div
class="paddingInputBox"
v-show="['svg', 'png', 'pdf'].includes(exportType)"
>
<span class="name">{{ $t('export.paddingX') }}</span> <span class="name">{{ $t('export.paddingX') }}</span>
<el-input <el-input
style="width: 100px" style="width: 100px"
@ -32,7 +35,9 @@
size="mini" size="mini"
@change="onPaddingChange" @change="onPaddingChange"
></el-input> ></el-input>
<span class="name" style="margin-left: 10px;">{{ $t('export.paddingY') }}</span> <span class="name" style="margin-left: 10px;">{{
$t('export.paddingY')
}}</span>
<el-input <el-input
style="width: 100px" style="width: 100px"
v-model="paddingY" v-model="paddingY"
@ -104,14 +109,19 @@ export default {
downTypeList() { downTypeList() {
return downTypeList[this.$i18n.locale] || downTypeList.zh return downTypeList[this.$i18n.locale] || downTypeList.zh
}, }
}, },
created() { created() {
this.$bus.$on('showExport', () => { this.$bus.$on('showExport', this.handleShowExport)
this.dialogVisible = true },
}) beforeDestroy() {
this.$bus.$off('showExport', this.handleShowExport)
}, },
methods: { methods: {
handleShowExport() {
this.dialogVisible = true
},
onPaddingChange() { onPaddingChange() {
this.$bus.$emit('paddingChange', { this.$bus.$emit('paddingChange', {
exportPaddingX: Number(this.paddingX), exportPaddingX: Number(this.paddingX),
@ -163,12 +173,7 @@ export default {
this.isTransparent this.isTransparent
) )
} else { } else {
this.$bus.$emit( this.$bus.$emit('export', this.exportType, true, this.fileName)
'export',
this.exportType,
true,
this.fileName
)
} }
this.$notify.info({ this.$notify.info({
title: this.$t('export.notifyTitle'), title: this.$t('export.notifyTitle'),
@ -189,7 +194,7 @@ export default {
.info { .info {
.name { .name {
color: hsla(0,0%,100%,.9); color: hsla(0, 0%, 100%, 0.9);
} }
} }
} }
@ -222,7 +227,7 @@ export default {
margin-top: 10px; margin-top: 10px;
&.warning { &.warning {
color: #F56C6C; color: #f56c6c;
} }
} }
@ -236,7 +241,7 @@ export default {
overflow: hidden; overflow: hidden;
margin: 10px; margin: 10px;
border-radius: 11px; border-radius: 11px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.02); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.02);
background-color: #fff; background-color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;

11
web/src/pages/Edit/components/Import.vue
View File

@ -58,11 +58,16 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('showImport', () => { this.$bus.$on('showImport', this.handleShowImport)
this.dialogVisible = true },
}) beforeDestroy() {
this.$bus.$off('showImport', this.handleShowImport)
}, },
methods: { methods: {
handleShowImport() {
this.dialogVisible = true
},
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-08-03 22:48:42 * @Date: 2021-08-03 22:48:42

18
web/src/pages/Edit/components/NodeHyperlink.vue
View File

@ -44,7 +44,15 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeLink', this.handleShowNodeLink)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeLink', this.handleShowNodeLink)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -54,14 +62,14 @@ export default {
this.link = '' this.link = ''
this.linkTitle = '' this.linkTitle = ''
} }
}) },
this.$bus.$on('showNodeLink', () => {
handleShowNodeLink() {
this.activeNodes[0].mindMap.keyCommand.pause() this.activeNodes[0].mindMap.keyCommand.pause()
this.$bus.$emit('startTextEdit') this.$bus.$emit('startTextEdit')
this.dialogVisible = true this.dialogVisible = true
})
}, },
methods: {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-22 22:08:11 * @Date: 2021-06-22 22:08:11

20
web/src/pages/Edit/components/NodeIcon.vue
View File

@ -43,7 +43,15 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeIcon', this.handleShowNodeIcon)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeIcon', this.handleShowNodeIcon)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -51,12 +59,12 @@ export default {
} else { } else {
this.iconList = [] this.iconList = []
} }
})
this.$bus.$on('showNodeIcon', () => {
this.dialogVisible = true
})
}, },
methods: {
handleShowNodeIcon() {
this.dialogVisible = true
},
getHtml(icon) { getHtml(icon) {
return /^<svg/.test(icon) ? icon : `<img src="${icon}" />` return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
}, },

51
web/src/pages/Edit/components/NodeIconSidebar.vue
View File

@ -11,9 +11,16 @@
<div class="item" v-for="item in nodeIconList" :key="item.name"> <div class="item" v-for="item in nodeIconList" :key="item.name">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="list"> <div class="list">
<div class="icon" v-for="icon in item.list" :key="icon.name" v-html="getHtml(icon.icon)" :class="{ <div
class="icon"
v-for="icon in item.list"
:key="icon.name"
v-html="getHtml(icon.icon)"
:class="{
selected: iconList.includes(item.type + '_' + icon.name) selected: iconList.includes(item.type + '_' + icon.name)
}" @click="setIcon(item.type, icon.name)"></div> }"
@click="setIcon(item.type, icon.name)"
></div>
</div> </div>
</div> </div>
</div> </div>
@ -22,10 +29,16 @@
<div class="item" v-for="item in nodeImageList" :key="item.name"> <div class="item" v-for="item in nodeImageList" :key="item.name">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="list"> <div class="list">
<div class="icon" v-for="image in item.list" :key="image.url" :class="{ <div
class="icon"
v-for="image in item.list"
:key="image.url"
:class="{
selected: nodeImage === image.url selected: nodeImage === image.url
}" @click="setImage(image)"> }"
<img :src="image.url" alt=""> @click="setImage(image)"
>
<img :src="image.url" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -58,7 +71,7 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['activeSidebar', 'isDark']), ...mapState(['activeSidebar', 'isDark'])
}, },
watch: { watch: {
activeSidebar(val) { activeSidebar(val) {
@ -70,7 +83,15 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeIcon', this.handleShowNodeIcon)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeIcon', this.handleShowNodeIcon)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -80,12 +101,12 @@ export default {
this.iconList = [] this.iconList = []
this.nodeImage = '' this.nodeImage = ''
} }
})
this.$bus.$on('showNodeIcon', () => {
this.dialogVisible = true
})
}, },
methods: {
handleShowNodeIcon() {
this.dialogVisible = true
},
// 获取图标渲染方式 // 获取图标渲染方式
getHtml(icon) { getHtml(icon) {
return /^<svg/.test(icon) ? icon : `<img src="${icon}" />` return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
@ -114,7 +135,6 @@ export default {
} }
this.activeNodes.forEach(node => { this.activeNodes.forEach(node => {
node.setIcon([...this.iconList]) node.setIcon([...this.iconList])
}) })
}, },
@ -126,7 +146,6 @@ export default {
...image ...image
}) })
}) })
} }
} }
} }
@ -140,8 +159,6 @@ export default {
.title { .title {
color: #fff; color: #fff;
} }
} }
.title { .title {
@ -237,10 +254,8 @@ export default {
} }
} }
} }
} }
} }
} }
} }
</style> </style>

30
web/src/pages/Edit/components/NodeImage.vue
View File

@ -6,11 +6,19 @@
width="500" width="500"
> >
<div class="title">方式一</div> <div class="title">方式一</div>
<ImgUpload ref="ImgUpload" v-model="img" style="margin-bottom: 12px;"></ImgUpload> <ImgUpload
ref="ImgUpload"
v-model="img"
style="margin-bottom: 12px;"
></ImgUpload>
<div class="title">方式二</div> <div class="title">方式二</div>
<div class="inputBox"> <div class="inputBox">
<span class="label">请输入图片地址</span> <span class="label">请输入图片地址</span>
<el-input v-model="imgUrl" size="mini" placeholder="http://xxx.com/xx.jpg"></el-input> <el-input
v-model="imgUrl"
size="mini"
placeholder="http://xxx.com/xx.jpg"
></el-input>
</div> </div>
<div class="title">可选</div> <div class="title">可选</div>
<div class="inputBox"> <div class="inputBox">
@ -50,10 +58,19 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeImage', this.handleShowNodeImage)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeImage', this.handleShowNodeImage)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
}) },
this.$bus.$on('showNodeImage', () => {
handleShowNodeImage() {
this.reset() this.reset()
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -68,9 +85,8 @@ export default {
this.imgTitle = firstNode.getData('imageTitle') this.imgTitle = firstNode.getData('imageTitle')
} }
this.dialogVisible = true this.dialogVisible = true
})
}, },
methods: {
cancel() { cancel() {
this.dialogVisible = false this.dialogVisible = false
this.reset() this.reset()

18
web/src/pages/Edit/components/NodeNote.vue
View File

@ -43,7 +43,15 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeNote', this.handleShowNodeNote)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeNote', this.handleShowNodeNote)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -51,16 +59,16 @@ export default {
} else { } else {
this.note = '' this.note = ''
} }
}) },
this.$bus.$on('showNodeNote', () => {
handleShowNodeNote() {
this.$bus.$emit('startTextEdit') this.$bus.$emit('startTextEdit')
this.dialogVisible = true this.dialogVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.initEditor() this.initEditor()
}) })
})
}, },
methods: {
/** /**
* @Author: 王林25 * @Author: 王林25
* @Date: 2022-05-09 11:37:05 * @Date: 2022-05-09 11:37:05

18
web/src/pages/Edit/components/NodeTag.vue
View File

@ -59,7 +59,15 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('node_active', (...args) => { this.$bus.$on('node_active', this.handleNodeActive)
this.$bus.$on('showNodeTag', this.handleShowNodeTag)
},
beforeDestroy() {
this.$bus.$off('node_active', this.handleNodeActive)
this.$bus.$off('showNodeTag', this.handleShowNodeTag)
},
methods: {
handleNodeActive(...args) {
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0] let firstNode = this.activeNodes[0]
@ -68,13 +76,13 @@ export default {
this.tagArr = [] this.tagArr = []
this.tag = '' this.tag = ''
} }
}) },
this.$bus.$on('showNodeTag', () => {
handleShowNodeTag() {
this.$bus.$emit('startTextEdit') this.$bus.$emit('startTextEdit')
this.dialogVisible = true this.dialogVisible = true
})
}, },
methods: {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-24 21:48:14 * @Date: 2021-06-24 21:48:14

31
web/src/pages/Edit/components/Outline.vue
View File

@ -73,7 +73,19 @@ export default {
}, },
created() { created() {
window.addEventListener('keydown', this.onKeyDown) window.addEventListener('keydown', this.onKeyDown)
this.$bus.$on('data_change', () => { this.$bus.$on('data_change', this.handleDataChange)
this.$bus.$on('node_tree_render_end', this.handleNodeTreeRenderEnd)
},
mounted() {
this.refresh()
},
beforeDestroy() {
window.removeEventListener('keydown', this.onKeyDown)
this.$bus.$off('data_change', this.handleDataChange)
this.$bus.$off('node_tree_render_end', this.handleNodeTreeRenderEnd)
},
methods: {
handleDataChange() {
// 在大纲里操作节点时不要响应该事件，否则会重新刷新树 // 在大纲里操作节点时不要响应该事件，否则会重新刷新树
if (this.notHandleDataChange) { if (this.notHandleDataChange) {
this.notHandleDataChange = false this.notHandleDataChange = false
@ -84,8 +96,9 @@ export default {
return return
} }
this.refresh() this.refresh()
}) },
this.$bus.$on('node_tree_render_end', () => {
handleNodeTreeRenderEnd() {
// 当前存在未完成的节点插入操作 // 当前存在未完成的节点插入操作
if (this.insertType) { if (this.insertType) {
this[this.insertType]() this[this.insertType]()
@ -100,15 +113,8 @@ export default {
this.afterCreateNewNode() this.afterCreateNewNode()
}) })
} }
})
}, },
mounted() {
this.refresh()
},
beforeDestroy() {
window.removeEventListener('keydown', this.onKeyDown)
},
methods: {
// 刷新树数据 // 刷新树数据
refresh() { refresh() {
let data = this.mindMap.getData() let data = this.mindMap.getData()
@ -332,7 +338,8 @@ export default {
} }
} }
/deep/ .el-tree-node__content:hover, .el-upload-list__item:hover { /deep/ .el-tree-node__content:hover,
.el-upload-list__item:hover {
background-color: hsla(0, 0%, 100%, 0.02) !important; background-color: hsla(0, 0%, 100%, 0.02) !important;
} }

17
web/src/pages/Edit/components/Search.vue
View File

@ -89,16 +89,23 @@ export default {
}, },
created() { created() {
this.$bus.$on('show_search', this.showSearch) this.$bus.$on('show_search', this.showSearch)
this.mindMap.on('search_info_change', data => { this.mindMap.on('search_info_change', this.handleSearchInfoChange)
this.currentIndex = data.currentIndex + 1
this.total = data.total
this.showSearchInfo = true
})
this.mindMap.keyCommand.addShortcut('Control+f', this.showSearch) this.mindMap.keyCommand.addShortcut('Control+f', this.showSearch)
}, },
beforeDestroy() {
this.$bus.$off('show_search', this.showSearch)
this.mindMap.off('search_info_change', this.handleSearchInfoChange)
this.mindMap.keyCommand.removeShortcut('Control+f', this.showSearch)
},
methods: { methods: {
isUndef, isUndef,
handleSearchInfoChange(data) {
this.currentIndex = data.currentIndex + 1
this.total = data.total
this.showSearchInfo = true
},
showSearch() { showSearch() {
this.$bus.$emit('closeSideBar') this.$bus.$emit('closeSideBar')
this.show = true this.show = true

11
web/src/pages/Edit/components/Sidebar.vue
View File

@ -49,13 +49,18 @@ export default {
} }
}, },
created() { created() {
this.$bus.$on('closeSideBar', () => { this.$bus.$on('closeSideBar', this.handleCloseSidebar)
this.close() },
}) beforeDestroy() {
this.$bus.$off('closeSideBar', this.handleCloseSidebar)
}, },
methods: { methods: {
...mapMutations(['setActiveSidebar']), ...mapMutations(['setActiveSidebar']),
handleCloseSidebar() {
this.close()
},
close() { close() {
this.show = false this.show = false
this.setActiveSidebar('') this.setActiveSidebar('')

16
web/src/pages/Edit/components/Theme.vue
View File

@ -81,15 +81,19 @@ export default {
this.initGroup() this.initGroup()
this.theme = this.mindMap.getTheme() this.theme = this.mindMap.getTheme()
this.handleDark() this.handleDark()
this.mindMap.on('view_theme_change', this.handleViewThemeChange)
this.mindMap.on('view_theme_change', () => { },
this.theme = this.mindMap.getTheme() beforeDestroy() {
this.handleDark() this.mindMap.off('view_theme_change', this.handleViewThemeChange)
})
}, },
methods: { methods: {
...mapMutations(['setIsDark']), ...mapMutations(['setIsDark']),
handleViewThemeChange() {
this.theme = this.mindMap.getTheme()
this.handleDark()
},
initGroup() { initGroup() {
let baiduThemes = [ let baiduThemes = [
'default', 'default',
@ -136,6 +140,7 @@ export default {
}, },
useTheme(theme) { useTheme(theme) {
if (theme.value === this.theme) return
this.theme = theme.value this.theme = theme.value
this.handleDark() this.handleDark()
const customThemeConfig = this.mindMap.getCustomThemeConfig() const customThemeConfig = this.mindMap.getCustomThemeConfig()
@ -159,6 +164,7 @@ export default {
}, },
changeTheme(theme, config) { changeTheme(theme, config) {
this.$bus.$emit('showLoading')
this.mindMap.setTheme(theme.value) this.mindMap.setTheme(theme.value)
storeConfig({ storeConfig({
theme: { theme: {

2
web/src/pages/Edit/components/Toolbar.vue
View File

@ -247,7 +247,7 @@ export default {
this.$bus.$off('node_active', this.onNodeActive) this.$bus.$off('node_active', this.onNodeActive)
this.$bus.$off('back_forward', this.onBackForward) this.$bus.$off('back_forward', this.onBackForward)
this.$bus.$off('write_local_file', this.onWriteLocalFile) this.$bus.$off('write_local_file', this.onWriteLocalFile)
this.$bus.$on('painter_start', this.onPainterStart) this.$bus.$off('painter_start', this.onPainterStart)
this.$bus.$off('painter_end', this.onPainterEnd) this.$bus.$off('painter_end', this.onPainterEnd)
}, },
methods: { methods: {

17
web/src/utils/loading.js Normal file
View File

@ -0,0 +1,17 @@
import { Loading } from 'element-ui'
let loadingInstance = null
export const showLoading = () => {
loadingInstance = Loading.service({
lock: true
})
}
export const hideLoading = () => {
if (loadingInstance) {
loadingInstance.close()
loadingInstance = null
}
}