@visactor/vtable 0.9.3-alpha.2 → 0.9.3-alpha.3

package/dist/vtable.js

@@ -4237,7 +4237,7 @@
                 if (!superTheme.rightFrozenStyle || !obj.rightFrozenStyle) {
                     return this._rightFrozen;
                 }
-                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.rightFrozenStyle, obj.rightFrozenStyle);
+                const header = ingoreNoneValueMerge({}, this.defaultStyle, this.rowHeaderStyle, superTheme.rightFrozenStyle, obj.rightFrozenStyle);
                 this._rightFrozen = this.getStyle(header);
             }
             return this._rightFrozen;
@@ -4248,7 +4248,7 @@
                 if (!superTheme.bottomFrozenStyle || !obj.bottomFrozenStyle) {
                     return this._bottomFrozen;
                 }
-                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.bottomFrozenStyle, obj.bottomFrozenStyle);
+                const header = ingoreNoneValueMerge({}, this.defaultStyle, this.headerStyle, superTheme.bottomFrozenStyle, obj.bottomFrozenStyle);
                 this._bottomFrozen = this.getStyle(header);
             }
             return this._bottomFrozen;
@@ -39557,7 +39557,6 @@
         const absoluteLeftIcons = [];
         const absoluteRightIcons = [];
         let contentWidth;
-        let contentHeight;
         let leftIconWidth = 0;
         let leftIconHeight = 0;
         let rightIconWidth = 0;
@@ -39582,7 +39581,7 @@
                 wrapText.name = 'text';
                 cellGroup.appendChild(wrapText);
                 contentWidth = wrapText.AABBBounds.width();
-                contentHeight = wrapText.AABBBounds.height();
+                wrapText.AABBBounds.height();
             }
         }
         else {
@@ -39721,7 +39720,7 @@
                 cellGroup.appendChild(cellContent);
                 cellContent.layout();
                 contentWidth = cellContent.AABBBounds.width();
-                contentHeight = cellContent.AABBBounds.height();
+                cellContent.AABBBounds.height();
             }
             else {
                 if (cellGroup.firstChild) {
@@ -39731,15 +39730,13 @@
                     cellGroup.appendChild(textMark);
                 }
                 contentWidth = textMark.AABBBounds.width();
-                contentHeight = textMark.AABBBounds.height();
+                textMark.AABBBounds.height();
             }
         }
         const width = autoColWidth
             ? leftIconWidth + contentWidth + rightIconWidth
             : cellWidth - (padding[1] + padding[3]);
-        const height = autoRowHeight
-            ? Math.max(leftIconHeight, contentHeight, rightIconHeight)
-            : cellHeight - (padding[0] + padding[2]);
+        const height = cellHeight - (padding[0] + padding[2]);
         cellGroup.forEachChildren((child) => {
             if (child.role === 'icon-left') {
                 child.setAttribute('x', child.attribute.x + padding[3]);
@@ -42444,16 +42441,17 @@
         }
         if (table.widthMode === 'adaptive') {
             table._clearColRangeWidthsMap();
-            const totalDrawWidth = table.tableNoFrameWidth;
+            const totalDrawWidth = table.tableNoFrameWidth - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
             let actualWidth = 0;
-            for (let col = 0; col < table.colCount; col++) {
+            for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                 actualWidth += table.getColWidth(col);
             }
             const factor = totalDrawWidth / actualWidth;
-            for (let col = 0; col < table.colCount; col++) {
+            for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                 let colWidth;
-                if (col === table.colCount - 1) {
-                    colWidth = totalDrawWidth - table.getColsWidth(0, table.colCount - 2);
+                if (col === table.colCount - table.rightFrozenColCount - 1) {
+                    colWidth =
+                        totalDrawWidth - table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
                 }
                 else {
                     colWidth = Math.round(table.getColWidth(col) * factor);
@@ -42468,14 +42466,14 @@
             let actualHeaderWidth = 0;
             for (let col = 0; col < table.colCount; col++) {
                 const colWidth = table.getColWidth(col);
-                if (col < table.frozenColCount) {
+                if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
                     actualHeaderWidth += colWidth;
                 }
                 actualWidth += colWidth;
             }
             if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                 const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
-                for (let col = table.frozenColCount; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     table.setColWidth(col, table.getColWidth(col) * factor, false, true);
                 }
             }
@@ -42999,6 +42997,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
+        const autoRowHeight = table.heightMode === 'autoHeight';
         const autoColWidth = colWidth === 'auto';
         const autoWrapText = headerStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const lineClamp = headerStyle.lineClamp;
@@ -43029,7 +43028,7 @@
             if (mayHaveIcon) {
                 icons = table.getCellIcons(col, row);
             }
-            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, false, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
+            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
             if (cellTheme?._vtable?.marked) {
                 const mark = createArc({
                     x: cellGroup.attribute.width,
@@ -43250,7 +43249,12 @@
             const dataValue = table.getCellOriginValue(col, row);
             cellGroup = createCellGroup(table, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
-            cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
+            if (cellGroup.firstChild) {
+                cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
+            }
+            else {
+                cellGroup.appendChild(progressBarGroup);
+            }
         }
         else if (type === 'sparkline') {
             cellGroup = createSparkLineCellGroup(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme);
@@ -43259,6 +43263,9 @@
     }
     function updateCell$1(col, row, table, addNew) {
         const oldCellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+        if (!addNew && oldCellGroup.role === 'empty') {
+            return undefined;
+        }
         const type = table.isHeader(col, row)
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
@@ -45787,10 +45794,15 @@
                 return;
             }
             this.updateColWidth(col, width - oldWidth);
+            this.table._clearColRangeWidthsMap(col);
         }
         setRowHeight(row, height) {
             const oldHeight = this.table.getRowHeight(row);
+            if (oldHeight === height) {
+                return;
+            }
             this.updateRowHeight(row, height - oldHeight);
+            this.table._clearRowRangeHeightsMap(row);
         }
         setX(x) {
             this.table.scenegraph.proxy.setX(-x);
@@ -45833,16 +45845,17 @@
         dealWidthMode() {
             const table = this.table;
             if (table.widthMode === 'adaptive') {
-                const totalDrawWidth = table.tableNoFrameWidth;
+                const totalDrawWidth = table.tableNoFrameWidth - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
                 let actualWidth = 0;
-                for (let col = 0; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     actualWidth += table.getColWidth(col);
                 }
                 const factor = totalDrawWidth / actualWidth;
-                for (let col = 0; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     let colWidth;
-                    if (col === table.colCount - 1) {
-                        colWidth = totalDrawWidth - table.getColsWidth(0, table.colCount - 2);
+                    if (col === table.colCount - table.rightFrozenColCount - 1) {
+                        colWidth =
+                            totalDrawWidth - table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
                     }
                     else {
                         colWidth = Math.round(table.getColWidth(col) * factor);
@@ -45856,14 +45869,14 @@
                 let actualHeaderWidth = 0;
                 for (let col = 0; col < table.colCount; col++) {
                     const colWidth = table.getColWidth(col);
-                    if (col < table.frozenColCount) {
+                    if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
                         actualHeaderWidth += colWidth;
                     }
                     actualWidth += colWidth;
                 }
                 if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                     const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
-                    for (let col = table.frozenColCount; col < table.colCount; col++) {
+                    for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                         this.setColWidth(col, table.getColWidth(col) * factor);
                     }
                 }
@@ -46943,13 +46956,16 @@
         constructor(table) {
             this.table = table;
             this.initState();
-            this.setHoverState();
-            this.setSelectState();
-            this.setFrozenState();
             this.updateVerticalScrollBar = this.updateVerticalScrollBar.bind(this);
             this.updateHorizontalScrollBar = this.updateHorizontalScrollBar.bind(this);
         }
         initState() {
+            this._initState();
+            this.setHoverState();
+            this.setSelectState();
+            this.setFrozenState();
+        }
+        _initState() {
             this.interactionState = InteractionState.default;
             this.select = {
                 highlightScope: HighlightScope.single,
@@ -47194,10 +47210,10 @@
             this.table.stateManeger.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
-        updateResizeCol(x, y) {
-            x = Math.ceil(x);
-            y = Math.ceil(y);
-            let detaX = x - this.columnResize.x;
+        updateResizeCol(xInTable, yInTable) {
+            xInTable = Math.ceil(xInTable);
+            yInTable = Math.ceil(yInTable);
+            let detaX = xInTable - this.columnResize.x;
             if (Math.abs(detaX) < 1) {
                 return;
             }
@@ -47228,8 +47244,8 @@
             if (this.table.widthMode === 'adaptive' && this.columnResize.col < this.table.colCount - 1) {
                 this.table.scenegraph.updateColWidth(this.columnResize.col + 1, -detaX);
             }
-            this.columnResize.x = x;
-            this.table.scenegraph.component.updateResizeCol(this.columnResize.col, y);
+            this.columnResize.x = xInTable;
+            this.table.scenegraph.component.updateResizeCol(this.columnResize.col, yInTable);
             if (this.columnResize.col < this.table.frozenColCount &&
                 !this.table.isPivotTable() &&
                 !this.table.transpose) {
@@ -47744,25 +47760,38 @@
     function bindTableGroupListener(eventManeger) {
         const table = eventManeger.table;
         const stateManeger = table.stateManeger;
-        table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
+        document.body.addEventListener('pointermove', (e) => {
             if (eventManeger.touchSetTimeout) {
                 clearTimeout(eventManeger.touchSetTimeout);
                 eventManeger.touchSetTimeout = undefined;
             }
-            const eventArgsSet = getCellEventArgsSet(e);
+            const { x, y } = table._getMouseAbstractPoint(e, false);
             if (stateManeger.interactionState === InteractionState.scrolling) {
                 return;
             }
             if (stateManeger.interactionState === InteractionState.grabing) {
                 if (stateManeger.isResizeCol()) {
-                    eventManeger.dealColumnResize(eventArgsSet);
-                    if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
+                    eventManeger.dealColumnResize(x, y);
+                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
                         table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
                             col: table.stateManeger.columnResize.col,
                             colWidth: table.getColWidth(table.stateManeger.columnResize.col)
                         });
                     }
                 }
+            }
+        });
+        table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
+            if (eventManeger.touchSetTimeout) {
+                clearTimeout(eventManeger.touchSetTimeout);
+                eventManeger.touchSetTimeout = undefined;
+            }
+            const eventArgsSet = getCellEventArgsSet(e);
+            if (stateManeger.interactionState === InteractionState.scrolling) {
+                return;
+            }
+            if (stateManeger.interactionState === InteractionState.grabing) {
+                if (stateManeger.isResizeCol()) ;
                 else if (stateManeger.isMoveCol()) {
                     eventManeger.dealColumnMover(eventArgsSet);
                 }
@@ -47771,7 +47800,7 @@
                 }
                 return;
             }
-            if (eventManeger.checkColumnResize(eventArgsSet)) {
+            if (stateManeger.isResizeCol() || eventManeger.checkColumnResize(eventArgsSet)) {
                 stateManeger.updateCursor('col-resize');
             }
             else {
@@ -47875,9 +47904,11 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerleave', (e) => {
-            stateManeger.updateInteractionState(InteractionState.default);
+            if (!stateManeger.isResizeCol()) {
+                stateManeger.updateInteractionState(InteractionState.default);
+                stateManeger.updateCursor();
+            }
             eventManeger.dealTableHover();
-            stateManeger.updateCursor();
             const target = e.target;
             if (target && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
                 table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, {
@@ -47889,6 +47920,9 @@
         });
         table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e) => {
             console.log('pointerupoutside');
+            if (stateManeger.isResizeCol()) {
+                endResizeCol(table);
+            }
             stateManeger.updateInteractionState(InteractionState.default);
             eventManeger.dealTableHover();
             eventManeger.dealTableSelect();
@@ -47964,17 +47998,7 @@
             if (stateManeger.interactionState === 'grabing') {
                 stateManeger.updateInteractionState(InteractionState.default);
                 if (stateManeger.isResizeCol()) {
-                    table.stateManeger.endResizeCol();
-                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
-                        const columns = [];
-                        for (let col = 0; col < table.colCount; col++) {
-                            columns.push(table.getColWidth(col));
-                        }
-                        table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
-                            col: table.stateManeger.columnResize.col,
-                            columns
-                        });
-                    }
+                    endResizeCol(table);
                 }
                 else if (stateManeger.isMoveCol()) {
                     table.stateManeger.endMoveCol();
@@ -48141,6 +48165,19 @@
             }
         });
     }
+    function endResizeCol(table) {
+        table.stateManeger.endResizeCol();
+        if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
+            const columns = [];
+            for (let col = 0; col < table.colCount; col++) {
+                columns.push(table.getColWidth(col));
+            }
+            table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
+                col: table.stateManeger.columnResize.col,
+                columns
+            });
+        }
+    }
 
     function bindScrollBarListener(eventManeger) {
         const table = eventManeger.table;
@@ -48671,8 +48708,8 @@
             }
             return false;
         }
-        dealColumnResize(eventArgsSet) {
-            this.table.stateManeger.updateResizeCol(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+        dealColumnResize(xInTable, yInTable) {
+            this.table.stateManeger.updateResizeCol(xInTable, xInTable);
         }
         chechColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
@@ -49179,6 +49216,9 @@
             this._secondElement = createMenuDomElement$1();
             this._secondElement.sub = true;
             this._showChildrenIndex = -1;
+            this._rootElement.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._rootElement?.addEventListener('mousedown', e => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -49292,6 +49332,9 @@
                     }, 300);
                 }
             });
+            this._secondElement?.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._secondElement?.addEventListener('mousemove', e => {
                 if (this._rootElement.classList.contains(HIDDEN_CLASSNAME$1)) {
                     return;
@@ -50442,7 +50485,7 @@
                     const { event } = e;
                     const { left, right, top, bottom } = position.rect;
                     const abstractPos = table._getMouseAbstractPoint(event, false);
-                    if (!(abstractPos &&
+                    if (!(abstractPos.inTable &&
                         abstractPos.x >= left - 5 &&
                         abstractPos.x <= right + 5 &&
                         abstractPos.y >= top - 5 &&
@@ -50541,6 +50584,9 @@
         constructor(table) {
             this._handler = new EventHandler();
             this._rootElement = createMenuDomElement();
+            this._rootElement.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._rootElement?.addEventListener('mousedown', e => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -50852,10 +50898,10 @@
                 if (table.internalProps.menu?.renderMode === 'html') {
                     const abstractPos = table._getMouseAbstractPoint(e.event, false);
                     let menu = null;
-                    if (abstractPos && typeof table.internalProps.menu?.contextMenuItems === 'function') {
+                    if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {
                         menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row), e.row);
                     }
-                    else if (abstractPos && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
+                    else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
                         menu = table.internalProps.menu?.contextMenuItems;
                     }
                     this._bindToCell(e.col, e.row, 'context-menu', {
@@ -51314,7 +51360,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.2";
+        version = "0.9.3-alpha.3";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51861,7 +51907,8 @@
             if (this.heightMode === 'standard' &&
                 this.internalProps.layoutMap &&
                 endRow >= this.columnHeaderLevelCount &&
-                !this.bottomFrozenRowCount) {
+                !this.bottomFrozenRowCount &&
+                !this.hasAutoImageColumn()) {
                 for (let i = startRow; i < this.columnHeaderLevelCount; i++) {
                     h += this.getRowHeight(i);
                 }
@@ -52437,7 +52484,7 @@
             const table = this;
             let e;
             if (!evt) {
-                return null;
+                return { inTable: false, x: undefined, y: undefined };
             }
             if (isTouchEvent(evt)) {
                 e = evt.changedTouches[0];
@@ -52448,11 +52495,12 @@
             const clientX = e.clientX || e.pageX + window.scrollX;
             const clientY = e.clientY || e.pageY + window.scrollY;
             const rect = table.internalProps.canvas.getBoundingClientRect();
+            let inTable = true;
             if (rect.right <= clientX) {
-                return null;
+                inTable = false;
             }
             if (rect.bottom <= clientY) {
-                return null;
+                inTable = false;
             }
             const currentWidth = rect.width;
             const originWidth = this.canvas.offsetWidth || currentWidth;
@@ -52462,31 +52510,7 @@
             const heightRatio = currentHeight / originHeight;
             const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - table.tableX;
             const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - table.tableY;
-            return { x, y };
-        }
-        _getCellEventArgsSet(e) {
-            const abstractPos = this._getMouseAbstractPoint(e);
-            if (!abstractPos) {
-                return {};
-            }
-            const cell = this.getCellAt(abstractPos.x, abstractPos.y);
-            if (cell.col < 0 || cell.row < 0) {
-                return {
-                    abstractPos,
-                    cell
-                };
-            }
-            const eventArgs = {
-                col: cell.col,
-                row: cell.row,
-                event: e,
-                rect: cell.rect
-            };
-            return {
-                abstractPos,
-                cell,
-                eventArgs
-            };
+            return { x, y, inTable };
         }
         getTheme() {
             return this.internalProps.theme;
@@ -53336,6 +53360,14 @@
             }
             return customLayout;
         }
+        hasAutoImageColumn() {
+            return this.internalProps.layoutMap.columnObjects.find((column) => {
+                if (column.columnType === 'image' && column.define.imageAutoSizing) {
+                    return true;
+                }
+                return false;
+            });
+        }
     }
 
     var core = /*#__PURE__*/Object.freeze({
@@ -60654,7 +60686,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.2";
+    const version = "0.9.3-alpha.3";
     function getIcons() {
         return get$1();
     }