This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new bee91da refact: only set text props when necessary. rename
setTextStyle to createTextStyle.
bee91da is described below
commit bee91da065a4789961f1e893549ac2e7360d1200
Author: pissang <bm2736...@gmail.com>
AuthorDate: Tue Mar 24 15:28:02 2020 +0800
refact: only set text props when necessary. rename setTextStyle to
createTextStyle.
---
src/chart/custom.ts | 9 +-
src/chart/funnel/FunnelView.ts | 38 ++--
src/chart/gauge/GaugeView.ts | 6 +-
src/chart/pie/PieView.ts | 50 ++---
src/chart/themeRiver/ThemeRiverView.ts | 23 +-
src/component/axis/AngleAxisView.ts | 20 +-
src/component/axis/AxisBuilder.ts | 79 ++++---
src/component/axisPointer/viewHelper.ts | 8 +-
src/component/calendar/CalendarView.ts | 32 +--
src/component/legend/LegendView.ts | 2 +-
src/component/timeline/SliderTimelineView.ts | 14 +-
src/component/title.ts | 4 +-
src/echarts.ts | 2 +-
src/export.ts | 2 +-
src/util/graphic.ts | 310 ++++++++++++++++-----------
15 files changed, 339 insertions(+), 260 deletions(-)
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index 73897aa..abf3fd7 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -481,11 +481,14 @@ function makeRenderItem(customSeries, data, ecModel, api)
{
? applyExtraBefore(extra, currLabelNormalModel)
: currLabelNormalModel;
- graphicUtil.setTextStyle(itemStyle, labelModel, null, {
+ const textStyle = graphicUtil.createTextStyle(labelModel, null, {
autoColor: currVisualColor,
isRectText: true
});
+ // TODO
+ zrUtil.extend(itemStyle, textStyle);
+
itemStyle.text = labelModel.getShallow('show')
? zrUtil.retrieve2(
customSeries.getFormattedLabel(dataIndexInside, 'normal'),
@@ -513,9 +516,11 @@ function makeRenderItem(customSeries, data, ecModel, api) {
? applyExtraBefore(extra, currLabelEmphasisModel)
: currLabelEmphasisModel;
- graphicUtil.setTextStyle(itemStyle, labelModel, null, {
+ const textStyle = graphicUtil.createTextStyle(labelModel, null, {
isRectText: true
}, true);
+ zrUtil.extend(itemStyle, textStyle);
+
itemStyle.text = labelModel.getShallow('show')
? zrUtil.retrieve3(
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index 7a66a50..f643e81 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -133,24 +133,6 @@ class FunnelPiece extends graphic.Group {
let labelLayout = layout.label;
// let visualColor = data.getItemVisual(idx, 'color');
- graphic.updateProps(labelLine, {
- shape: {
- points: labelLayout.linePoints || labelLayout.linePoints
- }
- }, seriesModel, idx);
-
- graphic.updateProps(labelText, {
- style: {
- x: labelLayout.x,
- y: labelLayout.y
- }
- }, seriesModel, idx);
- labelText.attr({
- rotation: labelLayout.rotation,
- origin: [labelLayout.x, labelLayout.y],
- z2: 10
- });
-
let labelModel = itemModel.getModel('label');
let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
let labelLineModel = itemModel.getModel('labelLine');
@@ -172,6 +154,26 @@ class FunnelPiece extends graphic.Group {
}
);
+ graphic.updateProps(labelLine, {
+ shape: {
+ points: labelLayout.linePoints || labelLayout.linePoints
+ }
+ }, seriesModel, idx);
+
+ // Make sure update style on labelText after setLabelStyle.
+ // Because setLabelStyle will replace a new style on it.
+ graphic.updateProps(labelText, {
+ style: {
+ x: labelLayout.x,
+ y: labelLayout.y
+ }
+ }, seriesModel, idx);
+ labelText.attr({
+ rotation: labelLayout.rotation,
+ origin: [labelLayout.x, labelLayout.y],
+ z2: 10
+ });
+
labelText.ignore = (labelText as FunnelLabelEl).normalIgnore =
!labelModel.get('show');
(labelText as FunnelLabelEl).hoverIgnore =
!labelHoverModel.get('show');
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index 7d1aa11..60c2b16 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -256,7 +256,7 @@ class GaugeView extends ChartView {
let autoColor = getColor(i / splitNumber);
group.add(new graphic.Text({
- style: graphic.setTextStyle({}, null, labelModel, {
+ style: graphic.createTextStyle(labelModel, {
text: label,
x: unitX * (r - splitLineLen - distance) + cx,
y: unitY * (r - splitLineLen - distance) + cy,
@@ -416,7 +416,7 @@ class GaugeView extends ChartView {
this.group.add(new graphic.Text({
silent: true,
- style: graphic.setTextStyle({}, null, titleModel, {
+ style: graphic.createTextStyle(titleModel, {
x: x,
y: y,
// FIXME First data name ?
@@ -452,7 +452,7 @@ class GaugeView extends ChartView {
this.group.add(new graphic.Text({
silent: true,
- style: graphic.setTextStyle({}, null, detailModel, {
+ style: graphic.createTextStyle(detailModel, {
x: x,
y: y,
text: formatLabel(
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index fc6927b..5679444 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -250,6 +250,30 @@ class PiePiece extends graphic.Group {
[labelLayout.x, labelLayout.y], [labelLayout.x,
labelLayout.y], [labelLayout.x, labelLayout.y]
]
};
+ let labelModel = itemModel.getModel('label');
+ let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
+ let labelLineModel = itemModel.getModel('labelLine');
+ let labelLineHoverModel = itemModel.getModel(['emphasis',
'labelLine']);
+ let visualColor = data.getItemVisual(idx, 'color');
+
+ graphic.setLabelStyle(
+ labelText,
+ labelModel,
+ labelHoverModel,
+ {
+ labelFetcher: data.hostModel as PieSeriesModel,
+ labelDataIndex: idx,
+ defaultText: labelLayout.text,
+ autoColor: visualColor,
+ useInsideStyle: !!labelLayout.inside
+ },
+ {
+ align: labelLayout.textAlign,
+ verticalAlign: labelLayout.verticalAlign,
+ opacity: data.getItemVisual(idx, 'opacity')
+ }
+ );
+
let targetTextStyle = {
x: labelLayout.x,
y: labelLayout.y
@@ -267,6 +291,8 @@ class PiePiece extends graphic.Group {
labelLine.attr({
shape: targetLineShape
});
+ // Make sure update style on labelText after setLabelStyle.
+ // Because setLabelStyle will replace a new style on it.
labelText.attr({
style: targetTextStyle
});
@@ -278,30 +304,6 @@ class PiePiece extends graphic.Group {
z2: 10
});
- let labelModel = itemModel.getModel('label');
- let labelHoverModel = itemModel.getModel(['emphasis', 'label']);
- let labelLineModel = itemModel.getModel('labelLine');
- let labelLineHoverModel = itemModel.getModel(['emphasis',
'labelLine']);
- let visualColor = data.getItemVisual(idx, 'color');
-
- graphic.setLabelStyle(
- labelText,
- labelModel,
- labelHoverModel,
- {
- labelFetcher: data.hostModel as PieSeriesModel,
- labelDataIndex: idx,
- defaultText: labelLayout.text,
- autoColor: visualColor,
- useInsideStyle: !!labelLayout.inside
- },
- {
- align: labelLayout.textAlign,
- verticalAlign: labelLayout.verticalAlign,
- opacity: data.getItemVisual(idx, 'opacity')
- }
- );
-
labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
labelText.hoverIgnore = !labelHoverModel.get('show');
diff --git a/src/chart/themeRiver/ThemeRiverView.ts
b/src/chart/themeRiver/ThemeRiverView.ts
index 04ce914..51cb316 100644
--- a/src/chart/themeRiver/ThemeRiverView.ts
+++ b/src/chart/themeRiver/ThemeRiverView.ts
@@ -95,6 +95,14 @@ class ThemeRiverView extends ChartView {
let textLayout = data.getItemLayout(indices[0]);
let labelModel = seriesModel.getModel('label');
let margin = labelModel.get('margin');
+
+ const commonTextStyle = graphic.createTextStyle(labelModel, {
+ text: labelModel.get('show')
+ ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
+ || data.getName(indices[j - 1])
+ : null,
+ verticalAlign: 'middle'
+ });
if (status === 'add') {
const layerGroup = newLayersGroups[idx] = new graphic.Group();
polygon = new ECPolygon({
@@ -108,10 +116,10 @@ class ThemeRiverView extends ChartView {
z2: 0
});
text = new graphic.Text({
- style: {
+ style: extend({
x: textLayout.x - margin,
y: textLayout.y0 + textLayout.y / 2
- }
+ }, commonTextStyle)
});
layerGroup.add(polygon);
layerGroup.add(text);
@@ -137,23 +145,16 @@ class ThemeRiverView extends ChartView {
}, seriesModel);
graphic.updateProps(text, {
- style: {
+ style: extend({
x: textLayout.x - margin,
y: textLayout.y0 + textLayout.y / 2
- }
+ }, commonTextStyle)
}, seriesModel);
}
let hoverItemStyleModel = seriesModel.getModel(['emphasis',
'itemStyle']);
let itemStyleModel = seriesModel.getModel('itemStyle');
- graphic.setTextStyle(text.style, null, labelModel, {
- text: labelModel.get('show')
- ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
- || data.getName(indices[j - 1])
- : null,
- verticalAlign: 'middle'
- });
polygon.setStyle(extend({
fill: color
diff --git a/src/component/axis/AngleAxisView.ts
b/src/component/axis/AngleAxisView.ts
index 3f84809..bc108b6 100644
--- a/src/component/axis/AngleAxisView.ts
+++ b/src/component/axis/AngleAxisView.ts
@@ -258,18 +258,18 @@ const angelAxisElementsBuilders: Record<typeof
elementList[number], AngleAxisEle
}
let textEl = new graphic.Text({
- silent: AxisBuilder.isLabelSilent(angleAxisModel)
+ silent: AxisBuilder.isLabelSilent(angleAxisModel),
+ style: graphic.createTextStyle(labelModel, {
+ x: p[0],
+ y: p[1],
+ fill: labelModel.getTextColor()
+ || angleAxisModel.get(['axisLine', 'lineStyle',
'color']) as ColorString,
+ text: labelItem.formattedLabel,
+ align: labelTextAlign,
+ verticalAlign: labelTextVerticalAlign
+ })
});
group.add(textEl);
- graphic.setTextStyle(textEl.style, null, labelModel, {
- x: p[0],
- y: p[1],
- fill: labelModel.getTextColor()
- || angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
as ColorString,
- text: labelItem.formattedLabel,
- align: labelTextAlign,
- verticalAlign: labelTextVerticalAlign
- });
// Pack data for mouse event
if (triggerEvent) {
diff --git a/src/component/axis/AxisBuilder.ts
b/src/component/axis/AxisBuilder.ts
index e1f5a86..b43e7e7 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -428,6 +428,19 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
position: pos,
rotation: labelLayout.rotation,
silent: AxisBuilder.isLabelSilent(axisModel),
+ style: graphic.createTextStyle(textStyleModel, {
+ text: name,
+ font: textFont,
+ overflow: 'truncate',
+ width: maxWidth,
+ ellipsis,
+ fill: textStyleModel.getTextColor()
+ || axisModel.get(['axisLine', 'lineStyle', 'color']) as
ColorString,
+ align: textStyleModel.get('align')
+ || labelLayout.textAlign,
+ verticalAlign: textStyleModel.get('verticalAlign')
+ || labelLayout.textVerticalAlign
+ }),
z2: 1
}) as AxisLabelText;
textEl.tooltip = (tooltipOpt && tooltipOpt.show)
@@ -443,20 +456,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
// Id for animation
textEl.anid = 'name';
- graphic.setTextStyle(textEl.style, null, textStyleModel, {
- text: name,
- font: textFont,
- overflow: 'truncate',
- width: maxWidth,
- ellipsis,
- fill: textStyleModel.getTextColor()
- || axisModel.get(['axisLine', 'lineStyle', 'color']) as
ColorString,
- align: textStyleModel.get('align')
- || labelLayout.textAlign,
- verticalAlign: textStyleModel.get('verticalAlign')
- || labelLayout.textVerticalAlign
- });
-
if (axisModel.get('triggerEvent')) {
let eventData = AxisBuilder.makeAxisEventDataBase(axisModel);
eventData.targetType = 'axisName';
@@ -777,35 +776,35 @@ function buildAxisLabel(
position: pos,
rotation: labelLayout.rotation,
silent: silent,
- z2: 10
+ z2: 10,
+ style: graphic.createTextStyle(itemLabelModel, {
+ text: formattedLabel,
+ align: itemLabelModel.getShallow('align', true)
+ || labelLayout.textAlign,
+ verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
+ || itemLabelModel.getShallow('baseline', true)
+ || labelLayout.textVerticalAlign,
+ fill: typeof textColor === 'function'
+ ? textColor(
+ // (1) In category axis with data zoom, tick is not
the original
+ // index of axis.data. So tick should not be exposed
to user
+ // in category axis.
+ // (2) Compatible with previous version, which always
use formatted label as
+ // input. But in interval scale the formatted label is
like '223,445', which
+ // maked user repalce ','. So we modify it to return
original val but remain
+ // it as 'string' to avoid error in replacing.
+ axis.type === 'category'
+ ? rawLabel
+ : axis.type === 'value'
+ ? tickValue + ''
+ : tickValue,
+ index
+ )
+ : textColor as string
+ })
});
textEl.anid = 'label_' + tickValue;
- graphic.setTextStyle(textEl.style, null, itemLabelModel, {
- text: formattedLabel,
- align: itemLabelModel.getShallow('align', true)
- || labelLayout.textAlign,
- verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
- || itemLabelModel.getShallow('baseline', true)
- || labelLayout.textVerticalAlign,
- fill: typeof textColor === 'function'
- ? textColor(
- // (1) In category axis with data zoom, tick is not the
original
- // index of axis.data. So tick should not be exposed to
user
- // in category axis.
- // (2) Compatible with previous version, which always use
formatted label as
- // input. But in interval scale the formatted label is
like '223,445', which
- // maked user repalce ','. So we modify it to return
original val but remain
- // it as 'string' to avoid error in replacing.
- axis.type === 'category'
- ? rawLabel
- : axis.type === 'value'
- ? tickValue + ''
- : tickValue,
- index
- )
- : textColor as string
- });
// Pack data for mouse event
if (triggerEvent) {
diff --git a/src/component/axisPointer/viewHelper.ts
b/src/component/axisPointer/viewHelper.ts
index 229700e..a9ced9c 100644
--- a/src/component/axisPointer/viewHelper.ts
+++ b/src/component/axisPointer/viewHelper.ts
@@ -131,10 +131,10 @@ export function buildLabelElOption(
borderColor: labelModel.get('borderColor') || 'transparent',
borderRadius: labelModel.get('borderRadius'),
borderWidth: labelModel.get('borderWidth') || 0,
- boxShadowBlur: labelModel.get('shadowBlur'),
- boxShadowColor: labelModel.get('shadowColor'),
- boxShadowOffsetX: labelModel.get('shadowOffsetX'),
- boxShadowOffsetY: labelModel.get('shadowOffsetY')
+ shadowBlur: labelModel.get('shadowBlur'),
+ shadowColor: labelModel.get('shadowColor'),
+ shadowOffsetX: labelModel.get('shadowOffsetX'),
+ shadowOffsetY: labelModel.get('shadowOffsetY')
},
// Lable should be over axisPointer.
z2: 10
diff --git a/src/component/calendar/CalendarView.ts
b/src/component/calendar/CalendarView.ts
index 16fa5fd..e2b2794 100644
--- a/src/component/calendar/CalendarView.ts
+++ b/src/component/calendar/CalendarView.ts
@@ -345,8 +345,12 @@ class CalendarView extends ComponentView {
let content = this._formatterLabel(formatter, params);
- let yearText = new graphic.Text({z2: 30});
- graphic.setTextStyle(yearText.style, null, yearLabel, {text: content}),
+ let yearText = new graphic.Text({
+ z2: 30,
+ style: graphic.createTextStyle(yearLabel, {
+ text: content
+ })
+ });
yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos],
orient, pos, margin));
group.add(yearText);
@@ -441,11 +445,13 @@ class CalendarView extends ComponentView {
let content = this._formatterLabel(formatter, params);
- let monthText = new graphic.Text({z2: 30});
- zrUtil.extend(
- graphic.setTextStyle(monthText.style, null, monthLabel, {text:
content}),
- this._monthTextPositionControl(tmp, isCenter, orient, pos,
margin)
- );
+ let monthText = new graphic.Text({
+ z2: 30,
+ style: zrUtil.extend(
+ graphic.createTextStyle(monthLabel, {text: content}),
+ this._monthTextPositionControl(tmp, isCenter, orient, pos,
margin)
+ )
+ });
group.add(monthText);
}
@@ -524,12 +530,14 @@ class CalendarView extends ComponentView {
let point = coordSys.dataToRect([tmpD.time], false).center;
let day = i;
day = Math.abs((i + firstDayOfWeek) % 7);
- let weekText = new graphic.Text({z2: 30});
+ let weekText = new graphic.Text({
+ z2: 30,
+ style: zrUtil.extend(
+ graphic.createTextStyle(dayLabel, {text: nameMap[day]}),
+ this._weekTextPositionControl(point, orient, pos, margin,
cellSize)
+ )
+ });
- zrUtil.extend(
- graphic.setTextStyle(weekText.style, null, dayLabel, {text:
nameMap[day]}),
- this._weekTextPositionControl(point, orient, pos, margin,
cellSize)
- );
group.add(weekText);
}
}
diff --git a/src/component/legend/LegendView.ts
b/src/component/legend/LegendView.ts
index 1f74a29..b9bb4f7 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -410,7 +410,7 @@ class LegendView extends ComponentView {
}
itemGroup.add(new graphic.Text({
- style: graphic.setTextStyle({}, null, textStyleModel, {
+ style: graphic.createTextStyle(textStyleModel, {
text: content,
x: textX,
y: itemHeight / 2,
diff --git a/src/component/timeline/SliderTimelineView.ts
b/src/component/timeline/SliderTimelineView.ts
index 877ff38..c8e3a06 100644
--- a/src/component/timeline/SliderTimelineView.ts
+++ b/src/component/timeline/SliderTimelineView.ts
@@ -446,17 +446,17 @@ class SliderTimelineView extends TimelineView {
position: [tickCoord, 0],
rotation: layoutInfo.labelRotation - layoutInfo.rotation,
onclick: bind(this._changeTimeline, this, dataIndex),
- silent: false
- });
- graphic.setTextStyle(textEl.style, null, normalLabelModel, {
- text: labelItem.formattedLabel,
- align: layoutInfo.labelAlign,
- verticalAlign: layoutInfo.labelBaseline
+ silent: false,
+ style: graphic.createTextStyle(normalLabelModel, {
+ text: labelItem.formattedLabel,
+ align: layoutInfo.labelAlign,
+ verticalAlign: layoutInfo.labelBaseline
+ })
});
group.add(textEl);
graphic.enableHoverEmphasis(
- textEl, graphic.setTextStyle({}, null, hoverLabelModel)
+ textEl, graphic.createTextStyle(hoverLabelModel)
);
}, this);
diff --git a/src/component/title.ts b/src/component/title.ts
index 82eeef4..2032bc9 100644
--- a/src/component/title.ts
+++ b/src/component/title.ts
@@ -150,7 +150,7 @@ class TitleView extends ComponentView {
);
let textEl = new graphic.Text({
- style: graphic.setTextStyle({}, null, textStyleModel, {
+ style: graphic.createTextStyle(textStyleModel, {
text: titleModel.get('text'),
fill: textStyleModel.getTextColor()
}, {disableBox: true}),
@@ -161,7 +161,7 @@ class TitleView extends ComponentView {
let subText = titleModel.get('subtext');
let subTextEl = new graphic.Text({
- style: graphic.setTextStyle({}, null, subtextStyleModel, {
+ style: graphic.createTextStyle(subtextStyleModel, {
text: subText,
fill: subtextStyleModel.getTextColor(),
y: textRect.height + titleModel.get('itemGap'),
diff --git a/src/echarts.ts b/src/echarts.ts
index 6ccb173..931fb73 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -1670,7 +1670,7 @@ class ECharts extends Eventful {
if (chartView.__alive) {
chartView.group.traverse(function (el: ECElement) {
// Don't switch back.
- el.useHoverLayer = true;
+ // el.useHoverLayer = true;
});
}
});
diff --git a/src/export.ts b/src/export.ts
index 41ef2e8..6d99525 100644
--- a/src/export.ts
+++ b/src/export.ts
@@ -66,7 +66,7 @@ export {ecUtil as util};
const GRAPHIC_KEYS = [
'extendShape', 'extendPath', 'makePath', 'makeImage',
'mergePath', 'resizePath', 'createIcon',
- 'setHoverStyle', 'setLabelStyle', 'setTextStyle', 'setText',
+ 'setHoverStyle', 'setLabelStyle', 'createTextStyle',
'getFont', 'updateProps', 'initProps', 'getTransform',
'clipPointsByRect', 'clipRectByRect',
'registerShape', 'getShapeClass',
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 461e1cb..84cc326 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -17,7 +17,6 @@
* under the License.
*/
-import * as zrUtil from 'zrender/src/core/util';
import * as pathTool from 'zrender/src/tool/path';
import * as colorTool from 'zrender/src/tool/color';
import * as matrix from 'zrender/src/core/matrix';
@@ -47,7 +46,7 @@ import LRU from 'zrender/src/core/LRU';
import Displayable, { DisplayableProps } from
'zrender/src/graphic/Displayable';
import { PatternObject } from 'zrender/src/graphic/Pattern';
import { GradientObject } from 'zrender/src/graphic/Gradient';
-import Element, { ElementEvent } from 'zrender/src/Element';
+import Element, { ElementEvent, ElementTextConfig } from 'zrender/src/Element';
import Model from '../model/Model';
import {
AnimationOptionMixin,
@@ -63,6 +62,7 @@ import {
} from './types';
import GlobalModel from '../model/Global';
import { makeInner } from './model';
+import { isFunction, retrieve2, extend, keys, trim, isArrayLike, map, defaults
} from 'zrender/src/core/util';
const mathMax = Math.max;
@@ -70,7 +70,7 @@ const mathMin = Math.min;
const EMPTY_OBJ = {};
-export const Z2_EMPHASIS_LIFT = 1;
+export const Z2_EMPHASIS_LIFT = 10;
// key: label model property nane, value: style property name.
export const CACHED_LABEL_STYLE_PROPERTIES = {
@@ -384,10 +384,9 @@ function singleEnterEmphasis(el: Displayable) {
el.style.stroke = liftColor(currentStroke);
}
- // TODO default lift fill/stroke. z2
- // TODO hover layer
+ el.z2 += Z2_EMPHASIS_LIFT;
- // applyDefaultTextStyle(targetStyle);
+ // TODO hover layer
}
@@ -581,11 +580,19 @@ interface SetLabelStyleOpt<LDI> extends TextCommonParams {
labelDataIndex?: LDI,
labelDimIndex?: number
}
+
+
/**
- * See more info in `setTextStyleCommon`.
+ * Set normal styles and emphasis styles about text on target element
+ * If target is a RichText. It will create a new style object.
+ * If target is other Element. It will create or reuse RichText which is
attached on the target.
+ * And create a new style object.
+ *
+ * NOTICE: Because the style on RichText will be replaced with new.
+ * So please use the style on RichText after use this method.
*/
export function setLabelStyle<LDI>(
- hostEl: Element,
+ targetEl: Element,
normalModel: Model,
emphasisModel: Model,
opt?: SetLabelStyleOpt<LDI>,
@@ -594,7 +601,7 @@ export function setLabelStyle<LDI>(
// TODO specified position?
) {
opt = opt || EMPTY_OBJ;
- const isSetOnRichText = hostEl instanceof RichText;
+ const isSetOnRichText = targetEl instanceof RichText;
const labelFetcher = opt.labelFetcher;
const labelDataIndex = opt.labelDataIndex;
const labelDimIndex = opt.labelDimIndex;
@@ -614,12 +621,12 @@ export function setLabelStyle<LDI>(
baseText = labelFetcher.getFormattedLabel(labelDataIndex,
'normal', null, labelDimIndex);
}
if (baseText == null) {
- baseText = zrUtil.isFunction(opt.defaultText) ?
opt.defaultText(labelDataIndex, opt) : opt.defaultText;
+ baseText = isFunction(opt.defaultText) ?
opt.defaultText(labelDataIndex, opt) : opt.defaultText;
}
}
let normalStyleText = showNormal ? baseText : null;
let emphasisStyleText = showEmphasis
- ? zrUtil.retrieve2(
+ ? retrieve2(
labelFetcher
? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis',
null, labelDimIndex)
: null,
@@ -627,46 +634,34 @@ export function setLabelStyle<LDI>(
)
: null;
- let richText = isSetOnRichText ? hostEl as RichText : null;
+ let richText = isSetOnRichText ? targetEl as RichText : null;
// Optimize: If style.text is null, text will not be drawn.
if (normalStyleText != null || emphasisStyleText != null) {
if (!isSetOnRichText) {
// Reuse the previous
- richText = hostEl.getTextContent();
+ richText = targetEl.getTextContent();
if (!richText) {
richText = new RichText();
- hostEl.setTextContent(richText);
+ targetEl.setTextContent(richText);
}
richText.ignore = !normalStyleText;
}
- const emphasisStyle: RichTextStyleProps = {};
const emphasisState = richText.ensureState('emphasis');
- emphasisState.style = emphasisStyle;
emphasisState.ignore = !emphasisStyleText;
- let textConfig: Element['textConfig'];
- let emphasisTextLayout: Element['textConfig'];
- if (!isSetOnRichText) {
- textConfig = {};
- emphasisTextLayout = emphasisState.textConfig = {};
- }
// Always set `textStyle` even if `normalStyle.text` is null, because
default
// values have to be set on `normalStyle`.
// If we set default values on `emphasisStyle`, consider case:
// Firstly, `setOption(... label: {normal: {text: null}, emphasis:
{show: true}} ...);`
// Secondly, `setOption(... label: {noraml: {show: true, text: 'abc',
color: 'red'} ...);`
// Then the 'red' will not work on emphasis.
- setTextStyle(
- richText.style,
- textConfig,
+ const normalStyle = createTextStyle(
normalModel,
normalSpecified,
opt
);
- setTextStyle(
- emphasisStyle,
- emphasisTextLayout,
+ emphasisState.style = createTextStyle(
emphasisModel,
emphasisSpecified,
opt,
@@ -674,11 +669,24 @@ export function setLabelStyle<LDI>(
);
if (!isSetOnRichText) {
- hostEl.setTextConfig(textConfig);
+ // Always create new
+ targetEl.setTextConfig(createTextConfig(
+ normalStyle,
+ normalModel,
+ opt
+ ));
+ emphasisState.textConfig = createTextConfig(
+ emphasisState.style,
+ emphasisModel,
+ opt
+ );
}
- richText.style.text = normalStyleText;
- richText.states.emphasis.style.text = emphasisStyleText;
+ normalStyle.text = normalStyleText;
+ emphasisState.style.text = emphasisStyleText;
+
+ // Always create new style.
+ richText.useStyle(normalStyle);
richText.dirty();
}
@@ -687,28 +695,81 @@ export function setLabelStyle<LDI>(
richText.ignore = true;
}
- hostEl.dirty();
+ targetEl.dirty();
}
/**
* Set basic textStyle properties.
* See more info in `setTextStyleCommon`.
*/
-export function setTextStyle(
- textStyle: RichTextStyleProps,
- textConfig: Element['textConfig'], // If textContent is attached on
RichText.
+export function createTextStyle(
textStyleModel: Model,
specifiedTextStyle?: RichTextStyleProps, // Can be overrided by
settings in model.
opt?: TextCommonParams,
isEmphasis?: boolean
) {
- setTextStyleCommon(textStyle, textConfig, textStyleModel, opt, isEmphasis);
- specifiedTextStyle && zrUtil.extend(textStyle, specifiedTextStyle);
+ const textStyle: RichTextStyleProps = {};
+ setTextStyleCommon(textStyle, textStyleModel, opt, isEmphasis);
+ specifiedTextStyle && extend(textStyle, specifiedTextStyle);
// textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
return textStyle;
}
+export function createTextConfig(
+ textStyle: RichTextStyleProps,
+ textStyleModel: Model,
+ opt?: TextCommonParams,
+ isEmphasis?: boolean
+) {
+ const textConfig: ElementTextConfig = {};
+ let labelPosition;
+ let labelRotate = textStyleModel.getShallow('rotate');
+ const labelDistance = retrieve2(
+ textStyleModel.getShallow('distance'), isEmphasis ? null : 5
+ );
+ const labelOffset = textStyleModel.getShallow('offset');
+
+ if (opt.getTextPosition) {
+ labelPosition = opt.getTextPosition(textStyleModel, isEmphasis);
+ }
+ else {
+ labelPosition = textStyleModel.getShallow('position')
+ || (isEmphasis ? null : 'inside');
+ // 'outside' is not a valid zr textPostion value, but used
+ // in bar series, and magric type should be considered.
+ labelPosition === 'outside' && (labelPosition =
opt.defaultOutsidePosition || 'top');
+ }
+
+ if (labelPosition != null) {
+ textConfig.position = labelPosition;
+ }
+ if (labelOffset != null) {
+ textConfig.offset = labelOffset;
+ }
+ if (labelRotate != null) {
+ labelRotate *= Math.PI / 180;
+ textConfig.rotation = labelRotate;
+ }
+ if (labelDistance != null) {
+ textConfig.distance = labelDistance;
+ }
+
+ // fill and auto is determined by the color of path fill if it's not
specified by developers.
+ if (!textStyle.fill) {
+ textConfig.insideFill = 'auto';
+ }
+ if (!textStyle.stroke) {
+ textConfig.insideStroke = 'auto';
+ }
+ else if (opt.autoColor) {
+ // TODO: stroke set to autoColor. if label is inside?
+ textConfig.insideStroke = opt.autoColor;
+ }
+
+ return textConfig;
+}
+
/**
* The uniform entry of set text style, that is, retrieve style definitions
@@ -718,17 +779,9 @@ export function setTextStyle(
* properties will be set. (Consider the states of normal and emphasis and
* default value can be adopted, merge would make the logic too complicated
* to manage.)
- *
- * The `textStyle` object can either be the style of normal or emphasis.
- * After this mothod called, the `textStyle` object can then be used in
- * `el.setStyle(textStyle)` or `el.hoverStyle = textStyle`.
- *
- * Default value will be adopted and `insideRollbackOpt` will be created.
- * See `applyDefaultTextStyle` `rollbackDefaultTextStyle` for more details.
*/
function setTextStyleCommon(
textStyle: RichTextStyleProps,
- textConfig: Element['textConfig'], // If textContent is attached on
RichText.
textStyleModel: Model,
opt?: TextCommonParams,
isEmphasis?: boolean
@@ -770,39 +823,16 @@ function setTextStyleCommon(
}
}
}
- textStyle.rich = richResult;
- textStyle.overflow = textStyleModel.get('overflow');
- setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt,
isEmphasis, true);
-
- if (textConfig) {
- let textPosition;
- if (opt.getTextPosition) {
- textPosition = opt.getTextPosition(textStyleModel, isEmphasis);
- }
- else {
- textPosition = textStyleModel.getShallow('position')
- || (isEmphasis ? null : 'inside');
- // 'outside' is not a valid zr textPostion value, but used
- // in bar series, and magric type should be considered.
- textPosition === 'outside' && (textPosition =
opt.defaultOutsidePosition || 'top');
- }
-
- textConfig.position = textPosition;
- textConfig.offset = textStyleModel.getShallow('offset');
- let labelRotate = textStyleModel.getShallow('rotate');
- labelRotate != null && (labelRotate *= Math.PI / 180);
- textConfig.rotation = labelRotate;
- textConfig.distance = zrUtil.retrieve2(
- textStyleModel.getShallow('distance'), isEmphasis ? null : 5
- );
-
- // fill and auto is determined by the color of path fill if it's not
specified by developers.
- textConfig.insideFill = textStyle.fill ? 'auto' : null;
- // TODO: stroke set to autoColor. if label is inside?
- textConfig.insideStroke = textStyle.stroke ? 'auto' : (opt.autoColor
|| null);
+ if (richResult) {
+ textStyle.rich = richResult;
+ }
+ const overflow = textStyleModel.get('overflow');
+ if (overflow) {
+ textStyle.overflow = overflow;
}
+ setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt,
isEmphasis, true);
// TODO
if (opt.forceRich && !opt.textStyle) {
@@ -832,7 +862,7 @@ function getRichItemNames(textStyleModel:
Model<LabelOption>) {
let rich = (textStyleModel.option || EMPTY_OBJ as LabelOption).rich;
if (rich) {
richItemNameMap = richItemNameMap || {};
- const richKeys = zrUtil.keys(rich);
+ const richKeys = keys(rich);
for (let i = 0; i < richKeys.length; i++) {
const richKey = richKeys[i];
richItemNameMap[richKey] = 1;
@@ -843,6 +873,21 @@ function getRichItemNames(textStyleModel:
Model<LabelOption>) {
return richItemNameMap;
}
+const TEXT_PROPS_WITH_GLOBAL = [
+ 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
+ 'textShadowColor', 'textShadowBlur', 'textShadowOffsetX',
'textShadowOffsetY'
+] as const;
+
+const TEXT_PROPS_SELF = [
+ 'align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign'
+] as const;
+
+const TEXT_PROPS_BOX = [
+ 'padding', 'borderWidth', 'borderRadius',
+ 'backgroundColor', 'borderColor',
+ 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'
+] as const;
+
function setTokenTextStyle(
textStyle: RichTextStyleProps['rich'][string],
textStyleModel: Model<LabelOption>,
@@ -854,18 +899,36 @@ function setTokenTextStyle(
// In merge mode, default value should not be given.
globalTextStyle = !isEmphasis && globalTextStyle || EMPTY_OBJ;
- textStyle.fill = getAutoColor(textStyleModel.getShallow('color'), opt)
- || globalTextStyle.color;
- textStyle.stroke =
getAutoColor(textStyleModel.getShallow('textBorderColor'), opt)
- || globalTextStyle.textBorderColor;
- textStyle.lineWidth = zrUtil.retrieve2(
+ const autoColor = opt && opt.autoColor;
+ let fillColor = textStyleModel.getShallow('color');
+ let strokeColor = textStyleModel.getShallow('textBorderColor');
+ if (fillColor === 'auto' && autoColor) {
+ fillColor = autoColor;
+ }
+ if (strokeColor === 'auto' && autoColor) {
+ strokeColor = autoColor;
+ }
+ fillColor = fillColor || globalTextStyle.color;
+ strokeColor = strokeColor || globalTextStyle.textBorderColor;
+ if (fillColor != null) {
+ textStyle.fill = fillColor;
+ }
+ if (strokeColor != null) {
+ textStyle.stroke = strokeColor;
+ }
+
+ const lineWidth = retrieve2(
textStyleModel.getShallow('textBorderWidth'),
globalTextStyle.textBorderWidth
);
+ if (lineWidth != null) {
+ textStyle.lineWidth = lineWidth;
+ }
+
if (!isEmphasis) {
// Set default finally.
- if (textStyle.fill == null) {
+ if (textStyle.fill == null && opt.autoColor) {
textStyle.fill = opt.autoColor;
}
}
@@ -873,52 +936,51 @@ function setTokenTextStyle(
// Do not use `getFont` here, because merge should be supported, where
// part of these properties may be changed in emphasis style, and the
// others should remain their original value got from normal style.
- textStyle.fontStyle = textStyleModel.getShallow('fontStyle') ||
globalTextStyle.fontStyle;
- textStyle.fontWeight = textStyleModel.getShallow('fontWeight') ||
globalTextStyle.fontWeight;
- textStyle.fontSize = textStyleModel.getShallow('fontSize') ||
globalTextStyle.fontSize;
- textStyle.fontFamily = textStyleModel.getShallow('fontFamily') ||
globalTextStyle.fontFamily;
-
- textStyle.align = textStyleModel.getShallow('align');
- textStyle.verticalAlign = textStyleModel.getShallow('verticalAlign')
- || textStyleModel.getShallow('baseline');
+ for (let i = 0; i < TEXT_PROPS_WITH_GLOBAL.length; i++) {
+ const key = TEXT_PROPS_WITH_GLOBAL[i];
+ const val = retrieve2(textStyleModel.getShallow(key),
globalTextStyle[key]);
+ if (val != null) {
+ (textStyle as any)[key] = val;
+ }
+ }
- textStyle.lineHeight = textStyleModel.getShallow('lineHeight');
- textStyle.width = textStyleModel.getShallow('width');
- textStyle.height = textStyleModel.getShallow('height');
- textStyle.textTag = textStyleModel.getShallow('tag');
+ for (let i = 0; i < TEXT_PROPS_SELF.length; i++) {
+ const key = TEXT_PROPS_SELF[i];
+ const val = textStyleModel.getShallow(key);
+ if (val != null) {
+ (textStyle as any)[key] = val;
+ }
+ }
- if (!isBlock || !opt.disableBox) {
- textStyle.backgroundColor =
getAutoColor(textStyleModel.getShallow('backgroundColor') as string, opt);
- textStyle.padding = textStyleModel.getShallow('padding');
- textStyle.borderColor =
getAutoColor(textStyleModel.getShallow('borderColor'), opt);
- textStyle.borderWidth = textStyleModel.getShallow('borderWidth');
- textStyle.borderRadius = textStyleModel.getShallow('borderRadius');
-
- textStyle.boxShadowColor = textStyleModel.getShallow('shadowColor');
- textStyle.boxShadowBlur = textStyleModel.getShallow('shadowBlur');
- textStyle.boxShadowOffsetX =
textStyleModel.getShallow('shadowOffsetX');
- textStyle.boxShadowOffsetY =
textStyleModel.getShallow('shadowOffsetY');
+ if (textStyle.verticalAlign == null) {
+ const baseline = textStyleModel.getShallow('baseline');
+ if (baseline != null) {
+ textStyle.verticalAlign = baseline;
+ }
}
- textStyle.textShadowColor = textStyleModel.getShallow('textShadowColor')
- || globalTextStyle.textShadowColor;
- textStyle.textShadowBlur = textStyleModel.getShallow('textShadowBlur')
- || globalTextStyle.textShadowBlur;
- textStyle.textShadowOffsetX =
textStyleModel.getShallow('textShadowOffsetX')
- || globalTextStyle.textShadowOffsetX;
- textStyle.textShadowOffsetY =
textStyleModel.getShallow('textShadowOffsetY')
- || globalTextStyle.textShadowOffsetY;
-}
-function getAutoColor(color: ColorString, opt?: {
- autoColor?: ColorString
-}): ColorString {
- return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor :
null;
+ if (!isBlock || !opt.disableBox) {
+ if (textStyle.backgroundColor === 'auto' && autoColor) {
+ textStyle.backgroundColor = autoColor;
+ }
+ if (textStyle.borderColor === 'auto' && autoColor) {
+ textStyle.borderColor = autoColor;
+ }
+
+ for (let i = 0; i < TEXT_PROPS_BOX.length; i++) {
+ const key = TEXT_PROPS_BOX[i];
+ const val = textStyleModel.getShallow(key);
+ if (val != null) {
+ (textStyle as any)[key] = val;
+ }
+ }
+ }
}
export function getFont(opt: LabelOption, ecModel: GlobalModel) {
let gTextStyleModel = ecModel && ecModel.getModel('textStyle');
- return zrUtil.trim([
+ return trim([
// FIXME in node-canvas fontWeight is before fontStyle
opt.fontStyle || gTextStyleModel &&
gTextStyleModel.getShallow('fontStyle') || '',
opt.fontWeight || gTextStyleModel &&
gTextStyleModel.getShallow('fontWeight') || '',
@@ -1058,7 +1120,7 @@ export function applyTransform(
transform: Transformable | matrix.MatrixArray,
invert?: boolean
): number[] {
- if (transform && !zrUtil.isArrayLike(transform)) {
+ if (transform && !isArrayLike(transform)) {
transform = Transformable.getLocalTransform(transform);
}
@@ -1132,7 +1194,7 @@ export function groupTransition(
rotation: el.rotation
};
if (isPath(el)) {
- obj.shape = zrUtil.extend({}, el.shape);
+ obj.shape = extend({}, el.shape);
}
return obj;
}
@@ -1153,7 +1215,7 @@ export function groupTransition(
export function clipPointsByRect(points: vector.VectorArray[], rect:
ZRRectLike): number[][] {
// FIXME: this way migth be incorrect when grpahic clipped by a corner.
// and when element have border.
- return zrUtil.map(points, function (point) {
+ return map(points, function (point) {
let x = point[0];
x = mathMax(x, rect.x);
x = mathMin(x, rect.x + rect.width);
@@ -1190,7 +1252,7 @@ export function createIcon(
opt?: Omit<DisplayableProps, 'style'>,
rect?: ZRRectLike
): SVGPath | ZImage {
- const innerOpts: DisplayableProps = zrUtil.extend({rectHover: true}, opt);
+ const innerOpts: DisplayableProps = extend({rectHover: true}, opt);
const style: ZRStyleProps = innerOpts.style = {strokeNoScale: true};
rect = rect || {x: -1, y: -1, width: 2, height: 2};
@@ -1198,7 +1260,7 @@ export function createIcon(
return iconStr.indexOf('image://') === 0
? (
(style as ImageStyleProps).image = iconStr.slice(8),
- zrUtil.defaults(style, rect),
+ defaults(style, rect),
new ZImage(innerOpts)
)
: (
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
