From 5bd6adb48854fcb73f2e904750a11bfbcbc6e2aa Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sat, 14 Jan 2023 16:26:51 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E7=82=B9=E8=87=AA=E7=94=B1=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E5=BC=80=E5=90=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/example/exampleData.js | 3 +- simple-mind-map/example/exportFullData.json | 3 +- simple-mind-map/index.js | 14 +- simple-mind-map/package.json | 2 +- simple-mind-map/src/Drag.js | 517 ++++++++++---------- web/src/lang/en_us.js | 4 +- web/src/lang/zh_cn.js | 4 +- web/src/pages/Doc/en/constructor/index.md | 55 ++- web/src/pages/Doc/zh/constructor/index.md | 57 ++- web/src/pages/Edit/components/BaseStyle.vue | 34 ++ web/src/pages/Edit/components/Edit.vue | 5 +- 11 files changed, 405 insertions(+), 293 deletions(-) diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index 1fd46fb5..41af1dd2 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -925,5 +925,6 @@ export default { "layout": "logicalStructure", // "layout": "mindMap", // "layout": "catalogOrganization" - // "layout": "organizationStructure" + // "layout": "organizationStructure", + "config": {} } \ No newline at end of file diff --git a/simple-mind-map/example/exportFullData.json b/simple-mind-map/example/exportFullData.json index 2ef547b1..59d64dbe 100644 --- a/simple-mind-map/example/exportFullData.json +++ b/simple-mind-map/example/exportFullData.json @@ -62,5 +62,6 @@ "sx": 0, "sy": 0 } - } + }, + "config": {} } \ No newline at end of file diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index bd1a81b1..b749aa2e 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -45,13 +45,15 @@ const defaultOpt = { // 多选节点时鼠标移动距边缘多少距离时开始偏移 selectTranslateLimit: 20, // 自定义节点备注内容显示 - customNoteContentShow: null + customNoteContentShow: null, /* { show(){}, hide(){} } */ + // 是否开启节点自由拖拽 + enableFreeDrag: false } // 思维导图 @@ -229,6 +231,16 @@ class MindMap { return prop === undefined ? this.themeConfig : this.themeConfig[prop] } + // 获取配置 + getConfig(prop) { + return prop === undefined ? this.opt : this.opt[prop] + } + + // 更新配置 + updateConfig(opt = {}) { + this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt])) + } + // 获取当前布局结构 getLayout() { return this.opt.layout diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index e7e95e62..8fa6e978 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.2.23", + "version": "0.2.24", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Drag.js b/simple-mind-map/src/Drag.js index 955516c5..82434288 100644 --- a/simple-mind-map/src/Drag.js +++ b/simple-mind-map/src/Drag.js @@ -1,254 +1,263 @@ -import { bfsWalk, throttle } from './utils' -import Base from './layouts/Base' - -// 节点拖动类 -class Drag extends Base { - // 构造函数 - constructor({ mindMap }) { - super(mindMap.renderer) - this.mindMap = mindMap - this.reset() - this.bindEvent() - } - - // 复位 - reset() { - // 当前拖拽节点 - this.node = null - // 当前重叠节点 - this.overlapNode = null - // 当前上一个同级节点 - this.prevNode = null - // 当前下一个同级节点 - this.nextNode = null - // 画布的变换数据 - this.drawTransform = null - // 克隆节点 - this.clone = null - // 连接线 - this.line = null - // 同级位置占位符 - this.placeholder = null - // 鼠标按下位置和节点左上角的偏移量 - this.offsetX = 0 - this.offsetY = 0 - // 克隆节点左上角的坐标 - this.cloneNodeLeft = 0 - this.cloneNodeTop = 0 - // 当前鼠标是否按下 - this.isMousedown = false - // 拖拽的鼠标位置变量 - this.mouseDownX = 0 - this.mouseDownY = 0 - this.mouseMoveX = 0 - this.mouseMoveY = 0 - } - - // 绑定事件 - bindEvent() { - this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this) - this.mindMap.on('node_mousedown', (node, e) => { - if (this.mindMap.opt.readonly || node.isGeneralization) { - return - } - if (e.which !== 1 || node.isRoot) { - return - } - e.preventDefault() - // 计算鼠标按下的位置距离节点左上角的距离 - this.drawTransform = this.mindMap.draw.transform() - let { scaleX, scaleY, translateX, translateY } = this.drawTransform - let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) - this.offsetX = x - (node.left * scaleX + translateX) - this.offsetY = y - (node.top * scaleY + translateY) - this.node = node - this.isMousedown = true - this.mouseDownX = x - this.mouseDownY = y - }) - this.mindMap.on('mousemove', e => { - if (this.mindMap.opt.readonly) { - return - } - if (!this.isMousedown) { - return - } - e.preventDefault() - let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) - this.mouseMoveX = x - this.mouseMoveY = y - if ( - Math.abs(x - this.mouseDownX) <= 10 && - Math.abs(y - this.mouseDownY) <= 10 && - !this.node.isDrag - ) { - return - } - this.mindMap.renderer.clearAllActive() - this.onMove(x, y) - }) - this.onMouseup = this.onMouseup.bind(this) - this.mindMap.on('node_mouseup', this.onMouseup) - this.mindMap.on('mouseup', this.onMouseup) - } - - // 鼠标松开事件 - onMouseup(e) { - if (!this.isMousedown) { - return - } - this.isMousedown = false - let _nodeIsDrag = this.node.isDrag - this.node.isDrag = false - this.node.show() - this.removeCloneNode() - // 存在重叠子节点，则移动作为其子节点 - if (this.overlapNode) { - this.mindMap.renderer.setNodeActive(this.overlapNode, false) - this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode) - } else if (this.prevNode) { - // 存在前一个相邻节点，作为其下一个兄弟节点 - this.mindMap.renderer.setNodeActive(this.prevNode, false) - this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode) - } else if (this.nextNode) { - // 存在下一个相邻节点，作为其前一个兄弟节点 - this.mindMap.renderer.setNodeActive(this.nextNode, false) - this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode) - } else if (_nodeIsDrag) { - // 自定义位置 - let { x, y } = this.mindMap.toPos( - e.clientX - this.offsetX, - e.clientY - this.offsetY - ) - let { scaleX, scaleY, translateX, translateY } = this.drawTransform - x = (x - translateX) / scaleX - y = (y - translateY) / scaleY - this.node.left = x - this.node.top = y - this.node.customLeft = x - this.node.customTop = y - this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y) - this.mindMap.render() - } - this.reset() - } - - // 创建克隆节点 - createCloneNode() { - if (!this.clone) { - // 节点 - this.clone = this.node.group.clone() - this.clone.opacity(0.5) - this.clone.css('z-index', 99999) - this.node.isDrag = true - this.node.hide() - // 连接线 - this.line = this.draw.path() - this.line.opacity(0.5) - this.node.styleLine(this.line, this.node) - // 同级位置占位符 - this.placeholder = this.draw.rect().fill({ - color: this.node.style.merge('lineColor', true) - }) - this.mindMap.draw.add(this.clone) - } - } - - // 移除克隆节点 - removeCloneNode() { - if (!this.clone) { - return - } - this.clone.remove() - this.line.remove() - this.placeholder.remove() - } - - // 拖动中 - onMove(x, y) { - if (!this.isMousedown) { - return - } - this.createCloneNode() - let { scaleX, scaleY, translateX, translateY } = this.drawTransform - this.cloneNodeLeft = x - this.offsetX - this.cloneNodeTop = y - this.offsetY - x = (this.cloneNodeLeft - translateX) / scaleX - y = (this.cloneNodeTop - translateY) / scaleY - let t = this.clone.transform() - this.clone.translate(x - t.translateX, y - t.translateY) - // 连接线 - let parent = this.node.parent - this.line.plot( - this.quadraticCurvePath( - parent.left + parent.width / 2, - parent.top + parent.height / 2, - x + this.node.width / 2, - y + this.node.height / 2 - ) - ) - this.checkOverlapNode() - } - - // 检测重叠节点 - checkOverlapNode() { - if (!this.drawTransform) { - return - } - let { scaleX, scaleY, translateX, translateY } = this.drawTransform - let checkRight = this.cloneNodeLeft + this.node.width * scaleX - let checkBottom = this.cloneNodeTop + this.node.height * scaleX - this.overlapNode = null - this.prevNode = null - this.nextNode = null - this.placeholder.size(0, 0) - bfsWalk(this.mindMap.renderer.root, node => { - if (node.nodeData.data.isActive) { - this.mindMap.renderer.setNodeActive(node, false) - } - if (node === this.node || this.node.isParent(node)) { - return - } - if (this.overlapNode || (this.prevNode && this.nextNode)) { - return - } - let { left, top, width, height } = node - let _left = left - let _top = top - let _bottom = top + height - let right = (left + width) * scaleX + translateX - let bottom = (top + height) * scaleY + translateY - left = left * scaleX + translateX - top = top * scaleY + translateY - // 检测是否重叠 - if (!this.overlapNode) { - if ( - left <= checkRight && - right >= this.cloneNodeLeft && - top <= checkBottom && - bottom >= this.cloneNodeTop - ) { - this.overlapNode = node - } - } - // 检测兄弟节点位置 - if (!this.prevNode && !this.nextNode && !node.isRoot) { - // && this.node.isBrother(node) - if (left <= checkRight && right >= this.cloneNodeLeft) { - if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) { - this.prevNode = node - this.placeholder.size(node.width, 10).move(_left, _bottom) - } else if (checkBottom < top && checkBottom >= top - 10) { - this.nextNode = node - this.placeholder.size(node.width, 10).move(_left, _top - 10) - } - } - } - }) - if (this.overlapNode) { - this.mindMap.renderer.setNodeActive(this.overlapNode, true) - } - } -} - -export default Drag +import { bfsWalk, throttle } from './utils' +import Base from './layouts/Base' + +// 节点拖动类 + +class Drag extends Base { + // 构造函数 + + constructor({ mindMap }) { + super(mindMap.renderer) + this.mindMap = mindMap + this.reset() + this.bindEvent() + } + + // 复位 + + reset() { + // 当前拖拽节点 + this.node = null + // 当前重叠节点 + this.overlapNode = null + // 当前上一个同级节点 + this.prevNode = null + // 当前下一个同级节点 + this.nextNode = null + // 画布的变换数据 + this.drawTransform = null + // 克隆节点 + this.clone = null + // 连接线 + this.line = null + // 同级位置占位符 + this.placeholder = null + // 鼠标按下位置和节点左上角的偏移量 + this.offsetX = 0 + this.offsetY = 0 + // 克隆节点左上角的坐标 + this.cloneNodeLeft = 0 + this.cloneNodeTop = 0 + // 当前鼠标是否按下 + this.isMousedown = false + // 拖拽的鼠标位置变量 + this.mouseDownX = 0 + this.mouseDownY = 0 + this.mouseMoveX = 0 + this.mouseMoveY = 0 + } + + // 绑定事件 + + bindEvent() { + this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this) + this.mindMap.on('node_mousedown', (node, e) => { + if (this.mindMap.opt.readonly || node.isGeneralization) { + return + } + if (e.which !== 1 || node.isRoot) { + return + } + e.preventDefault() + // 计算鼠标按下的位置距离节点左上角的距离 + this.drawTransform = this.mindMap.draw.transform() + let { scaleX, scaleY, translateX, translateY } = this.drawTransform + let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) + this.offsetX = x - (node.left * scaleX + translateX) + this.offsetY = y - (node.top * scaleY + translateY) + this.node = node + this.isMousedown = true + this.mouseDownX = x + this.mouseDownY = y + }) + this.mindMap.on('mousemove', e => { + if (this.mindMap.opt.readonly) { + return + } + if (!this.isMousedown) { + return + } + e.preventDefault() + let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) + this.mouseMoveX = x + this.mouseMoveY = y + if ( + Math.abs(x - this.mouseDownX) <= 10 && + Math.abs(y - this.mouseDownY) <= 10 && + !this.node.isDrag + ) { + return + } + this.mindMap.renderer.clearAllActive() + this.onMove(x, y) + }) + this.onMouseup = this.onMouseup.bind(this) + this.mindMap.on('node_mouseup', this.onMouseup) + this.mindMap.on('mouseup', this.onMouseup) + } + + // 鼠标松开事件 + + onMouseup(e) { + if (!this.isMousedown) { + return + } + this.isMousedown = false + let _nodeIsDrag = this.node.isDrag + this.node.isDrag = false + this.node.show() + this.removeCloneNode() + // 存在重叠子节点，则移动作为其子节点 + if (this.overlapNode) { + this.mindMap.renderer.setNodeActive(this.overlapNode, false) + this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode) + } else if (this.prevNode) { + // 存在前一个相邻节点，作为其下一个兄弟节点 + this.mindMap.renderer.setNodeActive(this.prevNode, false) + this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode) + } else if (this.nextNode) { + // 存在下一个相邻节点，作为其前一个兄弟节点 + this.mindMap.renderer.setNodeActive(this.nextNode, false) + this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode) + } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) { + // 自定义位置 + let { x, y } = this.mindMap.toPos( + e.clientX - this.offsetX, + e.clientY - this.offsetY + ) + let { scaleX, scaleY, translateX, translateY } = this.drawTransform + x = (x - translateX) / scaleX + y = (y - translateY) / scaleY + this.node.left = x + this.node.top = y + this.node.customLeft = x + this.node.customTop = y + this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y) + this.mindMap.render() + } + this.reset() + } + + // 创建克隆节点 + + createCloneNode() { + if (!this.clone) { + // 节点 + this.clone = this.node.group.clone() + this.clone.opacity(0.5) + this.clone.css('z-index', 99999) + this.node.isDrag = true + this.node.hide() + // 连接线 + this.line = this.draw.path() + this.line.opacity(0.5) + this.node.styleLine(this.line, this.node) + // 同级位置占位符 + this.placeholder = this.draw.rect().fill({ + color: this.node.style.merge('lineColor', true) + }) + this.mindMap.draw.add(this.clone) + } + } + + // 移除克隆节点 + + removeCloneNode() { + if (!this.clone) { + return + } + this.clone.remove() + this.line.remove() + this.placeholder.remove() + } + + // 拖动中 + + onMove(x, y) { + if (!this.isMousedown) { + return + } + this.createCloneNode() + let { scaleX, scaleY, translateX, translateY } = this.drawTransform + this.cloneNodeLeft = x - this.offsetX + this.cloneNodeTop = y - this.offsetY + x = (this.cloneNodeLeft - translateX) / scaleX + y = (this.cloneNodeTop - translateY) / scaleY + let t = this.clone.transform() + this.clone.translate(x - t.translateX, y - t.translateY) + // 连接线 + let parent = this.node.parent + this.line.plot( + this.quadraticCurvePath( + parent.left + parent.width / 2, + parent.top + parent.height / 2, + x + this.node.width / 2, + y + this.node.height / 2 + ) + ) + this.checkOverlapNode() + } + + // 检测重叠节点 + + checkOverlapNode() { + if (!this.drawTransform) { + return + } + let { scaleX, scaleY, translateX, translateY } = this.drawTransform + let checkRight = this.cloneNodeLeft + this.node.width * scaleX + let checkBottom = this.cloneNodeTop + this.node.height * scaleX + this.overlapNode = null + this.prevNode = null + this.nextNode = null + this.placeholder.size(0, 0) + bfsWalk(this.mindMap.renderer.root, node => { + if (node.nodeData.data.isActive) { + this.mindMap.renderer.setNodeActive(node, false) + } + if (node === this.node || this.node.isParent(node)) { + return + } + if (this.overlapNode || (this.prevNode && this.nextNode)) { + return + } + let { left, top, width, height } = node + let _left = left + let _top = top + let _bottom = top + height + let right = (left + width) * scaleX + translateX + let bottom = (top + height) * scaleY + translateY + left = left * scaleX + translateX + top = top * scaleY + translateY + // 检测是否重叠 + if (!this.overlapNode) { + if ( + left <= checkRight && + right >= this.cloneNodeLeft && + top <= checkBottom && + bottom >= this.cloneNodeTop + ) { + this.overlapNode = node + } + } + // 检测兄弟节点位置 + if (!this.prevNode && !this.nextNode && !node.isRoot) { + // && this.node.isBrother(node) + if (left <= checkRight && right >= this.cloneNodeLeft) { + if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) { + this.prevNode = node + this.placeholder.size(node.width, 10).move(_left, _bottom) + } else if (checkBottom < top && checkBottom >= top - 10) { + this.nextNode = node + this.placeholder.size(node.width, 10).move(_left, _top - 10) + } + } + } + }) + if (this.overlapNode) { + this.mindMap.renderer.setNodeActive(this.overlapNode, true) + } + } +} + +export default Drag diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 37e7d187..91fe4c6c 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -20,7 +20,9 @@ export default { level2Node: 'Level2 node', belowLevel2Node: 'Below level2 node', nodeBorderType: 'Node border style', - nodeUseLineStyle: 'Use only has bottom border style' + nodeUseLineStyle: 'Use only has bottom border style', + otherConfig: 'Other config', + enableFreeDrag: 'Enable node free drag' }, color: { moreColor: 'More color' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 56c9a94b..2b9c5f70 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -20,7 +20,9 @@ export default { level2Node: '二级节点', belowLevel2Node: '三级及以下节点', nodeBorderType: '节点边框风格', - nodeUseLineStyle: '是否使用只有底边框的风格' + nodeUseLineStyle: '是否使用只有底边框的风格', + otherConfig: '其他配置', + enableFreeDrag: '是否开启节点自由拖拽' }, color: { moreColor: '更多颜色' diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index e241a981..8f3d103f 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -66,22 +66,23 @@ package ## Instantiation options -| Field Name | Type | Default Value | Description | Required | -| -------------------------------- | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| el | Element | | Container element, must be a DOM element | Yes | -| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | | -| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) | | +| Field Name | Type | Default Value | Description | Required | +| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- | +| el | Element | | Container element, must be a DOM element | Yes | +| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | | +| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) | | | theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple | | -| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | | -| scaleRatio | Number | 0.1 | The incremental scaling ratio | | -| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | | -| exportPadding | Number | 20 | The padding for exporting images | | -| imgTextMargin | Number | 5 | The spacing between the image and text in the node | | -| textContentMargin | Number | 2 | The spacing between various text information in the node, such as the spacing between the icon and text | | -| selectTranslateStep | Number | 3 | The canvas offset when mouse moves to the edge during multi-select node | | -| selectTranslateLimit | Number | 20 | The distance from the edge when the canvas begins to offset during multi-select node | | -| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | | -| readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | | +| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | | +| scaleRatio | Number | 0.1 | The incremental scaling ratio | | +| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | | +| exportPadding | Number | 20 | The padding for exporting images | | +| imgTextMargin | Number | 5 | The spacing between the image and text in the node | | +| textContentMargin | Number | 2 | The spacing between various text information in the node, such as the spacing between the icon and text | | +| selectTranslateStep | Number | 3 | The canvas offset when mouse moves to the edge during multi-select node | | +| selectTranslateLimit | Number | 20 | The distance from the edge when the canvas begins to offset during multi-select node | | +| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | | +| readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | | +| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free drag | | ## Static methods @@ -200,6 +201,30 @@ Gets the custom theme configuration. Gets the value of a specific theme configuration property. +### getConfig(*prop*) + +> 0.2.24+ + +`prop`：Get the value of the specified configuration, and return the entire configuration if not passed + +Get config, That is, `opt` of `new MindMap (opt)` + +### updateConfig(*opt* = {}) + +> 0.2.24+ + +`opt`：Configuration to update + +Update config，That is update `opt` of `new MindMap(opt)`，You can only update some data, such as: + +```js +mindMap.updateConfig({ + enableFreeDrag: true// 开启节点自由拖拽 +}) +``` + +This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering + ### getLayout() Gets the current layout structure. diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 5c0d424a..ca4fe5b1 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -56,22 +56,23 @@ console.log(MindMap.xmind) ## 实例化选项 -| 字段名称 | 类型 | 默认值 | 描述 | 是否必填 | -| ------------------------------ | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| el | Element | | 容器元素，必须为DOM元素 | 是 | -| data | Object | {} | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | | -| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） | | -| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） | | -| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | | -| scaleRatio | Number | 0.1 | 放大缩小的增量比例 | | -| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 | | -| exportPadding | Number | 20 | 导出图片时的内边距 | | -| imgTextMargin | Number | 5 | 节点里图片和文字的间距 | | -| textContentMargin | Number | 2 | 节点里各种文字信息的间距，如图标和文字的间距 | | -| selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | | -| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | | -| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | | -| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 | | +| 字段名称 | 类型 | 默认值 | 描述 | 是否必填 | +| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- | +| el | Element | | 容器元素，必须为DOM元素 | 是 | +| data | Object | {} | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | | +| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） | | +| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） | | +| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | | +| scaleRatio | Number | 0.1 | 放大缩小的增量比例 | | +| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 | | +| exportPadding | Number | 20 | 导出图片时的内边距 | | +| imgTextMargin | Number | 5 | 节点里图片和文字的间距 | | +| textContentMargin | Number | 2 | 节点里各种文字信息的间距，如图标和文字的间距 | | +| selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | | +| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | | +| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | | +| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 | | +| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽 | | ## 静态方法 @@ -186,6 +187,30 @@ mindMap.setTheme('主题名称') 获取某个主题配置属性值 +### getConfig(*prop*) + +> 0.2.24+ + +`prop`：获取指定配置的值，不传则返回整个配置 + +获取配置，即`new MindMap(opt)`的`opt` + +### updateConfig(*opt* = {}) + +> 0.2.24+ + +`opt`：要更新的配置 + +更新配置，即更新`new MindMap(opt)`的`opt`，可以只更新部分数据，比如： + +```js +mindMap.updateConfig({ + enableFreeDrag: true// 开启节点自由拖拽 +}) +``` + +该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的 + ### getLayout() 获取当前的布局结构 diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index ac526b60..072e8e39 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -299,6 +299,17 @@ > + +
{{ $t('baseStyle.otherConfig') }}
+
+
+ {{ $t('baseStyle.enableFreeDrag') }} +
+
@@ -354,6 +365,9 @@ export default { marginX: 0, marginY: 0, nodeUseLineStyle: false + }, + config: { + enableFreeDrag: false } } }, @@ -372,6 +386,7 @@ export default { if (val === 'baseStyle') { this.$refs.sidebar.show = true this.initStyle() + this.initConfig() } else { this.$refs.sidebar.show = false } @@ -408,6 +423,13 @@ export default { this.initMarginStyle() }, + // 初始化其他配置 + initConfig() { + ;['enableFreeDrag'].forEach(key => { + this.config[key] = this.mindMap.getConfig(key) + }) + }, + /** * @Author: 王林 * @Date: 2021-07-03 22:27:32 @@ -442,6 +464,18 @@ export default { }) }, + // 更新其他配置 + updateOtherConfig(key, value) { + this.mindMap.updateConfig({ + [key]: value + }) + this.data.config = this.data.config || {} + this.data.config[key] = value + storeConfig({ + config: this.data.config + }) + }, + /** * @Author: 王林 * @Date: 2021-07-03 22:08:12 diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 52e9a92e..deeda3f6 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -230,7 +230,7 @@ export default { * @Desc: 初始化 */ init() { - let { root, layout, theme, view } = this.mindMapData + let { root, layout, theme, view, config } = this.mindMapData this.mindMap = new MindMap({ el: this.$refs.mindMapContainer, data: root, @@ -245,7 +245,8 @@ export default { hide: () => { // this.$bus.$emit('hideNoteContent') } - } + }, + ...(config || {}) }) this.mindMap.keyCommand.addShortcut('Control+s', () => { this.manualSave()