diff --git a/index.html b/index.html index 17f82518..0b8f00c0 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index c7cdca74..6bad7092 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -88,7 +88,9 @@ const defaultOpt = { // 是否开启节点动画过渡 enableNodeTransitionMove: true, // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms - nodeTransitionMoveDuration: 300 + nodeTransitionMoveDuration: 300, + // 初始根节点的位置 + initRootNodePosition: [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER, CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER] } // 思维导图 diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 9eabaf9c..995945b6 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.5.2", + "version": "0.5.3", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 3f6caa71..28b9e83f 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -699,7 +699,7 @@ class Render { if (Object.keys(config).length > 0) { this.mindMap.richText.showEditText(node) this.mindMap.richText.formatAllText(config) - this.mindMap.richText.hideEditText() + this.mindMap.richText.hideEditText([node]) } } this.setNodeDataRender(node, data) diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index c9489d40..2f2af9f7 100644 --- a/simple-mind-map/src/RichText.js +++ b/simple-mind-map/src/RichText.js @@ -152,14 +152,15 @@ class RichText { } // 隐藏文本编辑控件，即完成编辑 - hideEditText() { + hideEditText(nodes) { if (!this.showTextEdit) { return } let html = this.quill.container.firstChild.innerHTML // 去除最后的空行 html = html.replace(/


<\/p>$/, '') - this.mindMap.renderer.activeNodeList.forEach(node => { + let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList + list.forEach(node => { this.mindMap.execCommand('SET_NODE_TEXT', node, html, true) if (node.isGeneralization) { // 概要节点 @@ -170,7 +171,7 @@ class RichText { this.mindMap.emit( 'hide_text_edit', this.textEditNode, - this.mindMap.renderer.activeNodeList + list ) this.textEditNode.style.display = 'none' this.showTextEdit = false diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 0111c33a..dd6e1679 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -1,5 +1,5 @@ import Node from '../Node' -import { CONSTANTS } from '../utils/constant' +import { CONSTANTS, initRootNodePositionMap } from '../utils/constant' // 布局基类 class Base { @@ -122,10 +122,28 @@ class Base { return newNode } + // 格式化节点位置 + formatPosition(value, size, nodeSize) { + if (typeof value === 'number') { + return value + } else if (initRootNodePositionMap[value] !== undefined) { + return size * initRootNodePositionMap[value] + } else if (/^\d\d*%$/.test(value)) { + return Number.parseFloat(value) / 100 * size + } else { + return (size - nodeSize) / 2 + } + } + // 定位节点到画布中间 setNodeCenter(node) { - node.left = (this.mindMap.width - node.width) / 2 - node.top = (this.mindMap.height - node.height) / 2 + let { initRootNodePosition } = this.mindMap.opt + let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION + if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) { + initRootNodePosition = [CENTER, CENTER] + } + node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width) + node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height) } // 更新子节点属性 diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index 795fa79b..dc725247 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -154,9 +154,24 @@ export const CONSTANTS = { MOUSE_WHEEL_ACTION: { ZOOM: 'zoom', MOVE: 'move' + }, + INIT_ROOT_NODE_POSITION: { + LEFT: 'left', + TOP: 'top', + RIGHT: 'right', + BOTTOM: 'bottom', + CENTER: 'center' } } +export const initRootNodePositionMap = { + [CONSTANTS.INIT_ROOT_NODE_POSITION.LEFT]: 0, + [CONSTANTS.INIT_ROOT_NODE_POSITION.TOP]: 0, + [CONSTANTS.INIT_ROOT_NODE_POSITION.RIGHT]: 1, + [CONSTANTS.INIT_ROOT_NODE_POSITION.BOTTOM]: 1, + [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5, +} + // 布局结构列表 export const layoutList = [ { diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 393e5764..a3cd9fd6 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,11 @@ # Changelog +## 0.5.3 + +Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node. + +New: 1.Support setting the position of the initial central node. + ## 0.5.2 Fix: 1.Remove `uid` from exported `JSON` data; 2.Clear the node cache pool when re rendering. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index f4e01aed..83f89526 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,9 @@