From 3d8e2557450f090e0ceb5a185f9756a12af95a3b Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Mon, 14 Mar 2022 17:03:23 +0800 Subject: [PATCH 1/4] fix(visualmap): add textShadowColor, make text shadow work on visualMap. close #14440 --- src/component/visualMap/ContinuousView.ts | 4 +- src/component/visualMap/PiecewiseView.ts | 6 +- src/model/mixin/textStyle.ts | 11 ++ test/visualMap-continuous.html | 171 ++++++++-------------- test/visualMap-pieces.html | 158 +++++++------------- 5 files changed, 132 insertions(+), 218 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 4b9e959487..49b94702d7 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -182,6 +182,7 @@ class ContinuousView extends VisualMapView { ); const orient = this._orient; const textStyleModel = this.visualMapModel.textStyleModel; + const textShadow = textStyleModel.getTextShadow(); this.group.add(new graphic.Text({ style: { @@ -191,7 +192,8 @@ class ContinuousView extends VisualMapView { align: orient === 'horizontal' ? align as TextAlign : 'center', text: text, font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor() + fill: textStyleModel.getTextColor(), + ...textShadow } })); } diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts index c62b27e2c0..d4f1c6bac1 100644 --- a/src/component/visualMap/PiecewiseView.ts +++ b/src/component/visualMap/PiecewiseView.ts @@ -101,8 +101,6 @@ class PiecewiseVisualMapView extends VisualMapView { this.renderBackground(thisGroup); this.positionGroup(thisGroup); - - } private _enableHoverLink(itemGroup: graphic.Group, pieceIndex: number) { @@ -155,6 +153,7 @@ class PiecewiseVisualMapView extends VisualMapView { const itemGroup = new graphic.Group(); const textStyleModel = this.visualMapModel.textStyleModel; + const textShadow = textStyleModel.getTextShadow(); itemGroup.add(new graphic.Text({ style: { @@ -164,7 +163,8 @@ class PiecewiseVisualMapView extends VisualMapView { align: showLabel ? (itemAlign as TextAlign) : 'center', text: text, font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor() + fill: textStyleModel.getTextColor(), + ...textShadow } })); diff --git a/src/model/mixin/textStyle.ts b/src/model/mixin/textStyle.ts index 6c5cce9a3f..054405f4ea 100644 --- a/src/model/mixin/textStyle.ts +++ b/src/model/mixin/textStyle.ts @@ -35,6 +35,8 @@ const textStyleParams = [ 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'padding', 'lineHeight', 'rich', 'width', 'height', 'overflow' ] as const; +type LabelTextShadowOption = Pick; // TODO Performance improvement? const tmpText = new ZRText(); @@ -77,6 +79,15 @@ class TextStyleMixin { tmpText.update(); return tmpText.getBoundingRect(); } + + getTextShadow(this: Model) { + return { + textShadowBlur: this.getShallow('textShadowBlur'), + textShadowColor: this.getShallow('textShadowColor'), + textShadowOffsetX: this.getShallow('textShadowOffsetX'), + textShadowOffsetY: this.getShallow('textShadowOffsetY') + }; + } }; export default TextStyleMixin; diff --git a/test/visualMap-continuous.html b/test/visualMap-continuous.html index db99d73b1e..848b510e8a 100644 --- a/test/visualMap-continuous.html +++ b/test/visualMap-continuous.html @@ -49,39 +49,30 @@
Stacked Bar (and inversed)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/test/visualMap-pieces.html b/test/visualMap-pieces.html index 2f6bea5a15..2ae4cdf5d4 100644 --- a/test/visualMap-pieces.html +++ b/test/visualMap-pieces.html @@ -18,7 +18,6 @@ under the License. --> - @@ -46,25 +45,15 @@ } - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From 21eee5774fd43d50b08f1d9a1ebdeeefbc452cf1 Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Mon, 14 Mar 2022 18:06:33 +0800 Subject: [PATCH 2/4] fix(visualmap): use createTextStyle for more properties. close #14440 --- src/component/visualMap/ContinuousView.ts | 7 ++++--- src/component/visualMap/PiecewiseView.ts | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 49b94702d7..5d50974952 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -38,6 +38,7 @@ import { setAsHighDownDispatcher } from '../../util/states'; import { createSymbol } from '../../util/symbol'; import ZRImage from 'zrender/src/graphic/Image'; import { getECData } from '../../util/innerStore'; +import { createTextStyle } from '../../label/labelStyle'; const linearMap = numberUtil.linearMap; const each = zrUtil.each; @@ -185,16 +186,16 @@ class ContinuousView extends VisualMapView { const textShadow = textStyleModel.getTextShadow(); this.group.add(new graphic.Text({ - style: { + style: createTextStyle(textStyleModel, { x: position[0], y: position[1], verticalAlign: orient === 'horizontal' ? 'middle' : align as TextVerticalAlign, align: orient === 'horizontal' ? align as TextAlign : 'center', - text: text, + text, font: textStyleModel.getFont(), fill: textStyleModel.getTextColor(), ...textShadow - } + }) })); } diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts index d4f1c6bac1..cab8b27ca7 100644 --- a/src/component/visualMap/PiecewiseView.ts +++ b/src/component/visualMap/PiecewiseView.ts @@ -26,6 +26,7 @@ import * as helper from './helper'; import PiecewiseModel from './PiecewiseModel'; import { TextAlign } from 'zrender/src/core/types'; import { VisualMappingOption } from '../../visual/VisualMapping'; +import { createTextStyle } from '../../label/labelStyle'; class PiecewiseVisualMapView extends VisualMapView { @@ -156,7 +157,7 @@ class PiecewiseVisualMapView extends VisualMapView { const textShadow = textStyleModel.getTextShadow(); itemGroup.add(new graphic.Text({ - style: { + style: createTextStyle(textStyleModel, { x: showLabel ? (itemAlign === 'right' ? itemSize[0] : 0) : itemSize[0] / 2, y: itemSize[1] / 2, verticalAlign: 'middle', @@ -165,7 +166,7 @@ class PiecewiseVisualMapView extends VisualMapView { font: textStyleModel.getFont(), fill: textStyleModel.getTextColor(), ...textShadow - } + }) })); group.add(itemGroup); From 764b5c8698519201ac565786c6f8c328e9c4c2af Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Mon, 14 Mar 2022 19:11:20 +0800 Subject: [PATCH 3/4] fix(visualmap): remove getTextShadow, createTextStyle already did that. close #14440 --- src/component/visualMap/ContinuousView.ts | 6 +----- src/component/visualMap/PiecewiseView.ts | 6 +----- src/model/mixin/textStyle.ts | 11 ----------- 3 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 5d50974952..6e88a6b7b5 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -183,7 +183,6 @@ class ContinuousView extends VisualMapView { ); const orient = this._orient; const textStyleModel = this.visualMapModel.textStyleModel; - const textShadow = textStyleModel.getTextShadow(); this.group.add(new graphic.Text({ style: createTextStyle(textStyleModel, { @@ -191,10 +190,7 @@ class ContinuousView extends VisualMapView { y: position[1], verticalAlign: orient === 'horizontal' ? 'middle' : align as TextVerticalAlign, align: orient === 'horizontal' ? align as TextAlign : 'center', - text, - font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor(), - ...textShadow + text }) })); } diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts index cab8b27ca7..f3f260593e 100644 --- a/src/component/visualMap/PiecewiseView.ts +++ b/src/component/visualMap/PiecewiseView.ts @@ -154,7 +154,6 @@ class PiecewiseVisualMapView extends VisualMapView { const itemGroup = new graphic.Group(); const textStyleModel = this.visualMapModel.textStyleModel; - const textShadow = textStyleModel.getTextShadow(); itemGroup.add(new graphic.Text({ style: createTextStyle(textStyleModel, { @@ -162,10 +161,7 @@ class PiecewiseVisualMapView extends VisualMapView { y: itemSize[1] / 2, verticalAlign: 'middle', align: showLabel ? (itemAlign as TextAlign) : 'center', - text: text, - font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor(), - ...textShadow + text }) })); diff --git a/src/model/mixin/textStyle.ts b/src/model/mixin/textStyle.ts index 054405f4ea..6c5cce9a3f 100644 --- a/src/model/mixin/textStyle.ts +++ b/src/model/mixin/textStyle.ts @@ -35,8 +35,6 @@ const textStyleParams = [ 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'padding', 'lineHeight', 'rich', 'width', 'height', 'overflow' ] as const; -type LabelTextShadowOption = Pick; // TODO Performance improvement? const tmpText = new ZRText(); @@ -79,15 +77,6 @@ class TextStyleMixin { tmpText.update(); return tmpText.getBoundingRect(); } - - getTextShadow(this: Model) { - return { - textShadowBlur: this.getShallow('textShadowBlur'), - textShadowColor: this.getShallow('textShadowColor'), - textShadowOffsetX: this.getShallow('textShadowOffsetX'), - textShadowOffsetY: this.getShallow('textShadowOffsetY') - }; - } }; export default TextStyleMixin; From a255fa15dd49e53d99859d756063b08bde9d4883 Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Tue, 15 Mar 2022 10:46:29 +0800 Subject: [PATCH 4/4] fix(visualmap): use createTextStyle on handleLabel and indicatorLabel. close #14440 --- src/component/visualMap/ContinuousView.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 6e88a6b7b5..ac31cd0943 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -299,11 +299,11 @@ class ContinuousView extends VisualMapView { eventTool.stop(e.event); }, ondragend: onDragEnd, - style: { - x: 0, y: 0, text: '', - font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor() - } + style: createTextStyle(textStyleModel, { + x: 0, + y: 0, + text: '' + }) }); handleLabel.ensureState('blur').style = { opacity: 0.1 @@ -359,11 +359,11 @@ class ContinuousView extends VisualMapView { const indicatorLabel = new graphic.Text({ silent: true, invisible: true, - style: { - x: 0, y: 0, text: '', - font: textStyleModel.getFont(), - fill: textStyleModel.getTextColor() - } + style: createTextStyle(textStyleModel, { + x: 0, + y: 0, + text: '' + }) }); this.group.add(indicatorLabel);