@visactor/vtable 1.6.2-alpha.3 → 1.7.0-alpha.1

package/dist/vtable.js

@@ -44102,6 +44102,18 @@
 
   overflow: hidden; // for react-vtable dom custom element
 }
+
+.vtable-gantt {
+	/* 设置overflow: auto 应该是为了滚动条的某个问题 但设置了auto之后 dom的下拉菜单只能显示在vtable节点中 超出会截断;现在去掉auto 暂时滚动条的问题没有发现 */
+	/* overflow: auto; */
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	text-align: left;
+  -webkit-font-smoothing:auto;
+
+  overflow: hidden; // for react-vtable dom custom element
+}
 .vtable .table-component-container {
   pointer-events: none;
   overflow: hidden;
@@ -44139,8 +44151,18 @@
         document.head.appendChild(styleElement);
     }
 
-    function getScrollBarSize(scrollStyle) {
-        if (scrollStyle?.hoverOn || scrollStyle?.visible === 'none') {
+    function getHorizontalScrollBarSize(scrollStyle) {
+        if (scrollStyle?.hoverOn ||
+            (scrollStyle?.horizontalVisible && scrollStyle?.horizontalVisible === 'none') ||
+            (!scrollStyle?.horizontalVisible && scrollStyle?.visible === 'none')) {
+            return 0;
+        }
+        return scrollStyle?.width ?? 7;
+    }
+    function getVerticalScrollBarSize(scrollStyle) {
+        if (scrollStyle?.hoverOn ||
+            (scrollStyle?.verticalVisible && scrollStyle?.verticalVisible === 'none') ||
+            (!scrollStyle?.verticalVisible && scrollStyle?.visible === 'none')) {
             return 0;
         }
         return scrollStyle?.width ?? 7;
@@ -46012,6 +46034,12 @@
                     get visible() {
                         return scroll.visible ?? 'scrolling';
                     },
+                    get verticalVisible() {
+                        return scroll.verticalVisible;
+                    },
+                    get horizontalVisible() {
+                        return scroll.horizontalVisible;
+                    },
                     get width() {
                         return scroll.width ?? 7;
                     },
@@ -48802,10 +48830,10 @@
         return couldBeValidNumber(v.substring(0, v.length - 1));
     }
 
-    function createRootElement(padding) {
+    function createRootElement(padding, className = 'vtable') {
         const element = document.createElement('div');
         element.setAttribute('tabindex', '0');
-        element.classList.add('vtable');
+        element.classList.add(className);
         element.style.outline = 'none';
         element.style.margin = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
         const width = (element.offsetWidth || element.parentElement?.offsetWidth || 1) - 1;
@@ -49021,7 +49049,13 @@
                 underlineDash,
                 underlineOffset,
                 lineThrough: lineThrough ? textDecorationWidth : undefined,
-                ellipsis: !textOverflow || textOverflow === 'clip' ? undefined : textOverflow === 'ellipsis' ? '...' : textOverflow
+                ellipsis: textOverflow === 'clip'
+                    ? ''
+                    : textOverflow === 'ellipsis'
+                        ? '...'
+                        : isValid$3(textOverflow)
+                            ? textOverflow
+                            : undefined
             },
             group: {
                 fill: bgColor,
@@ -50458,12 +50492,11 @@
     }
 
     function getCellBorderStrokeWidth(col, row, cellTheme, table) {
-        const frameBorderLineWidths = style.toBoxArray(table.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
         let strokeArrayWidth = cellTheme?.group?.strokeArrayWidth ?? undefined;
         if (table.theme.cellInnerBorder) {
             return strokeArrayWidth;
         }
-        if (col === 0 && frameBorderLineWidths[3]) {
+        if (col === 0) {
             strokeArrayWidth = strokeArrayWidth ?? [
                 cellTheme?.group?.lineWidth,
                 cellTheme?.group?.lineWidth,
@@ -50472,7 +50505,7 @@
             ];
             strokeArrayWidth[3] = 0;
         }
-        if (col === table.colCount - 1 && frameBorderLineWidths[1]) {
+        if (col === table.colCount - 1) {
             strokeArrayWidth = strokeArrayWidth ?? [
                 cellTheme?.group?.lineWidth,
                 cellTheme?.group?.lineWidth,
@@ -50481,7 +50514,7 @@
             ];
             strokeArrayWidth[1] = 0;
         }
-        if (row === 0 && frameBorderLineWidths[0]) {
+        if (row === 0) {
             strokeArrayWidth = strokeArrayWidth ?? [
                 cellTheme?.group?.lineWidth,
                 cellTheme?.group?.lineWidth,
@@ -50490,7 +50523,7 @@
             ];
             strokeArrayWidth[0] = 0;
         }
-        if (row === table.rowCount - 1 && frameBorderLineWidths[2]) {
+        if (row === table.rowCount - 1) {
             strokeArrayWidth = strokeArrayWidth ?? [
                 cellTheme?.group?.lineWidth,
                 cellTheme?.group?.lineWidth,
@@ -54390,7 +54423,9 @@
             const oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos;
             const theme = this.table.theme;
             const width = theme.scrollStyle?.width;
-            const visible = theme.scrollStyle?.visible;
+            const visible1 = theme.scrollStyle?.visible;
+            const horizontalVisible = theme.scrollStyle?.horizontalVisible ?? visible1;
+            const verticalVisible = theme.scrollStyle?.verticalVisible ?? visible1;
             const tableWidth = Math.ceil(this.table.scenegraph.tableGroup.attribute.width);
             const tableHeight = Math.ceil(this.table.scenegraph.tableGroup.attribute.height);
             const totalHeight = this.table.getAllRowsHeight();
@@ -54419,14 +54454,14 @@
                     y: attrY,
                     width: tableWidth - frozenColsWidth - rightFrozenColsWidth,
                     range: [0, rangeEnd],
-                    visible: visible === 'always'
+                    visible: horizontalVisible === 'always'
                 });
                 const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
                 this.hScrollBar._viewPosition = {
                     x: bounds.x1,
                     y: bounds.y1
                 };
-                if (visible === 'always') {
+                if (horizontalVisible === 'always') {
                     this.hScrollBar.showAll();
                 }
             }
@@ -54457,14 +54492,14 @@
                     y: frozenRowsHeight + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.y : 0),
                     height: tableHeight - frozenRowsHeight - bottomFrozenRowsHeight,
                     range: [0, rangeEnd],
-                    visible: visible === 'always'
+                    visible: verticalVisible === 'always'
                 });
                 const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
                 this.vScrollBar._viewPosition = {
                     x: bounds.x1,
                     y: bounds.y1
                 };
-                if (visible === 'always') {
+                if (verticalVisible === 'always') {
                     this.vScrollBar.showAll();
                 }
             }
@@ -54627,8 +54662,9 @@
             }
         }
         hideVerticalScrollBar() {
-            const visable = this.table.theme.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
+            const visible1 = this.table.theme.scrollStyle.visible;
+            const verticalVisible = this.table.theme.scrollStyle.verticalVisible ?? visible1;
+            if (verticalVisible !== 'focus' && verticalVisible !== 'scrolling') {
                 return;
             }
             this.vScrollBar.setAttribute('visible', false);
@@ -54636,8 +54672,9 @@
             this.table.scenegraph.updateNextFrame();
         }
         showVerticalScrollBar() {
-            const visable = this.table.theme.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
+            const visible1 = this.table.theme.scrollStyle.visible;
+            const verticalVisible = this.table.theme.scrollStyle.verticalVisible ?? visible1;
+            if (verticalVisible !== 'focus' && verticalVisible !== 'scrolling') {
                 return;
             }
             this.vScrollBar.setAttribute('visible', true);
@@ -54645,8 +54682,9 @@
             this.table.scenegraph.updateNextFrame();
         }
         hideHorizontalScrollBar() {
-            const visable = this.table.theme.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
+            const visible1 = this.table.theme.scrollStyle.visible;
+            const horizontalVisible = this.table.theme.scrollStyle.horizontalVisible ?? visible1;
+            if (horizontalVisible !== 'focus' && horizontalVisible !== 'scrolling') {
                 return;
             }
             this.hScrollBar.setAttribute('visible', false);
@@ -54654,8 +54692,9 @@
             this.table.scenegraph.updateNextFrame();
         }
         showHorizontalScrollBar() {
-            const visable = this.table.theme.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
+            const visible1 = this.table.theme.scrollStyle.visible;
+            const horizontalVisible = this.table.theme.scrollStyle.horizontalVisible ?? visible1;
+            if (horizontalVisible !== 'focus' && horizontalVisible !== 'scrolling') {
                 return;
             }
             this.hScrollBar.setAttribute('visible', true);
@@ -57864,8 +57903,8 @@
             return;
         }
         const screenTopRow = proxy.screenTopRow;
-        const topRow = Math.max(proxy.bodyTopRow, screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)));
-        const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))));
+        const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
+        const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
         for (let row = topRow; row <= bottomRow; row++) {
             const cellGroup = proxy.highPerformanceGetCell(colGroup.col, row, true);
             proxy.updateCellGroupContent(cellGroup);
@@ -58079,8 +58118,8 @@
                 syncBottomRow = distEndRow;
             }
             else {
-                const topRow = Math.max(proxy.bodyTopRow, screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)));
-                const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))));
+                const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
+                const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
                 syncTopRow = topRow;
                 syncBottomRow = bottomRow;
             }
@@ -58118,8 +58157,8 @@
                 syncBottomRow = distEndRow;
             }
             else {
-                syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)));
-                syncBottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))));
+                syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
+                syncBottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
             }
             computeRowsHeight(proxy.table, syncTopRow, syncBottomRow, false);
             updateAllRowPosition(distStartRowY, count, direction, proxy);
@@ -58231,8 +58270,8 @@
         let sync = true;
         if (async) {
             const screenLeftCol = proxy.screenLeftCol;
-            leftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - Math.ceil(proxy.screenColCount * (proxy.table.options.columnUpdateBufferCount ?? 1)));
-            rightCol = Math.min(proxy.bodyRightCol, screenLeftCol + Math.ceil(proxy.screenColCount * (1 + (proxy.table.options.columnUpdateBufferCount ?? 1))));
+            leftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenColCount * 1);
+            rightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenColCount * 2);
             if (leftCol !== proxy.bodyLeftCol || rightCol !== proxy.bodyRightCol) {
                 sync = false;
             }
@@ -58677,11 +58716,8 @@
             else if (this.table.isPivotTable()) {
                 this.mode = 'pivot';
             }
-            if (this.table.options.maintainedDataCount || this.table.options.maintainedRowCount) {
-                this.rowLimit = this.table.options.maintainedDataCount || this.table.options.maintainedRowCount;
-            }
-            if (this.table.options.maintainedColumnCount) {
-                this.colLimit = this.table.options.maintainedColumnCount;
+            if (this.table.options.maintainedDataCount) {
+                this.rowLimit = this.table.options.maintainedDataCount;
             }
         }
         get bodyLeftCol() {
@@ -58695,8 +58731,7 @@
             this.colStart = this.bodyLeftCol;
             this.colEnd = this.totalCol;
             const defaultColWidth = this.table.defaultColWidth;
-            this.taskColCount =
-                this.table.options.progressColumnUpdateCount ?? Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1;
+            this.taskColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1;
             const totalBodyWidth = defaultColWidth * totalActualBodyColCount;
             const totalWidth = defaultColWidth * (this.bodyRightCol - this.bodyLeftCol + 1);
             this.xLimitLeft = totalBodyWidth / 2;
@@ -58715,8 +58750,7 @@
             this.rowStart = this.bodyTopRow;
             this.rowEnd = this.totalRow;
             const defaultRowHeight = this.table.defaultRowHeight;
-            this.taskRowCount =
-                this.table.options.progressRowUpdateCount ?? Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
+            this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
             const totalBodyHeight = defaultRowHeight * totalActualBodyRowCount;
             const totalHeight = defaultRowHeight * (this.bodyBottomRow - this.bodyTopRow + 1);
             this.yLimitTop = totalBodyHeight / 2;
@@ -65108,7 +65142,7 @@
                 this.checkHorizontalScrollBarEnd();
             }
         }
-        setScrollTop(top) {
+        setScrollTop(top, triggerEvent = true) {
             const totalHeight = this.table.getAllRowsHeight();
             const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
             top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height - sizeTolerance));
@@ -65124,7 +65158,7 @@
             this.table.scenegraph.setY(-top);
             const yRatio = top / (totalHeight - this.table.scenegraph.height);
             this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio);
-            if (oldVerticalBarPos !== top) {
+            if (oldVerticalBarPos !== top && triggerEvent) {
                 this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                     scrollTop: this.scroll.verticalBarPos,
                     scrollLeft: this.scroll.horizontalBarPos,
@@ -65138,7 +65172,7 @@
                 this.checkVerticalScrollBarEnd();
             }
         }
-        setScrollLeft(left) {
+        setScrollLeft(left, triggerEvent = true) {
             this.table.scrollLeft;
             const totalWidth = this.table.getAllColsWidth();
             this.table.getFrozenColsWidth();
@@ -65156,7 +65190,7 @@
             this.table.scenegraph.setX(-left);
             const xRatio = left / (totalWidth - this.table.scenegraph.width);
             this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
-            if (oldHorizontalBarPos !== left) {
+            if (oldHorizontalBarPos !== left && triggerEvent) {
                 this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
                     scrollTop: this.scroll.verticalBarPos,
                     scrollLeft: this.scroll.horizontalBarPos,
@@ -65771,8 +65805,12 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerenter', (e) => {
-            if (table.theme.scrollStyle.visible === 'focus') {
+            if ((table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.horizontalVisible === 'focus') ||
+                (!table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.visible === 'focus')) {
                 stateManager.showHorizontalScrollBar();
+            }
+            if ((table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.verticalVisible === 'focus') ||
+                (!table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.visible === 'focus')) {
                 stateManager.showVerticalScrollBar();
             }
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEENTER_TABLE)) {
@@ -65786,8 +65824,12 @@
                 stateManager.updateInteractionState(InteractionState.default);
                 stateManager.updateCursor();
             }
-            if (table.theme.scrollStyle.visible === 'focus') {
+            if ((table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.horizontalVisible === 'focus') ||
+                (!table.theme.scrollStyle.horizontalVisible && table.theme.scrollStyle.visible === 'focus')) {
                 stateManager.hideHorizontalScrollBar();
+            }
+            if ((table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.verticalVisible === 'focus') ||
+                (!table.theme.scrollStyle.verticalVisible && table.theme.scrollStyle.visible === 'focus')) {
                 stateManager.hideVerticalScrollBar();
             }
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL)) {
@@ -71928,11 +71970,12 @@
         eventManager;
         editorManager;
         _pixelRatio;
+        canvasSizeSeted;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.6.2-alpha.3";
+        version = "1.7.0-alpha.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -71976,6 +72019,9 @@
                     padding.right && (this.padding.right = padding.right);
                 }
             }
+            if (isValid$3(canvasHeight) && isValid$3(canvasWidth)) {
+                this.canvasSizeSeted = true;
+            }
             this.tableNoFrameWidth = 0;
             this.tableNoFrameHeight = 0;
             this.canvasWidth = canvasWidth;
@@ -72146,6 +72192,11 @@
         get canvas() {
             return this.internalProps.canvas;
         }
+        setCanvasSize(canvasWidth, canvasHeight) {
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.resize();
+        }
         resize() {
             this._updateSize();
             this.internalProps.legends?.forEach(legend => {
@@ -72420,16 +72471,22 @@
                 const element = this.getElement();
                 let widthWithoutPadding = 0;
                 let heightWithoutPadding = 0;
-                if (element.parentElement) {
-                    const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
-                    widthWithoutPadding =
-                        element.parentElement.offsetWidth -
-                            parseInt(computedStyle.paddingLeft || '0px', 10) -
-                            parseInt(computedStyle.paddingRight || '0px', 10);
-                    heightWithoutPadding =
-                        element.parentElement.offsetHeight -
-                            parseInt(computedStyle.paddingTop || '0px', 10) -
-                            parseInt(computedStyle.paddingBottom || '0px', 20);
+                if (this.canvasSizeSeted) {
+                    widthWithoutPadding = this.canvasWidth;
+                    heightWithoutPadding = this.canvasHeight;
+                }
+                else {
+                    if (element.parentElement) {
+                        const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
+                        widthWithoutPadding =
+                            element.parentElement.offsetWidth -
+                                parseInt(computedStyle.paddingLeft || '0px', 10) -
+                                parseInt(computedStyle.paddingRight || '0px', 10);
+                        heightWithoutPadding =
+                            element.parentElement.offsetHeight -
+                                parseInt(computedStyle.paddingTop || '0px', 10) -
+                                parseInt(computedStyle.paddingBottom || '0px', 20);
+                    }
                 }
                 const width1 = widthWithoutPadding ?? 1 - 1;
                 const height1 = heightWithoutPadding ?? 1 - 1;
@@ -72462,8 +72519,8 @@
                 widthP = this.canvasWidth - 1;
                 heightP = this.canvasHeight - 1;
             }
-            const width = Math.floor(widthP - getScrollBarSize(this.getTheme().scrollStyle));
-            const height = Math.floor(heightP - getScrollBarSize(this.getTheme().scrollStyle));
+            const width = Math.floor(widthP - getVerticalScrollBarSize(this.getTheme().scrollStyle));
+            const height = Math.floor(heightP - getHorizontalScrollBarSize(this.getTheme().scrollStyle));
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
@@ -92424,7 +92481,7 @@
     }
 
     registerForVrender();
-    const version = "1.6.2-alpha.3";
+    const version = "1.7.0-alpha.1";
     function getIcons() {
         return get$2();
     }