chore: replace keyword

src/animation/utils.ts

@@ -1,7 +1,7 @@
 /* global Keyframe */
 import { isNil } from '@antv/util';
 import type { DisplayObject } from '../shapes';
-import type { GUI } from '../core';
+import type { Component } from '../core';
 import { show, hide } from '../util';
 import type { AnimationOption, AnimationResult, GenericAnimation, StandardAnimationOption } from './types';
 
@@ -42,12 +42,12 @@ export function onAnimatesFinished(animations: AnimationResult[], callback: () =
   else Promise.all(animations.map((a) => a?.finished)).then(callback);
 }
 
-function attr(target: DisplayObject | GUI<any>, value: Record<string, any>) {
+function attr(target: DisplayObject | Component<any>, value: Record<string, any>) {
   if ('update' in target) target.update(value);
   else target.attr(value);
 }
 
-export function animate(target: DisplayObject | GUI<any>, keyframes: Keyframe[], options: GenericAnimation) {
+export function animate(target: DisplayObject | Component<any>, keyframes: Keyframe[], options: GenericAnimation) {
   if (keyframes.length === 0) return null;
   if (!options) {
     const state = keyframes.slice(-1)[0];
@@ -150,8 +150,8 @@ export function transitionShape(
  * @returns transition instance
  */
 export function transition(
-  target: DisplayObject | GUI<any>,
-  state: Record<string, any> | (DisplayObject | GUI<any>),
+  target: DisplayObject | Component<any>,
+  state: Record<string, any> | (DisplayObject | Component<any>),
   options: GenericAnimation
 ) {
   const from: typeof state = {};

src/core/gui.ts → src/core/component.ts

@@ -7,7 +7,7 @@ function applyVisibility() {
   visibility(this, this.attributes.visibility !== 'hidden');
 }
 
-export abstract class GUI<T extends Record<string, any>> extends CustomElement<Required<T>> {
+export abstract class Component<T extends Record<string, any>> extends CustomElement<Required<T>> {
   protected _defaultOptions: Partial<T>;
 
   private _offscreen!: Group;

src/core/index.ts

@@ -1,2 +1,2 @@
-export { GUI } from './gui';
+export { Component } from './component';
 export * from './types';

src/ui/axis/axis.ts

@@ -1,6 +1,6 @@
 import type { GenericAnimation, StandardAnimationOption } from '../../animation';
 import { parseAnimationOption } from '../../animation';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group } from '../../shapes';
 import type { Selection } from '../../util';
 import { ifShow, sampling, select } from '../../util';
@@ -52,7 +52,7 @@ function renderAxisMain(
   return [...lineTransitions, ...tickTransitions, ...labelTransitions].filter((t) => !!t);
 }
 
-export class Axis extends GUI<AxisStyleProps> {
+export class Axis extends Component<AxisStyleProps> {
   constructor(options: AxisOptions) {
     super(options, AXIS_BASE_DEFAULT_ATTR);
   }

src/ui/breadcrumb/index.ts

@@ -1,13 +1,13 @@
 import { deepMix, isNil, pick } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group, Text } from '../../shapes';
 import { maybeAppend, parseSeriesAttr, subStyleProps } from '../../util';
 import { Tag, TagStyleProps } from '../tag';
 import type { BreadcrumbStyleProps, BreadcrumbItem, BreadcrumbOptions } from './type';
 
 export type { BreadcrumbStyleProps as BreadcrumbCfg, BreadcrumbOptions };
 
-export class Breadcrumb extends GUI<BreadcrumbStyleProps> {
+export class Breadcrumb extends Component<BreadcrumbStyleProps> {
   /**
    * 标签类型
    */

src/ui/button/index.ts

@@ -1,5 +1,5 @@
 import { deepMix, isUndefined } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group, RectStyleProps, Text } from '../../shapes';
 import { maybeAppend, parseSeriesAttr, select, subStyleProps } from '../../util';
 import { Marker } from '../marker';
@@ -8,7 +8,7 @@ import type { ButtonOptions, ButtonStyleProps } from './types';
 
 export type { ButtonStyleProps, ButtonOptions };
 
-export class Button extends GUI<ButtonStyleProps> {
+export class Button extends Component<ButtonStyleProps> {
   /**
    * 组件类型
    */

src/ui/checkbox/index.ts

@@ -1,4 +1,4 @@
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import type { Group, Rect } from '../../shapes';
 import { maybeAppend, subStyleProps } from '../../util';
 import type { CheckboxOptions, CheckboxStyleProps } from './types';
@@ -16,7 +16,7 @@ function getLablePosition(shape: Rect, spacing?: number) {
   };
 }
 
-export class Checkbox extends GUI<CheckboxStyleProps> {
+export class Checkbox extends Component<CheckboxStyleProps> {
   /**
    * 组件 checkbox
    */

src/ui/crosshair/base.ts

@@ -1,12 +1,12 @@
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group, Path } from '../../shapes';
 import type { Point } from '../../types';
 import { select, subStyleProps } from '../../util';
 import { Tag } from '../tag';
 import { CROSSHAIR_BASE_DEFAULT_STYLE } from './constant';
 import type { CrosshairBaseStyleProps, CrosshairBaseOptions } from './types';
 
-export abstract class CrosshairBase<T extends CrosshairBaseStyleProps> extends GUI<T> {
+export abstract class CrosshairBase<T extends CrosshairBaseStyleProps> extends Component<T> {
   public static tag = 'crosshair-base';
 
   /**

src/ui/grid/index.ts

@@ -1,5 +1,5 @@
 import { fadeOut, onAnimateFinished, transition } from '../../animation';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import type { Group } from '../../shapes';
 import type { Point } from '../../types';
 import type { PathCommand, Selection } from '../../util';
@@ -174,7 +174,7 @@ function getData(attr: GridStyleProps) {
   });
 }
 
-export class Grid extends GUI<GridStyleProps> {
+export class Grid extends Component<GridStyleProps> {
   render(attributes: GridStyleProps, container: Group) {
     // @ts-ignore do no passBy className
     const { type, center, areaFill, closed, ...style } = attributes;

src/ui/indicator/indicator.ts

@@ -1,6 +1,6 @@
 import { ElementEvent } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group } from '../../shapes';
 import type { Point } from '../../types';
 import {
@@ -31,7 +31,7 @@ const CLASS_NAMES = classNames(
   },
   'indicator'
 );
-export class Indicator extends GUI<IndicatorStyleProps> {
+export class Indicator extends Component<IndicatorStyleProps> {
   constructor(options: IndicatorOptions) {
     super(options, DEFAULT_INDICATOR_STYLE_PROPS);
     this.group = this.appendChild(new Group({}));

src/ui/legend/category.ts

@@ -1,4 +1,4 @@
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import type { Group } from '../../shapes';
 import { BBox, select, Selection, splitStyle, subStyleProps } from '../../util';
 import type { TitleStyleProps } from '../title';
@@ -9,7 +9,7 @@ import type { CategoryOptions, CategoryStyleProps } from './types';
 
 export type { CategoryOptions, CategoryStyleProps };
 
-export class Category extends GUI<CategoryStyleProps> {
+export class Category extends Component<CategoryStyleProps> {
   constructor(options: CategoryOptions) {
     super(options, CATEGORY_DEFAULT_OPTIONS);
   }

src/ui/legend/category/item.ts

@@ -9,7 +9,7 @@ import {
   TextStyleProps,
 } from '@antv/g';
 import type { ComponentOptions } from '../../../core';
-import { GUI } from '../../../core';
+import { Component } from '../../../core';
 import { ExtendDisplayObject, PrefixObject } from '../../../types';
 import {
   Selection,
@@ -67,7 +67,7 @@ function styleOfMarker(group: Group): BaseStyleProps {
   return {};
 }
 
-export class CategoryItem extends GUI<CategoryItemStyleProps> {
+export class CategoryItem extends Component<CategoryItemStyleProps> {
   constructor(options: CategoryItemOptions) {
     super(options, {
       span: [1, 1],

src/ui/legend/category/items.ts

@@ -1,7 +1,7 @@
 import { CustomEvent } from '@antv/g';
 import { noop, set } from '@antv/util';
 import type { CallableStyleProps, ComponentOptions, PrefixStyleProps } from '../../../core';
-import { GUI } from '../../../core';
+import { Component } from '../../../core';
 import type { GroupStyleProps } from '../../../shapes';
 import { Group } from '../../../shapes';
 import type { CallbackParameter } from '../../../types';
@@ -85,7 +85,7 @@ const ifSatisfied = <T>(value: T, rule: (val: T) => boolean, defaultValue = true
   return defaultValue;
 };
 
-export class CategoryItems extends GUI<CategoryItemsStyleProps> {
+export class CategoryItems extends Component<CategoryItemsStyleProps> {
   constructor(options: CategoryItemsOptions) {
     super(options, {
       data: [],

src/ui/legend/continuous.ts

@@ -1,7 +1,7 @@
 import { CustomEvent } from '@antv/g';
 import { Linear } from '@antv/scale';
 import { clamp, isUndefined, memoize } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import type { DisplayObject, TextStyleProps } from '../../shapes';
 import { Group } from '../../shapes';
 import { Point } from '../../types';
@@ -46,7 +46,7 @@ const getMinMax = memoize(
   (data) => data.map((d: any) => d.id)
 );
 
-export class Continuous extends GUI<ContinuousStyleProps> {
+export class Continuous extends Component<ContinuousStyleProps> {
   constructor(options: ContinuousOptions) {
     super(options, CONTINUOUS_DEFAULT_OPTIONS);
   }

src/ui/legend/continuous/handle.ts

@@ -1,5 +1,5 @@
 import type { ComponentOptions, PrefixStyleProps } from '../../../core';
-import { GUI } from '../../../core';
+import { Component } from '../../../core';
 import type { GroupStyleProps, TextStyleProps } from '../../../shapes';
 import { Group } from '../../../shapes';
 import type { PrefixObject } from '../../../types';
@@ -48,7 +48,7 @@ export const DEFAULT_HANDLE_CFG: Partial<HandleStyleProps> = {
   spacing: 0,
 };
 
-export class Handle extends GUI<HandleStyleProps> {
+export class Handle extends Component<HandleStyleProps> {
   constructor(options: HandleOptions) {
     super(options, DEFAULT_HANDLE_CFG);
   }

src/ui/legend/continuous/ribbon.ts

@@ -1,7 +1,7 @@
 import { parseColor } from '@antv/g';
 import { isFunction } from '@antv/util';
 import type { ComponentOptions, PrefixStyleProps } from '../../../core';
-import { GUI } from '../../../core';
+import { Component } from '../../../core';
 import type { GroupStyleProps, PathStyleProps, RectStyleProps } from '../../../shapes';
 import { Group } from '../../../shapes';
 import { classNames, select, Selection, subStyleProps } from '../../../util';
@@ -110,7 +110,7 @@ function renderSelection(container: Selection, attr: RequiredRibbonStyleProps) {
   ribbon.style('clip-path', clipPath);
 }
 
-export class Ribbon extends GUI<RibbonStyleProps> {
+export class Ribbon extends Component<RibbonStyleProps> {
   constructor(options: RibbonOptions) {
     super(options, {
       type: 'color',

src/ui/marker/index.ts

@@ -1,5 +1,5 @@
 import { isFunction } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group } from '../../shapes';
 import { ifShow, select } from '../../util';
 import {
@@ -42,7 +42,7 @@ function getType(symbol: MarkerStyleProps['symbol']): string | null {
   return null;
 }
 
-export class Marker extends GUI<MarkerStyleProps> {
+export class Marker extends Component<MarkerStyleProps> {
   public render(attributes: Required<MarkerStyleProps>, container: Group) {
     const { symbol, size = 16, ...style } = attributes;
     const type = getType(symbol);

src/ui/navigator/index.ts

@@ -1,7 +1,7 @@
 import { ElementEvent } from '@antv/g';
 import { clamp, debounce } from '@antv/util';
 import { animate, onAnimateFinished } from '../../animation';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group, Rect, Text } from '../../shapes';
 import type { Vector2 } from '../../types';
 import type { Selection } from '../../util';
@@ -38,7 +38,7 @@ const CLASS_NAMES = classNames(
   'navigator'
 );
 
-export class Navigator extends GUI<NavigatorStyleProps> {
+export class Navigator extends Component<NavigatorStyleProps> {
   constructor(options: NavigatorOptions) {
     super(options, {
       animate: {

src/ui/poptip/constant.ts

@@ -1,12 +1,12 @@
-export const POPTIP_ID = 'gui-poptip';
+export const POPTIP_ID = 'component-poptip';
 
 /**
  * 默认类名
  */
 export const CLASS_NAME = {
-  CONTAINER: 'gui-poptip',
-  ARROW: 'gui-poptip-arrow',
-  TEXT: 'gui-poptip-text',
+  CONTAINER: 'component-poptip',
+  ARROW: 'component-poptip-arrow',
+  TEXT: 'component-poptip-text',
 };
 
 /**

src/ui/poptip/index.ts

@@ -1,6 +1,6 @@
 import { deepMix, isString, isElement, assign, get } from '@antv/util';
 import { DisplayObject, Group } from '../../shapes';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { deepAssign } from '../../util';
 import { CLASS_NAME, POPTIP_ID, POPTIP_STYLE } from './constant';
 import { getPositionXY, getSingleTonElement } from './utils';
@@ -17,7 +17,7 @@ type PoptipCallbackOptions = {
   target?: HTMLElement | DisplayObject | false;
 } & Pick<PoptipStyleProps, 'position' | 'arrowPointAtCenter' | 'follow' | 'offset'>;
 
-export class Poptip extends GUI<PoptipStyleProps> {
+export class Poptip extends Component<PoptipStyleProps> {
   public static tag = 'poptip';
 
   public get visible(): boolean {

src/ui/poptip/types.ts

@@ -25,7 +25,7 @@ export interface PoptipStyleProps {
   id?: string;
   /**
    * @title 容器类名
-   * @description poptip 组件的 class 类名，默认为 .gui-poptip
+   * @description poptip 组件的 class 类名，默认为 .component-poptip
    */
   containerClassName?: string;
   /**
@@ -67,7 +67,9 @@ export interface PoptipStyleProps {
    * @description 所有内容模版都可以通过 '.className': cssStyle 的方式，来改变 poptip 的样式
    */
   domStyles?: {
-    [key: '.gui-poptip' | '.gui-poptip-arrow' | '.gui-poptip-text' | string]: { [key: string]: string };
+    [key: '.component-poptip' | '.component-poptip-arrow' | '.component-poptip-text' | string]: {
+      [key: string]: string;
+    };
   };
 }
 

src/ui/scrollbar/index.ts

@@ -1,6 +1,6 @@
 import { CustomEvent } from '@antv/g';
 import { clamp } from '@antv/util';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import type { Group, RectStyleProps } from '../../shapes';
 import { getEventPos, parseSeriesAttr, select, subStyleProps, superStyleProps } from '../../util';
 import type { SliderStyleProps } from '../slider';
@@ -9,7 +9,7 @@ import type { ScrollbarOptions, ScrollbarStyleProps } from './types';
 
 export type { ScrollbarOptions, ScrollbarStyleProps };
 
-export class Scrollbar extends GUI<ScrollbarStyleProps> {
+export class Scrollbar extends Component<ScrollbarStyleProps> {
   public static tag = 'scrollbar';
 
   private slider!: Slider;

src/ui/select/option.ts

@@ -1,10 +1,10 @@
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { Group, Rect } from '../../shapes';
 import { parseSeriesAttr, renderExtDo, select, subStyleProps } from '../../util';
 import { deepAssign } from '../../util/deep-assign';
 import type { OptionOptions, OptionStyleProps } from './types';
 
-export class Option extends GUI<OptionStyleProps> {
+export class Option extends Component<OptionStyleProps> {
   static defaultOptions: OptionOptions = {
     style: {
       value: '',

src/ui/select/select.ts

@@ -1,12 +1,12 @@
 import { CustomEvent } from '@antv/g';
-import { GUI } from '../../core';
+import { Component } from '../../core';
 import { DisplayObject, Rect } from '../../shapes';
 import { hide, parseSeriesAttr, renderExtDo, select, show, subStyleProps } from '../../util';
 import { deepAssign } from '../../util/deep-assign';
 import { Option } from './option';
 import type { SelectOptions, SelectStyleProps } from './types';
 
-export class Select extends GUI<SelectStyleProps> {
+export class Select extends Component<SelectStyleProps> {
   static defaultOptions: SelectOptions = {
     style: {
       width: 140,