From 9321c1942928ffde49f59fafc2ae5b52810681f8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 23 Jan 2024 16:41:35 +0800 Subject: [PATCH] feat: add image load task --- common/config/rush/pnpm-lock.yaml | 189 ++++++++++-------- docs/package.json | 2 +- packages/react-vtable/package.json | 4 +- packages/vtable-export/package.json | 4 +- packages/vtable/package.json | 8 +- packages/vtable/src/icons.ts | 10 + .../graphic/contributions/draw-interceptor.ts | 143 +++++++++++++ .../scenegraph/graphic/contributions/index.ts | 8 +- .../group-creater/cell-type/image-cell.ts | 12 +- 9 files changed, 283 insertions(+), 97 deletions(-) create mode 100644 packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 68f37d6b6..9b25279e4 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vtable-editors': workspace:* '@visactor/vtable-export': workspace:* @@ -37,7 +37,7 @@ importers: yargs: ^17.1.1 dependencies: '@arco-design/web-react': 2.46.1_yok4whjnfjlfyjmdmcaku5uzjq - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': link:../packages/vtable '@visactor/vtable-editors': link:../packages/vtable-editors '@visactor/vtable-export': link:../packages/vtable-export @@ -82,7 +82,7 @@ importers: '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 '@types/react-is': ^17.0.3 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vutils': ~0.17.1 '@vitejs/plugin-react': 3.1.0 @@ -133,7 +133,7 @@ importers: '@types/react': 18.2.46 '@types/react-dom': 18.2.18 '@types/react-is': 17.0.7 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -179,11 +179,11 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vdataset': ~0.17.1 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-components': 0.17.18-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.17.1 @@ -226,9 +226,9 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-components': 0.17.18-alpha.1 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': 0.17.3 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.17.3 @@ -249,7 +249,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 18.2.46 '@types/react-dom': 18.2.18 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -348,7 +348,7 @@ importers: '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 '@types/react-is': ^17.0.3 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@visactor/vtable': workspace:* '@visactor/vutils': ~0.17.1 '@vitejs/plugin-react': 3.1.0 @@ -402,7 +402,7 @@ importers: '@types/react': 18.2.46 '@types/react-dom': 18.2.18 '@types/react-is': 17.0.7 - '@visactor/vchart': 1.8.7 + '@visactor/vchart': 1.9.0-alpha.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.6.3 chai: 4.3.4 @@ -3354,23 +3354,23 @@ packages: resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==} dev: true - /@visactor/vchart/1.8.7: - resolution: {integrity: sha512-M0kFlZ17TcamZSRrO/8X45mjBxBPrPAQyJK2amKb4LR6yu2tJNMQJMVSUzC3TPeoyZBC6Qhthj0h6PLB88qTRA==} + /@visactor/vchart/1.9.0-alpha.1: + resolution: {integrity: sha512-SedXr+tAN+8V9X5S2StFThRFKLCDMA9qF9XMYESbwiimng8iYeF7wxlpBmeCLCrJSYqDs1lZTdogYKdmkJFMeQ==} dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-hierarchy': 0.10.8 - '@visactor/vgrammar-projection': 0.10.8 - '@visactor/vgrammar-sankey': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vgrammar-wordcloud': 0.10.8 - '@visactor/vgrammar-wordcloud-shape': 0.10.8 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-hierarchy': 0.11.3 + '@visactor/vgrammar-projection': 0.11.3 + '@visactor/vgrammar-sankey': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vgrammar-wordcloud': 0.11.3 + '@visactor/vgrammar-wordcloud-shape': 0.11.3 + '@visactor/vrender-components': 0.17.16 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - '@visactor/vutils-extension': 1.8.7 + '@visactor/vutils-extension': 1.9.0-alpha.1 /@visactor/vdataset/0.17.3: resolution: {integrity: sha512-uckfCq1gLvqUlbyi3p9GiY8qcv2uNZ2KzLxO0/CVfDUXZ1IsERT8363ue7vejctEpqEa112vgqYrw73qlumH9Q==} @@ -3393,95 +3393,120 @@ packages: simplify-geojson: 1.0.5 topojson-client: 3.1.0 - /@visactor/vgrammar-coordinate/0.10.8: - resolution: {integrity: sha512-AfewiepfTElin5G2pUuINXoDGHb1xVenIzGDDY4AfJsVRAaRqXLJv4tqBo1Qas9RqS5W3m77697J+b6ExvDLgQ==} + /@visactor/vgrammar-coordinate/0.11.3: + resolution: {integrity: sha512-m9CRwnBBirE20OL3ua73J655c+S7waOYz+bjHScQ+3PTaiXs6iCLfK90GMRWUQSAoDClNQQ/EDK60ry7XUgufw==} dependencies: - '@visactor/vgrammar-util': 0.10.8 + '@visactor/vgrammar-util': 0.11.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-core/0.10.8: - resolution: {integrity: sha512-lQIQBZhARyCOObYwXF8Miwnh8L6AsnGqZJ45P+1X/Pk3ZqUPBXjonW2fWcrgKVGaZ59G3P9OEp1rwErmIsrhBg==} + /@visactor/vgrammar-core/0.11.3: + resolution: {integrity: sha512-6AlPN/DARyf892mL2ixT5n/1tfQMVK4mVKQrjY5s4uP9XWHXNtwyZW1t1ABt6+j9/psAMErFepXcYWSdRkr9bA==} dependencies: '@visactor/vdataset': 0.17.3 - '@visactor/vgrammar-coordinate': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-components': 0.17.18-alpha.0 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-coordinate': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-components': 0.17.16 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-hierarchy/0.10.8: - resolution: {integrity: sha512-eXZgzCDbj+8YqgLgAKdS3ad3ZcpxsnLFeZibSkNKvgi8Wc5zHTZ2kf/IQ525t/0I/CtZlfccVfUkhA6O/QJXBg==} + /@visactor/vgrammar-hierarchy/0.11.3: + resolution: {integrity: sha512-gU3rXrtASTG02GanmqKAzJPEfBcJaAQ0F5rBkWBkYzT3nr4/x+WxDVv77xbJ//BsJRS7VXnDZ9TxddOCf4LT5A==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-projection/0.10.8: - resolution: {integrity: sha512-u6LLGcedly1ZlgcaAWakFJUBm5WcctrfYwQqi5vJ9iiCnKu9Yhw3y5wjlTcxFcTYpnPKyfucF7Sk0Px+w/Q6Xw==} + /@visactor/vgrammar-projection/0.11.3: + resolution: {integrity: sha512-XY+FsRp6rHVv5BumGsXgFmwfrDM+p13a9or4ltJckfdM9B1yzRgdBZXElk4rc5VuOlv0hVOUuwu3hu1nktUoCA==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 '@visactor/vutils': 0.17.3 d3-geo: 1.12.1 - /@visactor/vgrammar-sankey/0.10.8: - resolution: {integrity: sha512-cH1lcNU+N/wTtGYTh2ny21kQUaA0/zFFL2j4gUGh1dWx4jT1/jL+/ANDYTW7hAbMcQFrv+2pBrU4G4gQXfSMQg==} + /@visactor/vgrammar-sankey/0.11.3: + resolution: {integrity: sha512-ZJRwdlT0g6woxFtnW5TanXU9ybppV9KsQ2ISQKAC5ktgnE+KrhoMaUE/xcC7S0lQUbiEOtAgeLS8iBNXHukmYw==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-util/0.10.8: - resolution: {integrity: sha512-VgdeoX1yWYiJv/KXVRA2maMhiqTXfducGEwMq4HAJ6PWJDklQv2HovENZUpqynXRh/1VbgSN4O/dHryujMucNw==} + /@visactor/vgrammar-util/0.11.3: + resolution: {integrity: sha512-tNe7wPHk5PCoqYVyz6CSh9onmfcK/idKSG7KyC3owqjou8BaI+ThzedewiwPWB96gWwHjoLo5uG9kwcCGOni2Q==} dependencies: '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-wordcloud-shape/0.10.8: - resolution: {integrity: sha512-YTcMpnWSGcQo8SXQcPzjXkd8e3UuCKgyYcfpn4G5L+yvpYEza6DM+hGwKG0gL73qs2YTvFnO3nkdnmxmZwAoKw==} + /@visactor/vgrammar-wordcloud-shape/0.11.3: + resolution: {integrity: sha512-aMLS+sUO2S8k57Bfm/vypTokL4pzlYNCJX1tbUHh3bcoUyWqGveBwOkB1P6IzOD4TMMEDSLAA0bORoNfYI3aOw==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vgrammar-wordcloud/0.10.8: - resolution: {integrity: sha512-HXdXcG/pkFkQsKN+T2O6FLStl/ePjVTKOUZK5Kk+vQcK0+/v1R8eldv3b0aqoIuZLoMqc0ku4bPNHc7vmLQh5Q==} + /@visactor/vgrammar-wordcloud/0.11.3: + resolution: {integrity: sha512-z8hq+2P2pc1t5DGPEdgEAMoAffXayCye+W+Z8FRiIZflHdDlYOQrBL1gTMkh2EXXjZIYuf4qjslK4evdvrLKuQ==} dependencies: - '@visactor/vgrammar-core': 0.10.8 - '@visactor/vgrammar-util': 0.10.8 - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vgrammar-core': 0.11.3 + '@visactor/vgrammar-util': 0.11.3 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vutils': 0.17.3 - /@visactor/vrender-components/0.17.18-alpha.0: - resolution: {integrity: sha512-5YNPpKVmGhCR6aWcFHHgInMVNB8/oocNAUVR1LbxefrzCYcaohlutOll808K7twhKSEblpb0dynEQR+mVkGboQ==} + /@visactor/vrender-components/0.17.16: + resolution: {integrity: sha512-4aS6BklJUXK94n/hHA1785Cnt4nn8zt/bSaYWmmNQCEnHasy8g/W9ppWV9M4jPlaql/0edEzDruZZef004av/Q==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 - /@visactor/vrender-core/0.17.18-alpha.0: - resolution: {integrity: sha512-LBkfgp5/zmcaoJQRnk967Z4OaYfIfU8X71SPcmmksKm4nfS1rzb+tSodESoXofkdCOa5W1FF6hIFNMP31X+FsQ==} + /@visactor/vrender-components/0.17.18-alpha.1: + resolution: {integrity: sha512-LsEhO7xs6hnCSqvlKQqOZDvr8fUCfoeFrRT835flw+3OLsP+DpI7bEBegqFzNTZUxLM+GmMue7TVlQDZg+IclQ==} + dependencies: + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 + '@visactor/vscale': 0.17.3 + '@visactor/vutils': 0.17.3 + dev: false + + /@visactor/vrender-core/0.17.16: + resolution: {integrity: sha512-BKdGUuw6dlSGpTF3gApAxdW4Hzdld2WuDhhj2hY8RyVYcH0BaSZM1v25jPtTnOepBdT8t+DTGiHVKWKaairWOA==} + dependencies: + '@visactor/vutils': 0.17.3 + color-convert: 2.0.1 + + /@visactor/vrender-core/0.17.18-alpha.1: + resolution: {integrity: sha512-DbdBDjcF7m0CFKacKQfCgAmt8eoBxwZ6vUyWKqyIBLK5PFIFAbnxvZAxA5iw9/ORoaIrWbGkquYkN4HAGjKKnw==} dependencies: '@visactor/vutils': 0.17.3 color-convert: 2.0.1 + dev: false + + /@visactor/vrender-kits/0.17.16: + resolution: {integrity: sha512-meitvZwbcU2a5DKpUhYZ5yYeqnKXF1VJL4uCDc2t6LM2SQ45jLWqDmrilwoEJ1suj1a1hPlfJ1L/Y8CP6I3dLg==} + dependencies: + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.17.16 + '@visactor/vutils': 0.17.3 + roughjs: 4.5.2 - /@visactor/vrender-kits/0.17.18-alpha.0: - resolution: {integrity: sha512-aGp+fdXGeLuhbqkok9xzXlM4N2evdEubFyG+0vedV/ctfmqkZRAqWwzkoKsSVJ7dFM1jUrq0VPNWcqt3Wll1ag==} + /@visactor/vrender-kits/0.17.18-alpha.1: + resolution: {integrity: sha512-pmx/jMv1N9VO74BapbvB2lhtO8Fe/rpH/naFXjSZqmPmPUu35eGwY7dsEvcNVC+n6l289zmplB2tIQ04TqkAKQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.1 '@visactor/vutils': 0.17.3 roughjs: 4.5.2 + dev: false /@visactor/vscale/0.17.3: resolution: {integrity: sha512-05ESzGvJU4lS5Ndv8+rins05RaOr1eIRBnXwIdzAxv/77MTJ9X8GxRGl1y/nR14XPpPVd9vgdzYRTCbpL6hPHg==} @@ -3491,17 +3516,17 @@ packages: /@visactor/vutils-extension/1.8.5: resolution: {integrity: sha512-3DJMhGLmQ5Mk6VSxuLFKCzM9XIFkwGauU4el6skUY5qmmAbyZjOyneycAUiGCcbxZHvHpg1jyRk27Eipf4+bgQ==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.18-alpha.1 + '@visactor/vrender-kits': 0.17.18-alpha.1 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 dev: false - /@visactor/vutils-extension/1.8.7: - resolution: {integrity: sha512-o6Hw5+jqj9IzPS6babV0fyQ8RC9r2DHfvSx5fC/cEuHdvCVYjtzdHJHGmjJ42EAp4PGGUUn2MtGyaxFtzxSD5A==} + /@visactor/vutils-extension/1.9.0-alpha.1: + resolution: {integrity: sha512-4XCb57MyriONzSFUDYiluy2zBncyAgHTLQre5mWWKUT4il8C3hRQuKgNgmMSXCZ8T6ywUGClxDMXn/r6HMGKSQ==} dependencies: - '@visactor/vrender-core': 0.17.18-alpha.0 - '@visactor/vrender-kits': 0.17.18-alpha.0 + '@visactor/vrender-core': 0.17.16 + '@visactor/vrender-kits': 0.17.16 '@visactor/vscale': 0.17.3 '@visactor/vutils': 0.17.3 diff --git a/docs/package.json b/docs/package.json index e137e19ab..5e2ecb06f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "@visactor/vtable": "workspace:*", "@visactor/vtable-editors": "workspace:*", "@visactor/vtable-export": "workspace:*", - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index 419282ef2..994b2a2fd 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -52,7 +52,7 @@ "react-is": "^18.2.0" }, "devDependencies": { - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -96,4 +96,4 @@ "axios": "^1.4.0", "@types/react-is": "^17.0.3" } -} +} \ No newline at end of file diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json index 3263e7a3c..12d98f41f 100644 --- a/packages/vtable-export/package.json +++ b/packages/vtable-export/package.json @@ -40,7 +40,7 @@ "exceljs": "4.4.0" }, "devDependencies": { - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", @@ -85,4 +85,4 @@ "@types/react-is": "^17.0.3", "rollup-plugin-node-resolve": "5.2.0" } -} +} \ No newline at end of file diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 14f8385b2..8c62da3ef 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,9 +50,9 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender-core": "0.17.18-alpha.0", - "@visactor/vrender-kits": "0.17.18-alpha.0", - "@visactor/vrender-components": "0.17.18-alpha.0", + "@visactor/vrender-core": "0.17.18-alpha.1", + "@visactor/vrender-kits": "0.17.18-alpha.1", + "@visactor/vrender-components": "0.17.18-alpha.1", "@visactor/vutils-extension": "~1.8.5", "@visactor/vutils": "~0.17.1", "@visactor/vscale": "~0.17.1", @@ -61,7 +61,7 @@ }, "devDependencies": { "luxon": "*", - "@visactor/vchart": "1.8.7", + "@visactor/vchart": "1.9.0-alpha.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", diff --git a/packages/vtable/src/icons.ts b/packages/vtable/src/icons.ts index c82a6bcae..4c35247c5 100644 --- a/packages/vtable/src/icons.ts +++ b/packages/vtable/src/icons.ts @@ -228,6 +228,16 @@ const builtins = { cursor: 'pointer' }; }, + get loading_pic(): SvgIcon { + return { + type: 'svg', + svg: '', + width: 400, + height: 300, + name: 'loading_pic', + positionType: IconPosition.left + }; + }, //展开状态的按钮 向下三角 get expand(): SvgIcon { return { diff --git a/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts b/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts new file mode 100644 index 000000000..bc7a3ea8f --- /dev/null +++ b/packages/vtable/src/scenegraph/graphic/contributions/draw-interceptor.ts @@ -0,0 +1,143 @@ +import type { + IDrawItemInterceptorContribution, + IGraphic, + IRenderService, + IDrawContext, + IDrawContribution, + IGraphicRenderDrawParams, + IImage +} from '@src/vrender'; +import { injectable, createImage } from '@src/vrender'; +import * as icons from '../../../icons'; +import { calcKeepAspectRatioSize } from '../../utils/keep-aspect-ratio'; +let loadingImage: IImage; + +@injectable() +export class VTableDrawItemInterceptorContribution implements IDrawItemInterceptorContribution { + order: number = 1; + interceptors: IDrawItemInterceptorContribution[]; + constructor() { + this.interceptors = [new ImageDrawItemInterceptorContribution()]; + } + afterDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + for (let i = 0; i < this.interceptors.length; i++) { + if ( + this.interceptors[i].afterDrawItem && + this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params) + ) { + return true; + } + } + return false; + } + + beforeDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + // 【性能方案】判定写在外层,减少遍历判断耗时，10000条数据减少1ms + if ( + (!graphic.in3dMode || drawContext.in3dInterceptor) && + !graphic.shadowRoot && + !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic) + ) { + return false; + } + + for (let i = 0; i < this.interceptors.length; i++) { + if ( + this.interceptors[i].beforeDrawItem && + this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) + ) { + return true; + } + } + return false; + } +} + +export class ImageDrawItemInterceptorContribution implements IDrawItemInterceptorContribution { + order: number = 1; + + afterDrawItem( + graphic: IGraphic, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + if (graphic.type === 'image') { + this.drawItem(graphic, renderService, drawContext, drawContribution, params); + } + return false; + } + + protected drawItem( + graphic: IImage, + renderService: IRenderService, + drawContext: IDrawContext, + drawContribution: IDrawContribution, + params?: IGraphicRenderDrawParams + ): boolean { + const { image: url } = graphic.attribute; + if (!url || !graphic.resources) { + return false; + } + const res = graphic.resources.get(url); + if (res.state !== 'loading') { + return false; + } + + if (!loadingImage) { + const regedIcons = icons.get(); + const svg = (regedIcons.loading_pic as any).svg; + const width = (regedIcons.loading_pic as any).width; + const height = (regedIcons.loading_pic as any).height; + loadingImage = createImage({ + width, + height, + image: svg + }); + } + const { image: loadingUrl } = loadingImage.attribute; + if (!url || !loadingImage.resources) { + return false; + } + const loadingRes = loadingImage.resources.get(loadingUrl); + if (loadingRes.state !== 'success') { + return false; + } + + const { context } = drawContext; + context.highPerformanceSave(); + // 直接transform + graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true); + graphic.glyphHost && + graphic.glyphHost.parent && + context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, true); + + const b = graphic.AABBBounds; + + const { width, height } = calcKeepAspectRatioSize( + loadingRes.data.width, + loadingRes.data.height, + b.width(), + b.height() + ); + + context.drawImage(loadingRes.data, b.x1 + (b.width() - width) / 2, b.y1 + (b.height() - height) / 2, width, height); + + context.highPerformanceRestore(); + + return true; + } +} diff --git a/packages/vtable/src/scenegraph/graphic/contributions/index.ts b/packages/vtable/src/scenegraph/graphic/contributions/index.ts index d74d060ec..65648d490 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/index.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/index.ts @@ -5,7 +5,8 @@ import { RectRenderContribution, SplitRectBeforeRenderContribution, SplitRectAfterRenderContribution, - ContainerModule + ContainerModule, + DrawItemInterceptor } from '@src/vrender'; import { ChartRender, DefaultCanvasChartRender } from './chart-render'; import { AfterImageRenderContribution, BeforeImageRenderContribution } from './image-contribution-render'; @@ -25,6 +26,7 @@ import { ClipBodyGroupBeforeRenderContribution, ClipBodyGroupAfterRenderContribution } from './group-contribution-render'; +import { VTableDrawItemInterceptorContribution } from './draw-interceptor'; export default new ContainerModule((bind, unbind, isBound, rebind) => { // rect 渲染器注入contributions @@ -77,4 +79,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => { bind(GroupRenderContribution).toService(ClipBodyGroupBeforeRenderContribution); bind(ClipBodyGroupAfterRenderContribution).toSelf().inSingletonScope(); bind(GroupRenderContribution).toService(ClipBodyGroupAfterRenderContribution); + + // interceptor + bind(VTableDrawItemInterceptorContribution).toSelf().inSingletonScope(); + bind(DrawItemInterceptor).toService(VTableDrawItemInterceptorContribution); }); diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts index 140a6cef3..2effcf8ae 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts @@ -12,8 +12,6 @@ import { getProp, getFunctionalProp } from '../../utils/get-prop'; import { isValid } from '@visactor/vutils'; import { getQuadProps } from '../../utils/padding'; -const regedIcons = icons.get(); - export function createImageCellGroup( columnGroup: Group, xOrigin: number, @@ -335,7 +333,7 @@ function updateAutoSizingAndKeepAspectRatio( const originImage = image.resources.get(image.attribute.image).data; const { col, row } = cellGroup; - if (imageAutoSizing) { + if (imageAutoSizing && !isDamagePic(image)) { _adjustWidthHeight( col, row, @@ -345,8 +343,7 @@ function updateAutoSizingAndKeepAspectRatio( padding ); } - - if (keepAspectRatio) { + if (keepAspectRatio || isDamagePic(image)) { const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table); const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize( @@ -394,3 +391,8 @@ function updateAutoSizingAndKeepAspectRatio( } } } + +function isDamagePic(image: IImage) { + const regedIcons = icons.get(); + return image.attribute.image === (regedIcons.damage_pic as any).svg; +}