UNPKG

4.05 kBTypeScriptView Raw
1import Base from '../../base';
2import { BBox, IGroup, IShape } from '../../dependents';
3import { AnimateOption, Datum, ShapeFactory, ShapeInfo } from '../../interface';
4import Geometry from '../base';
5/** Element 构造函数传入参数类型 */
6interface ElementCfg {
7 /** 用于创建各种 shape 的工厂对象 */
8 shapeFactory: ShapeFactory;
9 /** shape 容器 */
10 container: IGroup;
11 /** element 的索引 */
12 elementIndex?: number;
13 /** 虚拟 group,用户可以不传入 */
14 offscreenGroup?: IGroup;
15 /** 是否可见 */
16 visible?: boolean;
17}
18/**
19 * Element 图形元素。
20 * 定义:在 G2 中,我们会将数据通过图形语法映射成不同的图形,比如点图,数据集中的每条数据会对应一个点,柱状图每条数据对应一个柱子,线图则是一组数据对应一条折线,Element 即一条/一组数据对应的图形元素,它代表一条数据或者一个数据集,在图形层面,它可以是单个 Shape 也可以是多个 Shape,我们称之为图形元素。
21 */
22export default class Element extends Base {
23 /** 用于创建各种 shape 的工厂对象 */
24 shapeFactory: ShapeFactory;
25 /** shape 容器 */
26 container: IGroup;
27 /** element 索引 */
28 elementIndex: number;
29 /** 最后创建的图形对象 */
30 shape: IShape | IGroup;
31 /** shape 的动画配置 */
32 animate: AnimateOption | boolean;
33 /** element 对应的 Geometry 实例 */
34 geometry: Geometry;
35 /** 保存 shape 对应的 label */
36 labelShape: IGroup[];
37 /** 绘制的 shape 类型 */
38 private shapeType;
39 /** shape 绘制需要的数据 */
40 private model;
41 /** 原始数据 */
42 private data;
43 private states;
44 private statesStyle;
45 private offscreenGroup;
46 constructor(cfg: ElementCfg);
47 /**
48 * 绘制图形。
49 * @param model 绘制数据。
50 * @param isUpdate 可选,是否是更新发生后的绘制。
51 */
52 draw(model: ShapeInfo, isUpdate?: boolean): void;
53 /**
54 * 更新图形。
55 * @param model 更新的绘制数据。
56 */
57 update(model: ShapeInfo): void;
58 /**
59 * 销毁 element 实例。
60 */
61 destroy(): void;
62 /**
63 * 显示或者隐藏 element。
64 * @param visible 是否可见。
65 */
66 changeVisible(visible: boolean): void;
67 /**
68 * 设置 Element 的状态。
69 *
70 * 目前 Element 开放三种状态:
71 * 1. active
72 * 2. selected
73 * 3. inactive
74 *
75 * 这三种状态相互独立,可以进行叠加。
76 *
77 * 这三种状态的样式可在 [[Theme]] 主题中或者通过 `geometry.state()` 接口进行配置。
78 *
79 * ```ts
80 * // 激活 active 状态
81 * setState('active', true);
82 * ```
83 *
84 * @param stateName 状态名
85 * @param stateStatus 是否开启状态
86 */
87 setState(stateName: string, stateStatus: boolean): void;
88 /**
89 * 清空状量态,恢复至初始状态。
90 */
91 clearStates(): void;
92 /**
93 * 查询当前 Element 上是否已设置 `stateName` 对应的状态。
94 * @param stateName 状态名称。
95 * @returns true 表示存在,false 表示不存在。
96 */
97 hasState(stateName: string): boolean;
98 /**
99 * 获取当前 Element 上所有的状态。
100 * @returns 当前 Element 上所有的状态数组。
101 */
102 getStates(): string[];
103 /**
104 * 获取 Element 对应的原始数据。
105 * @returns 原始数据。
106 */
107 getData(): Datum;
108 /**
109 * 获取 Element 对应的图形绘制数据。
110 * @returns 图形绘制数据。
111 */
112 getModel(): ShapeInfo;
113 /**
114 * 返回 Element 元素整体的 bbox,包含文本及文本连线(有的话)。
115 * @returns 整体包围盒。
116 */
117 getBBox(): BBox;
118 private getStatesStyle;
119 private getStateStyle;
120 private getAnimateCfg;
121 private drawShape;
122 private getOffscreenGroup;
123 private setShapeInfo;
124 private syncShapeStyle;
125 private getShapeType;
126}
127export {};