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/06/22 16:01:40 UTC

[incubator-echarts] 02/03: feat(label): change label default color to black/white, 'inherit' to set color same with element

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

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

commit f40e0dd120edfcda5b1fb63d057627d9639c9701
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 23 00:00:36 2020 +0800

    feat(label): change label default color to black/white, 'inherit' to set color same with element
---
 src/chart/bar/BarView.ts             |  2 +-
 src/chart/bar/PictorialBarView.ts    |  2 +-
 src/chart/custom.ts                  |  2 +-
 src/chart/gauge/GaugeView.ts         |  6 ++--
 src/chart/helper/Line.ts             |  2 +-
 src/chart/helper/Symbol.ts           |  2 +-
 src/chart/pie/PieSeries.ts           |  1 +
 src/chart/pie/PieView.ts             |  5 ++-
 src/chart/radar/RadarView.ts         |  2 +-
 src/chart/treemap/TreemapView.ts     |  2 +-
 src/component/marker/MarkAreaView.ts |  2 +-
 src/util/graphic.ts                  | 61 ++++++++++++++++++------------------
 12 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 90b3777..b9f86e2 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -566,7 +566,7 @@ function updateStyle(
                 labelFetcher: seriesModel,
                 labelDataIndex: dataIndex,
                 defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
-                autoColor: style.fill as ColorString,
+                inheritColor: style.fill as ColorString,
                 defaultOutsidePosition: labelPositionOutside
             }
         );
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index e7d93da..e4a7429 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -952,7 +952,7 @@ function updateCommon(
             labelFetcher: opt.seriesModel,
             labelDataIndex: dataIndex,
             defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
-            autoColor: symbolMeta.style.fill as ColorString,
+            inheritColor: symbolMeta.style.fill as ColorString,
             defaultOutsidePosition: barPositionOutside
         }
     );
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index 3b801ff..28de10d 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -482,7 +482,7 @@ function makeRenderItem(customSeries, data, ecModel, api) {
             : currLabelNormalModel;
 
         const textStyle = graphicUtil.createTextStyle(labelModel, null, {
-            autoColor: currVisualColor,
+            inheritColor: currVisualColor,
             isRectText: true
         });
 
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index 0540bac..cd766d0 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -262,7 +262,7 @@ class GaugeView extends ChartView {
                         y: unitY * (r - splitLineLen - distance) + cy,
                         verticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
                         align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
-                    }, {autoColor: autoColor}),
+                    }, {inheritColor: autoColor}),
                     silent: true
                 }));
             }
@@ -423,7 +423,7 @@ class GaugeView extends ChartView {
                     text: data.getName(0),
                     align: 'center',
                     verticalAlign: 'middle'
-                }, {autoColor: autoColor})
+                }, {inheritColor: autoColor})
             }));
         }
     }
@@ -463,7 +463,7 @@ class GaugeView extends ChartView {
                     height: isNaN(height) ? null : height,
                     align: 'center',
                     verticalAlign: 'middle'
-                }, {autoColor: autoColor})
+                }, {inheritColor: autoColor})
             }));
         }
     }
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index d67694d..72268ac 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -256,7 +256,7 @@ class Line extends graphic.Group {
             label.useStyle(graphic.createTextStyle(labelModel, {
                 text: normalText as string
             }, {
-                autoColor: defaultLabelColor
+                inheritColor: defaultLabelColor
             }));
 
             label.__align = label.style.align;
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 8689d63..2dd123d 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -266,7 +266,7 @@ class Symbol extends graphic.Group {
                 labelFetcher: seriesModel,
                 labelDataIndex: idx,
                 defaultText: getLabelDefaultText,
-                autoColor: visualColor as ColorString
+                inheritColor: visualColor as ColorString
             }
         );
 
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 5ed642b..01a828c 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -244,6 +244,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
         height: null,
 
         label: {
+            color: 'inherit',
             // If rotate around circle
             rotate: 0,
             show: true,
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 2c6fe97..1598a95 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -182,6 +182,7 @@ class PiePiece extends graphic.Sector {
             {
                 labelFetcher: data.hostModel as PieSeriesModel,
                 labelDataIndex: idx,
+                inheritColor: visualColor,
                 defaultText: seriesModel.getFormattedLabel(idx, 'normal')
                     || data.getName(idx)
             },
@@ -193,9 +194,7 @@ class PiePiece extends graphic.Sector {
         // Set textConfig on sector.
         sector.setTextConfig({
             local: true,
-            insideStroke: visualColor,
-            // insideFill: 'auto',
-            outsideFill: visualColor
+            outsideFill: labelModel.get('color') === 'inherit' ? visualColor : 'auto'
         });
 
         // Make sure update style on labelText after setLabelStyle.
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 397b67f..29bd6fb 100644
--- a/src/chart/radar/RadarView.ts
+++ b/src/chart/radar/RadarView.ts
@@ -237,7 +237,7 @@ class RadarView extends ChartView {
                         labelDataIndex: idx,
                         labelDimIndex: symbolPath.__dimIdx,
                         defaultText: defaultText as string,
-                        autoColor: color as ColorString
+                        inheritColor: color as ColorString
                     }
                 );
             });
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index b490cb5..db06317 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -936,7 +936,7 @@ function renderNode(
             rectEl, normalLabelModel, emphasisLabelModel,
             {
                 defaultText: isShow ? text : null,
-                autoColor: visualColor
+                inheritColor: visualColor
             }
         );
 
diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts
index 7398abb..574fc55 100644
--- a/src/component/marker/MarkAreaView.ts
+++ b/src/component/marker/MarkAreaView.ts
@@ -300,7 +300,7 @@ class MarkAreaView extends MarkerView {
                     labelFetcher: maModel,
                     labelDataIndex: idx,
                     defaultText: areaData.getName(idx) || '',
-                    autoColor: typeof style.fill === 'string'
+                    inheritColor: typeof style.fill === 'string'
                         ? colorUtil.modifyAlpha(style.fill, 1) : '#000'
                 }
             );
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 10e1bbd..bf863ba 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -122,10 +122,10 @@ type TextCommonParams = {
      */
     disableBox?: boolean
     /**
-     * Specify a color when color is 'auto',
-     * for textFill, textStroke, textBackgroundColor, and textBorderColor. If autoColor specified, it is used as default textFill.
+     * Specify a color when color is 'inherit',
+     * If inheritColor specified, it is used as default textFill.
      */
-    autoColor?: ColorString
+    inheritColor?: ColorString
 
     getTextPosition?: (textStyleModel: Model, isEmphasis?: boolean) => string | string[] | number[]
 
@@ -816,7 +816,7 @@ export {setLabelStyle};
 export function createTextStyle(
     textStyleModel: Model,
     specifiedTextStyle?: TextStyleProps,    // Can be overrided by settings in model.
-    opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+    opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
     isNotNormal?: boolean,
     isAttached?: boolean // If text is attached on an element. If so, auto color will handling in zrender.
 ) {
@@ -831,7 +831,7 @@ export function createTextStyle(
 export function createTextConfig(
     textStyle: TextStyleProps,
     textStyleModel: Model,
-    opt?: Pick<TextCommonParams, 'getTextPosition' | 'defaultOutsidePosition' | 'autoColor'>,
+    opt?: Pick<TextCommonParams, 'getTextPosition' | 'defaultOutsidePosition' | 'inheritColor'>,
     isNotNormal?: boolean
 ) {
     const textConfig: ElementTextConfig = {};
@@ -868,19 +868,10 @@ export function createTextConfig(
     }
 
     // fill and auto is determined by the color of path fill if it's not specified by developers.
-    textConfig.outsideFill = opt.autoColor || null;
 
-    // if (!textStyle.fill) {
-    //     textConfig.insideFill = 'auto';
-    //     textConfig.outsideFill = opt.autoColor || null;
-    // }
-    // if (!textStyle.stroke) {
-    //     textConfig.insideStroke = 'auto';
-    // }
-    // else if (opt.autoColor) {
-    //     // TODO: stroke set to autoColor. if label is inside?
-    //     textConfig.insideStroke = opt.autoColor;
-    // }
+    textConfig.outsideFill = textStyleModel.get('color') === 'inherit'
+        ? (opt.inheritColor || null)
+        : 'auto';
 
     return textConfig;
 }
@@ -898,7 +889,7 @@ export function createTextConfig(
 function setTextStyleCommon(
     textStyle: TextStyleProps,
     textStyleModel: Model,
-    opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+    opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
     isNotNormal?: boolean,
     isAttached?: boolean
 ) {
@@ -1003,7 +994,7 @@ function setTokenTextStyle(
     textStyle: TextStyleProps['rich'][string],
     textStyleModel: Model<LabelOption>,
     globalTextStyle: LabelOption,
-    opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+    opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
     isNotNormal?: boolean,
     isAttached?: boolean,
     isBlock?: boolean
@@ -1011,14 +1002,24 @@ function setTokenTextStyle(
     // In merge mode, default value should not be given.
     globalTextStyle = !isNotNormal && globalTextStyle || EMPTY_OBJ;
 
-    const autoColor = opt && opt.autoColor;
+    const inheritColor = opt && opt.inheritColor;
     let fillColor = textStyleModel.getShallow('color');
     let strokeColor = textStyleModel.getShallow('textBorderColor');
-    if (fillColor === 'auto' && autoColor) {
-        fillColor = autoColor;
+    if (fillColor === 'inherit') {
+        if (inheritColor) {
+            fillColor = inheritColor;
+        }
+        else {
+            fillColor = null;
+        }
     }
-    if (strokeColor === 'auto' && autoColor) {
-        strokeColor = autoColor;
+    if (strokeColor === 'inherit' && inheritColor) {
+        if (inheritColor) {
+            strokeColor = inheritColor;
+        }
+        else {
+            strokeColor = inheritColor;
+        }
     }
     fillColor = fillColor || globalTextStyle.color;
     strokeColor = strokeColor || globalTextStyle.textBorderColor;
@@ -1040,8 +1041,8 @@ function setTokenTextStyle(
     // TODO
     if (!isNotNormal && !isAttached) {
         // Set default finally.
-        if (textStyle.fill == null && opt.autoColor) {
-            textStyle.fill = opt.autoColor;
+        if (textStyle.fill == null && opt.inheritColor) {
+            textStyle.fill = opt.inheritColor;
         }
     }
 
@@ -1073,11 +1074,11 @@ function setTokenTextStyle(
 
 
     if (!isBlock || !opt.disableBox) {
-        if (textStyle.backgroundColor === 'auto' && autoColor) {
-            textStyle.backgroundColor = autoColor;
+        if (textStyle.backgroundColor === 'auto' && inheritColor) {
+            textStyle.backgroundColor = inheritColor;
         }
-        if (textStyle.borderColor === 'auto' && autoColor) {
-            textStyle.borderColor = autoColor;
+        if (textStyle.borderColor === 'auto' && inheritColor) {
+            textStyle.borderColor = inheritColor;
         }
 
         for (let i = 0; i < TEXT_PROPS_BOX.length; i++) {


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