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

package/dist/index.es.js

@@ -13364,7 +13364,7 @@ let DefaultDrawContribution = class {
     return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
   }
   clearScreen(renderService, context, drawContext) {
-    var _a, _b, _c;
+    var _a, _b;
     const {
         clear: clear,
         viewBox: viewBox
@@ -13372,9 +13372,9 @@ let DefaultDrawContribution = class {
       width = viewBox.width(),
       height = viewBox.height();
     if (clear) {
-      context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams);
-      const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
-      if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
+      context.clearRect(0, 0, width, height);
+      const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
+      if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
         const res = stage.resources.get(clear);
         res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
       } else context.fillStyle = createColor(context, clear, {
@@ -33127,6 +33127,997 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.9-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["seriesNumberCellRightClick"] = "seriesNumberCellRightClick";
+})(SeriesNumberEvent || (SeriesNumberEvent = {}));
+
+class TableSeriesNumberEventManager {
+    constructor(tableSeriesNumber) {
+        this.isPointerDownStartSelect = false;
+        this._onRightDown = (e) => {
+            const target = e.target;
+            this._tableSeriesNumber.dispatchTableSeriesNumberEvent(SeriesNumberEvent.seriesNumberCellRightClick, {
+                seriesNumberCell: target,
+                event: e
+            });
+        };
+        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;
+            if (e.button === 2) {
+                return;
+            }
+            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);
+        }
+        this._tableSeriesNumber._rowSeriesNumberGroup.addEventListener('rightdown', this._onRightDown);
+        this._tableSeriesNumber._colSeriesNumberGroup.addEventListener('rightdown', this._onRightDown);
+        this._tableSeriesNumber._cornerGroup.addEventListener('rightdown', this._onRightDown);
+        this._tableSeriesNumber._frozenTopRowSeriesNumberGroup.addEventListener('rightdown', this._onRightDown);
+        this._tableSeriesNumber._frozenLeftColSeriesNumberGroup.addEventListener('rightdown', this._onRightDown);
+    }
+    _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.9-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 };