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

package/es/player/base-player.js

@@ -0,0 +1,200 @@
+import { CustomEvent } from "@visactor/vrender";
+
+import { isNumber, isValidNumber, max, merge } from "@visactor/vutils";
+
+import { AbstractComponent } from "../core/base";
+
+import { Slider } from "../slider";
+
+import { Controller } from "./controller";
+
+import { RailDefaultSize, defaultControllerAttributes } from "./constant";
+
+import { isHorizontal } from "./utils";
+
+export class BasePlayer extends AbstractComponent {
+    constructor(attributes) {
+        super(merge({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._layoutInfo = {}, 
+        this._initSlider = () => {
+            var _a, _b, _c;
+            let handlerSize;
+            isValidNumber(this._handlerStyle.size) ? handlerSize = this._handlerStyle.size : this._handlerStyle.size && this._handlerStyle.size.length && (handlerSize = max(this._handlerStyle.size[0], this._handlerStyle.size[1]));
+            const attrs = {
+                min: this._minIndex,
+                max: this._maxIndex,
+                value: null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : 0,
+                railWidth: this._railStyle.width,
+                railHeight: this._railStyle.height,
+                railStyle: this._railStyle,
+                trackStyle: this._trackStyle,
+                handlerSize: isValidNumber(handlerSize) ? handlerSize : void 0,
+                handlerStyle: this._handlerStyle,
+                dy: this.attribute.slider.dy,
+                dx: this.attribute.slider.dx,
+                slidable: !0,
+                visible: !0,
+                range: !1,
+                handlerText: {
+                    visible: !1
+                },
+                startText: {
+                    visible: !1
+                },
+                endText: {
+                    visible: !1
+                }
+            };
+            if (isHorizontal(this._orient)) {
+                const railWidth = Math.max(0, this._layoutInfo.slider.size), railHeight = null !== (_b = this._railStyle.height) && void 0 !== _b ? _b : RailDefaultSize[1];
+                attrs.layout = "horizontal", attrs.railHeight = railHeight, attrs.railWidth = railWidth, 
+                attrs.x = this._layoutInfo.slider.x, attrs.y = this._layoutInfo.slider.y;
+            } else {
+                const railHeight = Math.max(0, this._layoutInfo.slider.size), railWidth = null !== (_c = this._railStyle.width) && void 0 !== _c ? _c : RailDefaultSize[1];
+                attrs.layout = "vertical", attrs.railWidth = railWidth, attrs.railHeight = railHeight, 
+                attrs.x = this._layoutInfo.slider.x, attrs.y = this._layoutInfo.slider.y;
+            }
+            this._slider = new Slider(attrs), this.add(this._slider);
+        }, this._initController = () => {
+            const attrs = {
+                visible: !0,
+                start: this._start,
+                pause: this._pause,
+                forward: this._forward,
+                backward: this._backward
+            };
+            isHorizontal(this._orient) ? (attrs.layout = "horizontal", attrs.start = {
+                style: Object.assign(Object.assign({}, attrs.start.style), {
+                    x: this._layoutInfo.start.x,
+                    y: this._layoutInfo.start.y
+                })
+            }, attrs.pause = {
+                style: Object.assign(Object.assign({}, attrs.pause.style), {
+                    x: this._layoutInfo.start.x,
+                    y: this._layoutInfo.start.y
+                })
+            }, attrs.backward = {
+                style: Object.assign(Object.assign({}, attrs.backward.style), {
+                    x: this._layoutInfo.backward.x,
+                    y: this._layoutInfo.backward.y
+                })
+            }, attrs.forward = {
+                style: Object.assign(Object.assign({}, attrs.forward.style), {
+                    x: this._layoutInfo.forward.x,
+                    y: this._layoutInfo.forward.y
+                })
+            }) : (attrs.layout = "vertical", attrs.start = {
+                style: Object.assign(Object.assign({}, attrs.start.style), {
+                    x: this._layoutInfo.start.x,
+                    y: this._layoutInfo.start.y
+                })
+            }, attrs.pause = {
+                style: Object.assign(Object.assign({}, attrs.pause.style), {
+                    x: this._layoutInfo.start.x,
+                    y: this._layoutInfo.start.y
+                })
+            }, attrs.backward = {
+                style: Object.assign(Object.assign({}, attrs.backward.style), {
+                    x: this._layoutInfo.backward.x,
+                    y: this._layoutInfo.backward.y
+                })
+            }, attrs.forward = {
+                style: Object.assign(Object.assign({}, attrs.forward.style), {
+                    x: this._layoutInfo.forward.x,
+                    y: this._layoutInfo.forward.y
+                })
+            }), this._controller = new Controller(attrs), this.add(this._controller);
+        }, this._initAttributes(), this._initLayoutInfo(), this._initController(), this._initSlider();
+    }
+    _initAttributes() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        this._size = this.attribute.size, this._orient = this.attribute.orient, this._data = this.attribute.data, 
+        this._minIndex = 0, this._maxIndex = this._data.length - 1, this._railStyle = Object.assign({}, null === (_b = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.slider) || void 0 === _b ? void 0 : _b.railStyle), 
+        this._trackStyle = Object.assign({}, null === (_d = null === (_c = this.attribute) || void 0 === _c ? void 0 : _c.slider) || void 0 === _d ? void 0 : _d.trackStyle), 
+        this._handlerStyle = Object.assign({}, null === (_f = null === (_e = this.attribute) || void 0 === _e ? void 0 : _e.slider) || void 0 === _f ? void 0 : _f.handlerStyle), 
+        this._start = Object.assign({}, null === (_h = null === (_g = this.attribute) || void 0 === _g ? void 0 : _g.controller) || void 0 === _h ? void 0 : _h.start), 
+        this._pause = Object.assign({}, null === (_k = null === (_j = this.attribute) || void 0 === _j ? void 0 : _j.controller) || void 0 === _k ? void 0 : _k.pause), 
+        this._forward = Object.assign({}, null === (_m = null === (_l = this.attribute) || void 0 === _l ? void 0 : _l.controller) || void 0 === _m ? void 0 : _m.forward), 
+        this._backward = Object.assign({}, null === (_p = null === (_o = this.attribute) || void 0 === _o ? void 0 : _o.controller) || void 0 === _p ? void 0 : _p.backward);
+    }
+    _initLayoutInfo() {
+        var _a, _b, _c;
+        const controllers = [ this._start, this._backward, this._forward ].sort(((a, b) => a.order - b.order)), startControllers = controllers.filter((d => "end" !== d.position)), endControllers = controllers.filter((d => "end" === d.position)), railSectionLength = null !== (_a = isHorizontal(this._orient) ? this._railStyle.height : this._railStyle.width) && void 0 !== _a ? _a : RailDefaultSize[1], controllerPx = controllers.reduce(((len, controller) => {
+            const size = controller.style.size, maxSize = isNumber(size) ? size : max(size[0], size[1]);
+            return len + controller.space + maxSize;
+        }), 0), sliderPx = (isHorizontal(this._orient) ? null === (_b = this._size) || void 0 === _b ? void 0 : _b.width : null === (_c = this._size) || void 0 === _c ? void 0 : _c.height) - controllerPx, railPx = sliderPx - this.attribute.slider.space, startPx = startControllers.reduce(((px, controller) => {
+            const {key: key, space: space, style: {size: size}} = controller, maxSize = isNumber(size) ? size : max(size[0], size[1]);
+            return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
+                size: maxSize,
+                x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,
+                y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space
+            }), px + space + maxSize;
+        }), 0);
+        this._layoutInfo.slider = Object.assign(Object.assign({}, this._layoutInfo.slider), {
+            size: railPx,
+            x: isHorizontal(this._orient) ? startPx + this.attribute.slider.space : (this._size.width - railSectionLength) / 2,
+            y: isHorizontal(this._orient) ? (this._size.height - railSectionLength) / 2 : startPx + this.attribute.slider.space
+        }), endControllers.reduce(((px, controller) => {
+            const {key: key, space: space, style: {size: size}} = controller, maxSize = isNumber(size) ? size : max(size[0], size[1]);
+            return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
+                size: maxSize,
+                x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,
+                y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space
+            }), px + space + maxSize;
+        }), startPx + sliderPx);
+    }
+    render() {
+        this._slider.render(), this._controller.render();
+    }
+    dispatchCustomEvent(eventType, dataIndex) {
+        var _a;
+        const changeEvent = new CustomEvent(eventType, {
+            eventType: eventType,
+            index: dataIndex,
+            value: this._data[dataIndex]
+        });
+        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+        this.dispatchEvent(changeEvent);
+    }
+}
+
+BasePlayer.defaultAttributes = {
+    visible: !0,
+    data: [],
+    interval: 1e3,
+    orient: "bottom",
+    align: "center",
+    size: {
+        height: 20,
+        width: 300
+    },
+    slider: {
+        space: 10,
+        dx: 0,
+        dy: 0,
+        railStyle: {
+            borderRadius: 5
+        },
+        trackStyle: {},
+        handlerStyle: {}
+    },
+    controller: {
+        start: Object.assign(Object.assign({}, defaultControllerAttributes), {
+            key: "start",
+            position: "start",
+            space: 0
+        }),
+        pause: Object.assign(Object.assign({}, defaultControllerAttributes), {
+            key: "pause",
+            position: "start"
+        }),
+        forward: Object.assign(Object.assign({}, defaultControllerAttributes), {
+            key: "forward",
+            position: "end"
+        }),
+        backward: Object.assign(Object.assign({}, defaultControllerAttributes), {
+            key: "backward",
+            position: "start"
+        })
+    }
+};
+//# sourceMappingURL=base-player.js.map

package/es/player/base-player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/base-player.ts"],"names":[],"mappings":"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","file":"base-player.js","sourcesContent":["import { CustomEvent, INode } from '@visactor/vrender';\nimport { isNumber, isValidNumber, max, merge } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { OrientType } from '../interface';\nimport { Slider, SliderAttributes } from '../slider';\nimport { Controller, ControllerAttributes } from './controller';\nimport {\n  Datum,\n  PlayerEventEnum,\n  PlayerAttributes,\n  RailStyleType,\n  ControllerType,\n  TrackStyleType,\n  HandlerStyleType\n} from './type';\nimport { RailDefaultSize, defaultControllerAttributes } from './constant';\nimport { isHorizontal } from './utils';\n\n/**\n * 基本播放器组件\n * 提供最基本的布局能力,\n */\nexport class BasePlayer<T> extends AbstractComponent<Required<PlayerAttributes>> {\n  static defaultAttributes = {\n    visible: true,\n    data: [] as Datum[],\n    interval: 1000,\n    orient: 'bottom',\n    align: 'center',\n    size: {\n      height: 20,\n      width: 300\n    },\n    slider: {\n      space: 10,\n      dx: 0,\n      dy: 0,\n      railStyle: {\n        borderRadius: 5\n      },\n      trackStyle: {},\n      handlerStyle: {}\n    },\n    controller: {\n      start: { ...defaultControllerAttributes, key: 'start', position: 'start', space: 0 },\n      pause: { ...defaultControllerAttributes, key: 'pause', position: 'start' },\n      forward: { ...defaultControllerAttributes, key: 'forward', position: 'end' },\n      backward: { ...defaultControllerAttributes, key: 'backward', position: 'start' }\n    }\n  };\n\n  // 组件属性\n  protected _slider: Slider;\n  protected _controller: Controller;\n\n  // 数据属性\n  protected _data = [] as Datum[];\n  protected _minIndex: number;\n  protected _maxIndex: number;\n\n  // 滑轨属性\n  private _railStyle: RailStyleType;\n  private _trackStyle: TrackStyleType;\n  private _handlerStyle: HandlerStyleType;\n\n  // 控件属性\n  private _start: ControllerType;\n  private _pause: ControllerType;\n  private _forward: ControllerType;\n  private _backward: ControllerType;\n\n  // 布局属性\n  private _size: { width: number; height: number };\n  private _orient: OrientType;\n\n  private _layoutInfo: {\n    // 滚动条位置\n    slider?: { x: number; y: number; size: number };\n\n    // 控件位置\n    start?: { x: number; y: number; size: number };\n    pause?: { x: number; y: number; size: number };\n    backward?: { x: number; y: number; size: number };\n    forward?: { x: number; y: number; size: number };\n  } = {};\n\n  constructor(attributes: T) {\n    super(merge({}, BasePlayer.defaultAttributes, attributes));\n    // 先初始化属性, 再初始化Slider、Controller, 最后初始化事件.\n    this._initAttributes();\n    this._initLayoutInfo();\n    this._initController();\n    this._initSlider();\n  }\n\n  /**\n   * 初始化属性\n   */\n  _initAttributes() {\n    // 基本布局属性\n    this._size = this.attribute.size;\n    this._orient = this.attribute.orient;\n\n    // Slider范围, 起点一定要从0开始\n    this._data = this.attribute.data;\n    this._minIndex = 0;\n    this._maxIndex = this._data.length - 1;\n\n    // 轨道样式\n    this._railStyle = { ...this.attribute?.slider?.railStyle };\n    this._trackStyle = { ...this.attribute?.slider?.trackStyle };\n    this._handlerStyle = { ...this.attribute?.slider?.handlerStyle };\n\n    // 控制器样式\n    this._start = { ...this.attribute?.controller?.start };\n    this._pause = { ...this.attribute?.controller?.pause };\n    this._forward = { ...this.attribute?.controller?.forward };\n    this._backward = { ...this.attribute?.controller?.backward };\n  }\n\n  private _initLayoutInfo() {\n    // 控制器\n    const controllers = [this._start, this._backward, this._forward].sort((a, b) => a.order - b.order);\n    // 在开始位置的控制器\n    const startControllers = controllers.filter(d => d.position !== 'end');\n    // 在结束位置的控制器\n    const endControllers = controllers.filter(d => d.position === 'end');\n    // 滑轨横切面长度\n    const railSectionLength =\n      (isHorizontal(this._orient) ? this._railStyle.height : this._railStyle.width) ?? RailDefaultSize[1];\n\n    // 1. 计算所有组件自身占据的宽度 or 高度\n    const controllerPx = controllers.reduce((len, controller) => {\n      const size = controller.style.size;\n      const maxSize = isNumber(size) ? size : max(size[0], size[1]);\n      return len + controller.space + maxSize;\n    }, 0);\n\n    // 2. 计算slider的总占据像素\n    const sliderPx = (isHorizontal(this._orient) ? this._size?.width : this._size?.height) - controllerPx;\n\n    // 3. 计算slider滑轨的总占据像素\n    const railPx = sliderPx - this.attribute.slider.space;\n\n    // 4. 计算起点控件坐标\n    const startPx = startControllers.reduce((px, controller) => {\n      const {\n        key,\n        space,\n        style: { size }\n      } = controller;\n      const maxSize = isNumber(size) ? size : max(size[0], size[1]);\n      this._layoutInfo[key] = {\n        ...this._layoutInfo[key],\n        size: maxSize,\n        x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,\n        y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space\n      };\n      return px + space + maxSize;\n    }, 0);\n\n    // 5. 计算slider的起点坐标\n    this._layoutInfo.slider = {\n      ...this._layoutInfo.slider,\n      size: railPx,\n      x: isHorizontal(this._orient)\n        ? startPx + this.attribute.slider.space\n        : (this._size.width - railSectionLength) / 2,\n      y: isHorizontal(this._orient)\n        ? (this._size.height - railSectionLength) / 2\n        : startPx + this.attribute.slider.space\n    };\n\n    // 6. 计算终点控件坐标\n    endControllers.reduce((px, controller) => {\n      const {\n        key,\n        space,\n        style: { size }\n      } = controller;\n      const maxSize = isNumber(size) ? size : max(size[0], size[1]);\n      this._layoutInfo[key] = {\n        ...this._layoutInfo[key],\n        size: maxSize,\n        x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,\n        y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space\n      };\n      return px + space + maxSize;\n    }, startPx + sliderPx);\n  }\n\n  /**\n   * 初始化滑动条\n   */\n  private _initSlider = () => {\n    let handlerSize;\n    if (isValidNumber(this._handlerStyle.size)) {\n      handlerSize = this._handlerStyle.size;\n    } else if (this._handlerStyle.size && this._handlerStyle.size.length) {\n      handlerSize = max(this._handlerStyle.size[0], this._handlerStyle.size[1]);\n    }\n\n    const attrs: SliderAttributes = {\n      // 重要参数\n      min: this._minIndex,\n      max: this._maxIndex,\n      value: this.attribute.dataIndex ?? 0,\n      railWidth: this._railStyle.width,\n      railHeight: this._railStyle.height,\n      railStyle: this._railStyle,\n      trackStyle: this._trackStyle,\n      handlerSize: isValidNumber(handlerSize) ? handlerSize : undefined,\n      handlerStyle: this._handlerStyle,\n      // 不重要, 但需要预设的参数\n      dy: this.attribute.slider.dy,\n      dx: this.attribute.slider.dx,\n      slidable: true,\n      visible: true,\n      range: false,\n      handlerText: { visible: false },\n      startText: { visible: false },\n      endText: { visible: false }\n    };\n\n    // 横向布局\n    if (isHorizontal(this._orient)) {\n      // 滑动条水平居中\n      const railWidth = Math.max(0, this._layoutInfo.slider.size);\n      const railHeight = this._railStyle.height ?? RailDefaultSize[1];\n\n      // 属性修改\n      attrs.layout = 'horizontal';\n      attrs.railHeight = railHeight;\n      attrs.railWidth = railWidth;\n      attrs.x = this._layoutInfo.slider.x;\n      attrs.y = this._layoutInfo.slider.y;\n    }\n    // 纵向布局\n    else {\n      // 滑动条垂直居中\n      const railHeight = Math.max(0, this._layoutInfo.slider.size);\n      const railWidth = this._railStyle.width ?? RailDefaultSize[1];\n\n      // 属性修改\n      attrs.layout = 'vertical';\n      attrs.railWidth = railWidth;\n      attrs.railHeight = railHeight;\n      attrs.x = this._layoutInfo.slider.x;\n      attrs.y = this._layoutInfo.slider.y;\n    }\n\n    this._slider = new Slider(attrs);\n    this.add(this._slider as unknown as INode);\n  };\n\n  /**\n   * 初始化控制器\n   */\n  private _initController = () => {\n    const attrs: ControllerAttributes = {\n      visible: true,\n      start: this._start,\n      pause: this._pause,\n      forward: this._forward,\n      backward: this._backward\n    };\n    // 横向布局\n    if (isHorizontal(this._orient)) {\n      attrs.layout = 'horizontal';\n      attrs.start = {\n        style: {\n          ...attrs.start.style,\n          x: this._layoutInfo.start.x,\n          y: this._layoutInfo.start.y\n        }\n      };\n      attrs.pause = {\n        // 暂停按钮, 复用开始按钮的布局\n        style: {\n          ...attrs.pause.style,\n          x: this._layoutInfo.start.x,\n          y: this._layoutInfo.start.y\n        }\n      };\n      attrs.backward = {\n        style: {\n          ...attrs.backward.style,\n          x: this._layoutInfo.backward.x,\n          y: this._layoutInfo.backward.y\n        }\n      };\n      attrs.forward = {\n        style: {\n          ...attrs.forward.style,\n          x: this._layoutInfo.forward.x,\n          y: this._layoutInfo.forward.y\n        }\n      };\n    }\n    // 纵向布局\n    else {\n      attrs.layout = 'vertical';\n      attrs.start = {\n        style: {\n          ...attrs.start.style,\n          x: this._layoutInfo.start.x,\n          y: this._layoutInfo.start.y\n        }\n      };\n      attrs.pause = {\n        style: {\n          ...attrs.pause.style,\n          // 暂停按钮, 复用开始按钮的布局\n          x: this._layoutInfo.start.x,\n          y: this._layoutInfo.start.y\n        }\n      };\n      attrs.backward = {\n        style: {\n          ...attrs.backward.style,\n          x: this._layoutInfo.backward.x,\n          y: this._layoutInfo.backward.y\n        }\n      };\n      attrs.forward = {\n        style: {\n          ...attrs.forward.style,\n          x: this._layoutInfo.forward.x,\n          y: this._layoutInfo.forward.y\n        }\n      };\n    }\n\n    this._controller = new Controller(attrs);\n    this.add(this._controller as unknown as INode);\n  };\n\n  /**\n   * 渲染\n   */\n  render() {\n    this._slider.render();\n    this._controller.render();\n  }\n\n  /**\n   * 触发事件\n   * @param eventType 事件类型\n   * @param dataIndex 数据下标\n   */\n  dispatchCustomEvent(eventType: PlayerEventEnum, dataIndex: number) {\n    const changeEvent = new CustomEvent(eventType, {\n      eventType,\n      index: dataIndex,\n      value: this._data[dataIndex]\n    } as unknown);\n    // @ts-ignore; 需要在 vrender 的事件系统支持\n    changeEvent.manager = this.stage?.eventSystem.manager;\n    this.dispatchEvent(changeEvent);\n  }\n}\n"]}

package/es/player/constant.d.ts

@@ -0,0 +1,12 @@
+export declare const defaultControllerAttributes: {
+    style: {
+        x: number;
+        y: number;
+        dx: number;
+        dy: number;
+        size: number;
+    };
+    order: number;
+    space: number;
+};
+export declare const RailDefaultSize: number[];

package/es/player/constant.js

@@ -0,0 +1,14 @@
+export const defaultControllerAttributes = {
+    style: {
+        x: 0,
+        y: 0,
+        dx: 0,
+        dy: 0,
+        size: 20
+    },
+    order: 0,
+    space: 10
+};
+
+export const RailDefaultSize = [ 200, 10 ];
+//# sourceMappingURL=constant.js.map

package/es/player/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,EAAE;KACT;IACD,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,EAAE;CACV,CAAC;AAKF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC","file":"constant.js","sourcesContent":["export const defaultControllerAttributes = {\n  style: {\n    x: 0,\n    y: 0,\n    dx: 0,\n    dy: 0,\n    size: 20\n  },\n  order: 0,\n  space: 10\n};\n\n/**\n * 滑轨默认[长度,宽度]\n */\nexport const RailDefaultSize = [200, 10];\n"]}

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

@@ -0,0 +1,34 @@
+import { BasePlayer } from './base-player';
+import { ContinuousPlayerAttributes, PlayerEventEnum } from './type';
+export interface IContinuousPlayer {
+    play: () => Promise<void>;
+    pause: () => void;
+    forward: () => void;
+    backward: () => void;
+}
+export declare class ContinuousPlayer extends BasePlayer<ContinuousPlayerAttributes> implements IContinuousPlayer {
+    attribute: ContinuousPlayerAttributes;
+    private _dataIndex;
+    private _activeIndex;
+    protected _alternate: boolean;
+    protected _interval: number;
+    protected _totalDuration: number;
+    private _isPlaying;
+    private _startTime;
+    private _elapsed;
+    private _rafId;
+    constructor(attributes: ContinuousPlayerAttributes);
+    _initAttributes: () => void;
+    private _initEvents;
+    private _getSliderValue;
+    private _updateSlider;
+    private _dispatchChange;
+    dispatchCustomEvent(eventType: PlayerEventEnum): void;
+    play: () => Promise<void>;
+    private _play;
+    private _playEnd;
+    pause: () => void;
+    backward: () => void;
+    forward: () => void;
+    render(): void;
+}

package/es/player/continuous-player.js

@@ -0,0 +1,104 @@
+var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))((function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator.throw(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            var value;
+            result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
+                resolve(value);
+            }))).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    }));
+};
+
+import { global } from "@visactor/vrender";
+
+import { BasePlayer } from "./base-player";
+
+import { PlayerEventEnum } from "./type";
+
+import { ControllerEventEnum } from "./controller/constant";
+
+export class ContinuousPlayer extends BasePlayer {
+    constructor(attributes) {
+        super(attributes), this._isPlaying = !1, this._startTime = Date.now(), this._initAttributes = () => {
+            var _a, _b;
+            super._initAttributes(), this._maxIndex = this._data.length, this._slider.setAttribute("max", this._maxIndex), 
+            this._isPlaying = !1, this._elapsed = 0, this._interval = null !== (_a = this.attribute.interval) && void 0 !== _a ? _a : 1e3, 
+            this._dataIndex = null !== (_b = this.attribute.dataIndex) && void 0 !== _b ? _b : this._minIndex;
+            const frames = this._data.length;
+            this.attribute.totalDuration && this._data.length ? (this._totalDuration = this.attribute.totalDuration, 
+            this._interval = this._totalDuration / (null != frames ? frames : 1)) : (this._totalDuration = this._interval * frames, 
+            this._interval = this.attribute.interval);
+        }, this._initEvents = () => {
+            this._controller.addEventListener(ControllerEventEnum.OnPlay, (e => {
+                e.stopPropagation(), this.play();
+            })), this._controller.addEventListener(ControllerEventEnum.OnPause, (e => {
+                e.stopPropagation(), this.pause();
+            })), this._controller.addEventListener(ControllerEventEnum.OnForward, (e => {
+                e.stopPropagation(), this.forward();
+            })), this._controller.addEventListener(ControllerEventEnum.OnBackward, (e => {
+                e.stopPropagation(), this.backward();
+            })), this._slider.addEventListener("change", (e => {
+                var _a;
+                e.stopPropagation();
+                const value = null === (_a = e.detail) || void 0 === _a ? void 0 : _a.value, progress = value / this._maxIndex;
+                this._elapsed = progress * this._totalDuration, this._startTime = Date.now() - this._elapsed, 
+                this._dispatchChange(value);
+            }));
+        }, this._getSliderValue = () => {
+            const progress = this._elapsed / this._totalDuration;
+            return Math.min(progress * this._maxIndex, this._maxIndex);
+        }, this._updateSlider = () => {
+            const value = this._getSliderValue();
+            this._dataIndex = Math.floor(value), this._slider.setValue(Math.min(value, this._maxIndex)), 
+            this._dispatchChange(Math.floor(value));
+        }, this._dispatchChange = value => {
+            const index = Math.floor(value);
+            index !== this._activeIndex && (this._dataIndex = index, this._activeIndex = index, 
+            index !== this._maxIndex && this.dispatchCustomEvent(PlayerEventEnum.OnChange));
+        }, this.play = () => __awaiter(this, void 0, void 0, (function*() {
+            this._isPlaying || (this._controller.togglePause(), this._isPlaying = !0, this._elapsed >= this._totalDuration && (this._elapsed = 0), 
+            this._startTime = Date.now() - this._elapsed, this.dispatchCustomEvent(PlayerEventEnum.OnPlay), 
+            this._rafId = global.getRequestAnimationFrame()(this._play.bind(this)));
+        })), this._play = () => {
+            this._elapsed = Date.now() - this._startTime;
+            const value = this._getSliderValue();
+            this._updateSlider(), value >= this._maxIndex ? this._playEnd() : this._rafId = global.getRequestAnimationFrame()(this._play.bind(this));
+        }, this._playEnd = () => {
+            this._isPlaying = !1, global.getCancelAnimationFrame()(this._rafId), this._controller.togglePlay(), 
+            this.dispatchCustomEvent(PlayerEventEnum.OnEnd);
+        }, this.pause = () => {
+            this._isPlaying && (this._isPlaying = !1, this._elapsed = Date.now() - this._startTime, 
+            global.getCancelAnimationFrame()(this._rafId), this._controller.togglePlay(), this.dispatchCustomEvent(PlayerEventEnum.OnPause));
+        }, this.backward = () => {
+            const now = Date.now(), interval = 1 * this._interval, elapsed = this._elapsed - interval;
+            elapsed <= 0 ? (this._elapsed = 0, this._startTime = now) : (this._elapsed = elapsed, 
+            this._startTime = this._startTime + this._interval), this._updateSlider(), this.dispatchCustomEvent(PlayerEventEnum.OnBackward);
+        }, this.forward = () => {
+            const now = Date.now(), interval = 1 * this._interval, elapsed = this._elapsed + interval;
+            elapsed >= this._totalDuration ? (this._startTime = now - this._totalDuration, this._elapsed = this._totalDuration) : (this._startTime = this._startTime - interval, 
+            this._elapsed = elapsed), this._updateSlider(), this.dispatchCustomEvent(PlayerEventEnum.OnForward);
+        }, this._initAttributes(), this._initEvents();
+    }
+    dispatchCustomEvent(eventType) {
+        super.dispatchCustomEvent(eventType, this._dataIndex);
+    }
+    render() {
+        super.render();
+    }
+}
+//# sourceMappingURL=continuous-player.js.map

package/es/player/continuous-player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/continuous-player.ts"],"names":[],"mappings":"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","file":"continuous-player.js","sourcesContent":["import { FederatedPointerEvent, global } from '@visactor/vrender';\nimport { BasePlayer } from './base-player';\nimport { ContinuousPlayerAttributes, PlayerEventEnum } from './type';\nimport { ControllerEventEnum } from './controller/constant';\n\nexport interface IContinuousPlayer {\n  play: () => Promise<void>;\n  pause: () => void;\n  forward: () => void;\n  backward: () => void;\n}\n\nexport class ContinuousPlayer extends BasePlayer<ContinuousPlayerAttributes> implements IContinuousPlayer {\n  declare attribute: ContinuousPlayerAttributes;\n\n  private _dataIndex: number;\n  private _activeIndex: number;\n\n  protected _alternate: boolean;\n  protected _interval: number;\n  protected _totalDuration: number;\n\n  private _isPlaying = false;\n  private _startTime: number = Date.now();\n  private _elapsed: number;\n  private _rafId: number;\n\n  constructor(attributes: ContinuousPlayerAttributes) {\n    super(attributes);\n\n    this._initAttributes();\n    this._initEvents();\n  }\n\n  /**\n   * 初始化属性\n   */\n  _initAttributes = () => {\n    super._initAttributes();\n    // 新增一个占位数据\n    this._maxIndex = this._data.length;\n    this._slider.setAttribute('max', this._maxIndex);\n\n    this._isPlaying = false;\n    this._elapsed = 0;\n    this._interval = this.attribute.interval ?? 1000;\n    this._dataIndex = this.attribute.dataIndex ?? this._minIndex;\n\n    // 播放帧数(10条数据, 需要10个播放帧)\n    const frames = this._data.length;\n\n    // 若用户配置了总时长\n    if (this.attribute.totalDuration && this._data.length) {\n      this._totalDuration = this.attribute.totalDuration;\n      // 避免除0\n      this._interval = this._totalDuration / (frames ?? 1);\n    }\n    // 若未配置总时长, 则根据interval算出一个总时长, interval有默认值\n    else {\n      this._totalDuration = this._interval * frames;\n      this._interval = this.attribute.interval;\n    }\n  };\n\n  /**\n   * 初始化事件\n   */\n  private _initEvents = () => {\n    this._controller.addEventListener(ControllerEventEnum.OnPlay, (e: FederatedPointerEvent) => {\n      e.stopPropagation();\n      this.play();\n    });\n    this._controller.addEventListener(ControllerEventEnum.OnPause, (e: FederatedPointerEvent) => {\n      e.stopPropagation();\n      this.pause();\n    });\n    this._controller.addEventListener(ControllerEventEnum.OnForward, (e: FederatedPointerEvent) => {\n      e.stopPropagation();\n      this.forward();\n    });\n    this._controller.addEventListener(ControllerEventEnum.OnBackward, (e: FederatedPointerEvent) => {\n      e.stopPropagation();\n      this.backward();\n    });\n\n    this._slider.addEventListener('change', (e: FederatedPointerEvent) => {\n      e.stopPropagation();\n      /**\n       * 根据value, 反推开始时间\n       * 1. 计算进度\n       * 2. 计算流逝时间\n       * 3. 用现在的时间, 模拟一个开始时间\n       */\n      const value = (e.detail as unknown as { value: number; position: number })?.value;\n      const progress = value / this._maxIndex;\n      this._elapsed = progress * this._totalDuration;\n      this._startTime = Date.now() - this._elapsed;\n\n      this._dispatchChange(value);\n    });\n  };\n\n  /**\n   * 根据已流逝时间和总时长, 计算slider的值\n   */\n  private _getSliderValue = () => {\n    const progress = this._elapsed / this._totalDuration;\n    return Math.min(progress * this._maxIndex, this._maxIndex);\n  };\n\n  /**\n   * 根据流逝时间, 更新Slider的值\n   */\n  private _updateSlider = () => {\n    const value = this._getSliderValue();\n    this._dataIndex = Math.floor(value);\n    this._slider.setValue(Math.min(value, this._maxIndex));\n    this._dispatchChange(Math.floor(value));\n  };\n\n  /**\n   * 根据Slider的值, 判断是否要触发Change事件.\n   */\n  private _dispatchChange = (value: number) => {\n    const index = Math.floor(value);\n    if (index !== this._activeIndex) {\n      this._dataIndex = index;\n      this._activeIndex = index;\n\n      if (index !== this._maxIndex) {\n        this.dispatchCustomEvent(PlayerEventEnum.OnChange);\n      }\n    }\n  };\n\n  /**\n   * 派遣事件\n   * @param eventType 事件类型\n   */\n  dispatchCustomEvent(eventType: PlayerEventEnum) {\n    super.dispatchCustomEvent(eventType, this._dataIndex);\n  }\n\n  /**\n   * 播放接口\n   */\n  play = async () => {\n    if (this._isPlaying) {\n      return;\n    }\n    // 切换按钮\n    this._controller.togglePause();\n    // 播放状态更新\n    this._isPlaying = true;\n    // 播放结束后再点击play, 此条件下生效.\n    if (this._elapsed >= this._totalDuration) {\n      this._elapsed = 0;\n    }\n    // 此时此刻减去已流逝的时间, 则为起点对应的时间戳.\n    this._startTime = Date.now() - this._elapsed;\n    // 事件\n    this.dispatchCustomEvent(PlayerEventEnum.OnPlay);\n    // 开始播放动画\n    this._rafId = global.getRequestAnimationFrame()(this._play.bind(this));\n  };\n\n  /**\n   * 播放动画主要逻辑\n   */\n  private _play = () => {\n    // 计算已流逝的时间, 但不需要保存\n    this._elapsed = Date.now() - this._startTime;\n    // 计算Slider的值.\n    const value = this._getSliderValue();\n    // 更新Slider的值.\n    this._updateSlider();\n\n    // 播放终止条件\n    if (value >= this._maxIndex) {\n      this._playEnd();\n      return;\n    }\n\n    // 持续播放\n    this._rafId = global.getRequestAnimationFrame()(this._play.bind(this));\n  };\n\n  /**\n   * 播放结束时触发\n   */\n  private _playEnd = () => {\n    // 播放状态更新\n    this._isPlaying = false;\n    // 取消播放动画\n    global.getCancelAnimationFrame()(this._rafId);\n    // 切换按钮\n    this._controller.togglePlay();\n    // 事件\n    this.dispatchCustomEvent(PlayerEventEnum.OnEnd);\n  };\n\n  /**\n   * 暂停接口\n   */\n  pause = () => {\n    if (!this._isPlaying) {\n      return;\n    }\n    this._isPlaying = false;\n    // 计算已流逝的时间, 需要记录下来\n    this._elapsed = Date.now() - this._startTime;\n    global.getCancelAnimationFrame()(this._rafId);\n    this._controller.togglePlay();\n\n    this.dispatchCustomEvent(PlayerEventEnum.OnPause);\n  };\n\n  /**\n   * 前进接口\n   */\n  backward = () => {\n    // 按下按钮的时间\n    const now = Date.now();\n    // 步长\n    const interval = this._interval * 1;\n    // 流逝时间 减去 interval\n    const elapsed = this._elapsed - interval;\n\n    // 若到达起点\n    if (elapsed <= 0) {\n      this._elapsed = 0;\n      this._startTime = now;\n    }\n    // 若未到达起点\n    else {\n      this._elapsed = elapsed;\n      this._startTime = this._startTime + this._interval;\n    }\n    // 更新slider\n    this._updateSlider();\n\n    this.dispatchCustomEvent(PlayerEventEnum.OnBackward);\n  };\n\n  /**\n   * 后退接口\n   */\n  forward = () => {\n    // 按下按钮的时间\n    const now = Date.now();\n    // 步长\n    const interval = this._interval * 1;\n    // 流逝时间 加上 1个interval\n    const elapsed = this._elapsed + interval;\n    // 若超过终点\n    if (elapsed >= this._totalDuration) {\n      this._startTime = now - this._totalDuration;\n      this._elapsed = this._totalDuration;\n    }\n    // 未超过终点\n    else {\n      this._startTime = this._startTime - interval;\n      this._elapsed = elapsed;\n    }\n    // 更新slider\n    this._updateSlider();\n\n    this.dispatchCustomEvent(PlayerEventEnum.OnForward);\n  };\n\n  render() {\n    super.render();\n  }\n}\n"]}

package/es/player/controller/assets/index.d.ts

@@ -0,0 +1,6 @@
+export declare const iconPlay = "M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -73.1429 161.4994 a 48.7619 48.7619 0 0 1 25.9901 7.5093 l 201.7524 127.1223 a 48.7619 48.7619 0 0 1 0.3657 82.2613 l -201.7524 129.6335 A 48.7619 48.7619 0 0 1 292.5952 540.1838 v -256.7314 a 48.7619 48.7619 0 0 1 48.7619 -48.7619 z m 24.381 92.9402 v 167.9116 l 131.9497 -84.7726 L 365.7381 327.6063 z";
+export declare const iconPause = "M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -48.7619 195.0476 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z m 158.4762 0 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z";
+export declare const iconLeft = "M 521.29 734.276 L 230.929 448.019 L 521.29 161.762 c 37.685 -37.153 38.003 -97.625 0.707 -134.384 c -37.297 -36.758 -98.646 -36.435 -136.331 0.718 l -357.43 352.378 c -0.155 0.153 -0.297 0.314 -0.451 0.468 c -0.084 0.082 -0.172 0.157 -0.256 0.239 c -18.357 18.092 -27.581 41.929 -27.743 65.902 c -0.004 0.311 -0.017 0.623 -0.018 0.934 c 0.001 0.316 0.014 0.632 0.018 0.948 c 0.165 23.97 9.389 47.803 27.743 65.892 c 0.083 0.082 0.171 0.157 0.255 0.239 c 0.154 0.154 0.296 0.315 0.452 0.468 l 357.43 352.378 c 37.685 37.153 99.034 37.476 136.331 0.718 c 37.297 -36.758 36.979 -97.231 -0.707 -134.384 z";
+export declare const iconDown = "M 734.276 28.71 L 448.019 319.071 L 161.762 28.71 c -37.153 -37.685 -97.625 -38.003 -134.384 -0.707 c -36.758 37.297 -36.435 98.646 0.718 136.331 l 352.378 357.43 c 0.153 0.155 0.314 0.297 0.468 0.451 c 0.082 0.084 0.157 0.172 0.239 0.256 c 18.092 18.357 41.929 27.581 65.902 27.743 c 0.311 0.004 0.623 0.017 0.934 0.018 c 0.316 -0.001 0.632 -0.014 0.948 -0.018 c 23.97 -0.165 47.803 -9.389 65.892 -27.743 c 0.082 -0.083 0.157 -0.171 0.239 -0.255 c 0.154 -0.154 0.315 -0.296 0.468 -0.452 l 352.378 -357.43 c 37.153 -37.685 37.476 -99.034 0.718 -136.331 c -36.758 -37.297 -97.231 -36.979 -134.384 0.707 z";
+export declare const iconUp = "m 161.724 521.29 l 286.257 -290.361 l 286.257 290.361 c 37.153 37.685 97.625 38.003 134.384 0.707 c 36.758 -37.297 36.435 -98.646 -0.718 -136.331 l -352.378 -357.43 c -0.153 -0.155 -0.314 -0.297 -0.468 -0.451 c -0.082 -0.084 -0.157 -0.172 -0.239 -0.256 c -18.092 -18.357 -41.929 -27.581 -65.902 -27.743 c -0.311 -0.004 -0.623 -0.017 -0.934 -0.018 c -0.316 0.001 -0.632 0.014 -0.948 0.018 c -23.97 0.165 -47.803 9.389 -65.892 27.743 c -0.082 0.083 -0.157 0.171 -0.239 0.255 c -0.154 0.154 -0.315 0.296 -0.468 0.452 l -352.378 357.43 c -37.153 37.685 -37.476 99.034 -0.718 136.331 c 36.758 37.297 97.231 36.979 134.384 -0.707 z";
+export declare const iconRight = "M 30 163 L 320.361 449.257 L 30 735.514 c -37.685 37.153 -38.003 97.625 -0.707 134.384 c 37.297 36.758 98.646 36.435 136.331 -0.718 l 357.43 -352.378 c 0.155 -0.153 0.297 -0.314 0.451 -0.468 c 0.084 -0.082 0.172 -0.157 0.256 -0.239 c 18.357 -18.092 27.581 -41.929 27.743 -65.902 c 0.004 -0.311 0.017 -0.623 0.018 -0.934 c -0.001 -0.316 -0.014 -0.632 -0.018 -0.948 c -0.165 -23.97 -9.389 -47.803 -27.743 -65.892 c -0.083 -0.082 -0.171 -0.157 -0.255 -0.239 c -0.154 -0.154 -0.296 -0.315 -0.452 -0.468 l -357.43 -352.378 c -37.685 -37.153 -99.034 -37.476 -136.331 -0.718 c -37.297 36.758 -36.979 97.231 0.707 134.384 z";

package/es/player/controller/assets/index.js

@@ -0,0 +1,12 @@
+export const iconPlay = "M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -73.1429 161.4994 a 48.7619 48.7619 0 0 1 25.9901 7.5093 l 201.7524 127.1223 a 48.7619 48.7619 0 0 1 0.3657 82.2613 l -201.7524 129.6335 A 48.7619 48.7619 0 0 1 292.5952 540.1838 v -256.7314 a 48.7619 48.7619 0 0 1 48.7619 -48.7619 z m 24.381 92.9402 v 167.9116 l 131.9497 -84.7726 L 365.7381 327.6063 z";
+
+export const iconPause = "M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -48.7619 195.0476 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z m 158.4762 0 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z";
+
+export const iconLeft = "M 521.29 734.276 L 230.929 448.019 L 521.29 161.762 c 37.685 -37.153 38.003 -97.625 0.707 -134.384 c -37.297 -36.758 -98.646 -36.435 -136.331 0.718 l -357.43 352.378 c -0.155 0.153 -0.297 0.314 -0.451 0.468 c -0.084 0.082 -0.172 0.157 -0.256 0.239 c -18.357 18.092 -27.581 41.929 -27.743 65.902 c -0.004 0.311 -0.017 0.623 -0.018 0.934 c 0.001 0.316 0.014 0.632 0.018 0.948 c 0.165 23.97 9.389 47.803 27.743 65.892 c 0.083 0.082 0.171 0.157 0.255 0.239 c 0.154 0.154 0.296 0.315 0.452 0.468 l 357.43 352.378 c 37.685 37.153 99.034 37.476 136.331 0.718 c 37.297 -36.758 36.979 -97.231 -0.707 -134.384 z";
+
+export const iconDown = "M 734.276 28.71 L 448.019 319.071 L 161.762 28.71 c -37.153 -37.685 -97.625 -38.003 -134.384 -0.707 c -36.758 37.297 -36.435 98.646 0.718 136.331 l 352.378 357.43 c 0.153 0.155 0.314 0.297 0.468 0.451 c 0.082 0.084 0.157 0.172 0.239 0.256 c 18.092 18.357 41.929 27.581 65.902 27.743 c 0.311 0.004 0.623 0.017 0.934 0.018 c 0.316 -0.001 0.632 -0.014 0.948 -0.018 c 23.97 -0.165 47.803 -9.389 65.892 -27.743 c 0.082 -0.083 0.157 -0.171 0.239 -0.255 c 0.154 -0.154 0.315 -0.296 0.468 -0.452 l 352.378 -357.43 c 37.153 -37.685 37.476 -99.034 0.718 -136.331 c -36.758 -37.297 -97.231 -36.979 -134.384 0.707 z";
+
+export const iconUp = "m 161.724 521.29 l 286.257 -290.361 l 286.257 290.361 c 37.153 37.685 97.625 38.003 134.384 0.707 c 36.758 -37.297 36.435 -98.646 -0.718 -136.331 l -352.378 -357.43 c -0.153 -0.155 -0.314 -0.297 -0.468 -0.451 c -0.082 -0.084 -0.157 -0.172 -0.239 -0.256 c -18.092 -18.357 -41.929 -27.581 -65.902 -27.743 c -0.311 -0.004 -0.623 -0.017 -0.934 -0.018 c -0.316 0.001 -0.632 0.014 -0.948 0.018 c -23.97 0.165 -47.803 9.389 -65.892 27.743 c -0.082 0.083 -0.157 0.171 -0.239 0.255 c -0.154 0.154 -0.315 0.296 -0.468 0.452 l -352.378 357.43 c -37.153 37.685 -37.476 99.034 -0.718 136.331 c 36.758 37.297 97.231 36.979 134.384 -0.707 z";
+
+export const iconRight = "M 30 163 L 320.361 449.257 L 30 735.514 c -37.685 37.153 -38.003 97.625 -0.707 134.384 c 37.297 36.758 98.646 36.435 136.331 -0.718 l 357.43 -352.378 c 0.155 -0.153 0.297 -0.314 0.451 -0.468 c 0.084 -0.082 0.172 -0.157 0.256 -0.239 c 18.357 -18.092 27.581 -41.929 27.743 -65.902 c 0.004 -0.311 0.017 -0.623 0.018 -0.934 c -0.001 -0.316 -0.014 -0.632 -0.018 -0.948 c -0.165 -23.97 -9.389 -47.803 -27.743 -65.892 c -0.083 -0.082 -0.171 -0.157 -0.255 -0.239 c -0.154 -0.154 -0.296 -0.315 -0.452 -0.468 l -357.43 -352.378 c -37.685 -37.153 -99.034 -37.476 -136.331 -0.718 c -37.297 36.758 -36.979 97.231 0.707 134.384 z";
+//# sourceMappingURL=index.js.map

package/es/player/controller/assets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/controller/assets/index.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAAG,0oBAA0oB,CAAC;AACnqB,MAAM,CAAC,MAAM,SAAS,GAAG,mdAAmd,CAAC;AAC7e,MAAM,CAAC,MAAM,QAAQ,GAAG,2lBAA2lB,CAAC;AAEpnB,MAAM,CAAC,MAAM,QAAQ,GAAG,6lBAA6lB,CAAC;AAEtnB,MAAM,CAAC,MAAM,MAAM,GAAG,mnBAAmnB,CAAC;AAE1oB,MAAM,CAAC,MAAM,SAAS,GAAG,ymBAAymB,CAAC","file":"index.js","sourcesContent":["// export const iconPlay = `\n// M 837.808 551.64 L 219.376 968.6 a 8 8 0 0 1 -12.48 -6.64 V 128.04 a 8 8 0 0 1 12.48 -6.624 l 618.432 416.96 a 8 8 0 0 1 0 13.264 z m -534.896 -246.8 v 480.288 L 687.52 545 L 302.912 304.84 z\n// `;\n\nexport const iconPlay = `M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -73.1429 161.4994 a 48.7619 48.7619 0 0 1 25.9901 7.5093 l 201.7524 127.1223 a 48.7619 48.7619 0 0 1 0.3657 82.2613 l -201.7524 129.6335 A 48.7619 48.7619 0 0 1 292.5952 540.1838 v -256.7314 a 48.7619 48.7619 0 0 1 48.7619 -48.7619 z m 24.381 92.9402 v 167.9116 l 131.9497 -84.7726 L 365.7381 327.6063 z`;\nexport const iconPause = `M 414.5 0.0238 c 228.9128 0 414.4762 185.5634 414.4762 414.4762 s -185.5634 414.4762 -414.4762 414.4762 S 0.0238 643.4128 0.0238 414.5 S 185.5872 0.0238 414.5 0.0238 z m 0 73.1429 C 225.9865 73.1667 73.1667 225.9865 73.1667 414.5 s 152.8198 341.3333 341.3333 341.3333 s 341.3333 -152.8198 341.3333 -341.3333 S 603.0135 73.1667 414.5 73.1667 z m -48.7619 195.0476 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z m 158.4762 0 v 316.9524 h -73.1429 V 268.2143 h 73.1429 z`;\nexport const iconLeft = `M 521.29 734.276 L 230.929 448.019 L 521.29 161.762 c 37.685 -37.153 38.003 -97.625 0.707 -134.384 c -37.297 -36.758 -98.646 -36.435 -136.331 0.718 l -357.43 352.378 c -0.155 0.153 -0.297 0.314 -0.451 0.468 c -0.084 0.082 -0.172 0.157 -0.256 0.239 c -18.357 18.092 -27.581 41.929 -27.743 65.902 c -0.004 0.311 -0.017 0.623 -0.018 0.934 c 0.001 0.316 0.014 0.632 0.018 0.948 c 0.165 23.97 9.389 47.803 27.743 65.892 c 0.083 0.082 0.171 0.157 0.255 0.239 c 0.154 0.154 0.296 0.315 0.452 0.468 l 357.43 352.378 c 37.685 37.153 99.034 37.476 136.331 0.718 c 37.297 -36.758 36.979 -97.231 -0.707 -134.384 z`;\n\nexport const iconDown = `M 734.276 28.71 L 448.019 319.071 L 161.762 28.71 c -37.153 -37.685 -97.625 -38.003 -134.384 -0.707 c -36.758 37.297 -36.435 98.646 0.718 136.331 l 352.378 357.43 c 0.153 0.155 0.314 0.297 0.468 0.451 c 0.082 0.084 0.157 0.172 0.239 0.256 c 18.092 18.357 41.929 27.581 65.902 27.743 c 0.311 0.004 0.623 0.017 0.934 0.018 c 0.316 -0.001 0.632 -0.014 0.948 -0.018 c 23.97 -0.165 47.803 -9.389 65.892 -27.743 c 0.082 -0.083 0.157 -0.171 0.239 -0.255 c 0.154 -0.154 0.315 -0.296 0.468 -0.452 l 352.378 -357.43 c 37.153 -37.685 37.476 -99.034 0.718 -136.331 c -36.758 -37.297 -97.231 -36.979 -134.384 0.707 z`;\n\nexport const iconUp = `m 161.724 521.29 l 286.257 -290.361 l 286.257 290.361 c 37.153 37.685 97.625 38.003 134.384 0.707 c 36.758 -37.297 36.435 -98.646 -0.718 -136.331 l -352.378 -357.43 c -0.153 -0.155 -0.314 -0.297 -0.468 -0.451 c -0.082 -0.084 -0.157 -0.172 -0.239 -0.256 c -18.092 -18.357 -41.929 -27.581 -65.902 -27.743 c -0.311 -0.004 -0.623 -0.017 -0.934 -0.018 c -0.316 0.001 -0.632 0.014 -0.948 0.018 c -23.97 0.165 -47.803 9.389 -65.892 27.743 c -0.082 0.083 -0.157 0.171 -0.239 0.255 c -0.154 0.154 -0.315 0.296 -0.468 0.452 l -352.378 357.43 c -37.153 37.685 -37.476 99.034 -0.718 136.331 c 36.758 37.297 97.231 36.979 134.384 -0.707 z`;\n\nexport const iconRight = `M 30 163 L 320.361 449.257 L 30 735.514 c -37.685 37.153 -38.003 97.625 -0.707 134.384 c 37.297 36.758 98.646 36.435 136.331 -0.718 l 357.43 -352.378 c 0.155 -0.153 0.297 -0.314 0.451 -0.468 c 0.084 -0.082 0.172 -0.157 0.256 -0.239 c 18.357 -18.092 27.581 -41.929 27.743 -65.902 c 0.004 -0.311 0.017 -0.623 0.018 -0.934 c -0.001 -0.316 -0.014 -0.632 -0.018 -0.948 c -0.165 -23.97 -9.389 -47.803 -27.743 -65.892 c -0.083 -0.082 -0.171 -0.157 -0.255 -0.239 c -0.154 -0.154 -0.296 -0.315 -0.452 -0.468 l -357.43 -352.378 c -37.685 -37.153 -99.034 -37.476 -136.331 -0.718 c -37.297 36.758 -36.979 97.231 0.707 134.384 z`;\n"]}

package/es/player/controller/constant.d.ts

@@ -0,0 +1,12 @@
+export declare enum ControllerEventEnum {
+    OnPlay = "onPlay",
+    OnPause = "onPause",
+    OnForward = "onForward",
+    OnBackward = "onBackward"
+}
+export declare enum ControllerTypeEnum {
+    Start = "start",
+    Pause = "pause",
+    Forward = "forward",
+    Backward = "backward"
+}

package/es/player/controller/constant.js

@@ -0,0 +1,14 @@
+export var ControllerEventEnum;
+
+!function(ControllerEventEnum) {
+    ControllerEventEnum.OnPlay = "onPlay", ControllerEventEnum.OnPause = "onPause", 
+    ControllerEventEnum.OnForward = "onForward", ControllerEventEnum.OnBackward = "onBackward";
+}(ControllerEventEnum || (ControllerEventEnum = {}));
+
+export var ControllerTypeEnum;
+
+!function(ControllerTypeEnum) {
+    ControllerTypeEnum.Start = "start", ControllerTypeEnum.Pause = "pause", ControllerTypeEnum.Forward = "forward", 
+    ControllerTypeEnum.Backward = "backward";
+}(ControllerTypeEnum || (ControllerTypeEnum = {}));
+//# sourceMappingURL=constant.js.map

package/es/player/controller/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/player/controller/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,wCAAiB,CAAA;IACjB,0CAAmB,CAAA;IACnB,8CAAuB,CAAA;IACvB,gDAAyB,CAAA;AAC3B,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B;AAED,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,qCAAe,CAAA;IACf,qCAAe,CAAA;IACf,yCAAmB,CAAA;IACnB,2CAAqB,CAAA;AACvB,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B","file":"constant.js","sourcesContent":["export enum ControllerEventEnum {\n  OnPlay = 'onPlay',\n  OnPause = 'onPause',\n  OnForward = 'onForward',\n  OnBackward = 'onBackward'\n}\n\nexport enum ControllerTypeEnum {\n  Start = 'start',\n  Pause = 'pause',\n  Forward = 'forward',\n  Backward = 'backward'\n}\n"]}

package/es/player/controller/controller.d.ts

@@ -0,0 +1,32 @@
+import { ISymbolGraphicAttribute } from '@visactor/vrender';
+import { AbstractComponent } from '../../core/base';
+import { ControllerAttributes } from './type';
+export declare class Controller extends AbstractComponent<Required<ControllerAttributes>> {
+    static defaultControllerAttr: ISymbolGraphicAttribute;
+    static defaultAttributes: ControllerAttributes;
+    private _isPaused;
+    private _playController;
+    private _forwardController;
+    private _backwardController;
+    private _layout;
+    private _startAttr;
+    private _pauseAttr;
+    private _forwardAttr;
+    private _backwardAttr;
+    constructor(attributes: ControllerAttributes);
+    private _init;
+    _initAttributes: () => void;
+    private _initLayout;
+    private _initPlay;
+    private _initBackward;
+    private _initForward;
+    private _initEvents;
+    private _createCustomEvent;
+    render(): void;
+    play: () => void;
+    pause: () => void;
+    forward: () => void;
+    backward: () => void;
+    togglePlay: () => void;
+    togglePause: () => void;
+}