UNPKG

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