@visactor/vtable 0.9.1-alpha.4 → 0.9.1-alpha.5

package/es/scenegraph/scenegraph.d.ts

@@ -1,11 +1,16 @@
 import type { IStage, IRect } from '@visactor/vrender';
-import type { CellType, ColumnIconOption, SortOrder } from '../ts-types';
+import { type CellAddress, type CellType, type ColumnIconOption, type SortOrder, IconFuncTypeEnum } from '../ts-types';
 import { Group } from './graphic/group';
 import type { Icon } from './graphic/icon';
 import { TableComponent } from './component/table-component';
 import { SceneProxy } from './group-creater/progress/proxy';
 import type { BaseTableAPI } from '../ts-types/base-table';
-export declare const emptyGroup: Group;
+export type MergeMap = Map<string, {
+    x: number;
+    y: number;
+    cellWidth: number;
+    cellHeight: number;
+}>;
 export declare class Scenegraph {
     proxy: SceneProxy;
     tableGroup: Group;
@@ -32,6 +37,7 @@ export declare class Scenegraph {
     frozenColCount: number;
     frozenRowCount: number;
     clear: boolean;
+    mergeMap: MergeMap;
     constructor(table: BaseTableAPI);
     get width(): number;
     get height(): number;
@@ -40,6 +46,7 @@ export declare class Scenegraph {
     get bodyRowStart(): number;
     get bodyRowEnd(): number;
     initSceneGraph(): void;
+    clearCells(): void;
     createComponent(): void;
     createSceneGraph(): void;
     createHeaderSceneGraph(): void;
@@ -73,7 +80,10 @@ export declare class Scenegraph {
     setIconHoverStyle(icon: Icon, col: number, row: number, cellGroup: Group): void;
     setIconNormalStyle(icon: Icon, col: number, row: number): void;
     updateColWidth(col: number, detaX: number): void;
+    updateChartSize(col: number): void;
     updateAutoColWidth(col: number): void;
+    recalculateColWidths(): void;
+    resize(): void;
     updateTableSize(): void;
     updateRowHeight(row: number, detaY: number): void;
     updateContainerWidth(col: number, detaX: number): void;
@@ -90,7 +100,6 @@ export declare class Scenegraph {
     updateCellLayoutWidthCertainWidth(columnGroup: Group, detaRow: number, col: number): boolean;
     updateHeaderPosition(colSource: number, rowSource: number, colTarget: number, rowTarget: number): void;
     updateContainer(): void;
-    clearCells(): void;
     updateCellContentWhileResize(col: number, row: number): void;
     createFrameBorder(): void;
     getResizeColAt(abstractX: number, abstractY: number, cellGroup?: Group, offset?: number): {
@@ -108,4 +117,7 @@ export declare class Scenegraph {
     updateDrill(visible: boolean, x: number, y: number, drillDown: boolean, drillUp: boolean): void;
     updateCellContent(col: number, row: number): void;
     setPixelRatio(pixelRatio: number): void;
+    updateHierarchyIcon(col: number, row: number): void;
+    updateRow(removeCells: CellAddress[], addCells: CellAddress[]): void;
+    findAndUpdateIcon(group: Group, funcTypeArr: IconFuncTypeEnum[], iconConfig: ColumnIconOption): void;
 }

package/es/scenegraph/scenegraph.js

@@ -1,5 +1,9 @@
 import { createStage, createRect, IContainPointMode, container } from "@visactor/vrender";
 
+import { IconFuncTypeEnum } from "../ts-types";
+
+import { isArray, isString } from "@visactor/vutils";
+
 import { Group } from "./graphic/group";
 
 import { createBodyColGroup, createColHeaderColGroup, createCornerHeaderColGroup, createRowHeaderColGroup } from "./group-creater/column";
@@ -16,7 +20,7 @@ import { updateRowHeight } from "./layout/update-height";
 
 import { updateImageCellContentWhileResize } from "./group-creater/cell-type/image-cell";
 
-import { getPadding } from "./utils/padding";
+import { getQuadProps } from "./utils/padding";
 
 import { createFrameBorder, updateFrameBorder, updateFrameBorderSize } from "./style/frame-border";
 
@@ -44,17 +48,20 @@ import { moveSelectingRangeComponentsToSelectedRangeComponents } from "./select/
 
 import { deleteAllSelectBorder, deleteLastSelectedRangeComponents } from "./select/delete-select-border";
 
+import { updateRow } from "./layout/update-row";
+
 import { handleTextStick } from "./stick-text";
 
-container.load(splitModule);
+import { emptyGroup } from "./utils/empty-group";
 
-export const emptyGroup = new Group({});
+import { updateChartSize } from "./refresh-node/update-chart";
 
-emptyGroup.role = "empty";
+container.load(splitModule);
 
 export class Scenegraph {
     constructor(table) {
-        this.table = table, this.hasFrozen = !1, this.clear = !0, this.stage = createStage({
+        this.table = table, this.hasFrozen = !1, this.clear = !0, this.mergeMap = new Map, 
+        this.stage = createStage({
             canvas: table.canvas,
             width: table.canvas.width,
             height: table.canvas.height,
@@ -154,6 +161,37 @@ export class Scenegraph {
         this.tableGroup.addChild(rowHeaderGroup), this.tableGroup.addChild(colHeaderGroup), 
         this.tableGroup.addChild(cornerHeaderGroup), this.tableGroup.addChild(componentGroup);
     }
+    clearCells() {
+        this.clear = !0, this.hasFrozen = !1, this.mergeMap.clear(), this.colHeaderGroup.clear(), 
+        this.rowHeaderGroup.clear(), this.cornerHeaderGroup.clear(), this.bodyGroup.clear(), 
+        this.colHeaderGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.rowHeaderGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.cornerHeaderGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.bodyGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.tableGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.tableGroup.border && (this.tableGroup.parent.removeChild(this.tableGroup.border), 
+        delete this.tableGroup.border);
+    }
     createComponent() {
         this.component = new TableComponent(this.table), this.component.addToGroup(this.componentGroup), 
         this.selectedRangeComponents = new Map, this.selectingRangeComponents = new Map;
@@ -161,8 +199,7 @@ export class Scenegraph {
     createSceneGraph() {
         this.clear = !1, computeColsWidth(this.table), this.frozenColCount = this.table.rowHeaderLevelCount, 
         this.frozenRowCount = this.table.columnHeaderLevelCount, this.proxy = new SceneProxy(this.table), 
-        this.createHeaderSceneGraph(), this.transpose || this.isPivot ? this.createBodySceneGraph() : this.createBodySceneGraphForFirstScreen(), 
-        handleTextStick(this.table);
+        this.createHeaderSceneGraph(), this.transpose || this.isPivot ? this.createBodySceneGraph() : this.createBodySceneGraphForFirstScreen();
     }
     createHeaderSceneGraph() {
         createCornerHeaderColGroup(this.cornerHeaderGroup, 0, 0, this.table), this.colHeaderGroup.setAttribute("x", this.cornerHeaderGroup.attribute.width), 
@@ -210,7 +247,7 @@ export class Scenegraph {
         return cell || emptyGroup;
     }
     highPerformanceGetCell(col, row) {
-        return this.isPivot || this.transpose || this.table.isHeader(col, row) ? this.getCell(col, row) : this.proxy.highPerformanceGetCell(col, row);
+        return this.isPivot || this.transpose || this.table.isHeader(col, row) ? this.getCell(col, row) : this.proxy.highPerformanceGetCell(col, row, 0, this.table.rowCount - 1);
     }
     getColGroup(col, isCornerOrColHeader = !1) {
         let element;
@@ -296,7 +333,7 @@ export class Scenegraph {
                 width: icon.backgroundWidth,
                 height: icon.backgroundHeight,
                 fill: icon.attribute.backgroundColor,
-                borderRadius: 5,
+                cornerRadius: 5,
                 visible: !0
             }) : (iconBack = createRect({
                 x: (null !== (_d = icon.attribute.x) && void 0 !== _d ? _d : 0) + (null !== (_e = icon.attribute.dx) && void 0 !== _e ? _e : 0) + (icon.AABBBounds.width() - icon.backgroundWidth) / 2,
@@ -304,7 +341,7 @@ export class Scenegraph {
                 width: icon.backgroundWidth,
                 height: icon.backgroundHeight,
                 fill: icon.attribute.backgroundColor,
-                borderRadius: 5,
+                cornerRadius: 5,
                 pickable: !1,
                 visible: !0
             }), iconBack.name = "icon-back"), icon.parent.insertBefore(iconBack, icon);
@@ -336,10 +373,21 @@ export class Scenegraph {
     updateColWidth(col, detaX) {
         updateColWidth(this, col, detaX), this.updateContainerWidth(col, detaX);
     }
+    updateChartSize(col) {
+        updateChartSize(this, col);
+    }
     updateAutoColWidth(col) {
         const oldWidth = this.table.getColWidth(col), newWidth = computeColWidth(col, 0, this.table.rowCount - 1, this.table, !0);
         newWidth !== oldWidth && this.updateColWidth(col, newWidth - oldWidth);
     }
+    recalculateColWidths() {
+        computeColsWidth(this.table, !0);
+    }
+    resize() {
+        this.recalculateColWidths(), this.table.internalProps.autoRowHeight && updateAutoRowHeight(this, !0), 
+        this.dealWidthMode(), this.dealFrozen(), this.updateTableSize(), this.updateBorderSizeAndPosition(), 
+        this.component.updateScrollBar(), this.updateNextFrame();
+    }
     updateTableSize() {
         var _a, _b;
         this.tableGroup.setAttributes({
@@ -393,7 +441,8 @@ export class Scenegraph {
     afterScenegraphCreated() {
         const {autoRowHeight: autoRowHeight} = this.table.internalProps;
         autoRowHeight && updateAutoRowHeight(this), this.dealWidthMode(), this.dealFrozen(), 
-        this.createFrameBorder(), this.component.updateScrollBar(), this.updateNextFrame();
+        this.createFrameBorder(), this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), 
+        handleTextStick(this.table), this.updateNextFrame();
     }
     dealWidthMode() {
         const table = this.table;
@@ -494,7 +543,7 @@ export class Scenegraph {
             row += detaRow;
             const mergeInfo = getCellMergeInfo(this.table, col, row);
             mergeInfo ? cellGroup = this.getCell(mergeInfo.start.col, mergeInfo.start.row) : cellGroup.setAttribute("width", width);
-            const headerStyle = this.table._getCellStyle(col, row), padding = getPadding(getProp("padding", headerStyle, col, row, this.table)), text = cellGroup.getChildByName("text");
+            const headerStyle = this.table._getCellStyle(col, row), padding = getQuadProps(getProp("padding", headerStyle, col, row, this.table)), text = cellGroup.getChildByName("text");
             let oldCellHeight = 0, newCellHeight = 0;
             if (text) oldCellHeight = text.AABBBounds.height() + (padding[0] + padding[2]), 
             text.setAttribute("maxLineWidth", width - (padding[1] + padding[3])), newCellHeight = text.AABBBounds.height() + (padding[0] + padding[2]); else {
@@ -535,36 +584,6 @@ export class Scenegraph {
         this.component.updateScrollBar(), this.table.stateManeger.setScrollLeft(oldHorizontalBarPos), 
         this.table.stateManeger.setScrollTop(oldVerticalBarPos), this.updateNextFrame();
     }
-    clearCells() {
-        this.clear = !0, this.hasFrozen = !1, this.colHeaderGroup.clear(), this.rowHeaderGroup.clear(), 
-        this.cornerHeaderGroup.clear(), this.bodyGroup.clear(), this.colHeaderGroup.setAttributes({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        }), this.rowHeaderGroup.setAttributes({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        }), this.cornerHeaderGroup.setAttributes({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        }), this.bodyGroup.setAttributes({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        }), this.tableGroup.setAttributes({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        }), this.tableGroup.border && (this.tableGroup.parent.removeChild(this.tableGroup.border), 
-        delete this.tableGroup.border);
-    }
     updateCellContentWhileResize(col, row) {
         const type = this.table.getBodyColumnType(col, row), cellGroup = this.getCell(col, row);
         "image" !== type && "video" !== type || updateImageCellContentWhileResize(cellGroup, col, row, this.table);
@@ -626,16 +645,16 @@ export class Scenegraph {
         const updateCol = Math.max(col, oldFrozenCol);
         this.colHeaderGroup.forEachChildrenSkipChild((colGroup => !(colGroup.col <= updateCol) || (colGroup.forEachChildren((cellGroup => {
             cellGroup.forEachChildren((icon => {
-                if ("pin" === icon.attribute.funcType) {
-                    const iconConfig = this.table.internalProps.headerHelper.getPinIcon(cellGroup.col, cellGroup.row);
+                if ("frozen" === icon.attribute.funcType) {
+                    const iconConfig = this.table.internalProps.headerHelper.getFrozenIcon(cellGroup.col, cellGroup.row);
                     return this.updateIcon(icon, iconConfig), !0;
                 }
                 return !1;
             }));
         })), !1))), this.cornerHeaderGroup.forEachChildrenSkipChild((colGroup => !(colGroup.col <= updateCol) || (colGroup.forEachChildren((cellGroup => {
             cellGroup.forEachChildren((icon => {
-                if ("pin" === icon.attribute.funcType) {
-                    const iconConfig = this.table.internalProps.headerHelper.getPinIcon(cellGroup.col, cellGroup.row);
+                if ("frozen" === icon.attribute.funcType) {
+                    const iconConfig = this.table.internalProps.headerHelper.getFrozenIcon(cellGroup.col, cellGroup.row);
                     return this.updateIcon(icon, iconConfig), !0;
                 }
                 return !1;
@@ -650,9 +669,9 @@ export class Scenegraph {
     getCellOverflowText(col, row) {
         const text = this.getCell(col, row).getChildByName("text", !0);
         if (text) {
-            const textAttributeStr = text.attribute.text.join("");
+            const textAttributeStr = isArray(text.attribute.text) ? text.attribute.text.join("") : text.attribute.text;
             let cacheStr = "";
-            if (text.cache.layoutData.lines.forEach((line => {
+            if (isString(text.cache.clipedText) ? cacheStr = text.cache.clipedText : text.cache.layoutData.lines.forEach((line => {
                 cacheStr += line.str;
             })), cacheStr !== textAttributeStr) return textAttributeStr;
         }
@@ -668,6 +687,23 @@ export class Scenegraph {
         this.stage.disableDirtyBounds(), this.stage.window.setDpr(pixelRatio), this.stage.render(), 
         this.stage.enableDirtyBounds();
     }
+    updateHierarchyIcon(col, row) {
+        const cellGroup = this.getCell(col, row);
+        let iconConfig;
+        iconConfig = this.table.isHeader(col, row) ? this.table.internalProps.headerHelper.getHierarchyIcon(cellGroup.col, cellGroup.row) : this.table.internalProps.bodyHelper.getHierarchyIcon(cellGroup.col, cellGroup.row), 
+        this.findAndUpdateIcon(cellGroup, [ IconFuncTypeEnum.collapse, IconFuncTypeEnum.expand ], iconConfig);
+    }
+    updateRow(removeCells, addCells) {
+        updateRow(removeCells, addCells, this.table), this.recalculateColWidths(), this.table.internalProps.autoRowHeight && updateAutoRowHeight(this, !0), 
+        this.table.stateManeger.checkFrozen(), this.updateNextFrame();
+    }
+    findAndUpdateIcon(group, funcTypeArr, iconConfig) {
+        group.forEachChildren((icon => {
+            if ("group" === icon.type) this.findAndUpdateIcon(icon, funcTypeArr, iconConfig); else if (-1 !== funcTypeArr.indexOf(icon.attribute.funcType)) return this.updateIcon(icon, iconConfig), 
+            !0;
+            return !1;
+        }));
+    }
 }
 
 function showIcon(scene, cellGroup, visibleTime) {