From 7f168f4083fc78f8ca7535d18240e455c38b017e Mon Sep 17 00:00:00 2001
From: qiaokun <qkbeyond@gmail.com>
Date: Fri, 3 Jul 2020 14:06:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=95=E5=BC=80=E5=B7=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=A1=B9=E7=9A=84=E6=89=80=E6=9C=89=E7=88=B6=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E4=B8=94=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B9=E4=BE=BF=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=EF=BC=9B=E6=90=9C=E7=B4=A2=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E5=B7=B2=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

   @varlamov88 [Expand parent nodes of selected item. Scroll menu to selected item](https://github.com/riophae/vue-treeselect/pull/310)

   使用选项： scrollPositionOnCenter = true

```
   <treeselect
            v-model="orgCode"
            :clearable="true"
            :scrollPositionOnCenter="true"
            :default-expand-level="0"
          />
```
---
 README.md                     | 19 +++++++++++++--
 package.json                  |  2 +-
 src/mixins/treeselectMixin.js | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index dc57bc27..62e17fdf 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,22 @@
 # clone @riophae/vue-treeselect
- 解决大数据集时，首字母为空格或者中文输入法搜索时卡顿现象
+1. 解决大数据集时，首字母为空格或者中文输入法搜索时卡顿现象
 
-https://github.com/riophae/vue-treeselect/issues/369
+   https://github.com/riophae/vue-treeselect/issues/369
+
+2. 展开已选择项的所有父节点，并且居中显示，方便修改操作；搜索模式下展开已选项
+
+   @varlamov88 [Expand parent nodes of selected item. Scroll menu to selected item](https://github.com/riophae/vue-treeselect/pull/310)
+
+   使用选项： scrollPositionOnCenter = true
+   
+```
+   <treeselect
+            v-model="orgCode"
+            :clearable="true"
+            :scrollPositionOnCenter="true"
+            :default-expand-level="0"
+          />
+```
 
 # vue-treeselect
 [![npm](https://badgen.now.sh/npm/v/@riophae/vue-treeselect)](https://www.npmjs.com/package/@riophae/vue-treeselect) [![Build](https://badgen.now.sh/circleci/github/riophae/vue-treeselect)](https://circleci.com/gh/riophae/vue-treeselect/tree/master) [![Coverage](https://badgen.net/codecov/c/github/riophae/vue-treeselect)](https://codecov.io/gh/riophae/vue-treeselect?branch=master)
diff --git a/package.json b/package.json
index ea708d1a..a1dbcc5f 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emacle/vue-treeselect",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "description": "A multi-select component with nested options support for Vue.js",
   "author": "Riophae Lee <riophaelee@gmail.com>",
   "license": "MIT",
diff --git a/src/mixins/treeselectMixin.js b/src/mixins/treeselectMixin.js
index c9de00b5..1ce77a68 100644
--- a/src/mixins/treeselectMixin.js
+++ b/src/mixins/treeselectMixin.js
@@ -636,6 +636,15 @@ export default {
       type: [ Number, String ],
       default: 999,
     },
+
+    /**
+     * Set selected option to the center of the menu, if possible
+     * https://github.com/riophae/vue-treeselect/pull/310
+     */
+    scrollPositionOnCenter: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -1453,6 +1462,10 @@ export default {
       this.$nextTick(this.restoreMenuScrollPosition)
       if (!this.options && !this.async) this.loadRootOptions()
       this.toggleClickOutsideEvent(true)
+      if (this.scrollPositionOnCenter) {
+        this.expandParentNodes() // must before scrollMenuOnCenter
+        this.$nextTick(this.scrollMenuOnCenter);
+      }
       this.$emit('open', this.getInstanceId())
     },
 
@@ -1771,6 +1784,7 @@ export default {
       this.buildForestState()
 
       if (nextState) {
+        this.expandParentNodes(); // Expand parents in search mode then chidren is selected
         this.$emit('select', node.raw, this.getInstanceId())
       } else {
         this.$emit('deselect', node.raw, this.getInstanceId())
@@ -1918,16 +1932,46 @@ export default {
     },
 
     saveMenuScrollPosition() {
+      if (this.scrollPositionOnCenter) {
+        // console.log('dont saveMenuScrollPosition...')
+        return;
+      }
       const $menu = this.getMenu()
       // istanbul ignore else
       if ($menu) this.menu.lastScrollPosition = $menu.scrollTop
     },
 
     restoreMenuScrollPosition() {
+      if (this.scrollPositionOnCenter) {
+        // console.log('dont restoreMenuScrollPosition...')
+        return;
+      }
       const $menu = this.getMenu()
       // istanbul ignore else
       if ($menu) $menu.scrollTop = this.menu.lastScrollPosition
     },
+
+    scrollMenuOnCenter() {
+      const $option = document.querySelector(".vue-treeselect__option--selected");
+      // console.log('$option',$option);
+      const $menu = this.getMenu();
+      // console.log('$menu',$menu);
+
+      if ($option && $menu) {
+        const position = Math.max($option.offsetTop - (($menu.offsetHeight - $option.offsetHeight) / 2), 0);
+        $menu.scrollTop = position;
+      }
+    },
+
+    expandParentNodes() {
+      // console.log('this.forest.selectedNodeIds',this.forest.selectedNodeIds)
+      for (const id of this.forest.selectedNodeIds) {
+        for (const ancestor of this.forest.nodeMap[id].ancestors) {
+          // console.log('ancestor',ancestor);
+          ancestor.isExpanded = true;
+        }
+      }
+    }
   },
 
   created() {