Feat/fs bs

common/changes/@visactor/vtable/feat-fs-bs_2024-10-17-09-01.json

@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "@visactor/vtable",
+ "comment": "feat: add InvertHighlightPlugin ",
+ "type": "none"
+ }
+ ],
+ "packageName": "@visactor/vtable"
+}

common/changes/@visactor/vtable/feat-fs-bs_2024-10-17-09-02.json

@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "@visactor/vtable",
+ "comment": "fix: add CarouselAnimationPlugin",
+ "type": "none"
+ }
+ ],
+ "packageName": "@visactor/vtable"
+}

packages/vtable/examples/interactive/mask.ts

@@ -0,0 +1,132 @@
+import * as VTable from '../../src';
+import { bindDebugTool } from '../../src/scenegraph/debug-tool';
+const CONTAINER_ID = 'vTable';
+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' + (i + 1) : 'front-end engineer' + (i + 1),
+ city: 'beijing',
+ image:
+ '<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#f5a623" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="#f5a623" stroke="#f5a623" stroke-width="1" stroke-linejoin="round"/></svg>'
+ }));
+};
+
+export function createTable() {
+ const records = generatePersons(20);
+ const columns: VTable.ColumnsDefine = [
+ {
+ field: 'image',
+ title: '行号',
+ width: 80,
+ cellType: 'image',
+ keepAspectRatio: true
+ },
+ {
+ field: 'id',
+ title: 'ID',
+ width: 'auto',
+ minWidth: 50,
+ sort: true
+ },
+ {
+ field: 'email1',
+ title: 'email',
+ width: 200,
+ sort: true,
+ style: {
+ underline: true,
+ underlineDash: [2, 0],
+ underlineOffset: 3
+ }
+ },
+ {
+ title: 'full name',
+ columns: [
+ {
+ field: 'name',
+ title: 'First Name',
+ width: 200
+ },
+ {
+ field: 'name',
+ title: 'Last Name',
+ width: 200
+ }
+ ]
+ },
+ {
+ field: 'date1',
+ title: 'birthday',
+ width: 200
+ },
+ {
+ field: 'sex',
+ title: 'sex',
+ width: 100
+ }
+ ];
+ const option: VTable.ListTableConstructorOptions = {
+ container: document.getElementById(CONTAINER_ID),
+ records,
+ columns,
+ theme: VTable.themes.DARK,
+ // heightMode: 'adaptive',
+ select: {
+ disableSelect: true
+ }
+ };
+ const tableInstance = new VTable.ListTable(option);
+ window.tableInstance = tableInstance;
+
+ bindDebugTool(tableInstance.scenegraph.stage, {
+ customGrapicKeys: ['col', 'row']
+ });
+
+ const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance);
+ // highlightPlugin.setInvertHighlightRange({
+ // start: {
+ // col: 0,
+ // row: 6
+ // },
+ // end: {
+ // col: 6,
+ // row: 6
+ // }
+ // });
+
+ tableInstance.on('click_cell', event => {
+ const { col, row } = event;
+ if (tableInstance.isHeader(col, row)) {
+ highlightPlugin.setInvertHighlightRange(undefined);
+ } else {
+ highlightPlugin.setInvertHighlightRange({
+ start: {
+ col: 0,
+ row
+ },
+ end: {
+ col: tableInstance.colCount - 1,
+ row
+ }
+ });
+ }
+ });
+
+ const ca = new VTable.CarouselAnimationPlugin(tableInstance, {
+ rowCount: 2,
+ replaceScrollAction: true
+ });
+
+ // ca.play();
+
+ // setInterval(() => {
+ // row += 2;
+ // tableInstance.scrollToRow(row, { duration: 500 });
+ // }, 2000);
+}

packages/vtable/examples/menu.ts

@@ -633,6 +633,10 @@ export const menus = [
  {
  path: 'interactive',
  name: 'pre-sort'
+ },
+ {
+ path: 'interactive',
+ name: 'mask'
  }
  ]
  },

packages/vtable/src/index.ts

@@ -129,3 +129,6 @@ export * from './scenegraph/group-creater/cell-type';
 
 export { TABLE_EVENT_TYPE } from './core/TABLE_EVENT_TYPE';
 export { PIVOT_CHART_EVENT_TYPE, PIVOT_TABLE_EVENT_TYPE } from './ts-types/pivot-table/PIVOT_TABLE_EVENT_TYPE';
+
+export { InvertHighlightPlugin } from './plugins/invert-highlight';
+export { CarouselAnimationPlugin } from './plugins/carousel-animation';

packages/vtable/src/plugins/carousel-animation.ts

@@ -0,0 +1,117 @@
+import type { EasingType } from '@src/vrender';
+import type { BaseTableAPI } from '../ts-types/base-table';
+
+export interface ICarouselAnimationPluginOptions {
+ rowCount?: number;
+ colCount?: number;
+ animationDuration?: number;
+ animationDelay?: number;
+ animationEasing?: EasingType;
+ replaceScrollAction?: boolean;
+}
+
+export class CarouselAnimationPlugin {
+ table: BaseTableAPI;
+
+ rowCount: number;
+ colCount: number;
+ animationDuration: number;
+ animationDelay: number;
+ animationEasing: EasingType;
+ replaceScrollAction: boolean;
+
+ playing: boolean;
+ row: number;
+ col: number;
+ constructor(table: BaseTableAPI, options?: ICarouselAnimationPluginOptions) {
+ this.table = table;
+
+ this.rowCount = options?.rowCount ?? undefined;
+ this.colCount = options?.colCount ?? undefined;
+ this.animationDuration = options?.animationDuration ?? 500;
+ this.animationDelay = options?.animationDelay ?? 1000;
+ this.animationEasing = options?.animationEasing ?? 'linear';
+ this.replaceScrollAction = options?.replaceScrollAction ?? false;
+
+ this.playing = false;
+ this.row = table.frozenRowCount;
+ this.col = table.frozenColCount;
+
+ this.init();
+ }
+
+ init() {
+ if (this.replaceScrollAction) {
+ this.table.disableScroll();
+
+ this.table.scenegraph.stage.addEventListener('wheel', this.onScrollEnd.bind(this));
+ }
+ }
+
+ onScrollEnd(e: Event) {
+ if (this.rowCount) {
+ if ((e as any).deltaY > 0) {
+ this.row += this.rowCount;
+ this.row = Math.min(this.row, this.table.rowCount - this.table.frozenRowCount);
+ } else if ((e as any).deltaY < 0) {
+ this.row -= this.rowCount;
+ this.row = Math.max(this.row, this.table.frozenRowCount);
+ }
+ this.table.scrollToRow(this.row, { duration: this.animationDuration, easing: this.animationEasing });
+ } else if (this.colCount) {
+ if ((e as any).deltaX > 0) {
+ this.col += this.colCount;
+ this.col = Math.min(this.col, this.table.colCount - this.table.frozenColCount);
+ } else if ((e as any).deltaX < 0) {
+ this.col -= this.colCount;
+ this.col = Math.max(this.col, this.table.frozenColCount);
+ }
+ this.table.scrollToCol(this.col, { duration: this.animationDuration, easing: this.animationEasing });
+ }
+ }
+
+ play() {
+ this.playing = true;
+
+ if (this.rowCount) {
+ this.updateRow();
+ } else if (this.colCount) {
+ this.updateCol();
+ }
+ }
+
+ pause() {
+ this.playing = false;
+ }
+
+ updateRow() {
+ if (!this.playing) {
+ return;
+ }
+ if (this.table.scenegraph.proxy.screenTopRow !== this.row) {
+ this.row = this.table.frozenRowCount;
+ } else {
+ this.row += this.rowCount;
+ }
+ this.table.scrollToRow(this.row, { duration: this.animationDuration, easing: this.animationEasing });
+ setTimeout(() => {
+ this.updateRow();
+ }, this.animationDuration + this.animationDelay);
+ }
+
+ updateCol() {
+ if (!this.playing) {
+ return;
+ }
+ if (this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+ this.col = this.table.frozenColCount;
+ } else {
+ this.col += this.colCount;
+ }
+
+ this.table.scrollToCol(this.col, { duration: this.animationDuration, easing: this.animationEasing });
+ setTimeout(() => {
+ this.updateCol();
+ }, this.animationDuration + 50);
+ }
+}