节点备注支持markdown及富文本、修复不能选中文字的问题

README.md

@@ -105,7 +105,7 @@ const mindMap = new MindMap({
 | textContentMargin    | Number  | 2                | 节点里各种文字信息的间距，如图标和文字的间距                 |          |
 | selectTranslateStep  | Number  | 3                | 多选节点时鼠标移动到边缘时的画布移动偏移量                   |          |
 | selectTranslateLimit | Number  | 20               | 多选节点时鼠标移动距边缘多少距离时开始偏移                   |          |
-
+| customNoteContentShow（v0.1.6+） | Object  | null               | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}                   |          |
 
 
 ### 实例方法：

simple-mind-map/index.js

@@ -40,7 +40,15 @@ const defaultOpt = {
     // 多选节点时鼠标移动到边缘时的画布移动偏移量
     selectTranslateStep: 3,
     // 多选节点时鼠标移动距边缘多少距离时开始偏移
-    selectTranslateLimit: 20
+    selectTranslateLimit: 20,
+    // 自定义节点备注内容显示
+    customNoteContentShow: null
+    /*
+        {
+            show(){},
+            hide(){}
+        }
+    */
 }
 
 /** 

simple-mind-map/src/Drag.js

@@ -74,6 +74,7 @@ class Drag extends Base {
             if (e.which !== 1 || node.isRoot) {
                 return
             }
+            e.preventDefault()
             // 计算鼠标按下的位置距离节点左上角的距离
             this.drawTransform = this.mindMap.draw.transform()
             let {
@@ -98,6 +99,7 @@ class Drag extends Base {
             if (!this.isMousedown) {
                 return
             }
+            e.preventDefault()
             let {
                 x,
                 y

simple-mind-map/src/Event.js

@@ -111,7 +111,7 @@ class Event extends EventEmitter {
      * @Desc: 鼠标按下事件 
      */
     onMousedown(e) {
-        e.preventDefault()
+        // e.preventDefault()
         // 鼠标左键
         if (e.which === 1) {
             this.isLeftMousedown = true
@@ -128,7 +128,7 @@ class Event extends EventEmitter {
      * @Desc: 鼠标移动事件 
      */
     onMousemove(e) {
-        e.preventDefault()
+        // e.preventDefault()
         this.mousemovePos.x = e.clientX
         this.mousemovePos.y = e.clientY
         this.mousemoveOffset.x = e.clientX - this.mousedownPos.x

simple-mind-map/src/Node.js

@@ -445,27 +445,37 @@ class Node {
         this.style.iconNode(iconNode)
         node.add(iconNode)
         // 备注tooltip
-        if (!this.noteEl) {
+        if (!this.mindMap.opt.customNoteContentShow) {
-            this.noteEl = document.createElement('div')
+            if (!this.noteEl) {
-            this.noteEl.style.cssText = `
+                this.noteEl = document.createElement('div')
-                position: absolute;
+                this.noteEl.style.cssText = `
-                padding: 10px;
+                    position: absolute;
-                border-radius: 5px;
+                    padding: 10px;
-                box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+                    border-radius: 5px;
-                display: none;
+                    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-                background-color: #fff;
+                    display: none;
-            `
+                    background-color: #fff;
+                `
+                document.body.appendChild(this.noteEl)
+            }
+            this.noteEl.innerText = this.nodeData.data.note
         }
-        this.noteEl.innerText = this.nodeData.data.note
-        document.body.appendChild(this.noteEl)
         node.on('mouseover', () => {
             let { left, top } = node.node.getBoundingClientRect()
-            this.noteEl.style.left = left + 'px'
+            if (!this.mindMap.opt.customNoteContentShow) {
-            this.noteEl.style.top = top + iconSize + 'px'
+                this.noteEl.style.left = left + 'px'
-            this.noteEl.style.display = 'block'
+                this.noteEl.style.top = top + iconSize + 'px'
+                this.noteEl.style.display = 'block'
+            } else {
+                this.mindMap.opt.customNoteContentShow.show(this.nodeData.data.note, left, top + iconSize)
+            }
         })
         node.on('mouseout', () => {
-            this.noteEl.style.display = 'none'
+            if (!this.mindMap.opt.customNoteContentShow) {
+                this.noteEl.style.display = 'none'
+            } else {
+                this.mindMap.opt.customNoteContentShow.hide()
+            }
         })
         return {
             node,

web/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@toast-ui/editor": "^3.1.5",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
     "vue": "^2.6.11",

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

@@ -10,6 +10,7 @@
     <Structure :mindMap="mindMap"></Structure>
     <ShortcutKey></ShortcutKey>
     <Contextmenu :mindMap="mindMap"></Contextmenu>
+    <NodeNoteContentShow></NodeNoteContentShow>
   </div>
 </template>
 
@@ -24,6 +25,7 @@ import Count from './Count'
 import NavigatorToolbar from './NavigatorToolbar'
 import ShortcutKey from './ShortcutKey'
 import Contextmenu from './Contextmenu'
+import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
 
 /**
@@ -43,6 +45,7 @@ export default {
     NavigatorToolbar,
     ShortcutKey,
     Contextmenu,
+    NodeNoteContentShow
   },
   data() {
     return {
@@ -173,6 +176,14 @@ export default {
         theme: theme.template,
         themeConfig: theme.config,
         viewData: view,
+        customNoteContentShow: {
+          show: (content, left, top) => {
+            this.$bus.$emit('showNoteContent', content, left, top);
+          },
+          hide: () => {
+            this.$bus.$emit('hideNoteContent');
+          }
+        }
       })
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()

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

@@ -5,14 +5,15 @@
     :visible.sync="dialogVisible"
     width="500"
   >
-    <el-input
+    <!-- <el-input
       type="textarea"
       :autosize="{ minRows: 3, maxRows: 5 }"
       placeholder="请输入内容"
       v-model="note"
     >
-    </el-input>
+    </el-input> -->
-    <div class="tip">换行请使用：Enter+Shift</div>
+    <div class="noteEditor" ref="noteEditor"></div>
+    <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">取 消</el-button>
       <el-button type="primary" @click="confirm">确 定</el-button>
@@ -21,6 +22,9 @@
 </template>
 
 <script>
+import Editor from '@toast-ui/editor';
+import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
+
 /**
  * @Author: 王林
  * @Date: 2021-06-24 22:53:54
@@ -33,6 +37,7 @@ export default {
       dialogVisible: false,
       note: "",
       activeNodes: [],
+      editor: null
     };
   },
   created() {
@@ -48,9 +53,29 @@ export default {
     this.$bus.$on("showNodeNote", () => {
       this.$bus.$emit('startTextEdit');
       this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.initEditor();
+      });
     });
   },
   methods: {
+    /** 
+     * @Author: 王林25 
+     * @Date: 2022-05-09 11:37:05 
+     * @Desc: 初始化编辑器 
+     */
+    initEditor() {
+      if (!this.editor) {
+        this.editor = new Editor({
+          el: this.$refs.noteEditor,
+          height: '500px',
+          initialEditType: 'markdown',
+          previewStyle: 'vertical'
+        });
+      }
+      this.editor.setMarkdown(this.note);
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-06-22 22:08:11
@@ -67,6 +92,7 @@ export default {
      * @Desc:  确定
      */
     confirm() {
+      this.note = this.editor.getMarkdown();
       this.activeNodes.forEach((node) => {
         node.setNote(this.note);
       });

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

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="noteContentViewer"
+    ref="noteContentViewer"
+    :style="{ left: this.left + 'px', top: this.top + 'px', visibility: show ? 'visible' : 'hidden' }"
+  ></div>
+</template>
+
+<script>
+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
+import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:53:54
+ * @Desc: 节点备注内容显示
+ */
+export default {
+  name: "NodeNoteContentShow",
+  data() {
+    return {
+      editor: null,
+      show: false,
+      left: 0,
+      top: 0,
+    };
+  },
+  created() {
+    this.$bus.$on("showNoteContent", (content, left, top) => {
+      this.editor.setMarkdown(content);
+      this.left = left;
+      this.top = top;
+      this.show = true;
+    });
+    this.$bus.$on("hideNoteContent", () => {
+      this.show = false;
+    });
+  },
+  mounted() {
+    this.initEditor();
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-05-09 11:37:05
+     * @Desc: 初始化编辑器
+     */
+    initEditor() {
+      if (!this.editor) {
+        this.editor = new Viewer({
+          el: this.$refs.noteContentViewer
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.noteContentViewer {
+  position: fixed;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+}
+</style>