@visactor/vtable 0.9.1-alpha.5 → 0.9.1

package/dist/vtable.js

@@ -27081,7 +27081,7 @@
             }
             newHeight = cellGroup.attribute.height - (padding[0] + padding[2]);
             cellGroup.forEachChildren((child) => {
-                if (child.type === 'rect') {
+                if (child.type === 'rect' || child.type === 'chart') {
                     return;
                 }
                 if (child.name === 'mark') {
@@ -27100,7 +27100,7 @@
         }
         else if (textBaseline === 'middle' || textBaseline === 'bottom') {
             cellGroup.forEachChildren((child) => {
-                if (child.type === 'rect') {
+                if (child.type === 'rect' || child.type === 'chart') {
                     return;
                 }
                 if (child.name === 'mark') {
@@ -28578,6 +28578,7 @@
         }
         cellGroup.AABBBounds.width();
         const chartGroup = new Chart({
+            stroke: false,
             x: padding[3],
             y: padding[0],
             canvas: table.canvas,
@@ -28590,10 +28591,10 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             viewBox: {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + table.tableX + padding[3]) + table.scrollLeft,
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + width + table.tableX - padding[1]) + table.scrollLeft,
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + table.tableY + padding[0]) + table.scrollTop,
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + height + table.tableY - padding[2] + table.scrollTop)
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + height - padding[2] + table.scrollTop)
             }
         });
         cellGroup.appendChild(chartGroup);
@@ -30850,7 +30851,7 @@
         const { autoRowHeight } = scene.table.internalProps;
         let needRerangeRow = false;
         const colOrCornerHeaderColumn = scene.getColGroup(col, true);
-        const oldColOrCornerHeaderColumnWidth = colOrCornerHeaderColumn.attribute.width;
+        const oldColOrCornerHeaderColumnWidth = colOrCornerHeaderColumn?.attribute.width;
         colOrCornerHeaderColumn?.setAttribute('width', oldColOrCornerHeaderColumnWidth + detaX);
         colOrCornerHeaderColumn?.forEachChildren((cell, index) => {
             const isHeightChange = updateCellWidth(scene, cell, col, cell.row, oldColOrCornerHeaderColumnWidth, detaX, index < scene.table.columnHeaderLevelCount, autoRowHeight);
@@ -32113,7 +32114,7 @@
         }
     }
 
-    function createFrameBorder(group, frameTheme, role, strokeArray) {
+    function createFrameBorder(group, frameTheme, role, strokeArray, justForXYPosition) {
         if (!frameTheme) {
             return;
         }
@@ -32168,10 +32169,13 @@
         if (isTableGroup && (rectAttributes.shadowBlur || rectAttributes.lineWidth)) {
             const deltaX = (rectAttributes.shadowBlur ?? 0) + (borderLeft + borderRight) / 2;
             const deltaY = (rectAttributes.shadowBlur ?? 0) + (borderTop + borderBottom) / 2;
-            groupAttributes.x = group.attribute.x + deltaX;
-            groupAttributes.y = group.attribute.y + deltaY;
+            groupAttributes.x = deltaX;
+            groupAttributes.y = deltaY;
         }
         group.setAttributes(groupAttributes);
+        if (justForXYPosition) {
+            return;
+        }
         if (rectAttributes.stroke) {
             rectAttributes.x = borderLeft / 2;
             rectAttributes.y = borderTop / 2;
@@ -34110,32 +34114,18 @@
             const chartInstance = columnGroup.attribute?.chartInstance;
             if (chartInstance) {
                 columnGroup.getChildren().forEach((cellNode) => {
-                    const width = cellNode.AABBBounds.width();
-                    const height = cellNode.AABBBounds.height();
+                    const width = scenegraph.table.getColWidth(cellNode.col);
+                    const height = scenegraph.table.getRowHeight(cellNode.row);
                     cellNode.children.forEach((node) => {
                         if (node.type === 'chart') {
                             node.cacheCanvas = null;
                             node.setAttribute('width', Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1]));
                             node.setAttribute('height', Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2]));
                             node.setAttribute('viewBox', {
-                                x1: Math.ceil(cellNode.globalAABBBounds.x1 +
-                                    scenegraph.table.tableX +
-                                    node.attribute.cellPadding[3] +
-                                    scenegraph.table.scrollLeft),
-                                x2: Math.ceil(cellNode.globalAABBBounds.x1 +
-                                    width +
-                                    scenegraph.table.tableX -
-                                    node.attribute.cellPadding[1] +
-                                    scenegraph.table.scrollLeft),
-                                y1: Math.ceil(cellNode.globalAABBBounds.y1 +
-                                    scenegraph.table.tableY +
-                                    node.attribute.cellPadding[0] +
-                                    scenegraph.table.scrollTop),
-                                y2: Math.ceil(cellNode.globalAABBBounds.y1 +
-                                    height +
-                                    scenegraph.table.tableY -
-                                    node.attribute.cellPadding[2] +
-                                    scenegraph.table.scrollTop)
+                                x1: Math.ceil(cellNode.globalAABBBounds.x1 + node.attribute.cellPadding[3] + scenegraph.table.scrollLeft),
+                                x2: Math.ceil(cellNode.globalAABBBounds.x1 + width - node.attribute.cellPadding[1] + scenegraph.table.scrollLeft),
+                                y1: Math.ceil(cellNode.globalAABBBounds.y1 + node.attribute.cellPadding[0] + scenegraph.table.scrollTop),
+                                y2: Math.ceil(cellNode.globalAABBBounds.y1 + height - node.attribute.cellPadding[2] + scenegraph.table.scrollTop)
                             });
                         }
                     });
@@ -34144,6 +34134,107 @@
         }
     }
 
+    function dealFrozen(scene) {
+        if (scene.table.frozenColCount > scene.table.rowHeaderLevelCount) {
+            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
+            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
+            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
+            for (let i = 0; i < scene.table.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
+                moveColumnFromBodyToRowHeader(scene);
+                moveColumnFromColHeaderToCornerHeader(scene);
+            }
+        }
+        else if (scene.table.frozenColCount < scene.table.rowHeaderLevelCount) {
+            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) {
+                moveColumnFromRowHeaderToBody(scene);
+                moveColumnFromCornerHeaderToColHeader(scene);
+            }
+        }
+        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
+        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
+        scene.updateContainer();
+        scene.updateBorderSizeAndPosition();
+        if (!scene.isPivot && !scene.transpose) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
+        scene.hasFrozen = true;
+        scene.frozenColCount = scene.table.frozenColCount;
+        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
+    }
+    function resetFrozen(scene) {
+        if (scene.frozenColCount > scene.table.rowHeaderLevelCount) {
+            for (let i = 0; i < scene.frozenColCount - scene.table.rowHeaderLevelCount; i++) {
+                moveColumnFromRowHeaderToBody(scene);
+                moveColumnFromCornerHeaderToColHeader(scene);
+            }
+        }
+        else if (scene.frozenColCount < scene.table.rowHeaderLevelCount) {
+            scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height);
+            scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y);
+            scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height);
+            for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.frozenColCount; i++) {
+                moveColumnFromBodyToRowHeader(scene);
+                moveColumnFromColHeaderToCornerHeader(scene);
+            }
+        }
+        scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width);
+        scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
+        scene.updateContainer();
+        scene.updateBorderSizeAndPosition();
+        if (!scene.isPivot && !scene.transpose) {
+            scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
+        }
+        scene.hasFrozen = true;
+        scene.frozenColCount = scene.table.rowHeaderLevelCount;
+        scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0;
+    }
+    function moveColumnFromBodyToRowHeader(scene) {
+        const column = scene.bodyGroup.firstChild instanceof Group ? scene.bodyGroup.firstChild : null;
+        if (column) {
+            scene.rowHeaderGroup.appendChild(column);
+            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width + column.attribute.width);
+            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width - column.attribute.width);
+        }
+    }
+    function moveColumnFromColHeaderToCornerHeader(scene) {
+        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group ? scene.colHeaderGroup.firstChild : null;
+        if (headerColumn) {
+            scene.cornerHeaderGroup.appendChild(headerColumn);
+            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
+            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width - headerColumn.attribute.width);
+        }
+    }
+    function moveColumnFromRowHeaderToBody(scene) {
+        const column = scene.rowHeaderGroup.lastChild instanceof Group
+            ? scene.rowHeaderGroup.lastChild
+            : scene.rowHeaderGroup.lastChild?._prev;
+        if (column) {
+            if (scene.bodyGroup.firstChild) {
+                scene.bodyGroup.insertBefore(column, scene.bodyGroup.firstChild);
+            }
+            else {
+                scene.bodyGroup.appendChild(column);
+            }
+            scene.bodyGroup.setAttribute('width', scene.bodyGroup.attribute.width + column.attribute.width);
+            scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width - column.attribute.width);
+        }
+    }
+    function moveColumnFromCornerHeaderToColHeader(scene) {
+        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group
+            ? scene.cornerHeaderGroup.lastChild
+            : scene.cornerHeaderGroup.lastChild?._prev;
+        if (headerColumn) {
+            if (scene.colHeaderGroup.firstChild) {
+                scene.colHeaderGroup.insertBefore(headerColumn, scene.colHeaderGroup.firstChild);
+            }
+            else {
+                scene.bodyGroup.appendChild(headerColumn);
+            }
+            scene.colHeaderGroup.setAttribute('width', scene.colHeaderGroup.attribute.width + headerColumn.attribute.width);
+            scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width - headerColumn.attribute.width);
+        }
+    }
+
     container.load(splitModule);
     class Scenegraph {
         proxy;
@@ -34334,6 +34425,7 @@
             this.frozenColCount = this.table.rowHeaderLevelCount;
             this.frozenRowCount = this.table.columnHeaderLevelCount;
             this.proxy = new SceneProxy(this.table);
+            createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, undefined, true);
             this.createHeaderSceneGraph();
             if (this.transpose || this.isPivot) {
                 this.createBodySceneGraph();
@@ -34597,7 +34689,7 @@
         }
         updateColWidth(col, detaX) {
             updateColWidth(this, col, detaX);
-            this.updateContainerWidth(col, detaX);
+            this.updateContainer();
         }
         updateChartSize(col) {
             updateChartSize(this, col);
@@ -34790,83 +34882,10 @@
             });
         }
         dealFrozen() {
-            if (this.table.frozenColCount > this.table.rowHeaderLevelCount) {
-                this.rowHeaderGroup.setAttribute('height', this.bodyGroup.attribute.height);
-                this.rowHeaderGroup.setAttribute('y', this.bodyGroup.attribute.y);
-                this.cornerHeaderGroup.setAttribute('height', this.colHeaderGroup.attribute.height);
-                for (let i = 0; i < this.table.frozenColCount - this.table.rowHeaderLevelCount; i++) {
-                    const column = this.bodyGroup.firstChild;
-                    if (column) {
-                        this.rowHeaderGroup.appendChild(column);
-                        this.rowHeaderGroup.setAttribute('width', this.rowHeaderGroup.attribute.width + column.attribute.width);
-                        this.bodyGroup.setAttribute('width', this.bodyGroup.attribute.width - column.attribute.width);
-                    }
-                    const headerColumn = this.colHeaderGroup.firstChild;
-                    if (headerColumn) {
-                        this.cornerHeaderGroup.appendChild(headerColumn);
-                        this.cornerHeaderGroup.setAttribute('width', this.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
-                        this.colHeaderGroup.setAttribute('width', this.colHeaderGroup.attribute.width - headerColumn.attribute.width);
-                    }
-                }
-            }
-            this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
-            this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
-            const bodyDeltaX = this.bodyGroup.firstChild?.attribute.x ?? 0;
-            this.bodyGroup.forEachChildrenSkipChild((column) => {
-                column.setAttribute('x', column.attribute.x - bodyDeltaX);
-            });
-            const colDeltaX = this.colHeaderGroup.firstChild?.attribute.x ?? 0;
-            this.colHeaderGroup.forEachChildrenSkipChild((column) => {
-                column.setAttribute('x', column.attribute.x - colDeltaX);
-            });
-            this.updateBorderSizeAndPosition();
-            if (!this.isPivot && !this.transpose) {
-                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
-            }
-            this.hasFrozen = true;
-            this.frozenColCount = this.table.frozenColCount;
-            this.frozenRowCount = this.colHeaderGroup.firstChild?.childrenCount ?? 0;
+            dealFrozen(this);
         }
         resetFrozen() {
-            if (this.frozenColCount > this.table.rowHeaderLevelCount) {
-                for (let i = 0; i < this.frozenColCount - this.table.rowHeaderLevelCount; i++) {
-                    const column = this.rowHeaderGroup.lastChild instanceof Group
-                        ? this.rowHeaderGroup.lastChild
-                        : this.rowHeaderGroup.lastChild._prev;
-                    if (column) {
-                        this.bodyGroup.insertBefore(column, this.bodyGroup.firstChild);
-                        this.bodyGroup.setAttribute('width', this.bodyGroup.attribute.width + column.attribute.width);
-                        this.rowHeaderGroup.setAttribute('width', this.rowHeaderGroup.attribute.width - column.attribute.width);
-                    }
-                    const headerColumn = this.cornerHeaderGroup.lastChild instanceof Group
-                        ? this.cornerHeaderGroup.lastChild
-                        : this.cornerHeaderGroup.lastChild._prev;
-                    if (headerColumn) {
-                        this.colHeaderGroup.insertBefore(headerColumn, this.colHeaderGroup.firstChild);
-                        this.colHeaderGroup.setAttribute('width', this.colHeaderGroup.attribute.width + headerColumn.attribute.width);
-                        this.cornerHeaderGroup.setAttribute('width', this.cornerHeaderGroup.attribute.width - headerColumn.attribute.width);
-                    }
-                }
-            }
-            this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
-            this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
-            let bodyX = 0;
-            this.bodyGroup.forEachChildrenSkipChild((column) => {
-                column.setAttribute('x', bodyX);
-                bodyX += column.attribute.width;
-            });
-            let colX = 0;
-            this.colHeaderGroup.forEachChildrenSkipChild((column) => {
-                column.setAttribute('x', colX);
-                colX += column.attribute.width;
-            });
-            this.updateBorderSizeAndPosition();
-            if (!this.isPivot && !this.transpose) {
-                this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
-            }
-            this.hasFrozen = true;
-            this.frozenColCount = this.table.rowHeaderLevelCount;
-            this.frozenRowCount = this.colHeaderGroup.firstChild?.childrenCount ?? 0;
+            resetFrozen(this);
         }
         updateCellLayoutWidthCertainWidth(columnGroup, detaRow, col) {
             const width = columnGroup.attribute.width;
@@ -34940,6 +34959,7 @@
             this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width);
             this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
             this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
+            this.updateTableSize();
             const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos;
             const oldVerticalBarPos = this.table.stateManeger.scroll.verticalBarPos;
             this.component.updateScrollBar();
@@ -34961,7 +34981,7 @@
             createFrameBorder(this.rowHeaderGroup, this.isPivot ? this.table.theme.rowHeaderStyle.frameStyle : this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined);
             createFrameBorder(this.colHeaderGroup, this.table.theme.headerStyle.frameStyle, this.colHeaderGroup.role, isListTableWithFrozen ? [true, true, true, false] : undefined);
             createFrameBorder(this.cornerHeaderGroup, this.isPivot ? this.table.theme.cornerHeaderStyle.frameStyle : this.table.theme.headerStyle.frameStyle, this.cornerHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined);
-            createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role);
+            createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, undefined);
         }
         getResizeColAt(abstractX, abstractY, cellGroup, offset = ResizeColumnHotSpotSize / 2) {
             if (!cellGroup) ;
@@ -39773,7 +39793,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.1-alpha.5";
+        version = "0.9.1";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -46635,7 +46655,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.1-alpha.5";
+    const version = "0.9.1";
     function getIcons() {
         return get();
     }