From 727c7b154d5febd2dfda4e8ba8180446ccf8fb3e Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 25 Oct 2023 20:06:32 +0800 Subject: [PATCH 01/11] feat: add checkbox headertype --- common/config/rush/pnpm-lock.yaml | 499 ++++++------------ docs/assets/api/zh/methods.md | 30 ++ docs/assets/demo/en/component/legend.md | 6 +- .../en/custom-render/custom-cell-layout.md | 2 +- docs/assets/demo/zh/component/legend.md | 6 +- .../zh/custom-render/custom-cell-layout.md | 2 +- docs/package.json | 4 +- .../columns/listTable-custom-layout.test.ts | 2 +- .../components/listTable-legend.test.ts | 6 +- .../vtable/examples/components/legend2.ts | 6 +- .../examples/custom-layout-jsx/list-jsx.tsx | 2 +- .../vtable/examples/custom/custom-layout.ts | 2 +- packages/vtable/examples/type/checkbox.ts | 17 +- packages/vtable/package.json | 6 +- packages/vtable/src/ListTable.ts | 12 +- packages/vtable/src/PivotChart.ts | 20 +- packages/vtable/src/PivotTable.ts | 20 +- packages/vtable/src/core/BaseTable.ts | 12 +- packages/vtable/src/data/DataSource.ts | 2 + .../vtable/src/event/listener/table-group.ts | 13 + .../vtable/src/header-helper/header-helper.ts | 5 +- .../src/header-helper/style/CheckboxStyle.ts | 26 + .../vtable/src/layout/pivot-header-layout.ts | 12 +- packages/vtable/src/layout/pivot-layout.ts | 4 +- .../vtable/src/layout/simple-header-layout.ts | 3 +- .../group-creater/cell-type/checkbox-cell.ts | 30 +- .../scenegraph/layout/compute-col-width.ts | 2 +- .../scenegraph/utils/get-hierarchy-offset.ts | 2 +- packages/vtable/src/state/state.ts | 94 ++++ .../vtable/src/tools/get-data-path/index.ts | 2 - packages/vtable/src/ts-types/base-table.ts | 4 +- packages/vtable/src/ts-types/column/type.ts | 2 +- .../list-table/define/checkbox-define.ts | 8 +- .../list-table/define/composite-define.ts | 4 + .../src/ts-types/list-table/define/index.ts | 4 +- .../src/ts-types/list-table/layout-map/api.ts | 4 +- 36 files changed, 447 insertions(+), 428 deletions(-) create mode 100644 packages/vtable/src/header-helper/style/CheckboxStyle.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 417f4e3ad..d4c3ee8ef 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.4.3 + '@visactor/vchart': 1.5.1 '@visactor/vtable': workspace:* '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 @@ -35,7 +35,7 @@ importers: yargs: ^17.1.1 dependencies: '@arco-design/web-react': 2.46.1_5ifijlhiwgyo26nyk4gkpsvy4e - '@visactor/vchart': 1.4.3 + '@visactor/vchart': 1.5.1 '@visactor/vtable': link:../packages/vtable axios: 1.5.1 highlight.js: 11.8.0 @@ -78,7 +78,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.4.3 + '@visactor/vchart': 1.5.1 '@visactor/vdataset': ~0.15.7 '@visactor/vrender': 0.16.2 '@visactor/vrender-components': 0.16.2 @@ -87,7 +87,6 @@ importers: '@visactor/vutils-extension': 1.5.1-alpha.0 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 - canvas: ^2.11.2 chai: 4.3.4 cssfontparser: ^1.2.1 d3-array: 3.2.3 @@ -143,10 +142,9 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 18.2.25 '@types/react-dom': 18.2.10 - '@visactor/vchart': 1.4.3 + '@visactor/vchart': 1.5.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.5.1 - canvas: 2.11.2 chai: 4.3.4 d3-array: 3.2.3 d3-dsv: 3.0.1 @@ -156,7 +154,7 @@ importers: eslint: 8.18.0 form-data: 4.0.0 inversify: 6.0.1 - jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest: 26.6.3_ts-node@10.9.0 jest-electron: 0.1.12_jest@26.6.3 jest-transform-stub: 2.0.0 json-formatter-js: 2.3.4 @@ -1759,7 +1757,7 @@ packages: slash: 3.0.0 dev: true - /@jest/core/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /@jest/core/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==} engines: {node: '>= 10.14.2'} dependencies: @@ -1774,14 +1772,14 @@ packages: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 26.6.2 - jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-config: 26.6.3_ts-node@10.9.0 jest-haste-map: 26.6.2 jest-message-util: 26.6.2 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-resolve-dependencies: 26.6.3 - jest-runner: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 - jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runner: 26.6.3_ts-node@10.9.0 + jest-runtime: 26.6.3_ts-node@10.9.0 jest-snapshot: 26.6.2 jest-util: 26.6.2 jest-validate: 26.6.2 @@ -1934,15 +1932,15 @@ packages: - supports-color dev: true - /@jest/test-sequencer/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /@jest/test-sequencer/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==} engines: {node: '>= 10.14.2'} dependencies: '@jest/test-result': 26.6.2 graceful-fs: 4.2.11 jest-haste-map: 26.6.2 - jest-runner: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 - jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runner: 26.6.3_ts-node@10.9.0 + jest-runtime: 26.6.3_ts-node@10.9.0 transitivePeerDependencies: - bufferutil - canvas @@ -2055,24 +2053,6 @@ packages: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - /@mapbox/node-pre-gyp/1.0.11: - resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} - hasBin: true - dependencies: - detect-libc: 2.0.2 - https-proxy-agent: 5.0.1 - make-dir: 3.1.0 - node-fetch: 2.6.7 - nopt: 5.0.0 - npmlog: 5.0.1 - rimraf: 3.0.2 - semver: 7.5.4 - tar: 6.2.0 - transitivePeerDependencies: - - encoding - - supports-color - dev: true - /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2102,7 +2082,6 @@ packages: cpu: [arm] os: [android] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-android-arm-eabi/2.5.0: @@ -2120,7 +2099,6 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-android-arm64/2.5.0: @@ -2138,7 +2116,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-darwin-arm64/2.5.0: @@ -2156,7 +2133,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-darwin-x64/2.5.0: @@ -2174,7 +2150,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-linux-arm-gnueabihf/2.5.0: @@ -2192,7 +2167,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-linux-arm64-gnu/2.5.0: @@ -2210,7 +2184,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-linux-arm64-musl/2.5.0: @@ -2228,7 +2201,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-linux-x64-gnu/2.5.0: @@ -2246,7 +2218,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-linux-x64-musl/2.5.0: @@ -2264,7 +2235,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-win32-arm64-msvc/2.5.0: @@ -2282,7 +2252,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-win32-ia32-msvc/2.5.0: @@ -2300,7 +2269,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: false optional: true /@resvg/resvg-js-win32-x64-msvc/2.5.0: @@ -2328,7 +2296,6 @@ packages: '@resvg/resvg-js-win32-arm64-msvc': 2.4.1 '@resvg/resvg-js-win32-ia32-msvc': 2.4.1 '@resvg/resvg-js-win32-x64-msvc': 2.4.1 - dev: false /@resvg/resvg-js/2.5.0: resolution: {integrity: sha512-Um0F9XfKZfhltIrcnScl/h5C31HDIn4MriZkVBa/E7C0cdkH2teLAzWBW/Z0WBIG9oa0U+JjzmpwJlF+UtKr1A==} @@ -3081,22 +3048,23 @@ packages: resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==} dev: true - /@visactor/vchart/1.4.3: - resolution: {integrity: sha512-9sXXR8uCWYfEhLQAXD/119EBIwXhBxjLfDX5xlqjwATJp9IF1jPxtA+nNiyvQ1Lbi2Qg3vRk7dcWuTmcj42F0A==} - dependencies: - '@visactor/vdataset': 0.16.1 - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-hierarchy': 0.7.7 - '@visactor/vgrammar-projection': 0.7.7 - '@visactor/vgrammar-sankey': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vgrammar-wordcloud': 0.7.7 - '@visactor/vgrammar-wordcloud-shape': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vrender-components': 0.15.7 - '@visactor/vscale': 0.16.1 - '@visactor/vutils': 0.16.1 - '@visactor/vutils-extension': 1.4.3 + /@visactor/vchart/1.5.1: + resolution: {integrity: sha512-gIMg+acgEJO8gVHxG111wXm1PTlGm/4ZzI4WPhvV7RhR7WDZM9dSQxhDrwKK9+laKLTm64O0Tce1tb1KFWnM/w==} + dependencies: + '@visactor/vdataset': 0.16.5 + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-hierarchy': 0.8.0 + '@visactor/vgrammar-projection': 0.8.0 + '@visactor/vgrammar-sankey': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vgrammar-wordcloud': 0.8.0 + '@visactor/vgrammar-wordcloud-shape': 0.8.0 + '@visactor/vrender-components': 0.16.8 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vscale': 0.16.5 + '@visactor/vutils': 0.16.5 + '@visactor/vutils-extension': 1.5.1 /@visactor/vdataset/0.15.14: resolution: {integrity: sha512-uPRUJAcldwEUezQnXUIB5IwFyMhktgc9YyObm0fFtBEf9P+zln+d/cW1jIN8H2oTIaTyAryDCzZ3MDWTI8jOqg==} @@ -3120,13 +3088,13 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vdataset/0.16.1: - resolution: {integrity: sha512-7CuXVuS6ujaIh+nIdKo5o2W5YTaptW6fcKRtDBY/Rug9+r2474Fr/hDDkyUYRFQQkjxJG+W2TFB9z2fT0A1eqQ==} + /@visactor/vdataset/0.16.5: + resolution: {integrity: sha512-8kMs5uA4hSXSTh/ljbGxW6Dp/zUUxW2uLhbvusE0xZ3L3axuBmaqf3EiYMxQA62lPpc6mAYcSqVfiy+F2ZYc9w==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.16.1 + '@visactor/vutils': 0.16.5 d3-dsv: 3.0.1 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -3141,76 +3109,73 @@ packages: simplify-geojson: 1.0.5 topojson-client: 3.1.0 - /@visactor/vgrammar-coordinate/0.7.7: - resolution: {integrity: sha512-MkWyjxuQuciBZTa2iq/KSZec0ud0xFo0fp1eQOQAqCIMrcUHkl5mEAyjr4jCLp2VMsHRJuu4n70n0nATiM23dw==} - dependencies: - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vutils': 0.16.1 - - /@visactor/vgrammar-core/0.7.7: - resolution: {integrity: sha512-ny50xQar9MHpBD17rQPRFPpXW2wB1FYBm9B/vvX+SHFC0SNre1gY3dNO5k8InCglFD3vVYaOOrp4j44WPwMKNg==} - dependencies: - '@visactor/vdataset': 0.16.1 - '@visactor/vgrammar-coordinate': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vrender-components': 0.15.7 - '@visactor/vscale': 0.16.0 - '@visactor/vutils': 0.16.1 - - /@visactor/vgrammar-hierarchy/0.7.7: - resolution: {integrity: sha512-nQABa3XCIbdhGNszMfiGOYVOlDrgGvLGhhOimThfQMJxHV/Wk7ePjgOaXlS1M32JMEvFLBllGlC7QgJpDAx9dw==} + /@visactor/vgrammar-coordinate/0.8.0: + resolution: {integrity: sha512-FS5Ir+AawOZMpv4wINeyTWIyB8PThGnLzfVMDvRLwckYP0na3wiGu0HGQ/BV0Z+jhtd/wB7DEnux2bLlvAlr/w==} dependencies: - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vutils': 0.16.1 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vutils': 0.16.5 - /@visactor/vgrammar-projection/0.7.7: - resolution: {integrity: sha512-afe2HfWnONFD7d3V8EdSEdff9RYNNdZdsB69z73zEI217rY6wmpnWGJnx1xk3Oiv/1DiIqqQP+1gmctW4LQ1Zg==} + /@visactor/vgrammar-core/0.8.0: + resolution: {integrity: sha512-i7y4p4cWRaSzjzy/x2yz1dKYVJxCIVuW89jzh+sjnooFNMEFM+IFn/lLGKt9e4PB1t26QT+IMNeCAgWeZemFHw==} dependencies: - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vutils': 0.16.1 + '@visactor/vdataset': 0.16.5 + '@visactor/vgrammar-coordinate': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vrender-components': 0.16.2 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vscale': 0.16.5 + '@visactor/vutils': 0.16.5 + + /@visactor/vgrammar-hierarchy/0.8.0: + resolution: {integrity: sha512-wLTfFF4zqVhr3vgTUiJ3qTF2x/TAQMC6QYOays+pEIDwCp3mdkdE9ajBr44YfhrorJzWjgqceV0it5fm5xbyKA==} + dependencies: + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vutils': 0.16.5 + + /@visactor/vgrammar-projection/0.8.0: + resolution: {integrity: sha512-jyuxC8aYFTXi+C+9MOb/0EUJ6EtbB40IyI+nIL1nCB1TsPiNu+kgP+8OSPltC2buONL2gUe7JqRvpD3OJBE8ug==} + dependencies: + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vutils': 0.16.5 d3-geo: 1.12.1 - /@visactor/vgrammar-sankey/0.7.7: - resolution: {integrity: sha512-qETx+3xo8ebOH579klD/fJgALYjKS6tQAWr75SGB0DopPwrSniqt3dIVYUFbRCv/FQHcVBmERw7mtXapcGelHw==} - dependencies: - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vutils': 0.16.1 - - /@visactor/vgrammar-util/0.7.7: - resolution: {integrity: sha512-FQIbJeP4iDqKFGpWntW5lNtdn6m12q+fx7e86UH6mL15+dwxNkgLnycgcud1CDhpu2kvn4rU2zssBXjl6zvOuw==} + /@visactor/vgrammar-sankey/0.8.0: + resolution: {integrity: sha512-xW7smu671LMnO7zoxXnn4jefLk2JE71it2RGs4/yu3ZTOB640NQa/H1goEYGAf2YckzGGC+/tif7zsoARy0xTw==} dependencies: - '@visactor/vutils': 0.16.1 + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vutils': 0.16.5 - /@visactor/vgrammar-wordcloud-shape/0.7.7: - resolution: {integrity: sha512-OuIr2r754rdL8h7PPvQxkUL9LMUlKyNluPSMIY0QLrSg0JFoB3Uh8hSLnXJtjbK/n3OVw3obfSzbvhkQuFytWg==} + /@visactor/vgrammar-util/0.8.0: + resolution: {integrity: sha512-MJA5EL/K/9mjywONGoyVwbc4pqVkD1K2K3t9SAb1DksvM+bqCy0l1MIBGk9/icCz8za+OEZH+WFw7Fz/qG+Oqw==} dependencies: - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vscale': 0.16.0 - '@visactor/vutils': 0.16.1 + '@visactor/vutils': 0.16.5 - /@visactor/vgrammar-wordcloud/0.7.7: - resolution: {integrity: sha512-KZFMLB2X+WiKra5X1AljcEZUXDQB2h5q7FKKUG83g/24ODoNiw2X9JLKb8Y0kMl+dyHW/Kiudi1pO2cF9a0ayQ==} + /@visactor/vgrammar-wordcloud-shape/0.8.0: + resolution: {integrity: sha512-KuK/SNtaYDcHeFFjj6vT5IyvRlTyvYTDgNvWagExuf/LkTUIbl4rBqlOVRq6diZM79MJf62JLRbqcO+Rzd41JQ==} dependencies: - '@visactor/vgrammar-core': 0.7.7 - '@visactor/vgrammar-util': 0.7.7 - '@visactor/vrender': 0.15.7 - '@visactor/vutils': 0.16.1 + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vscale': 0.16.5 + '@visactor/vutils': 0.16.5 - /@visactor/vrender-components/0.15.7: - resolution: {integrity: sha512-ISCI2SjluFt7d1zyWFSBMRIyZF94xEFnhNm5BBj62LHPTRVHu09ApuKTMwHnL9O2s4zjhhFi9TP/CQ3qeHYNZA==} + /@visactor/vgrammar-wordcloud/0.8.0: + resolution: {integrity: sha512-gsMmL0q7iYuaevltBOf5TxFm2OnW2zVyooc273xM48QYbX8ZC0Tmmftzo0pEPmoqFRrjnCPwWijBaUXN0pA5Mg==} dependencies: - '@visactor/vrender': 0.15.7 - '@visactor/vscale': 0.16.0 - '@visactor/vutils': 0.16.1 - inversify: 6.0.1 + '@visactor/vgrammar-core': 0.8.0 + '@visactor/vgrammar-util': 0.8.0 + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vutils': 0.16.5 /@visactor/vrender-components/0.16.2: resolution: {integrity: sha512-brMRZK/TDCE9GgNMxZrJYrCtK9Adnfg8gBT6mv57JFXfN3ja8cItUbU6kG1Ws62h1K2zNil/9Fv0+gXwEupvlg==} @@ -3219,7 +3184,14 @@ packages: '@visactor/vrender-kits': 0.16.2 '@visactor/vscale': 0.16.0 '@visactor/vutils': 0.16.1 - dev: false + + /@visactor/vrender-components/0.16.8: + resolution: {integrity: sha512-xt+Y1LtSLxuzZA60guf8wjKuygyjTZY2hqbg9yW0RVjMtanID/8hhI/oKhONwXL6diAfTWdop4PreJwtGas2Xg==} + dependencies: + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vscale': 0.16.0 + '@visactor/vutils': 0.16.1 /@visactor/vrender-core/0.16.1: resolution: {integrity: sha512-ZyxA3yAZZmpibID97uBWqqmI2n1zG2y21OE2+IA3nbSGyd1HgbZ1jo6kjj3BldLLxCUvoXDwpEpNlLwlOg9frw==} @@ -3233,7 +3205,12 @@ packages: dependencies: '@visactor/vutils': 0.16.1 color-convert: 2.0.1 - dev: false + + /@visactor/vrender-core/0.16.8: + resolution: {integrity: sha512-psjkg0UFOfxSinxNfm6QiEAhKV6yrxCXhId3WTEXdh7nla62o3Pft9CMA8ooFaA9I0cNl5klkJxOqtKdAmRZPg==} + dependencies: + '@visactor/vutils': 0.16.1 + color-convert: 2.0.1 /@visactor/vrender-kits/0.16.1: resolution: {integrity: sha512-vjOXLuQ2QSGzQc5JV41D2ohHjTMRTwzt/7wITAawQYdk0XQPRG8nmsY83BvfzDkOuhfNlsXyC3RxMsfS0eAXMg==} @@ -3251,16 +3228,14 @@ packages: '@visactor/vrender-core': 0.16.2 '@visactor/vutils': 0.16.1 roughjs: 4.5.2 - dev: false - /@visactor/vrender/0.15.7: - resolution: {integrity: sha512-COsDhJSII0lcmbF605i7a+7wbb+rMIiAIScvJ5WZKPjsWvu8Pnqbafn5Az8dgkO4OJsabeOLjeXZmr6NK8AdCQ==} + /@visactor/vrender-kits/0.16.8: + resolution: {integrity: sha512-SLPXt8gyp95BNLmhNvxqNXvLdnApbWJYRgKjzKaSYH+cbUQmaPVlaPSbkYiPJJvP4J3CZGW9F95TO5GBvhmZPw==} dependencies: + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.16.8 '@visactor/vutils': 0.16.1 - color-convert: 2.0.1 - core-js: 3.31.1 - fast-xml-parser: 4.2.7 - inversify: 6.0.1 + roughjs: 4.5.2 /@visactor/vrender/0.16.2: resolution: {integrity: sha512-BHN3VczeWZSROM/wU+q7xlCqz+dfESPZGlwFD3CvpRWe05B/L2Aw1NhW0LZrEmIWhoSYQPdhDanaZhGqTSCfQw==} @@ -3278,13 +3253,20 @@ packages: resolution: {integrity: sha512-/+6Fyi0dvvYMAxLgDLamY6zIV9i2zzGw2MOiOeyRiL+uZLTxmLc5MIl7SjQlcgdMiFBRh2IJ7qU99Lv8Bl7D1g==} dependencies: '@visactor/vutils': 0.16.1 + dev: false - /@visactor/vutils-extension/1.4.3: - resolution: {integrity: sha512-ChFU1u+2DZ27P/OKmX2L5Cf50L8AjDQ9ii83v4jF20e1V82I2XO+kyCHrO5iQ9cHM94uoWPKs6+adtY2YGhWpQ==} + /@visactor/vscale/0.16.5: + resolution: {integrity: sha512-kBOprM78Geh76ojxTGYAp39wk6OtHl3HD8NNauZ2ySwdJ0+PHPY+xlUVraz5rZapME8QX4raSq8VuvoOXn5yZw==} dependencies: - '@visactor/vrender': 0.15.7 - '@visactor/vscale': 0.16.1 - '@visactor/vutils': 0.16.1 + '@visactor/vutils': 0.16.5 + + /@visactor/vutils-extension/1.5.1: + resolution: {integrity: sha512-YDaQxD95sFJ9dzvUXQdFLHjY3L76xisWTLqxPD8SC7luvjufOX53SfGxd6f9zn2/6Zh6kU/n79C8Iga8CJv2xA==} + dependencies: + '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-kits': 0.16.8 + '@visactor/vscale': 0.16.5 + '@visactor/vutils': 0.16.5 /@visactor/vutils-extension/1.5.1-alpha.0: resolution: {integrity: sha512-4qtND+1Djatb5zVzAAbRX+WAKveO2SgEyJhnTzL/gWv7Elc+QYP06VmPaQy6ZnLHmxx6bsnZn1yFitz6fifmig==} @@ -3317,6 +3299,13 @@ packages: '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 + /@visactor/vutils/0.16.5: + resolution: {integrity: sha512-leYZYJk1oXI4yXqvJjJTyDGESJ/5thu1K+W82/cnT5NMr5aXRImdRsEKwKed9TbDyTnuZTKJkgYHj5ll9yBhQQ==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + /@vitejs/plugin-react/3.1.0_vite@3.2.6: resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} engines: {node: ^14.18.0 || >=16.0.0} @@ -3328,7 +3317,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5_@babel+core@7.20.12 magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 3.2.6 + vite: 3.2.6_bey24emwuvidhf4fiqele7nite transitivePeerDependencies: - supports-color dev: true @@ -3376,10 +3365,6 @@ packages: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} dev: true - /abbrev/1.1.1: - resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} - dev: true - /abs-svg-path/0.1.1: resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==} @@ -3447,6 +3432,7 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color + dev: true /ajv/6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -3558,22 +3544,10 @@ packages: buffer-equal: 1.0.1 dev: false - /aproba/2.0.0: - resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} - dev: true - /archy/1.0.0: resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==} dev: false - /are-we-there-yet/2.0.0: - resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==} - engines: {node: '>=10'} - dependencies: - delegates: 1.0.0 - readable-stream: 3.6.2 - dev: true - /arg/4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} @@ -4221,19 +4195,6 @@ packages: /caniuse-lite/1.0.30001546: resolution: {integrity: sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==} - /canvas/2.11.2: - resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==} - engines: {node: '>=6'} - requiresBuild: true - dependencies: - '@mapbox/node-pre-gyp': 1.0.11 - nan: 2.17.0 - simple-get: 3.1.1 - transitivePeerDependencies: - - encoding - - supports-color - dev: true - /capture-exit/2.0.0: resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==} engines: {node: 6.* || 8.* || >= 10.*} @@ -4353,11 +4314,6 @@ packages: fsevents: 2.3.3 dev: true - /chownr/2.0.0: - resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} - engines: {node: '>=10'} - dev: true - /ci-info/2.0.0: resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==} dev: true @@ -4515,6 +4471,7 @@ packages: /color-support/1.1.3: resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==} hasBin: true + dev: false /color/3.2.1: resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==} @@ -4612,10 +4569,6 @@ packages: dev: true optional: true - /console-control-strings/1.1.0: - resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} - dev: true - /convert-source-map/1.9.0: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} @@ -4640,10 +4593,6 @@ packages: dependencies: browserslist: 4.22.1 - /core-js/3.31.1: - resolution: {integrity: sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==} - requiresBuild: true - /core-util-is/1.0.2: resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==} dev: true @@ -4959,13 +4908,6 @@ packages: mimic-response: 1.0.1 dev: true - /decompress-response/4.2.1: - resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==} - engines: {node: '>=8'} - dependencies: - mimic-response: 2.1.0 - dev: true - /deep-eql/3.0.1: resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==} engines: {node: '>=0.12'} @@ -5042,20 +4984,11 @@ packages: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} - /delegates/1.0.0: - resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==} - dev: true - /detect-file/1.0.0: resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==} engines: {node: '>=0.10.0'} dev: false - /detect-libc/2.0.2: - resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} - engines: {node: '>=8'} - dev: true - /detect-newline/2.1.0: resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==} engines: {node: '>=0.10.0'} @@ -5225,6 +5158,7 @@ packages: /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + dev: true /encodeurl/1.0.2: resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==} @@ -6010,12 +5944,6 @@ packages: /fast-levenshtein/2.0.6: resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} - /fast-xml-parser/4.2.7: - resolution: {integrity: sha512-J8r6BriSLO1uj2miOk1NW0YVm8AGOOu3Si2HQp/cSmo6EA4m3fcwu2WKjJ4RK9wMLBtg69y1kS8baDiQBR41Ig==} - hasBin: true - dependencies: - strnum: 1.0.5 - /fastq/1.15.0: resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==} dependencies: @@ -6252,13 +6180,6 @@ packages: universalify: 0.1.2 dev: true - /fs-minipass/2.1.0: - resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==} - engines: {node: '>= 8'} - dependencies: - minipass: 3.3.6 - dev: true - /fs-mkdirp-stream/1.0.0: resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==} engines: {node: '>= 0.10'} @@ -6306,21 +6227,6 @@ packages: /functions-have-names/1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} - /gauge/3.0.2: - resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==} - engines: {node: '>=10'} - dependencies: - aproba: 2.0.0 - color-support: 1.1.3 - console-control-strings: 1.1.0 - has-unicode: 2.0.1 - object-assign: 4.1.1 - signal-exit: 3.0.7 - string-width: 4.2.3 - strip-ansi: 6.0.1 - wide-align: 1.1.5 - dev: true - /generic-names/4.0.0: resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==} dependencies: @@ -6769,10 +6675,6 @@ packages: dependencies: has-symbols: 1.0.3 - /has-unicode/2.0.1: - resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} - dev: true - /has-value/0.3.1: resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==} engines: {node: '>=0.10.0'} @@ -6891,6 +6793,7 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color + dev: true /human-signals/1.1.1: resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==} @@ -7009,6 +6912,7 @@ packages: /inversify/6.0.1: resolution: {integrity: sha512-B3ex30927698TJENHR++8FfEaJGqoWOgI6ZY5Ht/nLUsFCwHn6akbwtnUAPCgUepAnTpe2qHxhDNjoKLyz6rgQ==} + dev: true /invert-kv/1.0.0: resolution: {integrity: sha512-xgs2NH9AE66ucSq4cNG1nhSFghr5l6tdL15Pk+jl46bmmBapgoaY/AacXyaDznAqmGL99TiLSQgO/XazFSKYeQ==} @@ -7171,6 +7075,7 @@ packages: /is-fullwidth-code-point/3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} engines: {node: '>=8'} + dev: true /is-generator-fn/2.1.0: resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==} @@ -7467,12 +7372,12 @@ packages: throat: 5.0.0 dev: true - /jest-cli/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest-cli/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==} engines: {node: '>= 10.14.2'} hasBin: true dependencies: - '@jest/core': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + '@jest/core': 26.6.3_ts-node@10.9.0 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 chalk: 4.1.2 @@ -7480,7 +7385,7 @@ packages: graceful-fs: 4.2.11 import-local: 3.1.0 is-ci: 2.0.0 - jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-config: 26.6.3_ts-node@10.9.0 jest-util: 26.6.2 jest-validate: 26.6.2 prompts: 2.4.2 @@ -7518,7 +7423,7 @@ packages: - supports-color dev: true - /jest-config/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest-config/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==} engines: {node: '>= 10.14.2'} peerDependencies: @@ -7528,17 +7433,17 @@ packages: optional: true dependencies: '@babel/core': 7.20.12 - '@jest/test-sequencer': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + '@jest/test-sequencer': 26.6.3_ts-node@10.9.0 '@jest/types': 26.6.2 babel-jest: 26.6.3_@babel+core@7.20.12 chalk: 4.1.2 deepmerge: 4.3.1 glob: 7.2.3 graceful-fs: 4.2.11 - jest-environment-jsdom: 26.6.2_canvas@2.11.2 + jest-environment-jsdom: 26.6.2 jest-environment-node: 26.6.2 jest-get-type: 26.3.0 - jest-jasmine2: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-jasmine2: 26.6.3_ts-node@10.9.0 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-util: 26.6.2 @@ -7615,7 +7520,7 @@ packages: jest: ^24.0.0 dependencies: electron: 11.5.0 - jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest: 26.6.3_ts-node@10.9.0 jest-haste-map: 24.9.0 jest-message-util: 24.9.0 jest-mock: 24.9.0 @@ -7643,7 +7548,7 @@ packages: - supports-color dev: true - /jest-environment-jsdom/26.6.2_canvas@2.11.2: + /jest-environment-jsdom/26.6.2: resolution: {integrity: sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==} engines: {node: '>= 10.14.2'} dependencies: @@ -7653,7 +7558,7 @@ packages: '@types/node': 20.8.2 jest-mock: 26.6.2 jest-util: 26.6.2 - jsdom: 16.7.0_canvas@2.11.2 + jsdom: 16.7.0 transitivePeerDependencies: - bufferutil - canvas @@ -7760,7 +7665,7 @@ packages: - supports-color dev: true - /jest-jasmine2/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest-jasmine2/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==} engines: {node: '>= 10.14.2'} dependencies: @@ -7777,7 +7682,7 @@ packages: jest-each: 26.6.2 jest-matcher-utils: 26.6.2 jest-message-util: 26.6.2 - jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runtime: 26.6.3_ts-node@10.9.0 jest-snapshot: 26.6.2 jest-util: 26.6.2 pretty-format: 26.6.2 @@ -7965,7 +7870,7 @@ packages: - supports-color dev: true - /jest-runner/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest-runner/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==} engines: {node: '>= 10.14.2'} dependencies: @@ -7978,13 +7883,13 @@ packages: emittery: 0.7.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-config: 26.6.3_ts-node@10.9.0 jest-docblock: 26.0.0 jest-haste-map: 26.6.2 jest-leak-detector: 26.6.2 jest-message-util: 26.6.2 jest-resolve: 26.6.2 - jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runtime: 26.6.3_ts-node@10.9.0 jest-util: 26.6.2 jest-worker: 26.6.2 source-map-support: 0.5.21 @@ -8029,7 +7934,7 @@ packages: - supports-color dev: true - /jest-runtime/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest-runtime/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==} engines: {node: '>= 10.14.2'} hasBin: true @@ -8049,7 +7954,7 @@ packages: exit: 0.1.2 glob: 7.2.3 graceful-fs: 4.2.11 - jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-config: 26.6.3_ts-node@10.9.0 jest-haste-map: 26.6.2 jest-message-util: 26.6.2 jest-mock: 26.6.2 @@ -8211,14 +8116,14 @@ packages: supports-color: 7.2.0 dev: true - /jest/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: + /jest/26.6.3_ts-node@10.9.0: resolution: {integrity: sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==} engines: {node: '>= 10.14.2'} hasBin: true dependencies: - '@jest/core': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + '@jest/core': 26.6.3_ts-node@10.9.0 import-local: 3.1.0 - jest-cli: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-cli: 26.6.3_ts-node@10.9.0 transitivePeerDependencies: - bufferutil - canvas @@ -8284,7 +8189,7 @@ packages: xml-name-validator: 3.0.0 dev: true - /jsdom/16.7.0_canvas@2.11.2: + /jsdom/16.7.0: resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==} engines: {node: '>=10'} peerDependencies: @@ -8296,7 +8201,6 @@ packages: abab: 2.0.6 acorn: 8.10.0 acorn-globals: 6.0.0 - canvas: 2.11.2 cssom: 0.4.4 cssstyle: 2.3.0 data-urls: 2.0.0 @@ -8719,6 +8623,7 @@ packages: engines: {node: '>=8'} dependencies: semver: 6.3.1 + dev: false /make-dir/4.0.0: resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} @@ -8889,11 +8794,6 @@ packages: engines: {node: '>=4'} dev: true - /mimic-response/2.1.0: - resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==} - engines: {node: '>=8'} - dev: true - /minimatch/3.0.4: resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==} dependencies: @@ -8922,26 +8822,6 @@ packages: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true - /minipass/3.3.6: - resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==} - engines: {node: '>=8'} - dependencies: - yallist: 4.0.0 - dev: true - - /minipass/5.0.0: - resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} - engines: {node: '>=8'} - dev: true - - /minizlib/2.1.2: - resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==} - engines: {node: '>= 8'} - dependencies: - minipass: 3.3.6 - yallist: 4.0.0 - dev: true - /mixin-deep/1.3.2: resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==} engines: {node: '>=0.10.0'} @@ -8960,6 +8840,7 @@ packages: resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} engines: {node: '>=10'} hasBin: true + dev: true /mlly/1.4.2: resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==} @@ -9017,6 +8898,7 @@ packages: /nan/2.17.0: resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==} + optional: true /nanoid/3.1.25: resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==} @@ -9067,13 +8949,6 @@ packages: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} dev: true - /node-fetch/2.6.6: - resolution: {integrity: sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==} - engines: {node: 4.x || >=6.0.0} - dependencies: - whatwg-url: 5.0.0 - dev: false - /node-fetch/2.6.7: resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==} engines: {node: 4.x || >=6.0.0} @@ -9084,6 +8959,7 @@ packages: optional: true dependencies: whatwg-url: 5.0.0 + dev: true /node-int64/0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} @@ -9105,14 +8981,6 @@ packages: /node-releases/2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} - /nopt/5.0.0: - resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} - engines: {node: '>=6'} - hasBin: true - dependencies: - abbrev: 1.1.1 - dev: true - /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -9176,15 +9044,6 @@ packages: path-key: 3.1.1 dev: true - /npmlog/5.0.1: - resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==} - dependencies: - are-we-there-yet: 2.0.0 - console-control-strings: 1.1.0 - gauge: 3.0.2 - set-blocking: 2.0.0 - dev: true - /nth-check/2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} dependencies: @@ -9211,6 +9070,7 @@ packages: /object-assign/4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} + dev: false /object-copy/0.1.0: resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==} @@ -9511,7 +9371,6 @@ packages: /path-data-parser/0.1.0: resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==} - dev: false /path-dirname/1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} @@ -9708,14 +9567,12 @@ packages: /points-on-curve/0.2.0: resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} - dev: false /points-on-path/0.2.1: resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} dependencies: path-data-parser: 0.1.0 points-on-curve: 0.2.0 - dev: false /posix-character-classes/0.1.1: resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} @@ -10793,7 +10650,6 @@ packages: path-data-parser: 0.1.0 points-on-curve: 0.2.0 points-on-path: 0.2.1 - dev: false /rsvp/4.8.5: resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==} @@ -11018,18 +10874,6 @@ packages: /signal-exit/3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} - /simple-concat/1.0.1: - resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==} - dev: true - - /simple-get/3.1.1: - resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==} - dependencies: - decompress-response: 4.2.1 - once: 1.4.0 - simple-concat: 1.0.1 - dev: true - /simple-statistics/7.8.3: resolution: {integrity: sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==} @@ -11295,6 +11139,7 @@ packages: emoji-regex: 8.0.0 is-fullwidth-code-point: 3.0.0 strip-ansi: 6.0.1 + dev: true /string.prototype.matchall/4.0.10: resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==} @@ -11407,9 +11252,6 @@ packages: acorn: 8.10.0 dev: true - /strnum/1.0.5: - resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==} - /style-inject/0.3.0: resolution: {integrity: sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==} dev: false @@ -11502,18 +11344,6 @@ packages: engines: {node: '>=6'} dev: true - /tar/6.2.0: - resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==} - engines: {node: '>=10'} - dependencies: - chownr: 2.0.0 - fs-minipass: 2.1.0 - minipass: 5.0.0 - minizlib: 2.1.2 - mkdirp: 1.0.4 - yallist: 4.0.0 - dev: true - /terminal-link/2.1.1: resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==} engines: {node: '>=8'} @@ -11726,6 +11556,7 @@ packages: /tr46/0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + dev: true /tr46/1.0.1: resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==} @@ -11751,7 +11582,7 @@ packages: bs-logger: 0.2.6 buffer-from: 1.1.2 fast-json-stable-stringify: 2.1.0 - jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest: 26.6.3_ts-node@10.9.0 jest-util: 26.6.2 json5: 2.2.3 lodash: 4.17.21 @@ -12472,6 +12303,7 @@ packages: /webidl-conversions/3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + dev: true /webidl-conversions/4.0.2: resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==} @@ -12507,6 +12339,7 @@ packages: dependencies: tr46: 0.0.3 webidl-conversions: 3.0.1 + dev: true /whatwg-url/6.5.0: resolution: {integrity: sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==} @@ -12582,12 +12415,6 @@ packages: stackback: 0.0.2 dev: true - /wide-align/1.1.5: - resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==} - dependencies: - string-width: 4.2.3 - dev: true - /word-wrap/1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md index 8a98a6bd6..2bfa01ed3 100644 --- a/docs/assets/api/zh/methods.md +++ b/docs/assets/api/zh/methods.md @@ -151,7 +151,37 @@ tableInstance.renderWithRecreateCells(); */ getCellStyle(col: number, row: number) => CellStyle ``` +## getRecordByCell(Function) +获取该单元格的数据项 + +``` + /** + * 根据行列号获取整条数据记录 + * @param {number} col col index. + * @param {number} row row index. + * @return {object} record. + */ + getRecordByCell(col: number, row: number) +``` + +## getCellOriginRecord(Function) + +获取该单元格的源数据项。 + +如果是普通表格，会返回源数据的对象。 + +如果是透视分析表（开启了数据分析的透视表），会返回源数据的数组。 + +``` + /** + * 根据行列号获取源数据 + * @param {number} col col index. + * @param {number} row row index. + * @return {object} record or record array + */ + getCellOriginRecord(col: number, row: number) +``` ## getAllCells(Function) 获取所有单元格上下文信息 diff --git a/docs/assets/demo/en/component/legend.md b/docs/assets/demo/en/component/legend.md index 497461d60..46fad9cae 100644 --- a/docs/assets/demo/en/component/legend.md +++ b/docs/assets/demo/en/component/legend.md @@ -101,7 +101,7 @@ In this example, the background color of the cell is mapped by the category Dime bodyStyle: { bgColor(args) { const { row, col } = args; - const record = args.table.getRecordByRowCol(col, row); + const record = args.table.getRecordByCell(col, row); return colorToCategory[categorys.indexOf(record.Category)]; } } @@ -146,7 +146,7 @@ In this example, the background color of the cell is mapped by the category Dime bodyStyle: { color(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return 'black'; } @@ -154,7 +154,7 @@ In this example, the background color of the cell is mapped by the category Dime }, bgColor(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return colorToCategory[categorys.indexOf(record.Category)]; } diff --git a/docs/assets/demo/en/custom-render/custom-cell-layout.md b/docs/assets/demo/en/custom-render/custom-cell-layout.md index a303d1e4c..222a9446d 100644 --- a/docs/assets/demo/en/custom-render/custom-cell-layout.md +++ b/docs/assets/demo/en/custom-render/custom-cell-layout.md @@ -81,7 +81,7 @@ VTable.register.icon('message',{ }, customLayout: (args) => { const { table,row,col,rect } = args; - const record = table.getRecordByRowCol(col,row); + const record = table.getRecordByCell(col,row); const {height, width } = rect ?? table.getCellRect(col,row); const percentCalc = VTable.CustomLayout.percentCalc; diff --git a/docs/assets/demo/zh/component/legend.md b/docs/assets/demo/zh/component/legend.md index 59dc31baa..2d9a49bb0 100644 --- a/docs/assets/demo/zh/component/legend.md +++ b/docs/assets/demo/zh/component/legend.md @@ -101,7 +101,7 @@ let tableInstance; bodyStyle: { bgColor(args) { const { row, col } = args; - const record = args.table.getRecordByRowCol(col, row); + const record = args.table.getRecordByCell(col, row); return colorToCategory[categorys.indexOf(record.Category)]; } } @@ -146,7 +146,7 @@ let tableInstance; bodyStyle: { color(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return 'black'; } @@ -154,7 +154,7 @@ let tableInstance; }, bgColor(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return colorToCategory[categorys.indexOf(record.Category)]; } diff --git a/docs/assets/demo/zh/custom-render/custom-cell-layout.md b/docs/assets/demo/zh/custom-render/custom-cell-layout.md index f0037a877..e6acef166 100644 --- a/docs/assets/demo/zh/custom-render/custom-cell-layout.md +++ b/docs/assets/demo/zh/custom-render/custom-cell-layout.md @@ -81,7 +81,7 @@ VTable.register.icon('message',{ }, customLayout: (args) => { const { table,row,col,rect } = args; - const record = table.getRecordByRowCol(col,row); + const record = table.getRecordByCell(col,row); const {height, width } = rect ?? table.getCellRect(col,row); const percentCalc = VTable.CustomLayout.percentCalc; diff --git a/docs/package.json b/docs/package.json index f7217c5f2..26faaefb5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "dependencies": { "@arco-design/web-react": "2.46.1", "@visactor/vtable": "workspace:*", - "@visactor/vchart": "1.4.3", + "@visactor/vchart": "1.5.1", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", @@ -38,4 +38,4 @@ "globby": "11.1.0", "chokidar": "^3.5.0" } -} +} \ No newline at end of file diff --git a/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts b/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts index 77faaddca..d78c7ddcb 100644 --- a/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts +++ b/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts @@ -74,7 +74,7 @@ describe('listTable-custom-layout init test', () => { }, customLayout: args => { const { table, row, col, rect } = args; - const record = table.getRecordByRowCol(col, row); + const record = table.getRecordByCell(col, row); const { height, width } = rect ?? table.getCellRect(col, row); const percentCalc = VTable.CustomLayout.percentCalc; diff --git a/packages/vtable/__tests__/components/listTable-legend.test.ts b/packages/vtable/__tests__/components/listTable-legend.test.ts index 41f13a87f..0bd93c4bc 100644 --- a/packages/vtable/__tests__/components/listTable-legend.test.ts +++ b/packages/vtable/__tests__/components/listTable-legend.test.ts @@ -88,7 +88,7 @@ describe('listTable-legend init test', () => { bodyStyle: { bgColor(args) { const { row, col } = args; - const record = args.table.getRecordByRowCol(col, row); + const record = args.table.getRecordByCell(col, row); return colorToCategory[categorys.indexOf(record.Category)]; } } @@ -135,7 +135,7 @@ describe('listTable-legend init test', () => { bodyStyle: { color(args) { const { row, col } = args; - const record = listTable.getRecordByRowCol(col, row); + const record = listTable.getRecordByCell(col, row); if (hightArr.indexOf(record.Category) >= 0) { return 'black'; } @@ -143,7 +143,7 @@ describe('listTable-legend init test', () => { }, bgColor(args) { const { row, col } = args; - const record = listTable.getRecordByRowCol(col, row); + const record = listTable.getRecordByCell(col, row); if (hightArr.indexOf(record.Category) >= 0) { return colorToCategory[categorys.indexOf(record.Category)]; } diff --git a/packages/vtable/examples/components/legend2.ts b/packages/vtable/examples/components/legend2.ts index c106b284d..b4f26a1c3 100644 --- a/packages/vtable/examples/components/legend2.ts +++ b/packages/vtable/examples/components/legend2.ts @@ -84,7 +84,7 @@ export function createTable() { bodyStyle: { bgColor(args) { const { row, col } = args; - const record = args.table.getRecordByRowCol(col, row); + const record = args.table.getRecordByCell(col, row); return colorToCategory[categorys.indexOf(record.Category)]; } } @@ -130,7 +130,7 @@ export function createTable() { bodyStyle: { color(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return 'black'; } @@ -138,7 +138,7 @@ export function createTable() { }, bgColor(args) { const { row, col } = args; - const record = tableInstance.getRecordByRowCol(col, row); + const record = tableInstance.getRecordByCell(col, row); if (highlightCategorys.indexOf(record.Category) >= 0) { return colorToCategory[categorys.indexOf(record.Category)]; } diff --git a/packages/vtable/examples/custom-layout-jsx/list-jsx.tsx b/packages/vtable/examples/custom-layout-jsx/list-jsx.tsx index 0b670851d..d94f59c64 100644 --- a/packages/vtable/examples/custom-layout-jsx/list-jsx.tsx +++ b/packages/vtable/examples/custom-layout-jsx/list-jsx.tsx @@ -21,7 +21,7 @@ export function createTable() { customLayout: args => { const { table, row, col, rect } = args; const { height, width } = rect ?? table.getCellRect(col, row); - const record = table.getRecordByRowCol(col, row); + const record = table.getRecordByCell(col, row); const container = ( { const { table, row, col, rect } = args; - const record = table.getRecordByRowCol(col, row); + const record = table.getRecordByCell(col, row); const { height, width } = rect ?? table.getCellRect(col, row); const percentCalc = VTable.CustomLayout.percentCalc; diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index 8e2203cf6..c6f71d132 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -22,8 +22,9 @@ export function createTable() { }, { field: 'check', - title: 'checkbox', + title: '', width: 120, + headerType: 'checkbox', cellType: 'checkbox' // disable: true } @@ -34,16 +35,22 @@ export function createTable() { const instance = new ListTable(option); - //设置表格数据 - instance.setRecords([ + let records = []; + const data = [ { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, - { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } - ]); + { percent: '0%', value: -10, check: true }, + { percent: '0%', value: -10 } + ]; + for (let i = 0; i < 200; i++) { + records = records.concat(data); + } + //设置表格数据 + instance.setRecords(records); bindDebugTool(instance.scenegraph.stage as any, { // customGrapicKeys: ['role', '_updateTag'], diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 2035273d4..42985bbac 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -58,7 +58,7 @@ "cssfontparser": "^1.2.1" }, "devDependencies": { - "@visactor/vchart": "1.4.3", + "@visactor/vchart": "1.5.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -105,9 +105,11 @@ "d3-geo": "^3.0.1", "d3-hexbin": "^0.2.2", "d3-hierarchy": "^3.1.1", - "canvas": "^2.11.2", "@resvg/resvg-js": "^2.5.0" }, + "peerDependencies": { + "canvas": "^2.11.2" + }, "unpkg": "latest", "unpkgFiles": [ "build/es5/index.js" diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 65295260e..cf88bd341 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -190,9 +190,9 @@ export class ListTable extends BaseTable implements ListTableAPI { return table.getFieldData(field, col, row); } /** @private */ - getRecordIndexByRow(col: number, row: number): number { + getRecordIndexByCell(col: number, row: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByRow(col, row); + return layoutMap.getRecordIndexByCell(col, row); } /** * @@ -202,7 +202,7 @@ export class ListTable extends BaseTable implements ListTableAPI { */ getCellOriginRecord(col: number, row: number): MaybePromiseOrUndefined { const table = this; - const index = table.getRecordIndexByRow(col, row); + const index = table.getRecordIndexByCell(col, row); if (index > -1) { return table.dataSource.get(index); } @@ -368,7 +368,7 @@ export class ListTable extends BaseTable implements ListTableAPI { if (table.internalProps.layoutMap.isHeader(col, row)) { return null; } - const index = table.getRecordIndexByRow(col, row); + const index = table.getRecordIndexByCell(col, row); return table.internalProps.dataSource.getField(index, field); } /** @@ -504,7 +504,7 @@ export class ListTable extends BaseTable implements ListTableAPI { if (!define.tree) { return HierarchyState.none; } - const index = this.getRecordIndexByRow(col, row); + const index = this.getRecordIndexByCell(col, row); return this.dataSource.getHierarchyState(index); } /** @@ -529,7 +529,7 @@ export class ListTable extends BaseTable implements ListTableAPI { }); } - const index = this.getRecordIndexByRow(col, row); + const index = this.getRecordIndexByCell(col, row); const diffDataIndices = this.dataSource.toggleHierarchyState(index); const diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices); //影响行数 diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 89244a6b0..22e2276a4 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -333,14 +333,16 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }); } } - - getRecordIndexByRow(row: number): number { + getRecordIndexByCell(col: number, row: number): number { + return undefined; + } + getBodyIndexByRow(row: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByRow(row); + return layoutMap.getBodyIndexByRow(row); } - getRecordIndexByCol(col: number): number { + getBodyIndexByCol(col: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByCol(col); + return layoutMap.getBodyIndexByCol(col); } getFieldData(field: FieldDef | FieldFormat | undefined, col: number, row: number): FieldData { if (field === null || field === undefined) { @@ -350,8 +352,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { if (table.internalProps.layoutMap.isHeader(col, row)) { return null; } - const rowIndex = this.getRecordIndexByRow(row); - const colIndex = this.getRecordIndexByCol(col); + const rowIndex = this.getBodyIndexByRow(row); + const colIndex = this.getBodyIndexByCol(col); const dataValue = table.dataSource?.getField(rowIndex, colIndex); if (typeof field !== 'string') { //field为函数format @@ -367,8 +369,6 @@ export class PivotChart extends BaseTable implements PivotChartAPI { return typeof fieldFormat === 'function' ? fieldFormat(title) : title; } if (this.dataset) { - // const colKey = this.dataset.colKeysPath[this.internalProps.layoutMap.getRecordIndexByCol(col)] ?? []; - // const rowKey = this.dataset.rowKeysPath[this.internalProps.layoutMap.getRecordIndexByRow(row)] ?? []; const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row); const colKeys = cellDimensionPath.colHeaderPaths.map((colPath: any) => { return colPath.indicatorKey ?? colPath.value; @@ -394,8 +394,6 @@ export class PivotChart extends BaseTable implements PivotChartAPI { return typeof title === 'function' ? title() : title; } if (this.dataset) { - // const colKey = this.dataset.colKeysPath[this.internalProps.layoutMap.getRecordIndexByCol(col)] ?? []; - // const rowKey = this.dataset.rowKeysPath[this.internalProps.layoutMap.getRecordIndexByRow(row)] ?? []; const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row); const colKeys = cellDimensionPath.colHeaderPaths.map((colPath: any) => { return colPath.indicatorKey ?? colPath.value; diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 2d51c1fba..c7c6906f8 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -405,14 +405,16 @@ export class PivotTable extends BaseTable implements PivotTableAPI { }); } } - - getRecordIndexByRow(row: number): number { + getRecordIndexByCell(col: number, row: number): number { + return undefined; + } + getBodyIndexByRow(row: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByRow(row); + return layoutMap.getBodyIndexByRow(row); } - getRecordIndexByCol(col: number): number { + getBodyIndexByCol(col: number): number { const { layoutMap } = this.internalProps; - return layoutMap.getRecordIndexByCol(col); + return layoutMap.getBodyIndexByCol(col); } getFieldData(field: FieldDef | FieldFormat | undefined, col: number, row: number): FieldData { if (field === null || field === undefined) { @@ -422,8 +424,8 @@ export class PivotTable extends BaseTable implements PivotTableAPI { if (table.internalProps.layoutMap.isHeader(col, row)) { return null; } - const rowIndex = this.getRecordIndexByRow(row); - const colIndex = this.getRecordIndexByCol(col); + const rowIndex = this.getBodyIndexByRow(row); + const colIndex = this.getBodyIndexByCol(col); const dataValue = table.dataSource?.getField(rowIndex, colIndex); if (typeof field !== 'string') { //field为函数format @@ -439,8 +441,6 @@ export class PivotTable extends BaseTable implements PivotTableAPI { return typeof fieldFormat === 'function' ? fieldFormat(title) : title; } if (this.dataset) { - // const colKeys = this.dataset.colKeysPath[this.internalProps.layoutMap.getRecordIndexByCol(col)] ?? []; - // const rpwKeys = this.dataset.rowKeysPath[this.internalProps.layoutMap.getRecordIndexByRow(row)] ?? []; const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row); const colKeys = cellDimensionPath.colHeaderPaths.map((colPath: any) => { return colPath.indicatorKey ?? colPath.value; @@ -482,8 +482,6 @@ export class PivotTable extends BaseTable implements PivotTableAPI { return typeof title === 'function' ? title() : title; } if (this.dataset) { - // const colKey = this.dataset.colKeysPath[this.internalProps.layoutMap.getRecordIndexByCol(col)] ?? []; - // const rowKey = this.dataset.rowKeysPath[this.internalProps.layoutMap.getRecordIndexByRow(row)] ?? []; const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row); const colKeys = cellDimensionPath.colHeaderPaths.map((colPath: any) => { return colPath.indicatorKey ?? colPath.value; diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 5dd413523..08990651a 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2239,7 +2239,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { abstract moveHeaderPosition(source: CellAddress, target: CellAddress): boolean; /** @private */ abstract getFieldData(field: FieldDef | FieldFormat | undefined, col: number, row: number): FieldData; - abstract getRecordIndexByRow(col: number, row: number): number; + abstract getRecordIndexByCell(col: number, row: number): number; abstract getCellOriginRecord(col: number, row: number): MaybePromiseOrUndefined; abstract getCellValue(col: number, row: number): FieldData; abstract getCellOriginValue(col: number, row: number): FieldData; @@ -2437,11 +2437,11 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @param {number} row row index. * @return {object} record. */ - getRecordByRowCol(col: number, row: number): MaybePromiseOrUndefined { + getRecordByCell(col: number, row: number): MaybePromiseOrUndefined { if (this.internalProps.layoutMap.isHeader(col, row)) { return undefined; } - return this.internalProps.dataSource?.get(this.getRecordIndexByRow(col, row)); + return this.internalProps.dataSource?.get(this.getRecordIndexByCell(col, row)); } /** @@ -2563,7 +2563,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } else { _setRecords(this, records); } - + this.stateManeger.initCheckedState(records); this.internalProps.frozenColCount = this.options.frozenColCount || this.rowHeaderLevelCount; // 生成单元格场景树 this.scenegraph.createSceneGraph(); @@ -2583,7 +2583,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { * @param row row position of the record, it is optional */ setRecord(record: any, col?: number, row?: number) { - const index = this.getRecordIndexByRow(col, row); + const index = this.getRecordIndexByCell(col, row); this.dataSource.setRecord(record, index); } @@ -2692,7 +2692,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { if (table.internalProps.layoutMap.isHeader(col, row)) { return false; } - const index = table.getRecordIndexByRow(col, row); + const index = table.getRecordIndexByCell(col, row); return table.internalProps.dataSource.hasField(index, field); } /** diff --git a/packages/vtable/src/data/DataSource.ts b/packages/vtable/src/data/DataSource.ts index 00c196203..483e8f030 100644 --- a/packages/vtable/src/data/DataSource.ts +++ b/packages/vtable/src/data/DataSource.ts @@ -16,6 +16,7 @@ import { EventTarget } from '../event/EventTarget'; import { getValueByPath } from '../tools/util'; import { diffCellIndices } from '../tools/diff-cell'; import { isValid } from '@visactor/vutils'; +import type { BaseTableAPI } from '../ts-types/base-table'; /** * 判断字段数据是否为访问器的格式 @@ -141,6 +142,7 @@ export class DataSource extends EventTarget implements DataSourceAPI { return EVENT_TYPE; } protected treeDataHierarchyState: Map = new Map(); + constructor(obj?: DataSourceParam | DataSource, pagination?: IPagination, hierarchyExpandLevel?: number) { super(); diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index be4f078d0..8490f9098 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -585,6 +585,19 @@ export function bindTableGroupListener(eventManeger: EventManeger) { target: eventArgsSet?.eventArgs?.target, checked: (e.detail as unknown as { checked: boolean }).checked }; + table.stateManeger.setCheckedState( + col, + row, + cellInfo.field as string | number, + (e.detail as unknown as { checked: boolean }).checked + ); + if (table.isHeader(col, row)) { + table.stateManeger.setHeaderCheckedState( + cellInfo.field as string | number, + (e.detail as unknown as { checked: boolean }).checked + ); + // table.scenegraph.updateCheckboxCellState(); + } table.fireListeners(TABLE_EVENT_TYPE.CHECKBOX_STATE_CHANGE, cellsEvent); }); } diff --git a/packages/vtable/src/header-helper/header-helper.ts b/packages/vtable/src/header-helper/header-helper.ts index 5434bc391..1e3ffffc5 100644 --- a/packages/vtable/src/header-helper/header-helper.ts +++ b/packages/vtable/src/header-helper/header-helper.ts @@ -8,6 +8,7 @@ import { ImageStyle } from './style/ImageStyle'; import { TextHeaderStyle } from './style'; import type { ListTable } from '../ListTable'; import type { BaseTableAPI } from '../ts-types/base-table'; +import { CheckboxStyle } from './style/CheckboxStyle'; export class HeaderHelper { normalIcon: SvgIcon; upIcon: SvgIcon; @@ -362,7 +363,7 @@ export class HeaderHelper { return false; } - getStyleClass(headerType: 'text' | 'image' | 'video' | 'link') { + getStyleClass(headerType: 'text' | 'image' | 'video' | 'link' | 'checkbox') { switch (headerType) { case 'text': return TextHeaderStyle; @@ -372,6 +373,8 @@ export class HeaderHelper { return ImageStyle; case 'link': return TextHeaderStyle; + case 'checkbox': + return CheckboxStyle; } } } diff --git a/packages/vtable/src/header-helper/style/CheckboxStyle.ts b/packages/vtable/src/header-helper/style/CheckboxStyle.ts new file mode 100644 index 000000000..596ca59ae --- /dev/null +++ b/packages/vtable/src/header-helper/style/CheckboxStyle.ts @@ -0,0 +1,26 @@ +import type { CheckboxStyleOption, IStyleOption } from '../../ts-types'; +import { Style } from './Style'; + +let defaultStyle: CheckboxStyle; + +export class CheckboxStyle extends Style { + // private _imageSizing?: 'keep-aspect-ratio'; + // private _imageAutoSizing?: boolean; + // private _margin: number; + static get DEFAULT(): CheckboxStyle { + return defaultStyle ? defaultStyle : (defaultStyle = new CheckboxStyle()); + } + constructor(style: CheckboxStyleOption = {}, headerStyle: IStyleOption = {}) { + super(style, headerStyle); + } + // get margin(): number { + // return this._margin; + // } + // set margin(margin: number) { + // this._margin = margin; + // this.doChangeStyle(); + // } + clone(): CheckboxStyle { + return new CheckboxStyle(this); + } +} diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 290f71646..a261856f8 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1456,7 +1456,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { ); } - getRecordIndexByRow(row: number): number { + getBodyIndexByRow(row: number): number { if (row < this.columnHeaderLevelCount) { return -1; } else if (row >= this.rowCount - this.bottomFrozenRowCount) { @@ -1467,7 +1467,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // ? row - this.columnHeaderLevelCount // : Math.floor((row - this.columnHeaderLevelCount) / this.indicatorKeys.length); } - getRecordIndexByCol(col: number): number { + getBodyIndexByCol(col: number): number { if (col < this.rowHeaderLevelCount) { return -1; } else if (col >= this.colCount - this.rightFrozenColCount) { @@ -1478,7 +1478,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { getRecordStartRowByRecordIndex(index: number): number { return this.columnHeaderLevelCount + index; } - + getRecordIndexByCell(col: number, row: number): number { + return undefined; + } // getCellRangeTranspose(): CellRange { // return { start: { col: 0, row: 0 }, end: { col: 0, row: 0 } }; // } @@ -1496,8 +1498,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { if (this._CellHeaderPathMap.has(`${col}-${row}`)) { return this._CellHeaderPathMap.get(`${col}-${row}`); } - const recordCol = this.getRecordIndexByCol(col); - const recordRow = this.getRecordIndexByRow(row) + this.currentPageStartIndex; + const recordCol = this.getBodyIndexByCol(col); + const recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex; let colPath; let rowPath: IPivotLayoutHeadNode[]; if (row >= 0 && recordCol >= 0) { diff --git a/packages/vtable/src/layout/pivot-layout.ts b/packages/vtable/src/layout/pivot-layout.ts index f29edb478..d8371c5c4 100644 --- a/packages/vtable/src/layout/pivot-layout.ts +++ b/packages/vtable/src/layout/pivot-layout.ts @@ -1295,7 +1295,7 @@ // * @param row // * @returns // */ -// getRecordIndexByRow(row: number): number { +// getRecordIndexByCell(row: number): number { // if (row < this.columnHeaderLevelCount) { // return -1; // } @@ -1332,7 +1332,7 @@ // */ // getCellHeaderPaths(col: number, row: number): IPivotTableCellHeaderPaths { // const recordCol = this.getRecordIndexByCol(col); -// const recordRow = this.getRecordIndexByRow(row); +// const recordRow = this.getRecordIndexByCell(row); // let colPath; // let rowPath; // let colHeaderPaths: string[]; diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index 439eda31a..4a0bb994a 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -552,7 +552,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { range1.end.row === range2.end.row ); } - getRecordIndexByRow(col: number, row: number): number { + getRecordIndexByCell(col: number, row: number): number { if (this.transpose) { if (col < this.headerLevelCount) { return -1; @@ -593,6 +593,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { columnWidthComputeMode: hd.columnWidthComputeMode // iconPositionList:[] }; + results[id] = cell; for (let r = row - 1; r >= 0; r--) { this._headerCellIds[r][col] = roots[r]; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 3835022b7..26da8c9d5 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -94,31 +94,39 @@ function createCheckbox( define: CheckboxColumnDefine, table: BaseTableAPI ) { - const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disable: boolean }; + const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disable: boolean } | boolean; const dataValue = table.getCellOriginValue(col, row); let isChecked; let isDisabled; - let text = value as string; + let text = (value as string) ?? ''; if (isObject(value)) { isChecked = value.checked; isDisabled = value.disable; text = value.text; + } else if (typeof value === 'boolean') { + isChecked = value; + text = ''; } - + isChecked = table.stateManeger.syncCheckedState(col, row, define.field as string | number, isChecked); const hierarchyOffset = getHierarchyOffset(col, row, table); const cellStyle = table._getCellStyle(col, row) as CheckboxStyleOption; // to be fixed const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; const { lineClamp } = cellStyle; const { checked, disable } = define; - const globalChecked = getOrApply(checked as any, { - col, - row, - table, - context: null, - value, - dataValue - }); + let globalChecked; + if (isChecked === undefined || isChecked === null) { + //isChecked无效值 取全局设置的值 + globalChecked = getOrApply(checked as any, { + col, + row, + table, + context: null, + value, + dataValue + }); + globalChecked = table.stateManeger.syncHeaderCheckedState(define.field as string | number, globalChecked); + } const globalDisable = getOrApply(disable as any, { col, row, diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts index dccc65398..fe80be97e 100644 --- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts +++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts @@ -334,7 +334,7 @@ function computeAutoColWidth( // if (cellHierarchyState === HierarchyState.expand || cellHierarchyState === HierarchyState.collapse) { const define = table.getBodyColumnDefine(col, row); if (define?.tree) { - const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByRow(col, row)); + const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row)); cellHierarchyIndent = Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none ? (indexArr.length - 1) * ((layoutMap as SimpleHeaderLayoutMap).hierarchyIndent ?? 0) diff --git a/packages/vtable/src/scenegraph/utils/get-hierarchy-offset.ts b/packages/vtable/src/scenegraph/utils/get-hierarchy-offset.ts index 2181fd1e3..1ed51a36b 100644 --- a/packages/vtable/src/scenegraph/utils/get-hierarchy-offset.ts +++ b/packages/vtable/src/scenegraph/utils/get-hierarchy-offset.ts @@ -18,7 +18,7 @@ export function getHierarchyOffset(col: number, row: number, table: BaseTableAPI // const cellHierarchyState = table.getHierarchyState(col, row); const define = table.getBodyColumnDefine(col, row); if (define?.tree) { - const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByRow(col, row)); + const indexArr = table.dataSource.getIndexKey(table.getRecordIndexByCell(col, row)); cellHierarchyIndent = Array.isArray(indexArr) && table.getHierarchyState(col, row) !== HierarchyState.none ? (indexArr.length - 1) * ((layoutMap as SimpleHeaderLayoutMap).hierarchyIndent ?? 0) diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 85f80b1b9..cfce5392b 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -6,6 +6,7 @@ import type { CellAddress, CellPosition, CellRange, + CheckboxColumnDefine, DropDownMenuHighlightInfo, IDimensionInfo, ListTableAPI, @@ -141,6 +142,9 @@ export class StateManeger { _clearHorizontalScrollBar: any; fastScrolling: boolean = false; + + checkedState: Record[] = []; //对应原始数据列表顺序的checked状态 + headerCheckedState: Record = {}; //对应原始数据列表顺序的checked状态 // 供滚动重置为default使用 resetInteractionState = debounce(() => { this.updateInteractionState(InteractionState.default); @@ -930,4 +934,94 @@ export class StateManeger { this.sparkLine.row = -1; } } + setCheckedState(col: number, row: number, field: string | number, checked: boolean) { + const recordIndex = this.table.getRecordIndexByCell(col, row); + if (recordIndex >= 0) { + const dataIndex = this.table.dataSource.getIndexKey(recordIndex) as number; + if (this.checkedState[dataIndex]) { + this.checkedState[dataIndex][field] = checked; + } else { + this.checkedState[dataIndex] = {}; + this.checkedState[dataIndex][field] = checked; + } + } + } + setHeaderCheckedState(field: string | number, checked: boolean) { + this.headerCheckedState[field] = checked; + this.checkedState?.forEach(recordCheckState => { + recordCheckState[field] = checked; + }); + } + syncCheckedState(col: number, row: number, field: string | number, checked: boolean): boolean { + if (this.table.isHeader(col, row)) { + if (isValid(this.headerCheckedState[field])) { + return this.headerCheckedState[field]; + } else if (isValid(checked)) { + this.headerCheckedState[field] = checked; + } else { + const isAllChecked = this.checkedState.every(item => item[field] === true); //TODO 考虑加入半选状态 + this.headerCheckedState[field] = isAllChecked; + } + return this.headerCheckedState[field]; + } + const recordIndex = this.table.getRecordIndexByCell(col, row); + if (recordIndex >= 0) { + const dataIndex = this.table.dataSource.getIndexKey(recordIndex) as number; + if (isValid(this.checkedState[dataIndex]?.[field])) { + return this.checkedState[dataIndex][field]; + } + if (this.checkedState[dataIndex]) { + this.checkedState[dataIndex][field] = checked; + } else { + this.checkedState[dataIndex] = {}; + this.checkedState[dataIndex][field] = checked; + } + } + return checked; + } + syncHeaderCheckedState(field: string | number, checked: boolean): boolean { + if (isValid(this.headerCheckedState[field])) { + return this.headerCheckedState[field]; + } else if (isValid(checked)) { + this.headerCheckedState[field] = checked; + } else { + const isAllChecked = this.checkedState.every(item => item[field] === true); //TODO 考虑加入半选状态 + this.headerCheckedState[field] = isAllChecked; + } + return this.headerCheckedState[field]; + } + initCheckedState(records: any[]) { + let isNeedInitHeaderCheckedStateFromRecord = false; + const checkboxCellTypeField: (string | number)[] = []; + this.table.internalProps.layoutMap.headerObjects.forEach((hd, index) => { + if (hd.headerType === 'checkbox') { + const headerChecked = (hd.define as CheckboxColumnDefine).checked as boolean; + this.headerCheckedState[hd.field as string | number] = headerChecked; + if (headerChecked === undefined || headerChecked === null) { + isNeedInitHeaderCheckedStateFromRecord = true; + } + if (hd.define.cellType === 'checkbox' && !hd.fieldFormat) { + checkboxCellTypeField.push(hd.field as string | number); + } + } + }); + + if (isNeedInitHeaderCheckedStateFromRecord) { + records.forEach((record: any, index: number) => { + checkboxCellTypeField.forEach(field => { + const value = record[field] as string | { text: string; checked: boolean; disable: boolean } | boolean; + let isChecked; + if (isObject(value)) { + isChecked = value.checked; + } else if (typeof value === 'boolean') { + isChecked = value; + } + if (!this.checkedState[index]) { + this.checkedState[index] = {}; + } + this.checkedState[index][field] = isChecked; + }); + }); + } + } } diff --git a/packages/vtable/src/tools/get-data-path/index.ts b/packages/vtable/src/tools/get-data-path/index.ts index fe9778028..3b9973089 100644 --- a/packages/vtable/src/tools/get-data-path/index.ts +++ b/packages/vtable/src/tools/get-data-path/index.ts @@ -37,8 +37,6 @@ export function getDataCellPath( if (layoutMap.isHeader(col, row)) { continue; } - // const colKey = dataset.colKeysPath[layoutMap.getRecordIndexByCol(col)] ?? []; - // const rowKey = dataset.rowKeysPath[layoutMap.getRecordIndexByRow(row)] ?? []; const cellDimensionPath = layoutMap.getCellHeaderPaths(col, row); const colKeys = cellDimensionPath.colHeaderPaths.map((colPath: any) => { diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index c69c17f24..bc9b9a103 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -489,8 +489,8 @@ export interface BaseTableAPI { off: (id: EventListenerId) => void; getBodyField: (col: number, row: number) => FieldDef | undefined; - getRecordByRowCol: (col: number, row: number) => MaybePromiseOrUndefined; - getRecordIndexByRow: (col: number, row: number) => number; + getRecordByCell: (col: number, row: number) => MaybePromiseOrUndefined; + getRecordIndexByCell: (col: number, row: number) => number; getRecordStartRowByRecordIndex: (index: number) => number; getHeaderField: (col: number, row: number) => any | undefined; diff --git a/packages/vtable/src/ts-types/column/type.ts b/packages/vtable/src/ts-types/column/type.ts index da5332ac5..49b91e058 100644 --- a/packages/vtable/src/ts-types/column/type.ts +++ b/packages/vtable/src/ts-types/column/type.ts @@ -1,2 +1,2 @@ export type ColumnTypeOption = 'text' | 'image' | 'video' | 'link' | 'chart' | 'sparkline' | 'progressbar' | 'checkbox'; -export type HeaderTypeOption = 'text' | 'image' | 'video' | 'link'; +export type HeaderTypeOption = 'text' | 'image' | 'video' | 'link' | 'checkbox'; diff --git a/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts b/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts index 73e5cb277..af5c9ec62 100644 --- a/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts +++ b/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts @@ -1,7 +1,13 @@ import type { CheckboxStyleOption } from '../../column'; import type { StylePropertyFunctionArg } from '../../style-define'; -import type { IBasicColumnBodyDefine } from './basic-define'; +import type { IBasicColumnBodyDefine, IBasicHeaderDefine } from './basic-define'; +export interface ICheckboxHeaderDefine extends IBasicHeaderDefine { + headerStyle?: CheckboxStyleOption | ((styleArg: StylePropertyFunctionArg) => CheckboxStyleOption); + headerType: 'checkbox'; + checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); + disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); +} export interface ICheckboxColumnBodyDefine extends IBasicColumnBodyDefine { style?: CheckboxStyleOption | ((styleArg: StylePropertyFunctionArg) => CheckboxStyleOption); cellType: 'checkbox'; diff --git a/packages/vtable/src/ts-types/list-table/define/composite-define.ts b/packages/vtable/src/ts-types/list-table/define/composite-define.ts index 9b6c6e5ba..a801ee9e9 100644 --- a/packages/vtable/src/ts-types/list-table/define/composite-define.ts +++ b/packages/vtable/src/ts-types/list-table/define/composite-define.ts @@ -45,4 +45,8 @@ export interface ICompositeColumnBodyDefine extends IBasicColumnBodyDefine { // sparkline 特有 sparklineSpec?: SparklineSpec | ((arg0: CellInfo) => SparklineSpec); + + //checkbox + checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); + disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); } diff --git a/packages/vtable/src/ts-types/list-table/define/index.ts b/packages/vtable/src/ts-types/list-table/define/index.ts index f259d6049..8ce125c0e 100644 --- a/packages/vtable/src/ts-types/list-table/define/index.ts +++ b/packages/vtable/src/ts-types/list-table/define/index.ts @@ -1,14 +1,14 @@ import type { Either } from '../../../tools/helper'; import type { ICompositeColumnBodyDefine } from './Composite-define'; import type { IChartColumnBodyDefine } from './chart-define'; -import type { ICheckboxColumnBodyDefine } from './checkbox-define'; +import type { ICheckboxColumnBodyDefine, ICheckboxHeaderDefine } from './checkbox-define'; import type { IImageColumnBodyDefine, IImageHeaderDefine } from './image-define'; import type { ILinkColumnBodyDefine, ILinkHeaderDefine } from './link-define'; import type { ITextColumnBodyDefine, ITextHeaderDefine } from './multilinetext-define'; import type { IProgressbarColumnBodyDefine } from './progressbar-define'; import type { ISparklineColumnBodyDefine } from './sparkline-define'; -export type HeaderDefine = IImageHeaderDefine | ILinkHeaderDefine | ITextHeaderDefine; +export type HeaderDefine = IImageHeaderDefine | ILinkHeaderDefine | ICheckboxHeaderDefine | ITextHeaderDefine; export type ColumnBodyDefine = | ILinkColumnBodyDefine diff --git a/packages/vtable/src/ts-types/list-table/layout-map/api.ts b/packages/vtable/src/ts-types/list-table/layout-map/api.ts index 1cce1d15e..4d356e6b7 100644 --- a/packages/vtable/src/ts-types/list-table/layout-map/api.ts +++ b/packages/vtable/src/ts-types/list-table/layout-map/api.ts @@ -56,7 +56,7 @@ export interface HeaderData extends WidthData { fieldKey?: FieldKeyDef; fieldFormat?: FieldFormat; style?: HeaderStyleOption | ColumnStyle | null | undefined; - headerType: 'text' | 'link' | 'image' | 'video'; // headerType.BaseHeader; + headerType: 'text' | 'link' | 'image' | 'video' | 'checkbox'; // headerType.BaseHeader; define: ColumnDefine; // sortIconPosition?: RectProps; // freezeIconPosition?: RectProps; @@ -234,7 +234,7 @@ interface LayoutMapAPI { // getBodyLayoutRangeById: (id: LayoutObjectId) => CellRange; getHeaderCellAdressById: (id: number) => CellAddress | undefined; getHeaderCellAddressByField: (field: string) => CellAddress | undefined; - getRecordIndexByRow: (col: number, row: number) => number; + getRecordIndexByCell: (col: number, row: number) => number; getRecordStartRowByRecordIndex: (index: number) => number; /** 从定义中获取一列配置项width的定义值 */ getColumnWidthDefined: (col: number) => WidthData; From fac3b6cdbe98cfd365306aeab251fe44fb5b7946 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 26 Oct 2023 20:01:52 +0800 Subject: [PATCH 02/11] feat: add checkbox for header --- common/config/rush/pnpm-lock.yaml | 56 ++++++-------- docs/assets/demo/menu.json | 2 +- docs/assets/demo/zh/cell-type/checkbox.md | 4 +- docs/assets/guide/en/cell_type/checkbox.md | 14 ++-- docs/assets/guide/menu.json | 2 +- docs/assets/guide/zh/cell_type/checkbox.md | 26 +++---- .../option/en/column/base-column-type.md | 2 +- .../option/en/column/checkbox-column-type.md | 6 +- .../option/zh/column/base-column-type.md | 2 +- .../option/zh/column/checkbox-column-type.md | 6 +- packages/vtable/examples/list/list.ts | 12 ++- packages/vtable/examples/pivot/pivot-tree.ts | 2 +- packages/vtable/examples/type/checkbox.ts | 12 +-- packages/vtable/package.json | 4 +- packages/vtable/src/ListTable.ts | 11 ++- packages/vtable/src/PivotChart.ts | 4 +- packages/vtable/src/PivotTable.ts | 10 ++- packages/vtable/src/data/CachedDataSource.ts | 11 ++- packages/vtable/src/data/DataSource.ts | 33 ++++++-- .../vtable/src/dataset/statistics-helper.ts | 5 +- .../vtable/src/event/listener/table-group.ts | 29 +++++-- .../group-creater/cell-type/checkbox-cell.ts | 38 +++++++--- packages/vtable/src/scenegraph/scenegraph.ts | 62 ++++++++++++++- packages/vtable/src/state/state.ts | 76 ++++++++++++++++--- packages/vtable/src/ts-types/table-engine.ts | 4 +- 25 files changed, 310 insertions(+), 123 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index d4c3ee8ef..9f53c4c32 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -80,8 +80,8 @@ importers: '@types/react-dom': ^18.0.0 '@visactor/vchart': 1.5.1 '@visactor/vdataset': ~0.15.7 - '@visactor/vrender': 0.16.2 - '@visactor/vrender-components': 0.16.2 + '@visactor/vrender': 0.16.9-alpha.1 + '@visactor/vrender-components': 0.16.9-alpha.1 '@visactor/vscale': 0.16.0 '@visactor/vutils': 0.16.1 '@visactor/vutils-extension': 1.5.1-alpha.0 @@ -121,8 +121,8 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.15.14 - '@visactor/vrender': 0.16.2 - '@visactor/vrender-components': 0.16.2 + '@visactor/vrender': 0.16.9-alpha.1 + '@visactor/vrender-components': 0.16.9-alpha.1 '@visactor/vscale': 0.16.0 '@visactor/vutils': 0.16.1 '@visactor/vutils-extension': 1.5.1-alpha.0 @@ -3059,7 +3059,7 @@ packages: '@visactor/vgrammar-util': 0.8.0 '@visactor/vgrammar-wordcloud': 0.8.0 '@visactor/vgrammar-wordcloud-shape': 0.8.0 - '@visactor/vrender-components': 0.16.8 + '@visactor/vrender-components': 0.16.9-alpha.1 '@visactor/vrender-core': 0.16.8 '@visactor/vrender-kits': 0.16.8 '@visactor/vscale': 0.16.5 @@ -3121,7 +3121,7 @@ packages: '@visactor/vdataset': 0.16.5 '@visactor/vgrammar-coordinate': 0.8.0 '@visactor/vgrammar-util': 0.8.0 - '@visactor/vrender-components': 0.16.2 + '@visactor/vrender-components': 0.16.9-alpha.1 '@visactor/vrender-core': 0.16.8 '@visactor/vrender-kits': 0.16.8 '@visactor/vscale': 0.16.5 @@ -3177,19 +3177,11 @@ packages: '@visactor/vrender-kits': 0.16.8 '@visactor/vutils': 0.16.5 - /@visactor/vrender-components/0.16.2: - resolution: {integrity: sha512-brMRZK/TDCE9GgNMxZrJYrCtK9Adnfg8gBT6mv57JFXfN3ja8cItUbU6kG1Ws62h1K2zNil/9Fv0+gXwEupvlg==} + /@visactor/vrender-components/0.16.9-alpha.1: + resolution: {integrity: sha512-TZ4bkHF2zU/11kANvvc9E29ygO577Uqk8bXyfzz1ZMCi8QaZwCozQSRpdDdzfq5eqGYGG57gIcpBVNL3zMloLA==} dependencies: - '@visactor/vrender-core': 0.16.2 - '@visactor/vrender-kits': 0.16.2 - '@visactor/vscale': 0.16.0 - '@visactor/vutils': 0.16.1 - - /@visactor/vrender-components/0.16.8: - resolution: {integrity: sha512-xt+Y1LtSLxuzZA60guf8wjKuygyjTZY2hqbg9yW0RVjMtanID/8hhI/oKhONwXL6diAfTWdop4PreJwtGas2Xg==} - dependencies: - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 + '@visactor/vrender-core': 0.16.9-alpha.1 + '@visactor/vrender-kits': 0.16.9-alpha.1 '@visactor/vscale': 0.16.0 '@visactor/vutils': 0.16.1 @@ -3200,14 +3192,14 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/0.16.2: - resolution: {integrity: sha512-UORyqO+d9hQ+nr5QQoWtEszpDShAYCnSvJXfjQrym0VBTSIgbP1b9D3oLLx+XIO6J46NOgGeK2QHKolCyethVw==} + /@visactor/vrender-core/0.16.8: + resolution: {integrity: sha512-psjkg0UFOfxSinxNfm6QiEAhKV6yrxCXhId3WTEXdh7nla62o3Pft9CMA8ooFaA9I0cNl5klkJxOqtKdAmRZPg==} dependencies: '@visactor/vutils': 0.16.1 color-convert: 2.0.1 - /@visactor/vrender-core/0.16.8: - resolution: {integrity: sha512-psjkg0UFOfxSinxNfm6QiEAhKV6yrxCXhId3WTEXdh7nla62o3Pft9CMA8ooFaA9I0cNl5klkJxOqtKdAmRZPg==} + /@visactor/vrender-core/0.16.9-alpha.1: + resolution: {integrity: sha512-tmU4rh6hnmwRHMHlA5UGh4LwJ5omhl/fBpM2Qig2Dqy1M/JaG9mhG40bcKMsdHNNHIM7+ghH6by0LF0Mj7ofpA==} dependencies: '@visactor/vutils': 0.16.1 color-convert: 2.0.1 @@ -3221,27 +3213,27 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/0.16.2: - resolution: {integrity: sha512-Ni9yYmrUmcSyZjei9XK9YK1u/kbKHM2hFakv4E3iBCwIHSinEqsbS/b8Nyx6vTdCLn36yBijpONlkAAtPXFJag==} + /@visactor/vrender-kits/0.16.8: + resolution: {integrity: sha512-SLPXt8gyp95BNLmhNvxqNXvLdnApbWJYRgKjzKaSYH+cbUQmaPVlaPSbkYiPJJvP4J3CZGW9F95TO5GBvhmZPw==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.16.2 + '@visactor/vrender-core': 0.16.8 '@visactor/vutils': 0.16.1 roughjs: 4.5.2 - /@visactor/vrender-kits/0.16.8: - resolution: {integrity: sha512-SLPXt8gyp95BNLmhNvxqNXvLdnApbWJYRgKjzKaSYH+cbUQmaPVlaPSbkYiPJJvP4J3CZGW9F95TO5GBvhmZPw==} + /@visactor/vrender-kits/0.16.9-alpha.1: + resolution: {integrity: sha512-9461E/lj7Gs4JPB8mjybRWPCYqR/0H3xYycCs+xmDmTwY3brsMWJIkhzpTlu3q2WZJPeipsHhOE2A2vFlsqENg==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.16.8 + '@visactor/vrender-core': 0.16.9-alpha.1 '@visactor/vutils': 0.16.1 roughjs: 4.5.2 - /@visactor/vrender/0.16.2: - resolution: {integrity: sha512-BHN3VczeWZSROM/wU+q7xlCqz+dfESPZGlwFD3CvpRWe05B/L2Aw1NhW0LZrEmIWhoSYQPdhDanaZhGqTSCfQw==} + /@visactor/vrender/0.16.9-alpha.1: + resolution: {integrity: sha512-KN22gBy0gKe9Is3rBSy1xjAHEW6pdAm1eaVIvcl1JsFK/qGi5GJFosw42E9w4HnF6RVoVkNTBhcnktrVEWfHUg==} dependencies: - '@visactor/vrender-core': 0.16.2 - '@visactor/vrender-kits': 0.16.2 + '@visactor/vrender-core': 0.16.9-alpha.1 + '@visactor/vrender-kits': 0.16.9-alpha.1 dev: false /@visactor/vscale/0.16.0: diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json index 1006b2dc7..2aceb988e 100644 --- a/docs/assets/demo/menu.json +++ b/docs/assets/demo/menu.json @@ -221,7 +221,7 @@ { "path": "checkbox", "title": { - "zh": "选择框类型", + "zh": "复选框类型", "en": "Checkbox Type" }, "meta": { diff --git a/docs/assets/demo/zh/cell-type/checkbox.md b/docs/assets/demo/zh/cell-type/checkbox.md index 554113ea2..c0d27acc1 100644 --- a/docs/assets/demo/zh/cell-type/checkbox.md +++ b/docs/assets/demo/zh/cell-type/checkbox.md @@ -1,7 +1,7 @@ --- category: examples group: Cell Type -title: 选择框类型 +title: 复选框类型 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png order: 2-2 link: '../guide/cell_type/checkbox' @@ -9,7 +9,7 @@ link: '../guide/cell_type/checkbox' # 数据条类型 -展示选择框类型的多种使用方式 +展示复选框类型的多种使用方式 ## 关键配置 diff --git a/docs/assets/guide/en/cell_type/checkbox.md b/docs/assets/guide/en/cell_type/checkbox.md index 01739bbbb..fd41d597c 100644 --- a/docs/assets/guide/en/cell_type/checkbox.md +++ b/docs/assets/guide/en/cell_type/checkbox.md @@ -1,11 +1,11 @@ # Checkbox Type -Selection box type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. +checkbox type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. The advantages of selecting box cells in tables are as follows: -1. The use of selection box type cells is very intuitive and flexible. Users can select one or more options to perform specific actions or filter data based on their needs. This interaction method enables users to control their operations more finely, improving user experience and efficiency. -2. Selection box type cells usually use different icons or colors to indicate selected and unselected states, providing visual feedback. This way the user can easily identify which options have been selected and which have not. +1. The use of checkbox type cells is very intuitive and flexible. Users can select one or more options to perform specific actions or filter data based on their needs. This interaction method enables users to control their operations more finely, improving user experience and efficiency. +2. Checkbox type cells usually use different icons or colors to indicate selected and unselected states, providing visual feedback. This way the user can easily identify which options have been selected and which have not. ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) @@ -14,7 +14,7 @@ The advantages of selecting box cells in tables are as follows: The specific configuration items of the checkbox in the configuration are as follows: 1. `checked`: Whether the cell is selected. The default value is false. Configuration functions are supported. Different cell configurations are different. -2. `disable`: Whether the cell selection box can disable clicks. The default value is false. It supports configuration functions and has different configurations for different cells. +2. `disable`: Whether the cell checkbox can disable clicks. The default value is false. It supports configuration functions and has different configurations for different cells. Example: ```javascript @@ -30,9 +30,9 @@ Example: The data corresponding to the checkbox supports strings or objects, in which the following attributes can be configured in the object: -* text: The text displayed in the cell selection box -* checked: Whether the cell selection box is selected -* disable: whether the cell selection box is disabled +* text: The text displayed in the cell checkbox +* checked: Whether the cell checkbox is selected +* disable: whether the cell checkbox is disabled Example: ```javasxript diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index 23ac4e9b5..34e366268 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -166,7 +166,7 @@ { "path": "checkbox", "title": { - "zh": "选择框", + "zh": "复选框", "en": "checkbox" } }, diff --git a/docs/assets/guide/zh/cell_type/checkbox.md b/docs/assets/guide/zh/cell_type/checkbox.md index a3ef6198d..7f2df4616 100644 --- a/docs/assets/guide/zh/cell_type/checkbox.md +++ b/docs/assets/guide/zh/cell_type/checkbox.md @@ -1,20 +1,20 @@ -# checkbox选择框类型 +# checkbox复选框类型 -选择框类型单元格适用于在表格中用于提供多选选项，并允许用户选择或取消选择一个或多个项目。复选框类型单元格在许多应用中被广泛使用，包括任务管理、数据筛选、权限设置等。 +复选框类型单元格适用于在表格中用于提供多选选项，并允许用户选择或取消选择一个或多个项目。复选框类型单元格在许多应用中被广泛使用，包括任务管理、数据筛选、权限设置等。 -在表格中选择框单元格的优点如下： +在表格中复选框单元格的优点如下： -1. 选择框类型单元格的使用非常直观和灵活。用户可以根据自己的需求选择一个或多个选项，以进行特定操作或过滤数据。这种交互方式使得用户能够更加精细地控制其操作，提高了用户体验和效率。 -2. 选择框类型单元格通常使用不同的图标或颜色来表示选中和未选中的状态，提供可视化的反馈。这样用户可以轻松地识别哪些选项已经被选择，哪些选项未被选择。 +1. 复选框类型单元格的使用非常直观和灵活。用户可以根据自己的需求选择一个或多个选项，以进行特定操作或过滤数据。这种交互方式使得用户能够更加精细地控制其操作，提高了用户体验和效率。 +2. 复选框类型单元格通常使用不同的图标或颜色来表示选中和未选中的状态，提供可视化的反馈。这样用户可以轻松地识别哪些选项已经被选择，哪些选项未被选择。 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) -## checkbox选择框的专属配置项介绍 +## checkbox复选框的专属配置项介绍 -checkbox 选择框类型在配置中的特有配置项如下： +checkbox 复选框类型在配置中的特有配置项如下： 1. `checked`：单元格是否处于选中状态，默认值为 false，支持配置函数，不同单元格配置不同。 -2. `disable`：单元格选择框是否可禁用点击，默认值为 false，支持配置函数，不同单元格配置不同。 +2. `disable`：单元格复选框是否可禁用点击，默认值为 false，支持配置函数，不同单元格配置不同。 示例： ```javascript @@ -26,13 +26,13 @@ checkbox 选择框类型在配置中的特有配置项如下： } ``` -## checkbox选择框的专属数据类型介绍 +## checkbox复选框的专属数据类型介绍 checkbox 对应的数据，支持字符串或对象，其中对象中支持配置以下属性： -* text: 该单元格选择框中显示的文字 -* checked: 该单元格选择框是否被选中 -* disable: 该单元格选择框是否被禁用 +* text: 该单元格复选框中显示的文字 +* checked: 该单元格复选框是否被选中 +* disable: 该单元格复选框是否被禁用 示例： ```javasxript @@ -58,4 +58,4 @@ const records = [ `checked`和`disable`同时支持在数据中和在`column`中配置，数据中配置的优先级高于`column`中的配置。 -通过以上介绍，您已学会了如何在 VTable 表格中使用 checkbox 选择框类型进行数据展示，希望对您有所帮助。 \ No newline at end of file +通过以上介绍，您已学会了如何在 VTable 表格中使用 checkbox 复选框类型进行数据展示，希望对您有所帮助。 \ No newline at end of file diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md index 35065d328..e52570a60 100644 --- a/docs/assets/option/en/column/base-column-type.md +++ b/docs/assets/option/en/column/base-column-type.md @@ -2,7 +2,7 @@ ${prefix} headerType(string) = 'text' -Specify header type, optional: `'text'|'link'|'image'|'video'`, default `'text'`. +Specify header type, optional: `'text'|'link'|'image'|'video'|'checkbox'`, default `'text'`. ${prefix} field(string) diff --git a/docs/assets/option/en/column/checkbox-column-type.md b/docs/assets/option/en/column/checkbox-column-type.md index 75d2bb750..5c3967d8c 100644 --- a/docs/assets/option/en/column/checkbox-column-type.md +++ b/docs/assets/option/en/column/checkbox-column-type.md @@ -17,10 +17,12 @@ Specify the column type as 'checkbox', cellType can be omitted and defaults to ' **Configuration item exclusive to checkbox type** -Whether the checkbook is in checked status +Whether the checkbox is in the checked state, setting here means specifying the checkbox state of the entire column. If there is a corresponding state in the record data entry, the state in the data will be used first. + +If headerType is set to `checkbox`, the status of the header checkbox will depend on this setting. If this setting is empty, it will depend on the checked status of each piece of data. ##${prefix} disable(boolean|Function) = false **Configuration item exclusive to checkbox type** -Whether the checkbook is in a disabled interactive state +Whether the checkbox is in a disabled interactive state diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md index def0fef6c..e587ce9b7 100644 --- a/docs/assets/option/zh/column/base-column-type.md +++ b/docs/assets/option/zh/column/base-column-type.md @@ -2,7 +2,7 @@ ${prefix} headerType(string) = 'text' -指定表头类型，可选：`'text'|'link'|'image'|'video'`，默认 `'text'`。 +指定表头类型，可选：`'text'|'link'|'image'|'video'|'checkbox'`，默认 `'text'`。 ${prefix} field(string) diff --git a/docs/assets/option/zh/column/checkbox-column-type.md b/docs/assets/option/zh/column/checkbox-column-type.md index e5a5f27bd..59c2f5967 100644 --- a/docs/assets/option/zh/column/checkbox-column-type.md +++ b/docs/assets/option/zh/column/checkbox-column-type.md @@ -17,10 +17,12 @@ **checkbox 类型专属配置项** -checkbook是否处于checked状态 +checkbox是否处于checked状态，在这里设置即指定整列的复选框状态，record数据条目中如果有对应的状态，则优先采用数据中状态 + +如果设置了headerType为`checkbox`，表头复选框的状态会取决于该设置，如果该设置为空，取决于每条数据的checked状态。 ##${prefix} disable(boolean|Function) = false **checkbox 类型专属配置项** -checkbook是否处于禁止交互状态 +checkbox是否处于禁止交互状态 diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts index 8ff4d3a9b..a91b4fda4 100644 --- a/packages/vtable/examples/list/list.ts +++ b/packages/vtable/examples/list/list.ts @@ -18,9 +18,17 @@ const generatePersons = count => { export function createTable() { const records = generatePersons(100); const columns: VTable.ColumnsDefine = [ + { + field: '', + title: '行号', + width: 80, + fieldFormat(data, col, row, table) { + return row - 1; + } + }, { field: 'id', - title: 'ID ff', + title: 'ID', width: '1%', minWidth: 200, sort: true @@ -79,7 +87,7 @@ export function createTable() { tooltip: { isShowOverflowTextTooltip: true }, - frozenColCount: 2, + frozenColCount: 1, // autoWrapText: true, // heightMode: 'autoHeight', widthMode: 'adaptive' diff --git a/packages/vtable/examples/pivot/pivot-tree.ts b/packages/vtable/examples/pivot/pivot-tree.ts index a84a2eed0..0a6054841 100644 --- a/packages/vtable/examples/pivot/pivot-tree.ts +++ b/packages/vtable/examples/pivot/pivot-tree.ts @@ -355,7 +355,7 @@ export function createTable() { indicatorKey: '220524114340013', title: '销售额', width: 'auto', - format(record) { + format(record, col, row, table) { // if (rec.rowDimensions[0].value === '东北') return `${rec.dataValue}%`; if (!record?.['220524114340013']) { return '--'; diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index c6f71d132..d17798019 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -10,7 +10,8 @@ export function createTable() { { field: 'percent', title: 'percent', - width: 120 + width: 120, + sort: true }, { field: 'percent', @@ -26,11 +27,12 @@ export function createTable() { width: 120, headerType: 'checkbox', cellType: 'checkbox' - // disable: true + // checked: false } ], showFrozenIcon: true, //显示VTable内置冻结列图标 widthMode: 'standard' + // transpose: true }; const instance = new ListTable(option); @@ -39,14 +41,14 @@ export function createTable() { const data = [ { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, - { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, - { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, + { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, + { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, { percent: '0%', value: -10, check: true }, { percent: '0%', value: -10 } ]; - for (let i = 0; i < 200; i++) { + for (let i = 0; i < 2; i++) { records = records.concat(data); } //设置表格数据 diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 42985bbac..00c69e051 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -49,8 +49,8 @@ "test-nodejs": "ts-node --transpileOnly --skipProject ./nodejs/index.ts" }, "dependencies": { - "@visactor/vrender": "0.16.2", - "@visactor/vrender-components": "0.16.2", + "@visactor/vrender": "0.16.9-alpha.1", + "@visactor/vrender-components": "0.16.9-alpha.1", "@visactor/vutils-extension": "1.5.1-alpha.0", "@visactor/vutils": "0.16.1", "@visactor/vscale": "0.16.0", diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index cf88bd341..02d397e3e 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -369,7 +369,7 @@ export class ListTable extends BaseTable implements ListTableAPI { return null; } const index = table.getRecordIndexByCell(col, row); - return table.internalProps.dataSource.getField(index, field); + return table.internalProps.dataSource.getField(index, field, col, row, this); } /** * 拖拽移动表头位置 @@ -638,4 +638,13 @@ export class ListTable extends BaseTable implements ListTableAPI { } this.stateManeger.updateSortState(sortState as SortState); } + /** 获取某个字段下checkbox 全部数据的选中状态 顺序对应原始传入数据records 不是对应表格展示row的状态值 */ + getCheckboxState(field: string | number) { + if (isValid(field)) { + return this.stateManeger.checkedState.map(state => { + return state[field]; + }); + } + return this.stateManeger.checkedState; + } } diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 22e2276a4..caace799d 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -354,11 +354,11 @@ export class PivotChart extends BaseTable implements PivotChartAPI { } const rowIndex = this.getBodyIndexByRow(row); const colIndex = this.getBodyIndexByCol(col); - const dataValue = table.dataSource?.getField(rowIndex, colIndex); + const dataValue = table.dataSource?.getField(rowIndex, colIndex, col, row, this); if (typeof field !== 'string') { //field为函数format const cellHeaderPaths = table.internalProps.layoutMap.getCellHeaderPaths(col, row); - return getField({ dataValue, ...cellHeaderPaths }, field, emptyFn as any); + return getField({ dataValue, ...cellHeaderPaths }, field, col, row, this, emptyFn as any); } return dataValue; } diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index c7c6906f8..2ba6f962c 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -426,11 +426,11 @@ export class PivotTable extends BaseTable implements PivotTableAPI { } const rowIndex = this.getBodyIndexByRow(row); const colIndex = this.getBodyIndexByCol(col); - const dataValue = table.dataSource?.getField(rowIndex, colIndex); + const dataValue = table.dataSource?.getField(rowIndex, colIndex, col, row, this); if (typeof field !== 'string') { //field为函数format const cellHeaderPaths = table.internalProps.layoutMap.getCellHeaderPaths(col, row); - return getField({ dataValue, ...cellHeaderPaths }, field, emptyFn as any); + return getField({ dataValue, ...cellHeaderPaths }, field, col, row, this, emptyFn as any); } return dataValue; } @@ -453,7 +453,7 @@ export class PivotTable extends BaseTable implements PivotTableAPI { this.internalProps.layoutMap.indicatorsAsCol ? colKeys.slice(0, -1) : colKeys, (this.internalProps.layoutMap as PivotHeaderLayoutMap).getIndicatorKey(col, row) ); - return aggregator.formatValue ? aggregator.formatValue() : ''; + return aggregator.formatValue ? aggregator.formatValue(col, row, this) : ''; } else if (this.flatDataToObjects) { //数据为行列树结构 根据row col获取对应的维度名称 查找到对应值 const cellDimensionPath = this.internalProps.layoutMap.getCellHeaderPaths(col, row); @@ -469,7 +469,9 @@ export class PivotTable extends BaseTable implements PivotTableAPI { this.internalProps.layoutMap.getBody(col, row).indicatorKey ); const { fieldFormat } = this.internalProps.layoutMap.getBody(col, row); - return typeof fieldFormat === 'function' ? fieldFormat(valueNode?.record) : valueNode?.value ?? ''; + return typeof fieldFormat === 'function' + ? fieldFormat(valueNode?.record, col, row, this) + : valueNode?.value ?? ''; } const { field, fieldFormat } = this.internalProps.layoutMap.getBody(col, row); return this.getFieldData(fieldFormat || field, col, row); diff --git a/packages/vtable/src/data/CachedDataSource.ts b/packages/vtable/src/data/CachedDataSource.ts index 3becaf3c6..1fa6e60af 100644 --- a/packages/vtable/src/data/CachedDataSource.ts +++ b/packages/vtable/src/data/CachedDataSource.ts @@ -1,5 +1,6 @@ import { getValueFromDeepArray } from '../tools/util'; import type { FieldData, FieldDef, IPagination, MaybePromise, MaybePromiseOrUndefined } from '../ts-types'; +import type { BaseTableAPI } from '../ts-types/base-table'; import type { DataSourceParam } from './DataSource'; import { DataSource } from './DataSource'; @@ -59,7 +60,13 @@ export class CachedDataSource extends DataSource { } return super.getOriginalRecord(index); } - protected getOriginalField(index: number, field: F): FieldData { + protected getOriginalField( + index: number, + field: F, + col?: number, + row?: number, + table?: BaseTableAPI + ): FieldData { const rowCache = this._fieldCache && this._fieldCache[index]; if (rowCache) { const cache = rowCache.get(field); @@ -67,7 +74,7 @@ export class CachedDataSource extends DataSource { return cache; } } - return super.getOriginalField(index, field); + return super.getOriginalField(index, field, col, row, table); } clearCache(): void { diff --git a/packages/vtable/src/data/DataSource.ts b/packages/vtable/src/data/DataSource.ts index 483e8f030..b43f09e8f 100644 --- a/packages/vtable/src/data/DataSource.ts +++ b/packages/vtable/src/data/DataSource.ts @@ -67,13 +67,16 @@ function getValue(value: MaybePromiseOrCallOrUndefined, promiseCallBack: Promise export function getField( record: MaybePromiseOrUndefined, field: FieldDef | FieldFormat | number, + col: number, + row: number, + table: BaseTableAPI, promiseCallBack: PromiseBack ): FieldData { if (record === null) { return undefined; } if (isPromise(record)) { - return record.then((r: any) => getField(r, field, promiseCallBack)); + return record.then((r: any) => getField(r, field, col, row, table, promiseCallBack)); } const fieldGet: any = isFieldAssessor(field) ? field.get : field; if (fieldGet in (record as any)) { @@ -82,7 +85,7 @@ export function getField( return getValue(fieldResult, promiseCallBack); } if (typeof fieldGet === 'function') { - const fieldResult = fieldGet(record); + const fieldResult = fieldGet(record, col, row, table); return getValue(fieldResult, promiseCallBack); } if (Array.isArray(fieldGet)) { @@ -94,7 +97,11 @@ export function getField( const fieldResult = (record as any)[fieldGet]; return getValue(fieldResult, promiseCallBack); } - const fieldResult = applyChainSafe(record, (val, name) => getField(val, name, emptyFn as any), ...fieldArray); + const fieldResult = applyChainSafe( + record, + (val, name) => getField(val, name, col, row, table, emptyFn as any), + ...fieldArray + ); return getValue(fieldResult, promiseCallBack); } @@ -285,8 +292,14 @@ export class DataSource extends EventTarget implements DataSourceAPI { getIndexKey(index: number): number | number[] { return _getIndex(this.currentPagerIndexedData, index); } - getField(index: number, field: FieldDef | FieldFormat | number): FieldData { - return this.getOriginalField(_getIndex(this.currentPagerIndexedData, index), field); + getField( + index: number, + field: FieldDef | FieldFormat | number, + col: number, + row: number, + table: BaseTableAPI + ): FieldData { + return this.getOriginalField(_getIndex(this.currentPagerIndexedData, index), field, col, row, table); } hasField(index: number, field: FieldDef): boolean { @@ -561,13 +574,19 @@ export class DataSource extends EventTarget implements DataSourceAPI { this.recordPromiseCallBack(index, val); }); } - protected getOriginalField(index: number | number[], field: FieldDef | FieldFormat | number): FieldData { + protected getOriginalField( + index: number | number[], + field: FieldDef | FieldFormat | number, + col?: number, + row?: number, + table?: BaseTableAPI + ): FieldData { if (field === null) { return undefined; } const record = this.getOriginalRecord(index); // return getField(record, field); - return getField(record, field, (val: any) => { + return getField(record, field, col, row, table, (val: any) => { this.fieldPromiseCallBack(index, field, val); }); } diff --git a/packages/vtable/src/dataset/statistics-helper.ts b/packages/vtable/src/dataset/statistics-helper.ts index 9ef1cb41d..ef3801de0 100644 --- a/packages/vtable/src/dataset/statistics-helper.ts +++ b/packages/vtable/src/dataset/statistics-helper.ts @@ -1,5 +1,6 @@ import type { SortOrder } from '../ts-types'; import { AggregationType } from '../ts-types'; +import type { BaseTableAPI } from '../ts-types/base-table'; export abstract class Aggregator { className = 'Aggregator'; @@ -29,10 +30,10 @@ export abstract class Aggregator { // } abstract push(record: any): void; abstract value(): any; - formatValue() { + formatValue(col?: number, row?: number, table?: BaseTableAPI) { if (!this._formatedValue) { if (this.formatFun) { - this._formatedValue = this.formatFun(this.value()); + this._formatedValue = this.formatFun(this.value(), col, row, table); } else { this._formatedValue = this.value(); } diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 8490f9098..cd98570bf 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -585,18 +585,33 @@ export function bindTableGroupListener(eventManeger: EventManeger) { target: eventArgsSet?.eventArgs?.target, checked: (e.detail as unknown as { checked: boolean }).checked }; - table.stateManeger.setCheckedState( - col, - row, - cellInfo.field as string | number, - (e.detail as unknown as { checked: boolean }).checked - ); + if (table.isHeader(col, row)) { + //点击的表头部分的checkbox 需要同时处理表头和body单元格的状态 table.stateManeger.setHeaderCheckedState( cellInfo.field as string | number, (e.detail as unknown as { checked: boolean }).checked ); - // table.scenegraph.updateCheckboxCellState(); + const define = table.getBodyColumnDefine(col, row); + if (define.cellType === 'checkbox') { + table.scenegraph.updateCheckboxCellState(col, row, (e.detail as unknown as { checked: boolean }).checked); + } + } else { + //点击的是body单元格的checkbox 处理本单元格的状态维护 同时需要检查表头是否改变状态 + table.stateManeger.setCheckedState( + col, + row, + cellInfo.field as string | number, + (e.detail as unknown as { checked: boolean }).checked + ); + const define = table.getBodyColumnDefine(col, row); + if (define.headerType === 'checkbox') { + const oldHeaderCheckedState = table.stateManeger.headerCheckedState[cellInfo.field as string | number]; + const newHeaderCheckedState = table.stateManeger.updateHeaderCheckedState(cellInfo.field as string | number); + if (oldHeaderCheckedState !== newHeaderCheckedState) { + table.scenegraph.updateHeaderCheckboxCellState(col, row, newHeaderCheckedState); + } + } } table.fireListeners(TABLE_EVENT_TYPE.CHECKBOX_STATE_CHANGE, cellsEvent); }); diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 26da8c9d5..420b859c6 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -113,11 +113,9 @@ function createCheckbox( const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; const { lineClamp } = cellStyle; const { checked, disable } = define; - - let globalChecked; if (isChecked === undefined || isChecked === null) { //isChecked无效值 取全局设置的值 - globalChecked = getOrApply(checked as any, { + const globalChecked = getOrApply(checked as any, { col, row, table, @@ -125,7 +123,11 @@ function createCheckbox( value, dataValue }); - globalChecked = table.stateManeger.syncHeaderCheckedState(define.field as string | number, globalChecked); + if (table.isHeader(col, row)) { + isChecked = table.stateManeger.syncHeaderCheckedState(define.field as string | number, globalChecked); + } else { + isChecked = globalChecked ?? false; + } } const globalDisable = getOrApply(disable as any, { col, @@ -154,14 +156,26 @@ function createCheckbox( dx: hierarchyOffset }; const testAttribute = cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute; - - const checkbox = new CheckBox({ - x: 0, - y: 0, - text: testAttribute, - checked: isChecked ?? globalChecked ?? false, - disabled: isDisabled ?? globalDisable ?? false - }); + let checkbox; + if (isChecked === 'indeterminate') { + checkbox = new CheckBox({ + x: 0, + y: 0, + text: testAttribute, + checked: undefined, + indeterminate: true, + disabled: isDisabled ?? globalDisable ?? false + }); + } else { + checkbox = new CheckBox({ + x: 0, + y: 0, + text: testAttribute, + checked: isChecked, + indeterminate: undefined, + disabled: isDisabled ?? globalDisable ?? false + }); + } checkbox.name = 'checkbox'; return checkbox; diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 1e67131e3..3c131304f 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1,4 +1,4 @@ -import type { IStage, IRect, ITextCache } from '@visactor/vrender'; +import type { IStage, IRect, ITextCache, INode } from '@visactor/vrender'; import { createStage, createRect, IContainPointMode, container, vglobal } from '@visactor/vrender'; import { type CellAddress, @@ -40,6 +40,7 @@ import { dealBottomFrozen, dealFrozen, dealRightFrozen, resetFrozen } from './la import { updateChartSize, updateChartState } from './refresh-node/update-chart'; import { initSceneGraph } from './group-creater/init-scenegraph'; import { updateContainerChildrenX } from './utils/update-container'; +import type { CheckBox } from '@visactor/vrender-components'; import { loadPoptip, setPoptipTheme } from '@visactor/vrender-components'; import textMeasureModule from './utils/text-measure'; import renderServiceModule from './utils/render-service'; @@ -771,6 +772,65 @@ export class Scenegraph { updateChartState(datum: any) { this.table.isPivotChart() && updateChartState(this, datum); } + + updateCheckboxCellState(col: number, row: number, checked: boolean) { + if (this.transpose) { + this.bodyGroup.children?.forEach((columnGroup: INode) => { + columnGroup + .getChildAt(row) + .getChildren() + .forEach((node: INode) => { + if (node.name === 'checkbox') { + (node as CheckBox).setAttribute('checked', checked); + } + }); + }); + } else { + const columnGroup = this.getColGroup(col); + columnGroup.children?.forEach((cellNode: INode) => { + cellNode.getChildren().find(node => { + if (node.name === 'checkbox') { + (node as CheckBox).setAttribute('checked', checked); + } + }); + }); + } + } + updateHeaderCheckboxCellState(col: number, row: number, checked: boolean | 'indeterminate') { + if (this.transpose) { + this.rowHeaderGroup.children?.forEach((columnGroup: INode) => { + columnGroup + .getChildAt(row) + .getChildren() + .forEach((node: INode) => { + if (node.name === 'checkbox') { + if (checked === 'indeterminate') { + (node as CheckBox).setAttribute('indeterminate', true); + (node as CheckBox).setAttribute('checked', undefined); + } else { + (node as CheckBox).setAttribute('indeterminate', undefined); + (node as CheckBox).setAttribute('checked', checked); + } + } + }); + }); + } else { + const columnGroup = this.getColGroup(col, true); + columnGroup.children?.forEach((cellNode: INode) => { + cellNode.getChildren().find(node => { + if (node.name === 'checkbox') { + if (checked === 'indeterminate') { + (node as CheckBox).setAttribute('indeterminate', true); + (node as CheckBox).setAttribute('checked', undefined); + } else { + (node as CheckBox).setAttribute('indeterminate', undefined); + (node as CheckBox).setAttribute('checked', checked); + } + } + }); + }); + } + } updateAutoColWidth(col: number) { this.table.internalProps._widthResizedColMap.delete(col); const oldWidth = this.table.getColWidth(col); diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index cfce5392b..3ff27ad86 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -143,8 +143,14 @@ export class StateManeger { fastScrolling: boolean = false; - checkedState: Record[] = []; //对应原始数据列表顺序的checked状态 - headerCheckedState: Record = {}; //对应原始数据列表顺序的checked状态 + /** + * 对应原始数据列表顺序的checked状态 + */ + checkedState: Record[] = []; + /** + * 对应表头checked状态 + */ + headerCheckedState: Record = {}; // 供滚动重置为default使用 resetInteractionState = debounce(() => { this.updateInteractionState(InteractionState.default); @@ -952,15 +958,26 @@ export class StateManeger { recordCheckState[field] = checked; }); } - syncCheckedState(col: number, row: number, field: string | number, checked: boolean): boolean { + + //#region CheckedState 状态维护 + + /** + * 创建cell节点时同步状态 如果状态缓存有则用 如果没有则设置缓存 + * @param col + * @param row + * @param field + * @param checked + * @returns + */ + syncCheckedState(col: number, row: number, field: string | number, checked: boolean): boolean | 'indeterminate' { if (this.table.isHeader(col, row)) { if (isValid(this.headerCheckedState[field])) { return this.headerCheckedState[field]; } else if (isValid(checked)) { this.headerCheckedState[field] = checked; - } else { - const isAllChecked = this.checkedState.every(item => item[field] === true); //TODO 考虑加入半选状态 - this.headerCheckedState[field] = isAllChecked; + } else if (this.checkedState?.length > 0) { + const isAllChecked = this.updateHeaderCheckedState(field); + return isAllChecked; } return this.headerCheckedState[field]; } @@ -979,17 +996,29 @@ export class StateManeger { } return checked; } - syncHeaderCheckedState(field: string | number, checked: boolean): boolean { + /** + * 创建表头cell节点时同步状态 如果状态缓存有则用 如果没有则设置缓存 + * @param col + * @param row + * @param field + * @param checked + * @returns + */ + syncHeaderCheckedState(field: string | number, checked: boolean): boolean | 'indeterminate' { if (isValid(this.headerCheckedState[field])) { return this.headerCheckedState[field]; } else if (isValid(checked)) { this.headerCheckedState[field] = checked; - } else { - const isAllChecked = this.checkedState.every(item => item[field] === true); //TODO 考虑加入半选状态 - this.headerCheckedState[field] = isAllChecked; + } else if (this.checkedState?.length > 0) { + const isAllChecked = this.updateHeaderCheckedState(field); + return isAllChecked; } return this.headerCheckedState[field]; } + /** + * 初始化check状态 + * @param records + */ initCheckedState(records: any[]) { let isNeedInitHeaderCheckedStateFromRecord = false; const checkboxCellTypeField: (string | number)[] = []; @@ -998,6 +1027,7 @@ export class StateManeger { const headerChecked = (hd.define as CheckboxColumnDefine).checked as boolean; this.headerCheckedState[hd.field as string | number] = headerChecked; if (headerChecked === undefined || headerChecked === null) { + // 如果没有明确指定check的状态 则需要在下面遍历所有数据获取到节点状态 确定这个header的check状态 isNeedInitHeaderCheckedStateFromRecord = true; } if (hd.define.cellType === 'checkbox' && !hd.fieldFormat) { @@ -1005,7 +1035,7 @@ export class StateManeger { } } }); - + //如果没有明确指定check的状态 遍历所有数据获取到节点状态 确定这个header的check状态 if (isNeedInitHeaderCheckedStateFromRecord) { records.forEach((record: any, index: number) => { checkboxCellTypeField.forEach(field => { @@ -1024,4 +1054,28 @@ export class StateManeger { }); } } + /** + * 更新header单元checked的状态，依据当前列每一个数据checked的状态。 + * @param field + * @returns + */ + updateHeaderCheckedState(field: string | number): boolean | 'indeterminate' { + const allChecked = this.checkedState.every((state: Record) => { + return state[field] === true; + }); + if (allChecked) { + this.headerCheckedState[field] = true; + return allChecked; + } + const allUnChecked = this.checkedState.every((state: Record) => { + return state[field] === false; + }); + if (allUnChecked) { + this.headerCheckedState[field] = false; + return false; + } + this.headerCheckedState[field] = 'indeterminate'; + return 'indeterminate'; //半选状态 + } + //#endregion } diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index d3fdde9d8..37c9c7be8 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -22,7 +22,7 @@ export interface CellRange { end: CellAddress; } -export type FieldGetter = (record: any) => any; +export type FieldGetter = (record: any, col?: number, row?: number, table?: BaseTableAPI) => any; export type FieldSetter = (record: any, value: any) => void; export interface FieldAssessor { get: FieldGetter; @@ -54,7 +54,7 @@ export interface DataSourceAPI { clearCurrentIndexedData: () => void; length: number; get: (index: number) => MaybePromiseOrUndefined; - getField: (index: number, field: F) => FieldData; + getField: (index: number, field: F, col: number, row: number, table: BaseTableAPI) => FieldData; hasField: (index: number, field: FieldDef) => boolean; sort: (field: FieldDef, order: SortOrder, orderFn: (v1: any, v2: any, order: SortOrder) => -1 | 0 | 1) => void; clearSortedMap: () => void; From 02d0c6b4f740d3bc18e8e3f65af84a3290db35b3 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 11:43:16 +0800 Subject: [PATCH 03/11] feat: add function getCheckboxState --- packages/vtable/examples/type/checkbox.ts | 13 ++++++-- packages/vtable/src/ListTable.ts | 3 ++ packages/vtable/src/state/state.ts | 40 ++++++++++++++++++++--- 3 files changed, 48 insertions(+), 8 deletions(-) diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index d17798019..66225f812 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -7,6 +7,13 @@ export function createTable() { const option: VTable.ListTableConstructorOptions = { container: document.getElementById(CONTAINER_ID), columns: [ + { + field: '', + headerType: 'checkbox', + cellType: 'checkbox', + width: 60 + // checked: false + }, { field: 'percent', title: 'percent', @@ -26,8 +33,8 @@ export function createTable() { title: '', width: 120, headerType: 'checkbox', - cellType: 'checkbox' - // checked: false + cellType: 'checkbox', + checked: false } ], showFrozenIcon: true, //显示VTable内置冻结列图标 @@ -48,7 +55,7 @@ export function createTable() { { percent: '0%', value: -10, check: true }, { percent: '0%', value: -10 } ]; - for (let i = 0; i < 2; i++) { + for (let i = 0; i < 1; i++) { records = records.concat(data); } //设置表格数据 diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 02d397e3e..e9d61c02b 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -640,6 +640,9 @@ export class ListTable extends BaseTable implements ListTableAPI { } /** 获取某个字段下checkbox 全部数据的选中状态 顺序对应原始传入数据records 不是对应表格展示row的状态值 */ getCheckboxState(field: string | number) { + if (this.stateManeger.checkedState.length < this.rowCount - this.columnHeaderLevelCount) { + this.stateManeger.initLeftRecordsCheckState(this.records); + } if (isValid(field)) { return this.stateManeger.checkedState.map(state => { return state[field]; diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 3ff27ad86..14cf639bf 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -151,6 +151,8 @@ export class StateManeger { * 对应表头checked状态 */ headerCheckedState: Record = {}; + + checkboxCellTypeFields: (string | number)[] = []; // 供滚动重置为default使用 resetInteractionState = debounce(() => { this.updateInteractionState(InteractionState.default); @@ -1021,7 +1023,7 @@ export class StateManeger { */ initCheckedState(records: any[]) { let isNeedInitHeaderCheckedStateFromRecord = false; - const checkboxCellTypeField: (string | number)[] = []; + this.checkboxCellTypeFields = []; this.table.internalProps.layoutMap.headerObjects.forEach((hd, index) => { if (hd.headerType === 'checkbox') { const headerChecked = (hd.define as CheckboxColumnDefine).checked as boolean; @@ -1031,14 +1033,14 @@ export class StateManeger { isNeedInitHeaderCheckedStateFromRecord = true; } if (hd.define.cellType === 'checkbox' && !hd.fieldFormat) { - checkboxCellTypeField.push(hd.field as string | number); + this.checkboxCellTypeFields.push(hd.field as string | number); } } }); //如果没有明确指定check的状态 遍历所有数据获取到节点状态 确定这个header的check状态 if (isNeedInitHeaderCheckedStateFromRecord) { records.forEach((record: any, index: number) => { - checkboxCellTypeField.forEach(field => { + this.checkboxCellTypeFields.forEach(field => { const value = record[field] as string | { text: string; checked: boolean; disable: boolean } | boolean; let isChecked; if (isObject(value)) { @@ -1074,8 +1076,36 @@ export class StateManeger { this.headerCheckedState[field] = false; return false; } - this.headerCheckedState[field] = 'indeterminate'; - return 'indeterminate'; //半选状态 + const hasChecked = this.checkedState.find((state: Record) => { + return state[field] === true; + }); + if (hasChecked) { + this.headerCheckedState[field] = 'indeterminate'; + return 'indeterminate'; //半选状态 + } + return false; + } + /** + * setRecords的时候虽然调用了initCheckedState 进行了初始化 但当每个表头的checked状态都用配置了的话 初始化不会遍历全部数据 + * @param records + */ + initLeftRecordsCheckState(records: any[]) { + for (let index = this.checkedState.length; index < records.length; index++) { + const record = records[index]; + this.checkboxCellTypeFields.forEach(field => { + const value = record[field] as string | { text: string; checked: boolean; disable: boolean } | boolean; + let isChecked; + if (isObject(value)) { + isChecked = value.checked; + } else if (typeof value === 'boolean') { + isChecked = value; + } + if (!this.checkedState[index]) { + this.checkedState[index] = {}; + } + this.checkedState[index][field] = isChecked; + }); + } } //#endregion } From c376e972f6d37f34bc53e3b9e13c9284ea81f5ca Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 12:19:35 +0800 Subject: [PATCH 04/11] test: add unittest for checkbox --- .../columns/listTable-checkbox.test.ts | 131 ++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 packages/vtable/__tests__/columns/listTable-checkbox.test.ts diff --git a/packages/vtable/__tests__/columns/listTable-checkbox.test.ts b/packages/vtable/__tests__/columns/listTable-checkbox.test.ts new file mode 100644 index 000000000..6210b59d3 --- /dev/null +++ b/packages/vtable/__tests__/columns/listTable-checkbox.test.ts @@ -0,0 +1,131 @@ +// @ts-nocheck +// 有问题可对照demo unitTestListTable +import { ListTable } from '../../src/ListTable'; +import { createDiv } from '../dom'; +global.__VERSION__ = 'none'; +describe('listTable-checkbox init test', () => { + const containerDom: HTMLElement = createDiv(); + containerDom.style.position = 'relative'; + containerDom.style.width = '1000px'; + containerDom.style.height = '800px'; + + let records = []; + const personsDataSource = [ + { + progress: 100, + id: 1, + name: 'a', + check: { text: 'unchecked', checked: false, disable: false } + }, + { + progress: 80, + id: 2, + name: 'b', + check: { text: 'unchecked', checked: false, disable: true } + }, + { + progress: 1, + id: 3, + name: 'c', + check: { text: 'checked', checked: true, disable: false } + }, + { + progress: 55, + id: 4, + name: 'd', + check: { text: 'checked', checked: true, disable: true } + }, + { + progress: 28, + id: 5, + name: 'e', + check: { text: 'unknown', disable: false } + } + ]; + for (let i = 0; i < 400; i++) { + records = records.concat(personsDataSource); + } + const option = { + columns: [ + { + field: '', + headerType: 'checkbox', + cellType: 'checkbox', + width: 60, + checked: false + }, + { + field: 'check', + headerType: 'checkbox', + cellType: 'checkbox', + width: 130, + checked: true + }, + { + field: 'progress', + fieldFormat(rec) { + return `已完成${rec.progress}%`; + }, + caption: 'progress ', + description: '这是一个标题的详细描述', + width: 150, + headerType: 'checkbox', + cellType: 'checkbox', + checked: true + }, + { + field: 'id', + caption: 'ID', + sort: (v1, v2, order) => { + if (order === 'desc') { + return v1 === v2 ? 0 : v1 > v2 ? -1 : 1; + } + return v1 === v2 ? 0 : v1 > v2 ? 1 : -1; + }, + width: 100, + headerType: 'checkbox', + cellType: 'checkbox', + checked: true, + disable: true + }, + { + field: 'id', + fieldFormat(rec) { + return `这是第${rec.id}号`; + }, + caption: 'ID说明', + description: '这是一个ID详细描述', + sort: (v1, v2, order) => { + if (order === 'desc') { + return v1 === v2 ? 0 : v1 > v2 ? -1 : 1; + } + return v1 === v2 ? 0 : v1 > v2 ? 1 : -1; + }, + width: 150 + }, + { + caption: 'Name', + headerStyle: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 13, + fontFamily: 'sans-serif' + }, + field: 'name', + width: 150 + } + ], + showPin: false, //显示xTable内置冻结列图标 + widthMode: 'standard', + frozenColCount: 2, + allowFrozenColCount: 2, + records + }; + + const listTable = new ListTable(containerDom, option); + test('listTable-checkbox getCheckboxState', () => { + expect(listTable.stateManeger?.checkedState.length).toEqual(101); + expect(listTable.getCheckboxState().length).toEqual(2000); + }); + listTable.release(); +}); From 255b5a46b8199ad21e2f5a9e5317aaa728a6340d Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 16:38:10 +0800 Subject: [PATCH 05/11] fix: checkbox is function --- docs/assets/api/en/methods.md | 67 +++++++++++++ docs/assets/api/zh/methods.md | 38 ++++++++ docs/assets/demo/en/cell-type/checkbox.md | 33 ++++--- docs/assets/demo/zh/cell-type/checkbox.md | 33 ++++--- docs/assets/guide/en/cell_type/checkbox.md | 96 ++++++++++++++----- docs/assets/guide/zh/cell_type/checkbox.md | 58 ++++++++++- packages/vtable/examples/type/checkbox.ts | 16 +++- packages/vtable/src/ListTable.ts | 27 ++++++ packages/vtable/src/PivotChart.ts | 10 ++ packages/vtable/src/PivotTable.ts | 9 ++ packages/vtable/src/core/BaseTable.ts | 4 + packages/vtable/src/data/DataSource.ts | 3 + .../group-creater/cell-type/checkbox-cell.ts | 8 +- packages/vtable/src/state/state.ts | 65 +++++++++---- packages/vtable/src/ts-types/base-table.ts | 23 +++++ 15 files changed, 409 insertions(+), 81 deletions(-) diff --git a/docs/assets/api/en/methods.md b/docs/assets/api/en/methods.md index d8334a398..76a99d6ea 100644 --- a/docs/assets/api/en/methods.md +++ b/docs/assets/api/en/methods.md @@ -153,6 +153,68 @@ Getting the style of a cell */ getCellStyle(col: number, row: number) => CellStyle ``` +## getRecordByCell(Function) + +Get the data item of this cell + +``` + /** + * Get the entire data record based on the row and column number + * @param {number} col col index. + * @param {number} row row index. + * @return {object} record. + */ + getRecordByCell(col: number, row: number) +``` +## getTableIndexByRecordIndex(Function) +Get the index row number or column number displayed in the table based on the index of the data source (related to transposition). Note: ListTable specific interface + +``` + /** + * Get the index row number or column number displayed in the table based on the index of the data source (related to transposition). Note: ListTable specific interface + * @param recordIndex + */ + getTableIndexByRecordIndex: (recordIndex: number) => number; +``` + +## getTableIndexByField(Function) +Get the index row number or column number displayed in the table according to the field of the data source (related to transposition). Note: ListTable specific interface +``` + /** + * Get the index row number or column number displayed in the table according to the field of the data source (related to transposition). Note: ListTable specific interface + * @param recordIndex + */ + getTableIndexByField: (field: FieldDef) => number; +``` +## getCellAddrByFieldRecord(Function) + +Get the cell row and column number based on the index and field in the data source. Note: ListTable specific interface +``` + /** + * Get the cell row and column number based on the index and field in the data source. Note: ListTable specific interface + * @param field + * @param recordIndex + * @returns + */ + getCellAddrByFieldRecord: (field: FieldDef, recordIndex: number) => CellAddress; +``` +## getCellOriginRecord(Function) + +Get the source data item of this cell. + +If it is a normal table, the source data object will be returned. + +If it is a pivot analysis table (a pivot table with data analysis turned on), an array of source data will be returned. + +``` + /** + * Get source data based on row and column numbers + * @param {number} col col index. + * @param {number} row row index. + * @return {object} record or record array + */ + getCellOriginRecord(col: number, row: number) +``` ## getAllCells(Function) @@ -270,6 +332,11 @@ For pivot table interfaces, get specific cell addresses based on the header dime | IDimensionInfo[] ) => CellAddress ``` +## getCheckboxState(Function) +Get the selected status of all data in the checkbox under a certain field. The order corresponds to the original incoming data records. It does not correspond to the status value of the row displayed in the table. +``` +getCheckboxState(field: string | number): Array +``` ## scrollToCell(Function) diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md index 2bfa01ed3..47a0f577c 100644 --- a/docs/assets/api/zh/methods.md +++ b/docs/assets/api/zh/methods.md @@ -165,6 +165,38 @@ tableInstance.renderWithRecreateCells(); getRecordByCell(col: number, row: number) ``` +## getTableIndexByRecordIndex(Function) +根据数据源的index 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 + +``` + /** + * 根据数据源的index 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 + * @param recordIndex + */ + getTableIndexByRecordIndex: (recordIndex: number) => number; +``` + +## getTableIndexByField(Function) +根据数据源的field 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 +``` + /** + * 根据数据源的field 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 + * @param recordIndex + */ + getTableIndexByField: (field: FieldDef) => number; +``` +## getCellAddrByFieldRecord(Function) + +根据数据源中的index和field获取单元格行列号。注：ListTable特有接口 +``` + /** + * 根据数据源中的index和field获取单元格行列号。注：ListTable特有接口 + * @param field + * @param recordIndex + * @returns + */ + getCellAddrByFieldRecord: (field: FieldDef, recordIndex: number) => CellAddress; +``` ## getCellOriginRecord(Function) 获取该单元格的源数据项。 @@ -299,6 +331,12 @@ tableInstance.renderWithRecreateCells(); )=> CellAddress ``` +## getCheckboxState(Function) +获取某个字段下checkbox 全部数据的选中状态 顺序对应原始传入数据records 不是对应表格展示row的状态值 +``` +getCheckboxState(field: string | number): Array +``` + ## scrollToCell(Function) 滚动到具体某个单元格位置。 diff --git a/docs/assets/demo/en/cell-type/checkbox.md b/docs/assets/demo/en/cell-type/checkbox.md index af7581c5a..c8909c83f 100644 --- a/docs/assets/demo/en/cell-type/checkbox.md +++ b/docs/assets/demo/en/cell-type/checkbox.md @@ -2,12 +2,12 @@ category: examples group: Cell Type title: Checkbox Type -cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png -order: 2-2 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox-demo.png link: '../guide/cell_type/checkbox' +option: ListTable-columns-checkbox#cellType --- -# Data Bar Type +# Checbox Type Demonstrate multiple ways to use checkbox @@ -20,23 +20,30 @@ cellType: 'checkbox'; ```javascript livedemo template=vtable const records = [ - { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, - { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, - { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, - { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, - { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, - { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, - { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } + { productName: 'aaaa', price: 20, check: { text: 'unchecked', checked: false, disable: false } }, + { productName: 'bbbb', price: 18, check: { text: 'checked', checked: true, disable: false } }, + { productName: 'cccc', price: 16, check: { text: 'disable', checked: true, disable: true } }, + { productName: 'cccc', price: 14, check: { text: 'disable', checked: false, disable: true } }, + { productName: 'eeee', price: 12, check: { text: 'checked', checked: false, disable: false } }, + { productName: 'ffff', price: 10, check: { text: 'checked', checked: false, disable: false } }, + { productName: 'gggg', price: 10, check: { text: 'checked', checked: false, disable: false } } ]; const columns = [ + { + field: '', + title: '', + width: 60, + headerType: 'checkbox', + cellType: 'checkbox', + }, { - field: 'percent', - title: 'percent', + field: 'productName', + title: 'productName', width: 120 }, { - field: 'percent', + field: 'price', title: 'checkbox', width: 120, cellType: 'checkbox', diff --git a/docs/assets/demo/zh/cell-type/checkbox.md b/docs/assets/demo/zh/cell-type/checkbox.md index c0d27acc1..73e0f080c 100644 --- a/docs/assets/demo/zh/cell-type/checkbox.md +++ b/docs/assets/demo/zh/cell-type/checkbox.md @@ -2,12 +2,12 @@ category: examples group: Cell Type title: 复选框类型 -cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png -order: 2-2 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox-demo.png link: '../guide/cell_type/checkbox' +option: ListTable-columns-checkbox#cellType --- -# 数据条类型 +# 复选框类型 展示复选框类型的多种使用方式 @@ -20,23 +20,30 @@ cellType: 'checkbox'; ```javascript livedemo template=vtable const records = [ - { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, - { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, - { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, - { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, - { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, - { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, - { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } + { productName: 'aaaa', price: 20, check: { text: 'unchecked', checked: false, disable: false } }, + { productName: 'bbbb', price: 18, check: { text: 'checked', checked: true, disable: false } }, + { productName: 'cccc', price: 16, check: { text: 'disable', checked: true, disable: true } }, + { productName: 'cccc', price: 14, check: { text: 'disable', checked: false, disable: true } }, + { productName: 'eeee', price: 12, check: { text: 'checked', checked: false, disable: false } }, + { productName: 'ffff', price: 10, check: { text: 'checked', checked: false, disable: false } }, + { productName: 'gggg', price: 10, check: { text: 'checked', checked: false, disable: false } } ]; const columns = [ + { + field: '', + title: '', + width: 60, + headerType: 'checkbox', + cellType: 'checkbox', + }, { - field: 'percent', - title: 'percent', + field: 'productName', + title: 'productName', width: 120 }, { - field: 'percent', + field: 'price', title: 'checkbox', width: 120, cellType: 'checkbox', diff --git a/docs/assets/guide/en/cell_type/checkbox.md b/docs/assets/guide/en/cell_type/checkbox.md index fd41d597c..26c5fff5c 100644 --- a/docs/assets/guide/en/cell_type/checkbox.md +++ b/docs/assets/guide/en/cell_type/checkbox.md @@ -1,45 +1,97 @@ -# Checkbox Type +# checkbox checkbox type -checkbox type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. +Checkbox type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. -The advantages of selecting box cells in tables are as follows: +The advantages of checkbox cells in tables are as follows: 1. The use of checkbox type cells is very intuitive and flexible. Users can select one or more options to perform specific actions or filter data based on their needs. This interaction method enables users to control their operations more finely, improving user experience and efficiency. 2. Checkbox type cells usually use different icons or colors to indicate selected and unselected states, providing visual feedback. This way the user can easily identify which options have been selected and which have not. -![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/checkbox.png) -## Introduction of exclusive configuration items for checkbox +## Introduction to the exclusive configuration items of checkbox -The specific configuration items of the checkbox in the configuration are as follows: +The unique configuration items of the checkbox checkbox type in the configuration are as follows: 1. `checked`: Whether the cell is selected. The default value is false. Configuration functions are supported. Different cell configurations are different. -2. `disable`: Whether the cell checkbox can disable clicks. The default value is false. It supports configuration functions and has different configurations for different cells. +2. `disable`: Whether the cell check box can disable clicks. The default value is false. It supports configuration functions. Different cell configurations are different. -Example: +Example: ```javascript { - cellType: 'checkbox', + headerType: 'checkbox', //Specify the header cell to be displayed as a checkbox + cellType: 'checkbox',//The specified body cell is displayed as a check box field: 'check', checked: true, - disbaled: false + disabled: false } ``` -## Introduction of data for checkbox +## Introduction to the exclusive data type of checkbox -The data corresponding to the checkbox supports strings or objects, in which the following attributes can be configured in the object: +The data corresponding to the checkbox supports `boolean`, `string` or `Object`, or it defaults to false if the value is not set. -* text: The text displayed in the cell checkbox -* checked: Whether the cell checkbox is selected +1. Among the three types, it is more common to set the `boolean` type. For example, the check field is set as follows: +``` +const columns=[ + { + headerType: 'checkbox', //Specify the header cell to be displayed as a checkbox + cellType: 'checkbox',//The specified body cell is displayed as a check box + field: 'check', + } +] +const records = [ + { + product: 'a', + check: true + }, + { + product: 'b', + check: false + }, + { + product: 'c', + check: false + } +] +``` + +2. If set to `string` type, the text will be displayed on the right side of the checkbox, and the checkbox will be unselected by default. For example, the product field is set as follows: +``` +const columns=[ + { + headerType: 'checkbox', //Specify the header cell to be displayed as a checkbox + cellType: 'checkbox',//The specified body cell is displayed as a check box + field: 'product', + } +] +const records = [ + { + product: 'a', + }, + { + product: 'b', + }, + { + product: 'c', + } +] +``` + +3. If each state of the data item is different, you can set the Object object. + +The Object object supports configuring the following properties: + +* text: The text displayed in the check box of this cell +* checked: Whether the cell check box is selected * disable: whether the cell checkbox is disabled -Example: +Example: ```javasxript const records = [ - { + { percent: '100%', - check: { + check: { text: 'unchecked', checked: false, disable: false @@ -47,10 +99,10 @@ const records = [ }, { percent: '80%', - check: { - text: 'checked', - checked: true, - disable: false + check: { + text: 'checked', + checked: true, + disable: false } } ]; @@ -58,4 +110,4 @@ const records = [ `checked` and `disable` support configuration in both data and `column`. The priority of configuration in data is higher than the configuration in `column`. -Through the above introduction, you have learned how to use the checkbox type in the VTable table for data display, I hope it will be helpful to you. \ No newline at end of file +Through the above introduction, you have learned how to use the checkbox checkbox type to display data in the VTable table. I hope it will be helpful to you. \ No newline at end of file diff --git a/docs/assets/guide/zh/cell_type/checkbox.md b/docs/assets/guide/zh/cell_type/checkbox.md index 7f2df4616..34f551f00 100644 --- a/docs/assets/guide/zh/cell_type/checkbox.md +++ b/docs/assets/guide/zh/cell_type/checkbox.md @@ -7,7 +7,7 @@ 1. 复选框类型单元格的使用非常直观和灵活。用户可以根据自己的需求选择一个或多个选项，以进行特定操作或过滤数据。这种交互方式使得用户能够更加精细地控制其操作，提高了用户体验和效率。 2. 复选框类型单元格通常使用不同的图标或颜色来表示选中和未选中的状态，提供可视化的反馈。这样用户可以轻松地识别哪些选项已经被选择，哪些选项未被选择。 -![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/guide/checkbox.png) ## checkbox复选框的专属配置项介绍 @@ -19,7 +19,8 @@ checkbox 复选框类型在配置中的特有配置项如下： 示例： ```javascript { - cellType: 'checkbox', + headerType: 'checkbox', //指定表头单元格显示为复选框 + cellType: 'checkbox',//指定body单元格显示为复选框 field: 'check', checked: true, disbaled: false @@ -28,7 +29,58 @@ checkbox 复选框类型在配置中的特有配置项如下： ## checkbox复选框的专属数据类型介绍 -checkbox 对应的数据，支持字符串或对象，其中对象中支持配置以下属性： +checkbox 对应的数据，支持 `boolean` `string`或 `Object`，或者不设置值默认false。 + +1. 三种类型中设置 `boolean`类型较为常见。如check字段设置如下： +``` +const columns=[ + { + headerType: 'checkbox', //指定表头单元格显示为复选框 + cellType: 'checkbox',//指定body单元格显示为复选框 + field: 'check', + } +] +const records = [ + { + product: 'a', + check: true + }, + { + product: 'b', + check: false + }, + { + product: 'c', + check: false + } +] +``` + +2. 如果设置为 `string`类型则会将文本显示在checkbox框的右侧，复选框默认为未选择状态。如product字段设置如下： +``` +const columns=[ + { + headerType: 'checkbox', //指定表头单元格显示为复选框 + cellType: 'checkbox',//指定body单元格显示为复选框 + field: 'product', + } +] +const records = [ + { + product: 'a', + }, + { + product: 'b', + }, + { + product: 'c', + } +] +``` + +3. 如果数据条目每个状态都不同，可以设置Object对象。 + +其中Object对象中支持配置以下属性： * text: 该单元格复选框中显示的文字 * checked: 该单元格复选框是否被选中 diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index 66225f812..5f736d417 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -11,7 +11,13 @@ export function createTable() { field: '', headerType: 'checkbox', cellType: 'checkbox', - width: 60 + width: 60, + checked(args) { + if (args.row === 0 || args.row === 1) { + return false; + } + return true; + } // checked: false }, { @@ -33,8 +39,8 @@ export function createTable() { title: '', width: 120, headerType: 'checkbox', - cellType: 'checkbox', - checked: false + cellType: 'checkbox' + // checked: false } ], showFrozenIcon: true, //显示VTable内置冻结列图标 @@ -53,9 +59,9 @@ export function createTable() { { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, { percent: '0%', value: -10, check: true }, - { percent: '0%', value: -10 } + { percent: '0%', value: -10, check: '选中' } ]; - for (let i = 0; i < 1; i++) { + for (let i = 0; i < 200; i++) { records = records.concat(data); } //设置表格数据 diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index e9d61c02b..5ac7ebd0f 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -194,6 +194,33 @@ export class ListTable extends BaseTable implements ListTableAPI { const { layoutMap } = this.internalProps; return layoutMap.getRecordIndexByCell(col, row); } + + getTableIndexByRecordIndex(recordIndex: number) { + if (this.transpose) { + return this.dataSource.getTableIndex(recordIndex) + this.rowHeaderLevelCount; + } + return this.dataSource.getTableIndex(recordIndex) + this.columnHeaderLevelCount; + } + getTableIndexByField(field: FieldDef) { + const colObj = this.internalProps.layoutMap.columnObjects.find((col: any) => col.field === field); + const layoutRange = this.internalProps.layoutMap.getBodyLayoutRangeById(colObj.id); + if (this.transpose) { + return layoutRange.start.row; + } + return layoutRange.start.col; + } + /** + * 根据数据源中的index和field获取单元格行列号 + * @param field + * @param recordIndex + * @returns + */ + getCellAddrByFieldRecord(field: FieldDef, recordIndex: number): CellAddress { + if (this.transpose) { + return { col: this.getTableIndexByRecordIndex(recordIndex), row: this.getTableIndexByField(field) }; + } + return { col: this.getTableIndexByField(field), row: this.getTableIndexByRecordIndex(recordIndex) }; + } /** * * @param field 获取整体数据记录 diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index caace799d..e74705c9f 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -336,6 +336,16 @@ export class PivotChart extends BaseTable implements PivotChartAPI { getRecordIndexByCell(col: number, row: number): number { return undefined; } + + getTableIndexByRecordIndex(recordIndex: number): number { + return undefined; + } + getTableIndexByField(field: FieldDef): number { + return undefined; + } + getCellAddrByFieldRecord(field: FieldDef, recordIndex: number): CellAddress { + return undefined; + } getBodyIndexByRow(row: number): number { const { layoutMap } = this.internalProps; return layoutMap.getBodyIndexByRow(row); diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 2ba6f962c..3f72930c9 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -408,6 +408,15 @@ export class PivotTable extends BaseTable implements PivotTableAPI { getRecordIndexByCell(col: number, row: number): number { return undefined; } + getTableIndexByRecordIndex(recordIndex: number): number { + return undefined; + } + getTableIndexByField(field: FieldDef): number { + return undefined; + } + getCellAddrByFieldRecord(field: FieldDef, recordIndex: number): CellAddress { + return undefined; + } getBodyIndexByRow(row: number): number { const { layoutMap } = this.internalProps; return layoutMap.getBodyIndexByRow(row); diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 08990651a..362f3add3 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2243,6 +2243,10 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { abstract getCellOriginRecord(col: number, row: number): MaybePromiseOrUndefined; abstract getCellValue(col: number, row: number): FieldData; abstract getCellOriginValue(col: number, row: number): FieldData; + + abstract getTableIndexByRecordIndex(recordIndex: number): number; + abstract getTableIndexByField(field: FieldDef): number; + abstract getCellAddrByFieldRecord(field: FieldDef, recordIndex: number): CellAddress; /** * 更新页码 * @param pagination 要修改页码的信息 diff --git a/packages/vtable/src/data/DataSource.ts b/packages/vtable/src/data/DataSource.ts index b43f09e8f..c6edffbd9 100644 --- a/packages/vtable/src/data/DataSource.ts +++ b/packages/vtable/src/data/DataSource.ts @@ -292,6 +292,9 @@ export class DataSource extends EventTarget implements DataSourceAPI { getIndexKey(index: number): number | number[] { return _getIndex(this.currentPagerIndexedData, index); } + getTableIndex(colOrRow: number): number { + return this.currentPagerIndexedData.findIndex(value => value === colOrRow); + } getField( index: number, field: FieldDef | FieldFormat | number, diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 420b859c6..7d73393ab 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -113,7 +113,7 @@ function createCheckbox( const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; const { lineClamp } = cellStyle; const { checked, disable } = define; - if (isChecked === undefined || isChecked === null) { + if (isChecked === undefined || isChecked === null || typeof isChecked === 'function') { //isChecked无效值 取全局设置的值 const globalChecked = getOrApply(checked as any, { col, @@ -123,11 +123,7 @@ function createCheckbox( value, dataValue }); - if (table.isHeader(col, row)) { - isChecked = table.stateManeger.syncHeaderCheckedState(define.field as string | number, globalChecked); - } else { - isChecked = globalChecked ?? false; - } + isChecked = table.stateManeger.syncCheckedState(col, row, define.field as string | number, globalChecked); } const globalDisable = getOrApply(disable as any, { col, diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 14cf639bf..970a3d572 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -22,7 +22,7 @@ import { updateHoverPosition } from './hover/update-position'; import { dealFreeze } from './frozen'; import { dealSort } from './sort'; import { selectEnd, updateSelectPosition } from './select/update-position'; -import { cellInRange } from '../tools/helper'; +import { cellInRange, getOrApply } from '../tools/helper'; import type { ListTable } from '../ListTable'; import { PIVOT_TABLE_EVENT_TYPE } from '../ts-types/pivot-table/PIVOT_TABLE_EVENT_TYPE'; import type { PivotHeaderLayoutMap } from '../layout/pivot-header-layout'; @@ -152,7 +152,9 @@ export class StateManeger { */ headerCheckedState: Record = {}; - checkboxCellTypeFields: (string | number)[] = []; + _checkboxCellTypeFields: (string | number)[] = []; + + _headerCheckFuncs: Record = {}; // 供滚动重置为default使用 resetInteractionState = debounce(() => { this.updateInteractionState(InteractionState.default); @@ -975,6 +977,8 @@ export class StateManeger { if (this.table.isHeader(col, row)) { if (isValid(this.headerCheckedState[field])) { return this.headerCheckedState[field]; + } else if (typeof checked === 'function') { + return undefined; } else if (isValid(checked)) { this.headerCheckedState[field] = checked; } else if (this.checkedState?.length > 0) { @@ -1006,41 +1010,49 @@ export class StateManeger { * @param checked * @returns */ - syncHeaderCheckedState(field: string | number, checked: boolean): boolean | 'indeterminate' { - if (isValid(this.headerCheckedState[field])) { - return this.headerCheckedState[field]; - } else if (isValid(checked)) { - this.headerCheckedState[field] = checked; - } else if (this.checkedState?.length > 0) { - const isAllChecked = this.updateHeaderCheckedState(field); - return isAllChecked; - } - return this.headerCheckedState[field]; - } + // syncHeaderCheckedState(field: string | number, checked: boolean): boolean | 'indeterminate' { + // if (isValid(this.headerCheckedState[field])) { + // return this.headerCheckedState[field]; + // } else if (typeof checked === 'function') { + // return undefined; + // } else if (isValid(checked)) { + // this.headerCheckedState[field] = checked; + // } else if (this.checkedState?.length > 0) { + // const isAllChecked = this.updateHeaderCheckedState(field); + // return isAllChecked; + // } + // return this.headerCheckedState[field]; + // } /** * 初始化check状态 * @param records */ initCheckedState(records: any[]) { let isNeedInitHeaderCheckedStateFromRecord = false; - this.checkboxCellTypeFields = []; + this._checkboxCellTypeFields = []; + this._headerCheckFuncs = {}; this.table.internalProps.layoutMap.headerObjects.forEach((hd, index) => { if (hd.headerType === 'checkbox') { const headerChecked = (hd.define as CheckboxColumnDefine).checked as boolean; - this.headerCheckedState[hd.field as string | number] = headerChecked; - if (headerChecked === undefined || headerChecked === null) { + + if (headerChecked === undefined || headerChecked === null || typeof headerChecked === 'function') { // 如果没有明确指定check的状态 则需要在下面遍历所有数据获取到节点状态 确定这个header的check状态 isNeedInitHeaderCheckedStateFromRecord = true; + if (typeof headerChecked === 'function') { + this._headerCheckFuncs[hd.field as string | number] = headerChecked; + } + } else { + this.headerCheckedState[hd.field as string | number] = headerChecked; } if (hd.define.cellType === 'checkbox' && !hd.fieldFormat) { - this.checkboxCellTypeFields.push(hd.field as string | number); + this._checkboxCellTypeFields.push(hd.field as string | number); } } }); //如果没有明确指定check的状态 遍历所有数据获取到节点状态 确定这个header的check状态 if (isNeedInitHeaderCheckedStateFromRecord) { records.forEach((record: any, index: number) => { - this.checkboxCellTypeFields.forEach(field => { + this._checkboxCellTypeFields.forEach(field => { const value = record[field] as string | { text: string; checked: boolean; disable: boolean } | boolean; let isChecked; if (isObject(value)) { @@ -1048,6 +1060,21 @@ export class StateManeger { } else if (typeof value === 'boolean') { isChecked = value; } + if (isChecked === undefined || isChecked === null) { + const headerCheckFunc = this._headerCheckFuncs[field]; + if (headerCheckFunc) { + //如果定义的checked是个函数 则需要每个都去计算这个值 + const cellAddr = this.table.getCellAddrByFieldRecord(field, index); + const globalChecked = getOrApply(headerCheckFunc as any, { + col: cellAddr.col, + row: cellAddr.row, + table: this.table, + context: null, + value + }); + isChecked = globalChecked; + } + } if (!this.checkedState[index]) { this.checkedState[index] = {}; } @@ -1092,7 +1119,7 @@ export class StateManeger { initLeftRecordsCheckState(records: any[]) { for (let index = this.checkedState.length; index < records.length; index++) { const record = records[index]; - this.checkboxCellTypeFields.forEach(field => { + this._checkboxCellTypeFields.forEach(field => { const value = record[field] as string | { text: string; checked: boolean; disable: boolean } | boolean; let isChecked; if (isObject(value)) { diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index bc9b9a103..5199090c6 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -489,7 +489,30 @@ export interface BaseTableAPI { off: (id: EventListenerId) => void; getBodyField: (col: number, row: number) => FieldDef | undefined; + /** + * 根据单元格获取对应的源数据 + * @param col + * @param row + * @returns + */ getRecordByCell: (col: number, row: number) => MaybePromiseOrUndefined; + /** + * 根据数据源的index 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 + * @param recordIndex + */ + getTableIndexByRecordIndex: (recordIndex: number) => number; + /** + * 根据数据源的field 获取显示到表格中的index 行号或者列号（与转置相关）。注：ListTable特有接口 + * @param recordIndex + */ + getTableIndexByField: (field: FieldDef) => number; + /** + * 根据数据源中的index和field获取单元格行列号。注：ListTable特有接口 + * @param field + * @param recordIndex + * @returns + */ + getCellAddrByFieldRecord: (field: FieldDef, recordIndex: number) => CellAddress; getRecordIndexByCell: (col: number, row: number) => number; getRecordStartRowByRecordIndex: (index: number) => number; From 76e65e91ab4d4b76f73f01c34727448b3ec7f46f Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 16:55:19 +0800 Subject: [PATCH 06/11] fix: getRecordByRowCol to compatible --- packages/vtable/src/core/BaseTable.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 362f3add3..6aa80807c 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2447,6 +2447,10 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } return this.internalProps.dataSource?.get(this.getRecordIndexByCell(col, row)); } + /** @deprecated 请使用getRecordByCell */ + getRecordByRowCol(col: number, row: number) { + return this.getRecordByCell(col, row); + } /** * 根据数据的索引获取应该显示在body的第几行 From c8e142331c6dcd22d064869f8d5487735f4a4636 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 17:26:52 +0800 Subject: [PATCH 07/11] fix: stack default value is true --- packages/vtable/src/PivotChart.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index b44fb7665..7680ed3a6 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -671,6 +671,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { if (typeof option.indicators[i] !== 'string' && (option.indicators[i] as IChartColumnIndicator).chartSpec) { if (option.indicatorsAsCol === false) { const indicatorDefine = option.indicators[i] as IIndicator; + //明确指定 chartSpec.stack为true + (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); // 收集指标值的范围 collectValuesBy[indicatorDefine.indicatorKey] = { by: rowKeys, @@ -695,6 +698,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; const yField = chartSeries.yField; + chartSeries.stack !== false && (chartSeries.stack = true); //明确指定 chartSpec.stack为true collectValuesBy[yField] = { by: rowKeys, range: chartSeries.direction !== 'horizontal', // direction默认为'vertical' @@ -721,6 +725,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { ? (indicatorDefine as IChartColumnIndicator).chartSpec?.data?.fields?.[xField]?.domain : undefined }; + //明确指定 chartSpec.stack为true + (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); //下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同 const yField = (indicatorDefine as IChartColumnIndicator).chartSpec.yField; collectValuesBy[yField] = { @@ -737,6 +744,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { } } else { const indicatorDefine = option.indicators[i] as IIndicator; + //明确指定 chartSpec.stack为true + (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); // 收集指标值的范围 collectValuesBy[indicatorDefine.indicatorKey] = { by: columnKeys, @@ -761,6 +771,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; const xField = chartSeries.xField; + chartSeries.stack !== false && (chartSeries.stack = true); //明确指定 chartSpec.stack为true collectValuesBy[xField] = { by: columnKeys, range: chartSeries.direction === 'horizontal', // direction默认为'vertical' @@ -787,6 +798,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { ? (indicatorDefine as IChartColumnIndicator).chartSpec?.data?.fields?.[yField]?.domain : undefined }; + //明确指定 chartSpec.stack为true + (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); //下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同 const xField = (indicatorDefine as IChartColumnIndicator).chartSpec.xField; collectValuesBy[xField] = { From ba87912d96ae045ce76a09ce93482a0dfcfc88e5 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 17:27:25 +0800 Subject: [PATCH 08/11] docs: update changlog of rush --- ...feat-checkbox-header_2023-10-27-09-27.json | 11 + docs/assets/demo/zh/business/information.md | 222 ++++++++++++++++++ 2 files changed, 233 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json create mode 100644 docs/assets/demo/zh/business/information.md diff --git a/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json b/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json new file mode 100644 index 000000000..dde499392 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: stack default value is true\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/docs/assets/demo/zh/business/information.md b/docs/assets/demo/zh/business/information.md new file mode 100644 index 000000000..706405a8d --- /dev/null +++ b/docs/assets/demo/zh/business/information.md @@ -0,0 +1,222 @@ +--- +category: examples +group: Business +title: 自定义图标 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/custom-icon.png +order: 7-2 +link: '../guide/custom_define/custom_icon' +--- + +# 自定义图标 + +在单元格中显示图标内容 + +## 关键配置 + + - `VTable.register.icon` 注册自定义的icon 可以配合columns[x].icon或者columns[x].headerIcon 使用。或者重置内部的图标 + +内置功能图标名称具体有： +` +'sort_upward', +'sort_downward', +'sort_normal', +'frozen', +'frozen', +'frozenCurrent', +'dropdownIcon', +'dropdownIcon_hover', +'expand', +'collapse', +` +## 代码演示 + +```javascript livedemo template=vtable + +VTable.register.icon('frozen',{ + type: 'svg', + svg: + "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/frozen.svg", + width: 22, + height: 22, + name: 'frozen', + funcType: VTable.TYPES.IconFuncTypeEnum.frozen, + positionType: VTable.TYPES.IconPosition.right, + marginRight: 0, + hover: { + width: 22, + height: 22, + bgColor: 'rgba(101, 117, 168, 0.1)', + }, + cursor: 'pointer', + } + ); + VTable.register.icon('frozenCurrent',{ + type: 'svg', + svg: + "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/frozenCurrent.svg", + width: 22, + height: 22, + name: 'frozenCurrent', + funcType: VTable.TYPES.IconFuncTypeEnum.frozen, + positionType: VTable.TYPES.IconPosition.right, + marginRight: 0, + hover: { + width: 22, + height: 22, + bgColor: 'rgba(101, 117, 168, 0.1)', + }, + cursor: 'pointer', + } + ); + + +VTable.register.icon('frozen',{ + type: 'svg', + svg: + "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/frozen.svg", + width: 22, + height: 22, + name: 'frozen', + funcType: VTable.TYPES.IconFuncTypeEnum.frozen, + positionType: VTable.TYPES.IconPosition.right, + marginRight: 0, + hover: { + width: 22, + height: 22, + bgColor: 'rgba(101, 117, 168, 0.1)', + }, + cursor: 'pointer', + } + ); + + VTable.register.icon('order',{ + type: 'svg', + svg: + "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/order.svg", + width: 22, + height: 22, + name: 'order', + positionType: VTable.TYPES.IconPosition.left, + marginRight: 0, + hover: { + width: 22, + height: 22, + bgColor: 'rgba(101, 117, 168, 0.1)', + }, + cursor: 'pointer', + } + ); + +let tableInstance; + fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json') + .then((res) => res.json()) + .then((data) => { + +const columns =[ + { + "field": "Order ID", + "title": "Order ID", + "width": "auto", + icon: 'order' + }, + { + "field": "Customer ID", + "title": "Customer ID", + "width": "auto" + }, + { + "field": "Product Name", + "title": "Product Name", + "width": "auto" + }, + { + "field": "Category", + "title": "Category", + "width": "auto" + }, + { + "field": "Sub-Category", + "title": "Sub-Category", + "width": "auto" + }, + { + "field": "Region", + "title": "Region", + "width": "auto" + }, + { + "field": "City", + "title": "City", + "width": "auto" + }, + { + "field": "Order Date", + "title": "Order Date", + "width": "auto" + }, + { + field: '2234', + title: 'single line', + width:120, + icon: [ + { + name: 'edit', + type: 'svg', + marginLeft: 10, + color: 'blue', + positionType: VTable.TYPES.IconPosition.left, + width:20, + height:20, + svg:"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/edit.svg", + tooltip: { + style: { arrowMark: true }, + // 气泡框，按钮的的解释信息 + title: '编辑', + placement: VTable.TYPES.Placement.right, + }, + }, + { + name: 'delete', + type: 'svg', + marginLeft: 20, + color: 'blue', + positionType: VTable.TYPES.IconPosition.left, + width:20, + height:20, + svg:"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/delete.svg", + tooltip: { + style: { arrowMark: true }, + // 气泡框，按钮的的解释信息 + title: '删除', + placement: VTable.TYPES.Placement.right, + }, + } + ], + } +]; + +const option = { + records:data, + columns, + widthMode:'standard', + allowFrozenColCount: 3, + frozenColCount: 1, + rightFrozenColCount:1 +}; +tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); +window['tableInstance'] = tableInstance; + +tableInstance.on('click_cell', args => { + console.log('click_cell', args); + const { col, row, targetIcon } = args; + if(targetIcon){ + if (targetIcon.name === 'edit') { + window?.alert?.('编辑第 '+( row-tableInstance.columnHeaderLevelCount+1)+' 条数据'); + }else if(targetIcon.name === 'delete'){ + data.splice(row-tableInstance.columnHeaderLevelCount,1); + tableInstance.setRecords(data); + } + } +}) + }) +``` From a540386b8e418fe21e7201e11b21310be46fbfe3 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 27 Oct 2023 17:47:22 +0800 Subject: [PATCH 09/11] fix: stack default value --- common/config/rush/pnpm-lock.yaml | 206 ++++++++++++++++-------------- docs/package.json | 2 +- packages/vtable/package.json | 4 +- packages/vtable/src/PivotChart.ts | 16 +-- 4 files changed, 118 insertions(+), 110 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 9f53c4c32..17f07a1fb 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.5.1 + '@visactor/vchart': 1.5.3 '@visactor/vtable': workspace:* '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 @@ -35,7 +35,7 @@ importers: yargs: ^17.1.1 dependencies: '@arco-design/web-react': 2.46.1_5ifijlhiwgyo26nyk4gkpsvy4e - '@visactor/vchart': 1.5.1 + '@visactor/vchart': 1.5.3 '@visactor/vtable': link:../packages/vtable axios: 1.5.1 highlight.js: 11.8.0 @@ -78,7 +78,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.5.1 + '@visactor/vchart': 1.5.3 '@visactor/vdataset': ~0.15.7 '@visactor/vrender': 0.16.9-alpha.1 '@visactor/vrender-components': 0.16.9-alpha.1 @@ -142,7 +142,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 18.2.25 '@types/react-dom': 18.2.10 - '@visactor/vchart': 1.5.1 + '@visactor/vchart': 1.5.3 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.5.1 chai: 4.3.4 @@ -3048,23 +3048,23 @@ packages: resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==} dev: true - /@visactor/vchart/1.5.1: - resolution: {integrity: sha512-gIMg+acgEJO8gVHxG111wXm1PTlGm/4ZzI4WPhvV7RhR7WDZM9dSQxhDrwKK9+laKLTm64O0Tce1tb1KFWnM/w==} - dependencies: - '@visactor/vdataset': 0.16.5 - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-hierarchy': 0.8.0 - '@visactor/vgrammar-projection': 0.8.0 - '@visactor/vgrammar-sankey': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vgrammar-wordcloud': 0.8.0 - '@visactor/vgrammar-wordcloud-shape': 0.8.0 - '@visactor/vrender-components': 0.16.9-alpha.1 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vscale': 0.16.5 - '@visactor/vutils': 0.16.5 - '@visactor/vutils-extension': 1.5.1 + /@visactor/vchart/1.5.3: + resolution: {integrity: sha512-ny/Xe1nwRF/5hYbgmV/BoCg+Nm8ZWCIz7V7ZxTTb9G5Xa8FEQCTqySgiUkkge3EFyPaIYstqglS+FZPHfJIRNQ==} + dependencies: + '@visactor/vdataset': 0.16.6 + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-hierarchy': 0.8.1 + '@visactor/vgrammar-projection': 0.8.1 + '@visactor/vgrammar-sankey': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vgrammar-wordcloud': 0.8.1 + '@visactor/vgrammar-wordcloud-shape': 0.8.1 + '@visactor/vrender-components': 0.16.9 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vscale': 0.16.6 + '@visactor/vutils': 0.16.6 + '@visactor/vutils-extension': 1.5.3 /@visactor/vdataset/0.15.14: resolution: {integrity: sha512-uPRUJAcldwEUezQnXUIB5IwFyMhktgc9YyObm0fFtBEf9P+zln+d/cW1jIN8H2oTIaTyAryDCzZ3MDWTI8jOqg==} @@ -3088,13 +3088,13 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vdataset/0.16.5: - resolution: {integrity: sha512-8kMs5uA4hSXSTh/ljbGxW6Dp/zUUxW2uLhbvusE0xZ3L3axuBmaqf3EiYMxQA62lPpc6mAYcSqVfiy+F2ZYc9w==} + /@visactor/vdataset/0.16.6: + resolution: {integrity: sha512-MVJXDSBamYXngggMvzA2uTj/EylnCsE6LpCneIA6HMUWvkLuKalIAsNQh3jmJQOyQpiMDY8iup32iN3Ep7l/Kw==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.16.5 + '@visactor/vutils': 0.16.6 d3-dsv: 3.0.1 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -3109,73 +3109,81 @@ packages: simplify-geojson: 1.0.5 topojson-client: 3.1.0 - /@visactor/vgrammar-coordinate/0.8.0: - resolution: {integrity: sha512-FS5Ir+AawOZMpv4wINeyTWIyB8PThGnLzfVMDvRLwckYP0na3wiGu0HGQ/BV0Z+jhtd/wB7DEnux2bLlvAlr/w==} + /@visactor/vgrammar-coordinate/0.8.1: + resolution: {integrity: sha512-CVRYyGnJ3ZdZvucuESAuTGlFFOZLgYYeldGL10AWa+LmExt7S+d7b4Fpte1zi7jsTZVB88OtKQB/qCk/dHs1hg==} dependencies: - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vutils': 0.16.5 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vutils': 0.16.6 - /@visactor/vgrammar-core/0.8.0: - resolution: {integrity: sha512-i7y4p4cWRaSzjzy/x2yz1dKYVJxCIVuW89jzh+sjnooFNMEFM+IFn/lLGKt9e4PB1t26QT+IMNeCAgWeZemFHw==} + /@visactor/vgrammar-core/0.8.1: + resolution: {integrity: sha512-YqhNpv1QmEoomq/h9gRYwotLhjUrXOQp554cyfvQeZpgcm0tTu7oR9TzhLms7ieZnpH/rOwHeo1/HQxcmfjukA==} dependencies: - '@visactor/vdataset': 0.16.5 - '@visactor/vgrammar-coordinate': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 + '@visactor/vdataset': 0.16.6 + '@visactor/vgrammar-coordinate': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 '@visactor/vrender-components': 0.16.9-alpha.1 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vscale': 0.16.5 - '@visactor/vutils': 0.16.5 - - /@visactor/vgrammar-hierarchy/0.8.0: - resolution: {integrity: sha512-wLTfFF4zqVhr3vgTUiJ3qTF2x/TAQMC6QYOays+pEIDwCp3mdkdE9ajBr44YfhrorJzWjgqceV0it5fm5xbyKA==} - dependencies: - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vutils': 0.16.5 - - /@visactor/vgrammar-projection/0.8.0: - resolution: {integrity: sha512-jyuxC8aYFTXi+C+9MOb/0EUJ6EtbB40IyI+nIL1nCB1TsPiNu+kgP+8OSPltC2buONL2gUe7JqRvpD3OJBE8ug==} - dependencies: - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vutils': 0.16.5 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vscale': 0.16.6 + '@visactor/vutils': 0.16.6 + + /@visactor/vgrammar-hierarchy/0.8.1: + resolution: {integrity: sha512-DpTr+2wHertjV2aAeTDV5yEARUMrlOcgRTQthdRYOD4alpx6zwb2gPStbnt29X0IBkduON2JDYxyNtH+GVDSVg==} + dependencies: + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vutils': 0.16.6 + + /@visactor/vgrammar-projection/0.8.1: + resolution: {integrity: sha512-gYnL3ZHMgWwDHyJI1WATH42uFCf+stLKHEbhkMPnfQrZP+sMjNxaXFx5Lg2MXlztE2iN2ZeOvZiDyNOGFQfiGw==} + dependencies: + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vutils': 0.16.6 d3-geo: 1.12.1 - /@visactor/vgrammar-sankey/0.8.0: - resolution: {integrity: sha512-xW7smu671LMnO7zoxXnn4jefLk2JE71it2RGs4/yu3ZTOB640NQa/H1goEYGAf2YckzGGC+/tif7zsoARy0xTw==} + /@visactor/vgrammar-sankey/0.8.1: + resolution: {integrity: sha512-mveG2GUf9zMP+Z0U/ZjRT7uzDyIlzvXAB0UP52ckqcoox5Tznsx0NAV8+cu6ZiXQBZHicefr8rDSnpkL+H923A==} dependencies: - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vutils': 0.16.5 + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vutils': 0.16.6 - /@visactor/vgrammar-util/0.8.0: - resolution: {integrity: sha512-MJA5EL/K/9mjywONGoyVwbc4pqVkD1K2K3t9SAb1DksvM+bqCy0l1MIBGk9/icCz8za+OEZH+WFw7Fz/qG+Oqw==} + /@visactor/vgrammar-util/0.8.1: + resolution: {integrity: sha512-DVSdpeocQg+u+k8tUbeiZM2J5b9tAfcND3sXprA6rziYROO2msPMrZUuv8BoGNTVz/KJPTTNajIKXCDEYHCfpA==} dependencies: - '@visactor/vutils': 0.16.5 + '@visactor/vutils': 0.16.6 - /@visactor/vgrammar-wordcloud-shape/0.8.0: - resolution: {integrity: sha512-KuK/SNtaYDcHeFFjj6vT5IyvRlTyvYTDgNvWagExuf/LkTUIbl4rBqlOVRq6diZM79MJf62JLRbqcO+Rzd41JQ==} + /@visactor/vgrammar-wordcloud-shape/0.8.1: + resolution: {integrity: sha512-Zb6W6enzekRy5YDN1sCk1J3HBgBtovB+3GGc9AXI2HwXi8lADgcIbbStZS+eHSeowGf9qU7x/tdnqMBlvy+h9Q==} dependencies: - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vscale': 0.16.5 - '@visactor/vutils': 0.16.5 + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vscale': 0.16.6 + '@visactor/vutils': 0.16.6 - /@visactor/vgrammar-wordcloud/0.8.0: - resolution: {integrity: sha512-gsMmL0q7iYuaevltBOf5TxFm2OnW2zVyooc273xM48QYbX8ZC0Tmmftzo0pEPmoqFRrjnCPwWijBaUXN0pA5Mg==} + /@visactor/vgrammar-wordcloud/0.8.1: + resolution: {integrity: sha512-mRWqemr1LP6cE44Lhvo33MYYh3Go7cp/Y9ex4W+MPhJQQyOQDmi4SyHviceLOS04Sl2Jfu8bmpyrsXXtECTo9w==} dependencies: - '@visactor/vgrammar-core': 0.8.0 - '@visactor/vgrammar-util': 0.8.0 - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vutils': 0.16.5 + '@visactor/vgrammar-core': 0.8.1 + '@visactor/vgrammar-util': 0.8.1 + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vutils': 0.16.6 + + /@visactor/vrender-components/0.16.9: + resolution: {integrity: sha512-njivlYePjg/jH5ELyDp7EsQ5iYFMSb6yUeWOoIF9ljMnmtQTU7guRiVzoqXuReeLWNOD1OPESTJQOiJQRW3mtQ==} + dependencies: + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vscale': 0.16.0 + '@visactor/vutils': 0.16.6 /@visactor/vrender-components/0.16.9-alpha.1: resolution: {integrity: sha512-TZ4bkHF2zU/11kANvvc9E29ygO577Uqk8bXyfzz1ZMCi8QaZwCozQSRpdDdzfq5eqGYGG57gIcpBVNL3zMloLA==} @@ -3192,10 +3200,10 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/0.16.8: - resolution: {integrity: sha512-psjkg0UFOfxSinxNfm6QiEAhKV6yrxCXhId3WTEXdh7nla62o3Pft9CMA8ooFaA9I0cNl5klkJxOqtKdAmRZPg==} + /@visactor/vrender-core/0.16.9: + resolution: {integrity: sha512-nNsYliMouH40vgu+RCW4wIV3z/4VAr9Y3GjkGYTKuBjHkco4kF9+rHEiuTenTSdvOY1W78eiUXEm8ipdqUgOyg==} dependencies: - '@visactor/vutils': 0.16.1 + '@visactor/vutils': 0.16.6 color-convert: 2.0.1 /@visactor/vrender-core/0.16.9-alpha.1: @@ -3213,12 +3221,12 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/0.16.8: - resolution: {integrity: sha512-SLPXt8gyp95BNLmhNvxqNXvLdnApbWJYRgKjzKaSYH+cbUQmaPVlaPSbkYiPJJvP4J3CZGW9F95TO5GBvhmZPw==} + /@visactor/vrender-kits/0.16.9: + resolution: {integrity: sha512-m2BpQMW3RsqBXOVPOapMWl8jf6fuxFidFI4b1YCg2iXijmhpRzyOt9ffFarxm1Wmls35OE0gX8UPAYH7lBiu2w==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.16.8 - '@visactor/vutils': 0.16.1 + '@visactor/vrender-core': 0.16.9 + '@visactor/vutils': 0.16.6 roughjs: 4.5.2 /@visactor/vrender-kits/0.16.9-alpha.1: @@ -3247,18 +3255,10 @@ packages: '@visactor/vutils': 0.16.1 dev: false - /@visactor/vscale/0.16.5: - resolution: {integrity: sha512-kBOprM78Geh76ojxTGYAp39wk6OtHl3HD8NNauZ2ySwdJ0+PHPY+xlUVraz5rZapME8QX4raSq8VuvoOXn5yZw==} + /@visactor/vscale/0.16.6: + resolution: {integrity: sha512-lKCZ2pDJMNx7UMI9EEYuwuO+gMmYqF3V9wGqcwdRhxMmzRtuFyPAyx/MoqVj9/u3CAguwhYk8gjuzsT36X5AvQ==} dependencies: - '@visactor/vutils': 0.16.5 - - /@visactor/vutils-extension/1.5.1: - resolution: {integrity: sha512-YDaQxD95sFJ9dzvUXQdFLHjY3L76xisWTLqxPD8SC7luvjufOX53SfGxd6f9zn2/6Zh6kU/n79C8Iga8CJv2xA==} - dependencies: - '@visactor/vrender-core': 0.16.8 - '@visactor/vrender-kits': 0.16.8 - '@visactor/vscale': 0.16.5 - '@visactor/vutils': 0.16.5 + '@visactor/vutils': 0.16.6 /@visactor/vutils-extension/1.5.1-alpha.0: resolution: {integrity: sha512-4qtND+1Djatb5zVzAAbRX+WAKveO2SgEyJhnTzL/gWv7Elc+QYP06VmPaQy6ZnLHmxx6bsnZn1yFitz6fifmig==} @@ -3269,6 +3269,14 @@ packages: '@visactor/vutils': 0.16.1 dev: false + /@visactor/vutils-extension/1.5.3: + resolution: {integrity: sha512-eGIfn10cLN7SUd1WooGqGbiRxlQ8VIbMZLI4gnHOebkmTxGPdOakfqIHe6VHEik58HBjMnK5rEQJZwz2rFuxZA==} + dependencies: + '@visactor/vrender-core': 0.16.9 + '@visactor/vrender-kits': 0.16.9 + '@visactor/vscale': 0.16.6 + '@visactor/vutils': 0.16.6 + /@visactor/vutils/0.15.14: resolution: {integrity: sha512-mZuJhXdDZqq5arqc/LfEmWOY6l7ErK1MurO8bR3vESxeCaQ18pN36iit15K2IMQVJuKZPnZ2ksw8+a1irXi/8A==} dependencies: @@ -3291,8 +3299,8 @@ packages: '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 - /@visactor/vutils/0.16.5: - resolution: {integrity: sha512-leYZYJk1oXI4yXqvJjJTyDGESJ/5thu1K+W82/cnT5NMr5aXRImdRsEKwKed9TbDyTnuZTKJkgYHj5ll9yBhQQ==} + /@visactor/vutils/0.16.6: + resolution: {integrity: sha512-jjWEvbaJ50mdXNx8aGYp7eXIJcN3Kcgdeygo2FsMSS6x+INAG15vxq2kycFtq+FvDk5R/5ND9+Rs1LYEWafxeA==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 @@ -3309,7 +3317,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5_@babel+core@7.20.12 magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 3.2.6_bey24emwuvidhf4fiqele7nite + vite: 3.2.6 transitivePeerDependencies: - supports-color dev: true diff --git a/docs/package.json b/docs/package.json index 26faaefb5..c9b4ebb08 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "dependencies": { "@arco-design/web-react": "2.46.1", "@visactor/vtable": "workspace:*", - "@visactor/vchart": "1.5.1", + "@visactor/vchart": "1.5.3", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", diff --git a/packages/vtable/package.json b/packages/vtable/package.json index b145502a1..fcda802ca 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -58,7 +58,7 @@ "cssfontparser": "^1.2.1" }, "devDependencies": { - "@visactor/vchart": "1.5.1", + "@visactor/vchart": "1.5.3", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -117,4 +117,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 7680ed3a6..91cbe978e 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -664,13 +664,13 @@ export class PivotChart extends BaseTable implements PivotChartAPI { * @returns */ private _generateCollectValuesConfig(columnKeys: string[], rowKeys: string[]): Record { - const option = this.options; + const indicators = this.internalProps.indicators; const collectValuesBy: Record = {}; - for (let i = 0, len = option.indicators?.length; i < len; i++) { - if (typeof option.indicators[i] !== 'string' && (option.indicators[i] as IChartColumnIndicator).chartSpec) { - if (option.indicatorsAsCol === false) { - const indicatorDefine = option.indicators[i] as IIndicator; + for (let i = 0, len = indicators?.length; i < len; i++) { + if (typeof indicators[i] !== 'string' && (indicators[i] as IChartColumnIndicator).chartSpec) { + if (this.options.indicatorsAsCol === false) { + const indicatorDefine = indicators[i] as IIndicator; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); @@ -732,7 +732,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { const yField = (indicatorDefine as IChartColumnIndicator).chartSpec.yField; collectValuesBy[yField] = { by: rowKeys, - range: (option.indicators[i] as IChartColumnIndicator).chartSpec.direction !== 'horizontal', // direction默认为'vertical' + range: (indicators[i] as IChartColumnIndicator).chartSpec.direction !== 'horizontal', // direction默认为'vertical' sumBy: (indicatorDefine as IChartColumnIndicator).chartSpec.stack !== false && columnKeys.concat((indicatorDefine as IChartColumnIndicator).chartSpec?.xField), // 逻辑严谨的话 这个concat的值也需要结合 chartSeries.direction来判断是xField还是yField @@ -743,7 +743,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; } } else { - const indicatorDefine = option.indicators[i] as IIndicator; + const indicatorDefine = indicators[i] as IIndicator; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); @@ -805,7 +805,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { const xField = (indicatorDefine as IChartColumnIndicator).chartSpec.xField; collectValuesBy[xField] = { by: columnKeys, - range: (option.indicators[i] as IChartColumnIndicator).chartSpec.direction === 'horizontal', // direction默认为'vertical' + range: (indicators[i] as IChartColumnIndicator).chartSpec.direction === 'horizontal', // direction默认为'vertical' sumBy: (indicatorDefine as IChartColumnIndicator).chartSpec.stack !== false && rowKeys.concat((indicatorDefine as IChartColumnIndicator).chartSpec?.yField), From f9b5cbe374d4643adb54fe2b303170b713f8ca8a Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 27 Oct 2023 18:28:24 +0800 Subject: [PATCH 10/11] feat: add stack type judgement --- packages/vtable/src/PivotChart.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 91cbe978e..2c0513788 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -673,6 +673,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { const indicatorDefine = indicators[i] as IIndicator; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'bar' || + (indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'area') && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); // 收集指标值的范围 collectValuesBy[indicatorDefine.indicatorKey] = { @@ -698,7 +700,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; const yField = chartSeries.yField; - chartSeries.stack !== false && (chartSeries.stack = true); //明确指定 chartSpec.stack为true + chartSeries.stack !== false && + (chartSeries.type === 'bar' || chartSeries.type === 'area') && + (chartSeries.stack = true); //明确指定 chartSpec.stack为true collectValuesBy[yField] = { by: rowKeys, range: chartSeries.direction !== 'horizontal', // direction默认为'vertical' @@ -727,6 +731,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'bar' || + (indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'area') && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); //下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同 const yField = (indicatorDefine as IChartColumnIndicator).chartSpec.yField; @@ -746,6 +752,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { const indicatorDefine = indicators[i] as IIndicator; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'bar' || + (indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'area') && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); // 收集指标值的范围 collectValuesBy[indicatorDefine.indicatorKey] = { @@ -771,7 +779,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; const xField = chartSeries.xField; - chartSeries.stack !== false && (chartSeries.stack = true); //明确指定 chartSpec.stack为true + chartSeries.stack !== false && + (chartSeries.type === 'bar' || chartSeries.type === 'area') && + (chartSeries.stack = true); //明确指定 chartSpec.stack为true collectValuesBy[xField] = { by: columnKeys, range: chartSeries.direction === 'horizontal', // direction默认为'vertical' @@ -800,6 +810,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { }; //明确指定 chartSpec.stack为true (indicatorDefine as IChartColumnIndicator).chartSpec?.stack !== false && + ((indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'bar' || + (indicatorDefine as IChartColumnIndicator).chartSpec?.type === 'area') && ((indicatorDefine as IChartColumnIndicator).chartSpec.stack = true); //下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同 const xField = (indicatorDefine as IChartColumnIndicator).chartSpec.xField; From 7e5cfb458379fba9996ec38aa83aa0d68ce3cf14 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 27 Oct 2023 13:19:04 +0000 Subject: [PATCH 11/11] build: prelease version 0.13.1 --- .../feat-checkbox-header_2023-10-27-09-27.json | 11 ----------- docs/package.json | 2 +- packages/vtable/CHANGELOG.json | 12 ++++++++++++ packages/vtable/CHANGELOG.md | 11 ++++++++++- packages/vtable/package.json | 4 ++-- 5 files changed, 25 insertions(+), 15 deletions(-) delete mode 100644 common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json diff --git a/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json b/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json deleted file mode 100644 index dde499392..000000000 --- a/common/changes/@visactor/vtable/feat-checkbox-header_2023-10-27-09-27.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "fix: stack default value is true\n\n", - "type": "patch", - "packageName": "@visactor/vtable" - } - ], - "packageName": "@visactor/vtable", - "email": "892739385@qq.com" -} \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index c9b4ebb08..49e749df7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,4 +38,4 @@ "globby": "11.1.0", "chokidar": "^3.5.0" } -} \ No newline at end of file +} diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index 284b4cfcc..ef299b716 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -1,6 +1,18 @@ { "name": "@visactor/vtable", "entries": [ + { + "version": "0.13.1", + "tag": "@visactor/vtable_v0.13.1", + "date": "Fri, 27 Oct 2023 13:15:39 GMT", + "comments": { + "patch": [ + { + "comment": "fix: stack default value is true\n\n" + } + ] + } + }, { "version": "0.13.0", "tag": "@visactor/vtable_v0.13.0", diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index 2a69678e2..ae78bc078 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -1,6 +1,15 @@ # Change Log - @visactor/vtable -This log was last generated on Wed, 25 Oct 2023 06:11:44 GMT and should not be manually modified. +This log was last generated on Fri, 27 Oct 2023 13:15:39 GMT and should not be manually modified. + +## 0.13.1 +Fri, 27 Oct 2023 13:15:39 GMT + +### Patches + +- fix: stack default value is true + + ## 0.13.0 Wed, 25 Oct 2023 06:11:44 GMT diff --git a/packages/vtable/package.json b/packages/vtable/package.json index fcda802ca..3f18d46cd 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable", - "version": "0.13.0", + "version": "0.13.1", "description": "canvas table width high performance", "keywords": [ "grid", @@ -117,4 +117,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +}