支持展开到指定层级

simple-mind-map/src/Render.js

@@ -143,6 +143,9 @@ class Render {
         // 收起所有节点
         this.unexpandAllNode = this.unexpandAllNode.bind(this)
         this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
+        // 展开到指定层级
+        this.expandToLevel = this.expandToLevel.bind(this)
+        this.mindMap.command.add('UNEXPAND_TO_LEVEL', this.expandToLevel)
         // 设置节点数据
         this.setNodeData = this.setNodeData.bind(this)
         this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
@@ -803,6 +806,19 @@ class Render {
         }, null, true, 0, 0)
     }
 
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-23 16:31:27 
+     * @Desc: 展开到指定层级 
+     */
+    expandToLevel(level) {
+        walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
+            node.data.expand = layerIndex < level
+        }, null, true, 0, 0)
+        this.mindMap.reRender()
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2022-08-14 09:18:40 

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="contextmenuContainer"
+    class="contextmenuContainer listBox"
     v-if="isShow"
     :style="{ left: left + 'px', top: top + 'px' }"
   >
@@ -62,6 +62,12 @@
       <div class="item" @click="exec('RETURN_CENTER')">回到中心</div>
       <div class="item" @click="exec('EXPAND_ALL')">展开所有</div>
       <div class="item" @click="exec('UNEXPAND_ALL')">收起所有</div>
+      <div class="item">
+        展开到
+        <div class="subItems listBox">
+          <div class="item" v-for="(item, index) in expandList" :key="item" @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)">{{item}}</div>
+        </div>
+      </div>
       <div class="item" @click="exec('RESET_LAYOUT')">
         一键整理布局
         <span class="desc">Ctrl + L</span>
@@ -93,7 +99,8 @@ export default {
       type: "",
       isMousedown: false,
       mosuedownX: 0,
-      mosuedownY: 0
+      mosuedownY: 0,
+      expandList: ['一级主题', '二级主题', '三级主题', '四级主题', '五级主题', '六级主题']
     };
   },
   computed: {
@@ -221,7 +228,7 @@ export default {
      * @Date: 2021-07-14 23:27:54
      * @Desc: 执行命令
      */
-    exec(key, disabled) {
+    exec(key, disabled, ...args) {
       if (disabled) {
         return;
       }
@@ -241,7 +248,7 @@ export default {
           this.mindMap.view.reset();
           break;
         default:
-          this.$bus.$emit("execCommand", key);
+          this.$bus.$emit("execCommand", key, ...args);
           break;
       }
       this.hide();
@@ -278,20 +285,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.contextmenuContainer {
-  position: fixed;
+.listBox {
   width: 200px;
   background: #fff;
   box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
   border-radius: 4px;
   padding-top: 16px;
   padding-bottom: 16px;
+}
+.contextmenuContainer {
+  position: fixed;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #1a1a1a;
 
   .item {
+    position: relative;
     height: 28px;
     line-height: 28px;
     padding: 0 16px;
@@ -305,6 +315,10 @@ export default {
 
     &:hover {
       background: #f5f5f5;
+
+      .subItems {
+        visibility: visible;
+      }
     }
 
     &.disabled {
@@ -320,6 +334,13 @@ export default {
     .desc {
       color: #999;
     }
+
+    .subItems {
+      position: absolute;
+      left: 100%;
+      top: 0;
+      visibility: hidden;
+    }
   }
 }
 </style>