From a245ad82e6d15263ffa7c18309c53f234d1fbbbe Mon Sep 17 00:00:00 2001 From: pissang Date: Thu, 26 Mar 2020 23:18:18 +0800 Subject: [PATCH] refact: put label as textContent in pie and funnel. fix inside text color issue. --- src/chart/funnel/FunnelView.ts | 19 ++++++--- src/chart/pie/PieView.ts | 60 ++++++++++++++--------------- src/chart/sunburst/SunburstPiece.ts | 21 +++++++--- src/component/helper/MapDraw.ts | 3 +- src/util/graphic.ts | 18 ++++----- 5 files changed, 67 insertions(+), 54 deletions(-) diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts index f643e8131..0c460e96c 100644 --- a/src/chart/funnel/FunnelView.ts +++ b/src/chart/funnel/FunnelView.ts @@ -46,7 +46,7 @@ class FunnelPiece extends graphic.Group { let text = new graphic.Text(); this.add(polygon); this.add(labelLine); - this.add(text); + polygon.setTextContent(text); this.updateData(data, idx, true); } @@ -123,9 +123,9 @@ class FunnelPiece extends graphic.Group { } _updateLabel(data: List, idx: number) { - + let polygon = this.childAt(0); let labelLine = this.childAt(1) as graphic.Polyline; - let labelText = this.childAt(2) as graphic.Text; + let labelText = polygon.getTextContent(); let seriesModel = data.hostModel; let itemModel = data.getItemModel(idx); @@ -144,9 +144,7 @@ class FunnelPiece extends graphic.Group { { labelFetcher: data.hostModel as FunnelSeriesModel, labelDataIndex: idx, - defaultText: data.getName(idx), - autoColor: visualColor, - useInsideStyle: !!labelLayout.inside + defaultText: data.getName(idx) }, { align: labelLayout.textAlign, @@ -154,6 +152,14 @@ class FunnelPiece extends graphic.Group { } ); + polygon.setTextConfig({ + local: true, + inside: !!labelLayout.inside, + insideStroke: visualColor, + insideFill: 'auto', + outsideFill: visualColor + }); + graphic.updateProps(labelLine, { shape: { points: labelLayout.linePoints || labelLayout.linePoints @@ -168,6 +174,7 @@ class FunnelPiece extends graphic.Group { y: labelLayout.y } }, seriesModel, idx); + labelText.attr({ rotation: labelLayout.rotation, origin: [labelLayout.x, labelLayout.y], diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index 0d7f158d0..e9217e164 100644 --- a/src/chart/pie/PieView.ts +++ b/src/chart/pie/PieView.ts @@ -29,7 +29,6 @@ import List from '../../data/List'; import PieSeriesModel, {PieDataItemOption} from './PieSeries'; import { Dictionary } from 'zrender/src/core/types'; import Element from 'zrender/src/Element'; -import Displayable from 'zrender/src/graphic/Displayable'; function updateDataSelected( this: PiePiece, @@ -86,11 +85,6 @@ function toggleItemSelected( : el.attr('position', position); } -interface PieceElementExtension extends Displayable { - hoverIgnore?: boolean - normalIgnore?: boolean -}; - /** * Piece of pie including Sector, Label, LabelLine */ @@ -107,15 +101,14 @@ class PiePiece extends graphic.Group { let text = new graphic.Text(); this.add(sector); this.add(polyline); - this.add(text); + + sector.setTextContent(text); this.updateData(data, idx, true); } updateData(data: List, idx: number, firstCreate?: boolean): void { let sector = this.childAt(0) as graphic.Sector; - let labelLine = this.childAt(1) as PieceElementExtension; - let labelText = this.childAt(2) as PieceElementExtension; let seriesModel = data.hostModel as PieSeriesModel; let itemModel = data.getItemModel(idx); @@ -197,8 +190,6 @@ class PiePiece extends graphic.Group { (this as ECElement).highDownOnUpdate = (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled()) ? function (fromState: DisplayState, toState: DisplayState): void { if (toState === 'emphasis') { - labelLine.ignore = labelLine.hoverIgnore; - labelText.ignore = labelText.hoverIgnore; // Sector may has animation of updating data. Force to move to the last frame // Or it may stopped on the wrong shape @@ -210,9 +201,6 @@ class PiePiece extends graphic.Group { }, { duration: 300, easing: 'elasticOut' }); } else { - labelLine.ignore = labelLine.normalIgnore; - labelText.ignore = labelText.normalIgnore; - sector.stopAnimation(true); sector.animateTo({ shape: { @@ -227,19 +215,22 @@ class PiePiece extends graphic.Group { } private _updateLabel(data: List, idx: number, withAnimation: boolean): void { - - let labelLine = this.childAt(1) as (PieceElementExtension & graphic.Polyline); - let labelText = this.childAt(2) as (PieceElementExtension & graphic.Text); - - let seriesModel = data.hostModel; - let itemModel = data.getItemModel(idx); - let layout = data.getItemLayout(idx); - let labelLayout = layout.label; + const sector = this.childAt(0); + const labelLine = this.childAt(1) as graphic.Polyline; + const labelText = sector.getTextContent() as graphic.Text; + + const seriesModel = data.hostModel; + const itemModel = data.getItemModel(idx); + const layout = data.getItemLayout(idx); + const labelLayout = layout.label; // let visualColor = data.getItemVisual(idx, 'color'); + const labelTextEmphasisState = labelText.ensureState('emphasis'); + const labelLineEmphasisState = labelLine.ensureState('emphasis'); + if (!labelLayout || isNaN(labelLayout.x) || isNaN(labelLayout.y)) { - labelText.ignore = labelText.normalIgnore = labelText.hoverIgnore = - labelLine.ignore = labelLine.normalIgnore = labelLine.hoverIgnore = true; + labelText.ignore = labelTextEmphasisState.ignore = true; + labelLine.ignore = labelLineEmphasisState.ignore = true; return; } @@ -263,9 +254,7 @@ class PiePiece extends graphic.Group { { labelFetcher: data.hostModel as PieSeriesModel, labelDataIndex: idx, - defaultText: labelLayout.text, - autoColor: visualColor, - useInsideStyle: !!labelLayout.inside + defaultText: labelLayout.text }, { align: labelLayout.textAlign, @@ -274,6 +263,15 @@ class PiePiece extends graphic.Group { } ); + // Set textConfig on sector. + sector.setTextConfig({ + local: true, + inside: !!labelLayout.inside, + insideStroke: visualColor, + insideFill: 'auto', + outsideFill: visualColor + }); + let targetTextStyle = { x: labelLayout.x, y: labelLayout.y @@ -304,11 +302,11 @@ class PiePiece extends graphic.Group { z2: 10 }); - labelText.ignore = labelText.normalIgnore = !labelModel.get('show'); - labelText.hoverIgnore = !labelHoverModel.get('show'); + labelText.ignore = !labelModel.get('show'); + labelTextEmphasisState.ignore = !labelHoverModel.get('show'); - labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show'); - labelLine.hoverIgnore = !labelLineHoverModel.get('show'); + labelLine.ignore = !labelLineModel.get('show'); + labelLineEmphasisState.ignore = !labelLineHoverModel.get('show'); // Default use item visual color labelLine.setStyle({ diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index a9d3d4e17..fd4ca4132 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/src/chart/sunburst/SunburstPiece.ts @@ -52,16 +52,19 @@ class SunburstPiece extends graphic.Group { super(); let sector = new graphic.Sector({ - z2: DEFAULT_SECTOR_Z + z2: DEFAULT_SECTOR_Z, + textConfig: { + inside: true + } }); + this.add(sector); graphic.getECData(sector).seriesIndex = seriesModel.seriesIndex; let text = new graphic.Text({ z2: DEFAULT_TEXT_Z, silent: node.getModel().get(['label', 'silent']) }); - this.add(sector); - this.add(text); + sector.setTextContent(text); this.updateData(true, node, 'normal', seriesModel, ecModel); @@ -238,16 +241,22 @@ class SunburstPiece extends graphic.Group { text = ''; } - let label = this.childAt(1) as graphic.Text; + let sector = this.childAt(0); + let label = sector.getTextContent(); graphic.setLabelStyle( label, normalModel, labelHoverModel, { defaultText: labelModel.getShallow('show') ? text : null, - autoColor: visualColor, - useInsideStyle: true + autoColor: visualColor } ); + sector.setTextConfig({ + inside: true, + insideStroke: visualColor, + insideFill: 'auto', + outsideFill: visualColor + }); let midAngle = (layout.startAngle + layout.endAngle) / 2; let dx = Math.cos(midAngle); diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts index f477190d2..65e70746e 100644 --- a/src/component/helper/MapDraw.ts +++ b/src/component/helper/MapDraw.ts @@ -274,8 +274,7 @@ class MapDraw { { labelFetcher: labelFetcher, labelDataIndex: query, - defaultText: region.name, - useInsideStyle: false + defaultText: region.name }, { align: 'center', diff --git a/src/util/graphic.ts b/src/util/graphic.ts index affaede4c..6b7bbf357 100644 --- a/src/util/graphic.ts +++ b/src/util/graphic.ts @@ -114,14 +114,6 @@ type TextCommonParams = { * for textFill, textStroke, textBackgroundColor, and textBorderColor. If autoColor specified, it is used as default textFill. */ autoColor?: ColorString - /** - * `true`: Use inside style (textFill, textStroke, textStrokeWidth) - * if `textFill` is not specified. - * `false`: Do not use inside style. - * `null/undefined`: use inside style if `isRectText` is true and - * `textFill` is not specified and textPosition contains `'inside'`. - */ - useInsideStyle?: boolean forceRich?: boolean @@ -592,7 +584,7 @@ interface SetLabelStyleOpt extends TextCommonParams { * 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. + * NOTICE: Because the style on RichText will be replaced with new(only x, y are keeped). * So please use the style on RichText after use this method. */ export function setLabelStyle( @@ -692,6 +684,14 @@ export function setLabelStyle( normalStyle.text = normalStyleText; emphasisState.style.text = emphasisStyleText; + // Keep x and y + if (richText.style.x != null) { + normalStyle.x = richText.style.x; + } + if (richText.style.y != null) { + normalStyle.y = richText.style.y; + } + // Always create new style. richText.useStyle(normalStyle); -- GitLab