feat(treemap): add ancestor, descendant focus

add fontSize in labelLayout

src/chart/sunburst/SunburstPiece.ts

@@ -61,19 +61,6 @@ class SunburstPiece extends graphic.Sector {
         this.setTextContent(text);
 
         this.updateData(true, node, seriesModel, ecModel);
-
-        // Hover to change label and labelLine
-        // FIXME
-        // function onEmphasis() {
-        //     text.ignore = text.hoverIgnore;
-        // }
-        // function onNormal() {
-        //     text.ignore = text.normalIgnore;
-        // }
-        // this.on('emphasis', onEmphasis)
-        //     .on('normal', onNormal)
-        //     .on('mouseover', onEmphasis)
-        //     .on('mouseout', onNormal);
     }
 
     updateData(
@@ -95,14 +82,10 @@ class SunburstPiece extends graphic.Sector {
         const itemModel = node.getModel<SunburstSeriesNodeItemOption>();
         const emphasisModel = itemModel.getModel('emphasis');
         const layout = node.getLayout();
-        // if (!layout) {
-        //     console.log(node.getLayout());
-        // }
+
         const sectorShape = zrUtil.extend({}, layout);
         sectorShape.label = null;
 
-        // const visualColor = getNodeColor(node, seriesModel, ecModel);
-        // fillDefaultColor(node, seriesModel, visualColor);
         const normalStyle = node.getVisual('style') as PathStyleProps;
         normalStyle.lineJoin = 'bevel';
 
@@ -144,26 +127,26 @@ class SunburstPiece extends graphic.Sector {
         this._ecModel = ecModel || this._ecModel;
 
         const focus = emphasisModel.get('focus');
-        let focusArr: number[];
+        let focusDataIndices: number[];
 
         switch (focus) {
             case 'ancestor':
-                focusArr = [];
+                focusDataIndices = [];
                 let currNode = node;
                 while (currNode) {
-                    focusArr.push(currNode.dataIndex);
+                    focusDataIndices.push(currNode.dataIndex);
                     currNode = currNode.parentNode;
                 }
                 break;
             case 'descendant':
-                focusArr = [];
+                focusDataIndices = [];
                 node.eachNode(childNode => {
-                    focusArr.push(childNode.dataIndex);
+                    focusDataIndices.push(childNode.dataIndex);
                 });
                 break;
         }
 
-        enableHoverEmphasis(this, focusArr || focus, emphasisModel.get('blurScope'));
+        enableHoverEmphasis(this, focusDataIndices || focus, emphasisModel.get('blurScope'));
     }
 
     _updateLabel(

src/chart/tree/TreeSeries.ts

@@ -51,7 +51,7 @@ export interface TreeSeriesStateOption {
 }
 
 export interface TreeSeriesNodeItemOption extends SymbolOptionMixin,
-    TreeSeriesStateOption, StatesOptionMixin<TreeSeriesStateOption>,
+    TreeSeriesStateOption, StatesOptionMixin<TreeSeriesStateOption, 'ancestor' | 'descendant'>,
     OptionDataItemObject<OptionDataValue> {
 
     children?: TreeSeriesNodeItemOption[]
@@ -70,7 +70,7 @@ export interface TreeSeriesLeavesOption extends TreeSeriesStateOption, StatesOpt
 }
 
 export interface TreeSeriesOption extends
-    SeriesOption<TreeSeriesStateOption>, TreeSeriesStateOption,
+    SeriesOption<TreeSeriesStateOption, 'ancestor' | 'descendant'>, TreeSeriesStateOption,
     SymbolOptionMixin, BoxLayoutOptionMixin, RoamOptionMixin {
     type?: 'tree'
 
@@ -266,21 +266,14 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
         },
 
         label: {
-            show: true,
-            color: '#555'
-        },
-
-        leaves: {
-            label: {
-                show: true
-            }
+            show: true
         },
 
         animationEasing: 'linear',
 
         animationDuration: 700,
 
-        animationDurationUpdate: 1000
+        animationDurationUpdate: 500
     };
 }
 

src/chart/treemap/TreemapSeries.ts

@@ -104,13 +104,13 @@ export interface TreemapSeriesVisualOption {
 }
 
 export interface TreemapSeriesLevelOption extends TreemapSeriesVisualOption,
-    TreemapStateOption, StatesOptionMixin<TreemapStateOption> {
+    TreemapStateOption, StatesOptionMixin<TreemapStateOption, 'ancestor' | 'descendant'> {
 
     color?: ColorString[] | 'none'
 }
 
 export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption,
-    TreemapStateOption, StatesOptionMixin<TreemapStateOption> {
+    TreemapStateOption, StatesOptionMixin<TreemapStateOption, 'ancestor' | 'descendant'> {
     id?: string
     name?: string
 
@@ -121,7 +121,8 @@ export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption,
     color?: ColorString[] | 'none'
 }
 
-export interface TreemapSeriesOption extends SeriesOption<TreemapStateOption>, TreemapStateOption,
+export interface TreemapSeriesOption
+    extends SeriesOption<TreemapStateOption, 'ancestor' | 'descendant'>, TreemapStateOption,
     BoxLayoutOptionMixin,
     RoamOptionMixin,
     TreemapSeriesVisualOption {
@@ -261,7 +262,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             position: [0, '50%'],
             height: 20,
             // formatter: null,
-            color: '#fff',
+            // color: '#fff',
             ellipsis: true,
             // align: null,
             verticalAlign: 'middle'
@@ -281,7 +282,6 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             upperLabel: {
                 show: true,
                 position: [0, '50%'],
-                color: '#fff',
                 ellipsis: true,
                 verticalAlign: 'middle'
             }

src/chart/treemap/TreemapView.ts

@@ -52,10 +52,11 @@ import {
     TreemapRenderPayload,
     TreemapZoomToNodePayload
 } from './treemapAction';
-import { ColorString } from '../../util/types';
+import { ColorString, ECElement } from '../../util/types';
 import { windowOpen } from '../../util/format';
 import { TextStyleProps } from 'zrender/src/graphic/Text';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import { rectCoordAxisHandleRemove } from '../../component/axis/axisSplitHelper';
 
 const Group = graphic.Group;
 const Rect = graphic.Rect;
@@ -796,6 +797,25 @@ function renderNode(
     const focus = nodeModel.get(['emphasis', 'focus']);
     const blurScope = nodeModel.get(['emphasis', 'blurScope']);
 
+    let focusDataIndices: number[];
+    switch (focus) {
+        case 'ancestor':
+            focusDataIndices = [];
+            let currNode = thisNode;
+            while (currNode) {
+                focusDataIndices.push(currNode.dataIndex);
+                currNode = currNode.parentNode;
+            }
+            break;
+        case 'descendant':
+            focusDataIndices = [];
+            thisNode.eachNode(childNode => {
+                focusDataIndices.push(childNode.dataIndex);
+            });
+            break;
+
+    }
+
     // No children, render content.
     if (isParent) {
         // Because of the implementation about "traverse" in graphic hover style, we
@@ -809,7 +829,7 @@ function renderNode(
             // Only for enabling highlight/downplay.
             data.setItemGraphicEl(thisNode.dataIndex, bg);
 
-            enableHoverFocus(group, focus, blurScope);
+            enableHoverFocus(bg, focusDataIndices || focus, blurScope);
         }
     }
     else {
@@ -823,7 +843,7 @@ function renderNode(
         // Only for enabling highlight/downplay.
         data.setItemGraphicEl(thisNode.dataIndex, group);
 
-        enableHoverFocus(group, focus, blurScope);
+        enableHoverFocus(group, focusDataIndices || focus, blurScope);
     }
 
     return group;
@@ -907,7 +927,6 @@ function renderNode(
         }
         else {
             content.invisible = false;
-            // TODO. Optimize.
             const visualColor = thisNode.getVisual('style').fill;
             const normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualColor;
@@ -967,6 +986,14 @@ function renderNode(
             }
         );
 
+        if (upperLabelRect) {
+            rectEl.setTextConfig({
+                layoutRect: upperLabelRect
+            });
+            const textEl = rectEl.getTextContent();
+            (textEl as ECElement).disableLabelLayout = true;
+        }
+
         const textEl = rectEl.getTextContent();
         const textStyle = textEl.style;
         textStyle.overflow = 'truncate';
@@ -976,17 +1003,6 @@ function renderNode(
         addDrillDownIcon(textStyle, upperLabelRect, thisLayout);
         const textEmphasisState = textEl.getState('emphasis');
         addDrillDownIcon(textEmphasisState ? textEmphasisState.style : null, upperLabelRect, thisLayout);
-
-        // TODOTODO
-        // upperLabelRect && (normalStyle.textRect = clone(upperLabelRect));
-
-        // normalStyle.truncate = (isShow && normalLabelModel.get('ellipsis'))
-        //     ? {
-        //         outerWidth: width,
-        //         outerHeight: height,
-        //         minChar: 2
-        //     }
-        //     : null;
     }
 
     function addDrillDownIcon(style: TextStyleProps, upperLabelRect: RectLike, thisLayout: any) {

src/label/LabelManager.ts

@@ -50,7 +50,6 @@ import { retrieve2, each, keys, isFunction, filter, indexOf } from 'zrender/src/
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import Model from '../model/Model';
 import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
-import { getLabelStatesModels } from './labelStyle';
 
 interface LabelDesc {
     label: ZRText
@@ -82,6 +81,7 @@ interface SavedLabelAttr {
         verticalAlign: ZRTextVerticalAlign
         width: number
         height: number
+        fontSize: number
 
         x: number
         y: number
@@ -125,7 +125,7 @@ function prepareLayoutCallbackParams(labelItem: LabelDesc, hostEl?: Element): La
     };
 }
 
-const LABEL_OPTION_TO_STYLE_KEYS = ['align', 'verticalAlign', 'width', 'height'] as const;
+const LABEL_OPTION_TO_STYLE_KEYS = ['align', 'verticalAlign', 'width', 'height', 'fontSize'] as const;
 
 const dummyTransformable = new Transformable();
 
@@ -258,7 +258,9 @@ class LabelManager {
                     align: labelStyle.align,
                     verticalAlign: labelStyle.verticalAlign,
                     width: labelStyle.width,
-                    height: labelStyle.height
+                    height: labelStyle.height,
+
+                    fontSize: labelStyle.fontSize
                 },
 
                 cursor: label.cursor,
@@ -293,7 +295,7 @@ class LabelManager {
             const ecData = getECData(child);
             const dataIndex = ecData.dataIndex;
             // Can only attach the text on the element with dataIndex
-            if (textEl && dataIndex != null) {
+            if (textEl && dataIndex != null && !(textEl as ECElement).disableLabelLayout) {
                 this._addLabel(dataIndex, ecData.dataType, seriesModel, textEl, layoutOption);
             }
         });

src/util/types.ts

@@ -119,6 +119,10 @@ export interface ECElement extends Element {
      * Force disable animation on any condition
      */
     disableLabelAnimation?: boolean
+    /**
+     * Force disable overall layout
+     */
+    disableLabelLayout?: boolean
 }
 
 export interface DataHost {
@@ -892,10 +896,12 @@ export interface LabelLayoutOption {
      */
     dy?: number
     rotate?: number
+
     align?: ZRTextAlign
     verticalAlign?: ZRTextVerticalAlign
     width?: number
     height?: number
+    fontSize?: number
 
     labelLinePoints?: number[][]
 }

test/hoverFocus.html

@@ -71,9 +71,11 @@ under the License.
                 themeRiver: 'self',
                 graph: 'adjacency',
                 sankey: 'adjacency',
-                sunburst: 'descendant'
+                sunburst: 'descendant',
+                treemap: 'descendant'
             }
             allChartsOptions.forEach(function (chartOption) {
+                let isTreemap = false;
                 chartOption.series.forEach(function (series) {
                     series.emphasis = series.emphasis || {};
                     series.emphasis.focus = seriesFocusType[series.type] || 'series';
@@ -94,16 +96,30 @@ under the License.
                             return ret;
                         }
                     }
+
+                    if (series.type === 'treemap') {
+                        isTreemap = true;
+                        series.itemStyle = {
+                            borderColor: 'rgba(100, 100, 200, 0.1)',
+                            borderWidth: 5
+                        };
+                        series.upperLabel = {
+                            show: true,
+                            height: 30
+                        };
+                    }
                 });
-                const dom = document.createElement('div');
-                dom.className = 'chart';
-                document.querySelector('#main').appendChild(dom);
+                if (isTreemap) {
+                    const dom = document.createElement('div');
+                    dom.className = 'chart';
+                    document.querySelector('#main').appendChild(dom);
 
-                const chart = echarts.init(dom);
+                    const chart = echarts.init(dom);
 
-                chart.setOption(chartOption);
+                    chart.setOption(chartOption);
 
-                charts.push(chart);
+                    charts.push(chart);
+                }
             });
 
             function update() {