]*>(.*?)<\/td>/gs; // 匹配| 标签及其内容
const cellMatches: RegExpMatchArray[] = Array.from(rowContent.matchAll(cellRegex)); // 获取 | 标签中的内容
const rowValues = cellMatches.map(cellMatch => {
return (
@@ -513,11 +461,6 @@ export function bindContainerDomListener(eventManager: EventManager) {
table.eventManager.isDown = false;
table.eventManager.isDraging = false;
table.eventManager.inertiaScroll.endInertia();
- if (stateManager.isResizeCol()) {
- endResizeCol(table);
- } else if (stateManager.isResizeRow()) {
- endResizeRow(table);
- }
};
eventManager.globalEventListeners.push({
name: 'pointerup',
@@ -669,11 +612,14 @@ export function bindContainerDomListener(eventManager: EventManager) {
}
}
table.stateManager.updateInteractionState(InteractionState.grabing);
- const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
- const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
- if (isValid(targetCol) && isValid(targetRow)) {
- table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, true);
- }
+ table.stateManager.updateSelectPos(
+ table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX).col,
+ table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY).row,
+ false,
+ false,
+ false,
+ true
+ );
});
} else if (table.eventManager.inertiaScroll.isInertiaScrolling()) {
table.eventManager.inertiaScroll.endInertia();
diff --git a/packages/vtable/src/event/listener/scroll-bar.ts b/packages/vtable/src/event/listener/scroll-bar.ts
index c2f461035..92d6eec18 100644
--- a/packages/vtable/src/event/listener/scroll-bar.ts
+++ b/packages/vtable/src/event/listener/scroll-bar.ts
@@ -37,11 +37,6 @@ export function bindScrollBarListener(eventManager: EventManager) {
});
scenegraph.component.vScrollBar.addEventListener('pointerdown', (e: FederatedPointerEvent) => {
e.stopPropagation(); //防止冒泡到stage上 检测到挨着列间隔线判断成拖拽状态
- if ((scenegraph.table as any).hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
- scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
- event: e.nativeEvent
- });
- }
});
scenegraph.component.vScrollBar.addEventListener('scrollDown', (e: FederatedPointerEvent) => {
scenegraph.table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
@@ -80,11 +75,6 @@ export function bindScrollBarListener(eventManager: EventManager) {
});
scenegraph.component.hScrollBar.addEventListener('pointerdown', (e: FederatedPointerEvent) => {
e.stopPropagation(); //防止冒泡到stage上 检测到挨着列间隔线判断成拖拽状态
- if ((scenegraph.table as any).hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
- scenegraph.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
- event: e.nativeEvent
- });
- }
});
scenegraph.component.hScrollBar.addEventListener('scrollDown', (e: FederatedPointerEvent) => {
scenegraph.table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts
index b60b4023f..598bf428f 100644
--- a/packages/vtable/src/event/listener/table-group.ts
+++ b/packages/vtable/src/event/listener/table-group.ts
@@ -12,7 +12,7 @@ import type { SceneEvent } from '../util';
import { getCellEventArgsSet, regIndexReg } from '../util';
import { TABLE_EVENT_TYPE } from '../../core/TABLE_EVENT_TYPE';
import type { Group } from '../../scenegraph/graphic/group';
-import { isValid } from '@visactor/vutils';
+import { isValid, last } from '@visactor/vutils';
import { getIconAndPositionFromTarget } from '../../scenegraph/utils/icon';
import { cellInRanges } from '../../tools/helper';
import { Rect } from '../../tools/Rect';
@@ -40,10 +40,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
// if (stateManager.interactionState === InteractionState.scrolling) {
// return;
// }
- if (
- stateManager.interactionState === InteractionState.grabing &&
- !(table as ListTableAPI).editorManager?.editingEditor
- ) {
+ if (stateManager.interactionState === InteractionState.grabing) {
if (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) {
if (stateManager.isResizeCol()) {
/* do nothing */
@@ -56,11 +53,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
}
}
return;
- } else if (
- table.eventManager.isDraging &&
- stateManager.isSelecting() &&
- !(table as ListTableAPI).editorManager?.editingEditor
- ) {
+ } else if (table.eventManager.isDraging && stateManager.isSelecting()) {
eventManager.dealTableSelect(eventArgsSet, true);
}
// 更新列宽调整pointer
@@ -118,8 +111,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
}),
scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
event: e.nativeEvent,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
});
}
}
@@ -151,8 +143,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
funcType: (icon as any).attribute.funcType
}
: undefined,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
});
}
});
@@ -341,19 +332,11 @@ export function bindTableGroupListener(eventManager: EventManager) {
}
}
}
- const isCompleteEdit = (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
- if (isCompleteEdit === false) {
- // 如果没有正常退出编辑状态 则不执行下面的逻辑 如选择其他单元格的逻辑
- return;
- }
+ (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
stateManager.updateInteractionState(InteractionState.default);
eventManager.dealTableHover();
//点击到表格外部不需要取消选中状态
- if (table.options.select?.outsideClickDeselect) {
- const isHasSelected = !!stateManager.select.ranges?.length;
- eventManager.dealTableSelect();
- stateManager.endSelectCells(true, isHasSelected);
- }
+ // eventManager.dealTableSelect();
});
table.scenegraph.tableGroup.addEventListener('pointerdown', (e: FederatedPointerEvent) => {
@@ -392,15 +375,10 @@ export function bindTableGroupListener(eventManager: EventManager) {
// 点击在menu外，且不是下拉菜单的icon，移除menu
stateManager.hideMenu();
}
- const isCompleteEdit = (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
- if (isCompleteEdit === false) {
- // 如果没有正常退出编辑状态 则不执行下面的逻辑 如选择其他单元格的逻辑
- return;
- }
+ (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
+
const hitIcon = (eventArgsSet?.eventArgs?.target as any)?.role?.startsWith('icon')
? eventArgsSet.eventArgs.target
- : (e.target as any).role?.startsWith('icon')
- ? e.target
: undefined;
eventManager.downIcon = hitIcon;
if (!hitIcon || (hitIcon.attribute as IIconGraphicAttribute).interactive === false) {
@@ -493,8 +471,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
col: eventArgsSet.eventArgs.col,
row: eventArgsSet.eventArgs.row,
event: e.nativeEvent,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
});
}
}
@@ -543,8 +520,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
col: (eventArgsSet.eventArgs.target as unknown as Group).col,
row: (eventArgsSet.eventArgs.target as unknown as Group).row,
scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
};
cellsEvent.cells = table.getSelectedCellInfos();
@@ -564,8 +540,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
col: eventArgsSet.eventArgs.col,
row: eventArgsSet.eventArgs.row,
event: e.nativeEvent,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
});
}
}
@@ -606,8 +581,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
funcType: (icon as any).attribute.funcType
}
: undefined,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
};
if (cellInRanges(table.stateManager.select.ranges, col, row)) {
// 用户右键点击已经选中的区域
@@ -644,9 +618,8 @@ export function bindTableGroupListener(eventManager: EventManager) {
const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
if (eventManager.touchSetTimeout) {
clearTimeout(eventManager.touchSetTimeout);
- const isHasSelected = !!stateManager.select.ranges?.length;
eventManager.dealTableSelect(eventArgsSet);
- stateManager.endSelectCells(true, isHasSelected);
+ stateManager.endSelectCells();
eventManager.touchSetTimeout = undefined;
}
}
@@ -676,8 +649,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
funcType: (icon as any).attribute.funcType
}
: undefined,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
};
table.fireListeners(TABLE_EVENT_TYPE.CLICK_CELL, cellsEvent);
@@ -689,21 +661,9 @@ export function bindTableGroupListener(eventManager: EventManager) {
if ((eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
stateManager.hideMenu();
}
- const isCompleteEdit = (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
- if (isCompleteEdit === false) {
- // 如果没有正常退出编辑状态 则不执行下面的逻辑 如选择其他单元格的逻辑
- return;
- }
-
- const hitIcon = (e.target as any).role?.startsWith('icon') ? e.target : undefined;
- eventManager.downIcon = hitIcon;
+ (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
// 处理列宽调整 这里和tableGroup.addEventListener('pointerdown' 逻辑一样
- if (
- !hitIcon &&
- !eventManager.checkCellFillhandle(eventArgsSet) &&
- !stateManager.columnResize.resizing &&
- eventManager.checkColumnResize(eventArgsSet, true)
- ) {
+ if (!eventManager.checkCellFillhandle(eventArgsSet) && eventManager.checkColumnResize(eventArgsSet, true)) {
// eventManager.startColumnResize(e);
// eventManager._resizing = true;
table.scenegraph.updateChartState(null);
@@ -753,13 +713,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
) {
stateManager.updateInteractionState(InteractionState.default);
eventManager.dealTableHover();
- const isHasSelected = !!stateManager.select.ranges?.length;
- // 点击空白区域取消选中
- if (table.options.select?.blankAreaClickDeselect ?? true) {
- eventManager.dealTableSelect();
- }
- stateManager.endSelectCells(true, isHasSelected);
-
+ eventManager.dealTableSelect();
stateManager.updateCursor();
table.scenegraph.updateChartState(null);
} else if (table.eventManager.isDraging && stateManager.isSelecting()) {
@@ -823,7 +777,6 @@ export function bindTableGroupListener(eventManager: EventManager) {
...cellInfo,
event: e.nativeEvent,
target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet?.eventArgs?.mergeInfo,
checked: (e.detail as unknown as { checked: boolean }).checked
};
@@ -936,7 +889,6 @@ export function bindTableGroupListener(eventManager: EventManager) {
...cellInfo,
event: e.nativeEvent,
target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet?.eventArgs?.mergeInfo,
radioIndexInCell
};
table.fireListeners(TABLE_EVENT_TYPE.RADIO_STATE_CHANGE, cellsEvent);
@@ -957,7 +909,7 @@ export function bindGesture(eventManager: EventManager) {
dblclickHandler(e, table);
});
}
-export function endResizeCol(table: BaseTableAPI) {
+function endResizeCol(table: BaseTableAPI) {
table.stateManager.endResizeCol();
// textStick 依赖了这个事件 所以一定要触发RESIZE_COLUMN_END
// if ((table as any).hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
@@ -974,7 +926,7 @@ export function endResizeCol(table: BaseTableAPI) {
// }
}
-export function endResizeRow(table: BaseTableAPI) {
+function endResizeRow(table: BaseTableAPI) {
table.stateManager.endResizeRow();
table.fireListeners(TABLE_EVENT_TYPE.RESIZE_ROW_END, {
@@ -1022,8 +974,7 @@ function dblclickHandler(e: FederatedPointerEvent, table: BaseTableAPI) {
funcType: (icon as any).attribute.funcType
}
: undefined,
- target: eventArgsSet?.eventArgs?.target,
- mergeCellInfo: eventArgsSet?.eventArgs?.mergeInfo
+ target: eventArgsSet?.eventArgs?.target
};
table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_CELL, cellsEvent);
}
diff --git a/packages/vtable/src/event/media-click.ts b/packages/vtable/src/event/media-click.ts
index 4a5c498eb..334796e5b 100644
--- a/packages/vtable/src/event/media-click.ts
+++ b/packages/vtable/src/event/media-click.ts
@@ -12,11 +12,6 @@ export function bindMediaClick(table: BaseTableAPI): void {
table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e: MousePointerCellEvent) => {
//如果目前是在某个icon上，如收起展开按钮 则不进行其他点击逻辑
const { col, row } = e;
-
- if (e.target.type === 'image' && (e.target as any).role && (e.target as any).role.startsWith('icon')) {
- // click icon
- return;
- }
let cellType;
if (table.internalProps.layoutMap.isHeader(col, row)) {
cellType = table.isPivotTable()
diff --git a/packages/vtable/src/event/sparkline-event.ts b/packages/vtable/src/event/sparkline-event.ts
index a6f849e44..2e4f81d41 100644
--- a/packages/vtable/src/event/sparkline-event.ts
+++ b/packages/vtable/src/event/sparkline-event.ts
@@ -5,10 +5,6 @@ import type { MousePointerCellEvent } from '../ts-types';
import type { BaseTableAPI } from '../ts-types/base-table';
export function bindSparklineHoverEvent(table: BaseTableAPI) {
- if (table.eventManager.bindSparklineHoverEvent) {
- return;
- }
-
// 判断是否有sparkline 类型
let hasSparkLine = false;
if (table.isPivotTable()) {
@@ -27,8 +23,6 @@ export function bindSparklineHoverEvent(table: BaseTableAPI) {
return;
}
- table.eventManager.bindSparklineHoverEvent = true;
-
table.on(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, (e: MousePointerCellEvent) => {
const { col, row, x, y } = e;
const type = table.getBodyColumnType(col, row);
diff --git a/packages/vtable/src/event/util.ts b/packages/vtable/src/event/util.ts
index 1763beaee..fe8db38f1 100644
--- a/packages/vtable/src/event/util.ts
+++ b/packages/vtable/src/event/util.ts
@@ -1,7 +1,5 @@
import type { FederatedPointerEvent, IEventTarget } from '@src/vrender';
import type { Group } from '../scenegraph/graphic/group';
-import type { MergeCellInfo } from '../ts-types';
-import { isValid } from '@visactor/vutils';
export interface SceneEvent {
abstractPos: {
@@ -13,7 +11,6 @@ export interface SceneEvent {
row: number;
event: FederatedPointerEvent;
targetCell: Group;
- mergeInfo?: MergeCellInfo;
target: IEventTarget;
};
}
@@ -37,14 +34,13 @@ export function getCellEventArgsSet(e: FederatedPointerEvent): SceneEvent {
row: targetCell.row,
event: e,
targetCell,
- mergeInfo: getMergeCellInfo(targetCell),
target: e.target
};
}
return tableEvent;
}
-export function getTargetCell(target: any) {
+function getTargetCell(target: any) {
while (target && target.parent) {
if (target.role === 'cell') {
return target;
@@ -54,21 +50,4 @@ export function getTargetCell(target: any) {
return null;
}
-function getMergeCellInfo(cellGroup: Group): MergeCellInfo | undefined {
- if (
- isValid(cellGroup.mergeStartCol) &&
- isValid(cellGroup.mergeStartRow) &&
- isValid(cellGroup.mergeEndCol) &&
- isValid(cellGroup.mergeEndRow)
- ) {
- return {
- colStart: cellGroup.mergeStartCol,
- colEnd: cellGroup.mergeEndCol,
- rowStart: cellGroup.mergeStartRow,
- rowEnd: cellGroup.mergeEndRow
- };
- }
- return undefined;
-}
-
export const regIndexReg = /radio-\d+-\d+-(\d+)/;
diff --git a/packages/vtable/src/header-helper/header-helper.ts b/packages/vtable/src/header-helper/header-helper.ts
index ffb15e64c..4f266b786 100644
--- a/packages/vtable/src/header-helper/header-helper.ts
+++ b/packages/vtable/src/header-helper/header-helper.ts
@@ -1,12 +1,4 @@
-import type {
- ColumnIconOption,
- ColumnsDefine,
- ListTableAPI,
- PivotTableAPI,
- RectProps,
- SortOrder,
- SvgIcon
-} from '../ts-types';
+import type { ColumnIconOption, ListTableAPI, PivotTableAPI, RectProps, SortOrder, SvgIcon } from '../ts-types';
import { HierarchyState, IconFuncTypeEnum, IconPosition, InternalIconName } from '../ts-types';
import * as registerIcons from '../icons';
import { cellInRange } from '../tools/helper';
@@ -59,25 +51,11 @@ export class HeaderHelper {
const icons: ColumnIconOption[] = [];
if (this._table.isPivotTable()) {
// 透视表显示排序按钮
- const { showSort, sort } = this._table.internalProps.layoutMap.getHeader(col, row) as HeaderData;
+ const { showSort } = this._table.internalProps.layoutMap.getHeader(col, row) as HeaderData;
if (showSort) {
- let order = (this._table as PivotTableAPI).getPivotSortState(col, row) as string;
- if (order) {
- order = order.toUpperCase();
- }
- const sortIcon = order === 'ASC' ? this.downIcon : order === 'DESC' ? this.upIcon : this.normalIcon;
+ const order = (this._table as PivotTableAPI).getPivotSortState(col, row);
+ const sortIcon = order === 'asc' ? this.downIcon : order === 'desc' ? this.upIcon : this.normalIcon;
- if (sortIcon) {
- icons.push(sortIcon);
- }
- } else if (sort) {
- // 处理配置了sort的情况
- const sortIcon = this.getSortIconForPivotTable(
- (this._table as PivotTableAPI).getPivotSortState(col, row),
- this._table,
- col,
- row
- );
if (sortIcon) {
icons.push(sortIcon);
}
@@ -216,26 +194,6 @@ export class HeaderHelper {
return icon;
}
- getSortIconForPivotTable(
- order: SortOrder | undefined,
- _table: BaseTableAPI,
- col: number,
- row: number
- ): ColumnIconOption | null {
- const headerC = _table.getHeaderDefine(col, row) as any;
- if (
- !headerC ||
- headerC.showSort === false ||
- (!isValid(headerC.showSort) && !headerC.sort) ||
- (headerC.columns && headerC.columns.length > 0)
- ) {
- return null;
- }
- const icon = order === 'ASC' ? this.downIcon : order === 'DESC' ? this.upIcon : this.normalIcon;
- // const icon = order === 'ASC' ? this.downIcon : this.upIcon;
- return icon;
- }
-
private getDropDownStateIcons(_table: BaseTableAPI, col: number, row: number): ColumnIconOption[] {
const headerC = _table.getHeaderDefine(col, row) as any;
const headerL = _table._getHeaderLayoutMap(col, row);
@@ -427,18 +385,4 @@ export class HeaderHelper {
return CheckboxStyle;
}
}
-
- setTableColumnsEditor() {
- const setEditor = (colDefines: ColumnsDefine, setColumns: ColumnsDefine) => {
- colDefines?.forEach((colDefine, index) => {
- if (colDefine.editor) {
- setColumns[index].editor = colDefine.editor;
- }
- if (colDefine.columns) {
- setEditor(colDefine.columns, setColumns[index].columns);
- }
- });
- };
- setEditor((this._table as ListTable).options.columns, (this._table as ListTable).internalProps.columns);
- }
}
diff --git a/packages/vtable/src/header-helper/style/Style.ts b/packages/vtable/src/header-helper/style/Style.ts
index 52cef9f31..1c49d268b 100644
--- a/packages/vtable/src/header-helper/style/Style.ts
+++ b/packages/vtable/src/header-helper/style/Style.ts
@@ -27,7 +27,6 @@ const EVENT_TYPE = {
};
export class Style extends EventTarget implements ColumnStyle {
private _color?: ColorPropertyDefine;
- private _strokeColor?: ColorPropertyDefine;
private _fontSize?: FontSizePropertyDefine;
private _fontFamily?: FontFamilyPropertyDefine;
private _fontWeight?: FontWeightPropertyDefine;
@@ -73,7 +72,6 @@ export class Style extends EventTarget implements ColumnStyle {
constructor(style: IStyleOption = {}, headerStyle: IStyleOption = {}) {
super();
this._color = style.color ?? headerStyle?.color;
- this._strokeColor = style?.strokeColor ?? headerStyle?.strokeColor;
// icon为文字前后可添加的图标
// this._icon = style.icon;
this._fontSize = style.fontSize ?? headerStyle?.fontSize;
@@ -123,13 +121,6 @@ export class Style extends EventTarget implements ColumnStyle {
this._color = color;
//this.doChangeStyle();
}
- get strokeColor(): ColorPropertyDefine | undefined {
- return this._strokeColor;
- }
- set strokeColor(strokeColor: ColorPropertyDefine | undefined) {
- this._strokeColor = strokeColor;
- // this.doChangeStyle();
- }
get fontSize(): FontSizePropertyDefine | undefined {
return this._fontSize;
}
diff --git a/packages/vtable/src/index.ts b/packages/vtable/src/index.ts
index 2928eca9e..5bf04dd23 100644
--- a/packages/vtable/src/index.ts
+++ b/packages/vtable/src/index.ts
@@ -30,11 +30,8 @@ import type {
TextAlignType,
TextBaselineType
} from './ts-types';
-import { ListTableAll as ListTable } from './ListTable-all';
-import { ListTableSimple } from './ListTable-simple';
-// import { PivotTable } from './PivotTable';
-import { PivotTableAll as PivotTable } from './PivotTable-all';
-import { PivotTableSimple } from './PivotTable-simple';
+import { ListTable } from './ListTable';
+import { PivotTable } from './PivotTable';
import { PivotChart } from './PivotChart';
import type { MousePointerCellEvent } from './ts-types/events';
import * as CustomLayout from './render/layout';
@@ -48,10 +45,6 @@ import { restoreMeasureText, setCustomAlphabetCharSet } from './scenegraph/utils
export { getDataCellPath } from './tools/get-data-path';
export * from './render/jsx';
-export { getTargetCell } from './event/util';
-
-// export * as VRender from './vrender';
-import * as VRender from './vrender';
export const version = __VERSION__;
/**
@@ -65,10 +58,8 @@ export {
TYPES,
core,
ListTable,
- ListTableSimple,
ListTableConstructorOptions,
PivotTable,
- PivotTableSimple,
PivotTableConstructorOptions,
PivotChartConstructorOptions,
PivotChart,
@@ -104,8 +95,7 @@ export {
renderChart,
graphicUtil,
setCustomAlphabetCharSet,
- restoreMeasureText,
- VRender
+ restoreMeasureText
};
/** @private */
@@ -121,6 +111,3 @@ function clearGlobal() {
// columns.type.clearGlobal();
}
TYPES.AggregationType;
-
-export * from './components';
-export * from './scenegraph/group-creater/cell-type';
diff --git a/packages/vtable/src/layout/chart-helper/get-axis-config.ts b/packages/vtable/src/layout/chart-helper/get-axis-config.ts
index d3d5439c4..20130f297 100644
--- a/packages/vtable/src/layout/chart-helper/get-axis-config.ts
+++ b/packages/vtable/src/layout/chart-helper/get-axis-config.ts
@@ -2,12 +2,10 @@ import { isArray, isNumber, isValid, merge } from '@visactor/vutils';
import type { PivotHeaderLayoutMap } from '../pivot-header-layout';
import type { ITableAxisOption } from '../../ts-types/component/axis';
import type { PivotChart } from '../../PivotChart';
+import { getAxisDomainRangeAndLabels } from './get-axis-domain';
import type { CollectedValue } from '../../ts-types';
import { getNewRangeToAlign } from './zero-align';
-import { Factory } from '../../core/factory';
-import type { GetAxisDomainRangeAndLabels } from './get-axis-domain';
-export type GetAxisConfigInPivotChart = (col: number, row: number, layout: PivotHeaderLayoutMap) => any;
export function getAxisConfigInPivotChart(col: number, row: number, layout: PivotHeaderLayoutMap): any {
if (!layout._table.isPivotChart()) {
return undefined;
@@ -174,13 +172,12 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
// 左侧维度轴
return merge(
{
- domain: chartType === 'scatter' ? undefined : Array.from(domain),
- // domain:
- // chartType === 'scatter'
- // ? undefined
- // : spec?.series?.length >= 1 //chartType === 'common' 原来这样判断的
- // ? Array.from(domain)
- // : Array.from(domain).reverse(),
+ domain:
+ chartType === 'scatter'
+ ? undefined
+ : spec?.series?.length >= 1 //chartType === 'common' 原来这样判断的
+ ? Array.from(domain)
+ : Array.from(domain).reverse(),
range: chartType === 'scatter' ? domain : undefined,
title: {
autoRotate: true
@@ -190,13 +187,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
{
orient: 'left',
type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
- __vtableChartTheme: theme,
- // 默认左侧维度轴对应的图表direction 为 horizontal
- // 散点图特殊处理
- inverse: transformInverse(
- axisOption,
- (spec?.direction ?? (chartType === 'scatter' ? 'vertical' : 'horizontal')) === Direction.horizontal
- )
+ __vtableChartTheme: theme
}
);
}
@@ -424,7 +415,7 @@ export function getAxisOption(col: number, row: number, orient: string, layout:
};
}
-function checkZeroAlign(spec: any, orient: string, layout: PivotHeaderLayoutMap) {
+export function checkZeroAlign(spec: any, orient: string, layout: PivotHeaderLayoutMap) {
// check condition:
// 1. two axes and one set sync
// 2. axisId in sync is another
@@ -560,7 +551,6 @@ function getRange(
range.min = range.min < 0 ? -1 : 0;
range.max = range.max > 0 ? 1 : 0;
}
- const getAxisDomainRangeAndLabels = Factory.getFunction('getAxisDomainRangeAndLabels') as GetAxisDomainRangeAndLabels;
const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(
range.min,
range.max,
@@ -662,25 +652,3 @@ export function isLeftOrRightAxis(col: number, row: number, layout: PivotHeaderL
}
return false;
}
-
-const enum Direction {
- vertical = 'vertical',
- horizontal = 'horizontal'
-}
-
-// align with vchart (packages/vchart/src/component/axis/cartesian/util/common.ts)
-function transformInverse(spec: any, isHorizontal: boolean) {
- // 这里处理下 direction === 'horizontal' 下的 Y 轴
- // 因为 Y 轴绘制的时候默认是从下至上绘制的，但是在 direction === 'horizontal' 场景下，图表应该是按照从上至下阅读的
- // 所以这里在这种场景下坐标轴会默认 inverse 已达到效果
- let inverse = spec?.inverse;
- if (isHorizontal && !isXAxis(spec?.orient)) {
- inverse = isValid(spec?.inverse) ? !spec?.inverse : true;
- }
- return inverse;
-}
-
-type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z';
-function isXAxis(orient: IOrientType) {
- return orient === 'bottom' || orient === 'top';
-}
diff --git a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts
index 2e5e6cf23..0dbe96002 100644
--- a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts
+++ b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts
@@ -89,5 +89,3 @@ export function getAxisDomainRangeAndLabels(
ticks: scaleTicks
};
}
-
-export type GetAxisDomainRangeAndLabels = typeof getAxisDomainRangeAndLabels;
diff --git a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts
index 91c012394..67c2801b0 100644
--- a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts
+++ b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts
@@ -2,12 +2,10 @@ import { cloneDeep, isArray, isNumber, merge } from '@visactor/vutils';
import type { PivotHeaderLayoutMap } from '../pivot-header-layout';
import type { SimpleHeaderLayoutMap } from '../simple-header-layout';
import { getAxisOption, getAxisRange } from './get-axis-config';
+import { getAxisDomainRangeAndLabels } from './get-axis-domain';
import { getNewRangeToAlign } from './zero-align';
-import type { IChartIndicator, IIndicator } from '../../ts-types';
-import { cloneDeepSpec } from '@visactor/vutils-extension';
-import { Factory } from '../../core/factory';
-import type { GetAxisDomainRangeAndLabels } from './get-axis-domain';
-import { DEFAULT_TEXT_FONT_SIZE } from '../../components/axis/get-axis-attributes';
+import type { IChartIndicator } from '../../ts-types';
+import { cloneDeepSpec } from '@vutils-extension';
const NO_AXISID_FRO_VTABLE = 'NO_AXISID_FRO_VTABLE';
@@ -55,11 +53,11 @@ export function isShareChartSpec(col: number, row: number, layout: PivotHeaderLa
return true;
}
/** 检查是否有直角坐标系的图表 */
-export function checkHasCartesianChart(indicatorsDefine: (IIndicator | IChartIndicator | string)[]) {
+export function checkHasCartesianChart(layout: PivotHeaderLayoutMap) {
let isHasCartesianChart = false;
- for (let i = 0; i < indicatorsDefine.length; i++) {
+ for (let i = 0; i < layout.indicatorsDefine.length; i++) {
//columnObjects数量和指标数量一样 并不是每个列都有 所有会快一些
- const columnObj = indicatorsDefine[i] as IChartIndicator;
+ const columnObj = layout.indicatorsDefine[i] as IChartIndicator;
if (columnObj.chartSpec) {
if (
columnObj.chartSpec.type !== 'wordCloud' &&
@@ -213,15 +211,14 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout
axes.push(
merge(
{
- range,
- label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
+ range
},
axisOption,
{
type: axisOption?.type || 'linear',
orient: index === 0 ? 'bottom' : 'top',
// visible: true,
- label: { visible: false, flush: true },
+ label: { visible: false },
// label: { flush: true },
title: { visible: false },
domainLine: { visible: false },
@@ -249,8 +246,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout
merge(
{
domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
- range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
- label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
+ range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined
},
axisOption,
{
@@ -312,15 +308,14 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout
axes.push(
merge(
{
- range,
- label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
+ range
},
axisOption,
{
type: axisOption?.type || 'linear',
orient: index === 0 ? 'left' : 'right',
// visible: true,
- label: { visible: false, flush: true },
+ label: { visible: false },
// label: { flush: true },
title: { visible: false },
domainLine: { visible: false },
@@ -350,8 +345,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout
merge(
{
domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
- range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
- label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
+ range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined
},
axisOption,
{
@@ -430,9 +424,6 @@ function getRange(
range.max = Math.max(range.max, 0);
}
if (axisOption?.nice) {
- const getAxisDomainRangeAndLabels = Factory.getFunction(
- 'getAxisDomainRangeAndLabels'
- ) as GetAxisDomainRangeAndLabels;
const { range: axisRange } = getAxisDomainRangeAndLabels(
range.min,
range.max,
diff --git a/packages/vtable/src/layout/layout-helper.ts b/packages/vtable/src/layout/layout-helper.ts
index 4a655d3a8..63a1b15ec 100644
--- a/packages/vtable/src/layout/layout-helper.ts
+++ b/packages/vtable/src/layout/layout-helper.ts
@@ -1,23 +1,6 @@
-import { isArray, isString } from '@visactor/vutils';
-import type { PivotTable } from '../PivotTable';
-import { AggregationType } from '../ts-types';
-import type { BaseTableAPI } from '../ts-types/base-table';
-import type {
- Aggregation,
- IHeaderTreeDefine,
- IIndicator,
- ListTableConstructorOptions,
- PivotTableConstructorOptions
-} from '../ts-types';
+import type { Aggregation } from '../ts-types';
import type { ColumnData } from '../ts-types/list-table/layout-map/api';
-import type { IChartColumnIndicator } from '../ts-types/pivot-table/indicator/chart-indicator';
import type { SimpleHeaderLayoutMap } from './simple-header-layout';
-import type { IImageDimension } from '../ts-types/pivot-table/dimension/image-dimension';
-import type { IImageColumnIndicator, IImageHeaderIndicator } from '../ts-types/pivot-table/indicator/image-indicator';
-import type { IImageColumnBodyDefine, IImageHeaderDefine } from '../ts-types/list-table/define/image-define';
-import type { ITreeLayoutHeadNode } from './tree-helper';
-import { DimensionTree } from './tree-helper';
-import type { ISparklineColumnIndicator } from '../ts-types/pivot-table/indicator/sparkline-indicator';
export function checkHasAggregation(layoutMap: SimpleHeaderLayoutMap) {
const columnObjects = layoutMap.columnObjects;
@@ -69,274 +52,12 @@ export function checkHasAggregationOnBottom(layoutMap: SimpleHeaderLayoutMap) {
}
export function checkHasTreeDefine(layoutMap: SimpleHeaderLayoutMap) {
- const { columns } = layoutMap._table.options as ListTableConstructorOptions;
- if (isArray(columns) && columns.length > 0) {
- for (let i = 0; i < columns.length; i++) {
- const column = columns[i];
- if (isString(column)) {
- continue;
- }
- if (column.tree) {
- return true;
- }
- }
- }
- return false;
-}
-
-export function hasAutoImageColumn(table: BaseTableAPI) {
- const { columns, rows, indicators } = table.options as PivotTableConstructorOptions;
- if (table.isPivotTable()) {
- // pivot table
- if (isArray(columns) && columns.length > 0) {
- for (let i = 0; i < columns.length; i++) {
- const column = columns[i];
- if (isString(column)) {
- continue;
- }
- if (
- (column.headerType === 'image' || column.headerType === 'video' || typeof column.headerType === 'function') &&
- (column as IImageDimension).imageAutoSizing
- ) {
- return true;
- }
- }
- }
- if (isArray(rows) && rows.length > 0) {
- for (let i = 0; i < rows.length; i++) {
- const row = rows[i];
- if (isString(row)) {
- continue;
- }
- if (
- (row.headerType === 'image' || row.headerType === 'video' || typeof row.headerType === 'function') &&
- (row as IImageDimension).imageAutoSizing
- ) {
- return true;
- }
- }
- }
- if (isArray(indicators) && indicators.length > 0) {
- for (let i = 0; i < indicators.length; i++) {
- const indicator = indicators[i];
- if (isString(indicator)) {
- continue;
- }
- if (
- ((indicator.cellType === 'image' ||
- indicator.cellType === 'video' ||
- typeof indicator.cellType === 'function') &&
- (indicator as IImageColumnIndicator).imageAutoSizing) ||
- ((indicator.headerType === 'image' ||
- indicator.headerType === 'video' ||
- typeof indicator.headerType === 'function') &&
- (indicator as IImageHeaderIndicator).imageAutoSizing)
- ) {
- return true;
- }
- }
- }
- } else {
- // list table
- if (isArray(columns) && columns.length > 0) {
- for (let i = 0; i < columns.length; i++) {
- const column = columns[i] as unknown as ListTableConstructorOptions['columns'][0];
- if (
- ((column.cellType === 'image' || column.cellType === 'video' || typeof column.cellType === 'function') &&
- (column as IImageColumnBodyDefine).imageAutoSizing) ||
- ((column.headerType === 'image' ||
- column.headerType === 'video' ||
- typeof column.headerType === 'function') &&
- (column as IImageHeaderDefine).imageAutoSizing)
- ) {
- return true;
- }
- }
+ const columnObjects = layoutMap.columnObjects;
+ for (let i = 0; i < columnObjects.length; i++) {
+ const column = columnObjects[i];
+ if ((column as ColumnData)?.define?.tree) {
+ return true;
}
}
return false;
}
-
-export function parseColKeyRowKeyForPivotTable(table: PivotTable, options: PivotTableConstructorOptions) {
- let columnDimensionTree;
- let rowDimensionTree;
- // let isNeedResetColumnDimensionTree = true;
- // let isNeedResetRowDimensionTree = true;
- if (options.columnTree) {
- if (table.options.indicatorsAsCol !== false && table.options.supplementIndicatorNodes !== false) {
- table.internalProps.columnTree = supplementIndicatorNodesForCustomTree(
- table.internalProps.columnTree,
- options.indicators
- );
- }
- columnDimensionTree = new DimensionTree(
- (table.internalProps.columnTree as ITreeLayoutHeadNode[]) ?? [],
- table.layoutNodeId
- );
-
- // if (
- // table.options.supplementIndicatorNodes !== false &&
- // table.options.indicatorsAsCol !== false &&
- // !columnDimensionTree.dimensionKeys.contain(IndicatorDimensionKeyPlaceholder) &&
- // options.indicators?.length >= 1
- // ) {
- // isNeedResetColumnDimensionTree = true;
- // } else {
- // isNeedResetColumnDimensionTree = false;
- // }
- // } else {
- // if (options.indicatorsAsCol !== false) {
- // table.internalProps.columnTree = supplementIndicatorNodesForCustomTree([], options.indicators);
- // }
- }
- if (options.rowTree) {
- if (table.options.indicatorsAsCol === false && table.options.supplementIndicatorNodes !== false) {
- table.internalProps.rowTree = supplementIndicatorNodesForCustomTree(
- table.internalProps.rowTree,
- options.indicators
- );
- }
- rowDimensionTree = new DimensionTree(
- (table.internalProps.rowTree as ITreeLayoutHeadNode[]) ?? [],
- table.layoutNodeId,
- table.options.rowHierarchyType,
- table.options.rowHierarchyType === 'tree' ? table.options.rowExpandLevel ?? 1 : undefined
- );
- // if (
- // table.options.supplementIndicatorNodes !== false &&
- // table.options.indicatorsAsCol === false &&
- // !rowDimensionTree.dimensionKeys.contain(IndicatorDimensionKeyPlaceholder) &&
- // options.indicators?.length >= 1
- // ) {
- // isNeedResetRowDimensionTree = true;
- // } else {
- // isNeedResetRowDimensionTree = false;
- // }
- // } else {
- // if (options.indicatorsAsCol === false) {
- // table.internalProps.rowTree = supplementIndicatorNodesForCustomTree([], options.indicators);
- // }
- }
- const rowKeys = rowDimensionTree?.dimensionKeys?.count
- ? rowDimensionTree.dimensionKeys.valueArr()
- : options.rows?.reduce((keys: string[], rowObj) => {
- if (typeof rowObj === 'string') {
- keys.push(rowObj);
- } else {
- keys.push(rowObj.dimensionKey);
- }
- return keys;
- }, []) ?? [];
- const columnKeys = columnDimensionTree?.dimensionKeys?.count
- ? columnDimensionTree.dimensionKeys.valueArr()
- : options.columns?.reduce((keys: string[], columnObj) => {
- if (typeof columnObj === 'string') {
- keys.push(columnObj);
- } else {
- keys.push(columnObj.dimensionKey);
- }
- return keys;
- }, []) ?? [];
- const indicatorKeys =
- options.indicators?.reduce((keys: string[], indicatorObj) => {
- if (typeof indicatorObj === 'string') {
- keys.push(indicatorObj);
- } else {
- keys.push(indicatorObj.indicatorKey);
- if (
- (indicatorObj as IChartColumnIndicator).chartSpec ||
- (indicatorObj as ISparklineColumnIndicator).sparklineSpec
- ) {
- if (table.internalProps.dataConfig?.aggregationRules) {
- if (
- !table.internalProps.dataConfig.aggregationRules.find(aggregation => {
- return aggregation.indicatorKey === indicatorObj.indicatorKey;
- })
- ) {
- table.internalProps.dataConfig.aggregationRules.push({
- field: indicatorObj.indicatorKey,
- indicatorKey: indicatorObj.indicatorKey,
- aggregationType: AggregationType.NONE
- });
- }
- } else if (table.internalProps.dataConfig) {
- table.internalProps.dataConfig.aggregationRules = [
- {
- field: indicatorObj.indicatorKey,
- indicatorKey: indicatorObj.indicatorKey,
- aggregationType: AggregationType.NONE
- }
- ];
- } else {
- table.internalProps.dataConfig = {
- aggregationRules: [
- {
- field: indicatorObj.indicatorKey,
- indicatorKey: indicatorObj.indicatorKey,
- aggregationType: AggregationType.NONE
- }
- ]
- };
- }
- }
- }
- return keys;
- }, []) ?? [];
- if (options.rowHierarchyType === 'tree' && (options.extensionRows?.length ?? 0) >= 1) {
- options.extensionRows?.forEach(extensionRow => {
- const extension_rowKeys: string[] = [];
- extensionRow.rows.forEach(row => {
- if (typeof row === 'string') {
- extension_rowKeys.push(row);
- } else {
- extension_rowKeys.push(row.dimensionKey);
- }
- });
- rowKeys.push(...extension_rowKeys);
- });
- }
- return {
- rowKeys,
- columnKeys,
- indicatorKeys,
- // isNeedResetColumnDimensionTree,
- // isNeedResetRowDimensionTree,
- columnDimensionTree,
- rowDimensionTree
- };
-}
-
-export function supplementIndicatorNodesForCustomTree(
- customTree: IHeaderTreeDefine[],
- indicators: (string | IIndicator)[]
-) {
- const checkNode = (nodes: IHeaderTreeDefine[], isHasIndicator: boolean) => {
- nodes.forEach((node: IHeaderTreeDefine) => {
- if (
- !node.indicatorKey &&
- !isHasIndicator &&
- (!(node.children as IHeaderTreeDefine[])?.length || !node.children)
- ) {
- node.children = indicators?.map((indicator: IIndicator | string): { indicatorKey: string; value: string } => {
- if (typeof indicator === 'string') {
- return { indicatorKey: indicator, value: indicator };
- }
- return { indicatorKey: indicator.indicatorKey, value: indicator.title ?? indicator.indicatorKey };
- });
- } else if (node.children && Array.isArray(node.children)) {
- checkNode(node.children, isHasIndicator || !!node.indicatorKey);
- }
- });
- };
- if (customTree?.length) {
- checkNode(customTree, false);
- } else {
- customTree = indicators?.map((indicator: IIndicator | string): { indicatorKey: string; value: string } => {
- if (typeof indicator === 'string') {
- return { indicatorKey: indicator, value: indicator };
- }
- return { indicatorKey: indicator.indicatorKey, value: indicator.title ?? indicator.indicatorKey };
- });
- }
- return customTree;
-}
diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts
index 1def71326..d093a1400 100644
--- a/packages/vtable/src/layout/pivot-header-layout.ts
+++ b/packages/vtable/src/layout/pivot-header-layout.ts
@@ -34,6 +34,8 @@ import type { PivotTable } from '../PivotTable';
import type { PivotChart } from '../PivotChart';
import { IndicatorDimensionKeyPlaceholder } from '../tools/global';
import { diffCellAddress } from '../tools/diff-cell';
+import type { ILinkDimension } from '../ts-types/pivot-table/dimension/link-dimension';
+import type { IImageDimension } from '../ts-types/pivot-table/dimension/image-dimension';
import {
checkHasCartesianChart,
checkHasChart,
@@ -52,8 +54,7 @@ import { cloneDeep, isArray, isValid } from '@visactor/vutils';
import type { TextStyle } from '../body-helper/style';
import type { ITableAxisOption } from '../ts-types/component/axis';
import { getQuadProps } from '../scenegraph/utils/padding';
-import type { GetAxisConfigInPivotChart } from './chart-helper/get-axis-config';
-import { Factory } from '../core/factory';
+import { getAxisConfigInPivotChart } from './chart-helper/get-axis-config';
// export const sharedVar = { seqId: 0 };
// let colIndex = 0;
@@ -70,18 +71,10 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
cornerHeaderObjs: HeaderData[];
columnHeaderObjs: HeaderData[] = [];
rowHeaderObjs: HeaderData[] = [];
-
- private _cornerHeaderCellFullPathIds: number[][] = [];
- private _columnHeaderCellFullPathIds: number[][] = [];
- private _rowHeaderCellFullPathIds: number[][] = [];
- private _rowHeaderCellFullPathIds_FULL: number[][] = []; //分页需求新增 为了保存全量的id 当页的是_rowHeaderCellIds
-
- /**下面四份代表实际展示的 如果隐藏了某部分表头 那这里就会相比上面的数组少了隐藏掉的id */
private _cornerHeaderCellIds: number[][] = [];
private _columnHeaderCellIds: number[][] = [];
private _rowHeaderCellIds: number[][] = [];
private _rowHeaderCellIds_FULL: number[][] = []; //分页需求新增 为了保存全量的id 当页的是_rowHeaderCellIds
-
private _columnWidths: WidthData[] = [];
private _columnHeaderLevelCount: number;
private _rowHeaderLevelCount: number;
@@ -159,13 +152,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
rightRowSeriesNumberColumn: SeriesNumberColumnData[];
rightRowSeriesNumberColumnCount: number = 0;
//#endregion
- constructor(
- table: PivotTable | PivotChart,
- dataset: Dataset,
- columnDimensionTree: DimensionTree,
- rowDimensionTree: DimensionTree
- ) {
- this.sharedVar = table.layoutNodeId;
+ constructor(table: PivotTable | PivotChart, dataset: Dataset) {
+ this.sharedVar = { seqId: 0 };
this._table = table;
if ((table as PivotTable).options.rowHierarchyType === 'tree') {
this.extensionRows = (table as PivotTable).options.extensionRows;
@@ -197,6 +185,34 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (dataset) {
this.rowTree = dataset.rowHeaderTree;
this.columnTree = dataset.colHeaderTree;
+ if (this.indicatorsAsCol && this._table.isPivotChart() && checkHasCartesianChart(this)) {
+ const supplyAxisNode = (nodes: IHeaderTreeDefine[]) => {
+ nodes.forEach((node: IHeaderTreeDefine) => {
+ if ((node.children as IHeaderTreeDefine[])?.length) {
+ supplyAxisNode(node.children as IHeaderTreeDefine[]);
+ } else {
+ // 在指标在列上的透视图中，主指标轴（离散轴）显示在左侧，因此需要在原先行表头的布局中最右侧加入一列，用来显示坐标轴
+ // 加入的这一列dimensionKey配置为'axis'，在后续行列计算维度时需要注意，这一列是为了显示坐标轴加入的，不在行列维度信息内
+ node.children = [
+ {
+ dimensionKey: 'axis',
+ value: ''
+ }
+ ];
+ }
+ });
+ };
+ if (this.rowTree?.length) {
+ supplyAxisNode(this.rowTree);
+ } else {
+ this.rowTree = [
+ {
+ dimensionKey: 'axis',
+ value: ''
+ }
+ ];
+ }
+ }
}
// 收集指标所有key
this.indicatorsDefine?.forEach(indicator => {
@@ -207,22 +223,28 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.indicatorKeys.push(indicator.indicatorKey);
}
});
- this.columnDimensionTree = columnDimensionTree; // new DimensionTree((this.columnTree as ITreeLayoutHeadNode[]) ?? [], this.sharedVar);
- this.rowDimensionTree = rowDimensionTree;
- // new DimensionTree(
- // (this.rowTree as ITreeLayoutHeadNode[]) ?? [],
- // this.sharedVar,
- // this.rowHierarchyType,
- // this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined
- // );
+ this.columnDimensionTree = new DimensionTree((this.columnTree as ITreeLayoutHeadNode[]) ?? [], this.sharedVar);
+ this.rowDimensionTree = new DimensionTree(
+ (this.rowTree as ITreeLayoutHeadNode[]) ?? [],
+ this.sharedVar,
+ this.rowHierarchyType,
+ this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined
+ );
this.colDimensionKeys = this.columnDimensionTree.dimensionKeys.valueArr();
this.rowDimensionKeys = this.rowDimensionTree.dimensionKeys.valueArr();
this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(this.rowDimensionKeys);
this.resetRowHeaderLevelCount();
+ //生成列表头单元格
+ this._generateColHeaderIds();
+
+ this.colIndex = 0;
+ //生成行表头单元格
+ this._generateRowHeaderIds();
+
if (this._table.isPivotChart()) {
- this.hasTwoIndicatorAxes = this.indicatorsDefine.some((indicatorObject: any) => {
+ this.hasTwoIndicatorAxes = this._indicators.some(indicatorObject => {
if (
indicatorObject.chartSpec &&
indicatorObject.chartSpec.series &&
@@ -250,14 +272,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// this.colAttrs[this.colAttrs.length-1]===this.indicatorDimensionKey&&this.colAttrs.pop();
// this.rowAttrs[this.rowAttrs.length-1]===this.indicatorDimensionKey&&this.rowAttrs.pop();
- //生成列表头单元格
- this._generateColHeaderIds();
-
- this.colIndex = 0;
- //生成行表头单元格
- this._generateRowHeaderIds();
-
- this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL);
+ this._rowHeaderCellIds_FULL = transpose(this._rowHeaderCellIds_FULL);
if ((table as PivotTable).options.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
this.generateExtensionRowTree();
@@ -276,73 +291,36 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
}
this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
- //#region 生成cornerHeaderObjs及_cornerHeaderCellIds
- // if (this.cornerSetting.titleOnDimension === 'all') {
- let colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr();
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree
- ) {
- colDimensionKeys = this.columnsDefine.map(define => {
- if (typeof define === 'string') {
- return define;
- }
- return define.dimensionKey;
- });
- if (this.indicatorsAsCol) {
- colDimensionKeys.push(this.indicatorDimensionKey);
- }
- }
- //#endregion
-
- colDimensionKeys = this.columnHeaderTitle ? [''].concat(colDimensionKeys) : colDimensionKeys;
-
- let rowDimensionKeys: string[];
- let extensionRowDimensions = [];
- if (this.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
- // 如果是有扩展行维度
- const rowTreeFirstKey = [];
- rowTreeFirstKey.push(this.rowDimensionKeys[0]);
- this._extensionRowDimensionKeys.forEach(extensionRowKeys => {
- rowTreeFirstKey.push(extensionRowKeys[0]);
- });
- extensionRowDimensions = this.extensionRows.reduce((dimensions, cur) => {
- return dimensions.concat(cur.rows);
- }, []);
-
- rowDimensionKeys = this.rowHeaderTitle ? [''].concat(rowTreeFirstKey as any) : rowTreeFirstKey;
- } else {
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr();
- if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree
- ) {
- rowDimensionKeys = this.rowsDefine.map(define => {
- if (typeof define === 'string') {
- return define;
- }
- return define.dimensionKey;
+ //生成cornerHeaderObjs及_cornerHeaderCellIds
+ if (this.cornerSetting.titleOnDimension === 'column') {
+ this.cornerHeaderObjs = this._addCornerHeaders(
+ this.columnHeaderTitle ? [''].concat(this.colDimensionKeys as any) : this.colDimensionKeys,
+ this.columnsDefine
+ );
+ } else if (this.cornerSetting.titleOnDimension === 'row') {
+ if (this.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
+ // 如果是有扩展行维度
+ const rowTreeFirstKey = [];
+ rowTreeFirstKey.push(this.rowDimensionKeys[0]);
+ this._extensionRowDimensionKeys.forEach(extensionRowKeys => {
+ rowTreeFirstKey.push(extensionRowKeys[0]);
});
- if (!this.indicatorsAsCol) {
- rowDimensionKeys.push(this.indicatorDimensionKey);
- }
+ const extensionRowDimensions = this.extensionRows.reduce((dimensions, cur) => {
+ return dimensions.concat(cur.rows);
+ }, []);
+ this.cornerHeaderObjs = this._addCornerHeaders(
+ this.rowHeaderTitle ? [''].concat(rowTreeFirstKey as any) : rowTreeFirstKey,
+ this.rowsDefine.concat(extensionRowDimensions)
+ );
+ } else {
+ this.cornerHeaderObjs = this._addCornerHeaders(
+ this.rowHeaderTitle ? [''].concat(this.rowDimensionKeys as any) : this.rowDimensionKeys,
+ this.rowsDefine
+ );
}
- //#endregion
- rowDimensionKeys = this.rowHeaderTitle ? [''].concat(rowDimensionKeys) : rowDimensionKeys;
+ } else {
+ this.cornerHeaderObjs = this._addCornerHeaders(null, undefined);
}
-
- this.cornerHeaderObjs = this._addCornerHeaders(
- colDimensionKeys,
- rowDimensionKeys,
- this.columnsDefine.concat(...this.rowsDefine, ...extensionRowDimensions)
- );
- //#endregion
this.colIndex = 0;
this._headerObjectMap = this._headerObjects.reduce((o, e) => {
o[e.id as number] = e;
@@ -356,8 +334,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} else {
this._indicatorShowType = 'none';
}
-
- this.generateCellIdsConsiderHideHeader();
this.setPagination((table as PivotTable).options.pagination);
if (this._table.isPivotChart()) {
@@ -398,9 +374,37 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// }
return false;
});
+
+ // if (this.indicatorsAsCol) {
+ // const cell_id = 'rowHeaderEmpty';
+ // this._headerObjectMap[cell_id] = {
+ // id: cell_id,
+ // title: '',
+ // field: cell_id,
+ // headerType: this.cornerSetting.headerType ?? 'text',
+ // style: this.cornerSetting.headerStyle,
+ // define: {
+ // // id:
+ // }
+ // };
+ // this._headerObjects.push(this._headerObjectMap[cell_id]);
+ // // this.rowShowAttrs.push(cell_id);
+
+ // // deal with sub indicator axis
+
+ // if (!this.hasTwoIndicatorAxes) {
+ // // this.colShowAttrs.pop();
+ // }
+ // } else {
+ // const axisOption = ((this._table as PivotChart).pivotChartAxes as ITableAxisOption[]).find(axisOption => {
+ // return axisOption.orient === 'left';
+ // });
+ // if (axisOption?.visible === false) {
+ // // this.rowShowAttrs.pop();
+ // }
+ // }
}
this.handleRowSeriesNumber(table.internalProps.rowSeriesNumber);
-
this.setColumnWidths();
}
handleRowSeriesNumber(rowSeriesNumber: IRowSeriesNumber) {
@@ -453,36 +457,14 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
}
_generateColHeaderIds() {
if (this.columnDimensionTree.tree.children?.length >= 1) {
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- let startRow = 0;
- if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree &&
- this.indicatorsAsCol &&
- this.columnDimensionTree.totalLevel < this.columnHeaderLevelCount
- ) {
- startRow = this.columnHeaderLevelCount - this.columnDimensionTree.totalLevel;
- for (let i = 0; i < startRow; i++) {
- this._columnHeaderCellFullPathIds.unshift([]);
- }
- }
- //#endregion
- this._addHeaders(
- this._columnHeaderCellFullPathIds,
- startRow,
- this.columnDimensionTree.tree.children,
- [],
- this.columnHeaderObjs
- );
+ this._addHeaders(this._columnHeaderCellIds, 0, this.columnDimensionTree.tree.children, [], this.columnHeaderObjs);
}
// if (typeof this.showColumnHeader !== 'boolean') {
if (this.columnHeaderTitle) {
this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
const id = ++this.sharedVar.seqId;
- const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount - this.rightFrozenColCount).fill(id);
- this._columnHeaderCellFullPathIds.unshift(firstRowIds);
+ const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount).fill(id);
+ this._columnHeaderCellIds.unshift(firstRowIds);
const cell: HeaderData = {
id,
title:
@@ -511,7 +493,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (this.rowDimensionTree.tree.children?.length >= 1) {
if (this.rowHierarchyType === 'tree') {
this._addHeadersForTreeMode(
- this._rowHeaderCellFullPathIds_FULL,
+ this._rowHeaderCellIds_FULL,
0,
this.rowDimensionTree.tree.children,
[],
@@ -521,39 +503,15 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.rowHeaderObjs
);
} else {
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- let startRow = 0;
- if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree &&
- !this.indicatorsAsCol &&
- this.rowDimensionTree.totalLevel < this.rowHeaderLevelCount
- ) {
- startRow = this.rowHeaderLevelCount - this.rowDimensionTree.totalLevel;
- for (let i = 0; i < startRow; i++) {
- this._rowHeaderCellFullPathIds_FULL.unshift([]);
- }
- }
- //#endregion
- this._addHeaders(
- this._rowHeaderCellFullPathIds_FULL,
- startRow,
- this.rowDimensionTree.tree.children,
- [],
- this.rowHeaderObjs
- );
+ this._addHeaders(this._rowHeaderCellIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowHeaderObjs);
}
}
// if (typeof this.showRowHeader !== 'boolean') {
if (this.rowHeaderTitle) {
this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
const id = ++this.sharedVar.seqId;
- const firstColIds = Array(this._rowHeaderCellFullPathIds_FULL[0]?.length ?? this.rowDimensionTree.tree.size).fill(
- id
- );
- this._rowHeaderCellFullPathIds_FULL.unshift(firstColIds);
+ const firstColIds = Array(this._rowHeaderCellIds_FULL[0]?.length ?? this.rowDimensionTree.tree.size).fill(id);
+ this._rowHeaderCellIds_FULL.unshift(firstColIds);
const cell: HeaderData = {
id,
title:
@@ -637,290 +595,68 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
dealHeaderForTreeMode(hd, _headerCellIds, results, roots, row, totalLevel, show, dimensions, this);
}
}
- private _addCornerHeaders(
- colDimensionKeys: string[] | null,
- rowDimensionKeys: string[] | null,
- dimensions: (string | IDimension)[]
- ) {
+ private _addCornerHeaders(dimensionKeys: (string | number)[] | null, dimensions: (string | IDimension)[]) {
const results: HeaderData[] = [];
- if (this.cornerSetting.titleOnDimension === 'all') {
- if (this.indicatorsAsCol) {
- let indicatorAtIndex = -1;
- if (colDimensionKeys) {
- colDimensionKeys.forEach((dimensionKey: string, key: number) => {
- if (dimensionKey === this.indicatorDimensionKey) {
- indicatorAtIndex = key;
- }
- const id = ++this.sharedVar.seqId;
- const dimensionInfo: IDimension = dimensions.find(dimension =>
- typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- ) as IDimension;
- const cell: HeaderData = {
- id,
- title:
- dimensionKey === this.indicatorDimensionKey
- ? this.indicatorTitle
- : dimensionInfo
- ? dimensionInfo.title
- : dimensionKey === 'axis'
- ? ''
- : (dimensionKey as string),
- field: dimensionKey, //'维度名称',
- style: this.cornerSetting.headerStyle,
- headerType: this.cornerSetting.headerType ?? 'text',
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- define: {
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- dimensionKey: dimensionKey, // '维度名称',
- id,
- value: dimensionKey,
- headerEditor: this.cornerSetting.headerEditor,
- disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
- disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
- },
- dropDownMenu: dimensionInfo?.cornerDropDownMenu,
- pivotInfo: {
- value: dimensionInfo?.title ?? '',
- dimensionKey,
- isPivotCorner: true
- // customInfo: dimensionInfo?.customInfo
- },
- description: dimensionInfo?.cornerDescription
- };
- results[id] = cell;
- this._headerObjects[id] = cell;
-
- if (!this._cornerHeaderCellFullPathIds[key]) {
- this._cornerHeaderCellFullPathIds[key] = [];
- }
- for (let r = 0; r < this.rowHeaderLevelCount; r++) {
- this._cornerHeaderCellFullPathIds[key][r] = id;
- }
- });
- }
- if (rowDimensionKeys) {
- rowDimensionKeys.forEach((dimensionKey: string, key: number) => {
- const id = ++this.sharedVar.seqId;
- const dimensionInfo: IDimension = dimensions.find(dimension =>
- typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- ) as IDimension;
- const cell: HeaderData = {
- id,
- title:
- dimensionKey === this.indicatorDimensionKey
- ? this.indicatorTitle
- : dimensionInfo
- ? dimensionInfo.title
- : dimensionKey === 'axis'
- ? ''
- : (dimensionKey as string),
- field: dimensionKey, //'维度名称',
- style: this.cornerSetting.headerStyle,
- headerType: this.cornerSetting.headerType ?? 'text',
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- define: {
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- dimensionKey: dimensionKey, // '维度名称',
- id,
- value: dimensionKey,
- headerEditor: this.cornerSetting.headerEditor,
- disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
- disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
- },
- dropDownMenu: dimensionInfo?.cornerDropDownMenu,
- pivotInfo: {
- value: dimensionInfo?.title ?? '',
- dimensionKey,
- isPivotCorner: true
- // customInfo: dimensionInfo?.customInfo
- },
- description: dimensionInfo?.cornerDescription
- };
- results[id] = cell;
- this._headerObjects[id] = cell;
- if (!this._cornerHeaderCellFullPathIds[indicatorAtIndex]) {
- this._cornerHeaderCellFullPathIds[indicatorAtIndex] = [];
- }
- this._cornerHeaderCellFullPathIds[indicatorAtIndex][key] = id;
- });
- }
- } else {
- let indicatorAtIndex = -1;
- if (rowDimensionKeys) {
- rowDimensionKeys.forEach((dimensionKey: string, key: number) => {
- if (dimensionKey === this.indicatorDimensionKey) {
- indicatorAtIndex = key;
- }
- const id = ++this.sharedVar.seqId;
- const dimensionInfo: IDimension = dimensions.find(dimension =>
- typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- ) as IDimension;
- const cell: HeaderData = {
- id,
- title:
- dimensionKey === this.indicatorDimensionKey
- ? this.indicatorTitle
- : dimensionInfo
- ? dimensionInfo.title
- : dimensionKey === 'axis'
- ? ''
- : (dimensionKey as string),
- field: dimensionKey, //'维度名称',
- style: this.cornerSetting.headerStyle,
- headerType: this.cornerSetting.headerType ?? 'text',
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- define: {
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- dimensionKey: dimensionKey, // '维度名称',
- id,
- value: dimensionKey,
- headerEditor: this.cornerSetting.headerEditor,
- disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
- disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
- },
- dropDownMenu: dimensionInfo?.cornerDropDownMenu,
- pivotInfo: {
- value: dimensionInfo?.title ?? '',
- dimensionKey,
- isPivotCorner: true
- // customInfo: dimensionInfo?.customInfo
- },
- description: dimensionInfo?.cornerDescription
- };
- results[id] = cell;
- this._headerObjects[id] = cell;
-
- for (let r = 0; r < this.columnHeaderLevelCount; r++) {
- if (!this._cornerHeaderCellFullPathIds[r]) {
- this._cornerHeaderCellFullPathIds[r] = [];
- }
- this._cornerHeaderCellFullPathIds[r][key] = id;
- }
- });
- }
- if (colDimensionKeys) {
- colDimensionKeys.forEach((dimensionKey: string, key: number) => {
- const id = ++this.sharedVar.seqId;
- const dimensionInfo: IDimension = dimensions.find(dimension =>
- typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- ) as IDimension;
- const cell: HeaderData = {
- id,
- title:
- dimensionKey === this.indicatorDimensionKey
- ? this.indicatorTitle
- : dimensionInfo
- ? dimensionInfo.title
- : dimensionKey === 'axis'
- ? ''
- : (dimensionKey as string),
- field: dimensionKey, //'维度名称',
- style: this.cornerSetting.headerStyle,
- headerType: this.cornerSetting.headerType ?? 'text',
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- define: {
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- dimensionKey: dimensionKey, // '维度名称',
- id,
- value: dimensionKey,
- headerEditor: this.cornerSetting.headerEditor,
- disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
- disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
- },
- dropDownMenu: dimensionInfo?.cornerDropDownMenu,
- pivotInfo: {
- value: dimensionInfo?.title ?? '',
- dimensionKey,
- isPivotCorner: true
- // customInfo: dimensionInfo?.customInfo
- },
- description: dimensionInfo?.cornerDescription
- };
- results[id] = cell;
- this._headerObjects[id] = cell;
- // if (!this._cornerHeaderCellFullPathIds[indicatorAtIndex]) {
- // this._cornerHeaderCellFullPathIds[indicatorAtIndex] = [];
- // }
- this._cornerHeaderCellFullPathIds[key][indicatorAtIndex] = id;
- });
- }
- }
- } else if (this.cornerSetting.titleOnDimension === 'row' || this.cornerSetting.titleOnDimension === 'column') {
- const dimensionKeys = this.cornerSetting?.titleOnDimension === 'row' ? rowDimensionKeys : colDimensionKeys;
- if (dimensionKeys) {
- dimensionKeys.forEach((dimensionKey: string, key: number) => {
- const id = ++this.sharedVar.seqId;
- // const dimensionInfo: IDimension =
- // (this.rowsDefine?.find(dimension =>
- // typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- // ) as IDimension) ??
- // (this.columnsDefine?.find(dimension =>
- // typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- // ) as IDimension);
- const dimensionInfo: IDimension = dimensions.find(dimension =>
- typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
- ) as IDimension;
- const cell: HeaderData = {
+ if (dimensionKeys) {
+ dimensionKeys.forEach((dimensionKey: string | number, key: number) => {
+ const id = ++this.sharedVar.seqId;
+ // const dimensionInfo: IDimension =
+ // (this.rowsDefine?.find(dimension =>
+ // typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
+ // ) as IDimension) ??
+ // (this.columnsDefine?.find(dimension =>
+ // typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
+ // ) as IDimension);
+ const dimensionInfo: IDimension = dimensions.find(dimension =>
+ typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey
+ ) as IDimension;
+ const cell: HeaderData = {
+ id,
+ title:
+ dimensionKey === this.indicatorDimensionKey
+ ? this.indicatorTitle
+ : dimensionInfo
+ ? dimensionInfo.title
+ : dimensionKey === 'axis'
+ ? ''
+ : (dimensionKey as string),
+ field: '维度名称',
+ style: this.cornerSetting.headerStyle,
+ headerType: this.cornerSetting.headerType ?? 'text',
+ define: {
+ dimensionKey: '维度名称',
id,
- title:
- dimensionKey === this.indicatorDimensionKey
- ? this.indicatorTitle
- : dimensionInfo
- ? dimensionInfo.title
- : dimensionKey === 'axis'
- ? ''
- : (dimensionKey as string),
- field: dimensionKey, //'维度名称',
- style: this.cornerSetting.headerStyle,
- headerType: this.cornerSetting.headerType ?? 'text',
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- define: {
- showSort: dimensionInfo?.showSortInCorner,
- sort: dimensionInfo?.sort,
- dimensionKey: dimensionKey, // '维度名称',
- id,
- value: dimensionKey,
- headerEditor: this.cornerSetting.headerEditor,
- disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
- disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
- },
- dropDownMenu: dimensionInfo?.cornerDropDownMenu,
- pivotInfo: {
- value: dimensionInfo?.title ?? '',
- dimensionKey,
- isPivotCorner: true
- // customInfo: dimensionInfo?.customInfo
- },
- description: dimensionInfo?.cornerDescription
- };
- results[id] = cell;
- this._headerObjects[id] = cell;
- if (this.cornerSetting.titleOnDimension === 'column') {
- if (!this._cornerHeaderCellFullPathIds[key]) {
- this._cornerHeaderCellFullPathIds[key] = [];
- }
- for (let r = 0; r < this.rowHeaderLevelCount; r++) {
- this._cornerHeaderCellFullPathIds[key][r] = id;
- }
- } else if (this.cornerSetting.titleOnDimension === 'row') {
- for (let r = 0; r < this.columnHeaderLevelCount; r++) {
- if (!this._cornerHeaderCellFullPathIds[r]) {
- this._cornerHeaderCellFullPathIds[r] = [];
- }
- this._cornerHeaderCellFullPathIds[r][key] = id;
+ value: dimensionKey,
+ disableHeaderHover: !!this.cornerSetting.disableHeaderHover,
+ disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
+ },
+ dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+ pivotInfo: {
+ value: dimensionInfo?.title ?? '',
+ dimensionKey,
+ isPivotCorner: true
+ // customInfo: dimensionInfo?.customInfo
+ },
+ description: dimensionInfo?.cornerDescription
+ };
+ results[id] = cell;
+ this._headerObjects[id] = cell;
+ if (this.cornerSetting.titleOnDimension === 'column') {
+ if (!this._cornerHeaderCellIds[key]) {
+ this._cornerHeaderCellIds[key] = [];
+ }
+ for (let r = 0; r < this.rowHeaderLevelCount; r++) {
+ this._cornerHeaderCellIds[key][r] = id;
+ }
+ } else if (this.cornerSetting.titleOnDimension === 'row') {
+ for (let r = 0; r < this.columnHeaderLevelCount; r++) {
+ if (!this._cornerHeaderCellIds[r]) {
+ this._cornerHeaderCellIds[r] = [];
}
+ this._cornerHeaderCellIds[r][key] = id;
}
- });
- }
+ }
+ });
} else {
const id = ++this.sharedVar.seqId;
const cell: HeaderData = {
@@ -941,20 +677,19 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this._headerObjects[id] = cell;
for (let r = 0; r < this.columnHeaderLevelCount; r++) {
for (let j = 0; j < this.rowHeaderLevelCount; j++) {
- if (!this._cornerHeaderCellFullPathIds[r]) {
- this._cornerHeaderCellFullPathIds[r] = [];
+ if (!this._cornerHeaderCellIds[r]) {
+ this._cornerHeaderCellIds[r] = [];
}
- this._cornerHeaderCellFullPathIds[r][j] = id;
+ this._cornerHeaderCellIds[r][j] = id;
}
}
}
-
return results;
}
private generateExtensionRowTree() {
this.extensionRows.forEach((extensionRow, indexP) => {
- const old_rowHeaderCellIds = this._rowHeaderCellFullPathIds_FULL;
- this._rowHeaderCellFullPathIds_FULL = [];
+ const old_rowHeaderCellIds = this._rowHeaderCellIds_FULL;
+ this._rowHeaderCellIds_FULL = [];
old_rowHeaderCellIds.forEach((row_ids: number[], index) => {
const key = row_ids[row_ids.length - 1];
this.colIndex = 0;
@@ -991,7 +726,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.rowHeaderObjs
);
for (let i = 0; i < extensionRowTreeHeaderIds[0].length; i++) {
- this._rowHeaderCellFullPathIds_FULL.push(row_ids.concat(extensionRowTreeHeaderIds[0][i]));
+ this._rowHeaderCellIds_FULL.push(row_ids.concat(extensionRowTreeHeaderIds[0][i]));
}
});
});
@@ -1387,7 +1122,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
: this.columnDimensionTree.totalLevel
: this.columnDimensionTree.totalLevel
: this.columnDimensionTree.totalLevel;
-
if (this.columnHeaderTitle) {
count += 1;
}
@@ -1395,39 +1129,14 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this._table.isPivotChart() &&
this.indicatorsAsCol &&
!this.hasTwoIndicatorAxes &&
- checkHasCartesianChart(this.indicatorsDefine)
+ checkHasCartesianChart(this)
) {
count -= 1;
}
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- if (count === 0 && this.dataset && !this.dataset.customColTree && !this.dataset.customRowTree) {
- if (this.cornerSetting.titleOnDimension === 'row') {
- count = 1;
- } else if (
- (this.dataset.records?.length ?? 0) === 0 &&
- (this.cornerSetting.titleOnDimension === 'column' || this.cornerSetting.titleOnDimension === 'all')
- ) {
- count = this.columnsDefine.length ?? 0;
- }
- } else if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree
- ) {
- if (this.cornerSetting.titleOnDimension === 'column' || this.cornerSetting.titleOnDimension === 'all') {
- count = this.columnsDefine.length ?? 0;
- if (!this.hideIndicatorName && this.indicatorsAsCol) {
- count++;
- }
- }
- }
- //#endregion
this.columnHeaderLevelCount = count;
return;
}
- // this.columnHeaderLevelCount = 0;
- this.columnHeaderLevelCount = !this.indicatorsAsCol ? 0 : this.hideIndicatorName ? 0 : 1;
+ this.columnHeaderLevelCount = 0;
return;
}
resetRowHeaderLevelCount() {
@@ -1441,7 +1150,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.rowHeaderLevelCount = 1 + extensionRowCount;
return;
}
- const rowLevelCount = this.rowDimensionTree.totalLevel;
+ const rowLevelCount = this.rowDimensionKeys.length;
// let count = this.indicatorsAsCol
// ? rowLevelCount
// : this.hideIndicatorName //设置隐藏表头，且表头最下面一级就是指标维度 则-1
@@ -1466,30 +1175,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// if (this._table.isPivotChart()&&this.indicatorsAsCol) {
// count+=1;
// }
- //#region 处理需求 当没有数据时仍然显示角头维度名称
- if (count === 0 && this.dataset && !this.dataset.customColTree && !this.dataset.customRowTree) {
- if (this.cornerSetting.titleOnDimension === 'column') {
- count = 1;
- } else if (
- (this.dataset.records?.length ?? 0) === 0 &&
- (this.cornerSetting.titleOnDimension === 'row' || this.cornerSetting.titleOnDimension === 'all')
- ) {
- count = this.rowsDefine.length ?? 0;
- }
- } else if (
- this.dataset &&
- (this.dataset.records?.length ?? 0) === 0 &&
- !this.dataset.customColTree &&
- !this.dataset.customRowTree
- ) {
- if (this.cornerSetting.titleOnDimension === 'row' || this.cornerSetting.titleOnDimension === 'all') {
- count = this.rowsDefine.length;
- if (!this.hideIndicatorName && !this.indicatorsAsCol) {
- count++;
- }
- }
- }
- //#endregion
this.rowHeaderLevelCount = count;
return;
}
@@ -1511,24 +1196,15 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
}
get colCount(): number {
return (
- (this.columnDimensionTree.totalLevel > 0 ||
- this._table.isPivotChart() ||
- (this.dataset.records as Array)?.length > 0 ||
- (this.dataset.records && !Array.isArray(this.dataset.records))
- ? this.columnDimensionTree.tree.size
- : 0) +
+ this.columnDimensionTree.tree.size +
this.rowHeaderLevelCount +
this.rightHeaderColCount +
- this.leftRowSeriesNumberColumnCount
- ); // 小心rightFrozenColCount和colCount的循环引用 造成调用栈溢出
+ this.leftRowSeriesNumberColumnCount // 小心rightFrozenColCount和colCount的循环引用 造成调用栈溢出
+ );
}
get rowCount(): number {
return (
- ((this._table.records || this.dataset.records
- ? Array.isArray(this._table.records)
- ? this._table.records.length > 0
- : true
- : false) &&
+ ((Array.isArray(this._table.records) ? this._table.records.length > 0 : true) &&
this._indicators?.length > 0 && // 前两个判断条件来判断 有展示的body值的情况 需要展示body row
!this._rowHeaderCellIds?.length // 需要展示body值 但 _rowHeaderCellIds的长度维度为0 无rows 行表头为空
? 1 //兼容bugserver: https://bugserver.cn.goofy.app/case?product=VTable&fileid=65364a57173c354c242a7c4f
@@ -1552,7 +1228,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
}
return 0;
}
- if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this.indicatorsDefine)) {
+ if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this)) {
const axisOption = ((this._table as PivotChart).pivotChartAxes as ITableAxisOption[]).find(axisOption => {
return axisOption.orient === 'bottom';
});
@@ -1626,13 +1302,13 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (this.isSeriesNumber(col, row)) {
return '';
} else if (this.isCornerHeader(col, row)) {
- return this._cornerHeaderCellIds[row]?.[col - this.leftRowSeriesNumberColumnCount];
+ return this._cornerHeaderCellIds[row][col - this.leftRowSeriesNumberColumnCount];
} else if (this.isColumnHeader(col, row)) {
- return this._columnHeaderCellIds[row]?.[col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount];
+ return this._columnHeaderCellIds[row][col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount];
} else if (this.isRowHeader(col, row)) {
return this._rowHeaderCellIds[row - this.columnHeaderLevelCount]?.[col - this.leftRowSeriesNumberColumnCount];
} else if (this.isRightFrozenColumn(col, row)) {
- return this._rowHeaderCellIds[row - this.columnHeaderLevelCount]?.[this.rowHeaderLevelCount - 1];
+ return this._rowHeaderCellIds[row - this.columnHeaderLevelCount][this.rowHeaderLevelCount - 1];
} else if (this.isBottomFrozenRow(col, row)) {
return this._columnHeaderCellIds[this.columnHeaderLevelCount - 1]?.[
col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount
@@ -1711,40 +1387,28 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
const paths = this.getCellHeaderPaths(_col, _row);
if (this.indicatorsAsCol) {
const indicatorKey = paths.colHeaderPaths?.find(colPath => colPath.indicatorKey)?.indicatorKey;
- return isValid(indicatorKey)
- ? this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ??
- this._indicators[0] ?? {
- id: '',
- field: undefined,
- indicatorKey: undefined,
- cellType: 'text',
- define: undefined
- }
- : {
- id: '',
- field: undefined,
- indicatorKey: undefined,
- cellType: 'text',
- define: undefined
- };
- }
- const indicatorKey = paths.rowHeaderPaths?.find(rowPath => rowPath.indicatorKey)?.indicatorKey;
- return isValid(indicatorKey)
- ? this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ??
- this._indicators[0] ?? {
- id: '',
- field: undefined,
- indicatorKey: undefined,
- cellType: 'text',
- define: undefined
- }
- : {
+ return (
+ this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ??
+ this._indicators[0] ?? {
id: '',
field: undefined,
indicatorKey: undefined,
cellType: 'text',
define: undefined
- };
+ }
+ );
+ }
+ const indicatorKey = paths.rowHeaderPaths?.find(rowPath => rowPath.indicatorKey)?.indicatorKey;
+ return (
+ this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ??
+ this._indicators[0] ?? {
+ id: '',
+ field: undefined,
+ indicatorKey: undefined,
+ cellType: 'text',
+ define: undefined
+ }
+ );
}
// getBodyLayoutRangeById(id: LayoutObjectId): CellRange {
// for (let col = 0; col < (this.colCount ?? 0); col++) {
@@ -1912,7 +1576,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// return { start: { col: 0, row: 0 }, end: { col: 0, row: 0 } };
// }
- getCellHeaderPathsWithTreeNode(col: number, row: number): IPivotTableCellHeaderPaths {
+ getCellHeaderPathsWidthTreeNode(col: number, row: number): IPivotTableCellHeaderPaths {
// if (this._CellHeaderPathMap.has(`$${col}$${row}`))
// if (this._CellHeaderPathMap.has(`${col}-${row}`)) {
// return this._CellHeaderPathMap.get(`${col}-${row}`);
@@ -1959,7 +1623,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// rowPath = this.rowDimensionTree.getTreePath(recordRow, col + hd.hierarchyLevel);
// }
// 考虑多层级的ExtensionRowTree
- const row_pathIds = this._rowHeaderCellFullPathIds[recordRow]; //获取当前行的cellId 但这个cellId不是各级维度都有的 下面逻辑就是找全路径然后再去各个树找path的过程
+ const row_pathIds = this._rowHeaderCellIds[recordRow]; //获取当前行的cellId 但这个cellId不是各级维度都有的 下面逻辑就是找全路径然后再去各个树找path的过程
let findTree = this.rowDimensionTree; //第一棵寻找的树是第一列的维度树 主树
let level = 0; //level和col对应，代表一层层树找的过程
while (findTree) {
@@ -1999,7 +1663,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
return p;
}
getCellHeaderPaths(col: number, row: number): IPivotTableCellHeaderPaths {
- const headerPathsWidthNode = this.getCellHeaderPathsWithTreeNode(col, row);
+ const headerPathsWidthNode = this.getCellHeaderPathsWidthTreeNode(col, row);
const headerPaths: IPivotTableCellHeaderPaths = {
colHeaderPaths: [],
rowHeaderPaths: [],
@@ -2010,13 +1674,11 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
dimensionKey?: string;
indicatorKey?: string;
value?: string;
- virtual?: boolean;
} = {};
colHeaderPath.dimensionKey = colHeader.dimensionKey;
colHeaderPath.indicatorKey = colHeader.indicatorKey;
colHeaderPath.value = colHeader.value ?? this.getIndicatorInfoByIndicatorKey(colHeader.indicatorKey)?.title ?? '';
- colHeaderPath.virtual = colHeader.virtual;
- headerPaths.colHeaderPaths!.push(colHeaderPath);
+ headerPaths.colHeaderPaths.push(colHeaderPath);
});
headerPathsWidthNode.rowHeaderPaths?.forEach((rowHeader: any) => {
@@ -2025,14 +1687,12 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
dimensionKey?: string;
indicatorKey?: string;
value?: string;
- virtual?: boolean;
} = {};
rowHeaderPath.dimensionKey = rowHeader.dimensionKey;
rowHeaderPath.indicatorKey = rowHeader.indicatorKey;
rowHeaderPath.value =
rowHeader.value ?? this.getIndicatorInfoByIndicatorKey(rowHeader.indicatorKey)?.title ?? '';
- rowHeaderPath.virtual = rowHeader.virtual;
- headerPaths.rowHeaderPaths!.push(rowHeaderPath);
+ headerPaths.rowHeaderPaths.push(rowHeaderPath);
}
});
return headerPaths;
@@ -2139,7 +1799,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
* @param row
*/
toggleHierarchyState(col: number, row: number) {
- const oldRowHeaderCellIds = this._rowHeaderCellFullPathIds_FULL.slice(0);
+ const oldRowHeaderCellIds = this._rowHeaderCellIds_FULL.slice(0);
const oldRowHeaderCellPositons = oldRowHeaderCellIds.map((id, row) => {
return { col, row: row + this.columnHeaderLevelCount };
});
@@ -2148,12 +1808,12 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
(hd.define).hierarchyState === HierarchyState.collapse ? HierarchyState.expand : HierarchyState.collapse;
//过程类似构造函数处理过程
this.rowDimensionTree.reset(this.rowDimensionTree.tree.children, true);
- this._rowHeaderCellFullPathIds_FULL = [];
+ this._rowHeaderCellIds_FULL = [];
this.rowDimensionKeys = this.rowDimensionTree.dimensionKeys.valueArr();
this.fullRowDimensionKeys = [];
this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(this.rowDimensionKeys);
this._addHeadersForTreeMode(
- this._rowHeaderCellFullPathIds_FULL,
+ this._rowHeaderCellIds_FULL,
0,
this.rowDimensionTree.tree.children,
[],
@@ -2166,7 +1826,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (this.rowHeaderTitle) {
const id = ++this.sharedVar.seqId;
const firstColIds = Array(this.rowCount - this.columnHeaderLevelCount).fill(id);
- this._rowHeaderCellFullPathIds_FULL.unshift(firstColIds);
+ this._rowHeaderCellIds_FULL.unshift(firstColIds);
const cell: HeaderData = {
id,
title:
@@ -2192,7 +1852,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.rowHeaderObjs.push(cell);
this._headerObjects[id] = cell;
}
- this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL);
+ this._rowHeaderCellIds_FULL = transpose(this._rowHeaderCellIds_FULL);
if (this.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
this.generateExtensionRowTree();
}
@@ -2212,13 +1872,12 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
col,
row,
oldRowHeaderCellIds.map(oldCellId => oldCellId[col - this.leftRowSeriesNumberColumnCount]),
- this._rowHeaderCellFullPathIds_FULL.map(newCellId => newCellId[col - this.leftRowSeriesNumberColumnCount]),
+ this._rowHeaderCellIds_FULL.map(newCellId => newCellId[col - this.leftRowSeriesNumberColumnCount]),
oldRowHeaderCellPositons,
this
);
- // this._rowHeaderCellIds = this._rowHeaderCellIds_FULL.slice();
- this.generateCellIdsConsiderHideHeader();
- this.setPagination(this.pagination);
+ this._rowHeaderCellIds = this._rowHeaderCellIds_FULL.slice();
+
return diffCell;
}
// 为列宽计算专用，兼容列表
@@ -2450,10 +2109,10 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} else if (this.isRowHeader(source.col, source.row)) {
if (this.rowHierarchyType === 'tree') {
const sourceRowHeaderPaths = cloneDeep(
- this.getCellHeaderPathsWithTreeNode(source.col, source.row).rowHeaderPaths
+ this.getCellHeaderPathsWidthTreeNode(source.col, source.row).rowHeaderPaths
);
const targetRowHeaderPaths = cloneDeep(
- this.getCellHeaderPathsWithTreeNode(target.col, target.row).rowHeaderPaths
+ this.getCellHeaderPathsWidthTreeNode(target.col, target.row).rowHeaderPaths
);
sourceRowHeaderPaths.pop(); // 如果用了缓存_CellHeaderPathMap的话 这里pop会影响缓存的值 所以上面使用clone
targetRowHeaderPaths.pop();
@@ -2523,30 +2182,17 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (targetIndex === sourceCellRange.start.col) {
return null;
}
- // // _columnHeaderCellIds 逐行将每一行的source id 移动到目标地址targetCol处
- // for (let row = 0; row < this._columnHeaderCellIds.length; row++) {
- // // 从header id的二维数组中取出需要操作的source ids
- // const sourceIds = this._columnHeaderCellIds[row].splice(
- // sourceCellRange.start.col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount,
- // sourceSize
- // );
- // // 将source ids插入到目标地址targetCol处
- // // 把sourceIds变成一个适合splice的数组（包含splice前2个参数的数组） 以通过splice来插入sourceIds数组
- // sourceIds.unshift(targetIndex - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount, 0);
- // Array.prototype.splice.apply(this._columnHeaderCellIds[row], sourceIds);
- // }
- // _columnHeaderCellFullPathIds 调整了 _columnHeaderCellIds就不需要调整了 因为他们的第二层数组对象是引用关系
- // _columnHeaderCellFullPathIds 逐行将每一行的source id 移动到目标地址targetCol处
- for (let row = 0; row < this._columnHeaderCellFullPathIds.length; row++) {
+ // 逐行将每一行的source id 移动到目标地址targetCol处
+ for (let row = 0; row < this._columnHeaderCellIds.length; row++) {
// 从header id的二维数组中取出需要操作的source ids
- const sourceIds = this._columnHeaderCellFullPathIds[row].splice(
+ const sourceIds = this._columnHeaderCellIds[row].splice(
sourceCellRange.start.col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount,
sourceSize
);
// 将source ids插入到目标地址targetCol处
// 把sourceIds变成一个适合splice的数组（包含splice前2个参数的数组） 以通过splice来插入sourceIds数组
sourceIds.unshift(targetIndex - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount, 0);
- Array.prototype.splice.apply(this._columnHeaderCellFullPathIds[row], sourceIds);
+ Array.prototype.splice.apply(this._columnHeaderCellIds[row], sourceIds);
}
//将_columns的列定义调整位置 同调整_headerCellIds逻辑
@@ -2559,7 +2205,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// 对维度树结构调整节点位置
this.columnDimensionTree.movePosition(
- this.getCellHeaderPathsWithTreeNode(source.col, source.row).colHeaderPaths.length - 1,
+ this.getCellHeaderPathsWidthTreeNode(source.col, source.row).colHeaderPaths.length - 1,
sourceCellRange.start.col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount,
targetCellRange.start.col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount
);
@@ -2577,8 +2223,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} else if (this.isRowHeader(source.col, source.row)) {
// 插入目标地址的列index
let targetIndex;
- const sourceRowHeaderPaths = this.getCellHeaderPathsWithTreeNode(source.col, source.row).rowHeaderPaths as any;
- const targetRowHeaderPaths = this.getCellHeaderPathsWithTreeNode(target.col, target.row).rowHeaderPaths as any;
+ const sourceRowHeaderPaths = this.getCellHeaderPathsWidthTreeNode(source.col, source.row).rowHeaderPaths as any;
+ const targetRowHeaderPaths = this.getCellHeaderPathsWidthTreeNode(target.col, target.row).rowHeaderPaths as any;
const sourceRowHeaderNode = sourceRowHeaderPaths[sourceRowHeaderPaths.length - 1];
const targetRowHeaderNode = targetRowHeaderPaths[sourceRowHeaderPaths.length - 1];
//整体移动的列数
@@ -2608,14 +2254,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
);
sourceIds.unshift((targetIndex - this.currentPageStartIndex) as any, 0 as any);
Array.prototype.splice.apply(this._rowHeaderCellIds, sourceIds);
-
- // 表头id _rowHeaderCellFullPathIds
- const sourceIds0 = this._rowHeaderCellFullPathIds.splice(
- sourceCellRange.start.row - this.columnHeaderLevelCount,
- sourceSize
- );
- sourceIds0.unshift((targetIndex - this.currentPageStartIndex) as any, 0 as any);
- Array.prototype.splice.apply(this._rowHeaderCellFullPathIds, sourceIds0);
// 表头id _rowHeaderCellIds_FULL进行调整
// 从header id的二维数组中取出需要操作的source ids
const sourceIds_FULL = this._rowHeaderCellIds_FULL.splice(
@@ -2624,13 +2262,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
);
sourceIds_FULL.unshift(targetIndex as any, 0 as any);
Array.prototype.splice.apply(this._rowHeaderCellIds_FULL, sourceIds_FULL);
- // 表头id _rowHeaderCellFullPathIds_FULL进行调整
- const sourceIds_FULL0 = this._rowHeaderCellFullPathIds_FULL.splice(
- sourceCellRange.start.row - this.columnHeaderLevelCount + this.currentPageStartIndex,
- sourceSize
- );
- sourceIds_FULL0.unshift(targetIndex as any, 0 as any);
- Array.prototype.splice.apply(this._rowHeaderCellFullPathIds_FULL, sourceIds_FULL0);
// 对维度树结构调整节点位置
this.rowDimensionTree.movePosition(
sourceRowHeaderPaths.length - 1,
@@ -2666,9 +2297,12 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
// }
IPivotTableCellHeaderPaths | IDimensionInfo[]
): CellAddress | undefined {
- let colHeaderPaths: IDimensionInfo[];
- let rowHeaderPaths: IDimensionInfo[];
- let isCornerCell = false;
+ let colHeaderPaths;
+ let rowHeaderPaths: {
+ dimensionKey?: string;
+ indicatorKey?: string;
+ value?: string;
+ }[];
let forceBody = false;
if (Array.isArray(dimensionPaths)) {
if (dimensionPaths.length > this.rowDimensionKeys.length + this.colDimensionKeys.length) {
@@ -2710,32 +2344,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.fullRowDimensionKeys.indexOf(b.dimensionKey ?? this.indicatorDimensionKey)
);
});
-
- colHeaderPaths?.forEach(a => {
- if (a.isPivotCorner) {
- isCornerCell = true;
- }
- });
- rowHeaderPaths?.forEach(a => {
- if (a.isPivotCorner) {
- isCornerCell = true;
- }
- });
- if (isCornerCell) {
- if (this.cornerSetting.titleOnDimension === 'row') {
- for (let i = 0; i < this.rowDimensionKeys.length; i++) {
- if (rowHeaderPaths[0].dimensionKey === this.rowDimensionKeys[i]) {
- return { col: i + this.leftRowSeriesNumberColumnCount, row: 0 };
- }
- }
- } else {
- for (let i = 0; i < this.colDimensionKeys.length; i++) {
- if (colHeaderPaths[0].dimensionKey === this.colDimensionKeys[i]) {
- return { col: 0, row: i };
- }
- }
- }
- }
let needLowestLevel = false; // needLowestLevel来标记是否需要 提供到最底层的维度层级信息
// 如果行列维度都有值 说明是匹配body单元格 那这个时候 维度层级应该是满的
if (colHeaderPaths?.length >= 1 && rowHeaderPaths?.length >= 1) {
@@ -2850,7 +2458,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} //树形展示的情况下 肯定是在第0列
}
if (colDimensionFinded || forceBody) {
- col = this.rowHeaderLevelCount + this.leftRowSeriesNumberColumnCount;
+ col = this.rowHeaderLevelCount;
const { startInTotal, level } = (colDimensionFinded as ITreeLayoutHeadNode) ?? defaultDimension;
col += startInTotal ?? 0;
defaultRow = this.columnHeaderTitle ? level + 1 : level;
@@ -2912,7 +2520,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
((this.isFrozenRow(col, row) || this.isBottomFrozenRow(col, row)) &&
isHasCartesianChartInline(col, row, 'col', this))
) {
- const getAxisConfigInPivotChart = Factory.getFunction('getAxisConfigInPivotChart') as GetAxisConfigInPivotChart;
return getAxisConfigInPivotChart(col, row, this);
}
return undefined;
@@ -2936,7 +2543,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (!this._table.isPivotChart()) {
return false;
}
- if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this.indicatorsDefine)) {
+ if (this.indicatorKeys.length >= 1 && checkHasCartesianChart(this)) {
if (
(this.isBottomFrozenRow(col, row) && isHasCartesianChartInline(col, row, 'col', this)) ||
(this.isRightFrozenColumn(col, row) && isHasCartesianChartInline(col, row, 'row', this))
@@ -2983,7 +2590,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
setPagination(pagination: IPagination): void {
this.clearCellRangeMap();
- this._table.internalProps.useOneRowHeightFillAll = false;
this.pagination = pagination;
if (
@@ -3002,18 +2608,10 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.currentPageStartIndex = perPageCount * (currentPage || 0);
this.currentPageEndIndex = this.currentPageStartIndex + perPageCount;
this._rowHeaderCellIds = this._rowHeaderCellIds_FULL?.slice(this.currentPageStartIndex, this.currentPageEndIndex);
- this._rowHeaderCellFullPathIds = this._rowHeaderCellFullPathIds_FULL?.slice(
- this.currentPageStartIndex,
- this.currentPageEndIndex
- );
} else {
this.currentPageStartIndex = 0;
this.currentPageEndIndex = this._rowHeaderCellIds_FULL.length;
this._rowHeaderCellIds = this._rowHeaderCellIds_FULL?.slice(this.currentPageStartIndex, this.currentPageEndIndex);
- this._rowHeaderCellFullPathIds = this._rowHeaderCellFullPathIds_FULL?.slice(
- this.currentPageStartIndex,
- this.currentPageEndIndex
- );
}
this.pagination && (this.pagination.totalCount = this._rowHeaderCellIds_FULL?.length);
}
@@ -3025,17 +2623,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
});
}
- getHeadNode(col: number, row: number) {
- let dimensions: IDimensionInfo[];
- const headerPaths = this.getCellHeaderPaths(col, row);
- if (headerPaths.rowHeaderPaths && (headerPaths.rowHeaderPaths?.length ?? 0) > 0) {
- dimensions = headerPaths.rowHeaderPaths?.slice(0, headerPaths.rowHeaderPaths.length);
- } else if (headerPaths.colHeaderPaths && headerPaths.colHeaderPaths.length > 0) {
- dimensions = headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length);
- }
- return this.getHeadNodeByRowOrColDimensions(dimensions, col, row);
- }
- getHeadNodeByRowOrColDimensions(dimensions: IDimensionInfo[], col?: number, row?: number) {
+ getHeadNode(dimensions: IDimensionInfo[]) {
if (!Array.isArray(dimensions)) {
return undefined;
}
@@ -3043,18 +2631,6 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
let rowDimension;
let colArr = this.columnTree;
let colDimension;
-
- // 处理带有扩展row时 获取node错误问题 rowArr需要变更为有相应扩展后的tree
- if (
- isValid(row) &&
- isValid(col) &&
- this.rowHierarchyType === 'tree' &&
- this.extensionRows &&
- col >= 1 + this.leftRowSeriesNumberColumnCount
- ) {
- const hdId = this.getCellId(col - 1, row);
- rowArr = this._rowHeaderExtensionTree[hdId].tree.children;
- }
for (let i = 0; i < dimensions.length; i++) {
const highlightDimension = dimensions[i];
if (
@@ -3087,7 +2663,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if (isCol) {
continue;
}
- for (let k = 0; k < rowArr?.length ?? 0; k++) {
+ for (let k = 0; k < rowArr.length; k++) {
const dimension = rowArr[k];
if (
(isValid(highlightDimension.dimensionKey) &&
@@ -3114,6 +2690,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
}
return undefined;
}
+
clearCellRangeMap() {
// this._cellRangeMap.clear();
this._largeCellRangeCache.length = 0;
@@ -3159,7 +2736,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if ((this._table as PivotChart)._selectedDataItemsInChart.length >= 1) {
const match = (this._table as PivotChart)._selectedDataItemsInChart.find(item => {
for (const itemKey in item) {
- if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
+ if (item[itemKey] !== datum[itemKey]) {
return false;
}
}
@@ -3169,7 +2746,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} else if ((this._table as PivotChart)._selectedDimensionInChart?.length) {
// 判断维度点击
const match = (this._table as PivotChart)._selectedDimensionInChart.every(item => {
- if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
+ if (datum[item.key] !== item.value) {
return false;
}
return true;
@@ -3184,7 +2761,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
if ((this._table as PivotChart)._selectedDataItemsInChart.length >= 1) {
const match = (this._table as PivotChart)._selectedDataItemsInChart.find(item => {
for (const itemKey in item) {
- if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
+ if (item[itemKey] !== datum[itemKey]) {
return false;
}
}
@@ -3194,7 +2771,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
} else if ((this._table as PivotChart)._selectedDimensionInChart?.length) {
// 判断维度点击
const match = (this._table as PivotChart)._selectedDimensionInChart.every(item => {
- if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
+ if (datum[item.key] !== item.value) {
return false;
}
return true;
@@ -3460,10 +3037,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
return totalCount;
}
resetHeaderTree() {
- this.colIndex = 0;
//和初始化代码逻辑一致 但未考虑透视图类型
- this._rowHeaderCellFullPathIds_FULL = [];
- this._columnHeaderCellFullPathIds = [];
+ this._rowHeaderCellIds_FULL = [];
this._columnHeaderCellIds = [];
const dataset = this.dataset;
// if (dataset) {
@@ -3477,25 +3052,20 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
this.rowHierarchyType,
this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined
);
-
- this.resetColumnHeaderLevelCount();
-
//生成列表头单元格
this._generateColHeaderIds();
this.colIndex = 0;
//生成行表头单元格
this._generateRowHeaderIds();
- this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL);
+
+ this.resetColumnHeaderLevelCount();
+ this._rowHeaderCellIds_FULL = transpose(this._rowHeaderCellIds_FULL);
this._headerObjectMap = this._headerObjects.reduce((o, e) => {
o[e.id as number] = e;
return o;
}, {} as { [key: LayoutObjectId]: HeaderData });
-
- this._CellHeaderPathMap = new Map();
- this._largeCellRangeCache.length = 0;
- this.generateCellIdsConsiderHideHeader();
this.setPagination(this.pagination);
}
isSeriesNumberInHeader(col: number, row: number): boolean {
@@ -3577,93 +3147,17 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
/** 修改表头值 */
changeTreeNodeTitle(col: number, row: number, value: string) {
- // const headerPaths = this.getCellHeaderPaths(col, row);
- // if (headerPaths.rowHeaderPaths.length > 0) {
- // const headerTreeNode = this.getHeadNode(headerPaths.rowHeaderPaths.slice(0, headerPaths.rowHeaderPaths.length));
- // headerTreeNode.value = value;
- // } else if (headerPaths.colHeaderPaths.length > 0) {
- // const headerTreeNode = this.getHeadNode(headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length));
- // headerTreeNode.value = value;
- // }
- const headerTreeNode = this.getHeadNode(col, row);
- headerTreeNode.value = value;
+ const headerPaths = this.getCellHeaderPaths(col, row);
+ if (headerPaths.rowHeaderPaths.length > 0) {
+ const headerTreeNode = this.getHeadNode(headerPaths.rowHeaderPaths.slice(0, headerPaths.rowHeaderPaths.length));
+ headerTreeNode.value = value;
+ } else if (headerPaths.colHeaderPaths.length > 0) {
+ const headerTreeNode = this.getHeadNode(headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length));
+ headerTreeNode.value = value;
+ }
const id = this.getCellId(col, row);
this._headerObjectMap[id as number].title = value;
}
- changeCornerTitle(col: number, row: number, value: string) {
- if (this.isCornerHeader(col, row)) {
- const id = this.getCellId(col, row);
- this._headerObjectMap[id as number].title = value;
- }
- }
- generateCellIdsConsiderHideHeader() {
- // deal with hide header
- // 创建原数组的副本
- this._columnHeaderCellIds = this._columnHeaderCellFullPathIds.slice();
- if (!this.showColumnHeader) {
- if (this.indicatorsAsCol && !this.hideIndicatorName) {
- const indicatorIndex = this.colDimensionKeys.indexOf(IndicatorDimensionKeyPlaceholder);
- const indicatorIds: number[][] = this._columnHeaderCellIds.splice(indicatorIndex, 1);
- this._columnHeaderCellIds.splice(0, this._columnHeaderCellIds.length);
- this._columnHeaderCellIds.push(indicatorIds[0]);
- } else {
- this._columnHeaderCellIds.splice(0, this._columnHeaderCellIds.length);
- }
- }
- // 创建原数组的副本
- this._rowHeaderCellIds_FULL = this._rowHeaderCellFullPathIds_FULL.slice();
- if (!this.showRowHeader) {
- if (!this.indicatorsAsCol && !this.hideIndicatorName) {
- const indicatorIndex = this.rowDimensionKeys.indexOf(IndicatorDimensionKeyPlaceholder);
- this._rowHeaderCellIds_FULL.forEach((cellIds: number[], index: number) => {
- const _cellIds = cellIds.slice();
- const indicator = _cellIds.splice(indicatorIndex, 1);
- _cellIds.splice(0, _cellIds.length);
- _cellIds.push(indicator[0]);
- this._rowHeaderCellIds_FULL[index] = _cellIds;
- });
- } else {
- this._rowHeaderCellIds_FULL.forEach((cellIds: number[], index: number) => {
- const _cellIds = cellIds.slice();
- _cellIds.splice(0, _cellIds.length);
- this._rowHeaderCellIds_FULL[index] = _cellIds;
- });
- }
- }
- this._rowHeaderCellIds = this._rowHeaderCellIds_FULL.slice();
-
- // 创建原数组的副本
- this._cornerHeaderCellIds = this._cornerHeaderCellFullPathIds.slice();
- if (this.rowHeaderLevelCount === 0 || this.columnHeaderLevelCount === 0) {
- this._cornerHeaderCellIds = [];
- } else if (this.cornerSetting.titleOnDimension === 'row' && !this.showRowHeader) {
- if (!this.indicatorsAsCol && !this.hideIndicatorName) {
- const indicatorIndex = this.rowDimensionKeys.indexOf(IndicatorDimensionKeyPlaceholder);
- this._cornerHeaderCellIds.forEach((cellIds: number[], index: number) => {
- const _cellIds = cellIds.slice();
- const indicator = _cellIds.splice(indicatorIndex, 1);
- _cellIds.splice(0, _cellIds.length);
- _cellIds.push(indicator[0]);
- this._cornerHeaderCellIds[index] = _cellIds;
- });
- } else {
- this._cornerHeaderCellIds.forEach((cellIds: number[], index: number) => {
- const _cellIds = cellIds.slice();
- _cellIds.splice(0, _cellIds.length);
- this._cornerHeaderCellIds[index] = _cellIds;
- });
- }
- } else if (this.cornerSetting.titleOnDimension === 'column' && !this.showColumnHeader) {
- if (this.indicatorsAsCol && !this.hideIndicatorName) {
- const indicatorIndex = this.colDimensionKeys.indexOf(IndicatorDimensionKeyPlaceholder);
- const indicatorIds: number[][] = this._cornerHeaderCellIds.splice(indicatorIndex, 1);
- this._cornerHeaderCellIds.splice(0, this._cornerHeaderCellIds.length);
- this._cornerHeaderCellIds.push(indicatorIds[0]);
- } else {
- this._cornerHeaderCellIds.splice(0, this._cornerHeaderCellIds.length);
- }
- }
- }
}
/** 计算 scale 的实际 range 长度 */
function scaleWholeRangeSize(count: number, bandwidth: number, paddingInner: number, paddingOuter: number) {
diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts
index ff8fe142a..9b5fb03c9 100644
--- a/packages/vtable/src/layout/row-height-map.ts
+++ b/packages/vtable/src/layout/row-height-map.ts
@@ -67,10 +67,6 @@ export class NumberRangeMap {
put(position: number, newValue: number) {
if (this.data.has(position)) {
const oldValue = this.data.get(position);
-
- if (oldValue === newValue) {
- return;
- }
this.data.set(position, newValue);
const difference = newValue - oldValue;
this.totalSum += difference;
diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index 5df2a9d98..744a08d66 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -37,12 +37,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
private seqId: number = 0;
private _headerObjects: HeaderData[];
private _headerObjectMap: { [key in LayoutObjectId]: HeaderData };
- private _headerObjectsIncludeHided: HeaderData[];
- // private _headerObjectMapIncludeHided: { [key in LayoutObjectId]: HeaderData };
// private _headerObjectFieldKey: { [key in string]: HeaderData };
private _headerCellIds: number[][];
private _columns: ColumnData[];
- private _columnsIncludeHided: ColumnData[];
rowSeriesNumberColumn: SeriesNumberColumnData[];
leftRowSeriesNumberColumn: SeriesNumberColumnData[];
rightRowSeriesNumberColumn: SeriesNumberColumnData[];
@@ -72,20 +69,11 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
this._showHeader = showHeader;
this._table = table;
this._columns = [];
- this._columnsIncludeHided = [];
this._headerCellIds = [];
this.hierarchyIndent = hierarchyIndent ?? 20;
this.hierarchyTextStartAlignment = table.options.hierarchyTextStartAlignment;
this.columnTree = new DimensionTree(columns as any, { seqId: 0 }); //seqId这里没有利用上 所有顺便传了0
- this._headerObjectsIncludeHided = this._addHeaders(0, columns, []);
- // this._headerObjectMapIncludeHided = this._headerObjectsIncludeHided.reduce((o, e) => {
- // o[e.id as number] = e;
- // return o;
- // }, {} as { [key in LayoutObjectId]: HeaderData });
-
- this._headerObjects = this._headerObjectsIncludeHided.filter(col => {
- return col.define.hide !== true;
- });
+ this._headerObjects = this._addHeaders(0, columns, []);
this._headerObjectMap = this._headerObjects.reduce((o, e) => {
o[e.id as number] = e;
return o;
@@ -741,9 +729,6 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
get columnObjects(): ColumnData[] {
return this._columns;
}
- get headerObjectsIncludeHided(): HeaderData[] {
- return this._headerObjectsIncludeHided;
- }
//对比multi-layout 那个里面有columWidths对象，保持结构一致
get columnWidths(): WidthData[] {
if (this.leftRowSeriesNumberColumnCount) {
@@ -1129,33 +1114,29 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
c => results.push(c)
);
} else {
- const colDef = {
+ const colDef = hd;
+ this._columns.push({
id: this.seqId++,
- field: hd.field,
+ field: colDef.field,
// fieldKey: colDef.fieldKey,
- fieldFormat: hd.fieldFormat,
- width: hd.width,
- minWidth: hd.minWidth,
- maxWidth: hd.maxWidth,
- icon: hd.icon,
- cellType: hd.cellType ?? (hd as any).columnType ?? 'text',
- chartModule: 'chartModule' in hd ? hd.chartModule : null, // todo: 放到对应的column对象中
- chartSpec: 'chartSpec' in hd ? hd.chartSpec : null, // todo: 放到对应的column对象中
- sparklineSpec: 'sparklineSpec' in hd ? hd.sparklineSpec : DefaultSparklineSpec, // todo: 放到对应的column对象中
- style: hd.style,
- define: hd,
- columnWidthComputeMode: hd.columnWidthComputeMode,
- disableColumnResize: hd?.disableColumnResize,
- aggregation: this._getAggregationForColumn(hd, col),
+ fieldFormat: colDef.fieldFormat,
+ width: colDef.width,
+ minWidth: colDef.minWidth,
+ maxWidth: colDef.maxWidth,
+ icon: colDef.icon,
+ cellType: colDef.cellType ?? (colDef as any).columnType ?? 'text',
+ chartModule: 'chartModule' in colDef ? colDef.chartModule : null, // todo: 放到对应的column对象中
+ chartSpec: 'chartSpec' in colDef ? colDef.chartSpec : null, // todo: 放到对应的column对象中
+ sparklineSpec: 'sparklineSpec' in colDef ? colDef.sparklineSpec : DefaultSparklineSpec, // todo: 放到对应的column对象中
+ style: colDef.style,
+ define: colDef,
+ columnWidthComputeMode: colDef.columnWidthComputeMode,
+ disableColumnResize: colDef?.disableColumnResize,
+ aggregation: this._getAggregationForColumn(colDef, col),
isChildNode: row >= 1
- };
- this._columnsIncludeHided.push(colDef);
- if (hd.hide !== true) {
- this._columns.push(colDef);
-
- for (let r = row + 1; r < this._headerCellIds.length; r++) {
- this._headerCellIds[r][col] = id;
- }
+ });
+ for (let r = row + 1; r < this._headerCellIds.length; r++) {
+ this._headerCellIds[r][col] = id;
}
}
});
diff --git a/packages/vtable/src/layout/tree-helper.ts b/packages/vtable/src/layout/tree-helper.ts
index 6292ae6c2..e780de5c6 100644
--- a/packages/vtable/src/layout/tree-helper.ts
+++ b/packages/vtable/src/layout/tree-helper.ts
@@ -9,7 +9,6 @@ import type {
HeaderData,
ICustomRender,
IDimension,
- IHeaderTreeDefine,
IIndicator,
IRowDimension,
LayoutObjectId
@@ -44,7 +43,6 @@ interface ITreeLayoutBaseHeadNode {
interface ITreeLayoutDimensionHeadNode extends ITreeLayoutBaseHeadNode {
dimensionKey: string;
- virtual?: boolean;
}
interface ITreeLayoutIndicatorHeadNode extends ITreeLayoutBaseHeadNode {
indicatorKey: string;
@@ -81,8 +79,8 @@ export class DimensionTree {
// blockStartIndexMap: Map = new Map();
// blockEndIndexMap: Map = new Map();
dimensionKeys: NumberMap = new NumberMap();
- dimensionKeysIncludeVirtual: NumberMap = new NumberMap();
// dimensions: IDimension[] | undefined;//目前用不到这个
+
cache: Map = new Map();
constructor(
tree: ITreeLayoutHeadNode[],
@@ -103,13 +101,12 @@ export class DimensionTree {
// this.dimensions = dimensions;
this.cache.clear();
this.dimensionKeys = new NumberMap();
- this.dimensionKeysIncludeVirtual = new NumberMap();
this.tree.children = tree as ITreeLayoutHeadNode[];
// const re = { totalLevel: 0 };
// if (updateTreeNode) this.updateTreeNode(this.tree, 0, re, this.tree);
// else
this.setTreeNode(this.tree, 0, this.tree);
- // this.totalLevel = this.dimensionKeys.count();
+ this.totalLevel = this.dimensionKeys.count();
}
setTreeNode(node: ITreeLayoutHeadNode, startIndex: number, parent: ITreeLayoutHeadNode): number {
node.startIndex = startIndex;
@@ -120,22 +117,8 @@ export class DimensionTree {
// if (!node.id) node.id = ++seqId;
// }
if (node.dimensionKey ?? node.indicatorKey) {
- if (
- !node.virtual &&
- !this.dimensionKeys.contain(node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey)
- ) {
+ !this.dimensionKeys.contain(node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey) &&
this.dimensionKeys.put(node.level, node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey);
- }
- if (
- !this.dimensionKeysIncludeVirtual.contain(
- node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey
- )
- ) {
- this.dimensionKeysIncludeVirtual.put(
- node.level,
- node.indicatorKey ? IndicatorDimensionKeyPlaceholder : node.dimensionKey
- );
- }
if (!node.id) {
node.id = ++this.sharedVar.seqId;
}
@@ -147,7 +130,6 @@ export class DimensionTree {
if (children?.length >= 1) {
children.forEach((n: any) => {
n.level = (node.level ?? 0) + 1;
- this.totalLevel = Math.max(this.totalLevel, n.level + 1);
size += this.setTreeNode(n, size, node);
});
} else {
@@ -158,14 +140,12 @@ export class DimensionTree {
//树形展示 有子节点 且下一层需要展开
children.forEach((n: any) => {
n.level = (node.level ?? 0) + 1;
- this.totalLevel = Math.max(this.totalLevel, n.level + 1);
size += this.setTreeNode(n, size, node);
});
} else if (node.hierarchyState === HierarchyState.collapse && children?.length >= 1) {
//树形展示 有子节点 且下一层不需要展开
children.forEach((n: any) => {
n.level = (node.level ?? 0) + 1;
- this.totalLevel = Math.max(this.totalLevel, n.level + 1);
this.setTreeNode(n, size, node);
});
} else if (
@@ -178,7 +158,6 @@ export class DimensionTree {
children?.length >= 1 &&
children.forEach((n: any) => {
n.level = (node.level ?? 0) + 1;
- this.totalLevel = Math.max(this.totalLevel, n.level + 1);
size += this.setTreeNode(n, size, node);
});
} else if (children?.length >= 1 || children === true) {
@@ -187,7 +166,6 @@ export class DimensionTree {
children?.length >= 1 &&
children.forEach((n: any) => {
n.level = (node.level ?? 0) + 1;
- this.totalLevel = Math.max(this.totalLevel, n.level + 1);
this.setTreeNode(n, size, node);
});
} else {
@@ -366,7 +344,6 @@ export function generateLayoutTree(tree: LayouTreeNode[], children: ITreeLayoutH
dimensionKey?: string;
indicatorKey?: string;
value: string;
- virtual?: boolean;
hierarchyState: HierarchyState;
children: any;
} = {
@@ -374,8 +351,7 @@ export function generateLayoutTree(tree: LayouTreeNode[], children: ITreeLayoutH
indicatorKey: node.indicatorKey,
value: node.value,
hierarchyState: node.hierarchyState,
- children: undefined,
- virtual: node.virtual ?? false
+ children: undefined
};
tree.push(diemnsonNode);
if (node.children) {
@@ -442,7 +418,7 @@ export function dealHeader(
headerType: indicatorInfo?.headerType ?? dimensionInfo?.headerType ?? 'text',
headerIcon: indicatorInfo?.headerIcon ?? dimensionInfo?.headerIcon,
// define: hd,
- define: Object.assign({}, hd, indicatorInfo ?? Object.assign({}, dimensionInfo, { sort: undefined })),
+ define: Object.assign({}, hd, indicatorInfo ?? dimensionInfo),
fieldFormat: indicatorInfo?.headerFormat ?? dimensionInfo?.headerFormat,
// iconPositionList:[]
dropDownMenu: indicatorInfo?.dropDownMenu ?? dimensionInfo?.dropDownMenu,
@@ -456,7 +432,6 @@ export function dealHeader(
minWidth: (dimensionInfo as IRowDimension)?.minWidth,
maxWidth: (dimensionInfo as IRowDimension)?.maxWidth,
showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort,
- sort: indicatorInfo?.sort,
description: dimensionInfo?.description
};
diff --git a/packages/vtable/src/plugins/custom-cell-style.ts b/packages/vtable/src/plugins/custom-cell-style.ts
index a7a89558f..32cec9446 100644
--- a/packages/vtable/src/plugins/custom-cell-style.ts
+++ b/packages/vtable/src/plugins/custom-cell-style.ts
@@ -27,7 +27,7 @@ export class CustomCellStylePlugin {
const customStyleId = this.getCustomCellStyleId(col, row);
if (customStyleId) {
const styleOption = this.getCustomCellStyleOption(customStyleId);
- return styleOption?.style;
+ return styleOption.style;
}
return undefined;
}
@@ -133,8 +133,6 @@ export class CustomCellStylePlugin {
}
updateCustomCell(customCellStyle: CustomCellStyle[], customCellStyleArrangement: CustomCellStyleArrangement[]) {
- this.customCellStyle.length = 0;
- this.customCellStyleArrangement.length = 0;
customCellStyle.forEach((cellStyle: CustomCellStyle) => {
this.registerCustomCellStyle(cellStyle.id, cellStyle.style);
});
@@ -142,10 +140,6 @@ export class CustomCellStylePlugin {
this.arrangeCustomCellStyle(cellStyle.cellPosition, cellStyle.customStyleId);
});
}
-
- hasCustomCellStyle(customStyleId: string) {
- return this.customCellStyle.some(style => style.id === customStyleId);
- }
}
export function mergeStyle(cacheStyle: Style, customCellStyle: ColumnStyleOption): Style {
diff --git a/packages/vtable/src/scenegraph/animation/appear.ts b/packages/vtable/src/scenegraph/animation/appear.ts
deleted file mode 100644
index 5ed3bd720..000000000
--- a/packages/vtable/src/scenegraph/animation/appear.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Text } from '@src/vrender';
-import type { BaseTableAPI } from '../../ts-types/base-table';
-
-export function dealWithAnimationAppear(table: BaseTableAPI) {
- if (!table.options.animationAppear) {
- return;
- }
-
- let duration: number;
- let delay: number;
- let type: 'all' | 'one-by-one';
- let direction: 'row' | 'column';
-
- if (table.options.animationAppear === true) {
- duration = 500;
- delay = 0;
- type = 'one-by-one';
- direction = 'column';
- } else {
- duration = table.options.animationAppear.duration ?? 500;
- delay = table.options.animationAppear.delay ?? 0;
- type = table.options.animationAppear.type ?? 'one-by-one';
- direction = table.options.animationAppear.direction ?? 'row';
- }
-
- const { scenegraph: scene, frozenColCount, frozenRowCount } = table;
-
- // header cell
- const { colStart, colEnd, rowStart, rowEnd } = scene.proxy; // to do: right bottom frozen
-
- for (let col = 0; col <= colEnd; col++) {
- for (let row = 0; row <= rowEnd; row++) {
- const cellGroup = scene.highPerformanceGetCell(col, row);
- if (cellGroup && cellGroup.role === 'cell') {
- cellGroup.forEachChildren((child: Text) => {
- child.setAttribute('opacity', 0);
- child
- .animate()
- .wait(type === 'one-by-one' ? (direction === 'row' ? row : col) * (duration - delay) : delay)
- .to({ opacity: 1 }, duration, 'linear');
- });
- }
- }
- }
-}
diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts
index 38b484ea2..3022a71f0 100644
--- a/packages/vtable/src/scenegraph/component/custom.ts
+++ b/packages/vtable/src/scenegraph/component/custom.ts
@@ -10,7 +10,6 @@ import {
} from '@src/vrender';
import { isArray, isFunction, isObject, isString, isValid } from '@visactor/vutils';
import type {
- CellRange,
ICustomLayout,
ICustomRender,
ICustomRenderElement,
@@ -20,13 +19,6 @@ import type {
import { Icon } from '../graphic/icon';
import type { BaseTableAPI } from '../../ts-types/base-table';
import type { percentCalcObj } from '../../render/layout';
-import { emptyCustomLayout } from '../../components/react/react-custom-layout';
-import { getTargetCell } from '../../event/util';
-import type { Group } from '../graphic/group';
-
-export const CUSTOM_MERGE_PRE_NAME = '_custom_';
-export const CUSTOM_CONTAINER_NAME = 'custom-container';
-export const CUSTOM_MERGE_CONTAINER_NAME = CUSTOM_MERGE_PRE_NAME + '_0';
export function dealWithCustom(
customLayout: ICustomLayout,
@@ -38,7 +30,6 @@ export function dealWithCustom(
autoWidth: boolean,
autoHeight: boolean,
padding: [number, number, number, number],
- range: CellRange | undefined,
table: BaseTableAPI
) {
let renderDefault = true;
@@ -48,10 +39,6 @@ export function dealWithCustom(
let customElements;
let elementsGroup: VGroup;
- if (customLayout === 'react-custom-layout') {
- // customLayout = table._reactCreateGraphic;
- customLayout = table.reactCustomLayout?.getCustomLayoutFunc(col, row) || emptyCustomLayout;
- }
if (typeof customLayout === 'function') {
const arg = {
col,
@@ -76,9 +63,7 @@ export function dealWithCustom(
// expectedHeight = customRenderObj.expectedHeight;
if (customRenderObj.rootContainer instanceof VGroup) {
elementsGroup = customRenderObj.rootContainer;
- elementsGroup.name = CUSTOM_CONTAINER_NAME;
- (elementsGroup as any).col = col;
- (elementsGroup as any).row = row;
+ elementsGroup.name = 'custom-container';
// } else if (customRenderObj.rootContainer) {
// customElements = customRenderObj.rootContainer.getElements(undefined, false, false);
}
@@ -136,11 +121,6 @@ export function dealWithCustom(
// for percent calc
dealPercentCalc(elementsGroup, width, height);
- // deal with merge cell attribute update
- if (range && (range.start.col !== range.end.col || range.start.row !== range.end.row)) {
- bindAttributeUpdate(elementsGroup, col, row, 0);
- }
-
return {
elementsGroup,
renderDefault
@@ -162,7 +142,7 @@ function adjustElementToGroup(
stroke: false,
pickable: false
});
- customGroup.name = CUSTOM_CONTAINER_NAME;
+ customGroup.name = 'custom-container';
const elementsAdjusted = adjustElementsPos(elements, width, height, value);
elementsAdjusted.forEach(element => {
@@ -501,70 +481,3 @@ function parseToGraphic(g: any, props: any) {
// }
}
}
-
-function bindAttributeUpdate(group: VGroup, col: number, row: number, index: number, preId?: string) {
- if (!group) {
- return;
- }
- group.name = `${CUSTOM_MERGE_PRE_NAME}${preId ?? ''}_${index}`;
- group.onBeforeAttributeUpdate = onBeforeAttributeUpdate as any;
- // group.on('afterAttributeUpdate', (e) => {console.log('afterAttributeUpdate', e)})
- if (group.type === 'group' && group.childrenCount) {
- group.forEachChildren((child: VGroup, childIndex: number) => {
- bindAttributeUpdate(child, col, row, childIndex, (preId ?? '') + '_' + index);
- });
- }
-}
-
-function onBeforeAttributeUpdate(val: Record, attribute: any) {
- // @ts-ignore
- const graphic = this as any;
- if (graphic.skipMergeUpdate) {
- return;
- }
- const cellGroup = getTargetCell(graphic) as Group;
- const table = ((cellGroup as any).stage as any).table as BaseTableAPI;
- graphic.skipAttributeUpdate = true;
- const { mergeStartCol, mergeEndCol, mergeStartRow, mergeEndRow } = cellGroup;
- if (
- isValid(mergeStartCol) &&
- isValid(mergeEndCol) &&
- isValid(mergeStartRow) &&
- isValid(mergeEndRow) &&
- (mergeStartCol !== mergeEndCol || mergeStartRow !== mergeEndRow)
- ) {
- for (let col = mergeStartCol; col <= mergeEndCol; col++) {
- for (let row = mergeStartRow; row <= mergeEndRow; row++) {
- if (col === cellGroup.col && row === cellGroup.row) {
- continue;
- }
- // const cell = table.scenegraph.getCell(col, row);
- const cell = table.scenegraph.highPerformanceGetCell(col, row);
- if (cell.role === 'cell') {
- const target = cell.getChildByName(graphic.name, true);
- if (!target || target.skipAttributeUpdate) {
- continue;
- }
- for (const key in val) {
- // 表格内merge 单元格布局时，会使用dx dy定位，避免重复更新值，属性同步跳过 dx dy
- // console.log(
- // '[onBeforeAttributeUpdate]',
- // target._uid,
- // cellGroup.col,
- // cellGroup.row,
- // col,
- // row,
- // key,
- // val[key]
- // );
- if (val[key] !== target.attribute[key] && key !== 'dx' && key !== 'dy') {
- target.setAttribute(key, val[key]);
- }
- }
- }
- }
- }
- graphic.skipAttributeUpdate = undefined;
- // return attribute;
- }
-}
diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts
index dcf46f92b..81e4fa053 100644
--- a/packages/vtable/src/scenegraph/component/table-component.ts
+++ b/packages/vtable/src/scenegraph/component/table-component.ts
@@ -7,7 +7,6 @@ import { DrillIcon } from './drill-icon';
import { CellMover } from './cell-mover';
import { getColX, getRowY } from './util';
import type { BaseTableAPI } from '../../ts-types/base-table';
-import { isValid } from '@visactor/vutils';
/**
* @description: 表格内容外组件
@@ -269,20 +268,7 @@ export class TableComponent {
const theme = this.table.theme;
const scrollRailColor = theme.scrollStyle?.scrollRailColor as string;
const scrollSliderColor = theme.scrollStyle?.scrollSliderColor as string;
- const scrollSliderCornerRadius = theme.scrollStyle?.scrollSliderCornerRadius;
const width = theme.scrollStyle?.width as number;
-
- let sliderStyle;
- if (isValid(scrollSliderCornerRadius)) {
- sliderStyle = {
- cornerRadius: scrollSliderCornerRadius,
- fill: scrollSliderColor
- };
- } else {
- sliderStyle = {
- fill: scrollSliderColor
- };
- }
// const visible = theme.scrollStyle?.visible as string;
// const hoverOn = theme.scrollStyle?.hoverOn as boolean;
@@ -296,7 +282,9 @@ export class TableComponent {
railStyle: {
fill: scrollRailColor
},
- sliderStyle,
+ sliderStyle: {
+ fill: scrollSliderColor
+ },
range: [0, 0.1],
// scrollRange: [0.4, 0.8]
visible: false
@@ -315,7 +303,9 @@ export class TableComponent {
railStyle: {
fill: scrollRailColor
},
- sliderStyle,
+ sliderStyle: {
+ fill: scrollSliderColor
+ },
range: [0, 0.1],
visible: false
});
@@ -344,13 +334,7 @@ export class TableComponent {
const frozenColsWidth = this.table.getFrozenColsWidth();
const bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight();
const rightFrozenColsWidth = this.table.getRightFrozenColsWidth();
-
- // _disableColumnAndRowSizeRound环境中，可能出现
- // getAllColsWidth/getAllRowsHeight(A) + getAllColsWidth/getAllRowsHeight(B) < getAllColsWidth/getAllRowsHeight(A+B)
- // （由于小数在取数时被省略）
- // 这里加入tolerance，避免出现无用滚动
- const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
- if (totalWidth > tableWidth + sizeTolerance) {
+ if (totalWidth > tableWidth) {
const y = Math.min(tableHeight, totalHeight);
const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
@@ -390,7 +374,7 @@ export class TableComponent {
});
}
- if (totalHeight > tableHeight + sizeTolerance) {
+ if (totalHeight > tableHeight) {
const x = Math.min(tableWidth, totalWidth);
const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
@@ -734,26 +718,15 @@ export class TableComponent {
// scrollbar
const scrollRailColor = theme.scrollStyle?.scrollRailColor as string;
const scrollSliderColor = theme.scrollStyle?.scrollSliderColor as string;
- const scrollSliderCornerRadius = theme.scrollStyle?.scrollSliderCornerRadius;
const width = theme.scrollStyle?.width as number;
-
- let sliderStyle;
- if (isValid(scrollSliderCornerRadius)) {
- sliderStyle = {
- cornerRadius: scrollSliderCornerRadius,
- fill: scrollSliderColor
- };
- } else {
- sliderStyle = {
- fill: scrollSliderColor
- };
- }
this.hScrollBar.setAttributes({
height: width,
railStyle: {
fill: scrollRailColor
},
- sliderStyle
+ sliderStyle: {
+ fill: scrollSliderColor
+ }
});
this.vScrollBar.setAttributes({
@@ -761,7 +734,9 @@ export class TableComponent {
railStyle: {
fill: scrollRailColor
},
- sliderStyle
+ sliderStyle: {
+ fill: scrollSliderColor
+ }
});
// columnResizeLine & columnResizeBgLine
diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts
index e4e221b6d..f13d987f2 100644
--- a/packages/vtable/src/scenegraph/graphic/chart.ts
+++ b/packages/vtable/src/scenegraph/graphic/chart.ts
@@ -149,7 +149,7 @@ export class Chart extends Group {
*/
deactivate() {
this.active = false;
- // move active chart view box out of browser view
+ // move active chart view box out of broswer view
// to avoid async render when chart is releasd
this.activeChartInstance?.updateViewBox(
{
diff --git a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
index 370056650..eec532b3c 100644
--- a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
+++ b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
@@ -13,10 +13,10 @@ import { BaseRenderContributionTime, createRectPath, injectable } from '@src/vre
import type { Group } from '../group';
import { getCellHoverColor } from '../../../state/hover/is-cell-hover';
import type { BaseTableAPI } from '../../../ts-types/base-table';
+import { getQuadProps } from '../../utils/padding';
import { getCellMergeInfo } from '../../utils/get-cell-merge';
import { InteractionState } from '../../../ts-types';
import { isArray } from '@visactor/vutils';
-import { getCellSelectColor } from '../../../state/select/is-cell-select-highlight';
// const highlightDash: number[] = [];
@@ -122,8 +122,8 @@ export class SplitGroupAfterRenderContribution implements IGroupRenderContributi
) => boolean
) {
const {
- // width = groupAttribute.width,
- // height = groupAttribute.height,
+ width = groupAttribute.width,
+ height = groupAttribute.height,
// 基础border
stroke = groupAttribute.stroke,
strokeArrayColor = (groupAttribute as any).strokeArrayColor,
@@ -137,7 +137,6 @@ export class SplitGroupAfterRenderContribution implements IGroupRenderContributi
// highlightStrokeArrayWidth = (groupAttribute as any).highlightStrokeArrayWidth,
// highlightStrokeArrayPart = (groupAttribute as any).highlightStrokeArrayPart,
} = group.attribute as any;
- let { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
// lineWidth === 0 不绘制
if (!stroke || (!Array.isArray(strokeArrayWidth) && lineWidth === 0)) {
@@ -156,35 +155,30 @@ export class SplitGroupAfterRenderContribution implements IGroupRenderContributi
return;
}
const bottomRight = table?.theme.cellBorderClipDirection === 'bottom-right';
- // let deltaWidth = 0;
- // let deltaHeight = 0;
+ let deltaWidth = 0;
+ let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
- // if (group.role === 'cell') {
- // const col = (group as any).col as number;
- // const row = (group as any).row as number;
- // if (table && col === table.colCount - 1) {
- // deltaWidth = 1;
- // }
- // if (table && row === table.rowCount - 1) {
- // deltaHeight = 1;
- // }
- // }
+ if (group.role === 'cell') {
+ const col = (group as any).col as number;
+ const row = (group as any).row as number;
+ if (table && col === table.colCount - 1) {
+ deltaWidth = 1;
+ }
+ if (table && row === table.rowCount - 1) {
+ deltaHeight = 1;
+ }
+ }
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}
- if (table.options.customConfig?._disableColumnAndRowSizeRound) {
- width = Math.round(width);
- height = Math.round(height);
- }
const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
group,
- Math.ceil(width),
- Math.ceil(height),
- bottomRight
+ Math.ceil(width + deltaWidth),
+ Math.ceil(height + deltaHeight)
);
widthForStroke = widthFroDraw;
heightForStroke = heightFroDraw;
@@ -268,9 +262,8 @@ export function renderStroke(
context.setStrokeStyle(group, group.attribute, x, y, groupAttribute);
// if (isHighlight) {
// context.setLineDash(highlightDash);
+ // context.lineCap = 'butt';
// }
- // const oldLineCap = context.lineCap;
- // context.lineCap = 'square';
const { lineDash = groupAttribute.lineDash } = group.attribute as any;
// const lineDash = context.getLineDash();
@@ -282,23 +275,16 @@ export function renderStroke(
context.beginPath();
context.moveTo(x, y);
- const strokeTop = (isStrokeTrue || stroke[0]) && (isWidthNumber || strokeArrayWidth[0]);
- const strokeRight = (isStrokeTrue || stroke[1]) && (isWidthNumber || strokeArrayWidth[1]);
- const strokeBottom = (isStrokeTrue || stroke[2]) && (isWidthNumber || strokeArrayWidth[2]);
- const strokeLeft = (isStrokeTrue || stroke[3]) && (isWidthNumber || strokeArrayWidth[3]);
-
// top
- if (strokeTop) {
+ if ((isStrokeTrue || stroke[0]) && (isWidthNumber || strokeArrayWidth[0])) {
// context.lineTo(x + width, y);
- const deltaLeft = (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
- const deltaRight = (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
if (isPart && Array.isArray(part[0])) {
- context.moveTo(x - deltaLeft + (width + deltaLeft + deltaRight) * part[0][0], y);
- context.lineTo(x - deltaLeft + (width + deltaLeft + deltaRight) * (part[0][1] - part[0][0]), y);
- context.moveTo(x + width + deltaRight, y);
+ context.moveTo(x + width * part[0][0], y);
+ context.lineTo(x + width * (part[0][1] - part[0][0]), y);
+ context.moveTo(x + width, y);
} else {
- context.moveTo(x - deltaLeft, y);
- context.lineTo(x + width + deltaRight, y);
+ context.moveTo(x, y);
+ context.lineTo(x + width, y);
}
if (isSplitDraw || isDash) {
if (strokeArrayColor && strokeArrayColor[0]) {
@@ -321,17 +307,15 @@ export function renderStroke(
context.moveTo(x + width, y);
}
// right
- if (strokeRight) {
+ if ((isStrokeTrue || stroke[1]) && (isWidthNumber || strokeArrayWidth[1])) {
// context.lineTo(x + width, y + height);
- const deltaTop = (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
- const deltaBottom = (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
if (isPart && Array.isArray(part[1])) {
- context.moveTo(x + width, y - deltaTop + height * part[1][0]);
- context.lineTo(x + width, y - deltaTop + (height + deltaTop + deltaBottom) * (part[1][1] - part[1][0]));
- context.moveTo(x + width, y + height + deltaBottom);
+ context.moveTo(x + width, y + height * part[1][0]);
+ context.lineTo(x + width, y + height * (part[1][1] - part[1][0]));
+ context.moveTo(x + width, y + height);
} else {
- context.moveTo(x + width, y - deltaTop);
- context.lineTo(x + width, y + height + deltaBottom);
+ context.moveTo(x + width, y);
+ context.lineTo(x + width, y + height);
}
if (isSplitDraw || isDash) {
if (strokeArrayColor && strokeArrayColor[1]) {
@@ -354,17 +338,15 @@ export function renderStroke(
context.moveTo(x + width, y + height);
}
// bottom
- if (strokeBottom) {
+ if ((isStrokeTrue || stroke[2]) && (isWidthNumber || strokeArrayWidth[2])) {
// context.lineTo(x, y + height);
- const deltaLeft = (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
- const deltaRight = (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
if (isPart && Array.isArray(part[2])) {
- context.moveTo(x - deltaLeft + (width + deltaLeft + deltaRight) * part[2][0], y + height);
- context.lineTo(x - deltaLeft + (width + deltaLeft + deltaRight) * (part[2][1] - part[2][0]), y + height);
- context.moveTo(x - deltaLeft, y + height);
+ context.moveTo(x + width * part[2][0], y + height);
+ context.lineTo(x + width * (part[2][1] - part[2][0]), y + height);
+ context.moveTo(x, y + height);
} else {
- context.moveTo(x - deltaLeft, y + height);
- context.lineTo(x + width + deltaRight, y + height);
+ context.moveTo(x, y + height);
+ context.lineTo(x + width, y + height);
}
if (isSplitDraw || isDash) {
if (strokeArrayColor && strokeArrayColor[2]) {
@@ -387,17 +369,15 @@ export function renderStroke(
context.moveTo(x, y + height);
}
// left
- if (strokeLeft) {
+ if ((isStrokeTrue || stroke[3]) && (isWidthNumber || strokeArrayWidth[3])) {
// context.lineTo(x, y);
- const deltaTop = (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
- const deltaBottom = (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
if (isPart && Array.isArray(part[3])) {
- context.moveTo(x, y - deltaTop + (height + deltaTop + deltaBottom) * part[3][0]);
- context.lineTo(x, y - deltaTop + (height + deltaTop + deltaBottom) * (part[3][1] - part[3][0]));
- context.moveTo(x, y - deltaTop);
+ context.moveTo(x, y + height * part[3][0]);
+ context.lineTo(x, y + height * (part[3][1] - part[3][0]));
+ context.moveTo(x, y);
} else {
- context.moveTo(x, y - deltaTop);
- context.lineTo(x, y + height + deltaBottom);
+ context.moveTo(x, y);
+ context.lineTo(x, y + height);
}
if (isSplitDraw || isDash) {
if (strokeArrayColor && strokeArrayColor[3]) {
@@ -428,7 +408,6 @@ export function renderStroke(
context.stroke();
}
context.lineDashOffset = 0;
- // context.lineCap = oldLineCap;
context.setLineDash([]);
}
@@ -473,7 +452,6 @@ export class DashGroupBeforeRenderContribution implements IGroupRenderContributi
stroke &&
Array.isArray(lineDash) &&
lineDash.length &&
- lineDash[0]?.length &&
!Array.isArray(strokeArrayColor) &&
!Array.isArray(strokeArrayWidth)
) {
@@ -518,50 +496,44 @@ export class DashGroupAfterRenderContribution implements IGroupRenderContributio
if (
!stroke ||
- !(Array.isArray(lineDash) && lineDash.length && lineDash[0]?.length) ||
+ !(Array.isArray(lineDash) && lineDash.length) ||
Array.isArray(strokeArrayColor) ||
Array.isArray(strokeArrayWidth)
) {
return;
}
- const table = (group.stage as any).table as BaseTableAPI;
- if (!table) {
- return;
- }
-
// convert lineDash to number[][]
const splitLineDash = isArray(lineDash[0]) ? getQuadLineDash(lineDash) : [lineDash, lineDash, lineDash, lineDash];
// const { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
let { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
- if (table.options.customConfig?._disableColumnAndRowSizeRound) {
- width = Math.round(width);
- height = Math.round(height);
- } else {
- width = Math.ceil(width);
- height = Math.ceil(height);
- }
+ width = Math.ceil(width);
+ height = Math.ceil(height);
let widthForStroke;
let heightForStroke;
if (lineWidth & 1) {
- const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
- const deltaWidth = 0;
- const deltaHeight = 0;
+ const table = (group.stage as any).table as BaseTableAPI;
+ if (!table) {
+ return;
+ }
+ const bottomRight = table?.theme.cellBorderClipDirection === 'bottom-right';
+ let deltaWidth = 0;
+ let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
- // if (group.role === 'cell') {
- // const col = (group as any).col as number;
- // const row = (group as any).row as number;
- // if (table && col === table.colCount - 1) {
- // deltaWidth = 1;
- // }
- // if (table && row === table.rowCount - 1) {
- // deltaHeight = 1;
- // }
- // }
+ if (group.role === 'cell') {
+ const col = (group as any).col as number;
+ const row = (group as any).row as number;
+ if (table && col === table.colCount - 1) {
+ deltaWidth = 1;
+ }
+ if (table && row === table.rowCount - 1) {
+ deltaHeight = 1;
+ }
+ }
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
@@ -570,8 +542,7 @@ export class DashGroupAfterRenderContribution implements IGroupRenderContributio
const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
group,
Math.ceil(width + deltaWidth),
- Math.ceil(height + deltaHeight),
- bottomRight
+ Math.ceil(height + deltaHeight)
);
widthForStroke = widthFroDraw;
heightForStroke = heightFroDraw;
@@ -710,7 +681,7 @@ export class AdjustPosGroupAfterRenderContribution implements IGroupRenderContri
cornerRadius = groupAttribute.cornerRadius
} = group.attribute as any;
- let { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
+ const { width = groupAttribute.width, height = groupAttribute.height } = group.attribute;
// width = Math.ceil(width);
// height = Math.ceil(height);
@@ -744,46 +715,37 @@ export class AdjustPosGroupAfterRenderContribution implements IGroupRenderContri
// height -= 1;
// }
// }
-
+ const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
+ group,
+ Math.ceil(width),
+ Math.ceil(height)
+ );
+ context.beginPath();
const table = (group.stage as any).table as BaseTableAPI;
if (!table) {
return;
}
- if (table.options.customConfig?._disableColumnAndRowSizeRound) {
- width = Math.round(width);
- height = Math.round(height);
- }
-
- context.beginPath();
-
const bottomRight = table?.theme.cellBorderClipDirection === 'bottom-right';
- const deltaWidth = 0;
- const deltaHeight = 0;
+ let deltaWidth = 0;
+ let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
- // if (group.role === 'cell') {
- // const col = (group as any).col as number;
- // const row = (group as any).row as number;
- // if (table && col === table.colCount - 1) {
- // deltaWidth = 1;
- // }
- // if (table && row === table.rowCount - 1) {
- // deltaHeight = 1;
- // }
- // }
+ if (group.role === 'cell') {
+ const col = (group as any).col as number;
+ const row = (group as any).row as number;
+ if (table && col === table.colCount - 1) {
+ deltaWidth = 1;
+ }
+ if (table && row === table.rowCount - 1) {
+ deltaHeight = 1;
+ }
+ }
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}
- const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
- group,
- Math.ceil(width),
- Math.ceil(height),
- bottomRight
- );
-
if (cornerRadius) {
// 测试后，cache对于重绘性能提升不大，但是在首屏有一定性能损耗，因此rect不再使用cache
createRectPath(context, x, y, widthFroDraw + deltaWidth, heightFroDraw + deltaHeight, cornerRadius);
@@ -827,16 +789,10 @@ export class AdjustColorGroupBeforeRenderContribution implements IGroupRenderCon
// 处理hover颜色
if ((group as Group).role === 'cell') {
const table = (group.stage as any).table as BaseTableAPI;
- if (table) {
- const selectColor = getCellSelectColor(group as Group, table);
- if (selectColor) {
- // show select highlight when scrolling
- (group.attribute as any)._vtableHightLightFill = selectColor;
- } else if (table.stateManager.interactionState !== InteractionState.scrolling) {
- const hoverColor = getCellHoverColor(group as Group, table);
- if (hoverColor) {
- (group.attribute as any)._vtableHightLightFill = hoverColor;
- }
+ if (table && table.stateManager.interactionState !== InteractionState.scrolling) {
+ const hoverColor = getCellHoverColor(group as Group, table);
+ if (hoverColor) {
+ (group.attribute as any)._vtableHoverFill = hoverColor;
}
}
}
@@ -871,18 +827,18 @@ export class AdjustColorGroupAfterRenderContribution implements IGroupRenderCont
) => boolean
) {
// 处理hover颜色
- if ((group.attribute as any)._vtableHightLightFill) {
+ if ((group.attribute as any)._vtableHoverFill) {
if (fillCb) {
// do nothing
// fillCb(context, group.attribute, groupAttribute);
} else if (fVisible) {
const oldColor = group.attribute.fill;
// draw hover fill
- group.attribute.fill = (group.attribute as any)._vtableHightLightFill as any;
+ group.attribute.fill = (group.attribute as any)._vtableHoverFill as any;
context.setCommonStyle(group, group.attribute, x, y, groupAttribute);
context.fill();
group.attribute.fill = oldColor;
- (group.attribute as any)._vtableHightLightFill = undefined;
+ (group.attribute as any)._vtableHoverFill = undefined;
}
}
}
@@ -1019,7 +975,7 @@ export class ClipBodyGroupAfterRenderContribution implements IGroupRenderContrib
}
}
-function getCellSizeForDraw(group: any, width: number, height: number, bottomRight: boolean) {
+function getCellSizeForDraw(group: any, width: number, height: number) {
const table = group.stage.table as BaseTableAPI;
if (group.role === 'cell') {
let col = group.col as number;
@@ -1030,25 +986,24 @@ function getCellSizeForDraw(group: any, width: number, height: number, bottomRig
row = mergeInfo.end.row;
}
- if (table && col === table.colCount - 1 && !bottomRight) {
+ if (table && col === table.colCount - 1) {
width -= 1;
- } else if (table && col === table.frozenColCount - 1 && table.scrollLeft && !bottomRight) {
+ } else if (table && col === table.frozenColCount - 1 && table.scrollLeft) {
width -= 1;
}
- if (table && row === table.rowCount - 1 && !bottomRight) {
+ if (table && row === table.rowCount - 1) {
height -= 1;
- } else if (table && row === table.frozenRowCount - 1 && table.scrollTop && !bottomRight) {
+ } else if (table && row === table.frozenRowCount - 1 && table.scrollTop) {
height -= 1;
}
} else if (group.role === 'corner-frozen') {
- if (table && table.scrollLeft && !bottomRight) {
+ if (table && table.scrollLeft) {
width -= 1;
}
- if (table && table.scrollTop && !bottomRight) {
+ if (table && table.scrollTop) {
height -= 1;
}
}
-
return { width, height };
}
diff --git a/packages/vtable/src/scenegraph/graphic/group.ts b/packages/vtable/src/scenegraph/graphic/group.ts
index e9e2f1908..90cd0aa66 100644
--- a/packages/vtable/src/scenegraph/graphic/group.ts
+++ b/packages/vtable/src/scenegraph/graphic/group.ts
@@ -1,8 +1,8 @@
-import type { IGraphic, IColor, IRect, INode, IGroupGraphicAttribute, ISetAttributeContext } from '@src/vrender';
+import type { IGraphic, IColor, IRect, INode } from '@src/vrender';
import { Group as VRenderGroup } from '@src/vrender';
import type { BaseTableAPI } from '../../ts-types/base-table';
import { InteractionState } from '../../ts-types';
-import { isNumber, type AABBBounds } from '@visactor/vutils';
+import type { AABBBounds } from '@visactor/vutils';
export class Group extends VRenderGroup {
role?: string;
@@ -22,31 +22,6 @@ export class Group extends VRenderGroup {
needUpdateWidth?: boolean;
needUpdateHeight?: boolean;
- // changes for size align for fs
- // constructor(attribute?: IGroupGraphicAttribute) {
- // dealWidthSize(attribute, attribute);
- // super(attribute);
- // }
-
- // setAttribute(key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext): void {
- // if (key === 'x' || key === 'y' || key === 'width' || key === 'height') {
- // this.attribute[`old${key}`];
- // }
- // const values = {
- // [key]: value
- // };
- // this.setAttributes(values, forceUpdateTag, context);
- // }
-
- // setAttributes(
- // params: Partial,
- // forceUpdateTag?: boolean,
- // context?: ISetAttributeContext
- // ): void {
- // dealWidthSize(params, this.attribute);
- // super.setAttributes(params, forceUpdateTag, context);
- // }
-
/**
* @description: 清空Group下全部子元素
* @return {*}
@@ -364,20 +339,13 @@ export class Group extends VRenderGroup {
this.colHeight += cellHeight;
}
}
-
- // doUpdateLocalMatrix() {
- // const oldX = this.attribute.x;
- // const oldY = this.attribute.y;
- // this.attribute.x = Math.floor(this.attribute.x);
- // this.attribute.y = Math.floor(this.attribute.y);
- // super.doUpdateLocalMatrix();
- // this.attribute.x = oldX;
- // this.attribute.y = oldY;
- // }
}
function after(group: Group, selfChange: boolean) {
- if (!group.stage || !group.stage.dirtyBounds || !group.stage.renderCount) {
+ if (!group.stage.dirtyBounds) {
+ return;
+ }
+ if (!(group.stage && group.stage.renderCount)) {
return;
}
// group的子元素导致的bounds更新不用做dirtyBounds
@@ -386,28 +354,3 @@ function after(group: Group, selfChange: boolean) {
}
group.stage.dirty(group.globalAABBBounds);
}
-
-// function dealWidthSize(values: any, attributes: any) {
-// const x = values.x ?? attributes.oldx ?? attributes.x ?? 0 + values.dx ?? attributes.dx ?? 0;
-// const y = values.y ?? attributes.oldy ?? attributes.y ?? 0 + values.dy ?? attributes.dy ?? 0;
-// const width = values.width ?? attributes.oldwidth ?? attributes.width ?? 0;
-// const height = values.height ?? attributes.oldheight ?? attributes.height ?? 0;
-// isNumber(values.width) && (values.oldwidth = values.width);
-// isNumber(values.height) && (values.oldheight = values.height);
-// isNumber(values.x) && (values.oldx = values.x);
-// isNumber(values.y) && (values.oldy = values.y);
-
-// if (Math.floor(x + width) > Math.floor(width) + Math.floor(x)) {
-// values.width = Math.ceil(width);
-// } else {
-// values.width = Math.floor(width);
-// }
-
-// if (Math.floor(y + height) > Math.floor(height) + Math.floor(y)) {
-// values.height = Math.ceil(height);
-// } else {
-// values.height = Math.floor(height);
-// }
-// isNumber(values.x) && (values.x = Math.floor(values.x));
-// isNumber(values.y) && (values.y = Math.floor(values.y));
-// }
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index 756ef2074..67ba4a622 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -8,6 +8,7 @@ import type {
ColumnDefine,
ColumnTypeOption,
ImageColumnDefine,
+ MappingRule,
ProgressbarColumnDefine,
IRowSeriesNumber,
TextColumnDefine,
@@ -16,25 +17,27 @@ import type {
import { dealWithCustom } from '../component/custom';
import type { Group } from '../graphic/group';
import { getProp } from '../utils/get-prop';
-import type { CreateChartCellGroup } from './cell-type/chart-cell';
-import type { CreateImageCellGroup } from './cell-type/image-cell';
-import type { CreateProgressBarCell } from './cell-type/progress-bar-cell';
-import type { CreateSparkLineCellGroup } from './cell-type/spark-line-cell';
-import type { CreateTextCellGroup } from './cell-type/text-cell';
-import type { CreateVideoCellGroup } from './cell-type/video-cell';
-import type { BaseTableAPI, HeaderData } from '../../ts-types/base-table';
+import { createChartCellGroup } from './cell-type/chart-cell';
+import { createImageCellGroup } from './cell-type/image-cell';
+import { createProgressBarCell } from './cell-type/progress-bar-cell';
+import { createSparkLineCellGroup } from './cell-type/spark-line-cell';
+import { createCellGroup } from './cell-type/text-cell';
+import { createVideoCellGroup } from './cell-type/video-cell';
+import type { BaseTableAPI, HeaderData, PivotTableProtected } from '../../ts-types/base-table';
import { getCellCornerRadius, getStyleTheme } from '../../core/tableHelper';
import { isPromise } from '../../tools/helper';
import { dealPromiseData } from '../utils/deal-promise-data';
-import type { ICartesianAxis } from '../../components/axis/axis';
-import { Factory } from '../../core/factory';
-import type { CreateCheckboxCellGroup } from './cell-type/checkbox-cell';
+import { CartesianAxis } from '../../components/axis/axis';
+import { createCheckboxCellGroup } from './cell-type/checkbox-cell';
+// import type { PivotLayoutMap } from '../../layout/pivot-layout';
+import type { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout';
import { getHierarchyOffset } from '../utils/get-hierarchy-offset';
import { getQuadProps } from '../utils/padding';
+import { convertInternal } from '../../tools/util';
import { updateCellContentHeight, updateCellContentWidth } from '../utils/text-icon-layout';
import { isArray } from '@visactor/vutils';
import { breakString } from '../utils/break-string';
-import type { CreateRadioCellGroup } from './cell-type/radio-cell';
+import { createRadioCellGroup } from './cell-type/radio-cell';
export function createCell(
type: ColumnTypeOption,
@@ -153,7 +156,6 @@ export function createCell(
// table.heightMode === 'autoHeight',
table.isAutoRowHeight(row),
padding,
- range,
table
);
customElementsGroup = customResult.elementsGroup;
@@ -161,8 +163,7 @@ export function createCell(
}
}
- const createTextCellGroup = Factory.getFunction('createTextCellGroup') as CreateTextCellGroup;
- cellGroup = createTextCellGroup(
+ cellGroup = createCellGroup(
table,
value,
columnGroup,
@@ -186,7 +187,6 @@ export function createCell(
const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
if (axisConfig) {
- const CartesianAxis: ICartesianAxis = Factory.getComponent('axis');
const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
cellGroup.clear();
cellGroup.appendChild(axis.component);
@@ -202,7 +202,6 @@ export function createCell(
}
} else if (type === 'image') {
// 创建图片单元格
- const createImageCellGroup = Factory.getFunction('createImageCellGroup') as CreateImageCellGroup;
cellGroup = createImageCellGroup(
columnGroup,
0,
@@ -216,15 +215,12 @@ export function createCell(
padding,
textAlign,
textBaseline,
- mayHaveIcon,
table,
cellTheme,
- range,
isAsync
);
} else if (type === 'video') {
// 创建视频单元格
- const createVideoCellGroup = Factory.getFunction('createVideoCellGroup') as CreateVideoCellGroup;
cellGroup = createVideoCellGroup(
columnGroup,
0,
@@ -238,15 +234,12 @@ export function createCell(
padding,
textAlign,
textBaseline,
- mayHaveIcon,
table,
cellTheme,
- range,
isAsync
);
} else if (type === 'chart') {
const chartInstance = table.internalProps.layoutMap.getChartInstance(col, row);
- const createChartCellGroup = Factory.getFunction('createChartCellGroup') as CreateChartCellGroup;
cellGroup = createChartCellGroup(
null,
columnGroup,
@@ -271,8 +264,7 @@ export function createCell(
const style = table._getCellStyle(col, row) as ProgressBarStyle;
const dataValue = table.getCellOriginValue(col, row);
// 创建基础文字单元格
- const createTextCellGroup = Factory.getFunction('createTextCellGroup') as CreateTextCellGroup;
- cellGroup = createTextCellGroup(
+ cellGroup = createCellGroup(
table,
value,
columnGroup,
@@ -295,7 +287,6 @@ export function createCell(
);
// 创建bar group
- const createProgressBarCell = Factory.getFunction('createProgressBarCell') as CreateProgressBarCell;
const progressBarGroup = createProgressBarCell(
define as ProgressbarColumnDefine,
style,
@@ -314,7 +305,6 @@ export function createCell(
cellGroup.appendChild(progressBarGroup);
}
} else if (type === 'sparkline') {
- const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup') as CreateSparkLineCellGroup;
cellGroup = createSparkLineCellGroup(
null,
columnGroup,
@@ -330,7 +320,6 @@ export function createCell(
isAsync
);
} else if (type === 'checkbox') {
- const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup') as CreateCheckboxCellGroup;
cellGroup = createCheckboxCellGroup(
null,
columnGroup,
@@ -344,15 +333,12 @@ export function createCell(
padding,
textAlign,
textBaseline,
- mayHaveIcon,
table,
cellTheme,
define as CheckboxColumnDefine,
- range,
isAsync
);
} else if (type === 'radio') {
- const createRadioCellGroup = Factory.getFunction('createRadioCellGroup') as CreateRadioCellGroup;
cellGroup = createRadioCellGroup(
null,
columnGroup,
@@ -419,7 +405,6 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
// table.heightMode === 'autoHeight',
table.isAutoRowHeight(row),
[0, 0, 0, 0],
- range,
table
);
}
@@ -486,7 +471,7 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
const textMark = oldCellGroup.getChildByName('text');
if (textMark) {
const text = table.getCellValue(col, row);
- const { text: textArr, moreThanMaxCharacters } = breakString(text, table);
+ const textArr = breakString(text, table);
const hierarchyOffset = getHierarchyOffset(col, row, table);
const lineClamp = cellStyle.lineClamp;
@@ -504,7 +489,6 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
const attribute = {
text: textArr.length === 1 && !autoWrapText ? textArr[0] : textArr, // 单行(no-autoWrapText)为字符串，多行(autoWrapText)为字符串数组
- moreThanMaxCharacters,
maxLineWidth: cellWidth - (padding[1] + padding[3] + hierarchyOffset),
// fill: true,
// textAlign: 'left',
@@ -513,7 +497,7 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
lineClamp,
wordBreak: 'break-word',
// widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]),
- heightLimit: cellHeight - Math.floor(padding[0] + padding[2]),
+ heightLimit: cellHeight - (padding[0] + padding[2]),
pickable: false,
dx: textAlign === 'left' ? hierarchyOffset : 0,
x
@@ -681,14 +665,6 @@ function updateCellContent(
if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
return null;
}
- if (!addNew && oldCellGroup.parent) {
- // clear react container
- if (table.reactCustomLayout) {
- const reactGroup = oldCellGroup.getChildByName('custom-container');
- const { col, row } = reactGroup;
- table.reactCustomLayout.removeCustomCell(col, row);
- }
- }
const newCellGroup = createCell(
type,
value,
@@ -712,7 +688,6 @@ function updateCellContent(
customResult
);
if (!addNew && oldCellGroup.parent) {
- // update cell
oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
oldCellGroup.parent.removeChild(oldCellGroup);
@@ -740,7 +715,7 @@ function canUseFastUpdate(col: number, row: number, oldCellGroup: Group, autoWra
!autoWrapText &&
!autoRowHeight &&
!mayHaveIcon &&
- oldCellGroup.firstChild?.type === 'text' && // judgement for none text
+ oldCellGroup.firstChild?.type === 'text' &&
!isPromise(value)
) {
return true;
@@ -759,14 +734,9 @@ export function dealWithMergeCellSize(
) {
for (let col = range.start.col; col <= range.end.col; col++) {
for (let row = range.start.row; row <= range.end.row; row++) {
- // const cellGroup = table.scenegraph.getCell(col, row, true);
- const cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
-
- if (cellGroup.role !== 'cell') {
- continue;
- }
+ const cellGroup = table.scenegraph.getCell(col, row, true);
- if (range.start.row !== range.end.row && cellGroup.contentHeight !== cellHeight) {
+ if (cellGroup.role === 'cell' && range.start.row !== range.end.row && cellGroup.contentWidth !== cellWidth) {
updateCellContentHeight(
cellGroup,
cellHeight,
@@ -779,7 +749,7 @@ export function dealWithMergeCellSize(
// 'middle'
);
}
- if (range.start.col !== range.end.col && cellGroup.contentWidth !== cellWidth) {
+ if (cellGroup.role === 'cell' && range.start.col !== range.end.col && cellGroup.contentHeight !== cellHeight) {
updateCellContentWidth(
cellGroup,
cellWidth,
@@ -819,33 +789,25 @@ export function resizeCellGroup(
cellGroup.forEachChildren((child: IGraphic) => {
// 利用_dx hack解决掉 合并单元格的范围内的格子依次执行该方法 如果挨个调用updateCell的话 执行多次后dx累计问题
if (typeof child._dx === 'number') {
- child.skipMergeUpdate = true;
child.setAttributes({
dx: (child._dx ?? 0) + dx
});
- child.skipMergeUpdate = false;
} else {
- child.skipMergeUpdate = true;
child._dx = child.attribute.dx ?? 0;
child.setAttributes({
dx: (child.attribute.dx ?? 0) + dx
});
- child.skipMergeUpdate = false;
}
if (typeof child._dy === 'number') {
- child.skipMergeUpdate = true;
child.setAttributes({
dy: (child._dy ?? 0) + dy
});
- child.skipMergeUpdate = false;
} else {
child._dy = child.attribute.dy ?? 0;
- child.skipMergeUpdate = true;
child.setAttributes({
dy: (child.attribute.dy ?? 0) + dy
});
- child.skipMergeUpdate = false;
}
});
@@ -869,13 +831,11 @@ export function resizeCellGroup(
const widthChange = rangeWidth !== cellGroup.attribute.width;
const heightChange = rangeHeight !== cellGroup.attribute.height;
- (cellGroup as any).skipMergeUpdate = true;
cellGroup.setAttributes({
width: rangeWidth,
height: rangeHeight,
strokeArrayWidth: newLineWidth
} as any);
- (cellGroup as any).skipMergeUpdate = false;
cellGroup.mergeStartCol = range.start.col;
cellGroup.mergeStartRow = range.start.row;
@@ -912,7 +872,6 @@ export function getCustomCellMergeCustom(col: number, row: number, cellGroup: Gr
// table.heightMode === 'autoHeight',
table.isAutoRowHeight(row),
[0, 0, 0, 0],
- customMergeRange,
table
);
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts
index a5fdc3ad5..35298652e 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts
@@ -123,5 +123,3 @@ export function createChartCellGroup(
return cellGroup;
}
-
-export type CreateChartCellGroup = typeof createChartCellGroup;
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
index e85099cc0..f3b15e7bd 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
@@ -1,6 +1,8 @@
-import type { IThemeSpec } from '@src/vrender';
+import type { ILine, ISymbol, IThemeSpec } from '@src/vrender';
+import { createLine, createSymbol } from '@src/vrender';
+import { PointScale, LinearScale } from '@visactor/vscale';
import { Group } from '../../graphic/group';
-import type { CellInfo, CellRange, CheckboxColumnDefine, CheckboxStyleOption, SparklineSpec } from '../../../ts-types';
+import type { CellInfo, CheckboxColumnDefine, CheckboxStyleOption, SparklineSpec } from '../../../ts-types';
import type { BaseTableAPI } from '../../../ts-types/base-table';
import { isObject } from '@visactor/vutils';
import type { CheckboxAttributes } from '@visactor/vrender-components';
@@ -10,7 +12,6 @@ import { getOrApply } from '../../../tools/helper';
import type { CheckboxStyle } from '../../../body-helper/style/CheckboxStyle';
import { getProp } from '../../utils/get-prop';
import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
-import { dealWithIconLayout } from '../../utils/text-icon-layout';
export function createCheckboxCellGroup(
cellGroup: Group | null,
@@ -19,17 +20,15 @@ export function createCheckboxCellGroup(
yOrigin: number,
col: number,
row: number,
- colWidth: number,
+ colWidth: number | 'auto',
width: number,
height: number,
padding: number[],
textAlign: CanvasTextAlign,
textBaseline: CanvasTextBaseline,
- mayHaveIcon: boolean,
table: BaseTableAPI,
cellTheme: IThemeSpec,
define: CheckboxColumnDefine,
- range: CellRange | undefined,
isAsync: boolean
) {
// cell
@@ -83,84 +82,22 @@ export function createCheckboxCellGroup(
}
}
- let icons;
- if (mayHaveIcon) {
- let iconCol = col;
- let iconRow = row;
- if (range) {
- iconCol = range.start.col;
- iconRow = range.start.row;
- }
- icons = table.getCellIcons(iconCol, iconRow);
- }
-
- let iconWidth = 0;
- let cellLeftIconWidth = 0;
- let cellRightIconWidth = 0;
- if (Array.isArray(icons) && icons.length !== 0) {
- const { leftIconWidth, rightIconWidth, absoluteLeftIconWidth, absoluteRightIconWidth } = dealWithIconLayout(
- icons,
- cellGroup,
- range,
- table
- );
-
- iconWidth = leftIconWidth + rightIconWidth;
- cellLeftIconWidth = leftIconWidth;
- cellRightIconWidth = rightIconWidth;
-
- // 更新各个部分横向位置
- cellGroup.forEachChildren((child: any) => {
- if (child.role === 'icon-left') {
- child.setAttribute('x', child.attribute.x + padding[3]);
- } else if (child.role === 'icon-right') {
- child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
- } else if (child.role === 'icon-absolute-right') {
- child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
- }
- });
-
- // 更新各个部分纵向位置
- cellGroup.forEachChildren((child: any) => {
- if (textBaseline === 'middle') {
- child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
- } else if (textBaseline === 'bottom') {
- child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
- } else {
- child.setAttribute('y', padding[0]);
- }
- });
- }
-
// checkbox
- const checkboxComponent = createCheckbox(
- col,
- row,
- colWidth - iconWidth,
- width,
- height,
- padding,
- cellTheme,
- define,
- table
- );
+ const checkboxComponent = createCheckbox(col, row, colWidth, width, height, padding, cellTheme, define, table);
if (checkboxComponent) {
cellGroup.appendChild(checkboxComponent);
}
checkboxComponent.render();
- width -= padding[1] + padding[3] + iconWidth;
+ width -= padding[1] + padding[3];
height -= padding[0] + padding[2];
if (textAlign === 'center') {
- checkboxComponent.setAttribute(
- 'x',
- padding[3] + cellLeftIconWidth + (width - checkboxComponent.AABBBounds.width()) / 2
- );
+ checkboxComponent.setAttribute('x', padding[3] + (width - checkboxComponent.AABBBounds.width()) / 2);
} else if (textAlign === 'right') {
- checkboxComponent.setAttribute('x', padding[3] + cellLeftIconWidth + width - checkboxComponent.AABBBounds.width());
+ checkboxComponent.setAttribute('x', padding[3] + width - checkboxComponent.AABBBounds.width());
} else {
- checkboxComponent.setAttribute('x', padding[3] + cellLeftIconWidth);
+ checkboxComponent.setAttribute('x', padding[3]);
}
if (textBaseline === 'middle') {
@@ -254,7 +191,7 @@ function createCheckbox(
lineClamp,
wordBreak: 'break-word',
// widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]),
- heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+ heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
pickable: false,
dx: hierarchyOffset,
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
@@ -298,5 +235,3 @@ function createCheckbox(
return checkbox;
}
-
-export type CreateCheckboxCellGroup = typeof createCheckboxCellGroup;
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts
index 6cb59600e..0faa196bb 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts
@@ -11,8 +11,6 @@ import { isValid } from '@visactor/vutils';
import { getQuadProps } from '../../utils/padding';
import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
import type { BaseTableAPI } from '../../../ts-types/base-table';
-import type { CellRange } from '../../../ts-types';
-import { dealWithIconLayout } from '../../utils/text-icon-layout';
export function createImageCellGroup(
columnGroup: Group,
@@ -27,18 +25,14 @@ export function createImageCellGroup(
padding: [number, number, number, number],
textAlign: CanvasTextAlign,
textBaseline: CanvasTextBaseline,
- mayHaveIcon: boolean,
table: BaseTableAPI,
cellTheme: IThemeSpec,
- range: CellRange | undefined,
isAsync: boolean
) {
const headerStyle = table._getCellStyle(col, row); // to be fixed
const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
// const margin = getProp('padding', headerStyle, col, row, table);
- if (table.options.customConfig?.imageMargin) {
- padding = getQuadProps(table.options.customConfig?.imageMargin);
- } else if (isValid(functionalPadding)) {
+ if (isValid(functionalPadding)) {
padding = functionalPadding;
}
if (cellTheme?.text?.textAlign) {
@@ -98,64 +92,12 @@ export function createImageCellGroup(
columnGroup?.addCellGroup(cellGroup);
}
- let cellIcons;
- if (mayHaveIcon) {
- let iconCol = col;
- let iconRow = row;
- if (range) {
- iconCol = range.start.col;
- iconRow = range.start.row;
- }
- cellIcons = table.getCellIcons(iconCol, iconRow);
- }
-
- let iconWidth = 0;
- let cellLeftIconWidth = 0;
- let cellRightIconWidth = 0;
- if (Array.isArray(cellIcons) && cellIcons.length !== 0) {
- const { leftIconWidth, rightIconWidth, absoluteLeftIconWidth, absoluteRightIconWidth } = dealWithIconLayout(
- cellIcons,
- cellGroup,
- range,
- table
- );
-
- iconWidth = leftIconWidth + rightIconWidth;
- cellLeftIconWidth = leftIconWidth;
- cellRightIconWidth = rightIconWidth;
-
- // 更新各个部分横向位置
- cellGroup.forEachChildren((child: any) => {
- if (child.role === 'icon-left') {
- child.setAttribute('x', child.attribute.x + padding[3]);
- } else if (child.role === 'icon-right') {
- child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
- } else if (child.role === 'icon-absolute-right') {
- child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
- }
- });
-
- // 更新各个部分纵向位置
- cellGroup.forEachChildren((child: any) => {
- if (textBaseline === 'middle') {
- child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
- } else if (textBaseline === 'bottom') {
- child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
- } else {
- child.setAttribute('y', padding[0]);
- }
- });
-
- (cellGroup as any)._cellLeftIconWidth = cellLeftIconWidth;
- (cellGroup as any)._cellRightIconWidth = cellRightIconWidth;
- }
-
// image
const value = table.getCellValue(col, row);
const image: IImage = createImage({
x: padding[3],
y: padding[0],
- width: width - padding[1] - padding[3] - iconWidth,
+ width: width - padding[1] - padding[3],
height: height - padding[0] - padding[2],
image: value, //?? (regedIcons.damage_pic as any).svg,
cursor: 'pointer' as Cursor
@@ -203,10 +145,10 @@ export function createImageCellGroup(
image.resources.has(image.attribute.image) &&
image.resources.get(image.attribute.image).state === 'success'
) {
- updateImageCellContentWhileResize(cellGroup, col, row, 0, 0, table);
+ updateImageCellContentWhileResize(cellGroup, col, row, table);
} else {
image.successCallback = () => {
- updateImageCellContentWhileResize(cellGroup, col, row, 0, 0, table);
+ updateImageCellContentWhileResize(cellGroup, col, row, table);
};
}
}
@@ -220,8 +162,6 @@ export function createImageCellGroup(
return cellGroup;
}
-export type CreateImageCellGroup = typeof createImageCellGroup;
-
/**
* 调整某个图片资源所在行列的行高列宽 之后重绘
* @param col
@@ -289,14 +229,7 @@ export function _adjustWidthHeight(
return false;
}
-export function updateImageCellContentWhileResize(
- cellGroup: Group,
- col: number,
- row: number,
- deltaX: number,
- deltaY: number,
- table: BaseTableAPI
-) {
+export function updateImageCellContentWhileResize(cellGroup: Group, col: number, row: number, table: BaseTableAPI) {
const image = cellGroup.getChildByName('image') as Image;
if (!image) {
return;
@@ -312,12 +245,7 @@ export function updateImageCellContentWhileResize(
const headerStyle = table._getCellStyle(col, row); // to be fixed
const textAlign = getProp('textAlign', headerStyle, col, row, table) ?? 'left';
const textBaseline = getProp('textBaseline', headerStyle, col, row, table) ?? 'middle';
- let padding: [number, number, number, number];
- if (table.options.customConfig?.imageMargin) {
- padding = getQuadProps(table.options.customConfig?.imageMargin);
- } else {
- padding = getQuadProps(getProp('padding', headerStyle, col, row, table)) ?? [0, 0, 0, 0];
- }
+ const padding = getQuadProps(getProp('padding', headerStyle, col, row, table)) ?? [0, 0, 0, 0];
const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
const colStart = cellGroup.mergeStartCol ?? cellGroup.col;
@@ -325,9 +253,6 @@ export function updateImageCellContentWhileResize(
const colEnd = cellGroup.mergeEndCol ?? cellGroup.col;
const rowEnd = cellGroup.mergeEndCol ?? cellGroup.row;
- const leftIconWidth = (cellGroup as any)._cellLeftIconWidth ?? 0;
- const rightIconWidth = (cellGroup as any)._cellRightIconWidth ?? 0;
-
if ((image as any).keepAspectRatio) {
const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(
originImage.width || (originImage as any).videoWidth,
@@ -370,11 +295,11 @@ export function updateImageCellContentWhileResize(
const cellGroup = table.scenegraph.getCell(col, row);
const image = cellGroup.getChildByName('image') as Image;
image?.setAttributes({
- x: leftIconWidth + padding[3],
+ x: padding[3],
y: padding[0],
// width: cellGroup.attribute.width - padding[1] - padding[3],
// height: cellGroup.attribute.height - padding[0] - padding[2]
- width: cellWidth - padding[1] - padding[3] - rightIconWidth - leftIconWidth,
+ width: cellWidth - padding[1] - padding[3],
height: cellHeight - padding[0] - padding[2]
});
}
@@ -409,30 +334,6 @@ export function updateImageCellContentWhileResize(
}
}
- // 更新x方向位置
- cellGroup.forEachChildren((child: any) => {
- if (child.role === 'icon-left') {
- // do nothing
- } else if (child.role === 'icon-right') {
- child.setAttribute('x', child.attribute.x + deltaX);
- } else if (child.role === 'icon-absolute-right') {
- child.setAttribute('x', child.attribute.x + deltaX);
- }
- });
-
- // 更新y方向位置
- cellGroup.forEachChildren((child: any) => {
- if (child.type !== 'rect' && (!child.role || !child.role.startsWith('icon'))) {
- // do nothing
- } else if (textBaseline === 'middle') {
- child.setAttribute('y', padding[0] + (cellHeight - padding[0] - padding[2] - child.AABBBounds.height()) / 2);
- } else if (textBaseline === 'bottom') {
- child.setAttribute('y', padding[0] + cellHeight - padding[0] - padding[2] - child.AABBBounds.height());
- } else {
- child.setAttribute('y', padding[0]);
- }
- });
-
if (isMerge) {
updateImageDxDy(
cellGroup.mergeStartCol,
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/index.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/index.ts
deleted file mode 100644
index 36930f41a..000000000
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/index.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Factory } from '../../../core/factory';
-import { createChartCellGroup } from './chart-cell';
-import { createCheckboxCellGroup } from './checkbox-cell';
-import { createImageCellGroup } from './image-cell';
-import { createRadioCellGroup } from './radio-cell';
-import { createSparkLineCellGroup } from './spark-line-cell';
-import { createVideoCellGroup } from './video-cell';
-import { createCellGroup as createTextCellGroup } from './text-cell';
-import { createProgressBarCell } from './progress-bar-cell';
-import { getAxisDomainRangeAndLabels } from '../../../layout/chart-helper/get-axis-domain';
-
-export const registerChartCell = () => {
- Factory.registerFunction('createChartCellGroup', createChartCellGroup);
- Factory.registerFunction('getAxisDomainRangeAndLabels', getAxisDomainRangeAndLabels);
-};
-
-export const registerCheckboxCell = () => {
- Factory.registerFunction('createCheckboxCellGroup', createCheckboxCellGroup);
-};
-
-export const registerImageCell = () => {
- Factory.registerFunction('createImageCellGroup', createImageCellGroup);
-};
-
-export const registerProgressBarCell = () => {
- Factory.registerFunction('createProgressBarCell', createProgressBarCell);
-};
-
-export const registerRadioCell = () => {
- Factory.registerFunction('createRadioCellGroup', createRadioCellGroup);
-};
-
-export const registerSparkLineCell = () => {
- Factory.registerFunction('createSparkLineCellGroup', createSparkLineCellGroup);
-};
-
-export const registerTextCell = () => {
- Factory.registerFunction('createTextCellGroup', createTextCellGroup);
-};
-
-export const registerVideoCell = () => {
- Factory.registerFunction('createVideoCellGroup', createVideoCellGroup);
-};
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
index b19a32ddb..a1e5bf61f 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
@@ -560,5 +560,3 @@ export function createProgressBarCell(
}
return percentCompleteBarGroup;
}
-
-export type CreateProgressBarCell = typeof createProgressBarCell;
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/radio-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/radio-cell.ts
index e62c97f9a..86aaf777c 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/radio-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/radio-cell.ts
@@ -98,8 +98,6 @@ export function createRadioCellGroup(
return cellGroup;
}
-export type CreateRadioCellGroup = typeof createRadioCellGroup;
-
function createRadio(
col: number,
row: number,
@@ -162,7 +160,7 @@ function createRadio(
lineClamp,
wordBreak: 'break-word',
// widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]),
- heightLimit: autoRowHeight ? -1 : cellHeight - Math.floor(padding[0] + padding[2]),
+ heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
pickable: false,
dx: hierarchyOffset
// whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
index a7fb271f8..58dee58c5 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
@@ -85,8 +85,6 @@ export function createSparkLineCellGroup(
return cellGroup;
}
-export type CreateSparkLineCellGroup = typeof createSparkLineCellGroup;
-
function createSparkLine(
col: number,
row: number,
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts
index c6cf7f6b3..1c1b9a1e3 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts
@@ -144,10 +144,8 @@ export function createCellGroup(
typeof lineClamp === 'number' ? lineClamp : undefined,
// autoColWidth ? 0 : colWidth,
// table.getRowHeight(row),
- // cellWidth,
- // cellHeight,
- cellGroup.attribute.width,
- cellGroup.attribute.height,
+ cellWidth,
+ cellHeight,
textAlign,
textBaseline,
table,
@@ -179,8 +177,6 @@ export function createCellGroup(
return cellGroup;
}
-export type CreateTextCellGroup = typeof createCellGroup;
-
// /**
// * @description: 获取函数式赋值的样式，记录在cellTheme中
// * @param {BaseTableAPI} table
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts
index e2b024fa1..fdeea72a7 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts
@@ -11,9 +11,6 @@ import { getFunctionalProp, getProp } from '../../utils/get-prop';
import { isValid } from '@visactor/vutils';
import type { BaseTableAPI } from '../../../ts-types/base-table';
import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
-import { getQuadProps } from '../../utils/padding';
-import type { CellRange } from '../../../ts-types';
-import { dealWithIconLayout } from '../../utils/text-icon-layout';
const regedIcons = icons.get();
@@ -30,18 +27,14 @@ export function createVideoCellGroup(
padding: [number, number, number, number],
textAlign: CanvasTextAlign,
textBaseline: CanvasTextBaseline,
- mayHaveIcon: boolean,
table: BaseTableAPI,
cellTheme: IThemeSpec,
- range: CellRange | undefined,
isAsync: boolean
) {
const headerStyle = table._getCellStyle(col, row); // to be fixed
const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
// const margin = getProp('padding', headerStyle, col, row, table);
- if (table.options.customConfig?.imageMargin) {
- padding = getQuadProps(table.options.customConfig?.imageMargin);
- } else if (isValid(functionalPadding)) {
+ if (isValid(functionalPadding)) {
padding = functionalPadding;
}
if (cellTheme?.text?.textAlign) {
@@ -101,58 +94,6 @@ export function createVideoCellGroup(
columnGroup?.addCellGroup(cellGroup);
}
- let cellIcons;
- if (mayHaveIcon) {
- let iconCol = col;
- let iconRow = row;
- if (range) {
- iconCol = range.start.col;
- iconRow = range.start.row;
- }
- cellIcons = table.getCellIcons(iconCol, iconRow);
- }
-
- let iconWidth = 0;
- let cellLeftIconWidth = 0;
- let cellRightIconWidth = 0;
- if (Array.isArray(cellIcons) && cellIcons.length !== 0) {
- const { leftIconWidth, rightIconWidth, absoluteLeftIconWidth, absoluteRightIconWidth } = dealWithIconLayout(
- cellIcons,
- cellGroup,
- range,
- table
- );
-
- iconWidth = leftIconWidth + rightIconWidth;
- cellLeftIconWidth = leftIconWidth;
- cellRightIconWidth = rightIconWidth;
-
- // 更新各个部分横向位置
- cellGroup.forEachChildren((child: any) => {
- if (child.role === 'icon-left') {
- child.setAttribute('x', child.attribute.x + padding[3]);
- } else if (child.role === 'icon-right') {
- child.setAttribute('x', child.attribute.x + width - rightIconWidth - padding[1]);
- } else if (child.role === 'icon-absolute-right') {
- child.setAttribute('x', child.attribute.x + width - absoluteRightIconWidth - padding[1]);
- }
- });
-
- // 更新各个部分纵向位置
- cellGroup.forEachChildren((child: any) => {
- if (textBaseline === 'middle') {
- child.setAttribute('y', (height - child.AABBBounds.height()) / 2);
- } else if (textBaseline === 'bottom') {
- child.setAttribute('y', height - child.AABBBounds.height() - padding[2]);
- } else {
- child.setAttribute('y', padding[0]);
- }
- });
-
- (cellGroup as any)._cellLeftIconWidth = cellLeftIconWidth;
- (cellGroup as any)._cellRightIconWidth = cellRightIconWidth;
- }
-
// video
const value = table.getCellValue(col, row);
const video = document.createElement('video');
@@ -262,5 +203,3 @@ export function createVideoCellGroup(
return cellGroup;
}
-
-export type CreateVideoCellGroup = typeof createVideoCellGroup;
diff --git a/packages/vtable/src/scenegraph/group-creater/column-helper.ts b/packages/vtable/src/scenegraph/group-creater/column-helper.ts
index e8ced2208..2fe3df34b 100644
--- a/packages/vtable/src/scenegraph/group-creater/column-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/column-helper.ts
@@ -99,7 +99,6 @@ export function createComplexColumn(
// table.heightMode === 'autoHeight',
table.isAutoRowHeight(row),
[0, 0, 0, 0],
- range,
table
);
}
@@ -234,10 +233,8 @@ export function createComplexColumn(
columnGroup.updateColumnHeight(rangeHeight);
y += rangeHeight;
} else {
- // columnGroup.updateColumnHeight(cellGroup.attribute.height);
- // y += cellGroup.attribute.height;
- columnGroup.updateColumnHeight(cellHeight);
- y += cellHeight;
+ columnGroup.updateColumnHeight(cellGroup.attribute.height);
+ y += cellGroup.attribute.height;
}
}
if (rowLimit && row > rowLimit) {
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
index b251d645e..0755fa15f 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
@@ -76,7 +76,7 @@ export function createGroupForFirstScreen(
0, // colStart
table.frozenColCount - 1, // colEnd
0, // rowStart
- table.frozenRowCount - 1, // rowEnd
+ table.columnHeaderLevelCount - 1, // rowEnd
table.isListTable() ? 'columnHeader' : 'cornerHeader', // CellType
table
);
@@ -91,7 +91,7 @@ export function createGroupForFirstScreen(
// Math.min(proxy.firstScreenColLimit, table.colCount - 1 - table.rightFrozenColCount), // colEnd
distCol - table.rightFrozenColCount,
0, // rowStart
- table.frozenRowCount - 1, // rowEnd
+ table.columnHeaderLevelCount - 1, // rowEnd
'columnHeader', // isHeader
table
);
@@ -105,7 +105,7 @@ export function createGroupForFirstScreen(
yOrigin,
0, // colStart
table.leftRowSeriesNumberCount - 1, // colEnd
- table.frozenRowCount, // rowStart
+ table.columnHeaderLevelCount, // rowStart
// Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd
distRow - table.bottomFrozenRowCount,
'rowHeader', // isHeader
@@ -119,7 +119,7 @@ export function createGroupForFirstScreen(
yOrigin,
table.leftRowSeriesNumberCount, // colStart
table.leftRowSeriesNumberCount + table.rowHeaderLevelCount - 1, // colEnd
- table.frozenRowCount, // rowStart
+ table.columnHeaderLevelCount, // rowStart
// Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd
distRow - table.bottomFrozenRowCount,
'rowHeader', // isHeader
@@ -133,7 +133,7 @@ export function createGroupForFirstScreen(
yOrigin,
table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, // colStart
table.frozenColCount - 1, // colEnd
- table.frozenRowCount, // rowStart
+ table.columnHeaderLevelCount, // rowStart
// Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd
distRow - table.bottomFrozenRowCount,
'body',
@@ -240,7 +240,7 @@ export function createGroupForFirstScreen(
table.colCount - 1 - table.rightFrozenColCount + 1, // colStart
table.colCount - 1, // colEnd
0, // rowStart
- table.frozenRowCount - 1, // rowEnd
+ table.columnHeaderLevelCount - 1, // rowEnd
'columnHeader', // isHeader
table
);
@@ -252,7 +252,7 @@ export function createGroupForFirstScreen(
yOrigin,
table.colCount - 1 - table.rightFrozenColCount + 1, // colStart
table.colCount - 1, // colEnd
- table.frozenRowCount, // rowStart
+ table.columnHeaderLevelCount, // rowStart
// Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd
distRow - table.bottomFrozenRowCount,
table.isPivotChart() ? 'rowHeader' : 'body', // isHeader
@@ -284,7 +284,7 @@ export function createGroupForFirstScreen(
table.frozenColCount, // colStart
// Math.min(proxy.firstScreenColLimit, table.colCount - 1 - table.rightFrozenColCount), // colEnd
distCol - table.rightFrozenColCount,
- table.frozenRowCount, // rowStart
+ table.columnHeaderLevelCount, // rowStart
// Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd
distRow - table.bottomFrozenRowCount,
'body', // isHeader
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
index be6b44e8f..d706711ce 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
@@ -15,7 +15,6 @@ import { sortHorizontal } from './update-position/sort-horizontal';
import { updateAutoColumn } from './update-position/update-auto-column';
import { getDefaultHeight, getDefaultWidth } from './default-width-height';
import { handleTextStick } from '../../stick-text';
-import type { ColumnInfo, RowInfo } from '../../../ts-types';
export class SceneProxy {
table: BaseTableAPI;
@@ -69,19 +68,12 @@ export class SceneProxy {
this.table = table;
if (this.table.isPivotChart()) {
- // this.rowLimit = 100;
- // this.colLimit = 100;
- this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / table.defaultRowHeight));
- this.colLimit = Math.max(100, Math.ceil((table.tableNoFrameWidth * 2) / table.defaultColWidth));
+ this.rowLimit = 100;
+ this.colLimit = 100;
} else if (this.table.heightMode === 'autoHeight') {
- // this.rowLimit = 100;
- this.rowLimit = Math.max(100, Math.ceil((table.tableNoFrameHeight * 2) / table.defaultRowHeight));
+ this.rowLimit = 100;
} else if (this.table.widthMode === 'autoWidth') {
- // this.colLimit = 100;
- this.colLimit = Math.max(100, Math.ceil((table.tableNoFrameWidth * 2) / table.defaultColWidth));
- } else {
- this.rowLimit = Math.max(200, Math.ceil((table.tableNoFrameHeight * 2) / table.defaultRowHeight));
- this.colLimit = Math.max(100, Math.ceil((table.tableNoFrameWidth * 2) / table.defaultColWidth));
+ this.colLimit = 100;
}
if (this.table.internalProps.transpose) {
@@ -107,7 +99,6 @@ export class SceneProxy {
this.totalActualBodyColCount = totalActualBodyColCount;
this.totalCol = this.bodyLeftCol + totalActualBodyColCount - 1; // 目标渐进完成的col
this.colStart = this.bodyLeftCol;
- this.colEnd = this.totalCol; // temp for first screen, will replace in createGroupForFirstScreen()
const defaultColWidth = this.table.defaultColWidth;
// const defaultColWidth = getDefaultHeight(this.table);
this.taskColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1;
@@ -131,7 +122,7 @@ export class SceneProxy {
}
setParamsForRow() {
- this.bodyTopRow = this.table.frozenRowCount;
+ this.bodyTopRow = this.table.columnHeaderLevelCount;
this.bodyBottomRow = this.table.rowCount - 1 - this.table.bottomFrozenRowCount;
// this.bodyLeftCol = 0;
// this.bodyRightCol = this.table.colCount - 1 - this.table.rightFrozenColCount;
@@ -141,7 +132,6 @@ export class SceneProxy {
this.totalActualBodyRowCount = totalActualBodyRowCount;
this.totalRow = this.bodyTopRow + totalActualBodyRowCount - 1; // 目标渐进完成的row
this.rowStart = this.bodyTopRow;
- this.rowEnd = this.totalRow; // temp for first screen, will replace in createGroupForFirstScreen()
const defaultRowHeight = this.table.defaultRowHeight;
// const defaultRowHeight = getDefaultWidth(this.table);
this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1;
@@ -232,7 +222,6 @@ export class SceneProxy {
// await this.progress();
// } else
if (this.colUpdatePos <= this.colEnd) {
- // console.log('progress colUpdatePos', this.colUpdatePos);
await this.updateColCellGroupsAsync();
await this.progress();
} else if (this.rowUpdatePos <= this.rowEnd) {
@@ -277,8 +266,6 @@ export class SceneProxy {
// compute rows height
computeRowsHeight(this.table, this.currentRow + 1, endRow, false);
- this.rowEnd = endRow;
-
if (this.table.frozenColCount) {
// create row header row cellGroup
let maxHeight = 0;
@@ -347,7 +334,9 @@ export class SceneProxy {
this.table.scenegraph.bodyGroup.setAttribute('height', maxHeight);
this.currentRow = endRow;
+ this.rowEnd = endRow;
this.rowUpdatePos = this.rowEnd;
+ // this.referenceRow = this.rowStart + Math.floor((endRow - this.rowStart) / 2);
// update container group size and border
this.table.scenegraph.updateContainer();
@@ -359,8 +348,6 @@ export class SceneProxy {
const endCol = Math.min(this.totalCol, this.currentCol + onceCount);
computeColsWidth(this.table, this.currentCol + 1, endCol);
- this.colEnd = endCol;
-
// update last merge cell size
for (let row = 0; row < this.table.rowCount; row++) {
const cellGroup = this.highPerformanceGetCell(this.currentCol, row);
@@ -370,7 +357,7 @@ export class SceneProxy {
}
// create column
- if (this.table.frozenRowCount) {
+ if (this.table.columnHeaderLevelCount) {
// create colGroup
const lastColumnGroup = (
this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
@@ -387,7 +374,7 @@ export class SceneProxy {
this.currentCol + 1, // colStart
endCol, // colEnd
0, // rowStart
- this.table.frozenRowCount - 1, // rowEnd
+ this.table.columnHeaderLevelCount - 1, // rowEnd
'columnHeader', // isHeader
this.table
);
@@ -443,9 +430,13 @@ export class SceneProxy {
);
this.currentCol = endCol;
+ this.colEnd = endCol;
this.colUpdatePos = this.colEnd;
+ // this.referenceCol = this.colStart + Math.floor((endCol - this.colStart) / 2);
+ // console.log('async', this.referenceCol, this.colStart, this.colEnd);
// update container group size and border
+ // this.table.scenegraph.updateContainerAttrWidthAndX();
this.table.scenegraph.updateContainer();
this.table.scenegraph.updateBorderSizeAndPosition();
}
@@ -454,12 +445,6 @@ export class SceneProxy {
const yLimitTop =
this.table.getRowsHeight(this.bodyTopRow, this.bodyTopRow + (this.rowEnd - this.rowStart + 1)) / 2;
const yLimitBottom = this.table.getAllRowsHeight() - yLimitTop;
-
- const screenTop = this.table.getTargetRowAt(y + this.table.scenegraph.colHeaderGroup.attribute.height);
- if (screenTop) {
- this.screenTopRow = screenTop.row;
- }
-
if (y < yLimitTop && this.rowStart === this.bodyTopRow) {
// 执行真实body group坐标修改
this.updateDeltaY(y);
@@ -478,7 +463,7 @@ export class SceneProxy {
this.updateBody(y - this.deltaY);
} else {
// 执行动态更新节点
- this.dynamicSetY(y, screenTop, isEnd);
+ this.dynamicSetY(y, isEnd);
}
}
@@ -486,12 +471,6 @@ export class SceneProxy {
const xLimitLeft =
this.table.getColsWidth(this.bodyLeftCol, this.bodyLeftCol + (this.colEnd - this.colStart + 1)) / 2;
const xLimitRight = this.table.getAllColsWidth() - xLimitLeft;
-
- const screenLeft = this.table.getTargetColAt(x + this.table.scenegraph.rowHeaderGroup.attribute.width);
- if (screenLeft) {
- this.screenLeftCol = screenLeft.col;
- }
-
if (x < xLimitLeft && this.colStart === this.bodyLeftCol) {
// 执行真实body group坐标修改
this.updateDeltaX(x);
@@ -509,15 +488,15 @@ export class SceneProxy {
this.table.scenegraph.setBodyAndColHeaderX(-x + this.deltaX);
} else {
// 执行动态更新节点
- this.dynamicSetX(x, screenLeft, isEnd);
+ this.dynamicSetX(x, isEnd);
}
}
- async dynamicSetY(y: number, screenTop: RowInfo | null, isEnd = false) {
- dynamicSetY(y, screenTop, isEnd, this);
+ async dynamicSetY(y: number, isEnd = false) {
+ dynamicSetY(y, isEnd, this);
}
- async dynamicSetX(x: number, screenLeft: ColumnInfo | null, isEnd = false) {
- dynamicSetX(x, screenLeft, isEnd, this);
+ async dynamicSetX(x: number, isEnd = false) {
+ dynamicSetX(x, isEnd, this);
}
updateBody(y: number) {
@@ -704,7 +683,7 @@ export class SceneProxy {
// }
if (
- row >= this.table.frozenRowCount && // not column header
+ row >= this.table.columnHeaderLevelCount && // not column header
row < this.table.rowCount - this.table.bottomFrozenRowCount && // not bottom frozen
(row < this.rowStart || row > this.rowEnd) // not in proxy row range
) {
@@ -822,10 +801,10 @@ function getCellByCache(cacheCellGroup: Group, row: number): Group | null {
const prev = cacheCellGroup._prev as Group;
const next = cacheCellGroup._next as Group;
// cacheCellGroup may have wrong order
- if (cacheCellGroup.row > row && prev && prev.row === cacheCellGroup.row - 1) {
+ if (cacheCellGroup.row > row && prev && prev.row === row - 1) {
return getCellByCache(prev, row);
}
- if (cacheCellGroup.row < row && next && next.row === cacheCellGroup.row + 1) {
+ if (cacheCellGroup.row < row && next && next.row === row + 1) {
return getCellByCache(next, row);
}
return null;
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts
index 5f43d9b36..a325b533e 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts
@@ -1,4 +1,3 @@
-import type { ColumnInfo } from '../../../../ts-types';
import type { BaseTableAPI } from '../../../../ts-types/base-table';
import type { Group } from '../../../graphic/group';
import { computeColsWidth } from '../../../layout/compute-col-width';
@@ -6,12 +5,16 @@ import type { SceneProxy } from '../proxy';
import { updateAutoColumn } from './update-auto-column';
import { checkFirstColMerge, getFirstChild, getLastChild } from './util';
-export async function dynamicSetX(x: number, screenLeft: ColumnInfo | null, isEnd: boolean, proxy: SceneProxy) {
+export async function dynamicSetX(x: number, isEnd: boolean, proxy: SceneProxy) {
+ const screenLeft = (proxy.table as BaseTableAPI).getTargetColAt(
+ x + proxy.table.scenegraph.rowHeaderGroup.attribute.width
+ );
if (!screenLeft) {
return;
}
const screenLeftCol = screenLeft.col;
const screenLeftX = screenLeft.left;
+ proxy.screenLeftCol = screenLeftCol;
let deltaCol;
if (isEnd) {
@@ -199,6 +202,13 @@ function updateColGroupContent(colGroup: Group, proxy: SceneProxy) {
if (!colGroup) {
return;
}
+ // colGroup.forEachChildren((cellGroup: Group) => {
+ // proxy.updateCellGroupContent(cellGroup);
+ // });
+ // for (let row = (colGroup.firstChild as Group).row; row <= (colGroup.lastChild as Group).row; row++) {
+ // const cellGroup = proxy.highPerformanceGetCell(colGroup.col, row);
+ // proxy.updateCellGroupContent(cellGroup);
+ // }
let cellGroup = colGroup.firstChild;
while (cellGroup) {
const newCellGroup = proxy.updateCellGroupContent(cellGroup as Group);
@@ -208,26 +218,6 @@ function updateColGroupContent(colGroup: Group, proxy: SceneProxy) {
colGroup.setAttribute('width', proxy.table.getColWidth(colGroup.col));
}
-// update cells async
-function updateColGroupContentAsync(colGroup: Group, proxy: SceneProxy) {
- if (!colGroup) {
- return;
- }
- const screenTopRow = proxy.screenTopRow;
- const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
- const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
-
- for (let row = topRow; row <= bottomRow; row++) {
- // const cellGroup = proxy.table.scenegraph.getCell(col, row);
- const cellGroup = proxy.highPerformanceGetCell(colGroup.col, row, true);
- proxy.updateCellGroupContent(cellGroup);
- }
- proxy.rowUpdatePos = proxy.rowStart;
-
- colGroup.needUpdate = false;
- colGroup.setAttribute('width', proxy.table.getColWidth(colGroup.col));
-}
-
function updatePartColPosition(startCol: number, endCol: number, direction: 'left' | 'right', proxy: SceneProxy) {
for (let col = startCol; col <= endCol; col++) {
if (
@@ -275,6 +265,9 @@ function updateColPosition(containerGroup: Group, direction: 'left' | 'right', p
export function updateColContent(syncLeftCol: number, syncRightCol: number, proxy: SceneProxy) {
for (let col = syncLeftCol; col <= syncRightCol; col++) {
+ const colGroup = proxy.table.scenegraph.getColGroup(col);
+ colGroup && updateColGroupContent(colGroup, proxy);
+
const colHeaderColGroup = proxy.table.scenegraph.getColGroup(col, true);
colHeaderColGroup && updateColGroupContent(colHeaderColGroup, proxy);
@@ -286,11 +279,7 @@ export function updateColContent(syncLeftCol: number, syncRightCol: number, prox
const rightBottomColGroup = proxy.table.scenegraph.getColGroupInRightBottomCorner(col);
rightBottomColGroup && updateColGroupContent(rightBottomColGroup, proxy);
-
- const colGroup = proxy.table.scenegraph.getColGroup(col);
- colGroup && updateColGroupContentAsync(colGroup, proxy);
}
- proxy.progress();
}
function updateAllColPosition(distStartColY: number, count: number, direction: 'left' | 'right', proxy: SceneProxy) {
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts
index a51c21d1c..7c3930eb6 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts
@@ -1,16 +1,18 @@
-import type { RowInfo } from '../../../../ts-types';
import type { Group } from '../../../graphic/group';
import { computeRowsHeight } from '../../../layout/compute-row-height';
import type { SceneProxy } from '../proxy';
import { updateAutoRow } from './update-auto-row';
-export async function dynamicSetY(y: number, screenTop: RowInfo | null, isEnd: boolean, proxy: SceneProxy) {
+export async function dynamicSetY(y: number, isEnd: boolean, proxy: SceneProxy) {
+ // 计算变动row range
+ // const screenTopRow = proxy.table.getRowAt(y).row;
+ const screenTop = (proxy.table as any).getTargetRowAt(y + proxy.table.scenegraph.colHeaderGroup.attribute.height);
if (!screenTop) {
return;
}
const screenTopRow = screenTop.row;
const screenTopY = screenTop.top;
-
+ proxy.screenTopRow = screenTopRow;
let deltaRow;
if (isEnd) {
deltaRow = proxy.bodyBottomRow - proxy.rowEnd;
@@ -106,8 +108,7 @@ async function moveCell(
proxy.rowStart = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
proxy.rowEnd = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
- // 本次行更新是否同步完成，列数超过limit时为false
- const sync = updateRowContent(syncTopRow, syncBottomRow, proxy, true);
+ updateRowContent(syncTopRow, syncBottomRow, proxy);
if (proxy.table.heightMode === 'autoHeight') {
// body group
@@ -167,7 +168,7 @@ async function moveCell(
proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2);
// proxy.referenceRow = screenTopRow;
// proxy.rowUpdatePos = Math.min(proxy.rowUpdatePos, distStartRow);
- if (proxy.table.heightMode === 'autoHeight' && sync) {
+ if (proxy.table.heightMode === 'autoHeight') {
proxy.rowUpdatePos = Math.min(proxy.rowUpdatePos, proxy.rowEnd + 1);
} else {
proxy.rowUpdatePos = Math.min(proxy.rowUpdatePos, distStartRow);
@@ -175,7 +176,9 @@ async function moveCell(
proxy.rowUpdateDirection = direction;
proxy.table.scenegraph.updateNextFrame();
- await proxy.progress();
+ if (proxy.table.heightMode !== 'autoHeight') {
+ await proxy.progress();
+ }
} else {
const distStartRow = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
const distEndRow = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
@@ -199,7 +202,7 @@ async function moveCell(
proxy.rowStart = distStartRow;
proxy.rowEnd = distEndRow;
- const sync = updateRowContent(syncTopRow, syncBottomRow, proxy, true);
+ updateRowContent(syncTopRow, syncBottomRow, proxy);
if (proxy.table.heightMode === 'autoHeight') {
// body group
@@ -260,7 +263,7 @@ async function moveCell(
);
proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2);
// proxy.referenceRow = screenTopRow;
- if (proxy.table.heightMode === 'autoHeight' && sync) {
+ if (proxy.table.heightMode === 'autoHeight') {
proxy.rowUpdatePos = proxy.rowEnd + 1;
} else {
proxy.rowUpdatePos = proxy.rowStart;
@@ -268,7 +271,9 @@ async function moveCell(
proxy.rowUpdateDirection = distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up';
proxy.table.scenegraph.updateNextFrame();
- await proxy.progress();
+ if (proxy.table.heightMode !== 'autoHeight') {
+ await proxy.progress();
+ }
}
}
@@ -371,7 +376,7 @@ function updateAllRowPosition(distStartRowY: number, count: number, direction: '
}
}
-export function updateRowContent(syncTopRow: number, syncBottomRow: number, proxy: SceneProxy, async = false) {
+export function updateRowContent(syncTopRow: number, syncBottomRow: number, proxy: SceneProxy) {
// row header group
for (let col = 0; col < proxy.table.frozenColCount; col++) {
for (let row = syncTopRow; row <= syncBottomRow; row++) {
@@ -389,18 +394,7 @@ export function updateRowContent(syncTopRow: number, syncBottomRow: number, prox
}
}
// body group
- let leftCol = proxy.bodyLeftCol;
- let rightCol = proxy.bodyRightCol;
- let sync = true;
- if (async) {
- const screenLeftCol = proxy.screenLeftCol;
- leftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenColCount * 1);
- rightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenColCount * 2);
- if (leftCol !== proxy.bodyLeftCol || rightCol !== proxy.bodyRightCol) {
- sync = false;
- }
- }
- for (let col = leftCol; col <= rightCol; col++) {
+ for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
for (let row = syncTopRow; row <= syncBottomRow; row++) {
// const cellGroup = proxy.table.scenegraph.getCell(col, row);
const cellGroup = proxy.highPerformanceGetCell(col, row);
@@ -408,6 +402,4 @@ export function updateRowContent(syncTopRow: number, syncBottomRow: number, prox
}
}
proxy.table.scenegraph.updateNextFrame();
-
- return sync;
}
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-horizontal.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-horizontal.ts
index f52e87eb2..ce6cdb98d 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-horizontal.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-horizontal.ts
@@ -14,13 +14,6 @@ export async function sortHorizontal(proxy: SceneProxy) {
});
}
});
-
- // 更新同步范围
- const syncLeftCol = Math.max(proxy.bodyLeftCol, proxy.screenLeftCol - proxy.screenColCount * 1);
- const syncRightCol = Math.min(proxy.bodyRightCol, proxy.screenLeftCol + proxy.screenColCount * 2);
-
- computeColsWidth(proxy.table, syncLeftCol, syncRightCol);
-
for (let col = proxy.colStart; col <= proxy.colEnd; col++) {
// 将该列的chartInstance清除掉
const columnGroup = proxy.table.scenegraph.getColGroup(col);
@@ -40,6 +33,11 @@ export async function sortHorizontal(proxy: SceneProxy) {
proxy.table.scenegraph.updateCellContent(col, row);
}
}
+ // 更新同步范围
+ const syncLeftCol = Math.max(proxy.bodyLeftCol, proxy.screenLeftCol - proxy.screenColCount * 1);
+ const syncRightCol = Math.min(proxy.bodyRightCol, proxy.screenLeftCol + proxy.screenColCount * 2);
+
+ computeColsWidth(proxy.table, syncLeftCol, syncRightCol);
updateColContent(syncLeftCol, syncRightCol, proxy);
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-vertical.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-vertical.ts
index 6f8a21d3d..1dd54ec48 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-vertical.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/sort-vertical.ts
@@ -15,28 +15,6 @@ export async function sortVertical(proxy: SceneProxy) {
}
});
- // 更新同步范围
- let syncTopRow;
- let syncBottomRow;
- if (proxy.table.heightMode === 'autoHeight') {
- syncTopRow = proxy.rowStart;
- syncBottomRow = proxy.rowEnd;
- } else {
- syncTopRow = Math.max(proxy.bodyTopRow, proxy.screenTopRow - proxy.screenRowCount * 1);
- syncBottomRow = Math.min(proxy.bodyBottomRow, proxy.screenTopRow + proxy.screenRowCount * 2);
- }
- // console.log('sort更新同步范围', syncTopRow, syncBottomRow);
-
- const oldBodyHeight = proxy.table.getAllRowsHeight();
-
- computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
-
- const newBodyHeight = proxy.table.getAllRowsHeight();
-
- if (oldBodyHeight !== newBodyHeight) {
- proxy.table.scenegraph.updateContainerHeight(proxy.table.frozenRowCount, newBodyHeight - oldBodyHeight);
- }
-
for (let col = 0; col < proxy.table.frozenColCount ?? 0; col++) {
// 将该列的chartInstance清除掉
const columnGroup = proxy.table.scenegraph.getColGroup(col);
@@ -68,6 +46,28 @@ export async function sortVertical(proxy: SceneProxy) {
}
}
+ // 更新同步范围
+ let syncTopRow;
+ let syncBottomRow;
+ if (proxy.table.heightMode === 'autoHeight') {
+ syncTopRow = proxy.rowStart;
+ syncBottomRow = proxy.rowEnd;
+ } else {
+ syncTopRow = Math.max(proxy.bodyTopRow, proxy.screenTopRow - proxy.screenRowCount * 1);
+ syncBottomRow = Math.min(proxy.bodyBottomRow, proxy.screenTopRow + proxy.screenRowCount * 2);
+ }
+ // console.log('sort更新同步范围', syncTopRow, syncBottomRow);
+
+ const oldBodyHeight = proxy.table.getAllRowsHeight();
+
+ computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
+
+ const newBodyHeight = proxy.table.getAllRowsHeight();
+
+ if (oldBodyHeight !== newBodyHeight) {
+ proxy.table.scenegraph.updateContainerHeight(proxy.table.frozenRowCount, newBodyHeight - oldBodyHeight);
+ }
+
updateRowContent(syncTopRow, syncBottomRow, proxy);
if (proxy.table.heightMode === 'autoHeight') {
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/update-auto-row.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/update-auto-row.ts
index dda7e6aff..cfe38d2cf 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/update-auto-row.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/update-auto-row.ts
@@ -11,13 +11,12 @@ export function updateAutoRow(
direction: 'up' | 'down' = 'up',
part?: boolean
) {
- // return;
// 更新y位置
if (direction === 'up') {
for (let col = colStart; col <= colEnd; col++) {
for (let row = rowStart; row <= rowEnd; row++) {
const cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
- if (cellGroup.role !== 'cell' || !cellGroup.row) {
+ if (!cellGroup.row) {
continue;
}
let y;
@@ -28,13 +27,13 @@ export function updateAutoRow(
const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowEnd + 1, true);
y = baseCellGroup.attribute.y;
if (isValid(y)) {
- for (let r = row; r <= rowEnd; r++) {
+ for (let r = rowStart; r <= rowEnd; r++) {
y -= table.getRowHeight(r);
}
}
} else {
// 估计位置
- y = table.getRowsHeight(table.frozenRowCount, cellGroup.row - 1);
+ y = table.getRowsHeight(table.columnHeaderLevelCount, cellGroup.row - 1);
}
if (isValid(y)) {
cellGroup.setAttribute('y', y);
@@ -45,7 +44,7 @@ export function updateAutoRow(
for (let col = colStart; col <= colEnd; col++) {
for (let row = rowEnd; row >= rowStart; row--) {
const cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
- if (cellGroup.role !== 'cell' || !cellGroup.row) {
+ if (!cellGroup.row) {
continue;
}
let y;
@@ -55,18 +54,15 @@ export function updateAutoRow(
} else if (part) {
const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowStart - 1, true);
y = baseCellGroup.attribute.y;
- for (let r = rowStart - 1; r < row; r++) {
- const height = table.getRowHeight(r);
- y += height;
+ for (let r = rowStart - 1; r < rowEnd; r++) {
+ y += table.getRowHeight(r);
}
} else {
// 估计位置
- y = table.getRowsHeight(table.frozenRowCount, cellGroup.row - 1);
- // console.log('估计位置', table.getRowsHeight(table.frozenRowCount, cellGroup.row));
- }
- if (isValid(y)) {
- cellGroup.setAttribute('y', y);
+ y = table.getRowsHeight(table.columnHeaderLevelCount, cellGroup.row - 1);
+ // console.log('估计位置', table.getRowsHeight(table.columnHeaderLevelCount, cellGroup.row));
}
+ cellGroup.setAttribute('y', y);
}
}
}
@@ -77,20 +73,11 @@ export function updateAutoRow(
table.scenegraph.proxy.bodyBottomRow - table.scenegraph.proxy.bodyTopRow + 1
);
// 渐进加载总row数量
- const totalBodyHeight = table.getRowsHeight(table.frozenRowCount, table.frozenRowCount + totalActualBodyRowCount);
- const totalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1);
+ const totalBodyHeight = table.getRowsHeight(
+ table.columnHeaderLevelCount,
+ table.columnHeaderLevelCount + totalActualBodyRowCount
+ );
+ const totalHeight = table.getRowsHeight(table.columnHeaderLevelCount, table.rowCount - 1);
table.scenegraph.proxy.yLimitTop = totalBodyHeight / 2;
table.scenegraph.proxy.yLimitBottom = totalHeight - totalBodyHeight / 2;
-
- // // check
- // const columnGroup = table.scenegraph.bodyGroup.firstChild;
- // let y;
- // columnGroup.forEachChildren(child => {
- // if (!isValid(y)) {
- // y = child.attribute.y + child.attribute.height;
- // } else if (child.attribute.y !== y) {
- // debugger;
- // }
- // y = child.attribute.y + child.attribute.height;
- // });
}
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/util.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/util.ts
index 79788d12f..3e510473b 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/util.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/util.ts
@@ -28,7 +28,10 @@ export function checkFirstRowMerge(row: number, proxy: SceneProxy) {
newCellGroup.col = col;
newCellGroup.row = row;
- newCellGroup.setAttribute('y', proxy.table.getRowsHeight(proxy.table.frozenRowCount, range.start.row - 1));
+ newCellGroup.setAttribute(
+ 'y',
+ proxy.table.getRowsHeight(proxy.table.columnHeaderLevelCount, range.start.row - 1)
+ );
oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
oldCellGroup.parent.removeChild(oldCellGroup);
@@ -47,7 +50,7 @@ export function checkFirstRowMerge(row: number, proxy: SceneProxy) {
export function checkFirstColMerge(col: number, proxy: SceneProxy) {
for (let row = 0; row < proxy.table.rowCount; row++) {
if (
- (row >= proxy.table.frozenRowCount && row < proxy.rowStart) ||
+ (row >= proxy.table.columnHeaderLevelCount && row < proxy.rowStart) ||
(row > proxy.rowEnd && row < proxy.table.rowCount - proxy.table.bottomFrozenRowCount)
) {
continue;
@@ -101,7 +104,7 @@ function clearHadMergedRow(rowStart: number, rowEnd: number, col: number, proxy:
cellGroup.setAttributes({
width: 0,
height: proxy.table.getRowHeight(cellGroup.row),
- y: proxy.table.getRowsHeight(proxy.table.frozenRowCount, cellGroup.row - 1),
+ y: proxy.table.getRowsHeight(proxy.table.columnHeaderLevelCount, cellGroup.row - 1),
x: 0
});
cellGroup.clear();
diff --git a/packages/vtable/src/scenegraph/icon/icon-update.ts b/packages/vtable/src/scenegraph/icon/icon-update.ts
index 7da4ee306..c034b1221 100644
--- a/packages/vtable/src/scenegraph/icon/icon-update.ts
+++ b/packages/vtable/src/scenegraph/icon/icon-update.ts
@@ -137,7 +137,7 @@ export function setIconHoverStyle(baseIcon: Icon, col: number, row: number, cell
iconBack.setAttributes({
x:
(icon.attribute.x ?? 0) +
- // (icon.attribute.dx ?? 0) +
+ (icon.attribute.dx ?? 0) +
(icon.AABBBounds.width() - icon.backgroundWidth) / 2,
y: (icon.attribute.y ?? 0) + (icon.AABBBounds.height() - icon.backgroundHeight) / 2,
dx: icon.attribute.dx ?? 0,
@@ -152,7 +152,7 @@ export function setIconHoverStyle(baseIcon: Icon, col: number, row: number, cell
iconBack = createRect({
x:
(icon.attribute.x ?? 0) +
- // (icon.attribute.dx ?? 0) +
+ (icon.attribute.dx ?? 0) +
(icon.AABBBounds.width() - icon.backgroundWidth) / 2,
y: (icon.attribute.y ?? 0) + (icon.AABBBounds.height() - icon.backgroundHeight) / 2,
dx: icon.attribute.dx ?? 0,
@@ -194,7 +194,6 @@ export function setIconHoverStyle(baseIcon: Icon, col: number, row: number, cell
},
placement: baseIcon.tooltip.placement
},
- disappearDelay: baseIcon.tooltip.disappearDelay,
style: Object.assign({}, scene.table.internalProps.theme?.tooltipStyle, baseIcon.tooltip?.style)
};
if (!scene.table.internalProps.tooltipHandler.isBinded(tooltipOptions)) {
diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts
index f7031bad5..aeebaa40d 100644
--- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts
+++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts
@@ -14,10 +14,10 @@ import { getQuadProps } from '../utils/padding';
import { getProp } from '../utils/get-prop';
import type { BaseTableAPI, HeaderData } from '../../ts-types/base-table';
import type { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout';
-import type { ComputeAxisComponentWidth } from '../../components/axis/get-axis-component-size';
-import { Factory } from '../../core/factory';
+import { getAxisConfigInPivotChart } from '../../layout/chart-helper/get-axis-config';
+import { computeAxisComponentWidth } from '../../components/axis/get-axis-component-size';
import { Group as VGroup } from '@src/vrender';
-import { isArray, isFunction, isNumber, isObject, isValid } from '@visactor/vutils';
+import { isArray, isNumber, isObject, isValid } from '@visactor/vutils';
import { decodeReactDom, dealPercentCalc } from '../component/custom';
import { breakString } from '../utils/break-string';
@@ -301,9 +301,8 @@ function computeAutoColWidth(
// 判断透视图轴组件
if (table.isPivotChart()) {
const layout = table.internalProps.layoutMap as PivotHeaderLayoutMap;
- const axisConfig = layout.getAxisConfigInPivotChart(col, row);
+ const axisConfig = getAxisConfigInPivotChart(col, row, layout);
if (axisConfig) {
- const computeAxisComponentWidth: ComputeAxisComponentWidth = Factory.getFunction('computeAxisComponentWidth');
const axisWidth = computeAxisComponentWidth(axisConfig, table);
if (typeof axisWidth === 'number') {
maxWidth = Math.max(axisWidth, maxWidth);
@@ -364,15 +363,9 @@ function computeAutoColWidth(
if ((hd as HeaderData)?.define?.columnWidthComputeMode === 'only-body') {
continue;
}
- if (isValid((hd as HeaderData)?.hierarchyLevel)) {
+ if ((hd as HeaderData)?.hierarchyLevel) {
cellHierarchyIndent =
((hd as HeaderData).hierarchyLevel ?? 0) * ((layoutMap as PivotHeaderLayoutMap).rowHierarchyIndent ?? 0);
- if (
- (layoutMap as PivotHeaderLayoutMap).rowHierarchyTextStartAlignment &&
- !table.internalProps.headerHelper.getHierarchyIcon(col, row)
- ) {
- cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth();
- }
}
} else {
deltaRow = prepareDeltaRow;
@@ -386,12 +379,6 @@ function computeAutoColWidth(
Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none
? (indexArr.length - 1) * ((layoutMap as SimpleHeaderLayoutMap).hierarchyIndent ?? 0)
: 0;
- if (
- (layoutMap as SimpleHeaderLayoutMap).hierarchyTextStartAlignment &&
- !table.internalProps.bodyHelper.getHierarchyIcon(col, row)
- ) {
- cellHierarchyIndent += table.internalProps.headerHelper.getHierarchyIconWidth();
- }
}
}
@@ -418,10 +405,6 @@ function computeAutoColWidth(
return colMinWidth;
} else if (maxWidth > colMaxWidth) {
return colMaxWidth;
- } else if (maxWidth <= 0) {
- // In the case of partially hiding the header, the width calculation may be 0.
- // In this case, the default value is used to prevent it from being unable to be displayed
- maxWidth = table.defaultColWidth;
}
return maxWidth;
}
@@ -457,7 +440,7 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI)
rect: getCellRect(col, row, table),
table
};
- if (isFunction(customLayout)) {
+ if (customLayout) {
// 处理customLayout
const customLayoutObj = customLayout(arg);
if (customLayoutObj.rootContainer instanceof VGroup) {
@@ -470,8 +453,6 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI)
enableCellPadding = customLayoutObj.enableCellPadding;
} else {
width = 0;
- renderDefault = customLayoutObj.renderDefault;
- enableCellPadding = customLayoutObj.enableCellPadding;
}
} else if (typeof customRender === 'function') {
// 处理customRender
@@ -482,7 +463,6 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI)
width = customRender?.expectedWidth ?? 0;
renderDefault = customRender?.renderDefault;
}
- width = Math.ceil(width);
if (enableCellPadding) {
const actStyle = table._getCellStyle(col, row);
const padding = getQuadProps(getProp('padding', actStyle, col, row, table));
@@ -594,11 +574,11 @@ function computeTextWidth(col: number, row: number, cellType: ColumnTypeOption,
} else {
text = cellValue;
}
- const lines = breakString(text, table).text;
+ const lines = breakString(text, table);
if (lines.length >= 1) {
// eslint-disable-next-line no-loop-func
lines.forEach((line: string) => {
- const width = table.measureText(line, {
+ const width = table.measureText(line.slice(0, table.options.maxCharactersNumber || 200), {
fontSize,
fontFamily,
fontWeight
@@ -693,8 +673,6 @@ export function getAdaptiveWidth(
) {
let actualWidth = 0;
const adaptiveColumns: number[] = [];
- const sparklineColumns = [];
- let totalSparklineAbleWidth = 0;
for (let col = startCol; col < endColPlus1; col++) {
const width = update ? newWidths[col] : table.getColWidth(col);
const maxWidth = table.getMaxColWidth(col);
@@ -706,40 +684,10 @@ export function getAdaptiveWidth(
// fixed width, do not adaptive
totalDrawWidth -= width;
}
-
- if (table.options.customConfig?.shrinkSparklineFirst) {
- const bodyCellType = table.getBodyColumnType(col, 0);
- if (bodyCellType === 'sparkline') {
- sparklineColumns.push({ col, width });
- totalSparklineAbleWidth += width - table.defaultColWidth;
- }
- }
}
const factor = totalDrawWidth / actualWidth;
- if (
- table.options.customConfig?.shrinkSparklineFirst &&
- factor < 1 &&
- actualWidth - totalDrawWidth < totalSparklineAbleWidth
- ) {
- // only shrink sparkline column
- for (let i = 0; i < sparklineColumns.length; i++) {
- const { col, width } = sparklineColumns[i];
- const deltaWidth = (actualWidth - totalDrawWidth) / sparklineColumns.length;
- const colWidth = Math.floor(width - deltaWidth);
-
- if (update) {
- newWidths[col] = table._adjustColWidth(col, colWidth);
- } else if (fromScenegraph) {
- table.scenegraph.setColWidth(col, table._adjustColWidth(col, colWidth));
- } else {
- table._setColWidth(col, table._adjustColWidth(col, colWidth), false, true);
- }
- }
- return;
- }
-
for (let i = 0; i < adaptiveColumns.length; i++) {
const col = adaptiveColumns[i];
let colWidth;
diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts
index 8ae8a201f..b9cbdd448 100644
--- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts
+++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts
@@ -8,9 +8,9 @@ import type { ColumnData, ColumnDefine, TextColumnDefine } from '../../ts-types/
import { getProp } from '../utils/get-prop';
import { getQuadProps } from '../utils/padding';
import { dealWithRichTextIcon } from '../utils/text-icon-layout';
-import type { ComputeAxisComponentHeight } from '../../components/axis/get-axis-component-size';
-import { Factory } from '../../core/factory';
-import { isArray, isFunction, isNumber, isObject, isValid } from '@visactor/vutils';
+import { getAxisConfigInPivotChart } from '../../layout/chart-helper/get-axis-config';
+import { computeAxisComponentHeight } from '../../components/axis/get-axis-component-size';
+import { isArray, isNumber, isObject, isValid } from '@visactor/vutils';
import { CheckBox } from '@visactor/vrender-components';
import { decodeReactDom, dealPercentCalc } from '../component/custom';
import { getCellMergeRange } from '../../tools/merge-range';
@@ -351,10 +351,8 @@ export function computeRowHeight(row: number, startCol: number, endCol: number,
// Axis component height calculation
if (table.isPivotChart()) {
const layout = table.internalProps.layoutMap as PivotHeaderLayoutMap;
- const axisConfig = layout.getAxisConfigInPivotChart(col, row);
+ const axisConfig = getAxisConfigInPivotChart(col, row, layout);
if (axisConfig) {
- const computeAxisComponentHeight: ComputeAxisComponentHeight =
- Factory.getFunction('computeAxisComponentHeight');
const axisWidth = computeAxisComponentHeight(axisConfig, table);
if (typeof axisWidth === 'number') {
maxHeight = isValid(maxHeight) ? Math.max(axisWidth, maxHeight) : axisWidth;
@@ -504,9 +502,6 @@ function fillRowsHeight(
table: BaseTableAPI,
newHeights: number[] | undefined
) {
- if (table.internalProps.useOneRowHeightFillAll) {
- return;
- }
for (let row = startRow; row <= endRow; row++) {
if (newHeights) {
newHeights[row] = height;
@@ -514,7 +509,6 @@ function fillRowsHeight(
table._setRowHeight(row, height);
}
}
- table.internalProps.useOneRowHeightFillAll = true;
}
/**
@@ -548,7 +542,7 @@ function computeCustomRenderHeight(col: number, row: number, table: BaseTableAPI
rect: getCellRect(col, row, table),
table
};
- if (isFunction(customLayout)) {
+ if (customLayout) {
// 处理customLayout
const customLayoutObj = customLayout(arg);
if (customLayoutObj.rootContainer instanceof VGroup) {
@@ -560,8 +554,6 @@ function computeCustomRenderHeight(col: number, row: number, table: BaseTableAPI
enableCellPadding = customLayoutObj.enableCellPadding;
} else {
height = 0;
- renderDefault = customLayoutObj.renderDefault;
- enableCellPadding = customLayoutObj.enableCellPadding;
}
} else if (typeof customRender === 'function') {
// 处理customRender
@@ -659,7 +651,6 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption,
const lineHeight = getProp('lineHeight', actStyle, col, row, table) ?? fontSize;
const fontFamily = getProp('fontFamily', actStyle, col, row, table);
const autoWrapText = getProp('autoWrapText', actStyle, col, row, table);
- const lineClamp = getProp('lineClamp', actStyle, col, row, table);
let text;
if (
cellType !== 'text' &&
@@ -683,7 +674,6 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption,
fontWeight,
fontFamily,
lineHeight,
- lineClamp,
padding,
table
);
@@ -701,14 +691,13 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption,
fontWeight,
fontFamily,
lineHeight,
- lineClamp,
padding,
table
);
} else {
// text
text = cellValue;
- const lines = breakString(text, table).text;
+ const lines = breakString(text, table);
const cellWidth = table.getColsWidth(col, endCol);
if (iconInlineFront.length || iconInlineEnd.length) {
@@ -760,17 +749,12 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption,
fontFamily,
lineHeight,
wordBreak: 'break-word',
- whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
- lineClamp
+ whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
});
maxHeight = bounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
} else {
// autoWrapText = false
- if (table.options.customConfig?.multilinesForXTable) {
- maxHeight = lineHeight;
- } else {
- maxHeight = lines.length * lineHeight;
- }
+ maxHeight = lines.length * lineHeight;
}
}
return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow;
diff --git a/packages/vtable/src/scenegraph/layout/frozen.ts b/packages/vtable/src/scenegraph/layout/frozen.ts
index e028d6c9a..e6124c84a 100644
--- a/packages/vtable/src/scenegraph/layout/frozen.ts
+++ b/packages/vtable/src/scenegraph/layout/frozen.ts
@@ -17,9 +17,6 @@ export function dealFrozen(scene: Scenegraph) {
}
} else if (scene.table.frozenColCount < scene.table.rowHeaderLevelCount) {
// move columnGroup from rowHeaderGroup into bodyGroup(from cornerHeaderGroup into colHeaderGroup)
- scene.bodyGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height);
- scene.bodyGroup.setAttribute('y', scene.rowHeaderGroup.attribute.y);
- scene.colHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height);
for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) {
moveColumnFromRowHeaderToBody(scene);
moveColumnFromCornerHeaderToColHeader(scene);
@@ -50,9 +47,6 @@ export function dealFrozen(scene: Scenegraph) {
export function resetFrozen(scene: Scenegraph) {
if (scene.frozenColCount > scene.table.frozenColCount) {
// move columnGroup from rowHeaderGroup into bodyGroup(from cornerHeaderGroup into colHeaderGroup)
- scene.bodyGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height);
- scene.bodyGroup.setAttribute('y', scene.rowHeaderGroup.attribute.y);
- scene.colHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height);
for (let i = 0; i < scene.frozenColCount - scene.table.frozenColCount; i++) {
moveColumnFromRowHeaderToBody(scene);
moveColumnFromCornerHeaderToColHeader(scene);
@@ -72,7 +66,7 @@ export function resetFrozen(scene: Scenegraph) {
scene.deleteAllSelectBorder();
scene.table.stateManager.select.ranges.forEach(range => {
- scene.updateCellSelectBorder(range);
+ scene.updateCellSelectBorder(range.start.col, range.start.row, range.end.col, range.end.row);
});
// scene.frozenColCount = scene.rowHeaderGroup.childrenCount;
diff --git a/packages/vtable/src/scenegraph/layout/height-util.ts b/packages/vtable/src/scenegraph/layout/height-util.ts
index 111327c75..b9eaf8df6 100644
--- a/packages/vtable/src/scenegraph/layout/height-util.ts
+++ b/packages/vtable/src/scenegraph/layout/height-util.ts
@@ -21,7 +21,6 @@ export function computeCheckboxCellHeight(
fontWeight: string,
fontFamily: string,
lineHeight: number,
- lineClamp: number | undefined,
padding: [number, number, number, number],
table: BaseTableAPI
) {
@@ -42,8 +41,7 @@ export function computeCheckboxCellHeight(
fontWeight,
fontFamily,
lineHeight,
- wordBreak: 'break-word',
- lineClamp
+ wordBreak: 'break-word'
},
icon: {
width: Math.floor(size / 1.4), // icon : box => 10 : 14
@@ -77,7 +75,6 @@ export function computeRadioCellHeight(
fontWeight: string,
fontFamily: string,
lineHeight: number,
- lineClamp: number | undefined,
padding: [number, number, number, number],
table: BaseTableAPI
) {
@@ -103,7 +100,6 @@ export function computeRadioCellHeight(
fontWeight,
fontFamily,
lineHeight,
- lineClamp,
padding,
table
);
@@ -128,7 +124,6 @@ export function computeRadioCellHeight(
fontWeight,
fontFamily,
lineHeight,
- lineClamp,
padding,
table
);
@@ -151,7 +146,6 @@ export function computeRadioCellHeight(
fontWeight,
fontFamily,
lineHeight,
- lineClamp,
padding,
table
);
@@ -170,7 +164,6 @@ export function computeSingleRadioCellHeight(
fontWeight: string,
fontFamily: string,
lineHeight: number,
- lineClamp: number | undefined,
padding: [number, number, number, number],
table: BaseTableAPI
) {
@@ -196,8 +189,7 @@ export function computeSingleRadioCellHeight(
fontWeight,
fontFamily,
lineHeight,
- wordBreak: 'break-word',
- lineClamp
+ wordBreak: 'break-word'
},
circle: {
outerRadius
diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts
index 89be8e15b..c566d1cc1 100644
--- a/packages/vtable/src/scenegraph/layout/update-height.ts
+++ b/packages/vtable/src/scenegraph/layout/update-height.ts
@@ -1,14 +1,14 @@
import type { ProgressBarStyle } from '../../body-helper/style/ProgressBarStyle';
import type { Group } from '../graphic/group';
-import type { CreateProgressBarCell } from '../group-creater/cell-type/progress-bar-cell';
-import type { CreateSparkLineCellGroup } from '../group-creater/cell-type/spark-line-cell';
+import { createProgressBarCell } from '../group-creater/cell-type/progress-bar-cell';
+import { createSparkLineCellGroup } from '../group-creater/cell-type/spark-line-cell';
import type { Scenegraph } from '../scenegraph';
import { getCellMergeInfo } from '../utils/get-cell-merge';
import { getProp } from '../utils/get-prop';
import { getQuadProps } from '../utils/padding';
import { updateCellContentHeight } from '../utils/text-icon-layout';
import type { IProgressbarColumnBodyDefine } from '../../ts-types/list-table/define/progressbar-define';
-import { CUSTOM_CONTAINER_NAME, CUSTOM_MERGE_CONTAINER_NAME, dealWithCustom } from '../component/custom';
+import { dealWithCustom } from '../component/custom';
import { updateImageCellContentWhileResize } from '../group-creater/cell-type/image-cell';
import { getStyleTheme } from '../../core/tableHelper';
import { isMergeCellGroup } from '../utils/is-merge-cell-group';
@@ -17,7 +17,6 @@ import { resizeCellGroup, getCustomCellMergeCustom } from '../group-creater/cell
import type { IGraphic } from '@src/vrender';
import { getCellMergeRange } from '../../tools/merge-range';
import type { ColumnDefine } from '../../ts-types';
-import { Factory } from '../../core/factory';
export function updateRowHeight(scene: Scenegraph, row: number, detaY: number, skipTableHeightMap?: boolean) {
// 更新table行高存储
@@ -45,13 +44,13 @@ export function updateRowHeight(scene: Scenegraph, row: number, detaY: number, s
let rowStart = 0;
let rowEnd = 0;
// 更新header 高度
- if (row < scene.table.frozenRowCount) {
+ if (row < scene.table.columnHeaderLevelCount) {
// scene.colHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height + detaY);
// scene.rowHeaderGroup.setAttribute('y', scene.rowHeaderGroup.attribute.y + detaY);
// scene.bodyGroup.setAttribute('y', scene.bodyGroup.attribute.y + detaY);
rowStart = row + 1;
- rowEnd = scene.table.frozenRowCount - 1;
+ rowEnd = scene.table.columnHeaderLevelCount - 1;
} else if (row >= scene.table.rowCount - scene.table.bottomFrozenRowCount) {
rowStart = row + 1;
rowEnd = scene.table.rowCount - 1;
@@ -62,9 +61,9 @@ export function updateRowHeight(scene: Scenegraph, row: number, detaY: number, s
}
// 更新以下行位置
- for (let colIndex = 0; colIndex < scene.table.colCount; colIndex++) {
- for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
- const cellGroup = scene.highPerformanceGetCell(colIndex, rowIndex);
+ for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
+ for (let colIndex = 0; colIndex < scene.table.colCount; colIndex++) {
+ const cellGroup = scene.getCell(colIndex, rowIndex);
if (cellGroup.role === 'cell') {
cellGroup.setAttribute('y', cellGroup.attribute.y + detaY);
}
@@ -140,7 +139,6 @@ export function updateCellHeight(
const dataValue = scene.table.getCellOriginValue(col, row);
const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
- const createProgressBarCell = Factory.getFunction('createProgressBarCell') as CreateProgressBarCell;
const newBarCell = createProgressBarCell(
columnDefine,
style,
@@ -165,7 +163,6 @@ export function updateCellHeight(
cell.removeAllChild();
const headerStyle = scene.table._getCellStyle(col, row);
const padding = getQuadProps(getProp('padding', headerStyle, col, row, scene.table));
- const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup') as CreateSparkLineCellGroup;
createSparkLineCellGroup(
cell,
cell.parent,
@@ -181,14 +178,12 @@ export function updateCellHeight(
false
);
} else if (type === 'image' || type === 'video') {
- updateImageCellContentWhileResize(cell, col, row, 0, detaY, scene.table);
+ updateImageCellContentWhileResize(cell, col, row, scene.table);
} else if (cell.firstChild?.name === 'axis') {
(cell.firstChild as any)?.originAxis.resize(cell.attribute.width, cell.attribute.height);
} else {
let renderDefault = true;
- const customContainer =
- (cell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
- (cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
+ const customContainer = cell.getChildByName('custom-container') as Group;
if (customContainer) {
let customElementsGroup;
customContainer.removeAllChild();
@@ -201,9 +196,7 @@ export function updateCellHeight(
continue;
}
const mergedCell = scene.getCell(col, mergeRow);
- const customContainer =
- (cell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
- (cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
+ const customContainer = mergedCell.getChildByName('custom-container') as Group;
customContainer.removeAllChild();
mergedCell.removeChild(customContainer);
getCustomCellMergeCustom(col, mergeRow, mergedCell, scene.table);
@@ -243,12 +236,6 @@ export function updateCellHeight(
// scene.table.heightMode === 'autoHeight',
scene.table.isAutoRowHeight(row),
padding,
- isMergeCellGroup(cell)
- ? {
- start: { col: cell.mergeStartCol, row: cell.mergeStartRow },
- end: { col: cell.mergeEndCol, row: cell.mergeEndRow }
- }
- : undefined,
scene.table
);
customElementsGroup = customResult.elementsGroup;
diff --git a/packages/vtable/src/scenegraph/layout/update-width.ts b/packages/vtable/src/scenegraph/layout/update-width.ts
index 81b480558..e4712c6fa 100644
--- a/packages/vtable/src/scenegraph/layout/update-width.ts
+++ b/packages/vtable/src/scenegraph/layout/update-width.ts
@@ -1,15 +1,14 @@
import type { IGraphic } from '@src/vrender';
import type { ProgressBarStyle } from '../../body-helper/style/ProgressBarStyle';
-import type { ICartesianAxis } from '../../components/axis/axis';
-import { Factory } from '../../core/factory';
+import { CartesianAxis } from '../../components/axis/axis';
import { getStyleTheme } from '../../core/tableHelper';
import type { BaseTableAPI, HeaderData } from '../../ts-types/base-table';
import type { IProgressbarColumnBodyDefine } from '../../ts-types/list-table/define/progressbar-define';
-import { CUSTOM_CONTAINER_NAME, CUSTOM_MERGE_CONTAINER_NAME, dealWithCustom } from '../component/custom';
+import { dealWithCustom } from '../component/custom';
import type { Group } from '../graphic/group';
import { updateImageCellContentWhileResize } from '../group-creater/cell-type/image-cell';
-import type { CreateProgressBarCell } from '../group-creater/cell-type/progress-bar-cell';
-import type { CreateSparkLineCellGroup } from '../group-creater/cell-type/spark-line-cell';
+import { createProgressBarCell } from '../group-creater/cell-type/progress-bar-cell';
+import { createSparkLineCellGroup } from '../group-creater/cell-type/spark-line-cell';
import { resizeCellGroup, getCustomCellMergeCustom } from '../group-creater/cell-helper';
import type { Scenegraph } from '../scenegraph';
import { getCellMergeInfo } from '../utils/get-cell-merge';
@@ -279,7 +278,6 @@ function updateCellWidth(
const dataValue = scene.table.getCellOriginValue(col, row);
const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
- const createProgressBarCell = Factory.getFunction('createProgressBarCell') as CreateProgressBarCell;
const newBarCell = createProgressBarCell(
columnDefine,
style,
@@ -304,7 +302,6 @@ function updateCellWidth(
cellGroup.removeAllChild();
const headerStyle = scene.table._getCellStyle(col, row);
const padding = getQuadProps(getProp('padding', headerStyle, col, row, scene.table));
- const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup') as CreateSparkLineCellGroup;
createSparkLineCellGroup(
cellGroup,
cellGroup.parent,
@@ -323,14 +320,13 @@ function updateCellWidth(
// // 只更新背景边框
// const rect = cell.firstChild as Rect;
// rect.setAttribute('width', cell.attribute.width);
- updateImageCellContentWhileResize(cellGroup, col, row, detaX, 0, scene.table);
+ updateImageCellContentWhileResize(cellGroup, col, row, scene.table);
} else if (cellGroup.firstChild?.name === 'axis') {
// recreate axis component
const axisConfig = scene.table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
const cellStyle = scene.table._getCellStyle(col, row);
const padding = getQuadProps(getProp('padding', cellStyle, col, row, scene.table));
if (axisConfig) {
- const CartesianAxis: ICartesianAxis = Factory.getComponent('axis');
const axis = new CartesianAxis(
axisConfig,
cellGroup.attribute.width,
@@ -346,9 +342,7 @@ function updateCellWidth(
(cell.firstChild as any)?.originAxis.resize(cell.attribute.width, cell.attribute.height);
} else {
let renderDefault = true;
- const customContainer =
- (cell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
- (cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
+ const customContainer = cell.getChildByName('custom-container') as Group;
if (customContainer) {
let customElementsGroup;
customContainer.removeAllChild();
@@ -361,9 +355,7 @@ function updateCellWidth(
continue;
}
const mergedCell = scene.getCell(mergeCol, row);
- const customContainer =
- (mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
- (cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
+ const customContainer = mergedCell.getChildByName('custom-container') as Group;
customContainer.removeAllChild();
mergedCell.removeChild(customContainer);
getCustomCellMergeCustom(mergeCol, row, mergedCell, scene.table);
@@ -403,12 +395,6 @@ function updateCellWidth(
// scene.table.heightMode === 'autoHeight',
scene.table.isAutoRowHeight(row),
padding,
- isMergeCellGroup(cellGroup)
- ? {
- start: { col: cellGroup.mergeStartCol, row: cellGroup.mergeStartRow },
- end: { col: cellGroup.mergeEndCol, row: cellGroup.mergeEndRow }
- }
- : undefined,
scene.table
);
customElementsGroup = customResult.elementsGroup;
@@ -433,10 +419,7 @@ function updateCellWidth(
);
isHeightChange = isHeightChange || cellChange;
}
- if (!autoWrapText) {
- const style = scene.table._getCellStyle(col, row);
- autoWrapText = style.autoWrapText;
- }
+
return autoRowHeight && autoWrapText ? isHeightChange : false;
}
diff --git a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts
index d302c3780..3f4b06281 100644
--- a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts
+++ b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts
@@ -1,7 +1,6 @@
import { isEqual } from '@visactor/vutils';
import type { PivotChart } from '../../PivotChart';
-import type { ICartesianAxis } from '../../components/axis/axis';
-import { Factory } from '../../core/factory';
+import { CartesianAxis } from '../../components/axis/axis';
import type { BaseTableAPI } from '../../ts-types/base-table';
import type { Chart } from '../graphic/chart';
import type { Group } from '../graphic/group';
@@ -210,7 +209,6 @@ function updateTableAxes(containerGroup: Group, table: BaseTableAPI) {
const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(cell.col, cell.row);
const cellStyle = table._getCellStyle(cell.col, cell.row);
const padding = getQuadProps(getProp('padding', cellStyle, cell.col, cell.row, table));
- const CartesianAxis: ICartesianAxis = Factory.getComponent('axis');
const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, padding, table);
cell.clear();
cell.appendChild(axis.component);
diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts
index f144e14ab..4466732d4 100644
--- a/packages/vtable/src/scenegraph/scenegraph.ts
+++ b/packages/vtable/src/scenegraph/scenegraph.ts
@@ -66,13 +66,12 @@ import { createCornerCell } from './style/corner-cell';
import { updateCol } from './layout/update-col';
import { deduplication } from '../tools/util';
import { getDefaultHeight, getDefaultWidth } from './group-creater/progress/default-width-height';
-import { dealWithAnimationAppear } from './animation/appear';
// import { contextModule } from './context/module';
registerForVrender();
// VChart poptip theme
-// loadPoptip();
+loadPoptip();
container.load(splitModule);
container.load(textMeasureModule);
// container.load(renderServiceModule);
@@ -149,13 +148,11 @@ export class Scenegraph {
background: table.theme.underlayBackgroundColor,
dpr: table.internalProps.pixelRatio,
enableLayout: true,
- // enableHtmlAttribute: true,
// pluginList: table.isPivotChart() ? ['poptipForText'] : undefined,
afterRender: () => {
this.table.fireListeners('after_render', null);
// console.trace('after_render');
- },
- ...table.options.renderOption
+ }
// event: { clickInterval: 400 }
// autoRender: true
});
@@ -345,10 +342,8 @@ export class Scenegraph {
* @description: 依据数据创建表格场景树
* @return {*}
*/
- createSceneGraph(skipRowHeightClear = false) {
- if (!skipRowHeightClear) {
- this.table.rowHeightsMap.clear();
- }
+ createSceneGraph() {
+ this.table.rowHeightsMap.clear();
// if (this.table.heightMode === 'autoHeight') {
// this.table.defaultRowHeight = getDefaultHeight(this.table);
@@ -370,7 +365,7 @@ export class Scenegraph {
this.clear = false;
// this.frozenColCount = this.table.rowHeaderLevelCount;
this.frozenColCount = this.table.frozenColCount;
- this.frozenRowCount = this.table.frozenRowCount;
+ this.frozenRowCount = this.table.columnHeaderLevelCount;
this.proxy = new SceneProxy(this.table);
@@ -694,8 +689,14 @@ export class Scenegraph {
deleteAllSelectBorder(this);
}
- updateCellSelectBorder(selectRange: CellRange & { skipBodyMerge?: boolean }, extendSelectRange: boolean = true) {
- updateCellSelectBorder(this, selectRange, extendSelectRange);
+ updateCellSelectBorder(
+ newStartCol: number,
+ newStartRow: number,
+ newEndCol: number,
+ newEndRow: number,
+ extendSelectRange: boolean = true
+ ) {
+ updateCellSelectBorder(this, newStartCol, newStartRow, newEndCol, newEndRow, extendSelectRange);
}
removeFillHandleFromSelectComponents() {
@@ -705,7 +706,7 @@ export class Scenegraph {
recreateAllSelectRangeComponents() {
deleteAllSelectBorder(this);
this.table.stateManager.select.ranges.forEach((cellRange: CellRange) => {
- updateCellSelectBorder(this, cellRange);
+ updateCellSelectBorder(this, cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row);
});
moveSelectingRangeComponentsToSelectedRangeComponents(this);
}
@@ -812,7 +813,6 @@ export class Scenegraph {
}
recalculateRowHeights() {
- this.table.internalProps.useOneRowHeightFillAll = false;
computeRowsHeight(this.table, 0, this.table.rowCount - 1, true, true);
}
@@ -1221,12 +1221,6 @@ export class Scenegraph {
handleTextStick(this.table);
- // deal with animation
-
- if (this.table.options.animationAppear) {
- dealWithAnimationAppear(this.table);
- }
-
this.updateNextFrame();
}
@@ -1535,8 +1529,6 @@ export class Scenegraph {
this.updateTableSize();
this.component.updateScrollBar();
- this.updateDomContainer();
-
this.updateNextFrame();
}
@@ -1544,7 +1536,7 @@ export class Scenegraph {
const type = this.table.getBodyColumnType(col, row);
const cellGroup = this.getCell(col, row);
if (type === 'image' || type === 'video') {
- updateImageCellContentWhileResize(cellGroup, col, row, 0, 0, this.table);
+ updateImageCellContentWhileResize(cellGroup, col, row, this.table);
}
}
@@ -1616,34 +1608,29 @@ export class Scenegraph {
): { col: number; row: number; x?: number; rightFrozen?: boolean } {
let cell: { col: number; row: number; x?: number; rightFrozen?: boolean };
if (!cellGroup) {
- const drawRange = this.table.getDrawRange();
- if (abstractY >= drawRange.top && abstractY <= drawRange.bottom) {
- // to do: 处理最后一列外调整列宽
- cell = this.table.getCellAtRelativePosition(abstractX - offset, abstractY);
- return cell;
+ // to do: 处理最后一列外调整列宽
+ cell = this.table.getCellAt(abstractX - offset, abstractY);
+ } else {
+ if (abstractX < cellGroup.globalAABBBounds.x1 + offset) {
+ cell = { col: cellGroup.col - 1, row: cellGroup.row, x: cellGroup.globalAABBBounds.x1 };
+ } else if (cellGroup.globalAABBBounds.x2 - offset < abstractX) {
+ cell = { col: cellGroup.col, row: cellGroup.row, x: cellGroup.globalAABBBounds.x2 };
+ }
+ if (
+ cell &&
+ this.table.rightFrozenColCount > 0 &&
+ cell.col === this.table.colCount - this.table.rightFrozenColCount - 1 &&
+ this.table.tableNoFrameWidth -
+ this.table.getFrozenColsWidth() -
+ this.table.getRightFrozenColsWidth() +
+ this.table.scrollLeft <
+ this.bodyGroup.attribute.width
+ ) {
+ // 有右侧冻结列，并且横向没有滚动到最右侧时，右侧冻结列左侧调整对只对右侧冻结列生效
+ cell.col = cell.col + 1;
+ cell.rightFrozen = true;
}
- return { col: -1, row: -1 };
- }
- if (abstractX < cellGroup.globalAABBBounds.x1 + offset) {
- cell = { col: cellGroup.col - 1, row: cellGroup.row, x: cellGroup.globalAABBBounds.x1 };
- } else if (cellGroup.globalAABBBounds.x2 - offset < abstractX) {
- cell = { col: cellGroup.col, row: cellGroup.row, x: cellGroup.globalAABBBounds.x2 };
- }
- if (
- cell &&
- this.table.rightFrozenColCount > 0 &&
- cell.col === this.table.colCount - this.table.rightFrozenColCount - 1 &&
- this.table.tableNoFrameWidth -
- this.table.getFrozenColsWidth() -
- this.table.getRightFrozenColsWidth() +
- this.table.scrollLeft <
- this.bodyGroup.attribute.width
- ) {
- // 有右侧冻结列，并且横向没有滚动到最右侧时，右侧冻结列左侧调整对只对右侧冻结列生效
- cell.col = cell.col + 1;
- cell.rightFrozen = true;
}
-
if (cell) {
return cell;
}
@@ -1752,9 +1739,6 @@ export class Scenegraph {
const text = cellGroup.getChildByName('text', true) as unknown as Text | RichText;
if (text && text.type === 'text') {
- if ((text.attribute as any).moreThanMaxCharacters) {
- return this.table.getCellValue(col, row);
- }
const textAttributeStr = isArray(text.attribute.text)
? text.attribute.text.join('')
: (text.attribute.text as string);
@@ -1767,8 +1751,7 @@ export class Scenegraph {
});
}
if (cacheStr !== textAttributeStr) {
- // return textAttributeStr;
- return this.table.getCellValue(col, row);
+ return textAttributeStr;
}
} else if (text && text.type === 'richtext') {
const richtext = text;
@@ -1778,8 +1761,7 @@ export class Scenegraph {
richtext.attribute.height < richtext._frameCache.actualHeight
) {
const textConfig = richtext.attribute.textConfig.find((item: any) => item.text);
- // return (textConfig as any).text as string;
- return this.table.getCellValue(col, row);
+ return (textConfig as any).text as string;
}
}
return null;
@@ -1808,7 +1790,6 @@ export class Scenegraph {
updateRow(removeCells: CellAddress[], addCells: CellAddress[], updateCells: CellAddress[] = []) {
this.table.internalProps.layoutMap.clearCellRangeMap();
- this.table.internalProps.useOneRowHeightFillAll = false;
const addRows = deduplication(addCells.map(cell => cell.row)).sort((a, b) => a - b);
const updateRows = deduplication(updateCells.map(cell => cell.row)).sort((a, b) => a - b);
//这个值是后续为了autoFillHeight判断逻辑中用到的 判断是否更新前是未填满的情况
@@ -1905,12 +1886,12 @@ export class Scenegraph {
}
getCellGroupY(row: number) {
- if (row < this.table.frozenRowCount) {
+ if (row < this.table.columnHeaderLevelCount) {
// column header
return this.table.getRowsHeight(0, row - 1);
} else if (row < this.table.rowCount - this.table.bottomFrozenRowCount) {
// body
- return this.table.getRowsHeight(this.table.frozenRowCount, row - 1);
+ return this.table.getRowsHeight(this.table.columnHeaderLevelCount, row - 1);
} else if (row < this.table.rowCount) {
// bottom frozen
return this.table.getRowsHeight(this.table.rowCount - this.table.bottomFrozenRowCount, row - 1);
@@ -1934,18 +1915,4 @@ export class Scenegraph {
// updateCellValue(col: number, row: number) {
// updateCell(col, row, this.table);
// }
- updateDomContainer() {
- const { headerDomContainer, bodyDomContainer } = this.table.internalProps;
- if (headerDomContainer) {
- headerDomContainer.style.width = `${headerDomContainer.parentElement?.offsetWidth ?? 1 - 1}px`;
- headerDomContainer.style.height = `${this.table.getFrozenRowsHeight()}px`;
- }
- if (bodyDomContainer) {
- bodyDomContainer.style.width = `${bodyDomContainer.parentElement?.offsetWidth ?? 1 - 1}px`;
- bodyDomContainer.style.height = `${
- bodyDomContainer.parentElement?.offsetHeight ?? 1 - 1 - this.table.getFrozenRowsHeight()
- }px`;
- bodyDomContainer.style.top = `${this.table.getFrozenRowsHeight()}px`;
- }
- }
}
diff --git a/packages/vtable/src/scenegraph/select/update-select-border.ts b/packages/vtable/src/scenegraph/select/update-select-border.ts
index 1385309f9..c5a54fb9b 100644
--- a/packages/vtable/src/scenegraph/select/update-select-border.ts
+++ b/packages/vtable/src/scenegraph/select/update-select-border.ts
@@ -1,6 +1,6 @@
import type { IRect } from '@src/vrender';
import type { Scenegraph } from '../scenegraph';
-import type { CellRange, CellSubLocation } from '../../ts-types';
+import type { CellSubLocation } from '../../ts-types';
import { getCellMergeInfo } from '../utils/get-cell-merge';
export function updateAllSelectComponent(scene: Scenegraph) {
@@ -21,7 +21,6 @@ function updateComponent(
key: string,
scene: Scenegraph
) {
- const table = scene.table;
const [startColStr, startRowStr, endColStr, endRowStr] = key.split('-');
const startCol = parseInt(startColStr, 10);
const startRow = parseInt(startRowStr, 10);
@@ -36,14 +35,14 @@ function updateComponent(
let visibleCellRange;
switch (selectComp.role) {
case 'rowHeader':
- visibleCellRange = table.getBodyVisibleRowRange();
+ visibleCellRange = scene.table.getBodyVisibleRowRange();
if (visibleCellRange) {
computeRectCellRangeStartRow = Math.max(startRow, visibleCellRange.rowStart - 1);
computeRectCellRangeEndRow = Math.min(endRow, visibleCellRange.rowEnd + 1);
}
break;
case 'columnHeader':
- visibleCellRange = table.getBodyVisibleCellRange();
+ visibleCellRange = scene.table.getBodyVisibleCellRange();
if (visibleCellRange) {
computeRectCellRangeStartCol = Math.max(startCol, visibleCellRange.colStart - 1);
computeRectCellRangeEndCol = Math.min(endCol, visibleCellRange.colEnd + 1);
@@ -52,14 +51,14 @@ function updateComponent(
case 'cornerHeader':
break;
case 'bottomFrozen':
- visibleCellRange = table.getBodyVisibleCellRange();
+ visibleCellRange = scene.table.getBodyVisibleCellRange();
if (visibleCellRange) {
computeRectCellRangeStartCol = Math.max(startCol, visibleCellRange.colStart - 1);
computeRectCellRangeEndCol = Math.min(endCol, visibleCellRange.colEnd + 1);
}
break;
case 'rightFrozen':
- visibleCellRange = table.getBodyVisibleCellRange();
+ visibleCellRange = scene.table.getBodyVisibleCellRange();
if (visibleCellRange) {
computeRectCellRangeStartRow = Math.max(startRow, visibleCellRange.rowStart - 1);
computeRectCellRangeEndRow = Math.min(endRow, visibleCellRange.rowEnd + 1);
@@ -72,7 +71,7 @@ function updateComponent(
case 'rightBottomCorner':
break;
default:
- visibleCellRange = table.getBodyVisibleCellRange();
+ visibleCellRange = scene.table.getBodyVisibleCellRange();
if (visibleCellRange) {
computeRectCellRangeStartRow = Math.max(startRow, visibleCellRange.rowStart - 1);
computeRectCellRangeEndRow = Math.min(endRow, visibleCellRange.rowEnd + 1);
@@ -81,11 +80,11 @@ function updateComponent(
}
break;
}
- // const cellRange = table.getCellRange(startCol, startRow);
- // const colsWidth = table.getColsWidth(cellRange.start.col, endCol);
- // const rowsHeight = table.getRowsHeight(cellRange.start.row, endRow);
- const colsWidth = table.getColsWidth(computeRectCellRangeStartCol, computeRectCellRangeEndCol);
- const rowsHeight = table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
+ // const cellRange = scene.table.getCellRange(startCol, startRow);
+ // const colsWidth = scene.table.getColsWidth(cellRange.start.col, endCol);
+ // const rowsHeight = scene.table.getRowsHeight(cellRange.start.row, endRow);
+ const colsWidth = scene.table.getColsWidth(computeRectCellRangeStartCol, computeRectCellRangeEndCol);
+ const rowsHeight = scene.table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
const firstCellBound = scene.highPerformanceGetCell(
computeRectCellRangeStartCol,
computeRectCellRangeStartRow
@@ -103,7 +102,7 @@ function updateComponent(
visible: true
});
if (selectComp.fillhandle) {
- selectComp.fillhandle?.setAttributes({
+ selectComp.fillhandle.setAttributes({
x: lastCellBound.x2 - scene.tableGroup.attribute.x - 3, // 调整小方块位置
y: lastCellBound.y2 - scene.tableGroup.attribute.y - 3, // 调整小方块位置
width: 6,
@@ -113,42 +112,14 @@ function updateComponent(
}
//#region 判断是不是按着表头部分的选中框 因为绘制层级的原因 线宽会被遮住一半，因此需要动态调整层级
- let isNearRowHeader = table.frozenColCount ? startCol === table.frozenColCount : false;
- if (!isNearRowHeader && table.frozenColCount && table.scrollLeft > 0 && startCol >= table.frozenColCount) {
- const startColRelativePosition = table.getColsWidth(0, startCol - 1) - table.scrollLeft;
- if (startColRelativePosition < table.getFrozenColsWidth()) {
- isNearRowHeader = true;
- }
- }
-
- let isNearRightRowHeader = table.rightFrozenColCount
- ? table.rightFrozenColCount > 0 && endCol === table.colCount - table.rightFrozenColCount - 1
+ const isNearRowHeader = scene.table.frozenColCount ? startCol === scene.table.frozenColCount : false;
+ const isNearRightRowHeader = scene.table.rightFrozenColCount
+ ? scene.table.rightFrozenColCount > 0 && endCol === scene.table.colCount - scene.table.rightFrozenColCount - 1
: false;
- if (!isNearRightRowHeader && table.rightFrozenColCount && endCol < table.colCount - table.rightFrozenColCount) {
- const endColRelativePosition = table.getColsWidth(0, endCol) - table.scrollLeft;
- if (endColRelativePosition > table.tableNoFrameWidth - table.getRightFrozenColsWidth()) {
- isNearRightRowHeader = true;
- }
- }
-
- let isNearColHeader = table.frozenRowCount ? startRow === table.frozenRowCount : true;
- if (!isNearColHeader && table.frozenRowCount && table.scrollTop > 0 && startRow >= table.frozenRowCount) {
- const startRowRelativePosition = table.getRowsHeight(0, startRow - 1) - table.scrollTop;
- if (startRowRelativePosition < table.getFrozenRowsHeight()) {
- isNearColHeader = true;
- }
- }
-
- let isNearBottomColHeader = table.bottomFrozenRowCount
- ? endRow === table.rowCount - table.bottomFrozenRowCount - 1
+ const isNearColHeader = scene.table.frozenRowCount ? startRow === scene.table.frozenRowCount : true;
+ const isNearBottomColHeader = scene.table.bottomFrozenRowCount
+ ? endRow === scene.table.rowCount - scene.table.bottomFrozenRowCount - 1
: false;
- if (!isNearBottomColHeader && table.bottomFrozenRowCount && endRow < table.rowCount - table.bottomFrozenRowCount) {
- const endRowRelativePosition = table.getRowsHeight(0, endRow) - table.scrollTop;
- if (endRowRelativePosition > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight()) {
- isNearBottomColHeader = true;
- }
- }
-
if (
(isNearRowHeader && selectComp.rect.attribute.stroke[3]) ||
(isNearRightRowHeader && selectComp.rect.attribute.stroke[1]) ||
@@ -200,23 +171,24 @@ function updateComponent(
//#region 调整层级后 滚动情况下会出现绘制范围出界 如body的选中框 渲染在了rowheader上面，所有需要调整选中框rect的 边界
if (
- selectComp.rect.attribute.x < table.getFrozenColsWidth() &&
+ selectComp.rect.attribute.x < scene.table.getFrozenColsWidth() &&
// selectComp.rect.attribute.x + selectComp.rect.attribute.width > scene.rowHeaderGroup.attribute.width &&
- table.scrollLeft > 0 &&
+ scene.table.scrollLeft > 0 &&
(selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')
) {
- const width = selectComp.rect.attribute.width - (table.getFrozenColsWidth() - selectComp.rect.attribute.x);
+ const width = selectComp.rect.attribute.width - (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x);
selectComp.rect.setAttributes({
- x: selectComp.rect.attribute.x + (table.getFrozenColsWidth() - selectComp.rect.attribute.x),
+ x: selectComp.rect.attribute.x + (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x),
width: width > 0 ? width : 0
});
- selectComp.fillhandle?.setAttributes({
- visible: width > 0
- });
+ // selectComp.fillhandle.setAttributes({
+ // x: selectComp.rect.attribute.x + (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x),
+ // width: width > 0 ? width : 0
+ // });
}
if (
// selectComp.rect.attribute.x < scene.rightFrozenGroup.attribute.x &&
- table.getRightFrozenColsWidth() > 0 && // right冻结列存在的情况下
+ scene.table.getRightFrozenColsWidth() > 0 && // right冻结列存在的情况下
scene.rightFrozenGroup.attribute.height > 0 &&
selectComp.rect.attribute.x + selectComp.rect.attribute.width > scene.rightFrozenGroup.attribute.x &&
(selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')
@@ -226,13 +198,14 @@ function updateComponent(
x: selectComp.rect.attribute.x,
width: width > 0 ? width : 0
});
- selectComp.fillhandle?.setAttributes({
- visible: width - colsWidth > 0
- });
+ // selectComp.fillhandle.setAttributes({
+ // x: selectComp.rect.attribute.x,
+ // width: width > 0 ? width : 0
+ // });
}
if (
selectComp.rect.attribute.y < scene.colHeaderGroup.attribute.height &&
- table.scrollTop > 0 &&
+ scene.table.scrollTop > 0 &&
(selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')
) {
const height =
@@ -241,9 +214,10 @@ function updateComponent(
y: selectComp.rect.attribute.y + (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
height: height > 0 ? height : 0
});
- selectComp.fillhandle?.setAttributes({
- visible: height > 0
- });
+ // selectComp.fillhandle.setAttributes({
+ // y: selectComp.rect.attribute.y + (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
+ // height: height > 0 ? height : 0
+ // });
}
if (
scene.bottomFrozenGroup.attribute.width > 0 &&
@@ -256,9 +230,10 @@ function updateComponent(
y: selectComp.rect.attribute.y,
height: height > 0 ? height : 0
});
- selectComp.fillhandle?.setAttributes({
- visible: height - rowsHeight > 0
- });
+ // selectComp.fillhandle.setAttributes({
+ // y: selectComp.fillhandle.attribute.y,
+ // height: height > 0 ? height : 0
+ // });
}
//#endregion
} else {
@@ -290,14 +265,14 @@ function updateComponent(
if (typeof selectComp.rect.attribute.lineWidth === 'number') {
diffSize = Math.ceil(selectComp.rect.attribute.lineWidth / 2);
}
- if (endCol === table.colCount - 1) {
+ if (endCol === scene.table.colCount - 1) {
if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[1] ?? 0) / 2);
}
selectComp.rect.setAttributes({
width: selectComp.rect.attribute.width - diffSize
});
- // selectComp.fillhandle?.setAttributes({
+ // selectComp.fillhandle.setAttributes({
// width: selectComp.rect.attribute.width - diffSize
// });
}
@@ -309,19 +284,19 @@ function updateComponent(
x: selectComp.rect.attribute.x + diffSize,
width: selectComp.rect.attribute.width - diffSize
});
- // selectComp.fillhandle?.setAttributes({
+ // selectComp.fillhandle.setAttributes({
// x: selectComp.rect.attribute.x + diffSize,
// width: selectComp.rect.attribute.width - diffSize
// });
}
- if (endRow === table.rowCount - 1) {
+ if (endRow === scene.table.rowCount - 1) {
if (Array.isArray(selectComp.rect.attribute.lineWidth)) {
diffSize = Math.ceil((selectComp.rect.attribute.lineWidth[2] ?? 0) / 2);
}
selectComp.rect.setAttributes({
height: selectComp.rect.attribute.height - diffSize
});
- // selectComp.fillhandle?.setAttributes({
+ // selectComp.fillhandle.setAttributes({
// height: selectComp.rect.attribute.height - diffSize
// });
}
@@ -333,7 +308,7 @@ function updateComponent(
y: selectComp.rect.attribute.y + diffSize,
height: selectComp.rect.attribute.height - diffSize
});
- // selectComp.fillhandle?.setAttributes({
+ // selectComp.fillhandle.setAttributes({
// y: selectComp.rect.attribute.y + diffSize,
// height: selectComp.rect.attribute.height - diffSize
// });
@@ -343,30 +318,23 @@ function updateComponent(
export function updateCellSelectBorder(
scene: Scenegraph,
- selectRange: CellRange & { skipBodyMerge?: boolean },
+ newStartCol: number,
+ newStartRow: number,
+ newEndCol: number,
+ newEndRow: number,
ifExtendSelectRange: boolean = true
) {
- const table = scene.table;
- const newStartCol = selectRange.start.col;
- const newStartRow = selectRange.start.row;
- const newEndCol = selectRange.end.col;
- const newEndRow = selectRange.end.row;
- const skipBodyMerge = selectRange.skipBodyMerge;
-
let startCol = Math.max(Math.min(newEndCol, newStartCol), 0);
let startRow = Math.max(Math.min(newEndRow, newStartRow), 0);
- let endCol = Math.min(Math.max(newEndCol, newStartCol), table.colCount - 1);
- let endRow = Math.min(Math.max(newEndRow, newStartRow), table.rowCount - 1);
+ let endCol = Math.min(Math.max(newEndCol, newStartCol), scene.table.colCount - 1);
+ let endRow = Math.min(Math.max(newEndRow, newStartRow), scene.table.rowCount - 1);
//#region region 校验四周的单元格有没有合并的情况，如有则扩大范围
const extendSelectRange = () => {
let isExtend = false;
for (let col = startCol; col <= endCol; col++) {
if (col === startCol) {
for (let row = startRow; row <= endRow; row++) {
- if (!table.isHeader(col, row) && skipBodyMerge) {
- continue;
- }
- const mergeInfo = getCellMergeInfo(table, col, row);
+ const mergeInfo = getCellMergeInfo(scene.table, col, row);
if (mergeInfo && mergeInfo.start.col < startCol) {
startCol = mergeInfo.start.col;
isExtend = true;
@@ -376,11 +344,8 @@ export function updateCellSelectBorder(
}
if (!isExtend && col === endCol) {
for (let row = startRow; row <= endRow; row++) {
- if (!table.isHeader(col, row) && skipBodyMerge) {
- continue;
- }
- const mergeInfo = getCellMergeInfo(table, col, row);
- if (mergeInfo && Math.min(mergeInfo.end.col, table.colCount - 1) > endCol) {
+ const mergeInfo = getCellMergeInfo(scene.table, col, row);
+ if (mergeInfo && Math.min(mergeInfo.end.col, scene.table.colCount - 1) > endCol) {
endCol = mergeInfo.end.col;
isExtend = true;
break;
@@ -396,10 +361,7 @@ export function updateCellSelectBorder(
for (let row = startRow; row <= endRow; row++) {
if (row === startRow) {
for (let col = startCol; col <= endCol; col++) {
- if (!table.isHeader(col, row) && skipBodyMerge) {
- continue;
- }
- const mergeInfo = getCellMergeInfo(table, col, row);
+ const mergeInfo = getCellMergeInfo(scene.table, col, row);
if (mergeInfo && mergeInfo.start.row < startRow) {
startRow = mergeInfo.start.row;
isExtend = true;
@@ -409,11 +371,8 @@ export function updateCellSelectBorder(
}
if (!isExtend && row === endRow) {
for (let col = startCol; col <= endCol; col++) {
- if (!table.isHeader(col, row) && skipBodyMerge) {
- continue;
- }
- const mergeInfo = getCellMergeInfo(table, col, row);
- if (mergeInfo && Math.min(mergeInfo.end.row, table.rowCount - 1) > endRow) {
+ const mergeInfo = getCellMergeInfo(scene.table, col, row);
+ if (mergeInfo && Math.min(mergeInfo.end.row, scene.table.rowCount - 1) > endRow) {
endRow = mergeInfo.end.row;
isExtend = true;
break;
@@ -449,63 +408,66 @@ export function updateCellSelectBorder(
let needRightTopCornerHeader = false;
let needRightBottomCornerHeader = false;
let needLeftBottomCornerHeader = false;
- if (startCol <= table.frozenColCount - 1 && startRow <= table.frozenRowCount - 1) {
+ if (startCol <= scene.table.frozenColCount - 1 && startRow <= scene.table.frozenRowCount - 1) {
needCornerHeader = true;
}
- if (endCol >= table.colCount - table.rightFrozenColCount && startRow <= table.frozenRowCount - 1) {
+ if (endCol >= scene.table.colCount - scene.table.rightFrozenColCount && startRow <= scene.table.frozenRowCount - 1) {
needRightTopCornerHeader = true;
}
- if (startCol <= table.frozenColCount - 1 && endRow >= table.rowCount - table.bottomFrozenRowCount) {
+ if (startCol <= scene.table.frozenColCount - 1 && endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount) {
needLeftBottomCornerHeader = true;
}
- if (endCol >= table.colCount - table.rightFrozenColCount && endRow >= table.rowCount - table.bottomFrozenRowCount) {
+ if (
+ endCol >= scene.table.colCount - scene.table.rightFrozenColCount &&
+ endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount
+ ) {
needRightBottomCornerHeader = true;
}
if (
- startCol <= table.frozenColCount - 1 &&
- endRow >= table.frozenRowCount &&
- startRow <= table.rowCount - table.bottomFrozenRowCount - 1
+ startCol <= scene.table.frozenColCount - 1 &&
+ endRow >= scene.table.frozenRowCount &&
+ startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1
) {
needRowHeader = true;
}
if (
- endCol >= table.colCount - table.rightFrozenColCount &&
- endRow >= table.frozenRowCount &&
- startRow <= table.rowCount - table.bottomFrozenRowCount - 1
+ endCol >= scene.table.colCount - scene.table.rightFrozenColCount &&
+ endRow >= scene.table.frozenRowCount &&
+ startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1
) {
needRightRowHeader = true;
}
if (
- startRow <= table.frozenRowCount - 1 &&
- endCol >= table.frozenColCount &&
- startCol <= table.colCount - table.rightFrozenColCount - 1
+ startRow <= scene.table.frozenRowCount - 1 &&
+ endCol >= scene.table.frozenColCount &&
+ startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1
) {
needColumnHeader = true;
}
if (
- endRow >= table.rowCount - table.bottomFrozenRowCount &&
- endCol >= table.frozenColCount &&
- startCol <= table.colCount - table.rightFrozenColCount - 1
+ endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount &&
+ endCol >= scene.table.frozenColCount &&
+ startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1
) {
needBottomColumnHeader = true;
}
if (
- startCol <= table.colCount - table.rightFrozenColCount - 1 &&
- endCol >= table.frozenColCount &&
- startRow <= table.rowCount - table.bottomFrozenRowCount - 1 &&
- endRow >= table.frozenRowCount
+ startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1 &&
+ endCol >= scene.table.frozenColCount &&
+ startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1 &&
+ endRow >= scene.table.frozenRowCount
) {
needBody = true;
}
// TODO 可以尝试不拆分三个表头和body【前提是theme中合并配置】 用一个SelectBorder 需要结合clip，并动态设置border的范围【依据区域范围 已经是否跨表头及body】
if (needCornerHeader) {
- const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
- const cornerEndRow = Math.min(endRow, table.frozenRowCount - 1);
+ const cornerEndCol = Math.min(endCol, scene.table.frozenColCount - 1);
+ const cornerEndRow = Math.min(endRow, scene.table.frozenRowCount - 1);
const strokeArray = [true, !needColumnHeader, !needRowHeader, true];
scene.createCellSelectBorder(
startCol,
@@ -518,8 +480,8 @@ export function updateCellSelectBorder(
);
}
if (needRightTopCornerHeader) {
- const cornerStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
- const cornerEndRow = Math.min(endRow, table.frozenRowCount - 1);
+ const cornerStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
+ const cornerEndRow = Math.min(endRow, scene.table.frozenRowCount - 1);
const strokeArray = [true, true, !needRightRowHeader, !needColumnHeader];
scene.createCellSelectBorder(
cornerStartCol,
@@ -533,8 +495,8 @@ export function updateCellSelectBorder(
}
if (needLeftBottomCornerHeader) {
- const cornerEndCol = Math.min(endCol, table.frozenColCount - 1);
- const cornerStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+ const cornerEndCol = Math.min(endCol, scene.table.frozenColCount - 1);
+ const cornerStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
const strokeArray = [!needRowHeader, !needBottomColumnHeader, true, true];
scene.createCellSelectBorder(
startCol,
@@ -547,8 +509,8 @@ export function updateCellSelectBorder(
);
}
if (needRightBottomCornerHeader) {
- const cornerStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
- const cornerStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+ const cornerStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
+ const cornerStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
const strokeArray = [!needRightRowHeader, true, true, !needBottomColumnHeader];
scene.createCellSelectBorder(
cornerStartCol,
@@ -561,9 +523,9 @@ export function updateCellSelectBorder(
);
}
if (needColumnHeader) {
- const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
- const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
- const columnHeaderEndRow = Math.min(endRow, table.frozenRowCount - 1);
+ const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
+ const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
+ const columnHeaderEndRow = Math.min(endRow, scene.table.frozenRowCount - 1);
const strokeArray = [true, !needRightTopCornerHeader, !needBody, !needCornerHeader];
scene.createCellSelectBorder(
columnHeaderStartCol,
@@ -576,9 +538,9 @@ export function updateCellSelectBorder(
);
}
if (needBottomColumnHeader) {
- const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
- const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
- const columnHeaderStartRow = Math.max(startRow, table.rowCount - table.bottomFrozenRowCount);
+ const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
+ const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
+ const columnHeaderStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
const strokeArray = [!needBody, !needRightBottomCornerHeader, true, !needLeftBottomCornerHeader];
scene.createCellSelectBorder(
columnHeaderStartCol,
@@ -591,9 +553,9 @@ export function updateCellSelectBorder(
);
}
if (needRowHeader) {
- const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
- const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
- const columnHeaderEndCol = Math.min(endCol, table.frozenColCount - 1);
+ const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
+ const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
+ const columnHeaderEndCol = Math.min(endCol, scene.table.frozenColCount - 1);
const strokeArray = [!needCornerHeader, !needBody, !needLeftBottomCornerHeader, true];
scene.createCellSelectBorder(
startCol,
@@ -606,9 +568,9 @@ export function updateCellSelectBorder(
);
}
if (needRightRowHeader) {
- const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
- const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
- const columnHeaderStartCol = Math.max(startCol, table.colCount - table.rightFrozenColCount);
+ const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
+ const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
+ const columnHeaderStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
const strokeArray = [!needRightTopCornerHeader, true, !needRightBottomCornerHeader, !needBody];
scene.createCellSelectBorder(
columnHeaderStartCol,
@@ -621,10 +583,10 @@ export function updateCellSelectBorder(
);
}
if (needBody) {
- const columnHeaderStartCol = Math.max(startCol, table.frozenColCount);
- const columnHeaderStartRow = Math.max(startRow, table.frozenRowCount);
- const columnHeaderEndCol = Math.min(endCol, table.colCount - table.rightFrozenColCount - 1);
- const columnHeaderEndRow = Math.min(endRow, table.rowCount - table.bottomFrozenRowCount - 1);
+ const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
+ const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
+ const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
+ const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
const strokeArray = [!needColumnHeader, !needRightRowHeader, !needBottomColumnHeader, !needRowHeader];
scene.createCellSelectBorder(
columnHeaderStartCol,
diff --git a/packages/vtable/src/scenegraph/style/frame-border.ts b/packages/vtable/src/scenegraph/style/frame-border.ts
index 0919e3e1f..bc6d88797 100644
--- a/packages/vtable/src/scenegraph/style/frame-border.ts
+++ b/packages/vtable/src/scenegraph/style/frame-border.ts
@@ -72,7 +72,6 @@ export function createFrameBorder(
if (Array.isArray(borderColor)) {
(rectAttributes as any).strokeArrayColor = getQuadProps(borderColor as any);
}
-
if (Array.isArray(borderLineWidth)) {
(rectAttributes as any).strokeArrayWidth = getQuadProps(borderLineWidth);
(rectAttributes as any).lineWidth = 1;
@@ -118,9 +117,6 @@ export function createFrameBorder(
rectAttributes.y = borderTop / 2;
rectAttributes.pickable = false;
if (isTableGroup) {
- if (cornerRadius) {
- rectAttributes.cornerRadius = cornerRadius + (rectAttributes.lineWidth ?? 0) / 2;
- }
if (frameTheme.innerBorder) {
rectAttributes.x = group.attribute.x + borderLeft / 2;
rectAttributes.y = group.attribute.y + borderTop / 2;
diff --git a/packages/vtable/src/scenegraph/utils/break-string.ts b/packages/vtable/src/scenegraph/utils/break-string.ts
index 11350ca34..ba789de3b 100644
--- a/packages/vtable/src/scenegraph/utils/break-string.ts
+++ b/packages/vtable/src/scenegraph/utils/break-string.ts
@@ -1,14 +1,7 @@
-import { isString } from '@visactor/vutils';
import { convertInternal } from '../../tools/util';
import type { BaseTableAPI } from '../../ts-types/base-table';
-export function breakString(textStr: string, table: BaseTableAPI) {
- let moreThanMaxCharacters = false;
- if (isString(textStr) && textStr.length > (table.options.maxCharactersNumber || 200)) {
- textStr = textStr.slice(0, table.options.maxCharactersNumber || 200);
- textStr += '\u2026';
- moreThanMaxCharacters = true;
- }
+export function breakString(textStr: string, table: BaseTableAPI): string[] {
let text;
if (!table.internalProps.enableLineBreak && !table.options.customConfig?.multilinesForXTable) {
text = [convertInternal(textStr)];
@@ -17,12 +10,9 @@ export function breakString(textStr: string, table: BaseTableAPI) {
}
// clear empty string in array end
- while (text.length && text.length > 1 && !text[text.length - 1]) {
+ while (text.length && !text[text.length - 1]) {
text.pop();
}
- return {
- text,
- moreThanMaxCharacters
- };
+ return text;
}
diff --git a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts
index fd059fad4..8fb12ca9b 100644
--- a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts
+++ b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts
@@ -11,7 +11,7 @@ import type { Scenegraph } from '../scenegraph';
import { getCellMergeInfo } from './get-cell-merge';
import { getHierarchyOffset } from './get-hierarchy-offset';
import type { BaseTableAPI } from '../../ts-types/base-table';
-import { isNil, isNumber, isValid, isValidNumber } from '@visactor/vutils';
+import { isNil, isNumber, isValid } from '@visactor/vutils';
import { isMergeCellGroup } from './is-merge-cell-group';
import { breakString } from './break-string';
@@ -54,28 +54,28 @@ export function createCellContent(
cellTheme: IThemeSpec,
range: CellRange | undefined
) {
- // const leftIcons: ColumnIconOption[] = [];
- // const rightIcons: ColumnIconOption[] = [];
- // const contentLeftIcons: ColumnIconOption[] = [];
- // const contentRightIcons: ColumnIconOption[] = [];
- // const inlineFrontIcons: ColumnIconOption[] = [];
- // const inlineEndIcons: ColumnIconOption[] = [];
- // const absoluteLeftIcons: ColumnIconOption[] = [];
- // const absoluteRightIcons: ColumnIconOption[] = [];
+ const leftIcons: ColumnIconOption[] = [];
+ const rightIcons: ColumnIconOption[] = [];
+ const contentLeftIcons: ColumnIconOption[] = [];
+ const contentRightIcons: ColumnIconOption[] = [];
+ const inlineFrontIcons: ColumnIconOption[] = [];
+ const inlineEndIcons: ColumnIconOption[] = [];
+ const absoluteLeftIcons: ColumnIconOption[] = [];
+ const absoluteRightIcons: ColumnIconOption[] = [];
let contentWidth: number;
let contentHeight: number;
let leftIconWidth = 0;
- // let leftIconHeight = 0;
+ let leftIconHeight = 0;
let rightIconWidth = 0;
- // let rightIconHeight = 0;
- // let absoluteLeftIconWidth = 0;
+ let rightIconHeight = 0;
+ let absoluteLeftIconWidth = 0;
let absoluteRightIconWidth = 0;
if (!Array.isArray(icons) || icons.length === 0) {
if (isValid(textStr)) {
// 没有icon，cellGroup只添加WrapText
- const { text, moreThanMaxCharacters } = breakString(textStr, table);
+ const text = breakString(textStr, table);
const hierarchyOffset = range
? getHierarchyOffset(range.start.col, range.start.row, table)
@@ -91,7 +91,6 @@ export function createCellContent(
}
const attribute = {
text: text.length === 1 ? text[0] : text,
- moreThanMaxCharacters,
maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
// fill: true,
// textAlign: 'left',
@@ -103,7 +102,7 @@ export function createCellContent(
heightLimit:
autoRowHeight && !table.options.customConfig?.multilinesForXTable
? -1
- : cellHeight - Math.floor(padding[0] + padding[2]),
+ : cellHeight - (padding[0] + padding[2]),
pickable: false,
dx: (textAlign === 'left' ? hierarchyOffset : 0) + _contentOffset,
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
@@ -118,98 +117,78 @@ export function createCellContent(
contentHeight = wrapText.AABBBounds.height();
}
} else {
- // // icon分类
- // icons.forEach(icon => {
- // switch (icon.positionType) {
- // case IconPosition.left:
- // leftIcons.push(icon);
- // break;
- // case IconPosition.right:
- // rightIcons.push(icon);
- // break;
- // case IconPosition.contentLeft:
- // contentLeftIcons.push(icon);
- // break;
- // case IconPosition.contentRight:
- // contentRightIcons.push(icon);
- // break;
- // // case IconPosition.absoluteLeft:
- // // absoluteLeftIcons.push(icon);
- // // break;
- // case IconPosition.absoluteRight:
- // absoluteRightIcons.push(icon);
- // break;
- // case IconPosition.inlineFront:
- // inlineFrontIcons.push(icon);
- // break;
- // case IconPosition.inlineEnd:
- // inlineEndIcons.push(icon);
- // break;
- // }
- // });
-
- // // 添加非cell icon & absolute icon
- // leftIcons.forEach(icon => {
- // const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- // iconMark.role = 'icon-left';
- // iconMark.name = icon.name;
- // iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
- // leftIconWidth +=
- // iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- // leftIconHeight = Math.max(leftIconHeight, iconMark.AABBBounds.height());
- // cellGroup.appendChild(iconMark);
- // });
-
- // rightIcons.forEach(icon => {
- // const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- // iconMark.role = 'icon-right';
- // iconMark.name = icon.name;
- // iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
- // rightIconWidth +=
- // iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- // rightIconHeight = Math.max(rightIconHeight, iconMark.AABBBounds.height());
- // cellGroup.appendChild(iconMark);
- // });
-
- // absoluteLeftIcons.forEach(icon => {
- // const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- // iconMark.role = 'icon-absolute-left';
- // iconMark.name = icon.name;
- // iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
- // absoluteLeftIconWidth +=
- // iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- // cellGroup.appendChild(iconMark);
- // });
-
- // absoluteRightIcons.forEach(icon => {
- // const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- // iconMark.role = 'icon-absolute-right';
- // iconMark.name = icon.name;
- // iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
- // absoluteRightIconWidth +=
- // iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- // cellGroup.appendChild(iconMark);
- // });
-
- const {
- inlineFrontIcons,
- inlineEndIcons,
- contentLeftIcons,
- contentRightIcons,
- leftIconWidth: layoutLeftIconWidth,
- // leftIconHeight: layoutLeftIconHeight,
- rightIconWidth: layoutRightIconWidth,
- // rightIconHeight: layoutRightIconHeight,
- // absoluteLeftIconWidth: layoutAbsoluteLeftIconWidth,
- absoluteRightIconWidth: layoutAbsoluteRightIconWidth
- } = dealWithIconLayout(icons, cellGroup, range, table);
-
- leftIconWidth = layoutLeftIconWidth;
- // leftIconHeight = layoutLeftIconHeight;
- rightIconWidth = layoutRightIconWidth;
- // rightIconHeight = layoutRightIconHeight;
- // absoluteLeftIconWidth = layoutAbsoluteLeftIconWidth;
- absoluteRightIconWidth = layoutAbsoluteRightIconWidth;
+ // icon分类
+ icons.forEach(icon => {
+ switch (icon.positionType) {
+ case IconPosition.left:
+ leftIcons.push(icon);
+ break;
+ case IconPosition.right:
+ rightIcons.push(icon);
+ break;
+ case IconPosition.contentLeft:
+ contentLeftIcons.push(icon);
+ break;
+ case IconPosition.contentRight:
+ contentRightIcons.push(icon);
+ break;
+ // case IconPosition.absoluteLeft:
+ // absoluteLeftIcons.push(icon);
+ // break;
+ case IconPosition.absoluteRight:
+ absoluteRightIcons.push(icon);
+ break;
+ case IconPosition.inlineFront:
+ inlineFrontIcons.push(icon);
+ break;
+ case IconPosition.inlineEnd:
+ inlineEndIcons.push(icon);
+ break;
+ }
+ });
+
+ // 添加非cell icon & absolute icon
+ leftIcons.forEach(icon => {
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+ iconMark.role = 'icon-left';
+ iconMark.name = icon.name;
+ iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
+ leftIconWidth +=
+ iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
+ leftIconHeight = Math.max(leftIconHeight, iconMark.AABBBounds.height());
+ cellGroup.appendChild(iconMark);
+ });
+
+ rightIcons.forEach(icon => {
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+ iconMark.role = 'icon-right';
+ iconMark.name = icon.name;
+ iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
+ rightIconWidth +=
+ iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
+ rightIconHeight = Math.max(rightIconHeight, iconMark.AABBBounds.height());
+ cellGroup.appendChild(iconMark);
+ });
+
+ absoluteLeftIcons.forEach(icon => {
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+ iconMark.role = 'icon-absolute-left';
+ iconMark.name = icon.name;
+ iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
+ absoluteLeftIconWidth +=
+ iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
+ cellGroup.appendChild(iconMark);
+ });
+
+ absoluteRightIcons.forEach(icon => {
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+ iconMark.role = 'icon-absolute-right';
+ iconMark.name = icon.name;
+ iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
+ absoluteRightIconWidth +=
+ iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
+ cellGroup.appendChild(iconMark);
+ });
// 添加text & content icon & inline icon
let textMark;
@@ -226,11 +205,10 @@ export function createCellContent(
const hierarchyOffset = range
? getHierarchyOffset(range.start.col, range.start.row, table)
: getHierarchyOffset(cellGroup.col, cellGroup.row, table);
- const { text, moreThanMaxCharacters } = breakString(textStr, table);
+ const text = breakString(textStr, table);
const attribute = {
text: text.length === 1 ? text[0] : text,
- moreThanMaxCharacters,
maxLineWidth: autoColWidth
? Infinity
: cellWidth - (padding[1] + padding[3]) - leftIconWidth - rightIconWidth - hierarchyOffset,
@@ -241,13 +219,15 @@ export function createCellContent(
heightLimit:
autoRowHeight && !table.options.customConfig?.multilinesForXTable
? -1
- : cellHeight - Math.floor(padding[0] + padding[2]),
+ : cellHeight - (padding[0] + padding[2]),
pickable: false,
autoWrapText,
lineClamp,
wordBreak: 'break-word',
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
- dx: (textAlign === 'left' ? (!contentLeftIcons.length ? hierarchyOffset : 0) : 0) + _contentOffset
+ dx:
+ (textAlign === 'left' ? (!contentLeftIcons.length && !contentRightIcons.length ? hierarchyOffset : 0) : 0) +
+ _contentOffset
};
const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute);
wrapText.name = 'text';
@@ -307,33 +287,15 @@ export function createCellContent(
align: textAlign,
baseline: textBaseline
});
- const dealWithIconComputeVar = {
- addedHierarchyOffset: 0
- }; //为了只增加一次indent的缩进值，如果有两个icon都dealWithIcon的话
+
contentLeftIcons.forEach(icon => {
- const iconMark = dealWithIcon(
- icon,
- undefined,
- cellGroup.col,
- cellGroup.row,
- range,
- table,
- dealWithIconComputeVar
- );
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
iconMark.role = 'icon-content-left';
iconMark.name = icon.name;
cellContent.addLeftOccupyingIcon(iconMark);
});
contentRightIcons.forEach(icon => {
- const iconMark = dealWithIcon(
- icon,
- undefined,
- cellGroup.col,
- cellGroup.row,
- range,
- table,
- dealWithIconComputeVar
- );
+ const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
iconMark.role = 'icon-content-right';
iconMark.name = icon.name;
cellContent.addRightOccupyingIcon(iconMark);
@@ -415,10 +377,7 @@ export function dealWithIcon(
col?: number,
row?: number,
range?: CellRange,
- table?: BaseTableAPI,
- dealWithIconComputeVar?: {
- addedHierarchyOffset: number;
- }
+ table?: BaseTableAPI
): Icon {
// positionType在外部处理
const iconAttribute = {} as any;
@@ -444,23 +403,16 @@ export function dealWithIcon(
let hierarchyOffset = 0;
if (
- (!dealWithIconComputeVar || dealWithIconComputeVar?.addedHierarchyOffset === 0) &&
isNumber(col) &&
isNumber(row) &&
table &&
- (icon.funcType === IconFuncTypeEnum.collapse ||
- icon.funcType === IconFuncTypeEnum.expand ||
- icon.positionType === IconPosition.contentLeft ||
- icon.positionType === IconPosition.contentRight)
+ (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand)
) {
// compute hierarchy offset
// hierarchyOffset = getHierarchyOffset(col, row, table);
hierarchyOffset = range
? getHierarchyOffset(range.start.col, range.start.row, table)
: getHierarchyOffset(col, row, table);
- if (dealWithIconComputeVar) {
- dealWithIconComputeVar.addedHierarchyOffset = 1;
- }
}
iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
@@ -565,9 +517,6 @@ export function updateCellContentWidth(
textBaseline: CanvasTextBaseline,
scene: Scenegraph
): boolean {
- if (isValidNumber(cellGroup.contentWidth)) {
- detaX = distWidth - (cellGroup.contentWidth ?? cellGroup.attribute.width);
- }
let leftIconWidth = 0;
let leftIconHeight = 0;
let rightIconWidth = 0;
@@ -592,12 +541,7 @@ export function updateCellContentWidth(
oldTextHeight = textMark.AABBBounds.height();
textMark.setAttribute(
'maxLineWidth',
- distWidth -
- leftIconWidth -
- rightIconHeight -
- (padding[1] + padding[3]) -
- (textMark.attribute.dx ?? 0) -
- (scene.table.theme._contentOffset ?? 0)
+ distWidth - leftIconWidth - rightIconHeight - (padding[1] + padding[3]) - (textMark.attribute.dx ?? 0)
);
// contentWidth = textMark.AABBBounds.width();
contentHeight = textMark.AABBBounds.height();
@@ -623,7 +567,7 @@ export function updateCellContentWidth(
child.setAttribute('x', child.attribute.x + detaX);
} else if (child.role === 'icon-absolute-right') {
child.setAttribute('x', child.attribute.x + detaX);
- } else if (child.name === 'content' || (child.name === 'text' && child.type !== 'richtext')) {
+ } else if (child.name === 'content' || child.name === 'text') {
const childTextAlign = child.attribute.textAlign ?? textAlign;
if (childTextAlign === 'center') {
child.setAttribute(
@@ -644,7 +588,7 @@ export function updateCellContentWidth(
if (autoRowHeight) {
let newHeight = Math.max(leftIconHeight, contentHeight, rightIconHeight); // + padding[0] + padding[2]
- if (isCellHeightUpdate(scene, cellGroup, Math.round(newHeight + padding[0] + padding[2]), oldCellHeight)) {
+ if (isCellHeightUpdate(scene, cellGroup, newHeight + padding[0] + padding[2], oldCellHeight)) {
// cellGroup.setAttribute('height', newHeight + padding[0] + padding[2]);
return true;
}
@@ -696,7 +640,7 @@ export function updateCellContentHeight(
textAlign: CanvasTextAlign,
textBaseline: CanvasTextBaseline
) {
- const newHeight = distHeight - Math.floor(padding[0] + padding[2]);
+ const newHeight = distHeight - (padding[0] + padding[2]);
const textMark = cellGroup.getChildByName('text');
@@ -771,116 +715,3 @@ function isCellHeightUpdate(scene: Scenegraph, cellGroup: Group, newHeight: numb
return false;
}
-
-export function dealWithIconLayout(
- icons: ColumnIconOption[],
- cellGroup: Group,
- range: CellRange | undefined,
- table: BaseTableAPI
-) {
- const leftIcons: ColumnIconOption[] = [];
- const rightIcons: ColumnIconOption[] = [];
- const contentLeftIcons: ColumnIconOption[] = [];
- const contentRightIcons: ColumnIconOption[] = [];
- const inlineFrontIcons: ColumnIconOption[] = [];
- const inlineEndIcons: ColumnIconOption[] = [];
- const absoluteLeftIcons: ColumnIconOption[] = [];
- const absoluteRightIcons: ColumnIconOption[] = [];
-
- let leftIconWidth = 0;
- let leftIconHeight = 0;
- let rightIconWidth = 0;
- let rightIconHeight = 0;
- let absoluteLeftIconWidth = 0;
- let absoluteRightIconWidth = 0;
-
- // icon分类
- icons.forEach(icon => {
- switch (icon.positionType) {
- case IconPosition.left:
- leftIcons.push(icon);
- break;
- case IconPosition.right:
- rightIcons.push(icon);
- break;
- case IconPosition.contentLeft:
- contentLeftIcons.push(icon);
- break;
- case IconPosition.contentRight:
- contentRightIcons.push(icon);
- break;
- // case IconPosition.absoluteLeft:
- // absoluteLeftIcons.push(icon);
- // break;
- case IconPosition.absoluteRight:
- absoluteRightIcons.push(icon);
- break;
- case IconPosition.inlineFront:
- inlineFrontIcons.push(icon);
- break;
- case IconPosition.inlineEnd:
- inlineEndIcons.push(icon);
- break;
- }
- });
-
- // 添加非cell icon & absolute icon
- leftIcons.forEach(icon => {
- const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- iconMark.role = 'icon-left';
- iconMark.name = icon.name;
- iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
- leftIconWidth +=
- iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- leftIconHeight = Math.max(leftIconHeight, iconMark.AABBBounds.height());
- cellGroup.appendChild(iconMark);
- });
-
- rightIcons.forEach(icon => {
- const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- iconMark.role = 'icon-right';
- iconMark.name = icon.name;
- iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
- rightIconWidth +=
- iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- rightIconHeight = Math.max(rightIconHeight, iconMark.AABBBounds.height());
- cellGroup.appendChild(iconMark);
- });
-
- absoluteLeftIcons.forEach(icon => {
- const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- iconMark.role = 'icon-absolute-left';
- iconMark.name = icon.name;
- iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
- absoluteLeftIconWidth +=
- iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- cellGroup.appendChild(iconMark);
- });
-
- absoluteRightIcons.forEach(icon => {
- const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
- iconMark.role = 'icon-absolute-right';
- iconMark.name = icon.name;
- iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
- absoluteRightIconWidth +=
- iconMark.AABBBounds.width() + (iconMark.attribute.marginLeft ?? 0) + (iconMark.attribute.marginRight ?? 0);
- cellGroup.appendChild(iconMark);
- });
-
- return {
- leftIcons,
- rightIcons,
- contentLeftIcons,
- contentRightIcons,
- inlineFrontIcons,
- inlineEndIcons,
- absoluteLeftIcons,
- absoluteRightIcons,
- leftIconWidth,
- leftIconHeight,
- rightIconWidth,
- rightIconHeight,
- absoluteLeftIconWidth,
- absoluteRightIconWidth
- };
-}
diff --git a/packages/vtable/src/scenegraph/utils/text-measure.ts b/packages/vtable/src/scenegraph/utils/text-measure.ts
index 078dd9206..d55b3fcb2 100644
--- a/packages/vtable/src/scenegraph/utils/text-measure.ts
+++ b/packages/vtable/src/scenegraph/utils/text-measure.ts
@@ -275,9 +275,6 @@ const utilTextMark = new Text({
});
export function measureTextBounds(attribute: ITextGraphicAttribute) {
- utilTextMark.initAttributes({
- ...attribute,
- ignoreBuf: true
- });
+ utilTextMark.setAttributes(attribute);
return utilTextMark.AABBBounds;
}
diff --git a/packages/vtable/src/state/cell-move/adjust-header.ts b/packages/vtable/src/state/cell-move/adjust-header.ts
index ae018d70f..48ba3705f 100644
--- a/packages/vtable/src/state/cell-move/adjust-header.ts
+++ b/packages/vtable/src/state/cell-move/adjust-header.ts
@@ -31,9 +31,9 @@ export function adjustMoveHeaderTarget(source: CellAddress, target: CellAddress,
}
// tree模式[透视表行表头]
if (layoutMap.rowHierarchyType === 'tree') {
- const sourceRowHeaderPaths = layoutMap.getCellHeaderPathsWithTreeNode(source.col, source.row)
+ const sourceRowHeaderPaths = layoutMap.getCellHeaderPathsWidthTreeNode(source.col, source.row)
.rowHeaderPaths as any;
- const targetRowHeaderPaths = layoutMap.getCellHeaderPathsWithTreeNode(target.col, target.row)
+ const targetRowHeaderPaths = layoutMap.getCellHeaderPathsWidthTreeNode(target.col, target.row)
.rowHeaderPaths as any;
if (sourceRowHeaderPaths.length <= targetRowHeaderPaths.length) {
const targetPathNode = targetRowHeaderPaths[sourceRowHeaderPaths.length - 1]; //找到共同层级节点
diff --git a/packages/vtable/src/state/cell-move/index.ts b/packages/vtable/src/state/cell-move/index.ts
index 8a23d0d28..3d159a38a 100644
--- a/packages/vtable/src/state/cell-move/index.ts
+++ b/packages/vtable/src/state/cell-move/index.ts
@@ -29,9 +29,8 @@ export function startMoveCol(col: number, row: number, x: number, y: number, sta
state.table.scenegraph.component.showMoveCol(col, row, delta);
// 调整列顺序期间清空选中清空
- const isHasSelected = !!state.select.ranges?.length;
state.table.stateManager.updateSelectPos(-1, -1);
- state.table.stateManager.endSelectCells(true, isHasSelected);
+
state.table.scenegraph.updateNextFrame();
}
@@ -130,7 +129,6 @@ export function endMoveCol(state: StateManager) {
// 更新状态
if (moveContext) {
- state.table.internalProps.useOneRowHeightFillAll = false;
state.table.internalProps.layoutMap.clearCellRangeMap();
const sourceMergeInfo = state.table.getCellRange(state.columnMove.colSource, state.columnMove.rowSource);
const targetMergeInfo = state.table.getCellRange(state.columnMove.colTarget, state.columnMove.rowTarget);
@@ -177,7 +175,6 @@ export function endMoveCol(state: StateManager) {
)
) {
state.table.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex);
- state.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex);
}
// clear columns width and rows height cache
if (moveContext.moveType === 'column') {
diff --git a/packages/vtable/src/state/checkbox/checkbox.ts b/packages/vtable/src/state/checkbox/checkbox.ts
index df0cd52aa..feb3729d3 100644
--- a/packages/vtable/src/state/checkbox/checkbox.ts
+++ b/packages/vtable/src/state/checkbox/checkbox.ts
@@ -225,19 +225,3 @@ export function setCellCheckboxState(col: number, row: number, checked: boolean,
}
}
}
-
-export function changeCheckboxOrder(sourceIndex: number, targetIndex: number, state: StateManager) {
- const { checkedState, table } = state;
- if (table.internalProps.transpose) {
- sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0);
- targetIndex = table.getRecordShowIndexByCell(targetIndex, 0);
- } else {
- sourceIndex = table.getRecordShowIndexByCell(0, sourceIndex);
- targetIndex = table.getRecordShowIndexByCell(0, targetIndex);
- }
- if (sourceIndex !== targetIndex) {
- const sourceRecord = checkedState[sourceIndex];
- checkedState[sourceIndex] = checkedState[targetIndex];
- checkedState[targetIndex] = sourceRecord;
- }
-}
diff --git a/packages/vtable/src/state/radio/radio.ts b/packages/vtable/src/state/radio/radio.ts
index 146f87ddc..faa7bf342 100644
--- a/packages/vtable/src/state/radio/radio.ts
+++ b/packages/vtable/src/state/radio/radio.ts
@@ -138,19 +138,3 @@ export function setCellRadioState(col: number, row: number, index: number | unde
radio?._handlePointerUp();
}
}
-
-export function changeRadioOrder(sourceIndex: number, targetIndex: number, state: StateManager) {
- const { radioState, table } = state;
- if (table.internalProps.transpose) {
- sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0);
- targetIndex = table.getRecordShowIndexByCell(targetIndex, 0);
- } else {
- sourceIndex = table.getRecordShowIndexByCell(0, sourceIndex);
- targetIndex = table.getRecordShowIndexByCell(0, targetIndex);
- }
- if (sourceIndex !== targetIndex) {
- const sourceRecord = radioState[sourceIndex];
- radioState[sourceIndex] = radioState[targetIndex];
- radioState[targetIndex] = sourceRecord;
- }
-}
diff --git a/packages/vtable/src/state/resize/update-resize-column.ts b/packages/vtable/src/state/resize/update-resize-column.ts
index ed1f4afa9..026297f36 100644
--- a/packages/vtable/src/state/resize/update-resize-column.ts
+++ b/packages/vtable/src/state/resize/update-resize-column.ts
@@ -188,9 +188,7 @@ function updateResizeColForIndicatorGroup(detaX: number, state: StateManager) {
const layout = state.table.internalProps.layoutMap as PivotHeaderLayoutMap;
//通过getCellHeaderPaths接口获取列表头最后一层指标维度的path
const headerPaths = layout.getCellHeaderPaths(state.columnResize.col, state.table.columnHeaderLevelCount);
- const node = layout.getHeadNodeByRowOrColDimensions(
- headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length - 1)
- ) as any;
+ const node = layout.getHeadNode(headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length - 1)) as any;
// 计算宽度受影响列的起止
const startCol = node.startInTotal + state.table.frozenColCount;
const endCol = node.startInTotal + state.table.frozenColCount + node.size - 1;
diff --git a/packages/vtable/src/state/resize/update-resize-row.ts b/packages/vtable/src/state/resize/update-resize-row.ts
index 3409b6ece..f12eaa1a8 100644
--- a/packages/vtable/src/state/resize/update-resize-row.ts
+++ b/packages/vtable/src/state/resize/update-resize-row.ts
@@ -95,9 +95,9 @@ function updateResizeColForIndicator(detaY: number, state: StateManager) {
resizeIndicatorKey = layout.getIndicatorKey(state.table.rowHeaderLevelCount, state.rowResize.row);
} else {
const headerPaths = layout.getCellHeaderPaths(state.table.rowHeaderLevelCount - 1, state.rowResize.row);
- const headerPath = headerPaths.rowHeaderPaths?.[headerPaths.rowHeaderPaths.length - 1];
- resizeDimensionKey = headerPath?.dimensionKey;
- resizeDimensionValue = headerPath?.value;
+ const headerPath = headerPaths.rowHeaderPaths[headerPaths.rowHeaderPaths.length - 1];
+ resizeDimensionKey = headerPath.dimensionKey;
+ resizeDimensionValue = headerPath.value;
}
for (
let row = state.table.columnHeaderLevelCount;
@@ -110,7 +110,7 @@ function updateResizeColForIndicator(detaY: number, state: StateManager) {
state.table.internalProps._heightResizedRowMap.add(row);
} else if (layout.indicatorsAsCol) {
const headerPaths = layout.getCellHeaderPaths(state.table.rowHeaderLevelCount - 1, row);
- const headerPath = headerPaths?.rowHeaderPaths?.[headerPaths.rowHeaderPaths.length - 1];
+ const headerPath = headerPaths?.rowHeaderPaths[headerPaths.rowHeaderPaths.length - 1];
if (headerPath && resizeDimensionKey === headerPath.dimensionKey && resizeDimensionValue === headerPath.value) {
state.table.scenegraph.updateRowHeight(row, detaY);
state.table.internalProps._heightResizedRowMap.add(row);
@@ -124,9 +124,7 @@ function updateResizeColForIndicatorGroup(detaY: number, state: StateManager) {
const layout = state.table.internalProps.layoutMap as PivotHeaderLayoutMap;
//通过getCellHeaderPaths接口获取列表头最后一层指标维度的path
const headerPaths = layout.getCellHeaderPaths(state.table.rowHeaderLevelCount, state.rowResize.row);
- const node = layout.getHeadNodeByRowOrColDimensions(
- headerPaths.rowHeaderPaths.slice(0, headerPaths.rowHeaderPaths.length - 1)
- ) as any;
+ const node = layout.getHeadNode(headerPaths.rowHeaderPaths.slice(0, headerPaths.rowHeaderPaths.length - 1)) as any;
// 计算宽度受影响列的起止
const startRow = node.startInTotal + state.table.frozenRowCount;
const endRow = node.startInTotal + state.table.frozenRowCount + node.size - 1;
diff --git a/packages/vtable/src/state/select/is-cell-select-highlight.ts b/packages/vtable/src/state/select/is-cell-select-highlight.ts
deleted file mode 100644
index 2abaa146d..000000000
--- a/packages/vtable/src/state/select/is-cell-select-highlight.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { StateManager } from '../state';
-import type { Group } from '../../scenegraph/graphic/group';
-import { getProp } from '../../scenegraph/utils/get-prop';
-import type { BaseTableAPI } from '../../ts-types/base-table';
-import type { ColumnDefine } from '../../ts-types';
-import { HighlightScope } from '../../ts-types';
-import { isValid } from '@visactor/vutils';
-import { getCellMergeRange } from '../../tools/merge-range';
-
-export function getCellSelectColor(cellGroup: Group, table: BaseTableAPI): string | undefined {
- let colorKey;
- if (
- cellGroup.role === 'cell' &&
- isValid(cellGroup.mergeStartCol) &&
- isValid(cellGroup.mergeStartRow) &&
- isValid(cellGroup.mergeEndCol) &&
- isValid(cellGroup.mergeEndRow)
- ) {
- const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
- for (let col = colStart; col <= colEnd; col++) {
- for (let row = rowStart; row <= rowEnd; row++) {
- const key = isCellSelected(table.stateManager, col, row, cellGroup);
- if (key && (!colorKey || key === 'cellBgColor')) {
- colorKey = key;
- }
- }
- }
- } else if (cellGroup.role === 'cell') {
- colorKey = isCellSelected(table.stateManager, cellGroup.col, cellGroup.row, cellGroup);
- }
-
- if (!colorKey) {
- return undefined;
- }
-
- let selectStyle;
- const layout = table.internalProps.layoutMap;
- if (layout.isCornerHeader(cellGroup.col, cellGroup.row)) {
- selectStyle = table.theme.cornerHeaderStyle?.select || table.theme.headerStyle?.select;
- } else if (layout.isColumnHeader(cellGroup.col, cellGroup.row)) {
- selectStyle = table.theme.headerStyle?.select;
- } else if (layout.isRowHeader(cellGroup.col, cellGroup.row)) {
- selectStyle = table.theme.rowHeaderStyle?.select;
- } else if (layout.isBottomFrozenRow(cellGroup.col, cellGroup.row)) {
- selectStyle =
- table.theme.bottomFrozenStyle?.select ||
- (table.isListTable() ? table.theme.bodyStyle?.select : table.theme.headerStyle?.select);
- } else if (layout.isRightFrozenColumn(cellGroup.col, cellGroup.row)) {
- selectStyle =
- table.theme.rightFrozenStyle?.select ||
- (table.isListTable() ? table.theme.bodyStyle?.select : table.theme.rowHeaderStyle?.select);
- } else if (!table.isHeader(cellGroup.col, cellGroup.row)) {
- selectStyle = table.theme.bodyStyle?.select;
- }
- const fillColor = getProp(colorKey, selectStyle, cellGroup.col, cellGroup.row, table);
- return fillColor;
-}
-
-export function isCellSelected(state: StateManager, col: number, row: number, cellGroup: Group): string | undefined {
- const { highlightScope, disableHeader, cellPos, ranges } = state.select;
-
- let selectMode;
- if (ranges?.length === 1 && ranges[0].end.col === ranges[0].start.col && ranges[0].end.row === ranges[0].start.row) {
- const table = state.table;
-
- const isHeader = table.isHeader(col, row);
- if (isHeader && disableHeader) {
- return undefined;
- }
-
- if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
- selectMode = 'cellBgColor';
- } else if (highlightScope === HighlightScope.column && cellPos.col === col) {
- if (cellPos.col === col && cellPos.row === row) {
- selectMode = 'cellBgColor';
- } else {
- selectMode = 'inlineColumnBgColor';
- }
- } else if (highlightScope === HighlightScope.row && cellPos.row === row) {
- if (cellPos.col === col && cellPos.row === row) {
- selectMode = 'cellBgColor';
- } else {
- selectMode = 'inlineRowBgColor';
- }
- } else if (highlightScope === HighlightScope.cross) {
- if (cellPos.col === col && cellPos.row === row) {
- selectMode = 'cellBgColor';
- } else if (cellPos.col === col) {
- selectMode = 'inlineColumnBgColor';
- } else if (cellPos.row === row) {
- selectMode = 'inlineRowBgColor';
- }
- }
-
- if (selectMode) {
- let cellDisable;
- if (isHeader) {
- const define = table.getHeaderDefine(col, row);
- cellDisable = (define as ColumnDefine)?.disableHeaderSelect;
-
- // if (cellGroup.firstChild && cellGroup.firstChild.name === 'axis' && table.options.select?.disableAxisHover) {
- // cellDisable = true;
- // }
- } else {
- const define = table.getBodyColumnDefine(col, row);
- cellDisable = (define as ColumnDefine)?.disableSelect;
- }
-
- if (cellDisable) {
- selectMode = undefined;
- }
- }
- }
- return selectMode;
-}
diff --git a/packages/vtable/src/state/select/update-position.ts b/packages/vtable/src/state/select/update-position.ts
index c662c2ecf..afd54a5d2 100644
--- a/packages/vtable/src/state/select/update-position.ts
+++ b/packages/vtable/src/state/select/update-position.ts
@@ -1,6 +1,5 @@
import type { SimpleHeaderLayoutMap } from '../../layout';
import type { Scenegraph } from '../../scenegraph/scenegraph';
-import type { SelectAllOnCtrlAOption } from '../../ts-types';
import { InteractionState } from '../../ts-types';
import type { StateManager } from '../state';
/**
@@ -17,17 +16,12 @@ export function updateSelectPosition(
isShift: boolean,
isCtrl: boolean,
isSelectAll: boolean,
- isSelectMoving: boolean = false,
- skipBodyMerge: boolean = false
+ isSelectMoving: boolean = false
) {
const { table, interactionState } = state;
const { scenegraph } = table;
const { highlightScope, disableHeader, cellPos } = state.select;
-
if ((disableHeader && table.isHeader(col, row)) || highlightScope === 'none') {
- if (col !== -1 && row !== -1 && !isSelectMoving) {
- table._makeVisibleCell(col, row);
- }
col = -1;
row = -1;
}
@@ -62,27 +56,18 @@ export function updateSelectPosition(
if (isSelectAll) {
state.select.ranges = [];
scenegraph.deleteAllSelectBorder();
- let _startCol = 0;
- let _startRow = 0;
- const { disableHeaderSelect, disableRowSeriesNumberSelect } =
- (table.options.keyboardOptions?.selectAllOnCtrlA as SelectAllOnCtrlAOption) || {};
-
- // 表头选中
- if (disableHeaderSelect) {
- _startCol = table.rowHeaderLevelCount;
- _startRow = table.columnHeaderLevelCount;
- }
- // 行号列选中
- if ((disableRowSeriesNumberSelect || disableHeaderSelect) && table.options.rowSeriesNumber) {
- _startCol += 1;
- }
-
state.select.ranges.push({
- start: { col: _startCol, row: _startRow },
+ start: { col: 0, row: 0 },
end: { col: table.colCount - 1, row: table.rowCount - 1 }
});
const currentRange = state.select.ranges[state.select.ranges.length - 1];
- scenegraph.updateCellSelectBorder(currentRange, false);
+ scenegraph.updateCellSelectBorder(
+ currentRange.start.col,
+ currentRange.start.row,
+ currentRange.end.col,
+ currentRange.end.row,
+ false
+ );
} else if (cellPos.col !== -1 && cellPos.row !== -1 && (col === -1 || row === -1)) {
// 输入-1清空选中状态
// clearMultiSelect(scenegraph, ranges, highlightScope, singleStyle);
@@ -98,10 +83,6 @@ export function updateSelectPosition(
) {
const currentRange = state.select.ranges[state.select.ranges.length - 1];
if (isShift && currentRange) {
- if (!isCtrl) {
- cellPos.col = col;
- cellPos.row = row;
- }
if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
const startCol = Math.min(currentRange.start.col, currentRange.end.col, col);
const endCol = Math.max(currentRange.start.col, currentRange.end.col, col);
@@ -121,7 +102,12 @@ export function updateSelectPosition(
currentRange.end = { col, row };
}
scenegraph.deleteLastSelectedRangeComponents();
- scenegraph.updateCellSelectBorder(currentRange);
+ scenegraph.updateCellSelectBorder(
+ currentRange.start.col,
+ currentRange.start.row,
+ currentRange.end.col,
+ currentRange.end.row
+ );
// } else if (isCtrl) {
// cellPos.col = col;
// cellPos.row = row;
@@ -135,7 +121,7 @@ export function updateSelectPosition(
// // 更新select border
// // calculateAndUpdateMultiSelectBorder(scenegraph, col, row, col, row, state.select.ranges);
// // 更新select border
- // scenegraph.updateCellSelectBorder(cellPos);
+ // scenegraph.updateCellSelectBorder(cellPos.col, cellPos.row, cellPos.col, cellPos.row);
} else {
let extendSelectRange = true;
// 单选或多选开始
@@ -144,51 +130,48 @@ export function updateSelectPosition(
scenegraph.deleteAllSelectBorder();
}
if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
- // 选中行表头
const cellRange = table.getCellRange(col, row);
state.select.ranges.push({
start: { col: cellRange.start.col, row },
- end: { col: cellRange.end.col, row: table.rowCount - 1 },
- skipBodyMerge: true
+ end: { col: cellRange.end.col, row: table.rowCount - 1 }
});
} else if (state.select.headerSelectMode !== 'cell' && table.isRowHeader(col, row)) {
- // 选中列表头
const cellRange = table.getCellRange(col, row);
state.select.ranges.push({
start: { col, row: cellRange.start.row },
- end: { col: table.colCount - 1, row: cellRange.end.row },
- skipBodyMerge: true
+ end: { col: table.colCount - 1, row: cellRange.end.row }
});
} else if ((table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInHeader(col, row)) {
- // 选中表头行号单元格
extendSelectRange = false;
state.select.ranges.push({
start: { col: 0, row: 0 },
- end: { col: table.colCount - 1, row: table.rowCount - 1 },
- skipBodyMerge: true
+ end: { col: table.colCount - 1, row: table.rowCount - 1 }
});
} else if ((table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)) {
- // 选中内容行号单元格
extendSelectRange = false;
state.select.ranges.push({
start: { col, row: row },
- end: { col: table.colCount - 1, row: row },
- skipBodyMerge: true
+ end: { col: table.colCount - 1, row: row }
});
} else if (col >= 0 && row >= 0) {
- // 选中普通单元格
- const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
+ const cellRange = table.getCellRange(col, row);
state.select.ranges.push({
start: { col: cellRange.start.col, row: cellRange.start.row },
- end: { col: cellRange.end.col, row: cellRange.end.row },
- skipBodyMerge: skipBodyMerge || undefined
+ end: { col: cellRange.end.col, row: cellRange.end.row }
});
}
cellPos.col = col;
cellPos.row = row;
// scenegraph.setCellNormalStyle(col, row);
const currentRange = state.select.ranges?.[state.select.ranges.length - 1];
- currentRange && scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
+ currentRange &&
+ scenegraph.updateCellSelectBorder(
+ currentRange.start.col,
+ currentRange.start.row,
+ currentRange.end.col,
+ currentRange.end.row,
+ extendSelectRange
+ );
}
} else if (
(interactionState === InteractionState.grabing || table.eventManager.isDraging) &&
@@ -279,12 +262,15 @@ export function updateSelectPosition(
col,
row
};
- if (skipBodyMerge) {
- currentRange.skipBodyMerge = true;
- }
}
}
- scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
+ scenegraph.updateCellSelectBorder(
+ currentRange.start.col,
+ currentRange.start.row,
+ currentRange.end.col,
+ currentRange.end.row,
+ extendSelectRange
+ );
}
}
scenegraph.updateNextFrame();
diff --git a/packages/vtable/src/state/sort/index.ts b/packages/vtable/src/state/sort/index.ts
index c32383268..149e1f697 100644
--- a/packages/vtable/src/state/sort/index.ts
+++ b/packages/vtable/src/state/sort/index.ts
@@ -67,14 +67,11 @@ export function dealSort(col: number, row: number, table: ListTableAPI, event: E
}
// clear cell range cache
- table.internalProps.useOneRowHeightFillAll = false;
table.internalProps.layoutMap.clearCellRangeMap();
table.scenegraph.sortCell();
// 排序后，清除选中效果
- const isHasSelected = !!table.stateManager.select.ranges?.length;
table.stateManager.updateSelectPos(-1, -1);
- table.stateManager.endSelectCells(true, isHasSelected);
}
function executeSort(newState: SortState, table: BaseTableAPI, headerDefine: HeaderDefine): void {
diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts
index 3562e0ba4..ee472875c 100644
--- a/packages/vtable/src/state/state.ts
+++ b/packages/vtable/src/state/state.ts
@@ -6,6 +6,7 @@ import type {
CellAddress,
CellPosition,
CellRange,
+ CheckboxColumnDefine,
DropDownMenuHighlightInfo,
IDimensionInfo,
ListTableAPI,
@@ -14,7 +15,7 @@ import type {
SortOrder,
SortState
} from '../ts-types';
-import { HighlightScope, InteractionState, SortType } from '../ts-types';
+import { HighlightScope, InteractionState } from '../ts-types';
import { IconFuncTypeEnum } from '../ts-types';
import { checkMultiCellInSelect } from './common/check-in-select';
import { updateHoverPosition } from './hover/update-position';
@@ -36,9 +37,8 @@ import { getIconAndPositionFromTarget } from '../scenegraph/utils/icon';
import type { BaseTableAPI, HeaderData } from '../ts-types/base-table';
import { debounce } from '../tools/debounce';
import { updateResizeColumn } from './resize/update-resize-column';
-import { changeRadioOrder, setRadioState, syncRadioState } from './radio/radio';
+import { setRadioState, syncRadioState } from './radio/radio';
import {
- changeCheckboxOrder,
initCheckedState,
initLeftRecordsCheckState,
setCheckedState,
@@ -48,7 +48,6 @@ import {
} from './checkbox/checkbox';
import { updateResizeRow } from './resize/update-resize-row';
import { deleteAllSelectingBorder } from '../scenegraph/select/delete-select-border';
-import type { PivotTable } from '../PivotTable';
export class StateManager {
table: BaseTableAPI;
@@ -63,7 +62,7 @@ export class StateManager {
interactionState: InteractionState;
// select记录两个位置，第二个位置只在range模式生效
select: {
- ranges: (CellRange & { skipBodyMerge?: boolean })[];
+ ranges: CellRange[];
highlightScope: HighlightScope;
cellPos: CellPosition;
// cellPosStart: CellPosition;
@@ -408,16 +407,14 @@ export class StateManager {
/** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
headerSelectMode,
disableSelect,
- disableHeaderSelect,
- highlightMode
+ disableHeaderSelect
} = Object.assign(
{},
{
/** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
headerSelectMode: 'inline',
disableSelect: false,
- disableHeaderSelect: false,
- highlightMode: 'cell'
+ disableHeaderSelect: false
},
this.table.options.select
);
@@ -430,15 +427,7 @@ export class StateManager {
// this.select.highlightScope = HighlightScope.column;
// } else
if (!disableSelect) {
- if (highlightMode === 'cross') {
- this.select.highlightScope = HighlightScope.cross;
- } else if (highlightMode === 'row') {
- this.select.highlightScope = HighlightScope.row;
- } else if (highlightMode === 'column') {
- this.select.highlightScope = HighlightScope.column;
- } else {
- this.select.highlightScope = HighlightScope.single;
- }
+ this.select.highlightScope = HighlightScope.single;
} else {
this.select.highlightScope = HighlightScope.none;
}
@@ -511,13 +500,12 @@ export class StateManager {
isShift: boolean = false,
isCtrl: boolean = false,
isSelectAll: boolean = false,
- isSelectMoving: boolean = false,
- skipBodyMerge: boolean = false
+ isSelectMoving: boolean = false
) {
if (row !== -1 && row !== -1) {
this.select.selecting = true;
}
- updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving, skipBodyMerge);
+ updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving);
}
checkCellRangeInSelect(cellPosStart: CellAddress, cellPosEnd: CellAddress) {
@@ -572,8 +560,7 @@ export class StateManager {
this.table.internalProps.theme?.tooltipStyle,
inlineIcon.tooltip?.style,
inlineIcon.attribute?.tooltip?.style
- ),
- disappearDelay: inlineIcon.attribute.tooltip.disappearDelay
+ )
};
if (!this.table.internalProps.tooltipHandler.isBinded(tooltipOptions)) {
this.table.showTooltip(col, row, tooltipOptions);
@@ -610,7 +597,7 @@ export class StateManager {
isSelecting(): boolean {
return this.select.selecting;
}
- endSelectCells(fireListener: boolean = true, fireClear: boolean = true) {
+ endSelectCells(fireListener: boolean = true) {
if (this.select.selecting) {
this.select.selecting = false;
if (this.select.ranges.length === 0) {
@@ -651,10 +638,6 @@ export class StateManager {
col: lastCol,
row: lastRow
});
- } else if (fireClear) {
- if (this.select.ranges.length === 0) {
- this.table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CLEAR, {});
- }
}
}
@@ -676,9 +659,8 @@ export class StateManager {
this.table.scenegraph.component.showResizeCol(col, y, isRightFrozen);
// 调整列宽期间清空选中清空
- const isHasSelected = !!this.select.ranges?.length;
this.updateSelectPos(-1, -1);
- this.endSelectCells(true, isHasSelected);
+
this.table.scenegraph.updateNextFrame();
}
updateResizeCol(xInTable: number, yInTable: number) {
@@ -703,9 +685,8 @@ export class StateManager {
this.table.scenegraph.component.showResizeRow(row, x, isBottomFrozen);
// 调整列宽期间清空选中清空
- const isHasSelected = !!this.select.ranges?.length;
this.updateSelectPos(-1, -1);
- this.endSelectCells(true, isHasSelected);
+
this.table.scenegraph.updateNextFrame();
}
updateResizeRow(xInTable: number, yInTable: number) {
@@ -764,7 +745,7 @@ export class StateManager {
checkFrozen(): boolean {
// 判断固定列的总宽度 是否过大
- let originalFrozenColCount =
+ const originalFrozenColCount =
this.table.isListTable() && !this.table.internalProps.transpose
? this.table.options.frozenColCount
: this.table.isPivotChart()
@@ -774,9 +755,6 @@ export class StateManager {
this.table.options.frozenColCount ?? 0
);
if (originalFrozenColCount) {
- if (originalFrozenColCount > this.table.colCount) {
- originalFrozenColCount = this.table.colCount;
- }
if (this.table.tableNoFrameWidth - this.table.getColsWidth(0, originalFrozenColCount - 1) <= 120) {
this.table._setFrozenColCount(0);
this.setFrozenCol(-1);
@@ -903,12 +881,7 @@ export class StateManager {
setScrollTop(top: number) {
// 矫正top值范围
const totalHeight = this.table.getAllRowsHeight();
- // _disableColumnAndRowSizeRound环境中，可能出现
- // getAllColsWidth/getAllRowsHeight(A) + getAllColsWidth/getAllRowsHeight(B) < getAllColsWidth/getAllRowsHeight(A+B)
- // （由于小数在取数时被省略）
- // 这里加入tolerance，避免出现无用滚动
- const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
- top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height - sizeTolerance));
+ top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height));
top = Math.ceil(top);
// 滚动期间清空选中清空 如果调用接口hover状态需要保留，但是如果不调用updateHoverPos透视图处于hover状态的图就不能及时更新 所以这里单独判断了isPivotChart
if (top !== this.scroll.verticalBarPos || this.table.isPivotChart()) {
@@ -948,13 +921,7 @@ export class StateManager {
const totalWidth = this.table.getAllColsWidth();
const frozenWidth = this.table.getFrozenColsWidth();
- // _disableColumnAndRowSizeRound环境中，可能出现
- // getAllColsWidth/getAllRowsHeight(A) + getAllColsWidth/getAllRowsHeight(B) < getAllColsWidth/getAllRowsHeight(A+B)
- // （由于小数在取数时被省略）
- // 这里加入tolerance，避免出现无用滚动
- const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
-
- left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width - sizeTolerance));
+ left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width));
left = Math.ceil(left);
// 滚动期间清空选中清空
if (left !== this.scroll.horizontalBarPos) {
@@ -1190,13 +1157,7 @@ export class StateManager {
triggerSort(col: number, row: number, iconMark: Icon, event: Event) {
if (this.table.isPivotTable()) {
// 透视表不执行sort操作
- const sortState = (this.table as PivotTableAPI).getPivotSortState(col, row);
-
- const order = sortState ? (sortState.toUpperCase() as SortOrder) : 'DESC';
- // const new_order = order === 'ASC' ? 'DESC' : order === 'DESC' ? 'NORMAL' : 'ASC';
- const new_order = order === 'ASC' ? 'DESC' : 'ASC';
- (this.table as PivotTable).sort(col, row, new_order);
-
+ const order = (this.table as PivotTableAPI).getPivotSortState(col, row);
// // 触发透视表排序按钮点击
this.table.fireListeners(PIVOT_TABLE_EVENT_TYPE.PIVOT_SORT_CLICK, {
col: col,
@@ -1399,13 +1360,4 @@ export class StateManager {
) {
return syncRadioState(col, row, field, radioType, indexInCell, isChecked, this);
}
-
- changeCheckboxAndRadioOrder(sourceIndex: number, targetIndex: number) {
- if (this.checkedState.length) {
- changeCheckboxOrder(sourceIndex, targetIndex, this);
- }
- if (this.radioState.length) {
- changeRadioOrder(sourceIndex, targetIndex, this);
- }
- }
}
diff --git a/packages/vtable/src/themes/DEFAULT.ts b/packages/vtable/src/themes/DEFAULT.ts
index a1f714acb..1989eda43 100644
--- a/packages/vtable/src/themes/DEFAULT.ts
+++ b/packages/vtable/src/themes/DEFAULT.ts
@@ -118,6 +118,8 @@ export default {
selectionStyle: {
cellBgColor: 'rgba(0, 0, 255,0.1)',
cellBorderLineWidth: 2,
+ inlineColumnBgColor: '#CCE0FF',
+ inlineRowBgColor: '#CCE0FF',
cellBorderColor: '#0000ff'
},
tooltipStyle: {
diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts
index c924f2b19..768d931aa 100644
--- a/packages/vtable/src/themes/theme.ts
+++ b/packages/vtable/src/themes/theme.ts
@@ -121,7 +121,6 @@ export class TableTheme implements ITableThemeDefine {
get defaultStyle(): RequiredTableThemeDefine['defaultStyle'] {
// const defaultStyle = getProp(obj, superTheme, ["defaultStyle"]);
- const that = this;
if (!this._defaultStyle) {
const { obj, superTheme } = this.internalTheme;
const defaultStyle: ThemeStyle = ingoreNoneValueMerge({}, superTheme.defaultStyle, obj.defaultStyle);
@@ -190,33 +189,42 @@ export class TableTheme implements ITableThemeDefine {
}
return undefined;
},
- get select(): InteractionStyle | undefined {
- if (defaultStyle.select) {
- return {
- get inlineColumnBgColor(): ColorPropertyDefine | undefined {
- return (
- defaultStyle.select?.inlineColumnBgColor ??
- that.selectionStyle?.inlineColumnBgColor ??
- (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
- ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
- : undefined) ??
- undefined
- );
- },
- get inlineRowBgColor(): ColorPropertyDefine | undefined {
- return (
- defaultStyle.select?.inlineRowBgColor ??
- that.selectionStyle.inlineRowBgColor ??
- (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
- ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
- : undefined) ??
- undefined
- );
- }
- };
- }
- return undefined;
- },
+ // get click(): InteractionStyle | undefined {
+ // if (defaultStyle.click)
+ // return {
+ // get cellBgColor(): ColorPropertyDefine | undefined {
+ // return defaultStyle.click?.cellBgColor ?? undefined;
+ // },
+ // get cellBorderColor(): ColorsPropertyDefine | undefined {
+ // return defaultStyle.click?.cellBorderColor ?? undefined;
+ // },
+ // get cellBorderLineWidth(): LineWidthsPropertyDefine | undefined {
+ // return defaultStyle.click?.cellBorderLineWidth ?? undefined;
+ // },
+ // // get cellBorderLineDash(): LineDashsPropertyDefine |undefined{
+ // // return defaultStyle.click?.cellBorderLineDash??undefined
+ // // },
+ // get inlineColumnBgColor(): ColorPropertyDefine | undefined {
+ // return (
+ // // defaultStyle.click?.inlineColumnBgColor ??
+ // (defaultStyle.click?.cellBgColor &&
+ // typeof defaultStyle.click?.cellBgColor === 'string'
+ // ? changeColor(defaultStyle.click?.cellBgColor, 0.1, false)
+ // : undefined) ?? undefined
+ // );
+ // },
+ // get inlineRowBgColor(): ColorPropertyDefine | undefined {
+ // return (
+ // // defaultStyle.click?.inlineRowBgColor ??
+ // (defaultStyle.click?.cellBgColor &&
+ // typeof defaultStyle.click?.cellBgColor === 'string'
+ // ? changeColor(defaultStyle.click?.cellBgColor, 0.1, false)
+ // : undefined) ?? undefined
+ // );
+ // },
+ // };
+ // return undefined;
+ // },
get padding(): PaddingsPropertyDefine {
return defaultStyle.padding ?? [10, 16, 10, 16];
},
@@ -451,9 +459,6 @@ export class TableTheme implements ITableThemeDefine {
get scrollSliderColor(): string | undefined {
return scroll.scrollSliderColor ?? '#C0C0C0';
},
- get scrollSliderCornerRadius(): number | undefined {
- return scroll.scrollSliderCornerRadius;
- },
get scrollRailColor(): string | undefined {
return scroll.scrollRailColor;
},
@@ -493,12 +498,6 @@ export class TableTheme implements ITableThemeDefine {
},
get color(): string | undefined {
return tooltip.color ?? '#FFF';
- },
- get maxWidth(): number | undefined {
- return tooltip.maxWidth;
- },
- get maxHeight(): number | undefined {
- return tooltip.maxHeight;
}
};
}
@@ -659,12 +658,6 @@ export class TableTheme implements ITableThemeDefine {
},
get cellBorderLineWidth(): number | undefined {
return selectionStyle?.cellBorderLineWidth ?? 2;
- },
- get inlineColumnBgColor(): string | undefined {
- return selectionStyle?.inlineColumnBgColor;
- },
- get inlineRowBgColor(): string | undefined {
- return selectionStyle?.inlineRowBgColor;
}
};
}
@@ -729,10 +722,9 @@ export class TableTheme implements ITableThemeDefine {
return hasThemeProperty(obj, names) || hasThemeProperty(superTheme, names);
}
extends(obj: PartialTableThemeDefine): TableTheme {
- return new TableTheme(obj, this.internalTheme.superTheme || this.internalTheme.obj);
+ return new TableTheme(obj, this);
}
private getStyle(style: ThemeStyle) {
- const that = this;
return {
get fontSize(): FontSizePropertyDefine | undefined {
return style.fontSize;
@@ -755,9 +747,6 @@ export class TableTheme implements ITableThemeDefine {
get color(): ColorPropertyDefine | undefined {
return style.color;
},
- get strokeColor(): ColorPropertyDefine | undefined {
- return style.strokeColor;
- },
get borderColor(): ColorsPropertyDefine | undefined {
return style.borderColor;
},
@@ -773,6 +762,12 @@ export class TableTheme implements ITableThemeDefine {
get cellBgColor(): ColorPropertyDefine | undefined {
return style.hover?.cellBgColor ?? undefined;
},
+ // get cellBorderColor(): ColorsPropertyDefine | undefined {
+ // return style.hover?.cellBorderColor ?? undefined;
+ // },
+ // get cellBorderLineWidth(): LineWidthsPropertyDefine | undefined {
+ // return style.hover?.cellBorderLineWidth ?? undefined;
+ // },
get inlineColumnBgColor(): ColorPropertyDefine | undefined {
return (
style.hover?.inlineColumnBgColor ??
@@ -795,34 +790,40 @@ export class TableTheme implements ITableThemeDefine {
}
return undefined;
},
- get select(): InteractionStyle | undefined {
- // if (style.select) {
- return {
- get inlineColumnBgColor(): ColorPropertyDefine | undefined {
- return (
- style.select?.inlineColumnBgColor ??
- that.selectionStyle?.inlineColumnBgColor ??
- (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
- ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
- : undefined) ??
- undefined
- );
- },
- get inlineRowBgColor(): ColorPropertyDefine | undefined {
- return (
- style.select?.inlineRowBgColor ??
- that.selectionStyle.inlineRowBgColor ??
- (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
- ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
- : undefined) ??
- undefined
- );
- }
- };
- // }
- // return undefined;
- },
-
+ // get click(): InteractionStyle | undefined {
+ // if (style.click)
+ // return {
+ // get cellBgColor(): ColorPropertyDefine | undefined {
+ // return style.click?.cellBgColor ?? undefined;
+ // },
+ // get cellBorderColor(): ColorsPropertyDefine | undefined {
+ // return style.click?.cellBorderColor ?? undefined;
+ // },
+ // get cellBorderLineWidth(): LineWidthsPropertyDefine | undefined {
+ // return style.click?.cellBorderLineWidth ?? undefined;
+ // },
+ // // get cellBorderLineDash(): LineDashsPropertyDefine |undefined{
+ // // return style.click?.cellBorderLineDash??undefined
+ // // },
+ // get inlineColumnBgColor(): ColorPropertyDefine | undefined {
+ // return (
+ // // style.click?.inlineColumnBgColor ??
+ // (style.click?.cellBgColor && typeof style.click?.cellBgColor === 'string'
+ // ? changeColor(style.click?.cellBgColor, 0.1, false)
+ // : undefined) ?? undefined
+ // );
+ // },
+ // get inlineRowBgColor(): ColorPropertyDefine | undefined {
+ // return (
+ // // style.click?.inlineRowBgColor ??
+ // (style.click?.cellBgColor && typeof style.click?.cellBgColor === 'string'
+ // ? changeColor(style.click?.cellBgColor, 0.1, false)
+ // : undefined) ?? undefined
+ // );
+ // },
+ // };
+ // return undefined;
+ // },
get frameStyle(): FrameStyle | undefined {
if (style.frameStyle) {
return {
diff --git a/packages/vtable/src/tools/get-data-path/create-dataset.ts b/packages/vtable/src/tools/get-data-path/create-dataset.ts
index 420fad202..86693a4fd 100644
--- a/packages/vtable/src/tools/get-data-path/create-dataset.ts
+++ b/packages/vtable/src/tools/get-data-path/create-dataset.ts
@@ -1,7 +1,4 @@
import { Dataset } from '../../dataset/dataset';
-import { supplementIndicatorNodesForCustomTree } from '../../layout/layout-helper';
-import type { ITreeLayoutHeadNode } from '../../layout/tree-helper';
-import { DimensionTree } from '../../layout/tree-helper';
import type {
AggregationRule,
AggregationRules,
@@ -14,44 +11,26 @@ import { AggregationType } from '../../ts-types';
import type { IChartColumnIndicator } from '../../ts-types/pivot-table/indicator/chart-indicator';
export function createDataset(options: PivotChartConstructorOptions) {
- const layoutNodeId = { seqId: 0 };
const dataConfig: IPivotChartDataConfig = { isPivotChart: true };
- let columnDimensionTree;
- let rowDimensionTree;
- let columnTree;
- let rowTree;
- if (options.columnTree) {
- if (options.indicatorsAsCol !== false) {
- columnTree = supplementIndicatorNodesForCustomTree(options.columnTree, options.indicators);
- }
- columnDimensionTree = new DimensionTree((options.columnTree as ITreeLayoutHeadNode[]) ?? [], layoutNodeId);
- }
- if (options.rowTree) {
- if (options.indicatorsAsCol === false) {
- rowTree = supplementIndicatorNodesForCustomTree(options.rowTree, options.indicators);
- }
- rowDimensionTree = new DimensionTree((options.rowTree as ITreeLayoutHeadNode[]) ?? [], layoutNodeId);
- }
- const rowKeys = rowDimensionTree.dimensionKeys?.count
- ? rowDimensionTree.dimensionKeys.valueArr()
- : options.rows?.reduce((keys, rowObj) => {
- if (typeof rowObj === 'string') {
- keys.push(rowObj);
- } else {
- keys.push(rowObj.dimensionKey);
- }
- return keys;
- }, []) ?? [];
- const columnKeys = columnDimensionTree.dimensionKeys?.count
- ? columnDimensionTree.dimensionKeys.valueArr()
- : options.columns?.reduce((keys, columnObj) => {
- if (typeof columnObj === 'string') {
- keys.push(columnObj);
- } else {
- keys.push(columnObj.dimensionKey);
- }
- return keys;
- }, []) ?? [];
+
+ const rowKeys =
+ options.rows?.reduce((keys, rowObj) => {
+ if (typeof rowObj === 'string') {
+ keys.push(rowObj);
+ } else {
+ keys.push(rowObj.dimensionKey);
+ }
+ return keys;
+ }, []) ?? [];
+ const columnKeys =
+ options.columns?.reduce((keys, columnObj) => {
+ if (typeof columnObj === 'string') {
+ keys.push(columnObj);
+ } else {
+ keys.push(columnObj.dimensionKey);
+ }
+ return keys;
+ }, []) ?? [];
const indicatorKeys =
options.indicators?.reduce((keys, indicatorObj) => {
if (typeof indicatorObj === 'string') {
@@ -75,12 +54,12 @@ export function createDataset(options: PivotChartConstructorOptions) {
options.indicatorsAsCol ?? true,
options.records,
undefined,
- columnTree || options.columnTree,
- rowTree || options.rowTree,
+ options.columnTree,
+ options.rowTree,
true
);
- return { dataset, columnDimensionTree, rowDimensionTree, layoutNodeId };
+ return dataset;
}
function _generateCollectValuesConfig(
diff --git a/packages/vtable/src/tools/get-data-path/index.ts b/packages/vtable/src/tools/get-data-path/index.ts
index dcf5eb4f1..3b9973089 100644
--- a/packages/vtable/src/tools/get-data-path/index.ts
+++ b/packages/vtable/src/tools/get-data-path/index.ts
@@ -3,9 +3,6 @@ import type { PivotChart } from '../../PivotChart';
import type { IPivotTableCellHeaderPaths, PivotChartConstructorOptions } from '../../ts-types';
import { createDataset } from './create-dataset';
import { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout';
-import type { ITreeLayoutHeadNode } from '../../layout/tree-helper';
-import { DimensionTree } from '../../layout/tree-helper';
-import { IndicatorDimensionKeyPlaceholder } from '../global';
export function getDataCellPath(
options: PivotChartConstructorOptions,
@@ -13,27 +10,11 @@ export function getDataCellPath(
compareFunc?: (a: any, b: any) => boolean
): IPivotTableCellHeaderPaths | undefined {
// mock dataset
- const results = createDataset(options);
- let columnDimensionTree = results.columnDimensionTree;
- let rowDimensionTree = results.rowDimensionTree;
+ const dataset = createDataset(options);
- let isNeedResetColumnDimensionTree = false;
- let isNeedResetRowDimensionTree = false;
- if (options.columnTree) {
- if (options.indicatorsAsCol && !columnDimensionTree.dimensionKeys.contain(IndicatorDimensionKeyPlaceholder)) {
- isNeedResetColumnDimensionTree = true;
- }
- }
- if (options.rowTree) {
- if (!options.indicatorsAsCol && !rowDimensionTree.dimensionKeys.contain(IndicatorDimensionKeyPlaceholder)) {
- isNeedResetRowDimensionTree = true;
- }
- }
- const { dataset, layoutNodeId } = results;
// mock pivotChart
const mockTable = {
options,
- layoutNodeId,
internalProps: options,
isPivotChart: () => true,
pivotChartAxes: [] as any[],
@@ -46,19 +27,9 @@ export function getDataCellPath(
};
}
};
- if (!options.columnTree || isNeedResetColumnDimensionTree) {
- columnDimensionTree = new DimensionTree((dataset.colHeaderTree as ITreeLayoutHeadNode[]) ?? [], layoutNodeId);
- }
- if (!options.rowTree || isNeedResetRowDimensionTree) {
- rowDimensionTree = new DimensionTree((dataset.rowHeaderTree as ITreeLayoutHeadNode[]) ?? [], layoutNodeId);
- }
+
// mock layoutMap
- const layoutMap = new PivotHeaderLayoutMap(
- mockTable as unknown as PivotChart,
- dataset,
- columnDimensionTree,
- rowDimensionTree
- );
+ const layoutMap = new PivotHeaderLayoutMap(mockTable as unknown as PivotChart, dataset);
// compare data
for (let col = 0; col < layoutMap.colCount; col++) {
diff --git a/packages/vtable/src/tools/helper.ts b/packages/vtable/src/tools/helper.ts
index e0bff01fe..aa6443095 100644
--- a/packages/vtable/src/tools/helper.ts
+++ b/packages/vtable/src/tools/helper.ts
@@ -248,16 +248,11 @@ export function cellInRange(range: CellRange, col: number, row: number): boolean
);
}
export function cellInRanges(ranges: CellRange[], col: number, row: number): boolean {
- // cell range may in wrong order
for (let i = 0; i < ranges.length; i++) {
const range = ranges[i];
- const startCol = Math.min(range.start.col, range.end.col);
- const endCol = Math.max(range.start.col, range.end.col);
- const startRow = Math.min(range.start.row, range.end.row);
- const endRow = Math.max(range.start.row, range.end.row);
if (
- (startCol <= col && col <= endCol && startRow <= row && row <= endRow) ||
- (endCol <= col && col <= startCol && endRow <= row && row <= startRow)
+ (range.start.col <= col && col <= range.end.col && range.start.row <= row && row <= range.end.row) ||
+ (range.end.col <= col && col <= range.start.col && range.end.row <= row && row <= range.start.row)
) {
return true;
}
diff --git a/packages/vtable/src/tools/pixel-ratio.ts b/packages/vtable/src/tools/pixel-ratio.ts
index c667cca72..6162868b0 100644
--- a/packages/vtable/src/tools/pixel-ratio.ts
+++ b/packages/vtable/src/tools/pixel-ratio.ts
@@ -4,7 +4,7 @@ export let defaultPixelRatio = 1;
/*
* @Description: 设置像素比
*/
-export function getPixelRatio(): number {
+function setPixelRatio(): void {
if (isNode) {
defaultPixelRatio = 1;
} else {
@@ -14,6 +14,5 @@ export function getPixelRatio(): number {
defaultPixelRatio += 1;
}
}
- return defaultPixelRatio;
}
-getPixelRatio();
+setPixelRatio();
diff --git a/packages/vtable/src/tools/util.ts b/packages/vtable/src/tools/util.ts
index 6a7f3f46e..3e639a4d9 100644
--- a/packages/vtable/src/tools/util.ts
+++ b/packages/vtable/src/tools/util.ts
@@ -422,13 +422,3 @@ export function deduplication(array: number[]) {
}
return result;
}
-
-/** 判断div中的文本是否有被选中 */
-export function isDivSelected(div: HTMLDivElement) {
- const selection = window.getSelection();
- if (selection.rangeCount) {
- const range = selection.getRangeAt(0);
- return range.endOffset > range.startOffset && div.contains(range.commonAncestorContainer);
- }
- return false;
-}
diff --git a/packages/vtable/src/ts-types/animation/appear.ts b/packages/vtable/src/ts-types/animation/appear.ts
deleted file mode 100644
index 262f3d159..000000000
--- a/packages/vtable/src/ts-types/animation/appear.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface IAnimationAppear {
- duration?: number;
- delay?: number;
- type?: 'all' | 'one-by-one';
- direction?: 'row' | 'column';
-}
diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
index 69a9a1440..5e536ea64 100644
--- a/packages/vtable/src/ts-types/base-table.ts
+++ b/packages/vtable/src/ts-types/base-table.ts
@@ -67,10 +67,7 @@ import type {
ColumnSeriesNumber,
ColumnStyleOption,
WidthAdaptiveModeDef,
- HeightAdaptiveModeDef,
- ColumnInfo,
- RowInfo,
- CellAddressWithBound
+ HeightAdaptiveModeDef
} from '.';
import type { TooltipOptions } from './tooltip';
import type { IWrapTextGraphicAttribute } from '../scenegraph/graphic/text';
@@ -93,11 +90,7 @@ import type { DiscreteTableLegend } from '../components/legend/discrete-legend/d
import type { ContinueTableLegend } from '../components/legend/continue-legend/continue-legend';
import type { NumberRangeMap } from '../layout/row-height-map';
import type { RowSeriesNumberHelper } from '../core/row-series-number-helper';
-import type { ReactCustomLayout } from '../components/react/react-custom-layout';
import type { ISortedMapItem } from '../data/DataSource';
-import type { IAnimationAppear } from './animation/appear';
-import type { IEmptyTip } from './component/empty-tip';
-import type { EmptyTip } from '../components/empty-tip/empty-tip';
export interface IBaseTableProtected {
element: HTMLElement;
@@ -201,8 +194,6 @@ export interface IBaseTableProtected {
renderMode: 'html' | 'canvas';
/** 代替原来hover:isShowTooltip配置 */
isShowOverflowTextTooltip: boolean;
- /** 缩略文字提示框 延迟消失时间 */
- overflowTextTooltipDisappearDelay?: number;
/** 弹框是否需要限定在表格区域内 */
confine: boolean;
};
@@ -239,9 +230,8 @@ export interface IBaseTableProtected {
limitMinHeight?: number;
title?: Title;
- legends?: (DiscreteTableLegend | ContinueTableLegend)[];
+ legends?: DiscreteTableLegend | ContinueTableLegend;
- emptyTip?: EmptyTip;
//是否开启图表异步渲染
renderChartAsync?: boolean;
// // 开启图表异步渲染 每批次渐进渲染图表个数
@@ -255,12 +245,6 @@ export interface IBaseTableProtected {
* 设置为 'none' 时, 表格滚动到顶部/底部时, 不再触发父容器滚动
* */
overscrollBehavior?: 'auto' | 'none';
-
- // react component container
- bodyDomContainer?: HTMLElement;
- headerDomContainer?: HTMLElement;
- // 已使用一行的高度填充所有行
- useOneRowHeightFillAll?: boolean;
}
export interface BaseTableConstructorOptions {
// /** 指定表格的行数 */
@@ -272,7 +256,6 @@ export interface BaseTableConstructorOptions {
* 当前需要冻结的列数 基本表格生效
*/
frozenColCount?: number;
- frozenRowCount?: number;
rightFrozenColCount?: number;
bottomFrozenRowCount?: number;
@@ -328,7 +311,7 @@ export interface BaseTableConstructorOptions {
/** hover交互配置 */
hover?: {
/** hover交互响应模式：十字交叉 整列 整行 或者单个单元格 */
- highlightMode?: 'cross' | 'column' | 'row' | 'cell';
+ highlightMode: 'cross' | 'column' | 'row' | 'cell';
/** 不响应鼠标hover交互 */
disableHover?: boolean;
/** 单独设置表头不响应鼠标hover交互 */
@@ -338,18 +321,12 @@ export interface BaseTableConstructorOptions {
};
/** 选择单元格交互配置 */
select?: {
- /** 高亮范围模式：十字交叉 整列 整行 或者单个单元格。默认`cell` */
- highlightMode?: 'cross' | 'column' | 'row' | 'cell';
/** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
headerSelectMode?: 'inline' | 'cell';
/** 不响应鼠标select交互 */
disableSelect?: boolean;
/** 单独设置表头不响应鼠标select交互 */
disableHeaderSelect?: boolean;
- /** 点击空白区域是否取消选中 */
- blankAreaClickDeselect?: boolean;
- /** 点击外部区域是否取消选中 */
- outsideClickDeselect?: boolean; //
};
/** 下拉菜单的相关配置。消失时机：显示后点击菜单区域外自动消失*/
menu?: {
@@ -366,10 +343,8 @@ export interface BaseTableConstructorOptions {
tooltip?: {
/** html目前实现较完整 先默认html渲染方式 */
renderMode?: 'html'; // 目前暂不支持canvas方案
- /** 是否显示缩略文字提示框。 代替原来hover:isShowTooltip配置 暂时需要将renderMode配置为html才能显示，canvas的还未开发*/
+ /** 代替原来hover:isShowTooltip配置 暂时需要将renderMode配置为html才能显示，canvas的还未开发*/
isShowOverflowTextTooltip?: boolean;
- /** 缩略文字提示框 延迟消失时间 */
- overflowTextTooltipDisappearDelay?: number;
/** 是否将 tooltip 框限制在画布区域内，默认开启。针对renderMode:"html"有效 */
confine?: boolean;
};
@@ -420,9 +395,9 @@ export interface BaseTableConstructorOptions {
// maximum number of data items maintained in table instance
maintainedDataCount?: number;
- legends?: ITableLegendOption | ITableLegendOption[];
+ legends?: ITableLegendOption;
title?: ITitle;
- emptyTip?: true | IEmptyTip;
+
/** 是否开启图表异步渲染 */
renderChartAsync?: boolean;
/** 开启图表异步渲染 每批次渐进渲染图表个数 默认是5个 */
@@ -431,7 +406,7 @@ export interface BaseTableConstructorOptions {
customMergeCell?: CustomMergeCell;
// #region for nodejs
- mode?: 'node' | 'browser';
+ mode?: 'node' | 'broswer';
modeParams?: any;
canvasWidth?: number;
canvasHeight?: number;
@@ -451,24 +426,10 @@ export interface BaseTableConstructorOptions {
customCellStyleArrangement?: CustomCellStyleArrangement[];
columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
+
+ customConfig?: any; // 部分特殊配置，兼容xTable等作用
+
clearDOM?: boolean;
- customConfig?: {
- /** xTable对于没有配置autoWrapText并且有'\n'的文本，在计算行高是会当做一行处理，但是在渲染时会解析'\n'；显示效果就是单元格高度为一行文本高度，只显示第一个'\n'前的文字，后面显示'...'；multilinesForXTable配置实现和该功能对齐的样式 */
- multilinesForXTable?: boolean;
- /** 这里可以配置为false 来走flatDataToObject的数据处理逻辑 而不走dataset的分析 */
- enableDataAnalysis?: boolean;
- /** 禁用行高列宽计算取整数逻辑 对齐xTable */
- _disableColumnAndRowSizeRound?: boolean;
- imageMargin?: number;
- // 是否创建react custom container
- createReactContainer?: boolean;
- // adaptive 模式下优先缩小迷你图
- shrinkSparklineFirst?: boolean;
- }; // 部分特殊配置，兼容xTable等作用
-
- animationAppear?: boolean | IAnimationAppear;
-
- renderOption?: any;
}
export interface BaseTableAPI {
/** 数据总条目数 */
@@ -562,7 +523,7 @@ export interface BaseTableAPI {
) => EventListenerId;
// &((type: string, listener: AnyListener) => EventListenerId);
- _vDataSet?: DataSet;
+ _vDataSet: DataSet;
/** 场景树对象 */
scenegraph: Scenegraph;
/** 状态管理模块 */
@@ -579,9 +540,6 @@ export interface BaseTableAPI {
columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
- _rowRangeHeightsMap: Map;
- _colRangeWidthsMap: Map;
-
/** 获取表格绘制的范围 不包括frame的宽度 */
getDrawRange: () => Rect;
/** 将鼠标坐标值 转换成表格坐标系中的坐标位置 */
@@ -602,14 +560,12 @@ export interface BaseTableAPI {
getDefaultRowHeight: (row: number) => number | 'auto';
getDefaultColumnWidth: (col: number) => number | 'auto';
_setRowHeight: (row: number, height: number, clearCache?: boolean) => void;
- setRowHeight: (row: number, height: number) => void;
getColWidth: (col: number) => number;
getColWidthDefined: (col: number) => string | number;
// setColWidthDefined: (col: number, width: number) => void;
getColWidthDefinedNumber: (col: number) => number;
// getColWidthDefine: (col: number) => string | number;
_setColWidth: (col: number, width: number | string, clearCache?: boolean, skipCheckFrozen?: boolean) => void;
- setColWidth: (col: number, width: number) => void;
_getColContentWidth: (col: number) => number;
_setColContentWidth: (col: number, width: number | string, clearCache?: boolean) => void;
getMaxColWidth: (col: number) => number;
@@ -625,8 +581,7 @@ export interface BaseTableAPI {
isFrozenCell: (col: number, row: number) => { row: boolean; col: boolean } | null;
getRowAt: (absoluteY: number) => { top: number; row: number; bottom: number };
getColAt: (absoluteX: number) => { left: number; col: number; right: number };
- getCellAt: (absoluteX: number, absoluteY: number) => CellAddressWithBound;
- getCellAtRelativePosition: (absoluteX: number, absoluteY: number) => CellAddressWithBound;
+ getCellAt: (absoluteX: number, absoluteY: number) => CellAddress;
_makeVisibleCell: (col: number, row: number) => void;
// setFocusCursor(col: number, row: number): void;
// focusCell(col: number, row: number): void;
@@ -643,7 +598,7 @@ export interface BaseTableAPI {
getFrozenColsWidth: () => number;
getBottomFrozenRowsHeight: () => number;
getRightFrozenColsWidth: () => number;
- selectCell: (col: number, row: number, isShift?: boolean, isCtrl?: boolean) => void;
+ selectCell: (col: number, row: number) => void;
selectCells: (cellRanges: CellRange[]) => void;
getAllRowsHeight: () => number;
getAllColsWidth: () => number;
@@ -775,10 +730,16 @@ export interface BaseTableAPI {
getMergeCellRect: (col: number, row: number) => Rect;
- getTargetColAt: (absoluteX: number) => ColumnInfo | null;
- getTargetRowAt: (absoluteY: number) => RowInfo | null;
- getTargetColAtConsiderRightFrozen: (absoluteX: number, isConsider: boolean) => ColumnInfo | null;
- getTargetRowAtConsiderBottomFrozen: (absoluteY: number, isConsider: boolean) => RowInfo | null;
+ getTargetColAt: (absoluteX: number) => { col: number; left: number; right: number; width: number } | null;
+ getTargetRowAt: (absoluteY: number) => { row: number; top: number; bottom: number; height: number } | null;
+ getTargetColAtConsiderRightFrozen: (
+ absoluteX: number,
+ isConsider: boolean
+ ) => { col: number; left: number; right: number; width: number } | null;
+ getTargetRowAtConsiderBottomFrozen: (
+ absoluteY: number,
+ isConsider: boolean
+ ) => { row: number; top: number; bottom: number; height: number } | null;
renderWithRecreateCells: () => void;
//#endregion tableAPI
@@ -829,22 +790,7 @@ export interface BaseTableAPI {
leftRowSeriesNumberCount: number;
isAutoRowHeight: (row: number) => boolean;
- reactCustomLayout?: ReactCustomLayout;
- checkReactCustomLayout: () => void;
setSortedIndexMap: (field: FieldDef, filedMap: ISortedMapItem) => void;
-
- exportImg: () => string;
- exportCellImg: (
- col: number,
- row: number,
- options?: { disableBackground?: boolean; disableBorder?: boolean }
- ) => string;
- exportCellRangeImg: (cellRange: CellRange) => string;
- exportCanvas: () => HTMLCanvasElement;
- setPixelRatio: (pixelRatio: number) => void;
-
- bodyDomContainer?: HTMLElement;
- headerDomContainer?: HTMLElement;
}
export interface ListTableProtected extends IBaseTableProtected {
/** 表格数据 */
@@ -856,10 +802,15 @@ export interface ListTableProtected extends IBaseTableProtected {
export interface PivotTableProtected extends IBaseTableProtected {
/** 表格数据 */
- records: any[] | undefined;
- recordsIsTwoDimensionalArray?: boolean;
+ records: any[] | null;
layoutMap: PivotHeaderLayoutMap;
dataConfig?: IPivotTableDataConfig;
+ /**
+ * 透视表是否开启数据分析
+ * 如果传入数据是明细数据需要聚合分析则开启
+ * 如传入数据是经过聚合好的为了提升性能这里设置为false，同时需要传入columnTree和rowTree
+ */
+ enableDataAnalysis?: boolean;
/** 列表头树型结构 */
columnTree?: IHeaderTreeDefine[];
diff --git a/packages/vtable/src/ts-types/column/style.ts b/packages/vtable/src/ts-types/column/style.ts
index 102c2020c..fcfdd6f1c 100644
--- a/packages/vtable/src/ts-types/column/style.ts
+++ b/packages/vtable/src/ts-types/column/style.ts
@@ -56,7 +56,6 @@ export interface IStyleOption {
textAlign?: TextAlignType;
textBaseline?: TextBaselineType;
color?: ColorPropertyDefine;
- strokeColor?: ColorPropertyDefine;
fontSize?: FontSizePropertyDefine;
fontFamily?: FontFamilyPropertyDefine;
diff --git a/packages/vtable/src/ts-types/common.ts b/packages/vtable/src/ts-types/common.ts
index 9c321c270..732dff55d 100644
--- a/packages/vtable/src/ts-types/common.ts
+++ b/packages/vtable/src/ts-types/common.ts
@@ -42,12 +42,6 @@ export type BaseCellInfo = {
/**原始值 */
dataValue: FieldData;
};
-export type MergeCellInfo = {
- colStart: number;
- colEnd: number;
- rowStart: number;
- rowEnd: number;
-};
export type CellInfo = {
col: number;
row: number;
@@ -82,9 +76,17 @@ export type IListTableCellHeaderPaths = {
};
export type IPivotTableCellHeaderPaths = {
/** 列表头各级path表头信息 */
- readonly colHeaderPaths?: IDimensionInfo[];
+ readonly colHeaderPaths?: {
+ dimensionKey?: string;
+ indicatorKey?: string;
+ value?: string;
+ }[];
/** 行表头各级path表头信息 */
- readonly rowHeaderPaths?: IDimensionInfo[];
+ readonly rowHeaderPaths?: {
+ dimensionKey?: string;
+ indicatorKey?: string;
+ value?: string;
+ }[];
cellLocation: CellLocation;
};
@@ -93,7 +95,6 @@ export interface IDimensionInfo {
value?: string;
indicatorKey?: string;
isPivotCorner?: boolean;
- virtual?: boolean;
}
/**
@@ -126,7 +127,7 @@ export enum HighlightScope {
'none' = 'none'
}
-export type SortOrder = 'asc' | 'desc' | 'normal' | 'ASC' | 'DESC' | 'NORMAL';
+export type SortOrder = 'asc' | 'desc' | 'normal';
export type CustomCellStyle = {
id: string;
diff --git a/packages/vtable/src/ts-types/component/empty-tip.ts b/packages/vtable/src/ts-types/component/empty-tip.ts
deleted file mode 100644
index 332fa629d..000000000
--- a/packages/vtable/src/ts-types/component/empty-tip.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ColumnIconOption } from '../icon';
-
-export type IEmptyTip = {
- spaceBetweenTextAndIcon?: number;
- text?: string;
- textStyle?: {
- fontSize?: number;
- fontFamily?: string;
- fontWeight?: string | number;
- fontVariant?: string;
- lineHeight?: number | string;
- underline?: number;
- lineThrough?: number;
- color?: string;
- };
- icon?: {
- /** icon的高度 */
- width?: number;
- /** icon的高度 */
- height?: number; // 如果是font图标 不设的话默认是字体高度
- image: string;
- };
-};
diff --git a/packages/vtable/src/ts-types/component/title.ts b/packages/vtable/src/ts-types/component/title.ts
index 7aa2952c7..0e706174e 100644
--- a/packages/vtable/src/ts-types/component/title.ts
+++ b/packages/vtable/src/ts-types/component/title.ts
@@ -150,9 +150,6 @@ export type ITitle = {
character?: IRichTextCharacter[];
} & Partial &
Partial;
-
- dx?: number;
- dy?: number;
};
export interface IPadding {
top?: number;
diff --git a/packages/vtable/src/ts-types/customLayout.ts b/packages/vtable/src/ts-types/customLayout.ts
index 11a8d5153..a82ab4c50 100644
--- a/packages/vtable/src/ts-types/customLayout.ts
+++ b/packages/vtable/src/ts-types/customLayout.ts
@@ -15,4 +15,4 @@ export type ICustomLayoutObj = {
export type ICustomLayoutFuc = (args: CustomRenderFunctionArg) => ICustomLayoutObj;
-export type ICustomLayout = ICustomLayoutFuc | 'react-custom-layout';
+export type ICustomLayout = ICustomLayoutFuc;
diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts
index a3a61a8f3..54bdc9a90 100644
--- a/packages/vtable/src/ts-types/events.ts
+++ b/packages/vtable/src/ts-types/events.ts
@@ -1,7 +1,7 @@
import type { CellAddress, CellRange, CellLocation, FieldDef, CellAddressWithBound } from './table-engine';
import type { DropDownMenuEventArgs, MenuListItem, PivotInfo } from './menu';
-import type { IDimensionInfo, MergeCellInfo, RectProps, SortOrder } from './common';
+import type { IDimensionInfo, RectProps, SortOrder } from './common';
import type { IconFuncTypeEnum, CellInfo, HierarchyState } from '.';
import type { Icon } from '../scenegraph/graphic/icon';
import type { FederatedPointerEvent, IEventTarget } from '@src/vrender';
@@ -44,8 +44,6 @@ export type MousePointerCellEvent = CellAddressWithBound &
event?: MouseEvent | PointerEvent | TouchEvent;
federatedEvent?: FederatedPointerEvent;
target: IEventTarget | undefined;
-
- mergeCellInfo?: MergeCellInfo;
};
// 多单元格的事件传出参数 需要将当前鼠标处的单元格的信息FocusedCellInfo也带着
export type MousePointerMultiCellEvent = MousePointerCellEvent & {
@@ -61,7 +59,6 @@ export type MousePointerSparklineEvent = MousePointerCellEvent & {
export interface TableEventHandlersEventArgumentMap {
selected_cell: SelectedCellEvent;
- selected_clear: {};
click_cell: MousePointerCellEvent;
dblclick_cell: MousePointerCellEvent;
mouseenter_table: { event?: MouseEvent | PointerEvent | TouchEvent };
@@ -204,7 +201,6 @@ export interface DrillMenuEventInfo {
}
export interface TableEventHandlersReturnMap {
selected_cell: void;
- selected_clear: void;
click_cell: void;
dblclick_cell: void;
mouseenter_table: void;
diff --git a/packages/vtable/src/ts-types/icon.ts b/packages/vtable/src/ts-types/icon.ts
index 26c289dee..4a008f0ab 100644
--- a/packages/vtable/src/ts-types/icon.ts
+++ b/packages/vtable/src/ts-types/icon.ts
@@ -63,10 +63,7 @@ export interface IIconBase {
padding?: number[];
bgColor?: string;
arrowMark?: boolean;
- maxWidth?: number;
- maxHeight?: number;
};
- disappearDelay?: number;
};
/**
* 是否可交互 默认为true 目前已知不可交互按钮：下拉菜单状态
diff --git a/packages/vtable/src/ts-types/list-table/define/basic-define.ts b/packages/vtable/src/ts-types/list-table/define/basic-define.ts
index f2328514f..b74ecf5cb 100644
--- a/packages/vtable/src/ts-types/list-table/define/basic-define.ts
+++ b/packages/vtable/src/ts-types/list-table/define/basic-define.ts
@@ -80,8 +80,6 @@ export interface IBasicColumnBodyDefine {
// style?: ColumnStyleOption | null;
/** 是否对相同内容合并单元格 **/
mergeCell?: MergeCellOption;
- /** 是否隐藏 */
- hide?: boolean;
customRender?: ICustomRender;
customLayout?: ICustomLayout;
editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
diff --git a/packages/vtable/src/ts-types/list-table/layout-map/api.ts b/packages/vtable/src/ts-types/list-table/layout-map/api.ts
index 8a6b32ba3..b1af5c8d2 100644
--- a/packages/vtable/src/ts-types/list-table/layout-map/api.ts
+++ b/packages/vtable/src/ts-types/list-table/layout-map/api.ts
@@ -20,8 +20,7 @@ import type {
SparklineSpec,
HierarchyState,
Aggregation,
- IRowSeriesNumber,
- SortOption
+ IRowSeriesNumber
} from '../../';
import type { Aggregator } from '../../../dataset/statistics-helper';
import type { BaseTableAPI } from '../../base-table';
@@ -83,7 +82,6 @@ export interface HeaderData extends WidthData {
columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
showSort?: boolean;
- sort?: SortOption;
/**
* 表头描述 鼠标hover会提示该信息
diff --git a/packages/vtable/src/ts-types/menu.ts b/packages/vtable/src/ts-types/menu.ts
index d5b8b84ae..9eb7834fc 100644
--- a/packages/vtable/src/ts-types/menu.ts
+++ b/packages/vtable/src/ts-types/menu.ts
@@ -34,7 +34,7 @@ export type MenuListItem =
export type PivotInfo = {
value: string;
- dimensionKey: string;
+ dimensionKey: string | number;
isPivotCorner: boolean;
customInfo?: any;
};
diff --git a/packages/vtable/src/ts-types/new-data-set.ts b/packages/vtable/src/ts-types/new-data-set.ts
index fc22e6614..89cdb0404 100644
--- a/packages/vtable/src/ts-types/new-data-set.ts
+++ b/packages/vtable/src/ts-types/new-data-set.ts
@@ -18,8 +18,7 @@ export enum AggregationType {
MAX = 'MAX',
AVG = 'AVG',
COUNT = 'COUNT',
- CUSTOM = 'CUSTOM',
- RECALCULATE = 'RECALCULATE'
+ CUSTOM = 'CUSTOM'
}
export enum SortType {
ASC = 'ASC',
@@ -169,29 +168,11 @@ export type MappingFuncRule = {
};
//#endregion 映射规则
-
-//#region 派生字段规则
export interface DerivedFieldRule {
fieldName?: string;
derivedFunc?: (record: Record) => any;
}
export type DerivedFieldRules = DerivedFieldRule[];
-//#endregion 派生字段规则
-
-//#region 计算字段规则
-export interface CalculateddFieldRule {
- /** 唯一标识，可以当做新指标的key，用于配置在 indicators 中在透视表中展示。 */
- key: string;
- /** 计算字段依赖的指标，可以是在 records 中具体对应的指标字段 or 不是数据records 中的字段
- * 如果依赖的指标不在 records 中，则需要在 aggregationRules 中明确配置，具体指明聚合规则和 indicatorKey 以在 dependIndicatorKeys 所使用。 */
- dependIndicatorKeys: string[];
- /** 计算字段的计算函数，依赖的指标值作为参数传入，返回值作为计算字段的值。 */
- calculateFun?: (dependFieldsValue: any) => any;
-}
-
-export type CalculateddFieldRules = CalculateddFieldRule[];
-//#endregion 计算字段规则
-
/**
* 基本表数据处理配置
*/
@@ -215,7 +196,6 @@ export interface IPivotTableDataConfig {
*/
mappingRules?: MappingRules;
derivedFieldRules?: DerivedFieldRules;
- calculatedFieldRules?: CalculateddFieldRules;
}
/**
diff --git a/packages/vtable/src/ts-types/pivot-table/corner.ts b/packages/vtable/src/ts-types/pivot-table/corner.ts
index 9427ea95a..45c87a86c 100644
--- a/packages/vtable/src/ts-types/pivot-table/corner.ts
+++ b/packages/vtable/src/ts-types/pivot-table/corner.ts
@@ -1,8 +1,5 @@
-import type { IEditor } from '@visactor/vtable-editors';
import type { IImageStyleOption, ITextStyleOption, IStyleOption } from '../column';
import type { ShowColumnRowType } from '../table-engine';
-import type { BaseCellInfo } from '../common';
-import type { BaseTableAPI } from '../base-table';
interface IBasicCornerDefine {
titleOnDimension?: ShowColumnRowType; //角头标题是否显示列维度名称 否则显示行维度名称
@@ -18,19 +15,16 @@ interface IBasicCornerDefine {
interface ITextCornerDefine extends IBasicCornerDefine {
headerType?: 'text';
headerStyle?: Omit;
- headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
}
interface IImageCornerDefine extends IBasicCornerDefine {
headerType: 'image';
headerStyle?: Omit;
- headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
}
interface ILinkCornerDefine extends IBasicCornerDefine {
headerType: 'link';
headerStyle?: Omit;
- headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
}
export type ICornerDefine = IImageCornerDefine | ILinkCornerDefine | ITextCornerDefine;
diff --git a/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts b/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts
index 8a2289bf5..bcef1487a 100644
--- a/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts
+++ b/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts
@@ -3,7 +3,7 @@ import type { ICustomLayout } from '../../customLayout';
import type { FieldFormat } from '../../table-engine';
import type { ColumnIconOption } from '../../icon';
import type { MenuListItem } from '../../menu';
-import type { BaseCellInfo, CellInfo, SortOption } from '../../common';
+import type { BaseCellInfo, CellInfo } from '../../common';
import type { IEditor } from '@visactor/vtable-editors';
import type { BaseTableAPI } from '../../base-table';
@@ -37,12 +37,8 @@ export interface IBasicDimension {
dropDownMenu?: MenuListItem[];
/** 角头单元格显示下拉按钮及下拉菜单*/
cornerDropDownMenu?: MenuListItem[];
- /** sort排序规则 */
- sort?: SortOption;
- /** 显示sort排序icon。为了仅仅显示图标，无排序逻辑 */
+ /** 是否显示排序icon */
showSort?: boolean;
- /** 在角头的维度名称单元格中是否显示排序 */
- showSortInCorner?: boolean;
/** 是否可以拖拽表头换位置 */
dragHeader?: boolean;
/** 表头自定义渲染内容定义 */
diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts
index c0ca9628a..341b7b5af 100644
--- a/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts
+++ b/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts
@@ -24,10 +24,7 @@ export interface IBasicHeaderIndicator {
// sparklineSpec?: SparklineSpec | ((arg0: CustomRenderFunctionArg) => SparklineSpec);
dropDownMenu?: MenuListItem[]; // 针对单独指标上配置下拉按钮
- /** sort排序规则 */
- sort?: boolean;
- /** 显示sort排序icon。为了仅仅显示图标，无排序逻辑 */
- showSort?: boolean;
+ showSort?: boolean; // 否显示排序icon
disableColumnResize?: boolean; // 是否禁用调整列宽,如果是转置表格或者是透视表的指标是行方向指定 那该配置不生效
/** 指标名称表头自定义渲染内容定义 */
diff --git a/packages/vtable/src/ts-types/style-define.ts b/packages/vtable/src/ts-types/style-define.ts
index f8caeeb8e..dc755bc3b 100644
--- a/packages/vtable/src/ts-types/style-define.ts
+++ b/packages/vtable/src/ts-types/style-define.ts
@@ -81,7 +81,6 @@ export type CellStyle = {
padding: PaddingsDef;
textBaseline: CanvasTextBaseline;
color: CanvasRenderingContext2D['fillStyle'];
- strokeColor?: CanvasRenderingContext2D['fillStyle'];
bgColor: CanvasRenderingContext2D['fillStyle'];
// font: string;
fontSize: number;
diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts
index 9dd669770..c47f45555 100644
--- a/packages/vtable/src/ts-types/table-engine.ts
+++ b/packages/vtable/src/ts-types/table-engine.ts
@@ -22,7 +22,7 @@ import type {
ITitleDefine
} from './pivot-table';
import type { ColumnsDefine } from './list-table';
-import type { ITableAxisOption } from './component/axis';
+import type { ICellAxisOption, ITableAxisOption } from './component/axis';
import type { IEditor } from '@visactor/vtable-editors';
import type { ITextStyleOption } from '../body-helper/style';
import type { DataSource } from '../data';
@@ -64,7 +64,7 @@ export type WidthModeDef = 'standard' | 'adaptive' | 'autoWidth';
export type HeightModeDef = 'standard' | 'adaptive' | 'autoHeight';
export type WidthAdaptiveModeDef = 'only-body' | 'all';
export type HeightAdaptiveModeDef = 'only-body' | 'all';
-export type ShowColumnRowType = 'column' | 'row' | 'none' | 'all';
+export type ShowColumnRowType = 'column' | 'row' | 'none';
/** 单元格所处表格哪部分 */
export type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';
export type CellSubLocation =
@@ -80,11 +80,6 @@ export type CellSubLocation =
| 'rowSeriesNumber'
| 'colSeriesNumber';
-export interface SelectAllOnCtrlAOption {
- disableHeaderSelect?: boolean;
- disableRowSeriesNumberSelect?: boolean;
-}
-
export interface TableKeyboardOptions {
/** tab键 默认为true。开启tab键移动选中单元格，如果当前是在编辑单元格 则移动到下一个单元格也是编辑状态 */
moveFocusCellOnTab?: boolean;
@@ -93,7 +88,7 @@ export interface TableKeyboardOptions {
/** 默认不开启即false。开启这个配置的话，如果当前是在编辑中的单元格，方向键可以移动到下个单元格并进入编辑状态，而不是编辑文本内字符串的光标移动。上下左右方向键切换选中单元格不受该配置影响，*/
moveEditCellOnArrowKeys?: boolean;
/** 开启快捷键全选 默认：false */
- selectAllOnCtrlA?: boolean | SelectAllOnCtrlAOption;
+ selectAllOnCtrlA?: boolean;
/** 快捷键复制 默认：false*/
copySelected?: boolean; //这个copy是和浏览器的快捷键一致的
/** 快捷键粘贴，默认：false 。粘贴内容到指定位置（即粘贴前要有选中的单元格）；支持批量粘贴；粘贴生效仅针对配置了编辑 editor 的单元格；*/
@@ -124,8 +119,6 @@ export interface IRowSeriesNumber {
// selectRangeInclude?: boolean;
/** 是否可拖拽顺序 */
dragOrder?: boolean;
- /** 是否禁止列宽调整 */
- disableColumnResize?: boolean;
}
export interface ColumnSeriesNumber {
@@ -226,7 +219,8 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions
* 排序状态
*/
sortState?: SortState | SortState[];
-
+ /** 数据分析相关配置 enableDataAnalysis开启后该配置才会有效 */
+ // dataConfig?: IListTableDataConfig;
/** 全局设置表头编辑器 */
headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
/** 全局设置编辑器 */
@@ -353,7 +347,7 @@ export interface PivotTableConstructorOptions extends BaseTableConstructorOption
*/
rowHeaderTitle?: ITitleDefine;
//#endregion
- /** 数据分析相关配置 */
+ /** 数据分析相关配置 enableDataAnalysis开启后该配置才会有效 */
dataConfig?: IPivotTableDataConfig;
/** 指标标题 用于显示到角头的值*/
@@ -365,8 +359,6 @@ export interface PivotTableConstructorOptions extends BaseTableConstructorOption
editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
/** 全局设置表头编辑器 */
headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
- /** 是否需要补充指标节点到对应的自定义表头中如rowTree或者columnTree. 默认为true */
- supplementIndicatorNodes?: boolean;
}
export interface PivotChartConstructorOptions extends BaseTableConstructorOptions {
/**
@@ -424,10 +416,7 @@ export interface PivotTableAPI extends BaseTableAPI {
options: PivotTableConstructorOptions;
editorManager: EditManeger;
// internalProps: PivotTableProtected;
- pivotSortState: {
- dimensions: IDimensionInfo[];
- order: SortOrder;
- }[];
+ pivotSortState: PivotSortState[];
isListTable: () => false;
isPivotTable: () => true;
getPivotSortState: (col: number, row: number) => SortOrder;
@@ -521,8 +510,6 @@ export interface IDimensionHeaderNode {
children?: IHeaderTreeDefine[] | true;
/** 折叠状态 TODO */
hierarchyState?: HierarchyState;
- /** 是否为虚拟节点 在基于records数据做分析时忽略该维度字段 */
- virtual?: boolean;
}
export interface IExtensionRowDefine {
@@ -540,6 +527,3 @@ export type CustomMerge = {
customLayout?: ICustomLayout;
customRender?: ICustomRender;
};
-
-export type ColumnInfo = { col: number; left: number; right: number; width: number };
-export type RowInfo = { row: number; top: number; bottom: number; height: number };
diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts
index d52e983f2..3bd499e6d 100644
--- a/packages/vtable/src/ts-types/theme.ts
+++ b/packages/vtable/src/ts-types/theme.ts
@@ -2,16 +2,14 @@
import type { ColorsDef, LineDashsDef, LineWidthsDef, LineWidthsPropertyDefine, LineDashsPropertyDefine } from '.';
import type { CheckboxStyle, ITextStyleOption, RadioStyle } from './column/style';
import type { ColorPropertyDefine, ColorsPropertyDefine } from './style-define';
+import type { ColumnIconOption } from './icon';
import type { ICellAxisOption } from './component/axis';
import type { PopTipAttributes } from '@visactor/vrender-components';
// ****** Custom Theme *******
export type PartialTableThemeDefine = Partial;
export type ThemeStyle = ITextStyleOption & {
hover?: Omit; //鼠标hover到某个单元格
- select?: {
- inlineRowBgColor?: ColorPropertyDefine; //交互所在整行的背景颜色
- inlineColumnBgColor?: ColorPropertyDefine; //交互所在整列的背景颜色
- };
+ // click?: Omit; //鼠标点击到某个单元格
frameStyle?: FrameStyle;
};
export type InteractionStyle = {
@@ -52,8 +50,6 @@ export type ScrollStyle = {
scrollRailColor?: string;
/**滚动条滑块的颜色 */
scrollSliderColor?: string;
- /**滚动条滑块的圆角半径 */
- scrollSliderCornerRadius?: number;
/**滚动条宽度大小 */
width?: number;
/**滚动条是否可见 'always' | 'scrolling' | 'none' | 'focus',常驻|滚动时|不显示|聚焦在画布上时 */
@@ -72,8 +68,6 @@ export type TooltipStyle = {
color?: string;
padding?: number[];
bgColor?: string;
- maxWidth?: number;
- maxHeight?: number;
/** !目前未实现该逻辑。触发行为：hover or click */
// trigger?: string | string[];
/**气泡框位置，可选 top left right bottom */
@@ -140,8 +134,6 @@ export interface ITableThemeDefine {
cellBorderColor?: string; //边框颜色
cellBorderLineWidth?: number; //边框线宽度
cellBgColor?: string; //选择框背景颜色
- inlineRowBgColor?: string; //交互所在整行的背景颜色
- inlineColumnBgColor?: string; //交互所在整列的背景颜色
};
// style for axis
diff --git a/packages/vtable/src/ts-types/tooltip.ts b/packages/vtable/src/ts-types/tooltip.ts
index 12ff04e68..ee3633a37 100644
--- a/packages/vtable/src/ts-types/tooltip.ts
+++ b/packages/vtable/src/ts-types/tooltip.ts
@@ -26,9 +26,5 @@ export type TooltipOptions = {
color?: string;
padding?: number[];
arrowMark?: boolean;
- maxWidth?: number;
- maxHeight?: number;
};
- /** 设置tooltip的消失时间 */
- disappearDelay?: number;
};
diff --git a/packages/vtable/src/vrender.ts b/packages/vtable/src/vrender.ts
index 4c650f2e4..1827c4287 100644
--- a/packages/vtable/src/vrender.ts
+++ b/packages/vtable/src/vrender.ts
@@ -1,9 +1,7 @@
-import { loadPoptip } from '@visactor/vrender-components';
import '@visactor/vrender-core';
import { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';
+import { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';
import {
- loadBrowserEnv,
- loadNodeEnv,
registerArc,
registerArc3d,
registerArea,
@@ -41,31 +39,24 @@ export function registerForVrender() {
loadNodeEnv(container);
}
registerArc();
- // registerArc3d();
- // registerArea();
+ registerArc3d();
+ registerArea();
registerCircle();
- // registerGlyph();
+ registerGlyph();
registerGroup();
registerImage();
registerLine();
- // registerPath();
- // registerPolygon();
- // registerPyramid3d();
+ registerPath();
+ registerPolygon();
+ registerPyramid3d();
registerRect();
- // registerRect3d();
+ registerRect3d();
registerRichtext();
- // registerShadowRoot();
+ registerShadowRoot();
registerSymbol();
registerText();
- // registerWrapText();
-
- loadPoptip();
+ registerWrapText();
}
-export { Direction } from '@visactor/vrender-core';
-export { GroupFadeIn } from '@visactor/vrender-core';
-export { GroupFadeOut } from '@visactor/vrender-core';
-
export * from '@visactor/vrender-core';
export * from '@visactor/vrender-kits';
-export * from '@visactor/vrender-components';
diff --git a/packages/vtable/src/vutil-extension-temp/algorithm/binary-search.ts b/packages/vtable/src/vutil-extension-temp/algorithm/binary-search.ts
new file mode 100644
index 000000000..fe7c09731
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/algorithm/binary-search.ts
@@ -0,0 +1,28 @@
+/**
+ * 二分靠近框架，返回数组中第一个大于等于目标值的数的索引
+ * @param arr 数组
+ * @param compareFn 比较函数，返回(当前值-目标值)
+ */
+export const binaryFuzzySearch = (arr: T[], compareFn: (value: T) => number) => {
+ return binaryFuzzySearchInNumberRange(0, arr.length, value => compareFn(arr[value]));
+};
+
+/**
+ * 二分靠近框架，返回数字区间中第一个大于等于目标值的数字
+ * @param x1 区间上界
+ * @param x2 区间下界（不包含）
+ * @param compareFn 比较函数，返回(当前值-目标值)
+ */
+export const binaryFuzzySearchInNumberRange = (x1: number, x2: number, compareFn: (value: number) => number) => {
+ let left = x1;
+ let right = x2;
+ while (left < right) {
+ const mid = Math.floor((left + right) / 2);
+ if (compareFn(mid) >= 0) {
+ right = mid; // 第一个大于等于目标值的数
+ } else {
+ left = mid + 1;
+ }
+ }
+ return left;
+};
diff --git a/packages/vtable/src/vutil-extension-temp/algorithm/index.ts b/packages/vtable/src/vutil-extension-temp/algorithm/index.ts
new file mode 100644
index 000000000..e10f75227
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/algorithm/index.ts
@@ -0,0 +1 @@
+export * from './binary-search';
diff --git a/packages/vtable/src/vutil-extension-temp/index.ts b/packages/vtable/src/vutil-extension-temp/index.ts
new file mode 100644
index 000000000..f9d6e21f1
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/index.ts
@@ -0,0 +1,4 @@
+export * from './transform/tick-data';
+export * from './utils';
+export * from './algorithm';
+export * from './spec';
diff --git a/packages/vtable/src/vutil-extension-temp/spec/clone-deep.ts b/packages/vtable/src/vutil-extension-temp/spec/clone-deep.ts
new file mode 100644
index 000000000..74aec2e98
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/spec/clone-deep.ts
@@ -0,0 +1,61 @@
+import { isArray, isBoolean, isDate, isNumber, isString, isValid } from '@visactor/vutils';
+import { isDataView, isHTMLElement } from './common';
+
+/**
+ * 深拷贝 spec，为避免循环引用，DataView 维持原有引用
+ * @param spec 原spec
+ */
+export function cloneDeepSpec(spec: any, excludeKeys: string[] = ['data']) {
+ const value = spec;
+
+ let result;
+ if (!isValid(value) || typeof value !== 'object') {
+ return value;
+ }
+
+ // 判断是不是不能深拷贝的对象
+ if (isDataView(value) || isHTMLElement(value)) {
+ return value;
+ }
+
+ const isArr = isArray(value);
+ const length = value.length;
+ // 不考虑特殊数组的额外处理
+ if (isArr) {
+ result = new Array(length);
+ }
+ // 不考虑 buffer / arguments 类型的处理以及 prototype 的额外处理
+ else if (typeof value === 'object') {
+ result = {};
+ }
+ // 不建议使用作为 Boolean / Number / String 作为构造器
+ else if (isBoolean(value) || isNumber(value) || isString(value)) {
+ result = value;
+ } else if (isDate(value)) {
+ result = new Date(+value);
+ }
+ // 不考虑 ArrayBuffer / DataView / TypedArray / map / set / regexp / symbol 类型
+ else {
+ result = undefined;
+ }
+
+ // 不考虑 map / set / TypedArray 类型的赋值
+
+ // 不考虑对象的 symbol 属性
+ const props = isArr ? undefined : Object.keys(Object(value));
+
+ let index = -1;
+ if (result) {
+ while (++index < (props || value).length) {
+ const key = props ? props[index] : index;
+ const subValue = value[key];
+ if (excludeKeys?.includes(key.toString())) {
+ result[key] = subValue;
+ } else {
+ result[key] = cloneDeepSpec(subValue, excludeKeys);
+ }
+ }
+ }
+
+ return result;
+}
diff --git a/packages/vtable/src/vutil-extension-temp/spec/common.ts b/packages/vtable/src/vutil-extension-temp/spec/common.ts
new file mode 100644
index 000000000..a11af544c
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/spec/common.ts
@@ -0,0 +1,23 @@
+import { DataView } from '@visactor/vdataset';
+
+export function isDataView(obj: any): obj is DataView {
+ return obj instanceof DataView;
+}
+
+export function isHTMLElement(obj: any): obj is Element {
+ try {
+ return obj instanceof Element;
+ } catch {
+ // 跨端 plan B
+ const htmlElementKeys: (keyof Element)[] = [
+ 'children',
+ 'innerHTML',
+ 'classList',
+ 'setAttribute',
+ 'tagName',
+ 'getBoundingClientRect'
+ ];
+ const keys = Object.keys(obj);
+ return htmlElementKeys.every(key => keys.includes(key));
+ }
+}
diff --git a/packages/vtable/src/vutil-extension-temp/spec/index.ts b/packages/vtable/src/vutil-extension-temp/spec/index.ts
new file mode 100644
index 000000000..1245ec93d
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/spec/index.ts
@@ -0,0 +1,3 @@
+export * from './clone-deep';
+export * from './common';
+export * from './merge-spec';
diff --git a/packages/vtable/src/vutil-extension-temp/spec/merge-spec.ts b/packages/vtable/src/vutil-extension-temp/spec/merge-spec.ts
new file mode 100644
index 000000000..b7d3a8433
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/spec/merge-spec.ts
@@ -0,0 +1,130 @@
+import { isArray, isArrayLike, isObject, isPlainObject, isValid } from '@visactor/vutils';
+
+function baseMerge(target: any, source: any, shallowArray = false) {
+ if (source) {
+ if (target === source) {
+ return;
+ }
+ if (isValid(source) && typeof source === 'object') {
+ // baseFor
+ const iterable = Object(source);
+ const props = [];
+ // keysIn
+ for (const key in iterable) {
+ props.push(key);
+ }
+ let { length } = props;
+ let propIndex = -1;
+ while (length--) {
+ const key = props[++propIndex];
+ if (
+ isValid(iterable[key]) &&
+ typeof iterable[key] === 'object' &&
+ !isArray(target[key]) // VChart 特有逻辑
+ ) {
+ baseMergeDeep(target, source, key, shallowArray);
+ } else {
+ assignMergeValue(target, key, iterable[key]);
+ }
+ }
+ }
+ }
+}
+
+// 由于目前 VChart 内部对 spec 会先执行一次深拷贝，merge 暂时不考虑 source 中有环的问题
+function baseMergeDeep(target: object, source: object, key: string, shallowArray = false) {
+ const objValue = target[key];
+ const srcValue = source[key];
+ let newValue = source[key];
+ let isCommon = true;
+ // 不考虑 buffer / typedArray 类型
+ if (isArray(srcValue)) {
+ if (shallowArray) {
+ // 依据参数对数组做浅拷贝
+ newValue = [];
+ } else if (isArray(objValue)) {
+ newValue = objValue;
+ } else if (isArrayLike(objValue)) {
+ // 如果 source 为数组，则 target 的 arrayLike 对象也视作为数组处理
+ newValue = new Array(objValue.length);
+ let index = -1;
+ const length = objValue.length;
+ while (++index < length) {
+ newValue[index] = objValue[index];
+ }
+ }
+ }
+ // else if (isArray(srcValue) && shallowArray) {
+ // newValue = [];
+ // }
+ // 不考虑 argument 类型
+ else if (isPlainObject(srcValue)) {
+ newValue = objValue ?? {};
+ // 不考虑 prototype 的额外处理
+ if (typeof objValue === 'function' || typeof objValue !== 'object') {
+ newValue = {};
+ }
+ } else {
+ isCommon = false;
+ }
+ // 对 class 等复杂对象或者浅拷贝的 array 不做拷贝处理
+ if (isCommon) {
+ baseMerge(newValue, srcValue, shallowArray);
+ }
+ assignMergeValue(target, key, newValue);
+}
+
+function assignMergeValue(target: object, key: string, value: any) {
+ if ((value !== undefined && !eq(target[key], value)) || (value === undefined && !(key in target))) {
+ // 不考虑 __proto__ 的赋值处理
+ target[key] = value;
+ }
+}
+
+function eq(value: any, other: any) {
+ return value === other || (Number.isNaN(value) && Number.isNaN(other));
+}
+
+/* 与原生的 lodash merge 差异在于对数组是否应用最后一个 source 的结果
+ * 以及对一些特殊情况的处理，比如对数组类型 padding 和对象类型的 padding 的 merge
+ */
+export function mergeSpec(target: any, ...sources: any[]): any {
+ let sourceIndex = -1;
+ const length = sources.length;
+ while (++sourceIndex < length) {
+ const source = sources[sourceIndex];
+ baseMerge(target, source, true);
+ }
+ return target;
+}
+
+export function mergeSpecWithFilter(
+ target: any,
+ filter: string | { type: string; index: number },
+ spec: any,
+ forceMerge: boolean
+) {
+ Object.keys(target).forEach(k => {
+ if (isObject(filter)) {
+ if (filter.type === k) {
+ if (isArray(target[k])) {
+ if (target[k].length >= filter.index) {
+ target[k][filter.index] = forceMerge ? mergeSpec({}, target[k][filter.index], spec) : spec;
+ }
+ } else {
+ target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec;
+ }
+ }
+ } else {
+ // filter === user id
+ if (isArray(target[k])) {
+ const index = target[k].findIndex((_s: { id: string | number }) => _s.id === filter);
+ if (index >= 0) {
+ target[k][index] = forceMerge ? mergeSpec({}, target[k][index], spec) : spec;
+ }
+ } else if (target.id === filter) {
+ target[k] = forceMerge ? mergeSpec({}, target[k], spec) : spec;
+ }
+ }
+ });
+}
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/config.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/config.ts
new file mode 100644
index 000000000..af2881fac
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/config.ts
@@ -0,0 +1,2 @@
+/** 连续轴默认 tick 数量 */
+export const DEFAULT_CONTINUOUS_TICK_COUNT = 5;
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/continuous.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/continuous.ts
new file mode 100644
index 000000000..981390e38
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/continuous.ts
@@ -0,0 +1,92 @@
+import type { LinearScale, ContinuousScale } from '@visactor/vscale';
+// eslint-disable-next-line no-duplicate-imports
+import { isContinuous } from '@visactor/vscale';
+import { isFunction, isValid, last } from '@visactor/vutils';
+import { DEFAULT_CONTINUOUS_TICK_COUNT } from './config';
+import type { ICartesianTickDataOpt, ITickData, ITickDataOpt } from './interface';
+import type { ILabelItem } from './util';
+// eslint-disable-next-line no-duplicate-imports
+import { convertDomainToTickData, getCartesianLabelBounds, hasOverlap, intersect } from './util';
+
+/**
+ * 对于连续轴：
+ * - 如果spec配了tickCount、forceTickCount、tickStep，则直接输出LinearScale的ticks()、forceTicks()、stepTicks()结果；
+ * - 默认输出tickCount为10的ticks()结果。
+ *
+ * @param scale
+ * @param op
+ * @returns
+ */
+export const continuousTicks = (scale: ContinuousScale, op: ITickDataOpt): ITickData[] => {
+ if (!isContinuous(scale.type)) {
+ return convertDomainToTickData(scale.domain());
+ }
+ // if range is so small
+ const range = scale.range();
+ const rangeSize = Math.abs(range[range.length - 1] - range[0]);
+ if (rangeSize < 2) {
+ return convertDomainToTickData([scale.domain()[0]]);
+ }
+
+ const { tickCount, forceTickCount, tickStep, noDecimals = false, labelStyle } = op;
+
+ let scaleTicks: number[];
+ if (isValid(tickStep)) {
+ scaleTicks = (scale as LinearScale).stepTicks(tickStep);
+ } else if (isValid(forceTickCount)) {
+ scaleTicks = (scale as LinearScale).forceTicks(forceTickCount);
+ } else if (op.tickMode === 'd3') {
+ const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+ scaleTicks = (scale as LinearScale).d3Ticks(count ?? DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals });
+ } else {
+ const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+ scaleTicks = (scale as LinearScale).ticks(count ?? DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals });
+ }
+
+ if (op.sampling) {
+ // 判断重叠
+ if (op.coordinateType === 'cartesian' || (op.coordinateType === 'polar' && op.axisOrientType === 'radius')) {
+ const { labelGap = 4, labelFlush } = op as ICartesianTickDataOpt;
+ let items = getCartesianLabelBounds(scale, scaleTicks, op as ICartesianTickDataOpt).map(
+ (bounds, i) =>
+ ({
+ AABBBounds: bounds,
+ value: scaleTicks[i]
+ } as ILabelItem)
+ );
+ while (items.length >= 3 && hasOverlap(items, labelGap)) {
+ items = methods.parity(items);
+ }
+ const ticks = items.map(item => item.value);
+
+ if (ticks.length < 3 && labelFlush) {
+ if (ticks.length > 1) {
+ ticks.pop();
+ }
+ if (last(ticks) !== last(scaleTicks)) {
+ ticks.push(last(scaleTicks));
+ }
+ }
+
+ scaleTicks = ticks;
+ }
+ }
+
+ return convertDomainToTickData(scaleTicks);
+};
+
+const methods = {
+ parity: function (items: ILabelItem[]) {
+ return items.filter((item, i) => i % 2 === 0);
+ },
+ greedy: function (items: ILabelItem[], sep: number) {
+ let a: ILabelItem;
+ return items.filter((b, i) => {
+ if (!i || !intersect(a.AABBBounds, b.AABBBounds, sep)) {
+ a = b;
+ return true;
+ }
+ return false;
+ });
+ }
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/linear.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/linear.ts
new file mode 100644
index 000000000..83cce6834
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/linear.ts
@@ -0,0 +1,241 @@
+import type { BandScale, IBaseScale } from '@visactor/vscale';
+import { isFunction, isValid, maxInArray, minInArray } from '@visactor/vutils';
+import type { ICartesianTickDataOpt, ITickData } from '../interface';
+import { convertDomainToTickData, getCartesianLabelBounds, isAxisHorizontal } from '../util';
+import { binaryFuzzySearchInNumberRange } from '../../../algorithm';
+
+/** x1, x2, length */
+type OneDimensionalBounds = [number, number, number];
+
+const getOneDimensionalLabelBounds = (
+ scale: IBaseScale,
+ domain: any[],
+ op: ICartesianTickDataOpt,
+ isHorizontal: boolean
+): OneDimensionalBounds[] => {
+ const labelBoundsList = getCartesianLabelBounds(scale, domain, op);
+ return labelBoundsList.map(bounds => {
+ if (isHorizontal) {
+ return [bounds.x1, bounds.x2, bounds.width()];
+ }
+ return [bounds.y1, bounds.y2, bounds.height()];
+ });
+};
+
+/** 判断两个 bounds 是否有重叠情况 */
+const boundsOverlap = (prevBounds: OneDimensionalBounds, nextBounds: OneDimensionalBounds, gap = 0): boolean => {
+ return Math.max(prevBounds[0], nextBounds[0]) - gap / 2 <= Math.min(prevBounds[1], nextBounds[1]) + gap / 2;
+};
+
+/** 判断两个不相交的 bounds 相隔的距离 */
+export const boundsDistance = (prevBounds: OneDimensionalBounds, nextBounds: OneDimensionalBounds): number => {
+ if (prevBounds[1] < nextBounds[0]) {
+ return nextBounds[0] - prevBounds[1];
+ } else if (nextBounds[1] < prevBounds[0]) {
+ return prevBounds[0] - nextBounds[1];
+ }
+ return 0;
+};
+
+/**
+ * 对于离散轴：
+ * - 如果spec配了tickCount、forceTickCount、tickStep，则直接输出BandScale的ticks()、forceTicks()、stepTicks()结果；
+ * - 估算所有轴label的宽度（或高度，在竖轴的情况下）并存为数组domainLengthList；
+ * - 通过循环来寻找最小的step，使：如果在这个step下采样，轴标签互不遮挡（此处用到domainLengthList和scale.range()）；
+ * - 如果用户配置了spec.label.lastVisible，则处理右边界：强制采样最后一个tick数据，并删掉这个tick的label所覆盖的那些tick数据。
+ *
+ * @param scale
+ * @param op
+ * @returns
+ */
+export const linearDiscreteTicks = (scale: BandScale, op: ICartesianTickDataOpt): ITickData[] => {
+ const domain = scale.domain();
+ if (!domain.length) {
+ return [];
+ }
+ const { tickCount, forceTickCount, tickStep, labelGap = 4, axisOrientType, labelStyle } = op;
+ const isHorizontal = isAxisHorizontal(axisOrientType);
+ const range = scale.range();
+
+ // if range is so small
+ const rangeSize = scale.calculateWholeRangeSize();
+ if (rangeSize < 2) {
+ if (op.labelLastVisible) {
+ return convertDomainToTickData([domain[domain.length - 1]]);
+ }
+ return convertDomainToTickData([domain[0]]);
+ }
+
+ let scaleTicks;
+ if (isValid(tickStep)) {
+ scaleTicks = scale.stepTicks(tickStep);
+ } else if (isValid(forceTickCount)) {
+ scaleTicks = scale.forceTicks(forceTickCount);
+ } else if (isValid(tickCount)) {
+ const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+ scaleTicks = scale.ticks(count);
+ } else if (op.sampling) {
+ const fontSize = (op.labelStyle.fontSize ?? 12) + 2;
+ const rangeStart = minInArray(range);
+ const rangeEnd = maxInArray(range);
+
+ if (domain.length <= rangeSize / fontSize) {
+ const incrementUnit = (rangeEnd - rangeStart) / domain.length;
+ const labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal);
+ const minBoundsLength = Math.min(...labelBoundsList.map(bounds => bounds[2]));
+
+ const stepResult = getStep(
+ domain,
+ labelBoundsList,
+ labelGap,
+ op.labelLastVisible,
+ Math.floor(minBoundsLength / incrementUnit), // 给step赋上合适的初值，有效改善外层循环次数
+ false
+ );
+
+ scaleTicks = (scale as BandScale).stepTicks(stepResult.step);
+ if (op.labelLastVisible) {
+ if (stepResult.delCount) {
+ scaleTicks = scaleTicks.slice(0, scaleTicks.length - stepResult.delCount);
+ }
+ scaleTicks.push(domain[domain.length - 1]);
+ }
+ } else {
+ // only check first middle last, use the max size to sampling
+ const tempDomain = [domain[0], domain[Math.floor(domain.length / 2)], domain[domain.length - 1]];
+ const tempList = getOneDimensionalLabelBounds(scale, tempDomain, op, isHorizontal);
+ let maxBounds: OneDimensionalBounds = null;
+ tempList.forEach(current => {
+ if (!maxBounds) {
+ maxBounds = current;
+ return;
+ }
+ if (maxBounds[2] < current[2]) {
+ maxBounds = current;
+ }
+ });
+
+ const step =
+ rangeEnd - rangeStart - labelGap > 0
+ ? Math.ceil((domain.length * (labelGap + maxBounds[2])) / (rangeEnd - rangeStart - labelGap))
+ : domain.length - 1;
+
+ scaleTicks = (scale as BandScale).stepTicks(step);
+
+ if (
+ op.labelLastVisible &&
+ (!scaleTicks.length || scaleTicks[scaleTicks.length - 1] !== domain[domain.length - 1])
+ ) {
+ if (
+ scaleTicks.length &&
+ Math.abs(scale.scale(scaleTicks[scaleTicks.length - 1]) - scale.scale(domain[domain.length - 1])) <
+ maxBounds[2]
+ ) {
+ scaleTicks = scaleTicks.slice(0, -1);
+ }
+ scaleTicks.push(domain[domain.length - 1]);
+ }
+ }
+ } else {
+ scaleTicks = scale.domain();
+ }
+
+ return convertDomainToTickData(scaleTicks);
+};
+
+/** 计算合适的step */
+const getStep = (
+ domain: any[],
+ labelBoundsList: OneDimensionalBounds[],
+ labelGap: number,
+ labelLastVisible: boolean,
+ defaultStep: number,
+ areAllBoundsSame: boolean
+) => {
+ let resultDelCount = 0;
+ let resultStep = 0;
+ let resultTickCount = -1;
+ let minDiff = Number.MAX_VALUE;
+
+ /** 验证在当前 step 下是否会产生重叠 */
+ const validateStep = (step: number) => {
+ let success = true;
+ let ptr = 0;
+ do {
+ if (ptr + step < domain.length && boundsOverlap(labelBoundsList[ptr], labelBoundsList[ptr + step], labelGap)) {
+ success = false;
+ }
+ ptr += step;
+ } while (success && ptr < domain.length);
+ return success;
+ };
+
+ // 通过二分来寻找最小的step，使：如果在这个step下采样，轴标签互不遮挡
+ const minValidStep = binaryFuzzySearchInNumberRange(defaultStep, domain.length, step =>
+ validateStep(step) ? 1 : -1
+ );
+
+ // 对 step 进行微调
+ let step = minValidStep;
+ do {
+ if (step > minValidStep && !areAllBoundsSame) {
+ if (!validateStep(step)) {
+ step++;
+ continue;
+ }
+ }
+ if (labelLastVisible) {
+ const lastIndex = domain.length - 1;
+ let delCount = 0;
+ let ptr;
+ if (domain.length % step > 0) {
+ ptr = domain.length - (domain.length % step) + step;
+ } else {
+ ptr = domain.length;
+ }
+ do {
+ ptr -= step; // 获取最后一个label位置
+ if (ptr === lastIndex || boundsOverlap(labelBoundsList[ptr], labelBoundsList[lastIndex], labelGap)) {
+ delCount++;
+ } else {
+ break;
+ }
+ } while (ptr > 0);
+ if (ptr === lastIndex) {
+ // 采到的最后的一个 label 刚好是最后一项，直接退出
+ resultStep = step;
+ resultDelCount = delCount;
+ break;
+ } else {
+ // 尝试获取最均匀的结果，防止倒数第二项和最后一项有大的空档
+ const tickCount = Math.floor(domain.length / step) - delCount + 1;
+ if (tickCount < resultTickCount) {
+ break;
+ } else {
+ resultTickCount = tickCount;
+ const distance1 = boundsDistance(labelBoundsList[ptr], labelBoundsList[lastIndex]); // 倒数第2项和最后一项的距离
+ const distance2 =
+ ptr - step >= 0 ? boundsDistance(labelBoundsList[ptr - step], labelBoundsList[ptr]) : distance1; // 倒数第3项和倒数第2项的距离
+ const diff = Math.abs(distance1 - distance2);
+ if (diff < minDiff) {
+ minDiff = diff;
+ resultStep = step; // 记录最均匀的 step
+ resultDelCount = delCount;
+ }
+ if (distance1 <= distance2) {
+ break;
+ }
+ }
+ }
+ } else {
+ resultStep = step;
+ break;
+ }
+ step++;
+ } while (step <= domain.length);
+
+ return {
+ step: resultStep,
+ delCount: resultDelCount
+ };
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/polar-angle.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/polar-angle.ts
new file mode 100644
index 000000000..361072dda
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/discrete/polar-angle.ts
@@ -0,0 +1,101 @@
+import type { BandScale } from '@visactor/vscale';
+import { isFunction, isValid, maxInArray, minInArray } from '@visactor/vutils';
+import type { IPolarTickDataOpt, ITickData } from '../interface';
+import { convertDomainToTickData, getPolarAngleLabelBounds, labelOverlap } from '../util';
+import type { AABBBounds } from '@visactor/vutils';
+
+/**
+ * 对于离散轴：
+ * - 如果spec配了tickCount、forceTickCount、tickStep，则直接输出BandScale的ticks()、forceTicks()、stepTicks()结果；
+ * - 估算所有轴label的宽高并存为数组labelBoundsList；
+ * - 通过循环来寻找最小的step，使：如果在这个step下采样，轴标签互不遮挡（此处用到labelBoundsList和scale.range()）；
+ *
+ * @param scale
+ * @param op
+ * @returns
+ */
+export const polarAngleAxisDiscreteTicks = (scale: BandScale, op: IPolarTickDataOpt): ITickData[] => {
+ const { tickCount, forceTickCount, tickStep, getRadius, labelOffset, labelGap = 0, labelStyle } = op;
+ const radius = getRadius?.();
+ if (!radius) {
+ return convertDomainToTickData(scale.domain());
+ }
+
+ let scaleTicks;
+ if (isValid(tickStep)) {
+ scaleTicks = scale.stepTicks(tickStep);
+ } else if (isValid(forceTickCount)) {
+ scaleTicks = scale.forceTicks(forceTickCount);
+ } else if (isValid(tickCount)) {
+ const range = scale.range();
+ const rangeSize = Math.abs(range[range.length - 1] - range[0]);
+ const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+ scaleTicks = scale.ticks(count);
+ } else if (op.sampling) {
+ const domain = scale.domain();
+ const range = scale.range();
+
+ const labelBoundsList = getPolarAngleLabelBounds(scale, domain, op);
+
+ const rangeStart = minInArray(range);
+ const rangeEnd = maxInArray(range);
+
+ const axisLength = Math.abs(rangeEnd - rangeStart) * (radius + labelOffset);
+ const incrementUnit = axisLength / domain.length;
+ const { step, delCount } = getStep(
+ domain,
+ labelBoundsList,
+ labelGap,
+ Math.floor(
+ labelBoundsList.reduce((min, curBounds) => {
+ return Math.min(min, curBounds.width(), curBounds.height());
+ }, Number.MAX_VALUE) / incrementUnit
+ ) // 给step赋上合适的初值，有效改善外层循环次数
+ );
+
+ scaleTicks = (scale as BandScale).stepTicks(step);
+ scaleTicks = scaleTicks.slice(0, scaleTicks.length - delCount);
+ } else {
+ scaleTicks = scale.domain();
+ }
+
+ return convertDomainToTickData(scaleTicks);
+};
+
+/** 计算合适的step */
+const getStep = (domain: any[], labelBoundsList: AABBBounds[], labelGap: number, defaultStep: number) => {
+ let step = defaultStep;
+ // 通过循环来寻找最小的step，使：如果在这个step下采样，轴标签互不遮挡
+ do {
+ let success = true;
+ step++;
+ let ptr = 0;
+ do {
+ if (ptr + step < domain.length && labelOverlap(labelBoundsList[ptr], labelBoundsList[ptr + step], labelGap)) {
+ success = false;
+ }
+ ptr += step;
+ } while (success && ptr < domain.length);
+ if (success) {
+ break;
+ }
+ } while (step <= domain.length);
+
+ let delCount = 0;
+ if (domain.length > 2) {
+ let ptr = domain.length - (domain.length % step);
+ if (ptr >= domain.length) {
+ ptr -= step;
+ }
+ // 判断首尾是否互相覆盖
+ while (ptr > 0 && labelOverlap(labelBoundsList[0], labelBoundsList[ptr])) {
+ delCount++;
+ ptr -= step;
+ }
+ }
+
+ return {
+ step,
+ delCount
+ };
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/index.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/index.ts
new file mode 100644
index 000000000..549fb07f7
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/index.ts
@@ -0,0 +1,27 @@
+import type { BandScale, ContinuousScale, IBaseScale } from '@visactor/vscale';
+// eslint-disable-next-line no-duplicate-imports
+import { isContinuous, isDiscrete } from '@visactor/vscale';
+import { continuousTicks } from './continuous';
+import { linearDiscreteTicks } from './discrete/linear';
+import { polarAngleAxisDiscreteTicks } from './discrete/polar-angle';
+import type { ICartesianTickDataOpt, IPolarTickDataOpt, ITickData, ITickDataOpt } from './interface';
+import { convertDomainToTickData } from './util';
+
+export * from './interface';
+export { convertDomainToTickData };
+
+// 总入口
+export const ticks = (scale: IBaseScale, op: ITickDataOpt): ITickData[] => {
+ if (isContinuous(scale.type)) {
+ return continuousTicks(scale as ContinuousScale, op);
+ } else if (isDiscrete(scale.type)) {
+ if (op.coordinateType === 'cartesian') {
+ return linearDiscreteTicks(scale as BandScale, op as ICartesianTickDataOpt);
+ } else if (op.coordinateType === 'polar') {
+ if (op.axisOrientType === 'angle') {
+ return polarAngleAxisDiscreteTicks(scale as BandScale, op as IPolarTickDataOpt);
+ }
+ }
+ }
+ return convertDomainToTickData(scale.domain());
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/interface.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/interface.ts
new file mode 100644
index 000000000..1c70971cd
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/interface.ts
@@ -0,0 +1,57 @@
+import type { ITextGraphicAttribute } from '@visactor/vrender-core';
+
+export type CoordinateType = 'cartesian' | 'polar' | 'geo' | 'none';
+export type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z';
+export type IPolarOrientType = 'radius' | 'angle';
+
+export interface ITickDataOpt {
+ /**
+ * 是否进行轴采样
+ */
+ sampling?: boolean;
+ tickCount?: number | ((option: ITickCallbackOption) => number);
+ forceTickCount?: number;
+ tickStep?: number;
+ tickMode?: 'average' | 'd3' | string;
+ noDecimals?: boolean;
+
+ coordinateType: CoordinateType;
+ axisOrientType: IOrientType | IPolarOrientType;
+ startAngle?: number;
+
+ labelFormatter?: (value: any) => string;
+ labelStyle: ITextGraphicAttribute;
+ labelGap?: number;
+}
+
+export interface ICartesianTickDataOpt extends ITickDataOpt {
+ axisOrientType: IOrientType;
+ labelLastVisible: boolean;
+ labelFlush: boolean;
+}
+
+export interface IPolarTickDataOpt extends ITickDataOpt {
+ axisOrientType: IPolarOrientType;
+ getRadius: () => number;
+ labelOffset: number;
+ inside: boolean;
+}
+
+export interface ITickData {
+ index: number;
+ value: number | string;
+ // label: string;
+}
+
+type ITickCallbackOption = {
+ /**
+ * 坐标轴占据的画布大小。
+ * 直角坐标系中为轴的宽度或高度。
+ * 极坐标系中半径轴的长度。
+ */
+ axisLength?: number;
+ /**
+ * 轴标签的样式
+ */
+ labelStyle?: ITextGraphicAttribute;
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/util.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/util.ts
new file mode 100644
index 000000000..abc95029a
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/util.ts
@@ -0,0 +1,182 @@
+import type { IBaseScale } from '@visactor/vscale';
+import type { IBoundsLike } from '@visactor/vutils';
+// eslint-disable-next-line no-duplicate-imports
+import { AABBBounds, degreeToRadian } from '@visactor/vutils';
+import type { IGraphic, TextAlignType, TextBaselineType } from '@visactor/vrender-core';
+import { initTextMeasure } from '../../utils/text';
+import type { ICartesianTickDataOpt, IOrientType, IPolarTickDataOpt, ITickData } from './interface';
+import { getLabelPosition } from './utils/polar-label-position';
+
+export const convertDomainToTickData = (domain: any[]): ITickData[] => {
+ const ticks = domain.map((t: number, index: number) => {
+ return {
+ index,
+ value: t
+ };
+ });
+ return ticks;
+};
+
+/** 判断两个label是否有重叠情况 */
+export const labelOverlap = (prevLabel: AABBBounds, nextLabel: AABBBounds, gap = 0): boolean => {
+ const prevBounds = new AABBBounds(prevLabel).expand(gap / 2);
+ const nextBounds = new AABBBounds(nextLabel).expand(gap / 2);
+ return prevBounds.intersects(nextBounds);
+};
+
+/** 判断两个不相交的label相隔的距离 */
+export const labelDistance = (prevLabel: AABBBounds, nextLabel: AABBBounds): [number, number] => {
+ let horizontal = 0;
+ if (prevLabel.x2 < nextLabel.x1) {
+ horizontal = nextLabel.x1 - prevLabel.x2;
+ } else if (nextLabel.x2 < prevLabel.x1) {
+ horizontal = prevLabel.x1 - nextLabel.x2;
+ }
+
+ let vertical = 0;
+ if (prevLabel.y2 < nextLabel.y1) {
+ vertical = nextLabel.y1 - prevLabel.y2;
+ } else if (nextLabel.y2 < prevLabel.y1) {
+ vertical = prevLabel.y1 - nextLabel.y2;
+ }
+
+ return [horizontal, vertical];
+};
+
+export function intersect(a: IBoundsLike, b: IBoundsLike, sep: number) {
+ return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
+}
+
+export interface ILabelItem extends Pick {
+ value?: T;
+}
+
+export function hasOverlap(items: ILabelItem[], pad: number): boolean {
+ for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
+ b = items[i];
+ if (intersect(a.AABBBounds, b.AABBBounds, pad)) {
+ return true;
+ }
+ }
+ return false;
+}
+
+export const MIN_TICK_GAP = 12;
+
+export const getCartesianLabelBounds = (scale: IBaseScale, domain: any[], op: ICartesianTickDataOpt): AABBBounds[] => {
+ const { labelStyle, axisOrientType, labelFlush, labelFormatter, startAngle = 0 } = op;
+ let labelAngle = labelStyle.angle ?? 0;
+ if (labelStyle.direction === 'vertical') {
+ labelAngle += degreeToRadian(90);
+ }
+ const isHorizontal = ['bottom', 'top'].includes(axisOrientType);
+ const isVertical = ['left', 'right'].includes(axisOrientType);
+ let scaleX = 1;
+ let scaleY = 0;
+ if (isHorizontal) {
+ // nothing to update
+ } else if (isVertical) {
+ scaleX = 0;
+ scaleY = 1;
+ } else if (startAngle) {
+ scaleX = Math.cos(startAngle);
+ scaleY = -Math.sin(startAngle);
+ }
+
+ const textMeasure = initTextMeasure(labelStyle);
+ const labelBoundsList = domain.map((v: any, i: number) => {
+ const str = labelFormatter ? labelFormatter(v) : `${v}`;
+
+ // 估算文本宽高
+ const { width, height } = textMeasure.quickMeasure(str);
+ const textWidth = Math.max(width, MIN_TICK_GAP);
+ const textHeight = Math.max(height, MIN_TICK_GAP);
+
+ // 估算文本位置
+ const pos = scale.scale(v);
+ const baseTextX = scaleX * pos;
+ const baseTextY = scaleY * pos;
+ let textX = baseTextX;
+ let textY = baseTextY;
+
+ let align: TextAlignType;
+ if (labelFlush && isHorizontal && i === 0) {
+ align = 'left';
+ } else if (labelFlush && isHorizontal && i === domain.length - 1) {
+ align = 'right';
+ } else {
+ align = labelStyle.textAlign ?? 'center';
+ }
+ if (align === 'right') {
+ textX -= textWidth;
+ } else if (align === 'center') {
+ textX -= textWidth / 2;
+ }
+
+ let baseline: TextBaselineType;
+ if (labelFlush && isVertical && i === 0) {
+ baseline = 'top';
+ } else if (labelFlush && isVertical && i === domain.length - 1) {
+ baseline = 'bottom';
+ } else {
+ baseline = labelStyle.textBaseline ?? 'middle';
+ }
+ if (baseline === 'bottom') {
+ textY -= textHeight;
+ } else if (baseline === 'middle') {
+ textY -= textHeight / 2;
+ }
+
+ // 计算 label 包围盒
+ const bounds = new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight);
+
+ if (labelAngle) {
+ bounds.rotate(labelAngle, baseTextX, baseTextY);
+ }
+
+ return bounds;
+ });
+
+ return labelBoundsList;
+};
+
+export const getPolarAngleLabelBounds = (scale: IBaseScale, domain: any[], op: IPolarTickDataOpt): AABBBounds[] => {
+ const { labelStyle, getRadius, labelOffset, labelFormatter, inside } = op;
+ const radius = getRadius?.();
+ const labelAngle = labelStyle.angle ?? 0;
+
+ const textMeasure = initTextMeasure(labelStyle);
+ const labelBoundsList = domain.map((v: any) => {
+ const str = labelFormatter ? labelFormatter(v) : `${v}`;
+
+ // 估算文本宽高
+ const { width, height } = textMeasure.quickMeasure(str);
+ const textWidth = Math.max(width, MIN_TICK_GAP);
+ const textHeight = Math.max(height, MIN_TICK_GAP);
+
+ // 估算文本位置
+ const angle = scale.scale(v);
+ let textX = 0;
+ let textY = 0;
+ const orient = {
+ align: labelStyle.textAlign ?? 'center',
+ baseline: labelStyle.textBaseline ?? 'middle'
+ };
+
+ const { x, y } = getLabelPosition(angle, { x: 0, y: 0 }, radius, labelOffset, inside, str, labelStyle);
+ textX = x + (orient.align === 'right' ? -textWidth : orient.align === 'center' ? -textWidth / 2 : 0);
+ textY = y + (orient.baseline === 'bottom' ? -textHeight : orient.baseline === 'middle' ? -textHeight / 2 : 0);
+
+ // 计算 label 包围盒
+ const bounds = new AABBBounds()
+ .set(textX, textY, textX + textWidth, textY + textHeight)
+ .rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
+ return bounds;
+ });
+
+ return labelBoundsList;
+};
+
+export const isAxisHorizontal = (axisOrientType: IOrientType) => {
+ return (['bottom', 'top', 'z'] as IOrientType[]).includes(axisOrientType);
+};
diff --git a/packages/vtable/src/vutil-extension-temp/transform/tick-data/utils/polar-label-position.ts b/packages/vtable/src/vutil-extension-temp/transform/tick-data/utils/polar-label-position.ts
new file mode 100644
index 000000000..cef160c38
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/transform/tick-data/utils/polar-label-position.ts
@@ -0,0 +1,18 @@
+import type { ITextGraphicAttribute } from '@visactor/vrender-core';
+import { getCircleLabelPosition, getCircleVerticalVector, getVerticalCoord } from '@visactor/vrender-components';
+import { polarToCartesian } from '@visactor/vutils';
+
+export function getLabelPosition(
+ angle: number,
+ center: { x: number; y: number },
+ radius: number,
+ labelOffset: number,
+ inside: boolean,
+ text: string | number,
+ style: Partial
+) {
+ const point = polarToCartesian({ x: 0, y: 0 }, radius, angle);
+ const labelPoint = getVerticalCoord(point, getCircleVerticalVector(labelOffset, point, center, inside));
+ const vector = getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside);
+ return getCircleLabelPosition(labelPoint, vector, text, style);
+}
diff --git a/packages/vtable/src/vutil-extension-temp/utils/index.ts b/packages/vtable/src/vutil-extension-temp/utils/index.ts
new file mode 100644
index 000000000..35641ed3a
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './object';
+export * from './polar';
+export * from './text';
diff --git a/packages/vtable/src/vutil-extension-temp/utils/object.ts b/packages/vtable/src/vutil-extension-temp/utils/object.ts
new file mode 100644
index 000000000..8798664d3
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/utils/object.ts
@@ -0,0 +1,51 @@
+import { get, isArray, isFunction, isNil, isObject } from '@visactor/vutils';
+
+/**
+ * 判断一个 spec 是否包含另一个 spec 片段
+ * @param spec 原始 spec
+ * @param searchSpec 要匹配的 spec 片段
+ */
+export const includeSpec = (spec: Partial, searchSpec: Partial): boolean => {
+ if (spec === searchSpec) {
+ return true;
+ }
+ if (isFunction(spec) || isFunction(searchSpec)) {
+ return false;
+ }
+ if (isArray(spec) && isArray(searchSpec)) {
+ return searchSpec.every(searchItem => spec.some(item => includeSpec(item, searchItem)));
+ }
+ if (isObject(spec) && isObject(searchSpec)) {
+ return Object.keys(searchSpec).every(key => includeSpec(spec[key], searchSpec[key]));
+ }
+ return false;
+};
+
+export const setProperty = (target: T, path: Array, value: any): T => {
+ if (isNil(path)) {
+ return target;
+ }
+ const key = path[0];
+ if (isNil(key)) {
+ return target;
+ }
+ if (path.length === 1) {
+ target[key] = value;
+ return target;
+ }
+ if (isNil(target[key])) {
+ if (typeof path[1] === 'number') {
+ target[key] = [];
+ } else {
+ target[key] = {};
+ }
+ }
+ return setProperty(target[key], path.slice(1), value);
+};
+
+export const getProperty = (target: any, path: Array, defaultValue?: T): T => {
+ if (isNil(path)) {
+ return undefined;
+ }
+ return get(target, path as string[], defaultValue) as T;
+};
diff --git a/packages/vtable/src/vutil-extension-temp/utils/polar.ts b/packages/vtable/src/vutil-extension-temp/utils/polar.ts
new file mode 100644
index 000000000..c64ea2cf4
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/utils/polar.ts
@@ -0,0 +1,47 @@
+import type { TextAlignType, TextBaselineType } from '@visactor/vrender-core';
+
+/**
+ * 角度标准化处理
+ * @param angle 弧度角
+ */
+export function normalizeAngle(angle: number): number {
+ while (angle < 0) {
+ angle += Math.PI * 2;
+ }
+ while (angle >= Math.PI * 2) {
+ angle -= Math.PI * 2;
+ }
+ return angle;
+}
+
+/**
+ * 计算对应角度下的角度轴标签定位属性
+ * @param angle 弧度角，需要注意是逆时针计算的
+ * @returns
+ */
+export function angleLabelOrientAttribute(angle: number) {
+ let align: TextAlignType = 'center';
+ let baseline: TextBaselineType = 'middle';
+
+ angle = normalizeAngle(angle);
+
+ // left: 5/3 - 1/3; right: 2/3 - 4/3; center: 5/3 - 1/3 & 2/3 - 4/3
+ if (angle >= Math.PI * (5 / 3) || angle <= Math.PI * (1 / 3)) {
+ align = 'left';
+ } else if (angle >= Math.PI * (2 / 3) && angle <= Math.PI * (4 / 3)) {
+ align = 'right';
+ } else {
+ align = 'center';
+ }
+
+ // bottom: 7/6 - 11/6; top: 1/6 - 5/6; middle: 11/6 - 1/6 & 5/6 - 7/6
+ if (angle >= Math.PI * (7 / 6) && angle <= Math.PI * (11 / 6)) {
+ baseline = 'bottom';
+ } else if (angle >= Math.PI * (1 / 6) && angle <= Math.PI * (5 / 6)) {
+ baseline = 'top';
+ } else {
+ baseline = 'middle';
+ }
+
+ return { align, baseline };
+}
diff --git a/packages/vtable/src/vutil-extension-temp/utils/text.ts b/packages/vtable/src/vutil-extension-temp/utils/text.ts
new file mode 100644
index 000000000..e39d0a183
--- /dev/null
+++ b/packages/vtable/src/vutil-extension-temp/utils/text.ts
@@ -0,0 +1,28 @@
+import type { ITextMeasureOption } from '@visactor/vutils';
+// eslint-disable-next-line no-duplicate-imports
+import { TextMeasure } from '@visactor/vutils';
+import type { ITextGraphicAttribute } from '@visactor/vrender-core';
+import { getTextBounds } from '@visactor/vrender-core';
+
+export const initTextMeasure = (
+ textSpec?: Partial,
+ option?: Partial,
+ useNaiveCanvas?: boolean,
+ defaultFontParams?: Partial
+): TextMeasure => {
+ return new TextMeasure(
+ {
+ defaultFontParams: {
+ fontFamily:
+ // eslint-disable-next-line max-len
+ 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
+ fontSize: 14,
+ ...defaultFontParams
+ },
+ getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
+ specialCharSet: '-/: .,@%\'"~' + TextMeasure.ALPHABET_CHAR_SET + TextMeasure.ALPHABET_CHAR_SET.toUpperCase(),
+ ...(option ?? {})
+ },
+ textSpec
+ );
+};
diff --git a/packages/vue-vtable/.eslintrc.js b/packages/vue-vtable/.eslintrc.js
new file mode 100644
index 000000000..51d0b5241
--- /dev/null
+++ b/packages/vue-vtable/.eslintrc.js
@@ -0,0 +1,272 @@
+/* eslint-disable no-undef */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+ extends: ['@internal/eslint-config/profile/lib', '@internal/eslint-config/profile/vue'],
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ parser: '@typescript-eslint/parser', // 如果您使用 TypeScript
+ project: './tscofig.eslint.json',
+ extraFileExtensions: ['.vue']
+ },
+ plugins: [
+ // ... 其他 plugins
+ 'vue'
+ ],
+ parser: 'vue-eslint-parser',
+ overrides: [
+ {
+ files: ['**/__tests__/**', '**/*.test.ts'],
+ // 测试文件允许以下规则
+ rules: {
+ '@typescript-eslint/no-empty-function': 'off',
+ 'no-console': 'off',
+ 'dot-notation': 'off'
+ }
+ }
+ ],
+ globals: {
+ __VERSION__: 'readonly'
+ },
+ rules: {
+ 'prettier/prettier': ['warn'],
+ 'linebreak-style': [0, 'error', 'windows'],
+ // 强制换行时操作符在行首
+ // 与prettier冲突
+ // "operator-linebreak": ["error", "before", { "overrides": { "=": "after" } }],
+ // 允许给能自动推断出类型的primitive类型变量额外添加类型声明
+ '@typescript-eslint/no-inferrable-types': 'off',
+ // 在类型导入时推荐import type写法
+ '@typescript-eslint/consistent-type-imports': 'warn',
+ // 禁止出现空接口定义
+ '@typescript-eslint/no-empty-interface': 'error',
+ // 禁止出现空函数
+ '@typescript-eslint/no-empty-function': 'error',
+ '@typescript-eslint/no-this-alias': 'off',
+ // 禁止使用namespace
+ '@typescript-eslint/no-namespace': 'error',
+ // 禁止使用for-in Array
+ '@typescript-eslint/no-for-in-array': 'error',
+ // 禁止在optional chain语句后加非空断言
+ '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
+ // 接口定义中使用函数属性而不是对象方法声明
+ '@typescript-eslint/method-signature-style': 'error',
+ // 默认省略除属性以外的public修饰符
+ '@typescript-eslint/explicit-member-accessibility': [
+ 'warn',
+ {
+ overrides: {
+ accessors: 'off',
+ constructors: 'no-public',
+ methods: 'no-public',
+ properties: 'no-public',
+ parameterProperties: 'explicit'
+ }
+ }
+ ],
+ 'no-console': [
+ 1, // 开发期间先关闭
+ {
+ // allow: ["warn", "error"]
+ allow: ['warn', 'error']
+ }
+ ],
+ // 如果一个变量不会被重新赋值，最好使用const进行声明
+ 'prefer-const': 2,
+ // 禁止在条件中使用常量表达式
+ 'no-constant-condition': 0,
+ 'no-debugger': 2,
+ // 禁止对象字面量中出现重复的 key
+ 'no-dupe-keys': 2,
+ // 禁止在正则表达式中使用空字符集
+ 'no-empty-character-class': 2,
+ // 禁止对 catch 子句的参数重新赋值
+ 'no-ex-assign': 2,
+ 'no-extra-boolean-cast': 0,
+ // 禁止对 function 声明重新赋值
+ 'no-func-assign': 2,
+ // 禁止在嵌套的块中出现变量声明或 function 声明
+ 'no-inner-declarations': 2,
+ // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
+ 'no-invalid-regexp': 2,
+ // 禁止对关系运算符的左操作数使用否定操作符
+ 'no-unsafe-negation': 2,
+ // 禁止把全局对象作为函数调用
+ 'no-obj-calls': 2,
+ // 禁用稀疏数组
+ 'no-sparse-arrays': 2,
+ // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
+ 'no-unreachable': 2,
+ // 要求使用 isNaN() 检查 NaN
+ 'use-isnan': 2,
+ // 强制 typeof 表达式与有效的字符串进行比较
+ 'valid-typeof': 2,
+ // 要求使用 === 和 !==，除了与 null 字面量进行比较时
+ eqeqeq: [
+ 'error',
+ 'always',
+ {
+ null: 'ignore'
+ }
+ ],
+ // 允许 if 语句中 return 语句之后有 else 块
+ 'no-else-return': 1,
+ // 禁用标签语句
+ 'no-labels': [
+ 2,
+ {
+ // 忽略循环语句中的标签
+ allowLoop: true
+ }
+ ],
+ // 禁用 eval()
+ 'no-eval': 2,
+ // 禁止扩展原生类型
+ 'no-extend-native': 2,
+ // 禁止不必要的 .bind() 调用
+ 'no-extra-bind': 0,
+ // 禁止使用类似 eval() 的方法
+ 'no-implied-eval': 2,
+ // 禁用 __iterator__ 属性
+ 'no-iterator': 2,
+ // 禁止不规则的空白
+ 'no-irregular-whitespace': 2,
+ // 禁用不必要的嵌套块
+ 'no-lone-blocks': 2,
+ // 禁止循环中存在函数
+ 'no-loop-func': 2,
+ // 禁止多行字符串
+ 'no-multi-str': 2,
+ // 禁止对原生对象或只读的全局对象进行赋值
+ 'no-global-assign': 2,
+ // 禁止对 String，Number 和 Boolean 使用 new 操作符
+ 'no-new-wrappers': 2,
+ // 禁用八进制字面量
+ 'no-octal': 2,
+ // 禁止在字符串中使用八进制转义序列
+ 'no-octal-escape': 2,
+ // 禁用 __proto__ 属性
+ 'no-proto': 2,
+ // 禁止自身比较
+ 'no-self-compare': 2,
+ // 禁止可以在有更简单的可替代的表达式时使用三元操作符
+ 'no-unneeded-ternary': 2,
+ // 禁用 with 语句
+ 'no-with': 2,
+ // 强制在 parseInt() 使用基数参数
+ radix: 2,
+ // 要求 IIFE 使用括号括起来
+ 'wrap-iife': [2, 'any'],
+ // 禁止删除变量
+ 'no-delete-var': 2,
+ // 禁止 function 定义中出现重名参数
+ 'no-dupe-args': 2,
+ // 禁止出现重复的 case 标签
+ 'no-duplicate-case': 2,
+ // 不允许标签与变量同名
+ 'no-label-var': 2,
+ // 禁止将标识符定义为受限的名字
+ 'no-shadow-restricted-names': 2,
+ // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
+ 'no-undef': 2,
+ // 禁止将变量初始化为 undefined
+ 'no-undef-init': 2,
+ // 允许在变量定义之前使用它们
+ 'no-use-before-define': 'off',
+ '@typescript-eslint/no-use-before-define': 0,
+ // 强制或禁止调用无参构造函数时有圆括号
+ 'new-parens': 2,
+ // 禁用 Array 构造函数
+ 'no-array-constructor': 2,
+ // 禁用 Object 的构造函数
+ 'no-new-object': 2,
+ // 禁止不必要的括号
+ 'no-extra-parens': [2, 'functions'],
+ // 禁止使用 空格 和 tab 混合缩进
+ 'no-mixed-spaces-and-tabs': 2,
+ // 强制函数中的变量在分开声明
+ 'one-var': [2, 'never'],
+ // 建议回调函数最大嵌套深度不超过5
+ 'max-nested-callbacks': [1, 5],
+ // 建议可嵌套的块的最大深度不超过6
+ 'max-depth': [1, 6],
+ // 强制一行的最大长度不超过120，不包括注释和url
+ 'max-len': [
+ 'error',
+ {
+ code: 120,
+ ignoreUrls: true,
+ ignoreComments: true
+ }
+ ],
+ // 建议函数定义中最多允许的参数数量不超过15个
+ 'max-params': [1, 15],
+ // 强制非一元操作符周围有空格
+ 'space-infix-ops': 2,
+ // 强制尽可能地使用点号
+ 'dot-notation': [
+ 2,
+ {
+ // 避免对是保留字的属性使用点号
+ allowKeywords: true,
+ allowPattern: '^catch$'
+ }
+ ],
+ // 强制箭头函数的箭头前后使用一致的空格
+ 'arrow-spacing': 2,
+ // 要求在构造函数中有 super() 的调用
+ 'constructor-super': 2,
+ // 禁止在可能与比较操作符相混淆的地方使用箭头函数
+ // 与prettier冲突
+ // "no-confusing-arrow": [
+ // 2,
+ // {
+ // // 该规则不那么严格，将括号作为有效防止混淆的语法。
+ // "allowParens": true
+ // }
+ // ],
+ // 禁止修改类声明的变量
+ 'no-class-assign': 2,
+ // 禁止修改 const 声明的变量
+ 'no-const-assign': 2,
+ // 允许在构造函数中，在调用 super() 之前使用 this 或 super
+ 'no-this-before-super': 0,
+ // 要求使用 let 或 const 而不是 var
+ 'no-var': 2,
+ // 重复模块导入
+ // "no-duplicate-imports": 1,
+ '@typescript-eslint/no-duplicate-imports': 1,
+ // 建议使用剩余参数而不是 arguments
+ 'prefer-rest-params': 1,
+ // 禁止 Unicode 字节顺序标记 (BOM)
+ 'unicode-bom': 2,
+ // 强制每一行中所允许的最大语句数量为2
+ 'max-statements-per-line': 2,
+ // 允许不必要的构造函数
+ 'no-useless-constructor': 0,
+ // 允许在函数标识符和其调用之间有空格
+ 'func-call-spacing': 'off',
+ '@typescript-eslint/func-call-spacing': 'error',
+ // 允许出现未使用过的变量
+ 'no-unused-vars': 'off',
+ '@typescript-eslint/no-unused-vars': [
+ 1,
+ {
+ // 仅仅检测本作用域中声明的变量是否使用，允许不使用全局环境中的变量。
+ vars: 'local',
+ // 不检查参数
+ args: 'none'
+ }
+ ],
+ // 禁用特定的全局变量
+ 'no-restricted-globals': [2, 'event', 'name', 'length', 'orientation', 'top', 'parent', 'location', 'closed'],
+ // 不允许省略大括号
+ curly: 'error',
+ 'promise/catch-or-return': 'warn',
+ // indent: [1, 2],
+ 'no-multi-spaces': 1,
+ 'no-multiple-empty-lines': [1, { max: 1 }],
+ 'no-trailing-spaces': 1
+ },
+ ignorePatterns: ['*.config.ts']
+};
diff --git a/packages/vue-vtable/README.md b/packages/vue-vtable/README.md
new file mode 100644
index 000000000..7ee1e2015
--- /dev/null
+++ b/packages/vue-vtable/README.md
@@ -0,0 +1,93 @@
+
+
+
+ React-VTable
+
+
+
+
+VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.React-VTable is a React wrapper of VTable.
+
+[](https://www.npmjs.com/package/@visactor/vue-vtable)
+[](https://www.npmjs.com/package/@visactor/vue-vtable)
+[](https://github.com/visactor/vtable/blob/main/LICENSE)
+
+
+
+# Usage
+
+## Installation
+
+[npm package](https://www.npmjs.com/package/@visactor/vue-vtable)
+
+```bash
+// npm
+npm install @visactor/vue-vtable
+
+// yarn
+yarn add @visactor/vue-vtable
+```
+
+## Quick Start
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ListTable } from "@visactor/vue-vtable";
+
+const option = {
+ header: [
+ {
+ field: "0",
+ caption: "name",
+ },
+ {
+ field: "1",
+ caption: "age",
+ },
+ {
+ field: "2",
+ caption: "gender",
+ },
+ {
+ field: "3",
+ caption: "hobby",
+ },
+ ],
+ records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+};
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+);
+```
+
+##
+
+[More demos and detailed tutorials](https://visactor.io/vtable)
+
+# Related Links
+
+- [Official website](https://visactor.io/vtable)
+
+# Ecosystem
+
+| Project | Description |
+| -------------------------------------------------------- | ----------------------------- |
+| [AI-generated Components](https://visactor.io/ai-vtable) | AI-generated table component. |
+
+# Contribution
+
+If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。
+
+Small streams converge to make great rivers and seas!
+
+
+
+# License
+
+[MIT License](./LICENSE)
diff --git a/packages/vue-vtable/bundler.config.js b/packages/vue-vtable/bundler.config.js
new file mode 100644
index 000000000..24d8ed4be
--- /dev/null
+++ b/packages/vue-vtable/bundler.config.js
@@ -0,0 +1,17 @@
+/**
+ * @type {Partial}
+ */
+module.exports = {
+ formats: ['cjs', 'es', 'umd'],
+ noEmitOnError: false,
+ copy: ['css'],
+ name: 'VueVTable',
+ umdOutputFilename: 'vue-vtable',
+ rollupOptions: {
+ treeshake: true
+ },
+ globals: {
+ '@visactor/vtable': 'VTable'
+ },
+ external: ['@visactor/vtable']
+};
diff --git a/packages/vue-vtable/demo/index.html b/packages/vue-vtable/demo/index.html
new file mode 100644
index 000000000..a5649bbf9
--- /dev/null
+++ b/packages/vue-vtable/demo/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Vite + Vue + TS
+
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue
new file mode 100644
index 000000000..dd2c5347b
--- /dev/null
+++ b/packages/vue-vtable/demo/src/App.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/components/content.vue b/packages/vue-vtable/demo/src/components/content.vue
new file mode 100644
index 000000000..ca47155c7
--- /dev/null
+++ b/packages/vue-vtable/demo/src/components/content.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+ {{ currentComponent }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/components/sidebar.vue b/packages/vue-vtable/demo/src/components/sidebar.vue
new file mode 100644
index 000000000..2b19142aa
--- /dev/null
+++ b/packages/vue-vtable/demo/src/components/sidebar.vue
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/index.css b/packages/vue-vtable/demo/src/index.css
new file mode 100644
index 000000000..4fb97b8f4
--- /dev/null
+++ b/packages/vue-vtable/demo/src/index.css
@@ -0,0 +1,75 @@
+html, body, #root {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
+
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/vue-vtable/demo/src/main.ts b/packages/vue-vtable/demo/src/main.ts
new file mode 100644
index 000000000..b43f8920b
--- /dev/null
+++ b/packages/vue-vtable/demo/src/main.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { ListTable, PivotTable, PivotChart } from '../../src/index';
+// import './index.css';
+
+const app = createApp(App);
+app.component('VueListTable', ListTable);
+app.component('VuePivotTable', PivotTable);
+app.component('VuePivotChart', PivotChart);
+app.mount('#app');
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-custom.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-custom.vue
new file mode 100644
index 000000000..430c82247
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-custom.vue
@@ -0,0 +1,206 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue
new file mode 100644
index 000000000..a846129a7
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-editor.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-editor.vue
new file mode 100644
index 000000000..da18a8cc8
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-editor.vue
@@ -0,0 +1,194 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue
new file mode 100644
index 000000000..ef670ffdb
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue
new file mode 100644
index 000000000..1a4026144
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue
new file mode 100644
index 000000000..18144410a
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/PivotChartPie.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/PivotChartPie.vue
new file mode 100644
index 000000000..b6835a23e
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/composition/PivotChartPie.vue
@@ -0,0 +1,179 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue
new file mode 100644
index 000000000..c8c5dda72
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue b/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue
new file mode 100644
index 000000000..4b6b9bca2
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-custom.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-custom.vue
new file mode 100644
index 000000000..538e64b80
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-custom.vue
@@ -0,0 +1,422 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-editor.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-editor.vue
new file mode 100644
index 000000000..77bea708e
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-editor.vue
@@ -0,0 +1,193 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue
new file mode 100644
index 000000000..9e2b5f0fc
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue
new file mode 100644
index 000000000..07bf3bb0f
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue
@@ -0,0 +1,244 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue
new file mode 100644
index 000000000..a1058785d
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue
@@ -0,0 +1,506 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue
new file mode 100644
index 000000000..b8d67e1b3
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue
@@ -0,0 +1,480 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue
new file mode 100644
index 000000000..23e365424
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue
new file mode 100644
index 000000000..31d6edb29
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue
new file mode 100644
index 000000000..8f537c32b
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue
new file mode 100644
index 000000000..ac779da6e
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-titleOnDimension.vue b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-titleOnDimension.vue
new file mode 100644
index 000000000..6e8cd24cc
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-titleOnDimension.vue
@@ -0,0 +1,151 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue
new file mode 100644
index 000000000..63fc1d8f3
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue
@@ -0,0 +1,247 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue
new file mode 100644
index 000000000..abb18dee5
--- /dev/null
+++ b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue
@@ -0,0 +1,386 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/tsconfig.json b/packages/vue-vtable/demo/tsconfig.json
new file mode 100644
index 000000000..505603ea7
--- /dev/null
+++ b/packages/vue-vtable/demo/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "preserve"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/vue-vtable/demo/tsconfig.node.json b/packages/vue-vtable/demo/tsconfig.node.json
new file mode 100644
index 000000000..b242ad07b
--- /dev/null
+++ b/packages/vue-vtable/demo/tsconfig.node.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": [
+ "vite.config.ts",
+ "vite.config.local.ts"
+ ]
+}
\ No newline at end of file
diff --git a/packages/vue-vtable/demo/vite.config.ts b/packages/vue-vtable/demo/vite.config.ts
new file mode 100644
index 000000000..2200e9668
--- /dev/null
+++ b/packages/vue-vtable/demo/vite.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+
+// let localConf: UserConfig = {};
+
+// try {
+// localConf = require('./vite.config.local').default;
+// } catch (e) {
+// console.warn('vite.config.local.ts not found', e);
+// }
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+ define: {
+ __DEV__: true,
+ __VERSION__: JSON.stringify(require('../../vtable/package.json').version)
+ },
+ optimizeDeps: {},
+ server: {
+ host: '0.0.0.0',
+ port: 3100
+ // port: localConf.server?.port || 3100
+ },
+ resolve: {
+ alias: {
+ '@visactor/vtable': path.resolve(__dirname, '../../vtable/src/index.ts'),
+ '@src': path.resolve(__dirname, '../../vtable/src/'),
+ '@vutils-extension': path.resolve(__dirname, '../../vtable/src/vutil-extension-temp')
+ // ...localConf.resolve?.alias
+ }
+ }
+});
diff --git a/packages/vue-vtable/package.json b/packages/vue-vtable/package.json
new file mode 100644
index 000000000..d71d0370f
--- /dev/null
+++ b/packages/vue-vtable/package.json
@@ -0,0 +1,98 @@
+{
+ "name": "@visactor/vue-vtable",
+ "version": "0.25.5",
+ "description": "The vue version of VTable",
+ "keywords": [
+ "vue",
+ "grid",
+ "table",
+ "pivottable",
+ "visualization",
+ "VTable",
+ "VisActor",
+ "spreadsheet",
+ "canvas",
+ "datagrid",
+ "datatable"
+ ],
+ "author": {
+ "name": "VisActor",
+ "url": "https://VisActor.io/"
+ },
+ "license": "MIT",
+ "sideEffects": false,
+ "main": "cjs/index.js",
+ "module": "es/index.js",
+ "types": "es/index.d.ts",
+ "files": [
+ "cjs",
+ "es",
+ "dist"
+ ],
+ "exports": {
+ ".": {
+ "require": "./cjs/index.js",
+ "import": "./es/index.js"
+ }
+ },
+ "scripts": {
+ "start": "vite ./demo",
+ "build": "bundle --clean",
+ "compile": "tsc --noEmit",
+ "eslint": "eslint --debug --fix src/"
+ },
+ "unpkg": "latest",
+ "unpkgFiles": [
+ "dist/vue-vtable.js"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "dependencies": {
+ "@visactor/vtable": "workspace:*",
+ "@visactor/vutils": "~0.18.1"
+ },
+ "devDependencies": {
+ "@visactor/vchart": "1.10.5",
+ "@internal/bundler": "workspace:*",
+ "@internal/eslint-config": "workspace:*",
+ "@internal/ts-config": "workspace:*",
+ "@rushstack/eslint-patch": "~1.1.4",
+ "vue": "^3.4.14",
+ "@vitejs/plugin-vue": "^5.0.3",
+ "eslint": "~8.18.0",
+ "vite": "3.2.6",
+ "typescript": "4.9.5",
+ "@babel/core": "7.20.12",
+ "@babel/preset-env": "7.20.2",
+ "@types/chai": "4.2.22",
+ "@types/jest": "^26.0.0",
+ "@types/mocha": "9.0.0",
+ "@types/node": "*",
+ "@types/offscreencanvas": "2019.6.4",
+ "chai": "4.3.4",
+ "jest": "^26.0.0",
+ "jest-electron": "^0.1.12",
+ "jest-transform-stub": "^2.0.0",
+ "magic-string": "^0.25.7",
+ "mocha": "9.1.3",
+ "postcss": "8.4.21",
+ "rimraf": "3.0.2",
+ "sass": "1.43.5",
+ "ts-jest": "^26.0.0",
+ "ts-loader": "9.2.6",
+ "ts-node": "10.9.0",
+ "tslib": "2.3.1",
+ "ttypescript": "1.5.13",
+ "typescript-transform-paths": "3.3.1",
+ "json-formatter-js": "^2.3.4",
+ "inversify": "6.0.1",
+ "vite-plugin-markdown": "^2.1.0",
+ "markdown-it": "^13.0.0",
+ "node-fetch": "2.6.7",
+ "form-data": "~4.0.0",
+ "axios": "^1.4.0",
+ "eslint-plugin-vue": "^9.26.0",
+ "vue-eslint-parser": "^9.4.2"
+ }
+}
\ No newline at end of file
diff --git a/packages/vue-vtable/setup-mock.js b/packages/vue-vtable/setup-mock.js
new file mode 100644
index 000000000..b0df380be
--- /dev/null
+++ b/packages/vue-vtable/setup-mock.js
@@ -0,0 +1,2 @@
+global.__DEV__ = true;
+global.__VERSION__ = true;
diff --git a/packages/vue-vtable/src/components/component/menu.tsx b/packages/vue-vtable/src/components/component/menu.tsx
new file mode 100644
index 000000000..a4cd99700
--- /dev/null
+++ b/packages/vue-vtable/src/components/component/menu.tsx
@@ -0,0 +1,13 @@
+import type { VNode } from 'vue';
+import type { TYPES } from '@visactor/vtable';
+
+export type MenuProps = {
+ renderMode?: 'canvas' | 'html';
+ defaultHeaderMenuItems?: TYPES.MenuListItem[];
+ contextMenuItems?: TYPES.MenuListItem[] | ((field: string, row: number, col: number) => TYPES.MenuListItem[]);
+ dropDownMenuHighlight?: TYPES.DropDownMenuHighlightInfo[];
+};
+
+export default function Menu(props: MenuProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/component/tooltip.tsx b/packages/vue-vtable/src/components/component/tooltip.tsx
new file mode 100644
index 000000000..ef0574843
--- /dev/null
+++ b/packages/vue-vtable/src/components/component/tooltip.tsx
@@ -0,0 +1,11 @@
+import type { VNode } from 'vue';
+
+export type TooltipProps = {
+ renderMode?: 'html';
+ isShowOverflowTextTooltip?: boolean;
+ confine?: boolean;
+};
+
+export default function Tooltip(props: TooltipProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/checkBox.tsx b/packages/vue-vtable/src/components/custom/checkBox.tsx
new file mode 100644
index 000000000..f2c818df3
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/checkBox.tsx
@@ -0,0 +1,21 @@
+import type { VNode } from 'vue';
+
+////需要等待更新，修改interface中的any为具体的类型
+export interface CheckboxProps {
+ children?: string;
+ textStyle?: any;
+ boxStyle?: any;
+ iconStyle?: any;
+ checked?: boolean;
+ indeterminate?: boolean;
+ interactive?: boolean;
+ disabled?: boolean;
+ disableCursor?: any;
+ spaceBetweenTextAndIcon?: number;
+ visible?: boolean;
+ onChange?: (checked: boolean) => void;
+}
+
+export default function CheckBox(props: CheckboxProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/custom-layout.tsx b/packages/vue-vtable/src/components/custom/custom-layout.tsx
new file mode 100644
index 000000000..d05299bdc
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/custom-layout.tsx
@@ -0,0 +1,27 @@
+import type { VNode } from 'vue';
+
+export interface CustomComponentProps {
+ style?: any;
+ // className?: string | string[];
+ className?: string;
+
+ // for table
+ displayMode: 'position' | 'cell';
+ x?: number;
+ y?: number;
+ width?: number | string;
+ height?: number | string;
+ // width?: number;
+ // height?: number;
+ row?: number;
+ col?: number;
+ anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+ dx?: number | string;
+ dy?: number | string;
+ // dx?: number;
+ // dy?: number;
+}
+
+export default function CustomLayout(props: CustomComponentProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/group.tsx b/packages/vue-vtable/src/components/custom/group.tsx
new file mode 100644
index 000000000..5fdac12b2
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/group.tsx
@@ -0,0 +1,5 @@
+import type { VNode } from 'vue';
+
+export default function Group(): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/image.tsx b/packages/vue-vtable/src/components/custom/image.tsx
new file mode 100644
index 000000000..992b2bc4a
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/image.tsx
@@ -0,0 +1,5 @@
+import type { VNode } from 'vue';
+
+export default function Image(): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/radio.tsx b/packages/vue-vtable/src/components/custom/radio.tsx
new file mode 100644
index 000000000..eb0e8d71f
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/radio.tsx
@@ -0,0 +1,19 @@
+import type { VNode } from 'vue';
+
+//需要等待更新，修改interface中的any为具体的类型
+export interface RadioProps {
+ children?: string;
+ textStyle?: any;
+ circleStyle?: any;
+ checked?: boolean;
+ interactive?: boolean;
+ disabled?: boolean;
+ disableCursor?: any;
+ spaceBetweenTextAndIcon?: number;
+ visible?: boolean;
+ onChange?: (checked: boolean) => void;
+}
+
+export default function Radio(props: RadioProps): any {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/tag.tsx b/packages/vue-vtable/src/components/custom/tag.tsx
new file mode 100644
index 000000000..0a232eb56
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/tag.tsx
@@ -0,0 +1,17 @@
+import type { VNode } from 'vue';
+
+//需要等待更新，修改interface中的any为具体的类型
+export interface TagProps {
+ attribute?: any;
+ children?: string;
+ textStyle?: any;
+ panelStyle?: any;
+ padding?: any;
+ minWidth?: number;
+ maxWidth?: number;
+ visible?: boolean;
+}
+
+export default function Tag(props: TagProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/custom/text.tsx b/packages/vue-vtable/src/components/custom/text.tsx
new file mode 100644
index 000000000..71a60e3e2
--- /dev/null
+++ b/packages/vue-vtable/src/components/custom/text.tsx
@@ -0,0 +1,5 @@
+import type { VNode } from 'vue';
+
+export default function Text(): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/index.ts b/packages/vue-vtable/src/components/index.ts
new file mode 100644
index 000000000..4a25a9a8a
--- /dev/null
+++ b/packages/vue-vtable/src/components/index.ts
@@ -0,0 +1,19 @@
+export { default as ListColumn } from './list/list-column';
+
+export { default as PivotColumnDimension } from './pivot/pivot-column-dimension';
+export { default as PivotRowDimension } from './pivot/pivot-row-dimension';
+export { default as PivotColumnHeaderTitle } from './pivot/pivot-column-header-title';
+export { default as PivotRowHeaderTitle } from './pivot/pivot-row-header-title';
+export { default as PivotIndicator } from './pivot/pivot-indicator';
+export { default as PivotCorner } from './pivot/pivot-corner';
+
+export { default as Menu } from './component/menu';
+export { default as Tooltip } from './component/tooltip';
+
+// export { default as CustomLayout } from './custom/custom-layout';
+export { default as Group } from './custom/group';
+export { default as Image } from './custom/image';
+export { default as Text } from './custom/text';
+export { default as Tag } from './custom/tag';
+export { default as Radio } from './custom/radio';
+export { default as CheckBox } from './custom/checkBox';
diff --git a/packages/vue-vtable/src/components/list/list-column.tsx b/packages/vue-vtable/src/components/list/list-column.tsx
new file mode 100644
index 000000000..e1e81665c
--- /dev/null
+++ b/packages/vue-vtable/src/components/list/list-column.tsx
@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { ColumnDefine } from '@visactor/vtable';
+
+export default function ListColumn(props: ColumnDefine): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-column-dimension.tsx b/packages/vue-vtable/src/components/pivot/pivot-column-dimension.tsx
new file mode 100644
index 000000000..77007145e
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-column-dimension.tsx
@@ -0,0 +1,12 @@
+import type { VNode } from 'vue';
+import type { IDimension } from '@visactor/vtable';
+
+interface ObjectHandler {
+ objectHandler?: string | Array;
+}
+
+export type PivotColumnDimensionProps = IDimension & ObjectHandler;
+
+export default function PivotColumnDimension(props: PivotColumnDimensionProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-column-header-title.tsx b/packages/vue-vtable/src/components/pivot/pivot-column-header-title.tsx
new file mode 100644
index 000000000..7c3c0934c
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-column-header-title.tsx
@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { ITitleDefine } from '@visactor/vtable';
+
+export default function PivotColumnHeaderTitle(props: ITitleDefine): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-corner.tsx b/packages/vue-vtable/src/components/pivot/pivot-corner.tsx
new file mode 100644
index 000000000..16ef6a1c9
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-corner.tsx
@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { ICornerDefine } from '@visactor/vtable';
+
+export default function PivotCorner(props: ICornerDefine): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-indicator.tsx b/packages/vue-vtable/src/components/pivot/pivot-indicator.tsx
new file mode 100644
index 000000000..cb3994a31
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-indicator.tsx
@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { IIndicator } from '@visactor/vtable';
+
+export default function PivotIndicator(props: IIndicator): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-row-dimension.tsx b/packages/vue-vtable/src/components/pivot/pivot-row-dimension.tsx
new file mode 100644
index 000000000..4f3f093db
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-row-dimension.tsx
@@ -0,0 +1,12 @@
+import type { VNode } from 'vue';
+import type { IDimension } from '@visactor/vtable';
+
+interface ObjectHandler {
+ objectHandler?: string | Array;
+}
+
+export type PivotColumnDimensionProps = IDimension & ObjectHandler;
+
+export default function PivotRowDimension(props: PivotColumnDimensionProps): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/components/pivot/pivot-row-header-title.tsx b/packages/vue-vtable/src/components/pivot/pivot-row-header-title.tsx
new file mode 100644
index 000000000..3b1b70f53
--- /dev/null
+++ b/packages/vue-vtable/src/components/pivot/pivot-row-header-title.tsx
@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { ITitleDefine } from '@visactor/vtable';
+
+export default function PivotRowHeaderTitle(props: ITitleDefine): VNode {
+ return null;
+}
diff --git a/packages/vue-vtable/src/constants.ts b/packages/vue-vtable/src/constants.ts
new file mode 100644
index 000000000..9efd91803
--- /dev/null
+++ b/packages/vue-vtable/src/constants.ts
@@ -0,0 +1 @@
+export const REACT_PRIVATE_PROPS = ['children', 'hooks', 'ref'];
diff --git a/packages/vue-vtable/src/eventsUtils.ts b/packages/vue-vtable/src/eventsUtils.ts
new file mode 100644
index 000000000..e373b2d0b
--- /dev/null
+++ b/packages/vue-vtable/src/eventsUtils.ts
@@ -0,0 +1,181 @@
+import { ListTable, PivotTable, PivotChart } from '@visactor/vtable';
+import type { IVTable } from './tables/base-table';
+import type { TYPES } from '@visactor/vtable';
+
+export type EventCallback = (params: Params) => void;
+
+const EVENT_TYPE = {
+ ...ListTable.EVENT_TYPE,
+ ...PivotTable.EVENT_TYPE,
+ ...PivotChart.EVENT_TYPE
+};
+
+export interface EventsProps {
+ onClickCell?: EventCallback;
+ onDblClickCell?: EventCallback;
+ onMouseDownCell?: EventCallback;
+ onMouseUpCell?: EventCallback;
+ onSelectedCell?: EventCallback;
+ onKeyDown?: EventCallback;
+ onMouseEnterTable?: EventCallback;
+ onMouseLeaveTable?: EventCallback;
+ onMouseDownTable?: EventCallback;
+ onMouseMoveCell?: EventCallback;
+ onMouseEnterCell?: EventCallback;
+ onMouseLeaveCell?: EventCallback;
+ onContextMenuCell?: EventCallback;
+ onResizeColumn?: EventCallback;
+ onResizeColumnEnd?: EventCallback;
+ onChangeHeaderPosition?: EventCallback;
+ onSortClick?: EventCallback;
+ onFreezeClick?: EventCallback;
+ onScroll?: EventCallback;
+ onDropdownMenuClick?: EventCallback;
+ onMouseOverChartSymbol?: EventCallback;
+ onDragSelectEnd?: EventCallback;
+
+ onDropdownIconClick?: EventCallback;
+ onDropdownMenuClear?: EventCallback;
+
+ onTreeHierarchyStateChange?: EventCallback;
+
+ onShowMenu?: EventCallback;
+ onHideMenu?: EventCallback;
+
+ onIconClick?: EventCallback;
+
+ onLegendItemClick?: EventCallback;
+ onLegendItemHover?: EventCallback;
+ onLegendItemUnHover?: EventCallback;
+ onLegendChange?: EventCallback;
+
+ onMouseEnterAxis?: EventCallback;
+ onMouseLeaveAxis?: EventCallback;
+
+ onCheckboxStateChange?: EventCallback;
+ onRadioStateChange?: EventCallback;
+ onAfterRender?: EventCallback;
+ onInitialized?: EventCallback;
+
+ // pivot table only
+ onPivotSortClick?: EventCallback;
+ onDrillMenuClick?: EventCallback;
+
+ // pivot chart only
+ onVChartEventType?: EventCallback;
+
+ onChangCellValue?: EventCallback;
+
+ onMousedownFillHandle?: EventCallback;
+ onDragFillHandleEnd?: EventCallback;
+ onDblclickFillHandle?: EventCallback;
+
+ onScrollVerticalEnd?: EventCallback;
+ onScrollHorizontalEnd?: EventCallback;
+}
+
+export const TABLE_EVENTS = {
+ onClickCell: EVENT_TYPE.CLICK_CELL,
+ onDblClickCell: EVENT_TYPE.DBLCLICK_CELL,
+ onMouseDownCell: EVENT_TYPE.MOUSEDOWN_CELL,
+ onMouseUpCell: EVENT_TYPE.MOUSEUP_CELL,
+ onSelectedCell: EVENT_TYPE.SELECTED_CELL,
+ onKeyDown: EVENT_TYPE.KEYDOWN,
+ onMouseEnterTable: EVENT_TYPE.MOUSEENTER_TABLE,
+ onMouseLeaveTable: EVENT_TYPE.MOUSELEAVE_TABLE,
+ onMouseDownTable: EVENT_TYPE.MOUSEDOWN_TABLE,
+ onMouseMoveCell: EVENT_TYPE.MOUSEMOVE_CELL,
+ onMouseEnterCell: EVENT_TYPE.MOUSEENTER_CELL,
+ onMouseLeaveCell: EVENT_TYPE.MOUSELEAVE_CELL,
+ onContextMenuCell: EVENT_TYPE.CONTEXTMENU_CELL,
+ onResizeColumn: EVENT_TYPE.RESIZE_COLUMN,
+ onResizeColumnEnd: EVENT_TYPE.RESIZE_COLUMN_END,
+ onChangeHeaderPosition: EVENT_TYPE.CHANGE_HEADER_POSITION,
+ onSortClick: EVENT_TYPE.SORT_CLICK,
+ onFreezeClick: EVENT_TYPE.FREEZE_CLICK,
+ onScroll: EVENT_TYPE.SCROLL,
+ onDropdownMenuClick: EVENT_TYPE.DROPDOWN_MENU_CLICK,
+ onMouseOverChartSymbol: EVENT_TYPE.MOUSEOVER_CHART_SYMBOL,
+ onDragSelectEnd: EVENT_TYPE.DRAG_SELECT_END,
+
+ onDropdownIconClick: EVENT_TYPE.DROPDOWN_ICON_CLICK,
+ onDropdownMenuClear: EVENT_TYPE.DROPDOWN_MENU_CLEAR,
+
+ onTreeHierarchyStateChange: EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE,
+
+ onShowMenu: EVENT_TYPE.SHOW_MENU,
+ onHideMenu: EVENT_TYPE.HIDE_MENU,
+
+ onIconClick: EVENT_TYPE.ICON_CLICK,
+
+ onLegendItemClick: EVENT_TYPE.LEGEND_ITEM_CLICK,
+ onLegendItemHover: EVENT_TYPE.LEGEND_ITEM_HOVER,
+ onLegendItemUnHover: EVENT_TYPE.LEGEND_ITEM_UNHOVER,
+ onLegendChange: EVENT_TYPE.LEGEND_CHANGE,
+
+ onMouseEnterAxis: EVENT_TYPE.MOUSEENTER_AXIS,
+ onMouseLeaveAxis: EVENT_TYPE.MOUSELEAVE_AXIS,
+
+ onCheckboxStateChange: EVENT_TYPE.CHECKBOX_STATE_CHANGE,
+ onRadioStateChange: EVENT_TYPE.RADIO_STATE_CHANGE,
+ onAfterRender: EVENT_TYPE.AFTER_RENDER,
+ onInitialized: EVENT_TYPE.INITIALIZED,
+
+ // pivot table only
+ onPivotSortClick: EVENT_TYPE.PIVOT_SORT_CLICK,
+ onDrillMenuClick: EVENT_TYPE.DRILLMENU_CLICK,
+
+ // pivot chart only
+ onVChartEventType: EVENT_TYPE.VCHART_EVENT_TYPE,
+
+ onChangCellValue: EVENT_TYPE.CHANGE_CELL_VALUE,
+ onMousedownFillHandle: EVENT_TYPE.MOUSEDOWN_FILL_HANDLE,
+ onDragFillHandleEnd: EVENT_TYPE.DRAG_FILL_HANDLE_END,
+ onDblclickFillHandle: EVENT_TYPE.DBLCLICK_FILL_HANDLE,
+ onScrollVerticalEnd: EVENT_TYPE.SCROLL_VERTICAL_END,
+ onScrollHorizontalEnd: EVENT_TYPE.SCROLL_HORIZONTAL_END
+};
+
+export const TABLE_EVENTS_KEYS = Object.keys(TABLE_EVENTS);
+
+// export const findEventProps = (
+// props: T,
+// supportedEvents: Record = TABLE_EVENTS
+// ): EventsProps => {
+// const result: EventsProps = {};
+
+// Object.keys(props).forEach(key => {
+// if (supportedEvents[key] && props[key]) {
+// result[key] = props[key];
+// }
+// });
+
+// return result;
+// };
+
+// export const bindEventsToTable = (
+// table: IVTable,
+// newProps?: T | null,
+// prevProps?: T | null,
+// supportedEvents: Record = TABLE_EVENTS
+// ) => {
+// if (!table) return false;
+// const prevEventProps = prevProps ? findEventProps(prevProps, supportedEvents) : {};
+// const newEventProps = newProps ? findEventProps(newProps, supportedEvents) : {};
+
+// Object.keys(supportedEvents).forEach(eventKey => {
+// const prevHandler = prevEventProps[eventKey];
+// const newHandler = newEventProps[eventKey];
+
+// if (prevHandler !== newHandler) {
+// if (prevHandler) {
+// table.off(supportedEvents[eventKey], prevHandler);
+// }
+// if (newHandler) {
+// table.on(supportedEvents[eventKey] as keyof TYPES.TableEventHandlersEventArgumentMap, newHandler);
+// }
+// }
+// });
+
+// return true;
+// };
diff --git a/packages/vue-vtable/src/global.d.ts b/packages/vue-vtable/src/global.d.ts
new file mode 100644
index 000000000..415c2c827
--- /dev/null
+++ b/packages/vue-vtable/src/global.d.ts
@@ -0,0 +1 @@
+declare const __VERSION__: string;
diff --git a/packages/vue-vtable/src/index.ts b/packages/vue-vtable/src/index.ts
new file mode 100644
index 000000000..9f2eccb9f
--- /dev/null
+++ b/packages/vue-vtable/src/index.ts
@@ -0,0 +1,7 @@
+import * as VTable from '@visactor/vtable';
+
+export * from './tables';
+export * from './components';
+export { VTable };
+
+export const version = __VERSION__;
diff --git a/packages/vue-vtable/src/tables/base-table.ts b/packages/vue-vtable/src/tables/base-table.ts
new file mode 100644
index 000000000..69fbaf07a
--- /dev/null
+++ b/packages/vue-vtable/src/tables/base-table.ts
@@ -0,0 +1,28 @@
+import type * as VTable from '@visactor/vtable';
+import type { EventsProps } from '../eventsUtils';
+
+export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;
+export type IOption =
+ | VTable.ListTableConstructorOptions
+ | VTable.PivotTableConstructorOptions
+ | VTable.PivotChartConstructorOptions;
+
+export interface BaseTableProps extends EventsProps {
+ type?: string;
+ /** 上层container */
+ container?: HTMLDivElement;
+ /** option */
+ option?: any;
+ /** 数据 */
+ records?: Record[];
+ /** 画布宽度 */
+ width?: number;
+ /** 画布高度 */
+ height?: number;
+ skipFunctionDiff?: boolean;
+
+ /** 表格渲染完成事件 */
+ onReady?: (instance: IVTable, isInitial: boolean) => void;
+ /** throw error when chart run into an error */
+ onError?: (err: Error) => void;
+}
diff --git a/packages/vue-vtable/src/tables/base-table.vue b/packages/vue-vtable/src/tables/base-table.vue
new file mode 100644
index 000000000..b33e71237
--- /dev/null
+++ b/packages/vue-vtable/src/tables/base-table.vue
@@ -0,0 +1,165 @@
+
+
+
+
+
diff --git a/packages/vue-vtable/src/tables/chartModule.ts b/packages/vue-vtable/src/tables/chartModule.ts
new file mode 100644
index 000000000..1c825e091
--- /dev/null
+++ b/packages/vue-vtable/src/tables/chartModule.ts
@@ -0,0 +1,5 @@
+import * as VTable from '@visactor/vtable';
+
+export const registerChartModule = (name: string, chart: any) => {
+ VTable.register.chartModule(name, chart);
+};
diff --git a/packages/vue-vtable/src/tables/index.ts b/packages/vue-vtable/src/tables/index.ts
new file mode 100644
index 000000000..300fbd090
--- /dev/null
+++ b/packages/vue-vtable/src/tables/index.ts
@@ -0,0 +1,4 @@
+export { default as ListTable } from './list-table.vue';
+export { default as PivotTable } from './pivot-table.vue';
+export { default as PivotChart } from './pivot-chart.vue';
+export { registerChartModule } from './chartModule';
diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue
new file mode 100644
index 000000000..266a10500
--- /dev/null
+++ b/packages/vue-vtable/src/tables/list-table.vue
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
diff --git a/packages/vue-vtable/src/tables/pivot-chart.vue b/packages/vue-vtable/src/tables/pivot-chart.vue
new file mode 100644
index 000000000..0ea0b6652
--- /dev/null
+++ b/packages/vue-vtable/src/tables/pivot-chart.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/src/tables/pivot-table.vue b/packages/vue-vtable/src/tables/pivot-table.vue
new file mode 100644
index 000000000..91eedb7d4
--- /dev/null
+++ b/packages/vue-vtable/src/tables/pivot-table.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vtable/src/tables/utils.ts b/packages/vue-vtable/src/tables/utils.ts
new file mode 100644
index 000000000..e95f87cbc
--- /dev/null
+++ b/packages/vue-vtable/src/tables/utils.ts
@@ -0,0 +1,71 @@
+import * as VTable from '@visactor/vtable';
+// 展平嵌套的虚拟节点
+export function flattenVNodes(vnodes: any[]): any[] {
+ return vnodes.flatMap(vnode => (Array.isArray(vnode.children) ? flattenVNodes(vnode.children) : vnode));
+}
+export function createCustomLayout(children: any): any {
+ // 组件映射
+ const componentMap: Record = {
+ Group: VTable.CustomLayout.Group,
+ Image: VTable.CustomLayout.Image,
+ Text: VTable.CustomLayout.Text,
+ Tag: VTable.CustomLayout.Tag,
+ Radio: VTable.CustomLayout.Radio,
+ CheckBox: VTable.CustomLayout.CheckBox
+ };
+
+ // 创建组件的函数
+ function createComponent(child: any): any {
+ if (!child) {
+ return null;
+ }
+
+ const { type, props, children: childChildren } = child;
+ const componentName = type?.name || type;
+ const ComponentClass = componentMap[componentName];
+
+ if (!ComponentClass) {
+ return null;
+ }
+
+ const component = new ComponentClass({ ...props });
+
+ // 特殊组件的事件绑定
+ bindComponentEvents(component, componentName, props);
+
+ // 递归创建子组件
+ const subChildren = resolveChildren(childChildren);
+ subChildren.forEach((subChild: any) => {
+ const subComponent = createComponent(subChild);
+ if (subComponent) {
+ component.add(subComponent);
+ } else if (subChild.type === Symbol.for('v-fgt')) {
+ subChild.children.forEach((nestedChild: any) => {
+ const nestedComponent = createComponent(nestedChild);
+ if (nestedComponent) {
+ component.add(nestedComponent);
+ }
+ });
+ }
+ });
+
+ return component;
+ }
+
+ // 处理子节点
+ function resolveChildren(childChildren: any): any[] {
+ return childChildren?.default?.() || childChildren || [];
+ }
+
+ // 绑定组件事件
+ function bindComponentEvents(component: any, componentName: string, props: any): void {
+ if (componentName === 'Radio' && props?.onRadio_checked) {
+ component.addEventListener('radio_checked', props.onRadio_checked);
+ }
+ if (componentName === 'CheckBox' && props?.onCheckbox_state_change) {
+ component.addEventListener('checkbox_state_change', props.onCheckbox_state_change);
+ }
+ }
+
+ return { rootComponent: createComponent(children) };
+}
diff --git a/packages/vue-vtable/src/vue-shims.d.ts b/packages/vue-vtable/src/vue-shims.d.ts
new file mode 100644
index 000000000..506bf2e5c
--- /dev/null
+++ b/packages/vue-vtable/src/vue-shims.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+ import { DefineComponent } from 'vue';
+ const component: DefineComponent<{}, {}, any>;
+ export default component;
+}
diff --git a/packages/vue-vtable/tscofig.eslint.json b/packages/vue-vtable/tscofig.eslint.json
new file mode 100644
index 000000000..a8b2b56da
--- /dev/null
+++ b/packages/vue-vtable/tscofig.eslint.json
@@ -0,0 +1,20 @@
+{
+ "extends": "@internal/ts-config/tsconfig.base.json",
+ "compilerOptions": {
+ "types": [
+ "jest",
+ "offscreencanvas",
+ "node"
+ ],
+ "lib": [
+ "DOM",
+ "ESNext"
+ ],
+ "baseUrl": "./",
+ "rootDir": "./"
+ },
+ "include": [
+ "src",
+ "demo"
+ ]
+}
\ No newline at end of file
diff --git a/packages/vue-vtable/tsconfig.json b/packages/vue-vtable/tsconfig.json
new file mode 100644
index 000000000..acb1be920
--- /dev/null
+++ b/packages/vue-vtable/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "extends": "@internal/ts-config/tsconfig.base.json",
+ "compilerOptions": {
+ "jsx": "react",
+ "types": ["jest", "offscreencanvas", "node"],
+ "lib": ["DOM", "ESNext"],
+ "baseUrl": "./",
+ "rootDir": "./src",
+ "paths": {}
+ },
+ "ts-node": {
+ "transpileOnly": true,
+ "compilerOptions": {
+ "module": "commonjs"
+ }
+ },
+ "references": [
+ {
+ "path": "../vtable"
+ }
+ ],
+ "include": ["src"]
+}
diff --git a/rush.json b/rush.json
index 49ba6a59f..c2c25c6cc 100644
--- a/rush.json
+++ b/rush.json
@@ -83,6 +83,15 @@
"shouldPublish": true,
"versionPolicyName": "vtableMain"
},
+ {
+ "packageName": "@visactor/vue-vtable",
+ "projectFolder": "packages/vue-vtable",
+ "tags": [
+ "package"
+ ],
+ "shouldPublish": true,
+ "versionPolicyName": "vtableMain"
+ },
{
"packageName": "@visactor/openinula-vtable",
"projectFolder": "packages/openinula-vtable",
diff --git a/share/eslint-config/package.json b/share/eslint-config/package.json
index 8a17883c3..dbf93fdd0 100644
--- a/share/eslint-config/package.json
+++ b/share/eslint-config/package.json
@@ -11,7 +11,8 @@
"eslint-plugin-react-hooks": "4.6.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
- "prettier": "^2.8.8"
+ "prettier": "^2.8.8",
+ "eslint-plugin-vue": "^9.26.0"
},
"devDependencies": {
"eslint": "~8.18.0",
@@ -21,4 +22,4 @@
"eslint": "~8.18.0",
"typescript": ">=4"
}
-}
+}
\ No newline at end of file
diff --git a/share/eslint-config/profile/common.js b/share/eslint-config/profile/common.js
index ce406497c..0475e345e 100644
--- a/share/eslint-config/profile/common.js
+++ b/share/eslint-config/profile/common.js
@@ -11,7 +11,10 @@ var reactExtends = [
'plugin:react/jsx-runtime',
"plugin:react-hooks/recommended",
];
-
+var vueExtends = [
+ "plugin:vue/vue3-recommended",
+ // 其他需要的插件和配置
+];
/**
*
* @param {'react' | 'lib'} type
@@ -21,7 +24,7 @@ module.exports = function buildConfig(type) {
var isJsx = false;
var settings = {};
var reactRules = {};
-
+ var vueRules={};
var _extends = baseExtends;
if (type === "react") {
@@ -43,6 +46,23 @@ module.exports = function buildConfig(type) {
"react-hooks/rules-of-hooks": "warn",
"react/react-in-jsx-scope": "off"
};
+ } else if (type === "vue") { // 处理Vue的情况
+ baseFiles.push("*.vue");
+
+ _extends = baseExtends.concat(vueExtends);
+
+ isJsx = true;
+
+ settings.vue = { // Vue的设置
+ version: "detect",
+ };
+
+ vueRules = {
+ // 添加Vue相关的规则
+ "vue/require-v-for-key": "warn",
+ "vue/no-unused-components": "warn",
+ // 其他Vue规则...
+ };
}
return {
@@ -91,6 +111,7 @@ module.exports = function buildConfig(type) {
"promise/always-return": "off",
"promise/no-callback-in-promise": "off",
...reactRules,
+ ...vueRules,
},
},
],
diff --git a/share/eslint-config/profile/vue.js b/share/eslint-config/profile/vue.js
new file mode 100644
index 000000000..0b148609f
--- /dev/null
+++ b/share/eslint-config/profile/vue.js
@@ -0,0 +1 @@
+module.exports = require('./common')('vue')
\ No newline at end of file
diff --git a/tools/bundler/package.json b/tools/bundler/package.json
index c083dd97c..e20790a11 100644
--- a/tools/bundler/package.json
+++ b/tools/bundler/package.json
@@ -39,6 +39,8 @@
"@rollup/plugin-url": "8.0.1",
"@rollup/plugin-json": "4.1.0",
"@rollup/plugin-strip": "3.0.2",
+ "rollup-plugin-typescript2": "0.36.0",
+ "@vitejs/plugin-vue": "^5.0.3",
"@trufflesuite/spinnies": "0.1.1",
"autoprefixer": "10.4.13",
"babel-plugin-import": "1.13.6",
diff --git a/tools/bundler/src/logic/rollup.config.ts b/tools/bundler/src/logic/rollup.config.ts
index ddd295fd8..9d3b82abc 100644
--- a/tools/bundler/src/logic/rollup.config.ts
+++ b/tools/bundler/src/logic/rollup.config.ts
@@ -6,13 +6,15 @@ import type { BabelPlugins } from './babel.config';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
+import typescript from 'rollup-plugin-typescript2';
+// import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';
import url from '@rollup/plugin-url';
import Alias from '@rollup/plugin-alias';
import postcss from 'rollup-plugin-postcss';
import strip from '@rollup/plugin-strip';
+import vue from '@vitejs/plugin-vue';
import * as path from 'path';
import { Config } from './config';
@@ -43,14 +45,10 @@ export function getRollupOptions(
plugins: [
resolve(),
commonjs(),
+ vue(),
+ typescript(),
babel({ ...babelPlugins, babelHelpers: 'bundled' }),
replace({ ...config.envs, preventAssignment: true }),
- typescript({
- tsconfig: path.resolve(projectRoot, config.tsconfig),
- compilerOptions: {
- declaration: false
- }
- }),
postcss({
extensions: ['.css']
}),
| 
- 
- 
-
-
- 
- 
- 
- 
-
-
- 
+
+