From 63f1b2cf65be8e4747f2ed497bc1a2a10abc117e Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 24 Jul 2023 23:23:22 +0800 Subject: [PATCH 1/2] feat(dataZoom): consider size startHandler and endHandler when layout --- common/config/rush/pnpm-lock.yaml | 208 +++++++++--------- .../browser/examples/data-zoom-preview-v.ts | 7 +- .../src/data-zoom/config.ts | 4 +- .../src/data-zoom/data-zoom.ts | 48 +++- packages/vrender/vite/vite.config.ts | 36 ++- 5 files changed, 184 insertions(+), 119 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 7020f2e3f..a6d76ad32 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -28,13 +28,13 @@ importers: dependencies: '@visactor/vrender': link:../../packages/vrender devDependencies: - '@antv/g': 5.18.4 + '@antv/g': 5.18.7 '@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.13.0 + '@visactor/vutils': 0.13.3 canvas: 2.11.2 d3-scale-chromatic: 3.0.0 dat.gui: 0.7.9 @@ -67,7 +67,7 @@ importers: vite: 3.2.6 dependencies: '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.13.0 + '@visactor/vutils': 0.13.3 react-reconciler: 0.29.0_react@16.13.0 tslib: 2.6.0 devDependencies: @@ -107,7 +107,7 @@ importers: dependencies: '@visactor/react-vrender': link:../react-vrender '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.13.0 + '@visactor/vutils': 0.13.3 react-reconciler: 0.29.0_react@16.13.0 tslib: 2.6.0 devDependencies: @@ -150,7 +150,7 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vutils': 0.13.0 + '@visactor/vutils': 0.13.3 color-convert: 2.0.1 core-js: 3.31.1 inversify: 6.0.1 @@ -195,8 +195,8 @@ importers: vite: 3.2.6 dependencies: '@visactor/vrender': link:../vrender - '@visactor/vscale': 0.13.0 - '@visactor/vutils': 0.13.0 + '@visactor/vscale': 0.13.3 + '@visactor/vutils': 0.13.3 inversify: 6.0.1 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -238,7 +238,7 @@ importers: dependencies: '@resvg/resvg-js': 2.4.1 '@visactor/vrender': link:../vrender - '@visactor/vutils': 0.13.0 + '@visactor/vutils': 0.13.3 canvas: 2.11.2 core-js: 3.31.1 inversify: 6.0.1 @@ -431,7 +431,7 @@ importers: '@types/merge2': 1.4.0 '@types/minimist': 1.2.2 '@types/ms': 0.7.31 - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/semver': 7.3.12 '@types/terser': 3.12.0 '@types/through2': 2.0.38 @@ -439,7 +439,7 @@ importers: '@types/vinyl': 2.0.7 '@types/yargs-parser': 21.0.0 eslint: 8.18.0 - ts-node: 10.9.0_3v26fpmfgn2ciwm7ypihuhruum + ts-node: 10.9.0_f7m3oso53tushofr3lnovlz6ya typescript: 4.9.5 vitest: 0.30.1_less@4.1.3+terser@5.17.1 @@ -456,23 +456,23 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 - /@antv/g-camera-api/1.2.3: - resolution: {integrity: sha512-CE7vJoWKZpgqQ9A3pKVazSq0N6tbgrATocSNjm4qz1GPeWmxwtkDSzqRh6aIOon/jcQuQwflequp37UtYQe5WQ==} + /@antv/g-camera-api/1.2.6: + resolution: {integrity: sha512-u2vvGba/eZKPNVs4m/9/NEVz9DCT3U3jjnzV9IPFMpB+E73Exqed1dBNGnvCFqXJmbatFU2+dB1K0FGJqDsW+A==} dependencies: - '@antv/g-lite': 1.2.3 + '@antv/g-lite': 1.2.6 '@antv/util': 3.3.2 gl-matrix: 3.4.3 tslib: 2.6.0 dev: true - /@antv/g-dom-mutation-observer-api/1.2.3: - resolution: {integrity: sha512-omCRtAxYEjS7AEK9EKCDgn6aBcTBC3JW1hGyPYbRfOuPp7TmtNhgrVLvlkjD072oWvmB3hJdvF+8KMzwzF/W+Q==} + /@antv/g-dom-mutation-observer-api/1.2.6: + resolution: {integrity: sha512-IQ5z+8vCekhghlwE4sazXZO+vYhAzdO8GfdmIJJfAO2HDbuCQ3NkX+Tc0OiFkyxgO4tHunAcdtHvD8Pz8yYThQ==} dependencies: - '@antv/g-lite': 1.2.3 + '@antv/g-lite': 1.2.6 dev: true - /@antv/g-lite/1.2.3: - resolution: {integrity: sha512-w1iaKtTlNGc3DzoTGdBJizt+bpf6Xr3KhX5UEbaI8i5M+XHRuAndHjtk8/tsSRS8AjAOQ3WGwQXpO9Vbfk2ewQ==} + /@antv/g-lite/1.2.6: + resolution: {integrity: sha512-1yLjLwrC9lny7oQ2qrxQWZmLOQmQF3MzXnDHgMumNmPjRiWWGFRUyxO2Ks9V/M0o/ieyp5E4JjphHh2tnhTySg==} dependencies: '@antv/g-math': 2.0.1 '@antv/util': 3.3.2 @@ -491,21 +491,21 @@ packages: tslib: 2.6.0 dev: true - /@antv/g-web-animations-api/1.2.3: - resolution: {integrity: sha512-iIosg6QCHudKJCoIO7wcM1kiCqdKwU5up+qqaHpu8SvWjTGyKRNgX8lm+jIzBZwG6VCglWjXF33iENSsuZZ6hQ==} + /@antv/g-web-animations-api/1.2.6: + resolution: {integrity: sha512-EeKGjUhdC41XvljfgHHhR9X6rYozGmRKVkh27VrHGONw5SIFgwBr4wJEpkYZ++Lfy8xx0dx8YlAYCcocbiQKkA==} dependencies: - '@antv/g-lite': 1.2.3 + '@antv/g-lite': 1.2.6 '@antv/util': 3.3.2 tslib: 2.6.0 dev: true - /@antv/g/5.18.4: - resolution: {integrity: sha512-WMgc0DrzUwG3ngS+E2Wl2OEfJBabFAcR8Wkdf9Akd6aYwGDGOHuP4YQvYrBCSjLdfKlzMTEQSkMfkaRib1JOXg==} + /@antv/g/5.18.7: + resolution: {integrity: sha512-t6PPs3Ow2xFGiKXGahOKmVjKsDcmhtbBMJ3CQz25DX6sRcvELR3erl5CpabFLeRue5qUFzPY5S0LwnI/Ebvvjw==} dependencies: - '@antv/g-camera-api': 1.2.3 - '@antv/g-dom-mutation-observer-api': 1.2.3 - '@antv/g-lite': 1.2.3 - '@antv/g-web-animations-api': 1.2.3 + '@antv/g-camera-api': 1.2.6 + '@antv/g-dom-mutation-observer-api': 1.2.6 + '@antv/g-lite': 1.2.6 + '@antv/g-web-animations-api': 1.2.6 dev: true /@antv/util/3.3.2: @@ -1674,7 +1674,7 @@ packages: '@babel/plugin-transform-typeof-symbol': 7.22.5_@babel+core@7.20.12 '@babel/plugin-transform-unicode-escapes': 7.22.5_@babel+core@7.20.12 '@babel/plugin-transform-unicode-regex': 7.22.5_@babel+core@7.20.12 - '@babel/preset-modules': 0.1.5_@babel+core@7.20.12 + '@babel/preset-modules': 0.1.6_@babel+core@7.20.12 '@babel/types': 7.22.5 babel-plugin-polyfill-corejs2: 0.3.3_@babel+core@7.20.12 babel-plugin-polyfill-corejs3: 0.6.0_@babel+core@7.20.12 @@ -1685,10 +1685,10 @@ packages: - supports-color dev: false - /@babel/preset-modules/0.1.5_@babel+core@7.20.12: - resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==} + /@babel/preset-modules/0.1.6_@babel+core@7.20.12: + resolution: {integrity: sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==} peerDependencies: - '@babel/core': ^7.0.0-0 + '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0 dependencies: '@babel/core': 7.20.12 '@babel/helper-plugin-utils': 7.22.5 @@ -1914,7 +1914,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 chalk: 4.1.2 jest-message-util: 26.6.2 jest-util: 26.6.2 @@ -1929,7 +1929,7 @@ packages: '@jest/test-result': 26.6.2 '@jest/transform': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 ansi-escapes: 4.3.2 chalk: 4.1.2 exit: 0.1.2 @@ -1977,7 +1977,7 @@ packages: dependencies: '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 jest-mock: 26.6.2 /@jest/fake-timers/24.9.0: @@ -1995,7 +1995,7 @@ packages: dependencies: '@jest/types': 26.6.2 '@sinonjs/fake-timers': 6.0.1 - '@types/node': 20.4.2 + '@types/node': 20.4.4 jest-message-util: 26.6.2 jest-mock: 26.6.2 jest-util: 26.6.2 @@ -2165,7 +2165,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/yargs': 15.0.15 chalk: 4.1.2 @@ -2219,7 +2219,7 @@ packages: resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} hasBin: true dependencies: - detect-libc: 2.0.1 + detect-libc: 2.0.2 https-proxy-agent: 5.0.1 make-dir: 3.1.0 node-fetch: 2.6.12 @@ -2634,7 +2634,7 @@ packages: /@types/clean-css/4.2.6: resolution: {integrity: sha512-Ze1tf+LnGPmG6hBFMi0B4TEB0mhF7EiMM5oyjLDNPE9hxrPU0W+5+bHvO+eFPA+bt0iC1zkQMoU/iGdRVjcRbw==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 source-map: 0.6.1 dev: true @@ -2654,13 +2654,13 @@ packages: /@types/fs-extra/9.0.13: resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 dev: true /@types/glob-stream/8.0.0: resolution: {integrity: sha512-fxTWwdQmX9LWSHD7ZLlv3BHR992mKcVcDnT/2v+l/QZZo7TfDdyasqlSYVzOnMGWhRbrWeWkbj/mgezFjKynhw==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/picomatch': 2.3.0 '@types/streamx': 2.9.1 dev: true @@ -2668,18 +2668,18 @@ packages: /@types/glob-watcher/5.0.2: resolution: {integrity: sha512-MZeh2nIzibl/euv5UV0femkGzcKTSE4G2+zv48d6ymeitWwCx52+4X+FqzML9oH2mQnPs+N/JHp3CsBPj1x1Ug==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 dev: true /@types/graceful-fs/4.1.6: resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 /@types/gulp-if/0.0.34: resolution: {integrity: sha512-r2A04hHDC+ZWMRAm+3q6/UeC3ggvl+TZm9P1+2umnp4q9bOlBmUQnR178Io3c0DkZPQAwup8VNtOvmvaWCpP5w==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/vinyl': 2.0.7 dev: true @@ -2693,7 +2693,7 @@ packages: /@types/gulp-sourcemaps/0.0.35: resolution: {integrity: sha512-vUBuizwA4CAV3Mke0DJYHQxyN4YOB1aAql284qAO7Et7fe0hmnPi/R9Fhu2UhxMuSxAwFktsJUOQk5dJHOU1eA==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/vinyl': 2.0.7 dev: true @@ -2747,7 +2747,7 @@ packages: /@types/merge2/1.4.0: resolution: {integrity: sha512-MRHDvln2ldZELrUC8n1PGaQzZ33aNh8uDcsGehREW0zR1Fr818a4/JTZjO9eloHPPxnpUp8fz/YFTRc5CWm7Xw==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 dev: true /@types/minimatch/5.1.2: @@ -2765,7 +2765,7 @@ packages: /@types/node-fetch/2.6.4: resolution: {integrity: sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 form-data: 3.0.1 dev: true @@ -2773,8 +2773,8 @@ packages: resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==} dev: true - /@types/node/20.4.2: - resolution: {integrity: sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==} + /@types/node/20.4.4: + resolution: {integrity: sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==} /@types/normalize-package-data/2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -2827,7 +2827,7 @@ packages: /@types/streamx/2.9.1: resolution: {integrity: sha512-9bywzhouyedmci7WCIPFwJ8zASDnxt2gaVUy52X0p0Tt085IJSAEP0L6j4SSNeDMSLzpYu6cPz0GrJZ7kPJ6Bg==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 dev: true /@types/terser/3.12.0: @@ -2840,7 +2840,7 @@ packages: /@types/through2/2.0.38: resolution: {integrity: sha512-YFu+nHmjxMurkH1BSzA0Z1WrKDAY8jUKPZctNQn7mc+/KKtp2XxnclHFXxdB1m7Iqnzb5aywgP8TMK283LezGQ==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 dev: true /@types/undertaker-registry/1.0.1: @@ -2850,7 +2850,7 @@ packages: /@types/undertaker/1.2.8: resolution: {integrity: sha512-gW3PRqCHYpo45XFQHJBhch7L6hytPsIe0QeLujlnFsjHPnXLhJcPdN6a9368d7aIQgH2I/dUTPFBlGeSNA3qOg==} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/undertaker-registry': 1.0.1 async-done: 1.3.2 dev: true @@ -2859,7 +2859,7 @@ packages: resolution: {integrity: sha512-ctNcmmzbMIKooXjRkyyUCOu2Z4AyqibL+RhXoF3pb7K7j+ezItnakmpm31LymkYHSIM5ey0tjIFzTvFOTSBCGw==} dependencies: '@types/glob-stream': 8.0.0 - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/vinyl': 2.0.7 dev: true @@ -2867,7 +2867,7 @@ packages: resolution: {integrity: sha512-4UqPv+2567NhMQuMLdKAyK4yzrfCqwaTt6bLhHEs8PFcxbHILsrxaY63n4wgE/BRLDWDQeI+WcTmkXKExh9hQg==} dependencies: '@types/expect': 1.20.4 - '@types/node': 20.4.2 + '@types/node': 20.4.4 /@types/yargs-parser/21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} @@ -3009,14 +3009,14 @@ packages: eslint-visitor-keys: 3.4.1 dev: false - /@visactor/vscale/0.13.0: - resolution: {integrity: sha512-tBmSOhdAhGYoj7iuRagAREVyFc02d16+XnG0pf6KSBFrw1yxvvL/W8PIKgNYPBIHODBSEhTVhObFBe7v2el2iQ==} + /@visactor/vscale/0.13.3: + resolution: {integrity: sha512-iVPguZ0uVSlOSfPWZaZmfp9hCeIxb67kCWgY+yVYEhzKTdnZLfNqxUarFhdqx2P9wNiAGjxhUJBNEenkndW5hg==} dependencies: - '@visactor/vutils': 0.13.0 + '@visactor/vutils': 0.13.3 dev: false - /@visactor/vutils/0.13.0: - resolution: {integrity: sha512-KJDziKeTnDkxyiErV0otKiwvCTIMfVpFKjIOXNk/qeWKnJolFC/qCTelEcI3kiy+NwU73lVeyf8ebqoir6PLjw==} + /@visactor/vutils/0.13.3: + resolution: {integrity: sha512-lCFiuUHwqz/0RCvIYa79ycduCLAILWaXddPOjxEd3VRX9CCoWMUmRtM3gF5JxtK2pK6Mu7hW7LaMSuWFw+0Kkw==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 @@ -3484,7 +3484,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.21.9 - caniuse-lite: 1.0.30001516 + caniuse-lite: 1.0.30001517 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -3775,8 +3775,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001516 - electron-to-chromium: 1.4.463 + caniuse-lite: 1.0.30001517 + electron-to-chromium: 1.4.468 node-releases: 2.0.13 update-browserslist-db: 1.0.11_browserslist@4.21.9 @@ -3863,8 +3863,8 @@ packages: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} - /caniuse-lite/1.0.30001516: - resolution: {integrity: sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==} + /caniuse-lite/1.0.30001517: + resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==} /canvas/2.11.2: resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==} @@ -4418,8 +4418,8 @@ packages: engines: {node: '>=0.10.0'} dev: false - /detect-libc/2.0.1: - resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==} + /detect-libc/2.0.2: + resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} engines: {node: '>=8'} /detect-newline/2.1.0: @@ -4522,8 +4522,8 @@ packages: safer-buffer: 2.1.2 dev: true - /electron-to-chromium/1.4.463: - resolution: {integrity: sha512-fT3hvdUWLjDbaTGzyOjng/CQhQJSQP8ThO3XZAoaxHvHo2kUXiRQVMj9M235l8uDFiNPsPa6KHT1p3RaR6ugRw==} + /electron-to-chromium/1.4.468: + resolution: {integrity: sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==} /electron/11.5.0: resolution: {integrity: sha512-WjNDd6lGpxyiNjE3LhnFCAk/D9GIj1rU3GSDealVShhkkkPR3Vh4q8ErXGDl1OAO/faomVa10KoFPUN/pLbNxg==} @@ -4604,7 +4604,7 @@ packages: is-regex: 1.1.4 is-shared-array-buffer: 1.0.2 is-string: 1.0.7 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 is-weakref: 1.0.2 object-inspect: 1.12.3 object-keys: 1.1.1 @@ -5269,8 +5269,8 @@ packages: resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} dev: true - /fast-glob/3.3.0: - resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==} + /fast-glob/3.3.1: + resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} dependencies: '@nodelib/fs.stat': 2.0.5 @@ -5758,7 +5758,7 @@ packages: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.3.0 + fast-glob: 3.3.1 ignore: 5.2.4 merge2: 1.4.1 slash: 3.0.0 @@ -5854,7 +5854,7 @@ packages: resolution: {integrity: sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==} engines: {node: '>=10'} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@types/vinyl': 2.0.7 istextorbinary: 3.3.0 replacestream: 4.0.3 @@ -6160,7 +6160,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.1 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 /is-arrayish/0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} @@ -6400,15 +6400,11 @@ packages: dependencies: has-symbols: 1.0.3 - /is-typed-array/1.1.11: - resolution: {integrity: sha512-l2SCJk9RflSWHQjOJJgNsV5FnE1pq/RpHnYW6ckSjTCYypv07SMbiRSCmLQD63WOv2eXaEwNsn+7kcn3csvYSw==} + /is-typed-array/1.1.12: + resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==} engines: {node: '>= 0.4'} dependencies: - available-typed-arrays: 1.0.5 - call-bind: 1.0.2 - for-each: 0.3.3 - gopd: 1.0.1 - has-tostringtag: 1.0.0 + which-typed-array: 1.1.11 /is-typedarray/1.0.0: resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==} @@ -6746,7 +6742,7 @@ packages: '@jest/environment': 26.6.2 '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 jest-mock: 26.6.2 jest-util: 26.6.2 jsdom: 16.7.0 @@ -6776,7 +6772,7 @@ packages: '@jest/environment': 26.6.2 '@jest/fake-timers': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 jest-mock: 26.6.2 jest-util: 26.6.2 @@ -6829,7 +6825,7 @@ packages: dependencies: '@jest/types': 26.6.2 '@types/graceful-fs': 4.1.6 - '@types/node': 20.4.2 + '@types/node': 20.4.4 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -6876,7 +6872,7 @@ packages: '@jest/source-map': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 chalk: 4.1.2 co: 4.6.0 expect: 26.6.2 @@ -6980,7 +6976,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 /jest-pnp-resolver/1.2.3_jest-resolve@24.9.0: resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==} @@ -7081,7 +7077,7 @@ packages: '@jest/environment': 26.6.2 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 chalk: 4.1.2 emittery: 0.7.2 exit: 0.1.2 @@ -7184,7 +7180,7 @@ packages: resolution: {integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==} engines: {node: '>= 10.14.2'} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 graceful-fs: 4.2.11 /jest-snapshot/24.9.0: @@ -7250,7 +7246,7 @@ packages: engines: {node: '>= 10.14.2'} dependencies: '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 chalk: 4.1.2 graceful-fs: 4.2.11 is-ci: 2.0.0 @@ -7285,7 +7281,7 @@ packages: dependencies: '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 - '@types/node': 20.4.2 + '@types/node': 20.4.4 ansi-escapes: 4.3.2 chalk: 4.1.2 jest-util: 26.6.2 @@ -7303,7 +7299,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 merge-stream: 2.0.0 supports-color: 7.2.0 @@ -8253,7 +8249,7 @@ packages: levn: 0.3.0 prelude-ls: 1.1.2 type-check: 0.3.2 - word-wrap: 1.2.3 + word-wrap: 1.2.5 dev: true /optionator/0.9.3: @@ -10002,7 +9998,7 @@ packages: typescript: 4.9.5 yargs-parser: 20.2.9 - /ts-node/10.9.0_3v26fpmfgn2ciwm7ypihuhruum: + /ts-node/10.9.0_f7m3oso53tushofr3lnovlz6ya: resolution: {integrity: sha512-bunW18GUyaCSYRev4DPf4SQpom3pWH29wKl0sDk5zE7ze19RImEVhCW7K4v3hHKkUyfWotU08ToE2RS+Y49aug==} hasBin: true peerDependencies: @@ -10021,7 +10017,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 20.4.2 + '@types/node': 20.4.4 acorn: 8.10.0 acorn-walk: 8.2.0 arg: 4.1.3 @@ -10122,7 +10118,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.1 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 /typed-array-byte-length/1.0.0: resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==} @@ -10131,7 +10127,7 @@ packages: call-bind: 1.0.2 for-each: 0.3.3 has-proto: 1.0.1 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 /typed-array-byte-offset/1.0.0: resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==} @@ -10141,14 +10137,14 @@ packages: call-bind: 1.0.2 for-each: 0.3.3 has-proto: 1.0.1 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 /typed-array-length/1.0.4: resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} dependencies: call-bind: 1.0.2 for-each: 0.3.3 - is-typed-array: 1.1.11 + is-typed-array: 1.1.12 /typedarray-to-buffer/3.1.5: resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==} @@ -10417,7 +10413,7 @@ packages: replace-ext: 1.0.1 dev: false - /vite-node/0.30.1_3xajuonizasn2ncbo4uqdyijhu: + /vite-node/0.30.1_xp5gls52nxtb52zcnq7yx3ryey: resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==} engines: {node: '>=v14.18.0'} hasBin: true @@ -10427,7 +10423,7 @@ packages: mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 - vite: 3.2.6_3xajuonizasn2ncbo4uqdyijhu + vite: 3.2.6_xp5gls52nxtb52zcnq7yx3ryey transitivePeerDependencies: - '@types/node' - less @@ -10471,7 +10467,7 @@ packages: fsevents: 2.3.2 dev: true - /vite/3.2.6_3xajuonizasn2ncbo4uqdyijhu: + /vite/3.2.6_xp5gls52nxtb52zcnq7yx3ryey: resolution: {integrity: sha512-nTXTxYVvaQNLoW5BQ8PNNQ3lPia57gzsQU/Khv+JvzKPku8kNZL6NMUR/qwXhMG6E+g1idqEPanomJ+VZgixEg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -10496,7 +10492,7 @@ packages: terser: optional: true dependencies: - '@types/node': 20.4.2 + '@types/node': 20.4.4 esbuild: 0.15.18 less: 4.1.3 postcss: 8.4.21 @@ -10540,7 +10536,7 @@ packages: dependencies: '@types/chai': 4.3.5 '@types/chai-subset': 1.3.3 - '@types/node': 20.4.2 + '@types/node': 20.4.4 '@vitest/expect': 0.30.1 '@vitest/runner': 0.30.1 '@vitest/snapshot': 0.30.1 @@ -10561,8 +10557,8 @@ packages: strip-literal: 1.0.1 tinybench: 2.5.0 tinypool: 0.4.0 - vite: 3.2.6_3xajuonizasn2ncbo4uqdyijhu - vite-node: 0.30.1_3xajuonizasn2ncbo4uqdyijhu + vite: 3.2.6_xp5gls52nxtb52zcnq7yx3ryey + vite-node: 0.30.1_xp5gls52nxtb52zcnq7yx3ryey why-is-node-running: 2.2.2 transitivePeerDependencies: - less @@ -10701,8 +10697,8 @@ packages: dependencies: string-width: 4.2.3 - /word-wrap/1.2.3: - resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==} + /word-wrap/1.2.5: + resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} dev: true diff --git a/packages/vrender-components/__tests__/browser/examples/data-zoom-preview-v.ts b/packages/vrender-components/__tests__/browser/examples/data-zoom-preview-v.ts index 326ca1953..6e28787a8 100644 --- a/packages/vrender-components/__tests__/browser/examples/data-zoom-preview-v.ts +++ b/packages/vrender-components/__tests__/browser/examples/data-zoom-preview-v.ts @@ -3,9 +3,9 @@ import render from '../../util/render'; import { DataZoom } from '../../../src'; const data: any[] = []; -for (let i = 0; i < 9; i++) { +for (let i = 0; i < 6; i++) { data.push({ - x: 50 + i * 50, + x: 50 + 50 + i * 50, y: 235 + Math.random() * 30 }); } @@ -20,6 +20,9 @@ export function run() { x: 50, y: 235 }, + startHandlerStyle: { + size: 100 + }, size: { width: 400, height: 30 diff --git a/packages/vrender-components/src/data-zoom/config.ts b/packages/vrender-components/src/data-zoom/config.ts index 401c39b2a..909180fe0 100644 --- a/packages/vrender-components/src/data-zoom/config.ts +++ b/packages/vrender-components/src/data-zoom/config.ts @@ -49,7 +49,7 @@ export const DEFAULT_DATA_ZOOM_ATTRIBUTES = { } }, middleHandlerStyle: { - visible: false, + visible: true, background: { size: 8, style: { @@ -69,6 +69,7 @@ export const DEFAULT_DATA_ZOOM_ATTRIBUTES = { } }, startHandlerStyle: { + visible: true, symbolType: // eslint-disable-next-line max-len 'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z', @@ -78,6 +79,7 @@ export const DEFAULT_DATA_ZOOM_ATTRIBUTES = { lineWidth: 0.5 }, endHandlerStyle: { + visible: true, symbolType: // eslint-disable-next-line max-len 'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z', diff --git a/packages/vrender-components/src/data-zoom/data-zoom.ts b/packages/vrender-components/src/data-zoom/data-zoom.ts index 777a14658..c26932489 100644 --- a/packages/vrender-components/src/data-zoom/data-zoom.ts +++ b/packages/vrender-components/src/data-zoom/data-zoom.ts @@ -1,9 +1,12 @@ -import { FederatedPointerEvent, IArea, IGroup, ILine, IRect, ISymbol, global, INode } from '@visactor/vrender'; -import { IPointLike, array, clamp, isFunction, isValid, merge } from '@visactor/vutils'; +import type { FederatedPointerEvent, IArea, IGroup, ILine, IRect, ISymbol, INode } from '@visactor/vrender'; +import { global } from '@visactor/vrender'; +import type { IPointLike } from '@visactor/vutils'; +import { array, clamp, isFunction, isValid, merge } from '@visactor/vutils'; import { AbstractComponent } from '../core/base'; -import { Tag, TagAttributes } from '../tag'; +import type { TagAttributes } from '../tag'; +import { Tag } from '../tag'; import { DataZoomActiveTag, DEFAULT_DATA_ZOOM_ATTRIBUTES } from './config'; -import { DataZoomAttributes } from './type'; +import type { DataZoomAttributes } from './type'; export class DataZoom extends AbstractComponent> { name = 'dataZoom'; @@ -488,7 +491,14 @@ export class DataZoom extends AbstractComponent> { if (this._layoutAttrFromConfig) { return this._layoutAttrFromConfig; } - const { position: positionConfig, size, orient, middleHandlerStyle } = this.attribute as DataZoomAttributes; + const { + position: positionConfig, + size, + orient, + middleHandlerStyle, + startHandlerStyle, + endHandlerStyle + } = this.attribute as DataZoomAttributes; const { width: widthConfig, height: heightConfig } = size; const middleHandlerSize = middleHandlerStyle?.background?.size ?? 10; @@ -518,6 +528,28 @@ export class DataZoom extends AbstractComponent> { position = positionConfig; } + const startHandlerSize = startHandlerStyle?.size ?? (this._isHorizontal ? height : width); + const endHandlerSize = endHandlerStyle?.size ?? (this._isHorizontal ? height : width); + + // 如果startHandler显示的话，要将其宽高计入dataZoom宽高 + if (startHandlerStyle?.visible) { + if (this._isHorizontal) { + width = widthConfig - (startHandlerSize + endHandlerSize) / 2; + height = heightConfig; + position = { + x: positionConfig.x + startHandlerSize / 2, + y: positionConfig.y + }; + } else { + width = widthConfig; + height = heightConfig - (startHandlerSize + endHandlerSize) / 2; + position = { + x: positionConfig.x, + y: positionConfig.y + startHandlerSize + }; + } + } + this._layoutAttrFromConfig = { position, width, @@ -874,10 +906,10 @@ export class DataZoom extends AbstractComponent> { ) as IArea; } - const { position, size, selectedBackgroundChartStyle } = this.attribute as DataZoomAttributes; - const { width, height } = size; + const { selectedBackgroundChartStyle } = this.attribute as DataZoomAttributes; + const { start, end } = this.state; - const { basePointStart, basePointEnd } = this.computeBasePoints(); + const { position, width, height } = this.getLayoutAttrFromConfig(); this._selectedPreviewGroupClip.setAttributes({ x: this._isHorizontal ? position.x + start * width : position.x, y: this._isHorizontal ? position.y : position.y + start * height, diff --git a/packages/vrender/vite/vite.config.ts b/packages/vrender/vite/vite.config.ts index c8f4f283c..c9b2b5582 100644 --- a/packages/vrender/vite/vite.config.ts +++ b/packages/vrender/vite/vite.config.ts @@ -1,7 +1,39 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import localConf from './vite.config.local'; +import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; +import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'; +import rollupNodePolyFill from 'rollup-plugin-node-polyfills'; -// https://vitejs.dev/config/ export default defineConfig({ - plugins: [react({ jsxRuntime: 'classic' })] + plugins: [react({ jsxRuntime: 'classic' })], + define: { + __DEV__: true + }, + optimizeDeps: { + esbuildOptions: { + // Node.js global to browser globalThis + define: { + global: 'globalThis' + }, + // Enable esbuild polyfill plugins + plugins: [ + NodeGlobalsPolyfillPlugin({ + process: true, + buffer: true + }), + NodeModulesPolyfillPlugin() + ] + } + }, + build: { + rollupOptions: { + plugins: [ + // Enable rollup polyfills plugin + // used during production bundling + rollupNodePolyFill() + ] + } + }, + resolve: localConf.resolve || {} }); From 1799011f2db3280e32e86771efc7132ad96c43ab Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 25 Jul 2023 00:10:16 +0800 Subject: [PATCH 2/2] fix(dataZoom): unit test problem --- .../__tests__/unit/data-zoom.test.ts | 96 ++++++++++--------- .../src/data-zoom/data-zoom.ts | 4 +- 2 files changed, 51 insertions(+), 49 deletions(-) diff --git a/packages/vrender-components/__tests__/unit/data-zoom.test.ts b/packages/vrender-components/__tests__/unit/data-zoom.test.ts index 4b1f3e5d7..c648b3793 100644 --- a/packages/vrender-components/__tests__/unit/data-zoom.test.ts +++ b/packages/vrender-components/__tests__/unit/data-zoom.test.ts @@ -1,5 +1,7 @@ -import { Group, IArea, IGroup, ILine, IRect, ISymbol, Stage } from '@visactor/vrender'; -import { DataZoom, Tag } from '../../src'; +import type { IArea, IGroup, ILine, IRect, ISymbol, Stage } from '@visactor/vrender'; +import { Group } from '@visactor/vrender'; +import type { Tag } from '../../src'; +import { DataZoom } from '../../src'; import { createCanvas } from '../util/dom'; import { createStage } from '../util/vrender'; @@ -36,10 +38,10 @@ describe('DataZoom component test', () => { x: 50, y: 235 }); - expect((dataZoom.getElementsByName('background')[0] as IRect).attribute.width).toBe(400); + expect((dataZoom.getElementsByName('background')[0] as IRect).attribute.width).toBe(378); expect((dataZoom.getElementsByName('background')[0] as IRect).attribute.height).toBe(30); - expect(dataZoom.AABBBounds.width()).toBe(401); - expect(dataZoom.AABBBounds.height()).toBe(35); + expect(dataZoom.AABBBounds.width()).toBe(379); + expect(dataZoom.AABBBounds.height()).toBe(41); }); test('Vertical Direction without Preview Data', () => { @@ -80,10 +82,10 @@ describe('DataZoom component test', () => { expect(dataZoom.getChildren()[0].getChildren().length).toBe(9); const background = dataZoom.getElementsByName('background')[0] as IRect; - expect(background.attribute.x).toBe(50); - expect(background.attribute.y).toBe(243); - expect(background.attribute.width).toBe(400); - expect(background.attribute.height).toBe(22); + expect(background.attribute.x).toBe(61); + expect(background.attribute.y).toBe(235); + expect(background.attribute.width).toBe(378); + expect(background.attribute.height).toBe(30); const previewGroup = dataZoom.getElementsByName('previewGroup')[0] as IGroup; expect(previewGroup).toBeUndefined(); @@ -95,47 +97,47 @@ describe('DataZoom component test', () => { expect(previewArea).toBeUndefined(); const startHandler = dataZoom.getElementsByName('startHandler')[0] as ISymbol; - expect(startHandler.attribute.x).toBe(130); - expect(startHandler.attribute.y).toBe(254); - expect(startHandler.attribute.size).toBe(22); + expect(startHandler.attribute.x).toBeCloseTo(136.60000000000002); + expect(startHandler.attribute.y).toBe(250); + expect(startHandler.attribute.size).toBe(30); expect(startHandler.attribute.angle).toBe(0); const endHandler = dataZoom.getElementsByName('endHandler')[0] as ISymbol; expect(endHandler.attribute.x).toBe(250); - expect(endHandler.attribute.y).toBe(254); - expect(endHandler.attribute.size).toBe(22); + expect(endHandler.attribute.y).toBe(250); + expect(endHandler.attribute.size).toBe(30); expect(endHandler.attribute.angle).toBe(0); const middleHandlerRect = dataZoom.getElementsByName('middleHandlerRect')[0] as IRect; - expect(middleHandlerRect.attribute.x).toBe(130); - expect(middleHandlerRect.attribute.y).toBe(235); - expect(middleHandlerRect.attribute.width).toBe(120); + expect(middleHandlerRect.attribute.x).toBeCloseTo(136.60000000000002); + expect(middleHandlerRect.attribute.y).toBe(227); + expect(middleHandlerRect.attribute.width).toBeCloseTo(113.39999999999999); expect(middleHandlerRect.attribute.height).toBe(8); const middleHandlerSymbol = dataZoom.getElementsByName('middleHandlerSymbol')[0] as ISymbol; - expect(middleHandlerSymbol.attribute.x).toBe(190); - expect(middleHandlerSymbol.attribute.y).toBe(239); + expect(middleHandlerSymbol.attribute.x).toBeCloseTo(193.29999999999998); + expect(middleHandlerSymbol.attribute.y).toBe(231); expect(middleHandlerSymbol.attribute.angle).toBe(0); const startText = dataZoom.getElementsByName(`data-zoom-start-text-${position}`)[0] as unknown as Tag; expect(startText.attribute.text).toBe(0.2); - expect(startText.attribute.x).toBe(130); - expect(startText.attribute.y).toBe(254); + expect(startText.attribute.x).toBeCloseTo(136.60000000000002); + expect(startText.attribute.y).toBe(250); expect(startText.attribute.textStyle?.textAlign).toBe('right'); expect(startText.attribute.textStyle?.textBaseline).toBe('middle'); const endText = dataZoom.getElementsByName(`data-zoom-end-text-${position}`)[0] as unknown as Tag; expect(endText.attribute.text).toBe(0.5); expect(endText.attribute.x).toBe(250); - expect(endText.attribute.y).toBe(254); + expect(endText.attribute.y).toBe(250); expect(endText.attribute.textStyle?.textAlign).toBe('left'); expect(endText.attribute.textStyle?.textBaseline).toBe('middle'); const selectedBackground = dataZoom.getElementsByName('selectedBackground')[0] as IRect; - expect(selectedBackground.attribute.x).toBe(130); - expect(selectedBackground.attribute.y).toBe(243); - expect(selectedBackground.attribute.width).toBe(120); - expect(selectedBackground.attribute.height).toBe(22); + expect(selectedBackground.attribute.x).toBeCloseTo(136.60000000000002); + expect(selectedBackground.attribute.y).toBe(235); + expect(selectedBackground.attribute.width).toBe(113.39999999999999); + expect(selectedBackground.attribute.height).toBe(30); // const dragMask = dataZoom.getElementsByName('dragMask')[0] as IRect; // expect(dragMask.attribute.x).toBe(0); @@ -186,12 +188,12 @@ describe('DataZoom component test', () => { stage.defaultLayer.add(dataZoom as any); stage.render(); const position = dataZoom.attribute.position; - expect(dataZoom.getChildren()[0].getChildren().length).toBe(7); + expect(dataZoom.getChildren()[0].getChildren().length).toBe(9); const background = dataZoom.getElementsByName('background')[0] as IRect; expect(background.attribute.x).toBe(235); - expect(background.attribute.y).toBe(50); + expect(background.attribute.y).toBe(72); expect(background.attribute.width).toBe(30); - expect(background.attribute.height).toBe(400); + expect(background.attribute.height).toBe(378); const previewGroup = dataZoom.getElementsByName('previewGroup')[0] as IGroup; expect(previewGroup).toBeUndefined(); @@ -204,34 +206,34 @@ describe('DataZoom component test', () => { const startHandler = dataZoom.getElementsByName('startHandler')[0] as ISymbol; expect(startHandler.attribute.x).toBe(250); - expect(startHandler.attribute.y).toBe(130); + expect(startHandler.attribute.y).toBe(147.60000000000002); expect(startHandler.attribute.size).toBe(30); expect(startHandler.attribute.angle).toBe(1.5707963267948966); const endHandler = dataZoom.getElementsByName('endHandler')[0] as ISymbol; expect(endHandler.attribute.x).toBe(250); - expect(endHandler.attribute.y).toBe(250); + expect(endHandler.attribute.y).toBe(261); expect(endHandler.attribute.size).toBe(30); expect(endHandler.attribute.angle).toBe(1.5707963267948966); const startText = dataZoom.getElementsByName(`data-zoom-start-text-${position}`)[0] as unknown as Tag; expect(startText.attribute.text).toBe(0.2); expect(startText.attribute.x).toBe(250); - expect(startText.attribute.y).toBe(130); + expect(startText.attribute.y).toBe(147.60000000000002); expect(startText.attribute.textStyle?.textAlign).toBe('center'); expect(startText.attribute.textStyle?.textBaseline).toBe('bottom'); const endText = dataZoom.getElementsByName(`data-zoom-end-text-${position}`)[0] as unknown as Tag; expect(endText.attribute.x).toBe(250); - expect(endText.attribute.y).toBe(250); + expect(endText.attribute.y).toBe(261); expect(endText.attribute.textStyle?.textAlign).toBe('center'); expect(endText.attribute.textStyle?.textBaseline).toBe('top'); const selectedBackground = dataZoom.getElementsByName('selectedBackground')[0] as IRect; expect(selectedBackground.attribute.x).toBe(235); - expect(selectedBackground.attribute.y).toBe(130); + expect(selectedBackground.attribute.y).toBeCloseTo(147.60000000000002); expect(selectedBackground.attribute.width).toBe(30); - expect(selectedBackground.attribute.height).toBe(120); + expect(selectedBackground.attribute.height).toBeCloseTo(113.39999999999999); // const dragMask = dataZoom.getElementsByName('dragMask')[0] as IRect; // expect(dragMask.attribute.x).toBe(235); @@ -270,15 +272,15 @@ describe('DataZoom component test', () => { stage.render(); expect(dataZoom.getChildren()[0].getChildren().length).toBe(11); const middleHandlerRect = dataZoom.getElementsByName('middleHandlerRect')[0] as IRect; - expect(middleHandlerRect.attribute.x).toBe(257); - expect(middleHandlerRect.attribute.y).toBe(130); + expect(middleHandlerRect.attribute.x).toBe(265); + expect(middleHandlerRect.attribute.y).toBeCloseTo(147.60000000000002); expect(middleHandlerRect.attribute.width).toBe(8); - expect(middleHandlerRect.attribute.height).toBe(120); + expect(middleHandlerRect.attribute.height).toBeCloseTo(113.39999999999999); const middleHandlerSymbol = dataZoom.getElementsByName('middleHandlerSymbol')[0] as ISymbol; - expect(middleHandlerSymbol.attribute.x).toBe(261); - expect(middleHandlerSymbol.attribute.y).toBe(190); - expect(middleHandlerSymbol.attribute.angle).toBe(1.5707963267948966); + expect(middleHandlerSymbol.attribute.x).toBe(269); + expect(middleHandlerSymbol.attribute.y).toBeCloseTo(204.29999999999998); + expect(middleHandlerSymbol.attribute.angle).toBeCloseTo(1.5707963267948966); }); test('Vertical Direction with Preview Data', () => { @@ -322,7 +324,7 @@ describe('DataZoom component test', () => { stage.defaultLayer.add(dataZoom as any); stage.render(); - expect(dataZoom.getChildren()[0].getChildren().length).toBe(9); + expect(dataZoom.getChildren()[0].getChildren().length).toBe(11); const previewGroup = dataZoom.getElementsByName('previewGroup')[0] as IGroup; expect(previewGroup.childrenCount).toBe(2); @@ -346,9 +348,9 @@ describe('DataZoom component test', () => { const selectedPreviewGroupClip = dataZoom.getElementsByName('selectedPreviewGroupClip')[0] as IGroup; expect(selectedPreviewGroupClip.getChildren()).toHaveLength(1); - expect(selectedPreviewGroupClip.attribute.x).toBe(130); + expect(selectedPreviewGroupClip.attribute.x).toBeCloseTo(136.60000000000002); expect(selectedPreviewGroupClip.attribute.y).toBe(235); - expect(selectedPreviewGroupClip.attribute.width).toBe(120); + expect(selectedPreviewGroupClip.attribute.width).toBeCloseTo(113.39999999999999); expect(selectedPreviewGroupClip.attribute.height).toBe(30); expect(selectedPreviewGroupClip.attribute.clip).toBeTruthy(); @@ -414,7 +416,7 @@ describe('DataZoom component test', () => { stage.defaultLayer.add(dataZoom as any); stage.render(); - expect(dataZoom.getChildren()[0].getChildren().length).toBe(9); + expect(dataZoom.getChildren()[0].getChildren().length).toBe(11); const previewGroup = dataZoom.getElementsByName('previewGroup')[0] as IGroup; expect(previewGroup.childrenCount).toBe(2); @@ -439,9 +441,9 @@ describe('DataZoom component test', () => { const selectedPreviewGroupClip = dataZoom.getElementsByName('selectedPreviewGroupClip')[0] as IGroup; expect(selectedPreviewGroupClip.getChildren()).toHaveLength(1); expect(selectedPreviewGroupClip.attribute.x).toBe(235); - expect(selectedPreviewGroupClip.attribute.y).toBe(130); + expect(selectedPreviewGroupClip.attribute.y).toBeCloseTo(147.60000000000002); expect(selectedPreviewGroupClip.attribute.width).toBe(30); - expect(selectedPreviewGroupClip.attribute.height).toBe(120); + expect(selectedPreviewGroupClip.attribute.height).toBeCloseTo(113.39999999999999); expect(selectedPreviewGroupClip.attribute.clip).toBeTruthy(); const selectedPreviewGroup = dataZoom.getElementsByName('selectedPreviewGroup')[0] as IGroup; diff --git a/packages/vrender-components/src/data-zoom/data-zoom.ts b/packages/vrender-components/src/data-zoom/data-zoom.ts index c26932489..8acd132f8 100644 --- a/packages/vrender-components/src/data-zoom/data-zoom.ts +++ b/packages/vrender-components/src/data-zoom/data-zoom.ts @@ -528,8 +528,8 @@ export class DataZoom extends AbstractComponent> { position = positionConfig; } - const startHandlerSize = startHandlerStyle?.size ?? (this._isHorizontal ? height : width); - const endHandlerSize = endHandlerStyle?.size ?? (this._isHorizontal ? height : width); + const startHandlerSize = (startHandlerStyle?.size as number) ?? (this._isHorizontal ? height : width); + const endHandlerSize = (endHandlerStyle?.size as number) ?? (this._isHorizontal ? height : width); // 如果startHandler显示的话，要将其宽高计入dataZoom宽高 if (startHandlerStyle?.visible) {