From 49063d257bd24424c3345195e0b22321f318b9f6 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 2 Aug 2023 19:36:03 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E9=80=9A?= =?UTF-8?q?=E8=BF=87=E9=85=8D=E7=BD=AE=E6=8C=87=E5=AE=9A=E5=86=85=E9=83=A8?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E5=85=83=E7=B4=A0=E6=B7=BB=E5=8A=A0=E5=88=B0?= =?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/constants/defaultOptions.js | 4 +- simple-mind-map/src/core/render/TextEdit.js | 6 +- .../core/render/node/nodeCreateContents.js | 5 +- simple-mind-map/src/plugins/NodeImgAdjust.js | 12 ++- simple-mind-map/src/plugins/RichText.js | 6 +- .../associativeLine/associativeLineText.js | 3 +- web/src/pages/Doc/en/constructor/index.md | 1 + web/src/pages/Doc/en/constructor/index.vue | 7 ++ web/src/pages/Doc/zh/constructor/index.md | 1 + web/src/pages/Doc/zh/constructor/index.vue | 7 ++ web/src/pages/Edit/components/Edit.vue | 99 +------------------ 11 files changed, 46 insertions(+), 105 deletions(-) diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index a89f448d..babb77d5 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -122,5 +122,7 @@ export const defaultOpt = { // 是否开启自定义节点内容 isUseCustomNodeContent: false, // 自定义返回节点内容的方法 - customCreateNodeContent: null + customCreateNodeContent: null, + // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 + customInnerElsAppendTo: null } diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index e426ecf6..20eee8eb 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -167,7 +167,11 @@ export default class TextEdit { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - document.body.appendChild(this.textEditNode) + this.textEditNode.addEventListener('mousedown', (e) => { + e.stopPropagation() + }) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.textEditNode) } let scale = this.mindMap.view.scale let lineHeight = node.style.merge('lineHeight') diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js index 505bab59..2d5268bf 100644 --- a/simple-mind-map/src/core/render/node/nodeCreateContents.js +++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js @@ -268,7 +268,7 @@ function createNoteNode() { if (!this.noteEl) { this.noteEl = document.createElement('div') this.noteEl.style.cssText = ` - position: absolute; + position: fixed; padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgb(0 0 0 / 10%); @@ -276,7 +276,8 @@ function createNoteNode() { background-color: #fff; z-index: ${ this.mindMap.opt.nodeNoteTooltipZIndex } ` - document.body.appendChild(this.noteEl) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.noteEl) } this.noteEl.innerText = this.nodeData.data.note } diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index 37fce4b7..a144c2af 100644 --- a/simple-mind-map/src/plugins/NodeImgAdjust.js +++ b/simple-mind-map/src/plugins/NodeImgAdjust.js @@ -82,7 +82,8 @@ class NodeImgAdjust { this.createResizeBtnEl() } this.setHandleElRect() - document.body.appendChild(this.handleEl) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.handleEl) this.isShowHandleEl = true } @@ -90,7 +91,8 @@ class NodeImgAdjust { hideHandleEl() { if (!this.isShowHandleEl) return this.isShowHandleEl = false - document.body.removeChild(this.handleEl) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.removeChild(this.handleEl) this.handleEl.style.backgroundImage = `` this.handleEl.style.width = 0 this.handleEl.style.height = 0 @@ -153,6 +155,12 @@ class NodeImgAdjust { btnEl.addEventListener('mousedown', e => { this.onMousedown(e) }) + btnEl.addEventListener('click', e => { + e.stopPropagation() + }) + btnEl.addEventListener('mousedown', (e) => { + e.stopPropagation() + }) } // 鼠标按钮按下事件 diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index ef74be49..1a640b2e 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -172,7 +172,11 @@ class RichText { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - document.body.appendChild(this.textEditNode) + this.textEditNode.addEventListener('mousedown', (e) => { + e.stopPropagation() + }) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.textEditNode) } // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 let bgColor = node.style.merge('fillColor') diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js index 9d0722bb..26c31fdb 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js @@ -47,7 +47,8 @@ function showEditTextBox(g) { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - document.body.appendChild(this.textEditNode) + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.textEditNode) } let { associativeLineTextFontSize, diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 0292ac46..1e4264f7 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -71,6 +71,7 @@ const mindMap = new MindMap({ | isUseCustomNodeContent（v0.6.3+） | Boolean | false | Whether to customize node content | | | customCreateNodeContent（v0.6.3+） | Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` | | | mouseScaleCenterUseMousePosition（v0.6.4-fix.1+） | Boolean | true | Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas | | +| customInnerElsAppendTo（v0.6.12+） | null/HTMLElement | null | Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body | | ### Watermark config diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index ec3adc28..b3940329 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -357,6 +357,13 @@ Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas + +customInnerElsAppendTo（v0.6.12+） +null/HTMLElement +null +Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body + +

Watermark config

diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 75c92799..45bba08b 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -71,6 +71,7 @@ const mindMap = new MindMap({ | isUseCustomNodeContent（v0.6.3+） | Boolean | false | 是否自定义节点内容 | | | customCreateNodeContent（v0.6.3+） | Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 | | | mouseScaleCenterUseMousePosition（v0.6.4-fix.1+） | Boolean | true | 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 | | +| customInnerElsAppendTo（v0.6.12+） | null/HTMLElement | null | 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 | | ### 水印配置 diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index 1a87bf51..2d8b941c 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -357,6 +357,13 @@ 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 + +customInnerElsAppendTo（v0.6.12+） +null/HTMLElement +null +指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 + +

水印配置

diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 1c6fd47c..09be185c 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -117,8 +117,7 @@ export default { return { mindMap: null, mindMapData: null, - prevImg: '', - openTest: false + prevImg: '' } }, computed: { @@ -157,97 +156,8 @@ export default { window.addEventListener('resize', () => { this.mindMap.resize() }) - if (this.openTest) { - setTimeout(() => { - this.test() - }, 5000) - } }, methods: { - /** - * @Author: 王林25 - * @Date: 2021-11-22 19:39:28 - * @Desc: 数据更改测试 - */ - test() { - let nodeData = { - data: { text: '根节点', expand: true, isActive: false }, - children: [] - } - setTimeout(() => { - nodeData.data.text = '理想青年实验室' - this.mindMap.setData(JSON.parse(JSON.stringify(nodeData))) - - setTimeout(() => { - nodeData.children.push({ - data: { text: '网站', expand: true, isActive: false }, - children: [] - }) - this.mindMap.setData(JSON.parse(JSON.stringify(nodeData))) - - setTimeout(() => { - nodeData.children.push({ - data: { text: '博客', expand: true, isActive: false }, - children: [] - }) - this.mindMap.setData(JSON.parse(JSON.stringify(nodeData))) - - setTimeout(() => { - let viewData = { - transform: { - scaleX: 1, - scaleY: 1, - shear: 0, - rotate: 0, - translateX: 179, - translateY: 0, - originX: 0, - originY: 0, - a: 1, - b: 0, - c: 0, - d: 1, - e: 179, - f: 0 - }, - state: { scale: 1, x: 179, y: 0, sx: 0, sy: 0 } - } - this.mindMap.view.setTransformData(viewData) - - setTimeout(() => { - let viewData = { - transform: { - scaleX: 1.6000000000000005, - scaleY: 1.6000000000000005, - shear: 0, - rotate: 0, - translateX: -373.3000000000004, - translateY: -281.10000000000025, - originX: 0, - originY: 0, - a: 1.6000000000000005, - b: 0, - c: 0, - d: 1.6000000000000005, - e: -373.3000000000004, - f: -281.10000000000025 - }, - state: { - scale: 1.6000000000000005, - x: 179, - y: 0, - sx: 0, - sy: 0 - } - } - this.mindMap.view.setTransformData(viewData) - }, 1000) - }, 1000) - }, 1000) - }, 1000) - }, 1000) - }, - /** * @Author: 王林 * @Date: 2021-07-03 22:11:37 @@ -264,9 +174,6 @@ export default { * @Desc: 存储数据当数据有变时 */ bindSaveEvent() { - if (this.openTest) { - return - } this.$bus.$on('data_change', data => { storeData(data) }) @@ -283,9 +190,6 @@ export default { * @Desc: 手动保存 */ manualSave() { - if (this.openTest) { - return - } let data = this.mindMap.getData(true) storeConfig(data) }, @@ -317,6 +221,7 @@ export default { ...(config || {}), iconList: icon, useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag, + customInnerElsAppendTo: null, // isUseCustomNodeContent: true, // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // customCreateNodeContent: (node) => {