diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index 4c1c3310..bed78c06 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -74,6 +74,7 @@ class Node { this._tagData = null this._noteData = null this.noteEl = null + this.noteContentIsShow = false this._expandBtn = null this._lastExpandBtnType = null this._showExpandBtn = false @@ -971,6 +972,11 @@ class Node { hasCustomStyle() { return this.style.hasCustomStyle() } + + // 获取节点的尺寸和位置信息，位置信息相对于页面 + getRect() { + return this.group.rbox() + } } export default Node diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js index 13e8ce76..b29f98ea 100644 --- a/simple-mind-map/src/core/render/node/nodeCreateContents.js +++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js @@ -307,16 +307,17 @@ function createNoteNode() { this.noteEl.innerText = this.getData('note') } node.on('mouseover', () => { - let { left, top } = node.node.getBoundingClientRect() + const { left, top } = this.getNoteContentPosition() if (!this.mindMap.opt.customNoteContentShow) { this.noteEl.style.left = left + 'px' - this.noteEl.style.top = top + iconSize + 'px' + this.noteEl.style.top = top + 'px' this.noteEl.style.display = 'block' } else { this.mindMap.opt.customNoteContentShow.show( this.getData('note'), left, - top + iconSize + top, + this ) } }) @@ -334,6 +335,19 @@ function createNoteNode() { } } +// 获取节点备注显示位置 +function getNoteContentPosition() { + const iconSize = this.mindMap.themeConfig.iconSize + const { scaleY } = this.mindMap.view.getTransformData().transform + const iconSizeAddScale = iconSize * scaleY + let { left, top } = this._noteData.node.node.getBoundingClientRect() + top += iconSizeAddScale + return { + left, + top + } +} + // 测量自定义节点内容元素的宽高 function measureCustomNodeContentSize(content) { if (!commonCaches.measureCustomNodeContentSizeEl) { @@ -368,6 +382,7 @@ export default { createHyperlinkNode, createTagNode, createNoteNode, + getNoteContentPosition, measureCustomNodeContentSize, isUseCustomNodeContent } diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 4bcb2c64..de825d4b 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -294,8 +294,8 @@ export default { nodeTextEditZIndex: 1000, nodeNoteTooltipZIndex: 1000, customNoteContentShow: { - show: (content, left, top) => { - this.$bus.$emit('showNoteContent', content, left, top) + show: (content, left, top, node) => { + this.$bus.$emit('showNoteContent', content, left, top, node) }, hide: () => { // this.$bus.$emit('hideNoteContent') @@ -380,7 +380,8 @@ export default { 'generalization_node_contextmenu', 'painter_start', 'painter_end', - 'scrollbar_change' + 'scrollbar_change', + 'scale' ].forEach(event => { this.mindMap.on(event, (...args) => { this.$bus.$emit(event, ...args) diff --git a/web/src/pages/Edit/components/NodeIconToolbar.vue b/web/src/pages/Edit/components/NodeIconToolbar.vue index ba4cf69d..b08982a1 100644 --- a/web/src/pages/Edit/components/NodeIconToolbar.vue +++ b/web/src/pages/Edit/components/NodeIconToolbar.vue @@ -51,6 +51,7 @@ export default { this.mindMap.on('svg_mousedown', this.close) this.mindMap.on('node_dblclick', this.close) this.mindMap.on('node_active', this.onNodeActive) + this.mindMap.on('scale', this.onScale) this.$bus.$on('close_node_icon_toolbar', this.close) }, mounted() { @@ -62,6 +63,7 @@ export default { this.mindMap.off('svg_mousedown', this.close) this.mindMap.off('node_dblclick', this.close) this.mindMap.off('node_active', this.onNodeActive) + this.mindMap.off('scale', this.onScale) this.$bus.$off('close_node_icon_toolbar', this.close) }, methods: { @@ -75,9 +77,7 @@ export default { this.iconList = [...allIconList.find((item) => { return item.type === this.iconType }).list] - let rect = node.group.rbox() - this.style.left = rect.x + 'px' - this.style.top = rect.y + rect.height + 'px' + this.updatePos() this.showNodeIconToolbar = true if (this.activeSidebar === 'nodeIconSidebar') { this.setActiveSidebar('') @@ -95,6 +95,17 @@ export default { this.style.top = 0 }, + updatePos() { + if (!this.node) return + const rect = this.node.getRect() + this.style.left = rect.x + 'px' + this.style.top = rect.y + rect.height + 'px' + }, + + onScale() { + this.updatePos() + }, + onNodeActive(node) { if (node === this.node) { return diff --git a/web/src/pages/Edit/components/NodeNoteContentShow.vue b/web/src/pages/Edit/components/NodeNoteContentShow.vue index 45067e11..19a7c9e4 100644 --- a/web/src/pages/Edit/components/NodeNoteContentShow.vue +++ b/web/src/pages/Edit/components/NodeNoteContentShow.vue @@ -27,7 +27,8 @@ export default { editor: null, show: false, left: 0, - top: 0 + top: 0, + node: null } }, created() { @@ -35,6 +36,8 @@ export default { this.$bus.$on('hideNoteContent', this.hideNoteContent) document.body.addEventListener('click', this.hideNoteContent) this.$bus.$on('node_active', this.hideNoteContent) + this.$bus.$on('scale', this.onScale) + this.$bus.$on('svg_mousedown', this.hideNoteContent) }, mounted() { this.initEditor() @@ -44,34 +47,37 @@ export default { this.$bus.$off('hideNoteContent', this.hideNoteContent) document.body.removeEventListener('click', this.hideNoteContent) this.$bus.$off('node_active', this.hideNoteContent) + this.$bus.$off('scale', this.onScale) + this.$bus.$off('svg_mousedown', this.hideNoteContent) }, methods: { - /** - * @Author: 王林25 - * @Date: 2022-11-14 19:56:08 - * @Desc: 显示备注浮层 - */ - onShowNoteContent(content, left, top) { + // 显示备注浮层 + onShowNoteContent(content, left, top, node) { + this.node = node this.editor.setMarkdown(content) - this.left = left - this.top = top + this.updateNoteContentPosition(left, top) this.show = true }, - /** - * @Author: 王林25 - * @Date: 2022-11-14 19:56:20 - * @Desc: 隐藏备注浮层 - */ + // 更新位置 + updateNoteContentPosition(left, top) { + this.left = left + this.top = top + }, + + // 画布缩放事件 + onScale() { + if (!this.node || !this.show) return + const { left, top } = this.node.getNoteContentPosition() + this.updateNoteContentPosition(left, top) + }, + + // 隐藏备注浮层 hideNoteContent() { this.show = false }, - /** - * @Author: 王林25 - * @Date: 2022-05-09 11:37:05 - * @Desc: 初始化编辑器 - */ + // 初始化编辑器 initEditor() { if (!this.editor) { this.editor = new Viewer({