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'