@ai-table/grid 0.2.4 → 0.3.0

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;IAoJpB,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;yCApfF,oBAAoB;2CAApB,oBAAoB;CA+fhC"}
+{"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/fesm2022/ai-table-grid.mjs

@@ -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,
@@ -2414,7 +2414,7 @@ const isClipboardReadSupported = () => {
 const isClipboardReadTextSupported = () => {
     return 'clipboard' in navigator && 'readText' in navigator.clipboard;
 };
-const writeToClipboard = async (data) => {
+const writeToClipboard = async (data, dataTransfer) => {
     try {
         const { text, html } = data;
         if (isClipboardWriteSupported()) {
@@ -2423,24 +2423,24 @@ const writeToClipboard = async (data) => {
                 'text/html': new Blob([html], { type: 'text/html' })
             });
             await navigator.clipboard.write([clipboardItem]);
+            return;
         }
-        else if (isClipboardWriteTextSupported()) {
-            await navigator.clipboard.writeText(text);
+        if (dataTransfer) {
+            dataTransfer.setData(`text/html`, html);
+            dataTransfer.setData(`text/plain`, text);
+            window.dataTransfer = dataTransfer;
+            return;
         }
-        else {
-            const textarea = document.createElement('textarea');
-            textarea.value = text;
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textarea);
+        if (isClipboardWriteTextSupported()) {
+            await navigator.clipboard.writeText(text);
+            return;
         }
     }
     catch (error) {
         console.warn('Failed to write clipboard:', error);
     }
 };
-const readFromClipboard = async () => {
+const readFromClipboard = async (dataTransfer) => {
     try {
         let clipboardData = {};
         if (isClipboardReadSupported()) {
@@ -2457,32 +2457,28 @@ const readFromClipboard = async () => {
                     }
                 }
             }
+            const { html, text } = clipboardData;
+            if (html || text) {
+                return clipboardData;
+            }
         }
-        else if (isClipboardReadTextSupported()) {
-            const clipboardText = await navigator.clipboard.readText();
-            clipboardData.text = clipboardText;
+        if (dataTransfer) {
+            const html = dataTransfer.getData(`text/html`);
+            const text = dataTransfer.getData(`text/plain`);
+            html && (clipboardData.html = html);
+            text && (clipboardData.text = text);
+            if (html || text) {
+                return clipboardData;
+            }
         }
-        else {
-            const pastePromise = new Promise((resolve) => {
-                const textarea = document.createElement('textarea');
-                document.body.appendChild(textarea);
-                const handlePaste = (e) => {
-                    const text = e.clipboardData?.getData('text') || '';
-                    const html = e.clipboardData?.getData('text/html') || '';
-                    resolve({
-                        text,
-                        html: html || undefined
-                    });
-                    textarea.removeEventListener('paste', handlePaste);
-                };
-                textarea.addEventListener('paste', handlePaste);
-                textarea.focus();
-                document.execCommand('paste');
-                document.body.removeChild(textarea);
-            });
-            clipboardData = await pastePromise;
+        if (isClipboardReadTextSupported()) {
+            const text = await navigator.clipboard.readText();
+            text && (clipboardData.text = text);
+            if (text) {
+                return clipboardData;
+            }
         }
-        return clipboardData;
+        return null;
     }
     catch (error) {
         console.warn('Failed to read clipboard:', error);
@@ -3666,8 +3662,8 @@ function extractAITableContentFromClipboardHtml(clipboardHtml) {
     }
     return null;
 }
-const readClipboardData = async () => {
-    const clipboardData = await readFromClipboard();
+const readClipboardData = async (dataTransfer) => {
+    const clipboardData = await readFromClipboard(dataTransfer);
     let clipboardContent = [];
     let aiTableContent = null;
     if (clipboardData) {
@@ -3737,7 +3733,7 @@ function appendField(aiTable, originField, actions) {
         defaultValue: defaultFieldValue
     });
 }
-const writeToAITable = async (aiTable, actions) => {
+const writeToAITable = async (aiTable, actions, dataTransfer) => {
     const selectedCells = Array.from(aiTable.selection().selectedCells);
     const result = {
         isPasteSuccess: false,
@@ -3747,7 +3743,7 @@ const writeToAITable = async (aiTable, actions) => {
     if (!selectedCells.length) {
         return result;
     }
-    const { clipboardContent, aiTableContent } = await readClipboardData();
+    const { clipboardContent, aiTableContent } = await readClipboardData(dataTransfer);
     if (!clipboardContent.length) {
         return result;
     }
@@ -9266,15 +9262,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(() => {
@@ -9505,6 +9492,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);
@@ -9608,7 +9621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, AITableTextComponent, AITableIcon, AITableBackground],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AITableGroups {
     constructor() {
@@ -10832,11 +10845,16 @@ class AITableCellText extends CoverCellBase {
             const { columnWidth } = render;
             if (isExpand) {
                 return {
+                    name: generateTargetName({
+                        targetName: AI_TABLE_CELL,
+                        fieldId: field._id,
+                        recordId
+                    }),
                     width: columnWidth - AI_TABLE_CELL_BORDER / 2,
                     height: this.height(),
                     stroke: Colors.primary,
                     strokeWidth: 2,
-                    listening: false
+                    listening: true
                 };
             }
             return null;
@@ -12752,12 +12770,7 @@ class AITableDragComponent {
                         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;
                     }
                 }
@@ -12767,16 +12780,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();
@@ -12956,6 +12960,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 });
@@ -13237,6 +13259,8 @@ class AITableGrid extends AITableGridBase {
             this.bindGlobalMousedown();
             this.containerResizeListener();
             this.bindShortcuts();
+            this.subscribeCopyEvent();
+            this.subscribePasteEvent();
         });
         effect(() => {
             if (this.hasContainerRect() && this.horizontalBarRef() && this.verticalBarRef()) {
@@ -13728,6 +13752,30 @@ class AITableGrid extends AITableGridBase {
             clearCoverCell(this.aiTable);
         });
     }
+    subscribeCopyEvent() {
+        fromEvent(document, 'copy')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            if (this.aiReadonly()) {
+                return;
+            }
+            const dataTransfer = event.clipboardData;
+            this.copyCells(dataTransfer);
+            event.preventDefault();
+        });
+    }
+    subscribePasteEvent() {
+        fromEvent(document, 'paste')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            if (this.aiReadonly()) {
+                return;
+            }
+            const dataTransfer = event.clipboardData;
+            this.pasteCells(dataTransfer);
+            event.preventDefault();
+        });
+    }
     updateDragSelectState(isDragging, startCell) {
         this.dragSelectState = {
             isDragging: isDragging,
@@ -13844,7 +13892,6 @@ class AITableGrid extends AITableGridBase {
             if (hasContentEditable) {
                 return;
             }
-            const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
             const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
             const isDirectionKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight';
             const isShiftDirectionKey = event.shiftKey &&
@@ -13887,16 +13934,6 @@ class AITableGrid extends AITableGridBase {
                 event.preventDefault();
                 return;
             }
-            if (isCopyOrPaste) {
-                if (event.key === 'c') {
-                    this.copyCells();
-                }
-                else if (event.key === 'v') {
-                    this.pasteCells();
-                }
-                event.preventDefault();
-                return;
-            }
             if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
                 event.preventDefault();
@@ -13924,10 +13961,10 @@ class AITableGrid extends AITableGridBase {
             }
         });
     }
-    copyCells() {
+    copyCells(dataTransfer) {
         const clipboardData = buildClipboardData(this.aiTable);
         if (clipboardData) {
-            writeToClipboard(clipboardData).then(() => {
+            writeToClipboard(clipboardData, dataTransfer).then(() => {
                 const copiedCellsCount = this.aiTable.selection().selectedCells.size;
                 const message = getI18nTextByKey(this.aiTable, AITableGridI18nKey.copiedCells).replace('{count}', copiedCellsCount.toString());
                 this.notifyService.success(message, undefined, {
@@ -13936,8 +13973,8 @@ class AITableGrid extends AITableGridBase {
             });
         }
     }
-    pasteCells() {
-        writeToAITable(this.aiTable, this.actions).then((result) => {
+    pasteCells(dataTransfer) {
+        writeToAITable(this.aiTable, this.actions, dataTransfer).then((result) => {
             if (result.isPasteOverMaxRecords || result.isPasteOverMaxFields) {
                 return;
             }
@@ -13978,13 +14015,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: