add toolbar for markmap component

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## v4.0.6
 
 * Bug修复：修复PC端画廊页面的瀑布流组件样式错乱问题
+* 功能新增：给思维导图增加 ToolBar，实现思维导图的放大缩小和定位
 
 ## v4.0.5
 

web/package.json

@@ -24,6 +24,7 @@
     "markdown-it-mathjax": "^2.0.0",
     "markmap-common": "^0.16.0",
     "markmap-lib": "^0.16.1",
+    "markmap-toolbar": "^0.17.0",
     "markmap-view": "^0.16.0",
     "md-editor-v3": "^2.2.1",
     "mitt": "^3.0.1",

web/src/assets/css/mark-map.styl

@@ -117,6 +117,7 @@
         display flex
         justify-content center
         align-items center
+        position relative
 
         .markmap {
           width 100%
@@ -127,6 +128,27 @@
             //height 30px
           }
         }
+
+        #toolbar {
+          position: absolute
+          bottom: 10px
+          right: 20px
+
+          .mm-toolbar {
+            display flex
+            flex-flow row
+
+            .mm-toolbar-brand {
+              display none
+            }
+
+            .mm-toolbar-item {
+              cursor pointer
+              color var(--el-color-white)
+            }
+          }
+
+        }
       }
     }
   }

web/src/views/MarkMap.vue

@@ -81,10 +81,11 @@
           </div>
 
           <div class="markdown" v-if="loading">
-            <div v-html="html"></div>
+            <div :style="{ height: rightBoxHeight + 'px', overflow:'auto' }" v-html="html"></div>
           </div>
           <div class="body" id="markmap" v-show="!loading">
             <svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }"/>
+            <div id="toolbar"></div>
           </div>
         </div><!-- end task list box -->
       </div>
@@ -104,6 +105,7 @@ import {checkSession} from "@/action/session";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {Download} from "@element-plus/icons-vue";
+import {Toolbar} from 'markmap-toolbar';
 
 const leftBoxHeight = ref(window.innerHeight - 105)
 const rightBoxHeight = ref(window.innerHeight - 85)
@@ -140,6 +142,8 @@ onMounted(() => {
   initData()
   try {
     markMap.value = Markmap.create(svgRef.value)
+    const {el} = Toolbar.create(markMap.value);
+    document.getElementById('toolbar').append(el);
     update()
   } catch (e) {
     console.error(e)