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/highlight-color.ts

@@ -0,0 +1,82 @@
+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: '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,
+    rowSeriesNumber: {}
+  };
+  const tableInstance = new VTable.ListTable(option);
+  window.tableInstance = tableInstance;
+
+  bindDebugTool(tableInstance.scenegraph.stage, {
+    customGrapicKeys: ['col', 'row']
+  });
+
+  const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance);
+  window.highlightPlugin = highlightPlugin;
+}

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

@@ -641,6 +641,14 @@ export const menus = [
       {
         path: 'interactive',
         name: 'pre-sort'
+      },
+      {
+        path: 'interactive',
+        name: 'mask'
+      },
+      {
+        path: 'interactive',
+        name: 'highlight-color'
       }
     ]
   },

packages/vtable/src/index.ts

@@ -129,3 +129,7 @@ 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 * from './plugins/invert-highlight';
+export * from './plugins/carousel-animation';
+export * from './plugins/header-highlight';