From c18bb760546dad407f82c759070ae157de686940 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 8 Jan 2024 18:19:39 +0800 Subject: [PATCH 01/65] feat: add NumberRangeMap --- .../vtable/__tests__/listTable-1W.test.ts | 2 +- packages/vtable/examples/list/list-100w.ts | 1 + packages/vtable/src/core/BaseTable.ts | 71 +++++----- packages/vtable/src/layout/row-height-map.ts | 124 ++++++++++++++++++ .../group-creater/progress/proxy.ts | 9 +- .../progress/update-position/dynamic-set-y.ts | 9 +- .../update-position/update-auto-row.ts | 15 ++- 7 files changed, 191 insertions(+), 40 deletions(-) create mode 100644 packages/vtable/src/layout/row-height-map.ts diff --git a/packages/vtable/__tests__/listTable-1W.test.ts b/packages/vtable/__tests__/listTable-1W.test.ts index aa5219851..5a6504ffc 100644 --- a/packages/vtable/__tests__/listTable-1W.test.ts +++ b/packages/vtable/__tests__/listTable-1W.test.ts @@ -235,6 +235,6 @@ describe('listTable-1W init test', () => { test('listTable-1W update heightMode', () => { listTable.heightMode = 'autoHeight'; listTable.renderWithRecreateCells(); - expect(listTable.getAllRowsHeight()).toBe(340072); + expect(listTable.getAllRowsHeight()).toBe(340076); // 340072 }); }); diff --git a/packages/vtable/examples/list/list-100w.ts b/packages/vtable/examples/list/list-100w.ts index ed850d3f1..7102a0dfb 100644 --- a/packages/vtable/examples/list/list-100w.ts +++ b/packages/vtable/examples/list/list-100w.ts @@ -180,4 +180,5 @@ export function createTable() { console.log('initialized'); }); window.tableInstance = tableInstance; + bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] }); } diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index f241b1647..07baa4e38 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -91,6 +91,7 @@ import { Title } from '../components/title/title'; import type { Chart } from '../scenegraph/graphic/chart'; import { setBatchRenderChartCount } from '../scenegraph/graphic/contributions/chart-render-helper'; import { isLeftOrRightAxis, isTopOrBottomAxis } from '../layout/chart-helper/get-axis-config'; +import { NumberRangeMap } from '../layout/row-height-map'; const { toBoxArray } = utilStyle; const { isTouchEvent } = event; const rangeReg = /^\$(\d+)\$(\d+)$/; @@ -153,6 +154,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { container: HTMLElement; isReleased: boolean = false; _chartEventMap: Record = {}; + + _newRowHeightsMap: NumberRangeMap; constructor(container: HTMLElement, options: BaseTableConstructorOptions = {}) { super(); if (!container && options.mode !== 'node') { @@ -264,6 +267,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; internalProps._rowHeightsMap = new NumberMap(); + this._newRowHeightsMap = new NumberRangeMap(this); internalProps._rowRangeHeightsMap = new Map(); internalProps._colRangeWidthsMap = new Map(); internalProps._widthResizedColMap = new Set(); @@ -901,8 +905,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // : this.defaultHeaderRowHeight // : this.internalProps.defaultRowHeight) // ); - if (this.rowHeightsMap.get(row)) { - return this.rowHeightsMap.get(row); + if (this._newRowHeightsMap.get(row)) { + return this._newRowHeightsMap.get(row); } const defaultHeight = this.getDefaultRowHeight(row); if (isNumber(defaultHeight)) { @@ -932,7 +936,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @returns */ _setRowHeight(row: number, height: number, clearCache?: boolean): void { - this.rowHeightsMap.put(row, Math.round(height)); + // this.rowHeightsMap.put(row, Math.round(height)); + this._newRowHeightsMap.put(row, Math.round(height)); // 清楚影响缓存 if (clearCache) { this._clearRowRangeHeightsMap(row); @@ -946,29 +951,29 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ getRowsHeight(startRow: number, endRow: number): number { //通过缓存获取指定范围行高 - const cachedRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow}`); - if (cachedRowHeight !== null && cachedRowHeight !== undefined) { - return cachedRowHeight; - } - //特殊处理 先尝试获取startRow->endRow-1的行高 - const cachedLowerRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow - 1}`); - if (cachedLowerRowHeight !== null && cachedLowerRowHeight !== undefined) { - const height = Math.round( - cachedLowerRowHeight + - (this.rowHeightsMap.get(endRow) ?? - (this.isColumnHeader(0, endRow) || this.isCornerHeader(0, endRow) - ? Array.isArray(this.defaultHeaderRowHeight) && isNumber(this.defaultHeaderRowHeight[endRow]) - ? (this.defaultHeaderRowHeight[endRow] as number) - : isNumber(this.defaultHeaderRowHeight) - ? (this.defaultHeaderRowHeight as number) - : this.internalProps.defaultRowHeight - : this.internalProps.defaultRowHeight)) - ); - if (startRow >= 0 && endRow >= 0) { - this._rowRangeHeightsMap.set(`$${startRow}$${endRow}`, Math.round(height)); - } - return height; - } + // const cachedRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow}`); + // if (cachedRowHeight !== null && cachedRowHeight !== undefined) { + // return cachedRowHeight; + // } + // //特殊处理 先尝试获取startRow->endRow-1的行高 + // const cachedLowerRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow - 1}`); + // if (cachedLowerRowHeight !== null && cachedLowerRowHeight !== undefined) { + // const height = Math.round( + // cachedLowerRowHeight + + // (this.rowHeightsMap.get(endRow) ?? + // (this.isColumnHeader(0, endRow) || this.isCornerHeader(0, endRow) + // ? Array.isArray(this.defaultHeaderRowHeight) && isNumber(this.defaultHeaderRowHeight[endRow]) + // ? (this.defaultHeaderRowHeight[endRow] as number) + // : isNumber(this.defaultHeaderRowHeight) + // ? (this.defaultHeaderRowHeight as number) + // : this.internalProps.defaultRowHeight + // : this.internalProps.defaultRowHeight)) + // ); + // if (startRow >= 0 && endRow >= 0) { + // this._rowRangeHeightsMap.set(`$${startRow}$${endRow}`, Math.round(height)); + // } + // return height; + // } let h = 0; // for (let i = startRow; i <= endRow; i++) { @@ -996,13 +1001,14 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // part in body h += this.defaultRowHeight * (endRow - Math.max(this.columnHeaderLevelCount, startRow) + 1); } else { - for (let i = startRow; i <= endRow; i++) { - h += this.getRowHeight(i); - } - } - if (startRow >= 0 && endRow >= 0 && h > 0) { - this._rowRangeHeightsMap.set(`$${startRow}$${endRow}`, Math.round(h)); + // for (let i = startRow; i <= endRow; i++) { + // h += this.getRowHeight(i); + // } + h = this._newRowHeightsMap.getSumInRange(startRow, endRow); } + // if (startRow >= 0 && endRow >= 0 && h > 0) { + // this._rowRangeHeightsMap.set(`$${startRow}$${endRow}`, Math.round(h)); + // } // } return Math.round(h); } @@ -1925,6 +1931,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; internalProps.cellTextOverflows = {}; internalProps._rowHeightsMap = new NumberMap(); + this._newRowHeightsMap = new NumberRangeMap(this); internalProps._rowRangeHeightsMap = new Map(); internalProps._colRangeWidthsMap = new Map(); diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts new file mode 100644 index 000000000..ed85ca65c --- /dev/null +++ b/packages/vtable/src/layout/row-height-map.ts @@ -0,0 +1,124 @@ +import type { BaseTableAPI } from '../ts-types/base-table'; + +export class NumberRangeMap { + data: Map; + cumulativeSum: Map; + difference: Map; + totalSum: number; + table: BaseTableAPI; + isUpdate = false; + + constructor(table: BaseTableAPI) { + this.data = new Map(); + this.cumulativeSum = new Map(); + this.difference = new Map(); + this.totalSum = 0; + this.table = table; + } + + add(position: number, value: number) { + const defaultValue = this.table.getRowHeight(position); + this.data.set(position, value); + this.totalSum += value; + // this.updateCumulativeSum(position, value); + this.updateDifference(position, value - defaultValue); + } + + remove(position: number) { + if (this.data.has(position)) { + const value = this.data.get(position); + this.data.delete(position); + this.totalSum -= value; + const defaultValue = this.table.getRowHeight(position); + // this.updateCumulativeSum(position, -value); + this.updateDifference(position, defaultValue - value); + } + } + + put(position: number, newValue: number) { + if (this.data.has(position)) { + const oldValue = this.data.get(position); + this.data.set(position, newValue); + const difference = newValue - oldValue; + this.totalSum += difference; + // this.updateCumulativeSum(position, difference); + this.updateDifference(position, difference); + } else { + this.add(position, newValue); + } + } + + get(position: number) { + return this.data.get(position); + } + + updateDifference(position: number, difference: number) { + this.difference.set(position, difference); + this.update(); + } + + getSumInRange(start: number, end: number) { + return this.calculatePrefixSum(end) - this.calculatePrefixSum(start - 1); + } + + updateCumulativeSum(position: number, difference: number) { + // 更新累加和 + for (const [pos, sum] of this.cumulativeSum) { + if (pos >= position) { + this.cumulativeSum.set(pos, sum + difference); + } + } + } + + calculatePrefixSum(position: number) { + if (this.cumulativeSum.has(position)) { + let cache = this.cumulativeSum.get(position); + for (const [pos, difference] of this.difference) { + if (pos <= position) { + cache += difference; + } + } + return cache; + } + + this.dealDiffenence(); + return this.getCumulativeSum(position); + } + + getCumulativeSum(position: number) { + let sum = 0; + for (let i = position; i >= 0; i--) { + if (this.cumulativeSum.has(i)) { + sum += this.cumulativeSum.get(i); + break; + } else { + sum += this.data.get(i) ?? this.table.getRowHeight(i); + } + } + this.cumulativeSum.set(position, sum); + return sum; + } + + update() { + if (this.isUpdate) { + return; + } + this.isUpdate = true; + setTimeout(() => { + this.dealDiffenence(); + this.isUpdate = false; + }, 0); + } + + dealDiffenence() { + for (const [sumPos, sum] of this.cumulativeSum) { + for (const [difPos, difference] of this.difference) { + if (sumPos >= difPos) { + this.cumulativeSum.set(sumPos, sum + difference); + } + } + } + + this.difference.clear(); + } +} diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index 2824a27f8..1de85c89b 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -509,7 +509,8 @@ export class SceneProxy { this.rowUpdatePos, // rowStart distRow, // rowEnd this.table, - this.rowUpdateDirection + this.rowUpdateDirection, + true ); // row header group updateAutoRow( @@ -518,7 +519,8 @@ export class SceneProxy { this.rowUpdatePos, // rowStart distRow, // rowEnd this.table, - this.rowUpdateDirection + this.rowUpdateDirection, + true ); // right frozen group updateAutoRow( @@ -527,7 +529,8 @@ export class SceneProxy { this.rowUpdatePos, // rowStart distRow, // rowEnd this.table, - this.rowUpdateDirection + this.rowUpdateDirection, + true ); } 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 d24f7ebb3..93bfd29ee 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 @@ -101,7 +101,8 @@ async function moveCell( syncTopRow, // rowStart syncBottomRow, // rowEnd proxy.table, - distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up' // 跳转到底部时，从下向上对齐 + distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up', // 跳转到底部时，从下向上对齐 + true ); // row header group @@ -111,7 +112,8 @@ async function moveCell( syncTopRow, // rowStart syncBottomRow, // rowEnd proxy.table, - distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up' // 跳转到底部时，从下向上对齐 + distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up', // 跳转到底部时，从下向上对齐 + true ); // right frozen group @@ -121,7 +123,8 @@ async function moveCell( syncTopRow, // rowStart syncBottomRow, // rowEnd proxy.table, - distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up' // 跳转到底部时，从下向上对齐 + distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up', // 跳转到底部时，从下向上对齐 + true ); const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, screenTopRow, true); 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 21fa63c3c..ddf94fe8d 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 @@ -7,7 +7,8 @@ export function updateAutoRow( rowStart: number, rowEnd: number, table: BaseTableAPI, - direction: 'up' | 'down' = 'up' + direction: 'up' | 'down' = 'up', + part?: boolean ) { // 更新y位置 if (direction === 'up') { @@ -21,6 +22,12 @@ export function updateAutoRow( if (cellGroup._prev) { // y = ((cellGroup._prev as Group)?.attribute.y ?? 0) + ((cellGroup._prev as Group)?.attribute.height ?? 0); y = (cellGroup._prev as Group)?.attribute.y + table.getRowHeight((cellGroup._prev as Group).row); + } else if (part) { + const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowEnd + 1, true); + y = baseCellGroup.attribute.y; + for (let r = rowStart; r <= rowEnd; r++) { + y -= table.getRowHeight(r); + } } else { // 估计位置 y = table.getRowsHeight(table.columnHeaderLevelCount, cellGroup.row - 1); @@ -39,6 +46,12 @@ export function updateAutoRow( if (cellGroup._next) { // y = ((cellGroup._next as Group)?.attribute.y ?? 0) - (cellGroup.attribute.height ?? 0); y = (cellGroup._next as Group)?.attribute.y - table.getRowHeight(cellGroup.row); + } else if (part) { + const baseCellGroup = table.scenegraph.highPerformanceGetCell(col, rowStart - 1, true); + y = baseCellGroup.attribute.y; + for (let r = rowStart; r <= rowEnd; r++) { + y += table.getRowHeight(r); + } } else { // 估计位置 y = table.getRowsHeight(table.columnHeaderLevelCount, cellGroup.row - 1); From b2a17ce85818c00d9163490d0c8f106279c66d5a Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 10 Jan 2024 16:51:52 +0800 Subject: [PATCH 02/65] fix: add clear in NumberRangeMap --- packages/vtable/src/core/BaseTable.ts | 1 + packages/vtable/src/layout/row-height-map.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index cb5584971..b405f09f3 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2996,6 +2996,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ clearRowHeightCache() { this.internalProps._rowHeightsMap.clear(); + this._newRowHeightsMap.clear(); this._clearRowRangeHeightsMap(); } /** diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index ed85ca65c..82a5aaf6c 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -16,6 +16,13 @@ export class NumberRangeMap { this.table = table; } + clear() { + this.data.clear(); + this.cumulativeSum.clear(); + this.difference.clear(); + this.totalSum = 0; + } + add(position: number, value: number) { const defaultValue = this.table.getRowHeight(position); this.data.set(position, value); From 22e4534283d92be7ea034da13365a9f0ea74e36f Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 10 Jan 2024 17:25:43 +0800 Subject: [PATCH 03/65] fix: add NumberRangeMap clear in clearCellStyleCache() --- packages/vtable/__tests__/listTable-1W.test.ts | 2 +- packages/vtable/src/core/BaseTable.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vtable/__tests__/listTable-1W.test.ts b/packages/vtable/__tests__/listTable-1W.test.ts index 5a6504ffc..aa5219851 100644 --- a/packages/vtable/__tests__/listTable-1W.test.ts +++ b/packages/vtable/__tests__/listTable-1W.test.ts @@ -235,6 +235,6 @@ describe('listTable-1W init test', () => { test('listTable-1W update heightMode', () => { listTable.heightMode = 'autoHeight'; listTable.renderWithRecreateCells(); - expect(listTable.getAllRowsHeight()).toBe(340076); // 340072 + expect(listTable.getAllRowsHeight()).toBe(340072); }); }); diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index b405f09f3..a866e1625 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2990,6 +2990,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.headerStyleCache.clear(); this.bodyStyleCache.clear(); this.bodyBottomStyleCache.clear(); + + this._newRowHeightsMap.clear(); } /** * 清除行高度缓存对象 From d98cb8ef3e4c006665f87685f5515cf050bc0a9a Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 10 Jan 2024 21:08:15 +0800 Subject: [PATCH 04/65] fix: fix updateDifference in NumberRangeMap --- packages/vtable/src/layout/row-height-map.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index 82a5aaf6c..cc47a1003 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -60,7 +60,8 @@ export class NumberRangeMap { } updateDifference(position: number, difference: number) { - this.difference.set(position, difference); + const oldDifference = this.difference.get(position) ?? 0; + this.difference.set(position, oldDifference + difference); this.update(); } From 839c9e3441e85d85fc295ccab4a795e14e81e15b Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 11 Jan 2024 15:27:02 +0800 Subject: [PATCH 05/65] fix: add insert&delete in NumberRangeMap --- packages/vtable/src/core/BaseTable.ts | 33 ++++++------ packages/vtable/src/layout/row-height-map.ts | 53 +++++++++++++++++++ .../scenegraph/layout/compute-row-height.ts | 3 +- .../src/scenegraph/layout/update-row.ts | 6 ++- 4 files changed, 76 insertions(+), 19 deletions(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index a866e1625..c57d839fa 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1149,21 +1149,22 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @param row */ _clearRowRangeHeightsMap(row?: number): void { - if (typeof row !== 'number') { - this._rowRangeHeightsMap.clear(); - } else { - const keys = this._rowRangeHeightsMap.keys(); - for (const key of keys) { - const reg = rangeReg.exec(key); - if (reg) { - const start = Number(reg[1]); - const end = Number(reg[2]); - if (row >= start && row <= end) { - this._rowRangeHeightsMap.delete(key); - } - } - } - } + this._newRowHeightsMap.clearRange(); + // if (typeof row !== 'number') { + // this._rowRangeHeightsMap.clear(); + // } else { + // const keys = this._rowRangeHeightsMap.keys(); + // for (const key of keys) { + // const reg = rangeReg.exec(key); + // if (reg) { + // const start = Number(reg[1]); + // const end = Number(reg[2]); + // if (row >= start && row <= end) { + // this._rowRangeHeightsMap.delete(key); + // } + // } + // } + // } } /** * 获取某一列内容的宽度 不关乎该列列宽值有多少 @@ -2991,7 +2992,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.bodyStyleCache.clear(); this.bodyBottomStyleCache.clear(); - this._newRowHeightsMap.clear(); + // this._newRowHeightsMap.clear(); } /** * 清除行高度缓存对象 diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index cc47a1003..a7a7b473d 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -23,6 +23,11 @@ export class NumberRangeMap { this.totalSum = 0; } + clearRange() { + this.cumulativeSum.clear(); + this.difference.clear(); + } + add(position: number, value: number) { const defaultValue = this.table.getRowHeight(position); this.data.set(position, value); @@ -129,4 +134,52 @@ export class NumberRangeMap { this.difference.clear(); } + + insert(position: number, value?: number) { + this.clearRange(); + + const indices = []; + const values = []; + + for (const [pos, value] of this.data) { + if (pos >= position) { + indices.push(pos + 1); + values.push(value); + } + } + + for (let i = 0; i < indices.length; i++) { + this.data.set(indices[i], values[i]); + } + + if (value) { + this.put(position, value); + } + } + + delete(position: number) { + this.clearRange(); + + const indices = []; + const values = []; + let lastIndex = -Infinity; + + for (const [pos, value] of this.data) { + if (pos > position) { + indices.push(pos - 1); + values.push(value); + if (pos > lastIndex) { + lastIndex = pos; + } + } + } + + for (let i = 0; i < indices.length; i++) { + this.data.set(indices[i], values[i]); + } + + if (lastIndex !== -Infinity) { + this.data.delete(lastIndex); + } + } } diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index 0933f502f..b963e29fd 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -168,7 +168,8 @@ export function computeRowsHeight( } } } else { - table.rowHeightsMap.clear(); + // table.rowHeightsMap.clear(); + table.clearRowHeightCache(); for (let row = 0; row < table.rowCount; row++) { newHeights[row] = table.getRowHeight(row); } diff --git a/packages/vtable/src/scenegraph/layout/update-row.ts b/packages/vtable/src/scenegraph/layout/update-row.ts index ae93f40b2..adcb84ba2 100644 --- a/packages/vtable/src/scenegraph/layout/update-row.ts +++ b/packages/vtable/src/scenegraph/layout/update-row.ts @@ -28,7 +28,8 @@ export function updateRow( const rowHeightsMap = table.rowHeightsMap; removeRows.forEach(row => { - rowHeightsMap.delAndReorder(row); + // rowHeightsMap.delAndReorder(row); + (scene.table as any)._newRowHeightsMap.delete(row); }); if (removeRows.length) { @@ -42,7 +43,8 @@ export function updateRow( addRows.forEach(row => { const needUpdateAfter = addRow(row, scene); updateAfter = updateAfter ?? needUpdateAfter; - rowHeightsMap.addAndReorder(row); + // rowHeightsMap.addAndReorder(row); + (scene.table as any)._newRowHeightsMap.insert(row); }); // reset attribute y and row number in CellGroup From 1bc3ef8c9be8ca67b04eb56b69934e04a6199fdf Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 11 Jan 2024 20:51:59 +0800 Subject: [PATCH 06/65] fix: fix order change in NumberRangeMap --- packages/vtable/src/core/BaseTable.ts | 22 ++- packages/vtable/src/layout/row-height-map.ts | 136 ++++++++++++++---- .../src/scenegraph/layout/update-row.ts | 6 +- packages/vtable/src/ts-types/base-table.ts | 6 +- 4 files changed, 121 insertions(+), 49 deletions(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index c57d839fa..f344f2b9e 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -155,7 +155,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { isReleased: boolean = false; _chartEventMap: Record = {}; - _newRowHeightsMap: NumberRangeMap; constructor(container: HTMLElement, options: BaseTableConstructorOptions = {}) { super(); if (!container && options.mode !== 'node') { @@ -266,8 +265,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; - internalProps._rowHeightsMap = new NumberMap(); - this._newRowHeightsMap = new NumberRangeMap(this); + internalProps._rowHeightsMap = new NumberRangeMap(this); internalProps._rowRangeHeightsMap = new Map(); internalProps._colRangeWidthsMap = new Map(); internalProps._widthResizedColMap = new Set(); @@ -623,13 +621,13 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { /** * Get the columns width. */ - get rowHeightsMap(): NumberMap { + get rowHeightsMap(): NumberRangeMap { return this.internalProps._rowHeightsMap; } /** * Set the columns width. */ - set rowHeightsMap(rowHeightsMap: NumberMap) { + set rowHeightsMap(rowHeightsMap: NumberRangeMap) { this.internalProps._rowHeightsMap = rowHeightsMap; } /** @@ -905,8 +903,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // : this.defaultHeaderRowHeight // : this.internalProps.defaultRowHeight) // ); - if (this._newRowHeightsMap.get(row)) { - return this._newRowHeightsMap.get(row); + if (this.rowHeightsMap.get(row)) { + return this.rowHeightsMap.get(row); } const defaultHeight = this.getDefaultRowHeight(row); if (isNumber(defaultHeight)) { @@ -937,7 +935,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ _setRowHeight(row: number, height: number, clearCache?: boolean): void { // this.rowHeightsMap.put(row, Math.round(height)); - this._newRowHeightsMap.put(row, Math.round(height)); + this.rowHeightsMap.put(row, Math.round(height)); // 清楚影响缓存 if (clearCache) { this._clearRowRangeHeightsMap(row); @@ -1004,7 +1002,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // for (let i = startRow; i <= endRow; i++) { // h += this.getRowHeight(i); // } - h = this._newRowHeightsMap.getSumInRange(startRow, endRow); + h = this.rowHeightsMap.getSumInRange(startRow, endRow); } // if (startRow >= 0 && endRow >= 0 && h > 0) { // this._rowRangeHeightsMap.set(`$${startRow}$${endRow}`, Math.round(h)); @@ -1149,7 +1147,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @param row */ _clearRowRangeHeightsMap(row?: number): void { - this._newRowHeightsMap.clearRange(); + this.rowHeightsMap.clearRange(); // if (typeof row !== 'number') { // this._rowRangeHeightsMap.clear(); // } else { @@ -1931,8 +1929,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; internalProps.cellTextOverflows = {}; - internalProps._rowHeightsMap = new NumberMap(); - this._newRowHeightsMap = new NumberRangeMap(this); + internalProps._rowHeightsMap = new NumberRangeMap(this); internalProps._rowRangeHeightsMap = new Map(); internalProps._colRangeWidthsMap = new Map(); @@ -2999,7 +2996,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ clearRowHeightCache() { this.internalProps._rowHeightsMap.clear(); - this._newRowHeightsMap.clear(); this._clearRowRangeHeightsMap(); } /** diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index a7a7b473d..a05606c50 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -1,3 +1,4 @@ +import { isValid } from '@visactor/vutils'; import type { BaseTableAPI } from '../ts-types/base-table'; export class NumberRangeMap { @@ -7,9 +8,12 @@ export class NumberRangeMap { totalSum: number; table: BaseTableAPI; isUpdate = false; + private _keys: number[] = []; + private _sorted = false; constructor(table: BaseTableAPI) { this.data = new Map(); + this._keys.length = 0; this.cumulativeSum = new Map(); this.difference = new Map(); this.totalSum = 0; @@ -30,6 +34,10 @@ export class NumberRangeMap { add(position: number, value: number) { const defaultValue = this.table.getRowHeight(position); + if (!this.data.has(position)) { + this._keys.push(position); + this._sorted = false; + } this.data.set(position, value); this.totalSum += value; // this.updateCumulativeSum(position, value); @@ -40,6 +48,10 @@ export class NumberRangeMap { if (this.data.has(position)) { const value = this.data.get(position); this.data.delete(position); + const index = this._keys.indexOf(position); + if (index !== -1) { + this._keys.splice(index, 1); // 使用 splice() 方法删除指定索引位置的元素 + } this.totalSum -= value; const defaultValue = this.table.getRowHeight(position); // this.updateCumulativeSum(position, -value); @@ -64,6 +76,26 @@ export class NumberRangeMap { return this.data.get(position); } + has(position: number) { + return this.data.has(position); + } + + private _sort() { + const { _keys: keys } = this; + if (!this._sorted) { + keys.sort((a, b) => { + if (a < b) { + return -1; + } + if (a > b) { + return 1; + } + return 0; + }); + this._sorted = true; + } + } + updateDifference(position: number, difference: number) { const oldDifference = this.difference.get(position) ?? 0; this.difference.set(position, oldDifference + difference); @@ -135,51 +167,95 @@ export class NumberRangeMap { this.difference.clear(); } + // add and reorder insert(position: number, value?: number) { - this.clearRange(); + const lastIndex = this.getLastIndex(); + this.adjustOrder(position, position + 1, lastIndex - position); + if (isValid(value)) { + this.put(position, value); + } + } - const indices = []; - const values = []; + getLastIndex() { + this._sort(); + return this._keys[this._keys.length - 1]; + } - for (const [pos, value] of this.data) { - if (pos >= position) { - indices.push(pos + 1); - values.push(value); - } - } + delLast() { + const lastIndex = this.getLastIndex(); + this.remove(lastIndex); + } - for (let i = 0; i < indices.length; i++) { - this.data.set(indices[i], values[i]); + // del and reorder + delete(position: number) { + if (!this.has(position)) { + return; } + const lastIndex = this.getLastIndex(); - if (value) { - this.put(position, value); - } + this.adjustOrder(position + 1, position, lastIndex - position); + this.delLast(); } - delete(position: number) { + /** + * 将sourceIndex位置开始 往后moveCount个值 调整到targetIndex位置处 + * @param sourceIndex + * @param targetIndex + * @param moveCount + */ + adjustOrder(sourceIndex: number, targetIndex: number, moveCount: number) { this.clearRange(); + this._sort(); + const { _keys: keys } = this; - const indices = []; - const values = []; - let lastIndex = -Infinity; - - for (const [pos, value] of this.data) { - if (pos > position) { - indices.push(pos - 1); - values.push(value); - if (pos > lastIndex) { - lastIndex = pos; + if (sourceIndex > targetIndex) { + const sourceVals = []; + for (let i = indexFirst(keys, sourceIndex + moveCount - 1); i >= 0; i--) { + const key = keys[i]; + if (key >= sourceIndex) { + sourceVals.push(this.get(key)); + } else if (targetIndex <= key && key < sourceIndex) { + this.put(key + moveCount, this.get(key)); + } else if (key < targetIndex) { + break; } } + for (let i = 0; i < moveCount; i++) { + this.put(targetIndex + i, sourceVals[moveCount - 1 - i]); + } } - - for (let i = 0; i < indices.length; i++) { - this.data.set(indices[i], values[i]); + const { length } = keys; + if (sourceIndex < targetIndex) { + const sourceVals = []; + for (let i = indexFirst(keys, sourceIndex); i < length; i++) { + const key = keys[i]; + if (key >= sourceIndex && key < sourceIndex + moveCount) { + sourceVals.push(this.get(key)); + } else if (sourceIndex + moveCount <= key && key <= targetIndex) { + this.put(key - moveCount, this.get(key)); + } else if (key > targetIndex) { + break; + } + } + for (let i = 0; i < moveCount; i++) { + this.put(targetIndex + i, sourceVals[i]); + } } + } +} - if (lastIndex !== -Infinity) { - this.data.delete(lastIndex); +function indexFirst(arr: number[], elm: number): number { + let low = 0; + let high = arr.length - 1; + while (low <= high) { + const i = Math.floor((low + high) / 2); + if (arr[i] === elm) { + return i; + } else if (arr[i] > elm) { + high = i - 1; + } else { + low = i + 1; } } + return high < 0 ? 0 : high; } diff --git a/packages/vtable/src/scenegraph/layout/update-row.ts b/packages/vtable/src/scenegraph/layout/update-row.ts index adcb84ba2..826b39d4e 100644 --- a/packages/vtable/src/scenegraph/layout/update-row.ts +++ b/packages/vtable/src/scenegraph/layout/update-row.ts @@ -28,8 +28,7 @@ export function updateRow( const rowHeightsMap = table.rowHeightsMap; removeRows.forEach(row => { - // rowHeightsMap.delAndReorder(row); - (scene.table as any)._newRowHeightsMap.delete(row); + rowHeightsMap.delete(row); }); if (removeRows.length) { @@ -43,8 +42,7 @@ export function updateRow( addRows.forEach(row => { const needUpdateAfter = addRow(row, scene); updateAfter = updateAfter ?? needUpdateAfter; - // rowHeightsMap.addAndReorder(row); - (scene.table as any)._newRowHeightsMap.insert(row); + rowHeightsMap.insert(row); }); // reset attribute y and row number in CellGroup diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 726cfa08f..94e2a0b01 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -66,6 +66,7 @@ import type { Title } from '../components/title/title'; import type { ITitle } from './component/title'; import type { DiscreteTableLegend } from '../components/legend/discrete-legend/discrete-legend'; import type { ContinueTableLegend } from '../components/legend/continue-legend/continue-legend'; +import type { NumberRangeMap } from '../layout/row-height-map'; export interface IBaseTableProtected { element: HTMLElement; @@ -100,7 +101,7 @@ export interface IBaseTableProtected { cachedRecordsRowHeightMap: NumberMap; //存储每一条记录对应行的行高，只有当设置为自动换行随内容撑开才会起作用 // headerRowHeightsMap: NumberMap; //目前是用来存储了表头各行的高度，从headerRowHeight计算而来，headerRowHeight可以设置为数组的形式 - _rowHeightsMap: NumberMap; //存储数据条目每行高度 + _rowHeightsMap: NumberRangeMap; //存储数据条目每行高度 _colWidthsMap: NumberMap; //存储各列的宽度 _colContentWidthsMap: NumberMap; //存储各列的内容宽度 _colWidthsLimit: { @@ -437,7 +438,8 @@ export interface BaseTableAPI { isReleased: boolean; - rowHeightsMap: NumberMap; + // rowHeightsMap: NumberMap; + rowHeightsMap: NumberRangeMap; colWidthsMap: NumberMap; on: ( From 95a9b364790874a579278cad4f27e629059b8f6f Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 18 Jan 2024 18:37:40 +0800 Subject: [PATCH 07/65] fix: fix text stick update problem --- packages/vtable/src/core/BaseTable.ts | 4 +- .../group-creater/cell-type/image-cell.ts | 172 ++++++++++++------ .../vtable/src/scenegraph/stick-text/index.ts | 69 ++++--- packages/vtable/src/ts-types/base-table.ts | 2 +- 4 files changed, 162 insertions(+), 85 deletions(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 0750884b0..0fccd0597 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -362,7 +362,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.bodyStyleCache = new Map(); this.bodyBottomStyleCache = new Map(); - internalProps.stick = { changedCells: [] }; + internalProps.stick = { changedCells: new Map() }; internalProps.customMergeCell = options.customMergeCell; } @@ -1934,6 +1934,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.colContentWidthsMap = new NumberMap(); this.colWidthsLimit = {}; + internalProps.stick.changedCells.clear(); + internalProps.theme = themes.of(options.theme ?? themes.DEFAULT); this.scenegraph.updateStageBackground(); // this._updateSize(); 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 d86997d87..5231548e8 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 @@ -83,64 +83,40 @@ export function createImageCellGroup( image.name = 'image'; image.keepAspectRatio = keepAspectRatio; if (keepAspectRatio || imageAutoSizing) { - image.successCallback = () => { - const originImage = image.resources.get(image.attribute.image).data; - - if (imageAutoSizing) { - _adjustWidthHeight( - col, - row, - (originImage as HTMLImageElement).width, - (originImage as HTMLImageElement).height, - table.scenegraph, - padding - ); - } - - if (keepAspectRatio) { - const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table); - - const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize( - originImage.width, - originImage.height, - // cellGroup.attribute.width - padding[1] - padding[3], - // cellGroup.attribute.height - padding[0] - padding[2] - cellWidth - padding[1] - padding[3], - cellHeight - padding[0] - padding[2] - ); - - // const left = 0; - // const top = 0; - const pos = calcStartPosition( - 0, - 0, - // cellGroup.attribute.width, - // cellGroup.attribute.height, - cellWidth, - cellHeight, - imageWidth, - imageHeight, + if (image.resources.has(image.attribute.image) && image.resources.get(image.attribute.image).state === 'success') { + updateAutoSizingAndKeepAspectRatio( + imageAutoSizing, + keepAspectRatio, + padding, + textAlign, + textBaseline, + image, + cellGroup, + table + ); + } else { + image.successCallback = () => { + updateAutoSizingAndKeepAspectRatio( + imageAutoSizing, + keepAspectRatio, + padding, textAlign, textBaseline, - padding + image, + cellGroup, + table ); - - image.setAttributes({ - x: pos.x, - y: pos.y, - width: imageWidth, - height: imageHeight, - dx: isMerge ? -table.getColsWidth(cellGroup.mergeStartCol, col - 1) : 0, - dy: isMerge ? -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) : 0 - }); - } - - table.scenegraph.updateNextFrame(); - }; + table.scenegraph.updateNextFrame(); + }; + } } else { - image.successCallback = () => { + if (image.resources.has(image.attribute.image) && image.resources.get(image.attribute.image).state === 'success') { updateImageCellContentWhileResize(cellGroup, col, row, table); - }; + } else { + image.successCallback = () => { + updateImageCellContentWhileResize(cellGroup, col, row, table); + }; + } } (image as any).failCallback = () => { const regedIcons = icons.get(); @@ -320,3 +296,93 @@ function getCellRange(cellGroup: Group, table: BaseTableAPI) { isMerge: false }; } + +function updateImageDxDy(startCol, endCol, startRow, endRow, table) { + for (let col = startCol; col <= endCol; col++) { + for (let row = startRow; row <= endRow; row++) { + const cellGroup = table.scenegraph.getCell(col, row); + if (cellGroup) { + const image = cellGroup.getChildByName('image'); + if (image) { + image.setAttributes({ + dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1), + dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) + }); + } + } + } + } +} + +function updateAutoSizingAndKeepAspectRatio( + imageAutoSizing: boolean, + keepAspectRatio: boolean, + padding: [number, number, number, number], + textAlign: CanvasTextAlign, + textBaseline: CanvasTextBaseline, + image: Image, + cellGroup: Group, + table: BaseTableAPI +) { + const originImage = image.resources.get(image.attribute.image).data; + const { col, row } = cellGroup; + + if (imageAutoSizing) { + _adjustWidthHeight( + col, + row, + (originImage as HTMLImageElement).width, + (originImage as HTMLImageElement).height, + table.scenegraph, + padding + ); + } + + if (keepAspectRatio) { + const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table); + + const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize( + originImage.width, + originImage.height, + // cellGroup.attribute.width - padding[1] - padding[3], + // cellGroup.attribute.height - padding[0] - padding[2] + cellWidth - padding[1] - padding[3], + cellHeight - padding[0] - padding[2] + ); + + // const left = 0; + // const top = 0; + const pos = calcStartPosition( + 0, + 0, + // cellGroup.attribute.width, + // cellGroup.attribute.height, + cellWidth, + cellHeight, + imageWidth, + imageHeight, + textAlign, + textBaseline, + padding + ); + + image.setAttributes({ + x: pos.x, + y: pos.y, + width: imageWidth, + height: imageHeight + // dx: isMerge ? -table.getColsWidth(cellGroup.mergeStartCol, col - 1) : 0, + // dy: isMerge ? -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) : 0 + }); + + if (isMerge) { + updateImageDxDy( + cellGroup.mergeStartCol, + cellGroup.mergeEndCol, + cellGroup.mergeStartRow, + cellGroup.mergeEndRow, + table + ); + } + } +} diff --git a/packages/vtable/src/scenegraph/stick-text/index.ts b/packages/vtable/src/scenegraph/stick-text/index.ts index 781c93e48..a000caf5b 100644 --- a/packages/vtable/src/scenegraph/stick-text/index.ts +++ b/packages/vtable/src/scenegraph/stick-text/index.ts @@ -7,7 +7,7 @@ import { isNumber } from '@visactor/vutils'; export function handleTextStick(table: BaseTableAPI) { // reset - const { changedCells } = table.internalProps.stick; + const { changedCells } = table.internalProps.stick; // changedCells only cache one time changedCells.forEach((cellPos: StickCell) => { const cellGroup = table.scenegraph.getCell(cellPos.col, cellPos.row); cellGroup.forEachChildren((child: IGraphic) => { @@ -17,7 +17,7 @@ export function handleTextStick(table: BaseTableAPI) { }); }); }); - changedCells.length = 0; + changedCells.clear(); const { scrollTop, scrollLeft, frozenRowCount, frozenColCount } = table; const frozenRowsHeight = table.getFrozenRowsHeight(); @@ -130,7 +130,7 @@ function adjustCellContentVerticalLayout( cellGroup: Group, minTop: number, maxTop: number, - changedCells: StickCell[], + changedCells: Map, table: BaseTableAPI ) { if ( @@ -150,7 +150,7 @@ function adjustCellContentVerticalLayout( } } -function dealVertical(cellGroup: Group, minTop: number, maxTop: number, changedCells: StickCell[]) { +function dealVertical(cellGroup: Group, minTop: number, maxTop: number, changedCells: Map) { // get text element const graphic = (cellGroup.getChildByName('text', true) as Text) || (cellGroup.getChildByName('image', true) as Image); @@ -171,28 +171,35 @@ function dealVertical(cellGroup: Group, minTop: number, maxTop: number, changedC graphic.AABBBounds.width(); const textTop = graphic.globalAABBBounds.y1; const textBottom = graphic.globalAABBBounds.y2; + // const textCellTop = graphic.AABBBounds.y1; + // const textCellBottom = graphic.AABBBounds.y2; + // if (textCellTop < cellGroup.attribute.height || textCellBottom < 0) { + // return; + // } if (textTop < minTop) { const deltaHeight = textTop - minTop; // text is out of view, move all elements down - changedCells.push({ - col: cellGroup.col, - row: cellGroup.row, - dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, - dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 - }); + !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) && + changedCells.set(`${cellGroup.col}-${cellGroup.row}`, { + col: cellGroup.col, + row: cellGroup.row, + dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, + dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 + }); cellGroup.forEachChildren((child: IGraphic) => { child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight + 2); // 2 is the buffer }); } else if (textBottom > maxTop) { const deltaHeight = textBottom - maxTop; // text is out of view, move all elements down - changedCells.push({ - col: cellGroup.col, - row: cellGroup.row, - dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, - dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 - }); + !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) && + changedCells.set(`${cellGroup.col}-${cellGroup.row}`, { + col: cellGroup.col, + row: cellGroup.row, + dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, + dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 + }); cellGroup.forEachChildren((child: IGraphic) => { child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight); // 2 is the buffer }); @@ -208,7 +215,7 @@ function adjustCellContentHorizontalLayout( cellGroup: Group, minLeft: number, maxLeft: number, - changedCells: StickCell[], + changedCells: Map, table: BaseTableAPI ) { if ( @@ -228,7 +235,7 @@ function adjustCellContentHorizontalLayout( } } -function dealHorizontal(cellGroup: Group, minLeft: number, maxLeft: number, changedCells: StickCell[]) { +function dealHorizontal(cellGroup: Group, minLeft: number, maxLeft: number, changedCells: Map) { // get text element const text = cellGroup.getChildByName('text', true) as Text; if (!text) { @@ -240,24 +247,26 @@ function dealHorizontal(cellGroup: Group, minLeft: number, maxLeft: number, chan if (textLeft < minLeft) { const deltaWidth = textLeft - minLeft; // text is out of view, move all elements right - changedCells.push({ - col: cellGroup.col, - row: cellGroup.row, - dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, - dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 - }); + !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) && + changedCells.set(`${cellGroup.col}-${cellGroup.row}`, { + col: cellGroup.col, + row: cellGroup.row, + dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, + dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 + }); cellGroup.forEachChildren((child: IGraphic) => { child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth + 2); // 2 is the buffer }); } else if (textRight > maxLeft) { const deltaWidth = textRight - maxLeft; // text is out of view, move all elements down - changedCells.push({ - col: cellGroup.col, - row: cellGroup.row, - dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, - dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 - }); + !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) && + changedCells.set(`${cellGroup.col}-${cellGroup.row}`, { + col: cellGroup.col, + row: cellGroup.row, + dx: (cellGroup.firstChild as IGraphic)?.attribute.dx ?? 0, + dy: (cellGroup.firstChild as IGraphic)?.attribute.dy ?? 0 + }); cellGroup.forEachChildren((child: IGraphic) => { child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth); // 2 is the buffer }); diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 85b494b48..0e18f81be 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -198,7 +198,7 @@ export interface IBaseTableProtected { // // 开启图表异步渲染 每批次渐进渲染图表个数 // renderChartAsyncBatchCount?: number; - stick: { changedCells: StickCell[] }; + stick: { changedCells: Map }; customMergeCell?: CustomMergeCell; /** From 91f63656c136f54a88b9e3473e35419b3c10aea9 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 19 Jan 2024 15:50:33 +0800 Subject: [PATCH 08/65] fix: fix image.resources undefined problem in createImageCellGroup() --- .../scenegraph/group-creater/cell-type/image-cell.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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 5231548e8..140a6cef3 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 @@ -83,7 +83,11 @@ export function createImageCellGroup( image.name = 'image'; image.keepAspectRatio = keepAspectRatio; if (keepAspectRatio || imageAutoSizing) { - if (image.resources.has(image.attribute.image) && image.resources.get(image.attribute.image).state === 'success') { + if ( + image.resources && + image.resources.has(image.attribute.image) && + image.resources.get(image.attribute.image).state === 'success' + ) { updateAutoSizingAndKeepAspectRatio( imageAutoSizing, keepAspectRatio, @@ -110,7 +114,11 @@ export function createImageCellGroup( }; } } else { - if (image.resources.has(image.attribute.image) && image.resources.get(image.attribute.image).state === 'success') { + if ( + image.resources && + image.resources.has(image.attribute.image) && + image.resources.get(image.attribute.image).state === 'success' + ) { updateImageCellContentWhileResize(cellGroup, col, row, table); } else { image.successCallback = () => { From 8d60f24bfc5025e01b53ceddf680a52682ed99f0 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 19 Jan 2024 19:26:23 +0800 Subject: [PATCH 09/65] feat: add option frozenColDragHeaderMode --- packages/vtable/src/ts-types/base-table.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 85b494b48..f83946467 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -97,7 +97,12 @@ export interface IBaseTableProtected { columnResizeType?: 'column' | 'indicator' | 'all' | 'indicatorGroup'; /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; - + /** 拖拽表头移动位置 针对冻结部分的规则 + * "disabled"（禁用）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 + * "adjustCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "freeAdjust"（自由调整）：允许自由拖拽其他列的表头进入或移出冻结列位置，同时保持冻结列的数量不变。 + */ + frozenColDragHeaderMode?: 'disabled' | 'adjustCount' | 'freeAdjust'; cachedRecordsRowHeightMap: NumberMap; //存储每一条记录对应行的行高，只有当设置为自动换行随内容撑开才会起作用 // headerRowHeightsMap: NumberMap; //目前是用来存储了表头各行的高度，从headerRowHeight计算而来，headerRowHeight可以设置为数组的形式 _rowHeightsMap: NumberMap; //存储数据条目每行高度 From 589e69cd6635ca8278c9e97e89f515242f1dab85 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 19 Jan 2024 19:26:59 +0800 Subject: [PATCH 10/65] docs: update changlog of rush --- .../feat-dragHeaderInteraction_2024-01-19-11-26.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json diff --git a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json new file mode 100644 index 000000000..5fa6e9528 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: add option frozenColDragHeaderMode\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From d1aa862eabb9878e2e0bf7b43547a2eef57bb3fb Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Sun, 21 Jan 2024 22:16:16 +0800 Subject: [PATCH 11/65] feat: support frozenColDragHeaderMode --- packages/vtable/src/core/BaseTable.ts | 10 +++++++ .../vtable/src/event/listener/table-group.ts | 19 ++++++------ .../vtable/src/layout/simple-header-layout.ts | 6 ++++ .../vtable/src/scenegraph/layout/move-cell.ts | 7 +++++ packages/vtable/src/state/cell-move/index.ts | 30 +++++++++++++++++++ packages/vtable/src/ts-types/base-table.ts | 10 +++++-- 6 files changed, 70 insertions(+), 12 deletions(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 2f105a108..161b4105c 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -176,6 +176,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // disableRowHeaderColumnResize, columnResizeMode, dragHeaderMode, + frozenColDragHeaderMode, // showHeader, // scrollBar, showFrozenIcon, @@ -262,6 +263,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.columnResizeMode = columnResizeMode; internalProps.dragHeaderMode = dragHeaderMode; + internalProps.frozenColDragHeaderMode = frozenColDragHeaderMode; internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; @@ -1857,6 +1859,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // disableRowHeaderColumnResize, columnResizeMode, dragHeaderMode, + frozenColDragHeaderMode, // scrollBar, showFrozenIcon, allowFrozenColCount, @@ -1930,6 +1933,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.columnResizeMode = columnResizeMode; internalProps.dragHeaderMode = dragHeaderMode; + internalProps.frozenColDragHeaderMode = frozenColDragHeaderMode; internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; @@ -3061,6 +3065,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ _canDragHeaderPosition(col: number, row: number): boolean { if (this.isHeader(col, row) && this.stateManager.isSelected(col, row)) { + if ( + this.internalProps.frozenColDragHeaderMode === 'disabled' && + (this.isFrozenColumn(col) || this.isRightFrozenColumn(col)) + ) { + return false; + } const selectRange = this.stateManager.select.ranges[0]; //判断是否整行或者整列选中 if (this.isColumnHeader(col, row)) { diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 694e98082..c475354b8 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -83,16 +83,15 @@ export function bindTableGroupListener(eventManager: EventManager) { if (stateManager.interactionState === InteractionState.scrolling) { return; } - if ( - stateManager.interactionState === InteractionState.grabing && - Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1 - ) { - if (stateManager.isResizeCol()) { - /* do nothing */ - } else if (stateManager.isMoveCol()) { - eventManager.dealColumnMover(eventArgsSet); - } else { - eventManager.dealTableSelect(eventArgsSet, true); + if (stateManager.interactionState === InteractionState.grabing) { + if (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) { + if (stateManager.isResizeCol()) { + /* do nothing */ + } else if (stateManager.isMoveCol()) { + eventManager.dealColumnMover(eventArgsSet); + } else { + eventManager.dealTableSelect(eventArgsSet, true); + } } return; } diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index b9336bf0d..8591a745c 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -775,6 +775,12 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { if (source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) { return false; } + if (this._table.internalProps.frozenColDragHeaderMode === 'disabled') { + if (this._table.isFrozenColumn(target.col) || this._table.isRightFrozenColumn(target.col)) { + return false; + } + } + // 获取操作单元格的range范围 const sourceCellRange = this.getCellRange(source.col, source.row); // 获取source和target对应sourceCellRange.start.row的headerId diff --git a/packages/vtable/src/scenegraph/layout/move-cell.ts b/packages/vtable/src/scenegraph/layout/move-cell.ts index e758e0874..1e290f242 100644 --- a/packages/vtable/src/scenegraph/layout/move-cell.ts +++ b/packages/vtable/src/scenegraph/layout/move-cell.ts @@ -81,6 +81,7 @@ export function moveHeaderPosition( const columnHeaderGroup = table.scenegraph.getColGroup(col, true); const columnGroup = table.scenegraph.getColGroup(col); const columnBottomGroup = table.scenegraph.getColGroupInBottom(col); + const columnRightBottomGroup = table.scenegraph.getColGroupInRightBottomCorner(col); if (columnHeaderGroup) { columnHeaderGroup.setAttribute('width', columnWidth); columnHeaderGroup.forEachChildren((child: Group) => { @@ -99,6 +100,12 @@ export function moveHeaderPosition( child.setAttribute('width', columnWidth); }); } + if (columnRightBottomGroup) { + columnRightBottomGroup.setAttribute('width', columnWidth); + columnRightBottomGroup.forEachChildren((child: Group) => { + child.setAttribute('width', columnWidth); + }); + } } // 更新容器尺寸 diff --git a/packages/vtable/src/state/cell-move/index.ts b/packages/vtable/src/state/cell-move/index.ts index b3c89b608..150c1cd5b 100644 --- a/packages/vtable/src/state/cell-move/index.ts +++ b/packages/vtable/src/state/cell-move/index.ts @@ -1,5 +1,6 @@ import type { ListTable } from '../../ListTable'; import { getCellMergeInfo } from '../../scenegraph/utils/get-cell-merge'; +import type { CellRange } from '../../ts-types'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { StateManager } from '../state'; import { adjustMoveHeaderTarget } from './adjust-header'; @@ -116,6 +117,35 @@ export function endMoveCol(state: StateManager) { sourceMergeInfo, targetMergeInfo ); + //调整冻结列数量 + if (state.table.internalProps.frozenColDragHeaderMode === 'adjustFrozenCount' && state.table.isListTable()) { + if ( + state.table.isFrozenColumn(state.columnMove.colTarget) && + !state.table.isFrozenColumn(state.columnMove.colSource) + ) { + state.table.frozenColCount += + (sourceMergeInfo as CellRange).end.col - (sourceMergeInfo as CellRange).start.col + 1; + } else if ( + state.table.isFrozenColumn(state.columnMove.colSource) && + !state.table.isFrozenColumn(state.columnMove.colTarget) + ) { + state.table.frozenColCount -= + (sourceMergeInfo as CellRange).end.col - (sourceMergeInfo as CellRange).start.col + 1; + } + if ( + state.table.isRightFrozenColumn(state.columnMove.colTarget) && + !state.table.isRightFrozenColumn(state.columnMove.colSource) + ) { + state.table.rightFrozenColCount += + (sourceMergeInfo as CellRange).end.col - (sourceMergeInfo as CellRange).start.col + 1; + } else if ( + state.table.isRightFrozenColumn(state.columnMove.colSource) && + !state.table.isRightFrozenColumn(state.columnMove.colTarget) + ) { + state.table.rightFrozenColCount -= + (sourceMergeInfo as CellRange).end.col - (sourceMergeInfo as CellRange).start.col + 1; + } + } } state.updateCursor(); diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index d2e1f2cfe..a9f3114a8 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -100,10 +100,10 @@ export interface IBaseTableProtected { dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; /** 拖拽表头移动位置 针对冻结部分的规则 * "disabled"（禁用）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 - * "adjustCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "adjustFrozenCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 * "freeAdjust"（自由调整）：允许自由拖拽其他列的表头进入或移出冻结列位置，同时保持冻结列的数量不变。 */ - frozenColDragHeaderMode?: 'disabled' | 'adjustCount' | 'freeAdjust'; + frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'freeAdjust'; cachedRecordsRowHeightMap: NumberMap; //存储每一条记录对应行的行高，只有当设置为自动换行随内容撑开才会起作用 // headerRowHeightsMap: NumberMap; //目前是用来存储了表头各行的高度，从headerRowHeight计算而来，headerRowHeight可以设置为数组的形式 _rowHeightsMap: NumberMap; //存储数据条目每行高度 @@ -257,6 +257,12 @@ export interface BaseTableConstructorOptions { columnResizeMode?: 'all' | 'none' | 'header' | 'body'; /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; + /** 拖拽表头移动位置 针对冻结部分的规则 + * "disabled"（禁用）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 + * "adjustFrozenCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "freeAdjust"（自由调整）：允许自由拖拽其他列的表头进入或移出冻结列位置，同时保持冻结列的数量不变。 + */ + frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'freeAdjust'; /** * 是否显示固定列图钉 基本表格生效 */ From 916979943924608e28cda8b81981696734de56cc Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 22 Jan 2024 12:13:00 +0800 Subject: [PATCH 12/65] chore: add rush change --- .../vtable/fix-image-stick_2024-01-22-04-12.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json diff --git a/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json b/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json new file mode 100644 index 000000000..1d3c17f5a --- /dev/null +++ b/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "fix: fix merge image cell update problem", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file From 09ef8c5e983cb5bc35a2d6442e7185c6cea6a8a8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 22 Jan 2024 14:57:37 +0800 Subject: [PATCH 13/65] feat: add enlarge in calcKeepAspectRatioSize --- .../src/scenegraph/utils/keep-aspect-ratio.ts | 56 ++++++++++++++----- 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/packages/vtable/src/scenegraph/utils/keep-aspect-ratio.ts b/packages/vtable/src/scenegraph/utils/keep-aspect-ratio.ts index 76ce96a7f..0430e40ba 100644 --- a/packages/vtable/src/scenegraph/utils/keep-aspect-ratio.ts +++ b/packages/vtable/src/scenegraph/utils/keep-aspect-ratio.ts @@ -1,22 +1,52 @@ export function calcKeepAspectRatioSize( - width: number, - height: number, - maxWidth: number, - maxHeight: number + width: number, // image width + height: number, // image height + maxWidth: number, // cell width + maxHeight: number // cell height ): { width: number; height: number; } { - let newWidth = width; - let newHeight = height; - if (newWidth > maxWidth) { - newWidth = maxWidth; - newHeight = (newWidth * height) / width; - } - if (newHeight > maxHeight) { - newHeight = maxHeight; - newWidth = (newHeight * width) / height; + // let newWidth = width; + // let newHeight = height; + // if (newWidth > maxWidth) { + // newWidth = maxWidth; + // newHeight = (newWidth * height) / width; + // } + // if (newHeight > maxHeight) { + // newHeight = maxHeight; + // newWidth = (newHeight * width) / height; + // } + // return { + // width: newWidth, + // height: newHeight + // }; + + const rectWidth = width; + const rectHeight = height; + const containerWidth = maxWidth; + const containerHeight = maxHeight; + const containerRatio = containerWidth / containerHeight; + const rectRatio = rectWidth / rectHeight; + let newWidth; + let newHeight; + let offsetX; + let offsetY; + + if (rectRatio > containerRatio) { + // 矩形的宽高比较大，以容器的宽度为基准进行缩放 + newWidth = containerWidth; + newHeight = newWidth / rectRatio; + offsetX = 0; + offsetY = (containerHeight - newHeight) / 2; + } else { + // 矩形的高宽比较大，以容器的高度为基准进行缩放 + newHeight = containerHeight; + newWidth = newHeight * rectRatio; + offsetY = 0; + offsetX = (containerWidth - newWidth) / 2; } + return { width: newWidth, height: newHeight From eaea53a954d1d567551872af6eff96b9ac0e9146 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 22 Jan 2024 16:43:31 +0800 Subject: [PATCH 14/65] refactor: when drag header move to frozen region then markLine show positon --- packages/vtable/src/event/event.ts | 15 ++++---- .../vtable/src/layout/pivot-header-layout.ts | 2 +- .../vtable/src/layout/simple-header-layout.ts | 2 +- .../src/scenegraph/component/cell-mover.ts | 8 ++--- packages/vtable/src/state/cell-move/index.ts | 34 +++++++++++++++---- 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index d7ed34299..a708da566 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -23,6 +23,7 @@ import { bindAxisHoverEvent } from './pivot-chart/axis-hover'; import type { PivotTable } from '../PivotTable'; import { Env } from '../tools/env'; import type { ListTable } from '../ListTable'; +import { isValid } from '@visactor/vutils'; export class EventManager { table: BaseTableAPI; @@ -323,12 +324,14 @@ export class EventManager { dealColumnMover(eventArgsSet: SceneEvent) { const { eventArgs } = eventArgsSet; - this.table.stateManager.updateMoveCol( - eventArgs.col, - eventArgs.row, - eventArgsSet.abstractPos.x, - eventArgsSet.abstractPos.y - ); + if (isValid(eventArgs.col) && isValid(eventArgs.row)) { + this.table.stateManager.updateMoveCol( + eventArgs.col, + eventArgs.row, + eventArgsSet.abstractPos.x, + eventArgsSet.abstractPos.y + ); + } } startColumnResize(eventArgsSet: SceneEvent) { diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index d0ae0697b..ac5d1d387 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -941,7 +941,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } } else { row = col; - if (this.frozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { + if (this.bottomFrozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { return true; } } diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 8591a745c..a302b3bea 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -181,7 +181,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { } } else { row = col; - if (this.frozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { + if (this.bottomFrozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { return true; } } diff --git a/packages/vtable/src/scenegraph/component/cell-mover.ts b/packages/vtable/src/scenegraph/component/cell-mover.ts index 2a8fb8cd9..c2f4ea928 100644 --- a/packages/vtable/src/scenegraph/component/cell-mover.ts +++ b/packages/vtable/src/scenegraph/component/cell-mover.ts @@ -141,12 +141,12 @@ export class CellMover { update(backX: number | undefined, lineX: number | undefined, backY: number | undefined, lineY: number | undefined) { if (typeof backX === 'number' && typeof lineX === 'number') { - this.columnMoverLabel.setAttribute('x', lineX - this.table.stateManager.scroll.horizontalBarPos); - this.columnMoverLine.setAttribute('x', lineX - this.table.stateManager.scroll.horizontalBarPos); + this.columnMoverLabel.setAttribute('x', lineX); + this.columnMoverLine.setAttribute('x', lineX); this.columnMoverBack.setAttribute('x', backX); } else if (typeof backY === 'number' && typeof lineY === 'number') { - this.columnMoverLabel.setAttribute('y', lineY - this.table.stateManager.scroll.verticalBarPos); - this.columnMoverLine.setAttribute('y', lineY - this.table.stateManager.scroll.verticalBarPos); + this.columnMoverLabel.setAttribute('y', lineY); + this.columnMoverLine.setAttribute('y', lineY); this.columnMoverBack.setAttribute('y', backY); } } diff --git a/packages/vtable/src/state/cell-move/index.ts b/packages/vtable/src/state/cell-move/index.ts index 150c1cd5b..4daaf8f69 100644 --- a/packages/vtable/src/state/cell-move/index.ts +++ b/packages/vtable/src/state/cell-move/index.ts @@ -58,19 +58,39 @@ export function updateMoveCol(col: number, row: number, x: number, y: number, st let backX; let lineY; let backY; - const cellLocation = state.table.getCellLocation(col, row); + const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource); if (cellLocation === 'columnHeader') { - (backX = state.columnMove.x), - (lineX = + backX = state.columnMove.x; + if (state.table.isFrozenColumn(col)) { + lineX = state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) - : state.table.getColsWidth(0, state.columnMove.colTarget - 1)); + : state.table.getColsWidth(0, state.columnMove.colTarget - 1); + } else if (state.table.isRightFrozenColumn(col)) { + lineX = state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1); + } else { + lineX = + (state.columnMove.colTarget >= state.columnMove.colSource + ? state.table.getColsWidth(0, state.columnMove.colTarget) + : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) - + state.table.stateManager.scroll.horizontalBarPos; + } } else if (cellLocation === 'rowHeader') { - (backY = state.columnMove.y), - (lineY = + backY = state.columnMove.y; + if (state.table.isFrozenRow(row)) { + lineY = state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) - : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)); + : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1); + } else if (state.table.isBottomFrozenRow(row)) { + lineY = state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1); + } else { + lineY = + (state.columnMove.rowTarget >= state.columnMove.rowSource + ? state.table.getRowsHeight(0, state.columnMove.rowTarget) + : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) - + state.table.stateManager.scroll.verticalBarPos; + } } state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY); From b6a175af745653e9c00b06188b0fe69d572bda46 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 22 Jan 2024 16:43:57 +0800 Subject: [PATCH 15/65] docs: update changlog of rush --- .../feat-dragHeaderInteraction_2024-01-22-08-43.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json diff --git a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json new file mode 100644 index 000000000..9ffb21330 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "refactor: when drag header move to frozen region then markLine show positon\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 1dd001b2ad215778cd47a1a6ad32e1d43b30d55f Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 22 Jan 2024 19:07:36 +0800 Subject: [PATCH 16/65] docs: add frozenColDragHeaderMode --- docs/assets/option/en/table/listTable.md | 10 +++++++++- docs/assets/option/zh/table/listTable.md | 9 +++++++++ packages/vtable/src/ListTable.ts | 2 ++ packages/vtable/src/core/BaseTable.ts | 5 +---- packages/vtable/src/ts-types/base-table.ts | 15 +++++---------- packages/vtable/src/ts-types/table-engine.ts | 6 ++++++ 6 files changed, 32 insertions(+), 15 deletions(-) diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md index 81bd053ec..7aa39eb3f 100644 --- a/docs/assets/option/en/table/listTable.md +++ b/docs/assets/option/en/table/listTable.md @@ -97,4 +97,12 @@ When displayed as a tree structure, the indentation value of each layer of conte ## hierarchyExpandLevel(number) -When displayed as a tree structure, the number of levels is expanded by default. The default value is 1, which only displays the root node. If configured to `Infinity`, all nodes will be expanded. \ No newline at end of file +When displayed as a tree structure, the number of levels is expanded by default. The default value is 1, which only displays the root node. If configured to `Infinity`, all nodes will be expanded. + +## frozenColDragHeaderMode(string) = 'fixedFrozenCount' + +Drag the table header to move the position. Rules for frozen parts. The default is fixedFrozenCount. + +- "disabled" (disables adjusting the position of frozen columns): Do not allow other column header drag operations to involve frozen columns, and frozen columns remain unchanged. +- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): Allow the header drag operation of other columns to involve the frozen column part, and adjust the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. +- "fixedFrozenCount" (can adjust frozen columns and keep the number of frozen columns unchanged): Allows you to freely drag the headers of other columns into or out of the frozen column position while keeping the number of frozen columns unchanged. \ No newline at end of file diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md index 5d7f95f17..80106edee 100644 --- a/docs/assets/option/zh/table/listTable.md +++ b/docs/assets/option/zh/table/listTable.md @@ -96,3 +96,12 @@ headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI } ## hierarchyExpandLevel(number) 展示为树形结构时，默认展开层数。默认为1只显示根节点，配置为`Infinity`则全部展开。 + + +## frozenColDragHeaderMode(string) = 'fixedFrozenCount' + +拖拽表头移动位置 针对冻结部分的规则 默认为fixedFrozenCount + +- "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 +- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 +- "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 \ No newline at end of file diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index ad910a26c..32b0c513e 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -58,6 +58,7 @@ export class ListTable extends BaseTable implements ListTableAPI { super(container as HTMLElement, options); const internalProps = this.internalProps; + internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode; //分页配置 this.pagination = options.pagination; internalProps.sortState = options.sortState; @@ -315,6 +316,7 @@ export class ListTable extends BaseTable implements ListTableAPI { updateOption(options: ListTableConstructorOptions, accelerateFirstScreen = false) { const internalProps = this.internalProps; super.updateOption(options); + internalProps.frozenColDragHeaderMode = options.frozenColDragHeaderMode; //分页配置 this.pagination = options.pagination; //更新protectedSpace diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 161b4105c..e253e7f6e 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -176,7 +176,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // disableRowHeaderColumnResize, columnResizeMode, dragHeaderMode, - frozenColDragHeaderMode, // showHeader, // scrollBar, showFrozenIcon, @@ -263,7 +262,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.columnResizeMode = columnResizeMode; internalProps.dragHeaderMode = dragHeaderMode; - internalProps.frozenColDragHeaderMode = frozenColDragHeaderMode; internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; @@ -1859,7 +1857,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // disableRowHeaderColumnResize, columnResizeMode, dragHeaderMode, - frozenColDragHeaderMode, + // scrollBar, showFrozenIcon, allowFrozenColCount, @@ -1933,7 +1931,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.columnResizeMode = columnResizeMode; internalProps.dragHeaderMode = dragHeaderMode; - internalProps.frozenColDragHeaderMode = frozenColDragHeaderMode; internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); internalProps.overscrollBehavior = overscrollBehavior ?? 'auto'; diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index a9f3114a8..99ec21ad5 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -99,11 +99,11 @@ export interface IBaseTableProtected { /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; /** 拖拽表头移动位置 针对冻结部分的规则 - * "disabled"（禁用）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 - * "adjustFrozenCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 - * "freeAdjust"（自由调整）：允许自由拖拽其他列的表头进入或移出冻结列位置，同时保持冻结列的数量不变。 + * "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 + * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 */ - frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'freeAdjust'; + frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; cachedRecordsRowHeightMap: NumberMap; //存储每一条记录对应行的行高，只有当设置为自动换行随内容撑开才会起作用 // headerRowHeightsMap: NumberMap; //目前是用来存储了表头各行的高度，从headerRowHeight计算而来，headerRowHeight可以设置为数组的形式 _rowHeightsMap: NumberMap; //存储数据条目每行高度 @@ -257,12 +257,7 @@ export interface BaseTableConstructorOptions { columnResizeMode?: 'all' | 'none' | 'header' | 'body'; /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; - /** 拖拽表头移动位置 针对冻结部分的规则 - * "disabled"（禁用）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 - * "adjustFrozenCount"（调整数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 - * "freeAdjust"（自由调整）：允许自由拖拽其他列的表头进入或移出冻结列位置，同时保持冻结列的数量不变。 - */ - frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'freeAdjust'; + /** * 是否显示固定列图钉 基本表格生效 */ diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index 270995db3..9fb63978c 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -170,6 +170,12 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); /** 编辑触发时机 双击事件 单击事件 api手动开启编辑。默认为双击'doubleclick' */ editCellTrigger?: 'doubleclick' | 'click' | 'api'; + /** 拖拽表头移动位置 针对冻结部分的规则 默认为fixedFrozenCount + * "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 + * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 + */ + frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; } export interface ListTableAPI extends BaseTableAPI { From 3a719c36999e14669af3a7187e29dd4231951c74 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 22 Jan 2024 19:31:35 +0800 Subject: [PATCH 17/65] feat: update vrender version --- common/config/rush/pnpm-lock.yaml | 66 +++++++++++++++---------------- packages/vtable/package.json | 8 ++-- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index dd19d9e84..68f37d6b6 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -181,9 +181,9 @@ importers: '@types/react-dom': ^18.0.0 '@visactor/vchart': 1.8.7 '@visactor/vdataset': ~0.17.1 - '@visactor/vrender-components': 0.17.17-alpha.1 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-components': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.17.1 @@ -226,9 +226,9 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vrender-components': 0.17.17-alpha.1 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-components': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.17.3 @@ -3365,9 +3365,9 @@ packages: '@visactor/vgrammar-util': 0.10.8 '@visactor/vgrammar-wordcloud': 0.10.8 '@visactor/vgrammar-wordcloud-shape': 0.10.8 - '@visactor/vrender-components': 0.17.17-alpha.1 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-components': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 '@visactor/vutils-extension': 1.8.7 @@ -3405,9 +3405,9 @@ packages: '@visactor/vdataset': 0.17.3 '@visactor/vgrammar-coordinate': 0.10.8 '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-components': 0.17.17-alpha.1 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-components': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 @@ -3416,8 +3416,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.10.8 '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vutils': 0.17.3 /@visactor/vgrammar-projection/0.10.8: @@ -3433,8 +3433,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.10.8 '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vutils': 0.17.3 /@visactor/vgrammar-util/0.10.8: @@ -3447,8 +3447,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.10.8 '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 @@ -3457,29 +3457,29 @@ packages: dependencies: '@visactor/vgrammar-core': 0.10.8 '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vutils': 0.17.3 - /@visactor/vrender-components/0.17.17-alpha.1: - resolution: {integrity: sha512-WpNnndbG8i/Q2qD00ktZ3yTWqf4FKnlaKceJvUTGD6vRW+uqtWVpQ8hMNa/VgIxA1sjF2RVHkJYi5sqadHGncg==} + /@visactor/vrender-components/0.17.18-alpha.0: + resolution: {integrity: sha512-5YNPpKVmGhCR6aWcFHHgInMVNB8/oocNAUVR1LbxefrzCYcaohlutOll808K7twhKSEblpb0dynEQR+mVkGboQ==} dependencies: - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vrender-core/0.17.17-alpha.1: - resolution: {integrity: sha512-FceY91PpI5rZRsoFwKegMrvnFEYA/B9DR1X00guq/Mqb81cySac3ks8c/VNZ0K3SMIz/lyc7tTo87r31is7p2w==} + /@visactor/vrender-core/0.17.18-alpha.0: + resolution: {integrity: sha512-LBkfgp5/zmcaoJQRnk967Z4OaYfIfU8X71SPcmmksKm4nfS1rzb+tSodESoXofkdCOa5W1FF6hIFNMP31X+FsQ==} dependencies: '@visactor/vutils': 0.17.3 color-convert: 2.0.1 - /@visactor/vrender-kits/0.17.17-alpha.1: - resolution: {integrity: sha512-cW8yTvEQQHUDp6YOJyb2d6PuQiP8dC0fKJUJzoVRsBLw21+JeZVKkq59OIv7A1dP5MS2vOSd49UI/tgL82GDoA==} + /@visactor/vrender-kits/0.17.18-alpha.0: + resolution: {integrity: sha512-aGp+fdXGeLuhbqkok9xzXlM4N2evdEubFyG+0vedV/ctfmqkZRAqWwzkoKsSVJ7dFM1jUrq0VPNWcqt3Wll1ag==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 '@visactor/vutils': 0.17.3 roughjs: 4.5.2 @@ -3491,8 +3491,8 @@ packages: /@visactor/vutils-extension/1.8.5: resolution: {integrity: sha512-3DJMhGLmQ5Mk6VSxuLFKCzM9XIFkwGauU4el6skUY5qmmAbyZjOyneycAUiGCcbxZHvHpg1jyRk27Eipf4+bgQ==} dependencies: - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 dev: false @@ -3500,8 +3500,8 @@ packages: /@visactor/vutils-extension/1.8.7: resolution: {integrity: sha512-o6Hw5+jqj9IzPS6babV0fyQ8RC9r2DHfvSx5fC/cEuHdvCVYjtzdHJHGmjJ42EAp4PGGUUn2MtGyaxFtzxSD5A==} dependencies: - '@visactor/vrender-core': 0.17.17-alpha.1 - '@visactor/vrender-kits': 0.17.17-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-kits': 0.17.18-alpha.0 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 diff --git a/packages/vtable/package.json b/packages/vtable/package.json index fcce5d93c..14f8385b2 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,9 +50,9 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender-core": "0.17.17-alpha.1", - "@visactor/vrender-kits": "0.17.17-alpha.1", - "@visactor/vrender-components": "0.17.17-alpha.1", + "@visactor/vrender-core": "0.17.18-alpha.0", + "@visactor/vrender-kits": "0.17.18-alpha.0", + "@visactor/vrender-components": "0.17.18-alpha.0", "@visactor/vutils-extension": "~1.8.5", "@visactor/vutils": "~0.17.1", "@visactor/vscale": "~0.17.1", @@ -124,4 +124,4 @@ "url": "https://github.com/VisActor/VTable.git", "directory": "packages/vtable" } -} +} \ No newline at end of file From 8805384962b41f65fd91753d9e2c1774e462d745 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 22 Jan 2024 19:37:47 +0800 Subject: [PATCH 18/65] docs: add frozenColDragHeaderMode --- docs/assets/guide/en/interaction/drag_header.md | 14 ++++++++++++++ docs/assets/guide/zh/interaction/drag_header.md | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/docs/assets/guide/en/interaction/drag_header.md b/docs/assets/guide/en/interaction/drag_header.md index 0c8905131..cfe39c7ec 100644 --- a/docs/assets/guide/en/interaction/drag_header.md +++ b/docs/assets/guide/en/interaction/drag_header.md @@ -60,4 +60,18 @@ Sometimes, we don't want certain columns to participate in drag-and-drop transpo As with the above code, the "Sales" column cannot be dragged and transposed. +## Restrict dragging of frozen columns +Drag and drop the table header to move the position. Select different effects according to the business scenario for the rules of the frozen part. For example, you can prohibit dragging of frozen columns, or adjust the number of frozen columns. + +Constraints can be made through the following configuration (only valid for ListTable): +``` +Drag the table header to move the position. Rules for frozen parts. The default is fixedFrozenCount. +frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; +``` +The different rules are described below: + +- "disabled" (disables adjusting the position of frozen columns): Do not allow other column header drag operations to involve frozen columns, and frozen columns remain unchanged. +- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): Allow the header drag operation of other columns to involve the frozen column part, and adjust the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. +- "fixedFrozenCount" (can adjust frozen columns and keep the number of frozen columns unchanged): Allows you to freely drag the headers of other columns into or out of the frozen column position while keeping the number of frozen columns unchanged. + So far, we have introduced the drag-and-drop header transposition function of VTable, including the activation of the drag-and-drop header transposition function, the style configuration of the drag-and-drop header transposition mark line, and whether a certain column can be dragged. By mastering these functions, you can more easily perform data analytics and processing in VTable. diff --git a/docs/assets/guide/zh/interaction/drag_header.md b/docs/assets/guide/zh/interaction/drag_header.md index f624c61a9..ef61d3255 100644 --- a/docs/assets/guide/zh/interaction/drag_header.md +++ b/docs/assets/guide/zh/interaction/drag_header.md @@ -60,4 +60,18 @@ const table = new VTable.ListTable({ 如上述代码，“销量”列不可拖拽换位。 +## 限制冻结列的拖拽 +拖拽表头移动位置 针对冻结部分的规则根据业务场景选择不同的效果，如可以禁止拖拽冻结列，或者调整冻结列的数量。 + +可以通过下面的配置进行约束(仅针对ListTable生效)： +``` +拖拽表头移动位置 针对冻结部分的规则 默认为fixedFrozenCount +frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; +``` +不同规则描述如下： + +- "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 +- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 +- "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 + 至此，我们已经介绍了 VTable 的拖拽表头换位功能，括拖拽表头换位功能的开启、拖拽表头换位标记线的样式配置以及某一列是否可以拖拽。通过掌握这些功能，您可以更便捷地在 VTable 中进行数据分析与处理。 From 1653c06a4a0bb85a86a0374d009df66168aa1744 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 22 Jan 2024 20:08:29 +0800 Subject: [PATCH 19/65] fix: frozenColDragHeaderMode set adjustFrozenCount leftBottomCell position --- packages/vtable/src/scenegraph/layout/move-cell.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/vtable/src/scenegraph/layout/move-cell.ts b/packages/vtable/src/scenegraph/layout/move-cell.ts index 1e290f242..29e22ab0f 100644 --- a/packages/vtable/src/scenegraph/layout/move-cell.ts +++ b/packages/vtable/src/scenegraph/layout/move-cell.ts @@ -81,6 +81,7 @@ export function moveHeaderPosition( const columnHeaderGroup = table.scenegraph.getColGroup(col, true); const columnGroup = table.scenegraph.getColGroup(col); const columnBottomGroup = table.scenegraph.getColGroupInBottom(col); + const columnLeftBottomGroup = table.scenegraph.getColGroupInLeftBottomCorner(col); const columnRightBottomGroup = table.scenegraph.getColGroupInRightBottomCorner(col); if (columnHeaderGroup) { columnHeaderGroup.setAttribute('width', columnWidth); @@ -106,6 +107,12 @@ export function moveHeaderPosition( child.setAttribute('width', columnWidth); }); } + if (columnLeftBottomGroup) { + columnLeftBottomGroup.setAttribute('width', columnWidth); + columnLeftBottomGroup.forEachChildren((child: Group) => { + child.setAttribute('width', columnWidth); + }); + } } // 更新容器尺寸 From c35d4c41270c2d12b226ee4fbc411d14227bf454 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 23 Jan 2024 10:33:09 +0800 Subject: [PATCH 20/65] docs: add frozenColDragHeaderMode --- docs/assets/guide/en/interaction/drag_header.md | 4 ++-- docs/assets/guide/zh/interaction/drag_header.md | 4 ++-- docs/assets/option/en/table/listTable.md | 4 ++-- docs/assets/option/zh/table/listTable.md | 4 ++-- packages/vtable/src/ts-types/base-table.ts | 4 ++-- packages/vtable/src/ts-types/table-engine.ts | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/assets/guide/en/interaction/drag_header.md b/docs/assets/guide/en/interaction/drag_header.md index cfe39c7ec..bbf169605 100644 --- a/docs/assets/guide/en/interaction/drag_header.md +++ b/docs/assets/guide/en/interaction/drag_header.md @@ -70,8 +70,8 @@ frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; ``` The different rules are described below: -- "disabled" (disables adjusting the position of frozen columns): Do not allow other column header drag operations to involve frozen columns, and frozen columns remain unchanged. -- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): Allow the header drag operation of other columns to involve the frozen column part, and adjust the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. +- "disabled" (disables adjusting the position of frozen columns): The headers of other columns are not allowed to be moved into the frozen column, nor are the frozen columns allowed to be moved out. The frozen column remains unchanged. +- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): allows the headers of other columns to move into the frozen column, and the frozen column to move out, and adjusts the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. - "fixedFrozenCount" (can adjust frozen columns and keep the number of frozen columns unchanged): Allows you to freely drag the headers of other columns into or out of the frozen column position while keeping the number of frozen columns unchanged. So far, we have introduced the drag-and-drop header transposition function of VTable, including the activation of the drag-and-drop header transposition function, the style configuration of the drag-and-drop header transposition mark line, and whether a certain column can be dragged. By mastering these functions, you can more easily perform data analytics and processing in VTable. diff --git a/docs/assets/guide/zh/interaction/drag_header.md b/docs/assets/guide/zh/interaction/drag_header.md index ef61d3255..cd39e2eb6 100644 --- a/docs/assets/guide/zh/interaction/drag_header.md +++ b/docs/assets/guide/zh/interaction/drag_header.md @@ -70,8 +70,8 @@ frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; ``` 不同规则描述如下： -- "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 -- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 +- "disabled"（禁止调整冻结列位置）：不允许其他列的表头移入冻结列，也不允许冻结列移出，冻结列保持不变。 +- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头移入冻结列，及冻结列移出，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 - "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 至此，我们已经介绍了 VTable 的拖拽表头换位功能，括拖拽表头换位功能的开启、拖拽表头换位标记线的样式配置以及某一列是否可以拖拽。通过掌握这些功能，您可以更便捷地在 VTable 中进行数据分析与处理。 diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md index 7aa39eb3f..9610150b7 100644 --- a/docs/assets/option/en/table/listTable.md +++ b/docs/assets/option/en/table/listTable.md @@ -103,6 +103,6 @@ When displayed as a tree structure, the number of levels is expanded by default. Drag the table header to move the position. Rules for frozen parts. The default is fixedFrozenCount. -- "disabled" (disables adjusting the position of frozen columns): Do not allow other column header drag operations to involve frozen columns, and frozen columns remain unchanged. -- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): Allow the header drag operation of other columns to involve the frozen column part, and adjust the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. +- "disabled" (disables adjusting the position of frozen columns): The headers of other columns are not allowed to be moved into the frozen column, nor are the frozen columns allowed to be moved out. The frozen column remains unchanged. +- "adjustFrozenCount" (adjust the number of frozen columns based on the interaction results): allows the headers of other columns to move into the frozen column, and the frozen column to move out, and adjusts the number of frozen columns based on the dragging action. When the headers of other columns are dragged into the frozen column position, the number of frozen columns increases; when the headers of other columns are dragged out of the frozen column position, the number of frozen columns decreases. - "fixedFrozenCount" (can adjust frozen columns and keep the number of frozen columns unchanged): Allows you to freely drag the headers of other columns into or out of the frozen column position while keeping the number of frozen columns unchanged. \ No newline at end of file diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md index 80106edee..3b869cf3f 100644 --- a/docs/assets/option/zh/table/listTable.md +++ b/docs/assets/option/zh/table/listTable.md @@ -102,6 +102,6 @@ headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI } 拖拽表头移动位置 针对冻结部分的规则 默认为fixedFrozenCount -- "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 -- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 +- "disabled"（禁止调整冻结列位置）：不允许其他列的表头移入冻结列，也不允许冻结列移出，冻结列保持不变。 +- "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头移入冻结列，及冻结列移出，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 - "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 \ No newline at end of file diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 99ec21ad5..c6d2db30e 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -99,8 +99,8 @@ export interface IBaseTableProtected { /** 控制拖拽表头移动位置顺序开关 */ dragHeaderMode?: 'all' | 'none' | 'column' | 'row'; /** 拖拽表头移动位置 针对冻结部分的规则 - * "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 - * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "disabled"（禁止调整冻结列位置）：不允许其他列的表头移入冻结列，也不允许冻结列移出，冻结列保持不变。 + * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头移入冻结列，及冻结列移出，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 * "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 */ frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index 9fb63978c..6c2aa5a80 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -171,8 +171,8 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions /** 编辑触发时机 双击事件 单击事件 api手动开启编辑。默认为双击'doubleclick' */ editCellTrigger?: 'doubleclick' | 'click' | 'api'; /** 拖拽表头移动位置 针对冻结部分的规则 默认为fixedFrozenCount - * "disabled"（禁止调整冻结列位置）：不允许其他列的表头拖拽操作涉及到冻结列部分，冻结列保持不变。 - * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头拖拽操作涉及到冻结列部分，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 + * "disabled"（禁止调整冻结列位置）：不允许其他列的表头移入冻结列，也不允许冻结列移出，冻结列保持不变。 + * "adjustFrozenCount"（根据交互结果调整冻结数量）：允许其他列的表头移入冻结列，及冻结列移出，并根据拖拽的动作调整冻结列的数量。当其他列的表头被拖拽进入冻结列位置时，冻结列数量增加；当其他列的表头被拖拽移出冻结列位置时，冻结列数量减少。 * "fixedFrozenCount"（可调整冻结列，并维持冻结数量不变）：允许自由拖拽其他列的表头移入或移出冻结列位置，同时保持冻结列的数量不变。 */ frozenColDragHeaderMode?: 'disabled' | 'adjustFrozenCount' | 'fixedFrozenCount'; From 9321c1942928ffde49f59fafc2ae5b52810681f8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 23 Jan 2024 16:41:35 +0800 Subject: [PATCH 21/65] feat: add image load task --- common/config/rush/pnpm-lock.yaml | 189 ++++++++++-------- docs/package.json | 2 +- packages/react-vtable/package.json | 4 +- packages/vtable-export/package.json | 4 +- packages/vtable/package.json | 8 +- packages/vtable/src/icons.ts | 10 + .../graphic/contributions/draw-interceptor.ts | 143 +++++++++++++ .../scenegraph/graphic/contributions/index.ts | 8 +- .../group-creater/cell-type/image-cell.ts | 12 +- 9 files changed, 283 insertions(+), 97 deletions(-) create mode 100644 packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 68f37d6b6..9b25279e4 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vtable-editors': workspace:* '@visactor/vtable-export': workspace:* @@ -37,7 +37,7 @@ importers: yargs: ^17.1.1 dependencies: '@arco-design/web-react': 2.46.1_yok4whjnfjlfyjmdmcaku5uzjq - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': link:../packages/vtable '@visactor/vtable-editors': link:../packages/vtable-editors '@visactor/vtable-export': link:../packages/vtable-export @@ -82,7 +82,7 @@ importers: '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 '@types/react-is': ^17.0.3 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vutils': ~0.17.1 '@vitejs/plugin-react': 3.1.0 @@ -133,7 +133,7 @@ importers: '@types/react': 18.2.46 '@types/react-dom': 18.2.18 '@types/react-is': 17.0.7 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -179,11 +179,11 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vdataset': ~0.17.1 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-components': 0.17.18-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.17.1 @@ -226,9 +226,9 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-components': 0.17.18-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': 0.17.3 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.17.3 @@ -249,7 +249,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 18.2.46 '@types/react-dom': 18.2.18 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -348,7 +348,7 @@ importers: '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 '@types/react-is': ^17.0.3 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vutils': ~0.17.1 '@vitejs/plugin-react': 3.1.0 @@ -402,7 +402,7 @@ importers: '@types/react': 18.2.46 '@types/react-dom': 18.2.18 '@types/react-is': 17.0.7 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -3354,23 +3354,23 @@ packages: resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==} dev: true - /@visactor/vchart/1.8.7: - resolution: {integrity: sha512-M0kFlZ17TcamZSRrO/8X45mjBxBPrPAQyJK2amKb4LR6yu2tJNMQJMVSUzC3TPeoyZBC6Qhthj0h6PLB88qTRA==} + /@visactor/vchart/1.9.0-alpha.1: + resolution: {integrity: sha512-SedXr+tAN+8V9X5S2StFThRFKLCDMA9qF9XMYESbwiimng8iYeF7wxlpBmeCLCrJSYqDs1lZTdogYKdmkJFMeQ==} dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-hierarchy': 0.10.8 - '@visactor/vgrammar-projection': 0.10.8 - '@visactor/vgrammar-sankey': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vgrammar-wordcloud': 0.10.8 - '@visactor/vgrammar-wordcloud-shape': 0.10.8 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-hierarchy': 0.11.3 + '@visactor/vgrammar-projection': 0.11.3 + '@visactor/vgrammar-sankey': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vgrammar-wordcloud': 0.11.3 + '@visactor/vgrammar-wordcloud-shape': 0.11.3 + '@visactor/vrender-components': 0.17.16 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - '@visactor/vutils-extension': 1.8.7 + '@visactor/vutils-extension': 1.9.0-alpha.1 /@visactor/vdataset/0.17.3: resolution: {integrity: sha512-uckfCq1gLvqUlbyi3p9GiY8qcv2uNZ2KzLxO0/CVfDUXZ1IsERT8363ue7vejctEpqEa112vgqYrw73qlumH9Q==} @@ -3393,95 +3393,120 @@ packages: simplify-geojson: 1.0.5 topojson-client: 3.1.0 - /@visactor/vgrammar-coordinate/0.10.8: - resolution: {integrity: sha512-AfewiepfTElin5G2pUuINXoDGHb1xVenIzGDDY4AfJsVRAaRqXLJv4tqBo1Qas9RqS5W3m77697J+b6ExvDLgQ==} + /@visactor/vgrammar-coordinate/0.11.3: + resolution: {integrity: sha512-m9CRwnBBirE20OL3ua73J655c+S7waOYz+bjHScQ+3PTaiXs6iCLfK90GMRWUQSAoDClNQQ/EDK60ry7XUgufw==} dependencies: - '@visactor/vgrammar-util': 0.10.8 + '@visactor/vgrammar-util': 0.11.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-core/0.10.8: - resolution: {integrity: sha512-lQIQBZhARyCOObYwXF8Miwnh8L6AsnGqZJ45P+1X/Pk3ZqUPBXjonW2fWcrgKVGaZ59G3P9OEp1rwErmIsrhBg==} + /@visactor/vgrammar-core/0.11.3: + resolution: {integrity: sha512-6AlPN/DARyf892mL2ixT5n/1tfQMVK4mVKQrjY5s4uP9XWHXNtwyZW1t1ABt6+j9/psAMErFepXcYWSdRkr9bA==} dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vgrammar-coordinate': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-coordinate': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-components': 0.17.16 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-hierarchy/0.10.8: - resolution: {integrity: sha512-eXZgzCDbj+8YqgLgAKdS3ad3ZcpxsnLFeZibSkNKvgi8Wc5zHTZ2kf/IQ525t/0I/CtZlfccVfUkhA6O/QJXBg==} + /@visactor/vgrammar-hierarchy/0.11.3: + resolution: {integrity: sha512-gU3rXrtASTG02GanmqKAzJPEfBcJaAQ0F5rBkWBkYzT3nr4/x+WxDVv77xbJ//BsJRS7VXnDZ9TxddOCf4LT5A==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-projection/0.10.8: - resolution: {integrity: sha512-u6LLGcedly1ZlgcaAWakFJUBm5WcctrfYwQqi5vJ9iiCnKu9Yhw3y5wjlTcxFcTYpnPKyfucF7Sk0Px+w/Q6Xw==} + /@visactor/vgrammar-projection/0.11.3: + resolution: {integrity: sha512-XY+FsRp6rHVv5BumGsXgFmwfrDM+p13a9or4ltJckfdM9B1yzRgdBZXElk4rc5VuOlv0hVOUuwu3hu1nktUoCA==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 '@visactor/vutils': 0.17.3 d3-geo: 1.12.1 - /@visactor/vgrammar-sankey/0.10.8: - resolution: {integrity: sha512-cH1lcNU+N/wTtGYTh2ny21kQUaA0/zFFL2j4gUGh1dWx4jT1/jL+/ANDYTW7hAbMcQFrv+2pBrU4G4gQXfSMQg==} + /@visactor/vgrammar-sankey/0.11.3: + resolution: {integrity: sha512-ZJRwdlT0g6woxFtnW5TanXU9ybppV9KsQ2ISQKAC5ktgnE+KrhoMaUE/xcC7S0lQUbiEOtAgeLS8iBNXHukmYw==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-util/0.10.8: - resolution: {integrity: sha512-VgdeoX1yWYiJv/KXVRA2maMhiqTXfducGEwMq4HAJ6PWJDklQv2HovENZUpqynXRh/1VbgSN4O/dHryujMucNw==} + /@visactor/vgrammar-util/0.11.3: + resolution: {integrity: sha512-tNe7wPHk5PCoqYVyz6CSh9onmfcK/idKSG7KyC3owqjou8BaI+ThzedewiwPWB96gWwHjoLo5uG9kwcCGOni2Q==} dependencies: '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-wordcloud-shape/0.10.8: - resolution: {integrity: sha512-YTcMpnWSGcQo8SXQcPzjXkd8e3UuCKgyYcfpn4G5L+yvpYEza6DM+hGwKG0gL73qs2YTvFnO3nkdnmxmZwAoKw==} + /@visactor/vgrammar-wordcloud-shape/0.11.3: + resolution: {integrity: sha512-aMLS+sUO2S8k57Bfm/vypTokL4pzlYNCJX1tbUHh3bcoUyWqGveBwOkB1P6IzOD4TMMEDSLAA0bORoNfYI3aOw==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-wordcloud/0.10.8: - resolution: {integrity: sha512-HXdXcG/pkFkQsKN+T2O6FLStl/ePjVTKOUZK5Kk+vQcK0+/v1R8eldv3b0aqoIuZLoMqc0ku4bPNHc7vmLQh5Q==} + /@visactor/vgrammar-wordcloud/0.11.3: + resolution: {integrity: sha512-z8hq+2P2pc1t5DGPEdgEAMoAffXayCye+W+Z8FRiIZflHdDlYOQrBL1gTMkh2EXXjZIYuf4qjslK4evdvrLKuQ==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vrender-components/0.17.18-alpha.0: - resolution: {integrity: sha512-5YNPpKVmGhCR6aWcFHHgInMVNB8/oocNAUVR1LbxefrzCYcaohlutOll808K7twhKSEblpb0dynEQR+mVkGboQ==} + /@visactor/vrender-components/0.17.16: + resolution: {integrity: sha512-4aS6BklJUXK94n/hHA1785Cnt4nn8zt/bSaYWmmNQCEnHasy8g/W9ppWV9M4jPlaql/0edEzDruZZef004av/Q==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vrender-core/0.17.18-alpha.0: - resolution: {integrity: sha512-LBkfgp5/zmcaoJQRnk967Z4OaYfIfU8X71SPcmmksKm4nfS1rzb+tSodESoXofkdCOa5W1FF6hIFNMP31X+FsQ==} + /@visactor/vrender-components/0.17.18-alpha.1: + resolution: {integrity: sha512-LsEhO7xs6hnCSqvlKQqOZDvr8fUCfoeFrRT835flw+3OLsP+DpI7bEBegqFzNTZUxLM+GmMue7TVlQDZg+IclQ==} + dependencies: + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 + '@visactor/vscale': 0.17.3 + '@visactor/vutils': 0.17.3 + dev: false + + /@visactor/vrender-core/0.17.16: + resolution: {integrity: sha512-BKdGUuw6dlSGpTF3gApAxdW4Hzdld2WuDhhj2hY8RyVYcH0BaSZM1v25jPtTnOepBdT8t+DTGiHVKWKaairWOA==} + dependencies: + '@visactor/vutils': 0.17.3 + color-convert: 2.0.1 + + /@visactor/vrender-core/0.17.18-alpha.1: + resolution: {integrity: sha512-DbdBDjcF7m0CFKacKQfCgAmt8eoBxwZ6vUyWKqyIBLK5PFIFAbnxvZAxA5iw9/ORoaIrWbGkquYkN4HAGjKKnw==} dependencies: '@visactor/vutils': 0.17.3 color-convert: 2.0.1 + dev: false + + /@visactor/vrender-kits/0.17.16: + resolution: {integrity: sha512-meitvZwbcU2a5DKpUhYZ5yYeqnKXF1VJL4uCDc2t6LM2SQ45jLWqDmrilwoEJ1suj1a1hPlfJ1L/Y8CP6I3dLg==} + dependencies: + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.17.16 + '@visactor/vutils': 0.17.3 + roughjs: 4.5.2 - /@visactor/vrender-kits/0.17.18-alpha.0: - resolution: {integrity: sha512-aGp+fdXGeLuhbqkok9xzXlM4N2evdEubFyG+0vedV/ctfmqkZRAqWwzkoKsSVJ7dFM1jUrq0VPNWcqt3Wll1ag==} + /@visactor/vrender-kits/0.17.18-alpha.1: + resolution: {integrity: sha512-pmx/jMv1N9VO74BapbvB2lhtO8Fe/rpH/naFXjSZqmPmPUu35eGwY7dsEvcNVC+n6l289zmplB2tIQ04TqkAKQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.1 '@visactor/vutils': 0.17.3 roughjs: 4.5.2 + dev: false /@visactor/vscale/0.17.3: resolution: {integrity: sha512-05ESzGvJU4lS5Ndv8+rins05RaOr1eIRBnXwIdzAxv/77MTJ9X8GxRGl1y/nR14XPpPVd9vgdzYRTCbpL6hPHg==} @@ -3491,17 +3516,17 @@ packages: /@visactor/vutils-extension/1.8.5: resolution: {integrity: sha512-3DJMhGLmQ5Mk6VSxuLFKCzM9XIFkwGauU4el6skUY5qmmAbyZjOyneycAUiGCcbxZHvHpg1jyRk27Eipf4+bgQ==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 dev: false - /@visactor/vutils-extension/1.8.7: - resolution: {integrity: sha512-o6Hw5+jqj9IzPS6babV0fyQ8RC9r2DHfvSx5fC/cEuHdvCVYjtzdHJHGmjJ42EAp4PGGUUn2MtGyaxFtzxSD5A==} + /@visactor/vutils-extension/1.9.0-alpha.1: + resolution: {integrity: sha512-4XCb57MyriONzSFUDYiluy2zBncyAgHTLQre5mWWKUT4il8C3hRQuKgNgmMSXCZ8T6ywUGClxDMXn/r6HMGKSQ==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 diff --git a/docs/package.json b/docs/package.json index e137e19ab..5e2ecb06f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "@visactor/vtable": "workspace:*", "@visactor/vtable-editors": "workspace:*", "@visactor/vtable-export": "workspace:*", - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index 419282ef2..994b2a2fd 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -52,7 +52,7 @@ "react-is": "^18.2.0" }, "devDependencies": { - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -96,4 +96,4 @@ "axios": "^1.4.0", "@types/react-is": "^17.0.3" } -} +} \ No newline at end of file diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json index 3263e7a3c..12d98f41f 100644 --- a/packages/vtable-export/package.json +++ b/packages/vtable-export/package.json @@ -40,7 +40,7 @@ "exceljs": "4.4.0" }, "devDependencies": { - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -85,4 +85,4 @@ "@types/react-is": "^17.0.3", "rollup-plugin-node-resolve": "5.2.0" } -} +} \ No newline at end of file diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 14f8385b2..8c62da3ef 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,9 +50,9 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender-core": "0.17.18-alpha.0", - "@visactor/vrender-kits": "0.17.18-alpha.0", - "@visactor/vrender-components": "0.17.18-alpha.0", + "@visactor/vrender-core": "0.17.18-alpha.1", + "@visactor/vrender-kits": "0.17.18-alpha.1", + "@visactor/vrender-components": "0.17.18-alpha.1", "@visactor/vutils-extension": "~1.8.5", "@visactor/vutils": "~0.17.1", "@visactor/vscale": "~0.17.1", @@ -61,7 +61,7 @@ }, "devDependencies": { "luxon": "*", - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", diff --git a/packages/vtable/src/icons.ts b/packages/vtable/src/icons.ts index c82a6bcae..4c35247c5 100644 --- a/packages/vtable/src/icons.ts +++ b/packages/vtable/src/icons.ts @@ -228,6 +228,16 @@ const builtins = { cursor: 'pointer' }; }, + get loading_pic(): SvgIcon { + return { + type: 'svg', + svg: '', + width: 400, + height: 300, + name: 'loading_pic', + positionType: IconPosition.left + }; + }, //展开状态的按钮 向下三角 get expand(): SvgIcon { return { diff --git a/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts b/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts new file mode 100644 index 000000000..bc7a3ea8f --- /dev/null +++ b/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts @@ -0,0 +1,143 @@ +import type { + IDrawItemInterceptorContribution, + IGraphic, + IRenderService, + IDrawContext, + IDrawContribution, + IGraphicRenderDrawParams, + IImage +} from '@src/vrender'; +import { injectable, createImage } from '@src/vrender'; +import * as icons from '../../../icons'; +import { calcKeepAspectRatioSize } from '../../utils/keep-aspect-ratio'; +let loadingImage: IImage; + +@injectable() +export class VTableDrawItemInterceptorContribution implements IDrawItemInterceptorContribution { + order: number = 1; + interceptors: IDrawItemInterceptorContribution[]; + constructor() { + this.interceptors = [new ImageDrawItemInterceptorContribution()]; + } + afterDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + for (let i = 0; i < this.interceptors.length; i++) { + if ( + this.interceptors[i].afterDrawItem && + this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params) + ) { + return true; + } + } + return false; + } + + beforeDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + // 【性能方案】判定写在外层,减少遍历判断耗时，10000条数据减少1ms + if ( + (!graphic.in3dMode || drawContext.in3dInterceptor) && + !graphic.shadowRoot && + !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic) + ) { + return false; + } + + for (let i = 0; i < this.interceptors.length; i++) { + if ( + this.interceptors[i].beforeDrawItem && + this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) + ) { + return true; + } + } + return false; + } +} + +export class ImageDrawItemInterceptorContribution implements IDrawItemInterceptorContribution { + order: number = 1; + + afterDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + if (graphic.type === 'image') { + this.drawItem(graphic, renderService, drawContext, drawContribution, params); + } + return false; + } + + protected drawItem( + graphic: IImage, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + const { image: url } = graphic.attribute; + if (!url || !graphic.resources) { + return false; + } + const res = graphic.resources.get(url); + if (res.state !== 'loading') { + return false; + } + + if (!loadingImage) { + const regedIcons = icons.get(); + const svg = (regedIcons.loading_pic as any).svg; + const width = (regedIcons.loading_pic as any).width; + const height = (regedIcons.loading_pic as any).height; + loadingImage = createImage({ + width, + height, + image: svg + }); + } + const { image: loadingUrl } = loadingImage.attribute; + if (!url || !loadingImage.resources) { + return false; + } + const loadingRes = loadingImage.resources.get(loadingUrl); + if (loadingRes.state !== 'success') { + return false; + } + + const { context } = drawContext; + context.highPerformanceSave(); + // 直接transform + graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true); + graphic.glyphHost && + graphic.glyphHost.parent && + context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, true); + + const b = graphic.AABBBounds; + + const { width, height } = calcKeepAspectRatioSize( + loadingRes.data.width, + loadingRes.data.height, + b.width(), + b.height() + ); + + context.drawImage(loadingRes.data, b.x1 + (b.width() - width) / 2, b.y1 + (b.height() - height) / 2, width, height); + + context.highPerformanceRestore(); + + return true; + } +} diff --git a/packages/vtable/src/scenegraph/graphic/contributions/index.ts b/packages/vtable/src/scenegraph/graphic/contributions/index.ts index d74d060ec..65648d490 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/index.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/index.ts @@ -5,7 +5,8 @@ import { RectRenderContribution, SplitRectBeforeRenderContribution, SplitRectAfterRenderContribution, - ContainerModule + ContainerModule, + DrawItemInterceptor } from '@src/vrender'; import { ChartRender, DefaultCanvasChartRender } from './chart-render'; import { AfterImageRenderContribution, BeforeImageRenderContribution } from './image-contribution-render'; @@ -25,6 +26,7 @@ import { ClipBodyGroupBeforeRenderContribution, ClipBodyGroupAfterRenderContribution } from './group-contribution-render'; +import { VTableDrawItemInterceptorContribution } from './draw-interceptor'; export default new ContainerModule((bind, unbind, isBound, rebind) => { // rect 渲染器注入contributions @@ -77,4 +79,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => { bind(GroupRenderContribution).toService(ClipBodyGroupBeforeRenderContribution); bind(ClipBodyGroupAfterRenderContribution).toSelf().inSingletonScope(); bind(GroupRenderContribution).toService(ClipBodyGroupAfterRenderContribution); + + // interceptor + bind(VTableDrawItemInterceptorContribution).toSelf().inSingletonScope(); + bind(DrawItemInterceptor).toService(VTableDrawItemInterceptorContribution); }); 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 140a6cef3..2effcf8ae 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 @@ -12,8 +12,6 @@ import { getProp, getFunctionalProp } from '../../utils/get-prop'; import { isValid } from '@visactor/vutils'; import { getQuadProps } from '../../utils/padding'; -const regedIcons = icons.get(); - export function createImageCellGroup( columnGroup: Group, xOrigin: number, @@ -335,7 +333,7 @@ function updateAutoSizingAndKeepAspectRatio( const originImage = image.resources.get(image.attribute.image).data; const { col, row } = cellGroup; - if (imageAutoSizing) { + if (imageAutoSizing && !isDamagePic(image)) { _adjustWidthHeight( col, row, @@ -345,8 +343,7 @@ function updateAutoSizingAndKeepAspectRatio( padding ); } - - if (keepAspectRatio) { + if (keepAspectRatio || isDamagePic(image)) { const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table); const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize( @@ -394,3 +391,8 @@ function updateAutoSizingAndKeepAspectRatio( } } } + +function isDamagePic(image: IImage) { + const regedIcons = icons.get(); + return image.attribute.image === (regedIcons.damage_pic as any).svg; +} From a791495c3f5fe3621ffbfd92149072fd04b0a01d Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 24 Jan 2024 18:00:07 +0800 Subject: [PATCH 22/65] refactor: optimize updateRow api performance & resize bottom frozen row not right --- packages/vtable/examples/list/list.ts | 161 +----------------- packages/vtable/src/layout/row-height-map.ts | 2 +- .../vtable/src/layout/simple-header-layout.ts | 2 +- .../scenegraph/layout/compute-row-height.ts | 11 +- .../src/scenegraph/layout/update-height.ts | 5 +- .../src/scenegraph/layout/update-row.ts | 13 +- packages/vtable/src/scenegraph/scenegraph.ts | 41 ++++- packages/vtable/src/tools/util.ts | 10 ++ 8 files changed, 66 insertions(+), 179 deletions(-) diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts index 6bb38aec5..0ffe2a9bf 100644 --- a/packages/vtable/examples/list/list.ts +++ b/packages/vtable/examples/list/list.ts @@ -16,7 +16,7 @@ const generatePersons = count => { }; export function createTable() { - const records = generatePersons(1000000); + const records = generatePersons(10); const columns: VTable.ColumnsDefine = [ { field: '', @@ -29,8 +29,8 @@ export function createTable() { { field: 'id', title: 'ID', - width: '1%', - minWidth: 200, + width: 'auto', + minWidth: 50, sort: true }, { @@ -149,156 +149,6 @@ export function createTable() { title: 'job', width: 200 }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, - { - field: 'city', - title: 'city', - width: 150 - }, - { - field: 'date1', - title: 'birthday', - width: 200 - }, - { - field: 'sex', - title: 'sex', - width: 100 - }, - { - field: 'tel', - title: 'telephone', - width: 150 - }, - { - field: 'work', - title: 'job', - width: 200 - }, { field: 'city', title: 'city', @@ -317,7 +167,8 @@ export function createTable() { rightFrozenColCount: 2, overscrollBehavior: 'none', autoWrapText: true, - heightMode: 'autoHeight', + heightMode: 'adaptive', + widthMode: 'adaptive', dragHeaderMode: 'all', keyboardOptions: { pasteValueToCell: true @@ -333,7 +184,7 @@ export function createTable() { console.log(arg); }); setTimeout(() => { - tableInstance.addRecord({ id: 333 }, 6); + tableInstance.addRecord({ id: 339993 }, 6); }, 3000); // tableInstance.on('sort_click', args => { // tableInstance.updateSortState( diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index a05606c50..a856bfd2f 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -169,7 +169,7 @@ export class NumberRangeMap { // add and reorder insert(position: number, value?: number) { - const lastIndex = this.getLastIndex(); + const lastIndex = this.getLastIndex() + 1; this.adjustOrder(position, position + 1, lastIndex - position); if (isValid(value)) { this.put(position, value); diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index b9336bf0d..863f7b23d 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -181,7 +181,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { } } else { row = col; - if (this.frozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { + if (this.bottomFrozenRowCount > 0 && row >= this.rowCount - this.bottomFrozenRowCount) { return true; } } diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index c5f6452ee..149e7d82a 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -277,7 +277,16 @@ export function computeRowsHeight( // table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row], true); } } - for (let row = 0; row < table.rowCount; row++) { + + const updateRowStart = table.scenegraph.proxy.rowStart; + let updateRowEnd = table.scenegraph.proxy.rowEnd; + if ( + table.heightMode === 'adaptive' || + (table.autoFillHeight && table.getAllRowsHeight() <= table.tableNoFrameHeight) + ) { + updateRowEnd = table.rowCount - 1; + } + for (let row = updateRowStart; row <= updateRowEnd; row++) { const newRowHeight = table.getRowHeight(row); if (newRowHeight !== oldRowHeights[row]) { // update the row height in scenegraph diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts index 40458263c..338cd5ea2 100644 --- a/packages/vtable/src/scenegraph/layout/update-height.ts +++ b/packages/vtable/src/scenegraph/layout/update-height.ts @@ -49,10 +49,13 @@ export function updateRowHeight(scene: Scenegraph, row: number, detaY: number, s rowStart = row + 1; rowEnd = scene.table.columnHeaderLevelCount - 1; + } else if (row >= scene.table.rowCount - scene.table.bottomFrozenRowCount) { + rowStart = row + 1; + rowEnd = scene.table.rowCount - 1; } else { rowStart = row + 1; // rowEnd = scene.table.rowCount - 1; - rowEnd = scene.bodyRowEnd; //- scene.table.bottomFrozenRowCount; + rowEnd = Math.min(scene.proxy.rowEnd, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1); //- scene.table.bottomFrozenRowCount; } // 更新以下行位置 diff --git a/packages/vtable/src/scenegraph/layout/update-row.ts b/packages/vtable/src/scenegraph/layout/update-row.ts index 1c6316ec3..4dc2250e8 100644 --- a/packages/vtable/src/scenegraph/layout/update-row.ts +++ b/packages/vtable/src/scenegraph/layout/update-row.ts @@ -5,6 +5,7 @@ import { Group } from '../graphic/group'; import { updateCell } from '../group-creater/cell-helper'; import type { Scenegraph } from '../scenegraph'; import { getCellMergeInfo } from '../utils/get-cell-merge'; +import { deduplication } from '../../tools/util'; /** * add and remove rows in scenegraph @@ -201,18 +202,6 @@ function addRow(row: number, scene: Scenegraph) { // scene.proxy.rowEnd++; // scene.proxy.currentRow++; } - -// array deduplication -function deduplication(array: number[]) { - const result = []; - for (let i = 0; i < array.length; i++) { - if (result.indexOf(array[i]) === -1) { - result.push(array[i]); - } - } - return result; -} - function resetRowNumber(scene: Scenegraph) { scene.bodyGroup.forEachChildren((colGroup: Group) => { let rowIndex = scene.bodyRowStart; diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index b7a872df8..f556a35f7 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -34,7 +34,7 @@ import { moveSelectingRangeComponentsToSelectedRangeComponents } from './select/ import { deleteAllSelectBorder, deleteLastSelectedRangeComponents } from './select/delete-select-border'; import { updateRow } from './layout/update-row'; import { handleTextStick } from './stick-text'; -import { computeRowsHeight } from './layout/compute-row-height'; +import { computeRowHeight, computeRowsHeight } from './layout/compute-row-height'; import { emptyGroup } from './utils/empty-group'; import { dealBottomFrozen, dealFrozen, dealRightFrozen, resetFrozen } from './layout/frozen'; import { updateChartSize, updateChartState } from './refresh-node/update-chart'; @@ -60,6 +60,7 @@ import { import { Env } from '../tools/env'; import { createCornerCell } from './style/corner-cell'; import { updateCol } from './layout/update-col'; +import { deduplication } from '../tools/util'; // import { contextModule } from './context/module'; registerForVrender(); @@ -937,11 +938,9 @@ export class Scenegraph { } updateRowHeight(row: number, detaY: number, skipTableHeightMap?: boolean) { - if (row >= this.proxy.rowStart && row <= this.proxy.rowEnd) { - detaY = Math.round(detaY); - updateRowHeight(this, row, detaY, skipTableHeightMap); - this.updateContainerHeight(row, detaY); - } + detaY = Math.round(detaY); + updateRowHeight(this, row, detaY, skipTableHeightMap); + this.updateContainerHeight(row, detaY); } updateRowsHeight(rows: number[], detaYs: number[], skipTableHeightMap?: boolean) { for (let i = 0; i < rows.length; i++) { @@ -1022,7 +1021,12 @@ export class Scenegraph { if (oldHeight === height) { return; } - this.updateRowHeight(row, height - oldHeight); + if ( + (row >= this.proxy.rowStart && row <= this.proxy.rowEnd) || + (row >= this.table.rowCount - this.table.bottomFrozenRowCount && row <= this.table.rowCount - 1) + ) { + this.updateRowHeight(row, height - oldHeight); + } this.table._clearRowRangeHeightsMap(row); } @@ -1648,14 +1652,35 @@ export class Scenegraph { } updateRow(removeCells: CellAddress[], addCells: CellAddress[], updateCells: CellAddress[] = []) { + 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); + console.log('updateRow', addRows, updateRows); // add or move rows updateRow(removeCells, addCells, updateCells, this.table); // update column width and row height this.recalculateColWidths(); - this.recalculateRowHeights(); + // this.recalculateRowHeights(); + if ( + this.table.heightMode === 'adaptive' || + (this.table.autoFillHeight && this.table.getAllRowsHeight() <= this.table.tableNoFrameHeight) + ) { + this.table.scenegraph.recalculateRowHeights(); + } else if (this.table.heightMode === 'autoHeight') { + for (let i = 0; i < updateRows.length; i++) { + const row = updateRows[i]; + const oldHeight = this.table.getRowHeight(row); + const newHeight = computeRowHeight(row, 0, this.table.colCount - 1, this.table); + if ( + (row >= this.proxy.rowStart && row <= this.proxy.rowEnd) || + (row >= this.table.rowCount - this.table.bottomFrozenRowCount && row <= this.table.rowCount - 1) + ) { + this.table.scenegraph.updateRowHeight(row, newHeight - oldHeight); + } + } + } // check frozen status this.table.stateManager.checkFrozen(); diff --git a/packages/vtable/src/tools/util.ts b/packages/vtable/src/tools/util.ts index 8d6eebb95..c16df72bb 100644 --- a/packages/vtable/src/tools/util.ts +++ b/packages/vtable/src/tools/util.ts @@ -435,3 +435,13 @@ export function isAllDigits(str: string) { const pattern = /^-?\d+(\.\d+)?$/; return pattern.test(str); } +// array deduplication +export function deduplication(array: number[]) { + const result = []; + for (let i = 0; i < array.length; i++) { + if (result.indexOf(array[i]) === -1) { + result.push(array[i]); + } + } + return result; +} From 794db9d22f4588031b2fc2db87c26ac9db99dfa5 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 24 Jan 2024 18:00:37 +0800 Subject: [PATCH 23/65] docs: update changlog of rush --- ...at-refactor-row-height-range_2024-01-24-10-00.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json diff --git a/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json b/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json new file mode 100644 index 000000000..2db425ed7 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "refactor: optimize updateRow api performance & resize bottom frozen row not right\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 8b988cb5d50c1c69188e92ae8cd196fe50fb41dd Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 25 Jan 2024 12:16:50 +0800 Subject: [PATCH 24/65] fix: widthmode and heightMode set adaptive and set autoWrapText resize window layout error #1003 --- .../scenegraph/layout/compute-row-height.ts | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index 149e7d82a..a0dcddc70 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -79,11 +79,9 @@ export function computeRowsHeight( } if (isAllRowsAuto || table.getDefaultRowHeight(row) === 'auto') { const height = computeRowHeight(row, startCol, endCol, table); - if (update) { - newHeights[row] = Math.round(height); - } else { - table._setRowHeight(row, height); - } + newHeights[row] = Math.round(height); + //表头部分需要马上设置到缓存中 因为adaptive不会调整表头的高度 另外后面adaptive处理过程中有取值 table.getRowsHeight(0, table.columnHeaderLevelCount - 1); + table._setRowHeight(row, height); } } @@ -272,25 +270,33 @@ export function computeRowsHeight( for (let row = 0; row < table.rowCount; row++) { const newRowHeight = newHeights[row] ?? table.getRowHeight(row); if (newRowHeight !== oldRowHeights[row]) { - // update the row height in scenegraph table._setRowHeight(row, newRowHeight); - // table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row], true); } } - const updateRowStart = table.scenegraph.proxy.rowStart; - let updateRowEnd = table.scenegraph.proxy.rowEnd; if ( table.heightMode === 'adaptive' || (table.autoFillHeight && table.getAllRowsHeight() <= table.tableNoFrameHeight) ) { - updateRowEnd = table.rowCount - 1; + for (let row = 0; row <= table.columnHeaderLevelCount - 1; row++) { + const newRowHeight = table.getRowHeight(row); + if (newRowHeight !== oldRowHeights[row]) { + // update the row height in scenegraph + table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row], true); + } + } + for (let row = table.rowCount - table.bottomFrozenRowCount; row <= table.rowCount - 1; row++) { + const newRowHeight = table.getRowHeight(row); + if (newRowHeight !== oldRowHeights[row]) { + // update the row height in scenegraph + table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row], true); + } + } } - for (let row = updateRowStart; row <= updateRowEnd; row++) { + for (let row = table.scenegraph.proxy.rowStart; row <= table.scenegraph.proxy.rowEnd; row++) { const newRowHeight = table.getRowHeight(row); if (newRowHeight !== oldRowHeights[row]) { // update the row height in scenegraph - // table._setRowHeight(row, newRowHeight); table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row], true); } } From 581bdd6ad9f1177b8a0296bfd4a74c4279aa5a6a Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 25 Jan 2024 14:52:40 +0800 Subject: [PATCH 25/65] fix: list tree hierarchy state change problems --- packages/vtable/src/scenegraph/scenegraph.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 91bad429f..0dd06a363 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1658,7 +1658,14 @@ export class Scenegraph { updateRow(removeCells: CellAddress[], addCells: CellAddress[], updateCells: CellAddress[] = []) { 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); - console.log('updateRow', addRows, updateRows); + //这个值是后续为了autoFillHeight判断逻辑中用到的 判断是否更新前是未填满的情况 + const isNotFillHeight = + this.table.getAllRowsHeight() - + [...addRows, ...updateRows].reduce((tolHeight, rowNumber) => { + return tolHeight + this.table.getRowHeight(rowNumber); + }, 0) <= + this.table.tableNoFrameHeight; + // add or move rows updateRow(removeCells, addCells, updateCells, this.table); @@ -1669,7 +1676,7 @@ export class Scenegraph { if ( this.table.heightMode === 'adaptive' || - (this.table.autoFillHeight && this.table.getAllRowsHeight() <= this.table.tableNoFrameHeight) + (this.table.autoFillHeight && (this.table.getAllRowsHeight() <= this.table.tableNoFrameHeight || isNotFillHeight)) ) { this.table.scenegraph.recalculateRowHeights(); } else if (this.table.heightMode === 'autoHeight') { From fb71f7d1b67f189e2803ceb3691fefed66e418f5 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 26 Jan 2024 18:38:13 +0800 Subject: [PATCH 26/65] fix: rightFrozenColCount drag header move more time the column width is error #1019 --- packages/vtable/src/scenegraph/scenegraph.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index bbd7a96ca..08ab0fc90 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1407,7 +1407,7 @@ export class Scenegraph { // this.rightFrozenGroup.setDeltaWidth(colHeaderX - this.table.getRightFrozenColsWidth()); this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width); this.bottomFrozenGroup.setDeltaWidth(colHeaderX - this.bottomFrozenGroup.attribute.width); - this.rightFrozenGroup.setDeltaWidth(rightX - this.table.getRightFrozenColsWidth()); + this.rightFrozenGroup.setDeltaWidth(rightX - this.rightFrozenGroup.attribute.width); this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width); this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width); this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width); From 11bd45d8235f81728d72e73a622fa2da7996c928 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 26 Jan 2024 18:38:42 +0800 Subject: [PATCH 27/65] docs: update changlog of rush --- ...-dragheader-olumnwidth-error_2024-01-26-10-38.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json diff --git a/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json b/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json new file mode 100644 index 000000000..56f04bd49 --- /dev/null +++ b/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: rightFrozenColCount drag header move more time the column width is error #1019\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From c8a86ed398b322f30b2f131aa91805bbaede817c Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 26 Jan 2024 19:21:19 +0800 Subject: [PATCH 28/65] feat: support get sorted columns #986 --- packages/vtable/src/ListTable.ts | 3 +- .../vtable/src/layout/pivot-layout-helper.ts | 64 +++++++++++++------ .../vtable/src/layout/simple-header-layout.ts | 11 +++- 3 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 689f506fe..f6a1d0267 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -149,7 +149,8 @@ export class ListTable extends BaseTable implements ListTableAPI { this.eventManager.updateEventBinder(); } get columns(): ColumnsDefine { - return this.internalProps.columns; + // return this.internalProps.columns; + return this.internalProps.layoutMap.columnTree.getCopiedTree(); //调整顺序后的columns } /** *@deprecated 请使用columns diff --git a/packages/vtable/src/layout/pivot-layout-helper.ts b/packages/vtable/src/layout/pivot-layout-helper.ts index 040860533..1c686926d 100644 --- a/packages/vtable/src/layout/pivot-layout-helper.ts +++ b/packages/vtable/src/layout/pivot-layout-helper.ts @@ -1,4 +1,4 @@ -import { isValid } from '@visactor/vutils'; +import { cloneDeep, isValid } from '@visactor/vutils'; import { NumberMap } from '../tools/NumberMap'; import { IndicatorDimensionKeyPlaceholder } from '../tools/global'; import type { Either } from '../tools/helper'; @@ -26,6 +26,7 @@ interface IPivotLayoutBaseHeadNode { // indicatorKey?: string; value: string; children: IPivotLayoutHeadNode[] | undefined; + columns?: any; //兼容ListTable情况 simple-header-layout中增加了columnTree level: number; /** 节点跨占层数 如汇总节点跨几层维度 */ levelSpan: number; @@ -123,10 +124,11 @@ export class DimensionTree { } } let size = node.dimensionKey ? (this.sizeIncludeParent ? 1 : 0) : 0; + const children = node.children || node.columns; //平铺展示 分析所有层级 if (this.hierarchyType === 'grid') { - if (node.children?.length >= 1) { - node.children.forEach(n => { + if (children?.length >= 1) { + children.forEach((n: any) => { n.level = (node.level ?? 0) + 1; size += this.setTreeNode(n, size, node); }); @@ -134,29 +136,29 @@ export class DimensionTree { size = 1; // re.totalLevel = Math.max(re.totalLevel, (node.level ?? -1) + 1); } - } else if (node.hierarchyState === HierarchyState.expand && node.children?.length >= 1) { + } else if (node.hierarchyState === HierarchyState.expand && children?.length >= 1) { //树形展示 有子节点 且下一层需要展开 - node.children.forEach(n => { + children.forEach((n: any) => { n.level = (node.level ?? 0) + 1; size += this.setTreeNode(n, size, node); }); - } else if (node.hierarchyState === HierarchyState.collapse && node.children?.length >= 1) { + } else if (node.hierarchyState === HierarchyState.collapse && children?.length >= 1) { //树形展示 有子节点 且下一层不需要展开 - node.children.forEach(n => { + children.forEach((n: any) => { n.level = (node.level ?? 0) + 1; this.setTreeNode(n, size, node); }); - } else if (!node.hierarchyState && node.level + 1 < this.rowExpandLevel && node.children?.length >= 1) { + } else if (!node.hierarchyState && node.level + 1 < this.rowExpandLevel && children?.length >= 1) { //树形展示 有子节点 且下一层需要展开 node.hierarchyState = HierarchyState.expand; - node.children.forEach(n => { + children.forEach((n: any) => { n.level = (node.level ?? 0) + 1; size += this.setTreeNode(n, size, node); }); - } else if (node.children?.length >= 1) { + } else if (children?.length >= 1) { //树形展示 有子节点 且下一层不需要展开 node.hierarchyState = HierarchyState.collapse; - node.children.forEach(n => { + children.forEach((n: any) => { n.level = (node.level ?? 0) + 1; this.setTreeNode(n, size, node); }); @@ -292,17 +294,15 @@ export class DimensionTree { targetSubIndex = subIndex; } } - - if (node.children && node.level < level) { + const children = node.children || node.columns; + if (children && node.level < level) { parNode = node; - for (let i = 0; i < node.children.length; i++) { + for (let i = 0; i < children.length; i++) { if ( - (sourceIndex >= node.children[i].startInTotal && - sourceIndex <= node.children[i].startInTotal + node.children[i].size) || - (targetIndex >= node.children[i].startInTotal && - targetIndex <= node.children[i].startInTotal + node.children[i].size) + (sourceIndex >= children[i].startInTotal && sourceIndex <= children[i].startInTotal + children[i].size) || + (targetIndex >= children[i].startInTotal && targetIndex <= children[i].startInTotal + children[i].size) ) { - findTargetNode(node.children[i], i); + findTargetNode(children[i], i); } } } @@ -310,9 +310,31 @@ export class DimensionTree { findTargetNode(this.tree, 0); //对parNode子节点位置进行移位【根据sourceSubIndex和targetSubIndex】 - const sourceColumns = parNode.children.splice(sourceSubIndex, 1); + const children = parNode.children || parNode.columns; + const sourceColumns = children.splice(sourceSubIndex, 1); sourceColumns.unshift(targetSubIndex as any, 0 as any); - Array.prototype.splice.apply(parNode.children, sourceColumns); + Array.prototype.splice.apply(children, sourceColumns); + } + /** 获取纯净树结构 没有level size index这些属性 */ + getCopiedTree() { + const children = cloneDeep(this.tree.children); + clearNode(children); + function clearNode(children: any) { + for (let i = 0; i < children.length; i++) { + const node = children[i]; + delete node.level; + delete node.startIndex; + delete node.id; + delete node.levelSpan; + delete node.size; + delete node.startInTotal; + const childrenNew = node.children || node.columns; + if (childrenNew) { + clearNode(childrenNew); + } + } + } + return children; } } diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index a302b3bea..047314bb1 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -12,6 +12,7 @@ import type { WidthData } from '../ts-types/list-table/layout-map/api'; import { checkHasChart, getChartDataId } from './chart-helper/get-chart-spec'; +import { DimensionTree } from './pivot-layout-helper'; // import { EmptyDataCache } from './utils'; // let seqId = 0; @@ -22,6 +23,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { // private _headerObjectFieldKey: { [key in string]: HeaderData }; private _headerCellIds: number[][]; private _columns: ColumnData[]; + /** 后期加的 对应pivot-header-layout 中的columnDimensionTree 为了排序后获取到排序后的columns */ + columnTree: DimensionTree; readonly bodyRowSpanCount: number = 1; //透视表中树形结构使用 这里为了table逻辑不报错 // rowHierarchyIndent?: number = 0; @@ -40,6 +43,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { this._columns = []; this._headerCellIds = []; this.hierarchyIndent = hierarchyIndent ?? 20; + this.columnTree = new DimensionTree(columns as any, { seqId: 0 }); //seqId这里没有利用上 所有顺便传了0 this._headerObjects = this._addHeaders(0, columns, []); this._headerObjectMap = this._headerObjects.reduce((o, e) => { o[e.id as number] = e; @@ -833,7 +837,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { //将_columns的列定义调整位置 同调整_headerCellIds逻辑 const sourceColumns = this._columns.splice(sourceCellRange.start.col, moveSize); sourceColumns.unshift(targetIndex as any, 0 as any); - Array.prototype.splice.apply(this._columns, sourceColumns); + + // 对表头columnTree调整节点位置 + this.columnTree.movePosition(source.row, sourceCellRange.start.col, targetIndex); this._cellRangeMap = new Map(); return { @@ -871,6 +877,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { sourceColumns.unshift(targetIndex as any, 0 as any); Array.prototype.splice.apply(this._columns, sourceColumns); + // 对表头columnTree调整节点位置 + this.columnTree.movePosition(source.col, sourceCellRange.start.row, targetIndex); + this._cellRangeMap = new Map(); return { sourceIndex: sourceCellRange.start.row, From e96fa9c51383ad1b0f6a2f4443307a3348c96bfa Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 26 Jan 2024 19:21:36 +0800 Subject: [PATCH 29/65] docs: update changlog of rush --- ...refactor-dragedOrder-columns_2024-01-26-11-21.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json diff --git a/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json b/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json new file mode 100644 index 000000000..f531082ae --- /dev/null +++ b/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: support get sorted columns #986\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 2a6736b4040587669b0fdee93d723106d9e3bee1 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 26 Jan 2024 19:49:03 +0800 Subject: [PATCH 30/65] feat: support get sorted columns #986 --- packages/vtable/src/layout/simple-header-layout.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 047314bb1..03ab08f11 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -837,6 +837,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { //将_columns的列定义调整位置 同调整_headerCellIds逻辑 const sourceColumns = this._columns.splice(sourceCellRange.start.col, moveSize); sourceColumns.unshift(targetIndex as any, 0 as any); + Array.prototype.splice.apply(this._columns, sourceColumns); // 对表头columnTree调整节点位置 this.columnTree.movePosition(source.row, sourceCellRange.start.col, targetIndex); From 6b1a1688fb5db61e1a1e0d6b59ae2767c60f1743 Mon Sep 17 00:00:00 2001 From: martes Date: Fri, 26 Jan 2024 10:31:16 +0800 Subject: [PATCH 31/65] feat: update interface IEditor --- packages/vtable-editors/src/types.ts | 101 +++++++++++++++++++++------ 1 file changed, 79 insertions(+), 22 deletions(-) diff --git a/packages/vtable-editors/src/types.ts b/packages/vtable-editors/src/types.ts index 865a4f7c4..db5708e67 100644 --- a/packages/vtable-editors/src/types.ts +++ b/packages/vtable-editors/src/types.ts @@ -1,36 +1,93 @@ -export interface IEditor { - /** 编辑器类型 */ - editorType?: string; - /** 编辑配置 */ - editorConfig: any; - /* 编辑器挂载的容器 由vtable传入 */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export interface IEditor { + /** + * 当单元格进入编辑状态时调用 + */ + onStart?: (context: EditContext) => void; + /** + * 当单元格退出编辑状态时调用 + */ + onEnd?: () => void; + /** + * 当单元格处于编辑状态时鼠标点击其他位置时调用。 + * + * 如果返回值为虚值，则 VTable 将退出编辑状态。 + * + * 如果不提供此函数，VTable 将不会在点击其他位置时自动退出编辑状态。 + * 你需要使用 `onStart` 提供的 `endEdit` 函数来手动退出编辑状态。 + */ + onClickElsewhere?: (target: HTMLElement) => boolean; + /** + * 当单元格退出编辑状态后，VTable 将调用此函数来获取编辑后的值 + */ + getValue: () => V; + /** + * 编辑器进入编辑状态 + * @deprecated 请改用 `onStart` 代替。 + */ + beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void; + /** + * @see onEnd + * @deprecated 请改用 `onEnd` 代替。 + */ + exit?: () => void; + /** + * @see onClickElsewhere + * @deprecated 请改用 `onClickElsewhere` 代替。 + */ + targetIsOnEditor?: (target: HTMLElement) => boolean; + /** + * beginEditing 调用时调用，提供一个回调函数，用于结束编辑器编辑状态。 + * @see EditContext#endEdit + * @deprecated 请改用 `onStart` 代替。 + */ + bindSuccessCallback?: (callback: () => void) => void; +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export interface EditContext { + /** + * VTable 所在容器 + */ container: HTMLElement; - /** 编辑完成后调用。注意如果是（enter键，鼠标点击其他位置）这类编辑完成已有VTable实现，编辑器内部有完成按钮等类似的完成操作需要调用这个方法 */ - successCallback?: Function; - /** 获取编辑器当前值 */ - getValue: () => string | number | null; - /** 编辑器进入编辑状态 */ - beginEditing: ( - container: HTMLElement, - referencePosition: { rect: RectProps; placement?: Placement }, - value?: string - ) => void; - /** 编辑器退出编辑状态 */ - exit: () => void; - /** 判断鼠标点击的target是否属于编辑器内部元素 */ - targetIsOnEditor: (target: HTMLElement) => boolean; - /** 由VTable调用来传入编辑成功的回调 请将callback赋值到successCallback */ - bindSuccessCallback?: (callback: Function) => void; + /** + * 单元格所在位置 + */ + referencePosition: ReferencePosition; + /** + * 单元格当前值 + */ + value: V; + /** + * 立即结束编辑器编辑状态。 + * + * 大多数情况下你并不需要调用这个函数，因为 + * VTable 已经自动对 Enter 键以及 + * 鼠标点击其他位置（`onClickElsewhere`）进行了处理。 + * + * 但如果你的编辑器内部有自己的完成按钮，或是 + * 像 Tooltip 有外部悬浮元素，不太好或者没有办法 + * 使用 `onClickElsewhere` 进行判断时，你 + * 可以使用这个回调来帮助你处理编辑器的退出逻辑。 + */ + endEdit: () => void; } + export interface RectProps { left: number; top: number; width: number; height: number; } + export enum Placement { top = 'top', bottom = 'bottom', left = 'left', right = 'right' } + +export interface ReferencePosition { + rect: RectProps; + placement?: Placement; +} From 04d22b633676eb8960e230f323c4536c2c84ca8b Mon Sep 17 00:00:00 2001 From: martes Date: Fri, 26 Jan 2024 10:51:31 +0800 Subject: [PATCH 32/65] feat: implement new IEditor behaviours in VTable --- packages/vtable/src/edit/edit-manager.ts | 63 ++++++++++++++++++------ 1 file changed, 47 insertions(+), 16 deletions(-) diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index a8d070688..391b8adc6 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/packages/vtable/src/edit/edit-manager.ts @@ -8,10 +8,12 @@ export class EditManeger { table: BaseTableAPI; editingEditor: IEditor; editCell: { col: number; row: number }; + constructor(table: BaseTableAPI) { this.table = table; this.bindEvent(); } + bindEvent() { const handler = this.table.internalProps.handler; this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => { @@ -48,6 +50,7 @@ export class EditManeger { this.completeEdit(); }); } + startEditCell(col: number, row: number) { //透视表的表头不允许编辑 if (this.table.isPivotTable() && this.table.isHeader(col, row)) { @@ -68,34 +71,62 @@ export class EditManeger { return; } } - editor.bindSuccessCallback?.(() => { - this.completeEdit(); - }); this.editingEditor = editor; this.editCell = { col, row }; const dataValue = this.table.getCellOriginValue(col, row); const rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row)); - editor.beginEditing( - this.table.getElement(), - { rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } }, - dataValue - ); + const referencePosition = { rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } }; + + // TODO: 添加开发时弃用警告 + editor.beginEditing?.(this.table.getElement(), referencePosition, dataValue); + + // TODO: 添加开发时弃用警告 + editor.bindSuccessCallback?.(() => { + this.completeEdit(); + }); + editor.onStart?.({ + value: dataValue, + endEdit: () => { + this.completeEdit(); + }, + referencePosition, + container: this.table.getElement() + }); } } + /** 如果是事件触发调用该接口 请传入原始事件对象 将判断事件对象是否在编辑器本身上面 来处理是否结束编辑 */ - completeEdit(e?: any) { - const target = e?.target; - if (this.editingEditor && (!target || (target && !this.editingEditor.targetIsOnEditor(target as HTMLElement)))) { - const changedValue = this.editingEditor.getValue(); - (this.table as ListTableAPI).changeCellValue(this.editCell.col, this.editCell.row, changedValue); - this.editingEditor.exit(); - this.editingEditor = null; + completeEdit(e?: Event) { + if (!this.editingEditor) { + return; + } + + const target = e?.target as HTMLElement | undefined; + + if (target && this.editingEditor.targetIsOnEditor?.(target)) { + // TODO: 添加开发时弃用警告 + return; + } + + if (target && this.editingEditor.onClickElsewhere?.(target)) { + return; } + + // TODO: 开发时检查 getValue 是否为方法，如不是则提供警告 + const changedValue = this.editingEditor.getValue?.(); + (this.table as ListTableAPI).changeCellValue(this.editCell.col, this.editCell.row, changedValue); + + // TODO: 添加开发时弃用警告 + this.editingEditor.exit?.(); + this.editingEditor.onEnd?.(); + this.editingEditor = null; } cancelEdit() { if (this.editingEditor) { - this.editingEditor.exit(); + // TODO: 添加开发时弃用警告 + this.editingEditor.exit?.(); + this.editingEditor.onEnd?.(); this.editingEditor = null; } } From 0fd387007b4f28be1318822dca256e1ec1f5a48a Mon Sep 17 00:00:00 2001 From: martes Date: Fri, 26 Jan 2024 11:01:04 +0800 Subject: [PATCH 33/65] refactor: migrate existing editors to new IEditor --- .../vtable-editors/src/date-input-editor.ts | 5 ---- packages/vtable-editors/src/input-editor.ts | 26 +++++++++++------ packages/vtable-editors/src/list-editor.ts | 28 ++++++++----------- 3 files changed, 28 insertions(+), 31 deletions(-) diff --git a/packages/vtable-editors/src/date-input-editor.ts b/packages/vtable-editors/src/date-input-editor.ts index 28ec4616a..b16ff997b 100644 --- a/packages/vtable-editors/src/date-input-editor.ts +++ b/packages/vtable-editors/src/date-input-editor.ts @@ -7,8 +7,6 @@ export interface DateInputEditorConfig { export class DateInputEditor extends InputEditor implements IEditor { editorType: string = 'DateInput'; - declare element: HTMLInputElement; - successCallback: Function; constructor(editorConfig?: DateInputEditorConfig) { super(editorConfig); this.editorConfig = editorConfig; @@ -30,7 +28,4 @@ export class DateInputEditor extends InputEditor implements IEditor { // this.successCallback(); // }; } - bindSuccessCallback(success: Function) { - this.successCallback = success; - } } diff --git a/packages/vtable-editors/src/input-editor.ts b/packages/vtable-editors/src/input-editor.ts index 4b83598d6..d00911ce1 100644 --- a/packages/vtable-editors/src/input-editor.ts +++ b/packages/vtable-editors/src/input-editor.ts @@ -1,4 +1,5 @@ -import type { IEditor, Placement, RectProps } from './types'; +import type { EditContext, IEditor, Placement, RectProps } from './types'; + export interface InputEditorConfig { max?: number; min?: number; @@ -8,10 +9,13 @@ export class InputEditor implements IEditor { editorType: string = 'Input'; editorConfig: InputEditorConfig; container: HTMLElement; - declare element: HTMLInputElement; + successCallback?: () => void; + element?: HTMLInputElement; + constructor(editorConfig?: InputEditorConfig) { this.editorConfig = editorConfig; } + createElement() { const input = document.createElement('input'); input.setAttribute('type', 'text'); @@ -23,15 +27,19 @@ export class InputEditor implements IEditor { this.container.appendChild(input); } + setValue(value: string) { this.element.value = typeof value !== 'undefined' ? value : ''; } + getValue() { return this.element.value; } - beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) { + + onStart({ value, referencePosition, container, endEdit }: EditContext) { console.log('input', 'beginEditing---- '); this.container = container; + this.successCallback = endEdit; this.createElement(); if (value) { @@ -43,24 +51,24 @@ export class InputEditor implements IEditor { this.element.focus(); // do nothing } + adjustPosition(rect: RectProps) { this.element.style.top = rect.top + 'px'; this.element.style.left = rect.left + 'px'; this.element.style.width = rect.width + 'px'; this.element.style.height = rect.height + 'px'; } + endEditing() { // do nothing } - exit() { + onEnd() { // do nothing this.container.removeChild(this.element); } - targetIsOnEditor(target: HTMLElement) { - if (target === this.element) { - return true; - } - return false; + + onClickElsewhere(target: HTMLElement) { + return target === this.element; } } diff --git a/packages/vtable-editors/src/list-editor.ts b/packages/vtable-editors/src/list-editor.ts index 5f6180bf6..66a0ce70f 100644 --- a/packages/vtable-editors/src/list-editor.ts +++ b/packages/vtable-editors/src/list-editor.ts @@ -1,15 +1,15 @@ -import type { IEditor, Placement, RectProps } from './types'; +import type { EditContext, IEditor, Placement, RectProps } from './types'; export interface ListEditorConfig { values: string[]; } export class ListEditor implements IEditor { editorType: string = 'Input'; - input: HTMLInputElement; - editorConfig: ListEditorConfig; - container: HTMLElement; - element: HTMLSelectElement; - successCallback: Function; + input?: HTMLInputElement; + editorConfig?: ListEditorConfig; + container?: HTMLElement; + element?: HTMLSelectElement; + successCallback?: () => void; constructor(editorConfig: ListEditorConfig) { console.log('listEditor constructor'); @@ -54,8 +54,9 @@ export class ListEditor implements IEditor { return this.element.value; } - beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) { + onStart({ container, value, referencePosition, endEdit }: EditContext) { this.container = container; + this.successCallback = endEdit; this.createElement(value); @@ -79,18 +80,11 @@ export class ListEditor implements IEditor { // do nothing } - exit() { + onEnd() { this.container.removeChild(this.element); } - targetIsOnEditor(target: HTMLElement) { - if (target === this.element) { - return true; - } - return false; - } - - bindSuccessCallback(success: Function) { - this.successCallback = success; + onClickElsewhere(target: HTMLElement) { + return target === this.element; } } From 5f9a776a57654387651bb4f02efd8eabde0ef027 Mon Sep 17 00:00:00 2001 From: martes Date: Fri, 26 Jan 2024 11:22:50 +0800 Subject: [PATCH 34/65] fix: new targetIsOnEditor behaviour --- packages/vtable/src/edit/edit-manager.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index 391b8adc6..74f3765d4 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/packages/vtable/src/edit/edit-manager.ts @@ -103,12 +103,14 @@ export class EditManeger { const target = e?.target as HTMLElement | undefined; - if (target && this.editingEditor.targetIsOnEditor?.(target)) { - // TODO: 添加开发时弃用警告 - return; + if (this.editingEditor.targetIsOnEditor) { + if (target && this.editingEditor.targetIsOnEditor(target)) { + // TODO: 添加开发时弃用警告 + return; + } } - if (target && this.editingEditor.onClickElsewhere?.(target)) { + if (!this.editingEditor.onClickElsewhere || (target && this.editingEditor.onClickElsewhere?.(target))) { return; } From 73274603996fd66c1c0fc646ad8f17743e371a68 Mon Sep 17 00:00:00 2001 From: martes Date: Fri, 26 Jan 2024 14:06:48 +0800 Subject: [PATCH 35/65] feat: update usage in demo and guide --- docs/assets/guide/zh/edit/edit_cell.md | 16 +++++++--------- .../vtable/examples/editor/custom-date-editor.ts | 12 +++++------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md index 4126814c9..aee9860ee 100644 --- a/docs/assets/guide/zh/edit/edit_cell.md +++ b/docs/assets/guide/zh/edit/edit_cell.md @@ -77,7 +77,7 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s 以下是一个自定义编辑器的示例代码： -```javascript +```ts class DateEditor implements IEditor { editorConfig: any; element: HTMLInputElement; @@ -87,9 +87,10 @@ class DateEditor implements IEditor { constructor(editorConfig: any) { this.editorConfig = editorConfig; } - beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) { + onStart({ container, value, referencePosition, endEdit }: EditContext) { const that = this; this.container = container; + this.successCallback = endEdit // const cellValue = luxon.DateTime.fromFormat(value, 'yyyy年MM月dd日').toFormat('yyyy-MM-dd'); const input = document.createElement('input'); @@ -143,19 +144,16 @@ class DateEditor implements IEditor { getValue() { return this.element.value; } - exit() { + onEnd() { this.picker.destroy(); this.container.removeChild(this.element); } - targetIsOnEditor(target: HTMLElement) { + onClickElsewhere(target: HTMLElement) { if (target === this.element || this.picker.el.contains(target)) { return true; } return false; } - bindSuccessCallback(successCallback: Function) { - this.successCallback = successCallback; - } } const custom_date_editor = new DateEditor({}); VTable.register.editor('custom-date', custom_date_editor); @@ -231,7 +229,7 @@ tableInstance.records; * @param row 粘贴数据的起始行号 * @param values 多个单元格的数据数组 */ - changeCellValues(startCol: number, startRow: number, values: string[][]) + changeCellValues(startCol: number, startRow: number, values: string[][]) /** 获取单元格配置的编辑器 */ getEditor: (col: number, row: number) => IEditor; @@ -246,4 +244,4 @@ tableInstance.records; 基本表格可支持编辑表头显示标题title，在全局或者在column中配置`headerEditor`来开启，具体用法同`editor`。 -通过以上步骤，你可以创建一个具有编辑功能的表格，并根据业务需求选择合适的编辑器类型、自定义编辑器、监听编辑事件以及获取编辑后的数据。这样，用户就可以方便地编辑表格中的数据，并且你可以对编辑后的数据进行相应的处理。 \ No newline at end of file +通过以上步骤，你可以创建一个具有编辑功能的表格，并根据业务需求选择合适的编辑器类型、自定义编辑器、监听编辑事件以及获取编辑后的数据。这样，用户就可以方便地编辑表格中的数据，并且你可以对编辑后的数据进行相应的处理。 diff --git a/packages/vtable/examples/editor/custom-date-editor.ts b/packages/vtable/examples/editor/custom-date-editor.ts index c5064a226..a6395309a 100644 --- a/packages/vtable/examples/editor/custom-date-editor.ts +++ b/packages/vtable/examples/editor/custom-date-editor.ts @@ -1,5 +1,5 @@ import * as VTable from '../../src'; -import type { IEditor, RectProps, Placement } from '@visactor/vtable-editors'; +import type { IEditor, RectProps, Placement, EditContext } from '@visactor/vtable-editors'; import { DateInputEditor, InputEditor, ListEditor } from '@visactor/vtable-editors'; import * as luxon from 'luxon'; import * as Pikaday from 'pikaday'; @@ -21,9 +21,10 @@ class DateEditor implements IEditor { constructor(editorConfig: any) { this.editorConfig = editorConfig; } - beginEditing(container: HTMLElement, referencePosition: { rect: RectProps; placement?: Placement }, value?: string) { + onStart({ container, value, referencePosition, endEdit }: EditContext) { const that = this; this.container = container; + this.successCallback = endEdit; // const cellValue = luxon.DateTime.fromFormat(value, 'yyyy年MM月dd日').toFormat('yyyy-MM-dd'); const input = document.createElement('input'); @@ -79,19 +80,16 @@ class DateEditor implements IEditor { // const cellValue = luxon.DateTime.fromFormat(this.element.value, 'yyyy-MM-dd').toFormat('yyyy年MM月dd日'); return this.element.value; } - exit() { + onEnd() { this.picker.destroy(); this.container.removeChild(this.element); } - targetIsOnEditor(target: HTMLElement) { + onClickElsewhere(target: HTMLElement) { if (target === this.element || this.picker.el.contains(target)) { return true; } return false; } - bindSuccessCallback(successCallback: Function) { - this.successCallback = successCallback; - } } const custom_date_editor = new DateEditor({}); VTable.register.editor('custom-date', custom_date_editor); From 82635f8c09e8b86de620f4b16c554be42c03da0d Mon Sep 17 00:00:00 2001 From: martes Date: Sat, 27 Jan 2024 13:49:31 +0800 Subject: [PATCH 36/65] docs: update description of IEditor --- packages/vtable-editors/src/types.ts | 63 +++++++++++++++------------- 1 file changed, 33 insertions(+), 30 deletions(-) diff --git a/packages/vtable-editors/src/types.ts b/packages/vtable-editors/src/types.ts index db5708e67..83f3dd3b9 100644 --- a/packages/vtable-editors/src/types.ts +++ b/packages/vtable-editors/src/types.ts @@ -1,74 +1,77 @@ // eslint-disable-next-line @typescript-eslint/no-explicit-any export interface IEditor { /** - * 当单元格进入编辑状态时调用 + * Called when cell enters edit mode. + * + * Warning will be thrown if you don't provide this function + * after removal of `beginEditing`. */ onStart?: (context: EditContext) => void; /** - * 当单元格退出编辑状态时调用 + * called when cell exits edit mode. + * + * Warning will be thrown if you don't provide this function + * after removal of `exit`. */ onEnd?: () => void; /** - * 当单元格处于编辑状态时鼠标点击其他位置时调用。 + * Called when user click somewhere while editor is in edit mode. * - * 如果返回值为虚值，则 VTable 将退出编辑状态。 + * If returns falsy, VTable will exit edit mode. * - * 如果不提供此函数，VTable 将不会在点击其他位置时自动退出编辑状态。 - * 你需要使用 `onStart` 提供的 `endEdit` 函数来手动退出编辑状态。 + * If returns truthy or not defined, nothing will happen. + * Which means, in this scenario, you need to call `endEdit` manually + * to end edit mode. */ onClickElsewhere?: (target: HTMLElement) => boolean; /** - * 当单元格退出编辑状态后，VTable 将调用此函数来获取编辑后的值 + * Called when editor mode is exited by any means. + * Expected to return the current value of the cell. */ getValue: () => V; /** - * 编辑器进入编辑状态 - * @deprecated 请改用 `onStart` 代替。 + * Called when cell enter edit mode. + * @deprecated use `onStart` instead. */ beginEditing?: (container: HTMLElement, referencePosition: ReferencePosition, value: V) => void; /** * @see onEnd - * @deprecated 请改用 `onEnd` 代替。 + * @deprecated use `onEnd` instead. */ exit?: () => void; /** * @see onClickElsewhere - * @deprecated 请改用 `onClickElsewhere` 代替。 + * @deprecated use `onClickElsewhere` instead. */ targetIsOnEditor?: (target: HTMLElement) => boolean; /** - * beginEditing 调用时调用，提供一个回调函数，用于结束编辑器编辑状态。 + * Called when cell enters edit mode with a callback function + * that can be used to end edit mode. * @see EditContext#endEdit - * @deprecated 请改用 `onStart` 代替。 + * @deprecated callback is provided as `endEdit` in `EditContext`, use `onStart` instead. */ bindSuccessCallback?: (callback: () => void) => void; } // eslint-disable-next-line @typescript-eslint/no-explicit-any export interface EditContext { - /** - * VTable 所在容器 - */ + /** Container element of the VTable instance. */ container: HTMLElement; - /** - * 单元格所在位置 - */ + /** Position info of the cell that is being edited. */ referencePosition: ReferencePosition; - /** - * 单元格当前值 - */ + /** Cell value before editing. */ value: V; /** - * 立即结束编辑器编辑状态。 + * Callback function that can be used to end edit mode. * - * 大多数情况下你并不需要调用这个函数，因为 - * VTable 已经自动对 Enter 键以及 - * 鼠标点击其他位置（`onClickElsewhere`）进行了处理。 + * In most cases you don't need to call this function, + * since Enter key click is handled by VTable automatically, + * and mouse click can be handled by `onClickElsewhere`. * - * 但如果你的编辑器内部有自己的完成按钮，或是 - * 像 Tooltip 有外部悬浮元素，不太好或者没有办法 - * 使用 `onClickElsewhere` 进行判断时，你 - * 可以使用这个回调来帮助你处理编辑器的退出逻辑。 + * However, if your editor has its own complete button, + * or you have external elements like Tooltip, + * you may want to use this callback to help you + * end edit mode. */ endEdit: () => void; } From d7ba406ea75880e1f81460f2ed0f027b75be5099 Mon Sep 17 00:00:00 2001 From: martes Date: Sat, 27 Jan 2024 14:08:00 +0800 Subject: [PATCH 37/65] docs: update edit section in guide --- docs/assets/guide/en/edit/edit_cell.md | 84 ++++++++++++++++---------- docs/assets/guide/zh/edit/edit_cell.md | 80 ++++++++++++++---------- 2 files changed, 101 insertions(+), 63 deletions(-) diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md index 2d04e6a29..138a37607 100644 --- a/docs/assets/guide/en/edit/edit_cell.md +++ b/docs/assets/guide/en/edit/edit_cell.md @@ -157,31 +157,51 @@ VTable.register.editor('custom-date', custom_date_editor); ``` In the above example, we created a custom editor named `DateEditor` and implemented the methods required by the `IEditor` interface. Then, we register the custom editor into the VTable through the `VTable.register.editor` method for use in the table. -`IEditor` interface's definition(github：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts)： -``` -export interface IEditor { - /** 编辑器类型 */ - editorType?: string; - /** 编辑配置 */ - editorConfig: any; - /* 编辑器挂载的容器 由vtable传入 */ +`IEditor` [definition](https://github.com/VisActor/VTable/blob/develop/packages/vtable-editors/src/types.ts)： +```ts +export interface IEditor { + /** Called when cell enters edit mode. */ + onStart?: (context: EditContext) => void; + /** called when cell exits edit mode. */ + onEnd?: () => void; + /** + * Called when user click somewhere while editor is in edit mode. + * + * If returns falsy, VTable will exit edit mode. + * + * If returns truthy or not defined, nothing will happen. + * Which means, in this scenario, you need to call `endEdit` manually + * to end edit mode. + */ + onClickElsewhere?: (target: HTMLElement) => boolean; + /** + * Called when editor mode is exited by any means. + * Expected to return the current value of the cell. + */ + getValue: () => V; +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export interface EditContext { + /** Container element of the VTable instance. */ container: HTMLElement; - /** 编辑完成后调用。注意如果是（enter键，鼠标点击其他位置）这类编辑完成已有VTable实现，编辑器内部有完成按钮等类似的完成操作需要调用这个方法 */ - successCallback?: Function; - /** 获取编辑器当前值 */ - getValue: () => string | number | null; - /** 编辑器进入编辑状态 */ - beginEditing: ( - container: HTMLElement, - referencePosition: { rect: RectProps; placement?: Placement }, - value?: string - ) => void; - /** 编辑器退出编辑状态 */ - exit: () => void; - /** 判断鼠标点击的target是否属于编辑器内部元素 */ - targetIsOnEditor: (target: HTMLElement) => boolean; - /** 由VTable调用来传入编辑成功的回调 请将callback赋值到successCallback */ - bindSuccessCallback?: (callback: Function) => void; + /** Position info of the cell that is being edited. */ + referencePosition: ReferencePosition; + /** Cell value before editing. */ + value: V; + /** + * Callback function that can be used to end edit mode. + * + * In most cases you don't need to call this function, + * since Enter key click is handled by VTable automatically, + * and mouse click can be handled by `onClickElsewhere`. + * + * However, if your editor has its own complete button, + * or you have external elements like Tooltip, + * you may want to use this callback to help you + * end edit mode. + */ + endEdit: () => void; } ``` @@ -207,17 +227,20 @@ tableInstance.records; ## 7. Edit trigger timing Editing trigger timing support: double-click a cell to enter editing, click a cell to enter editing, and call the API to manually start editing. -``` +```ts +interface ListTableConstructorOptions { /** Editing trigger timing Double-click event Click event API manually starts editing. The default is double-click 'doubleclick' */ editCellTrigger?: 'doubleclick' | 'click' | 'api'; + // ... +} ``` ## 8. Related APIs -``` +```ts +interface ListTableAPI { /** Set the value of the cell. Note that it corresponds to the original value of the source data, and the vtable instance records will be modified accordingly */ changeCellValue: (col: number, row: number, value: string | number | null) => void; - /** * Batch update data of multiple cells * @param col The starting column number of pasted data @@ -225,19 +248,18 @@ Editing trigger timing support: double-click a cell to enter editing, click a ce * @param values Data array of multiple cells */ changeCellValues(startCol: number, startRow: number, values: string[][]) - /** Get the editor of cell configuration */ getEditor: (col: number, row: number) => IEditor; - /** Enable cell editing */ startEditCell: (col?: number, row?: number) => void; - /** End editing */ completeEditCell: () => void; + // ... +} ``` ## Header Editing The basic table supports editing the display title in the header. You can enable this by configuring `headerEditor` globally or within a column. The usage is the same as `editor`. -Through the above steps, you can create a table with editing functions, select the appropriate editor type according to business needs, customize the editor, listen to editing events, and obtain edited data. In this way, users can easily edit the data in the table, and you can process the edited data accordingly. \ No newline at end of file +Through the above steps, you can create a table with editing functions, select the appropriate editor type according to business needs, customize the editor, listen to editing events, and obtain edited data. In this way, users can easily edit the data in the table, and you can process the edited data accordingly. diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md index aee9860ee..559bdbbc0 100644 --- a/docs/assets/guide/zh/edit/edit_cell.md +++ b/docs/assets/guide/zh/edit/edit_cell.md @@ -65,8 +65,11 @@ columns: [ editor配置可以在columns中，也可以在全局options中定义，同时可以支持自定义函数写法： -``` -editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); +```ts +interface ColumnDefine { + // ... + editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); +} ``` ## 4. 自定义实现一个编辑器： 如果VTable-ediotrs库提供的几种编辑器无法满足你的需求，你可以自定义实现一个编辑器。为此，你需要创建一个类，实现编辑器接口(`IEditor`)的要求，并提供必要的方法和逻辑。 @@ -162,31 +165,42 @@ VTable.register.editor('custom-date', custom_date_editor); 在上面的示例中，我们创建了一个名为`DateEditor`的自定义编辑器，并实现了`IEditor`接口所要求的方法。然后，我们通过`VTable.register.editor`方法将自定义编辑器注册到VTable中，以便在表格中使用。 -`IEditor`接口具体定义的源码(github：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts)： -``` -export interface IEditor { - /** 编辑器类型 */ - editorType?: string; - /** 编辑配置 */ - editorConfig: any; - /* 编辑器挂载的容器 由vtable传入 */ +`IEditor` 接口[定义](https://github.com/VisActor/VTable/blob/develop/packages/vtable-editors/src/types.ts)： +```ts +export interface IEditor { + /** * 单元格进入编辑状态时调用 */ + onStart?: (context: EditContext) => void; + /** * 单元格退出编辑状态时调用 */ + onEnd?: () => void; + /** + * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。 + * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。 + */ + onClickElsewhere?: (target: HTMLElement) => boolean; + /** * 获取编辑器当前值。将在 `onEnd` 调用后调用。 */ + getValue: () => V; + // ... +} + +export interface EditContext { + /** VTable 实例所处的容器元素 */ container: HTMLElement; - /** 编辑完成后调用。注意如果是（enter键，鼠标点击其他位置）这类编辑完成已有VTable实现，编辑器内部有完成按钮等类似的完成操作需要调用这个方法 */ - successCallback?: Function; - /** 获取编辑器当前值 */ - getValue: () => string | number | null; - /** 编辑器进入编辑状态 */ - beginEditing: ( - container: HTMLElement, - referencePosition: { rect: RectProps; placement?: Placement }, - value?: string - ) => void; - /** 编辑器退出编辑状态 */ - exit: () => void; - /** 判断鼠标点击的target是否属于编辑器内部元素 */ - targetIsOnEditor: (target: HTMLElement) => boolean; - /** 由VTable调用来传入编辑成功的回调 请将callback赋值到successCallback */ - bindSuccessCallback?: (callback: Function) => void; + /** 正在编辑的单元格位置信息 */ + referencePosition: ReferencePosition; + /** 正在进入编辑状态的单元格当前值 */ + value: V; + /** + * 用于结束编辑状态的回调。 + * + * 大多数情况下你不需要使用此回调，因为 VTable 已经自带了 Enter 键按下 + * 来结束编辑状态的行为；而鼠标点击其他位置来结束编辑状态的行为你也 + * 可以通过 `onClickElsewhere` 函数来获得。 + * + * 然而，如果你有特殊的需求，比如你想在编辑器内部提供一个“完成”按钮， + * 或者你有像 Tooltip 这样无法获取到的外部元素， + * 这时你可以保存这个回调并在你需要的时候来手动结束编辑状态。 + */ + endEdit: () => void; } ``` @@ -212,17 +226,20 @@ tableInstance.records; ## 7. 编辑触发时机 编辑触发时机支持：双击单元格进入编辑，单击单元格进入编辑，调用api手动开启编辑. -``` +```ts +interface ListTableConstructorOptions { /** 编辑触发时机 双击事件 单击事件 api手动开启编辑。默认为双击'doubleclick' */ editCellTrigger?: 'doubleclick' | 'click' | 'api'; + // ... +} ``` ## 8. 相关api -``` +```ts +interface ListTableAPI { /** 设置单元格的value值，注意对应的是源数据的原始值，vtable实例records会做对应修改 */ changeCellValue: (col: number, row: number, value: string | number | null) => void; - /** * 批量更新多个单元格的数据 * @param col 粘贴数据的起始列号 @@ -230,15 +247,14 @@ tableInstance.records; * @param values 多个单元格的数据数组 */ changeCellValues(startCol: number, startRow: number, values: string[][]) - /** 获取单元格配置的编辑器 */ getEditor: (col: number, row: number) => IEditor; - /** 开启单元格编辑 */ startEditCell: (col?: number, row?: number) => void; - /** 结束编辑 */ completeEditCell: () => void; + // ... +} ``` ## 表头编辑 From b73d0ef682dce4fd6d09bd7755a129662a9d4de1 Mon Sep 17 00:00:00 2001 From: martes Date: Sat, 27 Jan 2024 14:12:45 +0800 Subject: [PATCH 38/65] docs: update edit section in demo --- docs/assets/demo/en/edit/custom-editor.md | 13 +++++-------- docs/assets/demo/zh/edit/custom-editor.md | 15 ++++++--------- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/docs/assets/demo/en/edit/custom-editor.md b/docs/assets/demo/en/edit/custom-editor.md index 2daf60e5d..8e5ff41da 100644 --- a/docs/assets/demo/en/edit/custom-editor.md +++ b/docs/assets/demo/en/edit/custom-editor.md @@ -59,9 +59,10 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) this.editorConfig = editorConfig; } - beginEditing(container, referencePosition, value) { + onStart({ container, referencePosition, value, endEdit }) { const that = this; this.container = container; + this.successCallback = endEdit; const input = document.createElement('input'); input.setAttribute('type', 'text'); @@ -112,21 +113,17 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) return this.element.value; } - exit() { + onEnd() { this.picker.destroy(); this.container.removeChild(this.element); } - targetIsOnEditor(target) { + onClickElsewhere(target) { if (target === this.element || this.picker.el.contains(target)) { return true; } return false; } - - bindSuccessCallback(successCallback) { - this.successCallback = successCallback; - } } const custom_date_editor = new DateEditor(); VTable.register.editor('custom-date', custom_date_editor); @@ -308,5 +305,5 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) }) .catch((error) => { // 处理加载错误 -}); +}); ``` diff --git a/docs/assets/demo/zh/edit/custom-editor.md b/docs/assets/demo/zh/edit/custom-editor.md index d77dbfcf8..0ec754849 100644 --- a/docs/assets/demo/zh/edit/custom-editor.md +++ b/docs/assets/demo/zh/edit/custom-editor.md @@ -23,7 +23,7 @@ let tableInstance; // 使用时需要引入插件包@visactor/vtable-editors // import * as VTable_editors from '@visactor/vtable-editors'; // 正常使用方式 const input_editor = new VTable.editors.InputEditor(); -// 官网编辑器中将 VTable.editors重命名成了VTable_editors +// 官网编辑器中将 VTable.editors重命名成了VTable_editors const input_editor = new VTable_editors.InputEditor(); VTable.register.editor('input-editor', input_editor); const timestamp = new Date().getTime(); @@ -59,9 +59,10 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) this.editorConfig = editorConfig; } - beginEditing(container, referencePosition, value) { + onStart({ container, referencePosition, value, endEdit }) { const that = this; this.container = container; + this.successCallback = endEdit; const input = document.createElement('input'); input.setAttribute('type', 'text'); @@ -112,21 +113,17 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) return this.element.value; } - exit() { + onEnd() { this.picker.destroy(); this.container.removeChild(this.element); } - targetIsOnEditor(target) { + onClickElsewhere(target) { if (target === this.element || this.picker.el.contains(target)) { return true; } return false; } - - bindSuccessCallback(successCallback) { - this.successCallback = successCallback; - } } const custom_date_editor = new DateEditor(); VTable.register.editor('custom-date', custom_date_editor); @@ -311,5 +308,5 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) }) .catch((error) => { // 处理加载错误 -}); +}); ``` From b498cb9819a6d0d9253c6b655e69afc9c896afbb Mon Sep 17 00:00:00 2001 From: martes Date: Sat, 27 Jan 2024 14:44:16 +0800 Subject: [PATCH 39/65] feat: add warnings --- packages/vtable/src/edit/edit-manager.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index 74f3765d4..f5afc86d4 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/packages/vtable/src/edit/edit-manager.ts @@ -77,10 +77,12 @@ export class EditManeger { const rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row)); const referencePosition = { rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } }; - // TODO: 添加开发时弃用警告 + editor.beginEditing && console.warn('VTable Warn: `beginEditing` is deprecated, please use `onStart` instead.'); editor.beginEditing?.(this.table.getElement(), referencePosition, dataValue); - // TODO: 添加开发时弃用警告 + if (editor.bindSuccessCallback) { + console.warn('VTable Warn: `bindSuccessCallback` is deprecated, please use `onStart` instead.'); + } editor.bindSuccessCallback?.(() => { this.completeEdit(); }); @@ -104,8 +106,8 @@ export class EditManeger { const target = e?.target as HTMLElement | undefined; if (this.editingEditor.targetIsOnEditor) { + console.warn('VTable Warn: `targetIsOnEditor` is deprecated, please use `onClickElsewhere` instead.'); if (target && this.editingEditor.targetIsOnEditor(target)) { - // TODO: 添加开发时弃用警告 return; } } @@ -114,11 +116,13 @@ export class EditManeger { return; } - // TODO: 开发时检查 getValue 是否为方法，如不是则提供警告 + if (!this.editingEditor.getValue) { + console.warn('VTable Warn: `getValue` is not provided, did you forget to implement it?'); + } const changedValue = this.editingEditor.getValue?.(); (this.table as ListTableAPI).changeCellValue(this.editCell.col, this.editCell.row, changedValue); - // TODO: 添加开发时弃用警告 + this.editingEditor.exit && console.warn('VTable Warn: `exit` is deprecated, please use `onEnd` instead.'); this.editingEditor.exit?.(); this.editingEditor.onEnd?.(); this.editingEditor = null; From 4e7040e0a6f7550d2fb47306a30eb9fa80d6a571 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 29 Jan 2024 10:47:20 +0800 Subject: [PATCH 40/65] fix: columns get order problems --- .../examples/cell-move/{column.ts => column-move.ts} | 0 .../examples/cell-move/{pivot.ts => pivot-move.ts} | 10 +++++++--- .../vtable/examples/cell-move/{row.ts => row-move.ts} | 0 packages/vtable/examples/menu.ts | 6 +++--- packages/vtable/src/layout/pivot-header-layout.ts | 2 +- packages/vtable/src/layout/simple-header-layout.ts | 4 ++-- 6 files changed, 13 insertions(+), 9 deletions(-) rename packages/vtable/examples/cell-move/{column.ts => column-move.ts} (100%) rename packages/vtable/examples/cell-move/{pivot.ts => pivot-move.ts} (99%) rename packages/vtable/examples/cell-move/{row.ts => row-move.ts} (100%) diff --git a/packages/vtable/examples/cell-move/column.ts b/packages/vtable/examples/cell-move/column-move.ts similarity index 100% rename from packages/vtable/examples/cell-move/column.ts rename to packages/vtable/examples/cell-move/column-move.ts diff --git a/packages/vtable/examples/cell-move/pivot.ts b/packages/vtable/examples/cell-move/pivot-move.ts similarity index 99% rename from packages/vtable/examples/cell-move/pivot.ts rename to packages/vtable/examples/cell-move/pivot-move.ts index d05afd55e..4f385bb3a 100644 --- a/packages/vtable/examples/cell-move/pivot.ts +++ b/packages/vtable/examples/cell-move/pivot-move.ts @@ -8,6 +8,11 @@ export function createTable() { enableDataAnalysis: false, allowRangePaste: true, columnTree: [ + { + dimensionKey: '地区', + //title: '地区', + value: '东北22' + }, { dimensionKey: '地区', //title: '地区', @@ -452,6 +457,8 @@ export function createTable() { }; option.container = document.getElementById(CONTAINER_ID); const instance = new PivotTable(option); + // 只为了方便控制太调试用，不要拷贝 + window.tableInstance = instance; instance.on('copy_data', e => { console.log('copy_data', e); }); @@ -459,7 +466,4 @@ export function createTable() { VTable.bindDebugTool(instance.scenegraph.stage as any, { customGrapicKeys: ['role', '_updateTag'] }); - - // 只为了方便控制太调试用，不要拷贝 - window.tableInstance = instance; } diff --git a/packages/vtable/examples/cell-move/row.ts b/packages/vtable/examples/cell-move/row-move.ts similarity index 100% rename from packages/vtable/examples/cell-move/row.ts rename to packages/vtable/examples/cell-move/row-move.ts diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index f3a635512..331115cbd 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -546,15 +546,15 @@ export const menus = [ children: [ { path: 'cell-move', - name: 'column' + name: 'column-move' }, { path: 'cell-move', - name: 'row' + name: 'row-move' }, { path: 'cell-move', - name: 'pivot' + name: 'pivot-move' } ] }, diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index ac5d1d387..a883a4098 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -2013,7 +2013,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // 对维度树结构调整节点位置 this.columnDimensionTree.movePosition( - source.row, + this.getCellHeaderPathsWidthTreeNode(source.col, source.row).colHeaderPaths.length - 1, sourceCellRange.start.col - this.rowHeaderLevelCount, targetIndex - this.rowHeaderLevelCount ); diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 03ab08f11..a841e3734 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -840,7 +840,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { Array.prototype.splice.apply(this._columns, sourceColumns); // 对表头columnTree调整节点位置 - this.columnTree.movePosition(source.row, sourceCellRange.start.col, targetIndex); + this.columnTree.movePosition(sourceCellRange.start.row, sourceCellRange.start.col, targetIndex); this._cellRangeMap = new Map(); return { @@ -879,7 +879,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { Array.prototype.splice.apply(this._columns, sourceColumns); // 对表头columnTree调整节点位置 - this.columnTree.movePosition(source.col, sourceCellRange.start.row, targetIndex); + this.columnTree.movePosition(sourceCellRange.start.col, sourceCellRange.start.row, targetIndex); this._cellRangeMap = new Map(); return { From 55f1af31fdc59c04c71a2790f4c6b8c5e5b33928 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 29 Jan 2024 19:20:16 +0800 Subject: [PATCH 41/65] test: add dragHeader unit test --- .../columns/listTable-dragHeader.test.ts | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 packages/vtable/__tests__/columns/listTable-dragHeader.test.ts diff --git a/packages/vtable/__tests__/columns/listTable-dragHeader.test.ts b/packages/vtable/__tests__/columns/listTable-dragHeader.test.ts new file mode 100644 index 000000000..05a0db9f8 --- /dev/null +++ b/packages/vtable/__tests__/columns/listTable-dragHeader.test.ts @@ -0,0 +1,126 @@ +// @ts-nocheck +// 有问题可对照demo unitTestListTable +import { ListTable } from '../../src/ListTable'; +import { createDiv } from '../dom'; +global.__VERSION__ = 'none'; +const generatePersons = count => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + email1: `${i + 1}@xxx.com`, + name: `小明${i + 1}`, + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + })); +}; +describe('listTable-cellType-function init test', () => { + const containerDom: HTMLElement = createDiv(); + containerDom.style.position = 'relative'; + containerDom.style.width = '1000px'; + containerDom.style.height = '800px'; + const records = generatePersons(10); + const columns = [ + { + field: 'id', + title: 'ID', + sort: true, + width: 'auto' + }, + { + field: 'email1', + title: 'email', + sort: true + }, + { + title: 'full name', + columns: [ + { + field: 'name', + title: 'First Name' + }, + { + field: 'name', + title: 'Last Name' + } + ] + }, + { + field: 'date1', + title: 'birthday' + // width: 200 + }, + { + field: 'sex', + title: 'sex' + }, + { + field: 'tel', + title: 'telephone' + }, + { + field: 'work', + title: 'job' + }, + { + field: 'city', + title: 'city' + } + ]; + const option = { + records, + columns, + dragHeaderMode: 'all', + autoWrapText: true + }; + const listTable = new ListTable(containerDom, option); + test('listTable dragHeader interaction', () => { + listTable.selectCell(4, 1); + listTable.stateManager.startMoveCol(4, 1, 342, 60); + listTable.stateManager.updateMoveCol(1, 1, 100, 60); + listTable.stateManager.endMoveCol(); + expect(listTable.columns).toEqual([ + { field: 'id', sort: true, title: 'ID', width: 'auto' }, + { field: 'date1', title: 'birthday' }, + { field: 'email1', sort: true, title: 'email' }, + { + columns: [ + { field: 'name', title: 'First Name' }, + { field: 'name', title: 'Last Name' } + ], + title: 'full name' + }, + { field: 'sex', title: 'sex' }, + { field: 'tel', title: 'telephone' }, + { field: 'work', title: 'job' }, + { field: 'city', title: 'city' } + ]); + }); + test('listTable dragHeader interaction', () => { + option.transpose = true; + listTable.updateOption(option); + listTable.selectCell(1, 4); + listTable.stateManager.startMoveCol(1, 4, 120, 60); + listTable.stateManager.updateMoveCol(1, 1, 120, 177); + listTable.stateManager.endMoveCol(); + expect(listTable.columns).toEqual([ + { field: 'id', sort: true, title: 'ID', width: 'auto' }, + { field: 'date1', title: 'birthday' }, + { field: 'email1', sort: true, title: 'email' }, + { + columns: [ + { field: 'name', title: 'First Name' }, + { field: 'name', title: 'Last Name' } + ], + title: 'full name' + }, + { field: 'sex', title: 'sex' }, + { field: 'tel', title: 'telephone' }, + { field: 'work', title: 'job' }, + { field: 'city', title: 'city' } + ]); + }); + listTable.release(); +}); From 161b5556455629afe6183650c533e918c89e898d Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 11:26:45 +0800 Subject: [PATCH 42/65] refactor: move function clearNode position --- .../vtable/src/layout/pivot-layout-helper.ts | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/vtable/src/layout/pivot-layout-helper.ts b/packages/vtable/src/layout/pivot-layout-helper.ts index 1c686926d..6f76cf71d 100644 --- a/packages/vtable/src/layout/pivot-layout-helper.ts +++ b/packages/vtable/src/layout/pivot-layout-helper.ts @@ -319,21 +319,6 @@ export class DimensionTree { getCopiedTree() { const children = cloneDeep(this.tree.children); clearNode(children); - function clearNode(children: any) { - for (let i = 0; i < children.length; i++) { - const node = children[i]; - delete node.level; - delete node.startIndex; - delete node.id; - delete node.levelSpan; - delete node.size; - delete node.startInTotal; - const childrenNew = node.children || node.columns; - if (childrenNew) { - clearNode(childrenNew); - } - } - } return children; } } @@ -625,3 +610,19 @@ export function dealHeaderForTreeMode( } } } + +function clearNode(children: any) { + for (let i = 0; i < children.length; i++) { + const node = children[i]; + delete node.level; + delete node.startIndex; + delete node.id; + delete node.levelSpan; + delete node.size; + delete node.startInTotal; + const childrenNew = node.children || node.columns; + if (childrenNew) { + clearNode(childrenNew); + } + } +} From 05461fc716c7944e333cd9b8f68cca1012696113 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 11:33:44 +0800 Subject: [PATCH 43/65] refactor: rename layout helper file --- packages/vtable/src/PivotTable.ts | 2 +- ...ivot-layout-helper.ts => layout-helper.ts} | 50 +++++++++---------- .../vtable/src/layout/pivot-header-layout.ts | 30 +++++------ .../vtable/src/layout/simple-header-layout.ts | 2 +- 4 files changed, 39 insertions(+), 45 deletions(-) rename packages/vtable/src/layout/{pivot-layout-helper.ts => layout-helper.ts} (93%) diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 5b850af56..79bca6277 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -28,7 +28,7 @@ import type { BaseTableAPI, PivotTableProtected } from './ts-types/base-table'; import { Title } from './components/title/title'; import { cloneDeep } from '@visactor/vutils'; import { Env } from './tools/env'; -import type { LayouTreeNode } from './layout/pivot-layout-helper'; +import type { LayouTreeNode } from './layout/layout-helper'; import { TABLE_EVENT_TYPE } from './core/TABLE_EVENT_TYPE'; import { EditManeger } from './edit/edit-manager'; import * as editors from './edit/editors'; diff --git a/packages/vtable/src/layout/pivot-layout-helper.ts b/packages/vtable/src/layout/layout-helper.ts similarity index 93% rename from packages/vtable/src/layout/pivot-layout-helper.ts rename to packages/vtable/src/layout/layout-helper.ts index 6f76cf71d..c4cb04c5a 100644 --- a/packages/vtable/src/layout/pivot-layout-helper.ts +++ b/packages/vtable/src/layout/layout-helper.ts @@ -19,13 +19,13 @@ import type { ILinkDimension } from '../ts-types/pivot-table/dimension/link-dime import type { IImageDimension } from '../ts-types/pivot-table/dimension/image-dimension'; // import { sharedVar } from './pivot-header-layout'; -interface IPivotLayoutBaseHeadNode { +interface ITreeLayoutBaseHeadNode { id: number; // dimensionKey: string; // // title: string; // indicatorKey?: string; value: string; - children: IPivotLayoutHeadNode[] | undefined; + children: ITreeLayoutHeadNode[] | undefined; columns?: any; //兼容ListTable情况 simple-header-layout中增加了columnTree level: number; /** 节点跨占层数 如汇总节点跨几层维度 */ @@ -41,13 +41,13 @@ interface IPivotLayoutBaseHeadNode { headerIcon?: (string | ColumnIconOption)[] | ((args: CellInfo) => (string | ColumnIconOption)[]); } -interface IPivotLayoutDimensionHeadNode extends IPivotLayoutBaseHeadNode { +interface ITreeLayoutDimensionHeadNode extends ITreeLayoutBaseHeadNode { dimensionKey: string; } -interface IPivotLayoutIndicatorHeadNode extends IPivotLayoutBaseHeadNode { +interface ITreeLayoutIndicatorHeadNode extends ITreeLayoutBaseHeadNode { indicatorKey: string; } -export type IPivotLayoutHeadNode = Either; +export type ITreeLayoutHeadNode = Either; export class DimensionTree { sharedVar: { seqId: number }; // 每一个值对应的序号 结果缓存 @@ -58,7 +58,7 @@ export class DimensionTree { sizeIncludeParent = false; rowExpandLevel: number; hierarchyType: 'grid' | 'tree'; - tree: IPivotLayoutHeadNode = { + tree: ITreeLayoutHeadNode = { id: 0, dimensionKey: '', // title: '', @@ -83,7 +83,7 @@ export class DimensionTree { cache: Map = new Map(); constructor( - tree: IPivotLayoutHeadNode[], + tree: ITreeLayoutHeadNode[], sharedVar: { seqId: number }, hierarchyType: 'grid' | 'tree' = 'grid', rowExpandLevel: number = undefined @@ -95,20 +95,20 @@ export class DimensionTree { this.reset(tree); } - reset(tree: IPivotLayoutHeadNode[], updateTreeNode = false) { + reset(tree: ITreeLayoutHeadNode[], updateTreeNode = false) { // 清空缓存的计算 // this.cache = {}; // this.dimensions = dimensions; this.cache.clear(); this.dimensionKeys = new NumberMap(); - this.tree.children = tree as IPivotLayoutHeadNode[]; + 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(); } - setTreeNode(node: IPivotLayoutHeadNode, startIndex: number, parent: IPivotLayoutHeadNode): number { + setTreeNode(node: ITreeLayoutHeadNode, startIndex: number, parent: ITreeLayoutHeadNode): number { node.startIndex = startIndex; node.startInTotal = (parent.startInTotal ?? 0) + node.startIndex; // if (node.dimensionKey) { @@ -173,14 +173,14 @@ export class DimensionTree { // startInTotal = parent.startIndex + prevStartIndex return size; } - getTreePath(index: number, maxDeep = 30): Array { + getTreePath(index: number, maxDeep = 30): Array { const path: any[] = []; this.searchPath(index, this.tree, path, maxDeep); path.shift(); return path; } - getTreePathByCellIds(ids: LayoutObjectId[]): Array { + getTreePathByCellIds(ids: LayoutObjectId[]): Array { const path: any[] = []; let nodes = this.tree.children; for (let i = 0; i < ids.length; i++) { @@ -196,12 +196,12 @@ export class DimensionTree { // path.shift(); return path; } - findNodeById(nodes: IPivotLayoutHeadNode[], id: LayoutObjectId) { + findNodeById(nodes: ITreeLayoutHeadNode[], id: LayoutObjectId) { return nodes.find(node => { return node.id === id; }); } - searchPath(index: number, node: IPivotLayoutHeadNode, path: Array, maxDeep: number) { + searchPath(index: number, node: ITreeLayoutHeadNode, path: Array, maxDeep: number) { if (!node) { return; } @@ -269,7 +269,7 @@ export class DimensionTree { */ movePosition(level: number, sourceIndex: number, targetIndex: number) { // let sourceNode: IPivotLayoutHeadNode; - let parNode: IPivotLayoutHeadNode; + let parNode: ITreeLayoutHeadNode; let sourceSubIndex: number; let targetSubIndex: number; /** @@ -279,7 +279,7 @@ export class DimensionTree { * @param subIndex * @returns */ - const findTargetNode = (node: IPivotLayoutHeadNode, subIndex: number) => { + const findTargetNode = (node: ITreeLayoutHeadNode, subIndex: number) => { if (sourceSubIndex !== undefined && targetSubIndex !== undefined) { return; } @@ -332,8 +332,8 @@ export type LayouTreeNode = { children?: LayouTreeNode[]; }; -export function generateLayoutTree(tree: LayouTreeNode[], children: IPivotLayoutHeadNode[]) { - children?.forEach((node: IPivotLayoutHeadNode) => { +export function generateLayoutTree(tree: LayouTreeNode[], children: ITreeLayoutHeadNode[]) { + children?.forEach((node: ITreeLayoutHeadNode) => { const diemnsonNode: { dimensionKey?: string; indicatorKey?: string; @@ -359,7 +359,7 @@ export function generateLayoutTree(tree: LayouTreeNode[], children: IPivotLayout //#region 为方法getLayoutRowTreeCount提的工具方法 export function countLayoutTree(children: { children?: any }[], countParentNode: boolean) { let count = 0; - children?.forEach((node: IPivotLayoutHeadNode) => { + children?.forEach((node: ITreeLayoutHeadNode) => { if (countParentNode) { count++; } else { @@ -376,7 +376,7 @@ export function countLayoutTree(children: { children?: any }[], countParentNode: //#endregion export function dealHeader( - hd: IPivotLayoutHeadNode, + hd: ITreeLayoutHeadNode, _headerCellIds: number[][], results: HeaderData[], roots: number[], @@ -489,9 +489,9 @@ export function dealHeader( } } - if ((hd as IPivotLayoutHeadNode).children?.length >= 1) { + if ((hd as ITreeLayoutHeadNode).children?.length >= 1) { layoutMap - ._addHeaders(_headerCellIds, row + ((hd as any).levelSpan ?? 1), (hd as IPivotLayoutHeadNode).children ?? [], [ + ._addHeaders(_headerCellIds, row + ((hd as any).levelSpan ?? 1), (hd as ITreeLayoutHeadNode).children ?? [], [ ...roots, ...Array((hd as any).levelSpan ?? 1).fill(id) ]) @@ -512,7 +512,7 @@ export function dealHeader( } export function dealHeaderForTreeMode( - hd: IPivotLayoutHeadNode, + hd: ITreeLayoutHeadNode, _headerCellIds: number[][], results: HeaderData[], roots: number[], @@ -588,14 +588,14 @@ export function dealHeaderForTreeMode( for (let r = row - 1; r >= 0; r--) { _headerCellIds[r][layoutMap.colIndex] = roots[r]; } - if (hd.hierarchyState === HierarchyState.expand && (hd as IPivotLayoutHeadNode).children?.length >= 1) { + if (hd.hierarchyState === HierarchyState.expand && (hd as ITreeLayoutHeadNode).children?.length >= 1) { //row传值 colIndex++和_addHeaders有区别 show && layoutMap.colIndex++; layoutMap ._addHeadersForTreeMode( _headerCellIds, row, - (hd as IPivotLayoutHeadNode).children ?? [], + (hd as ITreeLayoutHeadNode).children ?? [], [...roots, id], totalLevel, show && hd.hierarchyState === HierarchyState.expand, //当前节点show 且当前节点状态为展开 则传给子节点为show：true diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index a883a4098..41aa9b6cb 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -45,14 +45,8 @@ import { isCartesianChart, isHasCartesianChartInline } from './chart-helper/get-chart-spec'; -import type { LayouTreeNode, IPivotLayoutHeadNode } from './pivot-layout-helper'; -import { - DimensionTree, - countLayoutTree, - dealHeader, - dealHeaderForTreeMode, - generateLayoutTree -} from './pivot-layout-helper'; +import type { LayouTreeNode, ITreeLayoutHeadNode } from './layout-helper'; +import { DimensionTree, countLayoutTree, dealHeader, dealHeaderForTreeMode, generateLayoutTree } from './layout-helper'; import type { Dataset } from '../dataset/dataset'; import { cloneDeep, isArray, isValid } from '@visactor/vutils'; import type { TextStyle } from '../body-helper/style'; @@ -217,9 +211,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { this.indicatorKeys.push(indicator.indicatorKey); } }); - this.columnDimensionTree = new DimensionTree((this.columnTree as IPivotLayoutHeadNode[]) ?? [], this.sharedVar); + this.columnDimensionTree = new DimensionTree((this.columnTree as ITreeLayoutHeadNode[]) ?? [], this.sharedVar); this.rowDimensionTree = new DimensionTree( - (this.rowTree as IPivotLayoutHeadNode[]) ?? [], + (this.rowTree as ITreeLayoutHeadNode[]) ?? [], this.sharedVar, this.rowHierarchyType, this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined @@ -471,7 +465,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { this.setColumnWidths(); } - _addHeaders(_headerCellIds: number[][], row: number, header: IPivotLayoutHeadNode[], roots: number[]): HeaderData[] { + _addHeaders(_headerCellIds: number[][], row: number, header: ITreeLayoutHeadNode[], roots: number[]): HeaderData[] { const _this = this; function _newRow(row: number): number[] { const newRow: number[] = (_headerCellIds[row] = []); @@ -498,7 +492,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { _addHeadersForTreeMode( _headerCellIds: number[][], row: number, - header: IPivotLayoutHeadNode[], + header: ITreeLayoutHeadNode[], roots: number[], totalLevel: number, show: boolean, @@ -1459,8 +1453,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // console.log(`${col}-${row}`); const recordCol = this.getBodyIndexByCol(col); const recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex; - let colPath: IPivotLayoutHeadNode[] = []; - let rowPath: IPivotLayoutHeadNode[] = []; + let colPath: ITreeLayoutHeadNode[] = []; + let rowPath: ITreeLayoutHeadNode[] = []; if (row >= 0 && recordCol >= 0) { colPath = this.columnDimensionTree.getTreePath( recordCol, @@ -1808,7 +1802,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { let row = 0; if (rowDimension) { row = this.columnHeaderLevelCount; - const { startInTotal, level } = rowDimension as IPivotLayoutHeadNode; + const { startInTotal, level } = rowDimension as ITreeLayoutHeadNode; row += startInTotal; if (this.rowHierarchyType === 'grid') { col = this.rowHeaderTitle ? level + 1 : level; @@ -1818,7 +1812,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { return { col, row }; } else if (colDimension) { col = this.rowHeaderLevelCount; - const { startInTotal, level } = colDimension as IPivotLayoutHeadNode; + const { startInTotal, level } = colDimension as ITreeLayoutHeadNode; col += startInTotal; row = this.columnHeaderTitle ? level + 1 : level; return { col, row }; @@ -2247,7 +2241,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // 通过dimension获取col和row if (rowDimensionFinded || forceBody) { row = this.columnHeaderLevelCount; - const { startInTotal, level } = (rowDimensionFinded as IPivotLayoutHeadNode) ?? defaultDimension; + const { startInTotal, level } = (rowDimensionFinded as ITreeLayoutHeadNode) ?? defaultDimension; row += startInTotal ?? 0; if (this.rowHierarchyType === 'grid') { defaultCol = this.rowHeaderTitle ? level + 1 : level; @@ -2257,7 +2251,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } if (colDimensionFinded || forceBody) { col = this.rowHeaderLevelCount; - const { startInTotal, level } = (colDimensionFinded as IPivotLayoutHeadNode) ?? defaultDimension; + const { startInTotal, level } = (colDimensionFinded as ITreeLayoutHeadNode) ?? defaultDimension; col += startInTotal ?? 0; defaultRow = this.columnHeaderTitle ? level + 1 : level; } diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index a841e3734..ffecfe47c 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -12,7 +12,7 @@ import type { WidthData } from '../ts-types/list-table/layout-map/api'; import { checkHasChart, getChartDataId } from './chart-helper/get-chart-spec'; -import { DimensionTree } from './pivot-layout-helper'; +import { DimensionTree } from './layout-helper'; // import { EmptyDataCache } from './utils'; // let seqId = 0; From cc74a2e4b0808e904997288772720c612e902700 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 12:07:41 +0800 Subject: [PATCH 44/65] fix: select region saved problem #1018 --- packages/vtable/src/state/select/update-position.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/vtable/src/state/select/update-position.ts b/packages/vtable/src/state/select/update-position.ts index 05fd34936..aa6006157 100644 --- a/packages/vtable/src/state/select/update-position.ts +++ b/packages/vtable/src/state/select/update-position.ts @@ -136,7 +136,10 @@ export function updateSelectPosition( }); } else if (col >= 0 && row >= 0) { const cellRange = table.getCellRange(col, row); - state.select.ranges.push(cellRange); + state.select.ranges.push({ + start: { col: cellRange.start.col, row: cellRange.start.row }, + end: { col: cellRange.end.col, row: cellRange.end.row } + }); } cellPos.col = col; cellPos.row = row; From 5af5f9733d7442b059fcbab509946d82497938cc Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 12:08:06 +0800 Subject: [PATCH 45/65] docs: update changlog of rush --- .../1018-bug-selectRegion_2024-01-30-04-08.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json diff --git a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json new file mode 100644 index 000000000..b2b57cd4b --- /dev/null +++ b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: select region saved problem #1018\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 65bc3d51880b88fd52ae0e8bc925494ac02b7962 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 14:54:49 +0800 Subject: [PATCH 46/65] fix: when call updateColumns and discount col occor error #1015 --- .../progress/update-position/dynamic-set-x.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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 ab2413a39..f0f15a779 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 @@ -92,7 +92,11 @@ async function moveColumn( proxy.table.scenegraph.proxy.deltaX += deltaX; proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count; - proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count; + proxy.totalCol = Math.max( + 0, + Math.min(proxy.table.colCount - 1, direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count) + ); + proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2); proxy.colUpdatePos = distStartCol; proxy.colUpdateDirection = direction; @@ -147,7 +151,10 @@ async function moveColumn( } proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count; - proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count; + proxy.totalCol = Math.max( + 0, + Math.min(proxy.table.colCount - 1, direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count) + ); proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2); proxy.colUpdatePos = proxy.colStart; proxy.colUpdateDirection = distEndCol > proxy.bodyRightCol - (proxy.colEnd - proxy.colStart + 1) ? 'right' : 'left'; From bbc639a125a405a5cc96bbf4c8138b9ed801c99e Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 14:55:09 +0800 Subject: [PATCH 47/65] docs: update changlog of rush --- .../1018-bug-selectRegion_2024-01-30-06-55.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json diff --git a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json new file mode 100644 index 000000000..95f9b5624 --- /dev/null +++ b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: when call updateColumns and discount col occor error #1015\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From d100409520abad06e16cdddbec33fec52970bc63 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 17:07:36 +0800 Subject: [PATCH 48/65] fix: empty string compute row height error #1031 --- packages/vtable/src/core/BaseTable.ts | 2 +- packages/vtable/src/scenegraph/layout/compute-row-height.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 29d219cff..f72189d6f 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -909,7 +909,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { // : this.defaultHeaderRowHeight // : this.internalProps.defaultRowHeight) // ); - if (this.rowHeightsMap.get(row)) { + if (isValid(this.rowHeightsMap.get(row))) { return this.rowHeightsMap.get(row); } const defaultHeight = this.getDefaultRowHeight(row); diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index 9473e3523..c964033a0 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -695,7 +695,7 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption, wordBreak: 'break-word', whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal' }); - maxHeight = utilTextMark.AABBBounds.height(); + maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize); } else { // autoWrapText = false maxHeight = lines.length * lineHeight; From 0f54295cd4c63c9bf7c3140cf6ff546ab80deb18 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 30 Jan 2024 17:08:01 +0800 Subject: [PATCH 49/65] docs: update changlog of rush --- ...mpty-string-computeRowHeight_2024-01-30-09-08.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json diff --git a/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json b/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json new file mode 100644 index 000000000..5ba015073 --- /dev/null +++ b/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: empty string compute row height error #1031\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From b894f929fa3f664b8b9f8c3a7acfae80e4da21c0 Mon Sep 17 00:00:00 2001 From: martes Date: Wed, 31 Jan 2024 10:31:42 +0800 Subject: [PATCH 50/65] docs: update process pic --- docs/assets/guide/en/edit/edit_cell.md | 2 +- docs/assets/guide/zh/edit/edit_cell.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md index 138a37607..1d1c663a3 100644 --- a/docs/assets/guide/en/edit/edit_cell.md +++ b/docs/assets/guide/en/edit/edit_cell.md @@ -67,7 +67,7 @@ If the several editors provided by the VTable-ediotrs library cannot meet your n You can use the following flow chart to understand the relationship between the editor and VTable: -![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/editCellProcess.png) +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/editCellProcess1.png) The following is sample code for a custom editor: diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md index 559bdbbc0..7e86a5c39 100644 --- a/docs/assets/guide/zh/edit/edit_cell.md +++ b/docs/assets/guide/zh/edit/edit_cell.md @@ -76,7 +76,7 @@ interface ColumnDefine { 可以结合下面这个流程图来理解编辑器和VTable之间的关系： -![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/editCellProcess.png) +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/editCellProcess1.png) 以下是一个自定义编辑器的示例代码： From cf62c277a7af6b4d574610fa9178c69683ce72a5 Mon Sep 17 00:00:00 2001 From: martes Date: Wed, 31 Jan 2024 15:46:51 +0800 Subject: [PATCH 51/65] fix: replace reference of source code --- packages/react-vtable/src/eventsUtils.ts | 96 ++++++++++++------------ 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/react-vtable/src/eventsUtils.ts b/packages/react-vtable/src/eventsUtils.ts index 85ab9629d..487eaaad4 100644 --- a/packages/react-vtable/src/eventsUtils.ts +++ b/packages/react-vtable/src/eventsUtils.ts @@ -1,6 +1,6 @@ import { ListTable, PivotTable, PivotChart } from '@visactor/vtable'; import type { IVTable } from './tables/base-table'; -import type { TableEventHandlersEventArgumentMap } from '@visactor/vtable/src/ts-types'; +import type { TYPES } from '@visactor/vtable'; export type EventCallback = (params: Params) => void; @@ -11,56 +11,56 @@ const EVENT_TYPE = { }; export interface EventsProps { - onClickCell?: EventCallback; - onDblClickCell?: EventCallback; - onMouseDownCell?: EventCallback; - onMouseUpCell?: EventCallback; - onSelectedCell?: EventCallback; - onKeyDown?: EventCallback; - onMouseEnterTable?: EventCallback; - onMouseLeaveTable?: 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; - onAfterRender?: EventCallback; - onInitialized?: EventCallback; + onClickCell?: EventCallback; + onDblClickCell?: EventCallback; + onMouseDownCell?: EventCallback; + onMouseUpCell?: EventCallback; + onSelectedCell?: EventCallback; + onKeyDown?: EventCallback; + onMouseEnterTable?: EventCallback; + onMouseLeaveTable?: 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; + onAfterRender?: EventCallback; + onInitialized?: EventCallback; // pivot table only - onPivotSortClick?: EventCallback; - onDrillMenuClick?: EventCallback; + onPivotSortClick?: EventCallback; + onDrillMenuClick?: EventCallback; // pivot chart only - onVChartEventType?: EventCallback; + onVChartEventType?: EventCallback; } export const TABLE_EVENTS = { @@ -157,7 +157,7 @@ export const bindEventsToTable = ( if (newEventProps) { Object.keys(newEventProps).forEach(eventKey => { if (!prevEventProps || !prevEventProps[eventKey] || prevEventProps[eventKey] !== newEventProps[eventKey]) { - table.on(supportedEvents[eventKey] as keyof TableEventHandlersEventArgumentMap, newEventProps[eventKey]); + table.on(supportedEvents[eventKey] as keyof TYPES.TableEventHandlersEventArgumentMap, newEventProps[eventKey]); } }); } From f09409378b8ef7e74a32b899719ba3c06b164ded Mon Sep 17 00:00:00 2001 From: martes Date: Wed, 31 Jan 2024 15:53:17 +0800 Subject: [PATCH 52/65] docs: update definition in docs. --- .../guide/en/Developer_Ecology/react.md | 94 +++++++++---------- .../guide/zh/Developer_Ecology/react.md | 94 +++++++++---------- 2 files changed, 94 insertions(+), 94 deletions(-) diff --git a/docs/assets/guide/en/Developer_Ecology/react.md b/docs/assets/guide/en/Developer_Ecology/react.md index c5375a68a..a1e08adb0 100644 --- a/docs/assets/guide/en/Developer_Ecology/react.md +++ b/docs/assets/guide/en/Developer_Ecology/react.md @@ -143,7 +143,7 @@ The props attributes accepted by PivotTable&PivotChart are the same as options. - PivotColumnHeaderTitle: column header title configuration, consistent with the definition of columnHeaderTitle in option [api](../../option/PivotTable#rowHeaderTitle) - PivotRowHeaderTitle: row header title configuration, consistent with the definition of rowHeaderTitle in option [api](../../option/PivotTable#columnHeaderTitle) - PivotCorner: Corner configuration, consistent with the definition of corner in option [api](../../option/PivotTable#corner) - + ```jsx return ( ; - onDblClickCell?: EventCallback; - onMouseDownCell?: EventCallback; - onMouseUpCell?: EventCallback; - onSelectedCell?: EventCallback; - onKeyDown?: EventCallback; - onMouseEnterTable?: EventCallback; - onMouseLeaveTable?: 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; - onAfterRender?: EventCallback; - onInitialized?: EventCallback; + onClickCell?: EventCallback; + onDblClickCell?: EventCallback; + onMouseDownCell?: EventCallback; + onMouseUpCell?: EventCallback; + onSelectedCell?: EventCallback; + onKeyDown?: EventCallback; + onMouseEnterTable?: EventCallback; + onMouseLeaveTable?: 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; + onAfterRender?: EventCallback; + onInitialized?: EventCallback; // pivot table only - onPivotSortClick?: EventCallback; - onDrillMenuClick?: EventCallback; + onPivotSortClick?: EventCallback; + onDrillMenuClick?: EventCallback; // pivot chart only - onVChartEventType?: EventCallback; + onVChartEventType?: EventCallback; } ``` diff --git a/docs/assets/guide/zh/Developer_Ecology/react.md b/docs/assets/guide/zh/Developer_Ecology/react.md index 9907858ff..18343bf79 100644 --- a/docs/assets/guide/zh/Developer_Ecology/react.md +++ b/docs/assets/guide/zh/Developer_Ecology/react.md @@ -143,7 +143,7 @@ PivotTable&PivotChart接受的props属性与option一致，子组件如下： - PivotColumnHeaderTitle: 列表头标题配置，同option中的columnHeaderTitle的定义一致 [api](../../option/PivotTable#rowHeaderTitle) - PivotRowHeaderTitle: 行头标题配置，同option中的rowHeaderTitle的定义一致 [api](../../option/PivotTable#columnHeaderTitle) - PivotCorner: 角头配置，同option中的corner的定义一致 [api](../../option/PivotTable#corner) - + ```jsx return ( ; - onDblClickCell?: EventCallback; - onMouseDownCell?: EventCallback; - onMouseUpCell?: EventCallback; - onSelectedCell?: EventCallback; - onKeyDown?: EventCallback; - onMouseEnterTable?: EventCallback; - onMouseLeaveTable?: 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; - onAfterRender?: EventCallback; - onInitialized?: EventCallback; + onClickCell?: EventCallback; + onDblClickCell?: EventCallback; + onMouseDownCell?: EventCallback; + onMouseUpCell?: EventCallback; + onSelectedCell?: EventCallback; + onKeyDown?: EventCallback; + onMouseEnterTable?: EventCallback; + onMouseLeaveTable?: 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; + onAfterRender?: EventCallback; + onInitialized?: EventCallback; // pivot table only - onPivotSortClick?: EventCallback; - onDrillMenuClick?: EventCallback; + onPivotSortClick?: EventCallback; + onDrillMenuClick?: EventCallback; // pivot chart only - onVChartEventType?: EventCallback; + onVChartEventType?: EventCallback; } ``` From 3a3a779d855497e5a8e26d4a5b8e8375c6d975b1 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 31 Jan 2024 18:02:58 +0800 Subject: [PATCH 53/65] fix: fix height range index --- packages/vtable/src/core/BaseTable.ts | 5 ++++- packages/vtable/src/layout/row-height-map.ts | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 5360fb319..0c98bb4be 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -840,7 +840,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @returns */ getColsWidth(startCol: number, endCol: number): number { - endCol = Math.min(endCol, this.colCount - 1); // endCol最大为this.colCount - 1，超过会导致width计算为NaN + startCol = Math.max(startCol, 0); + endCol = Math.min(endCol, (this.colCount ?? Infinity) - 1); // endCol最大为this.colCount - 1，超过会导致width计算为NaN //通过缓存获取指定范围列宽 const cachedColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol}`); if (cachedColWidth !== null && cachedColWidth !== undefined) { @@ -956,6 +957,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @returns */ getRowsHeight(startRow: number, endRow: number): number { + startRow = Math.max(startRow, 0); + endRow = Math.min(endRow, (this.rowCount ?? Infinity) - 1); //通过缓存获取指定范围行高 // const cachedRowHeight = this._rowRangeHeightsMap.get(`$${startRow}$${endRow}`); // if (cachedRowHeight !== null && cachedRowHeight !== undefined) { diff --git a/packages/vtable/src/layout/row-height-map.ts b/packages/vtable/src/layout/row-height-map.ts index a856bfd2f..35fd4e599 100644 --- a/packages/vtable/src/layout/row-height-map.ts +++ b/packages/vtable/src/layout/row-height-map.ts @@ -116,6 +116,9 @@ export class NumberRangeMap { } calculatePrefixSum(position: number) { + if (position < 0) { + return 0; + } if (this.cumulativeSum.has(position)) { let cache = this.cumulativeSum.get(position); for (const [pos, difference] of this.difference) { From 6d33cfe7d627922c4b2496e9d57e566472962dc5 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 31 Jan 2024 17:33:30 +0800 Subject: [PATCH 54/65] feat: update vrender version --- common/config/rush/pnpm-lock.yaml | 30 +++++++++++++++--------------- packages/vtable/package.json | 6 +++--- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index b331198a8..c968ef65a 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -181,9 +181,9 @@ importers: '@types/react-dom': ^18.0.0 '@visactor/vchart': 1.9.0 '@visactor/vdataset': ~0.17.1 - '@visactor/vrender-components': 0.17.19-alpha.1 - '@visactor/vrender-core': 0.17.19-alpha.1 - '@visactor/vrender-kits': 0.17.19-alpha.1 + '@visactor/vrender-components': 0.17.20-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.1 + '@visactor/vrender-kits': 0.17.20-alpha.1 '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.17.1 @@ -226,9 +226,9 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.17.4 - '@visactor/vrender-components': 0.17.19-alpha.1 - '@visactor/vrender-core': 0.17.19-alpha.1 - '@visactor/vrender-kits': 0.17.19-alpha.1 + '@visactor/vrender-components': 0.17.20-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.1 + '@visactor/vrender-kits': 0.17.20-alpha.1 '@visactor/vscale': 0.17.4 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.17.4 @@ -3468,11 +3468,11 @@ packages: '@visactor/vscale': 0.17.4 '@visactor/vutils': 0.17.4 - /@visactor/vrender-components/0.17.19-alpha.1: - resolution: {integrity: sha512-86oJ8Jg4nKLHsAwNzAmk/54SdC6gx2d5Y7Cn0x6Q7hpsjb3eWrcjS8g8rHPp8HOn3Bl/mphGK5DHrpk3ZSjA0Q==} + /@visactor/vrender-components/0.17.20-alpha.1: + resolution: {integrity: sha512-VkT5RFYYbS6YmYnFAgoRlEoeKtvoryFG2vwPM5X0wrYOpZvTbXuvOAgNKHawxV1UtkeHfVHe1ZY9I5+qvwZQtA==} dependencies: - '@visactor/vrender-core': 0.17.19-alpha.1 - '@visactor/vrender-kits': 0.17.19-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.1 + '@visactor/vrender-kits': 0.17.20-alpha.1 '@visactor/vscale': 0.17.4 '@visactor/vutils': 0.17.4 dev: false @@ -3490,8 +3490,8 @@ packages: '@visactor/vutils': 0.17.4 color-convert: 2.0.1 - /@visactor/vrender-core/0.17.19-alpha.1: - resolution: {integrity: sha512-9io+5xdvxWF4i9sr1P4W9i2PjaAqfTCnMUKC1rDl3CLzreqVCl9NA0UKqItv4OFhTCmcH7zwJzgUSjamJvbJPQ==} + /@visactor/vrender-core/0.17.20-alpha.1: + resolution: {integrity: sha512-GdmRx2PeV52sW6YB5LL6u2jwj3s/INfHXAY6WVM7mouQE9lDt0EObQJJxIbf55ztPwyJBXaaD1AZ8qIZwle87w==} dependencies: '@visactor/vutils': 0.17.4 color-convert: 2.0.1 @@ -3514,11 +3514,11 @@ packages: '@visactor/vutils': 0.17.4 roughjs: 4.5.2 - /@visactor/vrender-kits/0.17.19-alpha.1: - resolution: {integrity: sha512-O0lrvTIBZgPULCEtWqBxXZ47cQqjLtYs4MhqoFiLjrQr9VTBxomOyGAZDq08YLAfNFgQFRjiaWBeTi3JIyfxfQ==} + /@visactor/vrender-kits/0.17.20-alpha.1: + resolution: {integrity: sha512-0jRe6ayjlR7vZWDQ4dYYICsnzzG7IK9UnqIasGnmjW7D8ZpMaSM1PcodiAOBLy8ELnF4gYbF1Uady/OpDdD6TQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.17.19-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.1 '@visactor/vutils': 0.17.4 roughjs: 4.5.2 dev: false diff --git a/packages/vtable/package.json b/packages/vtable/package.json index cc59075b6..ad258d4a5 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,9 +50,9 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender-core": "0.17.19-alpha.1", - "@visactor/vrender-kits": "0.17.19-alpha.1", - "@visactor/vrender-components": "0.17.19-alpha.1", + "@visactor/vrender-core": "0.17.20-alpha.1", + "@visactor/vrender-kits": "0.17.20-alpha.1", + "@visactor/vrender-components": "0.17.20-alpha.1", "@visactor/vutils-extension": "~1.8.5", "@visactor/vutils": "~0.17.1", "@visactor/vscale": "~0.17.1", From bdb341268a285fdc23e30f1eccf315e4a4428577 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 30 Jan 2024 18:52:34 +0800 Subject: [PATCH 55/65] docs: update vue guide --- docs/assets/guide/en/Developer_Ecology/vue.md | 12 +++++++++++- docs/assets/guide/zh/Developer_Ecology/vue.md | 12 +++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/docs/assets/guide/en/Developer_Ecology/vue.md b/docs/assets/guide/en/Developer_Ecology/vue.md index a2eba0c42..ddb2ee243 100644 --- a/docs/assets/guide/en/Developer_Ecology/vue.md +++ b/docs/assets/guide/en/Developer_Ecology/vue.md @@ -2,7 +2,7 @@ In Vue 3.x, using VTable -Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/vchart-demo-vue-73h8wl)for details. +Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. ## Code Example @@ -136,4 +136,14 @@ onMounted(() => { }); +``` + +## Notice + +If you need to use ref to save table instances, please use `shallowRef`. Using `ref` will affect internal attribute updates and cause rendering exceptions. + + +``` +const tableInstance = shallowRef(); +tableInstance.value = new ListTable(listTableRef.value, option); ``` \ No newline at end of file diff --git a/docs/assets/guide/zh/Developer_Ecology/vue.md b/docs/assets/guide/zh/Developer_Ecology/vue.md index 72607f95c..957ff6bb6 100644 --- a/docs/assets/guide/zh/Developer_Ecology/vue.md +++ b/docs/assets/guide/zh/Developer_Ecology/vue.md @@ -2,7 +2,7 @@ 在 Vue 3.x 中使用 Vtable -组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/devbox/vchart-demo-vue-73h8wl) +组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) ## 代码示例 @@ -136,3 +136,13 @@ onMounted(() => { ``` + +## 注意 + +如果需要使用ref保存table实例，请使用`shallowRef`，使用`ref`会影响内部属性更新，导致渲染异常。 + + +``` +const tableInstance = shallowRef(); +tableInstance.value = new ListTable(listTableRef.value, option); +``` \ No newline at end of file From 174ca0e290e56fa6a8aff4899dbf572fd81bae13 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 31 Jan 2024 18:12:00 +0800 Subject: [PATCH 56/65] docs: update faq about vue --- docs/assets/faq/en/20-How to use VTable in Vue.md | 2 +- docs/assets/faq/zh/20-How to use VTable in Vue.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/faq/en/20-How to use VTable in Vue.md b/docs/assets/faq/en/20-How to use VTable in Vue.md index fbb8e0845..e22fa1a96 100644 --- a/docs/assets/faq/en/20-How to use VTable in Vue.md +++ b/docs/assets/faq/en/20-How to use VTable in Vue.md @@ -8,7 +8,7 @@ VTable does not encapsulate the Vue component, so how do you VTable in Vue? In Vue 3.x, using VTable -Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/sandbox/mystifying-hamilton-3wl76r?file=%2Fsrc%2Fcomponents%2FPivotChart.vue%3A9339%2C1)for details. +Composition API， you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. ## Code Example diff --git a/docs/assets/faq/zh/20-How to use VTable in Vue.md b/docs/assets/faq/zh/20-How to use VTable in Vue.md index b0b274411..4695a7e62 100644 --- a/docs/assets/faq/zh/20-How to use VTable in Vue.md +++ b/docs/assets/faq/zh/20-How to use VTable in Vue.md @@ -8,7 +8,7 @@ VTable没有封装Vue组件，那么如何在 Vue 中VTable呢？ 在 Vue 3.x 中使用 Vtable -组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/sandbox/mystifying-hamilton-3wl76r?file=%2Fsrc%2Fcomponents%2FPivotChart.vue%3A9339%2C1) +组合式 API，具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) 不同的表格，封装方式都是类似的 From 2de5af35abefd176a24cdc9ff34311fab44f6272 Mon Sep 17 00:00:00 2001 From: martes Date: Wed, 31 Jan 2024 18:48:19 +0800 Subject: [PATCH 57/65] fix: only apply `onClickElsewhere` while `targetIsOnEditor` is not provided. --- packages/vtable/src/edit/edit-manager.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index f5afc86d4..4267c6a69 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/packages/vtable/src/edit/edit-manager.ts @@ -110,9 +110,7 @@ export class EditManeger { if (target && this.editingEditor.targetIsOnEditor(target)) { return; } - } - - if (!this.editingEditor.onClickElsewhere || (target && this.editingEditor.onClickElsewhere?.(target))) { + } else if (!this.editingEditor.onClickElsewhere || (target && this.editingEditor.onClickElsewhere?.(target))) { return; } From 5248186da786a64b707b807173320bafa23704c0 Mon Sep 17 00:00:00 2001 From: martes Date: Thu, 1 Feb 2024 09:38:04 +0800 Subject: [PATCH 58/65] docs: update source code links --- docs/assets/guide/en/edit/edit_cell.md | 2 +- docs/assets/guide/zh/edit/edit_cell.md | 2 +- docs/assets/option/en/column/base-column-type.md | 4 ++-- docs/assets/option/en/indicator/base-indicator-type.md | 2 +- docs/assets/option/en/table/listTable.md | 4 ++-- docs/assets/option/en/table/pivotTable.md | 4 ++-- docs/assets/option/zh/column/base-column-type.md | 4 ++-- docs/assets/option/zh/indicator/base-indicator-type.md | 2 +- docs/assets/option/zh/table/listTable.md | 2 +- docs/assets/option/zh/table/pivotTable.md | 2 +- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md index 1d1c663a3..d8b13fd1a 100644 --- a/docs/assets/guide/en/edit/edit_cell.md +++ b/docs/assets/guide/en/edit/edit_cell.md @@ -157,7 +157,7 @@ VTable.register.editor('custom-date', custom_date_editor); ``` In the above example, we created a custom editor named `DateEditor` and implemented the methods required by the `IEditor` interface. Then, we register the custom editor into the VTable through the `VTable.register.editor` method for use in the table. -`IEditor` [definition](https://github.com/VisActor/VTable/blob/develop/packages/vtable-editors/src/types.ts)： +`IEditor` [definition](https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts)： ```ts export interface IEditor { /** Called when cell enters edit mode. */ diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md index 7e86a5c39..ea988e8ab 100644 --- a/docs/assets/guide/zh/edit/edit_cell.md +++ b/docs/assets/guide/zh/edit/edit_cell.md @@ -165,7 +165,7 @@ VTable.register.editor('custom-date', custom_date_editor); 在上面的示例中，我们创建了一个名为`DateEditor`的自定义编辑器，并实现了`IEditor`接口所要求的方法。然后，我们通过`VTable.register.editor`方法将自定义编辑器注册到VTable中，以便在表格中使用。 -`IEditor` 接口[定义](https://github.com/VisActor/VTable/blob/develop/packages/vtable-editors/src/types.ts)： +`IEditor` 接口[定义](https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts)： ```ts export interface IEditor { /** * 单元格进入编辑状态时调用 */ diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md index 8b48d959a..182c31b2e 100644 --- a/docs/assets/option/en/column/base-column-type.md +++ b/docs/assets/option/en/column/base-column-type.md @@ -207,7 +207,7 @@ Configure the column cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . ${prefix} headerEditor (string|Object|Function) @@ -218,4 +218,4 @@ headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI } ``` ${prefix} columns (Array) -Configure arrays with upper columns, nesting structures to describe column grouping relationships. \ No newline at end of file +Configure arrays with upper columns, nesting structures to describe column grouping relationships. diff --git a/docs/assets/option/en/indicator/base-indicator-type.md b/docs/assets/option/en/indicator/base-indicator-type.md index 8fe6ed226..8169463d1 100644 --- a/docs/assets/option/en/indicator/base-indicator-type.md +++ b/docs/assets/option/en/indicator/base-indicator-type.md @@ -160,4 +160,4 @@ Configure the indicator cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts . \ No newline at end of file +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md index 81bd053ec..c31f32361 100644 --- a/docs/assets/option/en/table/listTable.md +++ b/docs/assets/option/en/table/listTable.md @@ -76,7 +76,7 @@ Global configuration cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . ${prefix} headerEditor (string|Object|Function) @@ -97,4 +97,4 @@ When displayed as a tree structure, the indentation value of each layer of conte ## hierarchyExpandLevel(number) -When displayed as a tree structure, the number of levels is expanded by default. The default value is 1, which only displays the root node. If configured to `Infinity`, all nodes will be expanded. \ No newline at end of file +When displayed as a tree structure, the number of levels is expanded by default. The default value is 1, which only displays the root node. If configured to `Infinity`, all nodes will be expanded. diff --git a/docs/assets/option/en/table/pivotTable.md b/docs/assets/option/en/table/pivotTable.md index 22e43eed4..120fc9c36 100644 --- a/docs/assets/option/en/table/pivotTable.md +++ b/docs/assets/option/en/table/pivotTable.md @@ -339,10 +339,10 @@ Global configuration cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . {{ use: common-option-secondary( prefix = '#', tableType = 'listTable' ) }} -``` \ No newline at end of file +``` diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md index c3e9e5f91..d86f26d79 100644 --- a/docs/assets/option/zh/column/base-column-type.md +++ b/docs/assets/option/zh/column/base-column-type.md @@ -217,7 +217,7 @@ ${prefix} editor (string|Object|Function) ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 ${prefix} headerEditor (string|Object|Function) @@ -227,4 +227,4 @@ headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI } ``` ${prefix} columns (Array) -同上层的列配置数组，嵌套结构来描述列分组关系。 \ No newline at end of file +同上层的列配置数组，嵌套结构来描述列分组关系。 diff --git a/docs/assets/option/zh/indicator/base-indicator-type.md b/docs/assets/option/zh/indicator/base-indicator-type.md index 9896cd763..6f0454100 100644 --- a/docs/assets/option/zh/indicator/base-indicator-type.md +++ b/docs/assets/option/zh/indicator/base-indicator-type.md @@ -160,4 +160,4 @@ ${prefix} editor (string|Object|Function) ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。 \ No newline at end of file +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md index 5d7f95f17..97e9b4b6f 100644 --- a/docs/assets/option/zh/table/listTable.md +++ b/docs/assets/option/zh/table/listTable.md @@ -75,7 +75,7 @@ SortState { ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 ${prefix} headerEditor (string|Object|Function) diff --git a/docs/assets/option/zh/table/pivotTable.md b/docs/assets/option/zh/table/pivotTable.md index dc47befe2..135517786 100644 --- a/docs/assets/option/zh/table/pivotTable.md +++ b/docs/assets/option/zh/table/pivotTable.md @@ -343,7 +343,7 @@ export interface IIndicatorHeaderNode { ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 {{ use: common-option-secondary( prefix = '#', From eeeee2a99820279cf7b7a8b0599ea305b7fcac91 Mon Sep 17 00:00:00 2001 From: martes Date: Thu, 1 Feb 2024 09:41:06 +0800 Subject: [PATCH 59/65] docs: update source code links --- docs/assets/option/en/column/base-column-type.md | 2 +- docs/assets/option/en/indicator/base-indicator-type.md | 2 +- docs/assets/option/en/table/listTable.md | 2 +- docs/assets/option/en/table/pivotTable.md | 2 +- docs/assets/option/zh/column/base-column-type.md | 2 +- docs/assets/option/zh/indicator/base-indicator-type.md | 2 +- docs/assets/option/zh/table/listTable.md | 2 +- docs/assets/option/zh/table/pivotTable.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md index 182c31b2e..ceeacb5e1 100644 --- a/docs/assets/option/en/column/base-column-type.md +++ b/docs/assets/option/en/column/base-column-type.md @@ -207,7 +207,7 @@ Configure the column cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts . ${prefix} headerEditor (string|Object|Function) diff --git a/docs/assets/option/en/indicator/base-indicator-type.md b/docs/assets/option/en/indicator/base-indicator-type.md index 8169463d1..f098c3ddc 100644 --- a/docs/assets/option/en/indicator/base-indicator-type.md +++ b/docs/assets/option/en/indicator/base-indicator-type.md @@ -160,4 +160,4 @@ Configure the indicator cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts . diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md index c31f32361..4b39d2f6b 100644 --- a/docs/assets/option/en/table/listTable.md +++ b/docs/assets/option/en/table/listTable.md @@ -76,7 +76,7 @@ Global configuration cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts . ${prefix} headerEditor (string|Object|Function) diff --git a/docs/assets/option/en/table/pivotTable.md b/docs/assets/option/en/table/pivotTable.md index 120fc9c36..2bf13d14e 100644 --- a/docs/assets/option/en/table/pivotTable.md +++ b/docs/assets/option/en/table/pivotTable.md @@ -339,7 +339,7 @@ Global configuration cell editor ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts . +Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts . {{ use: common-option-secondary( prefix = '#', diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md index d86f26d79..5aaeac17d 100644 --- a/docs/assets/option/zh/column/base-column-type.md +++ b/docs/assets/option/zh/column/base-column-type.md @@ -217,7 +217,7 @@ ${prefix} editor (string|Object|Function) ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts。 ${prefix} headerEditor (string|Object|Function) diff --git a/docs/assets/option/zh/indicator/base-indicator-type.md b/docs/assets/option/zh/indicator/base-indicator-type.md index 6f0454100..0756b2746 100644 --- a/docs/assets/option/zh/indicator/base-indicator-type.md +++ b/docs/assets/option/zh/indicator/base-indicator-type.md @@ -160,4 +160,4 @@ ${prefix} editor (string|Object|Function) ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts。 diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md index 97e9b4b6f..ea210f8d3 100644 --- a/docs/assets/option/zh/table/listTable.md +++ b/docs/assets/option/zh/table/listTable.md @@ -75,7 +75,7 @@ SortState { ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts。 ${prefix} headerEditor (string|Object|Function) diff --git a/docs/assets/option/zh/table/pivotTable.md b/docs/assets/option/zh/table/pivotTable.md index 135517786..22e7323c6 100644 --- a/docs/assets/option/zh/table/pivotTable.md +++ b/docs/assets/option/zh/table/pivotTable.md @@ -343,7 +343,7 @@ export interface IIndicatorHeaderNode { ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` -其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/editCell/packages/vtable-editors/src/types.ts。 +其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts。 {{ use: common-option-secondary( prefix = '#', From 3bf28e8e04b068c807373d75ee75d5f264bae646 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 1 Feb 2024 11:10:26 +0800 Subject: [PATCH 60/65] refactor: rename onclickelsewhere to iseditorelement --- docs/assets/demo/en/edit/custom-editor.md | 2 +- docs/assets/demo/zh/edit/custom-editor.md | 2 +- docs/assets/guide/en/edit/edit_cell.md | 4 ++-- docs/assets/guide/zh/edit/edit_cell.md | 6 +++--- packages/vtable-editors/src/input-editor.ts | 2 +- packages/vtable-editors/src/list-editor.ts | 2 +- packages/vtable-editors/src/types.ts | 8 ++++---- packages/vtable/examples/editor/custom-date-editor.ts | 2 +- packages/vtable/src/edit/edit-manager.ts | 4 ++-- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/assets/demo/en/edit/custom-editor.md b/docs/assets/demo/en/edit/custom-editor.md index 8e5ff41da..f780b8eec 100644 --- a/docs/assets/demo/en/edit/custom-editor.md +++ b/docs/assets/demo/en/edit/custom-editor.md @@ -118,7 +118,7 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) this.container.removeChild(this.element); } - onClickElsewhere(target) { + isEditorElement(target) { if (target === this.element || this.picker.el.contains(target)) { return true; } diff --git a/docs/assets/demo/zh/edit/custom-editor.md b/docs/assets/demo/zh/edit/custom-editor.md index 0ec754849..ddec07583 100644 --- a/docs/assets/demo/zh/edit/custom-editor.md +++ b/docs/assets/demo/zh/edit/custom-editor.md @@ -118,7 +118,7 @@ Promise.all([loadCSS(cssUrl), loadJS(jsUrl)]) this.container.removeChild(this.element); } - onClickElsewhere(target) { + isEditorElement(target) { if (target === this.element || this.picker.el.contains(target)) { return true; } diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md index d8b13fd1a..b5a9cf951 100644 --- a/docs/assets/guide/en/edit/edit_cell.md +++ b/docs/assets/guide/en/edit/edit_cell.md @@ -173,7 +173,7 @@ export interface IEditor { * Which means, in this scenario, you need to call `endEdit` manually * to end edit mode. */ - onClickElsewhere?: (target: HTMLElement) => boolean; + isEditorElement?: (target: HTMLElement) => boolean; /** * Called when editor mode is exited by any means. * Expected to return the current value of the cell. @@ -194,7 +194,7 @@ export interface EditContext { * * In most cases you don't need to call this function, * since Enter key click is handled by VTable automatically, - * and mouse click can be handled by `onClickElsewhere`. + * and mouse click can be handled by `isEditorElement`. * * However, if your editor has its own complete button, * or you have external elements like Tooltip, diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md index ea988e8ab..89db3eff2 100644 --- a/docs/assets/guide/zh/edit/edit_cell.md +++ b/docs/assets/guide/zh/edit/edit_cell.md @@ -151,7 +151,7 @@ class DateEditor implements IEditor { this.picker.destroy(); this.container.removeChild(this.element); } - onClickElsewhere(target: HTMLElement) { + isEditorElement(target: HTMLElement) { if (target === this.element || this.picker.el.contains(target)) { return true; } @@ -176,7 +176,7 @@ export interface IEditor { * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。 * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。 */ - onClickElsewhere?: (target: HTMLElement) => boolean; + isEditorElement?: (target: HTMLElement) => boolean; /** * 获取编辑器当前值。将在 `onEnd` 调用后调用。 */ getValue: () => V; // ... @@ -194,7 +194,7 @@ export interface EditContext { * * 大多数情况下你不需要使用此回调，因为 VTable 已经自带了 Enter 键按下 * 来结束编辑状态的行为；而鼠标点击其他位置来结束编辑状态的行为你也 - * 可以通过 `onClickElsewhere` 函数来获得。 + * 可以通过 `isEditorElement` 函数来获得。 * * 然而，如果你有特殊的需求，比如你想在编辑器内部提供一个“完成”按钮， * 或者你有像 Tooltip 这样无法获取到的外部元素， diff --git a/packages/vtable-editors/src/input-editor.ts b/packages/vtable-editors/src/input-editor.ts index d00911ce1..0a161f924 100644 --- a/packages/vtable-editors/src/input-editor.ts +++ b/packages/vtable-editors/src/input-editor.ts @@ -68,7 +68,7 @@ export class InputEditor implements IEditor { this.container.removeChild(this.element); } - onClickElsewhere(target: HTMLElement) { + isEditorElement(target: HTMLElement) { return target === this.element; } } diff --git a/packages/vtable-editors/src/list-editor.ts b/packages/vtable-editors/src/list-editor.ts index 66a0ce70f..d0ec1d7c3 100644 --- a/packages/vtable-editors/src/list-editor.ts +++ b/packages/vtable-editors/src/list-editor.ts @@ -84,7 +84,7 @@ export class ListEditor implements IEditor { this.container.removeChild(this.element); } - onClickElsewhere(target: HTMLElement) { + isEditorElement(target: HTMLElement) { return target === this.element; } } diff --git a/packages/vtable-editors/src/types.ts b/packages/vtable-editors/src/types.ts index 83f3dd3b9..399f3984b 100644 --- a/packages/vtable-editors/src/types.ts +++ b/packages/vtable-editors/src/types.ts @@ -23,7 +23,7 @@ export interface IEditor { * Which means, in this scenario, you need to call `endEdit` manually * to end edit mode. */ - onClickElsewhere?: (target: HTMLElement) => boolean; + isEditorElement?: (target: HTMLElement) => boolean; /** * Called when editor mode is exited by any means. * Expected to return the current value of the cell. @@ -40,8 +40,8 @@ export interface IEditor { */ exit?: () => void; /** - * @see onClickElsewhere - * @deprecated use `onClickElsewhere` instead. + * @see isEditorElement + * @deprecated use `isEditorElement` instead. */ targetIsOnEditor?: (target: HTMLElement) => boolean; /** @@ -66,7 +66,7 @@ export interface EditContext { * * In most cases you don't need to call this function, * since Enter key click is handled by VTable automatically, - * and mouse click can be handled by `onClickElsewhere`. + * and mouse click can be handled by `isEditorElement`. * * However, if your editor has its own complete button, * or you have external elements like Tooltip, diff --git a/packages/vtable/examples/editor/custom-date-editor.ts b/packages/vtable/examples/editor/custom-date-editor.ts index a6395309a..58f98e062 100644 --- a/packages/vtable/examples/editor/custom-date-editor.ts +++ b/packages/vtable/examples/editor/custom-date-editor.ts @@ -84,7 +84,7 @@ class DateEditor implements IEditor { this.picker.destroy(); this.container.removeChild(this.element); } - onClickElsewhere(target: HTMLElement) { + isEditorElement(target: HTMLElement) { if (target === this.element || this.picker.el.contains(target)) { return true; } diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index 4267c6a69..c66e5ef5c 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/packages/vtable/src/edit/edit-manager.ts @@ -106,11 +106,11 @@ export class EditManeger { const target = e?.target as HTMLElement | undefined; if (this.editingEditor.targetIsOnEditor) { - console.warn('VTable Warn: `targetIsOnEditor` is deprecated, please use `onClickElsewhere` instead.'); + console.warn('VTable Warn: `targetIsOnEditor` is deprecated, please use `isEditorElement` instead.'); if (target && this.editingEditor.targetIsOnEditor(target)) { return; } - } else if (!this.editingEditor.onClickElsewhere || (target && this.editingEditor.onClickElsewhere?.(target))) { + } else if (!this.editingEditor.isEditorElement || (target && this.editingEditor.isEditorElement?.(target))) { return; } From 9479deefa0edbb7cc9cd13e452f2c77a3fec28f5 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 1 Feb 2024 15:53:02 +0800 Subject: [PATCH 61/65] feat: update vrender version --- common/config/rush/pnpm-lock.yaml | 30 +++++++++++++++--------------- packages/vtable/package.json | 6 +++--- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index c968ef65a..1e735ceda 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -181,9 +181,9 @@ importers: '@types/react-dom': ^18.0.0 '@visactor/vchart': 1.9.0 '@visactor/vdataset': ~0.17.1 - '@visactor/vrender-components': 0.17.20-alpha.1 - '@visactor/vrender-core': 0.17.20-alpha.1 - '@visactor/vrender-kits': 0.17.20-alpha.1 + '@visactor/vrender-components': 0.17.20-alpha.3 + '@visactor/vrender-core': 0.17.20-alpha.3 + '@visactor/vrender-kits': 0.17.20-alpha.3 '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.17.1 @@ -226,9 +226,9 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.17.4 - '@visactor/vrender-components': 0.17.20-alpha.1 - '@visactor/vrender-core': 0.17.20-alpha.1 - '@visactor/vrender-kits': 0.17.20-alpha.1 + '@visactor/vrender-components': 0.17.20-alpha.3 + '@visactor/vrender-core': 0.17.20-alpha.3 + '@visactor/vrender-kits': 0.17.20-alpha.3 '@visactor/vscale': 0.17.4 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.17.4 @@ -3468,11 +3468,11 @@ packages: '@visactor/vscale': 0.17.4 '@visactor/vutils': 0.17.4 - /@visactor/vrender-components/0.17.20-alpha.1: - resolution: {integrity: sha512-VkT5RFYYbS6YmYnFAgoRlEoeKtvoryFG2vwPM5X0wrYOpZvTbXuvOAgNKHawxV1UtkeHfVHe1ZY9I5+qvwZQtA==} + /@visactor/vrender-components/0.17.20-alpha.3: + resolution: {integrity: sha512-85aqV302wGvwSaACuMAcv2lmqUQi0f91zMliXifuK5f2+3LOnEonLpbT5OhTxge8MLXsBlYEPnNW9BFhLmT+fQ==} dependencies: - '@visactor/vrender-core': 0.17.20-alpha.1 - '@visactor/vrender-kits': 0.17.20-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.3 + '@visactor/vrender-kits': 0.17.20-alpha.3 '@visactor/vscale': 0.17.4 '@visactor/vutils': 0.17.4 dev: false @@ -3490,8 +3490,8 @@ packages: '@visactor/vutils': 0.17.4 color-convert: 2.0.1 - /@visactor/vrender-core/0.17.20-alpha.1: - resolution: {integrity: sha512-GdmRx2PeV52sW6YB5LL6u2jwj3s/INfHXAY6WVM7mouQE9lDt0EObQJJxIbf55ztPwyJBXaaD1AZ8qIZwle87w==} + /@visactor/vrender-core/0.17.20-alpha.3: + resolution: {integrity: sha512-9LodZqDMSEfTHfqpaBEUSiy+PtkT6yKfGM/kxGoqzV3XDul3M2UoskUqbkw9rzSKUr8Y9XVuC/CXG1VBCMWUcA==} dependencies: '@visactor/vutils': 0.17.4 color-convert: 2.0.1 @@ -3514,11 +3514,11 @@ packages: '@visactor/vutils': 0.17.4 roughjs: 4.5.2 - /@visactor/vrender-kits/0.17.20-alpha.1: - resolution: {integrity: sha512-0jRe6ayjlR7vZWDQ4dYYICsnzzG7IK9UnqIasGnmjW7D8ZpMaSM1PcodiAOBLy8ELnF4gYbF1Uady/OpDdD6TQ==} + /@visactor/vrender-kits/0.17.20-alpha.3: + resolution: {integrity: sha512-II9fXUtMZADuk5ZH1CNzLIY8F37oosGWTFDEWogWzmVY6SAUgqavsdjJaPD3lgy3ecyepiCICHIbX+0VY4ZIrg==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.17.20-alpha.1 + '@visactor/vrender-core': 0.17.20-alpha.3 '@visactor/vutils': 0.17.4 roughjs: 4.5.2 dev: false diff --git a/packages/vtable/package.json b/packages/vtable/package.json index ad258d4a5..a1423d0e4 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,9 +50,9 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender-core": "0.17.20-alpha.1", - "@visactor/vrender-kits": "0.17.20-alpha.1", - "@visactor/vrender-components": "0.17.20-alpha.1", + "@visactor/vrender-core": "0.17.20-alpha.3", + "@visactor/vrender-kits": "0.17.20-alpha.3", + "@visactor/vrender-components": "0.17.20-alpha.3", "@visactor/vutils-extension": "~1.8.5", "@visactor/vutils": "~0.17.1", "@visactor/vscale": "~0.17.1", From 84448f7b5238074020fbf6ef106b2a62c4ffe936 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 1 Feb 2024 20:06:50 +0800 Subject: [PATCH 62/65] fix: fix getCellRange in pivot chart --- .../vtable/src/layout/pivot-header-layout.ts | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 41aa9b6cb..ff18c7814 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1323,6 +1323,44 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { if (this.isRightFrozenColumn(col, row) || this.isBottomFrozenRow(col, row)) { return result; } + + if (this._table.isPivotChart()) { + if (this.isLeftBottomCorner(col, row)) { + return { + start: { + col: 0, + row: this.rowCount - this.bottomFrozenRowCount + }, + end: { + col: this.frozenColCount - 1, + row: this.rowCount - 1 + } + }; + } else if (this.isRightTopCorner(col, row)) { + return { + start: { + col: this.colCount - this.rightFrozenColCount, + row: 0 + }, + end: { + col: this.colCount - 1, + row: this.frozenRowCount - 1 + } + }; + } else if (this.isRightBottomCorner(col, row)) { + return { + start: { + col: this.colCount - this.rightFrozenColCount, + row: this.rowCount - this.bottomFrozenRowCount + }, + end: { + col: this.colCount - 1, + row: this.rowCount - 1 + } + }; + } + } + // if (this._cellRangeMap.has(`$${col}$${row}`)) { // return this._cellRangeMap.get(`$${col}$${row}`); // } From fe2b3adaa793573f131d9b105b05148eb45ee1ad Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 2 Feb 2024 11:06:13 +0800 Subject: [PATCH 63/65] fix: fix axis title text type error --- packages/vtable/src/components/axis/axis.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/components/axis/axis.ts b/packages/vtable/src/components/axis/axis.ts index 216a68b91..ecd0d54b9 100644 --- a/packages/vtable/src/components/axis/axis.ts +++ b/packages/vtable/src/components/axis/axis.ts @@ -217,7 +217,7 @@ export class CartesianAxis { // visible: this.option.grid.visible // }, title: { - text: this.option.title.text, + text: this.option.title.text as string, maxWidth: this._getTitleLimit(isX) }, items: this.getLabelItems(axisLength), From 4e9d4cb299b57a45b83485c43001095c95965801 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 2 Feb 2024 12:05:15 +0800 Subject: [PATCH 64/65] feat: remove ICartesianAxisSpec from @visactor/vchart --- .../vtable/src/ts-types/component/axis.ts | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/vtable/src/ts-types/component/axis.ts b/packages/vtable/src/ts-types/component/axis.ts index 350ac5acb..c9c87e6a3 100644 --- a/packages/vtable/src/ts-types/component/axis.ts +++ b/packages/vtable/src/ts-types/component/axis.ts @@ -1,21 +1,21 @@ -import type { ICartesianAxisSpec } from '@visactor/vchart'; +// import type { ICartesianAxisSpec } from '@visactor/vchart'; -export type ICellAxisOption = Omit & - ( - | { - type: 'band'; - domain: (number | string)[]; - __vtableChartTheme?: any; - } - | { - type: 'linear' | 'time'; - range: { - min: number; - max: number; - }; - __ticksForVTable?: number[]; - __vtableChartTheme?: any; - } - ); - -export type ITableAxisOption = ICartesianAxisSpec; +// export type ICellAxisOption = Omit & +// ( +// | { +// type: 'band'; +// domain: (number | string)[]; +// __vtableChartTheme?: any; +// } +// | { +// type: 'linear' | 'time'; +// range: { +// min: number; +// max: number; +// }; +// __ticksForVTable?: number[]; +// __vtableChartTheme?: any; +// } +// ); +export type ICellAxisOption = any; +export type ITableAxisOption = ICellAxisOption; From f7bb3ed136e0ea4a2207b18165b920e4d7dd29d0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 2 Feb 2024 04:18:44 +0000 Subject: [PATCH 65/65] build: prelease version 0.19.0 --- ...018-bug-selectRegion_2024-01-30-04-08.json | 11 ------ ...018-bug-selectRegion_2024-01-30-06-55.json | 11 ------ ...der-olumnwidth-error_2024-01-26-10-38.json | 11 ------ ...ing-computeRowHeight_2024-01-30-09-08.json | 11 ------ ...-dragedOrder-columns_2024-01-26-11-21.json | 11 ------ ...ragHeaderInteraction_2024-01-19-11-26.json | 11 ------ ...ragHeaderInteraction_2024-01-22-08-43.json | 11 ------ ...tor-row-height-range_2024-01-24-10-00.json | 11 ------ .../fix-image-stick_2024-01-22-04-12.json | 10 ------ common/config/rush/version-policies.json | 2 +- packages/react-vtable/package.json | 4 +-- packages/vtable-editors/package.json | 2 +- packages/vtable-export/package.json | 4 +-- packages/vtable/CHANGELOG.json | 36 +++++++++++++++++++ packages/vtable/CHANGELOG.md | 33 ++++++++++++++++- packages/vtable/package.json | 4 +-- 16 files changed, 76 insertions(+), 107 deletions(-) delete mode 100644 common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json delete mode 100644 common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json delete mode 100644 common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json delete mode 100644 common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json delete mode 100644 common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json delete mode 100644 common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json delete mode 100644 common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json delete mode 100644 common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json delete mode 100644 common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json diff --git a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json deleted file mode 100644 index b2b57cd4b..000000000 --- a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-04-08.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "fix: select region saved problem #1018\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json b/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json deleted file mode 100644 index 95f9b5624..000000000 --- a/common/changes/@visactor/vtable/1018-bug-selectRegion_2024-01-30-06-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "fix: when call updateColumns and discount col occor error #1015\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json b/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json deleted file mode 100644 index 56f04bd49..000000000 --- a/common/changes/@visactor/vtable/1019-bug-rightfrozencolcount-dragheader-olumnwidth-error_2024-01-26-10-38.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "fix: rightFrozenColCount drag header move more time the column width is error #1019\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json b/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json deleted file mode 100644 index 5ba015073..000000000 --- a/common/changes/@visactor/vtable/1031-bug-empty-string-computeRowHeight_2024-01-30-09-08.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "fix: empty string compute row height error #1031\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json b/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json deleted file mode 100644 index f531082ae..000000000 --- a/common/changes/@visactor/vtable/986-refactor-dragedOrder-columns_2024-01-26-11-21.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "feat: support get sorted columns #986\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json deleted file mode 100644 index 5fa6e9528..000000000 --- a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-19-11-26.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "feat: add option frozenColDragHeaderMode\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json b/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json deleted file mode 100644 index 9ffb21330..000000000 --- a/common/changes/@visactor/vtable/feat-dragHeaderInteraction_2024-01-22-08-43.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "refactor: when drag header move to frozen region then markLine show positon\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json b/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json deleted file mode 100644 index 2db425ed7..000000000 --- a/common/changes/@visactor/vtable/feat-refactor-row-height-range_2024-01-24-10-00.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "refactor: optimize updateRow api performance & resize bottom frozen row not right\n\n", - "type": "none", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json b/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json deleted file mode 100644 index 1d3c17f5a..000000000 --- a/common/changes/@visactor/vtable/fix-image-stick_2024-01-22-04-12.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "changes": [ - { - "packageName": "@visactor/vtable", - "comment": "fix: fix merge image cell update problem", - "type": "none" - } - ], - "packageName": "@visactor/vtable" -} \ No newline at end of file diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index 102065e98..4783e57e3 100644 --- a/common/config/rush/version-policies.json +++ b/common/config/rush/version-policies.json @@ -1 +1 @@ -[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.18.4","mainProject":"@visactor/vtable","nextBump":"patch"}] +[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.19.0","mainProject":"@visactor/vtable","nextBump":"minor"}] diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index 5ed55e446..34a42b702 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vtable", - "version": "0.18.4", + "version": "0.19.0", "description": "The react version of VTable", "keywords": [ "react", @@ -96,4 +96,4 @@ "axios": "^1.4.0", "@types/react-is": "^17.0.3" } -} \ No newline at end of file +} diff --git a/packages/vtable-editors/package.json b/packages/vtable-editors/package.json index 9438ed8c2..ed277b994 100644 --- a/packages/vtable-editors/package.json +++ b/packages/vtable-editors/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-editors", - "version": "0.18.4", + "version": "0.19.0", "description": "", "sideEffects": false, "main": "cjs/index.js", diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json index 4578c6cc1..a341d3b01 100644 --- a/packages/vtable-export/package.json +++ b/packages/vtable-export/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-export", - "version": "0.18.4", + "version": "0.19.0", "description": "The export util of VTable", "author": { "name": "VisActor", @@ -85,4 +85,4 @@ "@types/react-is": "^17.0.3", "rollup-plugin-node-resolve": "5.2.0" } -} \ No newline at end of file +} diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index 173852352..692045a9d 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@visactor/vtable", "entries": [ + { + "version": "0.19.0", + "tag": "@visactor/vtable_v0.19.0", + "date": "Fri, 02 Feb 2024 04:13:16 GMT", + "comments": { + "none": [ + { + "comment": "fix: select region saved problem #1018\n\n" + }, + { + "comment": "fix: when call updateColumns and discount col occor error #1015\n\n" + }, + { + "comment": "fix: rightFrozenColCount drag header move more time the column width is error #1019\n\n" + }, + { + "comment": "fix: empty string compute row height error #1031\n\n" + }, + { + "comment": "feat: support get sorted columns #986\n\n" + }, + { + "comment": "feat: add option frozenColDragHeaderMode\n\n" + }, + { + "comment": "refactor: when drag header move to frozen region then markLine show positon\n\n" + }, + { + "comment": "refactor: optimize updateRow api performance & resize bottom frozen row not right\n\n" + }, + { + "comment": "fix: fix merge image cell update problem" + } + ] + } + }, { "version": "0.18.4", "tag": "@visactor/vtable_v0.18.4", diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index 6053b777e..0d18c4186 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -1,6 +1,37 @@ # Change Log - @visactor/vtable -This log was last generated on Fri, 26 Jan 2024 09:15:07 GMT and should not be manually modified. +This log was last generated on Fri, 02 Feb 2024 04:13:16 GMT and should not be manually modified. + +## 0.19.0 +Fri, 02 Feb 2024 04:13:16 GMT + +### Updates + +- fix: select region saved problem #1018 + + +- fix: when call updateColumns and discount col occor error #1015 + + +- fix: rightFrozenColCount drag header move more time the column width is error #1019 + + +- fix: empty string compute row height error #1031 + + +- feat: support get sorted columns #986 + + +- feat: add option frozenColDragHeaderMode + + +- refactor: when drag header move to frozen region then markLine show positon + + +- refactor: optimize updateRow api performance & resize bottom frozen row not right + + +- fix: fix merge image cell update problem ## 0.18.4 Fri, 26 Jan 2024 09:15:07 GMT diff --git a/packages/vtable/package.json b/packages/vtable/package.json index a1423d0e4..3174fbe4b 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable", - "version": "0.18.4", + "version": "0.19.0", "description": "canvas table width high performance", "keywords": [ "grid", @@ -124,4 +124,4 @@ "url": "https://github.com/VisActor/VTable.git", "directory": "packages/vtable" } -} \ No newline at end of file +}