From 5d4cf8a3c3ed612d193ac7d7e8c3f6020201d03a Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Fri, 23 Sep 2022 17:41:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B1=95=E5=BC=80=E5=88=B0?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/Render.js                 | 16 +++++++++
 web/src/pages/Edit/components/Contextmenu.vue | 33 +++++++++++++++----
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js
index f8fb0f9b..edd8a193 100644
--- a/simple-mind-map/src/Render.js
+++ b/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 
diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index abd06282..87b967b1 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/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>