From 74b1a082feb05a232d4d6512bde168cf47146639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Fri, 12 Jan 2024 10:23:20 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A1.=E5=9F=BA=E7=A1=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=B8=AD=E4=B8=80=E4=BA=9B=E4=BB=85=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BB=93=E6=9E=84=E7=9A=84=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=BD=93=E5=89=8D=E7=BB=93=E6=9E=84=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E6=98=BE=E7=A4=BA=E5=92=8C=E9=9A=90=E8=97=8F=E3=80=82?= =?UTF-8?q?2.=E5=AF=BC=E5=85=A5=E6=96=87=E4=BB=B6=E6=97=B6=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E9=9A=90=E8=97=8F=E4=BE=A7=E8=BE=B9=E6=A0=8F=E3=80=82?= =?UTF-8?q?3.=E6=96=B0=E5=A2=9E=E8=BF=9E=E7=BA=BF=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E7=9A=84=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/index.js | 1 + simple-mind-map/src/themes/default.js | 9 +- web/src/config/constant.js | 28 +++++ web/src/lang/en_us.js | 1 + web/src/lang/zh_cn.js | 1 + web/src/pages/Edit/components/BaseStyle.vue | 111 ++++++++++++++++---- web/src/pages/Edit/components/Import.vue | 4 + 7 files changed, 133 insertions(+), 22 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 2bde23ce..99057704 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -294,6 +294,7 @@ class MindMap { if (!notRender) { this.render(null, CONSTANTS.CHANGE_LAYOUT) } + this.emit('layout_change', layout) } // 执行命令 diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index 27123e85..8613f63c 100644 --- a/simple-mind-map/src/themes/default.js +++ b/simple-mind-map/src/themes/default.js @@ -17,10 +17,10 @@ export default { // 连线样式 lineDasharray: 'none', // 连线风格 - lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct） - // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型 + lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】 + // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构 rootLineKeepSameInCurve: true, - // 直线连接时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构 + // 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构 lineRadius: 5, // 连线尾部是否显示标记，目前只支持箭头 showLineMarker: false, @@ -58,7 +58,7 @@ export default { backgroundPosition: 'center center', // 设置背景图片大小 backgroundSize: 'cover', - // 节点使用横线样式 + // 节点使用只有底边横线的样式，仅支持logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构 nodeUseLineStyle: false, // 根节点样式 root: { @@ -178,6 +178,7 @@ const nodeSizeIndependenceList = [ 'rootLineKeepSameInCurve', 'showLineMarker', 'gradientStyle', + 'lineRadius', 'startColor', 'endColor' ] diff --git a/web/src/config/constant.js b/web/src/config/constant.js index 782074a4..8f6c82cc 100644 --- a/web/src/config/constant.js +++ b/web/src/config/constant.js @@ -81,3 +81,31 @@ export const formulaList = [ '\\begin{matrix}x & y \\\\z & v\\end{matrix}', '\\begin{cases}3x + 5y + z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}' ] + +export const supportLineStyleLayoutsMap = { + curve: ['logicalStructure', 'mindMap', 'verticalTimeline'], + direct: [ + 'logicalStructure', + 'mindMap', + 'organizationStructure', + 'verticalTimeline' + ] +} + +export const supportLineRadiusLayouts = [ + 'logicalStructure', + 'mindMap', + 'verticalTimeline' +] + +export const supportNodeUseLineStyleLayouts = [ + 'logicalStructure', + 'mindMap', + 'catalogOrganization', + 'organizationStructure' +] + +export const supportRootLineKeepSameInCurveLayouts = [ + 'logicalStructure', + 'mindMap' +] diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 5ae70103..7cc647c1 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -10,6 +10,7 @@ export default { line: 'Line', width: 'Width', style: 'Style', + lineRadius: 'Radius', lineOfOutline: 'Line of outline', showArrow: 'Is show arrow', nodePadding: 'Node padding', diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 1d748513..c5b7a41b 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -10,6 +10,7 @@ export default { line: '连线', width: '粗细', style: '风格', + lineRadius: '圆角大小', lineOfOutline: '概要的连线', showArrow: '是否显示箭头', nodePadding: '节点内边距', diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 6a2c7664..997926d0 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -148,7 +148,7 @@
-
+
{{ $t('baseStyle.style') }}
-
+
{{ $t('baseStyle.rootStyle') }}
+
+ {{ $t('baseStyle.lineRadius') }} + + + + +
@@ -426,20 +453,22 @@
-
{{ $t('baseStyle.nodeBorderType') }}
-
-
- {{ $t('baseStyle.nodeUseLineStyle') }} +
{{ $t('baseStyle.nodePadding') }}
@@ -837,6 +866,12 @@ import { import ImgUpload from '@/components/ImgUpload' import { storeConfig } from '@/api' import { mapState, mapMutations } from 'vuex' +import { + supportLineStyleLayoutsMap, + supportLineRadiusLayouts, + supportNodeUseLineStyleLayouts, + supportRootLineKeepSameInCurveLayouts +} from '@/config/constant' /** * @Author: 王林 @@ -872,6 +907,7 @@ export default { lineStyle: '', showLineMarker: '', rootLineKeepSameInCurve: '', + lineRadius: 0, generalizationLineWidth: '', generalizationLineColor: '', associativeLineColor: '', @@ -917,12 +953,12 @@ export default { enableNodeRichText: true, localConfigs: { isShowScrollbar: false - } + }, + currentLayout: '' // 当前结构 } }, computed: { ...mapState(['activeSidebar', 'localConfig', 'isDark']), - lineStyleList() { return lineStyleList[this.$i18n.locale] || lineStyleList.zh }, @@ -948,6 +984,32 @@ export default { }, lineStyleMap() { return lineStyleMap[this.$i18n.locale] || lineStyleMap.zh + }, + showNodeUseLineStyle() { + return supportNodeUseLineStyleLayouts.includes(this.currentLayout) + }, + showLineRadius() { + return ( + this.style.lineStyle === 'straight' && + supportLineRadiusLayouts.includes(this.currentLayout) + ) + }, + lineStyleListShow() { + const res = [] + this.lineStyleList.forEach(item => { + const list = supportLineStyleLayoutsMap[item.value] + if (list) { + if (list.includes(this.currentLayout)) { + res.push(item) + } + } else { + res.push(item) + } + }) + return res + }, + showRootLineKeepSameInCurveLayouts() { + return supportRootLineKeepSameInCurveLayouts.includes(this.currentLayout) } }, watch: { @@ -957,9 +1019,21 @@ export default { this.initStyle() this.initConfig() this.initWatermark() + this.currentLayout = this.mindMap.getLayout() } else { this.$refs.sidebar.show = false } + }, + lineStyleListShow: { + deep: true, + handler() { + const has = this.lineStyleListShow.find(item => { + return item.value === this.style.lineStyle + }) + if (!has) { + this.style.lineStyle = this.lineStyleListShow[0].value + } + } } }, created() { @@ -991,6 +1065,7 @@ export default { 'lineStyle', 'showLineMarker', 'rootLineKeepSameInCurve', + 'lineRadius', 'lineColor', 'generalizationLineWidth', 'generalizationLineColor', diff --git a/web/src/pages/Edit/components/Import.vue b/web/src/pages/Edit/components/Import.vue index 59761978..58f8aa16 100644 --- a/web/src/pages/Edit/components/Import.vue +++ b/web/src/pages/Edit/components/Import.vue @@ -36,6 +36,7 @@ import xmind from 'simple-mind-map/src/parse/xmind.js' import markdown from 'simple-mind-map/src/parse/markdown.js' import { fileToBuffer } from '@/utils' import { read, utils } from 'xlsx' +import { mapMutations } from 'vuex' /** * @Author: 王林 @@ -66,6 +67,8 @@ export default { this.$bus.$off('handle_file_url', this.handleFileURL) }, methods: { + ...mapMutations(['setActiveSidebar']), + handleShowImport() { this.dialogVisible = true }, @@ -153,6 +156,7 @@ export default { this.handleMd(file) } this.cancel() + this.setActiveSidebar(null) }, /**