Skip to content

Commit

Permalink
feat(treemap.breadcrumb): add emphasis state (#17242)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@susiwen8
susiwen8 authored Jun 21, 2022
1 parent 26fbb75 commit bafb0f9
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 30 deletions.
27 changes: 18 additions & 9 deletions src/chart/treemap/Breadcrumb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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: {
Expand All @@ -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);
}
Expand Down Expand Up @@ -134,7 +140,9 @@ class Breadcrumb {
seriesModel: TreemapSeriesModel,
layoutParam: LayoutParam,
normalStyleModel: BreadcrumbItemStyleModel,
emphasisModel: BreadcrumbEmphasisItemStyleModel,
textStyleModel: BreadcrumbTextStyleModel,
emphasisTextStyleModel: BreadcrumbTextStyleModel,
onSelect: OnSelectCallback
) {
// Start rendering.
Expand All @@ -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];
Expand Down Expand Up @@ -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'
Expand All @@ -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);
Expand Down
11 changes: 10 additions & 1 deletion src/chart/treemap/TreemapSeries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ import {
DecalObject,
SeriesLabelOption,
DefaultEmphasisFocus,
AriaOptionMixin
AriaOptionMixin,
BlurScope
} from '../../util/types';
import GlobalModel from '../../model/Global';
import { LayoutRect } from '../../util/layout';
Expand Down Expand Up @@ -202,6 +203,9 @@ export interface TreemapSeriesOption
itemStyle?: BreadcrumbItemStyleOption

emphasis?: {
disabled?: boolean
focus?: DefaultEmphasisFocus
blurScope?: BlurScope
itemStyle?: BreadcrumbItemStyleOption
}
}
Expand Down Expand Up @@ -265,6 +269,11 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
textStyle: {
color: '#fff'
}
},
emphasis: {
itemStyle: {
color: 'rgba(0,0,0,0.9)' //'#5793f3',
}
}
},
label: {
Expand Down
2 changes: 1 addition & 1 deletion src/data/DataStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [];
Expand Down
8 changes: 4 additions & 4 deletions src/data/Graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
18 changes: 9 additions & 9 deletions src/data/Tree.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions src/model/Global.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions src/visual/VisualMapping.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
9 changes: 9 additions & 0 deletions test/treemap-simple.html
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit bafb0f9

Please sign in to comment.