diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 395b6e346..8ede4d4b6 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/eslint-config': workspace:* '@internal/ts-config': workspace:* - '@visactor/vrender': workspace:0.14.2 - '@visactor/vrender-kits': workspace:0.12.16 + '@visactor/vrender': workspace:0.14.3 + '@visactor/vrender-kits': workspace:0.12.17 '@visactor/vutils': ~0.15.5 canvas: 2.11.2 d3-scale-chromatic: ^3.0.0 @@ -28,13 +28,13 @@ importers: dependencies: '@visactor/vrender': link:../../packages/vrender devDependencies: - '@antv/g': 5.18.12 + '@antv/g': 5.18.13 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/eslint-config': link:../../share/eslint-config '@internal/ts-config': link:../../share/ts-config '@visactor/vrender-kits': link:../../packages/vrender-kits - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 canvas: 2.11.2 d3-scale-chromatic: 3.0.0 dat.gui: 0.7.9 @@ -55,7 +55,7 @@ importers: '@types/react': 16.9.49 '@types/react-dom': 16.9.8 '@types/react-reconciler': ^0.28.2 - '@visactor/vrender': workspace:0.14.2 + '@visactor/vrender': workspace:0.14.3 '@visactor/vutils': ~0.15.5 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -67,7 +67,7 @@ importers: vite: 3.2.6 dependencies: '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 react-reconciler: 0.29.0_react@16.13.0 tslib: 2.6.1 devDependencies: @@ -93,8 +93,8 @@ importers: '@rushstack/eslint-patch': ~1.1.4 '@types/react': 16.9.49 '@types/react-dom': 16.9.8 - '@visactor/react-vrender': workspace:0.12.16 - '@visactor/vrender': workspace:0.14.2 + '@visactor/react-vrender': workspace:0.12.17 + '@visactor/vrender': workspace:0.14.3 '@visactor/vutils': ~0.15.5 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -107,7 +107,7 @@ importers: dependencies: '@visactor/react-vrender': link:../react-vrender '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 react-reconciler: 0.29.0_react@16.13.0 tslib: 2.6.1 devDependencies: @@ -151,7 +151,7 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 color-convert: 2.0.1 core-js: 3.31.1 inversify: 6.0.1 @@ -184,7 +184,7 @@ importers: '@internal/ts-config': workspace:* '@rushstack/eslint-patch': ~1.1.4 '@types/jest': ^26.0.0 - '@visactor/vrender': workspace:0.14.2 + '@visactor/vrender': workspace:0.14.3 '@visactor/vscale': ~0.15.5 '@visactor/vutils': ~0.15.5 eslint: ~8.18.0 @@ -197,8 +197,8 @@ importers: vite: 3.2.6 dependencies: '@visactor/vrender': link:../vrender - '@visactor/vscale': 0.15.5 - '@visactor/vutils': 0.15.5 + '@visactor/vscale': 0.15.7 + '@visactor/vutils': 0.15.7 inversify: 6.0.1 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -224,7 +224,7 @@ importers: '@types/node-fetch': 2.6.4 '@types/react': 16.9.49 '@types/react-dom': 16.9.8 - '@visactor/vrender': workspace:0.14.2 + '@visactor/vrender': workspace:0.14.3 '@visactor/vutils': ~0.15.5 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -240,7 +240,7 @@ importers: dependencies: '@resvg/resvg-js': 2.4.1 '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 canvas: 2.11.2 core-js: 3.31.1 inversify: 6.0.1 @@ -433,7 +433,7 @@ importers: '@types/merge2': 1.4.0 '@types/minimist': 1.2.2 '@types/ms': 0.7.31 - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/semver': 7.3.12 '@types/terser': 3.12.0 '@types/through2': 2.0.38 @@ -441,7 +441,7 @@ importers: '@types/vinyl': 2.0.7 '@types/yargs-parser': 21.0.0 eslint: 8.18.0 - ts-node: 10.9.0_kl3m3ivcdd7ltqtdoai45npyxa + ts-node: 10.9.0_cexlby4oa6uys4e6r2ufkcpuca typescript: 4.9.5 vitest: 0.30.1_less@4.1.3+terser@5.17.1 @@ -458,23 +458,23 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.19 - /@antv/g-camera-api/1.2.11: - resolution: {integrity: sha512-4mq+xu01Jh6Pz9ItqCE4SOMWDpp9rP70fKAgVxDdHUOll8JbcRfux23csgAlIb4s5sKSmvdRMAwCNbutiSIZfw==} + /@antv/g-camera-api/1.2.12: + resolution: {integrity: sha512-l52JpU6GCrQ2nWZg5ub7OSDSDs3OsE6Xf1XGgfjRygp2cm0HSJ+iAeSw1tcPYAqz6fDSBHe+FRTvOPIaflQ/Sg==} dependencies: - '@antv/g-lite': 1.2.11 + '@antv/g-lite': 1.2.12 '@antv/util': 3.3.4 gl-matrix: 3.4.3 tslib: 2.6.1 dev: true - /@antv/g-dom-mutation-observer-api/1.2.11: - resolution: {integrity: sha512-mrGdB4MMgtca1opSo7fbX5s2vDR5KGZjcaW/sA6CITzriIiX+WN9YSHkDTYf6oPyMsHyM+lqN26nqhm5DBc1oQ==} + /@antv/g-dom-mutation-observer-api/1.2.12: + resolution: {integrity: sha512-d7cJyVK3Qx86wIOaC63k9iPWnFH5Gp/geivicyieI7NjoEVE74KloTSFurJT5ZCrCVprzKAhwbLb/nGb+1D/jA==} dependencies: - '@antv/g-lite': 1.2.11 + '@antv/g-lite': 1.2.12 dev: true - /@antv/g-lite/1.2.11: - resolution: {integrity: sha512-kfvuHvSr/KF2fluBSp7Tv/aN0FTlhn985YkbiBS+p4Ps1kn6s+VGpkbkUnhgwBPgwRUqdE8Qp9CKRpVY9HEGpw==} + /@antv/g-lite/1.2.12: + resolution: {integrity: sha512-YHuOUyGZvWF8fj7c43MvWUigT++QuB+72tmTQckYzycS3PzN9FJMYEeI6jMuyC/HBgCSadizShpD2OVHHJ8suA==} dependencies: '@antv/g-math': 2.0.2 '@antv/util': 3.3.4 @@ -493,21 +493,21 @@ packages: tslib: 2.6.1 dev: true - /@antv/g-web-animations-api/1.2.11: - resolution: {integrity: sha512-gnHTnOxFNqLnFBPjbu3CZ4ZaDBIYx++6deEwaElhnuK9DL76eMmI2G8Xtvwxmbs6zquNHVRWTjHBVMojX6mDDA==} + /@antv/g-web-animations-api/1.2.12: + resolution: {integrity: sha512-skzBPmvHDMLJTepLYpR62hydAU36cx8gi0U/SG6AcqKr7ShAzlRKgFZ4w6bjiPBZjOJN/dKH5miTPy6BjzsLBA==} dependencies: - '@antv/g-lite': 1.2.11 + '@antv/g-lite': 1.2.12 '@antv/util': 3.3.4 tslib: 2.6.1 dev: true - /@antv/g/5.18.12: - resolution: {integrity: sha512-NuFP+D9bx73+KlZKJDRrPM8rR1Ocy4fK4Pbq4okRZBzYoZLn4IM2yNQFU3nnUBhjh5ONTaEHFl2pUvDxOBuXlA==} + /@antv/g/5.18.13: + resolution: {integrity: sha512-2HvwwLFuczyR5WImSEUNC8T+cKwsl21H3ymxdCnv1Vrgb3EDsgaN0Al0331V+FhfIHcMQiKb15v7z8cfzNGVkw==} dependencies: - '@antv/g-camera-api': 1.2.11 - '@antv/g-dom-mutation-observer-api': 1.2.11 - '@antv/g-lite': 1.2.11 - '@antv/g-web-animations-api': 1.2.11 + '@antv/g-camera-api': 1.2.12 + '@antv/g-dom-mutation-observer-api': 1.2.12 + '@antv/g-lite': 1.2.12 + '@antv/g-web-animations-api': 1.2.12 dev: true /@antv/util/3.3.4: @@ -1844,7 +1844,7 @@ packages: ajv: 6.12.6 debug: 4.3.4 espree: 9.6.1 - globals: 13.20.0 + globals: 13.21.0 ignore: 5.2.4 import-fresh: 3.3.0 js-yaml: 4.1.0 @@ -1913,7 +1913,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 jest-message-util: 26.6.2 jest-util: 26.6.2 @@ -1928,7 +1928,7 @@ packages: '@jest/test-result': 26.6.2 '@jest/transform': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 ansi-escapes: 4.3.2 chalk: 4.1.2 exit: 0.1.2 @@ -1968,7 +1968,7 @@ packages: '@jest/test-result': 26.6.2 '@jest/transform': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 ansi-escapes: 4.3.2 chalk: 4.1.2 exit: 0.1.2 @@ -2016,7 +2016,7 @@ packages: dependencies: '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 jest-mock: 26.6.2 /@jest/fake-timers/24.9.0: @@ -2034,7 +2034,7 @@ packages: dependencies: '@jest/types': 26.6.2 '@sinonjs/fake-timers': 6.0.1 - '@types/node': 20.4.9 + '@types/node': 20.5.0 jest-message-util: 26.6.2 jest-mock: 26.6.2 jest-util: 26.6.2 @@ -2221,7 +2221,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/yargs': 15.0.15 chalk: 4.1.2 @@ -2454,7 +2454,7 @@ packages: dependencies: '@babel/core': 7.20.12 '@babel/helper-module-imports': 7.22.5 - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 '@types/babel__core': 7.20.0 rollup: 3.20.5 dev: false @@ -2468,7 +2468,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 commondir: 1.0.1 estree-walker: 2.0.2 glob: 8.1.0 @@ -2486,7 +2486,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 '@types/resolve': 1.20.2 deepmerge: 4.3.1 is-builtin-module: 3.2.1 @@ -2504,7 +2504,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 magic-string: 0.27.0 rollup: 3.20.5 dev: false @@ -2537,7 +2537,7 @@ packages: tslib: optional: true dependencies: - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 resolve: 1.22.4 rollup: 3.20.5 typescript: 4.9.5 @@ -2552,7 +2552,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 5.0.2_rollup@3.20.5 + '@rollup/pluginutils': 5.0.3_rollup@3.20.5 make-dir: 3.1.0 mime: 3.0.0 rollup: 3.20.5 @@ -2566,8 +2566,8 @@ packages: picomatch: 2.3.1 dev: true - /@rollup/pluginutils/5.0.2_rollup@3.20.5: - resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + /@rollup/pluginutils/5.0.3_rollup@3.20.5: + resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^1.20.0||^2.0.0||^3.0.0 @@ -2677,7 +2677,7 @@ packages: /@types/clean-css/4.2.6: resolution: {integrity: sha512-Ze1tf+LnGPmG6hBFMi0B4TEB0mhF7EiMM5oyjLDNPE9hxrPU0W+5+bHvO+eFPA+bt0iC1zkQMoU/iGdRVjcRbw==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 source-map: 0.6.1 dev: true @@ -2697,13 +2697,13 @@ packages: /@types/fs-extra/9.0.13: resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 dev: true /@types/glob-stream/8.0.0: resolution: {integrity: sha512-fxTWwdQmX9LWSHD7ZLlv3BHR992mKcVcDnT/2v+l/QZZo7TfDdyasqlSYVzOnMGWhRbrWeWkbj/mgezFjKynhw==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/picomatch': 2.3.0 '@types/streamx': 2.9.1 dev: true @@ -2711,18 +2711,18 @@ packages: /@types/glob-watcher/5.0.2: resolution: {integrity: sha512-MZeh2nIzibl/euv5UV0femkGzcKTSE4G2+zv48d6ymeitWwCx52+4X+FqzML9oH2mQnPs+N/JHp3CsBPj1x1Ug==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 dev: true /@types/graceful-fs/4.1.6: resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 /@types/gulp-if/0.0.34: resolution: {integrity: sha512-r2A04hHDC+ZWMRAm+3q6/UeC3ggvl+TZm9P1+2umnp4q9bOlBmUQnR178Io3c0DkZPQAwup8VNtOvmvaWCpP5w==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/vinyl': 2.0.7 dev: true @@ -2736,7 +2736,7 @@ packages: /@types/gulp-sourcemaps/0.0.35: resolution: {integrity: sha512-vUBuizwA4CAV3Mke0DJYHQxyN4YOB1aAql284qAO7Et7fe0hmnPi/R9Fhu2UhxMuSxAwFktsJUOQk5dJHOU1eA==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/vinyl': 2.0.7 dev: true @@ -2790,7 +2790,7 @@ packages: /@types/merge2/1.4.0: resolution: {integrity: sha512-MRHDvln2ldZELrUC8n1PGaQzZ33aNh8uDcsGehREW0zR1Fr818a4/JTZjO9eloHPPxnpUp8fz/YFTRc5CWm7Xw==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 dev: true /@types/minimatch/5.1.2: @@ -2808,7 +2808,7 @@ packages: /@types/node-fetch/2.6.4: resolution: {integrity: sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 form-data: 3.0.1 dev: true @@ -2816,8 +2816,8 @@ packages: resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==} dev: true - /@types/node/20.4.9: - resolution: {integrity: sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==} + /@types/node/20.5.0: + resolution: {integrity: sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==} /@types/normalize-package-data/2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -2870,7 +2870,7 @@ packages: /@types/streamx/2.9.1: resolution: {integrity: sha512-9bywzhouyedmci7WCIPFwJ8zASDnxt2gaVUy52X0p0Tt085IJSAEP0L6j4SSNeDMSLzpYu6cPz0GrJZ7kPJ6Bg==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 dev: true /@types/terser/3.12.0: @@ -2883,7 +2883,7 @@ packages: /@types/through2/2.0.38: resolution: {integrity: sha512-YFu+nHmjxMurkH1BSzA0Z1WrKDAY8jUKPZctNQn7mc+/KKtp2XxnclHFXxdB1m7Iqnzb5aywgP8TMK283LezGQ==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 dev: true /@types/undertaker-registry/1.0.1: @@ -2893,7 +2893,7 @@ packages: /@types/undertaker/1.2.8: resolution: {integrity: sha512-gW3PRqCHYpo45XFQHJBhch7L6hytPsIe0QeLujlnFsjHPnXLhJcPdN6a9368d7aIQgH2I/dUTPFBlGeSNA3qOg==} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/undertaker-registry': 1.0.1 async-done: 1.3.2 dev: true @@ -2902,7 +2902,7 @@ packages: resolution: {integrity: sha512-ctNcmmzbMIKooXjRkyyUCOu2Z4AyqibL+RhXoF3pb7K7j+ezItnakmpm31LymkYHSIM5ey0tjIFzTvFOTSBCGw==} dependencies: '@types/glob-stream': 8.0.0 - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/vinyl': 2.0.7 dev: true @@ -2910,7 +2910,7 @@ packages: resolution: {integrity: sha512-4UqPv+2567NhMQuMLdKAyK4yzrfCqwaTt6bLhHEs8PFcxbHILsrxaY63n4wgE/BRLDWDQeI+WcTmkXKExh9hQg==} dependencies: '@types/expect': 1.20.4 - '@types/node': 20.4.9 + '@types/node': 20.5.0 /@types/yargs-parser/21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} @@ -3049,17 +3049,17 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: '@typescript-eslint/types': 5.30.0 - eslint-visitor-keys: 3.4.2 + eslint-visitor-keys: 3.4.3 dev: false - /@visactor/vscale/0.15.5: - resolution: {integrity: sha512-D+xkZxvskGPS/4gte4Yuc0FozQJ4/ProFXyC8SC9KCBcaNRTp0FUc9mU7fX+q0swEbyrT15fXP2ay0kAH+38Lg==} + /@visactor/vscale/0.15.7: + resolution: {integrity: sha512-Jj3J4B6FT4sbWgUR+eoF1Qu+PPukwiVcSEix1rbNcCkLPXQzKkRXVXojDwscNSALdmSpnrHjw8VNIQpnHP/uyw==} dependencies: - '@visactor/vutils': 0.15.5 + '@visactor/vutils': 0.15.7 dev: false - /@visactor/vutils/0.15.5: - resolution: {integrity: sha512-hw65mJCt1aRfrRuGFlW4QPXCi9cHiRvV3iioWLVw19VQg/B8lZVud3+Rwo/W/z88PMqiNUN5BPwGkBmHK0IwYg==} + /@visactor/vutils/0.15.7: + resolution: {integrity: sha512-f+IoDJpOys6TVFR6HoVsCTb0hI3GnEIsECzrNDFMmca/POP4oZ24rC/bCkyNGF/FUqAckynvQLv6q9IdMuyzVQ==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 @@ -3525,7 +3525,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.21.10 - caniuse-lite: 1.0.30001519 + caniuse-lite: 1.0.30001521 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -3816,8 +3816,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001519 - electron-to-chromium: 1.4.490 + caniuse-lite: 1.0.30001521 + electron-to-chromium: 1.4.494 node-releases: 2.0.13 update-browserslist-db: 1.0.11_browserslist@4.21.10 @@ -3904,8 +3904,8 @@ packages: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} - /caniuse-lite/1.0.30001519: - resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==} + /caniuse-lite/1.0.30001521: + resolution: {integrity: sha512-fnx1grfpEOvDGH+V17eccmNjucGUnCbP6KL+l5KqBIerp26WK/+RQ7CIDE37KGJjaPyqWXXlFUyKiWmvdNNKmQ==} /canvas/2.11.2: resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==} @@ -4561,8 +4561,8 @@ packages: safer-buffer: 2.1.2 dev: true - /electron-to-chromium/1.4.490: - resolution: {integrity: sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==} + /electron-to-chromium/1.4.494: + resolution: {integrity: sha512-KF7wtsFFDu4ws1ZsSOt4pdmO1yWVNWCFtijVYZPUeW4SV7/hy/AESjLn/+qIWgq7mHscNOKAwN5AIM1+YAy+Ww==} /electron/11.5.0: resolution: {integrity: sha512-WjNDd6lGpxyiNjE3LhnFCAk/D9GIj1rU3GSDealVShhkkkPR3Vh4q8ErXGDl1OAO/faomVa10KoFPUN/pLbNxg==} @@ -5054,8 +5054,8 @@ packages: resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==} engines: {node: '>=10'} - /eslint-visitor-keys/3.4.2: - resolution: {integrity: sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==} + /eslint-visitor-keys/3.4.3: + resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} /eslint/8.18.0: @@ -5073,7 +5073,7 @@ packages: escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 eslint-utils: 3.0.0_eslint@8.18.0 - eslint-visitor-keys: 3.4.2 + eslint-visitor-keys: 3.4.3 espree: 9.6.1 esquery: 1.5.0 esutils: 2.0.3 @@ -5081,7 +5081,7 @@ packages: file-entry-cache: 6.0.1 functional-red-black-tree: 1.0.1 glob-parent: 6.0.2 - globals: 13.20.0 + globals: 13.21.0 ignore: 5.2.4 import-fresh: 3.3.0 imurmurhash: 0.1.4 @@ -5097,7 +5097,7 @@ packages: strip-ansi: 6.0.1 strip-json-comments: 3.1.1 text-table: 0.2.0 - v8-compile-cache: 2.3.0 + v8-compile-cache: 2.4.0 transitivePeerDependencies: - supports-color @@ -5107,7 +5107,7 @@ packages: dependencies: acorn: 8.10.0 acorn-jsx: 5.3.2_acorn@8.10.0 - eslint-visitor-keys: 3.4.2 + eslint-visitor-keys: 3.4.3 /esprima/4.0.1: resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} @@ -5779,8 +5779,8 @@ packages: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} - /globals/13.20.0: - resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==} + /globals/13.21.0: + resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==} engines: {node: '>=8'} dependencies: type-fest: 0.20.2 @@ -5893,7 +5893,7 @@ packages: resolution: {integrity: sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==} engines: {node: '>=10'} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@types/vinyl': 2.0.7 istextorbinary: 3.3.0 replacestream: 4.0.3 @@ -6842,7 +6842,7 @@ packages: '@jest/environment': 26.6.2 '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 jest-mock: 26.6.2 jest-util: 26.6.2 jsdom: 16.7.0 @@ -6872,7 +6872,7 @@ packages: '@jest/environment': 26.6.2 '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 jest-mock: 26.6.2 jest-util: 26.6.2 @@ -6925,7 +6925,7 @@ packages: dependencies: '@jest/types': 26.6.2 '@types/graceful-fs': 4.1.6 - '@types/node': 20.4.9 + '@types/node': 20.5.0 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -6972,7 +6972,7 @@ packages: '@jest/source-map': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 co: 4.6.0 expect: 26.6.2 @@ -7002,7 +7002,7 @@ packages: '@jest/source-map': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 co: 4.6.0 expect: 26.6.2 @@ -7106,7 +7106,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 /jest-pnp-resolver/1.2.3_jest-resolve@24.9.0: resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==} @@ -7207,7 +7207,7 @@ packages: '@jest/environment': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 emittery: 0.7.2 exit: 0.1.2 @@ -7239,7 +7239,7 @@ packages: '@jest/environment': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 emittery: 0.7.2 exit: 0.1.2 @@ -7382,7 +7382,7 @@ packages: resolution: {integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==} engines: {node: '>= 10.14.2'} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 graceful-fs: 4.2.11 /jest-snapshot/24.9.0: @@ -7448,7 +7448,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 chalk: 4.1.2 graceful-fs: 4.2.11 is-ci: 2.0.0 @@ -7483,7 +7483,7 @@ packages: dependencies: '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.9 + '@types/node': 20.5.0 ansi-escapes: 4.3.2 chalk: 4.1.2 jest-util: 26.6.2 @@ -7501,7 +7501,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 merge-stream: 2.0.0 supports-color: 7.2.0 @@ -10222,7 +10222,7 @@ packages: typescript: 4.9.5 yargs-parser: 20.2.9 - /ts-node/10.9.0_kl3m3ivcdd7ltqtdoai45npyxa: + /ts-node/10.9.0_cexlby4oa6uys4e6r2ufkcpuca: resolution: {integrity: sha512-bunW18GUyaCSYRev4DPf4SQpom3pWH29wKl0sDk5zE7ze19RImEVhCW7K4v3hHKkUyfWotU08ToE2RS+Y49aug==} hasBin: true peerDependencies: @@ -10241,7 +10241,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 20.4.9 + '@types/node': 20.5.0 acorn: 8.10.0 acorn-walk: 8.2.0 arg: 4.1.3 @@ -10579,8 +10579,8 @@ packages: /v8-compile-cache-lib/3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} - /v8-compile-cache/2.3.0: - resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} + /v8-compile-cache/2.4.0: + resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==} /v8-to-istanbul/7.1.2: resolution: {integrity: sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==} @@ -10665,7 +10665,7 @@ packages: replace-ext: 1.0.1 dev: false - /vite-node/0.30.1_vyxotnqk6wev2645yt47o5pehq: + /vite-node/0.30.1_mvbvskp7gdyw7a32mvd4mncqbi: resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==} engines: {node: '>=v14.18.0'} hasBin: true @@ -10675,7 +10675,7 @@ packages: mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 - vite: 3.2.6_vyxotnqk6wev2645yt47o5pehq + vite: 3.2.6_mvbvskp7gdyw7a32mvd4mncqbi transitivePeerDependencies: - '@types/node' - less @@ -10719,7 +10719,7 @@ packages: fsevents: 2.3.2 dev: true - /vite/3.2.6_vyxotnqk6wev2645yt47o5pehq: + /vite/3.2.6_mvbvskp7gdyw7a32mvd4mncqbi: resolution: {integrity: sha512-nTXTxYVvaQNLoW5BQ8PNNQ3lPia57gzsQU/Khv+JvzKPku8kNZL6NMUR/qwXhMG6E+g1idqEPanomJ+VZgixEg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -10744,7 +10744,7 @@ packages: terser: optional: true dependencies: - '@types/node': 20.4.9 + '@types/node': 20.5.0 esbuild: 0.15.18 less: 4.1.3 postcss: 8.4.21 @@ -10788,7 +10788,7 @@ packages: dependencies: '@types/chai': 4.3.5 '@types/chai-subset': 1.3.3 - '@types/node': 20.4.9 + '@types/node': 20.5.0 '@vitest/expect': 0.30.1 '@vitest/runner': 0.30.1 '@vitest/snapshot': 0.30.1 @@ -10809,8 +10809,8 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.0 tinypool: 0.4.0 - vite: 3.2.6_vyxotnqk6wev2645yt47o5pehq - vite-node: 0.30.1_vyxotnqk6wev2645yt47o5pehq + vite: 3.2.6_mvbvskp7gdyw7a32mvd4mncqbi + vite-node: 0.30.1_mvbvskp7gdyw7a32mvd4mncqbi why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/docs/demos/package.json b/docs/demos/package.json index 20f9690d5..aff61db4b 100644 --- a/docs/demos/package.json +++ b/docs/demos/package.json @@ -11,7 +11,7 @@ "devDependencies": { "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", - "@visactor/vrender-kits": "workspace:0.12.16", + "@visactor/vrender-kits": "workspace:0.12.17", "@visactor/vutils": "~0.15.5", "d3-scale-chromatic": "^3.0.0", "lodash": "4.17.21", @@ -28,6 +28,6 @@ "@antv/g": "^5.7.4" }, "dependencies": { - "@visactor/vrender": "workspace:0.14.2" + "@visactor/vrender": "workspace:0.14.3" } } diff --git a/docs/demos/src/pages/arc.ts b/docs/demos/src/pages/arc.ts index cf6a6e412..fcb88836a 100644 --- a/docs/demos/src/pages/arc.ts +++ b/docs/demos/src/pages/arc.ts @@ -140,34 +140,36 @@ export const page = () => { // cap: false // })); - // graphics.push(createArc({ - // innerRadius: 60, - // outerRadius: 137.8, - // startAngle: 0, - // endAngle: Math.PI * 2, - // x: 200, - // y: 500, - // stroke: 'green', - // lineWidth: 2, - // fill: { - // x: 0.5, - // y: 0.5, - // startAngle: 0, - // endAngle: 6.283185307179586, - // stops: [ - // { offset: 0, color: 'red' }, - // { offset: 0.2, color: 'blue' }, - // { offset: 0.4, color: 'orange' }, - // { offset: 0.6, color: 'pink' }, - // { offset: 0.8, color: 'green' }, - // { offset: 1, color: 'purple' } - // ], - // gradient: 'conical' - // }, - // cap: [false, true], - // cornerRadius: 26, - // forceShowCap: true - // })); + graphics.push( + createArc({ + innerRadius: 60, + outerRadius: 137.8, + startAngle: 0, + endAngle: Math.PI * 2, + x: 200, + y: 500, + stroke: 'green', + lineWidth: 2, + fill: { + x: 0.5, + y: 0.5, + startAngle: 0, + endAngle: 6.283185307179586, + stops: [ + { offset: 0, color: 'red' }, + { offset: 0.2, color: 'blue' }, + { offset: 0.4, color: 'orange' }, + { offset: 0.6, color: 'pink' }, + { offset: 0.8, color: 'green' }, + { offset: 1, color: 'purple' } + ], + gradient: 'conical' + }, + cap: [true, true], + cornerRadius: 26, + forceShowCap: true + }) + ); const stage = createStage({ canvas: 'main', diff --git a/docs/demos/src/pages/wrap-text.ts b/docs/demos/src/pages/wrap-text.ts index 94c45a3fe..faa5eca38 100644 --- a/docs/demos/src/pages/wrap-text.ts +++ b/docs/demos/src/pages/wrap-text.ts @@ -1,7 +1,7 @@ -import { createGroup, createStage, createWrapText, global } from '@visactor/vrender'; +import { createGroup, createStage, createWrapText, vglobal } from '@visactor/vrender'; import { addShapesToStage, colorPools } from '../utils'; -global.setEnv('browser'); +vglobal.setEnv('browser'); export const page = () => { const shapes: any = []; @@ -50,7 +50,7 @@ export const page = () => { "textBaseline": "top", // "width": 12, // "fontColor": "#333", - "maxLineWidth": 12, + "maxLineWidth": 6, "x": 200, "y": 200 }, diff --git a/packages/react-vrender-utils/CHANGELOG.json b/packages/react-vrender-utils/CHANGELOG.json index 176e676ad..a94831395 100644 --- a/packages/react-vrender-utils/CHANGELOG.json +++ b/packages/react-vrender-utils/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@visactor/react-vrender-utils", "entries": [ + { + "version": "0.12.17", + "tag": "@visactor/react-vrender-utils_v0.12.17", + "date": "Fri, 18 Aug 2023 08:54:52 GMT", + "comments": { + "dependency": [ + { + "comment": "Updating dependency \"@visactor/vrender\" from `0.14.2` to `0.14.3`" + }, + { + "comment": "Updating dependency \"@visactor/react-vrender\" from `0.12.16` to `0.12.17`" + } + ] + } + }, { "version": "0.12.16", "tag": "@visactor/react-vrender-utils_v0.12.16", diff --git a/packages/react-vrender-utils/CHANGELOG.md b/packages/react-vrender-utils/CHANGELOG.md index 1e00d6ac5..f199acfb7 100644 --- a/packages/react-vrender-utils/CHANGELOG.md +++ b/packages/react-vrender-utils/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/react-vrender-utils -This log was last generated on Fri, 11 Aug 2023 10:05:27 GMT and should not be manually modified. +This log was last generated on Fri, 18 Aug 2023 08:54:52 GMT and should not be manually modified. + +## 0.12.17 +Fri, 18 Aug 2023 08:54:52 GMT + +_Version update only_ ## 0.12.16 Fri, 11 Aug 2023 10:05:27 GMT diff --git a/packages/react-vrender-utils/package.json b/packages/react-vrender-utils/package.json index bb441b2a2..6484eba74 100644 --- a/packages/react-vrender-utils/package.json +++ b/packages/react-vrender-utils/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vrender-utils", - "version": "0.12.16", + "version": "0.12.17", "description": "", "sideEffects": false, "main": "cjs/index.js", @@ -25,8 +25,8 @@ "react-dom": "^18.2.0" }, "dependencies": { - "@visactor/vrender": "workspace:0.14.2", - "@visactor/react-vrender": "workspace:0.12.16", + "@visactor/vrender": "workspace:0.14.3", + "@visactor/react-vrender": "workspace:0.12.17", "@visactor/vutils": "~0.15.5", "react-reconciler": "^0.29.0", "tslib": "^2.3.1" diff --git a/packages/react-vrender/CHANGELOG.json b/packages/react-vrender/CHANGELOG.json index 6106b6d0b..7c7e41e13 100644 --- a/packages/react-vrender/CHANGELOG.json +++ b/packages/react-vrender/CHANGELOG.json @@ -1,6 +1,18 @@ { "name": "@visactor/react-vrender", "entries": [ + { + "version": "0.12.17", + "tag": "@visactor/react-vrender_v0.12.17", + "date": "Fri, 18 Aug 2023 08:54:52 GMT", + "comments": { + "dependency": [ + { + "comment": "Updating dependency \"@visactor/vrender\" from `0.14.2` to `0.14.3`" + } + ] + } + }, { "version": "0.12.16", "tag": "@visactor/react-vrender_v0.12.16", diff --git a/packages/react-vrender/CHANGELOG.md b/packages/react-vrender/CHANGELOG.md index a47a87ad4..63c04e9a9 100644 --- a/packages/react-vrender/CHANGELOG.md +++ b/packages/react-vrender/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/react-vrender -This log was last generated on Fri, 11 Aug 2023 10:05:27 GMT and should not be manually modified. +This log was last generated on Fri, 18 Aug 2023 08:54:52 GMT and should not be manually modified. + +## 0.12.17 +Fri, 18 Aug 2023 08:54:52 GMT + +_Version update only_ ## 0.12.16 Fri, 11 Aug 2023 10:05:27 GMT diff --git a/packages/react-vrender/package.json b/packages/react-vrender/package.json index 8e82682b0..17fe775b5 100644 --- a/packages/react-vrender/package.json +++ b/packages/react-vrender/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vrender", - "version": "0.12.16", + "version": "0.12.17", "description": "", "sideEffects": false, "main": "cjs/index.js", @@ -24,7 +24,7 @@ "react": "^18.2.0" }, "dependencies": { - "@visactor/vrender": "workspace:0.14.2", + "@visactor/vrender": "workspace:0.14.3", "@visactor/vutils": "~0.15.5", "react-reconciler": "^0.29.0", "tslib": "^2.3.1" diff --git a/packages/vrender-components/CHANGELOG.json b/packages/vrender-components/CHANGELOG.json index d4a7af4ad..133860df6 100644 --- a/packages/vrender-components/CHANGELOG.json +++ b/packages/vrender-components/CHANGELOG.json @@ -1,6 +1,38 @@ { "name": "@visactor/vrender-components", "entries": [ + { + "version": "0.14.3", + "tag": "@visactor/vrender-components_v0.14.3", + "date": "Fri, 18 Aug 2023 08:54:52 GMT", + "comments": { + "patch": [ + { + "comment": "feat: change labelLine of arc label from path mark to line mark to adapt to animation'" + }, + { + "comment": "feat: add legendItemAttributeUpdate event in legend" + }, + { + "comment": "feat(marker): add clipRange config. fixed VisActor/VChart#181" + }, + { + "comment": "feat: smartInvert support fillStrategy strokeStrategy" + }, + { + "comment": "fix: user's align config should be first" + }, + { + "comment": "fix: label shoud omit automaticly when label's width exceeds item's width, relate https://github.com/VisActor/VChart/issues/505" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@visactor/vrender\" from `0.14.2` to `0.14.3`" + } + ] + } + }, { "version": "0.14.2", "tag": "@visactor/vrender-components_v0.14.2", diff --git a/packages/vrender-components/CHANGELOG.md b/packages/vrender-components/CHANGELOG.md index 8106e503b..98ab519f4 100644 --- a/packages/vrender-components/CHANGELOG.md +++ b/packages/vrender-components/CHANGELOG.md @@ -1,6 +1,18 @@ # Change Log - @visactor/vrender-components -This log was last generated on Fri, 11 Aug 2023 10:05:27 GMT and should not be manually modified. +This log was last generated on Fri, 18 Aug 2023 08:54:52 GMT and should not be manually modified. + +## 0.14.3 +Fri, 18 Aug 2023 08:54:52 GMT + +### Patches + +- feat: change labelLine of arc label from path mark to line mark to adapt to animation' +- feat: add legendItemAttributeUpdate event in legend +- feat(marker): add clipRange config. fixed VisActor/VChart#181 +- feat: smartInvert support fillStrategy strokeStrategy +- fix: user's align config should be first +- fix: label shoud omit automaticly when label's width exceeds item's width, relate https://github.com/VisActor/VChart/issues/505 ## 0.14.2 Fri, 11 Aug 2023 10:05:27 GMT diff --git a/packages/vrender-components/__tests__/browser/examples/label-arc.ts b/packages/vrender-components/__tests__/browser/examples/label-arc.ts index 43366d9b9..e26cf650b 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-arc.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-arc.ts @@ -14,238 +14,238 @@ const pieGenerator = () => { _uid: 14, type: 'group', name: 'pie_9', - children: [ - { - attribute: { - fill: '#1f77b4', - x: 100, - y: 100, - startAngle: 0, - endAngle: 1.0927278795094932, - innerRadius: 0, - outerRadius: 80, - fillOpacity: 1 - }, - _uid: 52, - type: 'arc', - children: [] - }, - { - attribute: { - fill: '#aec7e8', - x: 100, - y: 100, - startAngle: 1.0927278795094932, - endAngle: 2.731819698773733, - innerRadius: 0, - outerRadius: 80, - fillOpacity: 1 - }, - _uid: 53, - type: 'arc', - children: [] - }, - { - attribute: { - fill: '#ff7f0e', - x: 100, - y: 100, - startAngle: 2.731819698773733, - endAngle: 5.463639397547466, - innerRadius: 0, - outerRadius: 80, - fillOpacity: 1 - }, - _uid: 54, - type: 'arc', - children: [] - }, - { - attribute: { - fill: '#ffbb78', - x: 100, - y: 100, - startAngle: 5.463639397547466, - endAngle: 6.283185307179586, - innerRadius: 0, - outerRadius: 80, - fillOpacity: 1 - }, - _uid: 55, - type: 'arc', - children: [] - } - ] // children: [ // { // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: -1.5707963267948966, - // endAngle: 1.357168026350791, - // outerRadius: 190.4, + // fill: '#1f77b4', + // x: 100, + // y: 100, + // startAngle: 0, + // endAngle: 1.0927278795094932, // innerRadius: 0, - // cornerRadius: 0, - // fill: '#1664FF', - // stroke: '#1664FF', - // pickable: true + // outerRadius: 80, + // fillOpacity: 1 // }, - // _uid: 15, + // _uid: 52, // type: 'arc', // children: [] // }, // { // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 1.357168026350791, - // endAngle: 3.0988669935009723, - // outerRadius: 190.4, + // fill: '#aec7e8', + // x: 100, + // y: 100, + // startAngle: 1.0927278795094932, + // endAngle: 2.731819698773733, // innerRadius: 0, - // cornerRadius: 0, - // fill: '#1AC6FF', - // stroke: '#1AC6FF', - // pickable: true + // outerRadius: 80, + // fillOpacity: 1 // }, - // _uid: 16, + // _uid: 53, // type: 'arc', // children: [] // }, // { // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 3.0988669935009723, - // endAngle: 3.609689958974673, - // outerRadius: 190.4, + // fill: '#ff7f0e', + // x: 100, + // y: 100, + // startAngle: 2.731819698773733, + // endAngle: 5.463639397547466, // innerRadius: 0, - // cornerRadius: 0, - // fill: '#FF8A00', - // stroke: '#FF8A00', - // pickable: true + // outerRadius: 80, + // fillOpacity: 1 // }, - // _uid: 17, + // _uid: 54, // type: 'arc', // children: [] // }, // { // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 3.609689958974673, - // endAngle: 3.9238492243336522, - // outerRadius: 190.4, + // fill: '#ffbb78', + // x: 100, + // y: 100, + // startAngle: 5.463639397547466, + // endAngle: 6.283185307179586, // innerRadius: 0, - // cornerRadius: 0, - // fill: '#3CC780', - // stroke: '#3CC780', - // pickable: true + // outerRadius: 80, + // fillOpacity: 1 // }, - // _uid: 18, - // type: 'arc', - // children: [] - // }, - // { - // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 3.9238492243336522, - // endAngle: 4.151928850984271, - // outerRadius: 190.4, - // innerRadius: 0, - // cornerRadius: 0, - // fill: '#7442D4', - // stroke: '#7442D4', - // pickable: true - // }, - // _uid: 19, - // type: 'arc', - // children: [] - // }, - // { - // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 4.151928850984271, - // endAngle: 4.329742995177454, - // outerRadius: 190.4, - // innerRadius: 0, - // cornerRadius: 0, - // fill: '#FFC400', - // stroke: '#FFC400', - // pickable: true - // }, - // _uid: 20, - // type: 'arc', - // children: [] - // }, - // { - // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 4.329742995177454, - // endAngle: 4.492477494633405, - // outerRadius: 190.4, - // innerRadius: 0, - // cornerRadius: 0, - // fill: '#304D77', - // stroke: '#304D77', - // pickable: true - // }, - // _uid: 21, - // type: 'arc', - // children: [] - // }, - // { - // attribute: { - // visible: true, - // lineWidth: 0, - // fillOpacity: 1, - // padAngle: 0, - // x: 388, - // y: 238, - // startAngle: 4.492477494633405, - // endAngle: 4.71238898038469, - // outerRadius: 190.4, - // innerRadius: 0, - // cornerRadius: 0, - // fill: '#B48DEB', - // stroke: '#B48DEB', - // pickable: true - // }, - // _uid: 22, + // _uid: 55, // type: 'arc', // children: [] // } // ] + children: [ + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: -1.5707963267948966, + endAngle: 1.357168026350791, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#1664FF', + stroke: '#1664FF', + pickable: true + }, + _uid: 15, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 1.357168026350791, + endAngle: 3.0988669935009723, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#1AC6FF', + stroke: '#1AC6FF', + pickable: true + }, + _uid: 16, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 3.0988669935009723, + endAngle: 3.609689958974673, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#FF8A00', + stroke: '#FF8A00', + pickable: true + }, + _uid: 17, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 3.609689958974673, + endAngle: 3.9238492243336522, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#3CC780', + stroke: '#3CC780', + pickable: true + }, + _uid: 18, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 3.9238492243336522, + endAngle: 4.151928850984271, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#7442D4', + stroke: '#7442D4', + pickable: true + }, + _uid: 19, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 4.151928850984271, + endAngle: 4.329742995177454, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#FFC400', + stroke: '#FFC400', + pickable: true + }, + _uid: 20, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 4.329742995177454, + endAngle: 4.492477494633405, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#304D77', + stroke: '#304D77', + pickable: true + }, + _uid: 21, + type: 'arc', + children: [] + }, + { + attribute: { + visible: true, + lineWidth: 0, + fillOpacity: 1, + padAngle: 0, + x: 388, + y: 238, + startAngle: 4.492477494633405, + endAngle: 4.71238898038469, + outerRadius: 190.4, + innerRadius: 0, + cornerRadius: 0, + fill: '#B48DEB', + stroke: '#B48DEB', + pickable: true + }, + _uid: 22, + type: 'arc', + children: [] + } + ] }; return spec; }; @@ -398,8 +398,9 @@ function createContent(stage: Stage) { baseMarkGroupName: pieSpec.name, data: pieSpec.children.map((c, index) => { return { - // text: latestData[index].type, - text: originData[index].id + text: 'test122344556778891234550987665544' + // text: latestData[index].type + // text: originData[index].id // fill: c.attribute.fill, // line: { // stroke: c.attribute.stroke @@ -417,16 +418,30 @@ function createContent(stage: Stage) { }, width: 800, height: 500, - position: 'outside', + // position: 'outside', // position: 'inside', + textStyle: { + // angle: 0 + fontSize: 16 + }, + line: { + line1MinLength: 30 + }, + layout: { + align: 'edge' + }, + + // centerOffset: 10, + + // smartInvert: false, + // coverEnable: false, // layout: { // strategy: 'none' // }, - // angle: 0, zIndex: 302 }); diff --git a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts index 211e49a57..8782073d5 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts @@ -607,6 +607,11 @@ function createContent(stage: Stage) { } ] }, + smartInvert: { + // strokeStrategy: 'similarSeries' + // brightColor: '#fff000', + // darkColor: '#dd0000' + }, zIndex: 302 }); diff --git a/packages/vrender-components/__tests__/browser/examples/mark-area.ts b/packages/vrender-components/__tests__/browser/examples/mark-area.ts index ea9b57e7a..07dcab9d3 100644 --- a/packages/vrender-components/__tests__/browser/examples/mark-area.ts +++ b/packages/vrender-components/__tests__/browser/examples/mark-area.ts @@ -22,6 +22,12 @@ export function run() { areaStyle: { cornerRadius: guiObject.cornerRadius } + }, + clipRange: { + x: 50, + y: 50, + width: 200, + height: 200 } }; diff --git a/packages/vrender-components/__tests__/browser/examples/mark-line.ts b/packages/vrender-components/__tests__/browser/examples/mark-line.ts index 124862812..09d0b5687 100644 --- a/packages/vrender-components/__tests__/browser/examples/mark-line.ts +++ b/packages/vrender-components/__tests__/browser/examples/mark-line.ts @@ -30,6 +30,12 @@ export function run() { refX: guiObject.labelRefX, refY: guiObject.labelRefY, refAngle: degreeToRadian(guiObject.labelRefAngle) + }, + clipRange: { + x: 50, + y: 50, + width: 200, + height: 200 } }; const markLine = new MarkLine({ diff --git a/packages/vrender-components/__tests__/browser/examples/mark-point.ts b/packages/vrender-components/__tests__/browser/examples/mark-point.ts index 0922e75ef..6f11bf529 100644 --- a/packages/vrender-components/__tests__/browser/examples/mark-point.ts +++ b/packages/vrender-components/__tests__/browser/examples/mark-point.ts @@ -89,6 +89,12 @@ export function run() { imageStyle: { image: `${window.location.origin}/__tests__/browser/sources/shape_logo.png` } + }, + clipRange: { + x: 50, + y: 50, + width: 200, + height: 200 } }; diff --git a/packages/vrender-components/__tests__/unit/legend/discrete.test.ts b/packages/vrender-components/__tests__/unit/legend/discrete.test.ts index 0521f0e67..b44f04fc9 100644 --- a/packages/vrender-components/__tests__/unit/legend/discrete.test.ts +++ b/packages/vrender-components/__tests__/unit/legend/discrete.test.ts @@ -1,4 +1,4 @@ -import type { IGraphic, Stage } from '@visactor/vrender'; +import type { IGraphic, IGroup, IText, Stage } from '@visactor/vrender'; import { DiscreteLegend } from '../../../src'; import { createCanvas } from '../../util/dom'; import { createStage } from '../../util/vrender'; @@ -227,4 +227,202 @@ describe('DiscreteLegend', () => { expect(legend.AABBBounds.width()).toBe(76); }); + + it("should omit when label's width exceeds item's width", () => { + const legend = new DiscreteLegend({ + layout: 'vertical', + title: { + align: 'start', + space: 12, + textStyle: { + fontSize: 12, + fontWeight: 'bold', + fill: '#2C3542' + } + }, + item: { + spaceCol: 10, + spaceRow: 10, + shape: { + space: 4, + style: { + size: 10, + cursor: 'pointer' + }, + state: { + selectedHover: { + opacity: 0.85 + }, + unSelected: { + fill: '#D8D8D8', + fillOpacity: 0.5 + } + } + }, + label: { + space: 4, + style: { + fontSize: 12, + fill: '#89909D', + cursor: 'pointer' + }, + state: { + selectedHover: { + opacity: 0.85 + }, + unSelected: { + fill: '#D8D8D8', + fillOpacity: 0.5 + } + } + }, + value: { + alignRight: true, + style: { + fontSize: 10, + fill: '#333', + cursor: 'pointer', + fillOpacity: 0.8 + }, + state: { + selectedHover: { + opacity: 0.85 + }, + unSelected: { + fill: '#D8D8D8' + }, + unselected: { + fill: '#d8d8d8' + } + } + }, + background: { + style: { + cursor: 'pointer' + }, + state: { + selectedHover: { + fill: 'gray', + fillOpacity: 0.7 + }, + unSelectedHover: { + fill: 'gray', + fillOpacity: 0.2 + } + } + }, + visible: true, + padding: 2, + width: 121.95 + }, + autoPage: true, + pager: { + space: 12, + handler: { + style: { + size: 10 + }, + space: 4 + } + }, + hover: true, + select: true, + selectMode: 'multiple', + allowAllCanceled: false, + items: [ + { + label: 'OneOneOneOneOne', + shape: { + fill: '#1664FF', + symbolType: 'square' + }, + value: '26.32%', + id: 'OneOneOneOneOne', + index: 0 + }, + { + label: 'Two', + shape: { + fill: '#1AC6FF', + symbolType: 'square' + }, + value: '23.68%', + id: 'Two', + index: 1 + }, + { + label: 'Three', + shape: { + fill: '#FF8A00', + symbolType: 'square' + }, + value: '15.79%', + id: 'Three', + index: 2 + }, + { + label: 'Four', + shape: { + fill: '#3CC780', + symbolType: 'square' + }, + value: '13.16%', + id: 'Four', + index: 3 + }, + { + label: 'Five', + shape: { + fill: '#7442D4', + symbolType: 'square' + }, + value: '10.53%', + id: 'Five', + index: 4 + }, + { + label: 'Six', + shape: { + fill: '#FFC400', + symbolType: 'square' + }, + value: '7.89%', + id: 'Six', + index: 5 + }, + { + label: 'Seven', + shape: { + fill: '#304D77', + symbolType: 'square' + }, + value: '2.63%', + id: 'Seven', + index: 6 + } + ], + zIndex: 500, + maxWidth: 813, + maxHeight: 416, + defaultSelected: ['OneOneOneOneOne', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'], + width: 147.6698455810547, + height: 186, + dx: 0, + dy: 0, + x: 100, + y: 42 + }); + + stage.defaultLayer.add(legend as unknown as IGraphic); + stage.render(); + + expect((legend.getElementsByName('legendItem')[0] as IGroup).AABBBounds.width()).toBe(121.95); + expect( + (legend.getElementsByName('legendItem')[0].getElementsByName('legendItemLabel')[0] as IText)._AABBBounds.width() + ).toBeCloseTo(57.143951416015625); + expect( + (legend.getElementsByName('legendItem')[0].getElementsByName('legendItemValue')[0] as IText).attribute + .maxLineWidth + ).toBeUndefined(); + }); }); diff --git a/packages/vrender-components/__tests__/unit/marker/area.test.ts b/packages/vrender-components/__tests__/unit/marker/area.test.ts index 68a39538e..f1ce47b47 100644 --- a/packages/vrender-components/__tests__/unit/marker/area.test.ts +++ b/packages/vrender-components/__tests__/unit/marker/area.test.ts @@ -1,5 +1,6 @@ -import { IGraphic, Stage, Polygon, Group } from '@visactor/vrender'; -import { Tag, MarkArea } from '../../../src'; +import type { IGraphic, Stage, Polygon, Group } from '@visactor/vrender'; +import type { Tag } from '../../../src'; +import { MarkArea } from '../../../src'; import { createCanvas } from '../../util/dom'; import { createStage } from '../../util/vrender'; @@ -42,7 +43,7 @@ describe('Marker', () => { stage.defaultLayer.add(markArea as unknown as IGraphic); stage.render(); - const markAreaContainer = markArea.children[0] as unknown as Group; + const markAreaContainer = (markArea.children[0] as unknown as Group).children[0] as unknown as Group; expect(markAreaContainer.childrenCount).toBe(2); // ploygon图元构造的area expect((markAreaContainer.children[0] as Polygon).attribute.points).toEqual([ diff --git a/packages/vrender-components/__tests__/unit/marker/line.test.ts b/packages/vrender-components/__tests__/unit/marker/line.test.ts index 9c85baf59..9758156fc 100644 --- a/packages/vrender-components/__tests__/unit/marker/line.test.ts +++ b/packages/vrender-components/__tests__/unit/marker/line.test.ts @@ -1,6 +1,6 @@ import { degreeToRadian } from '@visactor/vutils'; -import { Group, IGraphic, Stage } from '@visactor/vrender'; -import { Tag, Segment } from '../../../src'; +import type { Group, IGraphic, Stage } from '@visactor/vrender'; +import type { Tag, Segment } from '../../../src'; import { createCanvas } from '../../util/dom'; import { createStage } from '../../util/vrender'; import { MarkLine } from '../../../src/marker/line'; @@ -39,7 +39,7 @@ describe('Marker', () => { }); stage.defaultLayer.add(markLine as unknown as IGraphic); stage.render(); - const markLineContainer = markLine.children[0] as unknown as Group; + const markLineContainer = (markLine.children[0] as unknown as Group).children[0] as unknown as Group; expect(markLineContainer.childrenCount).toBe(2); // segement构造的line diff --git a/packages/vrender-components/__tests__/unit/marker/point.test.ts b/packages/vrender-components/__tests__/unit/marker/point.test.ts index 6aefa0a90..1b6a81e28 100644 --- a/packages/vrender-components/__tests__/unit/marker/point.test.ts +++ b/packages/vrender-components/__tests__/unit/marker/point.test.ts @@ -39,7 +39,7 @@ describe('Marker', () => { stage.defaultLayer.add(markPoint as unknown as IGraphic); stage.render(); - const markPointContainer = markPoint.children[0] as unknown as Group; + const markPointContainer = (markPoint.children[0] as unknown as Group).children[0] as unknown as Group; expect(markPointContainer.children[0].childrenCount).toBe(2); // segement构造的line expect((markPointContainer.children[0] as unknown as Segment).attribute.points).toEqual([ diff --git a/packages/vrender-components/package.json b/packages/vrender-components/package.json index 94ae2cdf8..f94d844c0 100644 --- a/packages/vrender-components/package.json +++ b/packages/vrender-components/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vrender-components", - "version": "0.14.2", + "version": "0.14.3", "description": "components library for dp visualization", "sideEffects": false, "main": "cjs/index.js", @@ -24,7 +24,7 @@ "prepublishOnly": "npm run build" }, "dependencies": { - "@visactor/vrender": "workspace:0.14.2", + "@visactor/vrender": "workspace:0.14.3", "@visactor/vutils": "~0.15.5", "@visactor/vscale": "~0.15.5", "inversify": "6.0.1" diff --git a/packages/vrender-components/src/axis/base.ts b/packages/vrender-components/src/axis/base.ts index 427bb7ad2..5deab9182 100644 --- a/packages/vrender-components/src/axis/base.ts +++ b/packages/vrender-components/src/axis/base.ts @@ -14,7 +14,7 @@ import type { IText } from '@visactor/vrender'; // eslint-disable-next-line no-duplicate-imports -import { createLine, createText, createGroup, createRect } from '@visactor/vrender'; +import { createLine, createText, createGroup } from '@visactor/vrender'; import type { Dict } from '@visactor/vutils'; // eslint-disable-next-line no-duplicate-imports import { abs, cloneDeep, get, isEmpty, isFunction, isNumberClose, merge, pi } from '@visactor/vutils'; @@ -96,6 +96,11 @@ export abstract class AxisBase extends AbstractCom layer: number, layerCount: number ): void; + protected abstract getLabelAlign( + vector: [number, number], + inside?: boolean, + angle?: number + ): { textAlign: TextAlignType; textBaseline: TextBaselineType }; /** * 坐标轴的一个特殊的方法，用于不更新场景树来获取更新属性后的包围盒 @@ -557,13 +562,9 @@ export abstract class AxisBase extends AbstractCom textStyle = isFunction(textStyle) ? merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle; - textStyle = merge( - { - textAlign: this.getTextAlign(vector), - textBaseline: this.getTextBaseline(vector, inside) - }, - textStyle - ) as Partial; + + const labelAlign = this.getLabelAlign(vector, inside, (textStyle as ITextGraphicAttribute).angle); + textStyle = merge(labelAlign, textStyle) as Partial; // 兼容原先 style.text 回调的方式 if (isFunction(textStyle.text)) { // @ts-ignore diff --git a/packages/vrender-components/src/axis/circle.ts b/packages/vrender-components/src/axis/circle.ts index 8b0c86529..7f4de8207 100644 --- a/packages/vrender-components/src/axis/circle.ts +++ b/packages/vrender-components/src/axis/circle.ts @@ -1,7 +1,7 @@ /** * @description 圆弧型坐标轴 */ -import type { IGroup, IText, TextBaselineType } from '@visactor/vrender'; +import type { IGroup, IText, TextAlignType, TextBaselineType } from '@visactor/vrender'; // eslint-disable-next-line no-duplicate-imports import { createCircle } from '@visactor/vrender'; import { isNil, get, merge, polarToCartesian, isNumberClose, isEmpty } from '@visactor/vutils'; @@ -361,4 +361,15 @@ export class CircleAxis extends AxisBase { ): void { return; } + + protected getLabelAlign( + vector: [number, number], + inside?: boolean, + angle?: number + ): { textAlign: TextAlignType; textBaseline: TextBaselineType } { + return { + textAlign: this.getTextAlign(vector), + textBaseline: this.getTextBaseline(vector) + }; + } } diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts index 0b371cc23..c1247ee5c 100644 --- a/packages/vrender-components/src/axis/line.ts +++ b/packages/vrender-components/src/axis/line.ts @@ -16,6 +16,7 @@ import { isValid, normalizePadding } from '@visactor/vutils'; +import type { TextAlignType } from '@visactor/vrender'; import { createRect, type IGroup, type INode, type IText, type TextBaselineType } from '@visactor/vrender'; import type { SegmentAttributes } from '../segment'; // eslint-disable-next-line no-duplicate-imports @@ -40,7 +41,7 @@ import { DEFAULT_AXIS_THEME } from './config'; import { AXIS_ELEMENT_NAME, DEFAULT_STATES } from './constant'; import { measureTextSize } from '../util'; import { autoHide as autoHideFunc } from './overlap/auto-hide'; -import { autoRotate as autoRotateFunc, rotateXAxis, rotateYAxis } from './overlap/auto-rotate'; +import { autoRotate as autoRotateFunc, getXAxisLabelAlign, getYAxisLabelAlign } from './overlap/auto-rotate'; import { autoLimit as autoLimitFunc } from './overlap/auto-limit'; import { alignAxisLabels } from '../util/align'; @@ -438,6 +439,27 @@ export class LineAxis extends AxisBase { return base; } + protected getLabelAlign( + vector: [number, number], + inside?: boolean, + angle?: number + ): { textAlign: TextAlignType; textBaseline: TextBaselineType } { + const orient = this.attribute.orient; + if (isValidNumber(angle)) { + if (orient === 'top' || orient === 'bottom') { + return getXAxisLabelAlign(orient, angle); + } + if (orient === 'left' || orient === 'right') { + return getYAxisLabelAlign(orient, angle); + } + } + + return { + textAlign: this.getTextAlign(vector), + textBaseline: this.getTextBaseline(vector, inside) + }; + } + protected beforeLabelsOverlap( labelShapes: IText[], labelData: AxisItem[], @@ -445,13 +467,7 @@ export class LineAxis extends AxisBase { layer: number, layerCount: number ): void { - // 调整对齐方式 - const orient = this.attribute.orient; - if (orient === 'left' || orient === 'right') { - rotateYAxis(orient, labelShapes); - } else if (orient === 'bottom' || orient === 'top') { - rotateXAxis(orient, labelShapes); - } + return; } protected handleLabelsOverlap( labelShapes: IText[], diff --git a/packages/vrender-components/src/axis/overlap/auto-rotate.ts b/packages/vrender-components/src/axis/overlap/auto-rotate.ts index 1cd4215da..b7636e25e 100644 --- a/packages/vrender-components/src/axis/overlap/auto-rotate.ts +++ b/packages/vrender-components/src/axis/overlap/auto-rotate.ts @@ -109,45 +109,41 @@ function genRotateBounds(items: IText[]) { }); } -export function rotateYAxis(orient: string, items: IText[]) { - // 0, 0-90, 90, 90-180, 180, 180-270, 270, 270-360, 360 - let align = ['right', 'right', 'center', 'left', 'center', 'left', 'center', 'right', 'right']; - let baseline = ['middle', 'middle', 'top', 'top', 'middle', 'middle', 'bottom', 'bottom', 'middle']; - - if (orient === 'right') { - // 0, 0-90, 90, 90-180, 180, 180-270, 270, 270-360, 360 - align = ['left', 'right', 'right', 'right', 'left', 'left', 'left', 'left', 'right']; - baseline = ['middle', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom']; +function clampAngle(angle = 0) { + if (angle < 0) { + while (angle < 0) { + angle += Math.PI * 2; + } } + if (angle > 0) { + while (angle >= Math.PI * 2) { + angle -= Math.PI * 2; + } + } + + return angle; +} + +export function rotateYAxis(orient: string, items: IText[]) { // 由于左右轴会裁切，所以上下两个label需要额外处理，做tighten处理 items.forEach((item, i) => { - let angle = item.attribute.angle || 0; - if (angle < 0) { - while (angle < 0) { - angle += Math.PI * 2; - } - } - if (angle > 0) { - while (angle >= Math.PI * 2) { - angle -= Math.PI * 2; - } - } - const step = angle / (Math.PI * 0.5); - let index; - if (step === Math.floor(step)) { - index = Math.floor(step) * 2; - } else { - index = Math.floor(step) * 2 + 1; - } item.setAttributes({ - textAlign: align[index] as TextAlignType, - textBaseline: baseline[index] as TextBaselineType, - angle: angle + ...getYAxisLabelAlign(orient, item.attribute.angle), + angle: clampAngle(item.attribute.angle) }); }); } export function rotateXAxis(orient: string, items: IText[]) { + items.forEach(item => { + item.setAttributes({ + ...getXAxisLabelAlign(orient, item.attribute.angle), + angle: clampAngle(item.attribute.angle) + }); + }); +} + +export function getXAxisLabelAlign(orient: string, angle: number = 0) { // 0, 0-90, 90, 90-180, 180, 180-270, 270, 270-360, 360 let align = ['center', 'left', 'left', 'left', 'center', 'right', 'right', 'right', 'left']; let baseline = ['top', 'top', 'middle', 'bottom', 'bottom', 'bottom', 'middle', 'top', 'top']; @@ -156,31 +152,44 @@ export function rotateXAxis(orient: string, items: IText[]) { align = ['center', 'right', 'right', 'right', 'center', 'left', 'left', 'left', 'right']; baseline = ['bottom', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom']; } - items.forEach(item => { - let angle = item.attribute.angle || 0; - // todo angle为0跳过会导致下轴高度有bug - // if (angle === 0) return; - if (angle < 0) { - while (angle < 0) { - angle += Math.PI * 2; - } - } - if (angle > 0) { - while (angle >= Math.PI * 2) { - angle -= Math.PI * 2; - } - } - const step = angle / (Math.PI * 0.5); - let index; - if (step === Math.floor(step)) { - index = Math.floor(step) * 2; - } else { - index = Math.floor(step) * 2 + 1; - } - item.setAttributes({ - textAlign: align[index] as TextAlignType, - textBaseline: baseline[index] as TextBaselineType, - angle - }); - }); + + angle = clampAngle(angle); + const step = angle / (Math.PI * 0.5); + let index; + if (step === Math.floor(step)) { + index = Math.floor(step) * 2; + } else { + index = Math.floor(step) * 2 + 1; + } + + return { + textAlign: align[index] as TextAlignType, + textBaseline: baseline[index] as TextBaselineType + }; +} + +export function getYAxisLabelAlign(orient: string, angle: number = 0) { + // 0, 0-90, 90, 90-180, 180, 180-270, 270, 270-360, 360 + let align = ['right', 'right', 'center', 'left', 'center', 'left', 'center', 'right', 'right']; + let baseline = ['middle', 'middle', 'top', 'top', 'middle', 'middle', 'bottom', 'bottom', 'middle']; + + if (orient === 'right') { + // 0, 0-90, 90, 90-180, 180, 180-270, 270, 270-360, 360 + align = ['left', 'right', 'right', 'right', 'left', 'left', 'left', 'left', 'right']; + baseline = ['middle', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom']; + } + + angle = clampAngle(angle); + const step = angle / (Math.PI * 0.5); + let index; + if (step === Math.floor(step)) { + index = Math.floor(step) * 2; + } else { + index = Math.floor(step) * 2 + 1; + } + + return { + textAlign: align[index] as TextAlignType, + textBaseline: baseline[index] as TextBaselineType + }; } diff --git a/packages/vrender-components/src/label/arc.ts b/packages/vrender-components/src/label/arc.ts index 6e495a787..2da89a990 100644 --- a/packages/vrender-components/src/label/arc.ts +++ b/packages/vrender-components/src/label/arc.ts @@ -1,10 +1,8 @@ import type { IBoundsLike } from '@visactor/vutils'; -import { merge } from '@visactor/vutils'; +import { merge, isValidNumber, isNil, isLess, isGreater, isNumberClose as isClose } from '@visactor/vutils'; import { LabelBase } from './base'; -import type { ArcLabelAttrs, IPoint, Quadrant, TextAlign } from './type'; -import type { BaseLabelAttrs } from './type'; -import type { TextAlignType, TextBaselineType, IText, IArcGraphicAttribute } from '@visactor/vrender'; -import { isValidNumber, isNil, isLess, isGreater, isNumberClose as isClose } from '@visactor/vutils'; +import type { ArcLabelAttrs, IPoint, Quadrant, TextAlign, BaseLabelAttrs } from './type'; +import type { IText, IArcGraphicAttribute, IGraphic } from '@visactor/vrender'; import { circlePoint, isQuadrantRight, @@ -14,7 +12,6 @@ import { checkBoundsOverlap, computeQuadrant } from './util'; -import type { IGraphic } from '@visactor/vrender'; export class ArcInfo { key!: string; @@ -34,10 +31,9 @@ export class ArcInfo { lastLabelY!: number; labelYRange!: [number, number]; labelText!: string | string[]; - pointA!: IPoint; - pointB!: IPoint; - pointC!: IPoint; - labelLinePath!: string; + pointA: IPoint; + pointB: IPoint; + pointC: IPoint; /** * 象限 */ @@ -45,8 +41,6 @@ export class ArcInfo { radian: number; middleAngle: number; k: number; - textAlign: TextAlignType; - textBaseline: TextBaselineType; angle: number; constructor( @@ -152,16 +146,19 @@ export class ArcLabel extends LabelBase { attribute: any, currentMarks?: IGraphic[], data?: any, - textBoundsArray?: any + textBoundsArray?: any, + ellipsisWidth?: number ) { // setArcs : 根据 arc 设置 datum 中对应的标签数据 this._arcLeft.clear(); this._arcRight.clear(); + this._ellipsisWidth = ellipsisWidth; const { width, height } = attribute as ArcLabelAttrs; + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; currentMarks.forEach((currentMark, index) => { const graphicAttribute = currentMark.attribute as IArcGraphicAttribute; const radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height); - const radius = this.computeRadius(radiusRatio, width, height); + const radius = this.computeRadius(radiusRatio, width, height, centerOffset); const center = { x: graphicAttribute?.x ?? 0, y: graphicAttribute?.y ?? 0 }; const item = data[index]; @@ -186,7 +183,7 @@ export class ArcLabel extends LabelBase { arc.pointA = circlePoint( (center as IPoint).x, (center as IPoint).y, - this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), + this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius, centerOffset), arc.middleAngle ); @@ -221,6 +218,7 @@ export class ArcLabel extends LabelBase { */ private _layoutInsideLabels(arcs: ArcInfo[], attribute: any, currentMarks: any[]) { const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 }; + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; const innerRadiusRatio = this.computeLayoutOuterRadius( currentMarks[0].attribute.innerRadius, attribute.width, @@ -236,8 +234,8 @@ export class ArcLabel extends LabelBase { arcs.forEach((arc: ArcInfo) => { const { labelSize, radian } = arc; - const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, 1); - const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, 1); + const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1); + const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1); const minRadian = connectLineRadian(outerRadius, labelSize.height); let limit; if (radian < minRadian) { @@ -269,7 +267,7 @@ export class ArcLabel extends LabelBase { // (arc.textAlign = 'center'), (arc.textBaseline = 'middle'); // arc.angle = degrees(arc.middleAngle); - arc.angle = arc.middleAngle; + arc.angle = attribute?.textStyle?.angle ?? arc.middleAngle; }); return arcs; } @@ -345,12 +343,12 @@ export class ArcLabel extends LabelBase { ) { arc.labelVisible = false; } - arc.angle = 0; + arc.angle = attribute?.textStyle?.angle ?? 0; - arc.labelLinePath = - `M${Math.round(arc.pointA.x)},${Math.round(arc.pointA.y)}` + - ` L${Math.round(arc.pointB.x)},${Math.round(arc.pointB.y)}` + - ` L${Math.round(arc.pointC.x)},${Math.round(arc.pointC.y)}`; + // arc.labelLinePath = + // `M${Math.round(arc.pointA.x)},${Math.round(arc.pointA.y)}` + + // ` L${Math.round(arc.pointB.x)},${Math.round(arc.pointB.y)}` + + // ` L${Math.round(arc.pointC.x)},${Math.round(arc.pointC.y)}`; }); return arcs; @@ -361,6 +359,7 @@ export class ArcLabel extends LabelBase { */ private _computeX(arc: ArcInfo, attribute: any, currentMarks: any[]) { const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 }; + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; const plotLayout = { width: center.x * 2, height: center.y * 2 }; const radiusRatio = this.computeLayoutOuterRadius( currentMarks[0].attribute.outerRadius, @@ -372,7 +371,7 @@ export class ArcLabel extends LabelBase { const line2MinLength = attribute.line.line2MinLength as number; const labelLayoutAlign = attribute.layout?.align; const spaceWidth = attribute.spaceWidth as number; - const align = this._computeAlign(arc, attribute) as TextAlign; + // const align = this._computeAlign(arc, attribute) as TextAlign; const { labelPosition, quadrant, pointB } = arc; if (!isValidNumber(pointB.x * pointB.y)) { @@ -380,7 +379,7 @@ export class ArcLabel extends LabelBase { labelPosition.x = NaN; arc.labelLimit = 0; } - const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height); + const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset); const flag = isQuadrantLeft(quadrant) ? -1 : 1; let cx: number = 0; const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x; @@ -404,21 +403,21 @@ export class ArcLabel extends LabelBase { break; } labelWidth = Math.max(this._ellipsisWidth, labelWidth); + arc.labelLimit = labelWidth; arc.pointC = { x: cx, y: labelPosition.y }; + const targetCenterOffset = 0.5 * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width); if (labelLayoutAlign === 'edge') { // edge 模式下的多行文本对齐方向与其他模式相反 // const alignOffset = this._computeAlignOffset(align, labelWidth, -flag); const alignOffset = 0; // 贴近画布边缘的布局结果可能会由于 cx 的小数 pixel 导致被部分裁剪，因此额外做计算 - labelPosition.x = flag > 0 ? plotLayout.width + alignOffset : alignOffset; + labelPosition.x = (flag > 0 ? plotLayout.width + alignOffset : alignOffset) - flag * targetCenterOffset; } else { // const alignOffset = this._computeAlignOffset(align, labelWidth, flag); const alignOffset = 0; - labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * arc.labelSize.width); + labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * targetCenterOffset); } - - arc.labelLimit = labelWidth; } private _computeAlignOffset(align: TextAlign, labelWidth: number, alignFlag: number): number { @@ -640,7 +639,8 @@ export class ArcLabel extends LabelBase { }; } else { const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 }; - const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height); + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; + const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset); const { labelPosition, quadrant } = arc; const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius); const rd = r - outerR; @@ -683,8 +683,9 @@ export class ArcLabel extends LabelBase { const line1MinLength = attribute.line.line1MinLength as number; const { width, height } = plotRect; + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; - const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height); + const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset); // 出现 y 方向挤压过度必然是由于画布上下某一端被占满，此时半径是确定的 const r = this._computeLayoutRadius(height / 2, attribute, currentMarks); // 所有坐标转化到以圆心为原点的坐标系计算 @@ -754,7 +755,8 @@ export class ArcLabel extends LabelBase { attribute.width, attribute.height ); - const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height); + const centerOffset = (attribute as ArcLabelAttrs)?.centerOffset ?? 0; + const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset); const outerR = radius + line1MinLength; const a = outerR - layoutArcGap; @@ -844,8 +846,10 @@ export class ArcLabel extends LabelBase { } } - protected computeRadius(r: number, width?: number, height?: number, k?: number): number { - return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (isNil(k) ? 1 : k); + protected computeRadius(r: number, width?: number, height?: number, centerOffset?: number, k?: number): number { + return ( + this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (isNil(k) ? 1 : k) + centerOffset ?? 0 + ); } protected computeLayoutRadius(width: number, height: number) { @@ -856,8 +860,8 @@ export class ArcLabel extends LabelBase { return r / (Math.min(width, height) / 2); } - private computeDatumRadius(width?: number, height?: number, outerRadius?: any): number { + private computeDatumRadius(width?: number, height?: number, outerRadius?: any, centerOffset?: number): number { const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height); //this.getRadius(state) - return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio; + return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio + centerOffset ?? 0; } } diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index b9357d2cc..5c3c623b6 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -1,13 +1,13 @@ /** * @description Label 基类 */ -import type { IGroup, Text, IGraphic, IText, FederatedPointerEvent, IColor, IPath, Path } from '@visactor/vrender'; -import { createText, IncreaseCount, AttributeUpdateType, createPath } from '@visactor/vrender'; +import type { IGroup, Text, IGraphic, IText, FederatedPointerEvent, IColor, ILine, Line } from '@visactor/vrender'; +import { createText, IncreaseCount, AttributeUpdateType, createLine } from '@visactor/vrender'; import type { IBoundsLike } from '@visactor/vutils'; -import { isFunction, isValidNumber, isEmpty, isValid, isString } from '@visactor/vutils'; +import { isFunction, isValidNumber, isEmpty, isValid, isString, merge } from '@visactor/vutils'; import { AbstractComponent } from '../core/base'; import type { PointLocationCfg } from '../core/type'; -import { labelSmartInvert } from '../util/labelSmartInvert'; +import { labelSmartInvert, contrastAccessibilityChecker } from '../util/labelSmartInvert'; import { getMarksByName, getNoneGroupMarksByName, traverseGroup } from '../util'; import { StateValue } from '../constant'; import type { Bitmap } from './overlap'; @@ -15,7 +15,6 @@ import { bitmapTool, boundToRange, canPlace, canPlaceInside, clampText, place } import type { BaseLabelAttrs, OverlapAttrs, ILabelAnimation, ArcLabelAttrs, LabelItem, SmartInvertAttrs } from './type'; import { DefaultLabelAnimation, getAnimationAttributes } from './animate/animate'; import type { ArcInfo } from './arc'; -import { merge } from '@visactor/vutils'; export abstract class LabelBase extends AbstractComponent { name = 'label'; @@ -33,7 +32,7 @@ export abstract class LabelBase extends AbstractCompon this._bmpTool = bmpTool; } - protected _graphicToText: Map; + protected _graphicToText: Map; protected _idToGraphic: Map; @@ -56,7 +55,8 @@ export abstract class LabelBase extends AbstractCompon attribute?: any, currentMarks?: IGraphic[], data?: any[], - textBoundsArray?: any[] + textBoundsArray?: any[], + ellipsisWidth?: number ): any { const arcs: ArcInfo[] = []; return arcs; @@ -258,22 +258,34 @@ export abstract class LabelBase extends AbstractCompon } if (this.attribute.type === 'arc') { + const ellipsisLabelAttribute = { + ...this.attribute.textStyle, + text: '...' + }; + const ellipsisText = this._createLabelText(ellipsisLabelAttribute); + const ellipsisTextBounds = this.getGraphicBounds(ellipsisText); + const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1; const arcs: ArcInfo[] = this.layoutArcLabels( position, this.attribute, Array.from(this._idToGraphic.values()), data, - textBoundsArray + textBoundsArray, + ellipsisWidth ); for (let i = 0; i < data.length; i++) { const textData = data[i]; - const basedArc = arcs.find(arc => arc.labelText === textData.text); - + const basedArc = arcs.find(arc => arc.refDatum.id === textData.id); const labelAttribute = { + visible: basedArc.labelVisible, x: basedArc.labelPosition.x, y: basedArc.labelPosition.y, - angle: (this.attribute as ArcLabelAttrs).angle ?? basedArc.angle, - labelLinePath: basedArc.labelLinePath + angle: basedArc.angle, + maxLineWidth: basedArc.labelLimit, + points: + basedArc?.pointA && basedArc?.pointB && basedArc?.pointC + ? [basedArc.pointA, basedArc.pointB, basedArc.pointC] + : undefined }; labels[i].setAttributes(labelAttribute); @@ -350,24 +362,6 @@ export abstract class LabelBase extends AbstractCompon } } - // 尝试向内挤压 - if (clampForce) { - const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height); - if ( - !(dx === 0 && dy === 0) && - canPlace(bmpTool, bitmap, { - x1: text.AABBBounds.x1 + dx, - x2: text.AABBBounds.x2 + dx, - y1: text.AABBBounds.y1 + dy, - y2: text.AABBBounds.y2 + dy - }) - ) { - text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy }); - result.push(text); - continue; - } - } - let hasPlace: ReturnType = false; // 发生碰撞，根据策略寻找可放置的位置 for (let j = 0; j < strategy.length; j++) { @@ -451,18 +445,18 @@ export abstract class LabelBase extends AbstractCompon const easing = animationConfig.easing ?? DefaultLabelAnimation.easing; const delay = animationConfig.delay ?? 0; - const currentTextMap: Map = new Map(); - const prevTextMap: Map = this._graphicToText || new Map(); + const currentTextMap: Map = new Map(); + const prevTextMap: Map = this._graphicToText || new Map(); const texts = [] as IText[]; labels.forEach((text, index) => { - const labelLine: IPath = (text.attribute as ArcLabelAttrs)?.labelLinePath - ? (createPath({ + const labelLine: ILine = (text.attribute as ArcLabelAttrs)?.points + ? (createLine({ visible: text.attribute?.visible ?? true, stroke: (text.attribute as ArcLabelAttrs)?.line?.stroke ?? text.attribute?.fill, - lineWidth: 1, - path: (text.attribute as ArcLabelAttrs)?.labelLinePath - }) as Path) + lineWidth: (text.attribute as ArcLabelAttrs)?.line?.lineWidth ?? 1, + points: (text.attribute as ArcLabelAttrs)?.points + }) as Line) : undefined; const relatedGraphic = this._idToGraphic.get((text.attribute as LabelItem).id); const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter'; @@ -503,14 +497,13 @@ export abstract class LabelBase extends AbstractCompon const prevText = prevLabel.text; prevText.animate().to(text.attribute, duration, easing); if (prevLabel.labelLine) { - // prevLabel.labelLine.setAttributes({ path: (text.attribute as ArcLabelAttrs)?.labelLinePath }); - prevLabel.labelLine - .animate() - .to( - merge({}, prevLabel.labelLine.attribute, { path: (text.attribute as ArcLabelAttrs)?.labelLinePath }), - duration, - easing - ); + prevLabel.labelLine.animate().to( + merge({}, prevLabel.labelLine.attribute, { + points: (text.attribute as ArcLabelAttrs)?.points + }), + duration, + easing + ); } if ( animationConfig.increaseEffect !== false && @@ -531,7 +524,7 @@ export abstract class LabelBase extends AbstractCompon } else { prevLabel.text.setAttributes(text.attribute); if (prevLabel?.labelLine) { - prevLabel.labelLine.setAttributes({ path: (text.attribute as ArcLabelAttrs)?.labelLinePath }); + prevLabel.labelLine.setAttributes({ points: (text.attribute as ArcLabelAttrs)?.points }); } } } @@ -625,6 +618,14 @@ export abstract class LabelBase extends AbstractCompon protected _smartInvert(labels: IText[]) { const option = (this.attribute.smartInvert || {}) as SmartInvertAttrs; const { textType, contrastRatiosThreshold, alternativeColors } = option; + const fillStrategy = option.fillStrategy ?? 'invertSeries'; + const strokeStrategy = option.strokeStrategy ?? 'series'; + const brightColor = option.brightColor ?? '#ffffff'; + const darkColor = option.darkColor ?? '#000000'; + + if (fillStrategy === 'null' && strokeStrategy === 'null') { + return; + } for (let i = 0; i < labels.length; i++) { const label = labels[i]; @@ -633,62 +634,127 @@ export abstract class LabelBase extends AbstractCompon } const baseMark = this._idToGraphic.get((label.attribute as LabelItem).id); - let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds); + // let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds); - if (this.attribute.type === 'arc') { - if (this.attribute.position === 'inside') { - isInside = true; - } else { - isInside = false; - } - } + // if (this.attribute.type === 'arc') { + // if (this.attribute.position === 'inside') { + // isInside = true; + // } else { + // isInside = false; + // } + // } + + // if (!isInside) { + // continue; + // } /** - * stroke 的处理逻辑 - * 1. 当文本在图元内部时，有两种情况： - * - a. 未设置stroke：labelFill为前景色，baseMark填充色为背景色 - * - b. 设置了stroke：labelFill为前景色，labelStroke填充色为背景色 - * 2. 当文本在图元外部时，有两种情况： - * - a. 未设置stroke：此时设置strokeColor为backgroundColor。labelFill为前景色，labelStroke填充色为背景色。避免文字一半在图元内部，一半在图元外部时，在图元外部文字不可见。 - * - b. 设置了stroke：保持strokeColor。labelFill为前景色，labelStroke填充色为背景色。 - */ - if (label.attribute.stroke && label.attribute.lineWidth > 0) { - /** - * 1-b, 2-b - * 若label存在stroke，label填充色为前景色，label描边色为背景色 - * WCAG 2 字母周围的文本发光/光晕可用作背景颜色 - */ - label.setAttributes({ - fill: labelSmartInvert( - label.attribute.fill as IColor, - label.attribute.stroke as IColor, - textType, - contrastRatiosThreshold, - alternativeColors - ) - }); - } else if (isInside) { - /** - * 1-a - * label在图元内部时，label填充色为前景色，baseMark填充色为背景色 - */ - const backgroundColor = baseMark.attribute.fill as IColor; - const foregroundColor = label.attribute.fill as IColor; - label.setAttributes({ - fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) - }); - } else if (label.attribute.lineWidth > 0) { - /** - * 2-a - * 当文本在图元外部时，设置strokeColor为backgroundColor。labelFill为前景色，labelStroke填充色为背景色。 - */ - const backgroundColor = label.attribute.stroke as IColor; - const foregroundColor = label.attribute.fill as IColor; - label.setAttributes({ - stroke: baseMark.attribute.fill, - fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) - }); + * 增加smartInvert时fillStrategy和 strokeStrategy的四种策略： + * series（baseMark色）， + * invertSeries（执行智能反色）， + * similarSeries（智能反色的补色）， + * null（不执行智能反色，保持fill设置的颜色） */ + + const backgroundColor = baseMark.attribute.fill as IColor; + const foregroundColor = label.attribute.fill as IColor; + const seriesColor = backgroundColor; + const invertColor = labelSmartInvert( + foregroundColor, + backgroundColor, + textType, + contrastRatiosThreshold, + alternativeColors + ); + const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor; + + switch (fillStrategy) { + case 'null': + break; + case 'series': + label.setAttributes({ + fill: seriesColor + }); + break; + case 'invertSeries': + label.setAttributes({ + fill: invertColor + }); + break; + case 'similarSeries': + label.setAttributes({ + fill: simialrColor + }); + break; + } + + if (label.attribute.lineWidth === 0) { + continue; + } + switch (strokeStrategy) { + case 'null': + break; + case 'series': + label.setAttributes({ + stroke: seriesColor + }); + break; + case 'invertSeries': + label.setAttributes({ + stroke: invertColor + }); + break; + case 'similarSeries': + label.setAttributes({ + stroke: simialrColor + }); + break; } + // /** + // * stroke 的处理逻辑 + // * 1. 当文本在图元内部时，有两种情况： + // * - a. 未设置stroke：labelFill为前景色，baseMark填充色为背景色 + // * - b. 设置了stroke：labelFill为前景色，labelStroke填充色为背景色 + // * 2. 当文本在图元外部时，有两种情况： + // * - a. 未设置stroke：此时设置strokeColor为backgroundColor。labelFill为前景色，labelStroke填充色为背景色。避免文字一半在图元内部，一半在图元外部时，在图元外部文字不可见。 + // * - b. 设置了stroke：保持strokeColor。labelFill为前景色，labelStroke填充色为背景色。 + // */ + // if (label.attribute.stroke && label.attribute.lineWidth > 0) { + // /** + // * 1-b, 2-b + // * 若label存在stroke，label填充色为前景色，label描边色为背景色 + // * WCAG 2 字母周围的文本发光/光晕可用作背景颜色 + // */ + // label.setAttributes({ + // fill: labelSmartInvert( + // label.attribute.fill as IColor, + // label.attribute.stroke as IColor, + // textType, + // contrastRatiosThreshold, + // alternativeColors + // ) + // }); + // } else if (isInside) { + // /** + // * 1-a + // * label在图元内部时，label填充色为前景色，baseMark填充色为背景色 + // */ + // const backgroundColor = baseMark.attribute.fill as IColor; + // const foregroundColor = label.attribute.fill as IColor; + // label.setAttributes({ + // fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) + // }); + // } else if (label.attribute.lineWidth > 0) { + // /** + // * 2-a + // * 当文本在图元外部时，设置strokeColor为backgroundColor。labelFill为前景色，labelStroke填充色为背景色。 + // */ + // const backgroundColor = label.attribute.stroke as IColor; + // const foregroundColor = label.attribute.fill as IColor; + // label.setAttributes({ + // stroke: baseMark.attribute.fill, + // fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) + // }); + // } } } diff --git a/packages/vrender-components/src/label/type.ts b/packages/vrender-components/src/label/type.ts index 15815066f..5d000f248 100644 --- a/packages/vrender-components/src/label/type.ts +++ b/packages/vrender-components/src/label/type.ts @@ -133,6 +133,34 @@ export interface SmartInvertAttrs { * 自定义备选label颜色 */ alternativeColors?: string | string[]; + /** + * fillStrategy四种策略： + * - series（baseMark色）， + * - invertSeries（执行智能反色）， + * - similarSeries（智能反色的补色）， + * - null（不执行智能反色，保持fill设置的颜色） + * @default 'invertSeries' + */ + fillStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null'; + /** + * strokeStrategy的四种策略: + * - series（baseMark色）， + * - invertSeries（执行智能反色）， + * - similarSeries（智能反色的补色）， + * - null（不执行智能反色，保持fill设置的颜色） + * @default 'series' + */ + strokeStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null'; + /** + * 前景色与亮色具有对比度时，similarSeries使用该色 + * @default '#ffffff' + */ + brightColor?: string; + /** + * 前景色与暗色具有对比度时，similarSeries使用该色 + * @default '#000000' + */ + darkColor?: string; } export type PositionStrategy = { @@ -281,11 +309,16 @@ export interface ArcLabelAttrs extends BaseLabelAttrs { line?: IArcLabelLineSpec; /** 标签布局配置 */ layout?: IArcLabelLayoutSpec; - /** 标签引导线path */ - labelLinePath?: string; + /** 标签引导线点集 */ + points?: IPoint[]; + /** 饼图扇区中心偏移 */ + centerOffset?: number; } export interface IArcLabelLineSpec { + /** 引导线线宽 */ + lineWidth?: number; + /** 引导线颜色 */ stroke?: string; /** * 是否显示引导线 diff --git a/packages/vrender-components/src/legend/constant.ts b/packages/vrender-components/src/legend/constant.ts index 93f833421..72bafe6f8 100644 --- a/packages/vrender-components/src/legend/constant.ts +++ b/packages/vrender-components/src/legend/constant.ts @@ -18,7 +18,8 @@ export enum LegendStateValue { export enum LegendEvent { legendItemHover = 'legendItemHover', legendItemUnHover = 'legendItemUnHover', - legendItemClick = 'legendItemClick' + legendItemClick = 'legendItemClick', + legendItemAttributeUpdate = 'legendItemAttributeUpdate' } export enum LEGEND_ELEMENT_NAME { diff --git a/packages/vrender-components/src/legend/discrete/discrete.ts b/packages/vrender-components/src/legend/discrete/discrete.ts index 9cd001bc9..f2d964e4c 100644 --- a/packages/vrender-components/src/legend/discrete/discrete.ts +++ b/packages/vrender-components/src/legend/discrete/discrete.ts @@ -435,18 +435,31 @@ export class DiscreteLegend extends LegendBase { valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected); if (this._itemWidthByUser) { - valueShape.setAttribute( - 'maxLineWidth', + // 计算用来防止文本的宽度 + const layoutWidth = this._itemWidthByUser - - parsedPadding[1] - - parsedPadding[3] - - shapeSize - - shapeSpace - - labelShape.AABBBounds.width() - - labelSpace - - focusSpace - - valueSpace - ); + parsedPadding[1] - + parsedPadding[3] - + shapeSize - + shapeSpace - + labelSpace - + focusSpace - + valueSpace; + const valueBounds = valueShape.AABBBounds; + const labelBounds = labelShape.AABBBounds; + const valueWidth = valueBounds.width(); + const labelWidth = labelBounds.width(); + if (labelWidth > layoutWidth) { + if ((layoutWidth - valueWidth) / labelWidth > 0.4) { + // 设置一个值，如果剩余的宽度和 label 自身的比例不低于 0.4 的话，优先展示全 label + labelShape.setAttribute('maxLineWidth', layoutWidth - valueWidth); + } else { + valueShape.setAttribute('maxLineWidth', layoutWidth * 0.5); + labelShape.setAttribute('maxLineWidth', layoutWidth * 0.5); + } + } else { + valueShape.setAttribute('maxLineWidth', layoutWidth - labelWidth); + } if (valueAttr.alignRight) { valueShape.setAttributes({ // @ts-ignore @@ -678,12 +691,25 @@ export class DiscreteLegend extends LegendBase { // @ts-ignore const legendItem = target.delegate; + let attributeUpdate = false; + if ( + legendItem.hasState(LegendStateValue.unSelectedHover) || + legendItem.hasState(LegendStateValue.selectedHover) + ) { + attributeUpdate = true; + } legendItem.removeState(LegendStateValue.unSelectedHover); legendItem.removeState(LegendStateValue.selectedHover); legendItem .getChildren()[0] .getChildren() .forEach((child: any) => { + if ( + !attributeUpdate && + (child.hasState(LegendStateValue.unSelectedHover) || child.hasState(LegendStateValue.selectedHover)) + ) { + attributeUpdate = true; + } (child as unknown as IGraphic).removeState(LegendStateValue.unSelectedHover); (child as unknown as IGraphic).removeState(LegendStateValue.selectedHover); }); @@ -696,6 +722,9 @@ export class DiscreteLegend extends LegendBase { focusButton.setAttribute('visible', false); } + if (attributeUpdate) { + this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem); + } this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem); } }; @@ -781,20 +810,34 @@ export class DiscreteLegend extends LegendBase { }; private _setLegendItemState(legendItem: IGroup, stateName: string, keepCurrentStates = true) { + let attributeUpdate = false; + if (!legendItem.hasState(stateName)) { + attributeUpdate = true; + } legendItem.addState(stateName, keepCurrentStates); // TODO: 这个比较 hack legendItem .getChildren()[0] .getChildren() - .forEach(child => { + .forEach((child: IGraphic) => { if (child.name !== LEGEND_ELEMENT_NAME.focus) { + if (!attributeUpdate && !child.hasState(stateName)) { + attributeUpdate = true; + } (child as unknown as IGraphic).addState(stateName, keepCurrentStates); } }); + if (attributeUpdate) { + this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem); + } } private _removeLegendItemState(legendItem: IGroup, stateNames: string[]) { + let attributeUpdate = false; stateNames.forEach(name => { + if (!attributeUpdate && legendItem.hasState(name)) { + attributeUpdate = true; + } legendItem.removeState(name); }); // TODO: 这个比较 hack @@ -804,10 +847,16 @@ export class DiscreteLegend extends LegendBase { .forEach(child => { if (child.name !== LEGEND_ELEMENT_NAME.focus) { stateNames.forEach(name => { + if (!attributeUpdate && (child as unknown as IGraphic).hasState(name)) { + attributeUpdate = true; + } (child as unknown as IGraphic).removeState(name); }); } }); + if (attributeUpdate) { + this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem); + } } // 获取当前选中的图例项 diff --git a/packages/vrender-components/src/marker/base.ts b/packages/vrender-components/src/marker/base.ts index 5f2af20e3..befc882b4 100644 --- a/packages/vrender-components/src/marker/base.ts +++ b/packages/vrender-components/src/marker/base.ts @@ -1,10 +1,12 @@ import type { IGroup } from '@visactor/vrender'; import { createGroup } from '@visactor/vrender'; +import { isValid } from '@visactor/vutils'; import { AbstractComponent } from '../core/base'; import type { Tag } from '../tag'; import type { MarkerAttrs } from './type'; export abstract class Marker extends AbstractComponent> { + private _containerClip!: IGroup; private _container!: IGroup; protected _label!: Tag; @@ -13,8 +15,34 @@ export abstract class Marker extends AbstractComponent extends AbstractComponent implements IArc { if (capWidth > epsilon && outerRadius > epsilon) { return { startAngle: startAngle - sign * capAngle * startCap, - endAngle: endAngle + sign * capAngle * endCap + endAngle: endAngle + sign * capAngle * endCap, + sc: sign * capAngle * startCap, + ec: sign * capAngle * endCap }; } } diff --git a/packages/vrender/src/graphic/wrap-text.ts b/packages/vrender/src/graphic/wrap-text.ts index 319cd078f..4f5f49647 100644 --- a/packages/vrender/src/graphic/wrap-text.ts +++ b/packages/vrender/src/graphic/wrap-text.ts @@ -76,6 +76,7 @@ export class WrapText extends Text { if (maxLineWidth > 0) { for (let i = 0; i < lines.length; i++) { const str = lines[i] as string; + let needCut = true; // // 测量当前行宽度 // width = Math.min( // layoutObj.textMeasure.measureTextWidth(str, layoutObj.textOptions), @@ -110,6 +111,7 @@ export class WrapText extends Text { clip.str = ''; clip.width = 0; } + needCut = false; } linesLayout.push({ @@ -118,7 +120,7 @@ export class WrapText extends Text { }); if (clip.str.length === str.length) { // 不需要截断 - } else { + } else if (needCut) { const newStr = str.substring(clip.str.length); lines.splice(i + 1, 0, newStr); } diff --git a/packages/vrender/src/interface/graphic/arc.ts b/packages/vrender/src/interface/graphic/arc.ts index 4988901de..367ac8175 100644 --- a/packages/vrender/src/interface/graphic/arc.ts +++ b/packages/vrender/src/interface/graphic/arc.ts @@ -71,7 +71,7 @@ export interface IArc extends IGraphic { cache?: ICustomPath2D; getParsedCornerRadius: () => number; - getParsedAngle: () => { startAngle: number; endAngle: number }; + getParsedAngle: () => { startAngle: number; endAngle: number; sc?: number; ec?: number }; getParsePadAngle: ( startAngle: number, endAngle: number diff --git a/packages/vrender/src/render/contributions/render/arc-render.ts b/packages/vrender/src/render/contributions/render/arc-render.ts index 0c5aa6574..d031673a6 100644 --- a/packages/vrender/src/render/contributions/render/arc-render.ts +++ b/packages/vrender/src/render/contributions/render/arc-render.ts @@ -1,4 +1,4 @@ -import { abs, acos, atan2, cos, epsilon, min, pi, sin, sqrt, pi2 } from '@visactor/vutils'; +import { abs, acos, atan2, cos, epsilon, min, pi, sin, sqrt, pi2, isBoolean } from '@visactor/vutils'; import { inject, injectable, named } from 'inversify'; import { getTheme } from '../../../graphic/theme'; import { parseStroke } from '../../../common/utils'; @@ -17,7 +17,8 @@ import type { IRenderService, IGraphicRender, IGraphicRenderDrawParams, - IContributionProvider + IContributionProvider, + IConicalGradient } from '../../../interface'; import { cornerTangents, @@ -271,6 +272,19 @@ export class DefaultCanvasArcRender implements IGraphicRender { cap = arcAttribute.cap, forceShowCap = arcAttribute.forceShowCap } = arc.attribute; + // 判断是否是环形渐变，且有头部cap，那就偏移渐变色角度 + let conicalOffset = 0; + const tempChangeConicalColor = + ((isBoolean(cap) && cap) || cap[0]) && (fill as IGradientColor).gradient === 'conical'; + if (tempChangeConicalColor) { + const { sc, startAngle, endAngle } = arc.getParsedAngle(); + if (abs(endAngle - startAngle) < pi2 - epsilon) { + conicalOffset = sc || 0; + (fill as IConicalGradient).startAngle -= conicalOffset; + (fill as IConicalGradient).endAngle -= conicalOffset; + } + } + let beforeRenderContribitionsRuned = false; const { isFullStroke, stroke: arrayStroke } = parseStroke(stroke); if (doFill || isFullStroke) { @@ -388,7 +402,7 @@ export class DefaultCanvasArcRender implements IGraphicRender { } // 绘制cap - if (cap && forceShowCap) { + if (((isBoolean(cap) && cap) || cap[1]) && forceShowCap) { const { startAngle: sa, endAngle: ea } = arc.getParsedAngle(); const deltaAngle = abs(ea - sa); if (deltaAngle >= pi2 - epsilon) { @@ -476,6 +490,11 @@ export class DefaultCanvasArcRender implements IGraphicRender { strokeCb ); }); + + if (tempChangeConicalColor) { + (fill as IConicalGradient).startAngle += conicalOffset; + (fill as IConicalGradient).endAngle += conicalOffset; + } } draw(arc: IArc, renderService: IRenderService, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) {