Merge pull request #13589 from apache/label-inherit-opacity

fix(label): inherit opacity from attached element

src/chart/bar/BarView.ts

@@ -855,6 +855,7 @@ function updateStyle(
                 labelDataIndex: dataIndex,
                 defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
                 inheritColor: style.fill as ColorString,
+                inheritOpacity: style.opacity,
                 defaultOutsidePosition: labelPositionOutside
             }
         );

src/chart/bar/PictorialBarView.ts

@@ -916,8 +916,6 @@ function updateCommon(
         path.ensureState('blur').style = blurStyle;
         path.ensureState('select').style = selectStyle;
 
-
-
         cursorStyle && (path.cursor = cursorStyle);
         path.z2 = symbolMeta.z2;
     });
@@ -932,6 +930,7 @@ function updateCommon(
             labelDataIndex: dataIndex,
             defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
             inheritColor: symbolMeta.style.fill as ColorString,
+            inheritOpacity: symbolMeta.style.opacity,
             defaultOutsidePosition: barPositionOutside
         }
     );

src/chart/funnel/FunnelView.ts

@@ -27,6 +27,7 @@ import List from '../../data/List';
 import { ColorString } from '../../util/types';
 import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import { retrieveVisualColorForTooltipMarker } from '../../component/tooltip/tooltipMarkup';
 
 const opacityAccessPath = ['itemStyle', 'opacity'] as const;
 
@@ -101,9 +102,8 @@ class FunnelPiece extends graphic.Polygon {
         const itemModel = data.getItemModel<FunnelDataItemOption>(idx);
         const layout = data.getItemLayout(idx);
         const labelLayout = layout.label;
-        // let visualColor = data.getItemVisual(idx, 'color');
-
-        const visualColor = data.getItemVisual(idx, 'style').fill as ColorString;
+        const style = data.getItemVisual(idx, 'style');
+        const visualColor = style.fill as ColorString;
 
         setLabelStyle(
             // position will not be used in setLabelStyle
@@ -112,6 +112,7 @@ class FunnelPiece extends graphic.Polygon {
             {
                 labelFetcher: data.hostModel as FunnelSeriesModel,
                 labelDataIndex: idx,
+                inheritOpacity: style.opacity,
                 defaultText: data.getName(idx)
             },
             { normal: {

src/chart/heatmap/HeatmapView.ts

@@ -209,6 +209,7 @@ class HeatmapView extends ChartView {
 
         for (let idx = start; idx < end; idx++) {
             let rect;
+            const style = data.getItemVisual(idx, 'style');
 
             if (isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')) {
                 const dataDimX = data.get(dataDims[0], idx);
@@ -236,7 +237,7 @@ class HeatmapView extends ChartView {
                         width: Math.ceil(width),
                         height: Math.ceil(height)
                     },
-                    style: data.getItemVisual(idx, 'style')
+                    style
                 });
             }
             else {
@@ -248,7 +249,7 @@ class HeatmapView extends ChartView {
                 rect = new graphic.Rect({
                     z2: 1,
                     shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
-                    style: data.getItemVisual(idx, 'style')
+                    style
                 });
             }
 
@@ -278,6 +279,7 @@ class HeatmapView extends ChartView {
                 {
                     labelFetcher: seriesModel,
                     labelDataIndex: idx,
+                    inheritOpacity: style.opacity,
                     defaultText: defaultText
                 }
             );

src/chart/helper/Line.ts

@@ -256,6 +256,7 @@ class Line extends graphic.Group {
                 }
             },
             inheritColor: visualColor as ColorString || '#000',
+            inheritOpacity: lineStyle.opacity,
             defaultText: (rawVal == null
                 ? lineData.getName(idx)
                 : isFinite(rawVal)

src/chart/helper/Symbol.ts

@@ -24,7 +24,7 @@ import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/st
 import {parsePercent} from '../../util/number';
 import {getDefaultLabel} from './labelHelper';
 import List from '../../data/List';
-import { ColorString, BlurScope } from '../../util/types';
+import { ColorString, BlurScope, AnimationOption } from '../../util/types';
 import SeriesModel from '../../model/Series';
 import { PathProps } from 'zrender/src/graphic/Path';
 import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw';
@@ -318,7 +318,8 @@ class Symbol extends graphic.Group {
                 labelFetcher: seriesModel,
                 labelDataIndex: idx,
                 defaultText: getLabelDefaultText,
-                inheritColor: visualColor as ColorString
+                inheritColor: visualColor as ColorString,
+                inheritOpacity: symbolStyle.opacity
             }
         );
 
@@ -351,13 +352,35 @@ class Symbol extends graphic.Group {
     }
 
     fadeOut(cb: () => void, opt?: {
-        keepLabel: boolean
+        fadeLabel: boolean,
+        animation?: AnimationOption
     }) {
         const symbolPath = this.childAt(0) as ECSymbol;
+        const seriesModel = this._seriesModel;
+        const dataIndex = getECData(this).dataIndex;
+        const animationOpt = opt && opt.animation;
         // Avoid mistaken hover when fading out
         this.silent = symbolPath.silent = true;
         // Not show text when animating
-        !(opt && opt.keepLabel) && (symbolPath.removeTextContent());
+        if (opt && opt.fadeLabel) {
+            const textContent = symbolPath.getTextContent();
+            if (textContent) {
+                graphic.removeElement(textContent, {
+                    style: {
+                        opacity: 0
+                    }
+                }, seriesModel, {
+                    dataIndex,
+                    removeOpt: animationOpt,
+                    cb() {
+                        symbolPath.removeTextContent();
+                    }
+                });
+            }
+        }
+        else {
+            symbolPath.removeTextContent();
+        }
 
         graphic.removeElement(
             symbolPath,
@@ -368,9 +391,8 @@ class Symbol extends graphic.Group {
                 scaleX: 0,
                 scaleY: 0
             },
-            this._seriesModel,
-            getECData(this).dataIndex,
-            cb
+            seriesModel,
+            { dataIndex, cb, removeOpt: animationOpt}
         );
     }
 

src/chart/pie/PieView.ts

@@ -19,7 +19,7 @@
 */
 
 
-import { extend, retrieve2 } from 'zrender/src/core/util';
+import { extend, retrieve3 } from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
 import ChartView from '../../view/Chart';
@@ -152,7 +152,6 @@ class PiePiece extends graphic.Sector {
     private _updateLabel(seriesModel: PieSeriesModel, data: List, idx: number): void {
         const sector = this;
         const itemModel = data.getItemModel<PieDataItemOption>(idx);
-        const labelModel = itemModel.getModel('label');
         const labelLineModel = itemModel.getModel('labelLine');
 
         const style = data.getItemVisual(idx, 'style');
@@ -166,12 +165,10 @@ class PiePiece extends graphic.Sector {
                 labelFetcher: data.hostModel as PieSeriesModel,
                 labelDataIndex: idx,
                 inheritColor: visualColor,
+                inheritOpacity: visualOpacity,
                 defaultText: seriesModel.getFormattedLabel(idx, 'normal')
                     || data.getName(idx)
-            },
-            { normal: {
-                opacity: retrieve2(labelModel.get('opacity'), visualOpacity)
-            } }
+            }
         );
         const labelText = sector.getTextContent();
 
@@ -191,7 +188,7 @@ class PiePiece extends graphic.Sector {
         // Default use item visual color
         setLabelLineStyle(this, getLabelLineStatesModels(itemModel), {
             stroke: visualColor,
-            opacity: retrieve2(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity)
+            opacity: retrieve3(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity, 1)
         });
     }
 }

src/chart/radar/RadarView.ts

@@ -255,7 +255,8 @@ class RadarView extends ChartView {
                         labelDataIndex: idx,
                         labelDimIndex: symbolPath.__dimIdx,
                         defaultText: defaultText as string,
-                        inheritColor: color as ColorString
+                        inheritColor: color as ColorString,
+                        inheritOpacity: itemStyle.opacity
                     }
                 );
             });

src/chart/tree/TreeView.ts

@@ -629,7 +629,10 @@ function removeNode(
         removeOpt: removeAnimationOpt
     });
 
-    symbolEl.fadeOut(null, {keepLabel: true});
+    symbolEl.fadeOut(null, {
+        fadeLabel: true,
+        animation: removeAnimationOpt
+    });
 
     const sourceSymbolEl = data.getItemGraphicEl(source.dataIndex) as TreeSymbol;
     const sourceEdge = sourceSymbolEl.__edge;

src/chart/treemap/TreemapView.ts

@@ -859,7 +859,8 @@ function renderNode(
         }
         else {
             bg.invisible = false;
-            const visualBorderColor = thisNode.getVisual('style').stroke;
+            const style = thisNode.getVisual('style');
+            const visualBorderColor = style.stroke;
             const normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualBorderColor;
             const emphasisStyle = getStateItemStyle(itemStyleEmphasisModel);
@@ -873,7 +874,7 @@ function renderNode(
                 const upperLabelWidth = thisWidth - 2 * borderWidth;
 
                 prepareText(
-                    bg, visualBorderColor, upperLabelWidth, upperHeight,
+                    bg, visualBorderColor, upperLabelWidth, upperHeight, style.opacity,
                     {x: borderWidth, y: 0, width: upperLabelWidth, height: upperHeight}
                 );
             }
@@ -928,7 +929,7 @@ function renderNode(
             const blurStyle = getStateItemStyle(itemStyleBlurModel);
             const selectStyle = getStateItemStyle(itemStyleSelectModel);
 
-            prepareText(content, visualColor, contentWidth, contentHeight);
+            prepareText(content, visualColor, contentWidth, nodeStyle.opacity, contentHeight);
 
             content.setStyle(normalStyle);
             content.ensureState('emphasis').style = emphasisStyle;
@@ -949,6 +950,7 @@ function renderNode(
     function prepareText(
         rectEl: graphic.Rect,
         visualColor: ColorString,
+        visualOpacity: number,
         width: number,
         height: number,
         upperLabelRect?: RectLike
@@ -976,6 +978,7 @@ function renderNode(
             {
                 defaultText: isShow ? text : null,
                 inheritColor: visualColor,
+                inheritOpacity: visualOpacity,
                 labelFetcher: seriesModel,
                 labelDataIndex: thisNode.dataIndex
             }

src/label/LabelManager.ts

@@ -24,7 +24,8 @@ import {
     BoundingRect,
     Polyline,
     updateProps,
-    initProps
+    initProps,
+    isElementRemoved
 } from '../util/graphic';
 import { getECData } from '../util/innerStore';
 import ExtensionAPI from '../ExtensionAPI';
@@ -493,7 +494,12 @@ class LabelManager {
         const textEl = el.getTextContent();
         const guideLine = el.getTextGuideLine();
         // Animate
-        if (textEl && !textEl.ignore && !textEl.invisible && !(el as ECElement).disableLabelAnimation) {
+        if (textEl
+            && !textEl.ignore
+            && !textEl.invisible
+            && !(el as ECElement).disableLabelAnimation
+            && !isElementRemoved(el)
+        ) {
             const layoutStore = labelLayoutInnerStore(textEl);
             const oldLayout = layoutStore.oldLayout;
             const ecData = getECData(el);

src/label/labelStyle.ts

@@ -52,6 +52,12 @@ type TextCommonParams = {
      */
     inheritColor?: ColorString
 
+    /**
+     * Specify a opacity when opacity is 'inherit',
+     * If inheritColor specified, it is used as default textFill.
+     */
+    inheritOpacity?: number
+
     defaultOutsidePosition?: LabelOption['position']
 
     /**
@@ -356,7 +362,7 @@ export function createTextConfig(
 function setTextStyleCommon(
     textStyle: TextStyleProps,
     textStyleModel: Model,
-    opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
+    opt?: Pick<TextCommonParams, 'inheritColor' | 'inheritOpacity' | 'disableBox'>,
     isNotNormal?: boolean,
     isAttached?: boolean
 ) {
@@ -441,7 +447,7 @@ function getRichItemNames(textStyleModel: Model<LabelOption>) {
     return richItemNameMap;
 }
 const TEXT_PROPS_WITH_GLOBAL = [
-    'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'opacity',
+    'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
     'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'
 ] as const;
 const TEXT_PROPS_SELF = [
@@ -457,7 +463,7 @@ function setTokenTextStyle(
     textStyle: TextStyleProps['rich'][string],
     textStyleModel: Model<LabelOption>,
     globalTextStyle: LabelOption,
-    opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
+    opt?: Pick<TextCommonParams, 'inheritColor' | 'inheritOpacity' | 'disableBox'>,
     isNotNormal?: boolean,
     isAttached?: boolean,
     isBlock?: boolean
@@ -467,6 +473,7 @@ function setTokenTextStyle(
     const inheritColor = opt && opt.inheritColor;
     let fillColor = textStyleModel.getShallow('color');
     let strokeColor = textStyleModel.getShallow('textBorderColor');
+    let opacity = retrieve2(textStyleModel.getShallow('opacity'), globalTextStyle.opacity);
     if (fillColor === 'inherit' || fillColor === 'auto') {
         if (__DEV__) {
             if (fillColor === 'auto') {
@@ -520,6 +527,13 @@ function setTokenTextStyle(
         textStyle.lineDashOffset = textBorderDashOffset;
     }
 
+    if (!isNotNormal && (opacity == null)) {
+        opacity = opt && opt.inheritOpacity;
+    }
+    if (opacity != null) {
+        textStyle.opacity = opacity;
+    }
+
     // TODO
     if (!isNotNormal && !isAttached) {
         // Set default finally.