You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/01/14 18:22:55 UTC
[incubator-echarts] 01/01: fix: enable `dispatchAction` highlight
downplay for treemap. fix #9816.
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 <su...@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) + ' : ';
+ 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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org