diff --git a/simple-mind-map/src/Event.js b/simple-mind-map/src/Event.js
index bc3f8ee3..58435609 100644
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -28,6 +28,7 @@ class Event extends EventEmitter {
// 绑定函数上下文
bindFn() {
this.onDrawClick = this.onDrawClick.bind(this)
+ this.onDrawMousedown = this.onDrawMousedown.bind(this)
this.onMousedown = this.onMousedown.bind(this)
this.onMousemove = this.onMousemove.bind(this)
this.onMouseup = this.onMouseup.bind(this)
@@ -40,6 +41,7 @@ class Event extends EventEmitter {
// 绑定事件
bind() {
this.mindMap.svg.on('click', this.onDrawClick)
+ this.mindMap.svg.on('mousedown', this.onDrawMousedown)
this.mindMap.el.addEventListener('mousedown', this.onMousedown)
this.mindMap.svg.on('mousedown', this.onSvgMousedown)
window.addEventListener('mousemove', this.onMousemove)
@@ -52,6 +54,7 @@ class Event extends EventEmitter {
// 解绑事件
unbind() {
this.mindMap.svg.off('click', this.onDrawClick)
+ this.mindMap.svg.off('mousedown', this.onDrawMousedown)
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
window.removeEventListener('mousemove', this.onMousemove)
window.removeEventListener('mouseup', this.onMouseup)
@@ -65,6 +68,11 @@ class Event extends EventEmitter {
this.emit('draw_click', e)
}
+ // 画布的鼠标按下事件
+ onDrawMousedown(e) {
+ this.emit('draw_mousedown', e)
+ }
+
// svg画布的鼠标按下事件
onSvgMousedown(e) {
this.emit('svg_mousedown', e)
@@ -72,7 +80,6 @@ class Event extends EventEmitter {
// 鼠标按下事件
onMousedown(e) {
- // e.preventDefault()
// 鼠标左键
if (e.which === 1) {
this.isLeftMousedown = true
@@ -84,13 +91,13 @@ class Event extends EventEmitter {
// 鼠标移动事件
onMousemove(e) {
- // e.preventDefault()
this.mousemovePos.x = e.clientX
this.mousemovePos.y = e.clientY
this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
this.emit('mousemove', e, this)
if (this.isLeftMousedown) {
+ e.preventDefault()
this.emit('drag', e, this)
}
}
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index 206e95d7..026655cb 100644
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -450,6 +450,7 @@ class Node {
// 更新节点形状样式
updateNodeShape() {
+ if (!this.shapeNode) return
const shape = this.getShape()
this.style[shape === CONSTANTS.SHAPE.RECTANGLE ? 'rect' : 'shape'](this.shapeNode)
}
diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js
index 14e97703..c9489d40 100644
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -4,6 +4,7 @@ import './css/quill.css'
import html2canvas from 'html2canvas'
import { Image as SvgImage } from '@svgdotjs/svg.js'
import { walk } from './utils'
+import { CONSTANTS } from './utils/constant'
let extended = false
@@ -97,7 +98,7 @@ class RichText {
this.mindMap.renderer.textEdit.registerTmpShortcut()
if (!this.textEditNode) {
this.textEditNode = document.createElement('div')
- this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;`
+ this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: 3px 5px;margin-left: -5px;margin-top: -3px;`
document.body.appendChild(this.textEditNode)
}
// 原始宽高
@@ -147,7 +148,7 @@ class RichText {
underline: node.style.merge('textDecoration') === 'underline',
strike: node.style.merge('textDecoration') === 'line-through'
}
- this.formatText(style)
+ this.formatAllText(style)
}
// 隐藏文本编辑控件,即完成编辑
@@ -435,6 +436,7 @@ class RichText {
node.data.richText = false
div.innerHTML = node.data.text
node.data.text = div.textContent
+ // delete node.data.uid
}
},
null,
@@ -445,7 +447,7 @@ class RichText {
// 清空历史数据,并且触发数据变化
this.mindMap.command.clearHistory()
this.mindMap.command.addHistory()
- this.mindMap.reRender()
+ this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
}
// 插件被移除前做的事情
diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js
index 35477d86..99dac586 100644
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -79,14 +79,14 @@ class Style {
color: this.merge('fillColor')
})
// 节点使用横线样式,不需要渲染非激活状态的边框样式
- if (
- !this.ctx.isRoot &&
- !this.ctx.isGeneralization &&
- this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
- !this.ctx.nodeData.data.isActive
- ) {
- return
- }
+ // if (
+ // !this.ctx.isRoot &&
+ // !this.ctx.isGeneralization &&
+ // this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
+ // !this.ctx.nodeData.data.isActive
+ // ) {
+ // return
+ // }
node.stroke({
color: this.merge('borderColor'),
width: this.merge('borderWidth'),
@@ -120,11 +120,11 @@ class Style {
}
// html文字节点
- domText(node, fontSizeScale = 1) {
+ domText(node, fontSizeScale = 1, textLines) {
node.style.fontFamily = this.merge('fontFamily')
node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
node.style.fontWeight = this.merge('fontWeight') || 'normal'
- node.style.lineHeight = this.merge('lineHeight')
+ node.style.lineHeight = textLines === 1 ? 'normal' : this.merge('lineHeight')
node.style.fontStyle = this.merge('fontStyle')
}
diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js
index a71e31b0..c28f2e9e 100644
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -23,6 +23,10 @@ export default class TextEdit {
// 隐藏文本编辑框
this.hideEditTextBox()
})
+ this.mindMap.on('draw_mousedown', () => {
+ // 隐藏文本编辑框
+ this.hideEditTextBox()
+ })
// 展开收缩按钮点击事件
this.mindMap.on('expand_btn_click', () => {
this.hideEditTextBox()
@@ -74,17 +78,18 @@ export default class TextEdit {
let scale = this.mindMap.view.scale
let lineHeight = node.style.merge('lineHeight')
let fontSize = node.style.merge('fontSize')
- node.style.domText(this.textEditNode, scale)
- this.textEditNode.innerHTML = node.nodeData.data.text
- .split(/\n/gim)
- .join('
')
+ let textLines = node.nodeData.data.text.split(/\n/gim)
+ node.style.domText(this.textEditNode, scale, textLines.length)
+ this.textEditNode.innerHTML = textLines.join('
')
this.textEditNode.style.minWidth = rect.width + 10 + 'px'
this.textEditNode.style.minHeight = rect.height + 6 + 'px'
this.textEditNode.style.left = rect.left + 'px'
this.textEditNode.style.top = rect.top + 'px'
this.textEditNode.style.display = 'block'
this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
- this.textEditNode.style.transform = `translateY(${-(lineHeight * fontSize - fontSize) / 2 * scale}px)`
+ if (textLines.length > 1 && lineHeight !== 1) {
+ this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2 - 2) * scale}px)`
+ }
this.showTextEdit = true
// 选中文本
this.selectNodeText()
@@ -126,6 +131,7 @@ export default class TextEdit {
this.textEditNode.style.fontFamily = 'inherit'
this.textEditNode.style.fontSize = 'inherit'
this.textEditNode.style.fontWeight = 'normal'
+ this.textEditNode.style.transform = 'translateY(0)'
this.showTextEdit = false
}
}
diff --git a/simple-mind-map/src/css/quill.css b/simple-mind-map/src/css/quill.css
index ac0bb00f..7afdf142 100644
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -2,6 +2,7 @@
overflow: hidden;
padding: 0;
height: auto;
+ line-height: normal;
}
.ql-container {
diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js
index 689a450a..795fa79b 100644
--- a/simple-mind-map/src/utils/constant.js
+++ b/simple-mind-map/src/utils/constant.js
@@ -117,6 +117,7 @@ export const themeList = [
// 常量
export const CONSTANTS = {
CHANGE_THEME: 'changeTheme',
+ TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
MODE: {
READONLY: 'readonly',
EDIT: 'edit'