@visactor/vrender-components 1.0.8-alpha.1 → 1.0.8-alpha.2

package/dist/index.es.js

@@ -6391,15 +6391,15 @@ class Graphic extends Node {
   setWidthHeightWithoutTransform(aabbBounds) {
     this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
   }
-  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
+  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
     this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
-      (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
+      Object.keys(params).forEach(key => {
         animate.preventAttr(key);
       });
     });
   }
   setAttributes(params, forceUpdateTag = !1, context) {
-    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
+    (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
   }
   _setAttributes(params, forceUpdateTag = !1, context) {
     const keys = Object.keys(params);
@@ -6564,7 +6564,7 @@ class Graphic extends Node {
       });
     } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
       type: AttributeUpdateType.STATE
-    }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
+    });
     this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
     });
@@ -6957,7 +6957,7 @@ class Group extends Graphic {
   }
   removeChild(child) {
     const data = super.removeChild(child);
-    return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
+    return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
   }
   removeAllChild(deep = !1) {
     this.forEachChildren(child => {
@@ -18802,7 +18802,6 @@ class Step {
     return this.getEndProps();
   }
   stop() {}
-  release() {}
 }
 class WaitStep extends Step {
   constructor(type, props, duration, easing) {
@@ -18826,7 +18825,7 @@ class DefaultTimeline extends EventEmitter {
     return this._animateCount;
   }
   constructor() {
-    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._animationEndFlag = !0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
+    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
   }
   isRunning() {
     return !this.paused && this._animateCount > 0;
@@ -18855,11 +18854,10 @@ class DefaultTimeline extends EventEmitter {
   }
   tick(delta) {
     if (this.paused) return;
-    this._animationEndFlag && (this._animationEndFlag = !1, this.emit("animationStart"));
     const scaledDelta = delta * this._playSpeed;
     this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
       animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
-    }), 0 === this._animateCount && (this._animationEndFlag = !0, this.emit("animationEnd"));
+    }), 0 === this._animateCount && this.emit("animationEnd");
   }
   clear() {
     this.forEachAccessAnimate(animate => {
@@ -18923,9 +18921,7 @@ class Animate {
     return this._timeline;
   }
   bind(target) {
-    return this.target = target, this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this), this.onRemove(() => {
-      this.stop(), this.target.animates.delete(this.id);
-    }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
   to(props, duration = 300, easing = "linear") {
     const step = new Step(AnimateStepType.to, props, duration, easing);
@@ -19020,9 +19016,7 @@ class Animate {
     this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
   }
   release() {
-    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [], this.forEachStep(step => {
-      step.release();
-    });
+    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
   }
   getDuration() {
     return this._duration;
@@ -19096,10 +19090,6 @@ class Animate {
   getLoop() {
     return this._loopCount;
   }
-  forEachStep(cb) {
-    let step = this._firstStep;
-    for (; step;) cb(step), step = step.next;
-  }
 }
 
 const performanceRAF = new PerformanceRAF();
@@ -19145,8 +19135,8 @@ class DefaultTicker extends EventEmitter {
   }
   init() {
     this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-      this.initHandler(!1);
-    }), application.global.env && this.initHandler(!1);
+      this.initHandler();
+    }), application.global.env && this.initHandler();
   }
   addTimeline(timeline) {
     this.timelines.push(timeline);
@@ -19157,11 +19147,10 @@ class DefaultTicker extends EventEmitter {
   getTimelines() {
     return this.timelines;
   }
-  initHandler(force = !1) {
-    this.setupTickHandler(force);
+  initHandler() {
+    this.setupTickHandler();
   }
-  setupTickHandler(force = !1) {
-    if (!force && this.tickerHandler) return !0;
+  setupTickHandler() {
     const handler = new RAFTickHandler();
     return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
   }
@@ -19212,7 +19201,7 @@ class DefaultTicker extends EventEmitter {
     return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
   }
   stop() {
-    this.status = STATUS$1.INITIAL, this.setupTickHandler(!0), this.lastFrameTime = -1;
+    this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
   }
   trySyncTickStatus() {
     this.status === STATUS$1.INITIAL && this.timelines.some(timeline => timeline.isRunning()) ? this.start() : this.status === STATUS$1.RUNNING && this.timelines.every(timeline => !timeline.isRunning()) && this.stop();
@@ -19222,8 +19211,7 @@ class DefaultTicker extends EventEmitter {
     this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
   }
   checkSkip(delta) {
-    var _a, _b, _c;
-    if ("performance" === (null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.params) || void 0 === _b ? void 0 : _b.optimize) || void 0 === _c ? void 0 : _c.tickRenderMode)) return !1;
+    if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
     return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
   }
 }
@@ -19474,11 +19462,10 @@ class AnimateExecutor {
   _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
     var _a, _b, _c, _d;
     if (custom && customType) {
-      const customParams = Object.assign({
+      const customParams = this.resolveValue(customParameters, graphic, {
           width: graphic.stage.width,
-          height: graphic.stage.height,
-          group: this._target.parent
-        }, this.resolveValue(customParameters, graphic)),
+          height: graphic.stage.height
+        }),
         objOptions = isFunction(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
       customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
     } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
@@ -19696,11 +19683,6 @@ class AnimationStateManager {
       state.executor.stop();
     }), this.stateList = null;
   }
-  reApplyState(state) {
-    var _a;
-    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-    stateInfo && (stateInfo.executor.stop(), stateInfo.executor.execute(stateInfo.animationConfig));
-  }
 }
 
 class GraphicStateExtension {
@@ -19731,19 +19713,12 @@ class GraphicStateExtension {
   applyUnhighlightState(animationConfig, callback) {
     return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
   }
-  stopAnimationState(state, type, deep = !1) {
-    return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
-      child.stopAnimationState(state, type, deep);
-    }), this;
+  stopAnimationState(state, type) {
+    return this._getAnimationStateManager(this).stopState(state, type), this;
   }
   clearAnimationStates() {
     return this._getAnimationStateManager(this).clearState(), this;
   }
-  reApplyAnimationState(state, deep = !1) {
-    return this._getAnimationStateManager(this).reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
-      child.reApplyAnimationState(state, deep);
-    }), this;
-  }
   static extend(graphic) {
     return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
   }
@@ -19755,6 +19730,7 @@ class AnimateExtension {
   }
   animate(params) {
     var _a, _b, _c;
+    this.animates || (this.animates = new Map());
     const animate = new Animate(null == params ? void 0 : params.id, null !== (_b = null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline()) && void 0 !== _b ? _b : defaultTimeline, null == params ? void 0 : params.slience);
     if (animate.bind(this), params) {
       const {
@@ -19764,7 +19740,9 @@ class AnimateExtension {
       } = params;
       null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
     }
-    return null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
+    return this.animates.set(animate.id, animate), animate.onRemove(() => {
+      animate.stop(), this.animates.delete(animate.id);
+    }), null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
   }
   createTimeline() {
     return new DefaultTimeline();
@@ -19795,21 +19773,6 @@ class AnimateExtension {
   getGraphicAttribute(key, prev = !1) {
     return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
   }
-  pauseAnimation(deep = !1) {
-    this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
-      child.pauseAnimation(deep);
-    });
-  }
-  resumeAnimation(deep = !1) {
-    this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
-      child.resumeAnimation(deep);
-    });
-  }
-  stopAnimation(deep = !1) {
-    this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
-      child.stopAnimation(deep);
-    });
-  }
 }
 
 function registerAnimate() {
@@ -19818,7 +19781,7 @@ function registerAnimate() {
 
 class ACustomAnimate extends Step {
   constructor(customFrom, customTo, duration, easing, params) {
-    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params, this.from = customFrom, this.to = customTo;
+    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
@@ -22127,7 +22090,7 @@ class LabelUpdate extends AComponentAnimate {
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
-        const { prevText, curText, prevLabelLine, curLabelLine, increaseEffect = true } = this.params;
+        const { prevText, curText, prevLabelLine, curLabelLine } = this.params;
         const diff = {};
         for (const key in curText.attribute) {
             if (prevText.attribute[key] !== curText.attribute[key]) {
@@ -22141,16 +22104,14 @@ class LabelUpdate extends AComponentAnimate {
             duration,
             easing
         });
-        if (increaseEffect !== false) {
-            animator.animate(prevText, {
-                type: 'increaseCount',
-                to: {
-                    text: curText.attribute.text
-                },
-                duration,
-                easing
-            });
-        }
+        animator.animate(prevText, {
+            type: 'increaseCount',
+            to: {
+                text: curText.attribute.text
+            },
+            duration,
+            easing
+        });
         if (prevLabelLine) {
             animator.animate(prevLabelLine, {
                 type: 'to',
@@ -22971,13 +22932,12 @@ class LabelBase extends AnimateComponent {
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
-                animation: {
-                    type: 'labelUpdate',
-                    customParameters: Object.assign(Object.assign({}, this._animationConfig.update), { prevText,
+                animation: Object.assign(Object.assign({ type: 'labelUpdate' }, this._animationConfig.update), { customParameters: {
+                        prevText,
                         curText,
                         prevLabelLine,
-                        curLabelLine })
-                }
+                        curLabelLine
+                    } })
             }
         ]);
     }
@@ -33127,6 +33087,981 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.8-alpha.1";
+function generateColField(index) {
+    if (index < 26) {
+        return String.fromCharCode(65 + index);
+    }
+    const title = [];
+    index++;
+    while (index > 0) {
+        index--;
+        title.unshift(String.fromCharCode(65 + (index % 26)));
+        index = Math.floor(index / 26);
+    }
+    return title.join('');
+}
+
+var SeriesNumberCellStateValue;
+(function (SeriesNumberCellStateValue) {
+    SeriesNumberCellStateValue["hover"] = "hover";
+    SeriesNumberCellStateValue["select"] = "select";
+})(SeriesNumberCellStateValue || (SeriesNumberCellStateValue = {}));
+var SeriesNumberEvent;
+(function (SeriesNumberEvent) {
+    SeriesNumberEvent["seriesNumberCellHover"] = "seriesNumberCellHover";
+    SeriesNumberEvent["seriesNumberCellUnHover"] = "seriesNumberCellUnHover";
+    SeriesNumberEvent["seriesNumberCellClick"] = "seriesNumberCellClick";
+    SeriesNumberEvent["seriesNumberCellClickUp"] = "seriesNumberCellClickUp";
+    SeriesNumberEvent["seriesNumberCellCancelClick"] = "seriesNumberCellCancelClick";
+    SeriesNumberEvent["rowSeriesNumberWidthChange"] = "rowSeriesNumberWidthChange";
+    SeriesNumberEvent["resizeRowHeightStart"] = "resizeRowHeightStart";
+    SeriesNumberEvent["resizeColWidthStart"] = "resizeColWidthStart";
+})(SeriesNumberEvent || (SeriesNumberEvent = {}));
+
+class TableSeriesNumberEventManager {
+    constructor(tableSeriesNumber) {
+        this.isPointerDownStartSelect = false;
+        this._onPointermove = (e) => {
+            const target = e.target;
+            if (this.isPointerDownStartSelect) {
+                if (!this._tableSeriesNumber.interactionState.selectIndexs.has(target.name)) {
+                    this._tableSeriesNumber.interactionState.selectIndexs.add(target.name);
+                    this._tableSeriesNumber.renderSelectedIndexsState();
+                    this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellClick, {
+                        seriesNumberCell: target,
+                        event: e,
+                        isDragSelect: true
+                    });
+                }
+                else {
+                    if (this._tableSeriesNumber.interactionState._lastClickItem &&
+                        this._tableSeriesNumber.interactionState._lastClickItem.id === target.id) {
+                        return;
+                    }
+                    this._tableSeriesNumber.renderSelectedIndexsState();
+                    this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellClick, {
+                        seriesNumberCell: target,
+                        event: e,
+                        isDragSelect: true
+                    });
+                }
+                this._tableSeriesNumber.interactionState._lastClickItem = target;
+                return;
+            }
+            if (target.name.startsWith('col')) {
+                Number(target.name.split('-')[1]);
+                const canvasPointXY = target.stage.window.pointTransform(e.canvasX, e.canvasY);
+                const XYtoTarget = { x: 0, y: 0 };
+                target.globalTransMatrix.transformPoint(canvasPointXY, XYtoTarget);
+                if (XYtoTarget.x <= 4 ||
+                    (XYtoTarget.x <= target.getAttributes().width && XYtoTarget.x >= target.getAttributes().width - 4)) {
+                    target.setAttribute('cursor', 'col-resize');
+                }
+                else {
+                    target.setAttribute('cursor', 'default');
+                }
+            }
+            else if (target.name.startsWith('row')) {
+                Number(target.name.split('-')[1]);
+                const canvasPointXY = target.stage.window.pointTransform(e.canvasX, e.canvasY);
+                const XYtoTarget = { x: 0, y: 0 };
+                target.globalTransMatrix.transformPoint(canvasPointXY, XYtoTarget);
+                if (XYtoTarget.y <= 4 ||
+                    (XYtoTarget.y <= target.getAttributes().height && XYtoTarget.y >= target.getAttributes().height - 4)) {
+                    target.setAttribute('cursor', 'row-resize');
+                }
+                else {
+                    target.setAttribute('cursor', 'default');
+                }
+            }
+            if (this._tableSeriesNumber.interactionState._lastHoverItem) {
+                if (this._tableSeriesNumber.interactionState._lastHoverItem.id === target.id) {
+                    return;
+                }
+                this._unHoverHandler(this._tableSeriesNumber.interactionState._lastHoverItem, e);
+            }
+            if (this._tableSeriesNumber.getAttributes().hover) {
+                this._hoverHandler(target, e);
+            }
+        };
+        this._onPointerleave = (e) => {
+            if (this._tableSeriesNumber.interactionState._lastHoverItem) {
+                this._unHoverHandler(this._tableSeriesNumber.interactionState._lastHoverItem, e);
+                this._tableSeriesNumber.interactionState._lastHoverItem = null;
+            }
+        };
+        this._onPointerdown = (e) => {
+            var _a;
+            const target = e.target;
+            if (target.name.startsWith('col')) {
+                const colIndex = Number(target.name.split('-')[1]);
+                const canvasPointXY = target.stage.window.pointTransform(e.canvasX, e.canvasY);
+                const XYtoTarget = { x: 0, y: 0 };
+                target.globalTransMatrix.transformPoint(canvasPointXY, XYtoTarget);
+                if (XYtoTarget.x <= 4 ||
+                    (XYtoTarget.x <= target.getAttributes().width && XYtoTarget.x >= target.getAttributes().width - 4)) {
+                    let resizeTargetColIndex = colIndex;
+                    if (XYtoTarget.x <= 4) {
+                        resizeTargetColIndex = colIndex - 1;
+                    }
+                    this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.resizeColWidthStart, {
+                        colIndex: resizeTargetColIndex,
+                        event: e
+                    });
+                    return;
+                }
+            }
+            else if (target.name.startsWith('row')) {
+                const rowIndex = Number(target.name.split('-')[1]);
+                const canvasPointXY = target.stage.window.pointTransform(e.canvasX, e.canvasY);
+                const XYtoTarget = { x: 0, y: 0 };
+                target.globalTransMatrix.transformPoint(canvasPointXY, XYtoTarget);
+                if (XYtoTarget.y <= 4 ||
+                    (XYtoTarget.y <= target.getAttributes().height && XYtoTarget.y >= target.getAttributes().height - 4)) {
+                    let resizeTargetRowIndex = rowIndex;
+                    if (XYtoTarget.y <= 4) {
+                        resizeTargetRowIndex = rowIndex - 1;
+                    }
+                    this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.resizeRowHeightStart, {
+                        rowIndex: resizeTargetRowIndex,
+                        event: e
+                    });
+                    return;
+                }
+            }
+            this.isPointerDownStartSelect = true;
+            if ((_a = this._tableSeriesNumber.interactionState.selectIndexs) === null || _a === void 0 ? void 0 : _a.size) {
+                if (this._tableSeriesNumber.interactionState.selectIndexs.has(target.name)) {
+                    if (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey) {
+                        this._tableSeriesNumber.removeOneGroupSelected(target);
+                        this._unClickHandler(target.name, e);
+                    }
+                    else {
+                        this._tableSeriesNumber.removeAllSelectedIndexs();
+                        for (const name of this._tableSeriesNumber.interactionState.selectIndexs) {
+                            this._unClickHandler(name, e);
+                        }
+                    }
+                }
+                else {
+                    if (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey) ;
+                    else {
+                        this._tableSeriesNumber.removeAllSelectedIndexs();
+                        for (const name of this._tableSeriesNumber.interactionState.selectIndexs) {
+                            if ((target.name.startsWith('row') && name.startsWith('row')) ||
+                                (target.name.startsWith('col') && name.startsWith('col'))) {
+                                this._unClickHandler(name, e);
+                            }
+                        }
+                    }
+                }
+            }
+            this._clickHandler(target, e);
+        };
+        this._onPointerup = (e) => {
+            const target = e.target;
+            if (this.isPointerDownStartSelect) {
+                this.isPointerDownStartSelect = false;
+                this._tableSeriesNumber.interactionState._lastClickItem = null;
+                this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellClickUp, {
+                    seriesNumberCell: target,
+                    event: e
+                });
+            }
+        };
+        this._tableSeriesNumber = tableSeriesNumber;
+    }
+    bindEvents() {
+        const { hover = true, select = true } = this._tableSeriesNumber.attribute;
+        if (hover) {
+            this._tableSeriesNumber._rowSeriesNumberGroup.addEventListener('pointermove', this._onPointermove);
+            this._tableSeriesNumber._rowSeriesNumberGroup.addEventListener('pointerleave', this._onPointerleave);
+            this._tableSeriesNumber._colSeriesNumberGroup.addEventListener('pointermove', this._onPointermove);
+            this._tableSeriesNumber._colSeriesNumberGroup.addEventListener('pointerleave', this._onPointerleave);
+            this._tableSeriesNumber._cornerGroup.addEventListener('pointermove', this._onPointermove);
+            this._tableSeriesNumber._cornerGroup.addEventListener('pointerleave', this._onPointerleave);
+            this._tableSeriesNumber._frozenTopRowSeriesNumberGroup.addEventListener('pointermove', this._onPointermove);
+            this._tableSeriesNumber._frozenTopRowSeriesNumberGroup.addEventListener('pointerleave', this._onPointerleave);
+            this._tableSeriesNumber._frozenLeftColSeriesNumberGroup.addEventListener('pointermove', this._onPointermove);
+            this._tableSeriesNumber._frozenLeftColSeriesNumberGroup.addEventListener('pointerleave', this._onPointerleave);
+        }
+        if (select) {
+            this._tableSeriesNumber._rowSeriesNumberGroup.addEventListener('pointerdown', this._onPointerdown);
+            this._tableSeriesNumber._colSeriesNumberGroup.addEventListener('pointerdown', this._onPointerdown);
+            this._tableSeriesNumber._cornerGroup.addEventListener('pointerdown', this._onPointerdown);
+            this._tableSeriesNumber._frozenTopRowSeriesNumberGroup.addEventListener('pointerdown', this._onPointerdown);
+            this._tableSeriesNumber._frozenLeftColSeriesNumberGroup.addEventListener('pointerdown', this._onPointerdown);
+            vglobal.addEventListener('pointerup', this._onPointerup);
+        }
+    }
+    _hoverHandler(seriesNumberCell, e) {
+        this._tableSeriesNumber.interactionState._lastHoverItem = seriesNumberCell;
+        if (seriesNumberCell.hasState(SeriesNumberCellStateValue.select)) {
+            seriesNumberCell.useStates([SeriesNumberCellStateValue.select, SeriesNumberCellStateValue.hover]);
+        }
+        else {
+            seriesNumberCell.useStates([SeriesNumberCellStateValue.hover]);
+        }
+        this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellHover, {
+            seriesNumberCell,
+            event: e
+        });
+    }
+    _unHoverHandler(seriesNumberCell, e) {
+        seriesNumberCell.removeState(SeriesNumberCellStateValue.hover);
+        this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellUnHover, {
+            seriesNumberCell,
+            event: e
+        });
+    }
+    _clickHandler(seriesNumberCell, e) {
+        this._tableSeriesNumber.addOneGroupSelected(seriesNumberCell);
+        this._tableSeriesNumber.interactionState._lastClickItem = seriesNumberCell;
+        this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellClick, {
+            seriesNumberCell,
+            event: e
+        });
+    }
+    _unClickHandler(seriesNumberIndex, e) {
+        const isRow = seriesNumberIndex.startsWith('row');
+        const seriesNumberCell = isRow
+            ? this._tableSeriesNumber.getRowSeriesNumberCellGroup(Number(seriesNumberIndex.split('-')[1]))
+            : this._tableSeriesNumber.getColSeriesNumberCellGroup(Number(seriesNumberIndex.split('-')[1]));
+        seriesNumberCell === null || seriesNumberCell === void 0 ? void 0 : seriesNumberCell.removeState(SeriesNumberCellStateValue.select);
+        this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellCancelClick, {
+            index: seriesNumberIndex,
+            event: e
+        });
+    }
+}
+
+function loadTableSeriesNumberComponent() {
+    registerGroup();
+    registerText();
+    registerImage();
+}
+
+loadTableSeriesNumberComponent();
+class TableSeriesNumber extends AbstractComponent {
+    constructor(attributes, options) {
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, TableSeriesNumber.defaultAttributes, attributes));
+        this.name = 'tableSeriesNumber';
+        this._firstRowSeriesNumberIndex = 0;
+        this._firstColSeriesNumberIndex = 0;
+        this._maxTextWidth = 0;
+        this._changeRowSeriesNumberWidthTimer = null;
+        this.interactionState = { selectIndexs: new Set(), _lastHoverItem: null, _lastClickItem: null };
+        this._parsedRowSeriesNumberCellPadding = [0, 0, 0, 0];
+        this._parsedColSeriesNumberCellPadding = [0, 0, 0, 0];
+        this.initRenderAll = false;
+        this.initRenderAll = (options === null || options === void 0 ? void 0 : options.initRenderAll) || false;
+        this._skipRenderAttributes.push('frozenTopRow');
+        this._skipRenderAttributes.push('frozenLeftCol');
+        this._skipRenderAttributes.push('frozenRightCol');
+        this._skipRenderAttributes.push('frozenBottomRow');
+        this._skipRenderAttributes.push('rowCount');
+        this._skipRenderAttributes.push('colCount');
+        this._skipRenderAttributes.push('hover');
+        this._skipRenderAttributes.push('select');
+        if (this.attribute.rowSeriesNumberCellStyle.text.padding) {
+            const padding = parsePadding(this.attribute.rowSeriesNumberCellStyle.text.padding);
+            if (typeof padding === 'number') {
+                this._parsedRowSeriesNumberCellPadding = [padding, padding, padding, padding];
+            }
+            else {
+                this._parsedRowSeriesNumberCellPadding = padding;
+            }
+        }
+        if (this.attribute.colSeriesNumberCellStyle.text.padding) {
+            const padding = parsePadding(this.attribute.colSeriesNumberCellStyle.text.padding);
+            if (typeof padding === 'number') {
+                this._parsedColSeriesNumberCellPadding = [padding, padding, padding, padding];
+            }
+            else {
+                this._parsedColSeriesNumberCellPadding = padding;
+            }
+        }
+        this._eventManager = new TableSeriesNumberEventManager(this);
+    }
+    get rowSeriesNumberWidth() {
+        const { rowSeriesNumberWidth } = this.attribute;
+        if (this._maxTextWidth) {
+            return Math.max(this._maxTextWidth + this._parsedRowSeriesNumberCellPadding[3] + this._parsedRowSeriesNumberCellPadding[1], typeof rowSeriesNumberWidth === 'number' ? rowSeriesNumberWidth : 40);
+        }
+        return typeof rowSeriesNumberWidth === 'number' ? rowSeriesNumberWidth : 40;
+    }
+    get colSeriesNumberHeight() {
+        const { colSeriesNumberHeight } = this.attribute;
+        return typeof colSeriesNumberHeight === 'number' ? colSeriesNumberHeight : 20;
+    }
+    get rowCount() {
+        const { rowCount } = this.attribute;
+        return rowCount;
+    }
+    get colCount() {
+        const { colCount } = this.attribute;
+        return colCount;
+    }
+    bindEvents() {
+        this._eventManager.bindEvents();
+    }
+    dispatchTableSeriesNumberEvent(event, ...args) {
+        this._dispatchEvent(event, ...args);
+    }
+    render() {
+        const { rowCount, colCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const innerView = this.createOrUpdateChild('tableSeriesNumberContainer', {
+            x: 0,
+            y: 0,
+            fill: 'rgba(1,1,1,0)',
+            width: this.rowSeriesNumberWidth + colCount * (typeof colWidth === 'number' ? colWidth : 20),
+            height: this.colSeriesNumberHeight + rowCount * (typeof rowHeight === 'number' ? rowHeight : 20),
+            pickable: false,
+            childrenPickable: true
+        }, 'group');
+        this._tableSeriesNumberContainer = innerView;
+        this._renderContent();
+    }
+    _renderContent() {
+        this._renderRowSeriesNumber();
+        this._renderColSeriesNumber();
+        this._renderFrozenTopRowSeriesNumber();
+        this._renderFrozenLeftColSeriesNumber();
+        this._renderCorner();
+        if (this.initRenderAll) {
+            this.recreateCellsToRowSeriesNumberGroup(0, this.attribute.rowCount - 1);
+            this.recreateCellsToColSeriesNumberGroup(0, this.attribute.colCount - 1);
+            let y = 0;
+            for (let i = 0; i < this.attribute.rowCount; i++) {
+                this.setRowSeriesNumberCellAttributes(i, {
+                    y,
+                    height: typeof this.attribute.rowHeight === 'number' ? this.attribute.rowHeight : 20
+                });
+                y += typeof this.attribute.rowHeight === 'number' ? this.attribute.rowHeight : 20;
+            }
+            let x = 0;
+            for (let i = 0; i < this.attribute.colCount; i++) {
+                this.setColSeriesNumberCellAttributes(i, {
+                    x,
+                    width: typeof this.attribute.colWidth === 'number' ? this.attribute.colWidth : 20
+                });
+                x += typeof this.attribute.colWidth === 'number' ? this.attribute.colWidth : 20;
+            }
+        }
+    }
+    _renderCorner() {
+        const { rowCount, colCount, cornerCellStyle: cornerSeriesNumberCellStyle, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const cornerGroup = this._tableSeriesNumberContainer.createOrUpdateChild('cornerSeriesNumberCell', {
+            x: 0,
+            y: 0,
+            fill: cornerSeriesNumberCellStyle.bgColor,
+            stroke: cornerSeriesNumberCellStyle.borderLine.stroke,
+            lineWidth: cornerSeriesNumberCellStyle.borderLine.lineWidth,
+            pickable: true,
+            width: this.rowSeriesNumberWidth,
+            height: this.colSeriesNumberHeight
+        }, 'group');
+        cornerGroup.id = '0,0';
+        cornerGroup.states = cornerSeriesNumberCellStyle.states;
+        this._cornerGroup = cornerGroup;
+    }
+    _renderRowSeriesNumber() {
+        const { frozenRowCount, rowCount, colCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const rowSeriesNumberGroup = this._tableSeriesNumberContainer.createOrUpdateChild('rowSeriesNumberCellGroup', {
+            x: 0,
+            y: this.colSeriesNumberHeight,
+            pickable: true,
+            fill: rowSeriesNumberCellStyle.bgColor,
+            width: this.rowSeriesNumberWidth,
+            height: rowCount * (typeof rowHeight === 'number' ? rowHeight : 20)
+        }, 'group');
+        this._rowSeriesNumberGroup = rowSeriesNumberGroup;
+    }
+    _renderColSeriesNumber() {
+        const { frozenColCount, rowCount, colCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const colSeriesNumberGroup = this._tableSeriesNumberContainer.createOrUpdateChild('colSeriesNumberCellGroup', {
+            x: this.rowSeriesNumberWidth + frozenColCount * (typeof colWidth === 'number' ? colWidth : 20),
+            y: 0,
+            pickable: true,
+            fill: colSeriesNumberCellStyle.bgColor,
+            width: colCount * (typeof colWidth === 'number' ? colWidth : 20),
+            height: this.colSeriesNumberHeight
+        }, 'group');
+        this._colSeriesNumberGroup = colSeriesNumberGroup;
+    }
+    _renderFrozenTopRowSeriesNumber() {
+        const { frozenRowCount, colCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const frozenTopSeriesNumberGroup = this._tableSeriesNumberContainer.createOrUpdateChild('frozenTopSeriesNumberGroup', {
+            x: 0,
+            y: this.colSeriesNumberHeight,
+            width: this.rowSeriesNumberWidth,
+            height: frozenRowCount * (typeof rowHeight === 'number' ? rowHeight : 20)
+        }, 'group');
+        this._frozenTopRowSeriesNumberGroup = frozenTopSeriesNumberGroup;
+    }
+    _renderFrozenLeftColSeriesNumber() {
+        const { frozenColCount, rowCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        const frozenLeftSeriesNumberGroup = this._tableSeriesNumberContainer.createOrUpdateChild('frozenLeftSeriesNumberGroup', {
+            x: this.rowSeriesNumberWidth,
+            y: 0,
+            height: this.colSeriesNumberHeight,
+            width: frozenColCount * (typeof colWidth === 'number' ? colWidth : 20)
+        }, 'group');
+        this._frozenLeftColSeriesNumberGroup = frozenLeftSeriesNumberGroup;
+    }
+    recreateCellsToRowSeriesNumberGroup(startIndex, endIndex) {
+        var _a, _b;
+        const { frozenRowCount, rowCount, colCount, rowSeriesNumberWidth, colSeriesNumberHeight, rowSeriesNumberCellStyle, colSeriesNumberCellStyle, rowHeight, colWidth } = this.attribute;
+        this._frozenTopRowSeriesNumberGroup.removeAllChild();
+        this._rowSeriesNumberGroup.removeAllChild();
+        let y = 0;
+        const height = (typeof rowHeight === 'number' ? rowHeight : 20) -
+            this._parsedRowSeriesNumberCellPadding[0] -
+            this._parsedRowSeriesNumberCellPadding[2];
+        if (rowSeriesNumberCellStyle.text.textBaseline === 'middle') {
+            y = this._parsedRowSeriesNumberCellPadding[0] + (height - rowSeriesNumberCellStyle.text.fontSize) / 2;
+        }
+        else if (rowSeriesNumberCellStyle.text.textBaseline === 'bottom') {
+            y = this._parsedRowSeriesNumberCellPadding[0] + height - rowSeriesNumberCellStyle.text.fontSize;
+        }
+        else {
+            y = this._parsedRowSeriesNumberCellPadding[0];
+        }
+        let x;
+        const width = this.rowSeriesNumberWidth - this._parsedRowSeriesNumberCellPadding[3] - this._parsedRowSeriesNumberCellPadding[1];
+        const textAlign = this.attribute.rowSeriesNumberCellStyle.text.textAlign;
+        const padding = this._parsedRowSeriesNumberCellPadding;
+        if (textAlign === 'center') {
+            x = padding[3] + +width / 2;
+        }
+        else if (textAlign === 'right') {
+            x = padding[3] + width;
+        }
+        else {
+            x = padding[3];
+        }
+        for (let i = 0; i < frozenRowCount; i++) {
+            const cellGroup = this._frozenTopRowSeriesNumberGroup.createOrUpdateChild(`rowSeriesNumberCell-${i}`, {
+                x: 0,
+                y: 0,
+                pickable: true,
+                fill: rowSeriesNumberCellStyle.bgColor,
+                stroke: rowSeriesNumberCellStyle.borderLine.stroke,
+                lineWidth: rowSeriesNumberCellStyle.borderLine.lineWidth,
+                width: this.rowSeriesNumberWidth,
+                height: typeof rowHeight === 'number' ? rowHeight : 20
+            }, 'group');
+            cellGroup.id = i;
+            cellGroup.states = rowSeriesNumberCellStyle.states;
+            if ((_a = this.interactionState.selectIndexs) === null || _a === void 0 ? void 0 : _a.has(cellGroup.name)) {
+                cellGroup.useStates([SeriesNumberCellStateValue.select]);
+            }
+            cellGroup.createOrUpdateChild(`rowSeriesNumberCellText-${i}`, Object.assign(Object.assign({ x,
+                y, text: `${i + 1}`, pickable: false, dx: 0 }, rowSeriesNumberCellStyle.text), { textBaseline: 'top' }), 'text');
+        }
+        this._firstRowSeriesNumberIndex = Math.max(startIndex, frozenRowCount) - frozenRowCount;
+        let thisTextMaxWidth = 0;
+        for (let i = this._firstRowSeriesNumberIndex; i <= endIndex - frozenRowCount; i++) {
+            const cellGroup = this._rowSeriesNumberGroup.createOrUpdateChild(`rowSeriesNumberCell-${i + frozenRowCount}`, {
+                x: 0,
+                y: 0,
+                pickable: true,
+                fill: rowSeriesNumberCellStyle.bgColor,
+                stroke: rowSeriesNumberCellStyle.borderLine.stroke,
+                lineWidth: rowSeriesNumberCellStyle.borderLine.lineWidth,
+                width: this.rowSeriesNumberWidth,
+                height: typeof rowHeight === 'number' ? rowHeight : 20
+            }, 'group');
+            cellGroup.id = i + frozenRowCount;
+            cellGroup.states = rowSeriesNumberCellStyle.states;
+            if ((_b = this.interactionState.selectIndexs) === null || _b === void 0 ? void 0 : _b.has(cellGroup.name)) {
+                cellGroup.useStates([SeriesNumberCellStateValue.select]);
+            }
+            const text = cellGroup.createOrUpdateChild(`rowSeriesNumberCellText-${i + frozenRowCount}`, Object.assign(Object.assign({ x,
+                y, text: `${i + 1 + frozenRowCount}`, pickable: false, dx: 0 }, rowSeriesNumberCellStyle.text), { textBaseline: 'top' }), 'text');
+            if (i === endIndex - frozenRowCount) {
+                thisTextMaxWidth = text.clipedWidth;
+            }
+        }
+        clearTimeout(this._changeRowSeriesNumberWidthTimer);
+        this._changeRowSeriesNumberWidthTimer = setTimeout(() => {
+            if (Math.abs(thisTextMaxWidth - this._maxTextWidth) >= 6) {
+                const oldWidth = this._maxTextWidth;
+                this._maxTextWidth = thisTextMaxWidth;
+                this.changeRowSeriesNumberWidth(Math.max(this.rowSeriesNumberWidth, 20));
+                this._dispatchEvent(SeriesNumberEvent.rowSeriesNumberWidthChange, {
+                    newWidth: this.rowSeriesNumberWidth,
+                    oldWidth
+                });
+            }
+        }, 100);
+    }
+    recreateCellsToColSeriesNumberGroup(startIndex, endIndex) {
+        var _a, _b;
+        const { colCount, colSeriesNumberCellStyle, frozenColCount, colWidth } = this
+            .attribute;
+        this._frozenLeftColSeriesNumberGroup.removeAllChild();
+        this._colSeriesNumberGroup.removeAllChild();
+        let y = 0;
+        const height = this.colSeriesNumberHeight -
+            this._parsedColSeriesNumberCellPadding[0] -
+            this._parsedColSeriesNumberCellPadding[2];
+        if (colSeriesNumberCellStyle.text.textBaseline === 'middle') {
+            y = this._parsedColSeriesNumberCellPadding[0] + (height - colSeriesNumberCellStyle.text.fontSize) / 2;
+        }
+        else if (colSeriesNumberCellStyle.text.textBaseline === 'bottom') {
+            y = this._parsedColSeriesNumberCellPadding[0] + height - colSeriesNumberCellStyle.text.fontSize;
+        }
+        else {
+            y = this._parsedColSeriesNumberCellPadding[0];
+        }
+        let x;
+        const width = (typeof colWidth === 'number' ? colWidth : 20) -
+            this._parsedColSeriesNumberCellPadding[3] -
+            this._parsedColSeriesNumberCellPadding[1];
+        const textAlign = this.attribute.colSeriesNumberCellStyle.text.textAlign;
+        const padding = this._parsedColSeriesNumberCellPadding;
+        if (textAlign === 'center') {
+            x = padding[3] + +width / 2;
+        }
+        else if (textAlign === 'right') {
+            x = padding[3] + width;
+        }
+        else {
+            x = padding[3];
+        }
+        for (let i = 0; i < frozenColCount; i++) {
+            const cellGroup = this._frozenLeftColSeriesNumberGroup.createOrUpdateChild(`colSeriesNumberCell-${i}`, {
+                x: 0,
+                y: 0,
+                pickable: true,
+                fill: colSeriesNumberCellStyle.bgColor,
+                stroke: colSeriesNumberCellStyle.borderLine.stroke,
+                lineWidth: colSeriesNumberCellStyle.borderLine.lineWidth,
+                width: typeof colWidth === 'number' ? colWidth : 20,
+                height: this.colSeriesNumberHeight
+            }, 'group');
+            cellGroup.id = i;
+            cellGroup.states = colSeriesNumberCellStyle.states;
+            if ((_a = this.interactionState.selectIndexs) === null || _a === void 0 ? void 0 : _a.has(cellGroup.name)) {
+                cellGroup.useStates([SeriesNumberCellStateValue.select]);
+            }
+            cellGroup.createOrUpdateChild(`colSeriesNumberCellText-${i}`, Object.assign(Object.assign({ x,
+                y, dx: 0, text: generateColField(i), pickable: false }, colSeriesNumberCellStyle.text), { textBaseline: 'top' }), 'text');
+        }
+        this._firstColSeriesNumberIndex = Math.max(startIndex, frozenColCount) - frozenColCount;
+        for (let i = this._firstColSeriesNumberIndex; i <= endIndex - frozenColCount; i++) {
+            const cellGroup = this._colSeriesNumberGroup.createOrUpdateChild(`colSeriesNumberCell-${i + frozenColCount}`, {
+                x: 0,
+                y: 0,
+                pickable: true,
+                fill: colSeriesNumberCellStyle.bgColor,
+                stroke: colSeriesNumberCellStyle.borderLine.stroke,
+                lineWidth: colSeriesNumberCellStyle.borderLine.lineWidth,
+                width: typeof colWidth === 'number' ? colWidth : 20,
+                height: this.colSeriesNumberHeight
+            }, 'group');
+            cellGroup.id = i + frozenColCount;
+            cellGroup.states = colSeriesNumberCellStyle.states;
+            if ((_b = this.interactionState.selectIndexs) === null || _b === void 0 ? void 0 : _b.has(cellGroup.name)) {
+                cellGroup.useStates([SeriesNumberCellStateValue.select]);
+            }
+            cellGroup.createOrUpdateChild(`colSeriesNumberCellText-${i + frozenColCount}`, Object.assign(Object.assign({ x,
+                y, dx: 0, text: generateColField(i + frozenColCount), pickable: false }, colSeriesNumberCellStyle.text), { textBaseline: 'top' }), 'text');
+        }
+    }
+    changeRowSeriesNumberWidth(newWidth) {
+        const { rowHeight, rowCount: oldRowCount, frozenRowCount, frozenColCount: frozenLeftCol, rowSeriesNumberCellStyle } = this.attribute;
+        this._cornerGroup.setAttributes({
+            width: newWidth
+        });
+        this._frozenTopRowSeriesNumberGroup.setAttributes({
+            width: newWidth
+        });
+        for (let i = 0; i < this._frozenTopRowSeriesNumberGroup.children.length; i++) {
+            this.setRowSeriesNumberCellAttributes(i, {
+                width: newWidth
+            });
+        }
+        this._rowSeriesNumberGroup.setAttributes({
+            width: newWidth
+        });
+        for (let i = 0; i < this._rowSeriesNumberGroup.children.length; i++) {
+            this.setRowSeriesNumberCellAttributes(i + this._firstRowSeriesNumberIndex + frozenRowCount, {
+                width: newWidth
+            });
+        }
+        this._frozenLeftColSeriesNumberGroup.setAttributes({
+            x: newWidth
+        });
+        this._colSeriesNumberGroup.setAttributes({
+            x: newWidth + this._frozenLeftColSeriesNumberGroup.getAttributes().width
+        });
+    }
+    getRowSeriesNumberCellGroup(index) {
+        const { frozenRowCount } = this.getAttributes();
+        if (index >= 0 && index < frozenRowCount) {
+            return this._frozenTopRowSeriesNumberGroup.children[index];
+        }
+        const rowSeriesNumberGroup = this._rowSeriesNumberGroup;
+        const rowSeriesNumberCell = rowSeriesNumberGroup.children[index - frozenRowCount - this._firstRowSeriesNumberIndex];
+        return rowSeriesNumberCell;
+    }
+    getColSeriesNumberCellGroup(index) {
+        const { frozenColCount } = this.getAttributes();
+        if (index >= 0 && index < frozenColCount) {
+            return this._frozenLeftColSeriesNumberGroup.children[index];
+        }
+        const colSeriesNumberGroup = this._colSeriesNumberGroup;
+        const colSeriesNumberCell = colSeriesNumberGroup.children[index - frozenColCount - this._firstColSeriesNumberIndex];
+        return colSeriesNumberCell;
+    }
+    getRowSeriesNumberCellAttributes(index) {
+        const { frozenRowCount } = this.getAttributes();
+        if (index >= 0 && index < frozenRowCount) {
+            return this._frozenTopRowSeriesNumberGroup.children[index].attribute;
+        }
+        const rowSeriesNumberGroup = this._rowSeriesNumberGroup;
+        const rowSeriesNumberCell = rowSeriesNumberGroup.children[index - frozenRowCount - this._firstRowSeriesNumberIndex];
+        return rowSeriesNumberCell.attribute;
+    }
+    getColSeriesNumberCellAttributes(index) {
+        const { frozenColCount } = this.getAttributes();
+        if (index >= 0 && index < frozenColCount) {
+            return this._frozenLeftColSeriesNumberGroup.children[index].attribute;
+        }
+        const colSeriesNumberGroup = this._colSeriesNumberGroup;
+        const colSeriesNumberCell = colSeriesNumberGroup.children[index - frozenColCount - this._firstColSeriesNumberIndex];
+        return colSeriesNumberCell.attribute;
+    }
+    setRowSeriesNumberCellAttributes(index, attributes) {
+        const { frozenRowCount } = this.getAttributes();
+        let targetCellGroup;
+        if (index >= 0 && index < frozenRowCount) {
+            const { height: oldHeight, width: oldWidth, y } = this._frozenTopRowSeriesNumberGroup.getAttributes();
+            targetCellGroup = this._frozenTopRowSeriesNumberGroup.children[index];
+            targetCellGroup.setAttributes(attributes);
+            if (attributes.height) {
+                this._frozenTopRowSeriesNumberGroup.setAttributes({
+                    height: this._frozenTopRowSeriesNumberGroup.getAttributes().height + (attributes.height - oldHeight)
+                });
+            }
+            if (attributes.width) {
+                this._frozenTopRowSeriesNumberGroup.setAttributes({
+                    width: this._frozenTopRowSeriesNumberGroup.getAttributes().width + (attributes.width - oldWidth)
+                });
+            }
+            if (attributes.height) {
+                this._rowSeriesNumberGroup.setAttributes({
+                    y: this._frozenTopRowSeriesNumberGroup.getAttributes().height +
+                        this._frozenTopRowSeriesNumberGroup.getAttributes().y
+                });
+            }
+        }
+        else {
+            const rowSeriesNumberGroup = this._rowSeriesNumberGroup;
+            targetCellGroup = rowSeriesNumberGroup.children[index - frozenRowCount - this._firstRowSeriesNumberIndex];
+            targetCellGroup.setAttributes(attributes);
+        }
+        if (attributes.width) {
+            let x;
+            const width = attributes.width - this._parsedRowSeriesNumberCellPadding[3] - this._parsedRowSeriesNumberCellPadding[1];
+            const textAlign = this.attribute.rowSeriesNumberCellStyle.text.textAlign;
+            const padding = this._parsedRowSeriesNumberCellPadding;
+            if (textAlign === 'center') {
+                x = padding[3] + +width / 2;
+            }
+            else if (textAlign === 'right') {
+                x = padding[3] + width;
+            }
+            else {
+                x = padding[3];
+            }
+            targetCellGroup.children[0].setAttributes({
+                x
+            });
+        }
+        if (attributes.height) {
+            const height = attributes.height - this._parsedRowSeriesNumberCellPadding[0] - this._parsedRowSeriesNumberCellPadding[2];
+            const textBaseline = this.attribute.rowSeriesNumberCellStyle.text.textBaseline;
+            const padding = this._parsedRowSeriesNumberCellPadding;
+            let y;
+            if (textBaseline === 'middle') {
+                y = padding[0] + (height - this.attribute.rowSeriesNumberCellStyle.text.fontSize) / 2;
+            }
+            else if (textBaseline === 'bottom') {
+                y = padding[0] + height - this.attribute.rowSeriesNumberCellStyle.text.fontSize;
+            }
+            else {
+                y = padding[0];
+            }
+            targetCellGroup.children[0].setAttributes({
+                y
+            });
+        }
+    }
+    setColSeriesNumberCellAttributes(index, attributes) {
+        const { frozenColCount: frozenColCount } = this.getAttributes();
+        let targetCellGroup;
+        if (index >= 0 && index < frozenColCount) {
+            targetCellGroup = this._frozenLeftColSeriesNumberGroup.children[index];
+            const { height: oldHeight, width: oldWidth } = targetCellGroup.getAttributes();
+            targetCellGroup.setAttributes(attributes);
+            if (attributes.height) {
+                this._frozenLeftColSeriesNumberGroup.setAttributes({
+                    height: this._frozenLeftColSeriesNumberGroup.getAttributes().height + (attributes.height - oldHeight)
+                });
+            }
+            if (attributes.width) {
+                this._frozenLeftColSeriesNumberGroup.setAttributes({
+                    width: this._frozenLeftColSeriesNumberGroup.getAttributes().width + (attributes.width - oldWidth)
+                });
+            }
+            if (attributes.width) {
+                this._colSeriesNumberGroup.setAttributes({
+                    x: this._frozenLeftColSeriesNumberGroup.getAttributes().width +
+                        this._frozenLeftColSeriesNumberGroup.getAttributes().x
+                });
+            }
+        }
+        else {
+            const colSeriesNumberGroup = this._colSeriesNumberGroup;
+            targetCellGroup = colSeriesNumberGroup.children[index - frozenColCount - this._firstColSeriesNumberIndex];
+            targetCellGroup.setAttributes(attributes);
+        }
+        if (attributes.width) {
+            let x;
+            const width = attributes.width - this._parsedColSeriesNumberCellPadding[3] - this._parsedColSeriesNumberCellPadding[1];
+            const textAlign = this.attribute.colSeriesNumberCellStyle.text.textAlign;
+            const padding = this._parsedColSeriesNumberCellPadding;
+            if (textAlign === 'center') {
+                x = padding[3] + +width / 2;
+            }
+            else if (textAlign === 'right') {
+                x = padding[3] + width;
+            }
+            else {
+                x = padding[3];
+            }
+            targetCellGroup.children[0].setAttributes({
+                x
+            });
+        }
+        if (attributes.height) {
+            const height = attributes.height - this._parsedColSeriesNumberCellPadding[0] - this._parsedColSeriesNumberCellPadding[2];
+            const textBaseline = this.attribute.colSeriesNumberCellStyle.text.textBaseline;
+            const padding = this._parsedColSeriesNumberCellPadding;
+            let y;
+            if (textBaseline === 'middle') {
+                y = padding[0] + (height - this.attribute.colSeriesNumberCellStyle.text.fontSize) / 2;
+            }
+            else if (textBaseline === 'bottom') {
+                y = padding[0] + height - this.attribute.colSeriesNumberCellStyle.text.fontSize;
+            }
+            else {
+                y = padding[0];
+            }
+            targetCellGroup.children[0].setAttributes({
+                y
+            });
+        }
+    }
+    setRowSeriesNumberGroupAttributes(attributes) {
+        this._rowSeriesNumberGroup.setAttributes(attributes);
+    }
+    setColSeriesNumberGroupAttributes(attributes) {
+        this._colSeriesNumberGroup.setAttributes(attributes);
+    }
+    addSelectedIndex(isRow, index) {
+        let name;
+        if (isRow) {
+            name = `rowSeriesNumberCell-${index}`;
+        }
+        else {
+            name = `colSeriesNumberCell-${index}`;
+        }
+        this.interactionState.selectIndexs.add(name);
+    }
+    addRowSelectedRanges(ranges) {
+        performance.now();
+        for (let i = 0; i < ranges.length; i++) {
+            const { startIndex, endIndex } = ranges[i];
+            for (let j = startIndex; j <= endIndex; j++) {
+                const name = `rowSeriesNumberCell-${j}`;
+                this.interactionState.selectIndexs.add(name);
+            }
+        }
+        performance.now();
+    }
+    addColSelectedRanges(ranges) {
+        for (let i = 0; i < ranges.length; i++) {
+            const { startIndex, endIndex } = ranges[i];
+            for (let j = startIndex; j <= endIndex; j++) {
+                const name = `colSeriesNumberCell-${j}`;
+                this.interactionState.selectIndexs.add(name);
+            }
+        }
+    }
+    addCornderSelected() {
+        this.interactionState.selectIndexs.add(this._cornerGroup.name);
+    }
+    resetAllSelectedIndexs({ rowIndexs, colIndexs }) {
+        this.interactionState.selectIndexs = new Set();
+        if (rowIndexs) {
+            for (let i = 0; i < rowIndexs.length; i++) {
+                const name = `rowSeriesNumberCell-${rowIndexs[i]}`;
+                this.interactionState.selectIndexs.add(name);
+            }
+        }
+        if (colIndexs) {
+            for (let i = 0; i < colIndexs.length; i++) {
+                const name = `colSeriesNumberCell-${colIndexs[i]}`;
+                this.interactionState.selectIndexs.add(name);
+            }
+        }
+    }
+    removeSelectedIndex(isRow, index) {
+        let name;
+        if (isRow) {
+            name = `rowSeriesNumberLeftCell-${index}`;
+        }
+        else {
+            name = `colSeriesNumberCell-${index}`;
+        }
+        this.interactionState.selectIndexs.delete(name);
+    }
+    removeAllSelectedIndexs() {
+        var _a, _b;
+        for (const name of this.interactionState.selectIndexs) {
+            const isRow = name.startsWith('row');
+            const isCol = name.startsWith('col');
+            const index = Number(name.split('-')[1]);
+            if (isRow) {
+                (_a = this.getRowSeriesNumberCellGroup(index)) === null || _a === void 0 ? void 0 : _a.removeState(SeriesNumberCellStateValue.select);
+            }
+            else if (isCol) {
+                (_b = this.getColSeriesNumberCellGroup(index)) === null || _b === void 0 ? void 0 : _b.removeState(SeriesNumberCellStateValue.select);
+            }
+            else {
+                this._cornerGroup.removeState(SeriesNumberCellStateValue.select);
+            }
+        }
+        this.interactionState.selectIndexs.clear();
+    }
+    removeOneGroupSelected(group) {
+        this.interactionState.selectIndexs.delete(group.name);
+        group.removeState(SeriesNumberCellStateValue.select);
+    }
+    addOneGroupSelected(group) {
+        this.interactionState.selectIndexs.add(group.name);
+        group.useStates([SeriesNumberCellStateValue.select]);
+    }
+    renderSelectedIndexsState() {
+        var _a, _b;
+        this.attribute;
+        for (const name of this.interactionState.selectIndexs) {
+            const isRow = name.startsWith('row');
+            const isCol = name.startsWith('col');
+            const index = Number(name.split('-')[1]);
+            if (isRow) {
+                (_a = this.getRowSeriesNumberCellGroup(index)) === null || _a === void 0 ? void 0 : _a.useStates([SeriesNumberCellStateValue.select]);
+            }
+            else if (isCol) {
+                (_b = this.getColSeriesNumberCellGroup(index)) === null || _b === void 0 ? void 0 : _b.useStates([SeriesNumberCellStateValue.select]);
+            }
+            else {
+                this._cornerGroup.useStates([SeriesNumberCellStateValue.select]);
+            }
+        }
+        this.stage.render();
+    }
+}
+TableSeriesNumber.defaultAttributes = {
+    frozenRowCount: 0,
+    frozenColCount: 0,
+    rightFrozenColCount: 0,
+    bottomFrozenRowCount: 0,
+    pickable: false,
+    rowCount: 100,
+    colCount: 100,
+    rowHeight: 20,
+    colWidth: 50,
+    rowSeriesNumberWidth: 30,
+    colSeriesNumberHeight: 30,
+    rowSeriesNumberCellStyle: {
+        text: {
+            fontSize: 14,
+            fill: '#7A7A7A',
+            pickable: false,
+            textAlign: 'left',
+            textBaseline: 'middle',
+            padding: [2, 4, 2, 4]
+        },
+        borderLine: {
+            stroke: '#D9D9D9',
+            lineWidth: 1,
+            pickable: false
+        },
+        bgColor: '#F9F9F9',
+        states: {
+            hover: {
+                fill: '#98C8A5',
+                opacity: 0.7
+            },
+            select: {
+                fill: 'yellow',
+                opacity: 0.7
+            }
+        }
+    },
+    colSeriesNumberCellStyle: {
+        text: {
+            fontSize: 14,
+            fill: '#7A7A7A',
+            pickable: false,
+            textAlign: 'left',
+            textBaseline: 'middle',
+            padding: [2, 4, 2, 4]
+        },
+        borderLine: {
+            stroke: '#D9D9D9',
+            lineWidth: 1,
+            pickable: false
+        },
+        bgColor: '#F9F9F9',
+        states: {
+            hover: {
+                fill: '#98C8A5',
+                opacity: 0.7
+            },
+            select: {
+                fill: 'orange',
+                opacity: 0.7
+            }
+        }
+    },
+    cornerCellStyle: {
+        borderLine: {
+            stroke: '#D9D9D9',
+            lineWidth: 1,
+            pickable: false
+        },
+        bgColor: '#F9F9F9',
+        states: {
+            hover: {
+                fill: '#98C8A5',
+                opacity: 0.7
+            },
+            select: {
+                fill: '#98C8A5',
+                opacity: 0.7
+            }
+        }
+    },
+    hover: true,
+    select: true
+};
+
+const version = "1.0.8-alpha.2";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };