diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index 7acdf924..f0fee158 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -89,10 +89,10 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - // "@visactor/vrender": "0.21.2-vstory.1", - // "@visactor/vrender-core": "0.21.2-vstory.1", - // "@visactor/vrender-kits": "0.21.2-vstory.1", - // "@visactor/vrender-components": "0.21.2-vstory.1", + // "@visactor/vrender": "0.21.2-vstory.2", + // "@visactor/vrender-core": "0.21.2-vstory.2", + // "@visactor/vrender-kits": "0.21.2-vstory.2", + // "@visactor/vrender-components": "0.21.2-vstory.2", // "@visactor/vscale": "0.18.5" // "example2": "npm:@company/example2@^1.0.0" }, diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index a3e134a0..dc3c1fd4 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -138,13 +138,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.17 '@visactor/vtable': 1.10.1 @@ -163,13 +163,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -213,13 +213,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 @@ -237,13 +237,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vtable': 1.10.1 '@visactor/vutils': 0.18.18 @@ -286,13 +286,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.17 '@visactor/vtable': 1.10.1 @@ -311,13 +311,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -361,13 +361,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.17 '@visactor/vstory-core': workspace:0.0.17 @@ -388,13 +388,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -440,13 +440,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.17 '@visactor/vstory-core': workspace:0.0.17 @@ -466,13 +466,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -517,13 +517,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.17 '@visactor/vtable': 1.10.1 @@ -542,13 +542,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.1 + '@visactor/vchart': 1.13.1-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender': 0.21.2-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -3720,24 +3720,24 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vchart/1.13.1-vstory.1: - resolution: {integrity: sha512-MWI+d3itSPt3cVEsXJykfKumK5ZOIPF35vewE1uivQauocjOa8DZHNoKaIzff2Y1Tpe2TBCwwsOYYWNmj5c32Q==} + /@visactor/vchart/1.13.1-vstory.2: + resolution: {integrity: sha512-c4/6IOYiK+TiBvMTQnxNCtmi1tDiHk7avaNT1MSclJYYuyRKs4Kg7gsV7ENn8uuUXgb2eJCSwcmBMGxFY5Ns8w==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-hierarchy': 0.15.1-vstory.1 - '@visactor/vgrammar-projection': 0.15.1-vstory.1 - '@visactor/vgrammar-sankey': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vgrammar-venn': 0.15.1-vstory.1 - '@visactor/vgrammar-wordcloud': 0.15.1-vstory.1 - '@visactor/vgrammar-wordcloud-shape': 0.15.1-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-hierarchy': 0.15.1-vstory.2 + '@visactor/vgrammar-projection': 0.15.1-vstory.2 + '@visactor/vgrammar-sankey': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vgrammar-venn': 0.15.1-vstory.2 + '@visactor/vgrammar-wordcloud': 0.15.1-vstory.2 + '@visactor/vgrammar-wordcloud-shape': 0.15.1-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 - '@visactor/vutils-extension': 1.13.1-vstory.1 + '@visactor/vutils-extension': 1.13.1-vstory.2 dev: false /@visactor/vdataset/0.18.18: @@ -3784,90 +3784,90 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.15.1-vstory.1: - resolution: {integrity: sha512-T9R+xvI5kRRGsZb07A9omSjqO/WfbsAt0kAcA9/qINAqToqUOj+U1Uz2ea7/XqX8c8+L6l7dGg0Hvy8k2iyIbw==} + /@visactor/vgrammar-coordinate/0.15.1-vstory.2: + resolution: {integrity: sha512-eQwqzbtosfjrmoCRrSSOaI7Dp0KFmrnu7M490PVwSSiWEKOAsgjRZxKFRB5x9w0SvKOLR7eUnlW8zNDXod1BLg==} dependencies: - '@visactor/vgrammar-util': 0.15.1-vstory.1 + '@visactor/vgrammar-util': 0.15.1-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-core/0.15.1-vstory.1: - resolution: {integrity: sha512-CVUe4Y5HMSL00vH+jnkkiAbg7ZAW5C/TBDlzSmNSXg7nooiz9YRqujc7kooG8IgJCN8RKGh+LEte9m4oglnW7A==} + /@visactor/vgrammar-core/0.15.1-vstory.2: + resolution: {integrity: sha512-LwJCG1TVcZBwHp4Au4YDufEJCAVKmiaFlNEq/Y0rJaz6lwg2qbsc9mgpoCt7vzykm+tT86wohsQC+O+q2/ABbA==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-coordinate': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-components': 0.21.2-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-coordinate': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-components': 0.21.2-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-hierarchy/0.15.1-vstory.1: - resolution: {integrity: sha512-uSpgR37kl/arMrdVtBtgpwFr8sYePp7tGxHMNwnuCQclLI/G4rWdPi7qZ0BBPrVK41JZBndOU4ItCT70D9yysw==} + /@visactor/vgrammar-hierarchy/0.15.1-vstory.2: + resolution: {integrity: sha512-6GP0hJydjA5QUFtioP4ObgLf0cQIefV3Tx+Fx86CJXbtA6DK+v9PC6BSw/9ZkI0qyHKH83IQXI2Ii6HSmTrSaw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-projection/0.15.1-vstory.1: - resolution: {integrity: sha512-ybQEvqUMypFdr8K2bdeUEwXzX6fYTJWpFlh9WhJ6tLodsEBIfUu8fFIGxRSbfm6zRUu7iGXAF3evBh2VN/6sOg==} + /@visactor/vgrammar-projection/0.15.1-vstory.2: + resolution: {integrity: sha512-dy0YKyHV8qB+uXBwrQOzs4cqK/eGY6zdwfWP5NZniDv5kmvsycxMrK565S3Y5YZAsxXMVN4vwDtVabT3B3TnVg==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 '@visactor/vutils': 0.19.2 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.15.1-vstory.1: - resolution: {integrity: sha512-Qp/IySvtJS3lHoZ2PTgZQ7+0h3dxa6Mk4IhkEuDxemawVYnM2jO7F+Jd3I823EpXxcKzZ0DoUaRqeUegJHWsIA==} + /@visactor/vgrammar-sankey/0.15.1-vstory.2: + resolution: {integrity: sha512-24Cvog0F34nEepcv3PSEWPCJ+GxpMWFeBloLX/oD2LE/uX3CCTzRtnyp5zH9PgRW/wquGPjt3/+52R+dJF7olQ==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-util/0.15.1-vstory.1: - resolution: {integrity: sha512-AFcruOPkPVsBaOJ9Qsdp1Q8NjBYAePMZaB9IIoUQ2FVCebYrzXPctaGWJBYrlanp3CduBcU9w1AFW8Mdqn1qPg==} + /@visactor/vgrammar-util/0.15.1-vstory.2: + resolution: {integrity: sha512-dm1hC3bX0zyOa1QeocIDxlidQIPBox+acxfkN0Y2cw+6UZewk5VwBGpE4HH4boQyR92qX/jbQVe1dAqfkxrAeQ==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.1 + '@visactor/vrender-core': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-venn/0.15.1-vstory.1: - resolution: {integrity: sha512-1oAjNMytWPNrs69Q3ocUZWb6C0f1OSbdJYgeBTIYQ0sXTyRAlxbwl1uGmdOauRvnnP664KeXcJnlP37Sl5V1/A==} + /@visactor/vgrammar-venn/0.15.1-vstory.2: + resolution: {integrity: sha512-9PJTuDazSvwbiHvVmzPXvTcQlJ0t6Z+u2s/S4ka3/LuX7TXIn8lCb2Ry0vxZiyE9vsQDfDq9Njqgexp2FEE9yg==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud-shape/0.15.1-vstory.1: - resolution: {integrity: sha512-mk+b4fBj1iCa/1ke/4vBXWMLTdlpkEI0/j+IlYYixKc2Ywgi/G18tyd0cw8ShQUk96x+VvHkp6L53nefi0G3nA==} + /@visactor/vgrammar-wordcloud-shape/0.15.1-vstory.2: + resolution: {integrity: sha512-h+mdeb/drJZUxIBDxOHs2NPFC3pycl7GgxtxVohnu6TJQDLOHxk4/MANQHSgte3EY4z77WuHJKsLwWMwanBrVg==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud/0.15.1-vstory.1: - resolution: {integrity: sha512-UIr4q5aFN0abaUXhmN2lqijwsQVMBp+P7TGgJAUT3GQwq8q4QP+y+2DDkXDIJo7civ/vp4KHKuz0HcrUCLadRg==} + /@visactor/vgrammar-wordcloud/0.15.1-vstory.2: + resolution: {integrity: sha512-G/zjVhnYUxnWTX59ueTM2n9J2Bh7mtDJ4FmHwcIW8NC9m45stS+XEfRNR7Io4UgHEJUZyBd/tcoaWjPPKNkdag==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.1 - '@visactor/vgrammar-util': 0.15.1-vstory.1 - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vgrammar-core': 0.15.1-vstory.2 + '@visactor/vgrammar-util': 0.15.1-vstory.2 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false @@ -3880,11 +3880,11 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vrender-components/0.21.2-vstory.1: - resolution: {integrity: sha512-QcQc3e4jj7euJQWik4084i0NLmbImWuv3i9IoYHTFoG9hzCg2WB3ykdZDfUk6kD/+dY7s8t5C9SA4+U0u8gblQ==} + /@visactor/vrender-components/0.21.2-vstory.2: + resolution: {integrity: sha512-yJtw+JEPn8gOl9ycMoGSG61xONIF1Bsk1NdQZNgLj/wcKETdYkQE/Eo6612ViM+4aGd3O5Vqtnz1sViJX+oM3w==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false @@ -3903,8 +3903,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/0.21.2-vstory.1: - resolution: {integrity: sha512-7+bnDejovtGxg3oK7+s7SpJDozWO/G+8vEYLaJQe2yTm6tKy5+Cq1gFLOFyNoIbsNq8+OqlEXWDG/rGil1Xmfg==} + /@visactor/vrender-core/0.21.2-vstory.2: + resolution: {integrity: sha512-Iw0b85qp6v9uT5pXpx2TlCWXEkYqX2fOsT/A2dku9LAw6DBpP85MJn9pxR7JjRPyxc2XF6+8AYlozwFUV18IxQ==} dependencies: '@visactor/vutils': 0.19.2 color-convert: 2.0.1 @@ -3929,21 +3929,21 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/0.21.2-vstory.1: - resolution: {integrity: sha512-XkFe9aCSZAVRO6HmunrX5SudxDYoIKpaD6RDRrN5mfU7EJSLV+0qosrioB9t7zjOxVaoXGnAevbGaUU02ODiSA==} + /@visactor/vrender-kits/0.21.2-vstory.2: + resolution: {integrity: sha512-qGJhcRDj2qGnO4D5vWJuCkhW+J/7uajwn6QmVc/av1PLgwxJVUKBvUzriES7816/szY9dZXxUnWUFRNFpkVFCg==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.21.2-vstory.1 + '@visactor/vrender-core': 0.21.2-vstory.2 '@visactor/vutils': 0.19.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.21.2-vstory.1: - resolution: {integrity: sha512-8k3nbubw78M8Q7ZafEEjLNnGiNpXussfryk6C304MPYmTsJAMJNuwzYWtfv0Vtkw4lolbKNiPdEPtXm862teQg==} + /@visactor/vrender/0.21.2-vstory.2: + resolution: {integrity: sha512-b/CaoWVFU9es6/tVV9dUYZkpsS6V1Jtlb9yvO+k8YLwJnUfp3OSBFWqd3b6ttGZwmNl4lUi+fG+aJ24D1N88yQ==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.1 - '@visactor/vrender-kits': 0.21.2-vstory.1 + '@visactor/vrender-core': 0.21.2-vstory.2 + '@visactor/vrender-kits': 0.21.2-vstory.2 dev: false /@visactor/vscale/0.18.18: @@ -3983,8 +3983,8 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vutils-extension/1.13.1-vstory.1: - resolution: {integrity: sha512-aOqZ3AOYZCSsoTwgHPOWueUnC0PLqD+t6AzVujHzmGxuYy1lMe0N7PFhQFJXrI34n/qhuva2X973svbow/Bb8w==} + /@visactor/vutils-extension/1.13.1-vstory.2: + resolution: {integrity: sha512-tKlJk+FfxSpl+l+a7CIX09sdMvdRd+Bxh1jY1/pXChiuAMIwpbqYWkDan0WHYZRdMpNMmeDkeGqRU7V9SaVT0Q==} dependencies: '@visactor/vdataset': 0.19.2 '@visactor/vutils': 0.19.2 diff --git a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Get_VStory.md b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Get_VStory.md index 2651bd2f..a91074da 100644 --- a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Get_VStory.md +++ b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Get_VStory.md @@ -26,10 +26,10 @@ You can get VStory from the following free CDNs: ```html - + - + ``` ## Get from GitHub diff --git a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VStory.md b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VStory.md index b726aa29..6793e938 100644 --- a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VStory.md +++ b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VStory.md @@ -15,7 +15,7 @@ After we get the VStory file from [cdn](./How_to_Get_VStory#cdn-获取), we can
- + + ``` ## Import VStory @@ -33,7 +33,7 @@ You can also get the built VStory file through CDN. Add the following code to th Import VStory at the top of your JavaScript file using `import`: ```js -import VStory from '@visactor/vstory'; +import * as VStory from '@visactor/vstory'; ``` ### Import using script tag @@ -46,478 +46,7 @@ By adding a ` - - -``` - -## Place a Chart - -Before drawing the chart, we need to prepare a DOM container with a specific width and height for VStory. - -```html - - -
- -``` - -Next, we create a `VStory` instance, prepare a VChart chart with the DOM container's ID, generate DSL, and pass it in: - -```ts -// Register all necessary content -VStory.registerAll(); -// Prepare a VChart chart -const spec = { - data: [ - { - id: 'barData', - values: [ - { month: 'Monday', sales: 22 }, - { month: 'Tuesday', sales: 13 }, - { month: 'Wednesday', sales: 25 }, - { month: 'Thursday', sales: 29 }, - { month: 'Friday', sales: 38 } - ] - } - ], - type: 'bar', - xField: 'month', - yField: 'sales' -}; - -// Generate a DSL that only contains a VChart element -const dsl = { - characters: [ - { - type: 'VChart', - id: '0', - zIndex: 1, - // Position of the chart on the canvas - position: { - top: 50, - left: 50, - width: 300, - height: 300 - }, - options: { - // Configuration of the chart's background panel - panel: { - fill: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.05)', - shadowBlur: 10, - shadowOffsetX: 4, - shadowOffsetY: 4, - cornerRadius: 8 - } - }, - spec - } - ], - // Specific animation arrangement for the chart - acts: [ - // Array of chapters, a story can contain multiple chapters, and chapters are connected in a specific order - { - id: 'default-chapter', - scenes: [ - // Array of scenes, can contain multiple scenes, and scenes are connected in a specific order - { - id:'scene0', - // Array of actions in the scene, actions describe specific behaviors of one or more characters, and actions are executed in parallel within a scene - actions: [ - { - characterId: '0', - characterActions: [ - { - action: 'appear', - payload: { - animation: { - duration: 1000 - } - } - } - ] - } - ] - } - ] - } - ] -} - -// Create a VStory instance -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: 'pink' }); -const player = new VStory.Player(story); -story.init(player); - -player.play(0); -``` - -You have successfully drawn a simple bar chart using VStory! - -Hope this tutorial helps you learn how to use VStory. Now, you can try adding different types of elements and create more diverse storytelling effects by exploring the various configuration options of VStory. Start your VStory journey with courage!# Getting Started - -In this tutorial, we will introduce how to use VStory to draw a simple bar chart. VStory is a simple, easy-to-use, cross-platform, high-performance visualization storytelling library. It can combine all components in VisActor to create a powerful visual work. - -## Get VStory - -You can get VStory in the following ways: - -### Using NPM Package - -First, you need to install VStory in the project root directory using the following command: - -```sh -# Install using npm -npm install @visactor/vstory - -# Install using yarn -yarn add @visactor/vstory -``` - -### Using CDN - -You can also get the built VStory file through CDN. Add the following code to the ` -``` - -## Import VStory - -### Import via NPM Package - -Import VStory at the top of your JavaScript file using `import`: - -```js -import VStory from '@visactor/vstory'; -``` - -### Import using script tag - -By adding a ` - - -``` - -## Place a Chart - -Before drawing the chart, we need to prepare a DOM container with a specific width and height for VStory. - -```html - - -
- -``` - -Next, we create a `VStory` instance, prepare a VChart chart with the DOM container's ID, generate DSL, and pass it in: - -```ts -// Register all necessary content -VStory.registerAll(); -// Prepare a VChart chart -const spec = { - data: [ - { - id: 'barData', - values: [ - { month: 'Monday', sales: 22 }, - { month: 'Tuesday', sales: 13 }, - { month: 'Wednesday', sales: 25 }, - { month: 'Thursday', sales: 29 }, - { month: 'Friday', sales: 38 } - ] - } - ], - type: 'bar', - xField: 'month', - yField: 'sales' -}; - -// Generate a DSL that only contains a VChart element -const dsl = { - characters: [ - { - type: 'VChart', - id: '0', - zIndex: 1, - // Position of the chart on the canvas - position: { - top: 50, - left: 50, - width: 300, - height: 300 - }, - options: { - // Configuration of the chart's background panel - panel: { - fill: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.05)', - shadowBlur: 10, - shadowOffsetX: 4, - shadowOffsetY: 4, - cornerRadius: 8 - } - }, - spec - } - ], - // Specific animation arrangement for the chart - acts: [ - // Array of chapters, a story can contain multiple chapters, and chapters are connected in a specific order - { - id: 'default-chapter', - scenes: [ - // Array of scenes, can contain multiple scenes, and scenes are connected in a specific order - { - id:'scene0', - // Array of actions in the scene, actions describe specific behaviors of one or more characters, and actions are executed in parallel within a scene - actions: [ - { - characterId: '0', - characterActions: [ - { - action: 'appear', - payload: { - animation: { - duration: 1000 - } - } - } - ] - } - ] - } - ] - } - ] -} - -// Create a VStory instance -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: 'pink' }); -const player = new VStory.Player(story); -story.init(player); - -player.play(0); -``` - -You have successfully drawn a simple bar chart using VStory! - -Hope this tutorial helps you learn how to use VStory. Now, you can try adding different types of elements and create more diverse storytelling effects by exploring the various configuration options of VStory. Start your VStory journey with courage!# Getting Started - -In this tutorial, we will introduce how to use VStory to draw a simple bar chart. VStory is a simple, easy-to-use, cross-platform, high-performance visualization storytelling library. It can combine all components in VisActor to create a powerful visual work. - -## Get VStory - -You can get VStory in the following ways: - -### Using NPM Package - -First, you need to install VStory in the project root directory using the following command: - -```sh -# Install using npm -npm install @visactor/vstory - -# Install using yarn -yarn add @visactor/vstory -``` - -### Using CDN - -You can also get the built VStory file through CDN. Add the following code to the ` -``` - -## Import VStory - -### Import via NPM Package - -Import VStory at the top of your JavaScript file using `import`: - -```js -import VStory from '@visactor/vstory'; -``` - -### Import using script tag - -By adding a ` - - -``` - -## Place a Chart - -Before drawing the chart, we need to prepare a DOM container with a specific width and height for VStory. - -```html - - -
- -``` - -Next, we create a `VStory` instance, prepare a VChart chart with the DOM container's ID, generate DSL, and pass it in: - -```ts -// Register all necessary content -VStory.registerAll(); -// Prepare a VChart chart -const spec = { - data: [ - { - id: 'barData', - values: [ - { month: 'Monday', sales: 22 }, - { month: 'Tuesday', sales: 13 }, - { month: 'Wednesday', sales: 25 }, - { month: 'Thursday', sales: 29 }, - { month: 'Friday', sales: 38 } - ] - } - ], - type: 'bar', - xField: 'month', - yField: 'sales' -}; - -// Generate a DSL that only contains a VChart element -const dsl = { - characters: [ - { - type: 'VChart', - id: '0', - zIndex: 1, - // Position of the chart on the canvas - position: { - top: 50, - left: 50, - width: 300, - height: 300 - }, - options: { - // Configuration of the chart's background panel - panel: { - fill: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.05)', - shadowBlur: 10, - shadowOffsetX: 4, - shadowOffsetY: 4, - cornerRadius: 8 - } - }, - spec - } - ], - // Specific animation arrangement for the chart - acts: [ - // Array of chapters, a story can contain multiple chapters, and chapters are connected in a specific order - { - id: 'default-chapter', - scenes: [ - // Array of scenes, can contain multiple scenes, and scenes are connected in a specific order - { - id:'scene0', - // Array of actions in the scene, actions describe specific behaviors of one or more characters, and actions are executed in parallel within a scene - actions: [ - { - characterId: '0', - characterActions: [ - { - action: 'appear', - payload: { - animation: { - duration: 1000 - } - } - } - ] - } - ] - } - ] - } - ] -} - -// Create a VStory instance -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: 'pink' }); -const player = new VStory.Player(story); -story.init(player); - -player.play(0); -``` - -You have successfully drawn a simple bar chart using VStory! - -Hope this tutorial helps you learn how to use VStory. Now, you can try adding different types of elements and create more diverse storytelling effects by exploring the various configuration options of VStory. Start your VStory journey with courage!# Getting Started - -In this tutorial, we will introduce how to use VStory to draw a simple bar chart. VStory is a simple, easy-to-use, cross-platform, high-performance visualization storytelling library. It can combine all components in VisActor to create a powerful visual work. - -## Get VStory - -You can get VStory in the following ways: - -### Using NPM Package - -First, you need to install VStory in the project root directory using the following command: - -```sh -# Install using npm -npm install @visactor/vstory - -# Install using yarn -yarn add @visactor/vstory -``` - -### Using CDN - -You can also get the built VStory file through CDN. Add the following code to the ` -``` - -## Import VStory - -### Import via NPM Package - -Import VStory at the top of your JavaScript file using `import`: - -```js -import VStory from '@visactor/vstory'; -``` - -### Import using script tag - -By adding a ` + ``` diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Get_VStory.md b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Get_VStory.md index 1a244d6a..8f61fc26 100644 --- a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Get_VStory.md +++ b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Get_VStory.md @@ -26,10 +26,10 @@ $ yarn add @visactor/vstory ```html - + - + ``` ## GitHub 获取 diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VStory.md b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VStory.md index 0fcaacd1..7cc1c204 100644 --- a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VStory.md +++ b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VStory.md @@ -15,7 +15,7 @@
- + + ``` ## 引入 VStory @@ -33,7 +33,7 @@ yarn add @visactor/vstory 在 JavaScript 文件顶部使用 `import` 引入 VStory ```js -import VStory from '@visactor/vstory'; +import * as VStory from '@visactor/vstory'; ``` ### 使用 script 标签引入 @@ -46,7 +46,7 @@ import VStory from '@visactor/vstory'; - + ``` diff --git a/packages/vstory-animate/package.json b/packages/vstory-animate/package.json index 1b0ed5b0..ba04147c 100644 --- a/packages/vstory-animate/package.json +++ b/packages/vstory-animate/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-core/package.json b/packages/vstory-core/package.json index 09bda99d..73298e16 100644 --- a/packages/vstory-core/package.json +++ b/packages/vstory-core/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-editor/package.json b/packages/vstory-editor/package.json index 2488ead9..b4a97986 100644 --- a/packages/vstory-editor/package.json +++ b/packages/vstory-editor/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-external/package.json b/packages/vstory-external/package.json index d08c099c..4783f58f 100644 --- a/packages/vstory-external/package.json +++ b/packages/vstory-external/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-external/src/character/label-item/LabelItemComponent.ts b/packages/vstory-external/src/character/label-item/LabelItemComponent.ts new file mode 100644 index 00000000..a6246e54 --- /dev/null +++ b/packages/vstory-external/src/character/label-item/LabelItemComponent.ts @@ -0,0 +1,55 @@ +import { StoryLabelItem, type ComponentOptions } from '@visactor/vrender-components'; +import { merge } from '@visactor/vutils'; +import { BaseComponentWithText } from '@visactor/vstory-core'; +import type { ILabelItemComponentAttributes } from './label-item-interface'; + +export class PopTipComponent extends BaseComponentWithText { + static defaultAttributes: Partial = { + visible: true, + textStyle: {}, + width: 100, + height: 100, + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0 + } + }; + + vrComponent: StoryLabelItem; + + constructor(attributes: ILabelItemComponentAttributes, options?: ComponentOptions) { + super(options?.skipDefault ? attributes : merge({}, PopTipComponent.defaultAttributes, attributes)); + } + + protected render(): void { + super.render(); + // 添加pie + this.renderPopTip(); + } + protected renderPopTip() { + const { graphic, padding, width, height } = this.attribute as ILabelItemComponentAttributes; + const attrs = { ...graphic }; + if (!attrs.x) { + attrs.x = padding.left; + } + if (!attrs.y) { + attrs.y = padding.top; + } + if (!attrs.width) { + attrs.width = width - padding.left - padding.right; + } + if (!attrs.height) { + attrs.height = height - padding.top - padding.bottom; + } + const attribute: any = { ...attrs, scaleX: 1, scaleY: 1, angle: 0, postMatrix: null }; + if (!this.vrComponent) { + const labelItem = new StoryLabelItem(attribute); + this.vrComponent = labelItem; + this.addChild(labelItem); + } else { + this.vrComponent.setAttributes(attribute); + } + } +} diff --git a/packages/vstory-external/src/character/label-item/constant.ts b/packages/vstory-external/src/character/label-item/constant.ts new file mode 100644 index 00000000..e593556f --- /dev/null +++ b/packages/vstory-external/src/character/label-item/constant.ts @@ -0,0 +1 @@ +export const LABEL_ITEM = 'LabelItem'; diff --git a/packages/vstory-external/src/character/label-item/label-item-character.ts b/packages/vstory-external/src/character/label-item/label-item-character.ts new file mode 100644 index 00000000..fc81d297 --- /dev/null +++ b/packages/vstory-external/src/character/label-item/label-item-character.ts @@ -0,0 +1,45 @@ +import type { IGroup } from '@visactor/vrender-core'; +import type { IComponentCharacterRuntimeConstructor } from '@visactor/vstory-core'; +import { CharacterComponent } from '@visactor/vstory-core'; +import { PopTipComponent } from './LabelItemComponent'; +import type { ILabelItemComponentAttributes } from './label-item-interface'; +import { LabelItemRuntime } from './label-item-runtime'; +import { LABEL_ITEM } from './constant'; + +export class LabelItemCharacter extends CharacterComponent { + static type = LABEL_ITEM; + + protected _group: IGroup; + + static RunTime: IComponentCharacterRuntimeConstructor[] = [LabelItemRuntime]; + + protected createAndAddGraphic(attribute: ILabelItemComponentAttributes): void { + this._graphic = new PopTipComponent(attribute); + this.canvas.addGraphic(this._graphic); + } + + protected _initRuntime(): void { + LabelItemCharacter.RunTime.forEach(R => { + this._runtime.push(new R(this)); + }); + } + + protected getDefaultAttribute(): Partial { + return { + ...super.getDefaultAttribute(), + width: 100, + height: 100 + }; + } + + protected _clearGraphic(): void { + super._clearGraphic(); + } + + show() { + this._graphic.setAttribute('visibleAll', true); + } + hide() { + this._graphic.setAttribute('visibleAll', false); + } +} diff --git a/packages/vstory-external/src/character/label-item/label-item-interface.ts b/packages/vstory-external/src/character/label-item/label-item-interface.ts new file mode 100644 index 00000000..4909c4cc --- /dev/null +++ b/packages/vstory-external/src/character/label-item/label-item-interface.ts @@ -0,0 +1,37 @@ +import type { + IArcGraphicAttribute, + IGroupGraphicAttribute, + IRichTextAttribute, + ITextGraphicAttribute +} from '@visactor/vrender-core'; +import type { IStoryLabelItemAttrs, PopTipAttributes } from '@visactor/vrender-components'; +import type { ICharacter, IComponentCharacterConfig } from '@visactor/vstory-core'; + +// graphic 配置 +export interface ILabelItemComponentAttributes extends IGroupGraphicAttribute { + // 结合富文本textConfig的文本配置 + textStyle?: Partial; + graphic?: IStoryLabelItemAttrs; + /** + * 内部边距 + */ + padding?: { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; +} + +interface ILabelItemCharacterConfig extends IComponentCharacterConfig { + options: { + text?: Partial; + graphic: IGroupGraphicAttribute & ILabelItemComponentAttributes; + panel?: IGroupGraphicAttribute; + padding?: { left: number; top: number; right: number; bottom: number }; + }; +} + +export interface ICharacterLabelItem extends ICharacter { + config: ILabelItemCharacterConfig; +} diff --git a/packages/vstory-external/src/character/label-item/label-item-runtime.ts b/packages/vstory-external/src/character/label-item/label-item-runtime.ts new file mode 100644 index 00000000..3a0b50b4 --- /dev/null +++ b/packages/vstory-external/src/character/label-item/label-item-runtime.ts @@ -0,0 +1,7 @@ +import type { IComponentCharacterRuntime } from '@visactor/vstory-core'; +import { BaseRuntime } from '@visactor/vstory-core'; +import { LABEL_ITEM } from './constant'; + +export class LabelItemRuntime extends BaseRuntime implements IComponentCharacterRuntime { + type = LABEL_ITEM; +} diff --git a/packages/vstory-external/src/character/label-item/register.ts b/packages/vstory-external/src/character/label-item/register.ts new file mode 100644 index 00000000..5691d7fa --- /dev/null +++ b/packages/vstory-external/src/character/label-item/register.ts @@ -0,0 +1,6 @@ +import { StoryFactory } from '@visactor/vstory-core'; +import { LabelItemCharacter } from './label-item-character'; + +export function registerLabelItem() { + StoryFactory.registerCharacter(LabelItemCharacter.type, LabelItemCharacter); +} diff --git a/packages/vstory-external/src/character/poptip/PopTipComponent.ts b/packages/vstory-external/src/character/poptip/PopTipComponent.ts new file mode 100644 index 00000000..60104295 --- /dev/null +++ b/packages/vstory-external/src/character/poptip/PopTipComponent.ts @@ -0,0 +1,60 @@ +import { AbstractComponent, PopTip, type ComponentOptions } from '@visactor/vrender-components'; +import { merge } from '@visactor/vutils'; +import { BaseComponentWithText } from '@visactor/vstory-core'; +import type { IPopTipComponentAttributes } from './poptip-interface'; + +export class PopTipComponent extends BaseComponentWithText { + static defaultAttributes: Partial = { + visible: true, + textStyle: {}, + width: 100, + height: 100, + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0 + }, + graphic: { + panel: { + visible: true + } + } + }; + + vrComponent: PopTip; + + constructor(attributes: IPopTipComponentAttributes, options?: ComponentOptions) { + super(options?.skipDefault ? attributes : merge({}, PopTipComponent.defaultAttributes, attributes)); + } + + protected render(): void { + super.render(); + // 添加pie + this.renderPopTip(); + } + protected renderPopTip() { + const { graphic, padding, width, height } = this.attribute as IPopTipComponentAttributes; + const attrs = { ...graphic }; + if (!attrs.x) { + attrs.x = padding.left; + } + if (!attrs.y) { + attrs.y = padding.top; + } + if (!attrs.width) { + attrs.width = width - padding.left - padding.right; + } + if (!attrs.height) { + attrs.height = height - padding.top - padding.bottom; + } + const attribute: any = { ...attrs, scaleX: 1, scaleY: 1, angle: 0, postMatrix: null }; + if (!this.vrComponent) { + const poptip = new PopTip(attribute); + this.vrComponent = poptip; + this.addChild(poptip); + } else { + this.vrComponent.setAttributes(attribute); + } + } +} diff --git a/packages/vstory-external/src/character/poptip/constant.ts b/packages/vstory-external/src/character/poptip/constant.ts new file mode 100644 index 00000000..51999dfc --- /dev/null +++ b/packages/vstory-external/src/character/poptip/constant.ts @@ -0,0 +1 @@ +export const POPTIP = 'PopTip'; diff --git a/packages/vstory-external/src/character/poptip/poptip-character.ts b/packages/vstory-external/src/character/poptip/poptip-character.ts new file mode 100644 index 00000000..95cf506f --- /dev/null +++ b/packages/vstory-external/src/character/poptip/poptip-character.ts @@ -0,0 +1,45 @@ +import type { IGroup } from '@visactor/vrender-core'; +import type { IComponentCharacterRuntimeConstructor } from '@visactor/vstory-core'; +import { CharacterComponent } from '@visactor/vstory-core'; +import { PopTipComponent } from './PopTipComponent'; +import type { IPopTipComponentAttributes } from './poptip-interface'; +import { PopTipRuntime } from './poptip-runtime'; +import { POPTIP } from './constant'; + +export class PopTipCharacter extends CharacterComponent { + static type = POPTIP; + + protected _group: IGroup; + + static RunTime: IComponentCharacterRuntimeConstructor[] = [PopTipRuntime]; + + protected createAndAddGraphic(attribute: IPopTipComponentAttributes): void { + this._graphic = new PopTipComponent(attribute); + this.canvas.addGraphic(this._graphic); + } + + protected _initRuntime(): void { + PopTipCharacter.RunTime.forEach(R => { + this._runtime.push(new R(this)); + }); + } + + protected getDefaultAttribute(): Partial { + return { + ...super.getDefaultAttribute(), + width: 100, + height: 100 + }; + } + + protected _clearGraphic(): void { + super._clearGraphic(); + } + + show() { + this._graphic.setAttribute('visibleAll', true); + } + hide() { + this._graphic.setAttribute('visibleAll', false); + } +} diff --git a/packages/vstory-external/src/character/poptip/poptip-interface.ts b/packages/vstory-external/src/character/poptip/poptip-interface.ts new file mode 100644 index 00000000..3b25cfd2 --- /dev/null +++ b/packages/vstory-external/src/character/poptip/poptip-interface.ts @@ -0,0 +1,37 @@ +import type { + IArcGraphicAttribute, + IGroupGraphicAttribute, + IRichTextAttribute, + ITextGraphicAttribute +} from '@visactor/vrender-core'; +import type { PopTipAttributes } from '@visactor/vrender-components'; +import type { ICharacter, IComponentCharacterConfig } from '@visactor/vstory-core'; + +// graphic 配置 +export interface IPopTipComponentAttributes extends IGroupGraphicAttribute { + // 结合富文本textConfig的文本配置 + textStyle?: Partial; + graphic?: PopTipAttributes; + /** + * 内部边距 + */ + padding?: { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; +} + +interface IPopTipCharacterConfig extends IComponentCharacterConfig { + options: { + text?: Partial; + graphic: IGroupGraphicAttribute & IPopTipComponentAttributes; + panel?: IGroupGraphicAttribute; + padding?: { left: number; top: number; right: number; bottom: number }; + }; +} + +export interface ICharacterPopTip extends ICharacter { + config: IPopTipCharacterConfig; +} diff --git a/packages/vstory-external/src/character/poptip/poptip-runtime.ts b/packages/vstory-external/src/character/poptip/poptip-runtime.ts new file mode 100644 index 00000000..03d5b7f8 --- /dev/null +++ b/packages/vstory-external/src/character/poptip/poptip-runtime.ts @@ -0,0 +1,7 @@ +import type { IComponentCharacterRuntime } from '@visactor/vstory-core'; +import { BaseRuntime } from '@visactor/vstory-core'; +import { POPTIP } from './constant'; + +export class PopTipRuntime extends BaseRuntime implements IComponentCharacterRuntime { + type = POPTIP; +} diff --git a/packages/vstory-external/src/character/poptip/register.ts b/packages/vstory-external/src/character/poptip/register.ts new file mode 100644 index 00000000..84726f49 --- /dev/null +++ b/packages/vstory-external/src/character/poptip/register.ts @@ -0,0 +1,6 @@ +import { StoryFactory } from '@visactor/vstory-core'; +import { PopTipCharacter } from './poptip-character'; + +export function registerPopTip() { + StoryFactory.registerCharacter(PopTipCharacter.type, PopTipCharacter); +} diff --git a/packages/vstory-external/src/index.ts b/packages/vstory-external/src/index.ts index b0788ed7..72c324e3 100644 --- a/packages/vstory-external/src/index.ts +++ b/packages/vstory-external/src/index.ts @@ -6,3 +6,9 @@ export * from './processor/single-pie/register'; export * from './character/dynamic-line/register'; export * from './processor/dynamic-line/register'; + +export * from './character/poptip/register'; +export * from './processor/poptip/register'; + +export * from './character/label-item/register'; +export * from './processor/label-item/register'; diff --git a/packages/vstory-external/src/processor/label-item/interface.ts b/packages/vstory-external/src/processor/label-item/interface.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/vstory-external/src/processor/label-item/label-item-visibility.ts b/packages/vstory-external/src/processor/label-item/label-item-visibility.ts new file mode 100644 index 00000000..37f1f04f --- /dev/null +++ b/packages/vstory-external/src/processor/label-item/label-item-visibility.ts @@ -0,0 +1,59 @@ +import { globalProcessorRegistry } from '@visactor/vstory-core'; +import type { IArc } from '@visactor/vrender-core'; +import { + ACTION_TYPE, + BaseVisibility, + CommonBounceActionProcessor, + CommonMoveToActionProcessor, + CommonScaleToActionProcessor, + CommonStyleActionProcessor, + CommonVisibilityActionProcessor +} from '@visactor/vstory-player'; +import { LABEL_ITEM } from '../../character/label-item/constant'; + +export class DefaultVisibility extends BaseVisibility { + protected _setInitAttributes(graphic: IArc, params: any, appear: boolean) { + if (!appear) { + return; + } + // todo 添加appear属性的初始化逻辑 + } + + protected _run(graphic: IArc, params: any, appear: boolean) { + if (appear && graphic && graphic.appearAnimate) { + graphic.appearAnimate(params); + } else if (!appear && graphic && graphic.disappearAnimate) { + graphic.disappearAnimate(params); + } + + return true; + } +} + +const defaultInstance = new DefaultVisibility(); + +export class LabelItemVisibilityActionProcessor extends CommonVisibilityActionProcessor { + name: string = 'appearOrDisAppear'; + constructor() { + super(); + } + + getEffectInstance(effect: string, appear: boolean) { + switch (effect) { + case 'default': + return defaultInstance; + } + return super.getEffectInstance(effect, appear); + } +} + +export function registerLabelItemVisibilityAction() { + globalProcessorRegistry.registerProcessor(LABEL_ITEM, { + [ACTION_TYPE.APPEAR]: new LabelItemVisibilityActionProcessor(), + [ACTION_TYPE.DISAPPEAR]: new LabelItemVisibilityActionProcessor(), + [ACTION_TYPE.STYLE]: new CommonStyleActionProcessor(), + [ACTION_TYPE.MOVETO]: new CommonMoveToActionProcessor(), + [ACTION_TYPE.SCALETO]: new CommonScaleToActionProcessor(), + [ACTION_TYPE.BOUNCE]: new CommonBounceActionProcessor() + }); +} diff --git a/packages/vstory-external/src/processor/label-item/register.ts b/packages/vstory-external/src/processor/label-item/register.ts new file mode 100644 index 00000000..4c513c2e --- /dev/null +++ b/packages/vstory-external/src/processor/label-item/register.ts @@ -0,0 +1,5 @@ +import { registerLabelItemVisibilityAction } from './label-item-visibility'; + +export function registerLabelItemAction() { + registerLabelItemVisibilityAction(); +} diff --git a/packages/vstory-external/src/processor/poptip/interface.ts b/packages/vstory-external/src/processor/poptip/interface.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/vstory-external/src/processor/poptip/poptip-visibility.ts b/packages/vstory-external/src/processor/poptip/poptip-visibility.ts new file mode 100644 index 00000000..536f5c96 --- /dev/null +++ b/packages/vstory-external/src/processor/poptip/poptip-visibility.ts @@ -0,0 +1,59 @@ +import { globalProcessorRegistry } from '@visactor/vstory-core'; +import type { IArc } from '@visactor/vrender-core'; +import { + ACTION_TYPE, + BaseVisibility, + CommonBounceActionProcessor, + CommonMoveToActionProcessor, + CommonScaleToActionProcessor, + CommonStyleActionProcessor, + CommonVisibilityActionProcessor +} from '@visactor/vstory-player'; +import { POPTIP } from '../../character/poptip/constant'; + +export class DefaultVisibility extends BaseVisibility { + protected _setInitAttributes(graphic: IArc, params: any, appear: boolean) { + if (!appear) { + return; + } + // todo 添加appear属性的初始化逻辑 + } + + protected _run(graphic: IArc, params: any, appear: boolean) { + if (appear && graphic && graphic.appearAnimate) { + graphic.appearAnimate(params); + } else if (!appear && graphic && graphic.disappearAnimate) { + graphic.disappearAnimate(params); + } + + return true; + } +} + +const defaultInstance = new DefaultVisibility(); + +export class PoptipVisibilityActionProcessor extends CommonVisibilityActionProcessor { + name: string = 'appearOrDisAppear'; + constructor() { + super(); + } + + getEffectInstance(effect: string, appear: boolean) { + switch (effect) { + case 'default': + return defaultInstance; + } + return super.getEffectInstance(effect, appear); + } +} + +export function registerPopTipVisibilityAction() { + globalProcessorRegistry.registerProcessor(POPTIP, { + [ACTION_TYPE.APPEAR]: new PoptipVisibilityActionProcessor(), + [ACTION_TYPE.DISAPPEAR]: new PoptipVisibilityActionProcessor(), + [ACTION_TYPE.STYLE]: new CommonStyleActionProcessor(), + [ACTION_TYPE.MOVETO]: new CommonMoveToActionProcessor(), + [ACTION_TYPE.SCALETO]: new CommonScaleToActionProcessor(), + [ACTION_TYPE.BOUNCE]: new CommonBounceActionProcessor() + }); +} diff --git a/packages/vstory-external/src/processor/poptip/register.ts b/packages/vstory-external/src/processor/poptip/register.ts new file mode 100644 index 00000000..91199afb --- /dev/null +++ b/packages/vstory-external/src/processor/poptip/register.ts @@ -0,0 +1,5 @@ +import { registerPopTipVisibilityAction } from './poptip-visibility'; + +export function registerPopTipAction() { + registerPopTipVisibilityAction(); +} diff --git a/packages/vstory-player/package.json b/packages/vstory-player/package.json index 714b25e9..def1747b 100644 --- a/packages/vstory-player/package.json +++ b/packages/vstory-player/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-templates/package.json b/packages/vstory-templates/package.json index 2643d187..52dd8419 100644 --- a/packages/vstory-templates/package.json +++ b/packages/vstory-templates/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.1", + "@visactor/vchart": "1.13.1-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.1", - "@visactor/vrender-core": "0.21.2-vstory.1", - "@visactor/vrender-kits": "0.21.2-vstory.1", - "@visactor/vrender-components": "0.21.2-vstory.1", + "@visactor/vrender": "0.21.2-vstory.2", + "@visactor/vrender-core": "0.21.2-vstory.2", + "@visactor/vrender-kits": "0.21.2-vstory.2", + "@visactor/vrender-components": "0.21.2-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 7305e5bf..da1686bf 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -33,6 +33,8 @@ import { Pie1 } from './demos/arrange/Pie1'; import { UnitTemplate2 } from './demos/templates/unit-template2'; import { ReadyToEat } from './demos/infographic/ready-to-eat'; import { FamousTravel } from './demos/infographic/famous-travel'; +import { PopTipAnimate } from './demos/component/poptip'; +import { LabelItemAnimate } from './demos/component/label-item'; type MenusType = ( | { @@ -173,6 +175,14 @@ const App = () => { { name: 'SinglePie', component: SinglePie + }, + { + name: 'PopTip', + component: PopTipAnimate + }, + { + name: 'LabelItemAnimate', + component: LabelItemAnimate } ] }, diff --git a/packages/vstory/demo/src/demos/component/label-item.tsx b/packages/vstory/demo/src/demos/component/label-item.tsx new file mode 100644 index 00000000..ab3b6144 --- /dev/null +++ b/packages/vstory/demo/src/demos/component/label-item.tsx @@ -0,0 +1,150 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerLabelItem, registerLabelItemAction } from '../../../../../vstory-external/src'; +import { registerAll } from '../../../../src'; + +registerAll(); +registerLabelItem(); +registerLabelItemAction(); + +export const LabelItemAnimate = () => { + const id = 'LabelItemAnimate'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const story = new Story(null, { canvas, width: 1300, height: 500, background: 'pink' }); + const player = new Player(story); + story.init(player); + + const l1 = { + contentOffsetX: 200, + contentOffsetY: -60, + titleSpace: [0, 3], + titleTop: 'Powered By VisActor' + }; + const l2 = { + contentOffsetX: 200, + contentOffsetY: -60, + titleSpace: [0, 3], + titleTop: 'Powered By VisActor', + titleBottom: 'this is the VStory label', + titleBottomStyle: { + fontSize: 10 + } + }; + const l3 = { + contentOffsetX: 200, + contentOffsetY: -60, + titleSpace: [6, 6], + titleTop: 'Powered By VisActor', + titleTopStyle: { + fontSize: 12, + fill: 'black' + }, + titleTopPanelStyle: { + fill: 'white', + visible: true, + padding: { top: 3, bottom: 3 } + } + }; + + const l4 = { + contentOffsetX: 200, + contentOffsetY: -60, + titleSpace: [6, 6], + titleTop: 'Powered By VisActor', + titleTopStyle: { + fontSize: 12, + fill: 'black' + }, + titleBottom: 'this is the VStory label', + titleBottomStyle: { + fontSize: 10, + fill: 'black' + }, + titleTopPanelStyle: { + fill: 'white', + visible: true, + padding: { top: 3, bottom: 3 } + }, + titleBottomPanelStyle: { + fill: 'white', + visible: true, + padding: { top: 3, bottom: 6 } + } + }; + + const l5 = { + contentOffsetX: 200, + contentOffsetY: -60, + titleTop: 'Powered By VisActor', + titleTopStyle: { + fontSize: 12 + }, + titleTopPanelStyle: { + stroke: 'white', + visible: true + // padding: { top: 3, bottom: 3 } + }, + theme: 'simple' + }; + + [l1, l2, l3, l4, l5, l1, l2, l3, l4, l5].forEach((item, index) => { + story.addCharacter( + { + type: 'LabelItem', + id: `label-item-${index}`, + zIndex: 1, + position: { + top: 100 + Math.floor(index / 5) * 200, + left: 50 + (index % 5) * 230 + }, + options: { + graphic: item + } + }, + { + sceneId: 'defaultScene', + actions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + animation: { + duration: 1000, + easing: 'cubicIn', + symbolStartOuterType: Math.floor(index / 5) === 0 ? 'scale' : 'clipRange', + titleType: Math.floor(index / 5) === 0 ? 'move' : 'typewriter', + titlePanelType: index === 4 ? 'stroke' : 'scale' + } + } + ] + }, + { + startTime: 2000, + action: 'disappear', + payload: { + animation: { + duration: 700, + easing: 'cubicIn', + mode: Math.floor(index / 5) === 0 ? 'default' : 'scale' + } + } + } + ] + } + ); + }); + + player.play(0); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/component/poptip.tsx b/packages/vstory/demo/src/demos/component/poptip.tsx new file mode 100644 index 00000000..011772af --- /dev/null +++ b/packages/vstory/demo/src/demos/component/poptip.tsx @@ -0,0 +1,180 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; +import { registerPopTip, registerPopTipAction } from '../../../../../vstory-external/src'; +import { registerAll } from '../../../../src'; + +registerAll(); +registerPopTip(); +registerPopTipAction(); + +export const PopTipAnimate = () => { + const id = 'PopTipAnimate'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const story = new Story(null, { canvas, width: 800, height: 500, background: 'pink' }); + const player = new Player(story); + story.init(player); + + const panelStyle = { + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + fill: 'white', + cornerRadius: 4, + size: 9 + }; + const commonStyle = { + content: '$123,45', + position: 'tl', + padding: { top: 6, bottom: 6, left: 6, right: 6 }, + contentStyle: { + fontSize: 12, + fill: '#08979c' + } + }; + + const p1 = { + ...commonStyle, + panel: { + ...panelStyle + } + }; + const p2 = { + ...commonStyle, + triangleMode: 'concise', + panel: { + ...panelStyle, + cornerRadius: 0 + } + }; + const p3 = { + ...commonStyle, + triangleMode: 'concise', + panel: { + ...panelStyle, + fill: false, + stroke: 'white', + cornerRadius: 0, + size: 0 + } + }; + const p4 = { + ...commonStyle, + position: 'top', + panel: { + ...panelStyle, + square: true, + cornerRadius: 100, + size: 12 + } + }; + + const p5 = { + content: '123,45', + padding: { top: 3, bottom: 3, left: 12, right: 6 }, + contentStyle: { + fontSize: 12, + fill: '#08979c' + }, + panel: { + ...panelStyle, + cornerRadius: [0, 20, 20, 0] + }, + logoSymbol: { + symbolType: 'circle', + fill: 'red', + size: 'auto' + }, + logoText: '$', + logoTextStyle: { + fill: 'white', + fontSize: 12 + } + }; + + const p6 = { + content: '123,45', + position: 'right', + padding: { top: 3, bottom: 3, left: 13, right: 8 }, + contentStyle: { + fontSize: 12, + fill: '#08979c' + }, + panel: { + ...panelStyle, + cornerRadius: [0, 0, 6, 0], + cornerType: 'bevel', + size: 0 + }, + logoSymbol: { + symbolType: 'rect', + fill: 'red', + size: [20, 'auto'], + cornerType: 'bevel' + }, + logoText: '🤡', + logoTextStyle: { + fill: 'white', + fontSize: 12 + } + }; + + [p1, p2, p3, p4, p5, p6].forEach((item, index) => { + story.addCharacter( + { + type: 'PopTip', + id: `poptip-${index}`, + zIndex: 1, + position: { + top: 100, + left: 50 + index * 120 + }, + options: { + graphic: item + } + }, + { + sceneId: 'defaultScene', + actions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + animation: { + duration: 300, + easing: 'quadOut', + wave: 0.3 + } + } + ] + }, + { + startTime: 1000, + action: 'disappear', + payload: { + animation: { + duration: 300, + easing: 'aIn3' + } + } + } + ] + } + ); + }); + + player.play(0); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/works/some-charts.tsx b/packages/vstory/demo/src/demos/works/some-charts.tsx index 58250d9a..7471df45 100644 --- a/packages/vstory/demo/src/demos/works/some-charts.tsx +++ b/packages/vstory/demo/src/demos/works/some-charts.tsx @@ -62,6 +62,9 @@ const getChartSpec = (i: number, showLeftAxis: boolean) => { position: 'top', overlap: false }, + // tooltip: { + // visible: false, + // }, axes: [ { orient: 'left', @@ -136,7 +139,11 @@ export const SomeCharts = () => { // fill: 'red', // cornerRadius: 10 // }, - spec: getChartSpec(index, index === 0) + spec: getChartSpec(index, index === 0), + initOption: { + disableTriggerEvent: false, + interactive: true + } } }, {