@visactor/vtable 1.11.2-alpha.1 → 1.11.2-alpha.3

package/dist/vtable.js

@@ -48170,18 +48170,18 @@
         return table._getLayoutCellId(col, row) === table._getLayoutCellId(range1Col, range1Row);
     }
 
-    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll, isSelectMoving = false, skipBodyMerge = false, forceSelect = false) {
+    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll, makeSelectCellVisible = true, skipBodyMerge = false, forceSelect = false) {
         const { table, interactionState } = state;
         const { scenegraph } = table;
         const { highlightScope, disableHeader, cellPos } = state.select;
         if (((disableHeader && table.isHeader(col, row)) || highlightScope === 'none') && forceSelect === false) {
-            if (col !== -1 && row !== -1 && !isSelectMoving) {
+            if (col !== -1 && row !== -1 && makeSelectCellVisible) {
                 table._makeVisibleCell(col, row);
             }
             col = -1;
             row = -1;
         }
-        if (col !== -1 && row !== -1 && !isSelectMoving) {
+        if (col !== -1 && row !== -1 && makeSelectCellVisible) {
             if (interactionState === InteractionState.grabing && state.select.ranges.length > 0) {
                 const currentRange = state.select.ranges[state.select.ranges.length - 1];
                 if (col > currentRange.start.col && col > currentRange.end.col) {
@@ -49402,18 +49402,6 @@
                 }
             }
         });
-        if (state.table.leftRowSeriesNumberCount === 1) {
-            state.headerCheckedState._vtable_rowSeries_number = false;
-            state._checkboxCellTypeFields.push('_vtable_rowSeries_number');
-            isNeedInitHeaderCheckedStateFromRecord = true;
-        }
-        else if (state.table.leftRowSeriesNumberCount > 1) {
-            for (let i = 0; i < state.table.leftRowSeriesNumberCount; i++) {
-                state.headerCheckedState[`_vtable_rowSeries_number_${i}`] = false;
-                state._checkboxCellTypeFields.push(`_vtable_rowSeries_number_${i}`);
-            }
-            isNeedInitHeaderCheckedStateFromRecord = true;
-        }
         if (isNeedInitHeaderCheckedStateFromRecord) {
             records.forEach((record, index) => {
                 state._checkboxCellTypeFields.forEach(field => {
@@ -49505,49 +49493,30 @@
         }
     }
     function setCellCheckboxState(col, row, checked, table) {
-        const cellGroup = table.scenegraph.getCell(col, row);
-        const checkbox = cellGroup?.getChildByName('checkbox');
-        if (!checkbox) {
-            const field = table.getHeaderField(col, row);
-            if (table.isHeader(col, row)) {
-                table.stateManager.setHeaderCheckedState(field, checked);
-                const cellType = table.getCellType(col, row);
-                if (cellType === 'checkbox') {
-                    table.scenegraph.updateCheckboxCellState(col, row, checked);
-                }
-            }
-            else {
-                table.stateManager.setCheckedState(col, row, field, checked);
-                const cellType = table.getCellType(col, row);
-                if (cellType === 'checkbox') {
-                    const oldHeaderCheckedState = table.stateManager.headerCheckedState[field];
-                    const newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(field, col, row);
-                    if (oldHeaderCheckedState !== newHeaderCheckedState) {
-                        table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState);
-                    }
-                }
-            }
+        const cellGoup = table.scenegraph.getCell(col, row);
+        const chechbox = cellGoup?.getChildByName('checkbox');
+        if (!chechbox) {
             return;
         }
-        const { checked: oldChecked, indeterminate } = checkbox.attribute;
+        const { checked: oldChecked, indeterminate } = chechbox.attribute;
         if (indeterminate) {
             if (checked) {
-                checkbox._handlePointerUp();
+                chechbox._handlePointerUp();
             }
             else {
-                checkbox._handlePointerUp();
-                checkbox._handlePointerUp();
+                chechbox._handlePointerUp();
+                chechbox._handlePointerUp();
             }
         }
         else if (oldChecked) {
             if (checked) ;
             else {
-                checkbox._handlePointerUp();
+                chechbox._handlePointerUp();
             }
         }
         else {
             if (checked) {
-                checkbox._handlePointerUp();
+                chechbox._handlePointerUp();
             }
         }
     }
@@ -50058,11 +50027,11 @@
         updateHoverPos(col, row) {
             updateHoverPosition(this, col, row);
         }
-        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false, isSelectMoving = false, skipBodyMerge = false, forceSelect = false) {
+        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false, makeSelectCellVisible = true, skipBodyMerge = false, forceSelect = false) {
             if (row !== -1 && row !== -1) {
                 this.select.selecting = true;
             }
-            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving, skipBodyMerge, forceSelect);
+            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, makeSelectCellVisible, skipBodyMerge, forceSelect);
         }
         checkCellRangeInSelect(cellPosStart, cellPosEnd) {
             return checkMultiCellInSelect(cellPosStart, cellPosEnd, this.select.ranges, this.select.highlightScope);
@@ -50211,9 +50180,6 @@
             this.rowResize.y = y;
             this.rowResize.isBottomFrozen = isBottomFrozen;
             this.table.scenegraph.component.showResizeRow(row, x, isBottomFrozen);
-            const isHasSelected = !!this.select.ranges?.length;
-            this.updateSelectPos(-1, -1);
-            this.endSelectCells(true, isHasSelected);
             this.table.scenegraph.updateNextFrame();
         }
         updateResizeRow(xInTable, yInTable) {
@@ -52091,8 +52057,9 @@
             else if (stateManager.select.cellPos.col >= 0 &&
                 stateManager.select.cellPos.row >= 0 &&
                 (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-                if (!(table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) &&
-                    table.editorManager?.editingEditor) {
+                if ((!(table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) &&
+                    table.editorManager?.editingEditor) ||
+                    table.options.keyboardOptions?.moveSelectedCellOnArrowKeys === false) {
                     return;
                 }
                 e.preventDefault();
@@ -52720,7 +52687,7 @@
                         const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
                         const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
                         if (isValid$1(targetCol) && isValid$1(targetRow)) {
-                            table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, true);
+                            table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, false);
                         }
                     });
                 }
@@ -53168,7 +53135,7 @@
                     this.table.stateManager.updateSelectPos(-1, -1);
                     return false;
                 }
-                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
+                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, this.table.options.select?.makeSelectCellVisible ?? true);
                 return true;
             }
             return false;
@@ -53216,10 +53183,10 @@
                             updateCol = eventArgs.col;
                         }
                     }
-                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
+                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, !isSelectMoving);
                 }
                 else {
-                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
+                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, !isSelectMoving);
                 }
                 return true;
             }
@@ -53294,10 +53261,6 @@
         chechColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
             if (eventArgs &&
-                this.table.isHeader(eventArgs.col, eventArgs.row) &&
-                (checkCellInSelect(eventArgs.col, eventArgs.row, this.table.stateManager.select.ranges) ||
-                    this.table.options.select?.disableHeaderSelect ||
-                    this.table.options.select?.disableSelect) &&
                 this.table._canDragHeaderPosition(eventArgs.col, eventArgs.row)) {
                 this.table.stateManager.startMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs?.event?.nativeEvent);
                 return true;
@@ -53844,6 +53807,10 @@
                 e.stopPropagation();
                 e.preventDefault();
             });
+            this._rootElement?.addEventListener('contextmenu', e => {
+                e.stopPropagation();
+                e.preventDefault();
+            });
             this._rootElement?.addEventListener('touchend', e => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -54104,7 +54071,7 @@
         }
         _canBindToCell(table, col, row) {
             const rect = table.getCellRangeRelativeRect({ col, row });
-            const element = table.getElement();
+            const element = table.internalProps.menu.parentElement ?? table.getElement();
             const { top, bottom, left, right } = rect;
             if (table.isFrozenCell(col, row)) {
                 return true;
@@ -54126,8 +54093,8 @@
         }
         _bindToCell(table, col, row, position, referencePosition) {
             const rootElement = this._rootElement;
-            const element = table.getElement();
-            const { width: containerWidth, height: containerHeight } = table.internalProps.element.getBoundingClientRect();
+            const element = table.internalProps.menu.parentElement ?? table.getElement();
+            const { width: containerWidth, height: containerHeight, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
             if (rootElement) {
                 if (rootElement.parentElement !== element) {
                     element.appendChild(rootElement);
@@ -54156,14 +54123,21 @@
                 if (rootElementTop < 0) {
                     rootElementTop = rootElementTop / 2;
                 }
-                rootElement.style.top = `${rootElementTop}px`;
+                let deltaTop = 0;
+                let deltaLeft = 0;
+                if (table.getElement() !== element) {
+                    const { left, top } = table.getElement().getBoundingClientRect();
+                    deltaTop = top - containerTop;
+                    deltaLeft = left - containerLeft;
+                }
+                rootElement.style.top = `${rootElementTop + deltaTop}px`;
                 if (rootElementLeft < 0) {
                     rootElementLeft = 0;
                 }
                 else if (rootElementLeft * scaleX + rootElementWidth > containerWidth) {
                     rootElementLeft = (containerWidth - rootElementWidth) / scaleX;
                 }
-                rootElement.style.left = `${rootElementLeft}px`;
+                rootElement.style.left = `${rootElementLeft + deltaLeft}px`;
                 return true;
             }
             return false;
@@ -54171,8 +54145,8 @@
         _bindSecondElement(table, col, row, x, y) {
             const secondElement = this._secondElement;
             const rootElement = this._rootElement;
-            const element = table.getElement();
-            const { width: containerWidth, left: containerLeft, top: containerTop } = table.internalProps.element.getBoundingClientRect();
+            const element = table.internalProps.menu.parentElement ?? table.getElement();
+            const { width: containerWidth, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
             const { x: rootLeft, y: rootTop, width: rootWidth } = rootElement.getBoundingClientRect();
             if (secondElement) {
                 if (secondElement.parentElement !== element) {
@@ -57543,7 +57517,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.11.2-alpha.1";
+        version = "1.11.2-alpha.3";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59065,21 +59039,21 @@
         clearSelected() {
             this.stateManager.updateSelectPos(-1, -1);
         }
-        selectCell(col, row, isShift, isCtrl, makeSelectCellVisible = true, skipBodyMerge = false, forceSelect = false) {
+        selectCell(col, row, isShift, isCtrl, makeSelectCellVisible, skipBodyMerge = false, forceSelect = false) {
             const isHasSelected = !!this.stateManager.select.ranges?.length;
-            this.stateManager.updateSelectPos(col, row, isShift, isCtrl, false, !makeSelectCellVisible, skipBodyMerge, forceSelect);
+            this.stateManager.updateSelectPos(col, row, isShift, isCtrl, false, makeSelectCellVisible ?? this.options.select?.makeSelectCellVisible ?? true, skipBodyMerge, forceSelect);
             this.stateManager.endSelectCells(true, isHasSelected);
         }
         selectCells(cellRanges) {
             const { scrollLeft, scrollTop } = this;
             cellRanges.forEach((cellRange, index) => {
                 if (cellRange.start.col === cellRange.end.col && cellRange.start.row === cellRange.end.row) {
-                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, false, true);
+                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                 }
                 else {
-                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, false, true);
+                    this.stateManager.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                     this.stateManager.updateInteractionState(InteractionState.grabing);
-                    this.stateManager.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1, false, false, true);
+                    this.stateManager.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1, false, this.options.select?.makeSelectCellVisible ?? true, true);
                 }
                 this.stateManager.endSelectCells(false, false);
                 this.stateManager.updateInteractionState(InteractionState.default);
@@ -59445,6 +59419,10 @@
         _canDragHeaderPosition(col, row) {
             if (this.isHeader(col, row) &&
                 (this.stateManager.isSelected(col, row) ||
+                    (this.options.select?.headerSelectMode === 'body' &&
+                        checkCellInSelect(col, row, [
+                            this.getCellRange(this.stateManager.select.cellPos.col, this.stateManager.select.cellPos.row)
+                        ])) ||
                     this.options.select?.disableHeaderSelect ||
                     this.options.select?.disableSelect)) {
                 if (this.internalProps.frozenColDragHeaderMode === 'disabled' && this.isFrozenColumn(col)) {
@@ -61469,17 +61447,17 @@
         handleRowSeriesNumber(rowSeriesNumber) {
             if (rowSeriesNumber) {
                 if (Array.isArray(rowSeriesNumber)) {
-                    this.rowSeriesNumberColumn = rowSeriesNumber.map((seriesNumber, index) => {
+                    this.rowSeriesNumberColumn = rowSeriesNumber.map(seriesNumber => {
                         return {
                             id: this.seqId++,
                             title: seriesNumber.title,
-                            define: merge({ field: '_vtable_rowSeries_number_' + index }, seriesNumber),
+                            define: seriesNumber,
                             cellType: seriesNumber.cellType ?? 'text',
                             headerType: rowSeriesNumber.cellType ?? 'text',
                             style: seriesNumber.style,
                             width: seriesNumber.width,
                             format: seriesNumber.format,
-                            field: seriesNumber.field ?? '_vtable_rowSeries_number_' + index,
+                            field: seriesNumber.field,
                             icon: seriesNumber.icon,
                             headerIcon: seriesNumber.headerIcon,
                             isChildNode: false
@@ -61491,13 +61469,13 @@
                         {
                             id: this.seqId++,
                             title: rowSeriesNumber.title,
-                            define: merge({ field: '_vtable_rowSeries_number' }, rowSeriesNumber),
+                            define: rowSeriesNumber,
                             cellType: rowSeriesNumber.cellType ?? 'text',
                             headerType: rowSeriesNumber.cellType ?? 'text',
                             style: rowSeriesNumber.style,
                             width: rowSeriesNumber.width,
                             format: rowSeriesNumber.format,
-                            field: '_vtable_rowSeries_number',
+                            field: '',
                             icon: rowSeriesNumber.icon,
                             headerIcon: rowSeriesNumber.headerIcon,
                             isChildNode: false
@@ -62139,12 +62117,6 @@
             return this._headerObjectMap[id];
         }
         getHeaderField(col, row) {
-            if (this.isSeriesNumberInHeader(col, row)) {
-                return this.getSeriesNumberHeader(col, row)?.field;
-            }
-            else if (this.isSeriesNumberInBody(col, row)) {
-                return this.getSeriesNumberBody(col, row)?.field;
-            }
             const id = this.getCellId(col, row);
             return (this._headerObjectMap[id]?.field ||
                 (this.transpose
@@ -66102,7 +66074,7 @@
         }
         _canBindToCell(table, col, row) {
             const rect = table.getCellRangeRelativeRect({ col, row });
-            const element = table.getElement();
+            const element = table.internalProps.menu.parentElement ?? table.getElement();
             const { top, bottom, left, right } = rect;
             if (table.isFrozenCell(col, row)) {
                 return true;
@@ -66124,8 +66096,8 @@
         }
         _bindCell(table, col, row, position, referencePosition) {
             const rootElement = this._rootElement;
-            const element = table.getElement();
-            const { width: containerWidth, height: containerHeight } = table.internalProps.element.getBoundingClientRect();
+            const element = table.internalProps.menu.parentElement ?? table.getElement();
+            const { width: containerWidth, height: containerHeight, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
             if (rootElement) {
                 if (rootElement.parentElement !== element) {
                     element.appendChild(rootElement);
@@ -66152,14 +66124,21 @@
                 if (rootElementTop < 0) {
                     rootElementTop = rootElementTop / 2;
                 }
-                rootElement.style.top = `${rootElementTop}px`;
+                let deltaTop = 0;
+                let deltaLeft = 0;
+                if (table.getElement() !== element) {
+                    const { left, top } = table.getElement().getBoundingClientRect();
+                    deltaTop = top - containerTop;
+                    deltaLeft = left - containerLeft;
+                }
+                rootElement.style.top = `${rootElementTop + deltaTop}px`;
                 if (rootElementLeft < 0) {
                     rootElementLeft = 0;
                 }
                 else if (rootElementLeft + rootElementWidth > containerWidth) {
                     rootElementLeft = containerWidth - rootElementWidth;
                 }
-                rootElement.style.left = `${rootElementLeft}px`;
+                rootElement.style.left = `${rootElementLeft + deltaLeft}px`;
                 return true;
             }
             return false;
@@ -76956,6 +76935,8 @@
         col;
         willUpdateRow = false;
         willUpdateCol = false;
+        customDistRowFunction;
+        customDistColFunction;
         constructor(table, options) {
             this.table = table;
             this.rowCount = options?.rowCount ?? undefined;
@@ -76964,6 +76945,8 @@
             this.animationDelay = options?.animationDelay ?? 1000;
             this.animationEasing = options?.animationEasing ?? 'linear';
             this.replaceScrollAction = options?.replaceScrollAction ?? false;
+            this.customDistColFunction = options.customDistColFunction;
+            this.customDistRowFunction = options.customDistRowFunction;
             this.reset();
             this.init();
         }
@@ -77015,11 +76998,16 @@
             this.playing = false;
         }
         updateRow() {
-            if (!this.playing) {
+            if (!this.playing || this.table.isReleased) {
                 return;
             }
             let animation = true;
-            if (this.table.scenegraph.proxy.screenTopRow !== this.row) {
+            const customRow = this.customDistRowFunction && this.customDistRowFunction(this.row, this.table);
+            if (customRow) {
+                this.row = customRow.distRow;
+                animation = customRow.animation ?? true;
+            }
+            else if (this.table.scenegraph.proxy.screenTopRow !== this.row) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
@@ -77034,11 +77022,16 @@
             }, this.animationDuration + this.animationDelay);
         }
         updateCol() {
-            if (!this.playing) {
+            if (!this.playing || this.table.isReleased) {
                 return;
             }
             let animation = true;
-            if (this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+            const customCol = this.customDistColFunction && this.customDistColFunction(this.col, this.table);
+            if (customCol) {
+                this.col = customCol.distCol;
+                animation = customCol.animation ?? true;
+            }
+            else if (this.table.scenegraph.proxy.screenLeftCol !== this.col) {
                 this.col = this.table.frozenColCount;
                 animation = false;
             }
@@ -77191,7 +77184,7 @@
     }
 
     registerForVrender();
-    const version = "1.11.2-alpha.1";
+    const version = "1.11.2-alpha.3";
     function getIcons() {
         return get$2();
     }