openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：支持通过配置指定内部一些元素添加到的位置

Browse Source
This commit is contained in:
wanglin2 2023-08-02 19:36:03 +08:00
parent 803c83ac4f
commit 49063d257b
11 changed files with 46 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
simple-mind-map/src/constants/defaultOptions.js
View File

@ -122,5 +122,7 @@ export const defaultOpt = {
// 是否开启自定义节点内容
isUseCustomNodeContent: false,
// 自定义返回节点内容的方法
customCreateNodeContent: null
customCreateNodeContent: null,
// 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
customInnerElsAppendTo: null
}

6
simple-mind-map/src/core/render/TextEdit.js
View File

@ -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')

5
simple-mind-map/src/core/render/node/nodeCreateContents.js
View File

@ -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
}

12
simple-mind-map/src/plugins/NodeImgAdjust.js
View File

@ -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()
})
}
// 鼠标按钮按下事件

6
simple-mind-map/src/plugins/RichText.js
View File

@ -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')

3
simple-mind-map/src/plugins/associativeLine/associativeLineText.js
View File

@ -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,

1
web/src/pages/Doc/en/constructor/index.md
View File

@ -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

7
web/src/pages/Doc/en/constructor/index.vue
View File

@ -357,6 +357,13 @@
<td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td>
<td></td>
</tr>
<tr>
<td>customInnerElsAppendTo（v0.6.12+）</td>
<td>null/HTMLElement</td>
<td>null</td>
<td>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</td>
<td></td>
</tr>
</tbody>
</table>
<h3>Watermark config</h3>

1
web/src/pages/Doc/zh/constructor/index.md
View File

@ -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下 | |
### 水印配置

7
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -357,6 +357,13 @@
<td>鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点</td>
<td></td>
</tr>
<tr>
<td>customInnerElsAppendTo（v0.6.12+）</td>
<td>null/HTMLElement</td>
<td>null</td>
<td>指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下</td>
<td></td>
</tr>
</tbody>
</table>
<h3>水印配置</h3>

99
web/src/pages/Edit/components/Edit.vue
View File

@ -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) => {