From 8afab0a939822b9b9d0fdf24faa375cf3463d3c0 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sat, 18 Jun 2022 17:42:17 +0800 Subject: [PATCH 1/6] feat(treemap.breadcrumb): add `emphasis` state --- src/chart/treemap/Breadcrumb.ts | 26 ++++++++++++++++++++++---- src/chart/treemap/TreemapSeries.ts | 4 ++++ src/data/DataStore.ts | 2 +- src/data/Graph.ts | 8 ++++---- src/data/Tree.ts | 18 +++++++++--------- src/model/Global.ts | 6 +++--- src/visual/VisualMapping.ts | 6 +++--- test/treemap-simple.html | 10 ++++++++++ 8 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts index 6dd35c5df2..47ecb273a9 100644 --- a/src/chart/treemap/Breadcrumb.ts +++ b/src/chart/treemap/Breadcrumb.ts @@ -29,7 +29,7 @@ import { ZRElementEvent, BoxLayoutOptionMixin, ECElement } from '../../util/type import Element from 'zrender/src/Element'; import Model from '../../model/Model'; import { convertOptionIdName } from '../../util/model'; -import { Z2_EMPHASIS_LIFT } from '../../util/states'; +import { toggleHoverEmphasis, Z2_EMPHASIS_LIFT } from '../../util/states'; const TEXT_PADDING = 8; const ITEM_GAP = 8; @@ -55,6 +55,7 @@ interface LayoutParam { } type BreadcrumbItemStyleModel = Model; +type BreadcrumbEmphasisItemStyleModel = Model; type BreadcrumbTextStyleModel = Model; class Breadcrumb { @@ -81,8 +82,9 @@ class Breadcrumb { } const normalStyleModel = model.getModel('itemStyle'); - // let emphasisStyleModel = model.getModel('emphasis.itemStyle'); + const emphasisModel = model.getModel('emphasis'); const textStyleModel = normalStyleModel.getModel('textStyle'); + const emphasisTextStyleModel = emphasisModel.getModel(['itemStyle', 'textStyle']); const layoutParam: LayoutParam = { pos: { @@ -101,7 +103,10 @@ class Breadcrumb { }; this._prepare(targetNode, layoutParam, textStyleModel); - this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect); + this._renderContent( + seriesModel, layoutParam, normalStyleModel, + emphasisModel, textStyleModel, emphasisTextStyleModel, onSelect + ); layout.positionElement(thisGroup, layoutParam.pos, layoutParam.box); } @@ -134,7 +139,9 @@ class Breadcrumb { seriesModel: TreemapSeriesModel, layoutParam: LayoutParam, normalStyleModel: BreadcrumbItemStyleModel, + emphasisModel: BreadcrumbEmphasisItemStyleModel, textStyleModel: BreadcrumbTextStyleModel, + emphasisTextStyleModel: BreadcrumbTextStyleModel, onSelect: OnSelectCallback ) { // Start rendering. @@ -185,7 +192,18 @@ class Breadcrumb { onclick: curry(onSelect, itemNode) }); (el as ECElement).disableLabelAnimation = true; - + const textContent = el.getTextContent(); + const stateObj = textContent.ensureState('emphasis'); + stateObj.style = { + fill: emphasisTextStyleModel.getTextColor(), + font: emphasisTextStyleModel.getFont(), + text + }; + const emphasisState = el.ensureState('emphasis'); + emphasisState.style = emphasisModel.getModel('itemStyle').getItemStyle(); + toggleHoverEmphasis( + el, 'self', 'global', emphasisModel.get('disabled') + ); this.group.add(el); packEventData(el, seriesModel, itemNode); diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 15c0a5e9a2..a35218951e 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -202,6 +202,7 @@ export interface TreemapSeriesOption itemStyle?: BreadcrumbItemStyleOption emphasis?: { + disabled?: boolean itemStyle?: BreadcrumbItemStyleOption } } @@ -265,6 +266,9 @@ class TreemapSeriesModel extends SeriesModel { textStyle: { color: '#fff' } + }, + emphasis: { + disabled: true } }, label: { diff --git a/src/data/DataStore.ts b/src/data/DataStore.ts index b839d8b0f3..bb9dcf179c 100644 --- a/src/data/DataStore.ts +++ b/src/data/DataStore.ts @@ -448,7 +448,7 @@ class DataStore { } getValues(idx: number): ParsedValue[]; - getValues(dimensions: readonly DimensionIndex[], idx?: number): ParsedValue[] + getValues(dimensions: readonly DimensionIndex[], idx?: number): ParsedValue[]; getValues(dimensions: readonly DimensionIndex[] | number, idx?: number): ParsedValue[] { const values = []; let dimArr: DimensionIndex[] = []; diff --git a/src/data/Graph.ts b/src/data/Graph.ts index a250ad9632..f7939a5304 100644 --- a/src/data/Graph.ts +++ b/src/data/Graph.ts @@ -360,8 +360,8 @@ class GraphNode { } // TODO: TYPE Same type with Model#getModel - getModel(): Model - getModel(path: S): Model + getModel(): Model; + getModel(path: S): Model; getModel(path?: string): Model { if (this.dataIndex < 0) { return; @@ -410,8 +410,8 @@ class GraphEdge { this.dataIndex = dataIndex == null ? -1 : dataIndex; } - getModel(): Model - getModel(path: S): Model + getModel(): Model; + getModel(path: S): Model; // eslint-disable-next-line @typescript-eslint/no-unused-vars getModel(path?: string): Model { if (this.dataIndex < 0) { diff --git a/src/data/Tree.ts b/src/data/Tree.ts index ad7ae4241c..8467084945 100644 --- a/src/data/Tree.ts +++ b/src/data/Tree.ts @@ -98,9 +98,9 @@ export class TreeNode { * @param cb If in preorder and return false, * its subtree will not be visited. */ - eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(cb: TreeTraverseCallback, context?: Ctx): void + eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(cb: TreeTraverseCallback, context?: Ctx): void; eachNode( options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback, cb?: TreeTraverseCallback | Ctx, @@ -225,7 +225,7 @@ export class TreeNode { return this.hostTree.data.getItemLayout(this.dataIndex); } - getModel(): Model + getModel(): Model; // @depcrecated // getModel(path: S): Model // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -251,8 +251,8 @@ export class TreeNode { * }); */ // TODO: TYPE - setVisual(key: string, value: any): void - setVisual(obj: Dictionary): void + setVisual(key: string, value: any): void; + setVisual(obj: Dictionary): void; setVisual(key: string | Dictionary, value?: any) { this.dataIndex >= 0 && this.hostTree.data.setItemVisual(this.dataIndex, key as any, value); @@ -353,9 +353,9 @@ class Tree { * @param cb * @param context */ - eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(cb: TreeTraverseCallback, context?: Ctx): void + eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(cb: TreeTraverseCallback, context?: Ctx): void; eachNode( options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback, cb?: TreeTraverseCallback | Ctx, diff --git a/src/model/Global.ts b/src/model/Global.ts index d4777a4ee9..cadc98b20d 100644 --- a/src/model/Global.ts +++ b/src/model/Global.ts @@ -696,17 +696,17 @@ echarts.use([${seriesImportName}]);`); eachComponent( cb: EachComponentAllCallback, context?: T - ): void + ): void; eachComponent( mainType: string, cb: EachComponentInMainTypeCallback, context?: T - ): void + ): void; eachComponent( mainType: QueryConditionKindA, cb: EachComponentInMainTypeCallback, context?: T - ): void + ): void; eachComponent( mainType: string | QueryConditionKindA | EachComponentAllCallback, cb?: EachComponentInMainTypeCallback | T, diff --git a/src/visual/VisualMapping.ts b/src/visual/VisualMapping.ts index 8898bc7b06..f964e3fb0a 100644 --- a/src/visual/VisualMapping.ts +++ b/src/visual/VisualMapping.ts @@ -377,13 +377,13 @@ class VisualMapping { } } - static mapVisual(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T - static mapVisual(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[] + static mapVisual(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T; + static mapVisual(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[]; static mapVisual( visual: Dictionary, callback: (visual: T, key?: string | number) => Dictionary, context?: Ctx - ): Dictionary + ): Dictionary; static mapVisual( visual: T | T[] | Dictionary, callback: (visual: T, key?: string | number) => T | T[] | Dictionary, diff --git a/test/treemap-simple.html b/test/treemap-simple.html index c71b8122ca..ac271ae4e4 100644 --- a/test/treemap-simple.html +++ b/test/treemap-simple.html @@ -66,6 +66,16 @@ } }, breadcrumb: { + emphasis: { + disabled: false, + itemStyle: { + color: 'blue', + opacity: 0.6, + textStyle: { + color: 'green' + } + }, + } }, levels: [ { From 456ad69b0a72f53c49f84441426d3ee2e146cfd1 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sun, 19 Jun 2022 19:46:55 +0800 Subject: [PATCH 2/6] feat(treemap.breadcrumb): enbale `emphasis` by default --- src/chart/treemap/TreemapSeries.ts | 8 +++++++- test/treemap-simple.html | 1 - 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index a35218951e..c48970ab65 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -268,7 +268,13 @@ class TreemapSeriesModel extends SeriesModel { } }, emphasis: { - disabled: true + disabled: false, + itemStyle: { + color: 'rgba(0,0,0,0.9)', //'#5793f3', + textStyle: { + color: '#fff' + } + } } }, label: { diff --git a/test/treemap-simple.html b/test/treemap-simple.html index ac271ae4e4..37c7aa2ffc 100644 --- a/test/treemap-simple.html +++ b/test/treemap-simple.html @@ -67,7 +67,6 @@ }, breadcrumb: { emphasis: { - disabled: false, itemStyle: { color: 'blue', opacity: 0.6, From faa74da6f9696ba6173e94f36cf8015a99b04e62 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 20 Jun 2022 22:53:09 +0800 Subject: [PATCH 3/6] feat(treemap.breadcrumb): more text style --- src/chart/treemap/Breadcrumb.ts | 20 +++++--------------- src/chart/treemap/TreemapSeries.ts | 6 ++++-- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts index 47ecb273a9..0c05c42b95 100644 --- a/src/chart/treemap/Breadcrumb.ts +++ b/src/chart/treemap/Breadcrumb.ts @@ -30,6 +30,7 @@ import Element from 'zrender/src/Element'; import Model from '../../model/Model'; import { convertOptionIdName } from '../../util/model'; import { toggleHoverEmphasis, Z2_EMPHASIS_LIFT } from '../../util/states'; +import { createTextStyle } from '../../label/labelStyle'; const TEXT_PADDING = 8; const ITEM_GAP = 8; @@ -179,11 +180,7 @@ class Breadcrumb { } ), textContent: new graphic.Text({ - style: { - text, - fill: textStyleModel.getTextColor(), - font: textStyleModel.getFont() - } + style: {text, ...createTextStyle(textStyleModel)} }), textConfig: { position: 'inside' @@ -192,17 +189,10 @@ class Breadcrumb { onclick: curry(onSelect, itemNode) }); (el as ECElement).disableLabelAnimation = true; - const textContent = el.getTextContent(); - const stateObj = textContent.ensureState('emphasis'); - stateObj.style = { - fill: emphasisTextStyleModel.getTextColor(), - font: emphasisTextStyleModel.getFont(), - text - }; - const emphasisState = el.ensureState('emphasis'); - emphasisState.style = emphasisModel.getModel('itemStyle').getItemStyle(); + el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)}; + el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle(); toggleHoverEmphasis( - el, 'self', 'global', emphasisModel.get('disabled') + el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') ); this.group.add(el); diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index c48970ab65..fa0220819b 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -36,7 +36,8 @@ import { DecalObject, SeriesLabelOption, DefaultEmphasisFocus, - AriaOptionMixin + AriaOptionMixin, + BlurScope } from '../../util/types'; import GlobalModel from '../../model/Global'; import { LayoutRect } from '../../util/layout'; @@ -203,6 +204,8 @@ export interface TreemapSeriesOption emphasis?: { disabled?: boolean + focus?: DefaultEmphasisFocus + blurScope?: BlurScope itemStyle?: BreadcrumbItemStyleOption } } @@ -268,7 +271,6 @@ class TreemapSeriesModel extends SeriesModel { } }, emphasis: { - disabled: false, itemStyle: { color: 'rgba(0,0,0,0.9)', //'#5793f3', textStyle: { From b61f757781d3cb700299463431ef70c37b82de1c Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 20 Jun 2022 22:55:57 +0800 Subject: [PATCH 4/6] chore: remove unnecessary code --- src/chart/treemap/TreemapSeries.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index fa0220819b..2e5f22835f 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -272,10 +272,7 @@ class TreemapSeriesModel extends SeriesModel { }, emphasis: { itemStyle: { - color: 'rgba(0,0,0,0.9)', //'#5793f3', - textStyle: { - color: '#fff' - } + color: 'rgba(0,0,0,0.9)' //'#5793f3', } } }, From f2a8ed33e911a0a1686e2bcc9258fec1a2c502b8 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 20 Jun 2022 23:10:26 +0800 Subject: [PATCH 5/6] chore: simplify code --- src/chart/treemap/Breadcrumb.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts index 0c05c42b95..d1b90bbb56 100644 --- a/src/chart/treemap/Breadcrumb.ts +++ b/src/chart/treemap/Breadcrumb.ts @@ -180,7 +180,7 @@ class Breadcrumb { } ), textContent: new graphic.Text({ - style: {text, ...createTextStyle(textStyleModel)} + style: createTextStyle(textStyleModel, { text }) }), textConfig: { position: 'inside' @@ -189,7 +189,7 @@ class Breadcrumb { onclick: curry(onSelect, itemNode) }); (el as ECElement).disableLabelAnimation = true; - el.getTextContent().ensureState('emphasis').style = {text, ...createTextStyle(emphasisTextStyleModel)}; + el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text }); el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle(); toggleHoverEmphasis( el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') From f158949509fba9fd8735a42f3f947319edfea176 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 20 Jun 2022 23:31:45 +0800 Subject: [PATCH 6/6] chore: cache emphasis item style --- src/chart/treemap/Breadcrumb.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts index d1b90bbb56..0875c4a2b3 100644 --- a/src/chart/treemap/Breadcrumb.ts +++ b/src/chart/treemap/Breadcrumb.ts @@ -152,6 +152,7 @@ class Breadcrumb { const availableSize = layout.getAvailableSize(layoutParam.pos, layoutParam.box); let totalWidth = layoutParam.totalWidth; const renderList = layoutParam.renderList; + const emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle(); for (let i = renderList.length - 1; i >= 0; i--) { const item = renderList[i]; @@ -190,7 +191,7 @@ class Breadcrumb { }); (el as ECElement).disableLabelAnimation = true; el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text }); - el.ensureState('emphasis').style = emphasisModel.getModel('itemStyle').getItemStyle(); + el.ensureState('emphasis').style = emphasisItemStyle; toggleHoverEmphasis( el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') );