@visactor/vrender-components 0.0.38-brush.2-alpha.0

package/es/marker/point.js

@@ -0,0 +1,106 @@
+import { createRichText, createSymbol, createImage, createLine } from "@visactor/vrender";
+
+import { merge } from "@visactor/vutils";
+
+import { Segment } from "../segment";
+
+import { Tag } from "../tag";
+
+import { Marker } from "./base";
+
+import { DEFAULT_MARK_POINT_TEXT_STYLE_MAP, DEFAULT_MARK_POINT_THEME } from "./config";
+
+import { IMarkPointItemPosition } from "./type";
+
+export class MarkPoint extends Marker {
+    constructor(attributes) {
+        super(merge({}, MarkPoint.defaultAttributes, attributes));
+    }
+    setLabelPos() {}
+    setItemAttributes(item, itemContent, itemPosition, itemType) {
+        var _a;
+        const {autoRotate: autoRotate = !0, refX: refX = 0, refY: refY = 0, refAngle: refAngle = 0, textStyle: textStyle, richTextStyle: richTextStyle, imageStyle: imageStyle, position: position = IMarkPointItemPosition.middle} = itemContent, itemAngle = (null === (_a = this._line) || void 0 === _a ? void 0 : _a.getEndAngle()) || 0, itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2), itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
+        "text" === itemType ? item.setAttributes(Object.assign(Object.assign({}, textStyle), {
+            textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(null == itemContent ? void 0 : itemContent.position) || "end"]), null == textStyle ? void 0 : textStyle.textStyle)
+        })) : "richText" === itemType ? item.setAttributes({
+            dx: this.getItemDx(item, position, richTextStyle) + ((null == richTextStyle ? void 0 : richTextStyle.dx) || 0),
+            dy: this.getItemDy(item, position, richTextStyle) + ((null == richTextStyle ? void 0 : richTextStyle.dy) || 0)
+        }) : "image" === itemType && item.setAttributes({
+            dx: this.getItemDx(item, position, imageStyle) + ((null == imageStyle ? void 0 : imageStyle.dx) || 0),
+            dy: this.getItemDy(item, position, imageStyle) + ((null == imageStyle ? void 0 : imageStyle.dy) || 0)
+        }), item.setAttributes({
+            x: itemPosition.x + (itemOffsetX || 0),
+            y: itemPosition.y + (itemOffsetY || 0),
+            angle: autoRotate && itemAngle + refAngle
+        });
+    }
+    getItemDx(item, position, style) {
+        var _a, _b;
+        const width = null !== (_b = null === (_a = null == item ? void 0 : item.AABBBounds) || void 0 === _a ? void 0 : _a.width()) && void 0 !== _b ? _b : (null == style ? void 0 : style.width) || 0;
+        return position.includes("inside") ? -width : 0;
+    }
+    getItemDy(item, position, style) {
+        var _a, _b;
+        const height = null !== (_b = null === (_a = null == item ? void 0 : item.AABBBounds) || void 0 === _a ? void 0 : _a.height()) && void 0 !== _b ? _b : (null == style ? void 0 : style.height) || 0;
+        return position.includes("top") || position.includes("Top") ? -height : position.includes("middle") || position.includes("Middle") ? -height / 2 : 0;
+    }
+    renderItem(itemContent, itemPosition) {
+        const {type: type = "text", symbolStyle: symbolStyle, richTextStyle: richTextStyle, imageStyle: imageStyle, renderCustomCallback: renderCustomCallback} = itemContent;
+        let item;
+        return "symbol" === type ? item = createSymbol(Object.assign(Object.assign({}, itemPosition), symbolStyle)) : "text" === type ? item = new Tag(Object.assign({}, itemPosition)) : "richText" === type ? item = createRichText(Object.assign(Object.assign({}, itemPosition), richTextStyle)) : "image" === type ? item = createImage(Object.assign(Object.assign({}, itemPosition), imageStyle)) : "custom" === type && renderCustomCallback && (item = renderCustomCallback()), 
+        this.setItemAttributes(item, itemContent, itemPosition, type), item;
+    }
+    renderItemLine(itemLine, position, itemPosition) {
+        const {startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, type: type = "type-s"} = itemLine;
+        let points = [];
+        points = "type-do" === type ? [ position, {
+            x: (position.x + itemPosition.x) / 2,
+            y: itemPosition.y
+        }, itemPosition ] : "type-po" === type ? [ position, {
+            x: itemPosition.x,
+            y: position.y
+        }, itemPosition ] : "type-op" === type ? [ position, {
+            x: position.x,
+            y: itemPosition.y
+        }, itemPosition ] : [ position, itemPosition ];
+        return new Segment({
+            points: points,
+            startSymbol: startSymbol,
+            endSymbol: endSymbol,
+            lineStyle: lineStyle
+        });
+    }
+    renderDecorativeLine(itemLine, itemPosition) {
+        var _a;
+        const {lineStyle: lineStyle} = itemLine, decorativeLength = (null === (_a = null == itemLine ? void 0 : itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.length) || 10, itemAngle = this._line.getEndAngle() || 0, startPointOffsetX = decorativeLength / 2 * Math.cos(itemAngle - Math.PI / 2), startPointOffsetY = decorativeLength / 2 * Math.sin(itemAngle - Math.PI / 2), endPointOffsetX = -decorativeLength / 2 * Math.cos(itemAngle - Math.PI / 2), endPointOffsetY = -decorativeLength / 2 * Math.sin(itemAngle - Math.PI / 2);
+        return createLine(Object.assign({
+            points: [ {
+                x: itemPosition.x + startPointOffsetX,
+                y: itemPosition.y + startPointOffsetY
+            }, {
+                x: itemPosition.x + endPointOffsetX,
+                y: itemPosition.y + endPointOffsetY
+            } ]
+        }, lineStyle));
+    }
+    renderMarker(container) {
+        var _a;
+        const {position: position, itemLine: itemLine, itemContent: itemContent} = this.attribute, itemPosition = {
+            x: position.x + ((null == itemContent ? void 0 : itemContent.offsetX) || 0),
+            y: position.y + ((null == itemContent ? void 0 : itemContent.offsetY) || 0)
+        };
+        if (null == itemLine ? void 0 : itemLine.visible) {
+            const line = this.renderItemLine(itemLine, position, itemPosition);
+            if (line.name = "mark-point-line", this._line = line, container.add(line), null === (_a = null == itemLine ? void 0 : itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.visible) {
+                const decorativeLine = this.renderDecorativeLine(itemLine, itemPosition);
+                decorativeLine.name = "mark-point-decorativeLine", this._decorativeLine = decorativeLine, 
+                container.add(decorativeLine);
+            }
+        }
+        const item = this.renderItem(itemContent, itemPosition);
+        this._item = item, container.add(item);
+    }
+}
+
+MarkPoint.defaultAttributes = DEFAULT_MARK_POINT_THEME;
+//# sourceMappingURL=point.js.map

package/es/marker/point.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/marker/point.ts"],"names":[],"mappings":"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","file":"point.js","sourcesContent":["import {\n  createRichText,\n  createSymbol,\n  createImage,\n  createLine,\n  IGroup,\n  IImage,\n  INode,\n  ISymbol,\n  IImageGraphicAttribute,\n  IRichText,\n  IRichTextGraphicAttribute,\n  ILine\n} from '@visactor/vrender';\nimport { IPointLike, merge } from '@visactor/vutils';\nimport { Segment } from '../segment';\nimport { Tag } from '../tag';\nimport { Marker } from './base';\nimport { DEFAULT_MARK_POINT_TEXT_STYLE_MAP, DEFAULT_MARK_POINT_THEME } from './config';\nimport { IItemContent, IItemLine, IMarkPointItemPosition, MarkPointAttrs } from './type';\n\nexport class MarkPoint extends Marker<MarkPointAttrs> {\n  static defaultAttributes = DEFAULT_MARK_POINT_THEME;\n\n  private _item!: ISymbol | Tag | IImage | IRichText;\n\n  private _line?: Segment;\n\n  private _decorativeLine!: ILine;\n\n  constructor(attributes: MarkPointAttrs) {\n    super(merge({}, MarkPoint.defaultAttributes, attributes));\n  }\n\n  protected setLabelPos() {\n    //do nothing\n  }\n\n  protected setItemAttributes(\n    item: ISymbol | Tag | IImage | IRichText,\n    itemContent: IItemContent,\n    itemPosition: IPointLike,\n    itemType: 'symbol' | 'text' | 'image' | 'richText' | 'custom'\n  ) {\n    const {\n      autoRotate = true,\n      refX = 0,\n      refY = 0,\n      refAngle = 0,\n      textStyle,\n      richTextStyle,\n      imageStyle,\n      position = IMarkPointItemPosition.middle\n    } = itemContent;\n    const itemAngle = this._line?.getEndAngle() || 0;\n    const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);\n    const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);\n    if (itemType === 'text') {\n      item.setAttributes({\n        ...textStyle,\n        textStyle: {\n          ...DEFAULT_MARK_POINT_TEXT_STYLE_MAP[itemContent?.position || 'end'],\n          ...textStyle?.textStyle\n        }\n      });\n    } else if (itemType === 'richText') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle?.dx || 0),\n        dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle?.dy || 0)\n      });\n    } else if (itemType === 'image') {\n      item.setAttributes({\n        dx: this.getItemDx(item, position, imageStyle) + (imageStyle?.dx || 0),\n        dy: this.getItemDy(item, position, imageStyle) + (imageStyle?.dy || 0)\n      });\n    }\n    item.setAttributes({\n      x: itemPosition.x + (itemOffsetX || 0),\n      y: itemPosition.y + (itemOffsetY || 0),\n      angle: autoRotate && itemAngle + refAngle\n    });\n  }\n\n  protected getItemDx(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const width = (item as IGroup)?.AABBBounds?.width() ?? (style?.width || 0);\n    if (position.includes('inside')) {\n      return -width;\n    } else if (position === 'insideTop') {\n      return 0;\n    }\n    return 0;\n  }\n\n  protected getItemDy(\n    item: ISymbol | Tag | IImage | IRichText,\n    position: IMarkPointItemPosition,\n    style?: IImageGraphicAttribute | IRichTextGraphicAttribute\n  ) {\n    const height = (item as IGroup)?.AABBBounds?.height() ?? (style?.height || 0);\n    if (position.includes('top') || position.includes('Top')) {\n      return -height;\n    } else if (position.includes('middle') || position.includes('Middle')) {\n      return -height / 2;\n    }\n    return 0;\n  }\n\n  protected renderItem(itemContent: IItemContent, itemPosition: IPointLike) {\n    const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;\n    let item: ISymbol | Tag | IImage | IRichText | IGroup;\n    if (type === 'symbol') {\n      item = createSymbol({\n        ...itemPosition,\n        ...symbolStyle\n      });\n    } else if (type === 'text') {\n      item = new Tag({\n        ...itemPosition\n      });\n    } else if (type === 'richText') {\n      item = createRichText({\n        ...itemPosition,\n        ...richTextStyle\n      });\n    } else if (type === 'image') {\n      item = createImage({\n        ...itemPosition,\n        ...imageStyle\n      });\n    } else if (type === 'custom' && renderCustomCallback) {\n      item = renderCustomCallback();\n    }\n    this.setItemAttributes(item, itemContent, itemPosition, type);\n    return item;\n  }\n\n  protected renderItemLine(itemLine: IItemLine, position: IPointLike, itemPosition: IPointLike) {\n    const { startSymbol, endSymbol, lineStyle, type = 'type-s' } = itemLine;\n    let points: IPointLike[] = [];\n    if (type === 'type-do') {\n      points = [\n        position,\n        {\n          x: (position.x + itemPosition.x) / 2,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-po') {\n      points = [\n        position,\n        {\n          x: itemPosition.x,\n          y: position.y\n        },\n        itemPosition\n      ];\n    } else if (type === 'type-op') {\n      points = [\n        position,\n        {\n          x: position.x,\n          y: itemPosition.y\n        },\n        itemPosition\n      ];\n    } else {\n      points = [position, itemPosition];\n    }\n\n    const line = new Segment({\n      points,\n      startSymbol,\n      endSymbol,\n      lineStyle\n    });\n    return line;\n  }\n\n  protected renderDecorativeLine(itemLine: IItemLine, itemPosition: IPointLike) {\n    const { lineStyle } = itemLine;\n    const decorativeLength = itemLine?.decorativeLine?.length || 10;\n    const itemAngle = this._line.getEndAngle() || 0;\n    const startPointOffsetX = (decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const startPointOffsetY = (decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    const endPointOffsetX = (-decorativeLength / 2) * Math.cos(itemAngle - Math.PI / 2);\n    const endPointOffsetY = (-decorativeLength / 2) * Math.sin(itemAngle - Math.PI / 2);\n    return createLine({\n      points: [\n        {\n          x: itemPosition.x + startPointOffsetX,\n          y: itemPosition.y + startPointOffsetY\n        },\n        {\n          x: itemPosition.x + endPointOffsetX,\n          y: itemPosition.y + endPointOffsetY\n        }\n      ],\n      ...lineStyle\n    });\n  }\n\n  protected renderMarker(container: IGroup) {\n    const { position, itemLine, itemContent } = this.attribute as MarkPointAttrs;\n    const itemPosition = {\n      x: position.x + (itemContent?.offsetX || 0),\n      y: position.y + (itemContent?.offsetY || 0)\n    };\n\n    if (itemLine?.visible) {\n      const line = this.renderItemLine(itemLine, position, itemPosition);\n      line.name = 'mark-point-line';\n      this._line = line;\n      container.add(line as unknown as INode);\n\n      if (itemLine?.decorativeLine?.visible) {\n        const decorativeLine = this.renderDecorativeLine(itemLine, itemPosition);\n        decorativeLine.name = 'mark-point-decorativeLine';\n        this._decorativeLine = decorativeLine;\n        container.add(decorativeLine as unknown as INode);\n      }\n    }\n\n    const item = this.renderItem(itemContent as any, itemPosition);\n    this._item = item;\n    container.add(item as unknown as INode);\n  }\n}\n"]}

package/es/marker/type.d.ts

@@ -0,0 +1,93 @@
+import { IGroup, IGroupGraphicAttribute, IImageGraphicAttribute, IPolygonAttribute, IRichTextGraphicAttribute, ISymbolGraphicAttribute } from '@visactor/vrender';
+import { IPointLike } from '@visactor/vutils';
+import { SegmentAttributes, SymbolAttributes } from '../segment';
+import { TagAttributes } from '../tag';
+export declare enum IMarkLineLabelPosition {
+    start = "start",
+    middle = "middle",
+    end = "end",
+    insideStartTop = "insideStartTop",
+    insideStartBottom = "insideStartBottom",
+    insideMiddleTop = "insideMiddleTop",
+    insideMiddleBottom = "insideMiddleBottom",
+    insideEndTop = "insideEndTop",
+    insideEndBottom = "insideEndBottom"
+}
+export declare enum IMarkAreaLabelPosition {
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom",
+    middle = "middle",
+    insideLeft = "insideLeft",
+    insideRight = "insideRight",
+    insideTop = "insideTop",
+    insideBottom = "insideBottom"
+}
+export declare enum IMarkPointItemPosition {
+    top = "top",
+    bottom = "bottom",
+    middle = "middle",
+    insideTop = "insideTop",
+    insideBottom = "insideBottom",
+    insideMiddle = "insideMiddle"
+}
+export type IMarkBackgroundAttributes = {
+    visible: boolean;
+    autoHeight?: boolean;
+    autoWidth?: boolean;
+} & Partial<SymbolAttributes>;
+export interface IMarkLabel extends Omit<TagAttributes, 'x' | 'y' | 'panel'> {
+    panel?: IMarkBackgroundAttributes;
+    formatMethod?: (text: string | string[], datum?: any) => string | string[];
+}
+export interface IMarkRef {
+    autoRotate?: boolean;
+    refX?: number;
+    refY?: number;
+    refAngle?: number;
+}
+export interface MarkerAttrs extends IGroupGraphicAttribute {
+    type?: 'line' | 'area' | 'point';
+    interactive?: boolean;
+    visible?: boolean;
+}
+export interface MarkLineAttrs extends MarkerAttrs, SegmentAttributes {
+    type?: 'line';
+    points: IPointLike[];
+    label?: {
+        position?: IMarkLineLabelPosition;
+    } & IMarkRef & IMarkLabel;
+}
+export interface MarkAreaAttrs extends MarkerAttrs {
+    type?: 'area';
+    points: IPointLike[];
+    label?: {
+        position?: IMarkAreaLabelPosition;
+    } & IMarkLabel;
+    areaStyle?: IPolygonAttribute;
+}
+export interface IItemContent extends IMarkRef {
+    type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';
+    position?: IMarkPointItemPosition;
+    offsetX?: number;
+    offsetY?: number;
+    symbolStyle?: ISymbolGraphicAttribute;
+    imageStyle?: IImageGraphicAttribute;
+    textStyle?: IMarkLabel;
+    richTextStyle?: IRichTextGraphicAttribute;
+    renderCustomCallback?: () => IGroup;
+}
+export type IItemLine = {
+    type?: 'type-s' | 'type-do' | 'type-po' | 'type-op';
+    visible?: boolean;
+    decorativeLine?: {
+        visible?: boolean;
+        length?: number;
+    };
+} & Omit<SegmentAttributes, 'points'>;
+export interface MarkPointAttrs extends Omit<MarkerAttrs, 'labelStyle'> {
+    position: IPointLike;
+    itemLine?: IItemLine;
+    itemContent?: IItemContent;
+}

package/es/marker/type.js

@@ -0,0 +1,27 @@
+export var IMarkLineLabelPosition;
+
+!function(IMarkLineLabelPosition) {
+    IMarkLineLabelPosition.start = "start", IMarkLineLabelPosition.middle = "middle", 
+    IMarkLineLabelPosition.end = "end", IMarkLineLabelPosition.insideStartTop = "insideStartTop", 
+    IMarkLineLabelPosition.insideStartBottom = "insideStartBottom", IMarkLineLabelPosition.insideMiddleTop = "insideMiddleTop", 
+    IMarkLineLabelPosition.insideMiddleBottom = "insideMiddleBottom", IMarkLineLabelPosition.insideEndTop = "insideEndTop", 
+    IMarkLineLabelPosition.insideEndBottom = "insideEndBottom";
+}(IMarkLineLabelPosition || (IMarkLineLabelPosition = {}));
+
+export var IMarkAreaLabelPosition;
+
+!function(IMarkAreaLabelPosition) {
+    IMarkAreaLabelPosition.left = "left", IMarkAreaLabelPosition.right = "right", IMarkAreaLabelPosition.top = "top", 
+    IMarkAreaLabelPosition.bottom = "bottom", IMarkAreaLabelPosition.middle = "middle", 
+    IMarkAreaLabelPosition.insideLeft = "insideLeft", IMarkAreaLabelPosition.insideRight = "insideRight", 
+    IMarkAreaLabelPosition.insideTop = "insideTop", IMarkAreaLabelPosition.insideBottom = "insideBottom";
+}(IMarkAreaLabelPosition || (IMarkAreaLabelPosition = {}));
+
+export var IMarkPointItemPosition;
+
+!function(IMarkPointItemPosition) {
+    IMarkPointItemPosition.top = "top", IMarkPointItemPosition.bottom = "bottom", IMarkPointItemPosition.middle = "middle", 
+    IMarkPointItemPosition.insideTop = "insideTop", IMarkPointItemPosition.insideBottom = "insideBottom", 
+    IMarkPointItemPosition.insideMiddle = "insideMiddle";
+}(IMarkPointItemPosition || (IMarkPointItemPosition = {}));
+//# sourceMappingURL=type.js.map

package/es/marker/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/marker/type.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,yCAAe,CAAA;IACf,2CAAiB,CAAA;IACjB,qCAAW,CAAA;IACX,2DAAiC,CAAA;IACjC,iEAAuC,CAAA;IACvC,6DAAmC,CAAA;IACnC,mEAAyC,CAAA;IACzC,uDAA6B,CAAA;IAC7B,6DAAmC,CAAA;AACrC,CAAC,EAVW,sBAAsB,KAAtB,sBAAsB,QAUjC;AAED,MAAM,CAAN,IAAY,sBAUX;AAVD,WAAY,sBAAsB;IAChC,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,mDAAyB,CAAA;IACzB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;AAC/B,CAAC,EAVW,sBAAsB,KAAtB,sBAAsB,QAUjC;AAED,MAAM,CAAN,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qCAAW,CAAA;IACX,2CAAiB,CAAA;IACjB,2CAAiB,CAAA;IACjB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;AAC/B,CAAC,EAPW,sBAAsB,KAAtB,sBAAsB,QAOjC","file":"type.js","sourcesContent":["import {\n  IGraphic,\n  IGroup,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  IPolygonAttribute,\n  IRichTextGraphicAttribute,\n  ISymbolGraphicAttribute\n} from '@visactor/vrender';\nimport { IPointLike } from '@visactor/vutils';\nimport { SegmentAttributes, SymbolAttributes } from '../segment';\nimport { TagAttributes } from '../tag';\n\nexport enum IMarkLineLabelPosition {\n  start = 'start',\n  middle = 'middle',\n  end = 'end',\n  insideStartTop = 'insideStartTop',\n  insideStartBottom = 'insideStartBottom',\n  insideMiddleTop = 'insideMiddleTop',\n  insideMiddleBottom = 'insideMiddleBottom',\n  insideEndTop = 'insideEndTop',\n  insideEndBottom = 'insideEndBottom'\n}\n\nexport enum IMarkAreaLabelPosition {\n  left = 'left',\n  right = 'right',\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideLeft = 'insideLeft',\n  insideRight = 'insideRight',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom'\n}\n\nexport enum IMarkPointItemPosition {\n  top = 'top',\n  bottom = 'bottom',\n  middle = 'middle',\n  insideTop = 'insideTop',\n  insideBottom = 'insideBottom',\n  insideMiddle = 'insideMiddle'\n}\n\nexport type IMarkBackgroundAttributes = {\n  /**\n   * 是否绘制背景层\n   */\n  visible: boolean;\n  /**\n   * TODO: 根据文字宽度进行背景 panel size自适应\n   */\n  autoHeight?: boolean;\n  /**\n   * TODO: 根据文高度度进行背景 panel size自适应\n   */\n  autoWidth?: boolean;\n} & Partial<SymbolAttributes>;\n\nexport interface IMarkLabel extends Omit<TagAttributes, 'x' | 'y' | 'panel'> {\n  /**\n   * 标签的背景面板配置\n   */\n  panel?: IMarkBackgroundAttributes;\n  /**\n   * 标签自定义格式\n   */\n  formatMethod?: (text: string | string[], datum?: any) => string | string[];\n}\n\nexport interface IMarkRef {\n  /**\n   * 自动旋转，沿着线的方向，默认 true\n   */\n  autoRotate?: boolean;\n  /**\n   * label 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * label 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * label 相对默认角度的偏移 （label跟随line的角度做自动旋转时，默认按照line的平行向量作为初始角度）\n   */\n  refAngle?: number;\n}\n\nexport interface MarkerAttrs extends IGroupGraphicAttribute {\n  type?: 'line' | 'area' | 'point';\n  /**\n   * 是否支持交互\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * 是否显示marker组件\n   * @default true\n   */\n  visible?: boolean;\n}\n\nexport interface MarkLineAttrs extends MarkerAttrs, SegmentAttributes {\n  type?: 'line';\n  /**\n   * 构成line的点: 如果是两个点，则为直线；多个点则为曲线\n   */\n  points: IPointLike[];\n  /**\n   * 标签\n   */\n  label?: {\n    /**\n     * label 相对line的位置\n     */\n    position?: IMarkLineLabelPosition;\n  } & IMarkRef &\n    IMarkLabel;\n}\n\nexport interface MarkAreaAttrs extends MarkerAttrs {\n  type?: 'area';\n  /**\n   * 构成area的点\n   */\n  points: IPointLike[];\n  /**\n   * 标签\n   */\n  label?: {\n    position?: IMarkAreaLabelPosition;\n  } & IMarkLabel;\n  /**\n   * area的样式\n   */\n  areaStyle?: IPolygonAttribute;\n}\n\nexport interface IItemContent extends IMarkRef {\n  /**\n   * 标注类型\n   */\n  type?: 'symbol' | 'text' | 'image' | 'richText' | 'custom';\n  position?: IMarkPointItemPosition;\n  /**\n   * x 方向偏移量\n   */\n  offsetX?: number;\n  /**\n   * y 方向偏移量\n   */\n  offsetY?: number;\n  /**\n   * type为symbol时, symbol的样式\n   */\n  symbolStyle?: ISymbolGraphicAttribute;\n  /**\n   * type为image时, image的样式\n   */\n  imageStyle?: IImageGraphicAttribute;\n  /**\n   * type为text时, text的配置\n   */\n  textStyle?: IMarkLabel;\n  /**\n   * type为rich text时, rich text的样式\n   */\n  richTextStyle?: IRichTextGraphicAttribute;\n  /**\n   * type为custom时，允许以callback的方式传入需要render的item\n   */\n  renderCustomCallback?: () => IGroup;\n}\n\nexport type IItemLine = {\n  /** TODO：'type-opo' */\n  type?: 'type-s' | 'type-do' | 'type-po' | 'type-op';\n  visible?: boolean;\n  /**\n   * 垂直于引导线的装饰线，参考案例: https://observablehq.com/@mikelotis/edmonton-population-history-line-chart\n   */\n  decorativeLine?: {\n    visible?: boolean;\n    length?: number;\n  };\n} & Omit<SegmentAttributes, 'points'>;\n\nexport interface MarkPointAttrs extends Omit<MarkerAttrs, 'labelStyle'> {\n  /**\n   * markPoint的位置（也是path的起点）\n   */\n  position: IPointLike;\n  /**\n   * 标注引导线\n   */\n  itemLine?: IItemLine;\n\n  /**\n   * 标注内容\n   */\n  itemContent?: IItemContent;\n}\n"]}

package/es/pager/index.d.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './pager';

package/es/pager/index.js

@@ -0,0 +1,4 @@
+export * from "./type";
+
+export * from "./pager";
+//# sourceMappingURL=index.js.map

package/es/pager/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pager/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC","file":"index.js","sourcesContent":["export * from './type';\nexport * from './pager';\n"]}

package/es/pager/pager.d.ts

@@ -0,0 +1,20 @@
+import { ISymbol, IText } from '@visactor/vrender';
+import { AbstractComponent } from '../core/base';
+import { PagerAttributes } from './type';
+export declare class Pager extends AbstractComponent<Required<PagerAttributes>> {
+    name: string;
+    private _current;
+    getCurrent(): number;
+    private _total;
+    preHandler: ISymbol | null;
+    nextHandler: ISymbol | null;
+    text: IText | null;
+    static defaultAttributes: Partial<PagerAttributes>;
+    constructor(attributes: PagerAttributes);
+    protected render(): void;
+    private _bindEvents;
+    private _onHover;
+    private _onUnHover;
+    private _onClick;
+    private _reset;
+}

package/es/pager/pager.js

@@ -0,0 +1,132 @@
+import { createGroup, createSymbol, createText, CustomEvent } from "@visactor/vrender";
+
+import { merge, normalizePadding, isNumber } from "@visactor/vutils";
+
+import { AbstractComponent } from "../core/base";
+
+import { measureTextSize } from "../util";
+
+const DEFAULT_HANDLER_STYLE = {
+    space: 8,
+    style: {
+        fill: !0,
+        fillColor: "rgb(47, 69, 84)",
+        cursor: "pointer",
+        size: 15
+    },
+    state: {
+        disable: {
+            fillColor: "rgb(170, 170, 170)",
+            cursor: "not-allowed"
+        },
+        hover: {}
+    }
+};
+
+export class Pager extends AbstractComponent {
+    getCurrent() {
+        return this._current;
+    }
+    constructor(attributes) {
+        super(merge({}, Pager.defaultAttributes, attributes)), this.name = "pager", this._current = 1, 
+        this._onHover = e => {
+            const target = e.target;
+            target.hasState("disable") || target.addState("hover");
+        }, this._onUnHover = e => {
+            e.target.removeState("hover");
+        }, this._onClick = e => {
+            var _a, _b;
+            const target = e.target;
+            if ("preHandler" === target.name) {
+                if (1 === this._current) return;
+                this._current -= 1, 1 === this._current ? target.addState("disable") : target.removeState("disable");
+                const changeEvent = new CustomEvent("toPrev", {
+                    current: this._current,
+                    total: this._total,
+                    direction: "pre"
+                });
+                changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+                this.dispatchEvent(changeEvent);
+            }
+            if ("nextHandler" === target.name) {
+                if (this._current === this._total) return;
+                this._current += 1, this._current === this._total ? target.addState("disable") : target.removeState("disable");
+                const changeEvent = new CustomEvent("toNext", {
+                    current: this._current,
+                    total: this._total,
+                    direction: "next"
+                });
+                changeEvent.manager = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.eventSystem.manager, 
+                this.dispatchEvent(changeEvent);
+            }
+            this._current > 1 && this.preHandler.removeState("disable"), this._current < this._total && this.nextHandler.removeState("disable"), 
+            this.text.setAttribute("text", `${this._current}/${this._total}`);
+        };
+    }
+    render() {
+        var _a;
+        this._reset();
+        const {layout: layout = "horizontal", handler: handler = DEFAULT_HANDLER_STYLE, total: total, defaultCurrent: defaultCurrent = 1, textStyle: textStyle, padding: padding = 0} = this.attribute;
+        this._current = defaultCurrent;
+        const parsedPadding = normalizePadding(padding), isHorizontal = "horizontal" === layout, container = createGroup({
+            x: 0,
+            y: 0
+        }), handlerStyle = handler.style || {}, handlerSize = handlerStyle.size || 15, handlerSpace = null !== (_a = handler.space) && void 0 !== _a ? _a : 8, handlerState = handler.state || {};
+        let {preShape: preShape, nextShape: nextShape} = handler;
+        preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
+        const preHandler = createSymbol(Object.assign(Object.assign({
+            strokeBoundsBuffer: 0
+        }, handlerStyle), {
+            x: 0,
+            y: 0,
+            symbolType: preShape,
+            size: handlerSize
+        }));
+        preHandler.states = handlerState, preHandler.name = "preHandler", this.preHandler = preHandler, 
+        container.add(preHandler);
+        const {width: maxTextWidth, height: maxTextHeight} = measureTextSize(`${total}/${total}`, Object.assign({
+            textAlign: "center",
+            textBaseline: "middle"
+        }, textStyle)), handlerSizeX = isNumber(handlerSize) ? handlerSize : handlerSize[0], handlerSizeY = isNumber(handlerSize) ? handlerSize : handlerSize[1], text = createText(Object.assign({
+            x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
+            y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
+            text: `${defaultCurrent}/${total}`,
+            textAlign: "center",
+            textBaseline: "middle",
+            lineHeight: null == textStyle ? void 0 : textStyle.fontSize
+        }, textStyle));
+        this.text = text, container.add(text);
+        const nextHandler = createSymbol(Object.assign(Object.assign({
+            strokeBoundsBuffer: 0
+        }, handlerStyle), {
+            x: isHorizontal ? handlerSizeX + 2 * handlerSpace + maxTextWidth : 0,
+            y: isHorizontal ? 0 : handlerSizeY + 2 * handlerSpace + maxTextHeight,
+            symbolType: nextShape,
+            size: handlerSize
+        }));
+        nextHandler.name = "nextHandler", nextHandler.states = handlerState, this.nextHandler = nextHandler, 
+        container.add(nextHandler), 1 === this._total ? (preHandler.addState("disable"), 
+        nextHandler.addState("disable")) : 1 === this._current ? preHandler.addState("disable") : this._current === total && nextHandler.addState("disable");
+        const containerBounds = container.AABBBounds, width = containerBounds.width(), height = containerBounds.height();
+        container.translateTo(0 - containerBounds.x1 + parsedPadding[3], 0 - containerBounds.y1 + parsedPadding[0]), 
+        this.add(container), this.attribute.width = width + parsedPadding[1] + parsedPadding[3], 
+        this.attribute.height = height + parsedPadding[0] + parsedPadding[2], this._bindEvents();
+    }
+    _bindEvents() {
+        this.preHandler && (this.preHandler.addEventListener("pointerenter", this._onHover), 
+        this.preHandler.addEventListener("pointerleave", this._onUnHover), this.preHandler.addEventListener("pointerdown", this._onClick)), 
+        this.nextHandler && (this.nextHandler.addEventListener("pointerenter", this._onHover), 
+        this.nextHandler.addEventListener("pointerleave", this._onUnHover), this.nextHandler.addEventListener("pointerdown", this._onClick));
+    }
+    _reset() {
+        this.removeAllChild(), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
+    }
+}
+
+Pager.defaultAttributes = {
+    handler: DEFAULT_HANDLER_STYLE,
+    textStyle: {
+        fillColor: "rgb(51, 51, 51)",
+        fontSize: 12
+    }
+};

package/es/pager/pager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pager/pager.ts"],"names":[],"mappings":"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","file":"pager.js","sourcesContent":["/**\n * @description 翻页器\n */\nimport {\n  createGroup,\n  createSymbol,\n  createText,\n  ISymbol,\n  IText,\n  FederatedPointerEvent,\n  CustomEvent\n} from '@visactor/vrender';\nimport { merge, normalizePadding, get, isNumber } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { measureTextSize } from '../util';\nimport { PagerAttributes } from './type';\n\nconst DEFAULT_HANDLER_STYLE: PagerAttributes['handler'] = {\n  space: 8,\n  style: {\n    fill: true,\n    fillColor: 'rgb(47, 69, 84)',\n    cursor: 'pointer',\n    size: 15\n  },\n  state: {\n    disable: {\n      fillColor: 'rgb(170, 170, 170)',\n      cursor: 'not-allowed'\n    },\n    hover: {}\n  }\n};\n\nexport class Pager extends AbstractComponent<Required<PagerAttributes>> {\n  name = 'pager';\n\n  private _current = 1;\n  getCurrent() {\n    return this._current;\n  }\n\n  private _total!: number;\n  preHandler!: ISymbol | null;\n  nextHandler!: ISymbol | null;\n  text!: IText | null;\n\n  static defaultAttributes: Partial<PagerAttributes> = {\n    handler: DEFAULT_HANDLER_STYLE,\n    textStyle: {\n      fillColor: 'rgb(51, 51, 51)',\n      fontSize: 12\n    }\n  };\n\n  constructor(attributes: PagerAttributes) {\n    super(merge({}, Pager.defaultAttributes, attributes));\n  }\n\n  protected render() {\n    this._reset();\n    const {\n      layout = 'horizontal',\n      handler = DEFAULT_HANDLER_STYLE,\n      total,\n      defaultCurrent = 1,\n      textStyle,\n      padding = 0\n    } = this.attribute;\n\n    this._current = defaultCurrent;\n    const parsedPadding = normalizePadding(padding);\n    const isHorizontal = layout === 'horizontal';\n\n    const container = createGroup({\n      x: 0,\n      y: 0\n    });\n\n    const handlerStyle = handler.style || {};\n    const handlerSize = handlerStyle.size || 15;\n    const handlerSpace = handler.space ?? 8;\n    const handlerState = handler.state || {};\n\n    let { preShape, nextShape } = handler;\n    if (!preShape) {\n      preShape = isHorizontal ? 'triangleLeft' : 'triangleUp';\n    }\n    if (!nextShape) {\n      nextShape = isHorizontal ? 'triangleRight' : 'triangleDown';\n    }\n\n    const preHandler = createSymbol({\n      strokeBoundsBuffer: 0,\n      ...handlerStyle,\n      x: 0,\n      y: 0,\n      symbolType: preShape,\n      size: handlerSize\n    });\n    preHandler.states = handlerState;\n    preHandler.name = 'preHandler';\n    this.preHandler = preHandler;\n    container.add(preHandler);\n\n    // 获取文本的最大长度，如果不固定的话随着文本的变化整体会发生抖动\n    const { width: maxTextWidth, height: maxTextHeight } = measureTextSize(`${total}/${total}`, {\n      textAlign: 'center',\n      textBaseline: 'middle',\n      ...textStyle\n    });\n\n    const handlerSizeX = isNumber(handlerSize) ? handlerSize : handlerSize[0];\n    const handlerSizeY = isNumber(handlerSize) ? handlerSize : handlerSize[1];\n\n    const text = createText({\n      x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,\n      y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,\n      text: `${defaultCurrent}/${total}`,\n      textAlign: 'center',\n      textBaseline: 'middle',\n      lineHeight: textStyle?.fontSize,\n      ...textStyle\n    });\n    this.text = text;\n    container.add(text);\n\n    const nextHandler = createSymbol({\n      strokeBoundsBuffer: 0,\n      ...handlerStyle,\n      x: isHorizontal ? handlerSizeX + handlerSpace * 2 + maxTextWidth : 0,\n      y: isHorizontal ? 0 : handlerSizeY + handlerSpace * 2 + maxTextHeight,\n      symbolType: nextShape,\n      size: handlerSize\n    });\n    nextHandler.name = 'nextHandler';\n    nextHandler.states = handlerState;\n    this.nextHandler = nextHandler;\n\n    container.add(nextHandler);\n\n    if (this._total === 1) {\n      preHandler.addState('disable');\n      nextHandler.addState('disable');\n    } else if (this._current === 1) {\n      preHandler.addState('disable');\n    } else if (this._current === total) {\n      nextHandler.addState('disable');\n    }\n\n    const containerBounds = container.AABBBounds;\n    const width = containerBounds.width();\n    const height = containerBounds.height();\n\n    container.translateTo(0 - containerBounds.x1 + parsedPadding[3], 0 - containerBounds.y1 + parsedPadding[0]);\n    this.add(container);\n\n    this.attribute.width = width + parsedPadding[1] + parsedPadding[3];\n    this.attribute.height = height + parsedPadding[0] + parsedPadding[2];\n\n    this._bindEvents();\n  }\n\n  private _bindEvents(): void {\n    if (this.preHandler) {\n      this.preHandler.addEventListener('pointerenter', this._onHover as EventListenerOrEventListenerObject);\n      this.preHandler.addEventListener('pointerleave', this._onUnHover as EventListenerOrEventListenerObject);\n      this.preHandler.addEventListener('pointerdown', this._onClick as EventListenerOrEventListenerObject);\n    }\n\n    if (this.nextHandler) {\n      this.nextHandler.addEventListener('pointerenter', this._onHover as EventListenerOrEventListenerObject);\n      this.nextHandler.addEventListener('pointerleave', this._onUnHover as EventListenerOrEventListenerObject);\n      this.nextHandler.addEventListener('pointerdown', this._onClick as EventListenerOrEventListenerObject);\n    }\n  }\n\n  private _onHover = (e: FederatedPointerEvent) => {\n    const target = e.target as unknown as ISymbol;\n    if (!target.hasState('disable')) {\n      target.addState('hover');\n    }\n  };\n\n  private _onUnHover = (e: FederatedPointerEvent) => {\n    const target = e.target as unknown as ISymbol;\n    target.removeState('hover');\n  };\n\n  private _onClick = (e: FederatedPointerEvent) => {\n    const target = e.target as unknown as ISymbol;\n    if (target.name === 'preHandler') {\n      if (this._current === 1) {\n        return;\n      }\n      this._current -= 1;\n      if (this._current === 1) {\n        target.addState('disable');\n      } else {\n        target.removeState('disable');\n      }\n      const changeEvent = new CustomEvent('toPrev', {\n        current: this._current,\n        total: this._total,\n        direction: 'pre'\n      });\n      // FIXME: 需要在 vrender 的事件系统支持\n      // @ts-ignore\n      changeEvent.manager = this.stage?.eventSystem.manager;\n      this.dispatchEvent(changeEvent);\n    }\n\n    if (target.name === 'nextHandler') {\n      if (this._current === this._total) {\n        return;\n      }\n      this._current += 1;\n\n      if (this._current === this._total) {\n        target.addState('disable');\n      } else {\n        target.removeState('disable');\n      }\n\n      const changeEvent = new CustomEvent('toNext', {\n        current: this._current,\n        total: this._total,\n        direction: 'next'\n      });\n      // FIXME: 需要在 vrender 的事件系统支持\n      // @ts-ignore\n      changeEvent.manager = this.stage?.eventSystem.manager;\n      this.dispatchEvent(changeEvent);\n    }\n\n    if (this._current > 1) {\n      (this.preHandler as ISymbol).removeState('disable');\n    }\n    if (this._current < this._total) {\n      (this.nextHandler as ISymbol).removeState('disable');\n    }\n\n    (this.text as IText).setAttribute('text', `${this._current}/${this._total}`);\n  };\n\n  private _reset() {\n    this.removeAllChild();\n    this._current = 1;\n    this._total = this.attribute.total as number;\n    this.preHandler = this.nextHandler = this.text = null;\n  }\n}\n"]}

package/es/pager/type.d.ts

@@ -0,0 +1,19 @@
+import { ISymbolGraphicAttribute, IGroupGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender';
+import { Padding } from '../core/type';
+export type PagerAttributes = {
+    layout?: 'horizontal' | 'vertical' | string;
+    handler?: {
+        space?: number;
+        preShape?: string;
+        nextShape?: string;
+        style?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;
+        state?: {
+            hover?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;
+            disable?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;
+        };
+    };
+    total: number;
+    defaultCurrent?: number;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    padding?: Padding;
+} & Partial<IGroupGraphicAttribute>;

package/es/pager/type.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=type.js.map

package/es/pager/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pager/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import { ISymbolGraphicAttribute, IGroupGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender';\nimport { Padding } from '../core/type';\n\nexport type PagerAttributes = {\n  /**\n   * 默认为水平布局\n   * - 'horizontal' 水平布局\n   * - 'vertical' 垂直布局\n   */\n  layout?: 'horizontal' | 'vertical' | string;\n  // /**\n  //  * 按钮大小，默认 15\n  //  */\n  // handlerSize?: number;\n  // /**\n  //  * 按钮同文本内容区的间距，默认为 8\n  //  */\n  // handlerSpace?: number;\n  /**\n   * handler 相关样式配置\n   */\n  handler?: {\n    /**\n     * 按钮同文本内容区的间距，默认为 8\n     */\n    space?: number;\n    /**\n     * 上一页按钮形状\n     */\n    preShape?: string;\n    /**\n     * 下一页按钮形状\n     */\n    nextShape?: string;\n    style?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;\n    state?: {\n      /**\n       * hover 状态下的样式\n       */\n      hover?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;\n      /**\n       * 不可用状态样式\n       */\n      disable?: Omit<Partial<ISymbolGraphicAttribute>, 'symbolType'>;\n    };\n  };\n  /**\n   * 总页数\n   */\n  total: number;\n  /**\n   * 默认当前页数\n   */\n  defaultCurrent?: number;\n  /**\n   * 文本样式配置\n   */\n  textStyle?: Partial<ITextGraphicAttribute>;\n  /** 整体的内边距配置 */\n  padding?: Padding;\n} & Partial<IGroupGraphicAttribute>;\n"]}

package/es/player/base-player.d.ts

@@ -0,0 +1,103 @@
+import { AbstractComponent } from '../core/base';
+import { Slider } from '../slider';
+import { Controller } from './controller';
+import { PlayerEventEnum, PlayerAttributes } from './type';
+export declare class BasePlayer<T> extends AbstractComponent<Required<PlayerAttributes>> {
+    static defaultAttributes: {
+        visible: boolean;
+        data: any[];
+        interval: number;
+        orient: string;
+        align: string;
+        size: {
+            height: number;
+            width: number;
+        };
+        slider: {
+            space: number;
+            dx: number;
+            dy: number;
+            railStyle: {
+                borderRadius: number;
+            };
+            trackStyle: {};
+            handlerStyle: {};
+        };
+        controller: {
+            start: {
+                key: string;
+                position: string;
+                space: number;
+                style: {
+                    x: number;
+                    y: number;
+                    dx: number;
+                    dy: number;
+                    size: number;
+                };
+                order: number;
+            };
+            pause: {
+                key: string;
+                position: string;
+                style: {
+                    x: number;
+                    y: number;
+                    dx: number;
+                    dy: number;
+                    size: number;
+                };
+                order: number;
+                space: number;
+            };
+            forward: {
+                key: string;
+                position: string;
+                style: {
+                    x: number;
+                    y: number;
+                    dx: number;
+                    dy: number;
+                    size: number;
+                };
+                order: number;
+                space: number;
+            };
+            backward: {
+                key: string;
+                position: string;
+                style: {
+                    x: number;
+                    y: number;
+                    dx: number;
+                    dy: number;
+                    size: number;
+                };
+                order: number;
+                space: number;
+            };
+        };
+    };
+    protected _slider: Slider;
+    protected _controller: Controller;
+    protected _data: any[];
+    protected _minIndex: number;
+    protected _maxIndex: number;
+    private _railStyle;
+    private _trackStyle;
+    private _handlerStyle;
+    private _start;
+    private _pause;
+    private _forward;
+    private _backward;
+    private _size;
+    private _orient;
+    private _layoutInfo;
+    constructor(attributes: T);
+    _initAttributes(): void;
+    private _initLayoutInfo;
+    private _initSlider;
+    private _initController;
+    render(): void;
+    dispatchCustomEvent(eventType: PlayerEventEnum, dataIndex: number): void;
+}