@visactor/vtable-plugins 1.18.1 → 1.18.2-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/excel-edit-cell-keyboard.js.map +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/rotate-table.d.ts +15 -0
- package/cjs/rotate-table.js +84 -0
- package/cjs/rotate-table.js.map +1 -0
- package/dist/vtable-plugins.js +8235 -2478
- package/dist/vtable-plugins.min.js +1 -1
- package/es/excel-edit-cell-keyboard.js.map +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/es/rotate-table.d.ts +15 -0
- package/es/rotate-table.js +52 -0
- package/es/rotate-table.js.map +1 -0
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["excel-edit-cell-keyboard.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["excel-edit-cell-keyboard.ts"],"names":[],"mappings":"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","file":"excel-edit-cell-keyboard.js","sourcesContent":["import * as VTable from '@visactor/vtable';\nimport type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';\nimport type { EventArg } from './types';\n//备用 插件配置项 目前感觉都走默认逻辑就行\nexport type IExcelEditCellKeyboardPluginOptions = {\n // 是否响应删除\n // enableDeleteKey?: boolean;\n};\n\nexport class ExcelEditCellKeyboardPlugin implements VTable.plugins.IVTablePlugin {\n id = 'excel-edit-cell-keyboard';\n runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];\n table: VTable.ListTable;\n pluginOptions: IExcelEditCellKeyboardPluginOptions;\n constructor(pluginOptions?: IExcelEditCellKeyboardPluginOptions) {\n this.pluginOptions = pluginOptions;\n\n this.bindEvent();\n }\n run(...args: [EventArg, TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][], VTable.BaseTableAPI]) {\n const table: VTable.BaseTableAPI = args[2];\n this.table = table as VTable.ListTable;\n }\n\n bindEvent() {\n //监听document全局的keydown事件 捕获阶段监听 可以及时阻止事件传播和默认行为\n document.addEventListener('keydown', this.handleKeyDown.bind(this), true);\n // this.table.on('selected_cell', () => {\n // this.updateHighlight();\n // });\n\n // this.table.on('selected_clear', () => {\n // this.clearHighlight();\n // });\n\n // this.table.on('mousemove_table', () => {\n // if (this.table.stateManager.select.selecting) {\n // this.updateHighlight();\n // }\n // });\n }\n handleKeyDown(event: KeyboardEvent) {\n if (this.table.editorManager) {\n //判断是键盘触发编辑单元格的情况下，那么在编辑状态中切换方向需要选中下一个继续编辑\n if (this.table.editorManager.beginTriggerEditCellMode === 'keydown') {\n if (this.table.editorManager.editingEditor && this.isExcelShortcutKey(event)) {\n const { col, row } = this.table.editorManager.editCell;\n this.table.editorManager.completeEdit();\n this.table.getElement().focus();\n if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {\n //有这些配合键，则不进行选中下一个单元格的行为 执行vtable内部逻辑\n if (event.key === 'Enter') {\n this.table.selectCell(col, row + 1);\n } else if (event.key === 'Tab') {\n this.table.selectCell(col + 1, row);\n } else if (event.key === 'ArrowLeft') {\n this.table.selectCell(col - 1, row);\n } else if (event.key === 'ArrowRight') {\n this.table.selectCell(col + 1, row);\n } else if (event.key === 'ArrowDown') {\n this.table.selectCell(col, row + 1);\n } else if (event.key === 'ArrowUp') {\n this.table.selectCell(col, row - 1);\n }\n // 阻止事件传播和默认行为\n event.stopPropagation();\n event.preventDefault();\n }\n }\n } else {\n const { col, row } = this.table.stateManager.select.cellPos;\n if (this.table.editorManager.editingEditor && (event.key === 'Enter' || event.key === 'Tab')) {\n this.table.editorManager.completeEdit();\n this.table.getElement().focus();\n if (event.key === 'Enter') {\n this.table.selectCell(col, row + 1);\n } else if (event.key === 'Tab') {\n this.table.selectCell(col + 1, row);\n }\n // 阻止事件传播和默认行为\n event.stopPropagation();\n event.preventDefault();\n } else if (event.key === 'Delete') {\n //响应删除键，删除\n const selectCells = this.table.getSelectedCellInfos();\n if (selectCells?.length > 0) {\n // 如果选中的是范围，则删除范围内的所有单元格\n deleteSelectRange(selectCells, this.table);\n }\n // 阻止事件传播和默认行为\n event.stopPropagation();\n event.preventDefault();\n }\n }\n }\n }\n // 判断event的keyCode是否是excel的快捷键\n isExcelShortcutKey(event: KeyboardEvent) {\n return (\n event.key === 'Enter' ||\n event.key === 'Tab' ||\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight' ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n );\n }\n release() {\n document.removeEventListener('keydown', this.handleKeyDown, true);\n }\n}\n//将选中单元格的值设置为空\nfunction deleteSelectRange(selectCells: VTable.TYPES.CellInfo[][], tableInstance: VTable.ListTable) {\n for (let i = 0; i < selectCells.length; i++) {\n for (let j = 0; j < selectCells[i].length; j++) {\n tableInstance.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, '');\n }\n }\n}\n"]}
|
package/cjs/index.d.ts
CHANGED
package/cjs/index.js
CHANGED
|
@@ -22,5 +22,5 @@ __exportStar(require("./header-highlight"), exports), __exportStar(require("./ad
|
|
|
22
22
|
__exportStar(require("./column-series"), exports), __exportStar(require("./row-series"), exports),
|
|
23
23
|
__exportStar(require("./highlight-header-when-select-cell"), exports), __exportStar(require("./excel-edit-cell-keyboard"), exports),
|
|
24
24
|
__exportStar(require("./types"), exports), __exportStar(require("./focus-highlight"), exports),
|
|
25
|
-
__exportStar(require("./table-carousel-animation"), exports);
|
|
25
|
+
__exportStar(require("./table-carousel-animation"), exports), __exportStar(require("./rotate-table"), exports);
|
|
26
26
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,qDAAmC;AACnC,qDAAmC;AACnC,mDAAiC;AACjC,kDAAgC;AAChC,+CAA6B;AAC7B,sEAAoD;AACpD,6DAA2C;AAC3C,0CAAwB;AACxB,oDAAkC;AAClC,6DAA2C","file":"index.js","sourcesContent":["export * from './carousel-animation';\nexport * from './invert-highlight';\nexport * from './header-highlight';\nexport * from './add-row-column';\nexport * from './column-series';\nexport * from './row-series';\nexport * from './highlight-header-when-select-cell';\nexport * from './excel-edit-cell-keyboard';\nexport * from './types';\nexport * from './focus-highlight';\nexport * from './table-carousel-animation';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,qDAAmC;AACnC,qDAAmC;AACnC,mDAAiC;AACjC,kDAAgC;AAChC,+CAA6B;AAC7B,sEAAoD;AACpD,6DAA2C;AAC3C,0CAAwB;AACxB,oDAAkC;AAClC,6DAA2C;AAC3C,iDAA+B","file":"index.js","sourcesContent":["export * from './carousel-animation';\nexport * from './invert-highlight';\nexport * from './header-highlight';\nexport * from './add-row-column';\nexport * from './column-series';\nexport * from './row-series';\nexport * from './highlight-header-when-select-cell';\nexport * from './excel-edit-cell-keyboard';\nexport * from './types';\nexport * from './focus-highlight';\nexport * from './table-carousel-animation';\nexport * from './rotate-table';\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { BaseTable } from '@visactor/vtable/src/core/BaseTable';
|
|
2
|
+
import * as VTable from '@visactor/vtable';
|
|
3
|
+
import type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';
|
|
4
|
+
import type { EventArg } from './types';
|
|
5
|
+
export declare class RotateTablePlugin implements VTable.plugins.IVTablePlugin {
|
|
6
|
+
id: string;
|
|
7
|
+
runTime: "initialized"[];
|
|
8
|
+
table: VTable.ListTable;
|
|
9
|
+
vglobal_mapToCanvasPoint: any;
|
|
10
|
+
constructor();
|
|
11
|
+
run(...args: [EventArg, TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][], VTable.BaseTableAPI]): void;
|
|
12
|
+
release(): void;
|
|
13
|
+
}
|
|
14
|
+
export declare function rotate90WithTransform(this: BaseTable, rotateDom: HTMLElement): void;
|
|
15
|
+
export declare function cancelTransform(this: BaseTable, rotateDom: HTMLElement): void;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
|
|
4
|
+
void 0 === k2 && (k2 = k);
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
|
|
7
|
+
enumerable: !0,
|
|
8
|
+
get: function() {
|
|
9
|
+
return m[k];
|
|
10
|
+
}
|
|
11
|
+
}), Object.defineProperty(o, k2, desc);
|
|
12
|
+
} : function(o, m, k, k2) {
|
|
13
|
+
void 0 === k2 && (k2 = k), o[k2] = m[k];
|
|
14
|
+
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", {
|
|
16
|
+
enumerable: !0,
|
|
17
|
+
value: v
|
|
18
|
+
});
|
|
19
|
+
} : function(o, v) {
|
|
20
|
+
o.default = v;
|
|
21
|
+
}), __importStar = this && this.__importStar || function(mod) {
|
|
22
|
+
if (mod && mod.__esModule) return mod;
|
|
23
|
+
var result = {};
|
|
24
|
+
if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
|
|
25
|
+
return __setModuleDefault(result, mod), result;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
Object.defineProperty(exports, "__esModule", {
|
|
29
|
+
value: !0
|
|
30
|
+
}), exports.cancelTransform = exports.rotate90WithTransform = exports.RotateTablePlugin = void 0;
|
|
31
|
+
|
|
32
|
+
const vrender_1 = require("@visactor/vtable/es/vrender"), VTable = __importStar(require("@visactor/vtable"));
|
|
33
|
+
|
|
34
|
+
class RotateTablePlugin {
|
|
35
|
+
constructor() {
|
|
36
|
+
this.id = "rotate-table", this.runTime = [ VTable.TABLE_EVENT_TYPE.INITIALIZED ];
|
|
37
|
+
}
|
|
38
|
+
run(...args) {
|
|
39
|
+
const table = args[2];
|
|
40
|
+
this.table = table, this.table.rotate90WithTransform = rotate90WithTransform.bind(this.table),
|
|
41
|
+
this.table.cancelTransform = cancelTransform.bind(this.table);
|
|
42
|
+
}
|
|
43
|
+
release() {}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function rotate90WithTransform(rotateDom) {
|
|
47
|
+
const rotateCenter = Math.min(rotateDom.clientWidth, rotateDom.clientHeight) / 2, domRect = this.getElement().getBoundingClientRect(), x1 = domRect.left, y1 = domRect.top, x2 = domRect.right, y2 = domRect.bottom;
|
|
48
|
+
rotateDom.style.transform = "rotate(90deg)", rotateDom.style.transformOrigin = `${rotateCenter}px ${rotateCenter}px`;
|
|
49
|
+
const getRect = () => ({
|
|
50
|
+
x1: x1,
|
|
51
|
+
y1: y1,
|
|
52
|
+
x2: x2,
|
|
53
|
+
y2: y2
|
|
54
|
+
}), getMatrix = () => {
|
|
55
|
+
const containerRect = rotateDom.getBoundingClientRect(), domRect = this.getElement().getBoundingClientRect(), x1 = domRect.top, y1 = containerRect.width - domRect.right, matrix = vrender_1.matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
|
|
56
|
+
matrix.translate(x1, y1);
|
|
57
|
+
const centerX = rotateCenter - x1, centerY = rotateCenter - y1;
|
|
58
|
+
return matrix.translate(centerX, centerY), matrix.rotate(Math.PI / 2), matrix.translate(-centerX, -centerY),
|
|
59
|
+
matrix;
|
|
60
|
+
};
|
|
61
|
+
(0, vrender_1.registerGlobalEventTransformer)(vrender_1.vglobal, this.getElement(), getMatrix, getRect, vrender_1.transformPointForCanvas),
|
|
62
|
+
(0, vrender_1.registerWindowEventTransformer)(this.scenegraph.stage.window, this.getElement(), getMatrix, getRect, vrender_1.transformPointForCanvas),
|
|
63
|
+
this.vglobal_mapToCanvasPoint = vrender_1.vglobal.mapToCanvasPoint, vrender_1.vglobal.mapToCanvasPoint = vrender_1.mapToCanvasPointForCanvas;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function cancelTransform(rotateDom) {
|
|
67
|
+
rotateDom.style.transform = "none", rotateDom.style.transformOrigin = "none";
|
|
68
|
+
const domRect = this.getElement().getBoundingClientRect(), x1 = domRect.left, y1 = domRect.top, x2 = domRect.right, y2 = domRect.bottom, getRect = () => ({
|
|
69
|
+
x1: x1,
|
|
70
|
+
y1: y1,
|
|
71
|
+
x2: x2,
|
|
72
|
+
y2: y2
|
|
73
|
+
}), getMatrix = () => {
|
|
74
|
+
const matrix = vrender_1.matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
|
|
75
|
+
return matrix.translate(x1, y1), matrix;
|
|
76
|
+
};
|
|
77
|
+
(0, vrender_1.registerGlobalEventTransformer)(vrender_1.vglobal, this.getElement(), getMatrix, getRect, vrender_1.transformPointForCanvas),
|
|
78
|
+
(0, vrender_1.registerWindowEventTransformer)(this.scenegraph.stage.window, this.getElement(), getMatrix, getRect, vrender_1.transformPointForCanvas),
|
|
79
|
+
vrender_1.vglobal.mapToCanvasPoint = this.vglobal_mapToCanvasPoint;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
exports.RotateTablePlugin = RotateTablePlugin, exports.rotate90WithTransform = rotate90WithTransform,
|
|
83
|
+
exports.cancelTransform = cancelTransform;
|
|
84
|
+
//# sourceMappingURL=rotate-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["rotate-table.ts"],"names":[],"mappings":"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","file":"rotate-table.js","sourcesContent":["import {\n matrixAllocate,\n transformPointForCanvas,\n mapToCanvasPointForCanvas,\n registerGlobalEventTransformer,\n registerWindowEventTransformer,\n vglobal\n} from '@visactor/vtable/es/vrender';\nimport type { BaseTable } from '@visactor/vtable/src/core/BaseTable';\nimport * as VTable from '@visactor/vtable';\nimport type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';\nimport type { EventArg } from './types';\n// export type IRotateTablePluginOptions = {\n// // 旋转角度\n// rotate?: number;\n// };\n/**\n * 旋转表格插件。\n * 业务层旋转功能没有使用收系统接口的话，用的transform:'rotate(90deg)'的设置来达到旋转的目的。vtable及vrender都没有进行坐标处理，这样就会导致交互错乱。\n * 所以需要进行坐标转换，将旋转后的坐标转换后作为VRender及VTable逻辑中用到的坐标。\n * 这里使用transform:'rotate(90deg)'的设置来达到旋转的目的。 其他角度应该也是可以实现的，请自行扩展这个插件并兼容\n */\nexport class RotateTablePlugin implements VTable.plugins.IVTablePlugin {\n id = 'rotate-table';\n runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];\n table: VTable.ListTable;\n vglobal_mapToCanvasPoint: any; // 保存vrender中vglobal的mapToCanvasPoint原方法\n // pluginOptions: IRotateTablePluginOptions;\n constructor() {\n // this.pluginOptions = pluginOptions;\n }\n run(...args: [EventArg, TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][], VTable.BaseTableAPI]) {\n const table: VTable.BaseTableAPI = args[2];\n this.table = table as VTable.ListTable;\n //将函数rotate90WithTransform绑定到table实例上\n this.table.rotate90WithTransform = rotate90WithTransform.bind(this.table);\n this.table.cancelTransform = cancelTransform.bind(this.table);\n }\n\n release() {\n // 移除绑定的事件\n }\n}\n\n/**\n * 业务层旋转功能没有使用收系统接口的话，用的transform:'rotate(90deg)'的设置来达到旋转的目的。vtable及vrender都没有进行坐标处理，这样就会导致交互错乱。\n * 所以需要进行坐标转换，将旋转后的坐标转换后作为VRender及VTable逻辑中用到的坐标。\n */\nexport function rotate90WithTransform(this: BaseTable, rotateDom: HTMLElement) {\n const rotateCenter = Math.min(rotateDom.clientWidth, rotateDom.clientHeight) / 2;\n const domRect = this.getElement().getBoundingClientRect();\n const x1 = domRect.left;\n const y1 = domRect.top;\n const x2 = domRect.right;\n const y2 = domRect.bottom;\n\n rotateDom.style.transform = 'rotate(90deg)';\n rotateDom.style.transformOrigin = `${rotateCenter}px ${rotateCenter}px`;\n const getRect = () => {\n return {\n x1,\n y1,\n x2,\n y2\n };\n };\n const getMatrix = () => {\n const containerRect = rotateDom.getBoundingClientRect(); //TODO 这个地方应该获取窗口的宽高 最好能从vglobal上直接获取\n const domRect = this.getElement().getBoundingClientRect();\n const x1 = domRect.top;\n const y1 = containerRect.width - domRect.right;\n\n const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);\n matrix.translate(x1, y1);\n const centerX = rotateCenter - x1;\n const centerY = rotateCenter - y1;\n matrix.translate(centerX, centerY);\n matrix.rotate(Math.PI / 2);\n matrix.translate(-centerX, -centerY);\n return matrix;\n };\n registerGlobalEventTransformer(vglobal, this.getElement(), getMatrix, getRect, transformPointForCanvas);\n registerWindowEventTransformer(\n this.scenegraph.stage.window,\n this.getElement(),\n getMatrix,\n getRect,\n transformPointForCanvas\n );\n this.vglobal_mapToCanvasPoint = vglobal.mapToCanvasPoint;\n vglobal.mapToCanvasPoint = mapToCanvasPointForCanvas;\n //transformPointForCanvas和mapToCanvasPointForCanvas时相对应的\n //具体逻辑在 VRender/packages/vrender-core/src/common/event-transformer.ts中\n // 可以自定义这两个函数 来修改事件属性，transformPointForCanvas中将坐标转换后存放了_canvasX _canvasY，mapToCanvasPointForCanvas中加以利用\n // 在VTable的touch文件中，利用到了_canvasX _canvasY 所以如果自定义上面两个函数也需提供_canvasX _canvasY\n}\nexport function cancelTransform(this: BaseTable, rotateDom: HTMLElement) {\n rotateDom.style.transform = 'none';\n rotateDom.style.transformOrigin = 'none';\n const domRect = this.getElement().getBoundingClientRect();\n const x1 = domRect.left;\n const y1 = domRect.top;\n const x2 = domRect.right;\n const y2 = domRect.bottom;\n\n const getRect = () => {\n return {\n x1,\n y1,\n x2,\n y2\n };\n };\n const getMatrix = () => {\n const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);\n matrix.translate(x1, y1);\n return matrix;\n };\n registerGlobalEventTransformer(vglobal, this.getElement(), getMatrix, getRect, transformPointForCanvas);\n registerWindowEventTransformer(\n this.scenegraph.stage.window,\n this.getElement(),\n getMatrix,\n getRect,\n transformPointForCanvas\n );\n vglobal.mapToCanvasPoint = this.vglobal_mapToCanvasPoint;\n}\n"]}
|