Fix：修复缩放画布时图标浮层和备注浮层和节点脱离的问题

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

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
 }

web/src/pages/Edit/components/Edit.vue

@@ -294,8 +294,8 @@ export default {
         nodeTextEditZIndex: 1000,
         nodeNoteTooltipZIndex: 1000,
         customNoteContentShow: {
-          show: (content, left, top) => {
+          show: (content, left, top, node) => {
-            this.$bus.$emit('showNoteContent', content, left, top)
+            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)

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.updatePos()
-            this.style.left = rect.x + 'px'
-            this.style.top = rect.y + rect.height + 'px'
             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

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
+    onShowNoteContent(content, left, top, node) {
-     * @Date: 2022-11-14 19:56:08
+      this.node = node
-     * @Desc: 显示备注浮层
-     */
-    onShowNoteContent(content, left, top) {
       this.editor.setMarkdown(content)
-      this.left = left
+      this.updateNoteContentPosition(left, top)
-      this.top = top
       this.show = true
     },
 
-    /**
+    // 更新位置
-     * @Author: 王林25
+    updateNoteContentPosition(left, top) {
-     * @Date: 2022-11-14 19:56:20
+      this.left = left
-     * @Desc: 隐藏备注浮层
+      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({