@antv/g2/lib/chart/view.d.ts

import { Attribute, Coordinate, ICanvas, IGroup, Scale } from '../dependents';
import { AxisOption, ComponentOption, CoordinateCfg, CoordinateOption, Data, Datum, FacetCfgMap, FilterCondition, LegendOption, LooseObject, Options, Point, Region, ScaleOption, TooltipOption, ViewCfg, ViewPadding, ViewAppendPadding, EventPayload, Padding } from '../interface';
import { LAYER } from '../constant';
import Base from '../base';
import { Facet } from '../facet';
import Geometry from '../geometry/base';
import Element from '../geometry/element';
import { Interaction } from '../interaction';
import { BBox } from '../util/bbox';
import Annotation from './controller/annotation';
import { Controller } from './controller/base';
import CoordinateController from './controller/coordinate';
import Tooltip from './controller/tooltip';
import Slider from './controller/slider';
import Scrollbar from './controller/scrollbar';
import Axis from './controller/axis';
import Gesture from './controller/gesture';
import Legend from './controller/legend';
import { Layout } from './layout';
import { PaddingCal } from './layout/padding-cal';
/**
 * G2 视图 View 类
 */
export declare class View extends Base {
    /** view id，全局唯一。 */
    id: string;
    /** 父级 view，如果没有父级，则为空。 */
    parent: View;
    /** 所有的子 view。 */
    views: View[];
    /** 所有的 geometry 实例。 */
    geometries: Geometry[];
    /** 所有的组件 controllers。 */
    controllers: Controller[];
    /** 所有的 Interaction 实例。 */
    interactions: Record<string, Interaction>;
    /** view 区域空间。 */
    viewBBox: BBox;
    /** 坐标系的位置大小，ViewBBox - padding = coordinateBBox。 */
    coordinateBBox: BBox;
    /** view 的 padding 大小，传入的配置（不是解析之后的值）。 */
    padding: ViewPadding;
    /** padding的基础上增加的调整值 */
    appendPadding: ViewAppendPadding;
    /** G.Canvas 实例。 */
    canvas: ICanvas;
    /** 存储最终计算的 padding 结果 */
    autoPadding: PaddingCal;
    /** 三层 Group 图形中的背景层。 */
    backgroundGroup: IGroup;
    /** 三层 Group 图形中的中间层。 */
    middleGroup: IGroup;
    /** 三层 Group 图形中的前景层。 */
    foregroundGroup: IGroup;
    /** 是否对超出坐标系范围的 Geometry 进行剪切 */
    limitInPlot: boolean;
    /**
     * 标记 view 的大小位置范围，均是 0 ~ 1 范围，便于开发者使用，起始点为左上角。
     */
    protected region: Region;
    /** 主题配置，存储当前主题配置。 */
    protected themeObject: LooseObject;
    protected options: Options;
    /** 过滤之后的数据 */
    protected filteredData: Data;
    /** 配置开启的组件插件，默认为全局配置的组件。 */
    private usedControllers;
    /** 所有的 scales */
    private scalePool;
    /** 布局函数 */
    protected layoutFunc: Layout;
    /** 生成的坐标系实例，{@link https://github.com/antvis/coord/blob/master/src/coord/base.ts|Coordinate} */
    protected coordinateInstance: Coordinate;
    /** Coordinate 相关的控制器类，负责坐标系实例的创建、更新、变换等 */
    protected coordinateController: CoordinateController;
    /** 分面类实例 */
    protected facetInstance: Facet;
    /** 当前鼠标是否在 plot 内（CoordinateBBox） */
    private isPreMouseInPlot;
    /** 默认标识位，用于判定数据是否更新 */
    private isDataChanged;
    /** 用于判断坐标系范围是否发生变化的标志位 */
    private isCoordinateChanged;
    /** 从当前这个 view 创建的 scale key */
    private createdScaleKeys;
    /** 背景色样式的 shape */
    private backgroundStyleRectShape;
    /** 是否同步子 view 的 padding */
    private syncViewPadding;
    constructor(props: ViewCfg);
    /**
     * 设置 layout 布局函数
     * @param layout 布局函数
     * @returns void
     */
    setLayout(layout: Layout): void;
    /**
     * 生命周期：初始化
     * @returns voids
     */
    init(): void;
    /**
     * 生命周期：渲染流程，渲染过程需要处理数据更新的情况。
     * render 函数仅仅会处理 view 和子 view。
     * @param isUpdate 是否触发更新流程。
     * @param params render 事件参数
     */
    render(isUpdate?: boolean, payload?: EventPayload): void;
    /**
     * 生命周期：清空图表上所有的绘制内容，但是不销毁图表，chart 仍可使用。
     * @returns void
     */
    clear(): void;
    /**
     * 生命周期：销毁，完全无法使用。
     * @returns void
     */
    destroy(): void;
    /**
     * 显示或者隐藏整个 view。
     * @param visible 是否可见
     * @returns View
     */
    changeVisible(visible: boolean): View;
    /**
     * 装载数据源。
     *
     * ```ts
     * view.data([{ city: '杭州', sale: 100 }, { city: '上海', sale: 110 } ]);
     * ```
     *
     * @param data 数据源，json 数组。
     * @returns View
     */
    data(data: Data): View;
    /**
     * @deprecated
     * This method will be removed at G2 V4.1. Replaced by {@link #data(data)}
     */
    source(data: Data): View;
    /**
     * 设置数据筛选规则。
     *
     * ```ts
     * view.filter('city', (value: any, datum: Datum) => value !== '杭州');
     *
     * // 删除 'city' 字段对应的筛选规则。
     * view.filter('city', null);
     * ```
     *
     * @param field 数据字段
     * @param condition 筛选规则
     * @returns View
     */
    filter(field: string, condition: FilterCondition | null): View;
    /**
     * 开启或者关闭坐标轴。
     *
     * ```ts
     *  view.axis(false); // 不展示坐标轴
     * ```
     * @param field 坐标轴开关
     */
    axis(field: boolean): View;
    /**
     * 对特定的某条坐标轴进行配置。
     *
     * @example
     * ```ts
     * view.axis('city', false); // 不展示 'city' 字段对应的坐标轴
     *
     * // 将 'city' 字段对应的坐标轴的标题隐藏
     * view.axis('city', {
     *   title: null,
     * });
     * ```
     *
     * @param field 要配置的坐标轴对应的字段名称
     * @param axisOption 坐标轴具体配置，更详细的配置项可以参考：https://github.com/antvis/component#axis
     */
    axis(field: string, axisOption: AxisOption): View;
    /**
     * 对图例进行整体配置。
     *
     * ```ts
     * view.legend(false); // 关闭图例
     *
     * view.legend({
     *   position: 'right',
     * }); // 图例进行整体配置
     * ```
     * @param field
     * @returns View
     */
    legend(field: LegendOption): View;
    /**
     * 对特定的图例进行配置。
     *
     * @example
     * ```ts
     * view.legend('city', false); // 关闭某个图例，通过数据字段名进行关联
     *
     * // 对特定的图例进行配置
     * view.legend('city', {
     *   position: 'right',
     * });
     * ```
     *
     * @param field 图例对应的数据字段名称
     * @param legendOption 图例配置，更详细的配置项可以参考：https://github.com/antvis/component#axis
     * @returns View
     */
    legend(field: string, legendOption: LegendOption): View;
    /**
     * 批量设置 scale 配置。
     *
     * ```ts
     * view.scale({
     *   sale: {
     *     min: 0,
     *     max: 100,
     *   }
     * });
     * ```
     * Scale 的详细配置项可以参考：https://github.com/antvis/scale#api
     * @returns View
     */
    scale(field: Record<string, ScaleOption>): View;
    /**
     * 为特性的数据字段进行 scale 配置。
     *
     * ```ts
     * view.scale('sale', {
     *   min: 0,
     *   max: 100,
     * });
     * ```
     *
     * @returns View
     */
    scale(field: string, scaleOption: ScaleOption): View;
    /**
     * tooltip 提示信息配置。
     *
     * ```ts
     * view.tooltip(false); // 关闭 tooltip
     *
     * view.tooltip({
     *   shared: true
     * });
     * ```
     *
     * @param cfg Tooltip 配置，更详细的配置项参考：https://github.com/antvis/component#tooltip
     * @returns View
     */
    tooltip(cfg: boolean | TooltipOption): View;
    /**
     * 辅助标记配置。
     *
     * ```ts
     * view.annotation().line({
     *   start: ['min', 85],
     *   end: ['max', 85],
     *   style: {
     *     stroke: '#595959',
     *     lineWidth: 1,
     *     lineDash: [3, 3],
     *   },
     * });
     * ```
     * 更详细的配置项：https://github.com/antvis/component#annotation
     * @returns [[Annotation]]
     */
    annotation(): Annotation;
    /**
     * @deprecated
     * This method will be removed at G2 V4.1. Replaced by {@link #guide()}
     */
    guide(): Annotation;
    /**
     * 坐标系配置。
     *
     * @example
     * ```ts
     * view.coordinate({
     *   type: 'polar',
     *   cfg: {
     *     radius: 0.85,
     *   },
     *   actions: [
     *     [ 'transpose' ],
     *   ],
     * });
     * ```
     *
     * @param option
     * @returns
     */
    coordinate(option?: CoordinateOption): CoordinateController;
    /**
     * 声明坐标系类型，并进行配置。
     *
     * ```ts
     * // 直角坐标系，并进行转置变换
     * view.coordinate('rect').transpose();
     *
     * // 默认创建直角坐标系
     * view.coordinate();
     * ```
     *
     * @param type 坐标系类型
     * @param [coordinateCfg] 坐标系配置
     * @returns
     */
    coordinate(type: string, coordinateCfg?: CoordinateCfg): CoordinateController;
    /**
     * @deprecated
     * This method will be removed at G2 V4.1. Replaced by {@link #coordinate()}
     */
    coord(type: string | CoordinateOption, coordinateCfg?: CoordinateCfg): CoordinateController;
    /**
     * view 分面绘制。
     *
     * ```ts
     * view.facet('rect', {
     *   rowField: 'province',
     *   columnField: 'category',
     *   eachView: (innerView: View, facet?: FacetData) => {
     *     innerView.line().position('city*sale');
     *   },
     * });
     * ```
     *
     * @param type 分面类型
     * @param cfg 分面配置， [[FacetCfgMap]]
     * @returns View
     */
    facet<T extends keyof FacetCfgMap>(type: T, cfg: FacetCfgMap[T]): View;
    animate(status: boolean): View;
    /**
     * 更新配置项，用于配置项式声明。
     * @param options 配置项
     */
    updateOptions(options: Options): this;
    /**
     * 往 `view.options` 属性中存储配置项。
     * @param name 属性名称
     * @param opt 属性值
     * @returns view
     */
    option(name: string, opt: any): View;
    /**
     * 设置主题。
     *
     * ```ts
     * view.theme('dark'); // 'dark' 需要事先通过 `registerTheme()` 接口注册完成
     *
     * view.theme({ defaultColor: 'red' });
     * ```
     *
     * @param theme 主题名或者主题配置
     * @returns View
     */
    theme(theme: string | LooseObject): View;
    /**
     * Call the interaction based on the interaction name
     *
     * ```ts
     * view.interaction('my-interaction', { extra: 'hello world' });
     * ```
     * 详细文档可以参考：https://g2.antv.vision/zh/docs/api/general/interaction
     * @param name interaction name
     * @param cfg interaction config
     * @returns
     */
    interaction(name: string, cfg?: LooseObject): View;
    /**
     * 移除当前 View 的 interaction
     * ```ts
     * view.removeInteraction('my-interaction');
     * ```
     * @param name interaction name
     */
    removeInteraction(name: string): void;
    /**
     * 修改数据，数据更新逻辑，数据更新仅仅影响当前这一层的 view
     *
     * ```ts
     * view.changeData([{ city: '北京', sale: '200' }]);
     * ```
     *
     * @param data
     * @returns void
     */
    changeData(data: Data): void;
    /**
     * 创建子 view
     *
     * ```ts
     * const innerView = view.createView({
     *   start: { x: 0, y: 0 },
     *   end: { x: 0.5, y: 0.5 },
     *   padding: 8,
     * });
     * ```
     *
     * @param cfg
     * @returns View
     */
    createView(cfg?: Partial<ViewCfg>): View;
    /**
     * @deprecated
     * This method will be removed at G2 V4.1. Replaced by {@link #createView()}
     */
    view(cfg?: Partial<ViewCfg>): View;
    /**
     * 删除一个子 view
     * @param view
     * @return removedView
     */
    removeView(view: View): View;
    /**
     * 获取当前坐标系实例。
     * @returns [[Coordinate]]
     */
    getCoordinate(): Coordinate;
    /**
     * 获取当前 view 的主题配置。
     * @returns themeObject
     */
    getTheme(): LooseObject;
    /**
     * 获得 x 轴字段的 scale 实例。
     * @returns view 中 Geometry 对于的 x scale
     */
    getXScale(): Scale;
    /**
     * 获取 y 轴字段的 scales 实例。
     * @returns view 中 Geometry 对于的 y scale 数组
     */
    getYScales(): Scale[];
    /**
     * 获取 x 轴或者 y 轴对应的所有 scale 实例。
     * @param dimType x | y
     * @returns x 轴或者 y 轴对应的所有 scale 实例。
     */
    getScalesByDim(dimType: 'x' | 'y'): Record<string, Scale>;
    /**
     * 根据字段名去获取 scale 实例。
     * @param field 数据字段名称
     * @param key id
     */
    getScale(field: string, key?: string): Scale;
    /**
     * @deprecated
     * This method will be removed at G2 V4.1. Please use `getScale`.
     */
    getScaleByField(field: string, key?: string): Scale;
    /**
     * 返回所有配置信息。
     * @returns 所有的 view API 配置。
     */
    getOptions(): Options;
    /**
     * 获取 view 的数据（过滤后的数据）。
     * @returns 处理过滤器之后的数据。
     */
    getData(): Data;
    /**
     * 获取原始数据
     * @returns 传入 G2 的原始数据
     */
    getOriginalData(): Data;
    /**
     * 获取布局后的边距 padding
     * @returns
     */
    getPadding(): Padding;
    /**
     * 获取当前 view 有的 geometries
     * @returns
     */
    getGeometries(): Geometry<import("../interface").ShapePoint>[];
    /**
     * 获取 view 中的所有 geome
     */
    getElements(): Element[];
    /**
     * 根据一定的规则查找 Geometry 的 Elements。
     *
     * ```typescript
     * getElementsBy((element) => {
     *   const data = element.getData();
     *
     *   return data.a === 'a';
     * });
     * ```
     *
     * @param condition 定义查找规则的回调函数。
     * @returns
     */
    getElementsBy(condition: (element: Element) => boolean): Element[];
    /**
     * 获得绘制的层级 group。
     * @param layer 层级名称。
     * @returns 对应层级的 Group。
     */
    getLayer(layer: LAYER): IGroup;
    /**
     * 对外暴露方法，判断一个点是否在绘图区域（即坐标系范围）内部。
     * @param point 坐标点
     */
    isPointInPlot(point: Point): boolean;
    /**
     * 获得所有的 legend 对应的 attribute 实例。
     * @returns 维度字段的 Attribute 数组
     */
    getLegendAttributes(): Attribute[];
    /**
     * 获取所有的分组字段的 scale 实例。
     * @returns 获得分组字段的 scale 实例数组。
     */
    getGroupScales(): Scale[];
    /**
     * 获取 G.Canvas 实例。
     * @returns G.Canvas 画布实例。
     */
    getCanvas(): ICanvas;
    /**
     * 获得根节点 view。
     */
    getRootView(): View;
    /**
     * 获取该数据在可视化后，对应的画布坐标点。
     * @param data 原始数据记录
     * @returns 对应的画布坐标点
     */
    getXY(data: Datum): Point;
    getController(name: 'tooltip'): Tooltip;
    getController(name: 'axis'): Axis;
    getController(name: 'legend'): Legend;
    getController(name: 'scrollbar'): Scrollbar;
    getController(name: 'slider'): Slider;
    getController(name: 'annotation'): Annotation;
    getController(name: 'gestucre'): Gesture;
    getController(name: string): Controller;
    /**
     * 显示 point 坐标点对应的 tooltip。
     * @param point 画布坐标点
     * @returns View
     */
    showTooltip(point: Point): View;
    /**
     * 隐藏 tooltip。
     * @returns View
     */
    hideTooltip(): View;
    /**
     * 将 tooltip 锁定到当前位置不能移动。
     * @returns View
     */
    lockTooltip(): View;
    /**
     * 将 tooltip 锁定解除。
     * @returns View
     */
    unlockTooltip(): View;
    /**
     * 是否锁定 tooltip。
     * @returns 是否锁定
     */
    isTooltipLocked(): boolean;
    /**
     * 获取当前 point 对应的 tooltip 数据项。
     * @param point 坐标点
     * @returns tooltip 数据项
     */
    getTooltipItems(point: Point): any[];
    /**
     * 获取逼近的点的数据集合
     * @param point 当前坐标点
     * @returns  数据
     */
    getSnapRecords(point: Point): any[];
    /**
     * 获取所有的 pure component 组件，用于布局。
     */
    getComponents(): ComponentOption[];
    /**
     * 将 data 数据进行过滤。
     * @param data
     * @returns 过滤之后的数据
     */
    filterData(data: Data): Data;
    /**
     * 对某一个字段进行过滤
     * @param field
     * @param data
     */
    filterFieldData(field: string, data: Data): Data;
    /**
     * 调整 coordinate 的坐标范围。
     */
    adjustCoordinate(): void;
    protected paint(isUpdate: boolean): void;
    /**
     * 渲染背景样式的 shape。
     * 放到 view 中创建的原因是让使用 view 绘制图形的时候，也能够处理背景色
     */
    private renderBackgroundStyleShape;
    /**
     * 递归计算每个 view 的 padding 值，coordinateBBox 和 coordinateInstance
     * @param isUpdate
     */
    protected renderPaddingRecursive(isUpdate: boolean): void;
    /**
     * 递归处理 view 的布局，最终是计算各个 view 的 coordinateBBox 和 coordinateInstance
     * @param isUpdate
     */
    protected renderLayoutRecursive(isUpdate: boolean): void;
    /**
     * 最终递归绘制组件和图形
     * @param isUpdate
     */
    protected renderPaintRecursive(isUpdate: boolean): void;
    /**
     * 创建 scale，递归到顶层 view 去创建和缓存 scale
     * @param field
     * @param data
     * @param scaleDef
     * @param key
     */
    protected createScale(field: string, data: Data, scaleDef: ScaleOption, key: string): Scale;
    /**
     * 递归渲染中的数据处理
     * @param isUpdate
     */
    private renderDataRecursive;
    /**
     * 计算 region，计算实际的像素范围坐标
     * @private
     */
    private calculateViewBBox;
    /**
     * 初始化事件机制：G 4.0 底层内置支持 name:event 的机制，那么只要所有组件都有自己的 name 即可。
     *
     * G2 的事件只是获取事件委托，然后在 view 嵌套结构中，形成事件冒泡机制。
     * 当前 view 只委托自己 view 中的 Component 和 Geometry 事件，并向上冒泡
     * @private
     */
    private initEvents;
    private onCanvasEvent;
    /**
     * 初始化插件
     */
    private initComponentController;
    private createViewEvent;
    /**
     * 触发事件之后
     * @param evt
     */
    private onDelegateEvents;
    /**
     * 处理 PLOT_EVENTS
     * plot event 需要处理所有的基础事件，并判断是否在画布中，然后再决定是否要 emit。
     * 对于 mouseenter、mouseleave 比较特殊，需要做一下数学比较。
     * @param e
     */
    private doPlotEvent;
    /**
     * 处理筛选器，筛选数据
     * @private
     */
    private doFilterData;
    /**
     * 初始化 Geometries
     * @private
     */
    private initGeometries;
    /**
     * 根据 Geometry 的所有字段创建 scales
     * 如果存在，则更新，不存在则创建
     */
    private createOrUpdateScales;
    /**
     * 处理 scale 同步逻辑
     */
    private syncScale;
    /**
     * 获得 Geometry 中的 scale 对象
     */
    private getGeometryScales;
    private getScaleFields;
    private getGroupedFields;
    /**
     * 调整 scale 配置
     * @private
     */
    private adjustScales;
    /**
     * 调整分类 scale 的 range，防止超出坐标系外面
     * @private
     */
    private adjustCategoryScaleRange;
    /**
     * 根据 options 配置、Geometry 字段配置，自动生成 components
     * @param isUpdate 是否是更新
     * @private
     */
    private initComponents;
    private doLayout;
    /**
     * 创建坐标系
     * @private
     */
    private createCoordinate;
    /**
     * 根据 options 配置自动渲染 geometry
     * @private
     */
    private paintGeometries;
    /**
     * 最后的绘制组件
     * @param isUpdate
     */
    private renderComponents;
    /**
     * 渲染分面，会在其中进行数据分面，然后进行子 view 创建
     * @param isUpdate
     */
    private renderFacet;
    private initOptions;
    private createGeometry;
    /**
     * scale key 的创建方式
     * @param field
     */
    private getScaleKey;
}
/**
 * 注册 geometry 组件
 * @param name
 * @param Ctor
 * @returns Geometry
 */
export declare function registerGeometry(name: string, Ctor: any): void;
export default View;