Fix #6756 (when scrollable legend switch from "show controller" to "n…

…ot show controller", content position should be correct.)
apache · Sep 28, 2017 · 3f13fd9 · 3f13fd9
1 parent 2db7e7a
commit 3f13fd9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/component/legend/ScrollableLegendView.js b/src/component/legend/ScrollableLegendView.js
@@ -41,6 +41,12 @@ define(function (require) {
              * @type {module:zrender/container/Group}
              */
             this.group.add(this._controllerGroup = new Group());
+
+            /**
+             *
+             * @private
+             */
+            this._showController;
         },
 
         /**
@@ -140,7 +146,7 @@ define(function (require) {
 
             var contentRect = contentGroup.getBoundingRect();
             var controllerRect = controllerGroup.getBoundingRect();
-            var showController = contentRect[wh] > maxSize[wh];
+            var showController = this._showController = contentRect[wh] > maxSize[wh];
 
             var contentPos = [-contentRect.x, -contentRect.y];
             // Remain contentPos when scroll animation perfroming.
@@ -204,7 +210,11 @@ define(function (require) {
             // Content translate animation.
             var pageInfo = this._getPageInfo(legendModel);
             pageInfo.pageIndex != null && graphic.updateProps(
-                contentGroup, {position: pageInfo.contentPosition}, legendModel
+                contentGroup,
+                {position: pageInfo.contentPosition},
+                // When switch from "show controller" to "not show controller", view should be
+                // updated immediately without animation, otherwise causes weird efffect.
+                showController ? legendModel : false
             );
 
             this._updatePageInfoView(legendModel, pageInfo);
@@ -281,11 +291,16 @@ define(function (require) {
             var pageNextDataIndex;
 
             var targetItemGroup;
-            contentGroup.eachChild(function (child) {
-                if (child.__legendDataIndex === currDataIndex) {
-                    targetItemGroup = child;
-                }
-            });
+            if (this._showController) {
+                contentGroup.eachChild(function (child) {
+                    if (child.__legendDataIndex === currDataIndex) {
+                        targetItemGroup = child;
+                    }
+                });
+            }
+            else {
+                targetItemGroup = contentGroup.childAt(0);
+            }
 
             var pageCount = containerRectSize ? Math.ceil(contentRect[wh] / containerRectSize) : 0;
 

diff --git a/test/legend.html b/test/legend.html
@@ -44,7 +44,7 @@ <h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1>
         <div class="chart" id="scroll-lr"></div>
         <h1>Scroll vertically</h1>
         <div class="chart" id="scroll-v"></div>
-        <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50%</h1>
+        <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until page button disappear)</h1>
         <div class="chart" id="scroll-v2"></div>
 
         <script>