This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch fix/treemap-highdown
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 696e086c67dff4dbed8754271cc3494ee435d3b1
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Wed Jan 15 02:21:44 2020 +0800

    fix: enable `dispatchAction` highlight downplay for treemap. fix #9816.
---
 src/chart/treemap/TreemapView.js        | 82 ++++++++++++++++++++++-----------
 test/runTest/actions/__meta__.json      |  2 +-
 test/runTest/actions/treemap-disk2.json |  2 +-
 test/treemap-disk2.html                 | 51 ++++++++++++++++++++
 4 files changed, 108 insertions(+), 29 deletions(-)

diff --git a/src/chart/treemap/TreemapView.js b/src/chart/treemap/TreemapView.js
index bf4b2ce..51ee27a 100644
--- a/src/chart/treemap/TreemapView.js
+++ b/src/chart/treemap/TreemapView.js
@@ -187,6 +187,7 @@ export default echarts.extendChartView({
         var thisStorage = createStorage();
         var oldStorage = this._storage;
         var willInvisibleEls = [];
+
         var doRenderNode = zrUtil.curry(
             renderNode, seriesModel,
             thisStorage, oldStorage, reRoot,
@@ -685,6 +686,11 @@ function renderNode(
     // Start of closure variables available in "Procedures in renderNode".
 
     var thisLayout = thisNode.getLayout();
+    var data = seriesModel.getData();
+
+    // Only for enabling highlight/downplay. Clear firstly.
+    // Because some node will not be rendered.
+    data.setItemGraphicEl(thisNode.dataIndex, null);
 
     if (!thisLayout || !thisLayout.isInView) {
         return;
@@ -724,14 +730,36 @@ function renderNode(
         return group;
     }
 
+    var nodeModel = thisNode.getModel();
+
     // Background
     var bg = giveGraphic('background', Rect, depth, Z_BG);
     bg && renderBackground(group, bg, isParent && thisLayout.upperHeight);
 
     // No children, render content.
-    if (!isParent) {
+    if (isParent) {
+        // Because of the implementation about "traverse" in graphic hover 
style, we
+        // can not set hover listener on the "group" of non-leaf node. 
Otherwise the
+        // hover event from the descendents will be listenered.
+        if (graphic.isHighDownDispatcher(group)) {
+            graphic.setAsHighDownDispatcher(group, false);
+        }
+        if (bg) {
+            graphic.setAsHighDownDispatcher(bg, true);
+            // Only for enabling highlight/downplay.
+            data.setItemGraphicEl(thisNode.dataIndex, bg);
+        }
+    }
+    else {
         var content = giveGraphic('content', Rect, depth, Z_CONTENT);
         content && renderContent(group, content);
+
+        if (bg && graphic.isHighDownDispatcher(bg)) {
+            graphic.setAsHighDownDispatcher(bg, false);
+        }
+        graphic.setAsHighDownDispatcher(group, true);
+        // Only for enabling highlight/downplay.
+        data.setItemGraphicEl(thisNode.dataIndex, group);
     }
 
     return group;
@@ -746,10 +774,16 @@ function renderNode(
         bg.seriesIndex = seriesModel.seriesIndex;
 
         bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
-        var visualBorderColor = thisNode.getVisual('borderColor', true);
-        var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
 
-        updateStyle(bg, function () {
+        if (thisInvisible) {
+            // If invisible, do not set visual, otherwise the element will
+            // change immediately before animation. We think it is OK to
+            // remain its origin color when moving out of the view window.
+            processInvisible(content);
+        }
+        else {
+            var visualBorderColor = thisNode.getVisual('borderColor', true);
+            var emphasisBorderColor = 
itemStyleEmphasisModel.get('borderColor');
             var normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualBorderColor;
             var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -769,8 +803,8 @@ function renderNode(
             }
 
             bg.setStyle(normalStyle);
-            graphic.setHoverStyle(bg, emphasisStyle);
-        });
+            graphic.setElementHoverStyle(bg, emphasisStyle);
+        }
 
         group.add(bg);
     }
@@ -791,8 +825,14 @@ function renderNode(
             height: contentHeight
         });
 
-        var visualColor = thisNode.getVisual('color', true);
-        updateStyle(content, function () {
+        if (thisInvisible) {
+            // If invisible, do not set visual, otherwise the element will
+            // change immediately before animation. We think it is OK to
+            // remain its origin color when moving out of the view window.
+            processInvisible(content);
+        }
+        else {
+            var visualColor = thisNode.getVisual('color', true);
             var normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualColor;
             var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -800,32 +840,19 @@ function renderNode(
             prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, 
contentHeight);
 
             content.setStyle(normalStyle);
-            graphic.setHoverStyle(content, emphasisStyle);
-        });
+            graphic.setElementHoverStyle(content, emphasisStyle);
+        }
 
         group.add(content);
     }
 
-    function updateStyle(element, cb) {
-        if (!thisInvisible) {
-            // If invisible, do not set visual, otherwise the element will
-            // change immediately before animation. We think it is OK to
-            // remain its origin color when moving out of the view window.
-            cb();
-
-            if (!element.__tmWillVisible) {
-                element.invisible = false;
-            }
-        }
-        else {
-            // Delay invisible setting utill animation finished,
-            // avoid element vanish suddenly before animation.
-            !element.invisible && willInvisibleEls.push(element);
-        }
+    function processInvisible(element) {
+        // Delay invisible setting utill animation finished,
+        // avoid element vanish suddenly before animation.
+        !element.invisible && willInvisibleEls.push(element);
     }
 
     function prepareText(normalStyle, emphasisStyle, visualColor, width, 
height, upperLabelRect) {
-        var nodeModel = thisNode.getModel();
         var text = zrUtil.retrieve(
             seriesModel.getFormattedLabel(
                 thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 
'upperLabel' : 'label'
@@ -922,6 +949,7 @@ function renderNode(
         // Fade in, user can be aware that these nodes are new.
         lastCfg.fadein = storageName !== 'nodeGroup';
     }
+
 }
 
 // We can not set all backgroud with the same z, Because the behaviour of
diff --git a/test/runTest/actions/__meta__.json 
b/test/runTest/actions/__meta__.json
index 4b5c793..1669540 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -146,7 +146,7 @@
   "tree-legend": 1,
   "tree-radial": 1,
   "treemap-disk": 3,
-  "treemap-disk2": 2,
+  "treemap-disk2": 3,
   "treemap-obama": 2,
   "treemap-option": 1,
   "treemap-option2": 2,
diff --git a/test/runTest/actions/treemap-disk2.json 
b/test/runTest/actions/treemap-disk2.json
index b1954f2..04e323d 100644
--- a/test/runTest/actions/treemap-disk2.json
+++ b/test/runTest/actions/treemap-disk2.json
@@ -1 +1 @@
-[{"name":"Action 
1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type"
 [...]
\ No newline at end of file
+[{"name":"Action 
1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type"
 [...]
\ No newline at end of file
diff --git a/test/treemap-disk2.html b/test/treemap-disk2.html
index eda860d..2265e6a 100644
--- a/test/treemap-disk2.html
+++ b/test/treemap-disk2.html
@@ -23,6 +23,7 @@ under the License.
         <meta charset="utf-8">
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
@@ -59,8 +60,18 @@ under the License.
                 font-size: 16px;
                 margin-bottom: 5px;
             }
+            #btn-area {
+                position: fixed;
+                left: 10px;
+                top: 10px;
+                z-index: 999999;
+                background-color: #fff;
+            }
         </style>
 
+        <div id="btn-area">
+        </div>
+
         <div id="main"></div>
 
         <script src="data/disk.tree.js"></script>
@@ -145,6 +156,7 @@ under the License.
                                         '#675bba', '#fec42c', '#dd4444',
                                         '#d4df5a', '#cd4870'
                                     ],
+                                    highDownTarget: 'subtree',
                                     colorMappingBy: 'value',
                                     itemStyle: {
                                         normal: {
@@ -176,6 +188,45 @@ under the License.
                 chart.on('click', function (params) {
                     console.log(params);
                 });
+
+                initBtns('Only single bg highlighted for non-leaf', [
+                    'Disk Usage',
+                    'PrivateFrameworks'
+                ]);
+                initBtns('Both of the bg and content is highlighted for leaf', 
[
+                    'Alex.SpeechVoice'
+                ]);
+
+                function initBtns(desc, names) {
+                    var btnArea = document.getElementById('btn-area');
+
+                    var descEl = document.createElement('span');
+                    descEl.innerHTML = testHelper.encodeHTML(desc) + 
'&nbsp;:&nbsp;&nbsp;';
+                    btnArea.appendChild(descEl);
+
+                    var highDown = ['highlight', 'downplay'];
+
+                    for (var i = 0; i < names.length; i++) {
+                        for (var j = 0; j < highDown.length; j++) {
+                            var highDownName = highDown[j];
+                            var name = names[i];
+                            var btnEl = document.createElement('button');
+                            btnEl.innerHTML = 
testHelper.encodeHTML(highDownName + ': ' + name);
+                            btnEl.onclick = echarts.util.curry(clickHandler, 
highDownName, name);
+                            btnArea.appendChild(btnEl);
+                        }
+                    }
+
+                    function clickHandler(highDownName, name) {
+                        chart.dispatchAction({
+                            type: highDownName,
+                            seriesIndex: 0,
+                            name: name
+                        });
+                    }
+
+                    btnArea.appendChild(document.createElement('br'));
+                }
             }
 
         </script>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to