You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/06/18 09:47:59 UTC

[GitHub] [echarts] susiwen8 opened a new pull request, #17242: feat(treemap.breadcrumb): add `emphasis` state

susiwen8 opened a new pull request, #17242:
URL: https://github.com/apache/echarts/pull/17242

   <!-- Please fill in the following information to help us review your PR more efficiently. -->
   
   ## Brief Information
   
   This pull request is in the type of:
   
   - [ ] bug fixing
   - [x] new feature
   - [ ] others
   
   
   
   ### What does this PR do?
   
   Add `emphasis` state to `breadcrumb`
   
   
   
   ### Fixed issues
   
   - Close #15741 
   
   
   ## Details
   
   ### Before: What was the problem?
   
   <!-- DESCRIBE THE BUG OR REQUIREMENT HERE. -->
   
   <!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
   
   ![Kapture 2022-06-18 at 17 46 59](https://user-images.githubusercontent.com/20318608/174432347-1217d09e-85c6-46bc-a410-1c75ab86a328.gif)
   
   
   ### After: How does it behave after the fixing?
   
   ![Kapture 2022-06-18 at 17 44 59](https://user-images.githubusercontent.com/20318608/174432311-b7f59c11-cd78-4d9f-b0b2-3769b33a83dd.gif)
   
   
   
   
   ## Document Info
   
   One of the following should be checked.
   
   - [ ] This PR doesn't relate to document changes
   - [ ] The document should be updated later
   - [ ] The document changes have been made in apache/echarts-doc#xxx
   
   
   
   ## Misc
   
   ### ZRender Changes
   
   - [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).
   
   ### Related test cases or examples to use the new APIs
   
   test/treemap-simple.html
   
   
   
   ## Others
   
   ### Merging options
   
   - [x] Please squash the commits into a single one when merging.
   
   ### Other information
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] susiwen8 commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
susiwen8 commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901092965


##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,9 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: true

Review Comment:
   Great



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] plainheart commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
plainheart commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901108266


##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,15 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: false,
+                itemStyle: {
+                    color: 'rgba(0,0,0,0.9)', //'#5793f3',
+                    textStyle: {
+                        color: '#fff'
+                    }

Review Comment:
   The text style in _emphasis_ state looks the same as the style in _normal_ state, so I think this option is also unnecessary,



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] echarts-bot[bot] commented on pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on PR #17242:
URL: https://github.com/apache/echarts/pull/17242#issuecomment-1159412442

   Thanks for your contribution!
   The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/echarts/wiki/How-to-make-a-pull-request).
   
   The pull request is marked to be `PR: author is committer` because you are a committer of this project.
   
   ⚠️ MISSING DOCUMENT INFO: Please make sure one of the document options are checked in this PR's description. Search "Document Info" in the description of this PR. This should be done either by the author or the reviewers of the PR.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] pissang commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
pissang commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901061118


##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,9 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: true

Review Comment:
   I think this nice new feature can be turned on by default in the 5.4



##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,9 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: true

Review Comment:
   I think this nice new feature can be enabled by default in the 5.4



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] plainheart commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
plainheart commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901774116


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +189,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)};
+            el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle();
+            toggleHoverEmphasis(
+                el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')

Review Comment:
   Does the focus/blur state work? I think it may need some extra work.



##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +189,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)};

Review Comment:
   `createTextStyle(emphasisTextStyleModel, { text })` is enough. No need to use spread operator.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] echarts-bot[bot] commented on pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on PR #17242:
URL: https://github.com/apache/echarts/pull/17242#issuecomment-1159730067

   
   
   Document changes are required in this PR. Please also make a PR to [apache/echarts-doc](https://github.com/apache/echarts-doc) for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the `PR: awaiting doc` label.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] susiwen8 merged pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
susiwen8 merged PR #17242:
URL: https://github.com/apache/echarts/pull/17242


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] plainheart commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
plainheart commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901098506


##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,15 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: false,

Review Comment:
   `emphasis` state is enabled by default. I think this default value is not needed.



##########
src/chart/treemap/TreemapSeries.ts:
##########
@@ -265,6 +266,15 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                 textStyle: {
                     color: '#fff'
                 }
+            },
+            emphasis: {
+                disabled: false,
+                itemStyle: {
+                    color: 'rgba(0,0,0,0.9)', //'#5793f3',
+                    textStyle: {
+                        color: '#fff'
+                    }

Review Comment:
   The `textStyle` in _emphasis_ state looks the same as the style in _normal_ state. I think it is also unnecessary. 



##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +192,18 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            const textContent = el.getTextContent();
+            const stateObj = textContent.ensureState('emphasis');
+            stateObj.style = {
+                fill: emphasisTextStyleModel.getTextColor(),
+                font: emphasisTextStyleModel.getFont(),
+                text
+            };

Review Comment:
   We can use the `createTextStyle` to enhance the text style, or some styles like `shadowColor` won't take effect. The same to the above normal text style (Line 181-186).



##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +192,18 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            const textContent = el.getTextContent();
+            const stateObj = textContent.ensureState('emphasis');
+            stateObj.style = {
+                fill: emphasisTextStyleModel.getTextColor(),
+                font: emphasisTextStyleModel.getFont(),
+                text
+            };
+            const emphasisState = el.ensureState('emphasis');
+            emphasisState.style = emphasisModel.getModel('itemStyle').getItemStyle();

Review Comment:
   This can be shorten to be,
   
   ```suggestion
               el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle();
   ```
   
   The same to the above emphasis text style.



##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +192,18 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            const textContent = el.getTextContent();
+            const stateObj = textContent.ensureState('emphasis');
+            stateObj.style = {
+                fill: emphasisTextStyleModel.getTextColor(),
+                font: emphasisTextStyleModel.getFont(),
+                text
+            };
+            const emphasisState = el.ensureState('emphasis');
+            emphasisState.style = emphasisModel.getModel('itemStyle').getItemStyle();
+            toggleHoverEmphasis(
+                el, 'self', 'global', emphasisModel.get('disabled')
+            );

Review Comment:
   I believe it would be great If we could support `focus` & `blur` so that related nodes can be highlighted or downplayed when hovering on the breadcrumb item. Just like this,
   
   ![img](https://user-images.githubusercontent.com/26999792/174483399-79c6f200-96c3-4fbc-a437-62f24146560f.gif)
   
   Of course, I know this is optional.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] plainheart commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
plainheart commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r902114226


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +190,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text });
+            el.ensureState('emphasis').style = emphasisItemStyle;

Review Comment:
   Now multiple elements are sharing the same `emphasisItemStyle`, will it bring any side effects?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] susiwen8 commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
susiwen8 commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901778970


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +189,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)};
+            el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle();
+            toggleHoverEmphasis(
+                el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')

Review Comment:
   No it doesn't work, I just add it for the future



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] susiwen8 commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
susiwen8 commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r902116899


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +190,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text });
+            el.ensureState('emphasis').style = emphasisItemStyle;

Review Comment:
   All `breadcrumb` item share same `emphasis` style, there is no way to set each item their own `emphasis` style. So I think It should be ok to use same style instance



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] susiwen8 commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
susiwen8 commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901796076


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +189,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)};
+            el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle();
+            toggleHoverEmphasis(
+                el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')

Review Comment:
   Yeah, it should be cached



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] echarts-bot[bot] commented on pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on PR #17242:
URL: https://github.com/apache/echarts/pull/17242#issuecomment-1161351713

   Congratulations! Your PR has been merged. Thanks for your contribution! 👍


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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

[GitHub] [echarts] plainheart commented on a diff in pull request #17242: feat(treemap.breadcrumb): add `emphasis` state

Posted by GitBox <gi...@apache.org>.
plainheart commented on code in PR #17242:
URL: https://github.com/apache/echarts/pull/17242#discussion_r901786658


##########
src/chart/treemap/Breadcrumb.ts:
##########
@@ -185,7 +189,11 @@ class Breadcrumb {
                 onclick: curry(onSelect, itemNode)
             });
             (el as ECElement).disableLabelAnimation = true;
-
+            el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)};
+            el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle();
+            toggleHoverEmphasis(
+                el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')

Review Comment:
   Just notice that current model getters are in the for loop, I'm not sure if we should cache them to local variables(Acceptable for me). I think it is up to you. @susiwen8 @pissang 



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


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