diff --git a/simple-mind-map/src/AssociativeLine.js b/simple-mind-map/src/AssociativeLine.js index 71bf7ea3..c365a8de 100644 --- a/simple-mind-map/src/AssociativeLine.js +++ b/simple-mind-map/src/AssociativeLine.js @@ -97,6 +97,8 @@ class AssociativeLine { window.addEventListener('mouseup', e => { this.onControlPointMouseup(e) }) + // 缩放事件 + this.mindMap.on('scale', this.onScale) } // 创建箭头 diff --git a/simple-mind-map/src/utils/associativeLineText.js b/simple-mind-map/src/utils/associativeLineText.js index 81d51ba5..f761ab13 100644 --- a/simple-mind-map/src/utils/associativeLineText.js +++ b/simple-mind-map/src/utils/associativeLineText.js @@ -4,11 +4,7 @@ import { getStrWithBrFromHtml } from './index' // 创建文字节点 function createText(data) { let g = this.draw.group() - g.click(e => { - e.stopPropagation() - }) - g.on('dblclick', e => { - e.stopPropagation() + const setActive = () => { if ( !this.activeLine || this.activeLine[3] !== data.node || @@ -19,6 +15,14 @@ function createText(data) { text: g }) } + } + g.click(e => { + e.stopPropagation() + setActive() + }) + g.on('dblclick', e => { + e.stopPropagation() + setActive() if (!this.activeLine) return this.showEditTextBox(g) }) @@ -50,13 +54,14 @@ function showEditTextBox(g) { associativeLineTextFontFamily, associativeLineTextLineHeight } = this.mindMap.themeConfig + let scale = this.mindMap.view.scale let [, , , node, toNode] = this.activeLine let textLines = ( this.getText(node, toNode) || this.mindMap.opt.defaultAssociativeLineText ).split(/\n/gim) this.textEditNode.style.fontFamily = associativeLineTextFontFamily - this.textEditNode.style.fontSize = associativeLineTextFontSize + 'px' - this.textEditNode.style.lineHeight = associativeLineTextLineHeight + this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px' + this.textEditNode.style.lineHeight = textLines.length > 1 ? associativeLineTextLineHeight : 'normal' this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') this.textEditNode.style.display = 'block' @@ -64,6 +69,11 @@ function showEditTextBox(g) { this.showTextEdit = true } +// 处理画布缩放 +function onScale() { + this.hideEditTextBox() +} + // 更新文本编辑框位置 function updateTextEditBoxPos(g) { let rect = g.node.getBoundingClientRect() @@ -148,6 +158,7 @@ export default { getText, createText, styleText, + onScale, showEditTextBox, hideEditTextBox, updateTextEditBoxPos, diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index a901d4c0..78cada26 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -295,6 +295,67 @@ + +
关联线文字
+
+
+ 字体 + + + + +
+
+
+
+ 颜色 + + + + +
+
+ 字号 + + + + +
+
{{ $t('baseStyle.nodeBorderType') }}
@@ -546,7 +607,7 @@