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 @@
+
+