balala-revogrid 1.0.0

package/dist/collection/components/grouping-overlay/revogr-grouping-overlay.js

@@ -0,0 +1,644 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { Host, h } from "@stencil/core";
+import { getSourceItem } from "../../store/index";
+import { isGrouping } from "../../plugins/groupingRow/grouping.service";
+import GroupingRowRenderer from "../../plugins/groupingRow/grouping.row.renderer";
+import { PSEUDO_GROUP_ITEM } from "../../plugins/groupingRow/grouping.const";
+export class RevogrGroupingOverlay {
+    constructor() {
+        this.type = 'rgRow';
+        this.colType = 'rgCol';
+        this.groupRows = [];
+        this.dataRows = [];
+        this.unsubscribers = [];
+        // ==================== 性能优化：缓存和节流 ====================
+        /** 缓存的选中行索引 */
+        this.cachedSelectedIndices = new Set();
+        /** 上次解析的选中行属性值 */
+        this.lastSelectedRowsAttr = null;
+        /** 上次的 viewport items 引用（用于变化检测） */
+        this.lastRowItems = null;
+        /** 上次的 col items 引用 */
+        this.lastColItems = null;
+        /** RAF 节流标记 */
+        this.updateScheduled = false;
+        /** MutationObserver 用于监听选中状态变化 */
+        this.selectionObserver = null;
+        // ==================== Resize 优化 ====================
+        /** ResizeObserver 用于监听表格宽度变化 */
+        this.resizeObserver = null;
+    }
+    onDataChange() {
+        this.scheduleUpdate();
+    }
+    /**
+     * 刷新分组行显示，用于选中状态变化后更新选中数量
+     */
+    async refresh() {
+        // 强制刷新时清除缓存
+        this.lastSelectedRowsAttr = null;
+        this.updateGroupRowsImmediate(true);
+    }
+    connectedCallback() {
+        this.providers = {
+            type: this.type,
+            colType: this.colType,
+            readonly: true,
+            data: this.dataStore,
+            columns: this.colData,
+            viewport: this.viewportCol,
+            dimension: this.dimensionRow,
+            selection: null,
+        };
+        // 数据变化时的处理函数
+        const onDataUpdate = () => {
+            this.scheduleUpdate();
+        };
+        if (this.viewportRow) {
+            this.unsubscribers.push(this.viewportRow.onChange('items', onDataUpdate));
+        }
+        if (this.dataStore) {
+            this.unsubscribers.push(this.dataStore.onChange('source', () => {
+                // 数据源变化时清除缓存
+                this.lastRowItems = null;
+                this.scheduleUpdate();
+            }));
+        }
+        if (this.viewportCol) {
+            this.unsubscribers.push(this.viewportCol.onChange('items', onDataUpdate));
+        }
+        // 监听选中状态变化
+        this.setupSelectionObserver();
+        // 监听表格宽度变化
+        this.setupResizeObserver();
+        this.updateGroupRowsImmediate(false);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.unsubscribers.forEach(unsub => unsub());
+        (_a = this.selectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.selectionObserver = null;
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.resizeObserver = null;
+    }
+    /**
+     * 设置 ResizeObserver 监听表格宽度变化
+     */
+    setupResizeObserver() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            // 立即更新，不使用防抖
+            this.scheduleUpdate();
+        });
+        this.resizeObserver.observe(revogrid);
+    }
+    /**
+     * 设置 MutationObserver 监听选中状态变化
+     */
+    setupSelectionObserver() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid)
+            return;
+        this.selectionObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.attributeName === 'data-selected-rows' ||
+                    mutation.attributeName === 'data-selected-rg-rows') {
+                    // 选中状态变化，更新缓存并刷新
+                    this.updateSelectedIndicesCache();
+                    this.scheduleUpdate();
+                    break;
+                }
+            }
+        });
+        this.selectionObserver.observe(revogrid, {
+            attributes: true,
+            attributeFilter: ['data-selected-rows', 'data-selected-rg-rows'],
+        });
+    }
+    /**
+     * 使用 RAF 节流的更新调度
+     */
+    scheduleUpdate() {
+        if (this.updateScheduled)
+            return;
+        this.updateScheduled = true;
+        requestAnimationFrame(() => {
+            this.updateScheduled = false;
+            this.updateGroupRowsImmediate(false);
+        });
+    }
+    /**
+     * 更新选中行索引缓存
+     */
+    updateSelectedIndicesCache() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid) {
+            this.cachedSelectedIndices.clear();
+            this.lastSelectedRowsAttr = null;
+            return;
+        }
+        const selectedRowsAttr = revogrid.getAttribute('data-selected-rg-rows') ||
+            revogrid.getAttribute('data-selected-rows');
+        // 如果属性值没变，直接返回
+        if (selectedRowsAttr === this.lastSelectedRowsAttr) {
+            return;
+        }
+        this.lastSelectedRowsAttr = selectedRowsAttr;
+        this.cachedSelectedIndices.clear();
+        if (selectedRowsAttr) {
+            try {
+                const indices = JSON.parse(selectedRowsAttr);
+                if (Array.isArray(indices)) {
+                    for (let i = 0; i < indices.length; i++) {
+                        this.cachedSelectedIndices.add(indices[i]);
+                    }
+                }
+            }
+            catch (e) {
+                // 忽略解析错误
+            }
+        }
+    }
+    /**
+     * 获取选中行索引（使用缓存）
+     */
+    getSelectedRowIndices() {
+        // 首次调用或缓存失效时更新
+        if (this.lastSelectedRowsAttr === null) {
+            this.updateSelectedIndicesCache();
+        }
+        return this.cachedSelectedIndices;
+    }
+    /**
+     * 立即更新分组行（带变化检测）
+     * @param forceUpdate 是否强制更新，忽略变化检测
+     */
+    async updateGroupRowsImmediate(forceUpdate = false) {
+        if (!this.dataStore || !this.viewportRow || !this.viewportCol) {
+            if (this.groupRows.length || this.dataRows.length) {
+                this.groupRows = [];
+                this.dataRows = [];
+            }
+            return;
+        }
+        const rows = this.viewportRow.get('items');
+        const cols = this.viewportCol.get('items');
+        // 变化检测：如果 items 引用没变且不是强制更新，跳过更新
+        if (!forceUpdate && rows === this.lastRowItems && cols === this.lastColItems) {
+            return;
+        }
+        this.lastRowItems = rows;
+        this.lastColItems = cols;
+        if (!rows.length) {
+            if (this.groupRows.length || this.dataRows.length) {
+                this.groupRows = [];
+                this.dataRows = [];
+            }
+            return;
+        }
+        const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
+        // 即使 cols 为空（所有列都冻结），也要渲染分组行
+        const firstCol = cols[0] || { start: 0, end: 0, size: 0, itemIndex: 0 };
+        // 使用缓存的选中行索引
+        const selectedRowIndices = this.getSelectedRowIndices();
+        // 获取当前可见的物理索引数组
+        const dataItems = this.dataStore.get('items');
+        const groupRowsData = [];
+        const dataRowsData = [];
+        for (let i = 0; i < rows.length; i++) {
+            const rgRow = rows[i];
+            const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);
+            if (!dataItem) {
+                continue;
+            }
+            const physicalIndex = dataItems[rgRow.itemIndex];
+            if (isGrouping(dataItem)) {
+                const groupName = dataItem[PSEUDO_GROUP_ITEM];
+                if (!groupName) {
+                    this.groupRows = [];
+                    this.dataRows = [];
+                    return;
+                }
+                groupRowsData.push(Object.assign(Object.assign({}, rgRow), { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer, hasExpand: true, columnItems: [firstCol], providers: this.providers, getGroupSelection: this.getGroupSelection, paddingDepth: this.paddingDepth }));
+            }
+            else {
+                const isSelected = physicalIndex !== undefined && selectedRowIndices.has(physicalIndex);
+                dataRowsData.push(Object.assign(Object.assign({}, rgRow), { selected: isSelected }));
+            }
+        }
+        this.groupRows = groupRowsData;
+        this.dataRows = dataRowsData;
+    }
+    render() {
+        // 只有当既没有分组行也没有数据行时才不渲染
+        if (!this.groupRows.length && !this.dataRows.length) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "grouping-rows-container" }, this.groupRows.map(rowProps => (h(GroupingRowRenderer, Object.assign({}, rowProps, { key: `group-${rowProps.itemIndex}` })))), this.dataRows.map(row => {
+            const attrs = {
+                class: 'rgRow dataRow',
+                key: `data-${row.itemIndex}`,
+                style: {
+                    height: `${row.size}px`,
+                    transform: `translateY(${row.start}px)`,
+                },
+                'data-rgRow': row.itemIndex,
+            };
+            if (row.selected) {
+                attrs.selected = '';
+            }
+            return h("div", Object.assign({}, attrs));
+        }))));
+    }
+    static get is() { return "revogr-grouping-overlay"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-grouping-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-grouping-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataStore": {
+                "type": "unknown",
+                "attribute": "data-store",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DSourceState<DataType, DimensionRows>>",
+                    "resolved": "ObservableMap<DSourceState<DataType, DimensionRows>>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DSourceState": {
+                            "location": "import",
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
+                        },
+                        "DataType": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DataType"
+                        },
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "colData": {
+                "type": "unknown",
+                "attribute": "col-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DSourceState<ColumnRegular, DimensionCols>>",
+                    "resolved": "ObservableMap<DSourceState<ColumnRegular, DimensionCols>>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DSourceState": {
+                            "location": "import",
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
+                        },
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnRegular"
+                        },
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "viewportRow": {
+                "type": "unknown",
+                "attribute": "viewport-row",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<ViewportState>",
+                    "resolved": "ObservableMap<ViewportState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "ViewportState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewportState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "viewportCol": {
+                "type": "unknown",
+                "attribute": "viewport-col",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<ViewportState>",
+                    "resolved": "ObservableMap<ViewportState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "ViewportState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewportState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionRow": {
+                "type": "unknown",
+                "attribute": "dimension-row",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionRows",
+                    "resolved": "\"rgRow\" | \"rowPinEnd\" | \"rowPinStart\"",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'rgRow'"
+            },
+            "colType": {
+                "type": "string",
+                "attribute": "col-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionCols",
+                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\"",
+                    "references": {
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'rgCol'"
+            },
+            "additionalData": {
+                "type": "any",
+                "attribute": "additional-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rowClass": {
+                "type": "string",
+                "attribute": "row-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "getGroupSelection": {
+                "type": "unknown",
+                "attribute": "get-group-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetGroupSelectionFunc",
+                    "resolved": "((groupModel: DataType, childIndices: number[]) => GroupSelectionInfo) | undefined",
+                    "references": {
+                        "GetGroupSelectionFunc": {
+                            "location": "import",
+                            "path": "../../plugins/groupingRow/grouping.row.types",
+                            "id": "src/plugins/groupingRow/grouping.row.types.ts::GetGroupSelectionFunc"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u83B7\u53D6\u5206\u7EC4\u9009\u4E2D\u4FE1\u606F\u7684\u51FD\u6570"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "paddingDepth": {
+                "type": "number",
+                "attribute": "padding-depth",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding depth for grouping rows (in pixels per depth level)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "groupRows": {},
+            "dataRows": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u5237\u65B0\u5206\u7EC4\u884C\u663E\u793A\uFF0C\u7528\u4E8E\u9009\u4E2D\u72B6\u6001\u53D8\u5316\u540E\u66F4\u65B0\u9009\u4E2D\u6570\u91CF",
+                    "tags": []
+                }
+            },
+            "updateGroupRowsImmediate": {
+                "complexType": {
+                    "signature": "(forceUpdate?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "forceUpdate",
+                            "type": "boolean",
+                            "docs": "\u662F\u5426\u5F3A\u5236\u66F4\u65B0\uFF0C\u5FFD\u7565\u53D8\u5316\u68C0\u6D4B"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RowGroupingProps": {
+                            "location": "import",
+                            "path": "../../plugins/groupingRow/grouping.row.types",
+                            "id": "src/plugins/groupingRow/grouping.row.types.ts::RowGroupingProps"
+                        },
+                        "DataRowInfo": {
+                            "location": "global",
+                            "id": "global::DataRowInfo"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u7ACB\u5373\u66F4\u65B0\u5206\u7EC4\u884C\uFF08\u5E26\u53D8\u5316\u68C0\u6D4B\uFF09",
+                    "tags": [{
+                            "name": "param",
+                            "text": "forceUpdate \u662F\u5426\u5F3A\u5236\u66F4\u65B0\uFF0C\u5FFD\u7565\u53D8\u5316\u68C0\u6D4B"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "dataStore",
+                "methodName": "onDataChange"
+            }, {
+                "propName": "viewportRow",
+                "methodName": "onDataChange"
+            }, {
+                "propName": "viewportCol",
+                "methodName": "onDataChange"
+            }];
+    }
+}
+//# sourceMappingURL=revogr-grouping-overlay.js.map