You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2022/06/21 07:15:01 UTC
[echarts] branch master updated: feat(treemap.breadcrumb): add `emphasis` state (#17242)
This is an automated email from the ASF dual-hosted git repository.
susiwen8 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/master by this push:
new bafb0f9a8 feat(treemap.breadcrumb): add `emphasis` state (#17242)
bafb0f9a8 is described below
commit bafb0f9a8a0ef5d4b7916c1cf62fbd4080a5da52
Author: susiwen8 <su...@gmail.com>
AuthorDate: Tue Jun 21 15:14:29 2022 +0800
feat(treemap.breadcrumb): add `emphasis` state (#17242)
* feat(treemap.breadcrumb): add `emphasis` state
* feat(treemap.breadcrumb): enbale `emphasis` by default
* feat(treemap.breadcrumb): more text style
* chore: remove unnecessary code
* chore: simplify code
* chore: cache emphasis item style
---
src/chart/treemap/Breadcrumb.ts | 27 ++++++++++++++++++---------
src/chart/treemap/TreemapSeries.ts | 11 ++++++++++-
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 | 9 +++++++++
8 files changed, 57 insertions(+), 30 deletions(-)
diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts
index 6dd35c5df..0875c4a2b 100644
--- a/src/chart/treemap/Breadcrumb.ts
+++ b/src/chart/treemap/Breadcrumb.ts
@@ -29,7 +29,8 @@ 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';
+import { createTextStyle } from '../../label/labelStyle';
const TEXT_PADDING = 8;
const ITEM_GAP = 8;
@@ -55,6 +56,7 @@ interface LayoutParam {
}
type BreadcrumbItemStyleModel = Model<TreemapSeriesOption['breadcrumb']['itemStyle']>;
+type BreadcrumbEmphasisItemStyleModel = Model<TreemapSeriesOption['breadcrumb']['emphasis']>;
type BreadcrumbTextStyleModel = Model<TreemapSeriesOption['breadcrumb']['itemStyle']['textStyle']>;
class Breadcrumb {
@@ -81,8 +83,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 +104,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 +140,9 @@ class Breadcrumb {
seriesModel: TreemapSeriesModel,
layoutParam: LayoutParam,
normalStyleModel: BreadcrumbItemStyleModel,
+ emphasisModel: BreadcrumbEmphasisItemStyleModel,
textStyleModel: BreadcrumbTextStyleModel,
+ emphasisTextStyleModel: BreadcrumbTextStyleModel,
onSelect: OnSelectCallback
) {
// Start rendering.
@@ -144,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];
@@ -172,11 +181,7 @@ class Breadcrumb {
}
),
textContent: new graphic.Text({
- style: {
- text,
- fill: textStyleModel.getTextColor(),
- font: textStyleModel.getFont()
- }
+ style: createTextStyle(textStyleModel, { text })
}),
textConfig: {
position: 'inside'
@@ -185,7 +190,11 @@ class Breadcrumb {
onclick: curry(onSelect, itemNode)
});
(el as ECElement).disableLabelAnimation = true;
-
+ el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text });
+ el.ensureState('emphasis').style = emphasisItemStyle;
+ toggleHoverEmphasis(
+ el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), 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 15c0a5e9a..2e5f22835 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';
@@ -202,6 +203,9 @@ export interface TreemapSeriesOption
itemStyle?: BreadcrumbItemStyleOption
emphasis?: {
+ disabled?: boolean
+ focus?: DefaultEmphasisFocus
+ blurScope?: BlurScope
itemStyle?: BreadcrumbItemStyleOption
}
}
@@ -265,6 +269,11 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
textStyle: {
color: '#fff'
}
+ },
+ emphasis: {
+ itemStyle: {
+ color: 'rgba(0,0,0,0.9)' //'#5793f3',
+ }
}
},
label: {
diff --git a/src/data/DataStore.ts b/src/data/DataStore.ts
index b839d8b0f..bb9dcf179 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 a250ad963..f7939a530 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<T = unknown>(): Model<T>
- getModel<T = unknown, S extends keyof T= keyof T>(path: S): Model<T[S]>
+ getModel<T = unknown>(): Model<T>;
+ getModel<T = unknown, S extends keyof T= keyof T>(path: S): Model<T[S]>;
getModel<T = unknown>(path?: string): Model {
if (this.dataIndex < 0) {
return;
@@ -410,8 +410,8 @@ class GraphEdge {
this.dataIndex = dataIndex == null ? -1 : dataIndex;
}
- getModel<T = unknown>(): Model<T>
- getModel<T = unknown, S extends keyof T= keyof T>(path: S): Model<T[S]>
+ getModel<T = unknown>(): Model<T>;
+ getModel<T = unknown, S extends keyof T= keyof T>(path: S): Model<T[S]>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
getModel<T = unknown>(path?: string): Model {
if (this.dataIndex < 0) {
diff --git a/src/data/Tree.ts b/src/data/Tree.ts
index ad7ae4241..846708494 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<Ctx>(options: TreeTraverseOrder, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
- eachNode<Ctx>(options: TreeTraverseOption, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
- eachNode<Ctx>(cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
+ eachNode<Ctx>(options: TreeTraverseOrder, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
+ eachNode<Ctx>(options: TreeTraverseOption, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
+ eachNode<Ctx>(cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
eachNode<Ctx>(
options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback<Ctx>,
cb?: TreeTraverseCallback<Ctx> | Ctx,
@@ -225,7 +225,7 @@ export class TreeNode {
return this.hostTree.data.getItemLayout(this.dataIndex);
}
- getModel<T = unknown>(): Model<T>
+ getModel<T = unknown>(): Model<T>;
// @depcrecated
// getModel<T = unknown, S extends keyof T = keyof T>(path: S): Model<T[S]>
// 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<any>): void
+ setVisual(key: string, value: any): void;
+ setVisual(obj: Dictionary<any>): void;
setVisual(key: string | Dictionary<any>, value?: any) {
this.dataIndex >= 0
&& this.hostTree.data.setItemVisual(this.dataIndex, key as any, value);
@@ -353,9 +353,9 @@ class Tree<HostModel extends Model = Model, LevelOption = any> {
* @param cb
* @param context
*/
- eachNode<Ctx>(options: TreeTraverseOrder, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
- eachNode<Ctx>(options: TreeTraverseOption, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
- eachNode<Ctx>(cb: TreeTraverseCallback<Ctx>, context?: Ctx): void
+ eachNode<Ctx>(options: TreeTraverseOrder, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
+ eachNode<Ctx>(options: TreeTraverseOption, cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
+ eachNode<Ctx>(cb: TreeTraverseCallback<Ctx>, context?: Ctx): void;
eachNode<Ctx>(
options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback<Ctx>,
cb?: TreeTraverseCallback<Ctx> | Ctx,
diff --git a/src/model/Global.ts b/src/model/Global.ts
index d4777a4ee..cadc98b20 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -696,17 +696,17 @@ echarts.use([${seriesImportName}]);`);
eachComponent<T>(
cb: EachComponentAllCallback,
context?: T
- ): void
+ ): void;
eachComponent<T>(
mainType: string,
cb: EachComponentInMainTypeCallback,
context?: T
- ): void
+ ): void;
eachComponent<T>(
mainType: QueryConditionKindA,
cb: EachComponentInMainTypeCallback,
context?: T
- ): void
+ ): void;
eachComponent<T>(
mainType: string | QueryConditionKindA | EachComponentAllCallback,
cb?: EachComponentInMainTypeCallback | T,
diff --git a/src/visual/VisualMapping.ts b/src/visual/VisualMapping.ts
index 8898bc7b0..f964e3fb0 100644
--- a/src/visual/VisualMapping.ts
+++ b/src/visual/VisualMapping.ts
@@ -377,13 +377,13 @@ class VisualMapping {
}
}
- static mapVisual<Ctx, T>(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T
- static mapVisual<Ctx, T>(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[]
+ static mapVisual<Ctx, T>(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T;
+ static mapVisual<Ctx, T>(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[];
static mapVisual<Ctx, T>(
visual: Dictionary<T>,
callback: (visual: T, key?: string | number) => Dictionary<T>,
context?: Ctx
- ): Dictionary<T>
+ ): Dictionary<T>;
static mapVisual<Ctx, T>(
visual: T | T[] | Dictionary<T>,
callback: (visual: T, key?: string | number) => T | T[] | Dictionary<T>,
diff --git a/test/treemap-simple.html b/test/treemap-simple.html
index c71b8122c..37c7aa2ff 100644
--- a/test/treemap-simple.html
+++ b/test/treemap-simple.html
@@ -66,6 +66,15 @@ under the License.
}
},
breadcrumb: {
+ emphasis: {
+ itemStyle: {
+ color: 'blue',
+ opacity: 0.6,
+ textStyle: {
+ color: 'green'
+ }
+ },
+ }
},
levels: [
{
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org