You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/11/10 07:15:24 UTC

[incubator-echarts] branch label-inherit-opacity created (now 79fb9d1)

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

shenyi pushed a change to branch label-inherit-opacity
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.


      at 79fb9d1  fix(label): inherit opacity from attached element

This branch includes the following new commits:

     new 79fb9d1  fix(label): inherit opacity from attached element

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



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


[incubator-echarts] 01/01: fix(label): inherit opacity from attached element

Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch label-inherit-opacity
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 79fb9d12326f107c3df790dbdbfe20e6bb4ce154
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Nov 10 15:14:43 2020 +0800

    fix(label): inherit opacity from attached element
---
 src/chart/bar/BarView.ts          |  1 +
 src/chart/bar/PictorialBarView.ts |  3 +--
 src/chart/funnel/FunnelView.ts    |  7 ++++---
 src/chart/heatmap/HeatmapView.ts  |  6 ++++--
 src/chart/helper/Line.ts          |  1 +
 src/chart/helper/Symbol.ts        |  3 ++-
 src/chart/pie/PieView.ts          | 11 ++++-------
 src/chart/radar/RadarView.ts      |  3 ++-
 src/chart/treemap/TreemapView.ts  |  9 ++++++---
 src/label/labelStyle.ts           | 20 +++++++++++++++++---
 10 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 012f813..88dd9fa 100644
--- a/src/chart/bar/BarView.ts
+++ b/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
             }
         );
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index ae49c30..1c3da45 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/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
         }
     );
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index 5fceca4..d165564 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/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: {
diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts
index 155e6b6..b8209d0 100644
--- a/src/chart/heatmap/HeatmapView.ts
+++ b/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
                 }
             );
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index 92a08f0..f0b0c63 100644
--- a/src/chart/helper/Line.ts
+++ b/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)
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 2b920c9..a7d0a01 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -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
             }
         );
 
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 06a2924..bb0a22a 100644
--- a/src/chart/pie/PieView.ts
+++ b/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)
         });
     }
 }
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 64054e9..ce1131e 100644
--- a/src/chart/radar/RadarView.ts
+++ b/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
                     }
                 );
             });
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index 2255f3c..a64bba4 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/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
             }
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index fab4467..2c8f3e8 100644
--- a/src/label/labelStyle.ts
+++ b/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.


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