124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import Base from '../../base';
|
||
import { BBox, IGroup, IShape } from '../../dependents';
|
||
import { AnimateOption, Datum, ShapeFactory, ShapeInfo } from '../../interface';
|
||
import Geometry from '../base';
|
||
/** Element 构造函数传入参数类型 */
|
||
interface ElementCfg {
|
||
/** 用于创建各种 shape 的工厂对象 */
|
||
shapeFactory: ShapeFactory;
|
||
/** shape 容器 */
|
||
container: IGroup;
|
||
/** 虚拟 group，用户可以不传入 */
|
||
offscreenGroup?: IGroup;
|
||
/** 是否可见 */
|
||
visible?: boolean;
|
||
}
|
||
/**
|
||
* Element 图形元素。
|
||
* 定义：在 G2 中，我们会将数据通过图形语法映射成不同的图形，比如点图，数据集中的每条数据会对应一个点，柱状图每条数据对应一个柱子，线图则是一组数据对应一条折线，Element 即一条/一组数据对应的图形元素，它代表一条数据或者一个数据集，在图形层面，它可以是单个 Shape 也可以是多个 Shape，我们称之为图形元素。
|
||
*/
|
||
export default class Element extends Base {
|
||
/** 用于创建各种 shape 的工厂对象 */
|
||
shapeFactory: ShapeFactory;
|
||
/** shape 容器 */
|
||
container: IGroup;
|
||
/** 最后创建的图形对象 */
|
||
shape: IShape | IGroup;
|
||
/** shape 的动画配置 */
|
||
animate: AnimateOption | boolean;
|
||
/** element 对应的 Geometry 实例 */
|
||
geometry: Geometry;
|
||
/** 保存 shape 对应的 label */
|
||
labelShape: IGroup[];
|
||
/** 绘制的 shape 类型 */
|
||
private shapeType;
|
||
/** shape 绘制需要的数据 */
|
||
private model;
|
||
/** 原始数据 */
|
||
private data;
|
||
private states;
|
||
private statesStyle;
|
||
private offscreenGroup;
|
||
constructor(cfg: ElementCfg);
|
||
/**
|
||
* 绘制图形。
|
||
* @param model 绘制数据。
|
||
* @param isUpdate 可选，是否是更新发生后的绘制。
|
||
*/
|
||
draw(model: ShapeInfo, isUpdate?: boolean): void;
|
||
/**
|
||
* 更新图形。
|
||
* @param model 更新的绘制数据。
|
||
*/
|
||
update(model: ShapeInfo): void;
|
||
/**
|
||
* 销毁 element 实例。
|
||
*/
|
||
destroy(): void;
|
||
/**
|
||
* 显示或者隐藏 element。
|
||
* @param visible 是否可见。
|
||
*/
|
||
changeVisible(visible: boolean): void;
|
||
/**
|
||
* 设置 Element 的状态。
|
||
*
|
||
* 目前 Element 开放三种状态：
|
||
* 1. active
|
||
* 2. selected
|
||
* 3. inactive
|
||
*
|
||
* 这三种状态相互独立，可以进行叠加。
|
||
*
|
||
* 这三种状态的样式可在 [[Theme]] 主题中或者通过 `geometry.state()` 接口进行配置。
|
||
*
|
||
* ```ts
|
||
* // 激活 active 状态
|
||
* setState('active', true);
|
||
* ```
|
||
*
|
||
* @param stateName 状态名
|
||
* @param stateStatus 是否开启状态
|
||
*/
|
||
setState(stateName: string, stateStatus: boolean): void;
|
||
/**
|
||
* 清空状量态，恢复至初始状态。
|
||
*/
|
||
clearStates(): void;
|
||
/**
|
||
* 查询当前 Element 上是否已设置 `stateName` 对应的状态。
|
||
* @param stateName 状态名称。
|
||
* @returns true 表示存在，false 表示不存在。
|
||
*/
|
||
hasState(stateName: string): boolean;
|
||
/**
|
||
* 获取当前 Element 上所有的状态。
|
||
* @returns 当前 Element 上所有的状态数组。
|
||
*/
|
||
getStates(): string[];
|
||
/**
|
||
* 获取 Element 对应的原始数据。
|
||
* @returns 原始数据。
|
||
*/
|
||
getData(): Datum;
|
||
/**
|
||
* 获取 Element 对应的图形绘制数据。
|
||
* @returns 图形绘制数据。
|
||
*/
|
||
getModel(): ShapeInfo;
|
||
/**
|
||
* 返回 Element 元素整体的 bbox，包含文本及文本连线（有的话）。
|
||
* @returns 整体包围盒。
|
||
*/
|
||
getBBox(): BBox;
|
||
private getStatesStyle;
|
||
private getStateStyle;
|
||
private getAnimateCfg;
|
||
private drawShape;
|
||
private getOffscreenGroup;
|
||
private setShapeInfo;
|
||
private syncShapeStyle;
|
||
private getShapeType;
|
||
}
|
||
export {};
|