@ai-table/grid 0.2.3 → 0.2.5

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

@@ -37,6 +37,7 @@ export declare class AITableDragComponent implements OnInit, OnDestroy {
     private movingColumnWidth;
     private movingRecord;
     private setMovingRecordDragData;
+    private setMovingFieldDragData;
     private handleDragEnd;
     private clearDragState;
     private calculateDragWidth;

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;;AAiBvE,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;IAwFpB,OAAO,CAAC,uBAAuB;IAoB/B,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;yCAtfF,oBAAoB;2CAApB,oBAAoB;CAigBhC"}
+{"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;;AAiBvE,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;IAqIpB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY;IAwFpB,OAAO,CAAC,uBAAuB;IAoB/B,OAAO,CAAC,sBAAsB;IAiB9B,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;yCAtfF,oBAAoB;2CAApB,oBAAoB;CAigBhC"}

package/constants/field-stat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-stat.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/constants/field-stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,eAAe,EAAgB,MAAM,iBAAiB,CAAC;AAG9F,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,4BAA4B,CAAC,CAyB9F,CAAC"}
+{"version":3,"file":"field-stat.d.ts","sourceRoot":"","sources":["../../../packages/grid/src/constants/field-stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,eAAe,EAAgB,MAAM,iBAAiB,CAAC;AAI9F,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,4BAA4B,CAAC,CAyB9F,CAAC"}

package/fesm2022/ai-table-grid.mjs

@@ -48,7 +48,7 @@ import { ThyNotifyService } from 'ngx-tethys/notify';
 import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { isKeyHotkey } from 'is-hotkey';
 import { LRUCache } from 'lru-cache';
-import { fromUnixTime, subDays, differenceInDays, differenceInMonths } from 'date-fns';
+import { differenceInDays, fromUnixTime, differenceInMonths, subDays } from 'date-fns';
 import { isArray, TinyDate, helpers, hexToRgb } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
 import GraphemeSplitter from 'grapheme-splitter';
@@ -1589,7 +1589,7 @@ const AITableQueries = {
         if (!path) {
             throw new Error(`path does not exist as path [${path}]`);
         }
-        return aiTable.gridData().fields.find((item) => item._id === path[0]);
+        return aiTable.fieldsMap()[path[0]];
     },
     getRecord(aiTable, path) {
         if (!aiTable) {
@@ -2105,7 +2105,7 @@ function expandCell(aiTable, cellPath) {
     setExpandCellInfo(aiTable, { path: cellPath });
 }
 function closeExpendCell(aiTable) {
-    setExpandCellInfo(aiTable, { path: null, width: undefined, height: undefined });
+    setExpandCellInfo(aiTable, { path: null });
 }
 function setSelection(aiTable, selection) {
     aiTable.selection.set({
@@ -2277,7 +2277,7 @@ function getPlaceHolderCellsConfigs(options) {
             if (isGroupAndFirstColumn) {
                 offset += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
             }
-            const height = rowHeight - AI_TABLE_OFFSET * 4;
+            const height = rowHeight;
             configs.unshift({
                 key: `placeholder-cell-${fieldId}-${recordId}`,
                 name: generateTargetName({
@@ -2287,7 +2287,7 @@ function getPlaceHolderCellsConfigs(options) {
                 }),
                 x: x + offset,
                 y,
-                width: width - AI_TABLE_OFFSET * 4,
+                width,
                 height,
                 fill: Colors.transparent,
                 strokeEnabled: false,
@@ -2681,6 +2681,62 @@ function cellValueToSortValue$5(cellValue, field, references, sortKey = 'title')
     return values && values.length ? values.join(', ') : null;
 }
 
+function getDateFieldValues(records, options, filterNull = false) {
+    const { aiTable, field } = options;
+    const result = ___default.map(records, (record) => {
+        const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
+        return cellValue;
+    });
+    if (filterNull) {
+        return result.filter((value) => value !== null);
+    }
+    return result;
+}
+function statEarliestTime(records, options) {
+    const values = getDateFieldValues(records, options, true);
+    const result = ___default.minBy(values, (value) => {
+        return value.timestamp;
+    });
+    return transformToCellText(result, options);
+}
+function statLatestTime(records, options) {
+    const { field } = options;
+    const values = getDateFieldValues(records, options, true);
+    const result = ___default.maxBy(values, (value) => {
+        return value.timestamp;
+    });
+    return transformToCellText(result, options);
+}
+function statDateRangeOfDays(records, options) {
+    const { field } = options;
+    const values = getDateFieldValues(records, options, true);
+    const start = ___default.minBy(values, (value) => {
+        return value.timestamp;
+    });
+    const end = ___default.maxBy(values, (value) => {
+        return value.timestamp;
+    });
+    if (start && end) {
+        const days = differenceInDays(fromUnixTime(end.timestamp), fromUnixTime(start.timestamp));
+        return days;
+    }
+    return 0;
+}
+function statDateRangeOfMonths(records, options) {
+    const values = getDateFieldValues(records, options, true);
+    const start = ___default.minBy(values, (value) => {
+        return value.timestamp;
+    });
+    const end = ___default.maxBy(values, (value) => {
+        return value.timestamp;
+    });
+    if (start && end) {
+        const months = differenceInMonths(fromUnixTime(end.timestamp), fromUnixTime(start.timestamp));
+        return months;
+    }
+    return 0;
+}
+
 const FIELD_STAT_TYPE_MAP = {
     [AITableStatType.EarliestTime]: {
         name: AITableGridI18nKey.earliestTime,
@@ -9210,15 +9266,6 @@ class AITableFieldStat {
                     config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
                 }
             }
-            if (isGroupStat && this.isFirstColumn()) {
-                const groupStatContainerWidthMap = this.groupStatContainerWidthMap();
-                const groupStatCellKey = `${groupRow.groupId}:${field._id}`;
-                const originGroupStatContainerWidth = groupStatContainerWidthMap.get(groupStatCellKey);
-                const width = this.renderTexts() ? config.width : 0;
-                if (!originGroupStatContainerWidth || originGroupStatContainerWidth !== width) {
-                    groupStatContainerWidthMap.set(groupStatCellKey, width);
-                }
-            }
             return config;
         });
         this.field = computed(() => {
@@ -9449,6 +9496,32 @@ class AITableFieldStat {
                 listening: false
             };
         });
+        effect(() => {
+            const isGroupStat = this.isGroupStat();
+            const bgConfigWidth = this.bgConfig().width;
+            const renderTexts = this.renderTexts();
+            untracked(() => {
+                if (isGroupStat && this.isFirstColumn()) {
+                    const config = this.config();
+                    const { aiTable, groupRow, field } = config;
+                    const groupStatContainerWidthMap = this.groupStatContainerWidthMap();
+                    const groupStatCellKey = `${groupRow.groupId}:${groupRow.fieldId}`;
+                    const originGroupStatContainerWidth = groupStatContainerWidthMap.get(groupStatCellKey);
+                    // 计算新的宽度
+                    const groupStatContainerWidth = renderTexts ? bgConfigWidth : 0;
+                    // 只有当值发生变化时才更新
+                    if (originGroupStatContainerWidth !== groupStatContainerWidth) {
+                        if (groupStatContainerWidth > 0) {
+                            groupStatContainerWidthMap.set(groupStatCellKey, groupStatContainerWidth);
+                        }
+                        else {
+                            groupStatContainerWidthMap.delete(groupStatCellKey);
+                        }
+                        aiTable.context?.groupStatContainerWidthMap.set(groupStatContainerWidthMap);
+                    }
+                }
+            });
+        });
     }
     onHoverChange(isHover) {
         this.isHover.set(isHover);
@@ -9465,7 +9538,9 @@ class AITableFieldStat {
         const containerRect = coordinate.container.getBoundingClientRect();
         const position = {
             x: containerRect.x + statRect.x,
-            y: containerRect.y + statRect.y + statRect.height - 50
+            y: containerRect.y + statRect.y + statRect.height - 50,
+            width: this.containerBoxWidth(),
+            height: this.containerBoxHeight() + 10
         };
         const editFieldPosition = {
             x: containerRect.x + fieldGroupRect.x - AI_TABLE_CELL_PADDING,
@@ -9550,7 +9625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, AITableTextComponent, AITableIcon, AITableBackground],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AITableGroups {
     constructor() {
@@ -11082,62 +11157,6 @@ function aiTableRectConfigToKonvaConfig(rectConfig, options) {
     return result;
 }
 
-function getDateFieldValues(records, options, filterNull = false) {
-    const { aiTable, field } = options;
-    const result = ___default.map(records, (record) => {
-        const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
-        return cellValue;
-    });
-    if (filterNull) {
-        return result.filter((value) => value !== null);
-    }
-    return result;
-}
-function statEarliestTime(records, options) {
-    const values = getDateFieldValues(records, options, true);
-    const result = ___default.minBy(values, (value) => {
-        return value.timestamp;
-    });
-    return transformToCellText(result, options);
-}
-function statLatestTime(records, options) {
-    const { field } = options;
-    const values = getDateFieldValues(records, options, true);
-    const result = ___default.maxBy(values, (value) => {
-        return value.timestamp;
-    });
-    return transformToCellText(result, options);
-}
-function statDateRangeOfDays(records, options) {
-    const { field } = options;
-    const values = getDateFieldValues(records, options, true);
-    const start = ___default.minBy(values, (value) => {
-        return value.timestamp;
-    });
-    const end = ___default.maxBy(values, (value) => {
-        return value.timestamp;
-    });
-    if (start && end) {
-        const days = differenceInDays(fromUnixTime(end.timestamp), fromUnixTime(start.timestamp));
-        return days;
-    }
-    return 0;
-}
-function statDateRangeOfMonths(records, options) {
-    const values = getDateFieldValues(records, options, true);
-    const start = ___default.minBy(values, (value) => {
-        return value.timestamp;
-    });
-    const end = ___default.maxBy(values, (value) => {
-        return value.timestamp;
-    });
-    if (start && end) {
-        const months = differenceInMonths(fromUnixTime(end.timestamp), fromUnixTime(start.timestamp));
-        return months;
-    }
-    return 0;
-}
-
 function getFillDirection(aiTable, sourceCells, mouseUpRecordId) {
     const { startCell: sourceStartCell, endCell: sourceEndCell } = getStartAndEndCell(sourceCells);
     const currentRowIndex = aiTable.context.visibleRowsIndexMap().get(mouseUpRecordId);
@@ -12715,17 +12734,15 @@ 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 currentRectLeftIsInFrozenArea = 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) {
+            if (currentRectLeftIsInFrozenArea) {
                 // 冻结列区域内滚动，清空滚动位置
                 scrollPosition.x = 0;
             }
@@ -12745,20 +12762,14 @@ class AITableDragComponent {
                 isLastColumn) {
                 let lineLeft = targetColumnStartX - scrollPosition.x;
                 const lineForFrozenX = lineLeft - frozenColumnWidth - rowHeadWidth;
-                const rectDistanceFrozenX = rectLeft - frozenColumnWidth - rowHeadWidth;
                 if (lineForFrozenX < 0) {
-                    if (Math.abs(rectDistanceFrozenX) < dragCenter || (isSourceColumnFrozen && !isFrozenColumnAreaDrag)) {
-                        // 滚动中保持上一个位置
+                    if (!currentRectLeftIsInFrozenArea && lineLeft < frozenColumnWidth + rowHeadWidth) {
+                        // 非冻结区拖拽需要控制辅助线不要显示到冻结区，需要保持在上个位置
                         const nextColumnStartX = coordinate.getColumnOffset(targetColumnIndex + 1);
                         this.setAuxiliaryLineStyles({
                             left: `${nextColumnStartX - scrollPosition.x}px`
                         });
-                        this.draggedData = {
-                            type: DragType.field,
-                            targetIndex: targetColumnIndex + 1,
-                            fieldIds: drag.sourceIds,
-                            fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
-                        };
+                        this.setMovingFieldDragData(DragType.field, drag.sourceIds, targetColumnIndex + 1);
                         return;
                     }
                 }
@@ -12768,16 +12779,7 @@ class AITableDragComponent {
                     top: 0,
                     left: `${lineLeft}px`
                 });
-                // 向右移动目标在目标列的前一列
-                if (targetColumnIndex > sourceColumnIndex) {
-                    targetColumnIndex -= 1;
-                }
-                this.draggedData = {
-                    type: DragType.field,
-                    targetIndex: targetColumnIndex,
-                    fieldIds: drag.sourceIds,
-                    fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
-                };
+                this.setMovingFieldDragData(DragType.field, drag.sourceIds, targetColumnIndex);
             }
             else {
                 this.resetAuxiliaryLine();
@@ -12785,7 +12787,7 @@ class AITableDragComponent {
             }
         };
         updateTargetAndLine(currentRectLeft, newScrollPosition);
-        if (isFrozenColumnAreaDrag) {
+        if (currentRectLeftIsInFrozenArea) {
             // 冻结列区域内拖拽取消滚动
             this.scrollControllerService.stopAutoScroll();
             return;
@@ -12957,6 +12959,24 @@ class AITableDragComponent {
             }
         }
     }
+    setMovingFieldDragData(type, sourceIds, targetIndex) {
+        const aiTable = this.aiTableGridEventService.aiTable;
+        const fields = aiTable.gridData().fields;
+        this.draggedData = {
+            type,
+            fieldIds: sourceIds,
+            targetIndex
+        };
+        if (targetIndex === 0) {
+            this.draggedData.beforeFieldId = fields[0]._id;
+        }
+        else if (targetIndex >= fields.length) {
+            this.draggedData.afterFieldId = fields[fields.length - 1]._id;
+        }
+        else {
+            this.draggedData.afterFieldId = fields[targetIndex - 1]._id;
+        }
+    }
     handleDragEnd() {
         if (this.draggedData) {
             this.dragEnd.emit({ ...this.draggedData });
@@ -13979,13 +13999,12 @@ class AITableGrid extends AITableGridBase {
     dragEnd(data) {
         switch (data.type) {
             case DragType.field:
-                if (data.fieldsIndex && isNumber(data.targetIndex)) {
-                    for (let i = 0; i < data.fieldsIndex.length; i++) {
-                        this.aiMoveField.emit({
-                            path: [data.fieldsIndex[i]],
-                            newPath: [data.targetIndex + i]
-                        });
-                    }
+                if (data.fieldIds && (data.beforeFieldId || data.afterFieldId)) {
+                    this.aiMoveField.emit({
+                        fieldIds: Array.from(data.fieldIds),
+                        beforeFieldId: data.beforeFieldId,
+                        afterFieldId: data.afterFieldId
+                    });
                 }
                 break;
             case DragType.columnWidth: