From c005455144b3fa9256d495ef3cd8505474115b95 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 9 Aug 2023 09:36:08 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E7=BB=84=E4=BB=B6=E5=8D=B8?= =?UTF-8?q?=E8=BD=BD=E6=97=B6=E8=A7=A3=E9=99=A4=E7=BB=91=E5=AE=9A=E7=9A=84?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Edit.vue | 85 ++-- web/src/pages/Edit/components/Export.vue | 45 +- web/src/pages/Edit/components/Import.vue | 11 +- .../pages/Edit/components/NodeHyperlink.vue | 20 +- web/src/pages/Edit/components/NodeIcon.vue | 22 +- .../pages/Edit/components/NodeIconSidebar.vue | 441 +++++++++--------- web/src/pages/Edit/components/NodeImage.vue | 32 +- web/src/pages/Edit/components/NodeNote.vue | 20 +- web/src/pages/Edit/components/NodeTag.vue | 20 +- web/src/pages/Edit/components/Outline.vue | 33 +- web/src/pages/Edit/components/Search.vue | 23 +- web/src/pages/Edit/components/Sidebar.vue | 11 +- web/src/pages/Edit/components/Theme.vue | 14 +- web/src/pages/Edit/components/Toolbar.vue | 2 +- 14 files changed, 449 insertions(+), 330 deletions(-) diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 6403b2cd..a7ad8040 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -72,8 +72,7 @@ import OutlineEdit from './OutlineEdit.vue' import { showLoading, hideLoading } from '@/utils/loading' // 注册插件 -MindMap - .usePlugin(MiniMap) +MindMap.usePlugin(MiniMap) .usePlugin(Watermark) .usePlugin(Drag) .usePlugin(KeyboardNavigation) @@ -88,7 +87,7 @@ MindMap .usePlugin(Painter) // 注册自定义主题 -customThemeList.forEach((item) => { +customThemeList.forEach(item => { MindMap.defineTheme(item.value, item.theme) }) @@ -132,7 +131,8 @@ export default { ...mapState({ isZenMode: state => state.localConfig.isZenMode, openNodeRichText: state => state.localConfig.openNodeRichText, - useLeftKeySelectionRightKeyDrag: state => state.localConfig.useLeftKeySelectionRightKeyDrag, + useLeftKeySelectionRightKeyDrag: state => + state.localConfig.useLeftKeySelectionRightKeyDrag }) }, watch: { @@ -153,25 +153,48 @@ export default { this.$bus.$on('paddingChange', this.onPaddingChange) this.$bus.$on('export', this.export) this.$bus.$on('setData', this.setData) - this.$bus.$on('startTextEdit', () => { - this.mindMap.renderer.startTextEdit() - }) - this.$bus.$on('endTextEdit', () => { - this.mindMap.renderer.endTextEdit() - }) - this.$bus.$on('createAssociativeLine', () => { - this.mindMap.associativeLine.createLineFromActiveNode() - }) - this.$bus.$on('startPainter', () => { - this.mindMap.painter.startPainter() - }) + this.$bus.$on('startTextEdit', this.handleStartTextEdit) + this.$bus.$on('endTextEdit', this.handleEndTextEdit) + this.$bus.$on('createAssociativeLine', this.handleCreateLineFromActiveNode) + this.$bus.$on('startPainter', this.handleStartPainter) this.$bus.$on('node_tree_render_end', this.handleHideLoading) this.$bus.$on('showLoading', this.handleShowLoading) - window.addEventListener('resize', () => { - this.mindMap.resize() - }) + window.addEventListener('resize', this.handleResize) + }, + beforeDestroy() { + this.$bus.$off('execCommand', this.execCommand) + this.$bus.$off('paddingChange', this.onPaddingChange) + this.$bus.$off('export', this.export) + this.$bus.$off('setData', this.setData) + 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: { + 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 @@ -252,7 +275,7 @@ export default { ...(config || {}), iconList: icon, useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag, - customInnerElsAppendTo: null, + customInnerElsAppendTo: null // isUseCustomNodeContent: true, // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // customCreateNodeContent: (node) => { @@ -309,18 +332,18 @@ export default { }) this.bindSaveEvent() // setTimeout(() => { - // 动态给指定节点添加子节点 - // this.mindMap.execCommand('INSERT_CHILD_NODE', false, this.mindMap.renderer.root, { - // text: '自定义内容' - // }) + // 动态给指定节点添加子节点 + // this.mindMap.execCommand('INSERT_CHILD_NODE', false, this.mindMap.renderer.root, { + // text: '自定义内容' + // }) - // 动态给指定节点添加同级节点 - // this.mindMap.execCommand('INSERT_NODE', false, this.mindMap.renderer.root, { - // text: '自定义内容' - // }) + // 动态给指定节点添加同级节点 + // this.mindMap.execCommand('INSERT_NODE', false, this.mindMap.renderer.root, { + // text: '自定义内容' + // }) - // 动态删除指定节点 - // this.mindMap.execCommand('REMOVE_NODE', this.mindMap.renderer.root.children[0]) + // 动态删除指定节点 + // this.mindMap.execCommand('REMOVE_NODE', this.mindMap.renderer.root.children[0]) // }, 5000); // 如果应用被接管，那么抛出事件传递思维导图实例 if (window.takeOverApp) { @@ -386,7 +409,7 @@ export default { if (!showed) { this.$notify.info({ title: this.$t('edit.newFeatureNoticeTitle'), - message: this.$t('edit.newFeatureNoticeMessage'), + message: this.$t('edit.newFeatureNoticeMessage'), duration: 0, onClose: () => { localStorage.setItem('SIMPLE_MIND_MAP_NEW_FEATURE_TIP_1', true) diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue index 6602c66b..60fb8852 100644 --- a/web/src/pages/Edit/components/Export.vue +++ b/web/src/pages/Edit/components/Export.vue @@ -24,7 +24,10 @@ >{{ $t('export.include') }} -
+
{{ $t('export.paddingX') }} - {{ $t('export.paddingY') }} + {{ + $t('export.paddingY') + }}
-
@@ -104,14 +109,19 @@ export default { downTypeList() { return downTypeList[this.$i18n.locale] || downTypeList.zh - }, + } }, created() { - this.$bus.$on('showExport', () => { - this.dialogVisible = true - }) + this.$bus.$on('showExport', this.handleShowExport) + }, + beforeDestroy() { + this.$bus.$off('showExport', this.handleShowExport) }, methods: { + handleShowExport() { + this.dialogVisible = true + }, + onPaddingChange() { this.$bus.$emit('paddingChange', { exportPaddingX: Number(this.paddingX), @@ -163,12 +173,7 @@ export default { this.isTransparent ) } else { - this.$bus.$emit( - 'export', - this.exportType, - true, - this.fileName - ) + this.$bus.$emit('export', this.exportType, true, this.fileName) } this.$notify.info({ title: this.$t('export.notifyTitle'), @@ -189,7 +194,7 @@ export default { .info { .name { - color: hsla(0,0%,100%,.9); + color: hsla(0, 0%, 100%, 0.9); } } } @@ -222,7 +227,7 @@ export default { margin-top: 10px; &.warning { - color: #F56C6C; + color: #f56c6c; } } @@ -236,7 +241,7 @@ export default { overflow: hidden; margin: 10px; 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; display: flex; align-items: center; diff --git a/web/src/pages/Edit/components/Import.vue b/web/src/pages/Edit/components/Import.vue index 40cd548d..d2d865e1 100644 --- a/web/src/pages/Edit/components/Import.vue +++ b/web/src/pages/Edit/components/Import.vue @@ -58,11 +58,16 @@ export default { } }, created() { - this.$bus.$on('showImport', () => { - this.dialogVisible = true - }) + this.$bus.$on('showImport', this.handleShowImport) + }, + beforeDestroy() { + this.$bus.$off('showImport', this.handleShowImport) }, methods: { + handleShowImport() { + this.dialogVisible = true + }, + /** * @Author: 王林 * @Date: 2021-08-03 22:48:42 diff --git a/web/src/pages/Edit/components/NodeHyperlink.vue b/web/src/pages/Edit/components/NodeHyperlink.vue index 92b0c11b..100ef170 100644 --- a/web/src/pages/Edit/components/NodeHyperlink.vue +++ b/web/src/pages/Edit/components/NodeHyperlink.vue @@ -44,7 +44,15 @@ export default { } }, 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] if (this.activeNodes.length > 0) { let firstNode = this.activeNodes[0] @@ -54,14 +62,14 @@ export default { this.link = '' this.linkTitle = '' } - }) - this.$bus.$on('showNodeLink', () => { + }, + + handleShowNodeLink() { this.activeNodes[0].mindMap.keyCommand.pause() this.$bus.$emit('startTextEdit') this.dialogVisible = true - }) - }, - methods: { + }, + /** * @Author: 王林 * @Date: 2021-06-22 22:08:11 diff --git a/web/src/pages/Edit/components/NodeIcon.vue b/web/src/pages/Edit/components/NodeIcon.vue index 04f0c79b..6cc5e6db 100644 --- a/web/src/pages/Edit/components/NodeIcon.vue +++ b/web/src/pages/Edit/components/NodeIcon.vue @@ -43,7 +43,15 @@ export default { } }, 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] if (this.activeNodes.length > 0) { let firstNode = this.activeNodes[0] @@ -51,15 +59,15 @@ export default { } else { this.iconList = [] } - }) - this.$bus.$on('showNodeIcon', () => { + }, + + handleShowNodeIcon() { this.dialogVisible = true - }) - }, - methods: { + }, + getHtml(icon) { return /^` - }, + }, /** * @Author: 王林 diff --git a/web/src/pages/Edit/components/NodeIconSidebar.vue b/web/src/pages/Edit/components/NodeIconSidebar.vue index 5293e7f7..01e2fbdb 100644 --- a/web/src/pages/Edit/components/NodeIconSidebar.vue +++ b/web/src/pages/Edit/components/NodeIconSidebar.vue @@ -1,40 +1,53 @@ - + - + - \ No newline at end of file diff --git a/web/src/pages/Edit/components/NodeImage.vue b/web/src/pages/Edit/components/NodeImage.vue index 39093020..9e5a597d 100644 --- a/web/src/pages/Edit/components/NodeImage.vue +++ b/web/src/pages/Edit/components/NodeImage.vue @@ -6,11 +6,19 @@ width="500" >
方式一
- +
方式二
请输入图片地址 - +
可选
@@ -50,10 +58,19 @@ export default { } }, 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.$bus.$on('showNodeImage', () => { + }, + + handleShowNodeImage() { this.reset() if (this.activeNodes.length > 0) { let firstNode = this.activeNodes[0] @@ -68,9 +85,8 @@ export default { this.imgTitle = firstNode.getData('imageTitle') } this.dialogVisible = true - }) - }, - methods: { + }, + cancel() { this.dialogVisible = false this.reset() diff --git a/web/src/pages/Edit/components/NodeNote.vue b/web/src/pages/Edit/components/NodeNote.vue index 252f222c..0f4786cd 100644 --- a/web/src/pages/Edit/components/NodeNote.vue +++ b/web/src/pages/Edit/components/NodeNote.vue @@ -43,7 +43,15 @@ export default { } }, 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] if (this.activeNodes.length > 0) { let firstNode = this.activeNodes[0] @@ -51,16 +59,16 @@ export default { } else { this.note = '' } - }) - this.$bus.$on('showNodeNote', () => { + }, + + handleShowNodeNote() { this.$bus.$emit('startTextEdit') this.dialogVisible = true this.$nextTick(() => { this.initEditor() }) - }) - }, - methods: { + }, + /** * @Author: 王林25 * @Date: 2022-05-09 11:37:05 diff --git a/web/src/pages/Edit/components/NodeTag.vue b/web/src/pages/Edit/components/NodeTag.vue index 711296d7..b12e093b 100644 --- a/web/src/pages/Edit/components/NodeTag.vue +++ b/web/src/pages/Edit/components/NodeTag.vue @@ -59,7 +59,15 @@ export default { } }, 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] if (this.activeNodes.length > 0) { let firstNode = this.activeNodes[0] @@ -68,13 +76,13 @@ export default { this.tagArr = [] this.tag = '' } - }) - this.$bus.$on('showNodeTag', () => { + }, + + handleShowNodeTag() { this.$bus.$emit('startTextEdit') this.dialogVisible = true - }) - }, - methods: { + }, + /** * @Author: 王林 * @Date: 2021-06-24 21:48:14 diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue index 64208bea..44723a1c 100644 --- a/web/src/pages/Edit/components/Outline.vue +++ b/web/src/pages/Edit/components/Outline.vue @@ -73,7 +73,19 @@ export default { }, created() { 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) { this.notHandleDataChange = false @@ -84,8 +96,9 @@ export default { return } this.refresh() - }) - this.$bus.$on('node_tree_render_end', () => { + }, + + handleNodeTreeRenderEnd() { // 当前存在未完成的节点插入操作 if (this.insertType) { this[this.insertType]() @@ -100,15 +113,8 @@ export default { this.afterCreateNewNode() }) } - }) - }, - mounted() { - this.refresh() - }, - beforeDestroy() { - window.removeEventListener('keydown', this.onKeyDown) - }, - methods: { + }, + // 刷新树数据 refresh() { 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; } diff --git a/web/src/pages/Edit/components/Search.vue b/web/src/pages/Edit/components/Search.vue index c5dd2391..15fbc512 100644 --- a/web/src/pages/Edit/components/Search.vue +++ b/web/src/pages/Edit/components/Search.vue @@ -1,7 +1,7 @@