@ai-table/grid 0.1.37 → 0.1.39

package/components/drag/drag.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag.component.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/components/drag/drag.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAIV,SAAS,EACT,MAAM,EAIT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,WAAW,EAAY,MAAM,iBAAiB,CAAC;;AAgBvE,qBAQa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC1D,aAAa,2EAAgD;IAE7D,WAAW,2EAAgD;IAE3D,OAAO,wDAAyB;IAEhC,OAAO,CAAC,uBAAuB,CAAmC;IAElE,OAAO,CAAC,OAAO,CAAqB;IAEpC,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAmC;IAEtE,OAAO,CAAC,IAAI,CAAe;IAE3B,OAAO,CAAC,aAAa,CAAe;IAEpC,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,sBAAsB,CAA4C;IAE1E,OAAO,CAAC,kBAAkB,CAAyC;IAEnE,OAAO,CAAC,WAAW,CAAiC;IAEpD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,gBAAgB,CAAa;IAErC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,eAAe,CAAa;IAEpC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAE3C,OAAO,CAAC,sBAAsB,CAAa;IAE3C,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,eAAe,CAAC,CAAa;;IAMrC,QAAQ;IAKR,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IA8C3B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY;IAkJpB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY;IA2FpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,kBAAkB;IAI1B,WAAW;yCA/dF,oBAAoB;2CAApB,oBAAoB;CA0ehC"}
+{"version":3,"file":"drag.component.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/components/drag/drag.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAIV,SAAS,EACT,MAAM,EAIT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,WAAW,EAAY,MAAM,iBAAiB,CAAC;;AAgBvE,qBAQa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC1D,aAAa,2EAAgD;IAE7D,WAAW,2EAAgD;IAE3D,OAAO,wDAAyB;IAEhC,OAAO,CAAC,uBAAuB,CAAmC;IAElE,OAAO,CAAC,OAAO,CAAqB;IAEpC,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAmC;IAEtE,OAAO,CAAC,IAAI,CAAe;IAE3B,OAAO,CAAC,aAAa,CAAe;IAEpC,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,sBAAsB,CAA4C;IAE1E,OAAO,CAAC,kBAAkB,CAAyC;IAEnE,OAAO,CAAC,WAAW,CAAiC;IAEpD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,gBAAgB,CAAa;IAErC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,eAAe,CAAa;IAEpC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAE3C,OAAO,CAAC,sBAAsB,CAAa;IAE3C,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,eAAe,CAAC,CAAa;;IAMrC,QAAQ;IAKR,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IA8C3B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,YAAY;IAsJpB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY;IA2FpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,kBAAkB;IAI1B,WAAW;yCAreF,oBAAoB;2CAApB,oBAAoB;CAgfhC"}

package/fesm2022/ai-table-grid.mjs

@@ -3270,7 +3270,7 @@ function copyOption(originOption, targetFieldOptions, targetOptionStyle) {
 }
 function getValidCellValue(cellValue, options) {
     const optionsMap = helpers.keyBy(options, '_id');
-    const validCellValue = cellValue.filter((optionId) => !!optionsMap[optionId]);
+    const validCellValue = cellValue?.filter((optionId) => !!optionsMap[optionId]);
     return validCellValue;
 }
 
@@ -3319,9 +3319,9 @@ class CheckboxField extends CheckboxFieldBase {
         const cellTextValue = cellValue;
         switch (condition.operation) {
             case AITableFilterOperation.empty:
-                return isEmpty(cellTextValue);
+                return !cellTextValue;
             case AITableFilterOperation.exists:
-                return !isEmpty(cellTextValue);
+                return !!cellTextValue;
             default:
                 return isMeetFilter(condition, cellTextValue);
         }
@@ -3332,6 +3332,12 @@ class CheckboxField extends CheckboxFieldBase {
         return compareNumber(value1, value2);
     }
     toFieldValue(plainText, targetField, originData) {
+        if (originData) {
+            const { field, cellValue } = originData;
+            if (field.type === AITableFieldType.checkbox) {
+                return cellValue;
+            }
+        }
         return null;
     }
 }
@@ -4139,7 +4145,6 @@ class Drawer {
         const { x, y, width, height, fill, strokes } = options;
         if (fill)
             this.setStyle({ fillStyle: fill });
-        this.ctx.fillRect(x, y, width, height);
         if (strokes) {
             const { top, right, bottom, left } = strokes;
             // 上边框
@@ -4167,6 +4172,9 @@ class Drawer {
             this.ctx.lineTo(x, y + height);
             this.ctx.stroke();
         }
+        else {
+            this.ctx.fillRect(x, y, width, height);
+        }
     }
     // 换行文本绘制
     wrapText(options) {
@@ -8260,9 +8268,6 @@ class AITableScrollableGroup {
         // 滚动位置信号
         this.scrollX = signal(0);
         this.scrollY = signal(0);
-        // 滚动条拖拽状态
-        this.isDraggingVertical = signal(false);
-        this.isDraggingHorizontal = signal(false);
         // 容器配置
         this.containerConfig = computed(() => {
             const { x = 0, y = 0, width, height } = this.config();
@@ -8393,9 +8398,6 @@ class AITableScrollableGroup {
         });
         // 竖向滚动条滑块配置
         this.verticalConfig = computed(() => {
-            if (this.isDraggingVertical()) {
-                return null;
-            }
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
             const { height, contentHeight } = this.config();
             const thumbHeight = this.verticalThumbHeight();
@@ -8410,7 +8412,6 @@ class AITableScrollableGroup {
                 cornerRadius: 6,
                 draggable: true,
                 dragBoundFunc: (pos) => {
-                    this.isDraggingVertical.set(true);
                     this.displayScrollbarTime.set(new Date());
                     // 限定垂直滚动条的拖拽范围，并更新newScrollY
                     const maxThumbY = this.verticalThumbMaxY();
@@ -8420,9 +8421,6 @@ class AITableScrollableGroup {
                     const newScrollY = (deltaY / (this.verticalScrollbarHeight() - this.verticalThumbHeight())) * (contentHeight - height);
                     this.scrollY.set(newScrollY);
                     const x = this.verticalTrack.getNode().getAbsolutePosition().x + 1;
-                    setTimeout(() => {
-                        this.isDraggingVertical.set(false);
-                    }, 100);
                     return {
                         x: x,
                         y: newThumbY
@@ -8432,9 +8430,6 @@ class AITableScrollableGroup {
         });
         // 横向滚动条滑块配置
         this.horizontalThumbConfig = computed(() => {
-            if (this.isDraggingHorizontal()) {
-                return null;
-            }
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
             const { width, contentWidth } = this.config();
             const thumbWidth = this.horizontalThumbWidth();
@@ -8449,7 +8444,6 @@ class AITableScrollableGroup {
                 cornerRadius: 6,
                 draggable: true,
                 dragBoundFunc: (pos) => {
-                    this.isDraggingHorizontal.set(true);
                     this.displayScrollbarTime.set(new Date());
                     // 限定横向滚动条的拖拽范围,并更新scrollX
                     const maxThumbX = this.horizontalThumbMaxX();
@@ -8459,9 +8453,6 @@ class AITableScrollableGroup {
                     const newScrollX = (deltaX / (this.horizontalScrollbarHeight() - this.horizontalThumbWidth())) * (contentWidth - width);
                     this.scrollX.set(newScrollX);
                     const y = this.horizontalTrack.getNode().getAbsolutePosition().y + 1;
-                    setTimeout(() => {
-                        this.isDraggingHorizontal.set(false);
-                    }, 100);
                     return {
                         x: newThumbX,
                         y: y
@@ -8502,6 +8493,9 @@ class AITableScrollableGroup {
             this.rootGroup.getNode().moveTo(this.parentContainer().getNode());
         }
     }
+    stopBubble(e) {
+        e.event.cancelBubble = true;
+    }
     verticalScrollbarClick(e) {
         e.event.cancelBubble = true;
         const { contentHeight, height } = this.config();
@@ -8600,7 +8594,7 @@ class AITableScrollableGroup {
                 <ng-content></ng-content>
             </ko-group>
 
-            <ko-group>
+            <ko-group (koMousedown)="stopBubble($event)">
                 @if (showVerticalScrollbar()) {
                     <ko-group
                         [config]="verticalScrollbarConfig()"
@@ -8652,7 +8646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 <ng-content></ng-content>
             </ko-group>
 
-            <ko-group>
+            <ko-group (koMousedown)="stopBubble($event)">
                 @if (showVerticalScrollbar()) {
                     <ko-group
                         [config]="verticalScrollbarConfig()"
@@ -10087,7 +10081,7 @@ class AITableCellCheckbox extends CoverCellBase {
                     fill: this.isChecked() ? Colors.primary : Colors.gray300,
                     width: AI_TABLE_ICON_COMMON_SIZE,
                     height: AI_TABLE_ICON_COMMON_SIZE,
-                    listening: true
+                    listening: readonly ? false : true
                 };
             }
             return null;
@@ -10150,7 +10144,7 @@ class AITableCellText extends CoverCellBase {
                 width: columnWidth,
                 height: this.height(),
                 contentWidth: columnWidth, // 内容宽度大于容器宽度，会显示横向滚动条
-                contentHeight: height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER, // 内容高度大于容器高度，会显示竖向滚动条
+                contentHeight: height, // 内容高度大于容器高度，会显示竖向滚动条
                 scrollbarSize: 9,
                 scrollbarColor: Colors.gray700,
                 x: 0,
@@ -10177,7 +10171,10 @@ class AITableCellText extends CoverCellBase {
                 transformsEnabled: DEFAULT_TEXT_TRANSFORMS_ENABLED,
                 listening: false
             });
-            return tmpText.getClientRect();
+            return {
+                ...tmpText.getClientRect(),
+                height: tmpText.getClientRect().height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER
+            };
         });
         this.textMaxWidth = computed(() => {
             const { columnWidth } = this.config()?.render;
@@ -11136,13 +11133,13 @@ class CheckboxMenuSort {
         <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
         <div class="sort-state">
             @if (menu().type === 'sortByAsc') {
-                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
-                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
-                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
-            } @else {
                 <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
                 <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
                 <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+            } @else {
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
             }
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -11155,13 +11152,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
         <div class="sort-state">
             @if (menu().type === 'sortByAsc') {
-                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
-                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
-                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
-            } @else {
                 <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
                 <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
                 <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+            } @else {
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
             }
         </div>
     `,
@@ -11705,7 +11702,7 @@ class AITableScrollControllerService {
         this.lastAutoScrollOptions = null;
         this.ngZone.runOutsideAngular(() => {
             this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
-                this.handleMouseUp();
+                this.clearAutoScroll();
             });
         });
     }
@@ -11720,7 +11717,10 @@ class AITableScrollControllerService {
             this.startAutoScroll(options);
         }
     }
-    handleMouseUp() {
+    stopAutoScroll() {
+        this.clearAutoScroll();
+    }
+    clearAutoScroll() {
         this.isAutoScrolling = false;
         if (this.autoScrollSub) {
             this.autoScrollSub.unsubscribe();
@@ -11986,7 +11986,9 @@ class AITableDragComponent {
                 else if (e.movementX < 0) {
                     direction = DragDirection.left;
                 }
-                this.movingColumn(drag, moveX, direction);
+                if (direction !== DragDirection.none) {
+                    this.movingColumn(drag, moveX, direction);
+                }
                 break;
             case DragType.record:
                 this.movingRecord(drag, moveY);
@@ -12008,7 +12010,7 @@ class AITableDragComponent {
         const sourceColumnStartX = coordinate.getColumnOffset(sourceColumnIndex);
         const sourceColumnWidth = coordinate.getColumnWidth(sourceColumnIndex);
         const frozenColumnCount = aiTable.context.frozenColumnCount();
-        const isSourceColumnFrozen = sourceColumnIndex === frozenColumnCount - 1;
+        const isSourceColumnFrozen = sourceColumnIndex <= frozenColumnCount - 1;
         const frozenColumnWidth = Array.from({ length: frozenColumnCount }).reduce((acc, _, index) => acc + coordinate.getColumnWidth(index), 0);
         const pointerX = moveX + sourceColumnStartX;
         // 拖拽中心点
@@ -12022,8 +12024,20 @@ class AITableDragComponent {
             top: '0',
             left: `${currentRectLeft}px`
         });
+        // 是否在冻结列区域内拖拽
+        const isFrozenColumnAreaDrag = isSourceColumnFrozen &&
+            currentRectLeft <
+                frozenColumnWidth +
+                    rowHeadWidth +
+                    (direction === DragDirection.left || direction === DragDirection.none
+                        ? -AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD
+                        : AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD);
         // 计算目标列和辅助线
         const updateTargetAndLine = (rectLeft, scrollPosition) => {
+            if (isFrozenColumnAreaDrag) {
+                // 冻结列区域内滚动，清空滚动位置
+                scrollPosition.x = 0;
+            }
             let targetColumnIndex = coordinate.getColumnStartIndex(rectLeft + scrollPosition.x + dragCenter);
             const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
             const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
@@ -12042,7 +12056,7 @@ class AITableDragComponent {
                 const lineForFrozenX = lineLeft - frozenColumnWidth - rowHeadWidth;
                 const rectDistanceFrozenX = rectLeft - frozenColumnWidth - rowHeadWidth;
                 if (lineForFrozenX < 0) {
-                    if (Math.abs(rectDistanceFrozenX) < dragCenter) {
+                    if (Math.abs(rectDistanceFrozenX) < dragCenter || (isSourceColumnFrozen && !isFrozenColumnAreaDrag)) {
                         // 滚动中保持上一个位置
                         const nextColumnStartX = coordinate.getColumnOffset(targetColumnIndex + 1);
                         this.setAuxiliaryLineStyles({
@@ -12056,12 +12070,6 @@ class AITableDragComponent {
                         };
                         return;
                     }
-                    if (isSourceColumnFrozen) {
-                        // 拖拽的列是冻结列，且目标列在冻结列左侧，不显示辅助线
-                        this.resetAuxiliaryLine();
-                        this.draggedData = null;
-                        return;
-                    }
                 }
                 this.setAuxiliaryLineStyles({
                     width: '2px',
@@ -12086,10 +12094,9 @@ class AITableDragComponent {
             }
         };
         updateTargetAndLine(currentRectLeft, newScrollPosition);
-        if (isSourceColumnFrozen &&
-            (direction === DragDirection.right || direction === DragDirection.none) &&
-            currentRectLeft < frozenColumnWidth + rowHeadWidth + AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD) {
-            // 拖拽的列是冻结列，方向是向右，且当前列在冻结列左侧，不滚动
+        if (isFrozenColumnAreaDrag) {
+            // 冻结列区域内拖拽取消滚动
+            this.scrollControllerService.stopAutoScroll();
             return;
         }
         this.scrollControllerService.scroll({