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

2026-02-21 10:27:44 +08:00 · 2022-05-09 14:24:11 +08:00 · 2022-05-09 14:24:11 +08:00 · 0d79e28ec9
commit 0d79e28ec9
parent 806be0b537
9 changed files with 147 additions and 23 deletions
--- a/README.md
+++ b/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: () => {// 你的隐藏节点备注逻辑 }}                   |          |


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

 /** 
--- a/simple-mind-map/src/Drag.js
+++ b/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
--- a/simple-mind-map/src/Event.js
+++ b/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
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@ -445,27 +445,37 @@ class Node {
        this.style.iconNode(iconNode)
        node.add(iconNode)
        // 备注tooltip
-        if (!this.noteEl) {
-            this.noteEl = document.createElement('div')
-            this.noteEl.style.cssText = `
-                position: absolute;
-                padding: 10px;
-                border-radius: 5px;
-                box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-                display: none;
-                background-color: #fff;
-            `
+        if (!this.mindMap.opt.customNoteContentShow) {
+            if (!this.noteEl) {
+                this.noteEl = document.createElement('div')
+                this.noteEl.style.cssText = `
+                    position: absolute;
+                    padding: 10px;
+                    border-radius: 5px;
+                    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+                    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'
-            this.noteEl.style.top = top + iconSize + 'px'
-            this.noteEl.style.display = 'block'
+            if (!this.mindMap.opt.customNoteContentShow) {
+                this.noteEl.style.left = left + 'px'
+                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,
--- a/web/package.json
+++ b/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",
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/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()
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/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>
-    <div class="tip">换行请使用：Enter+Shift</div>
+    </el-input> -->
+    <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);
      });
--- a/web/src/pages/Edit/components/NodeNoteContentShow.vue
+++ b/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>